From d28c6ce329496fc0d285f2f045a8c8d798847490 Mon Sep 17 00:00:00 2001 From: chengdandan <2549057906@qq.com> Date: Mon, 27 Feb 2023 18:10:29 +0800 Subject: [PATCH] 2023022702 --- src/components/chart/lineChart.vue | 18 ++- src/components/target/typeChart.vue | 8 +- src/views/bounced/dataBoard.vue | 187 ++++++++++++++++++---------- src/views/index.vue | 2 + 4 files changed, 144 insertions(+), 71 deletions(-) diff --git a/src/components/chart/lineChart.vue b/src/components/chart/lineChart.vue index e4fe144d..9a136b97 100644 --- a/src/components/chart/lineChart.vue +++ b/src/components/chart/lineChart.vue @@ -73,7 +73,7 @@ export default { }, methods: { - drawLine(newVal, title) { + drawLine(newVal, title,timeMode) { let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart); if (myChart == null) { myChart = this.$echarts.init(this.$refs.lineChart); @@ -138,7 +138,7 @@ export default { } } ], - series: this.getMessage(newVal, title) + series: this.getMessage(newVal, title,timeMode) }; myChart.setOption(option); window.addEventListener('resize', function() { @@ -153,7 +153,7 @@ export default { }, - getMessage(newVal, title) { + getMessage(newVal, title,timeMode) { if(newVal){ this.xData = newVal.map(val => { return val.time; @@ -236,6 +236,11 @@ export default { // console.log("newVal",newVal) series[0].data = newVal.map(val => { return val.speed; + // if(timeMode=='周期统计'){ + // return val.ave_speed; + // }else{ + // return val.speed; + // } }); } else if (title === '流量') { series[0].data = newVal.map(ele => { @@ -248,7 +253,12 @@ export default { confine: true }; series[0].data = newVal.map(val => { - return val.headway; + if(timeMode=='周期统计'){ + return val.ave_headway; + }else{ + return val.headway; + } + }); } else if (title === '排队数') { series[0].data = newVal.map(val => { diff --git a/src/components/target/typeChart.vue b/src/components/target/typeChart.vue index a93579dc..296c99c7 100644 --- a/src/components/target/typeChart.vue +++ b/src/components/target/typeChart.vue @@ -192,12 +192,16 @@ export default { }, // 计算类型的数值 getNewQueue(val) { - + if (val[0].n_queue) { this.queue = val[0].n_queue; } else if (val[0].ave_queue) { this.queue = val[0].ave_queue; - } + } else if (val[0].headway) { + this.newDataArr[0].headway = val[0].headway; + } else if (val[0].ave_headway) { + this.newDataArr[0].headway = val[0].ave_headway; + } }, }, diff --git a/src/views/bounced/dataBoard.vue b/src/views/bounced/dataBoard.vue index e53d544b..098489e4 100644 --- a/src/views/bounced/dataBoard.vue +++ b/src/views/bounced/dataBoard.vue @@ -210,57 +210,10 @@ export default { this.classify.push(val); item.children.push(val); if(val.timeMode=='周期统计'||this.cycleStatisticsData.length==0){ - this.cycleStatisticsData = item.cycleStatisticsData - var _that = this - _that.componentList.forEach(ele => { - if ( ele.timeMode == '周期统计') { - if (ele.cycleStatisticsData.length == 10) { - ele.cycleStatisticsData.pop(); - } else { - // item.time = item.time.split('.')[0]; - // _that.typeCycleStatistics = item; - ele.cycleStatisticsData.unshift(); - if(_that.$refs.typeChartRef2!=undefined){ - for (let i = 0; i < _that.$refs.typeChartRef2.length; i++) { - let itemTypeChartRef2 = _that.$refs.typeChartRef2[i]; - // console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据'); - if (itemTypeChartRef2.length!=0&&itemTypeChartRef2.dataArr!= undefined && itemTypeChartRef2.dataArr.length != 0) { - // this.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(this.$refs.typeChartRef2[i].dataArr, _this.$refs.typeChartRe2f[i].componentName.split('_')[0]) - if (itemTypeChartRef2.echartArr.includes('时间曲线图')) { - _that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(_that.$refs.typeChartRef2[i].dataArr, _that.$refs.typeChartRef2[i].componentName.split('_')[0]) - } - if (itemTypeChartRef2.echartArr.includes('数值')) { - _that.$refs.typeChartRef2[i].getDataArr(_that.$refs.typeChartRef2[i].dataArr) - } - // console.log(item,'组件数据'); - if (itemTypeChartRef2.echartArr.includes('直方图')&&itemTypeChartRef2.$refs.barChartRef.drawBar) { - // 数据改变重新渲染柱状图 - // console.log(item, '组件'); - itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0]) - } - if (itemTypeChartRef2.echartArr.includes('饼状图')&&itemTypeChartRef2.$refs.pieChartRef.drawPie) { - // 数据改变重新渲染饼图 - itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0]) - } - - // if (item.echartArr.includes('均值图') && item.$refs.avgChartRef != undefined && item.dataArr.length != 0) { - // item.$refs.avgChartRef.drawBar(item.dataArr[0]) - // } - if (itemTypeChartRef2.echartArr.includes('均值图') && itemTypeChartRef2.$refs.avgChartRef != undefined) { - itemTypeChartRef2.$refs.avgChartRef.drawBar(itemTypeChartRef2.dataArr[0]) - } - } - - } - } - - } - } - - }); + item.cycleStatisticsData = val.cycleStatisticsData } if(val.timeMode=='周期时刻'||this.cycleTimeData.length==0){ - this.cycleTimeData = item.cycleTimeData + item.cycleTimeData = val.cycleTimeData } } @@ -319,6 +272,108 @@ export default { handler(newVal, oldVal) {}, immediate: true }, + componentList:{ + handler(newVal) { + console.log("componentList",newVal) + + if (newVal!= undefined&&newVal.length != 0 ) { + newVal.forEach(ele => { + // if( ele.timeMode == '周期统计'){ + // var thatNN = this; + // if (ele.cycleTimeData.length == 10) { + // ele.cycleTimeData.pop(); + // } else { + // ele.cycleStatisticsData.forEach(item => { + // if (item.type_data != null) { + // // 周期时刻的类型数据 + // thatNN.typeCycleStatistics = item; + // } + // ele.cycleStatisticsData.unshift(item); + // // thatN.$nextTick(() => { + // if(thatNN.$refs.itemTypeChartRef2!=undefined){ + + // // 轮循周期时刻生成的各类组件 + // for (let i = 0; i < thatNN.$refs.itemTypeChartRef2.length; i++) { + // let itemTypeChartRef2 = thatNN.$refs.typeChartRef1[i] + // if (itemTypeChartRef2.length!=0&&itemTypeChartRef2.dataArr!= undefined && itemTypeChartRef2.dataArr.length != 0) { + + // if (itemTypeChartRef2.echartArr.includes('时间曲线图')) { + // thatNN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(thatNN.$refs.typeChartRef1[i].dataArr, thatNN.$refs.typeChartRef1[i].componentName.split('_')[0],'周期统计') + // } + // if (itemTypeChartRef2.echartArr.includes('数值')) { + // thatNN.$refs.typeChartRef1[i].getDataArr(thatNN.$refs.typeChartRef1[i].dataArr) + // } + + // if (itemTypeChartRef2.echartArr.includes('直方图') &&itemTypeChartRef2.$refs.barChartRef.drawBar) { + // // 数据改变重新渲染柱状图 + // itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0]) + // } + // if (itemTypeChartRef2.echartArr.includes('饼状图') &&itemTypeChartRef2.$refs.pieChartRef.drawPie) { + // // 数据改变重新渲染饼图 + // itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0]) + // } + // if (itemTypeChartRef2.echartArr.includes('均值图') && itemTypeChartRef2.$refs.avgChartRef != undefined) { + // itemTypeChartRef2.$refs.avgChartRef.drawBar(itemTypeChartRef2.dataArr[0]) + // } + // } + // } + // } + // }) + // } + // } + // if ( ele.timeMode == '周期时刻') { + // var thatN = this; + // if (ele.cycleTimeData.length == 10) { + // ele.cycleTimeData.pop(); + // } else { + // ele.cycleTimeData.forEach(item => { + // if (item.type_data != null) { + // // 周期时刻的类型数据 + // thatN.typeCycleTimeData = item; + // } + // ele.cycleTimeData.unshift(item); + // // thatN.$nextTick(() => { + // if(thatN.$refs.typeChartRef1!=undefined){ + // // console.log("thatN.$refs.typeChartRef1",thatN.$refs.typeChartRef1) + // // 轮循周期时刻生成的各类组件 + // for (let i = 0; i < thatN.$refs.typeChartRef1.length; i++) { + // let itemTypeChartRef1 = thatN.$refs.typeChartRef1[i] + // if (itemTypeChartRef1.length!=0&&itemTypeChartRef1.dataArr!= undefined && itemTypeChartRef1.dataArr.length != 0) { + + // if (itemTypeChartRef1.echartArr.includes('时间曲线图')) { + // thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(thatN.$refs.typeChartRef1[i].dataArr, thatN.$refs.typeChartRef1[i].componentName.split('_')[0],'周期时刻') + // } + // if (itemTypeChartRef1.echartArr.includes('数值')) { + // thatN.$refs.typeChartRef1[i].getDataArr(thatN.$refs.typeChartRef1[i].dataArr) + // } + + // if (itemTypeChartRef1.echartArr.includes('直方图') &&itemTypeChartRef1.$refs.barChartRef.drawBar) { + // // 数据改变重新渲染柱状图 + // itemTypeChartRef1.$refs.barChartRef.drawBar(itemTypeChartRef1.dataArr[0]) + // } + // if (itemTypeChartRef1.echartArr.includes('饼状图') &&itemTypeChartRef1.$refs.pieChartRef.drawPie) { + // // 数据改变重新渲染饼图 + // itemTypeChartRef1.$refs.pieChartRef.drawPie(itemTypeChartRef1.dataArr[0]) + // } + // if (itemTypeChartRef1.echartArr.includes('均值图') && itemTypeChartRef1.$refs.avgChartRef != undefined) { + // itemTypeChartRef1.$refs.avgChartRef.drawBar(itemTypeChartRef1.dataArr[0]) + // } + // } + // } + // } + // }) + // } + + + + + // } + + + }); + } + } + }, // activeName:'channge', // 处理过的触发数据 triggerListData: { @@ -350,7 +405,7 @@ export default { let itemTypeChart = _this.$refs.typeChartRef[i] if (itemTypeChart.dataArr!= undefined && itemTypeChart.dataArr.length != 0) { if (itemTypeChart.echartArr.includes('时间曲线图')) { - _this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine(_this.$refs.typeChartRef[i].dataArr, _this.$refs.typeChartRef[i].componentName.split('_')[0]) + _this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine(_this.$refs.typeChartRef[i].dataArr, _this.$refs.typeChartRef[i].componentName.split('_')[0],'触发') } if (itemTypeChart.echartArr.includes('数值')) { _this.$refs.typeChartRef[i].getDataArr(_this.$refs.typeChartRef[i].dataArr) @@ -388,8 +443,9 @@ export default { handler(newVal) { // 监听到打印周期时刻数据 console.log(newVal, '周期时刻数据'); - var thatN = this; - if (newVal!= undefined&&newVal.length != 0 && thatN.sectionData) { + + if (newVal!= undefined&&newVal.length != 0 && this.sectionData) { + var thatN = this; thatN.classify.forEach((ele, index) => { // if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') { // ele.cycleTimeData = []; @@ -416,7 +472,7 @@ export default { if (itemTypeChartRef1.length!=0&&itemTypeChartRef1.dataArr!= undefined && itemTypeChartRef1.dataArr.length != 0) { if (itemTypeChartRef1.echartArr.includes('时间曲线图')) { - thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(thatN.$refs.typeChartRef1[i].dataArr, thatN.$refs.typeChartRef1[i].componentName.split('_')[0]) + thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(thatN.$refs.typeChartRef1[i].dataArr, thatN.$refs.typeChartRef1[i].componentName.split('_')[0],'周期时刻') } if (itemTypeChartRef1.echartArr.includes('数值')) { thatN.$refs.typeChartRef1[i].getDataArr(thatN.$refs.typeChartRef1[i].dataArr) @@ -457,8 +513,8 @@ export default { } else { // item.time = item.time.split('.')[0]; // if (item.type_data != null) { - // 周期时刻的类型数据 - _thatN.typeCycleTimeData = item; + // // 周期时刻的类型数据 + // _thatN.typeCycleTimeData = item; // } // ele.cycleTimeData.unshift(item); // _thatN.$nextTick(() => { @@ -470,7 +526,7 @@ export default { if (itemTypeChartRef1.length!=0&&itemTypeChartRef1.dataArr!= undefined && itemTypeChartRef1.dataArr.length != 0) { if (itemTypeChartRef1.echartArr.includes('时间曲线图')) { - _thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(_thatN.$refs.typeChartRef1[i].dataArr, _thatN.$refs.typeChartRef1[i].componentName.split('_')[0]) + _thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(_thatN.$refs.typeChartRef1[i].dataArr, _thatN.$refs.typeChartRef1[i].componentName.split('_')[0],'周期时刻') } if (itemTypeChartRef1.echartArr.includes('数值')) { _thatN.$refs.typeChartRef1[i].getDataArr(_thatN.$refs.typeChartRef1[i].dataArr) @@ -502,18 +558,18 @@ export default { }, //周期统计 cycleStatisticsData: { - handler(newVal) { + handler(newVal, oldVal) { - var that = this; - if (newVal!= undefined&& newVal.length != 0 && that.sectionData) { + console.log("oldVal",oldVal) + if (newVal!= undefined&& newVal.length != 0 && this.sectionData) { console.log("newVal",newVal) + var that = this; that.componentList.forEach(ele => { // if (ele.cycleStatisticsData == undefined && ele.timeMode == '周期统计') { // ele.cycleStatisticsData = []; // }else{ // // ele.cycleStatisticsData = // } - console.log(" ele.cycleStatisticsData", ele.cycleStatisticsData) newVal.forEach(item => { if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期统计') { if (ele.cycleStatisticsData.length == 10) { @@ -524,7 +580,6 @@ export default { if (item.type_data != null) { that.typeCycleStatistics = item; } - console.log(" ele.cycleStatisticsData", ele.cycleStatisticsData) if(that.$refs.typeChartRef2!=undefined){ for (let i = 0; i < that.$refs.typeChartRef2.length; i++) { let itemTypeChartRef2 = that.$refs.typeChartRef2[i]; @@ -532,7 +587,7 @@ export default { if (itemTypeChartRef2.length!=0&&itemTypeChartRef2.dataArr!= undefined && itemTypeChartRef2.dataArr.length != 0) { // this.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(this.$refs.typeChartRef2[i].dataArr, _this.$refs.typeChartRe2f[i].componentName.split('_')[0]) if (itemTypeChartRef2.echartArr.includes('时间曲线图')) { - that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(that.$refs.typeChartRef2[i].dataArr, that.$refs.typeChartRef2[i].componentName.split('_')[0]) + that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(that.$refs.typeChartRef2[i].dataArr, that.$refs.typeChartRef2[i].componentName.split('_')[0],'周期统计') } if (itemTypeChartRef2.echartArr.includes('数值')) { that.$refs.typeChartRef2[i].getDataArr(that.$refs.typeChartRef2[i].dataArr) @@ -573,8 +628,10 @@ export default { ele.cycleStatisticsData.pop(); } else { // item.time = item.time.split('.')[0]; - // _that.typeCycleStatistics = item; - ele.cycleStatisticsData.unshift(); + // if (item.type_data != null) { + // _that.typeCycleStatistics = item; + // } + // ele.cycleStatisticsData.unshift(item); if(_that.$refs.typeChartRef2!=undefined){ for (let i = 0; i < _that.$refs.typeChartRef2.length; i++) { let itemTypeChartRef2 = _that.$refs.typeChartRef2[i]; @@ -582,7 +639,7 @@ export default { if (itemTypeChartRef2.length!=0&&itemTypeChartRef2.dataArr!= undefined && itemTypeChartRef2.dataArr.length != 0) { // this.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(this.$refs.typeChartRef2[i].dataArr, _this.$refs.typeChartRe2f[i].componentName.split('_')[0]) if (itemTypeChartRef2.echartArr.includes('时间曲线图')) { - _that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(_that.$refs.typeChartRef2[i].dataArr, _that.$refs.typeChartRef2[i].componentName.split('_')[0]) + _that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(_that.$refs.typeChartRef2[i].dataArr, _that.$refs.typeChartRef2[i].componentName.split('_')[0],'周期统计') } if (itemTypeChartRef2.echartArr.includes('数值')) { _that.$refs.typeChartRef2[i].getDataArr(_that.$refs.typeChartRef2[i].dataArr) diff --git a/src/views/index.vue b/src/views/index.vue index 0da781f8..47d7c7a9 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -635,6 +635,8 @@ export default { var detId = []; const msgN = JSON.parse(temp); this.cycleStatisticsData = msgN; + + // this.cycleStatisticsData = msgN; } catch (error) { }