diff --git a/ .env.dev b/ .env.dev
new file mode 100644
index 0000000..fad75e3
--- /dev/null
+++ b/ .env.dev	
@@ -0,0 +1 @@
+NODE_ENV = "development"
\ No newline at end of file
diff --git a/.env.pro b/.env.pro
new file mode 100644
index 0000000..8582072
--- /dev/null
+++ b/.env.pro
@@ -0,0 +1 @@
+NODE_ENV = "production"
\ No newline at end of file
diff --git a/public/flv/index.html b/public/flv/index.html
index 20f5538..4ad5879 100644
--- a/public/flv/index.html
+++ b/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>
diff --git a/src/components/chart/barChart.vue b/src/components/chart/barChart.vue
index d5f6005..3bc9e36 100644
--- a/src/components/chart/barChart.vue
+++ b/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;
diff --git a/src/components/chart/lineChart.vue b/src/components/chart/lineChart.vue
index ef036a6..edeec4a 100644
--- a/src/components/chart/lineChart.vue
+++ b/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>
diff --git a/src/components/chart/pieChart.vue b/src/components/chart/pieChart.vue
index b368a80..4320edb 100644
--- a/src/components/chart/pieChart.vue
+++ b/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)
diff --git a/src/components/chart/regionTable.vue b/src/components/chart/regionTable.vue
index fe1941f..33d541c 100644
--- a/src/components/chart/regionTable.vue
+++ b/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: '',
diff --git a/src/components/chart/tableShow.vue b/src/components/chart/tableShow.vue
index 5697c89..66a6a40 100644
--- a/src/components/chart/tableShow.vue
+++ b/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: '',
diff --git a/src/components/sensorFusion/echartsBar.vue b/src/components/sensorFusion/echartsBar.vue
index ee27cc9..383acd9 100644
--- a/src/components/sensorFusion/echartsBar.vue
+++ b/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));
           }
         }
       },
diff --git a/src/components/sensorFusion/echartsLine.vue b/src/components/sensorFusion/echartsLine.vue
index 2cb8c28..579d720 100644
--- a/src/components/sensorFusion/echartsLine.vue
+++ b/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);
diff --git a/src/components/sensorFusion/echartsPie.vue b/src/components/sensorFusion/echartsPie.vue
index 2ea1c33..0ff0b99 100644
--- a/src/components/sensorFusion/echartsPie.vue
+++ b/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)
                     }
                 })
diff --git a/src/components/sensorFusion/regionTable.vue b/src/components/sensorFusion/regionTable.vue
index dff601c..f758789 100644
--- a/src/components/sensorFusion/regionTable.vue
+++ b/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: [
                 {
diff --git a/src/components/sensorFusion/tableShow.vue b/src/components/sensorFusion/tableShow.vue
index 6eeba57..36a0987 100644
--- a/src/components/sensorFusion/tableShow.vue
+++ b/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: [
                 {
diff --git a/src/components/target/typeChart.vue b/src/components/target/typeChart.vue
index 12027dc..2982c13 100644
--- a/src/components/target/typeChart.vue
+++ b/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(11)}}</div>
+                            <div>{{ newDataArr[0].time.slice(0, 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; 
-    margin-bottom: 20px; 
+    width: 150px;
+    margin-bottom: 20px;
     text-align: center;
 }
 
-::v-deep.spacialCard .el-card__body{
+::v-deep.spacialCard .el-card__body {
     padding: 10px;
 }
 
diff --git a/src/config/apiurl.js b/src/config/apiurl.js
index 40d647b..1f9fb68 100644
--- a/src/config/apiurl.js
+++ b/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`,
-    setAccessParty:`http://${ipUurl}:5000/api/setAccessParty`,
+    setComponents: `http://${ipUurl}:5000/api/SetComponents`,
+    setAccessParty: `http://${ipUurl}:5000/api/setAccessParty`,
     //自动校时接口
-    setAutomatic:`http://${ipUurl}:5000/api/SetAutomaticTiming`,
-    
-};
+    setAutomatic: `http://${ipUurl}:5000/api/SetAutomaticTiming`,
+
+};
\ No newline at end of file
diff --git a/src/utils/mqttConfig.js b/src/utils/mqttConfig.js
index 114a564..e536b73 100644
--- a/src/utils/mqttConfig.js
+++ b/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('连接成功')
diff --git a/src/utils/targetType.js b/src/utils/targetType.js
new file mode 100644
index 0000000..7249ba6
--- /dev/null
+++ b/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 ''
+}
\ No newline at end of file
diff --git a/src/views/AnalysisMain.vue b/src/views/AnalysisMain.vue
index 04ccc58..58f233d 100644
--- a/src/views/AnalysisMain.vue
+++ b/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 == '已分析') {
diff --git a/src/views/bounced/analysisConfiguration.vue b/src/views/bounced/analysisConfiguration.vue
index 8ed0e7a..07a649e 100644
--- a/src/views/bounced/analysisConfiguration.vue
+++ b/src/views/bounced/analysisConfiguration.vue
@@ -1,681 +1,498 @@
 <template>
-  <div class="analysis">
-    <div class="top" style="margin-top: 10px">
-      <div class="section">
-        <el-form
-          :inline="true"
-          v-if="false"
-          :model="formInline"
-          class="demo-form-inline"
-          label-width="fit-content"
-        >
-          <div class="warning">
-            <p class="board-title">自动保存</p>
-            <i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i
-            >自动保存可以使系统在异常关闭后自动恢复。在这种情况下，缓存数据将会丢失，但所有存储数据将被保存。
-          </div>
-          <el-form-item label="自动保存：">
-            <el-switch v-model="formInline.user"></el-switch>
-          </el-form-item>
-          <el-form-item label="时间间隔：">
-            <el-select v-model="formInline.region" placeholder="时间间隔">
-              <el-option label="20s" value="shanghai"></el-option>
-              <el-option label="30s" value="beijing"></el-option>
-            </el-select>
-          </el-form-item>
-        </el-form>
-        <el-form
-          ref="form"
-          :model="sizeForm"
-          label-width="fit-content"
-          style="margin-top: 15px"
-        >
-          <div class="warning" v-if="false">
-            <p class="board-title">重置分析</p>
-            <i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i
-            >重置分析将删除所有累计的轨迹数据
-          </div>
-          <!-- <el-form-item > -->
-          <el-button
-            v-if="false"
-            type="primary"
-            @click="handleagain()"
-            size="small"
-            style="width: 150px"
-            >重置</el-button
-          >
-          <div class="warning" style="margin-top: 15px" @click="handleContent('postion')">
-            <i
-              :class="
-                contentShow.postion == false
-                  ? 'el-icon-arrow-right'
-                  : 'el-icon-arrow-down'
-              "
-              style="font-weight: 600; font-size: 18px; margin-right: 5px"
-            ></i>
-            <p class="board-title">相机位置</p>
-            <i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i>
-            在 WGS84 坐标系中输入相机位置
-          </div>
-          <el-form-item label="相机位置：" v-if="contentShow.postion">
-            <el-input
-              v-model="sizeForm.longitude"
-              size="small"
-              style="width: 150px"
-              placeholder="经度"
-              :disabled="disable"
-            ></el-input>
-            <el-input
-              v-model="sizeForm.latitude"
-              size="small"
-              style="width: 150px; margin-left: 20px"
-              placeholder="纬度"
-              :disabled="disable"
-            ></el-input>
-          </el-form-item>
-        </el-form>
-        <div style="margin-top: 15px" v-if="contentShow.postion">
-          <el-button
-            type="primary"
-            @click="handSaveitude()"
-            size="small"
-            style="width: 150px"
-            v-if="!disable"
-            >保存</el-button
-          >
+    <div class="analysis">
+        <div class="top" style="margin-top: 10px">
+            <div class="section">
+                <el-form :inline="true" v-if="false" :model="formInline" class="demo-form-inline" label-width="fit-content">
+                    <div class="warning">
+                        <p class="board-title">自动保存</p>
+                        <i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i
+                        >自动保存可以使系统在异常关闭后自动恢复。在这种情况下，缓存数据将会丢失，但所有存储数据将被保存。
+                    </div>
+                    <el-form-item label="自动保存：">
+                        <el-switch v-model="formInline.user"></el-switch>
+                    </el-form-item>
+                    <el-form-item label="时间间隔：">
+                        <el-select v-model="formInline.region" placeholder="时间间隔">
+                            <el-option label="20s" value="shanghai"></el-option>
+                            <el-option label="30s" value="beijing"></el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <el-form ref="form" :model="sizeForm" label-width="fit-content" style="margin-top: 15px">
+                    <div class="warning" v-if="false">
+                        <p class="board-title">重置分析</p>
+                        <i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i>重置分析将删除所有累计的轨迹数据
+                    </div>
+                    <!-- <el-form-item > -->
+                    <el-button v-if="false" type="primary" @click="handleagain()" size="small" style="width: 150px">重置</el-button>
+                    <div class="warning" style="margin-top: 15px" @click="handleContent('postion')">
+                        <i
+                            :class="contentShow.postion == false ? 'el-icon-arrow-right' : 'el-icon-arrow-down'"
+                            style="font-weight: 600; font-size: 18px; margin-right: 5px"
+                        ></i>
+                        <p class="board-title">相机位置</p>
+                        <i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i>
+                        在 WGS84 坐标系中输入相机位置
+                    </div>
+                    <el-form-item label="相机位置：" v-if="contentShow.postion">
+                        <el-input
+                            v-model="sizeForm.longitude"
+                            size="small"
+                            style="width: 150px"
+                            placeholder="经度"
+                            :disabled="disable"
+                        ></el-input>
+                        <el-input
+                            v-model="sizeForm.latitude"
+                            size="small"
+                            style="width: 150px; margin-left: 20px"
+                            placeholder="纬度"
+                            :disabled="disable"
+                        ></el-input>
+                    </el-form-item>
+                </el-form>
+                <div style="margin-top: 15px" v-if="contentShow.postion">
+                    <el-button type="primary" @click="handSaveitude()" size="small" style="width: 150px" v-if="!disable">保存</el-button>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-    <div class="dataBoard">
-      <div class="section">
-        <div class="warning" @click="handleContent('coordinate')">
-          <i
-            :class="
-              contentShow.coordinate == false
-                ? 'el-icon-arrow-right'
-                : 'el-icon-arrow-down'
-            "
-            style="font-weight: 600; font-size: 18px; margin-right: 5px"
-          ></i>
-          <p class="board-title">坐标转换</p>
-          <i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i
-          >通过将图像坐标系转换为物理坐标系，地理参考使您能够将像素测量转换为真实速度和距离。
-        </div>
-        <el-form
-          ref="form"
-          :model="coordinateForm"
-          label-width="fit-content"
-          v-if="contentShow.coordinate"
-        >
-          <!-- <el-form-item label="坐标转换开关：">
+        <div class="dataBoard">
+            <div class="section">
+                <div class="warning" @click="handleContent('coordinate')">
+                    <i
+                        :class="contentShow.coordinate == false ? 'el-icon-arrow-right' : 'el-icon-arrow-down'"
+                        style="font-weight: 600; font-size: 18px; margin-right: 5px"
+                    ></i>
+                    <p class="board-title">坐标转换</p>
+                    <i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i
+                    >通过将图像坐标系转换为物理坐标系，地理参考使您能够将像素测量转换为真实速度和距离。
+                </div>
+                <el-form ref="form" :model="coordinateForm" label-width="fit-content" v-if="contentShow.coordinate">
+                    <!-- <el-form-item label="坐标转换开关：">
                             <el-switch v-model="coordinateForm.coordinateClose"></el-switch>
                         </el-form-item> -->
-          <el-form-item label="UTM区：" class="otherThings">
-            <el-input-number
-              v-model="coordinateForm.num"
-              controls-position="right"
-              :precision="0"
-              size="small"
-              :min="1"
-              :max="60"
-              :disabled="disable"
-            ></el-input-number>
-            <div class="warning" style="margin: 0px">
-              <i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i
-              >地理参照允许测量物理速度和静态图像源的距离,值范围1-60。
+                    <el-form-item label="UTM区：" class="otherThings">
+                        <el-input-number
+                            v-model="coordinateForm.num"
+                            controls-position="right"
+                            :precision="0"
+                            size="small"
+                            :min="1"
+                            :max="60"
+                            :disabled="disable"
+                        ></el-input-number>
+                        <div class="warning" style="margin: 0px">
+                            <i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i
+                            >地理参照允许测量物理速度和静态图像源的距离,值范围1-60。
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="半球：">
+                        <el-select size="small" v-model="coordinateForm.value" placeholder="请选择" :disabled="disable">
+                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="坐标转换：">
+                        <el-radio-group v-model="coordinateForm.coordinateTransformation" :disabled="disable">
+                            <el-radio label="WGS-84坐标系"></el-radio>
+                            <el-radio label="其他"></el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <div style="width: 100%; height: 702px; margin-bottom: 10px">
+                        <iframe ref="analysisWeb" src="./analysisWeb/index.html" frameborder="0" style="width: 100%; height: 100%"></iframe>
+                    </div>
+                    <div class="warning" v-if="!disable">
+                        <el-button size="mini" type="primary" style="color: #fffff" @click="handleDian">新增点 </el-button>
+                        <i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i>请至少配置4个点，不满足4个点会没有数据。
+                    </div>
+                    <el-table border :data="coordinateTableData" @row-click="handleRowClick" ref="tableData" highlight-current-row>
+                        <template slot="empty">
+                            <el-empty :image-size="100" description="暂无数据"></el-empty>
+                        </template>
+                        <el-table-column prop="pointName" label="点名称" align="center">
+                            <template slot-scope="scope">
+                                <el-input
+                                    :disabled="scope.row.btnShow == '1' ? true : false"
+                                    v-model="scope.row.pointName"
+                                    maxlength="30"
+                                    placeholder="请输入"
+                                    @blur="updateName($event)"
+                                />
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="longitude" label="经度" align="center">
+                            <template slot-scope="scope">
+                                <el-input
+                                    :disabled="scope.row.btnShow == '1' ? true : false"
+                                    v-model="scope.row.longitude"
+                                    maxlength="20"
+                                    placeholder="请输入"
+                                    oninput="value=value.replace(/[^0-9.]/g,'')"
+                                />
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="latitude" label="纬度" align="center">
+                            <template v-slot="{ row, $index }">
+                                <el-input
+                                    :disabled="row.btnShow == '1' ? true : false"
+                                    v-model="row.latitude"
+                                    maxlength="20"
+                                    placeholder="请输入"
+                                    oninput="value=value.replace(/[^0-9.]/g,'')"
+                                />
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="imageXCoordinate" label="横坐标" align="center"> </el-table-column>
+                        <el-table-column prop="imageYCoordinate" label="纵坐标" align="center"> </el-table-column>
+                        <el-table-column prop="oldName" label="旧名字" align="center" v-if="laneform.laneClose == true">
+                            <template slot-scope="scope">
+                                <el-input v-model="scope.row.oldName" maxlength="20" placeholder="请输入" />
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                            <template v-slot="{ row, $index }">
+                                <el-button
+                                    size="mini"
+                                    type="text"
+                                    style="color: #2090c1"
+                                    v-if="row.btnShow == '1' ? true : false"
+                                    @click="handleExit(row, $index)"
+                                    :disabled="disable"
+                                    >编辑
+                                </el-button>
+                                <el-button
+                                    size="mini"
+                                    type="text"
+                                    style="color: #2090c1"
+                                    v-else
+                                    @click="handleconfirm(row, $index)"
+                                    :disabled="disable"
+                                    >确认编辑
+                                </el-button>
+                                <el-button
+                                    size="mini"
+                                    type="text"
+                                    style="color: #f56c6c"
+                                    @click="handleDeleteDian(row, $index)"
+                                    :disabled="disable"
+                                    >删除
+                                </el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                    <div style="margin-top: 15px">
+                        <el-button
+                            type="primary"
+                            :disabled="coordinateTableData.length < 4 && coordinateTableData.length != 0"
+                            @click="handlePos()"
+                            size="small"
+                            style="width: 150px"
+                            v-if="!disable"
+                            >保存</el-button
+                        >
+                    </div>
+                </el-form>
             </div>
-          </el-form-item>
-          <el-form-item label="半球：">
-            <el-select
-              size="small"
-              v-model="coordinateForm.value"
-              placeholder="请选择"
-              :disabled="disable"
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="坐标转换：">
-            <el-radio-group
-              v-model="coordinateForm.coordinateTransformation"
-              :disabled="disable"
-            >
-              <el-radio label="WGS-84坐标系"></el-radio>
-              <el-radio label="其他"></el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <div style="width: 100%; height: 702px; margin-bottom: 10px">
-            <iframe
-              ref="analysisWeb"
-              src="./analysisWeb/index.html"
-              frameborder="0"
-              style="width: 100%; height: 100%"
-            ></iframe>
-          </div>
-          <div class="warning" v-if="!disable">
-            <el-button
-              size="mini"
-              type="primary"
-              style="color: #fffff"
-              @click="handleDian"
-              >新增点
-            </el-button>
-            <i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i
-            >请至少配置4个点，不满足4个点会没有数据。
-          </div>
-          <el-table
-            border
-            :data="coordinateTableData"
-            @row-click="handleRowClick"
-            ref="tableData"
-            highlight-current-row
-          >
-            <template slot="empty">
-              <el-empty :image-size="100" description="暂无数据"></el-empty>
-            </template>
-            <el-table-column prop="pointName" label="点名称" align="center">
-              <template slot-scope="scope">
-                <el-input
-                  :disabled="scope.row.btnShow == '1' ? true : false"
-                  v-model="scope.row.pointName"
-                  maxlength="30"
-                  placeholder="请输入"
-                  @blur="updateName($event)"
-                />
-              </template>
-            </el-table-column>
-            <el-table-column prop="longitude" label="经度" align="center">
-              <template slot-scope="scope">
-                <el-input
-                  :disabled="scope.row.btnShow == '1' ? true : false"
-                  v-model="scope.row.longitude"
-                  maxlength="20"
-                  placeholder="请输入"
-                  oninput="value=value.replace(/[^0-9.]/g,'')"
-                />
-              </template>
-            </el-table-column>
-            <el-table-column prop="latitude" label="纬度" align="center">
-              <template v-slot="{ row, $index }">
-                <el-input
-                  :disabled="row.btnShow == '1' ? true : false"
-                  v-model="row.latitude"
-                  maxlength="20"
-                  placeholder="请输入"
-                  oninput="value=value.replace(/[^0-9.]/g,'')"
-                />
-              </template>
-            </el-table-column>
-            <el-table-column prop="imageXCoordinate" label="横坐标" align="center">
-            </el-table-column>
-            <el-table-column prop="imageYCoordinate" label="纵坐标" align="center">
-            </el-table-column>
-            <el-table-column
-              prop="oldName"
-              label="旧名字"
-              align="center"
-              v-if="laneform.laneClose == true"
-            >
-              <template slot-scope="scope">
-                <el-input
-                  v-model="scope.row.oldName"
-                  maxlength="20"
-                  placeholder="请输入"
-                />
-              </template>
-            </el-table-column>
-            <el-table-column
-              label="操作"
-              align="center"
-              class-name="small-padding fixed-width"
-            >
-              <template v-slot="{ row, $index }">
-                <el-button
-                  size="mini"
-                  type="text"
-                  style="color: #2090c1"
-                  v-if="row.btnShow == '1' ? true : false"
-                  @click="handleExit(row, $index)"
-                  :disabled="disable"
-                  >编辑
-                </el-button>
-                <el-button
-                  size="mini"
-                  type="text"
-                  style="color: #2090c1"
-                  v-else
-                  @click="handleconfirm(row, $index)"
-                  :disabled="disable"
-                  >确认编辑
-                </el-button>
-                <el-button
-                  size="mini"
-                  type="text"
-                  style="color: #f56c6c"
-                  @click="handleDeleteDian(row, $index)"
-                  :disabled="disable"
-                  >删除
-                </el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-          <div style="margin-top: 15px">
-            <el-button
-              type="primary"
-              :disabled="
-                coordinateTableData.length < 4 && coordinateTableData.length != 0
-              "
-              @click="handlePos()"
-              size="small"
-              style="width: 150px"
-              v-if="!disable"
-              >保存</el-button
-            >
-          </div>
-        </el-form>
-      </div>
-    </div>
-    <div class="dataBoard" v-if="false">
-      <div class="section">
-        <div class="warning">
-          <p class="board-title">车道识别配置</p>
-          <i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i
-          >在视频/动图上设置进口出口道
         </div>
-        <el-form ref="form" :model="laneform" label-width="350px">
-          <!-- <p>车道识别配置</p> -->
-          <el-form-item label="车道识别配置开关：" label-width="150px">
-            <el-switch v-model="laneform.laneClose" :disabled="disable"></el-switch>
-          </el-form-item>
-          <div style="width: 100%; height: 400px" v-if="laneform.laneClose == true">
-            <iframe
-              id="mapModule"
-              src="./VideoWeb/index.html"
-              frameborder="0"
-              style="width: 100%; height: 100%"
-            ></iframe>
-          </div>
-          <el-form-item
-            label="各车道中心线（区域检测器）："
-            style="width: 300px"
-            v-if="laneform.laneClose == true"
-          >
-            <el-switch v-model="laneform.areaDetector"></el-switch>
-          </el-form-item>
-          <el-form-item
-            label="自动识别各车道中心点坐标（断面检测器）："
-            style="width: 300px"
-            v-if="laneform.laneClose == true"
-          >
-            <el-switch v-model="laneform.sectionDetector"></el-switch>
-          </el-form-item>
-          <el-button
-            type="primary"
-            @click="handleagain()"
-            size="small"
-            style="width: 150px"
-            v-if="laneform.laneClose == true"
-            >保存</el-button
-          >
-        </el-form>
-      </div>
-    </div>
-    <div class="dataBoard" v-if="false">
-      <div class="section">
-        <div class="warning">
-          <p class="board-title">识别区域</p>
-          <i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i
-          >您可以自定义进行视频分析的区域，区域之外的部分将被忽略。此功能可以帮助您检测和跟踪高分辨率视频特定部分的较小对象，实现检测器的数字变焦功能。
+        <div class="dataBoard" v-if="false">
+            <div class="section">
+                <div class="warning">
+                    <p class="board-title">车道识别配置</p>
+                    <i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i>在视频/动图上设置进口出口道
+                </div>
+                <el-form ref="form" :model="laneform" label-width="350px">
+                    <!-- <p>车道识别配置</p> -->
+                    <el-form-item label="车道识别配置开关：" label-width="150px">
+                        <el-switch v-model="laneform.laneClose" :disabled="disable"></el-switch>
+                    </el-form-item>
+                    <div style="width: 100%; height: 400px" v-if="laneform.laneClose == true">
+                        <iframe id="mapModule" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height: 100%"></iframe>
+                    </div>
+                    <el-form-item label="各车道中心线（区域检测器）：" style="width: 300px" v-if="laneform.laneClose == true">
+                        <el-switch v-model="laneform.areaDetector"></el-switch>
+                    </el-form-item>
+                    <el-form-item label="自动识别各车道中心点坐标（断面检测器）：" style="width: 300px" v-if="laneform.laneClose == true">
+                        <el-switch v-model="laneform.sectionDetector"></el-switch>
+                    </el-form-item>
+                    <el-button type="primary" @click="handleagain()" size="small" style="width: 150px" v-if="laneform.laneClose == true"
+                        >保存</el-button
+                    >
+                </el-form>
+            </div>
         </div>
+        <div class="dataBoard" v-if="false">
+            <div class="section">
+                <div class="warning">
+                    <p class="board-title">识别区域</p>
+                    <i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i
+                    >您可以自定义进行视频分析的区域，区域之外的部分将被忽略。此功能可以帮助您检测和跟踪高分辨率视频特定部分的较小对象，实现检测器的数字变焦功能。
+                </div>
 
-        <el-form ref="form" :model="identificationAreaform" label-width="fit-content">
-          <!-- <p>车道识别配置</p> -->
+                <el-form ref="form" :model="identificationAreaform" label-width="fit-content">
+                    <!-- <p>车道识别配置</p> -->
 
-          <el-form-item label="识别区域开关：" style="width: 250px">
-            <el-switch
-              v-model="identificationAreaform.identificationAreaClose"
-            ></el-switch>
-          </el-form-item>
-          <div
-            style="width: 100%; height: 400px"
-            v-if="identificationAreaform.identificationAreaClose == true"
-          >
-            <iframe
-              id="mapModule"
-              src="./VideoWeb/index.html"
-              frameborder="0"
-              style="width: 100%; height: 100%"
-            ></iframe>
-          </div>
-          <el-button
-            type="primary"
-            @click="handleagain()"
-            size="small"
-            style="width: 150px"
-            v-if="identificationAreaform.identificationAreaClose == true"
-            >保存</el-button
-          >
-        </el-form>
-      </div>
-    </div>
-    <div class="dataBoard" v-if="false">
-      <div class="section">
-        <div class="warning">
-          <p class="board-title">轨迹平滑</p>
-          <i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i
-          >为轨迹预测滤波算法定义细化轨迹的时间窗口。数值越小，延迟越小，适用于实时性要求高的场景；数值越大，轨迹的连续性越好，目标即使越过一些障碍也不容易丢失。
+                    <el-form-item label="识别区域开关：" style="width: 250px">
+                        <el-switch v-model="identificationAreaform.identificationAreaClose"></el-switch>
+                    </el-form-item>
+                    <div style="width: 100%; height: 400px" v-if="identificationAreaform.identificationAreaClose == true">
+                        <iframe id="mapModule" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height: 100%"></iframe>
+                    </div>
+                    <el-button
+                        type="primary"
+                        @click="handleagain()"
+                        size="small"
+                        style="width: 150px"
+                        v-if="identificationAreaform.identificationAreaClose == true"
+                        >保存</el-button
+                    >
+                </el-form>
+            </div>
         </div>
-        <el-form ref="form" :model="trajectorySmoothingform" label-width="fit-content">
-          <el-form-item label="轨迹平滑开关：" style="width: 250px">
-            <el-switch
-              v-model="trajectorySmoothingform.trajectorySmoothingClose"
-            ></el-switch>
-          </el-form-item>
-          <el-form-item
-            label="预测滤波时间："
-            style="width: 250px"
-            v-if="trajectorySmoothingform.trajectorySmoothingClose == true"
-          >
-            <el-input-number
-              v-model="trajectorySmoothingform.time"
-              @change="handleChange"
-              :min="2000"
-              :max="3000"
-              label="预测滤波时间"
-            ></el-input-number>
-          </el-form-item>
-          <el-button
-            type="primary"
-            @click="handleagain()"
-            size="small"
-            style="width: 150px"
-            v-if="trajectorySmoothingform.trajectorySmoothingClose == true"
-            >保存</el-button
-          >
-        </el-form>
-      </div>
-    </div>
-    <div class="dataBoard">
-      <div class="section">
-        <div class="warning" @click="handleContent('plate')">
-          <i
-            :class="
-              contentShow.plate == false ? 'el-icon-arrow-right' : 'el-icon-arrow-down'
-            "
-            style="font-weight: 600; font-size: 18px; margin-right: 5px"
-          ></i>
-          <p class="board-title">车牌识别</p>
-          <i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i
-          >车牌识别开关。牌照信息表示与目标属性。（断面号牌，与断面设置关联）
+        <div class="dataBoard" v-if="false">
+            <div class="section">
+                <div class="warning">
+                    <p class="board-title">轨迹平滑</p>
+                    <i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i
+                    >为轨迹预测滤波算法定义细化轨迹的时间窗口。数值越小，延迟越小，适用于实时性要求高的场景；数值越大，轨迹的连续性越好，目标即使越过一些障碍也不容易丢失。
+                </div>
+                <el-form ref="form" :model="trajectorySmoothingform" label-width="fit-content">
+                    <el-form-item label="轨迹平滑开关：" style="width: 250px">
+                        <el-switch v-model="trajectorySmoothingform.trajectorySmoothingClose"></el-switch>
+                    </el-form-item>
+                    <el-form-item
+                        label="预测滤波时间："
+                        style="width: 250px"
+                        v-if="trajectorySmoothingform.trajectorySmoothingClose == true"
+                    >
+                        <el-input-number
+                            v-model="trajectorySmoothingform.time"
+                            @change="handleChange"
+                            :min="2000"
+                            :max="3000"
+                            label="预测滤波时间"
+                        ></el-input-number>
+                    </el-form-item>
+                    <el-button
+                        type="primary"
+                        @click="handleagain()"
+                        size="small"
+                        style="width: 150px"
+                        v-if="trajectorySmoothingform.trajectorySmoothingClose == true"
+                        >保存</el-button
+                    >
+                </el-form>
+            </div>
         </div>
-        <el-form
-          ref="form"
-          :model="licensePlateform"
-          label-width="fit-content"
-          v-if="contentShow.plate"
-        >
-          <el-form-item label="车牌识别开关：">
-            <el-switch
-              v-model="licensePlateform.licensePlateClose"
-              active-value="1"
-              v-if="this.$route.query.type == '实时视频'"
-              inactive-value="0"
-              @change="changeChepai($event)"
-            ></el-switch>
-            <el-switch
-              v-model="licensePlateform.licensePlateClose"
-              active-value="1"
-              disabled
-              v-if="this.$route.query.type == '离线视频'"
-              inactive-value="0"
-              @change="changeChepai($event)"
-            ></el-switch>
-          </el-form-item>
-          <!-- <div style="width: 100%; height: 400px; margin-bottom: 10px" v-if="licensePlateform.licensePlateClose == true"> -->
-          <div style="width: 100%; height: 400px; margin-bottom: 10px" v-if="false">
-            <iframe
-              id="mapModule"
-              src="./VideoWeb/index.html"
-              frameborder="0"
-              style="width: 100%; height: 100%"
-            ></iframe>
-          </div>
-          <!-- <el-table border :data="licensePlateTableData" v-if="licensePlateform.licensePlateClose == true"> -->
-          <el-table border :data="licensePlateTableData" v-if="false">
-            <el-table-column prop="sectionPlate" label="断面号牌" align="center">
-              <template slot-scope="scope">
-                <el-input
-                  v-if="scope.$index === 0"
-                  v-model="scope.row.sectionPlate"
-                  maxlength="30"
-                  placeholder="Required"
-                />
-                <span v-else v-text="scope.row.sectionPlate"></span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="setAssociation" label="断面设置关联：" align="center">
-              <template slot-scope="scope">
-                <el-input
-                  v-if="scope.row.isEdit"
-                  v-model="scope.row.setAssociation"
-                  maxlength="20"
-                  placeholder="Required"
-                />
-                <span v-else v-text="scope.row.setAssociation"></span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="thresholdValue" label="车牌匹配阈值：" align="center">
-              <template slot-scope="scope">
-                <el-input
-                  v-if="scope.row.isEdit"
-                  v-model="scope.row.thresholdValue"
-                  maxlength="20"
-                  placeholder="Required"
-                />
-                <span v-else v-text="scope.row.thresholdValue"></span>
-              </template>
-            </el-table-column>
-            <el-table-column
-              label="操作："
-              align="center"
-              class-name="small-padding fixed-width"
-            >
-              <template slot-scope="scope">
-                <el-button
-                  v-if="scope.$index === 0"
-                  size="mini"
-                  type="text"
-                  style="color: #2090c1"
-                  @click="handleAdd(scope.row)"
-                  >Add
-                </el-button>
-                <el-button
-                  v-if="scope.$index !== 0"
-                  size="mini"
-                  type="text"
-                  style="color: #2090c1"
-                  @click="handleUpdate(scope.row)"
-                  >{{ scope.row.isEdit ? "Apply" : "Edit" }}
-                </el-button>
-                <el-button
-                  v-if="scope.$index !== 0"
-                  size="mini"
-                  type="text"
-                  style="color: #f56c6c"
-                  @click="handleDelete(scope.row)"
-                  >{{ scope.row.isEdit ? "Cancel" : "Delete" }}
-                </el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-          <div style="margin-top: 15px" v-if="false">
-            <el-button
-              type="primary"
-              @click="handleagain()"
-              size="small"
-              style="width: 150px"
-              v-if="licensePlateform.licensePlateClose == true"
-              >保存</el-button
-            >
-          </div>
-        </el-form>
-      </div>
-    </div>
-    <div class="dataBoard">
-      <div class="section">
-        <div class="warning" @click="handleContent('parking')">
-          <i
-            :class="
-              contentShow.parking == false ? 'el-icon-arrow-right' : 'el-icon-arrow-down'
-            "
-            style="font-weight: 600; font-size: 18px; margin-right: 5px"
-          ></i>
-          <p class="board-title">停车状态</p>
-          <i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i
-          >位移、速度，例如位移＜δ，速度＜v，则判断车辆停车
+        <div class="dataBoard">
+            <div class="section">
+                <div class="warning" @click="handleContent('plate')">
+                    <i
+                        :class="contentShow.plate == false ? 'el-icon-arrow-right' : 'el-icon-arrow-down'"
+                        style="font-weight: 600; font-size: 18px; margin-right: 5px"
+                    ></i>
+                    <p class="board-title">车牌识别</p>
+                    <i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i
+                    >车牌识别开关。牌照信息表示与目标属性。（断面号牌，与断面设置关联）
+                </div>
+                <el-form ref="form" :model="licensePlateform" label-width="fit-content" v-if="contentShow.plate">
+                    <el-form-item label="车牌识别开关：">
+                        <el-switch
+                            v-model="licensePlateform.licensePlateClose"
+                            active-value="1"
+                            v-if="this.$route.query.type == '实时视频'"
+                            inactive-value="0"
+                            @change="changeChepai($event)"
+                        ></el-switch>
+                        <el-switch
+                            v-model="licensePlateform.licensePlateClose"
+                            active-value="1"
+                            disabled
+                            v-if="this.$route.query.type == '离线视频'"
+                            inactive-value="0"
+                            @change="changeChepai($event)"
+                        ></el-switch>
+                    </el-form-item>
+                    <!-- <div style="width: 100%; height: 400px; margin-bottom: 10px" v-if="licensePlateform.licensePlateClose == true"> -->
+                    <div style="width: 100%; height: 400px; margin-bottom: 10px" v-if="false">
+                        <iframe id="mapModule" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height: 100%"></iframe>
+                    </div>
+                    <!-- <el-table border :data="licensePlateTableData" v-if="licensePlateform.licensePlateClose == true"> -->
+                    <el-table border :data="licensePlateTableData" v-if="false">
+                        <el-table-column prop="sectionPlate" label="断面号牌" align="center">
+                            <template slot-scope="scope">
+                                <el-input
+                                    v-if="scope.$index === 0"
+                                    v-model="scope.row.sectionPlate"
+                                    maxlength="30"
+                                    placeholder="Required"
+                                />
+                                <span v-else v-text="scope.row.sectionPlate"></span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="setAssociation" label="断面设置关联：" align="center">
+                            <template slot-scope="scope">
+                                <el-input
+                                    v-if="scope.row.isEdit"
+                                    v-model="scope.row.setAssociation"
+                                    maxlength="20"
+                                    placeholder="Required"
+                                />
+                                <span v-else v-text="scope.row.setAssociation"></span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="thresholdValue" label="车牌匹配阈值：" align="center">
+                            <template slot-scope="scope">
+                                <el-input
+                                    v-if="scope.row.isEdit"
+                                    v-model="scope.row.thresholdValue"
+                                    maxlength="20"
+                                    placeholder="Required"
+                                />
+                                <span v-else v-text="scope.row.thresholdValue"></span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="操作：" align="center" class-name="small-padding fixed-width">
+                            <template slot-scope="scope">
+                                <el-button
+                                    v-if="scope.$index === 0"
+                                    size="mini"
+                                    type="text"
+                                    style="color: #2090c1"
+                                    @click="handleAdd(scope.row)"
+                                    >Add
+                                </el-button>
+                                <el-button
+                                    v-if="scope.$index !== 0"
+                                    size="mini"
+                                    type="text"
+                                    style="color: #2090c1"
+                                    @click="handleUpdate(scope.row)"
+                                    >{{ scope.row.isEdit ? 'Apply' : 'Edit' }}
+                                </el-button>
+                                <el-button
+                                    v-if="scope.$index !== 0"
+                                    size="mini"
+                                    type="text"
+                                    style="color: #f56c6c"
+                                    @click="handleDelete(scope.row)"
+                                    >{{ scope.row.isEdit ? 'Cancel' : 'Delete' }}
+                                </el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                    <div style="margin-top: 15px" v-if="false">
+                        <el-button
+                            type="primary"
+                            @click="handleagain()"
+                            size="small"
+                            style="width: 150px"
+                            v-if="licensePlateform.licensePlateClose == true"
+                            >保存</el-button
+                        >
+                    </div>
+                </el-form>
+            </div>
         </div>
-        <el-form
-          :inline="true"
-          :model="stopStateform"
-          class="demo-form-inline"
-          label-width="fit-content"
-          v-if="contentShow.parking"
-        >
-          <el-form-item label="位移：" style="margin-right: 10px">
-            <el-input-number
-              v-model="stopStateform.displacement"
-              @change="handleChange"
-              :min="0"
-              :max="3000"
-              label="位移"
-              :disabled="disable"
-            ></el-input-number>
-          </el-form-item>
-          <el-form-item label="速度：" style="margin-right: 10px">
-            <el-input-number
-              v-model="stopStateform.speed"
-              @change="handleChange"
-              :min="0"
-              :max="3000"
-              label="速度"
-              :disabled="disable"
-            ></el-input-number>
-          </el-form-item>
-          <el-form-item label="加速度：" v-if="false">
-            <el-input-number
-              v-model="stopStateform.acceleration"
-              @change="handleChange"
-              :min="2000"
-              :max="3000"
-              label="加速度"
-            ></el-input-number>
-          </el-form-item>
-        </el-form>
-        <div style="margin-top: 15px" v-if="contentShow.parking">
-          <el-button
-            type="primary"
-            @click="handleParking()"
-            size="small"
-            style="width: 150px"
-            v-if="!disable"
-            >保存</el-button
-          >
+        <div class="dataBoard">
+            <div class="section">
+                <div class="warning" @click="handleContent('parking')">
+                    <i
+                        :class="contentShow.parking == false ? 'el-icon-arrow-right' : 'el-icon-arrow-down'"
+                        style="font-weight: 600; font-size: 18px; margin-right: 5px"
+                    ></i>
+                    <p class="board-title">停车状态</p>
+                    <i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i
+                    >位移、速度，例如位移＜δ，速度＜v，则判断车辆停车
+                </div>
+                <el-form
+                    :inline="true"
+                    :model="stopStateform"
+                    class="demo-form-inline"
+                    label-width="fit-content"
+                    v-if="contentShow.parking"
+                >
+                    <el-form-item label="位移：" style="margin-right: 10px">
+                        <el-input-number
+                            v-model="stopStateform.displacement"
+                            @change="handleChange"
+                            :min="0"
+                            :max="3000"
+                            label="位移"
+                            :disabled="disable"
+                        ></el-input-number>
+                    </el-form-item>
+                    <el-form-item label="速度：" style="margin-right: 10px">
+                        <el-input-number
+                            v-model="stopStateform.speed"
+                            @change="handleChange"
+                            :min="0"
+                            :max="3000"
+                            label="速度"
+                            :disabled="disable"
+                        ></el-input-number>
+                    </el-form-item>
+                    <el-form-item label="加速度：" v-if="false">
+                        <el-input-number
+                            v-model="stopStateform.acceleration"
+                            @change="handleChange"
+                            :min="2000"
+                            :max="3000"
+                            label="加速度"
+                        ></el-input-number>
+                    </el-form-item>
+                </el-form>
+                <div style="margin-top: 15px" v-if="contentShow.parking">
+                    <el-button type="primary" @click="handleParking()" size="small" style="width: 150px" v-if="!disable">保存</el-button>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-    <div class="dataBoard" v-if="false">
-      <div class="section">
-        <div class="warning">
-          <p class="board-title">通信设置</p>
-          <i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i
-          >更新频率可以根据链路带宽进行设置。
-        </div>
-        <el-form
-          :model="communicationform"
-          class="demo-form-inline"
-          label-width="fit-content"
-        >
-          <el-form-item label="更新频率：">
-            <el-input
-              v-model="communicationform.renewalFrequency"
-              style="width: 200px"
-            ></el-input>
-          </el-form-item>
+        <div class="dataBoard" v-if="false">
+            <div class="section">
+                <div class="warning">
+                    <p class="board-title">通信设置</p>
+                    <i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i>更新频率可以根据链路带宽进行设置。
+                </div>
+                <el-form :model="communicationform" class="demo-form-inline" label-width="fit-content">
+                    <el-form-item label="更新频率：">
+                        <el-input v-model="communicationform.renewalFrequency" style="width: 200px"></el-input>
+                    </el-form-item>
 
-          <el-form-item label="类型：" style="display: flex">
-            <el-radio-group v-model="communicationform.type">
-              <el-radio label="快速-用于高带宽连接"></el-radio>
-              <el-radio label="平衡-适用于大多数连接"></el-radio>
-              <el-radio label="慢速-用于低带宽连接"></el-radio>
-              <el-radio label="自定义"></el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item
-            label="请求轻型有效载荷："
-            v-if="communicationform.type == '自定义'"
-          >
-            <el-input
-              v-model="communicationform.name"
-              style="width: 200px; margin-bottom: 20px"
-            ></el-input
-            >ms
-          </el-form-item>
-          <el-form-item
-            label="请求重型有效载荷："
-            v-if="communicationform.type == '自定义'"
-          >
-            <el-input
-              v-model="communicationform.name"
-              style="width: 200px; margin-bottom: 20px"
-            ></el-input
-            >ms
-          </el-form-item>
-          <el-form-item label="FPS分配器：" v-if="communicationform.type == '自定义'">
-            <el-input
-              v-model="communicationform.name"
-              style="width: 200px; margin-bottom: 20px"
-            ></el-input>
-          </el-form-item>
-          <el-form-item label="框架决议：" v-if="communicationform.type == '自定义'">
-            <el-select
-              v-model="communicationform.region"
-              placeholder="框架决议"
-              style="margin-bottom: 20px"
-            >
-              <el-option label="自动" value="shanghai"></el-option>
-              <el-option label="区域二" value="beijing"></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="压缩格式：" v-if="communicationform.type == '自定义'">
-            <el-select
-              v-model="communicationform.region"
-              placeholder="压缩格式"
-              style="margin-bottom: 20px"
-            >
-              <el-option label="JPG" value="shanghai"></el-option>
-              <el-option label="区域二" value="beijing"></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="压缩率：" v-if="communicationform.type == '自定义'">
-            <el-input v-model="communicationform.name" style="width: 200px"></el-input>
-          </el-form-item>
-          <el-button
-            type="primary"
-            @click="handleagain()"
-            size="small"
-            style="width: 150px"
-            >保存</el-button
-          >
-        </el-form>
-      </div>
-    </div>
-    <!-- <el-dialog
+                    <el-form-item label="类型：" style="display: flex">
+                        <el-radio-group v-model="communicationform.type">
+                            <el-radio label="快速-用于高带宽连接"></el-radio>
+                            <el-radio label="平衡-适用于大多数连接"></el-radio>
+                            <el-radio label="慢速-用于低带宽连接"></el-radio>
+                            <el-radio label="自定义"></el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <el-form-item label="请求轻型有效载荷：" v-if="communicationform.type == '自定义'">
+                        <el-input v-model="communicationform.name" style="width: 200px; margin-bottom: 20px"></el-input>ms
+                    </el-form-item>
+                    <el-form-item label="请求重型有效载荷：" v-if="communicationform.type == '自定义'">
+                        <el-input v-model="communicationform.name" style="width: 200px; margin-bottom: 20px"></el-input>ms
+                    </el-form-item>
+                    <el-form-item label="FPS分配器：" v-if="communicationform.type == '自定义'">
+                        <el-input v-model="communicationform.name" style="width: 200px; margin-bottom: 20px"></el-input>
+                    </el-form-item>
+                    <el-form-item label="框架决议：" v-if="communicationform.type == '自定义'">
+                        <el-select v-model="communicationform.region" placeholder="框架决议" style="margin-bottom: 20px">
+                            <el-option label="自动" value="shanghai"></el-option>
+                            <el-option label="区域二" value="beijing"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="压缩格式：" v-if="communicationform.type == '自定义'">
+                        <el-select v-model="communicationform.region" placeholder="压缩格式" style="margin-bottom: 20px">
+                            <el-option label="JPG" value="shanghai"></el-option>
+                            <el-option label="区域二" value="beijing"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="压缩率：" v-if="communicationform.type == '自定义'">
+                        <el-input v-model="communicationform.name" style="width: 200px"></el-input>
+                    </el-form-item>
+                    <el-button type="primary" @click="handleagain()" size="small" style="width: 150px">保存</el-button>
+                </el-form>
+            </div>
+        </div>
+        <!-- <el-dialog
               title="新增点"
               :visible.sync="dialogVisible"
               width="30%"
@@ -707,961 +524,940 @@
                 <el-button type="primary" @click="handleDian('addform')">确 定</el-button>
               </span>
             </el-dialog> -->
-  </div>
+    </div>
 </template>
 
 <script>
-import mqtt from "mqtt"; // mqtt协议
-import {
-  getFeixpz,
-  setCameraPosition,
-  setLicensePlate,
-  setParkingStatus,
-  setFeixzbzh,
-} from "@/api/index";
+import mqtt from 'mqtt'; // mqtt协议
+import { getFeixpz, setCameraPosition, setLicensePlate, setParkingStatus, setFeixzbzh } from '@/api/index';
 export default {
-  props: {
-    analysisConfigurationdata: {
-      default: () => false,
-      type: Object,
-      required: true,
-    },
-    highPic: {
-      type: Object,
-      default: {},
-    },
-  },
-  data() {
-    return {
-      disable: false, //权限判断禁用
-      unityDone: false,
-      oldName: "",
-      formRules: {
-        pointName: [{ required: true, message: "请输入点名称", trigger: "blur" }],
-        longitude: [{ required: true, message: "请输入经度", trigger: "blur" }],
-        latitude: [{ required: true, message: "请输入纬度", trigger: "blur" }],
-      },
-      addDianForm: {
-        pointName: "",
-        longitude: "",
-        latitude: "",
-        oldName: "",
-      },
-      dialogVisible: false,
-      coordinateTransformationId: "",
-      AnalysisSettingId: "",
-      contentShow: {
-        postion: true,
-        coordinate: false,
-        plate: true,
-        parking: true,
-      },
-      sizeForm: {
-        name: "",
-        region: "",
-        date1: "",
-        date2: "",
-        delivery: false,
-        type: [],
-        resource: "",
-        desc: "",
-        longitude: "",
-        latitude: "",
-      },
-      formInline: {
-        user: "",
-        region: "",
-      },
-      //最上部表单
-      topForm: {},
-      //坐标转换
-      coordinateForm: {
-        coordinateClose: false,
-        model: "Georeferencing",
-        coordinateTransformation: "84坐标系",
-        value: "0",
-        num: 1,
-      },
-      options: [
-        {
-          value: "南",
-          label: "南",
+    props: {
+        analysisConfigurationdata: {
+            default: () => false,
+            type: Object,
+            required: true
         },
-        {
-          value: "北",
-          label: "北",
-        },
-      ],
-      coordinateTableData: [],
-      //车道识别配置
-      laneform: {
-        laneClose: false,
-        areaDetector: false,
-        sectionDetector: false,
-      },
-      //识别区域
-      identificationAreaform: {
-        identificationAreaClose: false,
-      },
-      //轨迹平滑
-      trajectorySmoothingform: {
-        trajectorySmoothingClose: false,
-        time: "",
-      },
-      // 车牌识别
-      licensePlateform: {
-        licensePlateClose: 0,
-      },
-      licensePlateTableData: [
-        {
-          thresholdValue: "11",
-          sectionPlate: "111",
-          inIp: "01",
-          setAssociation: "",
-        },
-        {
-          thresholdValue: "22",
-          sectionPlate: "222",
-          inIp: "02",
-          setAssociation: "",
-        },
-        {
-          thresholdValue: "33",
-          sectionPlate: "333",
-          inIp: "03",
-          setAssociation: "",
-        },
-      ],
-      //停车状态
-      stopStateform: {
-        displacement: "2000",
-        speed: "2000",
-        acceleration: "2000",
-      },
-      //通信设置
-      communicationform: {
-        type: "快速-用于高带宽连接",
-        renewalFrequency: "",
-      },
-      form: {
-        name: "",
-        region: "",
-        date1: "",
-        date2: "",
-        delivery: false,
-        type: [],
-        resource: "",
-        desc: "",
-      },
-      tableData: [
-        {
-          name: "11",
-          inPort: "111",
-          inIp: "01",
-        },
-        {
-          name: "22",
-          inPort: "222",
-          inIp: "02",
-        },
-        {
-          name: "33",
-          inPort: "333",
-          inIp: "03",
-        },
-      ],
-      internalIpList: [],
-      fileList: [],
-      number: "",
-      lixianImg: "",
-      count: 0, //坐标转换名称数值
-    };
-  },
-  watch: {
-    analysisConfigurationdata: {
-      handler: function (old, newV) {
-        console.log("old", old);
-        console.log("newV", newV);
-        if (this.$route.query.type == "离线视频") {
-          this.lixianImg = old;
-        } else {
-          if (newV != null && this.unityDone == true) {
-            console.log(newV, "实时视频动态变化图片");
-            this.$refs.analysisWeb.contentWindow.getDestination(newV);
-          }
+        highPic: {
+            type: Object,
+            default: {}
         }
-      },
     },
-    highPic: {
-      handler: function (val) {
-        
-      },
-    },
-  },
-  created() {
-    //    this.getDataByMqtt()
-    //  this.testMqtt()
-    //  var iframe = document.getElementById("mapModule");
-    // iframe.onload = function () {
-    //     setTimeout(() => {
-    //         this.testMqtt()
-    //     }, 5000);
-    // };
-    //     iframe.onload = () => {
-    // setTimeout(() => {
-    //             this.load()
-    //         }, 5000);// 这样每次都会触发
-    // }
-    this.number = this.$route.query.num;
-    getFeixpz({ VideoId: this.$route.query.id }).then((res) => {
-      this.sizeForm.longitude = res.data.data.cameraPositionLongitude;
-      this.sizeForm.latitude = res.data.data.cameraPositionLatitude;
-      this.coordinateForm.num =
-        res.data.data.utmArea == "-1" ? "" : res.data.data.utmArea;
-      this.coordinateForm.value = res.data.data.hemisphere;
-      this.coordinateForm.coordinateTransformation =
-        res.data.data.coordinateTransformation;
-      this.coordinateTableData =
-        res.data.data.pointData != null
-          ? res.data.data.pointData.map((item) => {
-              return { ...item, btnShow: "1" };
-            })
-          : [];
-      this.licensePlateform.licensePlateClose =
-        res.data.data.licensePlateRecognitionSwitch;
-      this.stopStateform.displacement = res.data.data.parkingDisplacement;
-      this.stopStateform.speed = res.data.data.parkingSpeed;
-      this.AnalysisSettingId = res.data.data.analysisSettingId;
-      this.coordinateTransformationId = res.data.data.coordinateTransformationId;
-      this.coordinateTableData.forEach((item) => {
-        item.btnShow = "1";
-      });
-    });
-  },
-  mounted() {
-    console.log(localStorage.getItem("roleName"), "session存储");
-    if (localStorage.getItem("roleName") == "系统管理员") {
-      this.disable = false;
-    } else {
-      this.disable = true;
-    }
-    window.OnSceneload = this.OnSceneload;
-    window.started = this.started;
-    window.saveCoordinate = this.saveCoordinate;
-    window.getPointPostionInUnity = this.getPointPostionInUnity;
-    window.chosePointInUnity = this.chosePointInUnity;
-  },
-  methods: {
-    //初始化表格数据
-    initTable() {
-      getFeixpz({ VideoId: this.$route.query.id }).then((res) => {
-        this.sizeForm.longitude = res.data.data.cameraPositionLongitude;
-        this.sizeForm.latitude = res.data.data.cameraPositionLatitude;
-        this.coordinateForm.num =
-          res.data.data.utmArea == "-1" ? "" : res.data.data.utmArea;
-        this.coordinateForm.value = res.data.data.hemisphere;
-        this.coordinateForm.coordinateTransformation =
-          res.data.data.coordinateTransformation;
-        this.coordinateTableData =
-          res.data.data.pointData != null
-            ? res.data.data.pointData.map((item) => {
-                return { ...item, btnShow: "1" };
-              })
-            : [];
-        this.licensePlateform.licensePlateClose =
-          res.data.data.licensePlateRecognitionSwitch;
-        this.stopStateform.displacement = res.data.data.parkingDisplacement;
-        this.stopStateform.speed = res.data.data.parkingSpeed;
-        this.AnalysisSettingId = res.data.data.analysisSettingId;
-        this.coordinateTransformationId = res.data.data.coordinateTransformationId;
-        this.coordinateTableData.forEach((item) => {
-          item.btnShow = "1";
-        });
-      });
-    },
-
-    //unity发送坐标给前端
-    getPointPostionInUnity(data) {
-      const [id, x, y] = data.split(",");
-      const obj = {
-        id,
-        x,
-        y,
-      };
-      this.coordinateTableData.forEach((item) => {
-        if (item.newPointName != undefined) {
-          if (item.newPointName == obj.id) {
-            item.imageXCoordinate = obj.x;
-            item.imageYCoordinate = obj.y;
-          }
-        } else {
-          if (item.pointId == obj.id) {
-            item.imageXCoordinate = obj.x;
-            item.imageYCoordinate = obj.y;
-          }
-        }
-      });
-    },
-    //选中对应得点位
-    chosePointInUnity(pointId) {
-      for (let i = 0; i < this.coordinateTableData.length; i++) {
-        if (this.coordinateTableData[i].pointId != undefined) {
-          if (this.coordinateTableData[i].pointId == pointId) {
-            this.$refs.tableData.setCurrentRow(this.coordinateTableData[i]);
-          }
-        } else {
-          if (this.coordinateTableData[i].newPointName == pointId) {
-            this.$refs.tableData.setCurrentRow(this.coordinateTableData[i]);
-          }
-        }
-      }
-    },
-    saveCoordinate(obj) {
-      this.coordinateTableData.forEach((item) => {
-        if (item.pointName == obj.pointName) {
-          item.imageXCoordinate = obj.imageXCoordinate;
-          item.imageYCoordinate = obj.imageYCoordinate;
-        }
-      });
-    },
-
-    updateName(val) {
-      console.log("val", val.target.value);
-    },
-    handleExit(row, index) {
-      // this.oldName = row.pointName
-      row.oldName = row.pointName;
-      // this.$refs.analysisWeb.contentWindow.exitPoint(row.pointName);
-      if (row.newPointName != undefined) {
-        this.$refs.analysisWeb.contentWindow.editorPoint(row.newPointName);
-      } else {
-        this.$refs.analysisWeb.contentWindow.editorPoint(row.pointId);
-      }
-      row.btnShow = "2";
-      // this.$set(this.coordinateTableData, index, row);
-    },
-    handleconfirm(row, index) {
-      console.log(row, "row");
-      var bol = this.coordinateTableData.some(
-        (item, indexa) => item.pointName == row.pointName && indexa != index
-      );
-      // if (bol == true) {
-      //     this.$message({
-      //         type: 'info',
-      //         message: '该点位已存在'
-      //     });
-      //     return false;
-      // }
-      var string = row.oldName + "," + row.pointName;
-      // this.$refs.analysisWeb.contentWindow.saveDian(string);
-      if (row.newPointName != undefined) {
-        this.$refs.analysisWeb.contentWindow.editorOverPoint(
-          row.newPointName,
-          row.pointName
-        );
-      } else {
-        this.$refs.analysisWeb.contentWindow.editorOverPoint(row.pointId, row.pointName);
-      }
-      // this.$refs.analysisWeb.contentWindow.refreshPoint(this.$route.query.id);
-      row.btnShow = "1";
-      row.oldName = row.pointName;
-      // this.$set(this.coordinateTableData, index, row);
-    },
-    OnSceneload(newV) {
-      var ip = window.location.host;
-      this.ipData = "http://" + ip.split(":")[0] + ":5000";
-      // this.$refs.analysisWeb.contentWindow.getIpData("http://172.16.1.168:5000");
-       this.$refs.analysisWeb.contentWindow.getIpData(this.ipData);
-      this.$refs.analysisWeb.contentWindow.getDianwei(this.$route.query.id);
-      this.unityDone = true;
-      window.publish(
-        "Custom",
-        JSON.stringify({ type: "getImage", videoid: this.$route.query.id })
-      );
-
-      if (this.$route.query.type == "实时视频") {
-           this.highPic.rate = "low"
-        console.log(this.$route.query.msg, "this.$route.query.msg", this.highPic);
-        //   this.$refs.analysisWeb.contentWindow.getDestination(this.$route.query.msg);
-          this.$refs.analysisWeb.contentWindow.getDestination(this.highPic);
-      } else if (this.$route.query.type == "离线视频") {
-        if (this.lixianImg != "") {
-          console.log(this.lixianImg, "this.lixianImg");
-          this.$refs.analysisWeb.contentWindow.getDestination(this.lixianImg);
-        }
-      }
-
-      // window.publish('Custom',JSON.stringify({"type":'getImage',"videoid":'all'}));
-    },
-    started() {
-      var ip = window.location.host;
-      this.ipData = ip.split(":")[0];
-      this.$refs.analysisWeb.contentWindow.sentIp(this.ipData);
-      // this.$refs.analysisWeb.contentWindow.sentIp("172.16.1.168");
-      this.unityDone = true;
-      this.$refs.analysisWeb.contentWindow.refreshPoint(this.$route.query.id);
-      window.publish(
-        "Custom",
-        JSON.stringify({ type: "getImage", videoid: this.$route.query.id })
-      );
-      if (this.$route.query.type == "实时视频") {
-          this.highPic.rate = "low"
-        console.log(this.$route.query.msg, "this.$route.query.msg", this.highPic);
-        // this.$refs.analysisWeb.contentWindow.getDestination(this.$route.query.msg);
-          this.$refs.analysisWeb.contentWindow.getDestination(this.highPic);
-      } else if (this.$route.query.type == "离线视频") {
-        if (this.lixianImg != "") {
-          console.log(this.lixianImg, "this.lixianImg");
-          this.$refs.analysisWeb.contentWindow.getDestination(this.lixianImg);
-        }
-      }
-    },
-    handleDeleteDian(row, idx) {
-      this.$confirm("此操作将删除该点位, 是否继续?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(() => {
-          this.coordinateTableData.splice(idx, 1);
-          // this.coordinateTableData = this.coordinateTableData.filter(item => item.pointName != row.pointName);
-          // this.$refs.analysisWeb.contentWindow.deletePoint(row.oldName);
-          if (row.newPointName != undefined) {
-            this.$refs.analysisWeb.contentWindow.removePoint(row.newPointName);
-          } else {
-            this.$refs.analysisWeb.contentWindow.removePoint(row.pointId);
-          }
-          // this.$message({
-          //     type: 'success',
-          //     message: '删除成功!'
-          // });
-          this.count--;
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: "已取消删除",
-          });
-        });
-    },
-    //表格行点击
-    handleRowClick(row, column, event) {
-      if (row.pointId != undefined) {
-        this.$refs.analysisWeb.contentWindow.chosePoint(row.pointId);
-      } else {
-        this.$refs.analysisWeb.contentWindow.chosePoint(row.newPointName);
-      }
-    },
-
-    handleDian() {
-      if (this.coordinateTableData.length == 0) {
-        this.count++;
-      } else {
-        this.count = this.coordinateTableData.length + 1;
-      }
-
-      const newPointData = {
-        btnShow: "2",
-        longitude: "0",
-        latitude: "0",
-      };
-      // newPointData.oldName = newPointData.pointName = String(new Date().getTime());
-      // newPointData.newPointName = '点位' + this.count;
-      newPointData.oldName = newPointData.pointName = "点位" + this.count;
-      newPointData.newPointName = String(new Date().getTime());
-      this.coordinateTableData.unshift(newPointData);
-      // this.$refs.analysisWeb.contentWindow.setPOS(newPointData.pointName);
-      this.$refs.analysisWeb.contentWindow.addPoint(
-        newPointData.newPointName,
-        newPointData.pointName
-      );
-    },
-    phoneChange(e) {
-      console.log("e", e.currentTarget.value);
-      this.addDianForm.oldName = e.currentTarget.value;
-    },
-    handleClose(done) {
-      this.$confirm("确认关闭？")
-        .then((_) => {
-          done();
-        })
-        .catch((_) => {});
-    },
-    // 坐标转换接口
-    handlePos() {
-      if (this.coordinateTableData.some((item) => item.btnShow === "2")) {
-        this.$message.warning("请先确认编辑");
-        return;
-      }
-      let params = {
-        CoordinateTransformationId: this.coordinateTransformationId,
-        UTMArea: this.coordinateForm.num == "" ? "-1" : this.coordinateForm.num,
-        Hemisphere: this.coordinateForm.value,
-        CoordinateTransformation: this.coordinateForm.coordinateTransformation,
-        PointData: this.coordinateTableData.map((item) => {
-          console.log(item, "item");
-          return {
-            longitude: item.longitude,
-            latitude: item.latitude,
-            pointName: item.pointName,
-            imageXCoordinate: item.imageXCoordinate,
-            imageYCoordinate: item.imageYCoordinate,
-          };
-        }),
-      };
-      setFeixzbzh(params).then((res) => {
-        this.$message({
-          type: "success",
-          message: res.data.msg,
-        });
-        this.initTable();
-        console.log(this.$route.query.id, "this.$route.query.id");
-        this.$refs.analysisWeb.contentWindow.refreshPoint(this.$route.query.id);
-      });
-    },
-    // 停车状态
-    handleParking() {
-      const params = new URLSearchParams();
-      params.append("AnalysisSettingId", this.AnalysisSettingId);
-      params.append("ParkingDisplacement", this.stopStateform.displacement);
-      params.append("ParkingSpeed", this.stopStateform.speed);
-      setParkingStatus(params).then((res) => {
-        this.$message({
-          type: "success",
-          message: res.data.msg,
-        });
-      });
-    },
-    // 车牌识别
-    changeChepai(val) {
-      console.log(val, "val111");
-      const params = new URLSearchParams();
-      params.append("AnalysisSettingId", this.AnalysisSettingId);
-      params.append("LicensePlateRecognitionSwitch", val);
-      setLicensePlate(params).then((res) => {
-        this.$message({
-          type: "success",
-          message: res.data.msg,
-        });
-      });
-    },
-    // 经纬度保存
-    handSaveitude() {
-      const params = new URLSearchParams();
-      params.append("AnalysisSettingId", this.AnalysisSettingId);
-      params.append("CameraPositionLongitude", this.sizeForm.longitude);
-      params.append("CameraPositionLatitude", this.sizeForm.latitude);
-      setCameraPosition(params).then((res) => {
-        this.$message({
-          type: "success",
-          message: res.data.msg,
-        });
-      });
-    },
-    // 收放
-    handleContent(val) {
-      if (val == "postion") {
-        this.contentShow.postion = !this.contentShow.postion;
-      }
-      if (val == "coordinate") {
-        this.contentShow.coordinate = !this.contentShow.coordinate;
-      }
-      if (val == "plate") {
-        this.contentShow.plate = !this.contentShow.plate;
-      }
-      if (val == "parking") {
-        this.contentShow.parking = !this.contentShow.parking;
-      }
-    },
-    handleChange(value) {
-      console.log(value);
-    },
-    load() {
-      console.log("1111");
-      var iframe = document.getElementById("mapModuleTop");
-      console.log("iframe", iframe);
-      iframe.onload = () => {
-        // setTimeout(() => {
-        this.testMqtt();
-        // }, 5000);
-      };
-    },
-    testMqtt() {
-      console.log("222");
-      this.getDataByMqtt();
-    },
-    handleChange() {},
-    handleagain() {
-      this.$confirm("此操作将重新启动系统, 是否继续?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(() => {
-          // this.$message({
-          //   type: 'success',
-          //   message: '删除成功!'
-          // });
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: "已取消",
-          });
-        });
-    },
-    handleReset() {
-      this.$confirm("此操作将重置默认值, 是否继续?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(() => {
-          // this.$message({
-          //   type: 'success',
-          //   message: '删除成功!'
-          // });
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: "已取消重置",
-          });
-        });
-    },
-    handleRemove(file, fileList) {
-      console.log(file, fileList);
-    },
-    handlePreview(file) {
-      console.log(file);
-    },
-    handleExceed(files, fileList) {
-      this.$message.warning(
-        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
-          files.length + fileList.length
-        } 个文件`
-      );
-    },
-    beforeRemove(file, fileList) {
-      return this.$confirm(`确定移除 ${file.name}？`);
-    },
-    // 获取列表
-    getReverseShellList() {
-      //   getShellList().then(res => {
-      //     if (res.code === 200) {
-      //       if (res.data && res.data.length > 0) {
-      //       	// 获取到的数据加上 isEdit是false， 默认是文本
-      //         res.data.forEach(item => {
-      //           item['isEdit'] = false
-      //         })
-      //       }
-      //   this.tableData = res.data
-      // 在表格列表前插入一行，用来新增数据
-      this.tableData.unshift({
-        name: "",
-        inIp: "",
-        inPort: null,
-        outPort: null,
-        enabled: null,
-        isEdit: true,
-      });
-      //     }
-      //   })
-    },
-    // 新增按钮
-    handleAdd(row) {
-      for (let key in row) {
-        // 判断一行字段是否输入完整
-        if (row[key] === "" || row[key] === null || typeof row[key] === "undefined") {
-          this.msgError("Please complete the information");
-          return;
-        }
-      }
-      const params = {
-        name: row.name,
-        inIp: row.inIp,
-        // inPort: parseInt(row.inPort),
-        // outPort: parseInt(row.outPort),
-        // enabled: row.enabled
-      };
-      this.getReverseShellList();
-      //   addShell(params).then(res => {
-      //     if (res.code === 200) {
-      //       this.msgSuccess('Add reverse shell successfully')
-      //       row.isEdit = false
-      //       this.getReverseShellList()
-      //     }
-      //   })
-    },
-    // 编辑或者Apply按钮
-    handleUpdate(row) {
-      // 点击Apply时
-      if (row.isEdit) {
-        for (let key in row) {
-          if (row[key] === "" || row[key] === null || typeof row[key] === "undefined") {
-            this.msgError("Please complete the information");
-            return;
-          }
-        }
-        const params = {
-          name: row.name,
-          inIp: row.inIp,
-          inPort: parseInt(row.inPort),
-          outPort: parseInt(row.outPort),
-          enabled: row.enabled,
+    data() {
+        return {
+            disable: false, //权限判断禁用
+            unityDone: false,
+            oldName: '',
+            formRules: {
+                pointName: [{ required: true, message: '请输入点名称', trigger: 'blur' }],
+                longitude: [{ required: true, message: '请输入经度', trigger: 'blur' }],
+                latitude: [{ required: true, message: '请输入纬度', trigger: 'blur' }]
+            },
+            addDianForm: {
+                pointName: '',
+                longitude: '',
+                latitude: '',
+                oldName: ''
+            },
+            dialogVisible: false,
+            coordinateTransformationId: '',
+            AnalysisSettingId: '',
+            contentShow: {
+                postion: true,
+                coordinate: false,
+                plate: true,
+                parking: true
+            },
+            sizeForm: {
+                name: '',
+                region: '',
+                date1: '',
+                date2: '',
+                delivery: false,
+                type: [],
+                resource: '',
+                desc: '',
+                longitude: '',
+                latitude: ''
+            },
+            formInline: {
+                user: '',
+                region: ''
+            },
+            //最上部表单
+            topForm: {},
+            //坐标转换
+            coordinateForm: {
+                coordinateClose: false,
+                model: 'Georeferencing',
+                coordinateTransformation: '84坐标系',
+                value: '0',
+                num: 1
+            },
+            options: [
+                {
+                    value: '南',
+                    label: '南'
+                },
+                {
+                    value: '北',
+                    label: '北'
+                }
+            ],
+            coordinateTableData: [],
+            //车道识别配置
+            laneform: {
+                laneClose: false,
+                areaDetector: false,
+                sectionDetector: false
+            },
+            //识别区域
+            identificationAreaform: {
+                identificationAreaClose: false
+            },
+            //轨迹平滑
+            trajectorySmoothingform: {
+                trajectorySmoothingClose: false,
+                time: ''
+            },
+            // 车牌识别
+            licensePlateform: {
+                licensePlateClose: 0
+            },
+            licensePlateTableData: [
+                {
+                    thresholdValue: '11',
+                    sectionPlate: '111',
+                    inIp: '01',
+                    setAssociation: ''
+                },
+                {
+                    thresholdValue: '22',
+                    sectionPlate: '222',
+                    inIp: '02',
+                    setAssociation: ''
+                },
+                {
+                    thresholdValue: '33',
+                    sectionPlate: '333',
+                    inIp: '03',
+                    setAssociation: ''
+                }
+            ],
+            //停车状态
+            stopStateform: {
+                displacement: '2000',
+                speed: '2000',
+                acceleration: '2000'
+            },
+            //通信设置
+            communicationform: {
+                type: '快速-用于高带宽连接',
+                renewalFrequency: ''
+            },
+            form: {
+                name: '',
+                region: '',
+                date1: '',
+                date2: '',
+                delivery: false,
+                type: [],
+                resource: '',
+                desc: ''
+            },
+            tableData: [
+                {
+                    name: '11',
+                    inPort: '111',
+                    inIp: '01'
+                },
+                {
+                    name: '22',
+                    inPort: '222',
+                    inIp: '02'
+                },
+                {
+                    name: '33',
+                    inPort: '333',
+                    inIp: '03'
+                }
+            ],
+            internalIpList: [],
+            fileList: [],
+            number: '',
+            lixianImg: '',
+            count: 0 //坐标转换名称数值
         };
-        // updateShell(params).then(res => {
-        //   if (res.code === 200) {
-        //     this.msgSuccess('Update reverse shell successfully')
-        //     this.getReverseShellList()
-        //   }
-        // })
-      } else {
-        // 点击编辑时
-        row.isEdit = true;
-      }
     },
-    // 删除或取消按钮
-    handleDelete(row) {
-      // 点击取消时
-      if (row.isEdit) {
-        this.getReverseShellList();
-      } else {
-        // 点击删除时
-        this.$confirm("Are you sure to delete reverse shell?", "warning", {
-          confirmButtonText: "Sure",
-          cancelButtonText: "Cancel",
-          type: "warning",
-        })
-          .then(() => {
-            //   deleteShell(row.name).then(res => {
+    watch: {
+        analysisConfigurationdata: {
+            handler: function (old, newV) {
+                console.log('old', old);
+                console.log('newV', newV);
+                if (this.$route.query.type == '离线视频') {
+                    this.lixianImg = old;
+                } else {
+                    if (newV != null && this.unityDone == true) {
+                        console.log(newV, '实时视频动态变化图片');
+                        this.$refs.analysisWeb.contentWindow.getDestination(newV);
+                    }
+                }
+            }
+        },
+        highPic: {
+            handler: function (val) {}
+        }
+    },
+    created() {
+        //    this.getDataByMqtt()
+        //  this.testMqtt()
+        //  var iframe = document.getElementById("mapModule");
+        // iframe.onload = function () {
+        //     setTimeout(() => {
+        //         this.testMqtt()
+        //     }, 5000);
+        // };
+        //     iframe.onload = () => {
+        // setTimeout(() => {
+        //             this.load()
+        //         }, 5000);// 这样每次都会触发
+        // }
+        this.number = this.$route.query.num;
+        getFeixpz({ VideoId: this.$route.query.id }).then((res) => {
+            this.sizeForm.longitude = res.data.data.cameraPositionLongitude;
+            this.sizeForm.latitude = res.data.data.cameraPositionLatitude;
+            this.coordinateForm.num = res.data.data.utmArea == '-1' ? '' : res.data.data.utmArea;
+            this.coordinateForm.value = res.data.data.hemisphere;
+            this.coordinateForm.coordinateTransformation = res.data.data.coordinateTransformation;
+            this.coordinateTableData =
+                res.data.data.pointData != null
+                    ? res.data.data.pointData.map((item) => {
+                          return { ...item, btnShow: '1' };
+                      })
+                    : [];
+            this.licensePlateform.licensePlateClose = res.data.data.licensePlateRecognitionSwitch;
+            this.stopStateform.displacement = res.data.data.parkingDisplacement;
+            this.stopStateform.speed = res.data.data.parkingSpeed;
+            this.AnalysisSettingId = res.data.data.analysisSettingId;
+            this.coordinateTransformationId = res.data.data.coordinateTransformationId;
+            this.coordinateTableData.forEach((item) => {
+                item.btnShow = '1';
+            });
+        });
+    },
+    mounted() {
+        console.log(localStorage.getItem('roleName'), 'session存储');
+        if (localStorage.getItem('roleName') == '系统管理员') {
+            this.disable = false;
+        } else {
+            this.disable = true;
+        }
+        window.OnSceneload = this.OnSceneload;
+        window.started = this.started;
+        window.saveCoordinate = this.saveCoordinate;
+        window.getPointPostionInUnity = this.getPointPostionInUnity;
+        window.chosePointInUnity = this.chosePointInUnity;
+    },
+    methods: {
+        //初始化表格数据
+        initTable() {
+            getFeixpz({ VideoId: this.$route.query.id }).then((res) => {
+                this.sizeForm.longitude = res.data.data.cameraPositionLongitude;
+                this.sizeForm.latitude = res.data.data.cameraPositionLatitude;
+                this.coordinateForm.num = res.data.data.utmArea == '-1' ? '' : res.data.data.utmArea;
+                this.coordinateForm.value = res.data.data.hemisphere;
+                this.coordinateForm.coordinateTransformation = res.data.data.coordinateTransformation;
+                this.coordinateTableData =
+                    res.data.data.pointData != null
+                        ? res.data.data.pointData.map((item) => {
+                              return { ...item, btnShow: '1' };
+                          })
+                        : [];
+                this.licensePlateform.licensePlateClose = res.data.data.licensePlateRecognitionSwitch;
+                this.stopStateform.displacement = res.data.data.parkingDisplacement;
+                this.stopStateform.speed = res.data.data.parkingSpeed;
+                this.AnalysisSettingId = res.data.data.analysisSettingId;
+                this.coordinateTransformationId = res.data.data.coordinateTransformationId;
+                this.coordinateTableData.forEach((item) => {
+                    item.btnShow = '1';
+                });
+            });
+        },
+
+        //unity发送坐标给前端
+        getPointPostionInUnity(data) {
+            const [id, x, y] = data.split(',');
+            const obj = {
+                id,
+                x,
+                y
+            };
+            this.coordinateTableData.forEach((item) => {
+                if (item.newPointName != undefined) {
+                    if (item.newPointName == obj.id) {
+                        item.imageXCoordinate = obj.x;
+                        item.imageYCoordinate = obj.y;
+                    }
+                } else {
+                    if (item.pointId == obj.id) {
+                        item.imageXCoordinate = obj.x;
+                        item.imageYCoordinate = obj.y;
+                    }
+                }
+            });
+        },
+        //选中对应得点位
+        chosePointInUnity(pointId) {
+            for (let i = 0; i < this.coordinateTableData.length; i++) {
+                if (this.coordinateTableData[i].pointId != undefined) {
+                    if (this.coordinateTableData[i].pointId == pointId) {
+                        this.$refs.tableData.setCurrentRow(this.coordinateTableData[i]);
+                    }
+                } else {
+                    if (this.coordinateTableData[i].newPointName == pointId) {
+                        this.$refs.tableData.setCurrentRow(this.coordinateTableData[i]);
+                    }
+                }
+            }
+        },
+        saveCoordinate(obj) {
+            this.coordinateTableData.forEach((item) => {
+                if (item.pointName == obj.pointName) {
+                    item.imageXCoordinate = obj.imageXCoordinate;
+                    item.imageYCoordinate = obj.imageYCoordinate;
+                }
+            });
+        },
+
+        updateName(val) {
+            console.log('val', val.target.value);
+        },
+        handleExit(row, index) {
+            // this.oldName = row.pointName
+            row.oldName = row.pointName;
+            // this.$refs.analysisWeb.contentWindow.exitPoint(row.pointName);
+            if (row.newPointName != undefined) {
+                this.$refs.analysisWeb.contentWindow.editorPoint(row.newPointName);
+            } else {
+                this.$refs.analysisWeb.contentWindow.editorPoint(row.pointId);
+            }
+            row.btnShow = '2';
+            // this.$set(this.coordinateTableData, index, row);
+        },
+        handleconfirm(row, index) {
+            console.log(row, 'row');
+            var bol = this.coordinateTableData.some((item, indexa) => item.pointName == row.pointName && indexa != index);
+            // if (bol == true) {
+            //     this.$message({
+            //         type: 'info',
+            //         message: '该点位已存在'
+            //     });
+            //     return false;
+            // }
+            var string = row.oldName + ',' + row.pointName;
+            // this.$refs.analysisWeb.contentWindow.saveDian(string);
+            if (row.newPointName != undefined) {
+                this.$refs.analysisWeb.contentWindow.editorOverPoint(row.newPointName, row.pointName);
+            } else {
+                this.$refs.analysisWeb.contentWindow.editorOverPoint(row.pointId, row.pointName);
+            }
+            // this.$refs.analysisWeb.contentWindow.refreshPoint(this.$route.query.id);
+            row.btnShow = '1';
+            row.oldName = row.pointName;
+            // this.$set(this.coordinateTableData, index, row);
+        },
+        OnSceneload(newV) {
+            var ip = window.location.host;
+            this.ipData = 'http://' + ip.split(':')[0] + ':5000';
+            if (process.env.NODE_ENV === 'development') {
+              this.ipData = 'http://172.16.1.168:5000';
+            }
+            // this.$refs.analysisWeb.contentWindow.getIpData("http://172.16.1.168:5000");
+            this.$refs.analysisWeb.contentWindow.getIpData(this.ipData);
+            this.$refs.analysisWeb.contentWindow.getDianwei(this.$route.query.id);
+            this.unityDone = true;
+            window.publish('Custom', JSON.stringify({ type: 'getImage', videoid: this.$route.query.id }));
+
+            if (this.$route.query.type == '实时视频') {
+                this.highPic.rate = 'low';
+                console.log(this.$route.query.msg, 'this.$route.query.msg', this.highPic);
+                //   this.$refs.analysisWeb.contentWindow.getDestination(this.$route.query.msg);
+                this.$refs.analysisWeb.contentWindow.getDestination(this.highPic);
+            } else if (this.$route.query.type == '离线视频') {
+                if (this.lixianImg != '') {
+                    console.log(this.lixianImg, 'this.lixianImg');
+                    this.$refs.analysisWeb.contentWindow.getDestination(this.lixianImg);
+                }
+            }
+
+            // window.publish('Custom',JSON.stringify({"type":'getImage',"videoid":'all'}));
+        },
+        started() {
+            var ip = window.location.host;
+            this.ipData = ip.split(':')[0];
+            if (process.env.NODE_ENV === 'development') {
+              this.ipData = '172.16.1.168';
+            }
+            this.$refs.analysisWeb.contentWindow.sentIp(this.ipData);
+            // this.$refs.analysisWeb.contentWindow.sentIp("172.16.1.168");
+            this.unityDone = true;
+            this.$refs.analysisWeb.contentWindow.refreshPoint(this.$route.query.id);
+            window.publish('Custom', JSON.stringify({ type: 'getImage', videoid: this.$route.query.id }));
+            if (this.$route.query.type == '实时视频') {
+                this.highPic.rate = 'low';
+                console.log(this.$route.query.msg, 'this.$route.query.msg', this.highPic);
+                // this.$refs.analysisWeb.contentWindow.getDestination(this.$route.query.msg);
+                this.$refs.analysisWeb.contentWindow.getDestination(this.highPic);
+            } else if (this.$route.query.type == '离线视频') {
+                if (this.lixianImg != '') {
+                    console.log(this.lixianImg, 'this.lixianImg');
+                    this.$refs.analysisWeb.contentWindow.getDestination(this.lixianImg);
+                }
+            }
+        },
+        handleDeleteDian(row, idx) {
+            this.$confirm('此操作将删除该点位, 是否继续?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            })
+                .then(() => {
+                    this.coordinateTableData.splice(idx, 1);
+                    // this.coordinateTableData = this.coordinateTableData.filter(item => item.pointName != row.pointName);
+                    // this.$refs.analysisWeb.contentWindow.deletePoint(row.oldName);
+                    if (row.newPointName != undefined) {
+                        this.$refs.analysisWeb.contentWindow.removePoint(row.newPointName);
+                    } else {
+                        this.$refs.analysisWeb.contentWindow.removePoint(row.pointId);
+                    }
+                    // this.$message({
+                    //     type: 'success',
+                    //     message: '删除成功!'
+                    // });
+                    this.count--;
+                })
+                .catch(() => {
+                    this.$message({
+                        type: 'info',
+                        message: '已取消删除'
+                    });
+                });
+        },
+        //表格行点击
+        handleRowClick(row, column, event) {
+            if (row.pointId != undefined) {
+                this.$refs.analysisWeb.contentWindow.chosePoint(row.pointId);
+            } else {
+                this.$refs.analysisWeb.contentWindow.chosePoint(row.newPointName);
+            }
+        },
+
+        handleDian() {
+            if (this.coordinateTableData.length == 0) {
+                this.count++;
+            } else {
+                this.count = this.coordinateTableData.length + 1;
+            }
+
+            const newPointData = {
+                btnShow: '2',
+                longitude: '0',
+                latitude: '0'
+            };
+            // newPointData.oldName = newPointData.pointName = String(new Date().getTime());
+            // newPointData.newPointName = '点位' + this.count;
+            newPointData.oldName = newPointData.pointName = '点位' + this.count;
+            newPointData.newPointName = String(new Date().getTime());
+            this.coordinateTableData.unshift(newPointData);
+            // this.$refs.analysisWeb.contentWindow.setPOS(newPointData.pointName);
+            this.$refs.analysisWeb.contentWindow.addPoint(newPointData.newPointName, newPointData.pointName);
+        },
+        phoneChange(e) {
+            console.log('e', e.currentTarget.value);
+            this.addDianForm.oldName = e.currentTarget.value;
+        },
+        handleClose(done) {
+            this.$confirm('确认关闭？')
+                .then((_) => {
+                    done();
+                })
+                .catch((_) => {});
+        },
+        // 坐标转换接口
+        handlePos() {
+            if (this.coordinateTableData.some((item) => item.btnShow === '2')) {
+                this.$message.warning('请先确认编辑');
+                return;
+            }
+            let params = {
+                CoordinateTransformationId: this.coordinateTransformationId,
+                UTMArea: this.coordinateForm.num == '' ? '-1' : this.coordinateForm.num,
+                Hemisphere: this.coordinateForm.value,
+                CoordinateTransformation: this.coordinateForm.coordinateTransformation,
+                PointData: this.coordinateTableData.map((item) => {
+                    console.log(item, 'item');
+                    return {
+                        longitude: item.longitude,
+                        latitude: item.latitude,
+                        pointName: item.pointName,
+                        imageXCoordinate: item.imageXCoordinate,
+                        imageYCoordinate: item.imageYCoordinate
+                    };
+                })
+            };
+            setFeixzbzh(params).then((res) => {
+                this.$message({
+                    type: 'success',
+                    message: res.data.msg
+                });
+                this.initTable();
+                console.log(this.$route.query.id, 'this.$route.query.id');
+                this.$refs.analysisWeb.contentWindow.refreshPoint(this.$route.query.id);
+            });
+        },
+        // 停车状态
+        handleParking() {
+            const params = new URLSearchParams();
+            params.append('AnalysisSettingId', this.AnalysisSettingId);
+            params.append('ParkingDisplacement', this.stopStateform.displacement);
+            params.append('ParkingSpeed', this.stopStateform.speed);
+            setParkingStatus(params).then((res) => {
+                this.$message({
+                    type: 'success',
+                    message: res.data.msg
+                });
+            });
+        },
+        // 车牌识别
+        changeChepai(val) {
+            console.log(val, 'val111');
+            const params = new URLSearchParams();
+            params.append('AnalysisSettingId', this.AnalysisSettingId);
+            params.append('LicensePlateRecognitionSwitch', val);
+            setLicensePlate(params).then((res) => {
+                this.$message({
+                    type: 'success',
+                    message: res.data.msg
+                });
+            });
+        },
+        // 经纬度保存
+        handSaveitude() {
+            const params = new URLSearchParams();
+            params.append('AnalysisSettingId', this.AnalysisSettingId);
+            params.append('CameraPositionLongitude', this.sizeForm.longitude);
+            params.append('CameraPositionLatitude', this.sizeForm.latitude);
+            setCameraPosition(params).then((res) => {
+                this.$message({
+                    type: 'success',
+                    message: res.data.msg
+                });
+            });
+        },
+        // 收放
+        handleContent(val) {
+            if (val == 'postion') {
+                this.contentShow.postion = !this.contentShow.postion;
+            }
+            if (val == 'coordinate') {
+                this.contentShow.coordinate = !this.contentShow.coordinate;
+            }
+            if (val == 'plate') {
+                this.contentShow.plate = !this.contentShow.plate;
+            }
+            if (val == 'parking') {
+                this.contentShow.parking = !this.contentShow.parking;
+            }
+        },
+        handleChange(value) {
+            console.log(value);
+        },
+        load() {
+            console.log('1111');
+            var iframe = document.getElementById('mapModuleTop');
+            console.log('iframe', iframe);
+            iframe.onload = () => {
+                // setTimeout(() => {
+                this.testMqtt();
+                // }, 5000);
+            };
+        },
+        testMqtt() {
+            console.log('222');
+            this.getDataByMqtt();
+        },
+        handleChange() {},
+        handleagain() {
+            this.$confirm('此操作将重新启动系统, 是否继续?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            })
+                .then(() => {
+                    // this.$message({
+                    //   type: 'success',
+                    //   message: '删除成功!'
+                    // });
+                })
+                .catch(() => {
+                    this.$message({
+                        type: 'info',
+                        message: '已取消'
+                    });
+                });
+        },
+        handleReset() {
+            this.$confirm('此操作将重置默认值, 是否继续?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            })
+                .then(() => {
+                    // this.$message({
+                    //   type: 'success',
+                    //   message: '删除成功!'
+                    // });
+                })
+                .catch(() => {
+                    this.$message({
+                        type: 'info',
+                        message: '已取消重置'
+                    });
+                });
+        },
+        handleRemove(file, fileList) {
+            console.log(file, fileList);
+        },
+        handlePreview(file) {
+            console.log(file);
+        },
+        handleExceed(files, fileList) {
+            this.$message.warning(
+                `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
+            );
+        },
+        beforeRemove(file, fileList) {
+            return this.$confirm(`确定移除 ${file.name}？`);
+        },
+        // 获取列表
+        getReverseShellList() {
+            //   getShellList().then(res => {
             //     if (res.code === 200) {
-            //       this.msgSuccess('Delete reverse shell successfully')
+            //       if (res.data && res.data.length > 0) {
+            //       	// 获取到的数据加上 isEdit是false， 默认是文本
+            //         res.data.forEach(item => {
+            //           item['isEdit'] = false
+            //         })
+            //       }
+            //   this.tableData = res.data
+            // 在表格列表前插入一行，用来新增数据
+            this.tableData.unshift({
+                name: '',
+                inIp: '',
+                inPort: null,
+                outPort: null,
+                enabled: null,
+                isEdit: true
+            });
+            //     }
+            //   })
+        },
+        // 新增按钮
+        handleAdd(row) {
+            for (let key in row) {
+                // 判断一行字段是否输入完整
+                if (row[key] === '' || row[key] === null || typeof row[key] === 'undefined') {
+                    this.msgError('Please complete the information');
+                    return;
+                }
+            }
+            const params = {
+                name: row.name,
+                inIp: row.inIp
+                // inPort: parseInt(row.inPort),
+                // outPort: parseInt(row.outPort),
+                // enabled: row.enabled
+            };
+            this.getReverseShellList();
+            //   addShell(params).then(res => {
+            //     if (res.code === 200) {
+            //       this.msgSuccess('Add reverse shell successfully')
+            //       row.isEdit = false
             //       this.getReverseShellList()
             //     }
             //   })
-          })
-          .catch(() => {});
-      }
-    },
-    // mqtt订阅（独立）
-    getDataByMqtt(url, topic, cIdNum) {
-      //     var that = this
-      const clientId = "test_id_" + String(new Date().getTime()); // 用户名
-      //   const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
-      var ip = window.location.host.split(":")[0];
-      console.log("ip", ip);
-        const host = `ws://${ip}:10087`;
-      // const host = "ws://172.16.1.168:10087/";
-      const options = {
-        // 配置
-        // 测试：订阅本机IP
-        // host: host,
-        // port: port,
-        // host:"ç",
-        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.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("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.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的错误提示数据
-          } 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数据
-              this.imgUrl1 = "data:image/png;base64," + msg.pic;
-              console.log("imageUrl", imageUrl);
-            } catch {
-              let imageType = "arraybuffer";
-              const blob = new Blob([message], { type: imageType });
-              const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
-              console.log("imageUrl", imageUrl);
+        // 编辑或者Apply按钮
+        handleUpdate(row) {
+            // 点击Apply时
+            if (row.isEdit) {
+                for (let key in row) {
+                    if (row[key] === '' || row[key] === null || typeof row[key] === 'undefined') {
+                        this.msgError('Please complete the information');
+                        return;
+                    }
+                }
+                const params = {
+                    name: row.name,
+                    inIp: row.inIp,
+                    inPort: parseInt(row.inPort),
+                    outPort: parseInt(row.outPort),
+                    enabled: row.enabled
+                };
+                // updateShell(params).then(res => {
+                //   if (res.code === 200) {
+                //     this.msgSuccess('Update reverse shell successfully')
+                //     this.getReverseShellList()
+                //   }
+                // })
+            } else {
+                // 点击编辑时
+                row.isEdit = true;
             }
-          } 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数据
-              this.imgUrl2 = "data:image/png;base64," + msg.pic;
-              console.log("imageUrl", imageUrl);
-            } catch {
-              let imageType = "arraybuffer";
-              const blob = new Blob([message], { type: imageType });
-              const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
-              console.log("imageUrl", imageUrl);
+        },
+        // 删除或取消按钮
+        handleDelete(row) {
+            // 点击取消时
+            if (row.isEdit) {
+                this.getReverseShellList();
+            } else {
+                // 点击删除时
+                this.$confirm('Are you sure to delete reverse shell?', 'warning', {
+                    confirmButtonText: 'Sure',
+                    cancelButtonText: 'Cancel',
+                    type: 'warning'
+                })
+                    .then(() => {
+                        //   deleteShell(row.name).then(res => {
+                        //     if (res.code === 200) {
+                        //       this.msgSuccess('Delete reverse shell successfully')
+                        //       this.getReverseShellList()
+                        //     }
+                        //   })
+                    })
+                    .catch(() => {});
             }
-          } 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数据
-              this.imgUrl3 = "data:image/png;base64," + msg.pic;
-              console.log("imageUrl", imageUrl);
-            } catch {
-              let imageType = "arraybuffer";
-              const blob = new Blob([message], { type: imageType });
-              const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
-              console.log("imageUrl", imageUrl);
+        },
+        // mqtt订阅（独立）
+        getDataByMqtt(url, topic, cIdNum) {
+            //     var that = this
+            const clientId = 'test_id_' + String(new Date().getTime()); // 用户名
+            //   const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
+            var ip = window.location.host.split(':')[0];
+            console.log('ip', ip);
+            let host = `ws://${ip}:10087`;
+            if (process.env.NODE_ENV === 'development') {
+              host = 'ws://172.16.1.168:10087/';
             }
-          } 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数据
-              this.imgUrl4 = "data:image/png;base64," + msg.pic;
-              console.log("imageUrl", imageUrl);
-            } catch {
-              let imageType = "arraybuffer";
-              const blob = new Blob([message], { type: imageType });
-              const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
-              console.log("imageUrl", imageUrl);
+            // const host = "ws://172.16.1.168:10087/";
+            const options = {
+                // 配置
+                // 测试：订阅本机IP
+                // host: host,
+                // port: port,
+                // host:"ç",
+                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.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('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.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的错误提示数据
+                    } 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数据
+                            this.imgUrl1 = 'data:image/png;base64,' + msg.pic;
+                            console.log('imageUrl', imageUrl);
+                        } 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数据
+                            this.imgUrl2 = 'data:image/png;base64,' + msg.pic;
+                            console.log('imageUrl', imageUrl);
+                        } 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数据
+                            this.imgUrl3 = 'data:image/png;base64,' + msg.pic;
+                            console.log('imageUrl', imageUrl);
+                        } 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数据
+                            this.imgUrl4 = 'data:image/png;base64,' + msg.pic;
+                            console.log('imageUrl', imageUrl);
+                        } 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数据
+                            this.imgUrl5 = 'data:image/png;base64,' + msg.pic;
+                            console.log('imageUrl', imageUrl);
+                        } 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) {
+                    } else if (topic.indexOf('stream0') != -1) {
+                    } else if (topic.indexOf('stream1') != -1) {
+                        console.log(
+                            `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
+                            new Date(),
+                            new Date().getMilliseconds()
+                        );
+                    } else if (topic.indexOf('stream2') != -1) {
+                        console.log(
+                            `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
+                            new Date(),
+                            new Date().getMilliseconds()
+                        );
+                    } else if (topic.indexOf('stream3') != -1) {
+                        console.log(
+                            `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
+                            new Date(),
+                            new Date().getMilliseconds()
+                        );
+                    } else if (topic.indexOf('stream4') != -1) {
+                        console.log(
+                            `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
+                            new Date(),
+                            new Date().getMilliseconds()
+                        );
+                    } else if (topic.indexOf('stream5') != -1) {
+                        console.log(
+                            `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
+                            new Date(),
+                            new Date().getMilliseconds()
+                        );
+                    }
+                });
             }
-          } 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数据
-              this.imgUrl5 = "data:image/png;base64," + msg.pic;
-              console.log("imageUrl", imageUrl);
-            } 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) {
-          } else if (topic.indexOf("stream0") != -1) {
-          } else if (topic.indexOf("stream1") != -1) {
-            console.log(
-              `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
-              new Date(),
-              new Date().getMilliseconds()
-            );
-          } else if (topic.indexOf("stream2") != -1) {
-            console.log(
-              `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
-              new Date(),
-              new Date().getMilliseconds()
-            );
-          } else if (topic.indexOf("stream3") != -1) {
-            console.log(
-              `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
-              new Date(),
-              new Date().getMilliseconds()
-            );
-          } else if (topic.indexOf("stream4") != -1) {
-            console.log(
-              `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
-              new Date(),
-              new Date().getMilliseconds()
-            );
-          } else if (topic.indexOf("stream5") != -1) {
-            console.log(
-              `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
-              new Date(),
-              new Date().getMilliseconds()
-            );
-          }
-        });
-      }
-    },
-    /** 实时数据分类 */
-    // realInfo(topic, message) {
-    //     switch (topic) {
-    //         // 接收托片
-    //         case 'img' + this.number:
-    //             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)
-    //                 // document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
+        }
+        /** 实时数据分类 */
+        // realInfo(topic, message) {
+        //     switch (topic) {
+        //         // 接收托片
+        //         case 'img' + this.number:
+        //             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)
+        //                 // document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
 
-    //                 if (msg.rate == 'high') {
-    //                     document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
-    //                 } else {
-    //                     this.analysisConfigurationdata = msg;
-    //                 }
-    //             } catch (error) { }
-    //             break;
-    //         // 树结构
-    //         case 'stream' + this.number:
-    //             try {
-    //                 const utf8decoder1 = new TextDecoder();
-    //                 const u8arr = new Uint8Array(message);
-    //                 const temp = utf8decoder1.decode(u8arr); // 将二进制数据转为字符串
-    //                 const msg = JSON.parse(temp);
-    //                 //   console.log("msg",msg)
-    //                 document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
-    //             } catch (error) { }
-    //             break;
+        //                 if (msg.rate == 'high') {
+        //                     document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
+        //                 } else {
+        //                     this.analysisConfigurationdata = msg;
+        //                 }
+        //             } catch (error) { }
+        //             break;
+        //         // 树结构
+        //         case 'stream' + this.number:
+        //             try {
+        //                 const utf8decoder1 = new TextDecoder();
+        //                 const u8arr = new Uint8Array(message);
+        //                 const temp = utf8decoder1.decode(u8arr); // 将二进制数据转为字符串
+        //                 const msg = JSON.parse(temp);
+        //                 //   console.log("msg",msg)
+        //                 document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
+        //             } catch (error) { }
+        //             break;
 
-    //     }
-    //     this.receiveNews = '';
-    // },
-  },
+        //     }
+        //     this.receiveNews = '';
+        // },
+    }
 };
 </script>
 
@@ -1676,63 +1472,63 @@ export default {
 //     font-size: 16px;
 // }
 .otherThings {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  /deep/ .el-form-item__content {
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
-  }
+    /deep/ .el-form-item__content {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+    }
 }
 .analysis {
-  .board-title {
-    font-size: 17px;
-    font-weight: bolder;
-    width: max-content;
-  }
+    .board-title {
+        font-size: 17px;
+        font-weight: bolder;
+        width: max-content;
+    }
 }
 .analysis .warning {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  margin-bottom: 15px;
-  cursor: pointer;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    margin-bottom: 15px;
+    cursor: pointer;
 }
 .dataBoard {
-  display: flex;
-  justify-content: space-between;
+    display: flex;
+    justify-content: space-between;
 }
 .top .section {
-  //   width: 80%;
-  //   border: 1px solid gray;
-  box-sizing: border-box;
-  padding: 0 15px;
-  margin-bottom: 15px;
+    //   width: 80%;
+    //   border: 1px solid gray;
+    box-sizing: border-box;
+    padding: 0 15px;
+    margin-bottom: 15px;
 }
 .dataBoard .region,
 .dataBoard .section {
-  width: 80%;
-  //   border: 1px solid gray;
-  // border: 1px solid #e4e7ed;
-  box-sizing: border-box;
-  padding: 0 15px;
-  margin-bottom: 15px;
+    width: 80%;
+    //   border: 1px solid gray;
+    // border: 1px solid #e4e7ed;
+    box-sizing: border-box;
+    padding: 0 15px;
+    margin-bottom: 15px;
 }
 
 .container {
-  width: 100%;
-  height: 100%;
-  overflow-y: scroll;
-  &::-webkit-scrollbar {
-    width: 0;
-  }
-  p {
-    width: 95%;
-    font-size: 25px;
-    text-align: left;
-    border-bottom: 1px solid black;
-    margin-bottom: 20px;
-  }
+    width: 100%;
+    height: 100%;
+    overflow-y: scroll;
+    &::-webkit-scrollbar {
+        width: 0;
+    }
+    p {
+        width: 95%;
+        font-size: 25px;
+        text-align: left;
+        border-bottom: 1px solid black;
+        margin-bottom: 20px;
+    }
 }
 </style>
diff --git a/src/views/bounced/analysisPreview.vue b/src/views/bounced/analysisPreview.vue
index e8585ea..75a6463 100644
--- a/src/views/bounced/analysisPreview.vue
+++ b/src/views/bounced/analysisPreview.vue
@@ -1,313 +1,309 @@
 <template>
-  <div >
-    <div >
-         <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 src="./VideoWeb/index.html" style="height: 100%; width: 100%;border: none" 
+    <div>
+        <div>
+            <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 src="./VideoWeb/index.html" style="height: 100%; width: 100%;border: none" 
           ref="iframe"></iframe> -->
-                </div>
-      <el-dialog title="提示" :visible.sync="showUpdateCertificate" width="30%">
-        <el-row>
-          <el-col :span="6">
-            文件选择：
-          </el-col>
-          <el-col :span="18">
-            <el-upload action="https://jsonplaceholder.typicode.com/posts/">
-              <el-button size="small" type="primary">点击上传</el-button>
-            </el-upload>
-          </el-col>
-        </el-row>
+            </div>
+            <el-dialog title="提示" :visible.sync="showUpdateCertificate" width="30%">
+                <el-row>
+                    <el-col :span="6"> 文件选择： </el-col>
+                    <el-col :span="18">
+                        <el-upload action="https://jsonplaceholder.typicode.com/posts/">
+                            <el-button size="small" type="primary">点击上传</el-button>
+                        </el-upload>
+                    </el-col>
+                </el-row>
 
-        <span slot="footer" class="dialog-footer">
-          <el-button type="primary" @click="showUpdateCertificate = false">确 定</el-button>
-        </span>
-      </el-dialog>
+                <span slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="showUpdateCertificate = false">确 定</el-button>
+                </span>
+            </el-dialog>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-import mqtt from "mqtt"; // mqtt协议
+import mqtt from 'mqtt'; // mqtt协议
 
 export default {
-  data() {
-    return {
-      form: {
-        name1: '离线',
-        name2: '重新配置',
-        state: '关',
-        endTime: '连接',
-        blacklist: '-1x-1',
-        autograph: '-1x-1',
-        version: '0',
-        version1: '0',
-        version2: '0',
-        version4: '',
-         version5: '不受支持的',
-        version6: '不受支持的',
-        version7: '不受支持的',
-        version8: '不受支持的',
-      },
-      showUpdateCertificate: false,
-    }
-  },
-  created() {
-    this.testMqtt()
-
-  },
-   methods: {
-    // 测试：mqtt测试
-    testMqtt() {
-      this.getDataByMqtt()
+    data() {
+        return {
+            form: {
+                name1: '离线',
+                name2: '重新配置',
+                state: '关',
+                endTime: '连接',
+                blacklist: '-1x-1',
+                autograph: '-1x-1',
+                version: '0',
+                version1: '0',
+                version2: '0',
+                version4: '',
+                version5: '不受支持的',
+                version6: '不受支持的',
+                version7: '不受支持的',
+                version8: '不受支持的'
+            },
+            showUpdateCertificate: false
+        };
     },
-        // mqtt订阅（独立）
-    getDataByMqtt(url, topic, cIdNum) {
-       
-      const clientId = "test_id_" + String(new Date().getTime()); // 用户名
-      //   const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
-      var ip = window.location.host.split(":")[0];
-        console.log("ip",ip)
-      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, // 保留标志
+    created() {
+        this.testMqtt();
+    },
+    methods: {
+        // 测试：mqtt测试
+        testMqtt() {
+            this.getDataByMqtt();
         },
-      };
-      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)
+        // mqtt订阅（独立）
+        getDataByMqtt(url, topic, cIdNum) {
+            const clientId = 'test_id_' + String(new Date().getTime()); // 用户名
+            //   const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
+            var ip = window.location.host.split(':')[0];
+            console.log('ip', ip);
+            let host = `ws://${ip}:10087`;
+            if (process.env.NODE_ENV === 'development') {
+                host = 'ws://172.16.1.168:10087/';
             }
-          } 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))
-          }
+            // 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 // 保留标志
+                }
+            };
+            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>
\ No newline at end of file
diff --git a/src/views/bounced/dataBoard.vue b/src/views/bounced/dataBoard.vue
index 85a7d7c..dd4d2e9 100644
--- a/src/views/bounced/dataBoard.vue
+++ b/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) {
diff --git a/src/views/bounced/form.vue b/src/views/bounced/form.vue
index 34f71f0..b7f2097 100644
--- a/src/views/bounced/form.vue
+++ b/src/views/bounced/form.vue
@@ -1,34 +1,32 @@
 <template>
-   <div class="content-box">
-     
-  <div class="container">
-    <!-- <nav>
+    <div class="content-box">
+        <div class="container">
+            <!-- <nav>
       <router-link :to="a.url" :key="index" v-for="(a,index) in Data">{{a.title}}</router-link>
        <el-button type="primary" @click="dialogFormVisible = true">断面组件</el-button>
     </nav> -->
-    <el-tabs type="border-card">
-  <el-tab-pane label="xx路口">
-     <div style="width:60%;height:100%;display:inline-block;border:1px soild #eee;padding:15px">
-    <img :src='imgUrl' width="100%" height="100%"/>
-  </div> 
-  <div style="width:20%;height:100%;display:inline-block;border:1px soild #eee;padding:15px">
-    <el-button type="primary" @click="dialogFormVisible = true">断面组件</el-button>
-    <el-button type="primary" @click="areaComponent = true">区域组件</el-button>
-    <el-button type="primary" @click="indexModule = true">指标组件</el-button>
-  </div> 
-  <div style="width:20%;height:100%;display:inline-block;border:1px soild #eee;padding:15px">
-  </div> 
-  </el-tab-pane>
-  <el-tab-pane label="数据看板">数据看板</el-tab-pane>
-  <el-tab-pane label="分析配置">
-     <analysisConfiguration ></analysisConfiguration> 
-  </el-tab-pane>
-  <el-tab-pane label="分析状态">
-   <editModal ></editModal> 
-  </el-tab-pane>
-   <el-tab-pane label="存储">存储</el-tab-pane>
-    </el-tabs>
-    <!-- <div style="width:30%;height:300px;display:inline-block">
+            <el-tabs type="border-card">
+                <el-tab-pane label="xx路口">
+                    <div style="width: 60%; height: 100%; display: inline-block; border: 1px soild #eee; padding: 15px">
+                        <img :src="imgUrl" width="100%" height="100%" />
+                    </div>
+                    <div style="width: 20%; height: 100%; display: inline-block; border: 1px soild #eee; padding: 15px">
+                        <el-button type="primary" @click="dialogFormVisible = true">断面组件</el-button>
+                        <el-button type="primary" @click="areaComponent = true">区域组件</el-button>
+                        <el-button type="primary" @click="indexModule = true">指标组件</el-button>
+                    </div>
+                    <div style="width: 20%; height: 100%; display: inline-block; border: 1px soild #eee; padding: 15px"></div>
+                </el-tab-pane>
+                <el-tab-pane label="数据看板">数据看板</el-tab-pane>
+                <el-tab-pane label="分析配置">
+                    <analysisConfiguration></analysisConfiguration>
+                </el-tab-pane>
+                <el-tab-pane label="分析状态">
+                    <editModal></editModal>
+                </el-tab-pane>
+                <el-tab-pane label="存储">存储</el-tab-pane>
+            </el-tabs>
+            <!-- <div style="width:30%;height:300px;display:inline-block">
     <img :src='imgUrl' width="100%" height="100%"/>
   </div>  
   <div style="width:30%;height:300px;display:inline-block">
@@ -46,667 +44,662 @@
   <div style="width:30%;height:300px;display:inline-block">
     <img :src='imgUrl5' width="100%" height="100%"/>
   </div>  -->
- 
-  </div>
-  <div id="dialog" class="margin-top: 0px !important;">
-      <el-dialog
-    title="断面组件配置"
-    width="40%"
-    :visible.sync="dialogFormVisible"
-  >
-  <el-form ref="form" :model="form" label-width="80px">
-     <el-form-item label="实时性">
-    <el-radio-group v-model="form.resource">
-      <el-radio label="实时（触发）"></el-radio>
-      <el-radio label="间隔"></el-radio>
-    </el-radio-group>
-  </el-form-item>
-  <!-- <el-form-item label="活动名称">
+        </div>
+        <div id="dialog" class="margin-top: 0px !important;">
+            <el-dialog title="断面组件配置" width="40%" :visible.sync="dialogFormVisible">
+                <el-form ref="form" :model="form" label-width="80px">
+                    <el-form-item label="实时性">
+                        <el-radio-group v-model="form.resource">
+                            <el-radio label="实时（触发）"></el-radio>
+                            <el-radio label="间隔"></el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <!-- <el-form-item label="活动名称">
     <el-input v-model="form.name"></el-input>
   </el-form-item> -->
-   <el-form-item label="时间">
-    <el-col :span="11">
-      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
-    </el-col>
-    <el-col class="line" :span="2">-</el-col>
-    <el-col :span="11">
-      <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
-    </el-col>
-  </el-form-item>
-  <el-form-item label="类型">
-    <el-select v-model="form.region" placeholder="请选择类型">
-      <el-option label="小汽车" value="car"></el-option>
-      <el-option label="公交车" value="bus"></el-option>
-       <el-option label="卡车" value="kache"></el-option>
-        <el-option label="非机动车" value="feji"></el-option>
-         <el-option label="行人" value="xingren"></el-option>
+                    <el-form-item label="时间">
+                        <el-col :span="11">
+                            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%"></el-date-picker>
+                        </el-col>
+                        <el-col class="line" :span="2">-</el-col>
+                        <el-col :span="11">
+                            <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%"></el-time-picker>
+                        </el-col>
+                    </el-form-item>
+                    <el-form-item label="类型">
+                        <el-select v-model="form.region" placeholder="请选择类型">
+                            <el-option label="小汽车" value="car"></el-option>
+                            <el-option label="公交车" value="bus"></el-option>
+                            <el-option label="卡车" value="kache"></el-option>
+                            <el-option label="非机动车" value="feji"></el-option>
+                            <el-option label="行人" value="xingren"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="车牌">
+                        <el-input v-model="form.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="车道">
+                        <el-input v-model="form.name"></el-input>
+                    </el-form-item>
 
-    </el-select>
-  </el-form-item>
- <el-form-item label="车牌">
-    <el-input v-model="form.name"></el-input>
-  </el-form-item>
-  <el-form-item label="车道">
-    <el-input v-model="form.name"></el-input>
-  </el-form-item>
- 
-  <el-form-item label="事件">
-    <el-input type="textarea" v-model="form.desc"></el-input>
-  </el-form-item>
-  <el-form-item label="速度" v-if="form.resource=='实时（触发）'">
-    <el-input v-model="form.name"></el-input>
-  </el-form-item>
-  <el-form-item label="车头时距"  v-if="form.resource=='实时（触发）'">
-    <el-input v-model="form.name"></el-input>
-  </el-form-item>
-  <el-form-item label="平均速度"  v-if="form.resource=='间隔'">
-    <el-input v-model="form.name"></el-input>
-  </el-form-item>
-  <el-form-item label="平均流量" v-if="form.resource=='间隔'">
-    <el-input v-model="form.name"></el-input>
-  </el-form-item>
-  <el-form-item>
-    <el-button type="primary" @click="onSubmit">立即创建</el-button>
-    <el-button @click="dialogFormVisible = false">取消</el-button>
-  </el-form-item>
-</el-form>
-  </el-dialog>
-  <el-dialog
-    title="区域组件配置"
-    width="40%"
-    :visible.sync="areaComponent"
-  >
-  <el-form ref="form" :model="areaComponentform" label-width="80px">
-     <el-form-item label="实时性">
-    <el-radio-group v-model="areaComponentform.resource">
-    <el-radio label="实时（触发）"></el-radio>
-      <el-radio label="实时（秒级）"></el-radio>
-      <el-radio label="间隔"></el-radio>
-    </el-radio-group>
-  </el-form-item>
-  <!-- <el-form-item label="活动名称">
+                    <el-form-item label="事件">
+                        <el-input type="textarea" v-model="form.desc"></el-input>
+                    </el-form-item>
+                    <el-form-item label="速度" v-if="form.resource == '实时（触发）'">
+                        <el-input v-model="form.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="车头时距" v-if="form.resource == '实时（触发）'">
+                        <el-input v-model="form.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="平均速度" v-if="form.resource == '间隔'">
+                        <el-input v-model="form.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="平均流量" v-if="form.resource == '间隔'">
+                        <el-input v-model="form.name"></el-input>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" @click="onSubmit">立即创建</el-button>
+                        <el-button @click="dialogFormVisible = false">取消</el-button>
+                    </el-form-item>
+                </el-form>
+            </el-dialog>
+            <el-dialog title="区域组件配置" width="40%" :visible.sync="areaComponent">
+                <el-form ref="form" :model="areaComponentform" label-width="80px">
+                    <el-form-item label="实时性">
+                        <el-radio-group v-model="areaComponentform.resource">
+                            <el-radio label="实时（触发）"></el-radio>
+                            <el-radio label="实时（秒级）"></el-radio>
+                            <el-radio label="间隔"></el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <!-- <el-form-item label="活动名称">
     <el-input v-model="form.name"></el-input>
   </el-form-item> -->
-   <el-form-item label="时间">
-    <el-col :span="11">
-      <el-date-picker type="date" placeholder="选择日期" v-model="areaComponentform.date1" style="width: 100%;"></el-date-picker>
-    </el-col>
-    <el-col class="line" :span="2">-</el-col>
-    <el-col :span="11">
-      <el-time-picker placeholder="选择时间" v-model="areaComponentform.date2" style="width: 100%;"></el-time-picker>
-    </el-col>
-  </el-form-item>
-  <el-form-item label="类型">
-    <el-select v-model="areaComponentform.region" placeholder="请选择类型">
-      <el-option label="小汽车" value="car"></el-option>
-      <el-option label="公交车" value="bus"></el-option>
-       <el-option label="卡车" value="kache"></el-option>
-        <el-option label="非机动车" value="feji"></el-option>
-         <el-option label="行人" value="xingren"></el-option>
+                    <el-form-item label="时间">
+                        <el-col :span="11">
+                            <el-date-picker
+                                type="date"
+                                placeholder="选择日期"
+                                v-model="areaComponentform.date1"
+                                style="width: 100%"
+                            ></el-date-picker>
+                        </el-col>
+                        <el-col class="line" :span="2">-</el-col>
+                        <el-col :span="11">
+                            <el-time-picker placeholder="选择时间" v-model="areaComponentform.date2" style="width: 100%"></el-time-picker>
+                        </el-col>
+                    </el-form-item>
+                    <el-form-item label="类型">
+                        <el-select v-model="areaComponentform.region" placeholder="请选择类型">
+                            <el-option label="小汽车" value="car"></el-option>
+                            <el-option label="公交车" value="bus"></el-option>
+                            <el-option label="卡车" value="kache"></el-option>
+                            <el-option label="非机动车" value="feji"></el-option>
+                            <el-option label="行人" value="xingren"></el-option>
+                        </el-select>
+                    </el-form-item>
 
-    </el-select>
-  </el-form-item>
-  
- <el-form-item label="车牌" v-if="areaComponentform.resource=='实时（触发）'">
-    <el-input v-model="areaComponentform.name"></el-input>
-  </el-form-item>
-  <el-form-item label="车道" v-if="areaComponentform.resource=='实时（触发）'||areaComponentform.resource=='实时（秒级）'">
-    <el-input v-model="areaComponentform.name"></el-input>
-  </el-form-item>
- 
-  <el-form-item label="事件" v-if="areaComponentform.resource=='实时（触发）'">
-    <el-input type="textarea" v-model="areaComponentform.desc"></el-input>
-  </el-form-item>
-  <el-form-item label="速度" v-if="areaComponentform.resource=='实时（触发）'">
-    <el-input v-model="areaComponentform.name"></el-input>
-  </el-form-item>
-  <el-form-item label="车头时距"  v-if="areaComponentform.resource=='实时（触发）'">
-    <el-input v-model="areaComponentform.name"></el-input>
-  </el-form-item>
-  <!--间隔-->
-   <el-form-item label="进入流量"  v-if="areaComponentform.resource=='间隔'">
-    <el-input v-model="areaComponentform.name"></el-input>
-  </el-form-item>
-   <el-form-item label="驶离流量"  v-if="areaComponentform.resource=='间隔'">
-    <el-input v-model="areaComponentform.name"></el-input>
-  </el-form-item>
-   <el-form-item label="平均速度"  v-if="areaComponentform.resource=='间隔'">
-    <el-input v-model="areaComponentform.name"></el-input>
-  </el-form-item>
-   <el-form-item label="平均占有率"  v-if="areaComponentform.resource=='间隔'">
-    <el-input v-model="areaComponentform.name"></el-input>
-  </el-form-item>
-  <el-form-item label="平均排队数"  v-if="areaComponentform.resource=='间隔'">
-    <el-input v-model="areaComponentform.name"></el-input>
-  </el-form-item>
-  <el-form-item label="平均检测数" v-if="areaComponentform.resource=='间隔'">
-    <el-input v-model="areaComponentform.name"></el-input>
-  </el-form-item>
-   <el-form-item label="平均延误" v-if="areaComponentform.resource=='间隔'">
-    <el-input v-model="areaComponentform.name"></el-input>
-  </el-form-item>
-   <el-form-item label="拥堵状态" v-if="areaComponentform.resource=='间隔'">
-    <el-input v-model="areaComponentform.name"></el-input>
-  </el-form-item>
-  <!-- 实时（秒级） -->
-  <el-form-item label="排队数" v-if="areaComponentform.resource=='实时（秒级）'">
-    <el-input v-model="areaComponentform.name"></el-input>
-  </el-form-item>
-  <el-form-item label="检测数" v-if="areaComponentform.resource=='实时（秒级）'">
-    <el-input v-model="areaComponentform.name"></el-input>
-  </el-form-item>
-  <el-form-item label="占用状态" v-if="areaComponentform.resource=='实时（秒级）'">
-    <el-input v-model="areaComponentform.name"></el-input>
-  </el-form-item>
-  <el-form-item label="拥堵状态" v-if="areaComponentform.resource=='实时（秒级）'">
-    <el-input v-model="areaComponentform.name"></el-input>
-  </el-form-item>
-  <el-form-item>
-    <el-button type="primary" @click="onSubmit">立即创建</el-button>
-    <el-button @click="dialogFormVisible = false">取消</el-button>
-  </el-form-item>
-</el-form>
-  </el-dialog>
-  </div>
-</div>
+                    <el-form-item label="车牌" v-if="areaComponentform.resource == '实时（触发）'">
+                        <el-input v-model="areaComponentform.name"></el-input>
+                    </el-form-item>
+                    <el-form-item
+                        label="车道"
+                        v-if="areaComponentform.resource == '实时（触发）' || areaComponentform.resource == '实时（秒级）'"
+                    >
+                        <el-input v-model="areaComponentform.name"></el-input>
+                    </el-form-item>
+
+                    <el-form-item label="事件" v-if="areaComponentform.resource == '实时（触发）'">
+                        <el-input type="textarea" v-model="areaComponentform.desc"></el-input>
+                    </el-form-item>
+                    <el-form-item label="速度" v-if="areaComponentform.resource == '实时（触发）'">
+                        <el-input v-model="areaComponentform.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="车头时距" v-if="areaComponentform.resource == '实时（触发）'">
+                        <el-input v-model="areaComponentform.name"></el-input>
+                    </el-form-item>
+                    <!--间隔-->
+                    <el-form-item label="进入流量" v-if="areaComponentform.resource == '间隔'">
+                        <el-input v-model="areaComponentform.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="驶离流量" v-if="areaComponentform.resource == '间隔'">
+                        <el-input v-model="areaComponentform.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="平均速度" v-if="areaComponentform.resource == '间隔'">
+                        <el-input v-model="areaComponentform.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="平均占有率" v-if="areaComponentform.resource == '间隔'">
+                        <el-input v-model="areaComponentform.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="平均排队数" v-if="areaComponentform.resource == '间隔'">
+                        <el-input v-model="areaComponentform.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="平均检测数" v-if="areaComponentform.resource == '间隔'">
+                        <el-input v-model="areaComponentform.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="平均延误" v-if="areaComponentform.resource == '间隔'">
+                        <el-input v-model="areaComponentform.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="拥堵状态" v-if="areaComponentform.resource == '间隔'">
+                        <el-input v-model="areaComponentform.name"></el-input>
+                    </el-form-item>
+                    <!-- 实时（秒级） -->
+                    <el-form-item label="排队数" v-if="areaComponentform.resource == '实时（秒级）'">
+                        <el-input v-model="areaComponentform.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="检测数" v-if="areaComponentform.resource == '实时（秒级）'">
+                        <el-input v-model="areaComponentform.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="占用状态" v-if="areaComponentform.resource == '实时（秒级）'">
+                        <el-input v-model="areaComponentform.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="拥堵状态" v-if="areaComponentform.resource == '实时（秒级）'">
+                        <el-input v-model="areaComponentform.name"></el-input>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" @click="onSubmit">立即创建</el-button>
+                        <el-button @click="dialogFormVisible = false">取消</el-button>
+                    </el-form-item>
+                </el-form>
+            </el-dialog>
+        </div>
+    </div>
 </template>
 
 <script>
+import mqtt from 'mqtt'; // mqtt协议
+import editModal from '@/views/bounced/maintenanceRemind';
+import analysisConfiguration from '@/views/bounced/analysisConfiguration';
 
-import mqtt from "mqtt"; // mqtt协议
-import editModal from "@/views/bounced/maintenanceRemind";
-import analysisConfiguration from "@/views/bounced/analysisConfiguration";
-
-import axios from 'axios'
+import axios from 'axios';
 export default {
-  data() {
-    return {
-      hideBoxShow:true, //隐藏箱子按钮显示隐藏
-      closeStatus: null,
-      modelOthers: false,
-      componentShow: "",
-      isShowBtn: true, //菜单按钮隐藏
-      isShowBtn1: false, //菜单按钮显示
-      inputVal: "",
-      dialogFormVisible: false,
-      areaComponent:false,
-      indexModule:false,
-      form: {
-          name: '',
-          region: '',
-          date1: '',
-          date2: '',
-          delivery: false,
-          type: [],
-          resource: '实时（触发）',
-          desc: ''
+    data() {
+        return {
+            hideBoxShow: true, //隐藏箱子按钮显示隐藏
+            closeStatus: null,
+            modelOthers: false,
+            componentShow: '',
+            isShowBtn: true, //菜单按钮隐藏
+            isShowBtn1: false, //菜单按钮显示
+            inputVal: '',
+            dialogFormVisible: false,
+            areaComponent: false,
+            indexModule: false,
+            form: {
+                name: '',
+                region: '',
+                date1: '',
+                date2: '',
+                delivery: false,
+                type: [],
+                resource: '实时（触发）',
+                desc: ''
+            },
+            areaComponentform: {
+                name: '',
+                region: '',
+                date1: '',
+                date2: '',
+                delivery: false,
+                type: [],
+                resource: '实时（触发）',
+                desc: ''
+            },
+            //   dateTime: this.$moment(new Date()).format("LL"),
+            nowTime: '',
+            //   weekday: this.$moment().format("dddd"),
+            ins: 0,
+            imgUrl: '',
+            imgUrl1: '',
+            imgUrl2: '',
+            imgUrl3: '',
+            imgUrl4: '',
+            imgUrl5: '',
+            btnPic: [],
+            Data: [
+                {
+                    title: 'xx路口',
+                    url: ''
+                },
+                {
+                    title: '数据看板',
+                    url: ''
+                },
+                {
+                    title: '分析配置',
+                    url: ''
+                },
+                {
+                    title: '分析配置',
+                    url: ''
+                }
+            ],
+            statusInfo: [
+                {
+                    count: 15,
+                    name: '穿梭车在线数量',
+                    //   icon: require("../assets/images/运行设备图标.png"),
+                    color: '#01A8FC'
+                },
+                {
+                    count: 26,
+                    name: '任务数量',
+                    //   icon: require("../assets/images/故障设备图标.png"),
+                    color: '#FDA401'
+                }
+            ],
+            messageInfo: [],
+            orderList: [],
+            enterList: [],
+            stockInfo: [],
+            perCent: 0,
+            perCent1: 0,
+            perCent2: 0,
+            facToal: '',
+            wbContent: '',
+            //   wxContent:'',
+            inContent: '',
+            outContent: '',
+            containerDetails: '',
+            locdesc: '',
+            weatherItem: {},
+            loadingShow1: true,
+            carInfo: [], //小车信息
+            carName: '',
+            palletizerInfo: [], //码垛机信息
+            palletizerName: '',
+            destackerInfo: [], //拆垛机信息
+            destackerName: '',
+            hoistInfo: [], //提升机信息’
+            hoistName: '',
+            battaryStationInfo: [], //快换电池装置
+            battaryStationName: '',
+            conveyorInfo: [], //输送机信息
+            conveyorName: ''
+        };
+    },
+    mounted() {
+        // this.getMessage();
+        // 消息提醒
+        // getfacKeepRecord({ type: 0 }).then((res) => {
+        //   this.messageInfo = this.messageInfo.concat(res.data);
+        //   console.log(this.messageInfo, ",,qweqw");
+        //   // this.messageInfo.push(res.data[1])
+        // });
+        // this.getDataByMqtt()
+        // this.getstatus();
+        // this.getInhouse();
+        // this.getOuthouse();
+        // this.handleWather();
+        // this.getDeviceStatusData()
+    },
+    created() {
+        this.testMqtt();
+    },
+    methods: {
+        // 测试：mqtt测试
+        testMqtt() {
+            this.getDataByMqtt();
+            // 小车订阅
+            //   for (let key in this.carId) {
+            //     this.getDataByMqtt(
+            //       // "ws:ht.mqtt.umayle.com:2022/mqtt",
+            //       "ws:220.163.114.157:8083/mqtt",
+            //       "Car" + key,
+            //       this.carId[key]
+            //     );
+            //   }
+            //   //输送机入库订阅
+            //   for (let i = 0; i < this.convoyorCIdGroup.length; i++) {
+            //     this.getDataByMqtt(
+            //       "ws:220.163.114.157:8083/mqtt",
+            //       "InConvoyor" + this.convoyorCIdGroup[i],
+            //       this.convoyorCIdGroup[i]
+            //     );
+            //   }
+
+            //   //输送机出库订阅
+            //   for (let i = 0; i < this.outConvoyorCIdGroup.length; i++) {
+            //     this.getDataByMqtt(
+            //       "ws:220.163.114.157:8083/mqtt",
+            //       "OUTConvoyor" + this.outConvoyorCIdGroup[i],
+            //       this.outConvoyorCIdGroup[i]
+            //     );
+            //   }
+
+            //   for (let key in this.BattaryArr) {
+            //     this.getDataByMqtt(
+            //       "ws:220.163.114.157:8083/mqtt",
+            //       "Battary_Sation" + key,
+            //       this.BattaryArr[key]
+            //     );
+            //   }
+            //   // 升降机订阅elvArr
+            //   for (let key in this.elvArr) {
+            //     this.getDataByMqtt(
+            //       "ws:220.163.114.157:8083/mqtt",
+            //       "ELV" + key,
+            //       this.elvArr[key]
+            //     );
+            //   }
+            //   // 拆码跺机订阅
+            //   for (let key in this.stampArr) {
+            //     this.getDataByMqtt(
+            //       "ws:220.163.114.157:8083/mqtt",
+            //       "INCMD" + key,
+            //       this.stampArr[key]
+            //     );
+            //   }
         },
-        areaComponentform: {
-          name: '',
-          region: '',
-          date1: '',
-          date2: '',
-          delivery: false,
-          type: [],
-          resource: '实时（触发）',
-          desc: ''
+        onSubmit() {},
+        //模型加载等待
+        loadingShow(data) {
+            this.loadingShow1 = data;
         },
-    //   dateTime: this.$moment(new Date()).format("LL"),
-      nowTime: "",
-    //   weekday: this.$moment().format("dddd"),
-      ins: 0,
-      imgUrl:'',
-      imgUrl1:'',
-      imgUrl2:'',
-      imgUrl3:'',
-      imgUrl4:'',
-      imgUrl5:'',
-      btnPic: [],
-      Data:[
-        {
-         title:'xx路口',
-        url:''  
+        // mqtt订阅（独立）
+        getDataByMqtt(url, topic, cIdNum) {
+            const clientId = 'test_id_' + String(new Date().getTime()); // 用户名
+            //   const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
+            let host = `ws://${ip}:10087`;
+            if (process.env.NODE_ENV === 'development') {
+                host = 'ws://172.16.1.168: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 // 保留标志
+                }
+            };
+            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.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('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.on('message', (topic, message, packet) => {
+                    console.log('[MQTT-TEST] 已连接的客户端ID: ', message);
+
+                    console.log(
+                        `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
+                        new Date(),
+                        new Date().getMilliseconds()
+                    );
+                    // 解析后端数据
+                    //   let dataReceived = JSON.parse(message.toString());
+                    //     console.log("[MQTT-TEST] 已连接的客户端ID: ",dataReceived);
+                    //      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数据
+                    //         this.imgUrl='data:image/png;base64,' + msg.pic;
+                    //         console.log("imageUrl",imageUrl)
+                    //     }catch{
+                    //         let imageType = 'arraybuffer';
+                    //         const blob = new Blob([message], { type: imageType })
+                    //         const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
+                    //         console.log("imageUrl",imageUrl)
+                    //     }
+                    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的错误提示数据
+                            console.log('msg', msg); //msg为转换后的JSON数据
+                            this.imgUrl = 'data:image/png;base64,' + msg.pic;
+                            console.log('imageUrl', imageUrl);
+                        } 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数据
+                            this.imgUrl1 = 'data:image/png;base64,' + msg.pic;
+                            console.log('imageUrl', imageUrl);
+                        } 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数据
+                            this.imgUrl2 = 'data:image/png;base64,' + msg.pic;
+                            console.log('imageUrl', imageUrl);
+                        } 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数据
+                            this.imgUrl3 = 'data:image/png;base64,' + msg.pic;
+                            console.log('imageUrl', imageUrl);
+                        } 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数据
+                            this.imgUrl4 = 'data:image/png;base64,' + msg.pic;
+                            console.log('imageUrl', imageUrl);
+                        } 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数据
+                            this.imgUrl5 = 'data:image/png;base64,' + msg.pic;
+                            console.log('imageUrl', imageUrl);
+                        } 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) {
+                        console.log(
+                            `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
+                            new Date(),
+                            new Date().getMilliseconds()
+                        );
+                    } else if (topic.indexOf('stream0') != -1) {
+                        console.log(
+                            `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
+                            new Date(),
+                            new Date().getMilliseconds()
+                        );
+                    } else if (topic.indexOf('stream1') != -1) {
+                        console.log(
+                            `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
+                            new Date(),
+                            new Date().getMilliseconds()
+                        );
+                    } else if (topic.indexOf('stream2') != -1) {
+                        console.log(
+                            `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
+                            new Date(),
+                            new Date().getMilliseconds()
+                        );
+                    } else if (topic.indexOf('stream3') != -1) {
+                        console.log(
+                            `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
+                            new Date(),
+                            new Date().getMilliseconds()
+                        );
+                    } else if (topic.indexOf('stream4') != -1) {
+                        console.log(
+                            `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
+                            new Date(),
+                            new Date().getMilliseconds()
+                        );
+                    } else if (topic.indexOf('stream5') != -1) {
+                        console.log(
+                            `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
+                            new Date(),
+                            new Date().getMilliseconds()
+                        );
+                    }
+                });
+            }
         },
-        {
-         title:'数据看板',
-        url:''  
+
+        handleSearch() {
+            this.modelOthers = true;
+            this.$refs.htModels.finbBox(this.inputVal);
+            console.log(this.$refs.htModels, 'asdasdasd');
+            this.inputVal = '';
         },
-        {
-         title:'分析配置',
-        url:''  
+        handleRow(val) {
+            this.modelOthers = true;
+            this.$refs.htModels.finbBox(val);
         },
-        {
-         title:'分析配置',
-        url:''  
+        // 天气
+        handleWather() {
+            axios({
+                url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=bc2b906032fdd8a63cbd0790d656b1d7&city=620100',
+                methods: ''
+            }).then((res) => {
+                this.weatherItem = res.data.lives[0];
+                console.log(this.weatherItem, 'asdsads');
+            });
+        },
+        Onweather(name) {
+            //   switch (name) {
+            // 				case "多云":
+            // 					return require('../assets/weather/Cloudy .png');
+            // 				case "阴":
+            // 					return require('../assets/weather/Cloudy .png')
+            // 				case "暴雨":
+            // 					return require('../assets/weather/rainstorm.png')
+            // 				case "冰雹":
+            // 					return require('../assets/weather/hail.png')
+            // 				case "大风":
+            // 					return require('../assets/weather/gale.png')
+            // 				case "大雪":
+            // 					return require('../assets/weather/bigsnow.png')
+            // 				case "大雨":
+            // 					return require('../assets/weather/bigrain.png')
+            // 				case "雷电":
+            // 					return require('../assets/weather/thunder.png')
+            // 				case "雷阵雨":
+            // 					return require('../assets/weather/shower.png')
+            // 				case "沙尘暴":
+            // 					return require('../assets/weather/sand.png')
+            // 				case "晴":
+            // 					return require('../assets/weather/sun.png')
+            // 				case "雾霾":
+            // 					return require('../assets/weather/smog.png')
+            // 				case "小雪":
+            // 					return require('../assets/weather/snow.png')
+            // 				case "小雨":
+            // 					return require('../assets/weather/rain.png')
+            // 				case "雪":
+            // 					return require('../assets/weather/rainlitter.png')
+            // 				case "多云":
+            // 					return require('../assets/weather/night.png')
+            // 				case "雨夹雪":
+            // 					return require('../assets/weather/rainsnow.png')
+            // 				case "月亮":
+            // 					return require('../assets/weather/moon.png')
+            // 				case "中雪":
+            // 					return require('../assets/weather/mieddlesnow.png')
+            // 				case "中雨":
+            // 					return require('../assets/weather/middlerain.png')
+            // 			}
+        },
+        //隐藏箱子
+        hideBox() {
+            this.$refs.htModels.handleFirstBox();
         }
-      ],
-      statusInfo: [
-        {
-          count: 15,
-          name: "穿梭车在线数量",
-        //   icon: require("../assets/images/运行设备图标.png"),
-          color: "#01A8FC",
-        },
-        {
-          count: 26,
-          name: "任务数量",
-        //   icon: require("../assets/images/故障设备图标.png"),
-          color: "#FDA401",
-        },
-      ],
-      messageInfo: [],
-      orderList: [],
-      enterList: [],
-      stockInfo: [],
-      perCent: 0,
-      perCent1: 0,
-      perCent2: 0,
-      facToal: "",
-      wbContent:'',
-    //   wxContent:'',
-      inContent:'',
-      outContent:'',
-      containerDetails:"",
-      locdesc:'',
-      weatherItem:{},
-      loadingShow1:true,
-      carInfo:[], //小车信息
-      carName:'',
-      palletizerInfo:[], //码垛机信息
-      palletizerName:'',
-      destackerInfo:[], //拆垛机信息
-      destackerName:'',
-      hoistInfo:[], //提升机信息’
-      hoistName:'', 
-      battaryStationInfo:[],//快换电池装置
-      battaryStationName:"",
-      conveyorInfo:[], //输送机信息
-      conveyorName:"", 
-    };
-  },
-  mounted() {
-
-    // this.getMessage();
-    // 消息提醒
-
-    // getfacKeepRecord({ type: 0 }).then((res) => {
-    //   this.messageInfo = this.messageInfo.concat(res.data);
-    //   console.log(this.messageInfo, ",,qweqw");
-    //   // this.messageInfo.push(res.data[1]) 
-    // });
-    // this.getDataByMqtt()
-    // this.getstatus();
-    // this.getInhouse();
-    // this.getOuthouse();
-    // this.handleWather();
-    // this.getDeviceStatusData()
-  },
-   created() {
-    this.testMqtt()
-    
-  },
-  methods: {
-     // 测试：mqtt测试
-    testMqtt() {
-         this.getDataByMqtt()
-      // 小车订阅
-    //   for (let key in this.carId) {
-    //     this.getDataByMqtt(
-    //       // "ws:ht.mqtt.umayle.com:2022/mqtt",
-    //       "ws:220.163.114.157:8083/mqtt",
-    //       "Car" + key,
-    //       this.carId[key]
-    //     );
-    //   }
-    //   //输送机入库订阅
-    //   for (let i = 0; i < this.convoyorCIdGroup.length; i++) {
-    //     this.getDataByMqtt(
-    //       "ws:220.163.114.157:8083/mqtt",
-    //       "InConvoyor" + this.convoyorCIdGroup[i],
-    //       this.convoyorCIdGroup[i]
-    //     );
-    //   }
-
-    //   //输送机出库订阅
-    //   for (let i = 0; i < this.outConvoyorCIdGroup.length; i++) {
-    //     this.getDataByMqtt(
-    //       "ws:220.163.114.157:8083/mqtt",
-    //       "OUTConvoyor" + this.outConvoyorCIdGroup[i],
-    //       this.outConvoyorCIdGroup[i]
-    //     );
-    //   }
-
-    //   for (let key in this.BattaryArr) {
-    //     this.getDataByMqtt(
-    //       "ws:220.163.114.157:8083/mqtt",
-    //       "Battary_Sation" + key,
-    //       this.BattaryArr[key]
-    //     );
-    //   }
-    //   // 升降机订阅elvArr
-    //   for (let key in this.elvArr) {
-    //     this.getDataByMqtt(
-    //       "ws:220.163.114.157:8083/mqtt",
-    //       "ELV" + key,
-    //       this.elvArr[key]
-    //     );
-    //   }
-    //   // 拆码跺机订阅
-    //   for (let key in this.stampArr) {
-    //     this.getDataByMqtt(
-    //       "ws:220.163.114.157:8083/mqtt",
-    //       "INCMD" + key,
-    //       this.stampArr[key]
-    //     );
-    //   }
     },
-    onSubmit(){},
-    //模型加载等待
-    loadingShow(data){
-      this.loadingShow1 = data
-    },
-     // mqtt订阅（独立）
-    getDataByMqtt(url, topic, cIdNum) {
-      const clientId = "test_id_" + String(new Date().getTime()); // 用户名
-    //   const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
-      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, // 保留标志
-        },
-      };
-      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.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('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.on("message", (topic, message, packet) => {
-          console.log("[MQTT-TEST] 已连接的客户端ID: ",message);
-    
-          console.log(
-            `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
-            new Date(),
-            new Date().getMilliseconds()
-          );
-          // 解析后端数据
-        //   let dataReceived = JSON.parse(message.toString());
-        //     console.log("[MQTT-TEST] 已连接的客户端ID: ",dataReceived);
-        //      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数据
-        //         this.imgUrl='data:image/png;base64,' + msg.pic;
-        //         console.log("imageUrl",imageUrl)
-        //     }catch{
-        //         let imageType = 'arraybuffer';
-        //         const blob = new Blob([message], { type: imageType })
-        //         const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
-        //         console.log("imageUrl",imageUrl)
-        //     }
-          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的错误提示数据
-                console.log("msg",msg)   //msg为转换后的JSON数据
-                this.imgUrl='data:image/png;base64,' + msg.pic;
-                console.log("imageUrl",imageUrl)
-            }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数据
-                this.imgUrl1='data:image/png;base64,' + msg.pic;
-                console.log("imageUrl",imageUrl)
-            }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数据
-                this.imgUrl2='data:image/png;base64,' + msg.pic;
-                console.log("imageUrl",imageUrl)
-            }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数据
-                this.imgUrl3='data:image/png;base64,' + msg.pic;
-                console.log("imageUrl",imageUrl)
-            }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数据
-                this.imgUrl4='data:image/png;base64,' + msg.pic;
-                console.log("imageUrl",imageUrl)
-            }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数据
-                this.imgUrl5='data:image/png;base64,' + msg.pic;
-                console.log("imageUrl",imageUrl)
-            }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) {
-            console.log(
-            `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
-            new Date(),
-            new Date().getMilliseconds()
-          );
-          }else if (topic.indexOf("stream0") != -1) {
-            console.log(
-            `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
-            new Date(),
-            new Date().getMilliseconds()
-          );
-          }else if (topic.indexOf("stream1") != -1) {
-            console.log(
-            `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
-            new Date(),
-            new Date().getMilliseconds()
-          );
-          }else if (topic.indexOf("stream2") != -1) {
-            console.log(
-            `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
-            new Date(),
-            new Date().getMilliseconds()
-          );
-          }else if (topic.indexOf("stream3") != -1) {
-            console.log(
-            `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
-            new Date(),
-            new Date().getMilliseconds()
-          );
-          }else if (topic.indexOf("stream4") != -1) {
-            console.log(
-            `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
-            new Date(),
-            new Date().getMilliseconds()
-          );
-          }else if (topic.indexOf("stream5") != -1) {
-            console.log(
-            `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
-            new Date(),
-            new Date().getMilliseconds()
-          );
-          }
-         
-        });
-      }
-    
-     
-    },
-
-    handleSearch(){
-      this.modelOthers = true;
-      this.$refs.htModels.finbBox(this.inputVal);
-      console.log(this.$refs.htModels,'asdasdasd');
-       this.inputVal = ''
-    },
-   handleRow(val){
-      this.modelOthers = true;
-      this.$refs.htModels.finbBox(val);
-    },
-    // 天气
-    handleWather(){
-      axios({url:'https://restapi.amap.com/v3/weather/weatherInfo?key=bc2b906032fdd8a63cbd0790d656b1d7&city=620100',methods:''}).then(res=>{
-        this.weatherItem = res.data.lives[0]
-        console.log(this.weatherItem,'asdsads');
-      })
-    },
-    Onweather(name){
-    //   switch (name) {
-	// 				case "多云":
-	// 					return require('../assets/weather/Cloudy .png');
-	// 				case "阴":
-	// 					return require('../assets/weather/Cloudy .png')
-	// 				case "暴雨":
-	// 					return require('../assets/weather/rainstorm.png')
-	// 				case "冰雹":
-	// 					return require('../assets/weather/hail.png')
-	// 				case "大风":
-	// 					return require('../assets/weather/gale.png')
-	// 				case "大雪":
-	// 					return require('../assets/weather/bigsnow.png')
-	// 				case "大雨":
-	// 					return require('../assets/weather/bigrain.png')
-	// 				case "雷电":
-	// 					return require('../assets/weather/thunder.png')
-	// 				case "雷阵雨":
-	// 					return require('../assets/weather/shower.png')
-	// 				case "沙尘暴":
-	// 					return require('../assets/weather/sand.png')
-	// 				case "晴":
-	// 					return require('../assets/weather/sun.png')
-	// 				case "雾霾":
-	// 					return require('../assets/weather/smog.png')
-	// 				case "小雪":
-	// 					return require('../assets/weather/snow.png')
-	// 				case "小雨":
-	// 					return require('../assets/weather/rain.png')
-	// 				case "雪":
-	// 					return require('../assets/weather/rainlitter.png')
-	// 				case "多云":
-	// 					return require('../assets/weather/night.png')
-	// 				case "雨夹雪":
-	// 					return require('../assets/weather/rainsnow.png')
-	// 				case "月亮":
-	// 					return require('../assets/weather/moon.png')
-	// 				case "中雪":
-	// 					return require('../assets/weather/mieddlesnow.png')
-	// 				case "中雨":
-	// 					return require('../assets/weather/middlerain.png')
-	// 			}
-    },
-    //隐藏箱子
-    hideBox(){
-        this.$refs.htModels.handleFirstBox();
+    components: {
+        editModal,
+        analysisConfiguration
     }
-  },
-  components: {
-   editModal,
-   analysisConfiguration
-  },
 };
 </script>
 <style scoped>
-  .el-form .el-form-item{
+.el-form .el-form-item {
     margin-bottom: 15px !important;
-  }
+}
 </style>
diff --git a/src/views/general/AboutMachine.vue b/src/views/general/AboutMachine.vue
index 1d696c5..213a2a2 100644
--- a/src/views/general/AboutMachine.vue
+++ b/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: '确定',
diff --git a/src/views/index.vue b/src/views/index.vue
index 78be50a..ec2378f 100644
--- a/src/views/index.vue
+++ b/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="construction vehicle">施工车辆</el-checkbox>
+                                <el-checkbox label="special 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="construction vehicle">施工车辆</el-checkbox>
+                            <el-checkbox label="special 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触发') {
-                        //         console.log('实时触发trigger-', item);
+                        //     if (item.component_name == '车头时距_4') {
+                        //         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 == '离线视频') {
diff --git a/src/views/sensorFusion/index copy.vue b/src/views/sensorFusion/index copy.vue
new file mode 100644
index 0000000..00694aa
--- /dev/null
+++ b/src/views/sensorFusion/index copy.vue	
@@ -0,0 +1,4364 @@
+<template>
+    <div class="content-box">
+        <el-collapse v-model="activeNames">
+            <el-collapse-item title="监控列表" name="1">
+                <el-row>
+                    <el-col :span="6" v-for="(item, index) in videoList" :key="index" :offset="0" style="margin-top: 1%">
+                        <el-card :body-style="{ padding: '0px' }" class="cardList">
+                            <div class="type">
+                                <img src="@/assets/img/AnalysisMain/leftTop.png" />
+                            </div>
+                            <div class="name">
+                                <img src="@/assets/img/AnalysisMain/ssVideo.png" />
+                            </div>
+                            <div class="statusN">
+                                <img src="@/assets/img/AnalysisMain/status.png" />
+                            </div>
+                            <span class="statusName">{{ item.status }}</span>
+                            <!-- <img :src="item.videoUrl"
+                   class="videoContent"> -->
+                            <iframe
+                                :src="'/flv/index.html?src=' + item.videoStreamAddress"
+                                frameborder="0"
+                                scrolling="no"
+                                class="videoContent"
+                            ></iframe>
+                            <div style="padding-left: 8%; box-sizing: border-box">
+                                <div class="footImg">
+                                    <img src="@/assets/img/AnalysisMain/video (1).png" style="width: 20px; height: 20px" />
+                                    <span style="margin-left: 5%">{{ item.videoName }}</span>
+                                </div>
+                            </div>
+                        </el-card>
+                    </el-col>
+                </el-row>
+            </el-collapse-item>
+        </el-collapse>
+        <el-button icon="el-icon-setting" circle type="text" class="buttonType" @click="handleDialog"></el-button>
+        <el-tabs type="border-card" class="tabsList" @tab-click="tabChange">
+            <el-tab-pane :label="x.name" v-for="(x, y) in intersectionList" :key="y">
+                <el-collapse v-model="intersectionName" v-for="(z, w) in x.children" :key="w" @change="handleCollapseChange">
+                    <el-collapse-item :title="z.name" :name="z.name" class="collapseList">
+                        <div :class="'cardChatPentar' + p" v-for="(o, p) in z.children" :key="p">
+                            <div v-if="o.name == '卡片区'" class="cardArea">
+                                <div class="intersectionCard" v-for="(item, index) in o.children" :key="index">
+                                    <span class="intersectionCardTitle">{{ item.name }}</span>
+                                    <el-card class="boxList" v-for="(i, key) in item.children" :key="key">
+                                        <div slot="header" class="clearfix">
+                                            <span
+                                                style="font-size: 14px; color: rgb(160, 160, 160)"
+                                                class="containerTitle"
+                                                :class="'hovered' + i.duocgqrhpzId"
+                                                @mouseover="showTooltip(i.duocgqrhpzId)"
+                                                @mouseout="hideTooltip(i.duocgqrhpzId)"
+                                                >{{ i.videoName }}-{{ i.combinationName }}-{{ i.componentName }}</span
+                                            >
+                                            <span
+                                                :class="'tooltip' + i.duocgqrhpzId"
+                                                v-show="hovered"
+                                                style="color: rgb(160, 160, 160)"
+                                                @mouseover="showTooltip(i.duocgqrhpzId)"
+                                                @mouseout="hideTooltip(i.duocgqrhpzId)"
+                                                >{{ i.videoName }}-{{ i.combinationName }}-{{ i.componentName }}</span
+                                            >
+                                            <span
+                                                style="font-size: 12px"
+                                                class="containerTitle1"
+                                                @mouseover="showCardtip(i.duocgqrhpzId)"
+                                                @mouseout="hideCardtip(i.duocgqrhpzId)"
+                                                :class="'cardTitle' + i.duocgqrhpzId"
+                                                >{{ i.componentType }}-{{ i.timeMode }}</span
+                                            >
+                                            <span
+                                                style="font-size: 12px"
+                                                v-show="cardTitle"
+                                                @mouseover="showCardtip(i.duocgqrhpzId)"
+                                                @mouseout="hideCardtip(i.duocgqrhpzId)"
+                                                :class="'cardTitle1' + i.duocgqrhpzId"
+                                                >{{ i.componentType }}-{{ i.timeMode }}</span
+                                            >
+                                        </div>
+                                        <div v-if="i.timeMode == '实时触发'">
+                                            <el-empty :image-size="20" description="暂无数据" v-if="i.triggerData == null"></el-empty>
+                                            <div class="cardContent" v-else-if="i.triggerData != null">
+                                                <div class="count">
+                                                    <span
+                                                        style="color: rgb(71, 161, 255); font-size: 23px"
+                                                        v-if="i.componentType == '速度'"
+                                                    >
+                                                        <span
+                                                            v-if="
+                                                                (i.triggerData.speed && i.triggerData.speed != -1) ||
+                                                                i.triggerData.speed === 0
+                                                            "
+                                                        >
+                                                            {{ Math.abs(i.triggerData.speed) }}
+                                                        </span>
+                                                        <span v-else>-</span>
+                                                    </span>
+                                                    <span
+                                                        style="color: rgb(71, 161, 255); font-size: 23px"
+                                                        v-if="i.componentType == '车头时距'"
+                                                        >{{
+                                                            i.triggerData.headway || i.triggerData.headway === 0
+                                                                ? i.triggerData.headway == -1
+                                                                    ? '-'
+                                                                    : i.triggerData.headway
+                                                                : '-'
+                                                        }}</span
+                                                    >
+                                                    <span
+                                                        style="color: rgb(71, 161, 255); font-size: 23px"
+                                                        v-if="i.componentType == '流量'"
+                                                    >
+                                                        <span v-if="i.flowType == '入流'">{{
+                                                            i.triggerData.inFlow || i.triggerData.inFlow === 0 ? i.triggerData.inFlow : '-'
+                                                        }}</span>
+                                                        <span v-if="i.flowType == '出流'">{{
+                                                            i.triggerData.outFlow || i.triggerData.outFlow === 0
+                                                                ? i.triggerData.outFlow
+                                                                : '-'
+                                                        }}</span>
+                                                    </span>
+                                                    <span
+                                                        style="color: rgb(71, 161, 255); font-size: 23px"
+                                                        v-if="i.componentType == '类型'"
+                                                    >
+                                                        <!-- <span v-if="Number(i.triggerData.type_data[0].quantity)">{{
+                                                            i.triggerData.type_data[0].quantity
+                                                        }}</span> -->
+                                                        <!-- <span v-else>0</span> -->
+                                                        <span v-if="i.triggerData && i.triggerData.type_data">{{
+                                                            getTotal(i.triggerData.type_data, 'quantity', 'value')
+                                                        }}</span>
+                                                        <span v-else>-</span>
+                                                    </span>
+
+                                                    <span
+                                                        style="color: rgb(71, 161, 255); font-size: 23px"
+                                                        v-if="i.componentType == '检测数'"
+                                                        >{{
+                                                            i.triggerData.n_stay || i.triggerData.n_stay === 0 ? i.triggerData.n_stay : '-'
+                                                        }}</span
+                                                    >
+                                                    <span
+                                                        style="color: rgb(71, 161, 255); font-size: 23px"
+                                                        v-if="i.componentType == '排队数'"
+                                                        >{{
+                                                            i.triggerData.n_queue || i.triggerData.n_queue === 0
+                                                                ? i.triggerData.n_queue
+                                                                : '-'
+                                                        }}</span
+                                                    >
+                                                    <span style="font-size: 14px" v-if="i.componentType == '车头时距'">秒</span>
+                                                    <span style="font-size: 13px" v-if="i.componentType == '速度'">
+                                                        <span
+                                                            v-if="
+                                                                (i.triggerData.speed && i.triggerData.speed != -1) ||
+                                                                i.triggerData.speed === 0
+                                                            "
+                                                        >
+                                                            {{ i.triggerData.speed > 0 || i.triggerData.speed === 0 ? 'km/h' : 'pix/s' }}
+                                                        </span>
+                                                    </span>
+                                                    <span style="font-size: 14px" v-if="i.componentType == '类型'">个</span>
+                                                    <span style="font-size: 14px" v-if="i.componentType == '流量'">辆</span>
+                                                    <span
+                                                        style="font-size: 14px"
+                                                        v-if="i.componentType == '检测数' || i.componentType == '排队数'"
+                                                        >辆</span
+                                                    >
+                                                </div>
+                                                <div class="time">
+                                                    <el-empty
+                                                        :image-size="20"
+                                                        description="暂无数据"
+                                                        v-if="i.triggerData == null"
+                                                    ></el-empty>
+                                                    <span style="text-align: center" v-else>{{ i.triggerData.time }}</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div v-if="i.timeMode == '固定时刻'">
+                                            <el-empty
+                                                :image-size="20"
+                                                description="暂无数据"
+                                                v-if="i.cycleTimeData.length == 0 || i.cycleTimeData.length == null"
+                                            ></el-empty>
+                                            <div class="cardContent" v-else>
+                                                <div class="count">
+                                                    <span
+                                                        style="color: rgb(71, 161, 255); font-size: 23px"
+                                                        v-if="i.componentType == '速度' && i.triggerData == null"
+                                                    >
+                                                        <span
+                                                            v-if="
+                                                                (i.cycleTimeData[0].speed && i.cycleTimeData[0].speed != -1) ||
+                                                                i.cycleTimeData[0].speed === 0
+                                                            "
+                                                        >
+                                                            {{ Math.abs(i.cycleTimeData[0].speed) }}
+                                                        </span>
+                                                        <span v-else>-</span>
+                                                    </span>
+                                                    <span
+                                                        style="color: rgb(71, 161, 255); font-size: 23px"
+                                                        v-if="i.componentType == '速度' && i.triggerData != null"
+                                                    >
+                                                        <span
+                                                            v-if="
+                                                                (i.triggerData.speed && i.triggerData.speed != -1) ||
+                                                                i.triggerData.speed === 0
+                                                            "
+                                                        >
+                                                            {{ Math.abs(i.triggerData.speed) }}
+                                                        </span>
+                                                        <span v-else>-</span>
+                                                    </span>
+                                                    <span
+                                                        style="color: rgb(71, 161, 255); font-size: 23px"
+                                                        v-if="i.componentType == '车头时距' && i.triggerData == null"
+                                                        >{{
+                                                            i.cycleTimeData[0].headway || i.cycleTimeData[0].headway === 0
+                                                                ? i.cycleTimeData[0].headway == -1
+                                                                    ? '-'
+                                                                    : i.cycleTimeData[0].headway
+                                                                : '-'
+                                                        }}</span
+                                                    >
+                                                    <span
+                                                        style="color: rgb(71, 161, 255); font-size: 23px"
+                                                        v-else-if="i.componentType == '车头时距' && i.triggerData != null"
+                                                        >{{
+                                                            i.triggerData.headway || i.triggerData.headway === 0
+                                                                ? i.triggerData.headway == -1
+                                                                    ? '-'
+                                                                    : i.triggerData.headway
+                                                                : '-'
+                                                        }}</span
+                                                    >
+                                                    <span
+                                                        style="color: rgb(71, 161, 255); font-size: 23px"
+                                                        v-if="i.componentType == '流量'"
+                                                    >
+                                                        <span v-if="i.flowType == '入流'">{{
+                                                            i.cycleTimeData[0].in_flow || i.cycleTimeData[0].in_flow === 0
+                                                                ? i.cycleTimeData[0].in_flow
+                                                                : '-'
+                                                        }}</span>
+                                                        <span v-if="i.flowType == '出流'">{{
+                                                            i.cycleTimeData[0].out_flow || i.cycleTimeData[0].out_flow === 0
+                                                                ? i.cycleTimeData[0].out_flow
+                                                                : '-'
+                                                        }}</span>
+                                                    </span>
+                                                    <span
+                                                        style="color: rgb(71, 161, 255); font-size: 23px"
+                                                        v-if="i.componentType == '类型'"
+                                                    >
+                                                        <span
+                                                            v-if="
+                                                                !i.triggerData &&
+                                                                i.cycleTimeData &&
+                                                                i.cycleTimeData.length > 0 &&
+                                                                i.cycleTimeData[0].type_data
+                                                            "
+                                                        >
+                                                            <!-- {{
+                                                            i.cycleTimeData[0].type_data[0].quantity +
+                                                            i.cycleTimeData[0].type_data[1].quantity +
+                                                            i.cycleTimeData[0].type_data[2].quantity
+                                                        }} -->
+                                                            {{ getTotal(i.cycleTimeData[0].type_data, 'quantity', 'value') }}
+                                                        </span>
+                                                        <span v-else-if="i.triggerData && i.triggerData.type_data">
+                                                            {{ getTotal(i.triggerData.type_data, 'quantity', 'value') }}
+                                                            <!-- <span
+                                                            v-if="
+                                                                !Number.isNaN(
+                                                                    Number(
+                                                                        i.triggerData.type_data[0].quantity +
+                                                                            i.triggerData.type_data[1].quantity +
+                                                                            i.triggerData.type_data[2].quantity
+                                                                    )
+                                                                )
+                                                            "
+                                                            >{{
+                                                                i.triggerData.type_data[0].quantity +
+                                                                i.triggerData.type_data[1].quantity +
+                                                                i.triggerData.type_data[2].quantity
+                                                            }}</span
+                                                        >
+                                                        <span v-else>0</span> -->
+                                                        </span>
+                                                        <span v-else>-</span>
+                                                    </span>
+                                                    <span
+                                                        style="color: rgb(71, 161, 255); font-size: 23px"
+                                                        v-if="i.componentType == '检测数'"
+                                                        >{{
+                                                            i.cycleTimeData[0].n_stay || i.cycleTimeData[0].n_stay === 0
+                                                                ? i.cycleTimeData[0].n_stay
+                                                                : '-'
+                                                        }}</span
+                                                    >
+                                                    <span
+                                                        style="color: rgb(71, 161, 255); font-size: 23px"
+                                                        v-if="i.componentType == '排队数'"
+                                                        >{{
+                                                            i.cycleTimeData[0].n_queue || i.cycleTimeData[0].n_queue === 0
+                                                                ? i.cycleTimeData[0].n_queue
+                                                                : '-'
+                                                        }}</span
+                                                    >
+                                                    <span style="font-size: 14px" v-if="i.componentType == '车头时距'">秒</span>
+                                                    <span style="font-size: 13px" v-if="i.componentType == '速度'">
+                                                        <span v-if="i.triggerData == null">
+                                                            <span
+                                                                v-if="
+                                                                    (i.cycleTimeData[0].speed && i.cycleTimeData[0].speed != -1) ||
+                                                                    i.cycleTimeData[0].speed === 0
+                                                                "
+                                                            >
+                                                                {{
+                                                                    i.cycleTimeData[0].speed > 0 || i.cycleTimeData[0].speed === 0
+                                                                        ? 'km/h'
+                                                                        : 'pix/s'
+                                                                }}
+                                                            </span>
+                                                        </span>
+                                                        <span v-else>
+                                                            <span
+                                                                v-if="
+                                                                    (i.triggerData.speed && i.triggerData.speed != -1) ||
+                                                                    i.triggerData.speed === 0
+                                                                "
+                                                            >
+                                                                {{
+                                                                    i.triggerData.speed > 0 || i.triggerData.speed === 0 ? 'km/h' : 'pix/s'
+                                                                }}
+                                                            </span>
+                                                        </span>
+                                                    </span>
+                                                    <span style="font-size: 14px" v-if="i.componentType == '类型'">个</span>
+                                                    <span style="font-size: 14px" v-if="i.componentType == '流量'">辆</span>
+                                                    <span
+                                                        style="font-size: 14px"
+                                                        v-if="i.componentType == '检测数' || i.componentType == '排队数'"
+                                                        >辆</span
+                                                    >
+                                                </div>
+                                                <div class="time">
+                                                    <span style="text-align: center" v-if="i.triggerData == null">{{
+                                                        i.cycleTimeData[0].time
+                                                    }}</span>
+                                                    <span style="text-align: center" v-else>{{ i.triggerData.time }}</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div v-if="i.timeMode == '固定间隔'">
+                                            <div class="cardContent" v-if="i.cycleStatisticsData && i.cycleStatisticsData.length > 0">
+                                                <div class="count">
+                                                    <span
+                                                        style="color: rgb(71, 161, 255); font-size: 23px"
+                                                        v-if="i.componentType == '速度' && i.triggerData == null"
+                                                    >
+                                                        <span
+                                                            v-if="
+                                                                (i.cycleStatisticsData[0].speed && i.cycleStatisticsData[0].speed != -1) ||
+                                                                i.cycleStatisticsData[0].speed === 0
+                                                            "
+                                                        >
+                                                            {{
+                                                                i.cycleStatisticsData[0].speed > 0 || i.cycleStatisticsData[0].speed === 0
+                                                                    ? i.cycleStatisticsData[0].speed
+                                                                    : Math.abs(i.cycleStatisticsData[0].speed)
+                                                            }}
+                                                        </span>
+                                                        <span v-else>-</span>
+                                                    </span>
+                                                    <span
+                                                        style="color: rgb(71, 161, 255); font-size: 23px"
+                                                        v-else-if="i.componentType == '速度' && i.triggerData != null"
+                                                    >
+                                                        <span
+                                                            v-if="
+                                                                (i.triggerData.speed && i.triggerData.speed != -1) ||
+                                                                i.triggerData.speed === 0
+                                                            "
+                                                        >
+                                                            {{ Math.abs(i.triggerData.speed) }}
+                                                        </span>
+                                                        <span v-else>-</span>
+                                                    </span>
+                                                    <span
+                                                        style="color: rgb(71, 161, 255); font-size: 23px"
+                                                        v-if="i.componentType == '车头时距' && i.triggerData == null"
+                                                        >{{
+                                                            i.cycleStatisticsData[0].ave_headway ||
+                                                            i.cycleStatisticsData[0].ave_headway === 0
+                                                                ? i.cycleStatisticsData[0].ave_headway == -1
+                                                                    ? '-'
+                                                                    : i.cycleStatisticsData[0].ave_headway
+                                                                : '-'
+                                                        }}</span
+                                                    >
+                                                    <span
+                                                        style="color: rgb(71, 161, 255); font-size: 23px"
+                                                        v-else-if="i.componentType == '车头时距' && i.triggerData != null"
+                                                        >{{
+                                                            i.triggerData.ave_headway || i.triggerData.ave_headway === 0
+                                                                ? i.triggerData.ave_headway == -1
+                                                                    ? '-'
+                                                                    : i.triggerData.ave_headway
+                                                                : '-'
+                                                        }}</span
+                                                    >
+                                                    <span
+                                                        style="color: rgb(71, 161, 255); font-size: 23px"
+                                                        v-if="i.componentType == '流量' && i.triggerData == null"
+                                                    >
+                                                        <span v-if="i.flowType == '入流'">{{
+                                                            i.cycleStatisticsData[0].in_flow || i.cycleStatisticsData[0].in_flow
+                                                                ? i.cycleStatisticsData[0].in_flow
+                                                                : '-'
+                                                        }}</span>
+                                                        <span v-if="i.flowType == '出流'">{{
+                                                            i.cycleStatisticsData[0].out_flow || i.cycleStatisticsData[0].out_flow
+                                                                ? i.cycleStatisticsData[0].out_flow
+                                                                : '-'
+                                                        }}</span>
+                                                    </span>
+                                                    <span
+                                                        style="color: rgb(71, 161, 255); font-size: 23px"
+                                                        v-else-if="i.componentType == '流量' && i.triggerData != null"
+                                                    >
+                                                        <span v-if="i.flowType == '入流'">{{
+                                                            i.triggerData.inFlow || i.triggerData.inFlow ? i.triggerData.inFlow : '-'
+                                                        }}</span>
+                                                        <span v-if="i.flowType == '出流'">{{
+                                                            i.triggerData.outFlow || i.triggerData.outFlow ? i.triggerData.outFlow : '-'
+                                                        }}</span>
+                                                    </span>
+                                                    <span
+                                                        style="color: rgb(71, 161, 255); font-size: 23px"
+                                                        v-if="i.componentType == '类型'"
+                                                    >
+                                                        <span
+                                                            v-if="
+                                                                !i.triggerData && i.cycleStatisticsData && i.cycleStatisticsData.length > 0
+                                                            "
+                                                        >
+                                                            <!-- {{JSON.stringify(i.cycleStatisticsData)}} -->
+                                                            <!-- {{
+                                                            i.cycleStatisticsData[0].type_data[0].quantity +
+                                                            i.cycleStatisticsData[0].type_data[1].quantity +
+                                                            i.cycleStatisticsData[0].type_data[2].quantity
+                                                        }} -->
+                                                            {{
+                                                                i.cycleStatisticsData[0].type_data &&
+                                                                i.cycleStatisticsData[0].type_data.length > 0
+                                                                    ? getTotal(i.cycleStatisticsData[0].type_data, 'quantity', 'value')
+                                                                    : '-'
+                                                            }}
+                                                        </span>
+                                                        <span v-else-if="i.triggerData && i.triggerData.type_data">
+                                                            <!-- {{i.triggerData[0].quantity + i.triggerData[1].quantity + i.triggerData[2].quantity}} -->
+                                                            <!-- <span
+                                                            v-if="
+                                                                !Number.isNaN(
+                                                                    Number(
+                                                                        i.triggerData.type_data[0].quantity +
+                                                                            i.triggerData.type_data[1].quantity +
+                                                                            i.triggerData.type_data[2].quantity
+                                                                    )
+                                                                )
+                                                            "
+                                                            >{{
+                                                                i.triggerData.type_data[0].quantity +
+                                                                i.triggerData.type_data[1].quantity +
+                                                                i.triggerData.type_data[2].quantity
+                                                            }}</span
+                                                        >
+                                                        <span v-else>0</span> -->
+                                                            {{ getTotal(i.triggerData.type_data, 'quantity', 'value') }}
+                                                        </span>
+                                                        <span v-else>-</span>
+                                                    </span>
+                                                    <span
+                                                        style="color: rgb(71, 161, 255); font-size: 23px"
+                                                        v-if="i.componentType == '检测数' && i.triggerData == null"
+                                                        >{{
+                                                            i.cycleStatisticsData[0].ave_stay || i.cycleStatisticsData[0].ave_stay === 0
+                                                                ? i.cycleStatisticsData[0].ave_stay
+                                                                : '-'
+                                                        }}</span
+                                                    >
+                                                    <span
+                                                        style="color: rgb(71, 161, 255); font-size: 23px"
+                                                        v-else-if="i.componentType == '检测数' && i.triggerData != null"
+                                                        >{{
+                                                            i.triggerData.ave_stay || i.triggerData.ave_stay === 0
+                                                                ? i.triggerData.ave_stay
+                                                                : '-'
+                                                        }}</span
+                                                    >
+                                                    <span
+                                                        style="color: rgb(71, 161, 255); font-size: 23px"
+                                                        v-if="i.componentType == '排队数' && i.triggerData == null"
+                                                        >{{
+                                                            i.cycleStatisticsData[0].ave_queue || i.cycleStatisticsData[0].ave_queue === 0
+                                                                ? i.cycleStatisticsData[0].ave_queue
+                                                                : '-'
+                                                        }}</span
+                                                    >
+                                                    <span
+                                                        style="color: rgb(71, 161, 255); font-size: 23px"
+                                                        v-if="i.componentType == '排队数' && i.triggerData != null"
+                                                        >{{
+                                                            i.triggerData.ave_queue || i.triggerData.ave_queue === 0
+                                                                ? i.triggerData.ave_queue
+                                                                : '-'
+                                                        }}</span
+                                                    >
+                                                    <span
+                                                        style="color: rgb(71, 161, 255); font-size: 23px"
+                                                        v-if="i.componentType == '延误' && i.triggerData == null"
+                                                        >{{
+                                                            i.cycleStatisticsData[0].ave_delay || i.cycleStatisticsData[0].ave_delay === 0
+                                                                ? i.cycleStatisticsData[0].ave_delay
+                                                                : '-'
+                                                        }}</span
+                                                    >
+                                                    <span
+                                                        style="color: rgb(71, 161, 255); font-size: 23px"
+                                                        v-if="i.componentType == '延误' && i.triggerData != null"
+                                                        >{{
+                                                            i.triggerData.ave_delay || i.triggerData.ave_delay === 0
+                                                                ? i.triggerData.ave_delay
+                                                                : '-'
+                                                        }}</span
+                                                    >
+                                                    <span
+                                                        style="font-size: 14px"
+                                                        v-if="i.componentType == '车头时距' || i.componentType == '延误'"
+                                                        >秒</span
+                                                    >
+                                                    <span style="font-size: 13px" v-if="i.componentType == '速度'">
+                                                        <span v-if="i.triggerData == null">
+                                                            <span
+                                                                v-if="
+                                                                    (i.cycleStatisticsData[0].speed &&
+                                                                        i.cycleStatisticsData[0].speed != -1) ||
+                                                                    i.cycleStatisticsData[0].speed === 0
+                                                                "
+                                                            >
+                                                                {{
+                                                                    i.cycleStatisticsData[0].speed > 0 ||
+                                                                    i.cycleStatisticsData[0].speed === 0
+                                                                        ? 'km/h'
+                                                                        : 'pix/s'
+                                                                }}
+                                                            </span>
+                                                        </span>
+                                                        <span v-else>
+                                                            <span
+                                                                v-if="
+                                                                    (i.triggerData.speed && i.triggerData.speed != -1) ||
+                                                                    i.triggerData.speed === 0
+                                                                "
+                                                            >
+                                                                {{
+                                                                    i.triggerData.speed > 0 || i.triggerData.speed === 0 ? 'km/h' : 'pix/s'
+                                                                }}
+                                                            </span>
+                                                        </span>
+                                                    </span>
+                                                    <span style="font-size: 14px" v-if="i.componentType == '类型'">个</span>
+                                                    <span style="font-size: 14px" v-if="i.componentType == '流量'">辆</span>
+                                                    <span
+                                                        style="font-size: 14px"
+                                                        v-if="i.componentType == '检测数' || i.componentType == '排队数'"
+                                                        >辆</span
+                                                    >
+                                                </div>
+                                                <div class="time">
+                                                    <span style="text-align: center" v-if="i.triggerData == null">{{
+                                                        i.cycleStatisticsData[0].time
+                                                    }}</span>
+                                                    <span style="text-align: center" v-else>{{ i.triggerData.time }}</span>
+                                                </div>
+                                            </div>
+                                            <el-empty :image-size="20" description="暂无数据" v-else></el-empty>
+                                        </div>
+                                    </el-card>
+                                </div>
+                            </div>
+                            <div v-if="o.name == '图表区' && o.children.length != 0 && tabChangeIndex == y" class="chantArea">
+                                <div class="chartSection">
+                                    <el-radio-group
+                                        v-model="o.selectOption"
+                                        class="buttonList"
+                                        @change="changeChat(o.children, o.selectOption)"
+                                    >
+                                        <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="'echarts' + b" v-for="(e, b) in o.children" :key="b">
+                                            <div
+                                                style="width: 100%; height: 100%"
+                                                v-show="e.presentationForm == '时间曲线图' && o.selectOption == b + 1"
+                                            >
+                                                <div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box">
+                                                    <span class="titleIcon"></span>
+                                                    {{ e.name }}
+                                                </div>
+                                                <div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
+                                                    <el-empty
+                                                        :image-size="100"
+                                                        description="暂无数据"
+                                                        v-if="e.triggerDataList == null"
+                                                    ></el-empty>
+                                                    <chartsLine
+                                                        :echartsRef="'echartsLine' + e.duocgqrhpzId"
+                                                        :itemData="e"
+                                                        style="width: 100%; height: 100%"
+                                                        :intersectionName="intersectionName"
+                                                        :chatShowType="chatShowType"
+                                                        :componentType="e.componentType"
+                                                        :timeMode="'实时触发'"
+                                                        :flowType="e.flowType"
+                                                        :dataList="e.triggerDataList"
+                                                        ref="chartsLine"
+                                                        v-else-if="e.triggerDataList != null"
+                                                    />
+                                                </div>
+                                                <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
+                                                    <el-empty
+                                                        :image-size="100"
+                                                        description="暂无数据"
+                                                        v-if="e.cycleTimeData.length == 0 || e.cycleTimeData.length == null"
+                                                    ></el-empty>
+                                                    <chartsLine
+                                                        :echartsRef="'echartsLine' + e.duocgqrhpzId"
+                                                        :itemData="e"
+                                                        style="width: 100%; height: 100%"
+                                                        :intersectionName="intersectionName"
+                                                        :chatShowType="chatShowType"
+                                                        :timeMode="'固定时刻'"
+                                                        :componentType="e.componentType"
+                                                        :dataList="e.cycleTimeData"
+                                                        :flowType="e.flowType"
+                                                        v-else
+                                                    />
+                                                </div>
+                                                <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
+                                                    <el-empty
+                                                        :image-size="100"
+                                                        description="暂无数据"
+                                                        v-if="e.cycleStatisticsData == null || e.cycleStatisticsData.length == 0"
+                                                    ></el-empty>
+                                                    <chartsLine
+                                                        :echartsRef="'echartsLine' + e.duocgqrhpzId"
+                                                        style="width: 100%; height: 100%"
+                                                        :itemData="e"
+                                                        :intersectionName="intersectionName"
+                                                        :chatShowType="chatShowType"
+                                                        :timeMode="'固定间隔'"
+                                                        :componentType="e.componentType"
+                                                        :dataList="e.cycleStatisticsData"
+                                                        :flowType="e.flowType"
+                                                        v-else
+                                                    />
+                                                </div>
+                                            </div>
+                                            <div
+                                                style="width: 100%; height: 100%"
+                                                v-show="e.presentationForm == '表格' && o.selectOption == b + 1"
+                                            >
+                                                <div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box">
+                                                    <span class="titleIcon"></span>
+                                                    {{ e.name }}
+                                                </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" />
+                                                    </div>
+                                                    <div style="width: 100%; height: 100%" v-if="e.graphicType == '区域'">
+                                                        <regionTable :tableData="e.triggerNewData" :triggerType="e.timeMode" />
+                                                    </div>
+                                                </div>
+                                                <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
+                                                    <div style="width: 100%; height: 100%" v-if="e.graphicType == '断面'">
+                                                        <tableShow :tableData="e.cycleTimeData" :triggerType="e.timeMode" />
+                                                    </div>
+                                                    <div style="width: 100%; height: 100%" v-if="e.graphicType == '区域'">
+                                                        <regionTable :tableData="e.cycleTimeData" :triggerType="e.timeMode" />
+                                                    </div>
+                                                </div>
+                                                <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
+                                                    <div style="width: 100%; height: 100%" v-if="e.graphicType == '断面'">
+                                                        <tableShow :tableData="e.cycleStatisticsData" :triggerType="e.timeMode" />
+                                                    </div>
+                                                    <div style="width: 100%; height: 100%" v-if="e.graphicType == '区域'">
+                                                        <regionTable :tableData="e.cycleStatisticsData" :triggerType="e.timeMode" />
+                                                    </div>
+                                                </div>
+
+                                                <!-- <div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
+                                                    <el-table :data="e.triggerNewData" style="width: 100%; height: 100%" height="250">
+                                                        <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">
+                                                        </el-table-column>
+                                                        <el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
+                                                        <el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
+                                                        <el-table-column align="center" prop="occ" label="占用状态">
+                                                            <template slot-scope="scope">
+                                                                <span v-if="scope.row.occ == '1'">占用</span>
+                                                            </template>
+                                                        </el-table-column>
+                                                        <el-table-column align="center" prop="speed" label="空间平均速度">
+                                                            <template slot-scope="scope">
+                                                                {{
+                                                                    scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
+                                                                        ? Math.abs(scope.row.speed)
+                                                                        : scope.row.speed == '-1'
+                                                                        ? '-'
+                                                                        : scope.row.speed
+                                                                }}
+                                                            </template>
+                                                        </el-table-column>
+                                                    </el-table>
+                                                </div>
+                                                <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
+                                                    <el-table :data="e.cycleTimeData" style="width: 100%; height: 100%" height="250">
+                                                        <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">
+                                                        </el-table-column>
+                                                        <el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
+                                                        <el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
+                                                        <el-table-column align="center" prop="occ" label="占用状态">
+                                                            <template slot-scope="scope">
+                                                                <span v-if="scope.row.occ == '1'">占用</span>
+                                                            </template>
+                                                        </el-table-column>
+                                                        <el-table-column align="center" prop="speed" label="空间平均速度">
+                                                            <template slot-scope="scope">
+                                                                {{
+                                                                    scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
+                                                                        ? Math.abs(scope.row.speed)
+                                                                        : scope.row.speed == '-1'
+                                                                        ? '-'
+                                                                        : scope.row.speed
+                                                                }}
+                                                            </template>
+                                                        </el-table-column>
+                                                    </el-table>
+                                                </div>
+                                                <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
+                                                    <el-table :data="e.cycleStatisticsData" style="width: 100%; height: 100%" height="250">
+                                                        <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">
+                                                        </el-table-column>
+                                                        <el-table-column align="center" prop="ave_stay" label="存车数"></el-table-column>
+                                                        <el-table-column align="center" prop="ave_queue" label="排队数"></el-table-column>
+                                                        <el-table-column align="center" prop="occ" label="占用状态">
+                                                            <template slot-scope="scope">
+                                                                <span v-if="scope.row.occ == '1'">占用</span>
+                                                            </template>
+                                                        </el-table-column>
+                                                        <el-table-column align="center" prop="speed" label="空间平均速度">
+                                                            <template slot-scope="scope">
+                                                                {{
+                                                                    scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
+                                                                        ? Math.abs(scope.row.speed)
+                                                                        : scope.row.speed == '-1'
+                                                                        ? '-'
+                                                                        : scope.row.speed
+                                                                }}
+                                                            </template>
+                                                        </el-table-column>
+                                                    </el-table>
+                                                </div> -->
+                                            </div>
+                                            <div
+                                                style="width: 100%; height: 100%"
+                                                v-show="e.presentationForm == '饼状图' && o.selectOption == b + 1"
+                                            >
+                                                <div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box">
+                                                    <span class="titleIcon"></span>
+                                                    {{ e.name }}
+                                                </div>
+                                                <div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
+                                                    <el-empty
+                                                        :image-size="100"
+                                                        description="暂无数据"
+                                                        v-if="e.triggerDataList == null"
+                                                    ></el-empty>
+                                                    <chartsPie
+                                                        :echartsRef="'echartsPie' + e.duocgqrhpzId"
+                                                        style="width: 100%; height: 100%"
+                                                        :chatShowType="chatShowType"
+                                                        :dataList="e.triggerDataList"
+                                                        :timeMode="'实时触发'"
+                                                        :intersectionName="intersectionName"
+                                                        v-else-if="e.triggerDataList != null"
+                                                    />
+                                                </div>
+                                                <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
+                                                    <el-empty
+                                                        :image-size="100"
+                                                        description="暂无数据"
+                                                        v-if="e.cycleTimeData.length == 0 || e.cycleTimeData.length == null"
+                                                    ></el-empty>
+                                                    <chartsPie
+                                                        :echartsRef="'echartsPie' + e.duocgqrhpzId"
+                                                        style="width: 100%; height: 100%"
+                                                        :chatShowType="chatShowType"
+                                                        :dataList="e.cycleTimeData"
+                                                        :timeMode="'固定时刻'"
+                                                        :intersectionName="intersectionName"
+                                                        v-else
+                                                    />
+                                                </div>
+                                                <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
+                                                    <el-empty
+                                                        :image-size="100"
+                                                        description="暂无数据"
+                                                        v-if="e.cycleStatisticsData.length == 0 || e.cycleStatisticsData.length == null"
+                                                    ></el-empty>
+                                                    <chartsPie
+                                                        :echartsRef="'echartsPie' + e.duocgqrhpzId"
+                                                        style="width: 100%; height: 100%"
+                                                        :chatShowType="chatShowType"
+                                                        :timeMode="'固定间隔'"
+                                                        :dataList="e.cycleStatisticsData"
+                                                        :intersectionName="intersectionName"
+                                                        v-else
+                                                    />
+                                                </div>
+                                            </div>
+                                            <div
+                                                style="width: 100%; height: 100%"
+                                                v-if="e.presentationForm == '直方图' && o.selectOption == b + 1"
+                                            >
+                                                <div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box">
+                                                    <span class="titleIcon"></span>
+                                                    {{ e.name }}
+                                                </div>
+                                                <div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
+                                                    <el-empty
+                                                        :image-size="100"
+                                                        description="暂无数据"
+                                                        v-if="e.triggerDataList == null"
+                                                    ></el-empty>
+                                                    <chartsBar
+                                                        :echartsRef="'echartsBar' + e.duocgqrhpzId"
+                                                        style="width: 100%; height: 90%"
+                                                        :chatShowType="chatShowType"
+                                                        :timeMode="'实时触发'"
+                                                        :intersectionName="intersectionName"
+                                                        :dataList="e.triggerDataList"
+                                                        v-else-if="e.triggerDataList != null"
+                                                    />
+                                                </div>
+                                                <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
+                                                    <el-empty
+                                                        :image-size="100"
+                                                        description="暂无数据"
+                                                        v-if="e.cycleTimeData.length == 0 || e.cycleTimeData.length == null"
+                                                    ></el-empty>
+                                                    <chartsBar
+                                                        :echartsRef="'echartsBar' + e.duocgqrhpzId"
+                                                        style="width: 100%; height: 100%"
+                                                        :chatShowType="chatShowType"
+                                                        :dataList="e.cycleTimeData"
+                                                        :timeMode="'固定时刻'"
+                                                        :intersectionName="intersectionName"
+                                                        v-else
+                                                    />
+                                                </div>
+                                                <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
+                                                    <el-empty
+                                                        :image-size="100"
+                                                        description="暂无数据"
+                                                        v-if="e.cycleStatisticsData.length == 0 || e.cycleStatisticsData.length == null"
+                                                    ></el-empty>
+                                                    <chartsBar
+                                                        :echartsRef="'echartsBar' + e.duocgqrhpzId"
+                                                        style="width: 100%; height: 100%"
+                                                        :timeMode="'固定间隔'"
+                                                        :chatShowType="chatShowType"
+                                                        :dataList="e.cycleStatisticsData"
+                                                        :intersectionName="intersectionName"
+                                                        v-else
+                                                    />
+                                                </div>
+                                            </div>
+                                            <div
+                                                style="width: 100%; height: 100%"
+                                                v-show="e.presentationForm == '均值图' && o.selectOption == b + 1"
+                                            >
+                                                <div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box">
+                                                    <span class="titleIcon"></span>
+                                                    {{ e.name }}
+                                                </div>
+                                                <div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
+                                                    <el-empty
+                                                        :image-size="100"
+                                                        description="暂无数据"
+                                                        v-if="e.triggerDataList == null"
+                                                    ></el-empty>
+                                                    <meanValue
+                                                        :echartsRef="'meanValue' + e.duocgqrhpzId"
+                                                        style="width: 100%; height: 90%"
+                                                        :chatShowType="chatShowType"
+                                                        :intersectionName="intersectionName"
+                                                        :dataList="e.triggerDataList"
+                                                        v-else-if="e.triggerDataList != null"
+                                                    />
+                                                </div>
+                                                <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
+                                                    <el-empty
+                                                        :image-size="100"
+                                                        description="暂无数据"
+                                                        v-if="e.cycleTimeData.length == 0 || e.cycleTimeData.length == null"
+                                                    ></el-empty>
+                                                    <meanValue
+                                                        :echartsRef="'meanValue' + e.duocgqrhpzId"
+                                                        style="width: 100%; height: 100%"
+                                                        :chatShowType="chatShowType"
+                                                        :dataList="e.cycleTimeData"
+                                                        :intersectionName="intersectionName"
+                                                        v-else
+                                                    />
+                                                </div>
+                                                <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
+                                                    <el-empty
+                                                        :image-size="100"
+                                                        description="暂无数据"
+                                                        v-if="e.cycleStatisticsData.length == 0 || e.cycleStatisticsData.length == null"
+                                                    ></el-empty>
+                                                    <meanValue
+                                                        :echartsRef="'meanValue' + e.duocgqrhpzId"
+                                                        style="width: 100%; height: 100%"
+                                                        :chatShowType="chatShowType"
+                                                        :dataList="e.cycleStatisticsData"
+                                                        :intersectionName="intersectionName"
+                                                        v-else
+                                                    />
+                                                </div>
+                                            </div>
+                                            <div
+                                                style="width: 100%; height: 100%"
+                                                v-show="e.presentationForm == '矩阵图' && o.selectOption == b + 1"
+                                            >
+                                                <div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box">
+                                                    <span class="titleIcon"></span>
+                                                    {{ e.name }}
+                                                </div>
+                                                <div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
+                                                    <el-empty
+                                                        :image-size="100"
+                                                        description="暂无数据"
+                                                        v-if="e.triggerDataList == null"
+                                                    ></el-empty>
+                                                    <thermalOD
+                                                        :echartsRef="'thermalOD' + e.duocgqrhpzId"
+                                                        style="width: 100%; height: 90%"
+                                                        :chatShowType="chatShowType"
+                                                        ref="thermalOD"
+                                                        :timeMode="'实时触发'"
+                                                        :startName="e.startSectionNames"
+                                                        :endName="e.endSectionNames"
+                                                        :dataList="e.triggerDataList"
+                                                        :intersectionName="intersectionName"
+                                                        v-else-if="e.triggerDataList != null"
+                                                    />
+                                                </div>
+                                                <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
+                                                    <el-empty
+                                                        :image-size="100"
+                                                        description="暂无数据"
+                                                        v-if="e.cycleTimeData.length == 0 || e.cycleTimeData.length == null"
+                                                    ></el-empty>
+                                                    <thermalOD
+                                                        :echartsRef="'thermalOD' + e.duocgqrhpzId"
+                                                        style="width: 100%; height: 100%"
+                                                        :chatShowType="chatShowType"
+                                                        ref="thermalOD"
+                                                        :timeMode="'固定时刻'"
+                                                        :startName="e.startSectionNames"
+                                                        :endName="e.endSectionNames"
+                                                        :dataList="e.cycleTimeData"
+                                                        :intersectionName="intersectionName"
+                                                        v-else
+                                                    />
+                                                </div>
+                                                <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
+                                                    <el-empty
+                                                        :image-size="100"
+                                                        description="暂无数据"
+                                                        v-if="e.cycleStatisticsData.length == 0 || e.cycleStatisticsData.length == null"
+                                                    ></el-empty>
+                                                    <thermalOD
+                                                        :echartsRef="'thermalOD' + e.duocgqrhpzId"
+                                                        style="width: 100%; height: 100%"
+                                                        :chatShowType="chatShowType"
+                                                        ref="thermalOD"
+                                                        :timeMode="'固定间隔'"
+                                                        :startName="e.startSectionNames"
+                                                        :endName="e.endSectionNames"
+                                                        :dataList="e.cycleStatisticsData"
+                                                        :intersectionName="intersectionName"
+                                                        v-else
+                                                    />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <!--按钮切换渲染图表-->
+                                </div>
+                            </div>
+                        </div>
+                    </el-collapse-item>
+                </el-collapse>
+            </el-tab-pane>
+        </el-tabs>
+        <!--  :before-close="handleClose" -->
+        <div class="dataConfiguration">
+            <el-dialog
+                title="数据分析区配置"
+                :visible.sync="centerDialogVisible"
+                :close-on-click-modal="false"
+                width="33%"
+                style="height: 90%"
+                :before-close="addSuccess"
+                center
+            >
+                <el-tree
+                    :data="threeData"
+                    node-key="id"
+                    :props="defaultProps"
+                    default-expand-all
+                    :draggable="true"
+                    :drag-drop="true"
+                    :allow-drop="allowDrop"
+                    @node-drop="nodeDrop"
+                    @node-click="handleNodeClick"
+                    :expand-on-click-node="false"
+                >
+                    <span
+                        class="custom-tree-node"
+                        :style="{ background: getBackground(node) }"
+                        slot-scope="{ node, data }"
+                        v-if="node.level != 5 && node.level != 2 && node.level != 3 && node.level != 4"
+                    >
+                        <span
+                            v-show="!data.showInput"
+                            :id="data.duocgqrhpzId"
+                            :style="{ 'font-size': getFontSize(node), color: getColor(node) }"
+                        >
+                            {{ node.label }}
+                        </span>
+                        <el-input
+                            v-show="data.showInput"
+                            v-model="data.label"
+                            ref="inputVal"
+                            :class="'input' + data.duocgqrhpzId"
+                            @focus="focus($event)"
+                            @blur="alters(node, data, $event)"
+                            autofocus
+                        ></el-input>
+                        <span class="btnbox">
+                            <span class="spanbox">
+                                <el-button size="medium" type="text">
+                                    <i class="el-icon-edit" @click="alter(node, data)" style="font-size: 18px"></i>
+                                </el-button>
+                            </span>
+                            <span class="spanbox">
+                                <el-button size="medium" type="text" @click="append(data, node)">
+                                    <i class="el-icon-circle-plus" style="font-size: 18px"></i>
+                                </el-button>
+                            </span>
+                            <span class="spanbox">
+                                <el-button size="medium" type="text" @click="remove(node, data)">
+                                    <i class="el-icon-delete-solid" style="font-size: 18px"></i>
+                                </el-button>
+                            </span>
+                        </span>
+                    </span>
+                    <span
+                        class="custom-tree-node"
+                        :style="{ background: getBackground(node) }"
+                        slot-scope="{ node, data }"
+                        v-else-if="node.level == 2"
+                    >
+                        <span
+                            :style="{ 'font-size': getFontSize(node), color: getColor(node) }"
+                            v-show="!data.showInput"
+                            :id="data.duocgqrhpzId"
+                            >{{ node.label }}</span
+                        >
+                        <el-input
+                            v-show="data.showInput"
+                            ref="inputVal"
+                            v-model="data.label"
+                            :class="'input' + data.duocgqrhpzId"
+                            @focus="focus($event)"
+                            @input="(a) => inp(a, data)"
+                            @blur="alters(node, data, $event)"
+                        ></el-input>
+                        <span class="btnbox">
+                            <span class="spanbox">
+                                <el-button size="medium" type="text">
+                                    <i class="el-icon-edit" @click="alter(node, data)" style="font-size: 18px"></i>
+                                </el-button>
+                            </span>
+                            <span class="spanbox"></span>
+                            <span class="spanbox">
+                                <el-button size="medium" type="text" @click="remove(node, data)">
+                                    <i class="el-icon-delete-solid" style="font-size: 18px"></i>
+                                </el-button>
+                            </span>
+                        </span>
+                    </span>
+                    <span
+                        class="custom-tree-node"
+                        :style="{ background: getBackground(node) }"
+                        slot-scope="{ node, data }"
+                        v-else-if="node.level == 3"
+                    >
+                        <span
+                            :style="{ 'font-size': getFontSize(node), color: getColor(node) }"
+                            v-show="!data.showInput"
+                            :id="data.duocgqrhpzId"
+                            >{{ node.label }}</span
+                        >
+                        <el-input
+                            v-show="data.showInput"
+                            ref="inputVal"
+                            v-model="data.label"
+                            :class="'input' + data.duocgqrhpzId"
+                            @focus="focus($event)"
+                            @input="(a) => inp(a, data)"
+                            @blur="alters(node, data, $event)"
+                        ></el-input>
+                        <span class="btnbox">
+                            <span class="spanbox"></span>
+                            <span class="spanbox"
+                                ><el-button size="medium" type="text" @click="append(data, node)">
+                                    <i class="el-icon-circle-plus" style="font-size: 18px"></i> </el-button
+                            ></span>
+                            <span class="spanbox"></span>
+                            <!-- <el-button size="medium" type="text" @click="remove(node, data)">
+                <i class="el-icon-delete-solid" style="font-size: 18px"></i>
+              </el-button> -->
+                        </span>
+                    </span>
+                    <span
+                        class="custom-tree-node"
+                        :style="{ background: getBackground(node) }"
+                        slot-scope="{ node, data }"
+                        v-else-if="
+                            node.level == 4 && (node.label.includes('图') || node.label.includes('表格') || node.label.includes('数值'))
+                        "
+                    >
+                        <span
+                            :style="{ 'font-size': getFontSize(node), color: getColor(node) }"
+                            v-show="!data.showInput"
+                            :id="data.duocgqrhpzId"
+                            >{{ node.label }}</span
+                        >
+                        <el-input
+                            v-show="data.showInput"
+                            ref="inputVal"
+                            v-model="data.label"
+                            :class="'input' + data.duocgqrhpzId"
+                            @focus="focus($event)"
+                            @input="(a) => inp(a, data)"
+                            @blur="alters(node, data, $event)"
+                        ></el-input>
+                        <span class="btnbox">
+                            <span class="spanbox"></span>
+                            <span class="spanbox"></span>
+                            <span class="spanbox">
+                                <el-button size="medium" type="text" @click="remove(node, data)">
+                                    <i class="el-icon-delete-solid" style="font-size: 18px"></i>
+                                </el-button>
+                            </span>
+                        </span>
+                    </span>
+                    <span
+                        class="custom-tree-node"
+                        :style="{ background: getBackground(node) }"
+                        slot-scope="{ node, data }"
+                        v-else-if="
+                            node.level == 4 && (!node.label.includes('图') || !node.label.includes('表格') || !node.label.includes('数值'))
+                        "
+                    >
+                        <span
+                            :style="{ 'font-size': getFontSize(node), color: getColor(node) }"
+                            v-show="!data.showInput"
+                            :id="data.duocgqrhpzId"
+                            >{{ node.label }}</span
+                        >
+                        <el-input
+                            v-show="data.showInput"
+                            ref="inputVal"
+                            v-model="data.label"
+                            :class="'input' + data.duocgqrhpzId"
+                            @focus="focus($event)"
+                            @input="(a) => inp(a, data)"
+                            @blur="alters(node, data, $event)"
+                        ></el-input>
+                        <span class="btnbox">
+                            <span class="spanbox">
+                                <el-button size="medium" type="text">
+                                    <i class="el-icon-edit" @click="alter(node, data)" style="font-size: 18px"></i>
+                                </el-button>
+                            </span>
+                            <span class="spanbox">
+                                <el-button size="medium" type="text" @click="append(data, node)">
+                                    <i class="el-icon-circle-plus" style="font-size: 18px"></i>
+                                </el-button>
+                            </span>
+                            <span class="spanbox">
+                                <el-button size="medium" type="text" @click="remove(node, data)">
+                                    <i class="el-icon-delete-solid" style="font-size: 18px"></i>
+                                </el-button>
+                            </span>
+                        </span>
+                    </span>
+                    <span class="custom-tree-node" :style="{ background: getBackground(node) }" slot-scope="{ node, data }" v-else>
+                        <span
+                            :style="{ 'font-size': getFontSize(node), color: getColor(node) }"
+                            v-show="!data.showInput"
+                            :id="data.duocgqrhpzId"
+                            >{{ node.label }}</span
+                        >
+                        <el-input
+                            v-show="data.showInput"
+                            ref="inputVal"
+                            v-model="data.label"
+                            :class="'input' + data.duocgqrhpzId"
+                            @focus="focus($event)"
+                            @input="(a) => inp(a, data)"
+                            @blur="alters(node, data, $event)"
+                        ></el-input>
+                        <span class="btnbox">
+                            <span class="spanbox"></span>
+                            <span class="spanbox"></span>
+                            <span class="spanbox">
+                                <el-button size="medium" type="text" @click="remove(node, data)">
+                                    <i class="el-icon-delete-solid" style="font-size: 18px"></i>
+                                </el-button>
+                            </span>
+                        </span>
+                    </span>
+                </el-tree>
+                <!-- <div
+                    style="
+                        height: 6%;
+                        text-align: center;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        background: rgb(64, 158, 255);
+                    "
+                    @click="addParentNode"
+                >
+                    <img src="@/assets/img/AnalysisMain/add.png" style="height: 60%; width: 4%; cursor: pointer" />
+                </div> -->
+                <el-button size="medium" style="width: 100%" type="primary" plain @click="addParentNode"
+                    ><i class="el-icon-plus" style="font-size: 18px"></i
+                ></el-button>
+                <span slot="footer" class="dialog-footer" style="display: flex; justify-content: center">
+                    <!-- <el-button type="primary" @click="centerDialogVisible = false">取消</el-button> -->
+                    <el-button @click="addSuccess" type="primary">关闭</el-button>
+                </span>
+            </el-dialog>
+        </div>
+        <div class="addDialog">
+            <el-dialog :title="addTitle" :close-on-click-modal="false" :visible.sync="addDialogVisible" width="30%" center>
+                <el-form label-width="80px" :model="addForm">
+                    <el-form-item label="节点名称:">
+                        <el-input v-model="addForm.name"></el-input>
+                    </el-form-item>
+                </el-form>
+                <span slot="footer" class="dialog-footer">
+                    <el-button @click="addDialogVisible = false">取 消</el-button>
+                    <el-button type="primary" @click="addThreeNode">确 定</el-button>
+                </span>
+            </el-dialog>
+        </div>
+        <div class="addChildDialog">
+            <el-dialog :title="addChartTitle" :visible.sync="addChildDialogVisible" :close-on-click-modal="false" width="30%" center>
+                <el-tree
+                    :data="addChildThreeData"
+                    :check-strictly="true"
+                    node-key="componentId"
+                    @node-click="addChildClick"
+                    :props="addChildProps"
+                    :default-expanded-keys="defaultExpanded"
+                >
+                    <span class="custom-childTree-node" slot-scope="{ node, data }">
+                        <template v-if="addChartTitle == '添加图表'">
+                            <span v-if="node.level != 4"> {{ node.label }}</span>
+                            <el-checkbox-group
+                                v-model="checkList"
+                                :disabled="
+                                    disabledCheckList.includes(
+                                        `${node.label},${node.parent.data.componentId},${node.parent.parent.parent.data.videoId}`
+                                    )
+                                "
+                                v-else
+                                @change="changeChild(data, node)"
+                            >
+                                <el-checkbox
+                                    :label="
+                                        !data.componentId
+                                            ? node.label + ',' + node.parent.data.componentId + ',' + node.parent.parent.parent.data.videoId
+                                            : data.componentId + ',' + node.parent.parent.parent.data.videoId
+                                    "
+                                >
+                                    {{ node.label }}
+                                </el-checkbox>
+                            </el-checkbox-group>
+                        </template>
+                        <template v-if="addChartTitle == '添加分析项'">
+                            <span v-if="node.level != 3"> {{ node.label }}</span>
+                            <el-checkbox-group
+                                v-model="checkList"
+                                :disabled="disabledCheckList.includes(`${data.componentId},${node.parent.parent.data.videoId}`)"
+                                v-else
+                                @change="changeChild(data, node)"
+                            >
+                                <el-checkbox
+                                    :label="
+                                        !data.componentId
+                                            ? node.label + ',' + node.parent.data.componentId + ',' + node.parent.parent.data.videoId
+                                            : data.componentId + ',' + node.parent.parent.data.videoId
+                                    "
+                                >
+                                    {{ node.label }}
+                                </el-checkbox>
+                            </el-checkbox-group>
+                        </template>
+                        <!-- <el-checkbox-group
+              v-model="data.checked"
+              v-else
+              @change="changeChild(data, node)"
+            >
+              <el-checkbox :label="node.key" :disabled="data.disabled">
+                {{ node.label }}
+              </el-checkbox>
+            </el-checkbox-group> -->
+
+                        <!-- <el-radio v-model="data.checked"
+                      :label="node.key"
+                      :disabled="data.disabled"
+                      v-else>
+              {{ node.label }}
+            </el-radio> -->
+                    </span>
+                </el-tree>
+                <span slot="footer" class="dialog-footer">
+                    <el-button @click="addChildDialogVisible = false">取 消</el-button>
+                    <el-button type="primary" @click="addChildNode">确 定</el-button>
+                </span>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+let id = 1000;
+import chartsLine from '@/components/sensorFusion/echartsLine.vue';
+import chartsPie from '@/components/sensorFusion/echartsPie.vue';
+import chartsBar from '@/components/sensorFusion/echartsBar.vue';
+import MeanValue from '../../components/sensorFusion/meanValue.vue';
+import thermalOD from '@/components/sensorFusion/thermalOD';
+import tableShow from '@/components/sensorFusion/tableShow.vue';
+import regionTable from '@/components/sensorFusion/regionTable.vue';
+import {
+    getRealTimeShipjk, //获取实时视频
+    getDuocgqrhpz, //获取树形数据
+    getChartComponent, //获取图表
+    getNumericalComponent, //获取卡片
+    addDuocgqrhpz, //添加节点
+    deleteDuocgqrhpz, //删除节点
+    editDuocgqrhpzSort, //节点拖拽配许
+    editDuocgqrhpz, //编辑节点
+    getAssembly, // 获取多传感器融合
+    getSelectedComponent //获取已选的组件数据接口
+} from '@/api/sensorFusion.js';
+import qs from 'qs';
+export default {
+    name: 'sensorFusion',
+    data() {
+        return {
+            checkList: [],
+            defaultExpanded: [], //默认展示数组
+            checkDataList: [],
+            addChartTitle: '', //分析项标题
+            addTitle: '', //添加标题
+            chatShowIndex: 1, //点击按钮记录索引
+            chatShowType: '', //点击单选按钮展示不同的图表
+            tableData: [], //表格数据
+            hovered: false, //鼠标悬浮显示全部内容
+            cardTitle: false, //鼠标悬浮显示二级标题
+            addDialogVisible: false, //添加节点弹窗
+            addChildDialogVisible: false, //添加子节点
+            addChildType: '', //用于判断添加子组件点击的是卡片区还是图表区
+            addChildParentId: '', //添加子组件保存点击的父组件id
+            centerDialogVisible: false, //数据配置弹窗
+            activeNames: ['1'], // 视频折叠
+            intersectionName: [], //数据分析名称
+            videoList: [],
+            intersectionList: [
+                // {
+                //     intersectionLabel: '路口数据分析',
+                //     intersectionChildList: [
+                //         {
+                //             intersectionTitle: '北进口',
+                //             children: [
+                //                 {
+                //                     name: '卡片区',
+                //                     twoContentList: [
+                //                         {
+                //                             parentTitle: '左转',
+                //                             children: [
+                //                                 {
+                //                                     childrenTitle: '流量',
+                //                                     childrenSmallTitle: '流量',
+                //                                     count: 1,
+                //                                     time: '2023-08-25 11:26:10'
+                //                                 },
+                //                                 {
+                //                                     childrenTitle: '流量',
+                //                                     childrenSmallTitle: '流量',
+                //                                     count: 1,
+                //                                     time: '2023-08-25 11:26:10'
+                //                                 },
+                //                                 {
+                //                                     childrenTitle: '流量',
+                //                                     childrenSmallTitle: '流量',
+                //                                     count: 1,
+                //                                     time: '2023-08-25 11:26:10'
+                //                                 },
+                //                                 {
+                //                                     childrenTitle: '流量',
+                //                                     childrenSmallTitle: '流量',
+                //                                     count: 1,
+                //                                     time: '2023-08-25 11:26:10'
+                //                                 },
+                //                                 {
+                //                                     childrenTitle: '流量',
+                //                                     childrenSmallTitle: '流量',
+                //                                     count: 1,
+                //                                     time: '2023-08-25 11:26:10'
+                //                                 }
+                //                             ]
+                //                         },
+                //                         {
+                //                             parentTitle: '右转',
+                //                             children: [
+                //                                 {
+                //                                     childrenTitle: '流量',
+                //                                     childrenSmallTitle: '流量',
+                //                                     count: 1,
+                //                                     time: '2023-08-25 11:26:10'
+                //                                 },
+                //                                 {
+                //                                     childrenTitle: '速度',
+                //                                     childrenSmallTitle: '速度',
+                //                                     count: 1,
+                //                                     time: '2023-08-25 11:26:10'
+                //                                 },
+                //                                 {
+                //                                     childrenTitle: '流量',
+                //                                     childrenSmallTitle: '流量',
+                //                                     count: 1,
+                //                                     time: '2023-08-25 11:26:10'
+                //                                 },
+                //                                 {
+                //                                     childrenTitle: '流量',
+                //                                     childrenSmallTitle: '流量',
+                //                                     count: 1,
+                //                                     time: '2023-08-25 11:26:10'
+                //                                 }
+                //                             ]
+                //                         },
+                //                         {
+                //                             parentTitle: '直行',
+                //                             children: [
+                //                                 {
+                //                                     childrenTitle: '流量',
+                //                                     childrenSmallTitle: '流量',
+                //                                     count: 1,
+                //                                     time: '2023-08-25 11:26:10'
+                //                                 }
+                //                             ]
+                //                         }
+                //                     ]
+                //                 },
+                //                 {
+                //                     name: '图表区',
+                //                     echartsList: [
+                //                         {
+                //                             echartsType: '线性',
+                //                             name: '视频X82_线性图表'
+                //                         },
+                //                         {
+                //                             echartsType: '线性2',
+                //                             name: '视频X82_表格'
+                //                         },
+                //                         {
+                //                             echartsType: '线性2',
+                //                             name: '视频X82_饼图'
+                //                         }
+                //                     ]
+                //                 }
+                //             ]
+                //         }
+                //     ]
+                // }
+            ],
+            tabPosition: '1',
+            threeData: [
+                // {
+                //     id: 1,
+                //     label: '路口数据分析页',
+                //     showInput: false,
+                //     children: [
+                //         {
+                //             id: 2,
+                //             label: '北进口',
+                //             showInput: false,
+                //             children: [
+                //                 {
+                //                     id: 3,
+                //                     label: '卡片区',
+                //                     children: [
+                //                         {
+                //                             id: 4,
+                //                             label: '左车道',
+                //                             showInput: false,
+                //                             children: [
+                //                                 {
+                //                                     id: 5,
+                //                                     label: '空间组件-指标组件'
+                //                                 },
+                //                                 {
+                //                                     id: 6,
+                //                                     label: '空间组件-指标组件'
+                //                                 },
+                //                                 {
+                //                                     id: 7,
+                //                                     label: '空间组件-指标组件'
+                //                                 },
+                //                                 {
+                //                                     id: 8,
+                //                                     label: '空间组件-指标组件'
+                //                                 }
+                //                             ]
+                //                         },
+                //                         {
+                //                             id: 9,
+                //                             label: '中车道',
+                //                             showInput: false,
+                //                             children: [
+                //                                 {
+                //                                     id: 10,
+                //                                     label: '空间组件-指标组件'
+                //                                 },
+                //                                 {
+                //                                     id: 11,
+                //                                     label: '空间组件-指标组件'
+                //                                 },
+                //                                 {
+                //                                     id: 12,
+                //                                     label: '空间组件-指标组件'
+                //                                 },
+                //                                 {
+                //                                     id: 13,
+                //                                     label: '空间组件-指标组件'
+                //                                 }
+                //                             ]
+                //                         }
+                //                     ]
+                //                 },
+                //                 {
+                //                     id: 14,
+                //                     label: '图表区',
+                //                     children: [
+                //                         {
+                //                             id: 15,
+                //                             label: '流量组件-曲线图'
+                //                         },
+                //                         {
+                //                             id: 16,
+                //                             label: '速度组件-表格'
+                //                         }
+                //                     ]
+                //                 }
+                //             ]
+                //         }
+                //     ]
+                // },
+                // {
+                //     id: 2,
+                //     label: '路段数据分析页',
+                //     showInput: false,
+                //     children: [
+                //         {
+                //             id: 3,
+                //             label: '北进口',
+                //             showInput: false,
+                //             children: [
+                //                 {
+                //                     id: 4,
+                //                     label: '卡片区',
+                //                     children: [
+                //                         {
+                //                             id: 5,
+                //                             label: '左车道',
+                //                             showInput: false,
+                //                             children: [
+                //                                 {
+                //                                     id: 6,
+                //                                     label: '空间组件-指标组件'
+                //                                 },
+                //                                 {
+                //                                     id: 7,
+                //                                     label: '空间组件-指标组件'
+                //                                 },
+                //                                 {
+                //                                     id: 8,
+                //                                     label: '空间组件-指标组件'
+                //                                 },
+                //                                 {
+                //                                     id: 9,
+                //                                     label: '空间组件-指标组件'
+                //                                 }
+                //                             ]
+                //                         },
+                //                         {
+                //                             id: 10,
+                //                             label: '中车道',
+                //                             showInput: false,
+                //                             children: [
+                //                                 {
+                //                                     id: 11,
+                //                                     label: '空间组件-指标组件'
+                //                                 },
+                //                                 {
+                //                                     id: 12,
+                //                                     label: '空间组件-指标组件'
+                //                                 },
+                //                                 {
+                //                                     id: 13,
+                //                                     label: '空间组件-指标组件'
+                //                                 },
+                //                                 {
+                //                                     id: 14,
+                //                                     label: '空间组件-指标组件'
+                //                                 }
+                //                             ]
+                //                         }
+                //                     ]
+                //                 },
+                //                 {
+                //                     id: 15,
+                //                     label: '图表区',
+                //                     children: [
+                //                         {
+                //                             id: 16,
+                //                             label: '流量组件-曲线图'
+                //                         },
+                //                         {
+                //                             id: 17,
+                //                             label: '速度组件-表格'
+                //                         }
+                //                     ]
+                //                 }
+                //             ]
+                //         }
+                //     ]
+                // }
+            ],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            }, //默认节点
+            addForm: {
+                name: ''
+            }, //添加表单名称
+            addChildProps: {
+                //  children: 'children',
+                // label: 'label',
+                children: 'data',
+                label: 'videoName',
+                checked: 'checked'
+            },
+            addChildThreeData: [
+                // {
+                //     id: 1,
+                //     label: '一级 1',
+                //     checked: false,
+                //     children: [
+                //         {
+                //             id: 4,
+                //             label: '二级 1-1',
+                //             checked: false,
+                //             children: [
+                //                 {
+                //                     id: 9,
+                //                     label: '三级 1-1-1',
+                //                     checked: false
+                //                 },
+                //                 {
+                //                     id: 10,
+                //                     label: '三级 1-1-2',
+                //                     checked: false
+                //                 }
+                //             ]
+                //         }
+                //     ]
+                // },
+                // {
+                //     id: 2,
+                //     label: '一级 2',
+                //     checked: false,
+                //     children: [
+                //         {
+                //             id: 5,
+                //             label: '二级 2-1',
+                //             checked: false
+                //         },
+                //         {
+                //             id: 6,
+                //             label: '二级 2-2',
+                //             checked: false
+                //         }
+                //     ]
+                // },
+                // {
+                //     id: 3,
+                //     label: '一级 3',
+                //     checked: false,
+                //     children: [
+                //         {
+                //             id: 7,
+                //             label: '二级 3-1',
+                //             checked: false
+                //         },
+                //         {
+                //             id: 8,
+                //             label: '二级 3-2',
+                //             checked: false
+                //         }
+                //     ]
+                // }
+            ],
+            addThreeNodeData: {
+                data: null,
+                node: null
+            },
+            addThreeChildData: {
+                data: null,
+                node: null
+            },
+            addParent: false, //最父节点
+            addParentSort: 0, //最父节点排序
+            addOneSort: 0, //一级节点排序
+            addTwoSort: 0, //卡片区下面的节点排序
+            addCardSort: 0, //卡片区排序
+            addChartSort: 0, //图表区排序
+            draggingNodeList: null, //为确保拖拽完成之后调用接口  所以保存拖拽的节点
+            tabChangeIndex: 0, //tab切换事件
+            topicSends: [], //mqtt订阅数组
+            topicVideoIdList: [],
+            triggerDataList: [], //触发mqtt数据
+            triggerFlowData: [], //触发mqtt数据
+            triggerSpeedData: [], //触发速度mqtt数据
+            triggerTypeData: [], //触发类型数据
+            triggerNStayData: [], //触发检测数数据
+            triggerNQueueData: [], //触发排队数数据
+            triggerODData: [], //触发OD数据
+            triggerYWData: [], //mqtt延误
+            disabledCheckList: [] //tree不可选数组
+        };
+    },
+    mounted() {
+        //获取视频列表
+        this.getRealTimeShipjk();
+        //获取多融合数据
+        this.getSensorFusionData();
+    },
+    methods: {
+        //类型数据累计
+        getTotal(arr, field, field2) {
+            let total = 0;
+            if (arr && arr.length > 0) {
+                total = arr.reduce((accumulator, item) => {
+                    let t = 0;
+                    if (item[field] || item[field] === 0) {
+                        t = item[field];
+                    }
+                    if (item[field2] || item[field2] === 0) {
+                        t = item[field2];
+                    }
+
+                    if (t || t === 0) {
+                        const fieldValue = parseFloat(t);
+                        if (!isNaN(fieldValue)) {
+                            return accumulator + fieldValue;
+                        }
+                    }
+                    return accumulator; // 如果无效则不累加
+                }, 0);
+            }
+
+            return total;
+        },
+        //获取视频列表接口
+        getRealTimeShipjk() {
+            getRealTimeShipjk().then((res) => {
+                this.videoList = res.data.data;
+            });
+        },
+        //获取多融合传感器融合数据
+        getSensorFusionData() {
+            getAssembly({
+                Number: 10
+            }).then((res) => {
+                this.intersectionList = res.data.data || [];
+
+                this.addSelectOptionField(this.intersectionList);
+                // this.addTriggerDataField(this.intersectionList);
+                //mqtt订阅
+                // this.$nextTick(() => {
+                this.getMqtt();
+                // });
+
+                //console.log(this.intersectionList, 'this.intersectionList');
+                //开发路口默认展开第一个
+                if (this.intersectionList.length > 0) {
+                    let children = this.intersectionList[0].children || [];
+                    if (children.length > 0) {
+                        this.intersectionName = [children[0].name];
+                    }
+                }
+                // for (let i = 0; i < this.intersectionList.length; i++) {
+                //     for (let j = 0; j < this.intersectionList[i].children.length; j++) {
+                //         if (j == 2) {
+                //             this.intersectionName.push(this.intersectionList[i].children[j].name);
+                //         }
+                //     }
+                // }
+                // //console.log(this.intersectionName, 'intersectionName');
+            });
+        },
+        //每个都添加option
+        addSelectOptionField(obj) {
+            if (Array.isArray(obj)) {
+                obj.forEach((item) => {
+                    this.addSelectOptionField(item);
+                });
+            } else if (typeof obj == 'object') {
+                for (let key in obj) {
+                    if (typeof obj[key] == 'object') {
+                        this.addSelectOptionField(obj[key]);
+                    } else if (key == 'name') {
+                        obj['selectOption'] = 1;
+                        obj['triggerNewData'] = [];
+                    }
+                }
+            }
+        },
+        addTriggerDataField(obj) {
+            if (Array.isArray(obj)) {
+                obj.forEach((item) => {
+                    this.addTriggerDataField(item);
+                });
+            } else if (typeof obj == 'object') {
+                for (let key in obj) {
+                    if (typeof obj[key] == 'object') {
+                        this.addTriggerDataField(obj[key]);
+                    } else if (key == 'name') {
+                        obj['triggerData'] = '';
+                    }
+                }
+            }
+        },
+        //获取所有配置节点
+        getDuocgqrhpz() {
+            let threeDataList = [];
+            getDuocgqrhpz().then((res) => {
+                if (res.data.code == 200) {
+                    this.threeData = this.replaceNameWithLabel(res.data.data);
+                    this.addShowInputField(this.threeData);
+                    // this.threeData = threeDataList;
+                    for (let i = 0; i < this.threeData.length; i++) {
+                        this.addParentSort = this.threeData[i].sort;
+                    }
+                    //console.log(this.threeData, 'this.threeData');
+                } else {
+                    this.$message.warning(res.data.msg);
+                }
+            });
+        },
+        // 将接口中的所有name字段变为label字段
+        replaceNameWithLabel(obj) {
+            if (Array.isArray(obj)) {
+                return obj.map((item) => {
+                    if (typeof item == 'object') {
+                        return this.replaceNameWithLabel(item);
+                    } else {
+                        return item;
+                    }
+                });
+            } else if (typeof obj == 'object') {
+                const newObj = {};
+                for (let key in obj) {
+                    if (typeof obj[key] == 'object') {
+                        newObj[key] = this.replaceNameWithLabel(obj[key]);
+                    } else if (key == 'name') {
+                        newObj['label'] = obj[key];
+                    } else {
+                        newObj[key] = obj[key];
+                    }
+                }
+                return newObj;
+            } else {
+                return obj;
+            }
+        },
+
+        //添加showInput字段
+        addShowInputField(obj) {
+            if (Array.isArray(obj)) {
+                obj.forEach((item) => {
+                    this.addShowInputField(item);
+                });
+            } else if (typeof obj == 'object') {
+                for (let key in obj) {
+                    if (typeof obj[key] == 'object') {
+                        this.addShowInputField(obj[key]);
+                    } else if (key == 'label') {
+                        obj['showInput'] = false;
+                    }
+                }
+            }
+        },
+        //子添加checked字段
+        addCheckedField(obj) {
+            if (Array.isArray(obj)) {
+                obj.forEach((item) => {
+                    this.addCheckedField(item);
+                });
+            } else if (typeof obj === 'object') {
+                for (let key in obj) {
+                    if (typeof obj[key] === 'object') {
+                        this.addCheckedField(obj[key]);
+                    } else if (key === 'videoName') {
+                        obj['checked'] = false;
+                    }
+                }
+            }
+        },
+        //配置弹窗点击事件
+        handleDialog() {
+            this.threeData = [];
+            this.getDuocgqrhpz();
+            this.centerDialogVisible = true;
+        },
+        //折叠面板点击展开事件
+        handleCollapseChange(val) {
+            //console.log(val, '折叠面板展开事件', this.intersectionName);
+            this.intersectionName = val;
+        },
+        handleNodeClick(nodeData) {},
+
+        //层级标题不同
+        getFontSize(node) {
+            // 根据节点层级返回对应的字体大小
+            // 可以根据需要定义自己的逻辑
+            // 这里只是简单示例，可以根据具体的需求进行修改
+            if (
+                (node.level != 2 &&
+                    node.level != 3 &&
+                    node.level == 4 &&
+                    (node.label.includes('图') || node.label.includes('表格') || node.label.includes('数值'))) ||
+                node.level == 5 ||
+                node.level == 1
+            ) {
+                return '14px';
+            } else if (node.level == 4 && (!node.label.includes('图') || !node.label.includes('表格') || node.label.includes('数值'))) {
+                return '16px'; // 四级卡片
+            } else {
+                return '16px';
+            }
+        },
+        //改变颜色
+        getColor(node) {
+            if (
+                (node.level != 2 &&
+                    node.level != 3 &&
+                    node.level == 4 &&
+                    (node.label.includes('图') || node.label.includes('表格') || node.label.includes('数值'))) ||
+                node.level == 5
+            ) {
+                return 'rgb(172,172,172)';
+            } else if (node.level == 4 && (!node.label.includes('图') || !node.label.includes('表格') || node.label.includes('数值'))) {
+                return 'rgb(116,116,116)'; // 四级卡片
+            } else {
+                return 'rgb(116,116,116)';
+            }
+        },
+        //设置背景色
+        getBackground(node) {
+            if (node.level == 1) {
+                return 'rgba(172,172,172,0.2)';
+            } else if (node.level == 3) {
+                if (node.label == '卡片区') {
+                    return 'rgba(255,241,229,0.7)';
+                } else {
+                    return 'rgba(237,255,229,0.7)';
+                }
+            }
+        },
+        //只能选中同级排序
+        allowDrop(draggingNode, dropNode, type) {
+            //注掉的是同级拖拽
+            if (draggingNode.level === dropNode.level) {
+                //console.log('拖拽');
+                return type === 'prev' || type === 'next';
+            } else {
+                // 不同级进行处理
+                return false;
+            }
+        },
+        //排序编辑完成
+        nodeDrop(data, dropPosition, event) {
+            let dataList = [];
+            if (dropPosition.level != 1) {
+                for (let i = 0; i < dropPosition.parent.data.children.length; i++) {
+                    dataList.push({
+                        DuocgqrhpzId: dropPosition.parent.data.children[i].duocgqrhpzId,
+                        Sort: i + 1
+                    });
+                }
+            } else {
+                for (let i = 0; i < this.threeData.length; i++) {
+                    dataList.push({
+                        DuocgqrhpzId: this.threeData[i].duocgqrhpzId,
+                        Sort: i + 1
+                    });
+                }
+            }
+            editDuocgqrhpzSort(dataList)
+                .then((res) => {
+                    if (res.data.code == 200) {
+                        this.$message.success(res.data.msg);
+                    } else {
+                        this.$message.warning(res.data.msg);
+                    }
+                })
+                .catch((err) => {
+                    //console.log(err);
+                });
+        },
+        //将子组件得名称统一
+        renameField(obj, oldFieldName, newFieldName) {
+            if (Array.isArray(obj)) {
+                obj.forEach((item) => {
+                    this.renameField(item, oldFieldName, newFieldName);
+                });
+            } else if (typeof obj === 'object') {
+                for (let key in obj) {
+                    if (typeof obj[key] === 'object') {
+                        this.renameField(obj[key], oldFieldName, newFieldName);
+                    } else if (key === oldFieldName) {
+                        obj[newFieldName] = obj[key];
+                        delete obj[key];
+                    }
+                }
+            }
+        },
+        // 树形节点得添加删除
+        append(data, node) {
+            this.checkList = []; //多选数据为空
+            this.defaultExpanded = [];
+            this.addOneSort = 0; //一级节点排序
+            this.addTwoSort = 0; //卡片区下面的节点排序
+            this.addCardSort = 0; //卡片区排序
+            this.addChartSort = 0; //图表区排序
+            this.addChildThreeData = [];
+            this.addParent = false;
+            if (data.label == '图表区') {
+                this.addChartTitle = '添加图表';
+                this.addChildType = data.label;
+                //父id
+                this.addChildParentId = data.duocgqrhpzId;
+                this.addChildDialogVisible = true;
+                getChartComponent().then((res) => {
+                    //吧子数组变成想要的
+                    let transformedData = res.data.data.map((item) => {
+                        // let newData = {
+                        //     videoId: item.videoId,
+                        //     videoName: item.videoName,
+                        //     data: item.data.map((subItem) => {
+                        //         let presentationForms = subItem.presentationForm.split(',');
+                        //         return {
+                        //             componentId: subItem.componentId,
+                        //             componentName: subItem.componentName,
+                        //             interfaceComponentId: subItem.interfaceComponentId,
+                        //             presentationForm: subItem.presentationForm,
+                        //             data: presentationForms.map((form) => ({ videoName: form }))
+                        //         };
+                        //     })
+                        // };
+                        // return newData;
+                        const newData = item.data.reduce((acc, obj) => {
+                            const existingData = acc.find((entry) => entry.combinationName === obj.combinationName);
+                            let presentationForms = obj.presentationForm.split(',');
+                            if (existingData) {
+                                existingData.data.push({
+                                    componentId: obj.componentId,
+                                    componentName: obj.componentName,
+                                    interfaceComponentId: obj.interfaceComponentId,
+                                    presentationForm: obj.presentationForm,
+                                    data: presentationForms.map((form) => ({ videoName: form }))
+                                });
+                            } else {
+                                acc.push({
+                                    combinationName: obj.combinationName,
+                                    data: [
+                                        {
+                                            componentId: obj.componentId,
+                                            componentName: obj.componentName,
+                                            interfaceComponentId: obj.interfaceComponentId,
+                                            presentationForm: obj.presentationForm,
+                                            data: presentationForms.map((form) => ({ videoName: form }))
+                                        }
+                                    ]
+                                });
+                            }
+                            return acc;
+                        }, []);
+                        return {
+                            ...item,
+                            data: newData
+                        };
+                    });
+                    this.renameField(transformedData, 'combinationName', 'videoName');
+                    this.renameField(transformedData, 'componentName', 'videoName');
+                    this.addCheckedField(transformedData);
+                    this.addChildThreeData = transformedData;
+                    // this.addChildThreeData.map((item) => {
+                    //     item.data.map((key) => {
+                    //         key.data = key.data.filter((d) => d.videoName != '数值');
+                    //     });
+                    // });
+                    this.addChildThreeData.map((item) => {
+                        item.data.map((key) => {
+                            key.data.map((t) => {
+                                t.data = t.data.filter((d) => d.videoName != '数值');
+                            });
+                        });
+                    });
+                    // console.log(this.addChildThreeData, ' this.addChildThreeData');
+                });
+                this.addThreeNodeData.data = data;
+                this.addThreeNodeData.node = node;
+                for (let i = 0; i < this.addThreeNodeData.data.children.length; i++) {
+                    this.addChartSort = this.addThreeNodeData.data.children[i].sort;
+                }
+                this.disabledCheckList = [];
+                getSelectedComponent({
+                    DuocgqrhpzId: data.duocgqrhpzId
+                }).then((res) => {
+                    res.data.data.forEach((item) => {
+                        this.checkList.push(`${item.presentationForm},${item.analogAreaComponentId},${item.videoId}`);
+                        this.disabledCheckList.push(`${item.presentationForm},${item.analogAreaComponentId},${item.videoId}`);
+                        this.defaultExpanded.push(item.analogAreaComponentId);
+                        // item.data.forEach((subItem) => {
+                        //   const labels = subItem.presentationForm.split(",");
+                        //   labels.forEach((label) => {
+                        //     if (label != "数值") {
+                        //       this.checkList.push(
+                        //         `${label},${subItem.componentId},${item.videoId}`
+                        //       );
+                        //     }
+                        //   });
+                        // });
+                    });
+                    // console.log(this.disabledCheckList, ' this.disabledCheckList');
+                    // console.log(this.checkList, ' this.disabledCheckList');
+                });
+            } else if (node.level == 4) {
+                this.addChartTitle = '添加分析项';
+                this.addChildType = '';
+                //父id
+                this.addChildParentId = data.duocgqrhpzId;
+                this.addChildDialogVisible = true;
+                getNumericalComponent().then((res) => {
+                    this.renameField(res.data.data, 'componentName', 'videoName');
+                    //吧子数组变成想要的
+                    const transformedData = res.data.data.map((item) => {
+                        const newData = item.data.reduce((acc, obj) => {
+                            const existingData = acc.find((entry) => entry.combinationName === obj.combinationName);
+                            if (existingData) {
+                                existingData.data.push({
+                                    componentId: obj.componentId,
+                                    videoName: obj.videoName
+                                });
+                            } else {
+                                acc.push({
+                                    combinationName: obj.combinationName,
+                                    data: [
+                                        {
+                                            componentId: obj.componentId,
+                                            videoName: obj.videoName
+                                        }
+                                    ]
+                                });
+                            }
+                            return acc;
+                        }, []);
+
+                        return {
+                            ...item,
+                            data: newData
+                        };
+                    });
+                    this.renameField(transformedData, 'combinationName', 'videoName');
+                    this.addCheckedField(transformedData);
+                    this.addChildThreeData = transformedData;
+                    //添加checked字段
+                });
+                this.addThreeNodeData.data = data;
+                this.addThreeNodeData.node = node;
+                for (let i = 0; i < this.addThreeNodeData.data.children.length; i++) {
+                    this.addCardSort = this.addThreeNodeData.data.children[i].sort;
+                }
+                this.disabledCheckList = [];
+                getSelectedComponent({
+                    DuocgqrhpzId: data.duocgqrhpzId
+                }).then((res) => {
+                    res.data.data.forEach((item) => {
+                        this.checkList.push(`${item.analogAreaComponentId},${item.videoId}`);
+                        this.disabledCheckList.push(`${item.analogAreaComponentId},${item.videoId}`);
+                        this.defaultExpanded.push(item.analogAreaComponentId);
+                        // item.data.forEach((subItem) => {
+                        //   // const labels = subItem.presentationForm.split(",");
+                        //   // labels.forEach((label) => {
+                        //   if (subItem.presentationForm.includes("数值")) {
+                        //     this.checkList.push(
+                        //       `${subItem.componentName},${subItem.componentId},${item.videoId}`
+                        //     );
+                        //   }
+                        //   // });
+                        // });
+                    });
+                });
+            } else {
+                //给普通节点赋值
+                this.addChildType = '';
+                this.addThreeNodeData.data = data;
+                this.addThreeNodeData.node = node;
+                this.addDialogVisible = true;
+                this.addForm.name = '';
+                if (this.addThreeNodeData.node.level == 1) {
+                    this.addTitle = '添加';
+                    for (let i = 0; i < this.addThreeNodeData.data.children.length; i++) {
+                        this.addOneSort = this.addThreeNodeData.data.children[i].sort;
+                    }
+                } else if (this.addThreeNodeData.node.level == 3) {
+                    this.addTitle = '添加卡片';
+                    for (let i = 0; i < this.addThreeNodeData.data.children.length; i++) {
+                        this.addTwoSort = this.addThreeNodeData.data.children[i].sort;
+                    }
+                }
+            }
+            // getSelectedComponent
+            // const newChild = { id: id++, label: 'testtest', children: [] };
+            // if (!data.children) {
+            //     this.$set(data, 'children', []);
+            // }
+            // data.children.push(newChild);
+        },
+        //最子节点选中事件
+        changeChild(data, node) {
+            // if (
+            //   (this.checkList.length >= 6 && this.addChildType != "图表区") ||
+            //   (this.checkList.length >= 8 && this.addChildType == "图表区")
+            // ) {
+            //   this.$message.warning("组件类型添加上限!");
+            // }
+            //给节点赋值
+            this.addThreeChildData.data = data;
+            this.addThreeChildData.node = node;
+            //console.log(this.addThreeChildData.data, 'this.addThreeChildData.node', this.addThreeChildData.node);
+        },
+        //最子节点添加
+        addChildNode() {
+            this.checkDataList = [];
+            //给添加多选的赋值
+
+            //console.log(this.checkDataList, 'this.checkDataList');
+            let params = {
+                ParentId: '',
+                Name: '',
+                Type: '',
+                Sort: '',
+                // AnalogAreaComponentId: "",
+                // PresentationForm: "", //展现形式
+                // VideoId: "",
+                list: []
+            };
+            if (this.addChildType == '图表区') {
+                this.checkDataList = this.checkList.map((item, index) => {
+                    let parts = item.split(',');
+                    return {
+                        AnalogAreaComponentId: parts[1],
+                        PresentationForm: parts[0],
+                        VideoId: parts[2],
+                        Sort: index + 1
+                    };
+                });
+                params = {
+                    ParentId: this.addChildParentId,
+                    Name: '',
+                    Type: 2,
+                    Sort: '',
+                    // AnalogAreaComponentId: this.addThreeChildData.node.parent.data.componentId,
+                    // PresentationForm: this.addThreeChildData.data.videoName, //展现形式
+                    // VideoId: this.addThreeChildData.node.parent.parent.data.videoId,
+                    list: this.checkDataList
+                };
+            } else {
+                this.checkDataList = this.checkList.map((item, index) => {
+                    let parts = item.split(',');
+                    return {
+                        AnalogAreaComponentId: parts[0],
+                        PresentationForm: '',
+                        VideoId: parts[1],
+                        Sort: index + 1
+                    };
+                });
+                params = {
+                    ParentId: this.addChildParentId,
+                    Name: '',
+                    Type: 2,
+                    Sort: '',
+                    // AnalogAreaComponentId: this.addThreeChildData.data.componentId,
+                    // PresentationForm: "", //展现形式
+                    // VideoId: this.addThreeChildData.node.parent.parent.data.videoId,
+                    list: this.checkDataList
+                };
+            }
+            // if (
+            //   (this.checkDataList.length >= 6 && this.addChildType != "图表区") ||
+            //   (this.checkDataList.length >= 8 && this.addChildType == "图表区")
+            // ) {
+            //   this.$message.warning("组件类型添加上限!");
+            //   return false;
+            // } else {
+            addDuocgqrhpz(params)
+                .then((res) => {
+                    if (res.data.code == 200) {
+                        this.$message.success(res.data.msg);
+                        this.addChildDialogVisible = false;
+                        this.threeData = [];
+                        this.getDuocgqrhpz();
+                    } else {
+                        this.$message.warning(res.data.msg);
+                    }
+                })
+                .catch((err) => {
+                    //console.log(err);
+                });
+            // }
+        },
+        //删除节点
+        remove(node, data) {
+            this.$confirm('确认删除此节点, 是否继续?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            })
+                .then(() => {
+                    deleteDuocgqrhpz({
+                        DuocgqrhpzId: data.duocgqrhpzId
+                    })
+                        .then((res) => {
+                            if (res.data.code == 200) {
+                                this.$message.success('删除成功');
+                                // const parent = node.parent;
+                                // const children = parent.data.children || parent.data;
+                                // const index = children.findIndex((d) => d.id === data.id);
+                                // children.splice(index, 1);
+                                this.threeData = [];
+                                this.getDuocgqrhpz();
+                            } else {
+                                this.$message.warning(res.data.msg);
+                            }
+                        })
+                        .catch((err) => {
+                            //console.log(err);
+                        });
+                })
+                .catch(() => {
+                    this.$message({
+                        type: 'info',
+                        message: '取消删除'
+                    });
+                });
+        },
+        //卡片区单选择
+        addChildClick(data) {
+            // 将其他节点的选中状态设为 false
+            this.traverseTree(this.addChildThreeData, (node) => {
+                if (node !== data) {
+                    node.checked = false;
+                }
+            });
+        },
+        traverseTree(nodes, callback) {
+            // 递归遍历树节点
+            for (let i = 0; i < nodes.length; i++) {
+                const node = nodes[i];
+                callback(node);
+                if (node.data) {
+                    this.traverseTree(node.data, callback);
+                }
+            }
+        },
+        //父节点添加
+        addParentNode() {
+            this.addTitle = '添加';
+            this.addParent = true;
+            this.addDialogVisible = true;
+            this.addForm.name = '';
+            this.addThreeNodeData.data = null;
+            this.addThreeNodeData.node = null;
+        },
+        //普通输入框添加节点
+        addThreeNode() {
+            //console.log(this.addThreeNodeData.data, 'this.addThreeNodeData.data');
+            let params = {
+                ParentId: '',
+                Name: '',
+                Type: '',
+                Sort: ''
+            };
+            let sort = 0;
+            if (this.addParent) {
+                params = {
+                    ParentId: 0,
+                    Name: this.addForm.name,
+                    Type: 0,
+                    Sort: this.addParentSort + 1
+                };
+            } else {
+                let type = 0;
+                if (this.addThreeNodeData.node.level == 1) {
+                    type = 1;
+                    sort = this.addOneSort + 1;
+                } else if (this.addThreeNodeData.node.level == 3) {
+                    sort = this.addTwoSort + 1;
+                }
+                params = {
+                    ParentId: this.addThreeNodeData.data.duocgqrhpzId,
+                    Name: this.addForm.name,
+                    Type: type,
+                    Sort: sort
+                };
+            }
+            if (this.addThreeNodeData.data != null && this.addThreeNodeData.data.children.length >= 3) {
+                this.$message.warning('卡片区最多只能添加3个!');
+                return false;
+            } else {
+                // qs.stringify(params)
+                addDuocgqrhpz(params)
+                    .then((res) => {
+                        if (res.data.code == 200) {
+                            this.$message.success(res.data.msg);
+                            this.addDialogVisible = false;
+                            this.threeData = [];
+                            this.getDuocgqrhpz();
+                        } else {
+                            this.$message.warning(res.data.msg);
+                        }
+                    })
+                    .catch((err) => {
+                        //console.log(err);
+                    });
+            }
+        },
+        // //获得焦点
+        focus(event) {
+            // //console.log(event);
+            event.currentTarget.select();
+        },
+        //修改功能   inp
+        inp(value, data) {
+            data.label = value;
+        },
+        //失去焦点后
+        alters(node, data) {
+            //console.log(data.label, '失去焦点');
+            data.showInput = false;
+            const label = document.getElementById(data.duocgqrhpzId);
+            const changeinput = document.querySelector('.input' + data.duocgqrhpzId);
+            changeinput.style.display = 'none';
+            label.style.display = 'block';
+            // this.focus(event)
+            // this.$nextTick(function() { // //DOM 更新了
+            //   this.$refs.inputVal.focus();
+            // });
+            let params = {
+                DuocgqrhpzId: data.duocgqrhpzId,
+                Name: data.label
+            };
+            editDuocgqrhpz(qs.stringify(params))
+                .then((res) => {
+                    if (res.data.code == 200) {
+                        this.$message.success(res.data.msg);
+                    } else {
+                        this.$message.warning(res.data.msg);
+                    }
+                })
+                .catch((err) => {
+                    //console.log(err);
+                });
+        },
+        alter(node, data) {
+            //console.log(data, '编辑', this.threeData);
+            data.showInput = true;
+            const label = document.getElementById(data.duocgqrhpzId);
+            const changeinput = document.querySelector('.input' + data.duocgqrhpzId);
+            changeinput.style.display = 'block';
+            label.style.display = 'none';
+            // this.focus(event)
+            this.$nextTick(() => {
+                if (changeinput) {
+                    changeinput.focus();
+                }
+            });
+        },
+        //鼠标悬浮
+        showTooltip(id) {
+            // const hover = document.querySelector('.hovered' + id);
+            if (id) {
+                const title = document.querySelector('.tooltip' + id);
+
+                this.$nextTick(() => {
+                    title.style.position = 'absolute';
+                    title.style.display = 'block';
+                    title.style.backgroundColor = '#f7f7f7';
+                    title.style.border = '1px solid #ccc';
+                });
+            }
+        },
+        //鼠标移出
+        hideTooltip(id) {
+            // const title = document.querySelector('.tooltip' + id);
+            if (id) {
+                const title = document.querySelector('.tooltip' + id);
+
+                this.$nextTick(() => {
+                    // this.hovered = false;
+                    title.style.display = 'none';
+                });
+            }
+        },
+        //二级鼠标悬浮
+        showCardtip(id) {
+            // const hover = document.querySelector('.hovered' + id);
+            if (id) {
+                const title = document.querySelector('.cardTitle1' + id);
+                this.$nextTick(() => {
+                    title.style.position = 'absolute';
+                    title.style.display = 'block';
+                    title.style.backgroundColor = '#f7f7f7';
+                    title.style.border = '1px solid #ccc';
+                    // title.style.top = '120px';
+                    title.style.width = '110px';
+                });
+            }
+        },
+        //二级鼠标移出
+        hideCardtip(id) {
+            if (id) {
+                const title = document.querySelector('.cardTitle1' + id);
+                this.$nextTick(() => {
+                    // this.hovered = false;
+                    title.style.display = 'none';
+                });
+            }
+        },
+
+        //单选按钮选择事件
+        changeChat(val, index) {
+            this.chatShowType = '';
+            this.$nextTick(() => {
+                this.chatShowType = val[index - 1].presentationForm;
+                // this.chatShowIndex = index;
+                let count = index - 1;
+                let elements = document.querySelectorAll('[class^="echarts"]');
+                // let echarts = document.querySelector('.echarts' + count);
+                elements.forEach((element) => {
+                    this.setZIndex(element, count);
+                });
+            });
+        },
+        //显示echarts设置对应的层级
+        setZIndex(element, count) {
+            if (element.classList.contains(`echarts${count}`)) {
+                element.style.zIndex = '9999';
+            } else {
+                element.style.zIndex = '1';
+            }
+        },
+        //配置弹窗关闭事件
+        handleClose(done) {
+            done();
+            this.getSensorFusionData();
+            //   this.$confirm("确认关闭？")
+            //     .then(() => {
+            //       done();
+            //       this.getSensorFusionData();
+            //     })
+            //     .catch((err) => {
+            //       //console.log(err);
+            //     });
+        },
+        //确认按钮
+        addSuccess() {
+            this.centerDialogVisible = false;
+            this.getSensorFusionData();
+        },
+        //tab切换事件
+        tabChange(val) {
+            this.$nextTick(() => {
+                this.tabChangeIndex = val.index;
+            });
+        },
+        //通过传入组件id判断他在卡片区还是图表区
+        findLocationById(intersectionList, id) {
+            let isInCardArea = false;
+            let isInChartArea = false;
+            // Iterating through the data structure
+            for (let item of intersectionList) {
+                if (item.children && Array.isArray(item.children)) {
+                    for (let childItem of item.children) {
+                        if (childItem.children && Array.isArray(childItem.children)) {
+                            for (let subChildItem of childItem.children) {
+                                if (subChildItem.children && Array.isArray(subChildItem.children)) {
+                                    for (let innerChildItem of subChildItem.children) {
+                                        if (innerChildItem.presentationForm == null) {
+                                            for (const fiveChildItem of innerChildItem.children) {
+                                                if (fiveChildItem.analogAreaComponentId === id && subChildItem.name === '卡片区') {
+                                                    isInCardArea = true;
+                                                }
+                                            }
+                                        } else {
+                                            if (innerChildItem.analogAreaComponentId === id && subChildItem.name === '图表区') {
+                                                isInChartArea = true;
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            if (isInCardArea && isInChartArea) {
+                return '两个区都存在';
+            } else if (isInCardArea) {
+                return '卡片区';
+            } else if (isInChartArea) {
+                return '图表区';
+            } else {
+                return '未找到该 ID';
+            }
+        },
+        //mqtt接收数据添加最新的最多添加10条
+        addOrUpdateArrayItem(array, newItem) {
+            if (array.length === 5) {
+                array.shift(); // 删除最旧的元素
+            }
+            array.push(newItem); // 添加最新的元素
+        },
+        //mqtt接收到对数据做处理卡片
+        updateValueByVideoIdAndCommentId(data, videoId, commentId, newValue, newField, newFieldValue) {
+            for (let i = 0; i < data.length; i++) {
+                if (data[i].videoId === videoId && data[i].analogAreaComponentId === commentId) {
+                    // 修改或添加该层级的其他字段
+                    for (let field in data[i]) {
+                        if (field !== 'videoId' && field !== 'analogAreaComponentId') {
+                            data[i].triggerData = newValue;
+                        }
+                    }
+                    // 新增字段并给定新值
+                    // if (!data[i][newField]) {
+                    //     data[i][newField] = newValue;
+                    // }
+                }
+                if (data[i].children && data[i].children.length > 0) {
+                    this.updateValueByVideoIdAndCommentId(data[i].children, videoId, commentId, newValue, newField, newFieldValue); // 递归调用，继续遍历下一层级的数据
+                }
+            }
+        },
+        //mqtt接收到数据给图表添加数据
+        upDataListByVideoIdAndCommentId(data, videoId, commentId, newValue, newField, newFieldValue) {
+            for (let i = 0; i < data.length; i++) {
+                if (data[i].videoId === videoId && data[i].analogAreaComponentId === commentId) {
+                    // 修改或添加该层级的其他字段
+                    for (let field in data[i]) {
+                        if (field !== 'videoId' && field !== 'analogAreaComponentId') {
+                            data[i].triggerDataList = newValue;
+                        }
+                    }
+                    // 新增字段并给定新值
+                    // if (!data[i][newField]) {
+                    //     data[i][newField] = newValue;
+                    // }
+                }
+                if (data[i].children && data[i].children.length > 0) {
+                    this.upDataListByVideoIdAndCommentId(data[i].children, videoId, commentId, newValue, newField, newFieldValue); // 递归调用，继续遍历下一层级的数据
+                }
+            }
+        },
+        //mqtt接收到数据给图表添加数据(固定时刻)
+        upDataListByTimeData(data, videoId, commentId, newValue, newField, newFieldValue) {
+            for (let i = 0; i < data.length; i++) {
+                if (data[i].videoId === videoId && data[i].analogAreaComponentId === commentId) {
+                    // 修改或添加该层级的其他字段
+                    for (let field in data[i]) {
+                        if (field !== 'videoId' && field !== 'analogAreaComponentId') {
+                            data[i].cycleTimeData = newValue;
+                        }
+                    }
+                    // 新增字段并给定新值
+                    // if (!data[i][newField]) {
+                    //     data[i][newField] = newValue;
+                    // }
+                }
+                if (data[i].children && data[i].children.length > 0) {
+                    this.upDataListByTimeData(data[i].children, videoId, commentId, newValue, newField, newFieldValue); // 递归调用，继续遍历下一层级的数据
+                }
+            }
+        },
+        //实时触发表格添加数据
+        triggerDataCharts(data, videoId, analogAreaComponentId, newValue, time, table) {
+            for (let i = 0; i < data.length; i++) {
+                for (let j = 0; j < data[i].children.length; j++) {
+                    for (let n = 0; n < data[i].children[j].children.length; n++) {
+                        if (data[i].children[j].children[n].name == '图表区') {
+                            for (let m = 0; m < data[i].children[j].children[n].children.length; m++) {
+                                if (
+                                    data[i].children[j].children[n].children[m].videoId == videoId &&
+                                    data[i].children[j].children[n].children[m].analogAreaComponentId == analogAreaComponentId
+                                ) {
+                                    if (data[i].children[j].children[n].children[m].componentType == '类型') {
+                                        let typeData = {
+                                            name: table.name,
+                                            time: time,
+                                            type: table.type,
+                                            n_stay: table.n_stay,
+                                            n_queue: table.n_queue,
+                                            occ: table.occ,
+                                            speed: table.speed,
+                                            type_data: newValue,
+                                            originalSpeed: table.originalSpeed
+                                        };
+                                        this.addTimeDataCharts(data[i].children[j].children[n].children[m].triggerNewData, typeData);
+                                    } else {
+                                        if (data[i].children[j].children[n].children[m].triggerNewData.length > 10) {
+                                            data[i].children[j].children[n].children[m].triggerNewData =
+                                                data[i].children[j].children[n].children[m].triggerNewData.slice(-10);
+                                        }
+                                        this.addTimeDataCharts(data[i].children[j].children[n].children[m].triggerNewData, newValue);
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        //固定时刻图表添加数据
+        timeDataCharts(data, videoId, analogAreaComponentId, newValue, time, table) {
+            for (let i = 0; i < data.length; i++) {
+                for (let j = 0; j < data[i].children.length; j++) {
+                    for (let n = 0; n < data[i].children[j].children.length; n++) {
+                        if (data[i].children[j].children[n].name == '图表区') {
+                            for (let m = 0; m < data[i].children[j].children[n].children.length; m++) {
+                                if (
+                                    data[i].children[j].children[n].children[m].videoId == videoId &&
+                                    data[i].children[j].children[n].children[m].analogAreaComponentId == analogAreaComponentId
+                                ) {
+                                    if (data[i].children[j].children[n].children[m].componentType == '类型') {
+                                        let typeData = {
+                                            name: table.name,
+                                            time: time,
+                                            type: table.type,
+                                            n_stay: table.n_stay,
+                                            n_queue: table.n_queue,
+                                            occ: table.occ,
+                                            speed: table.speed,
+                                            type_data: newValue,
+                                            headway: table.headway,
+                                            avg: table.avg,
+                                            max: table.max,
+                                            med: table.med,
+                                            min: table.min,
+                                            originalSpeed: table.originalSpeed
+                                        };
+                                        // if (data[i].children[j].children[n].children[m].cycleTimeData.length > 10) {
+                                        //     data[i].children[j].children[n].children[m].cycleTimeData =
+                                        //         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.length > 10) {
+                                            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, newValue);
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        //固定间隔添加图表数据
+        cycleStatisticsDataCharts(data, videoId, analogAreaComponentId, newValue, time, table) {
+            for (let i = 0; i < data.length; i++) {
+                for (let j = 0; j < data[i].children.length; j++) {
+                    for (let n = 0; n < data[i].children[j].children.length; n++) {
+                        if (data[i].children[j].children[n].name == '图表区') {
+                            for (let m = 0; m < data[i].children[j].children[n].children.length; m++) {
+                                if (
+                                    data[i].children[j].children[n].children[m].videoId == videoId &&
+                                    data[i].children[j].children[n].children[m].analogAreaComponentId == analogAreaComponentId
+                                ) {
+                                    if (data[i].children[j].children[n].children[m].componentType == '类型') {
+                                        // let typeData = {
+                                        //     time: time,
+                                        //     type_data: newValue,
+                                        //     speed: table.speed,
+                                        //     avg: table.avg,
+                                        //     max: table.max,
+                                        //     med: table.med,
+                                        //     min: table.min,
+                                        //     name: table.name,
+                                        //     type: table.type,
+                                        //     ave_stay: table.ave_stay,
+                                        //     ave_queue: table.ave_queue,
+                                        //     occ: table.occ,
+                                        //     speed: table.speed
+                                        // };
+                                        let typeData = {
+                                            type_data: newValue,
+                                            time: time,
+                                            name: table.name,
+                                            type: table.type,
+                                            in_flow: table.in_flow,
+                                            out_flow: table.out_flow,
+                                            ave_stay: table.ave_stay,
+                                            ave_queue: table.ave_queue,
+                                            ave_occ: table.ave_occ,
+                                            ave_delay: table.ave_delay,
+                                            type_data: table.type_data,
+                                            ave_headway: table.ave_headway,
+                                            avg: table.avg,
+                                            max: table.max,
+                                            med: table.med,
+                                            min: table.min,
+                                            occ: table.occ,
+                                            originalSpeed: table.speed,
+                                            gate_id: table.gate_id,
+                                            interval: table.interval,
+                                            flow: table.flow,
+                                            in_spd: table.in_spd,
+                                            out_spd: table.out_spd
+                                        };
+                                        // if (data[i].children[j].children[n].children[m].cycleStatisticsData.length > 10) {
+                                        //     data[i].children[j].children[n].children[m].cycleStatisticsData =
+                                        //         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.length > 10) {
+                                            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, newValue);
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        //mqtt接收数据添加最新的最多添加10条(固定时刻)
+        addTimeDataCharts(array, newItem) {
+            if (array.length === 10) {
+                array.pop(); // 删除最旧的元素
+            }
+            array.unshift(newItem); // 添加最新的元素
+        },
+        //mqtt订阅
+        getMqtt() {
+            this.topicSends = [];
+            for (let i = 0; i < this.videoList.length; i++) {
+                this.topicSends.push(
+                    'trigger-' + this.videoList[i].videoId,
+                    'cycle_time-' + this.videoList[i].videoId,
+                    'cycle_statistics-' + this.videoList[i].videoId,
+                    'cycle_accumulate-' + this.videoList[i].videoId
+                );
+                this.topicVideoIdList.push({ videoId: this.videoList[i].videoId });
+            }
+            // console.log('在sensorFusion融合页面')
+            window.PubScribe(this.topicSends, -1, this.realInfo, true, '融合页面');
+        },
+        //mqtt订阅
+        realInfo(topic, message, videoId) {
+            let dataList = this.intersectionList;
+            // //console.log(topic, message, 'mqtt数据', videoId);
+            for (let i = 0; i < this.topicVideoIdList.length; i++) {
+                switch (topic) {
+                    // 接收托片
+                    case 'trigger-' + this.topicVideoIdList[i].videoId:
+                        try {
+                            //console.log("trigger_msgN",message)
+                            const utf8decoder = new TextDecoder();
+                            const u8arr = new Uint8Array(message);
+                            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
+                            var detId = [];
+                            const msgN = JSON.parse(temp);
+                            // console.log('实时触发trigger-', msgN);
+                            for (let j = 0; j < msgN.length; j++) {
+                                const locations = this.findLocationById(this.intersectionList, msgN[j].component_id);
+                                //处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
+                                let newSpeed = '-';
+                                if ((msgN[j].speed && msgN[j].speed != -1) || msgN[j].speed === 0) {
+                                    newSpeed = Math.abs(msgN[j].speed);
+                                }
+                                // if (locations == '卡片区') {
+                                if (msgN[j].component_type == '车头时距') {
+                                    // if (locations == '卡片区' || locations == '两个区都存在') {
+
+                                    //  if(locations == '图表区' || locations == '两个区都存在'){
+                                    console.log('实时触发trigger-车头时距', msgN[j]);
+                                    //图表区数组
+                                    this.addOrUpdateArrayItem(this.triggerDataList, {
+                                        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 = {
+                                        name: msgN[j].name,
+                                        time: msgN[j].time,
+                                        type: msgN[j].type,
+                                        n_stay: msgN[j].n_stay,
+                                        n_queue: msgN[j].n_queue,
+                                        occ: msgN[j].occ,
+                                        speed: newSpeed,
+                                        originalSpeed: msgN[j].speed
+                                    };
+                                    this.$nextTick(() => {
+                                        this.triggerDataCharts(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            carTou
+                                        );
+                                    });
+
+                                    //之前错误逻辑，不知道为啥怎么处理
+                                    // this.addOrUpdateArrayItem(this.tableData, {
+                                    //     name: msgN[j].name,
+                                    //     time: msgN[j].time,
+                                    //     type: msgN[j].type,
+                                    //     n_stay: msgN[j].n_stay,
+                                    //     n_queue: msgN[j].n_queue,
+                                    //     occ: msgN[j].occ,
+                                    //     speed: newSpeed,
+                                    //     originalSpeed: msgN[j].speed
+                                    // });
+                                    // }
+                                    //卡片区
+                                    let map = {
+                                        time: msgN[j].time,
+                                        headway: msgN[j].headway
+                                    };
+                                    this.$nextTick(() => {
+                                        this.updateValueByVideoIdAndCommentId(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            map
+                                        );
+                                    });
+                                } else if (msgN[j].component_type == '流量') {
+                                    // console.log('实时触发trigger-流量', msgN[j]);
+                                    //图表区
+                                    this.addOrUpdateArrayItem(this.triggerFlowData, {
+                                        time: msgN[j].time,
+                                        in_flow: msgN[j].in_flow,
+                                        out_flow: msgN[j].out_flow
+                                    });
+                                    this.$nextTick(() => {
+                                        this.upDataListByVideoIdAndCommentId(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            this.triggerFlowData
+                                        );
+                                    });
+                                    //卡片区
+                                    let flowMap = {
+                                        inFlow: msgN[j].in_flow,
+                                        outFlow: msgN[j].out_flow,
+                                        time: msgN[j].time
+                                    };
+                                    this.$nextTick(() => {
+                                        this.updateValueByVideoIdAndCommentId(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            flowMap
+                                        );
+                                    });
+                                    //表格数据
+                                    let carTou = {
+                                        name: msgN[j].name,
+                                        time: msgN[j].time,
+                                        type: msgN[j].type,
+                                        n_stay: msgN[j].n_stay,
+                                        n_queue: msgN[j].n_queue,
+                                        occ: msgN[j].occ,
+                                        speed: newSpeed,
+                                        originalSpeed: msgN[j].speed
+                                    };
+                                    this.$nextTick(() => {
+                                        this.triggerDataCharts(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            carTou
+                                        );
+                                    });
+                                    //之前错误逻辑，不知道为啥怎么处理
+                                    // this.addOrUpdateArrayItem(this.tableData, {
+                                    //     name: msgN[j].name,
+                                    //     time: msgN[j].time,
+                                    //     type: msgN[j].type,
+                                    //     n_stay: msgN[j].n_stay,
+                                    //     n_queue: msgN[j].n_queue,
+                                    //     occ: msgN[j].occ,
+                                    //     speed: newSpeed,
+                                    //     originalSpeed: msgN[j].speed
+                                    // });
+                                } else if (msgN[j].component_type == '速度') {
+                                    //卡片区
+                                    let map = {
+                                        speed: msgN[j].speed,
+                                        time: msgN[j].time
+                                    };
+                                    this.$nextTick(() => {
+                                        this.updateValueByVideoIdAndCommentId(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            map
+                                        );
+                                    });
+                                    //图表区
+                                    this.addOrUpdateArrayItem(this.triggerSpeedData, {
+                                        time: msgN[j].time,
+                                        speed: newSpeed,
+                                        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 = {
+                                        name: msgN[j].name,
+                                        time: msgN[j].time,
+                                        type: msgN[j].type,
+                                        n_stay: msgN[j].n_stay,
+                                        n_queue: msgN[j].n_queue,
+                                        occ: msgN[j].occ,
+                                        speed: newSpeed,
+                                        originalSpeed: msgN[j].speed
+                                    };
+                                    this.$nextTick(() => {
+                                        this.triggerDataCharts(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            carTou
+                                        );
+                                    });
+                                    //之前错误逻辑，不知道为啥怎么处理
+                                    // this.addOrUpdateArrayItem(this.tableData, {
+                                    //     name: msgN[j].name,
+                                    //     time: msgN[j].time,
+                                    //     type: msgN[j].type,
+                                    //     n_stay: msgN[j].n_stay,
+                                    //     n_queue: msgN[j].n_queue,
+                                    //     occ: msgN[j].occ,
+                                    //     speed: newSpeed,
+                                    //     originalSpeed: msgN[j].speed
+                                    // });
+                                } else if (msgN[j].component_type == '类型') {
+                                    //console.log('实时触发-类型-', msgN[j].type_data);
+                                    let map = {
+                                        type_data: msgN[j].type_data,
+                                        time: msgN[j].time
+                                    };
+                                    //卡片区
+                                    this.$nextTick(() => {
+                                        this.updateValueByVideoIdAndCommentId(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            map
+                                        );
+                                    });
+                                    //图表区
+                                    // this.triggerTypeData = msgN[j].type_data;
+                                    this.triggerTypeData = [
+                                        {
+                                            type_data: msgN[j].type_data,
+                                            time: msgN[j].time
+                                        }
+                                    ];
+                                    // this.addOrUpdateArrayItem(this.triggerTypeData, {
+                                    //     type_data: msgN[j].type_data,
+                                    //      time: msgN[j].time,
+                                    // });
+                                    this.$nextTick(() => {
+                                        this.upDataListByVideoIdAndCommentId(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            this.triggerTypeData
+                                        );
+                                    });
+                                    //表格数据 类型有点特殊需要重新比对
+                                    let carTou = {
+                                        name: msgN[j].name,
+                                        time: msgN[j].time,
+                                        type: msgN[j].type,
+                                        n_stay: msgN[j].n_stay,
+                                        n_queue: msgN[j].n_queue,
+                                        occ: msgN[j].occ,
+                                        speed: newSpeed,
+                                        originalSpeed: msgN[j].speed,
+                                        type_data: msgN[j].type_data
+                                    };
+                                    this.$nextTick(() => {
+                                        this.triggerDataCharts(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            msgN[j].type_data,
+                                            msgN[j].time,
+                                            carTou
+                                        );
+                                    });
+                                    //之前错误逻辑，不知道为啥怎么处理
+                                    // this.addOrUpdateArrayItem(this.tableData, {
+                                    //     name: msgN[j].name,
+                                    //     time: msgN[j].time,
+                                    //     type: msgN[j].type,
+                                    //     n_stay: msgN[j].n_stay,
+                                    //     n_queue: msgN[j].n_queue,
+                                    //     occ: msgN[j].occ,
+                                    //     speed: newSpeed,
+                                    //     originalSpeed: msgN[j].speed
+                                    // });
+                                } else if (msgN[j].component_type == '检测数') {
+                                    let map = {
+                                        n_stay: msgN[j].n_stay,
+                                        time: msgN[j].time
+                                    };
+                                    //卡片区
+                                    this.$nextTick(() => {
+                                        this.updateValueByVideoIdAndCommentId(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            map
+                                        );
+                                    });
+                                    //图表区
+                                    this.addOrUpdateArrayItem(this.triggerNStayData, {
+                                        time: msgN[j].time,
+                                        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 = {
+                                        name: msgN[j].name,
+                                        time: msgN[j].time,
+                                        type: msgN[j].type,
+                                        n_stay: msgN[j].n_stay,
+                                        n_queue: msgN[j].n_queue,
+                                        occ: msgN[j].occ,
+                                        speed: newSpeed,
+                                        originalSpeed: msgN[j].speed
+                                    };
+                                    this.$nextTick(() => {
+                                        this.triggerDataCharts(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            carTou
+                                        );
+                                    });
+                                    //之前错误逻辑，不知道为啥怎么处理
+                                    // this.addOrUpdateArrayItem(this.tableData, {
+                                    //     name: msgN[j].name,
+                                    //     time: msgN[j].time,
+                                    //     type: msgN[j].type,
+                                    //     n_stay: msgN[j].n_stay,
+                                    //     n_queue: msgN[j].n_queue,
+                                    //     occ: msgN[j].occ,
+                                    //     speed: newSpeed,
+                                    //     originalSpeed: msgN[j].speed
+                                    // });
+                                } else if (msgN[j].component_type == '排队数') {
+                                    let map = {
+                                        n_queue: msgN[j].n_queue,
+                                        time: msgN[j].time
+                                    };
+                                    this.$nextTick(() => {
+                                        this.updateValueByVideoIdAndCommentId(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            map
+                                        );
+                                    });
+                                    //图表区
+                                    this.addOrUpdateArrayItem(this.triggerNQueueData, {
+                                        time: msgN[j].time,
+                                        n_queue: msgN[j].n_queue
+                                    });
+                                    this.$nextTick(() => {
+                                        this.upDataListByVideoIdAndCommentId(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            this.triggerNQueueData
+                                        );
+                                    });
+                                    //表格数据
+                                    let carTou = {
+                                        name: msgN[j].name,
+                                        time: msgN[j].time,
+                                        type: msgN[j].type,
+                                        n_stay: msgN[j].n_stay,
+                                        n_queue: msgN[j].n_queue,
+                                        occ: msgN[j].occ,
+                                        speed: newSpeed,
+                                        originalSpeed: msgN[j].speed
+                                    };
+                                    this.$nextTick(() => {
+                                        this.triggerDataCharts(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            carTou
+                                        );
+                                    });
+                                    //之前错误逻辑，不知道为啥怎么处理
+                                    // this.addOrUpdateArrayItem(this.tableData, {
+                                    //     name: msgN[j].name,
+                                    //     time: msgN[j].time,
+                                    //     type: msgN[j].type,
+                                    //     n_stay: msgN[j].n_stay,
+                                    //     n_queue: msgN[j].n_queue,
+                                    //     occ: msgN[j].occ,
+                                    //     speed: newSpeed,
+                                    //     originalSpeed: msgN[j].speed
+                                    // });
+                                } else if (msgN[j].component_type == 'OD') {
+                                    //图表区 - TODO 估计有未知问题
+                                    this.addOrUpdateArrayItem(this.triggerODData, {
+                                        ob_data: msgN[j].ob_data
+                                    });
+                                    this.$nextTick(() => {
+                                        this.upDataListByVideoIdAndCommentId(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            this.triggerODData
+                                        );
+                                    });
+                                }
+                            }
+                        } catch (error) {}
+                        break;
+                    case 'cycle_time-' + this.topicVideoIdList[i].videoId:
+                        try {
+                            //  //console.log("trigger_msgN",message)
+                            const utf8decoder = new TextDecoder();
+                            const u8arr = new Uint8Array(message);
+                            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
+                            const msgN = JSON.parse(temp);
+                            // console.log('固定时刻', msgN);
+                            for (let j = 0; j < msgN.length; j++) {
+                                const locations = this.findLocationById(this.intersectionList, msgN[j].component_id);
+                                //处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
+                                let newSpeed = '-';
+                                if ((msgN[j].speed && msgN[j].speed != -1) || msgN[j].speed === 0) {
+                                    newSpeed = Math.abs(msgN[j].speed);
+                                }
+                                if (msgN[j].component_type == '车头时距') {
+                                    //图表区数组加表格数据
+                                    let carTou = {
+                                        name: msgN[j].name,
+                                        time: msgN[j].time,
+                                        type: msgN[j].type,
+                                        n_stay: msgN[j].n_stay,
+                                        n_queue: msgN[j].n_queue,
+                                        occ: msgN[j].occ,
+                                        speed: newSpeed,
+                                        headway: msgN[j].headway,
+                                        avg: msgN[j].avg,
+                                        max: msgN[j].max,
+                                        med: msgN[j].med,
+                                        min: msgN[j].min,
+                                        originalSpeed: msgN[j].speed
+                                    };
+                                    this.$nextTick(() => {
+                                        this.timeDataCharts(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            carTou
+                                        );
+                                    });
+                                    //卡片区
+                                    let map = {
+                                        headway: msgN[j].headway,
+                                        time: msgN[j].time
+                                    };
+                                    this.$nextTick(() => {
+                                        this.updateValueByVideoIdAndCommentId(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            map
+                                        );
+                                        //console.log(this.intersectionList, 'this.intersectionList');
+                                    });
+                                } else if (msgN[j].component_type == '速度') {
+                                    //卡片区
+                                    let map = {
+                                        speed: msgN[j].speed,
+                                        time: msgN[j].time
+                                    };
+                                    this.$nextTick(() => {
+                                        this.updateValueByVideoIdAndCommentId(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            map
+                                        );
+                                    });
+                                    //图表区
+                                    let speedMap = {
+                                        name: msgN[j].name,
+                                        time: msgN[j].time,
+                                        type: msgN[j].type,
+                                        n_stay: msgN[j].n_stay,
+                                        n_queue: msgN[j].n_queue,
+                                        occ: msgN[j].occ,
+                                        speed: newSpeed,
+                                        headway: msgN[j].headway,
+                                        avg: msgN[j].avg,
+                                        max: msgN[j].max,
+                                        med: msgN[j].med,
+                                        min: msgN[j].min,
+                                        originalSpeed: msgN[j].speed
+                                    };
+                                    this.$nextTick(() => {
+                                        this.timeDataCharts(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            speedMap
+                                        );
+                                    });
+                                } else if (msgN[j].component_type == '类型') {
+                                    //卡片区
+                                    let map = {
+                                        type_data: msgN[j].type_data,
+                                        time: msgN[j].time
+                                    };
+                                    this.$nextTick(() => {
+                                        this.updateValueByVideoIdAndCommentId(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            map
+                                        );
+                                    });
+                                    //图表区
+                                    let table = {
+                                        name: msgN[j].name,
+                                        time: msgN[j].time,
+                                        type: msgN[j].type,
+                                        n_stay: msgN[j].n_stay,
+                                        n_queue: msgN[j].n_queue,
+                                        occ: msgN[j].occ,
+                                        speed: newSpeed,
+                                        type_data: msgN[j].type_data,
+                                        headway: msgN[j].headway,
+                                        avg: msgN[j].avg,
+                                        max: msgN[j].max,
+                                        med: msgN[j].med,
+                                        min: msgN[j].min,
+                                        originalSpeed: msgN[j].speed
+                                    };
+                                    this.$nextTick(() => {
+                                        this.timeDataCharts(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            msgN[j].type_data,
+                                            msgN[j].time,
+                                            table
+                                        );
+                                    });
+                                } else if (msgN[j].component_type == 'OD') {
+                                    //图表区
+                                    // this.addOrUpdateArrayItem(this.triggerODData, {
+                                    //     ob_data: msgN[j].ob_data
+                                    // });
+                                    let table = {
+                                        ob_data: msgN[j].ob_data
+                                    };
+                                    this.$nextTick(() => {
+                                        this.timeDataCharts(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            table
+                                        );
+                                    });
+                                }
+                            }
+                        } catch (error) {}
+                        break;
+                    case 'cycle_statistics-' + this.topicVideoIdList[i].videoId:
+                        try {
+                            //  //console.log("trigger_msgN",message)
+                            const utf8decoder = new TextDecoder();
+                            const u8arr = new Uint8Array(message);
+                            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
+                            var detId = [];
+                            const msgN = JSON.parse(temp);
+                            //console.log('固定间隔', msgN, this.topicVideoIdList[i].videoId);
+                            // this.cycleStatisticsData = msgN;
+                            // console.log('固定间隔', msgN);
+                            for (let j = 0; j < msgN.length; j++) {
+                                //处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
+                                let newSpeed = '-',
+                                    aveHeadway = msgN[j].ave_headway;
+                                if ((msgN[j].speed && msgN[j].speed != -1) || msgN[j].speed === 0) {
+                                    newSpeed = Math.abs(msgN[j].speed);
+                                }
+                                if (msgN[j].ave_headway == -1) {
+                                    aveHeadway = '-';
+                                }
+                                if (msgN[j].component_type == '车头时距') {
+                                    // console.log('固定间隔-车头时距', sgN[j]);
+                                    //图表区数组加表格数据
+                                    let carTou = {
+                                        name: msgN[j].name,
+                                        time: msgN[j].time,
+                                        type: msgN[j].type,
+                                        in_flow: msgN[j].in_flow,
+                                        out_flow: msgN[j].out_flow,
+                                        ave_stay: msgN[j].ave_stay,
+                                        ave_queue: msgN[j].ave_queue,
+                                        ave_occ: msgN[j].ave_occ,
+                                        ave_delay: msgN[j].ave_delay,
+                                        speed: newSpeed,
+                                        ave_headway: aveHeadway,
+                                        avg: msgN[j].avg,
+                                        max: msgN[j].max,
+                                        med: msgN[j].med,
+                                        min: msgN[j].min,
+                                        occ: msgN[j].occ,
+                                        originalSpeed: msgN[j].speed,
+                                        gate_id: msgN[j].gate_id,
+                                        interval: msgN[j].interval,
+                                        flow: msgN[j].flow,
+                                        in_spd: msgN[j].in_spd,
+                                        out_spd: msgN[j].out_spd
+                                    };
+                                    this.$nextTick(() => {
+                                        this.cycleStatisticsDataCharts(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            carTou
+                                        );
+                                    });
+                                    //卡片区
+                                    let map = {
+                                        ave_headway: aveHeadway,
+                                        time: msgN[j].time
+                                    };
+                                    this.$nextTick(() => {
+                                        this.updateValueByVideoIdAndCommentId(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            map
+                                        );
+                                    });
+                                } else if (msgN[j].component_type == '速度') {
+                                    // console.log('固定间隔-速度', msgN[j].speed)
+                                    //卡片区
+                                    let map = {
+                                        speed: msgN[j].speed,
+                                        time: msgN[j].time
+                                    };
+                                    this.$nextTick(() => {
+                                        this.updateValueByVideoIdAndCommentId(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            map
+                                        );
+                                    });
+                                    //图表区
+                                    let speedMap = {
+                                        name: msgN[j].name,
+                                        time: msgN[j].time,
+                                        type: msgN[j].type,
+                                        in_flow: msgN[j].in_flow,
+                                        out_flow: msgN[j].out_flow,
+                                        ave_stay: msgN[j].ave_stay,
+                                        ave_queue: msgN[j].ave_queue,
+                                        ave_occ: msgN[j].ave_occ,
+                                        ave_delay: msgN[j].ave_delay,
+                                        speed: newSpeed,
+                                        ave_headway: aveHeadway,
+                                        avg: msgN[j].avg,
+                                        max: msgN[j].max,
+                                        med: msgN[j].med,
+                                        min: msgN[j].min,
+                                        occ: msgN[j].occ,
+                                        originalSpeed: msgN[j].speed,
+                                        gate_id: msgN[j].gate_id,
+                                        interval: msgN[j].interval,
+                                        flow: msgN[j].flow,
+                                        in_spd: msgN[j].in_spd,
+                                        out_spd: msgN[j].out_spd
+                                    };
+                                    this.$nextTick(() => {
+                                        this.cycleStatisticsDataCharts(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            speedMap
+                                        );
+                                    });
+                                } else if (msgN[j].component_type == '类型') {
+                                    // console.log('固定间隔-类型', JSON.stringify(msgN[j].type_data))
+                                    // console.log('固定间隔-类型', JSON.stringify(msgN[j].time))
+                                    //卡片区
+                                    let map = {
+                                        type_data: msgN[j].type_data,
+                                        time: msgN[j].time
+                                    };
+                                    this.$nextTick(() => {
+                                        this.updateValueByVideoIdAndCommentId(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            map
+                                        );
+                                    });
+                                    //图表区
+                                    let table = {
+                                        name: msgN[j].name,
+                                        time: msgN[j].time,
+                                        type: msgN[j].type,
+                                        in_flow: msgN[j].in_flow,
+                                        out_flow: msgN[j].out_flow,
+                                        ave_stay: msgN[j].ave_stay,
+                                        ave_queue: msgN[j].ave_queue,
+                                        ave_occ: msgN[j].ave_occ,
+                                        ave_delay: msgN[j].ave_delay,
+                                        speed: newSpeed,
+                                        type_data: msgN[j].type_data,
+                                        ave_headway: aveHeadway,
+                                        avg: msgN[j].avg,
+                                        max: msgN[j].max,
+                                        med: msgN[j].med,
+                                        min: msgN[j].min,
+                                        occ: msgN[j].occ,
+                                        originalSpeed: msgN[j].speed,
+                                        gate_id: msgN[j].gate_id,
+                                        interval: msgN[j].interval,
+                                        flow: msgN[j].flow,
+                                        in_spd: msgN[j].in_spd,
+                                        out_spd: msgN[j].out_spd
+                                    };
+                                    this.$nextTick(() => {
+                                        this.cycleStatisticsDataCharts(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            msgN[j].type_data,
+                                            msgN[j].time,
+                                            table
+                                        );
+                                    });
+                                } else if (msgN[j].component_type == '流量') {
+                                    //卡片区
+                                    let flowMap = {
+                                        inFlow: msgN[j].in_flow,
+                                        outFlow: msgN[j].out_flow,
+                                        time: msgN[j].time
+                                    };
+                                    this.$nextTick(() => {
+                                        this.updateValueByVideoIdAndCommentId(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            flowMap
+                                        );
+                                    });
+                                    //图表区
+                                    let table = {
+                                        name: msgN[j].name,
+                                        time: msgN[j].time,
+                                        type: msgN[j].type,
+                                        in_flow: msgN[j].in_flow,
+                                        out_flow: msgN[j].out_flow,
+                                        ave_stay: msgN[j].ave_stay,
+                                        ave_queue: msgN[j].ave_queue,
+                                        ave_occ: msgN[j].ave_occ,
+                                        ave_delay: msgN[j].ave_delay,
+                                        speed: newSpeed,
+                                        ave_headway: aveHeadway,
+                                        avg: msgN[j].avg,
+                                        max: msgN[j].max,
+                                        med: msgN[j].med,
+                                        min: msgN[j].min,
+                                        occ: msgN[j].occ,
+                                        originalSpeed: msgN[j].speed,
+                                        gate_id: msgN[j].gate_id,
+                                        interval: msgN[j].interval,
+                                        flow: msgN[j].flow,
+                                        in_spd: msgN[j].in_spd,
+                                        out_spd: msgN[j].out_spd
+                                    };
+                                    this.$nextTick(() => {
+                                        this.cycleStatisticsDataCharts(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            table
+                                        );
+                                    });
+                                } else if (msgN[j].component_type == '检测数') {
+                                    let map = {
+                                        ave_stay: msgN[j].ave_stay,
+                                        time: msgN[j].time
+                                    };
+                                    this.$nextTick(() => {
+                                        this.updateValueByVideoIdAndCommentId(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            map
+                                        );
+                                    });
+                                    //图表
+                                    let table = {
+                                        name: msgN[j].name,
+                                        time: msgN[j].time,
+                                        type: msgN[j].type,
+                                        in_flow: msgN[j].in_flow,
+                                        out_flow: msgN[j].out_flow,
+                                        ave_stay: msgN[j].ave_stay,
+                                        ave_queue: msgN[j].ave_queue,
+                                        ave_occ: msgN[j].ave_occ,
+                                        ave_delay: msgN[j].ave_delay,
+                                        speed: newSpeed,
+                                        ave_headway: aveHeadway,
+                                        avg: msgN[j].avg,
+                                        max: msgN[j].max,
+                                        med: msgN[j].med,
+                                        min: msgN[j].min,
+                                        occ: msgN[j].occ,
+                                        originalSpeed: msgN[j].speed,
+                                        gate_id: msgN[j].gate_id,
+                                        interval: msgN[j].interval,
+                                        flow: msgN[j].flow,
+                                        in_spd: msgN[j].in_spd,
+                                        out_spd: msgN[j].out_spd
+                                    };
+                                    this.$nextTick(() => {
+                                        this.cycleStatisticsDataCharts(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            table
+                                        );
+                                    });
+                                } else if (msgN[j].component_type == '排队数') {
+                                    let map = {
+                                        ave_queue: msgN[j].ave_queue,
+                                        time: msgN[j].time
+                                    };
+                                    this.$nextTick(() => {
+                                        this.updateValueByVideoIdAndCommentId(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            map
+                                        );
+                                    });
+                                    //图表
+                                    let table = {
+                                        name: msgN[j].name,
+                                        time: msgN[j].time,
+                                        type: msgN[j].type,
+                                        in_flow: msgN[j].in_flow,
+                                        out_flow: msgN[j].out_flow,
+                                        ave_stay: msgN[j].ave_stay,
+                                        ave_queue: msgN[j].ave_queue,
+                                        ave_occ: msgN[j].ave_occ,
+                                        ave_delay: msgN[j].ave_delay,
+                                        speed: newSpeed,
+                                        ave_headway: aveHeadway,
+                                        avg: msgN[j].avg,
+                                        max: msgN[j].max,
+                                        med: msgN[j].med,
+                                        min: msgN[j].min,
+                                        occ: msgN[j].occ,
+                                        originalSpeed: msgN[j].speed,
+                                        gate_id: msgN[j].gate_id,
+                                        interval: msgN[j].interval,
+                                        flow: msgN[j].flow,
+                                        in_spd: msgN[j].in_spd,
+                                        out_spd: msgN[j].out_spd
+                                    };
+                                    this.$nextTick(() => {
+                                        this.cycleStatisticsDataCharts(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            table
+                                        );
+                                    });
+                                } else if (msgN[j].component_type == '延误') {
+                                    // console.log('固定间隔-延误', msgN[j]);
+                                    let map = {
+                                        ave_delay: msgN[j].ave_delay,
+                                        time: msgN[j].time
+                                    };
+
+                                    this.$nextTick(() => {
+                                        this.updateValueByVideoIdAndCommentId(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            map
+                                        );
+                                    });
+                                    //图表
+                                    let table = {
+                                        name: msgN[j].name,
+                                        time: msgN[j].time,
+                                        type: msgN[j].type,
+                                        in_flow: msgN[j].in_flow,
+                                        out_flow: msgN[j].out_flow,
+                                        ave_stay: msgN[j].ave_stay,
+                                        ave_queue: msgN[j].ave_queue,
+                                        ave_occ: msgN[j].ave_occ,
+                                        ave_delay: msgN[j].ave_delay,
+                                        speed: newSpeed,
+                                        ave_headway: aveHeadway,
+                                        avg: msgN[j].avg,
+                                        max: msgN[j].max,
+                                        med: msgN[j].med,
+                                        min: msgN[j].min,
+                                        occ: msgN[j].occ,
+                                        originalSpeed: msgN[j].speed,
+                                        gate_id: msgN[j].gate_id,
+                                        interval: msgN[j].interval,
+                                        flow: msgN[j].flow,
+                                        in_spd: msgN[j].in_spd,
+                                        out_spd: msgN[j].out_spd
+                                    };
+                                    this.$nextTick(() => {
+                                        this.cycleStatisticsDataCharts(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            table
+                                        );
+                                    });
+                                } else if (msgN[j].component_type == 'OD') {
+                                    //图表区
+                                    // this.addOrUpdateArrayItem(this.triggerODData, {
+                                    //     ob_data: msgN[j].ob_data
+                                    // });
+                                    // console.log('固定间隔-OD',  JSON.stringify(msgN[j]));
+                                    let table = {
+                                        ob_data: msgN[j].ob_data
+                                    };
+                                    this.$nextTick(() => {
+                                        this.cycleStatisticsDataCharts(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            table
+                                        );
+                                    });
+                                }
+                            }
+                        } catch (error) {}
+                        break;
+                    case 'cycle_accumulate-' + this.topicVideoIdList[i].videoId:
+                        try {
+                            //  //console.log("trigger_msgN",message)
+                            const utf8decoder = new TextDecoder();
+                            const u8arr = new Uint8Array(message);
+                            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
+                            var detId = [];
+                            const msgN = JSON.parse(temp);
+                            //console.log('周期', msgN, this.topicVideoIdList[i].videoId);
+                            // this.cycleStatisticsData = msgN;
+                            for (let j = 0; j < msgN.length; j++) {
+                                //处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
+                                let newSpeed = '-',
+                                    aveHeadway = msgN[j].ave_headway;
+                                if ((msgN[j].speed && msgN[j].speed != -1) || msgN[j].speed === 0) {
+                                    newSpeed = Math.abs(msgN[j].speed);
+                                }
+                                if (msgN[j].ave_headway == -1) {
+                                    aveHeadway = '-';
+                                }
+                                if (msgN[j].component_type == '车头时距') {
+                                    //卡片区
+                                    let map = {
+                                        ave_headway: aveHeadway,
+                                        time: msgN[j].time
+                                    };
+                                    this.$nextTick(() => {
+                                        this.updateValueByVideoIdAndCommentId(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            map
+                                        );
+                                    });
+                                } else if (msgN[j].component_type == '速度') {
+                                    //卡片区
+                                    let map = {
+                                        speed: msgN[j].speed,
+                                        time: msgN[j].time
+                                    };
+                                    this.$nextTick(() => {
+                                        this.updateValueByVideoIdAndCommentId(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            map
+                                        );
+                                    });
+                                } else if (msgN[j].component_type == '类型') {
+                                    //卡片区
+                                    let map = {
+                                        type_data: msgN[j].type_data,
+                                        time: msgN[j].time
+                                    };
+                                    this.$nextTick(() => {
+                                        this.updateValueByVideoIdAndCommentId(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            map
+                                        );
+                                    });
+                                } else if (msgN[j].component_type == '流量') {
+                                    //卡片区
+                                    let flowMap = {
+                                        inFlow: msgN[j].in_flow,
+                                        outFlow: msgN[j].out_flow,
+                                        time: msgN[j].time
+                                    };
+                                    this.$nextTick(() => {
+                                        this.updateValueByVideoIdAndCommentId(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            flowMap
+                                        );
+                                    });
+                                } else if (msgN[j].component_type == '检测数') {
+                                    let map = {
+                                        ave_stay: msgN[j].ave_stay,
+                                        time: msgN[j].time
+                                    };
+                                    this.$nextTick(() => {
+                                        this.updateValueByVideoIdAndCommentId(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            map
+                                        );
+                                    });
+                                } else if (msgN[j].component_type == '排队数') {
+                                    let map = {
+                                        ave_queue: msgN[j].ave_queue,
+                                        time: msgN[j].time
+                                    };
+                                    this.$nextTick(() => {
+                                        this.updateValueByVideoIdAndCommentId(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            map
+                                        );
+                                    });
+                                } else if (msgN[j].component_type == '延误') {
+                                    let map = {
+                                        ave_delay: msgN[j].ave_delay,
+                                        time: msgN[j].time
+                                    };
+
+                                    this.$nextTick(() => {
+                                        this.updateValueByVideoIdAndCommentId(
+                                            this.intersectionList,
+                                            this.topicVideoIdList[i].videoId,
+                                            msgN[j].component_id,
+                                            map
+                                        );
+                                    });
+                                } else if (msgN[j].component_type == 'OD') {
+                                }
+                            }
+                        } catch (error) {}
+                        break;
+                }
+            }
+        }
+    },
+    computed: {},
+    // watch: {
+    //     intersectionList: {
+    //         handler: function (oldValues, newValues) {},
+    //     }
+    // },
+    components: {
+        chartsLine, //线型
+        chartsPie, //饼图
+        chartsBar, //柱状图
+        MeanValue, //均值图
+        thermalOD, //OD
+        tableShow,
+        regionTable
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.content-box {
+    /deep/ .el-collapse-item__header {
+        color: rgb(71, 161, 255);
+        padding: 0px 1%;
+        font-size: 15px;
+        margin-left: 0;
+        box-sizing: border-box;
+    }
+    /deep/ .el-collapse-item__arrow {
+        color: #303133;
+    }
+    /deep/ .el-collapse-item__wrap {
+        border-top: 2px solid rgba(71, 94, 115, 0.2);
+    }
+    .cardList {
+        position: relative;
+        cursor: pointer;
+        .type {
+            position: absolute;
+            left: 0;
+            top: 0px;
+            z-index: 98;
+        }
+        .name {
+            position: absolute;
+            left: 7px;
+            top: 0px;
+            z-index: 99;
+        }
+        .statusN {
+            position: absolute;
+            left: 30px;
+            top: 0px;
+            z-index: 97;
+        }
+        .statusName {
+            position: absolute;
+            left: 45px;
+            top: 6px;
+            z-index: 99;
+            color: #eee;
+        }
+    }
+}
+.videoContent {
+    width: 381px;
+    height: 214px;
+}
+.footImg {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-bottom: 10px;
+}
+.tabsList {
+    /deep/ .el-collapse-item__wrap {
+        border-top: none;
+    }
+    .collapseList {
+        /deep/ .el-collapse-item__content {
+            width: 100%;
+            display: flex;
+            justify-content: flex-start;
+        }
+    }
+}
+.buttonType {
+    color: rgb(105, 105, 105);
+    font-size: 19px;
+    position: relative;
+    top: 3.2%;
+    left: 97%;
+    z-index: 999;
+    padding: 0;
+}
+.cardChatPentar0 {
+    width: 70%;
+    height: 100%;
+    .cardArea {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: flex-start;
+        .intersectionCard {
+            width: 350px;
+            height: 340px;
+            background: rgba(71, 94, 115, 0.1);
+            display: flex;
+            padding: 0.5%;
+            margin-left: 1%;
+            box-sizing: border-box;
+            flex-wrap: wrap;
+            justify-content: flex-start;
+            align-content: flex-start;
+            overflow-y: auto;
+            .intersectionCardTitle {
+                margin-top: 1%;
+                width: 100%;
+                height: 20px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                font-size: 17px;
+                // position: absolute;
+            }
+            .boxList {
+                height: 42%;
+                width: 30%;
+                margin-left: 2.5%;
+                margin-top: 2.5%;
+                /deep/ .el-card__header {
+                    padding: 0;
+                }
+
+                .clearfix {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                }
+                /deep/.el-card__body {
+                    padding: 0;
+                    .cardContent {
+                        display: flex;
+                        flex-direction: column;
+                        align-items: center;
+                        .count {
+                            height: 40px;
+                            display: flex;
+                            align-items: baseline;
+                        }
+                        .time {
+                            font-size: 12px;
+                            display: flex;
+                            align-items: center;
+                            flex-direction: column;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+.cardChatPentar1 {
+    width: 30%;
+    height: 100%;
+    .chantArea {
+        width: 100%;
+        height: 100%;
+        .chartSection {
+            width: 440px;
+            height: 340px;
+            background: rgba(71, 94, 115, 0.1);
+            // margin-left: 1%;
+            display: flex;
+            flex-direction: column;
+            box-sizing: border-box;
+            overflow: hidden;
+            .buttonList {
+                height: 17%;
+                width: 100%;
+                display: flex;
+                align-items: center;
+                overflow-x: auto;
+                // margin-left: 3%;
+                box-sizing: border-box;
+                padding: 0 3%;
+            }
+            .echartsList {
+                width: 100%;
+                height: calc(100% - 17%);
+                .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;
+                }
+            }
+            // .echarts {
+            //     width: 100%;
+            //     height: calc(100% - 17%);
+            // }
+            // .echarts1 {
+            //     width: 100%;
+            //     height: calc(100% - 17%);
+            // }
+        }
+    }
+}
+/deep/ .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 15px;
+    padding-right: 8px;
+    .btnbox {
+        display: flex;
+        align-items: center;
+        .spanbox {
+            width: 25px;
+        }
+    }
+}
+/deep/ .el-dialog__footer {
+    text-align: right !important;
+}
+.dataConfiguration {
+    /deep/ .el-dialog__wrapper {
+        overflow: hidden;
+    }
+    /deep/ .el-dialog {
+        // overflow: auto;
+        height: 85%;
+    }
+    /deep/ .el-dialog--center .el-dialog__body {
+        overflow: auto;
+        height: 80%;
+        padding-top: 5px;
+    }
+    ::-webkit-scrollbar {
+        display: none;
+    }
+    /deep/ .el-dialog__header {
+        border-bottom: 2px solid rgba(71, 94, 115, 0.2);
+    }
+    /deep/ .el-tree-node__content {
+        margin-top: 5px;
+        background: rgba(172, 172, 172, 0.03);
+    }
+    /deep/ .el-tree-node__content:hover {
+        background: rgba(172, 172, 172, 0.03);
+    }
+    /deep/ .el-tree-node__expand-icon {
+        background: url(../../assets/img/tree.png) no-repeat;
+        background-size: 100% 100%;
+        width: 10px;
+        height: 16px;
+        color: transparent;
+        margin-right: 8px;
+    }
+    /deep/ .el-tree-node__expand-icon.is-leaf {
+        background: transparent;
+        width: 12px;
+        height: 18px;
+        color: transparent;
+        margin-right: 8px;
+    }
+    /deep/ .el-input__inner {
+        height: 26px;
+    }
+}
+.custom-tree-node {
+    height: 26px;
+}
+.containerTitle {
+    white-space: nowrap;
+    overflow: hidden;
+    width: 100%;
+    text-overflow: ellipsis;
+    padding-left: 3px;
+    box-sizing: border-box;
+}
+.containerTitle1 {
+    white-space: nowrap;
+    overflow: hidden;
+    width: 100%;
+    text-overflow: ellipsis;
+    padding-left: 3px;
+    box-sizing: border-box;
+}
+.containerTitle.hovered {
+    overflow: visible;
+}
+.containerTitle1.hovered {
+    overflow: visible;
+}
+// .tooltip {
+//     position: absolute;
+//     background-color: #f7f7f7;
+//     border: 1px solid #ccc;
+// }
+/deep/ .el-empty {
+    padding: 20px 0;
+}
+.titleIcon {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: rgb(50, 151, 255);
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 8px;
+}
+</style>
diff --git a/src/views/sensorFusion/index.vue b/src/views/sensorFusion/index.vue
index c130198..e038b3c 100644
--- a/src/views/sensorFusion/index.vue
+++ b/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);
-                                    } else {
-                                        if (data[i].children[j].children[n].children[m].triggerNewData.length > 10) {
-                                            data[i].children[j].children[n].children[m].triggerNewData =
-                                                data[i].children[j].children[n].children[m].triggerNewData.slice(-10);
+                                        if (!data[i].children[j].children[n].children[m].triggerDataList) {
+                                            data[i].children[j].children[n].children[m].triggerDataList = [];
                                         }
-                                        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) {
-                                        //     data[i].children[j].children[n].children[m].cycleTimeData =
-                                        //         data[i].children[j].children[n].children[m].cycleTimeData.slice(-10);
-                                        // }
+                                        if (!data[i].children[j].children[n].children[m].cycleTimeData) {
+                                            data[i].children[j].children[n].children[m].cycleTimeData = [];
+                                        }
                                         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) {
-                                        //     data[i].children[j].children[n].children[m].cycleStatisticsData =
-                                        //         data[i].children[j].children[n].children[m].cycleStatisticsData.slice(-10);
-                                        // }
+                                        if (!data[i].children[j].children[n].children[m].cycleStatisticsData) {
+                                            data[i].children[j].children[n].children[m].cycleStatisticsData = [];
+                                        }
                                         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, {
-                                        time: msgN[j].time,
+                                    // this.addOrUpdateArrayItem(this.triggerDataList, {
+                                    //     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
-                                    });
-                                    this.$nextTick(() => {
-                                        this.upDataListByVideoIdAndCommentId(
-                                            this.intersectionList,
-                                            this.topicVideoIdList[i].videoId,
-                                            msgN[j].component_id,
-                                            this.triggerDataList
-                                        );
-                                    });
-                                    //表格数据
-                                    let carTou = {
+                                        min: msgN[j].min,
                                         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, {
-                                        time: msgN[j].time,
-                                        in_flow: msgN[j].in_flow,
-                                        out_flow: msgN[j].out_flow
-                                    });
-                                    this.$nextTick(() => {
-                                        this.upDataListByVideoIdAndCommentId(
-                                            this.intersectionList,
-                                            this.topicVideoIdList[i].videoId,
-                                            msgN[j].component_id,
-                                            this.triggerFlowData
-                                        );
-                                    });
+                                    // this.addOrUpdateArrayItem(this.triggerFlowData, {
+                                    //     time: msgN[j].time,
+                                    //     in_flow: msgN[j].in_flow,
+                                    //     out_flow: msgN[j].out_flow
+                                    // });
+                                    // this.$nextTick(() => {
+                                    //     this.upDataListByVideoIdAndCommentId(
+                                    //         this.intersectionList,
+                                    //         this.topicVideoIdList[i].videoId,
+                                    //         msgN[j].component_id,
+                                    //         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, {
-                                        time: msgN[j].time,
-                                        speed: newSpeed,
-                                        originalSpeed: msgN[j].speed,
+                                    // this.addOrUpdateArrayItem(this.triggerSpeedData, {
+                                    //     time: msgN[j].time,
+                                    //     speed: newSpeed,
+                                    //     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
-                                    });
-                                    this.$nextTick(() => {
-                                        this.upDataListByVideoIdAndCommentId(
-                                            this.intersectionList,
-                                            this.topicVideoIdList[i].videoId,
-                                            msgN[j].component_id,
-                                            this.triggerSpeedData
-                                        );
-                                    });
-                                    //表格数据
-                                    let carTou = {
+                                        min: msgN[j].min,
                                         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 = [
-                                        {
-                                            type_data: msgN[j].type_data,
-                                            time: msgN[j].time
-                                        }
-                                    ];
+                                    // this.triggerTypeData = [
+                                    //     {
+                                    //         type_data: msgN[j].type_data,
+                                    //         time: msgN[j].time
+                                    //     }
+                                    // ];
                                     // this.addOrUpdateArrayItem(this.triggerTypeData, {
                                     //     type_data: msgN[j].type_data,
                                     //      time: msgN[j].time,
                                     // });
-                                    this.$nextTick(() => {
-                                        this.upDataListByVideoIdAndCommentId(
-                                            this.intersectionList,
-                                            this.topicVideoIdList[i].videoId,
-                                            msgN[j].component_id,
-                                            this.triggerTypeData
-                                        );
-                                    });
+                                    // this.$nextTick(() => {
+                                    //     this.upDataListByVideoIdAndCommentId(
+                                    //         this.intersectionList,
+                                    //         this.topicVideoIdList[i].videoId,
+                                    //         msgN[j].component_id,
+                                    //         this.triggerTypeData
+                                    //     );
+                                    // });
                                     //表格数据 类型有点特殊需要重新比对
                                     let carTou = {
                                         name: msgN[j].name,
@@ -3235,24 +3258,28 @@ export default {
                                         );
                                     });
                                     //图表区
-                                    this.addOrUpdateArrayItem(this.triggerNStayData, {
-                                        time: msgN[j].time,
-                                        n_stay: msgN[j].n_stay,
+                                    // this.addOrUpdateArrayItem(this.triggerNStayData, {
+                                    //     time: msgN[j].time,
+                                    //     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
-                                    });
-                                    this.$nextTick(() => {
-                                        this.upDataListByVideoIdAndCommentId(
-                                            this.intersectionList,
-                                            this.topicVideoIdList[i].videoId,
-                                            msgN[j].component_id,
-                                            this.triggerNStayData
-                                        );
-                                    });
-                                    //表格数据
-                                    let carTou = {
+                                        min: msgN[j].min,
                                         name: msgN[j].name,
                                         time: msgN[j].time,
                                         type: msgN[j].type,
@@ -3295,18 +3322,18 @@ export default {
                                         );
                                     });
                                     //图表区
-                                    this.addOrUpdateArrayItem(this.triggerNQueueData, {
-                                        time: msgN[j].time,
-                                        n_queue: msgN[j].n_queue
-                                    });
-                                    this.$nextTick(() => {
-                                        this.upDataListByVideoIdAndCommentId(
-                                            this.intersectionList,
-                                            this.topicVideoIdList[i].videoId,
-                                            msgN[j].component_id,
-                                            this.triggerNQueueData
-                                        );
-                                    });
+                                    // this.addOrUpdateArrayItem(this.triggerNQueueData, {
+                                    //     time: msgN[j].time,
+                                    //     n_queue: msgN[j].n_queue
+                                    // });
+                                    // this.$nextTick(() => {
+                                    //     this.upDataListByVideoIdAndCommentId(
+                                    //         this.intersectionList,
+                                    //         this.topicVideoIdList[i].videoId,
+                                    //         msgN[j].component_id,
+                                    //         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 {
-                    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 {
+                & > div {
                     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%;