增加了dev和pro 不需要在开发时候切换ip了，打包不影响

.env.dev

@@ -0,0 +1 @@
+NODE_ENV = "development"

.env.pro

@@ -0,0 +1 @@
+NODE_ENV = "production"

public/flv/index.html

@@ -57,12 +57,13 @@
     <script>
         var ip = window.location.host;
         if (flvjs.isSupported()) {
-            console.log("getParam('src')-",getParam('src'));
+            // console.log("getParam('src')-", getParam('src'));
+            // console.log("getSrcParam('src')-", getSrcParam());
             var videoElement = document.getElementById('videoElement');
             var flvPlayer = flvjs.createPlayer({
                 type: 'flv',
                 isLive: true,
-                url:getNewurl(),//新逻辑
+                url: getNewurl(), //新逻辑
                 // url: 'ws://172.16.1.168:12309/rtsp/1/a/?url=' + getParam('src').replace(/\s+/g, '')
                 // url:'ws://'+ip.split(':')[0]+':12309/rtsp/1/a/?url='+getParam('src').replace(/\s+/g, '')
             });
@@ -83,8 +84,18 @@
             if (r != null) return decodeURI(decodeURI(r[2]));
         }
 
+        function getSrcParam() {
+            console.log("getSrcParam('src')-", location.search);
+            var srcIndex = location.search.indexOf('src=');
+            if (srcIndex !== -1) {
+                var srcSubstring = location.search.substring(srcIndex + 4); // 4 是 'src=' 的长度
+                return decodeURIComponent(srcSubstring);
+            }
+            return null;
+        }
+
         function getNewurl() {
-            let src = getParam('src').replace(/\s+/g, '');
+            let src = getSrcParam();
             let url='ws://'+ip.split(':')[0]+':12309/rtsp';
             // let url = 'ws://172.16.1.168:12309/rtsp';
             // console.log('getNewurl',src)
@@ -96,7 +107,7 @@
             } else {
                 url = url + '/1/a/?url=' + src;
             }
-            console.log('getNewurl-return',url)
+            console.log('getNewurl-return', url)
             return url;
         }
     </script>

src/components/chart/barChart.vue

@@ -21,6 +21,7 @@
 </template>
 
 <script>
+import { getNameFromTargetType } from '@/utils/targetType';
 export default {
     name: 'barChart', //饼图组件
     props: {
@@ -55,7 +56,7 @@ export default {
         drawBar(newVal) {
             if (newVal && newVal.type_data && newVal.type_data.length > 0) {
                 var xData = newVal.type_data.map((ele) => {
-                    return ele.name;
+                    return getNameFromTargetType(ele.name);
                 });
                 var yData = newVal.type_data.map((ele) => {
                     return ele.quantity;

src/components/chart/lineChart.vue

@@ -22,6 +22,7 @@
 </template>
 
 <script>
+import { getNameFromTargetType } from '@/utils/targetType';
 export default {
     name: 'lineChart', //折线图组件
     props: {
@@ -299,7 +300,7 @@ export default {
                                     });
 
                                     lineArr.push({
-                                        name: item.name,
+                                        name: getNameFromTargetType(item.name),
                                         data: valueList,
                                         type: 'line',
                                         smooth: true
@@ -426,7 +427,19 @@ export default {
         // console.log(this.$parent.dataArr, '父组件的dataArr');
         // this.$set(this.$parent.dataArr)
     },
-    watch: {}
+    watch: {
+        // list: {
+        //     handler: function (newval, oldVal) {
+        //         if (newval && newval.length > 0) {
+        //             this.$nextTick(() => {
+        //                 this.drawLine(newval, this.title, this.status);
+        //             });
+        //         }
+        //     },
+        //     deep: true
+        //     // immediate: true
+        // }
+    }
 };
 </script>
 <style scoped>

src/components/chart/pieChart.vue

@@ -21,6 +21,7 @@
 </template>
 
 <script>
+import { getNameFromTargetType } from '@/utils/targetType';
 export default {
     name: 'pieChart', //饼图图组件
     props: {
@@ -56,10 +57,10 @@ export default {
                 // });
                 var seriesData = [];
                 newVal.type_data.forEach((ele) => {
-                  console.log(JSON.stringify(ele))
+                //   console.log(JSON.stringify(ele))
                     if (ele.quantity != 0) {
                         seriesData.push({
-                            name: ele.name,
+                            name: getNameFromTargetType(ele.name),
                             value: ele.quantity
                         });
                         // legend.push(ele.name)

src/components/chart/regionTable.vue

@@ -18,6 +18,9 @@
                 <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
                 <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
                 <el-table-column align="center" label="目标类型" prop="type">
+                    <template slot-scope="scope">
+                        {{getNameFromTargetType(scope.row.type)}}
+                    </template>
                     <!-- <template slot-scope="scope">
                         <span v-if="scope.row.type == 'Person'">行人</span>
                         <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@@ -61,6 +64,9 @@
                 <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
                 <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
                 <el-table-column align="center" label="目标类型" prop="type">
+                    <template slot-scope="scope">
+                        {{getNameFromTargetType(scope.row.type)}}
+                    </template>
                     <!-- <template slot-scope="scope">
                         <span v-if="scope.row.type == 'Person'">行人</span>
                         <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@@ -104,6 +110,9 @@
                 <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
                 <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
                 <el-table-column align="center" label="目标类型" prop="type">
+                    <template slot-scope="scope">
+                        {{getNameFromTargetType(scope.row.type)}}
+                    </template>
                     <!-- <template slot-scope="scope">
                         <span v-if="scope.row.type == 'Person'">行人</span>
                         <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@@ -184,7 +193,10 @@
 </template>
   
 <script>
+import { getNameFromTargetType } from '@/utils/targetType';
+import tableShow from './tableShow.vue';
 export default {
+  components: { tableShow },
     name: 'tableShow', //表格组件
     props: {
         msg: {
@@ -199,6 +211,7 @@ export default {
     },
     data() {
         return {
+            getNameFromTargetType,
             dialogVisible: false,
             startTime: '',
             endTime: '',

src/components/chart/tableShow.vue

@@ -20,6 +20,9 @@
                 <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
                 <!-- <el-table-column align="center" prop="" label="视频帧"></el-table-column> -->
                 <el-table-column align="center" label="目标类型" prop="type">
+                    <template slot-scope="scope">
+                        {{getNameFromTargetType(scope.row.type)}}
+                    </template>
                     <!-- <template slot-scope="scope">
                         <span v-if="scope.row.type == 'Person'">行人</span>
                         <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@@ -60,6 +63,9 @@
                 <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
                 <!-- <el-table-column align="center" prop="" label="视频帧"></el-table-column> -->
                 <el-table-column align="center" label="目标类型" prop="type">
+                    <template slot-scope="scope">
+                        {{getNameFromTargetType(scope.row.type)}}
+                    </template>
                     <!-- <template slot-scope="scope">
                         <span v-if="scope.row.type == 'Person'">行人</span>
                         <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@@ -101,6 +107,9 @@
                 <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
                 <el-table-column align="center" prop="interval" label="时间序号"></el-table-column>
                 <el-table-column align="center" prop="type" label="目标类型">
+                    <template slot-scope="scope">
+                        {{getNameFromTargetType(scope.row.type)}}
+                    </template>
                     <!-- <template slot-scope="scope">
                         <span v-if="scope.row.type == 'Person'">行人</span>
                         <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@@ -201,6 +210,7 @@
 </template>
   
 <script>
+import { getNameFromTargetType } from '@/utils/targetType';
 export default {
     name: 'tableShow', //表格组件
     props: {
@@ -216,6 +226,7 @@ export default {
     },
     data() {
         return {
+            getNameFromTargetType,
             dialogVisible: false,
             startTime: '',
             endTime: '',

src/components/sensorFusion/echartsBar.vue

@@ -3,6 +3,7 @@
   </template>
   
   <script>
+  import { getNameFromTargetType } from '@/utils/targetType';
   export default {
     name: 'echartsBar',
     props: {
@@ -67,7 +68,7 @@
               quantity = this.dataList[0].type_data[j].value;
             }
             this.chartData.yData.push(quantity);
-            this.chartData.xData.push(this.dataList[0].type_data[j].name);
+            this.chartData.xData.push(getNameFromTargetType(this.dataList[0].type_data[j].name));
           }
         }
       },

src/components/sensorFusion/echartsLine.vue

@@ -3,6 +3,7 @@
 </template>
 
 <script>
+import { getNameFromTargetType } from '@/utils/targetType';
 export default {
     name: 'echartsLine', //折线图组件
     props: {
@@ -160,7 +161,7 @@ export default {
                                         });
 
                                         transformedData.push({
-                                            name: item.name,
+                                            name: getNameFromTargetType(item.name),
                                             value: valueList
                                         });
                                     }
@@ -227,7 +228,7 @@ export default {
                                         });
 
                                         transformedData.push({
-                                            name: item.name,
+                                            name: getNameFromTargetType(item.name),
                                             value: valueList
                                         });
                                     }
@@ -295,7 +296,7 @@ export default {
                                         });
 
                                         transformedData.push({
-                                            name: item.name,
+                                            name: getNameFromTargetType(item.name),
                                             value: valueList
                                         });
                                     }
@@ -568,9 +569,9 @@ export default {
             };
             if (myChart) {
                 myChart.setOption(option);
-                window.addEventListener('resize', () => {
+                window.onresize = () => {
                     myChart.resize();
-                });
+                };
             }
         }
     },
@@ -580,11 +581,11 @@ export default {
         $dom.style.width = '440px';
         $dom.style.height = '260px';
         setTimeout(() => {
+            this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
+            if (this.chart == null) {
+                this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
+            }
             that.$nextTick(() => {
-                this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
-                if (this.chart == null) {
-                    this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
-                }
                 that.initEcharts();
             });
         }, 300);

src/components/sensorFusion/echartsPie.vue

@@ -3,6 +3,7 @@
 </template>
 
 <script>
+import { getNameFromTargetType } from '@/utils/targetType';
 export default {
     name: 'echartsPie', //折线图组件
     props: {
@@ -97,6 +98,7 @@ export default {
                 let temp=[];
                 seriesData.forEach((ele) => {
                     if (ele.value != 0) {
+                        ele.name = getNameFromTargetType(ele.name);
                         temp.push(ele)
                     }
                 })

src/components/sensorFusion/regionTable.vue

@@ -9,6 +9,9 @@
                 <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
                 <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
                 <el-table-column align="center" label="目标类型" prop="type">
+                    <template slot-scope="scope">
+                        {{getNameFromTargetType(scope.row.type)}}
+                    </template>
                     <!-- <template slot-scope="scope">
                         <span v-if="scope.row.type == 'Person'">行人</span>
                         <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@@ -52,6 +55,9 @@
                 <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
                 <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
                 <el-table-column align="center" label="目标类型" prop="type">
+                    <template slot-scope="scope">
+                        {{getNameFromTargetType(scope.row.type)}}
+                    </template>
                     <!-- <template slot-scope="scope">
                         <span v-if="scope.row.type == 'Person'">行人</span>
                         <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@@ -95,6 +101,9 @@
                 <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
                 <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
                 <el-table-column align="center" label="目标类型" prop="type">
+                    <template slot-scope="scope">
+                        {{getNameFromTargetType(scope.row.type)}}
+                    </template>
                     <!-- <template slot-scope="scope">
                         <span v-if="scope.row.type == 'Person'">行人</span>
                         <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@@ -139,6 +148,7 @@
 </template>
 
 <script>
+import { getNameFromTargetType } from '@/utils/targetType';
 export default {
     name: 'regionTable',
     props: {
@@ -154,6 +164,7 @@ export default {
     },
     data() {
         return {
+            getNameFromTargetType,
             //表格字段备注
             tableOptions: [
                 {

src/components/sensorFusion/tableShow.vue

@@ -9,6 +9,9 @@
                 <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
                 <!-- <el-table-column align="center" prop="" label="视频帧"></el-table-column> -->
                 <el-table-column align="center" label="目标类型" prop="type">
+                    <template slot-scope="scope">
+                        {{getNameFromTargetType(scope.row.type)}}
+                    </template>
                     <!-- <template slot-scope="scope">
                         <span v-if="scope.row.type == 'Person'">行人</span>
                         <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@@ -49,6 +52,9 @@
                 <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
                 <!-- <el-table-column align="center" prop="" label="视频帧"></el-table-column> -->
                 <el-table-column align="center" label="目标类型" prop="type">
+                    <template slot-scope="scope">
+                        {{getNameFromTargetType(scope.row.type)}}
+                    </template>
                     <!-- <template slot-scope="scope">
                         <span v-if="scope.row.type == 'Person'">行人</span>
                         <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@@ -89,6 +95,9 @@
                 <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
                 <el-table-column align="center" prop="interval" label="时间序号"></el-table-column>
                 <el-table-column align="center" prop="type" label="目标类型">
+                    <template slot-scope="scope">
+                        {{getNameFromTargetType(scope.row.type)}}
+                    </template>
                     <!-- <template slot-scope="scope">
                         <span v-if="scope.row.type == 'Person'">行人</span>
                         <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@@ -151,6 +160,7 @@
 </template>
 
 <script>
+import { getNameFromTargetType } from '@/utils/targetType';
 export default {
     name: 'tableShow',
     props: {
@@ -166,6 +176,7 @@ export default {
     },
     data() {
         return {
+            getNameFromTargetType,
             //表格字段备注
             tableOptions: [
                 {

src/components/target/typeChart.vue

@@ -12,7 +12,7 @@
                         style="width: 150px; margin-bottom: 20px; text-align: center"
                     >
                         <div>
-                            <span style="font-size: 15px">{{ n.name }}</span
+                            <span style="font-size: 15px">{{ getNameFromTargetType(n.name) }}</span
                             ><br />
                             <span style="font-size: 30px; font-weight: bold">{{
                                 n.quantity || n.quantity === 0 ? n.quantity : ' - '
@@ -36,7 +36,7 @@
                         style="width: 150px; margin-bottom: 20px; text-align: center"
                     >
                         <div>
-                            <span style="font-size: 15px">{{ n.name }}</span
+                            <span style="font-size: 15px">{{ getNameFromTargetType(n.name) }}</span
                             ><br />
                             <span style="font-size: 30px; font-weight: bold">{{
                                 n.quantity || n.quantity === 0 ? n.quantity : ' - '
@@ -210,8 +210,8 @@
                     <div>
                         <div v-if="newDataArr[0].time">
                             <!-- {{ newDataArr[0].time ? newDataArr[0].time : '' }} -->
-                            <div>{{newDataArr[0].time.slice(0, 11)}}</div>
+                            <div>{{ newDataArr[0].time.slice(0, 11) }}</div>
-                            <div>{{newDataArr[0].time.slice(11)}}</div>
+                            <div>{{ newDataArr[0].time.slice(11) }}</div>
                         </div>
                     </div>
                 </div>
@@ -325,6 +325,7 @@ import pieChart from '../chart/pieChart.vue';
 import detailDialog from '../chart/detailDialog.vue';
 import regionTable from '../chart/regionTable.vue';
 import thermalChart from '../chart/thermalChart.vue';
+import { getNameFromTargetType } from '@/utils/targetType';
 export default {
     name: 'typeChart', //类型组件
     props: [
@@ -351,6 +352,7 @@ export default {
     },
     data() {
         return {
+            getNameFromTargetType,
             // 类型数值
             total: 0,
             // 速度数值
@@ -370,7 +372,11 @@ export default {
     methods: {
         // 计算类型数量的总和
         getDataArr(val) {
-            // console.log('getDataArr', val);
+            // if(val&&val.length>0){
+            //     if(val[0].component_name=='车头时距_4')
+            //     console.log('typeChart-getDataArr', val);
+            // }
+            
             this.newDataArr = val;
             this.getNewQueue(this.newDataArr);
         },
@@ -391,8 +397,7 @@ export default {
                 this.cycleAccumulateDataArr[0].headway = val[0].headway;
             }
             if (val[0].ave_headway) {
-
+                this.cycleAccumulateDataArr[0].headway = val[0].ave_headway == -1 ? '-' : val[0].ave_headway;
-                this.cycleAccumulateDataArr[0].headway = val[0].ave_headway==-1?'-':val[0].ave_headway;
             }
             if (val[0].n_stay) {
                 this.cycleAccumulateDataArr[0].n_stay = val[0].n_stay;
@@ -409,9 +414,9 @@ export default {
                             return cur.quantity + prev;
                         }, 0);
                     }
-                    return 0
+                    return 0;
                 }
-                return 0
+                return 0;
             }
         },
         getNewQueue(val) {
@@ -425,7 +430,7 @@ export default {
                 this.newDataArr[0].headway = val[0].headway;
             }
             if (val[0].ave_headway) {
-                this.newDataArr[0].headway = val[0].ave_headway==-1?'-':val[0].ave_headway;
+                this.newDataArr[0].headway = val[0].ave_headway == -1 ? '-' : val[0].ave_headway;
             }
             if (val[0].n_stay) {
                 this.newDataArr[0].n_stay = val[0].n_stay;
@@ -524,14 +529,13 @@ export default {
 };
 </script>
 <style scoped>
-
 .spacialCard {
-    width: 150px; 
+    width: 150px;
-    margin-bottom: 20px; 
+    margin-bottom: 20px;
     text-align: center;
 }
 
-::v-deep.spacialCard .el-card__body{
+::v-deep.spacialCard .el-card__body {
     padding: 10px;
 }
 

src/config/apiurl.js

@@ -1,4 +1,7 @@
 var ipUurl = window.location.host.split(':')[0];
+if (process.env.NODE_ENV === 'development') {
+    ipUurl = '172.16.1.168'
+}
 // var ipUurl = '172.16.1.168'
 export default {
     //   dataUrl: "http://172.16.1.22:8080/api/AddShipjk",
@@ -54,26 +57,26 @@ export default {
     // getJianktx: `http://${ipUurl}:5000/api/GetJianktx`,
     //编辑保存组件弹窗传参
     editComponent: `http://${ipUurl}:5000/api/SetMonqjkzjcs`,
-     //保存主机名称
+    //保存主机名称
     editRoleApi: `http://${ipUurl}:5000/api/EditZhangh`,
-     saveRoleApi: `http://${ipUurl}:5000/api/AddZhangh`,
+    saveRoleApi: `http://${ipUurl}:5000/api/AddZhangh`,
     saveSetFtppz: `http://${ipUurl}:5000/api/SetFtppz`,
-        //编辑保存组件弹窗传参
+    //编辑保存组件弹窗传参
     setHostName: `http://${ipUurl}:5000/api/SetHostName`,
     setHostTime: `http://${ipUurl}:5000/api/SetHostTime`,
-    changePassowrd:`http://${ipUurl}:5000/api/ChangePassword`,
+    changePassowrd: `http://${ipUurl}:5000/api/ChangePassword`,
     //还原服务器设置上传
-    postConfigRestore:`http://${ipUurl}:5000/api/ConfigRestore`,
+    postConfigRestore: `http://${ipUurl}:5000/api/ConfigRestore`,
     //更新软件版本
-    postConfigUpdate:`http://${ipUurl}:5000/api/Update`,
+    postConfigUpdate: `http://${ipUurl}:5000/api/Update`,
     //新增接入方
-    postAddJierf:`http://${ipUurl}:5000/api/AddJierf`,
+    postAddJierf: `http://${ipUurl}:5000/api/AddJierf`,
     //编辑接入方
-    postEditJierf:`http://${ipUurl}:5000/api/EditJierf`,
+    postEditJierf: `http://${ipUurl}:5000/api/EditJierf`,
     //设置组件
-    setComponents:`http://${ipUurl}:5000/api/SetComponents`,
+    setComponents: `http://${ipUurl}:5000/api/SetComponents`,
-    setAccessParty:`http://${ipUurl}:5000/api/setAccessParty`,
+    setAccessParty: `http://${ipUurl}:5000/api/setAccessParty`,
     //自动校时接口
-    setAutomatic:`http://${ipUurl}:5000/api/SetAutomaticTiming`,
+    setAutomatic: `http://${ipUurl}:5000/api/SetAutomaticTiming`,
-    
+
-};
+};

src/utils/mqttConfig.js

@@ -2,6 +2,9 @@ import mqtt from "mqtt";
 import Vue from 'vue'
 var vm = new Vue();
 var ip = window.location.host.split(":")[0];
+if (process.env.NODE_ENV === 'development') {
+    ip = '172.16.1.168'
+}
 // var ip = '172.16.1.168';
 console.log("ip", ip)
 class mqttHandle {
@@ -47,7 +50,10 @@ class mqttHandle {
         } = this.connect;
         console.log("this.connect.host", this.connect.host)
         // const connectUrl = 'ws://172.16.1.168:10087/';
-        const connectUrl = `ws://${this.connect.host}:${this.connect.port}`;
+        let connectUrl = `ws://${this.connect.host}:${this.connect.port}`;
+        if (process.env.NODE_ENV === 'development') {
+            connectUrl = 'ws://172.16.1.168:10087/';
+        }
         // if (!client.connected) {
         //     client.on('connect', function () {
         //         console.log('连接成功')

src/utils/targetType.js

@@ -0,0 +1,24 @@
+const targetTypeObj = {
+  'traffic police': '交警',
+  'sanitation worker': '环卫工人',
+  'general pedestrian': '一般行人',
+  'car': '小汽车',
+  'truck': '卡车',
+  'coach': '大巴车',
+  'bus': '公交车',
+  'special vehicle': '特种车辆',
+  'construction vehicle': '建筑车辆',
+  'tricycle': '三轮车',
+  'bicycle': '自行车',
+  'electric bicycle': '电瓶车',
+  'fire': '火灾',
+}
+
+export function getNameFromTargetType(keys, defaultValue = '', separator = '|') {
+  if (keys) {
+    const keyArray = keys.split(separator);
+    const resultArray = keyArray.map(key => targetTypeObj[key] || key);
+    return resultArray.join(separator) || defaultValue;
+  }
+  return ''
+}

src/views/AnalysisMain.vue

@@ -447,6 +447,9 @@ export default {
                     this.videoList[i].videoAnalysisStatus = '已分析';
                     var ip = window.location.host;
                     var ipData = 'http://' + ip.split(':')[0];
+                    if (process.env.NODE_ENV === 'development') {
+                        ipData = 'http://172.16.1.168';
+                    }
                     // var ipData = 'http://172.16.1.168';
                     this.videoList[i].img = ipData + msg.pic_path;
                 } else if (msg.type == 'video_analyse_unusual' && msg.video_id == this.videoList[i].id) {
@@ -832,6 +835,9 @@ export default {
                     var arr = [];
                     var ip = window.location.host;
                     var ipData = 'http://' + ip.split(':')[0];
+                    if (process.env.NODE_ENV === 'development') {
+                        ipData = 'http://172.16.1.168';
+                    }
                     // var ipData = 'http://172.16.1.168';
                     res.data.data.forEach((item) => {
                         if (this.videoTypeForm.videoType == '离线视频' && item.videoAnalysisStatus == '已分析') {

src/views/bounced/analysisPreview.vue

@@ -1,313 +1,309 @@
 <template>
-  <div >
+    <div>
-    <div >
+        <div>
-         <div style="width:100%;height:900px;display:inline-block;border:1px soild #eee;">
+            <div style="width: 100%; height: 900px; display: inline-block; border: 1px soild #eee">
-                     <iframe id="mapModule" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height:100%;"></iframe>
+                <iframe id="mapModule" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height: 100%"></iframe>
-                      <!-- <iframe src="./VideoWeb/index.html" style="height: 100%; width: 100%;border: none" 
+                <!-- <iframe src="./VideoWeb/index.html" style="height: 100%; width: 100%;border: none" 
           ref="iframe"></iframe> -->
-                </div>
+            </div>
-      <el-dialog title="提示" :visible.sync="showUpdateCertificate" width="30%">
+            <el-dialog title="提示" :visible.sync="showUpdateCertificate" width="30%">
-        <el-row>
+                <el-row>
-          <el-col :span="6">
+                    <el-col :span="6"> 文件选择： </el-col>
-            文件选择：
+                    <el-col :span="18">
-          </el-col>
+                        <el-upload action="https://jsonplaceholder.typicode.com/posts/">
-          <el-col :span="18">
+                            <el-button size="small" type="primary">点击上传</el-button>
-            <el-upload action="https://jsonplaceholder.typicode.com/posts/">
+                        </el-upload>
-              <el-button size="small" type="primary">点击上传</el-button>
+                    </el-col>
-            </el-upload>
+                </el-row>
-          </el-col>
-        </el-row>
 
-        <span slot="footer" class="dialog-footer">
+                <span slot="footer" class="dialog-footer">
-          <el-button type="primary" @click="showUpdateCertificate = false">确 定</el-button>
+                    <el-button type="primary" @click="showUpdateCertificate = false">确 定</el-button>
-        </span>
+                </span>
-      </el-dialog>
+            </el-dialog>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-import mqtt from "mqtt"; // mqtt协议
+import mqtt from 'mqtt'; // mqtt协议
 
 export default {
-  data() {
+    data() {
-    return {
+        return {
-      form: {
+            form: {
-        name1: '离线',
+                name1: '离线',
-        name2: '重新配置',
+                name2: '重新配置',
-        state: '关',
+                state: '关',
-        endTime: '连接',
+                endTime: '连接',
-        blacklist: '-1x-1',
+                blacklist: '-1x-1',
-        autograph: '-1x-1',
+                autograph: '-1x-1',
-        version: '0',
+                version: '0',
-        version1: '0',
+                version1: '0',
-        version2: '0',
+                version2: '0',
-        version4: '',
+                version4: '',
-         version5: '不受支持的',
+                version5: '不受支持的',
-        version6: '不受支持的',
+                version6: '不受支持的',
-        version7: '不受支持的',
+                version7: '不受支持的',
-        version8: '不受支持的',
+                version8: '不受支持的'
-      },
+            },
-      showUpdateCertificate: false,
+            showUpdateCertificate: false
-    }
+        };
-  },
-  created() {
-    this.testMqtt()
-
-  },
-   methods: {
-    // 测试：mqtt测试
-    testMqtt() {
-      this.getDataByMqtt()
     },
-        // mqtt订阅（独立）
+    created() {
-    getDataByMqtt(url, topic, cIdNum) {
+        this.testMqtt();
-       
+    },
-      const clientId = "test_id_" + String(new Date().getTime()); // 用户名
+    methods: {
-      //   const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
+        // 测试：mqtt测试
-      var ip = window.location.host.split(":")[0];
+        testMqtt() {
-        console.log("ip",ip)
+            this.getDataByMqtt();
-      const host = `ws://${ip}:10087`; 
-      // const host = 'ws://172.16.1.168:10087/';
-
-      const options = {
-        // 配置
-        // 测试：订阅本机IP
-        // host: host,
-        // port: port,
-        // host:"172.16.1.168:10086",
-        keepalive: 60, // 心跳时间，默认60s，设置为0禁用
-        username: 'admin',  // 用户名（可选）
-        password: '123456',  // 密码（可选）
-        clientId: clientId, // 客户端ID，默认随机生成
-        protocolId: "MQTT",
-        protocolVersion: 4,
-        clean: true, // false在离线时接收QoS1和2的消息
-        reconnectPeriod: 2000, // 重连间隔，默认1000毫秒
-        connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间
-        will: {
-          // 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息）
-          topic: "img1", // 要发布的主题
-          payload: "[MQTT-TEST] 遗嘱消息：连接异常断开！", // 要发布的消息
-          qos: 0, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次
-          retain: false, // 保留标志
         },
-      };
+        // mqtt订阅（独立）
-      if (this.mqttClient == undefined) {
+        getDataByMqtt(url, topic, cIdNum) {
-        this.mqttClient = mqtt.connect(host, options); // 连接
+            const clientId = 'test_id_' + String(new Date().getTime()); // 用户名
-        // const client = mqtt.connect(host, options); // 连接
+            //   const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
-        // const client = mqtt.connect(host)  // 连接
+            var ip = window.location.host.split(':')[0];
-        // 错误回调
+            console.log('ip', ip);
-        // console.log("this.mqttClient", this.mqttClient)
+            let host = `ws://${ip}:10087`;
-        this.mqttClient.on("error", (err) => {
+            if (process.env.NODE_ENV === 'development') {
-          console.log("[MQTT-TEST] 连接错误：", err);
+                host = 'ws://172.16.1.168:10087/';
-          this.mqttClient.end();
-        });
-        // 重连回调
-        this.mqttClient.on("reconnect", (reconnect) => {
-        //   console.log("[MQTT-TEST] 重连中……", reconnect);
-        });
-        // 连接回调
-        this.mqttClient.on("connect", (connect) => {
-        //   console.log("[MQTT-TEST] 已连接的客户端ID: ", connect);
-          // 订阅
-          this.mqttClient.subscribe('img0', { qos: 0 });
-          this.mqttClient.publish('aaa', '111');
-          this.mqttClient.subscribe('img1', { qos: 0 });
-          this.mqttClient.subscribe('img2', { qos: 0 });
-          this.mqttClient.subscribe('img3', { qos: 0 });
-          this.mqttClient.subscribe('img4', { qos: 0 });
-          this.mqttClient.subscribe('img5', { qos: 0 });
-          this.mqttClient.subscribe('img6', { qos: 0 });
-          this.mqttClient.subscribe('img7', { qos: 0 });
-          this.mqttClient.subscribe('stream0', { qos: 0 });
-          this.mqttClient.subscribe('stream1', { qos: 0 });
-          this.mqttClient.subscribe('stream2', { qos: 0 });
-          this.mqttClient.subscribe('stream3', { qos: 0 });
-          this.mqttClient.subscribe('stream4', { qos: 0 });
-          this.mqttClient.subscribe('stream5', { qos: 0 });
-          this.mqttClient.subscribe('stream6', { qos: 0 });
-          this.mqttClient.subscribe('stream7', { qos: 0 });        
-        });
-         
-        // 接收回调
-        this.mqttClient.on("message", (topic, message, packet) => {            
-          if (topic.indexOf("img0") != -1) {
-            try {
-              const utf8decoder = new TextDecoder()
-              const u8arr = new Uint8Array(message)
-              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
-              const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
-            document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
-            } catch {
-              let imageType = 'arraybuffer';
-              const blob = new Blob([message], { type: imageType })
-              const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
-              console.log("imageUrl", imageUrl)
             }
-          } else if (topic.indexOf("img1") != -1) {
+            // const host = 'ws://172.16.1.168:10087/';
-            try {
-              const utf8decoder = new TextDecoder()
-              const u8arr = new Uint8Array(message)
-              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
-              const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
-            //   console.log("msg", msg)   //msg为转换后的JSON数据
-             document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
-            } catch {
-              let imageType = 'arraybuffer';
-              const blob = new Blob([message], { type: imageType })
-              const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
-              console.log("imageUrl", imageUrl)
-            }
-          } else if (topic.indexOf("img2") != -1) {
-            try {
-              const utf8decoder = new TextDecoder()
-              const u8arr = new Uint8Array(message)
-              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
-              const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
-              console.log("msg", msg)   //msg为转换后的JSON数据
-              document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
-            } catch {
-              let imageType = 'arraybuffer';
-              const blob = new Blob([message], { type: imageType })
-              const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
-              console.log("imageUrl", imageUrl)
-            }
-          } else if (topic.indexOf("img3") != -1) {
-            try {
-              const utf8decoder = new TextDecoder()
-              const u8arr = new Uint8Array(message)
-              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
-              const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
-              console.log("msg", msg)   //msg为转换后的JSON数据
-              document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
-            } catch {
-              let imageType = 'arraybuffer';
-              const blob = new Blob([message], { type: imageType })
-              const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
-              console.log("imageUrl", imageUrl)
-            }
-          } else if (topic.indexOf("img4") != -1) {
-            try {
-              const utf8decoder = new TextDecoder()
-              const u8arr = new Uint8Array(message)
-              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
-              const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
-              console.log("msg", msg)   //msg为转换后的JSON数据
-              document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
-            } catch {
-              let imageType = 'arraybuffer';
-              const blob = new Blob([message], { type: imageType })
-              const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
-              console.log("imageUrl", imageUrl)
-            }
-          } else if (topic.indexOf("img5") != -1) {
-            try {
-              const utf8decoder = new TextDecoder()
-              const u8arr = new Uint8Array(message)
-              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
-              const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
-              console.log("msg", msg)   //msg为转换后的JSON数据
-             document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
-            } catch {
-              let imageType = 'arraybuffer';
-              const blob = new Blob([message], { type: imageType })
-              const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
-              console.log("imageUrl", imageUrl)
-            }
-          } else if (topic.indexOf("img6") != -1) {
-            try {
-              const utf8decoder = new TextDecoder()
-              const u8arr = new Uint8Array(message)
-              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
-              const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
-              console.log("msg", msg)   //msg为转换后的JSON数据
-             document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
-            } catch {
-              let imageType = 'arraybuffer';
-              const blob = new Blob([message], { type: imageType })
-              const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
-              console.log("imageUrl", imageUrl)
-            }
-          }else if (topic.indexOf("img7") != -1) {
-            try {
-              const utf8decoder = new TextDecoder()
-              const u8arr = new Uint8Array(message)
-              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
-              const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
-              console.log("msg", msg)   //msg为转换后的JSON数据
-             document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
-            } catch {
-              let imageType = 'arraybuffer';
-              const blob = new Blob([message], { type: imageType })
-              const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
-              console.log("imageUrl", imageUrl)
-            }
-          }else if (topic.indexOf("stream0") != -1) {
-            const utf8decoder = new TextDecoder()
-              const u8arr = new Uint8Array(message)
-              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
-              const msg = JSON.parse(temp)
-                document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
-          } else if (topic.indexOf("stream1") != -1) {
-            const utf8decoder = new TextDecoder()
-              const u8arr = new Uint8Array(message)
-              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
-              const msg = JSON.parse(temp)
-                document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
-          } else if (topic.indexOf("stream2") != -1) {
-            const utf8decoder = new TextDecoder()
-              const u8arr = new Uint8Array(message)
-              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
-              const msg = JSON.parse(temp)
-                document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
-          } else if (topic.indexOf("stream3") != -1) {
-            const utf8decoder = new TextDecoder()
-              const u8arr = new Uint8Array(message)
-              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
-              const msg = JSON.parse(temp)
-                document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
-          } else if (topic.indexOf("stream4") != -1) {
-           const utf8decoder = new TextDecoder()
-              const u8arr = new Uint8Array(message)
-              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
-              const msg = JSON.parse(temp)
-            document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
-          } else if (topic.indexOf("stream5") != -1) {
-            const utf8decoder = new TextDecoder()
-              const u8arr = new Uint8Array(message)
-              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
-            const msg = JSON.parse(temp)
-            document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
-          }else if (topic.indexOf("stream6") != -1) {
-            const utf8decoder = new TextDecoder()
-              const u8arr = new Uint8Array(message)
-              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
-            const msg = JSON.parse(temp)
-            document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
-          }else if (topic.indexOf("stream7") != -1) {
-            const utf8decoder = new TextDecoder()
-              const u8arr = new Uint8Array(message)
-              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
-            const msg = JSON.parse(temp)
-            document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
-          }
 
-        });
+            const options = {
-      }
+                // 配置
+                // 测试：订阅本机IP
+                // host: host,
+                // port: port,
+                // host:"172.16.1.168:10086",
+                keepalive: 60, // 心跳时间，默认60s，设置为0禁用
+                username: 'admin', // 用户名（可选）
+                password: '123456', // 密码（可选）
+                clientId: clientId, // 客户端ID，默认随机生成
+                protocolId: 'MQTT',
+                protocolVersion: 4,
+                clean: true, // false在离线时接收QoS1和2的消息
+                reconnectPeriod: 2000, // 重连间隔，默认1000毫秒
+                connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间
+                will: {
+                    // 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息）
+                    topic: 'img1', // 要发布的主题
+                    payload: '[MQTT-TEST] 遗嘱消息：连接异常断开！', // 要发布的消息
+                    qos: 0, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次
+                    retain: false // 保留标志
+                }
+            };
+            if (this.mqttClient == undefined) {
+                this.mqttClient = mqtt.connect(host, options); // 连接
+                // const client = mqtt.connect(host, options); // 连接
+                // const client = mqtt.connect(host)  // 连接
+                // 错误回调
+                // console.log("this.mqttClient", this.mqttClient)
+                this.mqttClient.on('error', (err) => {
+                    console.log('[MQTT-TEST] 连接错误：', err);
+                    this.mqttClient.end();
+                });
+                // 重连回调
+                this.mqttClient.on('reconnect', (reconnect) => {
+                    //   console.log("[MQTT-TEST] 重连中……", reconnect);
+                });
+                // 连接回调
+                this.mqttClient.on('connect', (connect) => {
+                    //   console.log("[MQTT-TEST] 已连接的客户端ID: ", connect);
+                    // 订阅
+                    this.mqttClient.subscribe('img0', { qos: 0 });
+                    this.mqttClient.publish('aaa', '111');
+                    this.mqttClient.subscribe('img1', { qos: 0 });
+                    this.mqttClient.subscribe('img2', { qos: 0 });
+                    this.mqttClient.subscribe('img3', { qos: 0 });
+                    this.mqttClient.subscribe('img4', { qos: 0 });
+                    this.mqttClient.subscribe('img5', { qos: 0 });
+                    this.mqttClient.subscribe('img6', { qos: 0 });
+                    this.mqttClient.subscribe('img7', { qos: 0 });
+                    this.mqttClient.subscribe('stream0', { qos: 0 });
+                    this.mqttClient.subscribe('stream1', { qos: 0 });
+                    this.mqttClient.subscribe('stream2', { qos: 0 });
+                    this.mqttClient.subscribe('stream3', { qos: 0 });
+                    this.mqttClient.subscribe('stream4', { qos: 0 });
+                    this.mqttClient.subscribe('stream5', { qos: 0 });
+                    this.mqttClient.subscribe('stream6', { qos: 0 });
+                    this.mqttClient.subscribe('stream7', { qos: 0 });
+                });
 
-
+                // 接收回调
-    },
+                this.mqttClient.on('message', (topic, message, packet) => {
-   }
+                    if (topic.indexOf('img0') != -1) {
-}
+                        try {
+                            const utf8decoder = new TextDecoder();
+                            const u8arr = new Uint8Array(message);
+                            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
+                            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
+                            document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
+                        } catch {
+                            let imageType = 'arraybuffer';
+                            const blob = new Blob([message], { type: imageType });
+                            const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
+                            console.log('imageUrl', imageUrl);
+                        }
+                    } else if (topic.indexOf('img1') != -1) {
+                        try {
+                            const utf8decoder = new TextDecoder();
+                            const u8arr = new Uint8Array(message);
+                            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
+                            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
+                            //   console.log("msg", msg)   //msg为转换后的JSON数据
+                            document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
+                        } catch {
+                            let imageType = 'arraybuffer';
+                            const blob = new Blob([message], { type: imageType });
+                            const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
+                            console.log('imageUrl', imageUrl);
+                        }
+                    } else if (topic.indexOf('img2') != -1) {
+                        try {
+                            const utf8decoder = new TextDecoder();
+                            const u8arr = new Uint8Array(message);
+                            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
+                            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
+                            console.log('msg', msg); //msg为转换后的JSON数据
+                            document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
+                        } catch {
+                            let imageType = 'arraybuffer';
+                            const blob = new Blob([message], { type: imageType });
+                            const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
+                            console.log('imageUrl', imageUrl);
+                        }
+                    } else if (topic.indexOf('img3') != -1) {
+                        try {
+                            const utf8decoder = new TextDecoder();
+                            const u8arr = new Uint8Array(message);
+                            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
+                            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
+                            console.log('msg', msg); //msg为转换后的JSON数据
+                            document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
+                        } catch {
+                            let imageType = 'arraybuffer';
+                            const blob = new Blob([message], { type: imageType });
+                            const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
+                            console.log('imageUrl', imageUrl);
+                        }
+                    } else if (topic.indexOf('img4') != -1) {
+                        try {
+                            const utf8decoder = new TextDecoder();
+                            const u8arr = new Uint8Array(message);
+                            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
+                            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
+                            console.log('msg', msg); //msg为转换后的JSON数据
+                            document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
+                        } catch {
+                            let imageType = 'arraybuffer';
+                            const blob = new Blob([message], { type: imageType });
+                            const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
+                            console.log('imageUrl', imageUrl);
+                        }
+                    } else if (topic.indexOf('img5') != -1) {
+                        try {
+                            const utf8decoder = new TextDecoder();
+                            const u8arr = new Uint8Array(message);
+                            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
+                            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
+                            console.log('msg', msg); //msg为转换后的JSON数据
+                            document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
+                        } catch {
+                            let imageType = 'arraybuffer';
+                            const blob = new Blob([message], { type: imageType });
+                            const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
+                            console.log('imageUrl', imageUrl);
+                        }
+                    } else if (topic.indexOf('img6') != -1) {
+                        try {
+                            const utf8decoder = new TextDecoder();
+                            const u8arr = new Uint8Array(message);
+                            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
+                            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
+                            console.log('msg', msg); //msg为转换后的JSON数据
+                            document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
+                        } catch {
+                            let imageType = 'arraybuffer';
+                            const blob = new Blob([message], { type: imageType });
+                            const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
+                            console.log('imageUrl', imageUrl);
+                        }
+                    } else if (topic.indexOf('img7') != -1) {
+                        try {
+                            const utf8decoder = new TextDecoder();
+                            const u8arr = new Uint8Array(message);
+                            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
+                            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
+                            console.log('msg', msg); //msg为转换后的JSON数据
+                            document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
+                        } catch {
+                            let imageType = 'arraybuffer';
+                            const blob = new Blob([message], { type: imageType });
+                            const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
+                            console.log('imageUrl', imageUrl);
+                        }
+                    } else if (topic.indexOf('stream0') != -1) {
+                        const utf8decoder = new TextDecoder();
+                        const u8arr = new Uint8Array(message);
+                        const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
+                        const msg = JSON.parse(temp);
+                        document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
+                    } else if (topic.indexOf('stream1') != -1) {
+                        const utf8decoder = new TextDecoder();
+                        const u8arr = new Uint8Array(message);
+                        const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
+                        const msg = JSON.parse(temp);
+                        document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
+                    } else if (topic.indexOf('stream2') != -1) {
+                        const utf8decoder = new TextDecoder();
+                        const u8arr = new Uint8Array(message);
+                        const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
+                        const msg = JSON.parse(temp);
+                        document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
+                    } else if (topic.indexOf('stream3') != -1) {
+                        const utf8decoder = new TextDecoder();
+                        const u8arr = new Uint8Array(message);
+                        const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
+                        const msg = JSON.parse(temp);
+                        document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
+                    } else if (topic.indexOf('stream4') != -1) {
+                        const utf8decoder = new TextDecoder();
+                        const u8arr = new Uint8Array(message);
+                        const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
+                        const msg = JSON.parse(temp);
+                        document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
+                    } else if (topic.indexOf('stream5') != -1) {
+                        const utf8decoder = new TextDecoder();
+                        const u8arr = new Uint8Array(message);
+                        const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
+                        const msg = JSON.parse(temp);
+                        document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
+                    } else if (topic.indexOf('stream6') != -1) {
+                        const utf8decoder = new TextDecoder();
+                        const u8arr = new Uint8Array(message);
+                        const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
+                        const msg = JSON.parse(temp);
+                        document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
+                    } else if (topic.indexOf('stream7') != -1) {
+                        const utf8decoder = new TextDecoder();
+                        const u8arr = new Uint8Array(message);
+                        const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
+                        const msg = JSON.parse(temp);
+                        document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
+                    }
+                });
+            }
+        }
+    }
+};
 </script>
 
 <style>
 .test-div i {
-  font-size: 25px;
+    font-size: 25px;
 }
 
 .el-form-item {
-  margin-bottom: 0px;
+    margin-bottom: 0px;
 }
 </style>

src/views/bounced/dataBoard.vue

@@ -468,12 +468,12 @@ export default {
         // 处理过的触发数据
         triggerListData: {
             handler(newVal) {
-                // //console.log("newVal",newVal,'流量数据')
+                // console.log("实时触发triggerListData-",newVal)
                 this.triggerList = newVal;
                 //  //console.log("oldVal",oldVal)
                 // 触发数据
                 var _this = this;
-                if (newVal.length != 0 && _this.sectionData) {
+                if (newVal.length != 0 && _this.sectionData.length>0) {
                     _this.classify.forEach((ele, index) => {
                         if (ele.trigger == undefined && ele.timeMode == '实时触发') {
                             ele.trigger = [];
@@ -498,6 +498,10 @@ export default {
                                 if (item.type_data != null) {
                                     _this.typeTimeMode = item;
                                 }
+                                //component_type
+                                // if(item.component_name=='车头时距_4'){
+                                //     console.log("dataBoard实时触发triggerListData-item",item)
+                                // }
                                 ele.trigger.unshift(item);
                                 _this.$nextTick(() => {
                                     if (_this.$refs.typeChartRef != undefined) {

src/views/general/AboutMachine.vue

@@ -676,6 +676,9 @@ export default {
         // 备份服务器事件
         backupHandle() {
             var ipUrl = window.location.origin
+            if (process.env.NODE_ENV === 'development') {
+                ipUrl = '172.16.1.168';
+            }
             // var ipUrl = '172.16.1.168'
             this.$confirm('此操作将备份操作, 是否继续?', '提示', {
                 confirmButtonText: '确定',

src/views/index.vue

@@ -107,23 +107,23 @@
                         <div style="border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px; box-sizing: border-box; margin-top: 10px">
                             <div style="text-align: center; font-weight: 700">行人/非机动车</div>
                             <el-checkbox-group v-model="typeCheckList">
-                                <el-checkbox label="traffic police">交通警察</el-checkbox>
+                                <el-checkbox label="traffic police">交警</el-checkbox>
                                 <el-checkbox label="sanitation worker">环卫工人</el-checkbox>
-                                <el-checkbox label="general pedestrian">普通行人</el-checkbox>
+                                <el-checkbox label="general pedestrian">一般行人</el-checkbox>
                                 <el-checkbox label="tricycle">三轮车</el-checkbox>
                                 <el-checkbox label="bicycle">自行车</el-checkbox>
-                                <el-checkbox label="electric bicycle">电车</el-checkbox>
+                                <el-checkbox label="electric bicycle">电瓶车</el-checkbox>
                             </el-checkbox-group>
                         </div>
                         <div style="border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px; box-sizing: border-box; margin-top: 10px">
                             <div style="text-align: center; font-weight: 700">机动车</div>
                             <el-checkbox-group v-model="typeCheckList">
-                                <el-checkbox label="car">汽车</el-checkbox>
+                                <el-checkbox label="car">小汽车</el-checkbox>
                                 <el-checkbox label="truck">卡车</el-checkbox>
-                                <el-checkbox label="coach">客车</el-checkbox>
+                                <el-checkbox label="coach">大巴车</el-checkbox>
                                 <el-checkbox label="bus">公交车</el-checkbox>
-                                <el-checkbox label="special vehicle">专用汽车</el-checkbox>
+                                <el-checkbox label="special vehicle">特种车辆</el-checkbox>
-                                <el-checkbox label="construction vehicle">施工车辆</el-checkbox>
+                                <el-checkbox label="construction vehicle">建筑车辆</el-checkbox>
                             </el-checkbox-group>
                         </div>
                         <div style="border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px; box-sizing: border-box; margin-top: 10px">
@@ -248,23 +248,23 @@
                     <div style="border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px; box-sizing: border-box; margin-top: 10px">
                         <div style="text-align: center; font-weight: 700">行人/非机动车</div>
                         <el-checkbox-group v-model="componentForm.type" @change="handleTypeData">
-                            <el-checkbox label="traffic police">交通警察</el-checkbox>
+                            <el-checkbox label="traffic police">交警</el-checkbox>
                             <el-checkbox label="sanitation worker">环卫工人</el-checkbox>
-                            <el-checkbox label="general pedestrian">普通行人</el-checkbox>
+                            <el-checkbox label="general pedestrian">一般行人</el-checkbox>
                             <el-checkbox label="tricycle">三轮车</el-checkbox>
                             <el-checkbox label="bicycle">自行车</el-checkbox>
-                            <el-checkbox label="electric bicycle">电车</el-checkbox>
+                            <el-checkbox label="electric bicycle">电瓶车</el-checkbox>
                         </el-checkbox-group>
                     </div>
                     <div style="border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px; box-sizing: border-box; margin-top: 10px">
                         <div style="text-align: center; font-weight: 700">机动车</div>
                         <el-checkbox-group v-model="componentForm.type" @change="handleTypeData">
-                            <el-checkbox label="car">汽车</el-checkbox>
+                            <el-checkbox label="car">小汽车</el-checkbox>
                             <el-checkbox label="truck">卡车</el-checkbox>
-                            <el-checkbox label="coach">客车</el-checkbox>
+                            <el-checkbox label="coach">大巴车</el-checkbox>
                             <el-checkbox label="bus">公交车</el-checkbox>
-                            <el-checkbox label="special vehicle">专用汽车</el-checkbox>
+                            <el-checkbox label="special vehicle">特种车辆</el-checkbox>
-                            <el-checkbox label="construction vehicle">施工车辆</el-checkbox>
+                            <el-checkbox label="construction vehicle">建筑车辆</el-checkbox>
                         </el-checkbox-group>
                     </div>
                     <div style="border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px; box-sizing: border-box; margin-top: 10px">
@@ -1333,6 +1333,9 @@ export default {
         //获取视频分析结果
         analysisData() {
             var ip = window.location.host.split(':')[0];
+            if (process.env.NODE_ENV === 'development') {
+                ip = '172.16.1.168';
+            }
             // var ip = '172.16.1.168'; //http://172.16.1.168
             //console.log('ip', ip);
             getAnalysisData(this.$route.query.id, ip).then((res) => {
@@ -1373,6 +1376,9 @@ export default {
         //分析结束传参
         postTraffic() {
             var ip = window.location.host.split(':')[0];
+            if (process.env.NODE_ENV === 'development') {
+                ip = '172.16.1.168';
+            }
             // var ip = '172.16.1.168'; //http://172.16.1.168:5000
             //console.log('ip', ip);
             getAnalysisData(this.$route.query.id, ip).then((res) => {
@@ -1492,8 +1498,8 @@ export default {
                         //     //console.log("item.name",item.name)
                         // })
                         // for (const item of msgN) {
-                        //     if (item.name == 'gate3触发') {
+                        //     if (item.component_name == '车头时距_4') {
-                        //         console.log('实时触发trigger-', item);
+                        //         console.log('源头实时触发trigger-', item);
                         //     }
                         // }
                         this.triggerListData = msgN;
@@ -1635,6 +1641,9 @@ export default {
             var ip = window.location.host;
             // this.ipData = 'http://' + ip.split(':')[0] + ':5000';
             this.ipData = 'http://' + ip.split(':')[0];
+            if (process.env.NODE_ENV === 'development') {
+                this.ipData = 'http://172.16.1.168';
+            }
             document.getElementById('mapModule').contentWindow.getIpData(this.ipData);
             // document.getElementById('mapModule').contentWindow.getIpData('http://172.16.1.168');
             if (this.$route.query.type == '离线视频') {

src/views/sensorFusion/index.vue

@@ -604,7 +604,7 @@
                                         <el-radio-button :label="m + 1" v-for="(n, m) in o.children" :key="m"></el-radio-button>
                                     </el-radio-group>
                                     <!--初始化渲染图表-->
-                                    <div class="echartsList">
+                                    <div class="echartList">
                                         <div :class="'echarts' + b" v-for="(e, b) in o.children" :key="b">
                                             <div
                                                 style="width: 100%; height: 100%"
@@ -616,7 +616,7 @@
                                                 </div>
                                                 <div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
                                                     <el-empty
-                                                        :image-size="20"
+                                                        :image-size="100"
                                                         description="暂无数据"
                                                         v-if="e.triggerDataList == null"
                                                     ></el-empty>
@@ -636,7 +636,7 @@
                                                 </div>
                                                 <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
                                                     <el-empty
-                                                        :image-size="20"
+                                                        :image-size="100"
                                                         description="暂无数据"
                                                         v-if="e.cycleTimeData.length == 0 || e.cycleTimeData.length == null"
                                                     ></el-empty>
@@ -655,7 +655,7 @@
                                                 </div>
                                                 <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
                                                     <el-empty
-                                                        :image-size="20"
+                                                        :image-size="100"
                                                         description="暂无数据"
                                                         v-if="e.cycleStatisticsData == null || e.cycleStatisticsData.length == 0"
                                                     ></el-empty>
@@ -683,10 +683,10 @@
                                                 </div>
                                                 <div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
                                                     <div style="width: 100%; height: 100%" v-if="e.graphicType == '断面'">
-                                                        <tableShow :tableData="e.triggerNewData" :triggerType="e.timeMode" />
+                                                        <tableShow :tableData="e.triggerDataList" :triggerType="e.timeMode" />
                                                     </div>
                                                     <div style="width: 100%; height: 100%" v-if="e.graphicType == '区域'">
-                                                        <regionTable :tableData="e.triggerNewData" :triggerType="e.timeMode" />
+                                                        <regionTable :tableData="e.triggerDataList" :triggerType="e.timeMode" />
                                                     </div>
                                                 </div>
                                                 <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
@@ -795,7 +795,7 @@
                                                 </div>
                                                 <div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
                                                     <el-empty
-                                                        :image-size="20"
+                                                        :image-size="100"
                                                         description="暂无数据"
                                                         v-if="e.triggerDataList == null"
                                                     ></el-empty>
@@ -811,7 +811,7 @@
                                                 </div>
                                                 <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
                                                     <el-empty
-                                                        :image-size="20"
+                                                        :image-size="100"
                                                         description="暂无数据"
                                                         v-if="e.cycleTimeData.length == 0 || e.cycleTimeData.length == null"
                                                     ></el-empty>
@@ -827,7 +827,7 @@
                                                 </div>
                                                 <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
                                                     <el-empty
-                                                        :image-size="20"
+                                                        :image-size="100"
                                                         description="暂无数据"
                                                         v-if="e.cycleStatisticsData.length == 0 || e.cycleStatisticsData.length == null"
                                                     ></el-empty>
@@ -852,7 +852,7 @@
                                                 </div>
                                                 <div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
                                                     <el-empty
-                                                        :image-size="20"
+                                                        :image-size="100"
                                                         description="暂无数据"
                                                         v-if="e.triggerDataList == null"
                                                     ></el-empty>
@@ -868,7 +868,7 @@
                                                 </div>
                                                 <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
                                                     <el-empty
-                                                        :image-size="20"
+                                                        :image-size="100"
                                                         description="暂无数据"
                                                         v-if="e.cycleTimeData.length == 0 || e.cycleTimeData.length == null"
                                                     ></el-empty>
@@ -884,7 +884,7 @@
                                                 </div>
                                                 <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
                                                     <el-empty
-                                                        :image-size="20"
+                                                        :image-size="100"
                                                         description="暂无数据"
                                                         v-if="e.cycleStatisticsData.length == 0 || e.cycleStatisticsData.length == null"
                                                     ></el-empty>
@@ -909,7 +909,7 @@
                                                 </div>
                                                 <div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
                                                     <el-empty
-                                                        :image-size="20"
+                                                        :image-size="100"
                                                         description="暂无数据"
                                                         v-if="e.triggerDataList == null"
                                                     ></el-empty>
@@ -924,7 +924,7 @@
                                                 </div>
                                                 <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
                                                     <el-empty
-                                                        :image-size="20"
+                                                        :image-size="100"
                                                         description="暂无数据"
                                                         v-if="e.cycleTimeData.length == 0 || e.cycleTimeData.length == null"
                                                     ></el-empty>
@@ -939,7 +939,7 @@
                                                 </div>
                                                 <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
                                                     <el-empty
-                                                        :image-size="20"
+                                                        :image-size="100"
                                                         description="暂无数据"
                                                         v-if="e.cycleStatisticsData.length == 0 || e.cycleStatisticsData.length == null"
                                                     ></el-empty>
@@ -963,7 +963,7 @@
                                                 </div>
                                                 <div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
                                                     <el-empty
-                                                        :image-size="20"
+                                                        :image-size="100"
                                                         description="暂无数据"
                                                         v-if="e.triggerDataList == null"
                                                     ></el-empty>
@@ -982,7 +982,7 @@
                                                 </div>
                                                 <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
                                                     <el-empty
-                                                        :image-size="20"
+                                                        :image-size="100"
                                                         description="暂无数据"
                                                         v-if="e.cycleTimeData.length == 0 || e.cycleTimeData.length == null"
                                                     ></el-empty>
@@ -1001,7 +1001,7 @@
                                                 </div>
                                                 <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
                                                     <el-empty
-                                                        :image-size="20"
+                                                        :image-size="100"
                                                         description="暂无数据"
                                                         v-if="e.cycleStatisticsData.length == 0 || e.cycleStatisticsData.length == null"
                                                     ></el-empty>
@@ -1877,7 +1877,6 @@ export default {
                         this.addSelectOptionField(obj[key]);
                     } else if (key == 'name') {
                         obj['selectOption'] = 1;
-                        obj['triggerNewData'] = [];
                     }
                 }
             }
@@ -2784,13 +2783,19 @@ export default {
                                             type_data: newValue,
                                             originalSpeed: table.originalSpeed
                                         };
-                                        this.addTimeDataCharts(data[i].children[j].children[n].children[m].triggerNewData, typeData);
+                                        if (!data[i].children[j].children[n].children[m].triggerDataList) {
-                                    } else {
+                                            data[i].children[j].children[n].children[m].triggerDataList = [];
-                                        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);
+                                        this.addTimeDataCharts(data[i].children[j].children[n].children[m].triggerDataList, typeData);
+                                    } else {
+                                        if (!data[i].children[j].children[n].children[m].triggerDataList) {
+                                            data[i].children[j].children[n].children[m].triggerDataList = [];
+                                        }
+                                        if (data[i].children[j].children[n].children[m].triggerDataList.length > 10) {
+                                            data[i].children[j].children[n].children[m].triggerDataList =
+                                                data[i].children[j].children[n].children[m].triggerDataList.slice(-10);
+                                        }
+                                        this.addTimeDataCharts(data[i].children[j].children[n].children[m].triggerDataList, newValue);
                                     }
                                 }
                             }
@@ -2827,12 +2832,14 @@ export default {
                                             min: table.min,
                                             originalSpeed: table.originalSpeed
                                         };
-                                        // if (data[i].children[j].children[n].children[m].cycleTimeData.length > 10) {
+                                        if (!data[i].children[j].children[n].children[m].cycleTimeData) {
-                                        //     data[i].children[j].children[n].children[m].cycleTimeData =
+                                            data[i].children[j].children[n].children[m].cycleTimeData = [];
-                                        //         data[i].children[j].children[n].children[m].cycleTimeData.slice(-10);
+                                        }
-                                        // }
                                         this.addTimeDataCharts(data[i].children[j].children[n].children[m].cycleTimeData, typeData);
                                     } else {
+                                        if (!data[i].children[j].children[n].children[m].cycleTimeData) {
+                                            data[i].children[j].children[n].children[m].cycleTimeData = [];
+                                        }
                                         if (data[i].children[j].children[n].children[m].cycleTimeData.length > 10) {
                                             data[i].children[j].children[n].children[m].cycleTimeData =
                                                 data[i].children[j].children[n].children[m].cycleTimeData.slice(-10);
@@ -2898,12 +2905,14 @@ export default {
                                             in_spd: table.in_spd,
                                             out_spd: table.out_spd
                                         };
-                                        // if (data[i].children[j].children[n].children[m].cycleStatisticsData.length > 10) {
+                                        if (!data[i].children[j].children[n].children[m].cycleStatisticsData) {
-                                        //     data[i].children[j].children[n].children[m].cycleStatisticsData =
+                                            data[i].children[j].children[n].children[m].cycleStatisticsData = [];
-                                        //         data[i].children[j].children[n].children[m].cycleStatisticsData.slice(-10);
+                                        }
-                                        // }
                                         this.addTimeDataCharts(data[i].children[j].children[n].children[m].cycleStatisticsData, typeData);
                                     } else {
+                                        if (!data[i].children[j].children[n].children[m].cycleStatisticsData) {
+                                            data[i].children[j].children[n].children[m].cycleStatisticsData = [];
+                                        }
                                         if (data[i].children[j].children[n].children[m].cycleStatisticsData.length > 10) {
                                             data[i].children[j].children[n].children[m].cycleStatisticsData =
                                                 data[i].children[j].children[n].children[m].cycleStatisticsData.slice(-10);
@@ -2919,7 +2928,7 @@ export default {
         },
         //mqtt接收数据添加最新的最多添加10条(固定时刻)
         addTimeDataCharts(array, newItem) {
-            if (array.length === 10) {
+            if (array && array.length === 10) {
                 array.pop(); // 删除最旧的元素
             }
             array.unshift(newItem); // 添加最新的元素
@@ -2967,26 +2976,34 @@ export default {
                                     // if (locations == '卡片区' || locations == '两个区都存在') {
 
                                     //  if(locations == '图表区' || locations == '两个区都存在'){
-                                    // console.log('实时触发trigger-车头时距', msgN[j].time);
+                                    // console.log('实时触发trigger-车头时距', msgN[j]);
                                     //图表区数组
-                                    this.addOrUpdateArrayItem(this.triggerDataList, {
+                                    // this.addOrUpdateArrayItem(this.triggerDataList, {
-                                        time: msgN[j].time,
+                                    //     time: msgN[j].time,
+                                    //     headway: msgN[j].headway,
+                                    //     avg: msgN[j].avg,
+                                    //     max: msgN[j].max,
+                                    //     med: msgN[j].med,
+                                    //     min: msgN[j].min
+                                    // });
+                                    // component_id: "d4633befe6d4415d8b2c16c61992fb27"
+                                    // graphical_id: "706baf89caa44920b6e84b0c46d10a29"
+                                    // video_id: "9bb7a16ddf924a08b3f5d37d71f86dbd"
+                                    // this.$nextTick(() => {
+                                    //     this.upDataListByVideoIdAndCommentId(
+                                    //         this.intersectionList,
+                                    //         this.topicVideoIdList[i].videoId,
+                                    //         msgN[j].component_id,
+                                    //         this.triggerDataList
+                                    //     );
+                                    // });
+                                    //图表区表格数据
+                                    let carTou = {
                                         headway: msgN[j].headway,
                                         avg: msgN[j].avg,
                                         max: msgN[j].max,
                                         med: msgN[j].med,
-                                        min: msgN[j].min
+                                        min: msgN[j].min,
-                                    });
-                                    this.$nextTick(() => {
-                                        this.upDataListByVideoIdAndCommentId(
-                                            this.intersectionList,
-                                            this.topicVideoIdList[i].videoId,
-                                            msgN[j].component_id,
-                                            this.triggerDataList
-                                        );
-                                    });
-                                    //表格数据
-                                    let carTou = {
                                         name: msgN[j].name,
                                         time: msgN[j].time,
                                         type: msgN[j].type,
@@ -3033,19 +3050,19 @@ export default {
                                 } else if (msgN[j].component_type == '流量') {
                                     // console.log('实时触发trigger-流量', msgN[j]);
                                     //图表区
-                                    this.addOrUpdateArrayItem(this.triggerFlowData, {
+                                    // this.addOrUpdateArrayItem(this.triggerFlowData, {
-                                        time: msgN[j].time,
+                                    //     time: msgN[j].time,
-                                        in_flow: msgN[j].in_flow,
+                                    //     in_flow: msgN[j].in_flow,
-                                        out_flow: msgN[j].out_flow
+                                    //     out_flow: msgN[j].out_flow
-                                    });
+                                    // });
-                                    this.$nextTick(() => {
+                                    // this.$nextTick(() => {
-                                        this.upDataListByVideoIdAndCommentId(
+                                    //     this.upDataListByVideoIdAndCommentId(
-                                            this.intersectionList,
+                                    //         this.intersectionList,
-                                            this.topicVideoIdList[i].videoId,
+                                    //         this.topicVideoIdList[i].videoId,
-                                            msgN[j].component_id,
+                                    //         msgN[j].component_id,
-                                            this.triggerFlowData
+                                    //         this.triggerFlowData
-                                        );
+                                    //     );
-                                    });
+                                    // });
                                     //卡片区
                                     let flowMap = {
                                         inFlow: msgN[j].in_flow,
@@ -3062,6 +3079,8 @@ export default {
                                     });
                                     //表格数据
                                     let carTou = {
+                                        in_flow: msgN[j].in_flow,
+                                        out_flow: msgN[j].out_flow,
                                         name: msgN[j].name,
                                         time: msgN[j].time,
                                         type: msgN[j].type,
@@ -3105,25 +3124,29 @@ export default {
                                         );
                                     });
                                     //图表区
-                                    this.addOrUpdateArrayItem(this.triggerSpeedData, {
+                                    // this.addOrUpdateArrayItem(this.triggerSpeedData, {
-                                        time: msgN[j].time,
+                                    //     time: msgN[j].time,
-                                        speed: newSpeed,
+                                    //     speed: newSpeed,
-                                        originalSpeed: msgN[j].speed,
+                                    //     originalSpeed: msgN[j].speed,
+                                    //     avg: msgN[j].avg,
+                                    //     max: msgN[j].max,
+                                    //     med: msgN[j].med,
+                                    //     min: msgN[j].min
+                                    // });
+                                    // this.$nextTick(() => {
+                                    //     this.upDataListByVideoIdAndCommentId(
+                                    //         this.intersectionList,
+                                    //         this.topicVideoIdList[i].videoId,
+                                    //         msgN[j].component_id,
+                                    //         this.triggerSpeedData
+                                    //     );
+                                    // });
+                                    //表格数据
+                                    let carTou = {
                                         avg: msgN[j].avg,
                                         max: msgN[j].max,
                                         med: msgN[j].med,
-                                        min: msgN[j].min
+                                        min: msgN[j].min,
-                                    });
-                                    this.$nextTick(() => {
-                                        this.upDataListByVideoIdAndCommentId(
-                                            this.intersectionList,
-                                            this.topicVideoIdList[i].videoId,
-                                            msgN[j].component_id,
-                                            this.triggerSpeedData
-                                        );
-                                    });
-                                    //表格数据
-                                    let carTou = {
                                         name: msgN[j].name,
                                         time: msgN[j].time,
                                         type: msgN[j].type,
@@ -3169,24 +3192,24 @@ export default {
                                     });
                                     //图表区
                                     // this.triggerTypeData = msgN[j].type_data;
-                                    this.triggerTypeData = [
+                                    // this.triggerTypeData = [
-                                        {
+                                    //     {
-                                            type_data: msgN[j].type_data,
+                                    //         type_data: msgN[j].type_data,
-                                            time: msgN[j].time
+                                    //         time: msgN[j].time
-                                        }
+                                    //     }
-                                    ];
+                                    // ];
                                     // this.addOrUpdateArrayItem(this.triggerTypeData, {
                                     //     type_data: msgN[j].type_data,
                                     //      time: msgN[j].time,
                                     // });
-                                    this.$nextTick(() => {
+                                    // this.$nextTick(() => {
-                                        this.upDataListByVideoIdAndCommentId(
+                                    //     this.upDataListByVideoIdAndCommentId(
-                                            this.intersectionList,
+                                    //         this.intersectionList,
-                                            this.topicVideoIdList[i].videoId,
+                                    //         this.topicVideoIdList[i].videoId,
-                                            msgN[j].component_id,
+                                    //         msgN[j].component_id,
-                                            this.triggerTypeData
+                                    //         this.triggerTypeData
-                                        );
+                                    //     );
-                                    });
+                                    // });
                                     //表格数据 类型有点特殊需要重新比对
                                     let carTou = {
                                         name: msgN[j].name,
@@ -3235,24 +3258,28 @@ export default {
                                         );
                                     });
                                     //图表区
-                                    this.addOrUpdateArrayItem(this.triggerNStayData, {
+                                    // this.addOrUpdateArrayItem(this.triggerNStayData, {
-                                        time: msgN[j].time,
+                                    //     time: msgN[j].time,
-                                        n_stay: msgN[j].n_stay,
+                                    //     n_stay: msgN[j].n_stay,
+                                    //     avg: msgN[j].avg,
+                                    //     max: msgN[j].max,
+                                    //     med: msgN[j].med,
+                                    //     min: msgN[j].min
+                                    // });
+                                    // this.$nextTick(() => {
+                                    //     this.upDataListByVideoIdAndCommentId(
+                                    //         this.intersectionList,
+                                    //         this.topicVideoIdList[i].videoId,
+                                    //         msgN[j].component_id,
+                                    //         this.triggerNStayData
+                                    //     );
+                                    // });
+                                    //表格数据
+                                    let carTou = {
                                         avg: msgN[j].avg,
                                         max: msgN[j].max,
                                         med: msgN[j].med,
-                                        min: msgN[j].min
+                                        min: msgN[j].min,
-                                    });
-                                    this.$nextTick(() => {
-                                        this.upDataListByVideoIdAndCommentId(
-                                            this.intersectionList,
-                                            this.topicVideoIdList[i].videoId,
-                                            msgN[j].component_id,
-                                            this.triggerNStayData
-                                        );
-                                    });
-                                    //表格数据
-                                    let carTou = {
                                         name: msgN[j].name,
                                         time: msgN[j].time,
                                         type: msgN[j].type,
@@ -3295,18 +3322,18 @@ export default {
                                         );
                                     });
                                     //图表区
-                                    this.addOrUpdateArrayItem(this.triggerNQueueData, {
+                                    // this.addOrUpdateArrayItem(this.triggerNQueueData, {
-                                        time: msgN[j].time,
+                                    //     time: msgN[j].time,
-                                        n_queue: msgN[j].n_queue
+                                    //     n_queue: msgN[j].n_queue
-                                    });
+                                    // });
-                                    this.$nextTick(() => {
+                                    // this.$nextTick(() => {
-                                        this.upDataListByVideoIdAndCommentId(
+                                    //     this.upDataListByVideoIdAndCommentId(
-                                            this.intersectionList,
+                                    //         this.intersectionList,
-                                            this.topicVideoIdList[i].videoId,
+                                    //         this.topicVideoIdList[i].videoId,
-                                            msgN[j].component_id,
+                                    //         msgN[j].component_id,
-                                            this.triggerNQueueData
+                                    //         this.triggerNQueueData
-                                        );
+                                    //     );
-                                    });
+                                    // });
                                     //表格数据
                                     let carTou = {
                                         name: msgN[j].name,
@@ -3339,15 +3366,26 @@ export default {
                                     // });
                                 } else if (msgN[j].component_type == 'OD') {
                                     //图表区 - TODO 估计有未知问题
-                                    this.addOrUpdateArrayItem(this.triggerODData, {
+                                    // this.addOrUpdateArrayItem(this.triggerODData, {
+                                    //     ob_data: msgN[j].ob_data
+                                    // });
+                                    // this.$nextTick(() => {
+                                    //     this.upDataListByVideoIdAndCommentId(
+                                    //         this.intersectionList,
+                                    //         this.topicVideoIdList[i].videoId,
+                                    //         msgN[j].component_id,
+                                    //         this.triggerODData
+                                    //     );
+                                    // });
+                                    let carTou = {
                                         ob_data: msgN[j].ob_data
-                                    });
+                                    };
                                     this.$nextTick(() => {
-                                        this.upDataListByVideoIdAndCommentId(
+                                        this.triggerDataCharts(
                                             this.intersectionList,
                                             this.topicVideoIdList[i].videoId,
                                             msgN[j].component_id,
-                                            this.triggerODData
+                                            carTou
                                         );
                                     });
                                 }
@@ -4197,50 +4235,65 @@ export default {
                 box-sizing: border-box;
                 padding: 0 3%;
             }
-            .echartsList {
+            .echartList {
                 width: 100%;
                 height: calc(100% - 17%);
-                .echarts0 {
+                & > div {
-                    position: absolute;
-                    width: 440px;
-                    height: 282px;
-                    z-index: 999;
-                }
-                .echarts1 {
-                    position: absolute;
-                    width: 440px;
-                    height: 282px;
-                }
-                .echarts2 {
-                    position: absolute;
-                    width: 440px;
-                    height: 282px;
-                }
-                .echarts3 {
-                    position: absolute;
-                    width: 440px;
-                    height: 282px;
-                }
-                .echarts4 {
-                    position: absolute;
-                    width: 440px;
-                    height: 282px;
-                }
-                .echarts5 {
-                    position: absolute;
-                    width: 440px;
-                    height: 282px;
-                }
-                .echarts6 {
-                    position: absolute;
-                    width: 440px;
-                    height: 282px;
-                }
-                .echarts7 {
                     position: absolute;
                     width: 440px;
                     height: 282px;
                 }
+                // .echarts0 {
+                //     position: absolute;
+                //     width: 440px;
+                //     height: 282px;
+                //     z-index: 999;
+                // }
+                // .echarts1 {
+                //     position: absolute;
+                //     width: 440px;
+                //     height: 282px;
+                // }
+                // .echarts2 {
+                //     position: absolute;
+                //     width: 440px;
+                //     height: 282px;
+                // }
+                // .echarts3 {
+                //     position: absolute;
+                //     width: 440px;
+                //     height: 282px;
+                // }
+                // .echarts4 {
+                //     position: absolute;
+                //     width: 440px;
+                //     height: 282px;
+                // }
+                // .echarts5 {
+                //     position: absolute;
+                //     width: 440px;
+                //     height: 282px;
+                // }
+                // .echarts6 {
+                //     position: absolute;
+                //     width: 440px;
+                //     height: 282px;
+                // }
+                // .echarts7 {
+                //     position: absolute;
+                //     width: 440px;
+                //     height: 282px;
+                // }
+                // .echarts8 {
+                //     position: absolute;
+                //     width: 440px;
+                //     height: 282px;
+                // }
+                // .echarts9 {
+                //     position: absolute;
+                //     width: 440px;
+                //     height: 282px;
+                // }
             }
             // .echarts {
             //     width: 100%;