diff --git a/src/components/chart/lineChart.vue b/src/components/chart/lineChart.vue index 2fb8a5e..29d5438 100644 --- a/src/components/chart/lineChart.vue +++ b/src/components/chart/lineChart.vue @@ -282,23 +282,33 @@ export default { var lineArr = []; let seriesArr = this.extractKeyValues(newVal, 'type_data'); if (seriesArr && seriesArr.length > 0) { - for (let i = 0; i < seriesArr[0].length; i++) { - const item = seriesArr[0][i]; //quantity - const valueList = seriesArr.map((arr) => { - let t = arr[i].value; - if (arr[i].quantity || arr[i].quantity === 0) { - t = arr[i].quantity; + const firstLevel = seriesArr.find((i) => i && i.length > 0); + if (firstLevel && firstLevel.length > 0) { + for (let i = 0; i < firstLevel.length; i++) { + const item = firstLevel[i]; + if (item) { + const valueList = seriesArr.map((arr) => { + if (arr) { + let t = arr[i] && arr[i].value; + if (arr[i] && (arr[i].quantity || arr[i].quantity === 0)) { + t = arr[i].quantity; + } + return t; + } + return 0; + }); + + lineArr.push({ + name: item.name, + data: valueList, + type: 'line', + smooth: true + }); } - return t; - }); - lineArr.push({ - name: item.name, - data: valueList, - type: 'line', - smooth: true - }); + } } } + if (lineArr && lineArr.length > 0) { for (let j = 0; j < lineArr.length; j++) { series.push(lineArr[j]); diff --git a/src/components/chart/regionTable.vue b/src/components/chart/regionTable.vue index 5a98eea..cad055b 100644 --- a/src/components/chart/regionTable.vue +++ b/src/components/chart/regionTable.vue @@ -1,5 +1,4 @@ - + + + - + @@ -76,10 +84,19 @@ - + + + @@ -111,18 +128,34 @@ - + + + - + - + @@ -155,14 +188,14 @@ export default { name: 'tableShow', //表格组件 props: { msg: { - type: Array, + type: Array // default() { // return []; // } }, triggerType: { type: String - }, + } }, data() { return { @@ -180,12 +213,12 @@ export default { } } }, - mounted() { + mounted() { // console.log(this.type,'129129'); }, - watch:{ - msg:{ - handler(newVal){ + watch: { + msg: { + handler(newVal) { // console.log(newVal,'流量数据table'); } } @@ -193,12 +226,14 @@ export default { }; + diff --git a/src/components/sensorFusion/echartsLine.vue b/src/components/sensorFusion/echartsLine.vue index 1706bad..179acba 100644 --- a/src/components/sensorFusion/echartsLine.vue +++ b/src/components/sensorFusion/echartsLine.vue @@ -136,19 +136,30 @@ export default { let seriesArr = this.extractKeyValues(val, 'type_data'); const transformedData = []; if (seriesArr && seriesArr.length > 0) { - for (let i = 0; i < seriesArr[0].length; i++) { - const item = seriesArr[0][i]; //quantity - const valueList = seriesArr.map((arr) => { - let t = arr[i].value; - if (arr[i].quantity || arr[i].quantity === 0) { - t = arr[i].quantity; + const firstLevel = seriesArr.find((i) => i && i.length > 0); + + if (firstLevel && firstLevel.length > 0) { + for (let i = 0; i < firstLevel.length; i++) { + const item = firstLevel[i]; + + if (item) { + const valueList = seriesArr.map((arr) => { + if (arr) { + let t = arr[i] && arr[i].value; + if (arr[i] && (arr[i].quantity || arr[i].quantity === 0)) { + t = arr[i].quantity; + } + return t; + } + return 0; + }); + + transformedData.push({ + name: item.name, + value: valueList + }); } - return t; - }); - transformedData.push({ - name: item.name, - value: valueList - }); + } } } let totalCountList = 0; @@ -192,21 +203,30 @@ export default { // console.log('seriesArr-固定时刻', seriesArr); const transformedData = []; if (seriesArr && seriesArr.length > 0) { - for (let i = 0; i < seriesArr[0].length; i++) { - const item = seriesArr[0][i]; - //固定间隔主题-类型组件type_data取value字段和历史数据接口不一样，历史数据接口取quantity字段 - // const valueList = seriesArr.map((arr) => arr[i].quantity); - const valueList = seriesArr.map((arr) => { - let t = arr[i].value; - if (arr[i].quantity || arr[i].quantity === 0) { - t = arr[i].quantity; + const firstLevel = seriesArr.find((i) => i && i.length > 0); + + if (firstLevel && firstLevel.length > 0) { + for (let i = 0; i < firstLevel.length; i++) { + const item = firstLevel[i]; + + if (item) { + const valueList = seriesArr.map((arr) => { + if (arr) { + let t = arr[i] && arr[i].value; + if (arr[i] && (arr[i].quantity || arr[i].quantity === 0)) { + t = arr[i].quantity; + } + return t; + } + return 0; + }); + + transformedData.push({ + name: item.name, + value: valueList + }); } - return t; - }); - transformedData.push({ - name: item.name, - value: valueList - }); + } } } // console.log('transformedData-1',transformedData) @@ -245,26 +265,36 @@ export default { yData = this.extractKeyValues(val, 'speed'); } else if (this.componentType == '类型') { xData = this.extractKeyValues(val, 'time'); + // console.log('固定间隔-类型-val-', val); let seriesArr = this.extractKeyValues(val, 'type_data'); // console.log('固定间隔-类型-seriesArr-', seriesArr); // console.log('固定间隔-类型-xData-', this.chartData.xData); const transformedData = []; if (seriesArr && seriesArr.length > 0) { - for (let i = 0; i < seriesArr[0].length; i++) { - const item = seriesArr[0][i]; - //固定间隔主题-类型组件type_data取value字段和历史数据接口不一样，历史数据接口取quantity字段 - // const valueList = seriesArr.map((arr) => arr[i].value); - const valueList = seriesArr.map((arr) => { - let t = arr[i].value; - if (arr[i].quantity || arr[i].quantity === 0) { - t = arr[i].quantity; + const firstLevel = seriesArr.find((i) => i && i.length > 0); + + if (firstLevel && firstLevel.length > 0) { + for (let i = 0; i < firstLevel.length; i++) { + const item = firstLevel[i]; + + if (item) { + const valueList = seriesArr.map((arr) => { + if (arr) { + let t = arr[i] && arr[i].value; + if (arr[i] && (arr[i].quantity || arr[i].quantity === 0)) { + t = arr[i].quantity; + } + return t; + } + return 0; + }); + + transformedData.push({ + name: item.name, + value: valueList + }); } - return t; - }); - transformedData.push({ - name: item.name, - value: valueList - }); + } } } diff --git a/src/components/sensorFusion/regionTable.vue b/src/components/sensorFusion/regionTable.vue index c22ca1d..dff601c 100644 --- a/src/components/sensorFusion/regionTable.vue +++ b/src/components/sensorFusion/regionTable.vue @@ -119,7 +119,17 @@ - + + +
@@ -145,44 +155,44 @@ export default { data() { return { //表格字段备注 - tableOptions:[ + tableOptions: [ { - type:'实时触发', - column:[ - {prop:'name',label:'区域名称'}, - {prop:'time',label:'时间戳'}, - {prop:'type',label:'目标类型'}, - {prop:'n_stay',label:'存车数'}, - {prop:'n_queue',label:'排队数'}, - {prop:'occ',label:'占用状态'}, - {prop:'speed',label:'空间平均速度'}, + type: '实时触发', + column: [ + { prop: 'name', label: '区域名称' }, + { prop: 'time', label: '时间戳' }, + { prop: 'type', label: '目标类型' }, + { prop: 'n_stay', label: '存车数' }, + { prop: 'n_queue', label: '排队数' }, + { prop: 'occ', label: '占用状态' }, + { prop: 'speed', label: '空间平均速度' } ] }, { - type:'固定时刻', - column:[ - {prop:'name',label:'区域名称'}, - {prop:'time',label:'时间戳'}, - {prop:'type',label:'目标类型'}, - {prop:'n_stay',label:'存车数'}, - {prop:'n_queue',label:'排队数'}, - {prop:'occ',label:'占用状态'}, - {prop:'speed',label:'空间平均速度'}, + type: '固定时刻', + column: [ + { prop: 'name', label: '区域名称' }, + { prop: 'time', label: '时间戳' }, + { prop: 'type', label: '目标类型' }, + { prop: 'n_stay', label: '存车数' }, + { prop: 'n_queue', label: '排队数' }, + { prop: 'occ', label: '占用状态' }, + { prop: 'speed', label: '空间平均速度' } ] }, { - type:'固定间隔', - column:[ - {prop:'name',label:'区域名称'}, - {prop:'time',label:'时间戳'}, - {prop:'type',label:'目标类型'}, - {prop:'in_flow',label:'驶入流量'}, - {prop:'out_flow',label:'驶离流量'}, - {prop:'ave_stay',label:'平均存车数'}, - {prop:'ave_queue',label:'平均排队数'}, - {prop:'ave_occ',label:'平均占有率'}, - {prop:'ave_delay',label:'平均延误'}, - {prop:'speed',label:'平均速度'}, + type: '固定间隔', + column: [ + { prop: 'name', label: '区域名称' }, + { prop: 'time', label: '时间戳' }, + { prop: 'type', label: '目标类型' }, + { prop: 'in_flow', label: '驶入流量' }, + { prop: 'out_flow', label: '驶离流量' }, + { prop: 'ave_stay', label: '平均存车数' }, + { prop: 'ave_queue', label: '平均排队数' }, + { prop: 'ave_occ', label: '平均占有率' }, + { prop: 'ave_delay', label: '平均延误' }, + { prop: 'speed', label: '平均速度' } ] } ] diff --git a/src/components/sensorFusion/tableShow.vue b/src/components/sensorFusion/tableShow.vue index ffd63f8..6eeba57 100644 --- a/src/components/sensorFusion/tableShow.vue +++ b/src/components/sensorFusion/tableShow.vue @@ -42,7 +42,46 @@ - + + + + + + + + + + + + + + + @@ -70,9 +109,39 @@ - - - + + + + + + + + +
@@ -97,57 +166,57 @@ export default { }, data() { return { - //表格字段备注 - tableOptions:[ + //表格字段备注 + tableOptions: [ { - type:'实时触发', - column:[ - {prop:'name',label:'区域名称'}, - {prop:'time',label:'时间戳'}, - {prop:'type',label:'目标类型'}, - {prop:'n_stay',label:'存车数'}, - {prop:'n_queue',label:'排队数'}, - {prop:'occ',label:'占用状态'}, - {prop:'speed',label:'空间平均速度'}, + type: '实时触发', + column: [ + { prop: 'name', label: '区域名称' }, + { prop: 'time', label: '时间戳' }, + { prop: 'type', label: '目标类型' }, + { prop: 'n_stay', label: '存车数' }, + { prop: 'n_queue', label: '排队数' }, + { prop: 'occ', label: '占用状态' }, + { prop: 'speed', label: '空间平均速度' } ] }, { - type:'固定时刻', //TODO-目前代码里无此逻辑 - column:[ - {prop:'name',label:'区域名称'}, - {prop:'time',label:'时间戳'}, - {prop:'type',label:'目标类型'}, - {prop:'n_stay',label:'存车数'}, - {prop:'n_queue',label:'排队数'}, - {prop:'occ',label:'占用状态'}, - {prop:'speed',label:'空间平均速度'}, + type: '固定时刻', //TODO-目前代码里无此逻辑 + column: [ + { prop: 'name', label: '区域名称' }, + { prop: 'time', label: '时间戳' }, + { prop: 'type', label: '目标类型' }, + { prop: 'n_stay', label: '存车数' }, + { prop: 'n_queue', label: '排队数' }, + { prop: 'occ', label: '占用状态' }, + { prop: 'speed', label: '空间平均速度' } ] }, { - type:'固定间隔', - column:[ - {prop:'gate_id',label:'断面编号'}, - {prop:'name',label:'断面名称'}, - {prop:'time',label:'时间戳'}, - {prop:'interval',label:'时间序号'}, - {prop:'type',label:'目标类型'}, - {prop:'in_flow',label:'入流流量'}, - {prop:'out_flow',label:'出流流量'}, - {prop:'flow',label:'断面流量'}, - {prop:'in_spd',label:'入流平均速度'}, - {prop:'out_spd',label:'出流平均速度'}, - {prop:'speed',label:'断面的平均速度'}, + type: '固定间隔', + column: [ + { prop: 'gate_id', label: '断面编号' }, + { prop: 'name', label: '断面名称' }, + { prop: 'time', label: '时间戳' }, + { prop: 'interval', label: '时间序号' }, + { prop: 'type', label: '目标类型' }, + { prop: 'in_flow', label: '入流流量' }, + { prop: 'out_flow', label: '出流流量' }, + { prop: 'flow', label: '断面流量' }, + { prop: 'in_spd', label: '入流平均速度' }, + { prop: 'out_spd', label: '出流平均速度' }, + { prop: 'speed', label: '断面的平均速度' } ] } ] }; }, watch: { - tableData: { - handler(newVal) { - console.log(newVal, '断面表格数据'); - } - } + // tableData: { + // handler(newVal) { + // console.log(newVal, '断面表格数据'); + // } + // } }, methods: {} }; diff --git a/src/components/sensorFusion/thermalOD.vue b/src/components/sensorFusion/thermalOD.vue index 1a5ece4..ba68baf 100644 --- a/src/components/sensorFusion/thermalOD.vue +++ b/src/components/sensorFusion/thermalOD.vue @@ -114,97 +114,106 @@ export default { // } } let myChart = this.chart; - let option = { - dataZoom: [ - { - id: 'dataZoomY', - type: 'slider', - yAxisIndex: [0], - startValue: 0, - endValue: 10, - filterMode: 'empty' - } - ], - tooltip: { - position: 'top' - }, - animation: false, - grid: { - left: '3%', - right: '8%', - bottom: '8%', - containLabel: true - }, - xAxis: { - type: 'category', - data: this.startName.split(','), - axisLine: { - lineStyle: { - color: '#000' + let startName =[],endName=[] + if(this.startName){ + startName = this.startName.split(',') + } + if(this.endName){ + endName = this.endName.split(',') + } + if (dataList) { + let option = { + dataZoom: [ + { + id: 'dataZoomY', + type: 'slider', + yAxisIndex: [0], + startValue: 0, + endValue: 10, + filterMode: 'empty' } + ], + tooltip: { + position: 'top' }, - axisLabel: { - interval: 0, - rotate: 40 + animation: false, + grid: { + left: '3%', + right: '8%', + bottom: '8%', + containLabel: true }, - splitArea: { - show: true - } - // name: "镇街", - }, - yAxis: { - type: 'category', - data: this.endName.split(','), - axisLine: { - lineStyle: { - color: '#000' - } - }, - axisLabel: { - interval: 0, - rotate: 40 - }, - splitArea: { - show: true - } - // name: "", - }, - visualMap: { - min: 1, - max: 50, - calculable: true, - orient: 'horizontal', - left: 'center', - bottom: '1%', - text: ['50', '1'], // 文本，默认为数值文本 - //color:['#20a0ff','#D2EDFF'], - calculable: false, - color: ['#22DDDD', '#fec42c', '#80F1BE'] - }, - series: [ - { - name: 'OD图', - type: 'heatmap', - data: dataList, - label: { - normal: { - show: true + xAxis: { + type: 'category', + data: startName, + axisLine: { + lineStyle: { + color: '#000' } }, - itemStyle: { - emphasis: { - shadowBlur: 10, - shadowColor: 'rgba(120, 0, 0, 0.5)' + axisLabel: { + interval: 0, + rotate: 40 + }, + splitArea: { + show: true + } + // name: "镇街", + }, + yAxis: { + type: 'category', + data: endName, + axisLine: { + lineStyle: { + color: '#000' + } + }, + axisLabel: { + interval: 0, + rotate: 40 + }, + splitArea: { + show: true + } + // name: "", + }, + visualMap: { + min: 1, + max: 50, + calculable: true, + orient: 'horizontal', + left: 'center', + bottom: '1%', + text: ['50', '1'], // 文本，默认为数值文本 + //color:['#20a0ff','#D2EDFF'], + calculable: false, + color: ['#22DDDD', '#fec42c', '#80F1BE'] + }, + series: [ + { + name: 'OD图', + type: 'heatmap', + data: dataList, + label: { + normal: { + show: true + } + }, + itemStyle: { + emphasis: { + shadowBlur: 10, + shadowColor: 'rgba(120, 0, 0, 0.5)' + } } } - } - ] - }; - if (myChart) { - myChart.setOption(option); - window.addEventListener('resize', () => { - myChart.resize(); - }); + ] + }; + if (myChart) { + myChart.setOption(option); + window.addEventListener('resize', () => { + myChart.resize(); + }); + } } } }, diff --git a/src/views/index.vue b/src/views/index.vue index 4f431b4..1b393b3 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -1477,7 +1477,7 @@ export default { const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 var detId = []; const msgN = JSON.parse(temp); - console.log('实时触发trigger-', msgN); + // console.log('实时触发trigger-', msgN); // //console.log("trigger_msgN",msgN) // msgN.forEach(item => { // //console.log("item.name",item.name) diff --git a/src/views/sensorFusion/index.vue b/src/views/sensorFusion/index.vue index 64eb350..e594c89 100644 --- a/src/views/sensorFusion/index.vue +++ b/src/views/sensorFusion/index.vue @@ -679,7 +679,7 @@ >
- {{ e.name + '-' + e.graphicType }} + {{ e.name }}
@@ -2774,15 +2774,14 @@ export default { ) { if (data[i].children[j].children[n].children[m].componentType == '类型') { let typeData = { - time: time, - type_data: newValue, - speed: table.speed, name: table.name, + time: time, type: table.type, n_stay: table.n_stay, n_queue: table.n_queue, occ: table.occ, speed: table.speed, + type_data: newValue, originalSpeed: table.originalSpeed }; this.addTimeDataCharts(data[i].children[j].children[n].children[m].triggerNewData, typeData); @@ -2813,19 +2812,20 @@ export default { ) { if (data[i].children[j].children[n].children[m].componentType == '类型') { let typeData = { - time: time, - type_data: newValue, - speed: table.speed, - avg: table.avg, - max: table.max, - med: table.med, - min: table.min, name: table.name, + time: time, type: table.type, n_stay: table.n_stay, n_queue: table.n_queue, occ: table.occ, - speed: table.speed + speed: table.speed, + type_data: newValue, + headway: table.headway, + avg: table.avg, + max: table.max, + med: table.med, + min: table.min, + originalSpeed: table.originalSpeed }; // if (data[i].children[j].children[n].children[m].cycleTimeData.length > 10) { // data[i].children[j].children[n].children[m].cycleTimeData = @@ -2858,20 +2858,45 @@ export default { 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, + // avg: table.avg, + // max: table.max, + // med: table.med, + // min: table.min, + // name: table.name, + // type: table.type, + // ave_stay: table.ave_stay, + // ave_queue: table.ave_queue, + // occ: table.occ, + // speed: table.speed + // }; let typeData = { - time: time, type_data: newValue, - speed: table.speed, + time: time, + name: table.name, + type: table.type, + in_flow: table.in_flow, + out_flow: table.out_flow, + ave_stay: table.ave_stay, + ave_queue: table.ave_queue, + ave_occ: table.ave_occ, + ave_delay: table.ave_delay, + type_data: table.type_data, + ave_headway: table.ave_headway, avg: table.avg, max: table.max, med: table.med, min: table.min, - name: table.name, - type: table.type, - ave_stay: table.ave_stay, - ave_queue: table.ave_queue, occ: table.occ, - speed: table.speed + originalSpeed: table.speed, + gate_id: table.gate_id, + interval: table.interval, + flow: table.flow, + in_spd: table.in_spd, + out_spd: table.out_spd }; // if (data[i].children[j].children[n].children[m].cycleStatisticsData.length > 10) { // data[i].children[j].children[n].children[m].cycleStatisticsData = @@ -3522,7 +3547,7 @@ export default { interval: msgN[j].interval, flow: msgN[j].flow, in_spd: msgN[j].in_spd, - out_spd: msgN[j].out_spd, + out_spd: msgN[j].out_spd }; this.$nextTick(() => { this.cycleStatisticsDataCharts( @@ -3583,7 +3608,7 @@ export default { interval: msgN[j].interval, flow: msgN[j].flow, in_spd: msgN[j].in_spd, - out_spd: msgN[j].out_spd, + out_spd: msgN[j].out_spd }; this.$nextTick(() => { this.cycleStatisticsDataCharts( @@ -3633,7 +3658,7 @@ export default { interval: msgN[j].interval, flow: msgN[j].flow, in_spd: msgN[j].in_spd, - out_spd: msgN[j].out_spd, + out_spd: msgN[j].out_spd }; this.$nextTick(() => { this.cycleStatisticsDataCharts( @@ -3683,7 +3708,7 @@ export default { interval: msgN[j].interval, flow: msgN[j].flow, in_spd: msgN[j].in_spd, - out_spd: msgN[j].out_spd, + out_spd: msgN[j].out_spd }; this.$nextTick(() => { this.cycleStatisticsDataCharts( @@ -3729,7 +3754,7 @@ export default { interval: msgN[j].interval, flow: msgN[j].flow, in_spd: msgN[j].in_spd, - out_spd: msgN[j].out_spd, + out_spd: msgN[j].out_spd }; this.$nextTick(() => { this.cycleStatisticsDataCharts( @@ -3775,7 +3800,7 @@ export default { interval: msgN[j].interval, flow: msgN[j].flow, in_spd: msgN[j].in_spd, - out_spd: msgN[j].out_spd, + out_spd: msgN[j].out_spd }; this.$nextTick(() => { this.cycleStatisticsDataCharts( @@ -3823,7 +3848,7 @@ export default { interval: msgN[j].interval, flow: msgN[j].flow, in_spd: msgN[j].in_spd, - out_spd: msgN[j].out_spd, + out_spd: msgN[j].out_spd }; this.$nextTick(() => { this.cycleStatisticsDataCharts( @@ -3838,6 +3863,7 @@ export default { // this.addOrUpdateArrayItem(this.triggerODData, { // ob_data: msgN[j].ob_data // }); + // console.log('固定间隔-OD', JSON.stringify(msgN[j])); let table = { ob_data: msgN[j].ob_data };