From 5458c18ab13af83a3a2132374e73d284bfb8aac8 Mon Sep 17 00:00:00 2001
From: qiudan <1044775178@qq.com>
Date: Thu, 21 Dec 2023 17:09:06 +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/newchart/lineChart.vue       |  43 ++-
 src/components/newchart/thermalChart.vue    |  61 ++--
 src/components/sensorFusion/echartsLine.vue |   2 +-
 src/components/sensorFusion/thermalOD.vue   |  82 ++++-
 src/components/target/newtypeChart.vue      |   4 +-
 src/utils/mqttConfig.js                     |   5 +-
 src/views/StateOperation.vue                | 349 ++++++++++----------
 src/views/bounced/dataBoard.vue             |  13 +-
 src/views/index.vue                         |  26 +-
 src/views/sensorFusion/index.vue            |  13 +-
 10 files changed, 361 insertions(+), 237 deletions(-)

diff --git a/src/components/newchart/lineChart.vue b/src/components/newchart/lineChart.vue
index 5818f18..ea64098 100644
--- a/src/components/newchart/lineChart.vue
+++ b/src/components/newchart/lineChart.vue
@@ -111,8 +111,44 @@ export default {
     },
 
     methods: {
-        drawLine(newVal, title, timeMode) {
-            // console.log('newVal == ', newVal)
+        //过滤重复的 time 字段，保留每个 time 最后一个对象
+        filteredArrayFun(originalArray, targetTime) {
+            // 过滤重复的 time 字段
+            let uniqueArray = originalArray.reduce((accumulator, currentValue) => {
+                const existingItemIndex = accumulator.findIndex((item) => item.time === currentValue.time);
+
+                if (existingItemIndex === -1) {
+                    accumulator.push(currentValue);
+                }
+
+                return accumulator;
+            }, []);
+
+            // 确保 targetTime 是有效的日期字符串
+            const targetDate = targetTime ? new Date(targetTime) : null;
+
+            // 过滤比目标时间小的对象
+            if (targetDate) {
+                uniqueArray = uniqueArray.filter((item) => new Date(item.time) > targetDate);
+            }
+
+            // 按照时间从小到大排序
+            // const sortedArray = uniqueArray.sort((a, b) => {
+            //     const dateA = new Date(a.time);
+            //     const dateB = new Date(b.time);
+            //     return dateA - dateB;
+            // });
+
+            return uniqueArray;
+        },
+        drawLine(nnewVal, title, timeMode) {
+            // console.log('newVal == ', nnewVal)
+            // let targetTime = '';
+            // if (nnewVal.length > 0) {
+            //     targetTime = nnewVal[nnewVal.length - 1].time;
+            // }
+            // let newVal = this.filteredArrayFun(nnewVal,targetTime);
+            let newVal = nnewVal
             let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart);
             if (myChart == null) {
                 myChart = this.$echarts.init(this.$refs.lineChart);
@@ -125,6 +161,7 @@ export default {
             }
 
             // myChart.showLoading()　　//开启loading
+            let series = this.getMessage(newVal, title, timeMode) || []
             let option = {
                 legend: {},
                 grid: {
@@ -180,7 +217,7 @@ export default {
                         }
                     }
                 ],
-                series: this.getMessage(newVal, title, timeMode)
+                series: series
             };
             myChart.setOption(option);
             window.addEventListener('resize', function () {
diff --git a/src/components/newchart/thermalChart.vue b/src/components/newchart/thermalChart.vue
index eb3cf2a..660f5d3 100644
--- a/src/components/newchart/thermalChart.vue
+++ b/src/components/newchart/thermalChart.vue
@@ -1,5 +1,8 @@
 <template>
-    <div id="thermalChart" ref="thermalChart" style="width: 705px; height: 300px"></div>
+    <div>
+        <div>当前数据时间：{{ time }}</div>
+        <div id="thermalChart" ref="thermalChart" style="width: 705px; height: 300px"></div>
+    </div>
 </template>
 
 <script>
@@ -7,7 +10,8 @@ export default {
     name: 'thermalChart', //热点图组件
     data() {
         return {
-            thermalChartData: []
+            thermalChartData: [],
+            time: '',
         };
     },
     created() {},
@@ -24,18 +28,18 @@ export default {
         title: {
             type: String
         },
-        startEndData:{
-            type:Object,
+        startEndData: {
+            type: Object,
             default() {
                 return {};
             }
-        }
+        },
         // status: {
         //     type: String
         // },
-        // componentName: {
-        //     type: String
-        // },
+        componentName: {
+            type: String
+        }
     },
     methods: {
         //处理od组件数据
@@ -53,7 +57,7 @@ export default {
                             // 数组去重
 
                             // od图的数据
-                            chartData.push([i, j, item[j].quantity]);
+                            chartData.push([j, i, item[j].quantity]);
                             // console.log([i,j,item[j].val]);
                         }
                     }
@@ -87,6 +91,14 @@ export default {
                     startEndEnd = startEnd.end.split(',');
                 }
             }
+            // console.log('title', this.title);
+            // console.log('componentName', this.componentName);
+            // console.log('odData', odData);
+            // console.log('startEnd', startEnd);
+            // console.log('x-startEndStart', startEndStart);
+            // console.log('y-startEndEnd', startEndEnd);
+            // console.log('series', this.ODhanlde(odData));
+
             let myChart = this.$echarts.init(this.$refs.thermalChart);
             let option = {
                 dataZoom: [
@@ -109,9 +121,9 @@ export default {
                 },
                 animation: false,
                 grid: {
-                    left: '3%',
-                    right: '8%',
-                    bottom: '8%',
+                    left: '0%',
+                    right: '11%',
+                    bottom: '11%',
                     containLabel: true
                 },
                 xAxis: {
@@ -124,12 +136,16 @@ export default {
                     },
                     axisLabel: {
                         interval: 0,
-                        rotate: 40
+                        rotate: 0
                     },
                     splitArea: {
                         show: true
+                    },
+                    name: "起点",
+                    nameTextStyle:{
+                        verticalAlign:'top',
+                        padding:[8,0,0,0]
                     }
-                    // name: "镇街",
                 },
                 yAxis: {
                     type: 'category',
@@ -141,12 +157,17 @@ export default {
                     },
                     axisLabel: {
                         interval: 0,
-                        rotate: 40
+                        rotate: 0
                     },
                     splitArea: {
                         show: true
+                    },
+                    name: "终点",
+                    nameLocation:'end',
+                    nameTextStyle:{
+                        verticalAlign:'bottom',
+                        padding:[0,40,0,0]
                     }
-                    // name: "",
                 },
                 visualMap: {
                     min: 1,
@@ -193,14 +214,16 @@ export default {
         }
     },
     mounted() {
-        this.drawThermalChart()
+        this.drawThermalChart();
     },
     watch: {
         list: {
             handler: function (newval, oldVal) {
                 if (newval && newval.length > 0) {
+                    // console.log('OD',newval)
                     this.$nextTick(() => {
-                        this.drawThermalChart(newval[0].ob_data,this.startEndData);
+                        this.time = newval[0].time
+                        this.drawThermalChart(newval[0].ob_data, this.startEndData);
                     });
                 }
             },
@@ -211,7 +234,7 @@ export default {
 };
 </script>
 <style scoped>
-.a{
+.a {
     color: rgba(120, 0, 0, 0.5);
 }
 </style>
diff --git a/src/components/sensorFusion/echartsLine.vue b/src/components/sensorFusion/echartsLine.vue
index 579d720..f0a5c01 100644
--- a/src/components/sensorFusion/echartsLine.vue
+++ b/src/components/sensorFusion/echartsLine.vue
@@ -114,7 +114,7 @@ export default {
                     yData = [];
                 let targetTime = '';
                 if (this.chartData.xData.length > 0) {
-                    targetTime = this.chartData.xData[this.chartData.xData.length - 1];
+                    targetTime = this.chartData.xData[this.chartData.xData.length - 1].time;
                 }
                 if (this.componentType != '类型') {
                     //类型种类特殊不能去除时间重复项，不走下面去重逻辑
diff --git a/src/components/sensorFusion/thermalOD.vue b/src/components/sensorFusion/thermalOD.vue
index 9d14594..f45e6a1 100644
--- a/src/components/sensorFusion/thermalOD.vue
+++ b/src/components/sensorFusion/thermalOD.vue
@@ -57,7 +57,7 @@ export default {
                             start.push(item[j].start);
                             // 数组去重
                             // od图的数据
-                            chartData.push([i, j, item[j].quantity]);
+                            chartData.push([j, i, item[j].quantity]);
                             // console.log([i,j,item[j].val]);
                         }
                     }
@@ -67,16 +67,61 @@ export default {
             // this.thermalChartData = chartData
             return chartData;
         },
+        //去除时间重复项
+        //过滤重复的 time 字段，保留每个 time 最后一个对象
+        filteredArrayFun(originalArray, targetTime) {
+            // 过滤重复的 time 字段
+            let uniqueArray = originalArray.reduce((accumulator, currentValue) => {
+                const existingItemIndex = accumulator.findIndex((item) => item.time === currentValue.time);
+
+                if (existingItemIndex === -1) {
+                    accumulator.push(currentValue);
+                }
+
+                return accumulator;
+            }, []);
+
+            // 确保 targetTime 是有效的日期字符串
+            const targetDate = targetTime ? new Date(targetTime) : null;
+
+            // 过滤比目标时间小的对象
+            if (targetDate) {
+                uniqueArray = uniqueArray.filter((item) => new Date(item.time) > targetDate);
+            }
+
+            // 按照时间从小到大排序
+            const sortedArray = uniqueArray.sort((a, b) => {
+                const dateA = new Date(a.time);
+                const dateB = new Date(b.time);
+                return dateA - dateB;
+            });
+
+            return sortedArray;
+        },
         initEcharts() {
             let dataList = null;
+            // let targetTime = '';
+            // if (this.dataList.length > 0) {
+            //     targetTime = this.dataList[this.dataList.length - 1].time;
+            // }
+            // let filterDataList = this.filteredArrayFun(this.dataList, targetTime);
+            let filterDataList = this.dataList
+            // console.log('实时触发-OD组件获取到的数据', this.dataList);
+            // console.log('实时触发-OD组件获取到的过滤数据', filterDataList);
             if (this.timeMode == '实时触发') {
                 let dataOd = [];
-                if (this.dataList.length > 0) {
-                    for (let i = 0; i < this.dataList.length; i++) {
-                        dataOd.push(this.dataList[i].ob_data);
-                        dataList = this.ODhanlde(dataOd);
-                    }
+                if (filterDataList.length > 0 && filterDataList[0].ob_data) {
+                    dataOd.push(filterDataList[0].ob_data);
+                    dataList = this.ODhanlde(dataOd);
                 }
+                
+                
+                // if (filterDataList.length > 0) {
+                //     for (let i = 0; i < filterDataList.length; i++) {
+                //         dataOd.push(filterDataList[i].ob_data);
+                //         dataList = this.ODhanlde(dataOd);
+                //     }
+                // }
             } else if (this.timeMode == '固定时刻') {
                 let dataOd = [];
                 // for (let i = 0; i < this.dataList.length; i++) {
@@ -85,11 +130,12 @@ export default {
                 // }
                 // if (this.dataList[0][0] == undefined) {
                 //   for (let i = 0; i < this.dataList.length; i++) {
-                if (this.dataList.length > 0 && this.dataList[0].ob_data) {
-                    dataOd.push(this.dataList[0].ob_data);
+                if (filterDataList.length > 0 && filterDataList[0].ob_data) {
+                    dataOd.push(filterDataList[0].ob_data);
+                    dataList = this.ODhanlde(dataOd);
                 }
 
-                dataList = this.ODhanlde(dataOd);
+                
                 //   }
                 // } else {
                 //   dataOd.push(this.dataList[0][0].ob_data);
@@ -103,10 +149,11 @@ export default {
                 // }
                 // if (this.dataList[0][0] == undefined) {
                 //   for (let i = 0; i < this.dataList.length; i++) {
-                if (this.dataList.length > 0 && this.dataList[0].ob_data) {
-                    dataOd.push(this.dataList[0].ob_data);
+                if (filterDataList.length > 0 && filterDataList[0].ob_data) {
+                    dataOd.push(filterDataList[0].ob_data);
+                    dataList = this.ODhanlde(dataOd);
                 }
-                dataList = this.ODhanlde(dataOd);
+                
                 //   }
                 // } else {
                 //   dataOd.push(this.dataList[0][0].ob_data);
@@ -114,12 +161,13 @@ export default {
                 // }
             }
             let myChart = this.chart;
-            let startName =[],endName=[]
-            if(this.startName){
-                startName = this.startName.split(',')
+            let startName = [],
+                endName = [];
+            if (this.startName) {
+                startName = this.startName.split(',');
             }
-            if(this.endName){
-                endName = this.endName.split(',')
+            if (this.endName) {
+                endName = this.endName.split(',');
             }
             if (dataList) {
                 let option = {
diff --git a/src/components/target/newtypeChart.vue b/src/components/target/newtypeChart.vue
index f954103..cc61035 100644
--- a/src/components/target/newtypeChart.vue
+++ b/src/components/target/newtypeChart.vue
@@ -40,13 +40,13 @@
                         <span style="font-size: 15px">速度</span><br />
 
                         <!-- <span style="font-size: 30px; font-weight: bold">{{ typeValue.speed }}</span> -->
-                        <span style="font-size: 30px; font-weight: bold">
+                        <span style="font-size: 26px; font-weight: bold">
                             <span v-if="(latestDataArr.speed && latestDataArr.speed != -1) || latestDataArr.speed === 0">
                                 {{ Math.abs(latestDataArr.speed) }}
                             </span>
                             <span v-else> - </span>
                         </span>
-                        <span style="font-size: 20px; font-weight: 200">
+                        <span style="font-size: 14px; font-weight: 200">
                             <span v-if="(latestDataArr.speed && latestDataArr.speed != -1) || latestDataArr.speed === 0">
                                 {{ latestDataArr.speed > 0 || latestDataArr.speed === 0 ? 'km/h' : 'pix/s' }}
                             </span>
diff --git a/src/utils/mqttConfig.js b/src/utils/mqttConfig.js
index 4b05e57..69821a2 100644
--- a/src/utils/mqttConfig.js
+++ b/src/utils/mqttConfig.js
@@ -1,5 +1,7 @@
 import mqtt from "mqtt";
 import Vue from 'vue'
+import moment from 'moment';
+
 var vm = new Vue();
 var ip = window.location.host.split(":")[0];
 if (process.env.NODE_ENV === 'development') {
@@ -85,7 +87,8 @@ class mqttHandle {
                 // this._client.subscribe('detection0', { qos: 0 });
             });
             this.mqttClient.on('reconnect', (error) => {
-                console.log('正在重连')
+                console.log('正在重连-系统时间', moment().format('YYYY-MM-DD HH:mm:ss'))
+
             }) 
             
             this.mqttClient.on("error", (error) => {
diff --git a/src/views/StateOperation.vue b/src/views/StateOperation.vue
index ab87a3f..b2bb4fc 100644
--- a/src/views/StateOperation.vue
+++ b/src/views/StateOperation.vue
@@ -1,38 +1,39 @@
 <template>
-  <div class="content-box">
-    <div class="container">
-      <!-- <p>主体页面 1 - 2 </p>
+    <div class="content-box">
+        <div class="container">
+            <!-- <p>主体页面 1 - 2 </p>
     <div class="test-div">
       <i class="el-icon-edit"></i>
       <i class="el-icon-share"></i>
       <i class="el-icon-delete"></i>
     </div> -->
-      <h1>运行状态</h1>
-      <el-form :model="runningState" label-position="left" label-width="200px" style="width:70%">
-        <el-form-item label="类型：">{{ runningState.type }}</el-form-item>
-        <el-form-item label="版本：">{{ runningState.version }}</el-form-item>
-        <el-form-item label="当前系统时间：">{{ runningState.currentTime }}</el-form-item>
-        <el-form-item label="开始运行时间：">{{ runningState.startTime }}</el-form-item>
-        <el-form-item label="正常运行时长：">{{ runningState.runTime }}</el-form-item>
-      </el-form>
+            <h1>运行状态</h1>
+            <el-form :model="runningState" label-position="left" label-width="200px" style="width: 70%">
+                <el-form-item label="类型：">{{ runningState.type }}</el-form-item>
+                <el-form-item label="版本：">{{ runningState.version }}</el-form-item>
+                <el-form-item label="当前系统时间：">{{ runningState.currentTime }}</el-form-item>
+                <el-form-item label="开始运行时间：">{{ runningState.startTime }}</el-form-item>
+                <el-form-item label="正常运行时长：">{{ runningState.runTime }}</el-form-item>
+            </el-form>
 
-      <h1 class="mar-top20">系统性能状态</h1>
-      <el-form :model="performance" label-position="left" label-width="200px" style="width:70%">
-        <!-- <el-form-item label="正常运行时长：">{{ performance.runTime }}</el-form-item> -->
-        <el-form-item label="平均Cpu利用率：">{{ performance.averageCpuUtilization }}</el-form-item>
-        <el-form-item label="Cpu利用率："><span v-for="s in performance.cpuUtilization"
-                        :key="s">{{ s +'%'}} | </span> </el-form-item>
-        <el-form-item label="Cpu温度：">{{ performance.cpuTemperature }}</el-form-item>
-        <el-form-item label="Cpu名称：">{{ performance.cpuName }}</el-form-item>
-        <el-form-item label="Gpu利用率：">{{ performance.gpuUtilization }}</el-form-item>
-        <el-form-item label="Gpu温度：">{{ performance.gpuTemperature }}</el-form-item>
-        <el-form-item label="使用的内存：">{{ performance.memoryUsage }}</el-form-item>
-        <el-form-item label="内存总数：">{{ performance.totalMemory }}</el-form-item>
-        <el-form-item label="已使用虚拟内存：">{{ performance.virtualMemoryUsed }}</el-form-item>
-        <el-form-item label="虚拟内存总计：">{{ performance.totalVirtualMemory }}</el-form-item>
-      </el-form>
+            <h1 class="mar-top20">系统性能状态</h1>
+            <el-form :model="performance" label-position="left" label-width="200px" style="width: 70%">
+                <!-- <el-form-item label="正常运行时长：">{{ performance.runTime }}</el-form-item> -->
+                <el-form-item label="平均Cpu利用率：">{{ performance.averageCpuUtilization }}</el-form-item>
+                <el-form-item label="Cpu利用率："
+                    ><span v-for="s in performance.cpuUtilization" :key="s">{{ s + '%' }} | </span>
+                </el-form-item>
+                <el-form-item label="Cpu温度：">{{ performance.cpuTemperature }}</el-form-item>
+                <el-form-item label="Cpu名称：">{{ performance.cpuName }}</el-form-item>
+                <el-form-item label="Gpu利用率：">{{ performance.gpuUtilization }}</el-form-item>
+                <el-form-item label="Gpu温度：">{{ performance.gpuTemperature }}</el-form-item>
+                <el-form-item label="使用的内存：">{{ performance.memoryUsage }}</el-form-item>
+                <el-form-item label="内存总数：">{{ performance.totalMemory }}</el-form-item>
+                <el-form-item label="已使用虚拟内存：">{{ performance.virtualMemoryUsed }}</el-form-item>
+                <el-form-item label="虚拟内存总计：">{{ performance.totalVirtualMemory }}</el-form-item>
+            </el-form>
 
-      <!-- <el-table class="mar-top20" :data="mountingPointTable" border style="width: 100%">
+            <!-- <el-table class="mar-top20" :data="mountingPointTable" border style="width: 100%">
         <el-table-column prop="mountingPoint" label="安装点">
         </el-table-column>
         <el-table-column prop="equipmentName" label="设备名称">
@@ -49,173 +50,165 @@
         </el-table-column>
       </el-table> -->
 
+            <h1 class="mar-top20">系统网络状态</h1>
+            <el-form :model="networkStatus" label-position="left" label-width="200px" style="width: 70%">
+                <el-form-item label="互联网接入：">{{ networkStatus.internetAccess }}</el-form-item>
+                <el-form-item label="互联网延迟：">{{ networkStatus.internetDelay }}</el-form-item>
+                <el-form-item label="DNS访问：">{{ networkStatus.DNS }}</el-form-item>
+                <el-form-item label="本地VPN访问：">{{ networkStatus.VPNvisit }}</el-form-item>
+                <el-form-item label="服务器VPN访问：">{{ networkStatus.serverVPN }}</el-form-item>
+                <el-form-item label="服务器VPN访问：">{{ networkStatus.serverVPNOpen }}</el-form-item>
+            </el-form>
 
-      <h1 class="mar-top20">系统网络状态</h1>
-      <el-form :model="networkStatus" label-position="left" label-width="200px" style="width:70%">
-        <el-form-item label="互联网接入：">{{ networkStatus.internetAccess }}</el-form-item>
-        <el-form-item label="互联网延迟：">{{ networkStatus.internetDelay }}</el-form-item>
-        <el-form-item label="DNS访问：">{{ networkStatus.DNS }}</el-form-item>
-        <el-form-item label="本地VPN访问：">{{ networkStatus.VPNvisit }}</el-form-item>
-        <el-form-item label="服务器VPN访问：">{{ networkStatus.serverVPN }}</el-form-item>
-        <el-form-item label="服务器VPN访问：">{{ networkStatus.serverVPNOpen }}</el-form-item>
-      </el-form>
-
-      <el-table class="mar-top20" :data="mountingPointTable" border style="width: 100%">
-        <el-table-column prop="connect" label="连接">
-        </el-table-column>
-        <el-table-column prop="IP" label="IP地址">
-        </el-table-column>
-        <el-table-column prop="acceptor" label="接受">
-          <template slot-scope="scope">
-            {{ scope.row.occupancy }}K
-          </template>
-        </el-table-column>
-        <el-table-column prop="totalReceived" label="收到的总数">
-          <template slot-scope="scope">
-            {{ scope.row.total }}GB
-          </template>
-        </el-table-column>
-        <el-table-column prop="transmission" label="传输">
-          <template slot-scope="scope">
-            {{ scope.row.total }}Kb/s
-          </template>
-        </el-table-column>
-        <el-table-column prop="transmissionTotal" label="传输的总数">
-          <template slot-scope="scope">
-            {{ scope.row.total }}MB
-          </template>
-        </el-table-column>
-      </el-table>
+            <el-table class="mar-top20" :data="mountingPointTable" border style="width: 100%">
+                <el-table-column prop="connect" label="连接"> </el-table-column>
+                <el-table-column prop="IP" label="IP地址"> </el-table-column>
+                <el-table-column prop="acceptor" label="接受">
+                    <template slot-scope="scope"> {{ scope.row.occupancy }}K </template>
+                </el-table-column>
+                <el-table-column prop="totalReceived" label="收到的总数">
+                    <template slot-scope="scope"> {{ scope.row.total }}GB </template>
+                </el-table-column>
+                <el-table-column prop="transmission" label="传输">
+                    <template slot-scope="scope"> {{ scope.row.total }}Kb/s </template>
+                </el-table-column>
+                <el-table-column prop="transmissionTotal" label="传输的总数">
+                    <template slot-scope="scope"> {{ scope.row.total }}MB </template>
+                </el-table-column>
+            </el-table>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
 export default {
-  data() {
-    return {
-      runningState: {
-        type: '',
-        version: '',
-        currentTime: '',
-        startTime: '',
-        runTime: '',
-      },
-      performance: {
-        runTime: '',
-        averageCpuUtilization: '',
-        cpuUtilization: '',
-        cpuTemperature: '',
-        cpuName: '',
-        gpuUtilization: '',
-        gpuTemperature: '',
-        memoryUsage: '',
-        totalMemory: '',
-        virtualMemoryUsed: '',
-        totalVirtualMemory: '',
-      },
-      mountingPointTable: [
-        // {
-        //   mountingPoint: '2016-05-02',
-        //   equipmentName: '王小虎',
-        //   occupancy: '上海市普陀区金沙江路 1518 弄',
-        //   total: '上海市普陀区金沙江路 1518 弄',
-        // },
-      ],
-      networkStatus: {
-        internetAccess: '',
-        internetDelay: '',
-        DNS: '',
-        VPNvisit: '',
-        serverVPN: '',
-        serverVPNOpen: '',
-      },
-      networkStatus: [
-        // {
-        //   connect: '2016-05-02',
-        //   IP: '王小虎',
-        //   acceptor: '上海市普陀区金沙江路 1518 弄',
-        //   totalReceived: '上海市普陀区金沙江路 1518 弄',
-        //   transmission: '上海市普陀区金沙江路 1518 弄',
-        //   transmissionTotal: '上海市普陀区金沙江路 1518 弄',
-        // },
-      ]
-    }
-  },
-  created() {
- this.createMqtt()
-    //  setTimeout(() => {
-    //                     this.createMqtt()
-    //                     }, 3000);
-},
-  mounted() {
-
-    window.setInterval( () => {    //每隔30秒自动请求一次方法 this.getdata() ，保证数据实时的更新
-	this.publishClient()
-}, 1000 * 5 )
-  },
-   methods: {
-         /** 创建mqtt */
-    createMqtt() {
-         window.publish('Contorl_client',JSON.stringify({"type":"getStatus"})); 
-      //创建链接，接收数据
-        var topicSends = ['Contorl_server'];
-         window.PubScribe(topicSends,-1,this.realInfo);
-        
-   },
-   publishClient(){
-     window.publish('Contorl_client',JSON.stringify({"type":"getStatus"})); 
-   },
-    /** 实时数据分类 */
-    realInfo(topic, message) {
-        // console.log("topic",topic)
-      switch (topic) {
-          case "Contorl_server":
-             try {
-                //  console.log("message",message)
-              const utf8decoder = new TextDecoder()
-              const u8arr = new Uint8Array(message)
-              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
-              const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
-            //  console.log("msg",msg)
-              this.runningState.currentTime =  msg.now_time
-              this.runningState.startTime =  msg.starttime
-              this.runningState.runTime =  msg.uptime
-              //平均Cpu利用率
-              this.performance.averageCpuUtilization =  msg.cpu_Average+'%'
-              this.performance.cpuUtilization =  msg.cpu_Every
-               this.performance.cpuTemperature =  msg.cpu_Temperature+"°C"
-              this.performance.cpuName =  msg.cpu_Name
-              this.performance.gpuUtilization =  msg.gpu_Average+'%' 
-              this.performance.gpuTemperature =  msg.gpu_Temperature+"°C"
-              var newmemoryUsed = msg.memory_used/1024/1024/1024
-               this.performance.memoryUsage =  msg.memory_percent+'%'+'  |  '+ newmemoryUsed.toFixed(2)+'GB'
-               var totalMemoryN = msg.memory_total/1024/1024/1024
-                this.performance.totalMemory =  totalMemoryN.toFixed(2)+'GB'
-                 var newswapUsed = msg.swap_used/1024/1024/1024
-                 this.performance.virtualMemoryUsed =   msg.swap_percent+'%' +'  |  '+ newswapUsed.toFixed(2)+'GB'
-                 var totalVirtualMemoryN = msg.swap_total/1024/1024/1024
-                  this.performance.totalVirtualMemory =  totalVirtualMemoryN.toFixed(2)+'GB'
-          } catch (error) {
-
-          }
-          break;
-      }
+    data() {
+        return {
+            runningState: {
+                type: '',
+                version: '',
+                currentTime: '',
+                startTime: '',
+                runTime: ''
+            },
+            performance: {
+                runTime: '',
+                averageCpuUtilization: '',
+                cpuUtilization: '',
+                cpuTemperature: '',
+                cpuName: '',
+                gpuUtilization: '',
+                gpuTemperature: '',
+                memoryUsage: '',
+                totalMemory: '',
+                virtualMemoryUsed: '',
+                totalVirtualMemory: ''
+            },
+            mountingPointTable: [
+                // {
+                //   mountingPoint: '2016-05-02',
+                //   equipmentName: '王小虎',
+                //   occupancy: '上海市普陀区金沙江路 1518 弄',
+                //   total: '上海市普陀区金沙江路 1518 弄',
+                // },
+            ],
+            networkStatus: {
+                internetAccess: '',
+                internetDelay: '',
+                DNS: '',
+                VPNvisit: '',
+                serverVPN: '',
+                serverVPNOpen: ''
+            },
+            // networkStatus: [
+            // {
+            //   connect: '2016-05-02',
+            //   IP: '王小虎',
+            //   acceptor: '上海市普陀区金沙江路 1518 弄',
+            //   totalReceived: '上海市普陀区金沙江路 1518 弄',
+            //   transmission: '上海市普陀区金沙江路 1518 弄',
+            //   transmissionTotal: '上海市普陀区金沙江路 1518 弄',
+            // },
+            // ]
+            messageTimer: null
+        };
     },
-}
-}
+    created() {
+        this.createMqtt();
+        //  setTimeout(() => {
+        //                     this.createMqtt()
+        //                     }, 3000);
+    },
+    mounted() {
+        this.publishClient();
+        this.messageTimer = setInterval(() => {
+            //每隔30秒自动请求一次方法 this.getdata() ，保证数据实时的更新
+            this.publishClient();
+        }, 1000 * 5);
+    },
+    methods: {
+        /** 创建mqtt */
+        createMqtt() {
+            // window.publish('Contorl_client', JSON.stringify({ type: 'getStatus' }));
+            //创建链接，接收数据
+            var topicSends = ['Contorl_server'];
+            window.PubScribe(topicSends, -1, this.realInfo);
+        },
+        publishClient() {
+            window.publish('Contorl_client', JSON.stringify({ type: 'getStatus' }));
+        },
+        /** 实时数据分类 */
+        realInfo(topic, message) {
+            // console.log("topic",topic)
+            switch (topic) {
+                case 'Contorl_server':
+                    try {
+                        //  console.log("message",message)
+                        const utf8decoder = new TextDecoder();
+                        const u8arr = new Uint8Array(message);
+                        const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
+                        const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
+                        //  console.log("msg",msg)
+                        this.runningState.currentTime = msg.now_time;
+                        this.runningState.startTime = msg.starttime;
+                        this.runningState.runTime = msg.uptime;
+                        //平均Cpu利用率
+                        this.performance.averageCpuUtilization = msg.cpu_Average + '%';
+                        this.performance.cpuUtilization = msg.cpu_Every;
+                        this.performance.cpuTemperature = msg.cpu_Temperature + '°C';
+                        this.performance.cpuName = msg.cpu_Name;
+                        this.performance.gpuUtilization = msg.gpu_Average + '%';
+                        this.performance.gpuTemperature = msg.gpu_Temperature + '°C';
+                        var newmemoryUsed = msg.memory_used / 1024 / 1024 / 1024;
+                        this.performance.memoryUsage = msg.memory_percent + '%' + '  |  ' + newmemoryUsed.toFixed(2) + 'GB';
+                        var totalMemoryN = msg.memory_total / 1024 / 1024 / 1024;
+                        this.performance.totalMemory = totalMemoryN.toFixed(2) + 'GB';
+                        var newswapUsed = msg.swap_used / 1024 / 1024 / 1024;
+                        this.performance.virtualMemoryUsed = msg.swap_percent + '%' + '  |  ' + newswapUsed.toFixed(2) + 'GB';
+                        var totalVirtualMemoryN = msg.swap_total / 1024 / 1024 / 1024;
+                        this.performance.totalVirtualMemory = totalVirtualMemoryN.toFixed(2) + 'GB';
+                    } catch (error) {}
+                    break;
+            }
+        }
+    },
+    beforeDestroy() {
+        clearInterval(this.messageTimer);
+        this.messageTimer = null;
+    }
+};
 </script>
 
 <style scoped>
 .test-div i {
-  font-size: 25px;
+    font-size: 25px;
 }
 
 .el-form-item {
-  margin-bottom: 0px;
+    margin-bottom: 0px;
 }
 
 .mar-top20 {
-  margin-top: 20px;
+    margin-top: 20px;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/bounced/dataBoard.vue b/src/views/bounced/dataBoard.vue
index d3df0f8..6451f0e 100644
--- a/src/views/bounced/dataBoard.vue
+++ b/src/views/bounced/dataBoard.vue
@@ -249,6 +249,7 @@ export default {
                 if (item.children && item.children.length > 0) {
                     item.children.forEach((cItem) => {
                         if (cItem.timeMode == timeMode) {
+                            // console.log('cItem', cItem);
                             //找出对应timeMode的mqtt数据
                             tempNewVal.forEach((nItem) => {
                                 if (cItem.analogAreaComponentId == nItem.component_id) {
@@ -264,8 +265,18 @@ export default {
                                     } else {
                                         nItem.time = nItem.time.split('.')[0];
                                     }
+                                    if (this.$route.query.type == '离线视频') {
+                                        if (
+                                            cItem[updateKey].length == 0 ||
+                                            (cItem[updateKey].length > 0 && nItem.time != cItem[updateKey][0].time)
+                                        ) {
+                                            this.$set(cItem, updateKey, [nItem, ...cItem[updateKey]]);
+                                        }
+                                    } else {
+                                        this.$set(cItem, updateKey, [nItem, ...cItem[updateKey]]);
+                                    }
+
                                     // cItem[updateKey].unshift(nItem);
-                                    this.$set(cItem, updateKey, [nItem, ...cItem[updateKey]]);
                                 }
                             });
                         }
diff --git a/src/views/index.vue b/src/views/index.vue
index 74dcd6c..803a2cf 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -353,8 +353,10 @@
                         </el-slider>
                     </div>
                 </el-form-item>
-                <el-form-item label=""  v-if="componentForm.componentType == 'OD'">
-                    <div style="color:red;line-height: normal;">注意：OD组件消耗性能极高，可能会造成分析延迟，（起点个数*终点个数）值不要太大!</div>
+                <el-form-item label="" v-if="componentForm.componentType == 'OD'">
+                    <div style="color: red; line-height: normal">
+                        注意：OD组件消耗性能较大，可能会造成分析延迟，请不要勾选太多选项!
+                    </div>
                 </el-form-item>
                 <el-form-item label="起点：" :required="true" v-if="componentForm.componentType == 'OD'">
                     <el-checkbox-group v-model="componentForm.startSection" @change="handleCheckedStartSection">
@@ -1521,12 +1523,12 @@ export default {
                         var detId = [];
                         const msgN = JSON.parse(temp);
                         // console.log('实时触发trigger-', msgN[0].time,'-',msgN[0].frame);
-                        // //console.log("trigger_msgN",msgN)
+                        // console.log("trigger_msgN",msgN)
                         // msgN.forEach(item => {
                         //     //console.log("item.name",item.name)
                         // })
                         // for (const item of msgN) {
-                        //     if (item.component_name == '车头时距_4') {
+                        //     if (item.component_name == 'OD_0') {
                         //         console.log('源头实时触发trigger-', item);
                         //     }
                         // }
@@ -1551,7 +1553,7 @@ export default {
                         const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                         var detId = [];
                         const msgN = JSON.parse(temp);
-                        console.log('历史数据源头', msgN);
+                        // console.log('历史数据源头', msgN);
                         this.cycleHistoryData = msgN;
                     } catch (error) {}
                     break;
@@ -1563,6 +1565,11 @@ export default {
                         var detId = [];
                         const msgN = JSON.parse(temp);
                         //  console.log("cycle_statistics-固定间隔",temp)
+                        // for (const item of msgN) {
+                        //     if (item.component_name == 'OD_0') {
+                        //         console.log('源头固定间隔cycle_statistics-', item);
+                        //     }
+                        // }
                         this.cycleStatisticsData = msgN;
                     } catch (error) {}
                     break;
@@ -1738,7 +1745,7 @@ export default {
             this.componentId = id;
             this.componentForm.componentType = type;
             this.componentTitle = type;
-            getComponentData({ AnalogAreaComponentId: id }).then((res) => {
+            getComponentData({ AnalogAreaComponentId: id }).then(async(res) => {
                 //console.log('res', res);
                 if (res.data.code == 200) {
                     //console.log('res', res.data.data);
@@ -1781,7 +1788,7 @@ export default {
                     this.componentForm.endValue = res.data.data.endValue;
                     this.componentForm.startValue = res.data.data.startValue;
                     this.componentForm.presentationForm = res.data.data.presentationForm;
-                    this.getAllSectionalData(this.$route.query.id);
+                    await this.getAllSectionalData(this.$route.query.id);
                     // this.componentForm.typeFiltering = res.data.data.typeFiltering
                     // this.componentForm.type = res.data.data.type
                     if (res.data.data.startSectionIds != '') {
@@ -1894,7 +1901,7 @@ export default {
                 this.componentId = id;
                 this.componentForm.componentType = componentType;
                 this.componentTitle = componentType;
-                getComponentData({ AnalogAreaComponentId: id }).then((res) => {
+                getComponentData({ AnalogAreaComponentId: id }).then(async(res) => {
                     //console.log('res', res);
                     if (res.data.code == 200) {
                         //console.log('res', res.data.data);
@@ -1933,6 +1940,7 @@ export default {
                         this.componentForm.startValue = res.data.data.startValue;
                         this.componentForm.presentationForm = res.data.data.presentationForm;
                         // this.componentForm.type = res.data.data.type
+                        await this.getAllSectionalData(this.$route.query.id);
                         if (res.data.data.startSectionIds != '') {
                             //console.log('startSectionIds', res.data.data.startSectionIds);
                             var startSectionIdArr = [];
@@ -1985,7 +1993,7 @@ export default {
         },
         //获取所有断面数据
         getAllSectionalData(VideoId) {
-            getSectionalData({ VideoId: VideoId }).then((res) => {
+            return getSectionalData({ VideoId: VideoId }).then((res) => {
                 //console.log('res', res);
                 if (res.data.code == 200) {
                     this.sectionals = res.data.data;
diff --git a/src/views/sensorFusion/index.vue b/src/views/sensorFusion/index.vue
index 3ed9184..e458f5e 100644
--- a/src/views/sensorFusion/index.vue
+++ b/src/views/sensorFusion/index.vue
@@ -613,7 +613,7 @@
                                         <div :class="'echarts' + b" v-for="(e, b) in o.children" :key="b">
                                             <div
                                                 style="width: 100%; height: 100%"
-                                                v-show="e.presentationForm == '时间曲线图' && o.selectOption == b + 1"
+                                                v-if="e.presentationForm == '时间曲线图' && o.selectOption == b + 1"
                                             >
                                                 <div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box">
                                                     <span class="titleIcon"></span>
@@ -668,7 +668,7 @@
                                             </div>
                                             <div
                                                 style="width: 100%; height: 100%"
-                                                v-show="e.presentationForm == '表格' && o.selectOption == b + 1"
+                                                v-if="e.presentationForm == '表格' && o.selectOption == b + 1"
                                             >
                                                 <div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box">
                                                     <span class="titleIcon"></span>
@@ -780,7 +780,7 @@
                                             </div>
                                             <div
                                                 style="width: 100%; height: 100%"
-                                                v-show="e.presentationForm == '饼状图' && o.selectOption == b + 1"
+                                                v-if="e.presentationForm == '饼状图' && o.selectOption == b + 1"
                                             >
                                                 <div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box">
                                                     <span class="titleIcon"></span>
@@ -870,7 +870,7 @@
                                             </div>
                                             <div
                                                 style="width: 100%; height: 100%"
-                                                v-show="e.presentationForm == '均值图' && o.selectOption == b + 1"
+                                                v-if="e.presentationForm == '均值图' && o.selectOption == b + 1"
                                             >
                                                 <div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box">
                                                     <span class="titleIcon"></span>
@@ -912,7 +912,7 @@
                                             </div>
                                             <div
                                                 style="width: 100%; height: 100%"
-                                                v-show="e.presentationForm == '矩阵图' && o.selectOption == b + 1"
+                                                v-if="e.presentationForm == '矩阵图' && o.selectOption == b + 1"
                                             >
                                                 <div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box">
                                                     <span class="titleIcon"></span>
@@ -3083,7 +3083,8 @@ export default {
                                     //     );
                                     // });
                                     let carTou = {
-                                        ob_data: msgN[j].ob_data
+                                        ob_data: msgN[j].ob_data,
+                                        time: msgN[j].time,
                                     };
                                     this.$nextTick(() => {
                                         this.triggerDataCharts(