From 426aee89c4e30089e87496129de0de315b2154c6 Mon Sep 17 00:00:00 2001 From: qiudan <1044775178@qq.com> Date: Tue, 14 Nov 2023 18:25:24 +0800 Subject: [PATCH] =?UTF-8?q?bug=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/chart/avgChart.vue | 36 +- src/components/chart/barChart.vue | 12 +- src/components/chart/lineChart.vue | 138 +++- src/components/chart/tableShow.vue | 42 +- src/components/chart/thermalChart.vue | 116 ++- .../sensorFusion/echartsBar copy.vue | 284 +++++++ src/components/sensorFusion/echartsBar.vue | 368 +++------- src/components/sensorFusion/echartsLine.vue | 165 +++-- src/components/sensorFusion/echartsPie.vue | 16 +- src/components/sensorFusion/meanValue.vue | 692 +++++++++--------- src/components/sensorFusion/regionTable.vue | 201 +++++ src/components/sensorFusion/tableShow.vue | 162 ++++ src/components/sensorFusion/thermalOD.vue | 16 +- src/views/bounced/dataBoard.vue | 7 + src/views/index.vue | 2 +- src/views/sensorFusion/index.vue | 511 +++++++++---- 16 files changed, 1828 insertions(+), 940 deletions(-) create mode 100644 src/components/sensorFusion/echartsBar copy.vue create mode 100644 src/components/sensorFusion/regionTable.vue create mode 100644 src/components/sensorFusion/tableShow.vue diff --git a/src/components/chart/avgChart.vue b/src/components/chart/avgChart.vue index 075b07e..3d96ec8 100644 --- a/src/components/chart/avgChart.vue +++ b/src/components/chart/avgChart.vue @@ -1,12 +1,20 @@ - + + +
- - @@ -754,34 +745,24 @@ 占用 - + + +
- - @@ -790,9 +771,19 @@ 占用 - + + + -
+ -->
let id = 1000; -import chartsLine from '@/components/sensorFusion/echartsLine.vue'; +import chartsLine from '@/components/sensorFusion/echartsLine.vue'; import chartsPie from '@/components/sensorFusion/echartsPie.vue'; import chartsBar from '@/components/sensorFusion/echartsBar.vue'; import MeanValue from '../../components/sensorFusion/meanValue.vue'; import thermalOD from '@/components/sensorFusion/thermalOD'; +import tableShow from '@/components/sensorFusion/tableShow.vue'; +import regionTable from '@/components/sensorFusion/regionTable.vue'; import { getRealTimeShipjk, //获取实时视频 getDuocgqrhpz, //获取树形数据 @@ -1884,6 +1877,7 @@ export default { this.addSelectOptionField(obj[key]); } else if (key == 'name') { obj['selectOption'] = 1; + obj['triggerNewData'] = []; } } } @@ -2767,6 +2761,45 @@ export default { } } }, + //实时触发表格添加数据 + triggerDataCharts(data, videoId, analogAreaComponentId, newValue, time, table) { + for (let i = 0; i < data.length; i++) { + for (let j = 0; j < data[i].children.length; j++) { + for (let n = 0; n < data[i].children[j].children.length; n++) { + if (data[i].children[j].children[n].name == '图表区') { + for (let m = 0; m < data[i].children[j].children[n].children.length; m++) { + if ( + data[i].children[j].children[n].children[m].videoId == videoId && + data[i].children[j].children[n].children[m].analogAreaComponentId == analogAreaComponentId + ) { + if (data[i].children[j].children[n].children[m].componentType == '类型') { + let typeData = { + time: time, + type_data: newValue, + speed: table.speed, + name: table.name, + type: table.type, + n_stay: table.n_stay, + n_queue: table.n_queue, + occ: table.occ, + speed: table.speed, + originalSpeed: table.originalSpeed + }; + this.addTimeDataCharts(data[i].children[j].children[n].children[m].triggerNewData, typeData); + } else { + if (data[i].children[j].children[n].children[m].triggerNewData.length > 10) { + data[i].children[j].children[n].children[m].triggerNewData = + data[i].children[j].children[n].children[m].triggerNewData.slice(-10); + } + this.addTimeDataCharts(data[i].children[j].children[n].children[m].triggerNewData, newValue); + } + } + } + } + } + } + } + }, //固定时刻图表添加数据 timeDataCharts(data, videoId, analogAreaComponentId, newValue, time, table) { for (let i = 0; i < data.length; i++) { @@ -2889,13 +2922,13 @@ export default { // 接收托片 case 'trigger-' + this.topicVideoIdList[i].videoId: try { - // //console.log("trigger_msgN",message) + //console.log("trigger_msgN",message) const utf8decoder = new TextDecoder(); const u8arr = new Uint8Array(message); const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 var detId = []; const msgN = JSON.parse(temp); - // console.log('实时触发trigger-',msgN); + // console.log('实时触发trigger-', msgN); for (let j = 0; j < msgN.length; j++) { const locations = this.findLocationById(this.intersectionList, msgN[j].component_id); //处理speed正负值和-1，卡片区在html上处理了，数据源不做处理 @@ -2908,6 +2941,7 @@ export default { // if (locations == '卡片区' || locations == '两个区都存在') { // if(locations == '图表区' || locations == '两个区都存在'){ + // console.log('实时触发trigger-车头时距', msgN[j].time); //图表区数组 this.addOrUpdateArrayItem(this.triggerDataList, { time: msgN[j].time, @@ -2926,8 +2960,7 @@ export default { ); }); //表格数据 - - this.addOrUpdateArrayItem(this.tableData, { + let carTou = { name: msgN[j].name, time: msgN[j].time, type: msgN[j].type, @@ -2936,7 +2969,27 @@ export default { occ: msgN[j].occ, speed: newSpeed, originalSpeed: msgN[j].speed + }; + this.$nextTick(() => { + this.triggerDataCharts( + this.intersectionList, + this.topicVideoIdList[i].videoId, + msgN[j].component_id, + carTou + ); }); + + //之前错误逻辑，不知道为啥怎么处理 + // this.addOrUpdateArrayItem(this.tableData, { + // name: msgN[j].name, + // time: msgN[j].time, + // type: msgN[j].type, + // n_stay: msgN[j].n_stay, + // n_queue: msgN[j].n_queue, + // occ: msgN[j].occ, + // speed: newSpeed, + // originalSpeed: msgN[j].speed + // }); // } //卡片区 let map = { @@ -2952,6 +3005,7 @@ export default { ); }); } else if (msgN[j].component_type == '流量') { + // console.log('实时触发trigger-流量', msgN[j]); //图表区 this.addOrUpdateArrayItem(this.triggerFlowData, { time: msgN[j].time, @@ -2981,7 +3035,7 @@ export default { ); }); //表格数据 - this.addOrUpdateArrayItem(this.tableData, { + let carTou = { name: msgN[j].name, time: msgN[j].time, type: msgN[j].type, @@ -2990,7 +3044,26 @@ export default { occ: msgN[j].occ, speed: newSpeed, originalSpeed: msgN[j].speed + }; + this.$nextTick(() => { + this.triggerDataCharts( + this.intersectionList, + this.topicVideoIdList[i].videoId, + msgN[j].component_id, + carTou + ); }); + //之前错误逻辑，不知道为啥怎么处理 + // this.addOrUpdateArrayItem(this.tableData, { + // name: msgN[j].name, + // time: msgN[j].time, + // type: msgN[j].type, + // n_stay: msgN[j].n_stay, + // n_queue: msgN[j].n_queue, + // occ: msgN[j].occ, + // speed: newSpeed, + // originalSpeed: msgN[j].speed + // }); } else if (msgN[j].component_type == '速度') { //卡片区 let map = { @@ -3024,7 +3097,7 @@ export default { ); }); //表格数据 - this.addOrUpdateArrayItem(this.tableData, { + let carTou = { name: msgN[j].name, time: msgN[j].time, type: msgN[j].type, @@ -3033,7 +3106,26 @@ export default { occ: msgN[j].occ, speed: newSpeed, originalSpeed: msgN[j].speed + }; + this.$nextTick(() => { + this.triggerDataCharts( + this.intersectionList, + this.topicVideoIdList[i].videoId, + msgN[j].component_id, + carTou + ); }); + //之前错误逻辑，不知道为啥怎么处理 + // this.addOrUpdateArrayItem(this.tableData, { + // name: msgN[j].name, + // time: msgN[j].time, + // type: msgN[j].type, + // n_stay: msgN[j].n_stay, + // n_queue: msgN[j].n_queue, + // occ: msgN[j].occ, + // speed: newSpeed, + // originalSpeed: msgN[j].speed + // }); } else if (msgN[j].component_type == '类型') { //console.log('实时触发-类型-', msgN[j].type_data); let map = { @@ -3069,8 +3161,8 @@ export default { this.triggerTypeData ); }); - //表格数据 - this.addOrUpdateArrayItem(this.tableData, { + //表格数据 类型有点特殊需要重新比对 + let carTou = { name: msgN[j].name, time: msgN[j].time, type: msgN[j].type, @@ -3078,8 +3170,30 @@ export default { n_queue: msgN[j].n_queue, occ: msgN[j].occ, speed: newSpeed, - originalSpeed: msgN[j].speed + originalSpeed: msgN[j].speed, + type_data: msgN[j].type_data + }; + this.$nextTick(() => { + this.triggerDataCharts( + this.intersectionList, + this.topicVideoIdList[i].videoId, + msgN[j].component_id, + msgN[j].type_data, + msgN[j].time, + carTou + ); }); + //之前错误逻辑，不知道为啥怎么处理 + // this.addOrUpdateArrayItem(this.tableData, { + // name: msgN[j].name, + // time: msgN[j].time, + // type: msgN[j].type, + // n_stay: msgN[j].n_stay, + // n_queue: msgN[j].n_queue, + // occ: msgN[j].occ, + // speed: newSpeed, + // originalSpeed: msgN[j].speed + // }); } else if (msgN[j].component_type == '检测数') { let map = { n_stay: msgN[j].n_stay, @@ -3112,7 +3226,7 @@ export default { ); }); //表格数据 - this.addOrUpdateArrayItem(this.tableData, { + let carTou = { name: msgN[j].name, time: msgN[j].time, type: msgN[j].type, @@ -3121,7 +3235,26 @@ export default { occ: msgN[j].occ, speed: newSpeed, originalSpeed: msgN[j].speed + }; + this.$nextTick(() => { + this.triggerDataCharts( + this.intersectionList, + this.topicVideoIdList[i].videoId, + msgN[j].component_id, + carTou + ); }); + //之前错误逻辑，不知道为啥怎么处理 + // this.addOrUpdateArrayItem(this.tableData, { + // name: msgN[j].name, + // time: msgN[j].time, + // type: msgN[j].type, + // n_stay: msgN[j].n_stay, + // n_queue: msgN[j].n_queue, + // occ: msgN[j].occ, + // speed: newSpeed, + // originalSpeed: msgN[j].speed + // }); } else if (msgN[j].component_type == '排队数') { let map = { n_queue: msgN[j].n_queue, @@ -3149,7 +3282,7 @@ export default { ); }); //表格数据 - this.addOrUpdateArrayItem(this.tableData, { + let carTou = { name: msgN[j].name, time: msgN[j].time, type: msgN[j].type, @@ -3158,9 +3291,28 @@ export default { occ: msgN[j].occ, speed: newSpeed, originalSpeed: msgN[j].speed + }; + this.$nextTick(() => { + this.triggerDataCharts( + this.intersectionList, + this.topicVideoIdList[i].videoId, + msgN[j].component_id, + carTou + ); }); + //之前错误逻辑，不知道为啥怎么处理 + // this.addOrUpdateArrayItem(this.tableData, { + // name: msgN[j].name, + // time: msgN[j].time, + // type: msgN[j].type, + // n_stay: msgN[j].n_stay, + // n_queue: msgN[j].n_queue, + // occ: msgN[j].occ, + // speed: newSpeed, + // originalSpeed: msgN[j].speed + // }); } else if (msgN[j].component_type == 'OD') { - //图表区 + //图表区 - TODO 估计有未知问题 this.addOrUpdateArrayItem(this.triggerODData, { ob_data: msgN[j].ob_data }); @@ -3194,18 +3346,18 @@ export default { if (msgN[j].component_type == '车头时距') { //图表区数组加表格数据 let carTou = { - time: msgN[j].time, - headway: msgN[j].headway, - avg: msgN[j].avg, - max: msgN[j].max, - med: msgN[j].med, - min: msgN[j].min, name: msgN[j].name, + time: msgN[j].time, type: msgN[j].type, n_stay: msgN[j].n_stay, n_queue: msgN[j].n_queue, occ: msgN[j].occ, speed: newSpeed, + headway: msgN[j].headway, + avg: msgN[j].avg, + max: msgN[j].max, + med: msgN[j].med, + min: msgN[j].min, originalSpeed: msgN[j].speed }; this.$nextTick(() => { @@ -3246,17 +3398,18 @@ export default { }); //图表区 let speedMap = { - time: msgN[j].time, - speed: newSpeed, - avg: msgN[j].avg, - max: msgN[j].max, - med: msgN[j].med, - min: msgN[j].min, name: msgN[j].name, + time: msgN[j].time, type: msgN[j].type, n_stay: msgN[j].n_stay, n_queue: msgN[j].n_queue, occ: msgN[j].occ, + speed: newSpeed, + headway: msgN[j].headway, + avg: msgN[j].avg, + max: msgN[j].max, + med: msgN[j].med, + min: msgN[j].min, originalSpeed: msgN[j].speed }; this.$nextTick(() => { @@ -3283,18 +3436,19 @@ export default { }); //图表区 let table = { + name: msgN[j].name, time: msgN[j].time, + type: msgN[j].type, + n_stay: msgN[j].n_stay, + n_queue: msgN[j].n_queue, + occ: msgN[j].occ, speed: newSpeed, + type_data: msgN[j].type_data, + headway: msgN[j].headway, avg: msgN[j].avg, max: msgN[j].max, med: msgN[j].med, min: msgN[j].min, - name: msgN[j].name, - type: msgN[j].type, - n_stay: msgN[j].n_stay, - n_queue: msgN[j].n_queue, - type_data: msgN[j].type_data, - occ: msgN[j].occ, originalSpeed: msgN[j].speed }; this.$nextTick(() => { @@ -3337,7 +3491,7 @@ export default { const msgN = JSON.parse(temp); //console.log('固定间隔', msgN, this.topicVideoIdList[i].videoId); // this.cycleStatisticsData = msgN; - // console.log('固定间隔', msgN) + // console.log('固定间隔', msgN); for (let j = 0; j < msgN.length; j++) { //处理speed正负值和-1，卡片区在html上处理了，数据源不做处理 let newSpeed = '-'; @@ -3347,19 +3501,28 @@ export default { if (msgN[j].component_type == '车头时距') { //图表区数组加表格数据 let carTou = { + name: msgN[j].name, time: msgN[j].time, + type: msgN[j].type, + in_flow: msgN[j].in_flow, + out_flow: msgN[j].out_flow, + ave_stay: msgN[j].ave_stay, + ave_queue: msgN[j].ave_queue, + ave_occ: msgN[j].ave_occ, + ave_delay: msgN[j].ave_delay, + speed: newSpeed, ave_headway: msgN[j].ave_headway, avg: msgN[j].avg, max: msgN[j].max, med: msgN[j].med, min: msgN[j].min, - name: msgN[j].name, - type: msgN[j].type, - ave_stay: msgN[j].ave_stay, - ave_queue: msgN[j].ave_queue, occ: msgN[j].occ, - speed: newSpeed, - originalSpeed: msgN[j].speed + originalSpeed: msgN[j].speed, + gate_id: msgN[j].gate_id, + interval: msgN[j].interval, + flow: msgN[j].flow, + in_spd: msgN[j].in_spd, + out_spd: msgN[j].out_spd, }; this.$nextTick(() => { this.cycleStatisticsDataCharts( @@ -3399,18 +3562,28 @@ export default { }); //图表区 let speedMap = { + name: msgN[j].name, time: msgN[j].time, + type: msgN[j].type, + in_flow: msgN[j].in_flow, + out_flow: msgN[j].out_flow, + ave_stay: msgN[j].ave_stay, + ave_queue: msgN[j].ave_queue, + ave_occ: msgN[j].ave_occ, + ave_delay: msgN[j].ave_delay, speed: newSpeed, + ave_headway: msgN[j].ave_headway, avg: msgN[j].avg, max: msgN[j].max, med: msgN[j].med, min: msgN[j].min, - name: msgN[j].name, - type: msgN[j].type, - ave_stay: msgN[j].ave_stay, - ave_queue: msgN[j].ave_queue, occ: msgN[j].occ, - originalSpeed: msgN[j].speed + originalSpeed: msgN[j].speed, + gate_id: msgN[j].gate_id, + interval: msgN[j].interval, + flow: msgN[j].flow, + in_spd: msgN[j].in_spd, + out_spd: msgN[j].out_spd, }; this.$nextTick(() => { this.cycleStatisticsDataCharts( @@ -3438,19 +3611,29 @@ export default { }); //图表区 let table = { + name: msgN[j].name, time: msgN[j].time, + type: msgN[j].type, + in_flow: msgN[j].in_flow, + out_flow: msgN[j].out_flow, + ave_stay: msgN[j].ave_stay, + ave_queue: msgN[j].ave_queue, + ave_occ: msgN[j].ave_occ, + ave_delay: msgN[j].ave_delay, speed: newSpeed, + type_data: msgN[j].type_data, + ave_headway: msgN[j].ave_headway, avg: msgN[j].avg, max: msgN[j].max, med: msgN[j].med, min: msgN[j].min, - name: msgN[j].name, - type: msgN[j].type, - type_data: msgN[j].type_data, - ave_stay: msgN[j].ave_stay, - ave_queue: msgN[j].ave_queue, occ: msgN[j].occ, - originalSpeed: msgN[j].speed + originalSpeed: msgN[j].speed, + gate_id: msgN[j].gate_id, + interval: msgN[j].interval, + flow: msgN[j].flow, + in_spd: msgN[j].in_spd, + out_spd: msgN[j].out_spd, }; this.$nextTick(() => { this.cycleStatisticsDataCharts( @@ -3479,16 +3662,28 @@ export default { }); //图表区 let table = { + name: msgN[j].name, time: msgN[j].time, + type: msgN[j].type, in_flow: msgN[j].in_flow, out_flow: msgN[j].out_flow, - name: msgN[j].name, - type: msgN[j].type, ave_stay: msgN[j].ave_stay, ave_queue: msgN[j].ave_queue, - occ: msgN[j].occ, + ave_occ: msgN[j].ave_occ, + ave_delay: msgN[j].ave_delay, speed: newSpeed, - originalSpeed: msgN[j].speed + ave_headway: msgN[j].ave_headway, + avg: msgN[j].avg, + max: msgN[j].max, + med: msgN[j].med, + min: msgN[j].min, + occ: msgN[j].occ, + originalSpeed: msgN[j].speed, + gate_id: msgN[j].gate_id, + interval: msgN[j].interval, + flow: msgN[j].flow, + in_spd: msgN[j].in_spd, + out_spd: msgN[j].out_spd, }; this.$nextTick(() => { this.cycleStatisticsDataCharts( @@ -3513,18 +3708,28 @@ export default { }); //图表 let table = { + name: msgN[j].name, time: msgN[j].time, + type: msgN[j].type, + in_flow: msgN[j].in_flow, + out_flow: msgN[j].out_flow, ave_stay: msgN[j].ave_stay, + ave_queue: msgN[j].ave_queue, + ave_occ: msgN[j].ave_occ, + ave_delay: msgN[j].ave_delay, + speed: newSpeed, + ave_headway: msgN[j].ave_headway, avg: msgN[j].avg, max: msgN[j].max, med: msgN[j].med, min: msgN[j].min, - name: msgN[j].name, - type: msgN[j].type, - ave_queue: msgN[j].ave_queue, occ: msgN[j].occ, - speed: newSpeed, - originalSpeed: msgN[j].speed + originalSpeed: msgN[j].speed, + gate_id: msgN[j].gate_id, + interval: msgN[j].interval, + flow: msgN[j].flow, + in_spd: msgN[j].in_spd, + out_spd: msgN[j].out_spd, }; this.$nextTick(() => { this.cycleStatisticsDataCharts( @@ -3549,14 +3754,28 @@ export default { }); //图表 let table = { - time: msgN[j].time, - ave_queue: msgN[j].ave_queue, name: msgN[j].name, + time: msgN[j].time, type: msgN[j].type, + in_flow: msgN[j].in_flow, + out_flow: msgN[j].out_flow, ave_stay: msgN[j].ave_stay, - occ: msgN[j].occ, + ave_queue: msgN[j].ave_queue, + ave_occ: msgN[j].ave_occ, + ave_delay: msgN[j].ave_delay, speed: newSpeed, - originalSpeed: msgN[j].speed + ave_headway: msgN[j].ave_headway, + avg: msgN[j].avg, + max: msgN[j].max, + med: msgN[j].med, + min: msgN[j].min, + occ: msgN[j].occ, + originalSpeed: msgN[j].speed, + gate_id: msgN[j].gate_id, + interval: msgN[j].interval, + flow: msgN[j].flow, + in_spd: msgN[j].in_spd, + out_spd: msgN[j].out_spd, }; this.$nextTick(() => { this.cycleStatisticsDataCharts( @@ -3567,6 +3786,7 @@ export default { ); }); } else if (msgN[j].component_type == '延误') { + // console.log('固定间隔-延误', msgN[j]); let map = { ave_delay: msgN[j].ave_delay, time: msgN[j].time @@ -3582,15 +3802,28 @@ export default { }); //图表 let table = { - time: msgN[j].time, - ave_delay: msgN[j].ave_delay, name: msgN[j].name, + time: msgN[j].time, type: msgN[j].type, + in_flow: msgN[j].in_flow, + out_flow: msgN[j].out_flow, ave_stay: msgN[j].ave_stay, ave_queue: msgN[j].ave_queue, - occ: msgN[j].occ, + ave_occ: msgN[j].ave_occ, + ave_delay: msgN[j].ave_delay, speed: newSpeed, - originalSpeed: msgN[j].speed + ave_headway: msgN[j].ave_headway, + avg: msgN[j].avg, + max: msgN[j].max, + med: msgN[j].med, + min: msgN[j].min, + occ: msgN[j].occ, + originalSpeed: msgN[j].speed, + gate_id: msgN[j].gate_id, + interval: msgN[j].interval, + flow: msgN[j].flow, + in_spd: msgN[j].in_spd, + out_spd: msgN[j].out_spd, }; this.$nextTick(() => { this.cycleStatisticsDataCharts( @@ -3753,7 +3986,9 @@ export default { chartsPie, //饼图 chartsBar, //柱状图 MeanValue, //均值图 - thermalOD //OD + thermalOD, //OD + tableShow, + regionTable } };