From 41df993d20787f88cc24afa6f5b6abe01e8ec9f2 Mon Sep 17 00:00:00 2001
From: qiudan <1044775178@qq.com>
Date: Thu, 30 Nov 2023 16:18:53 +0800
Subject: [PATCH] =?UTF-8?q?bug=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/sensorFusion/meanValue.vue |  80 ++++----
 src/components/sensorFusion/thermalOD.vue |   4 +-
 src/components/target/newtypeChart.vue    |  62 +++++-
 src/views/bounced/dataBoard.vue           |  59 ++++--
 src/views/index.vue                       |  24 ++-
 src/views/sensorFusion/index.vue          | 221 ++++++++++------------
 src/views/sensorFusion/player.vue         |  70 +++++++
 7 files changed, 330 insertions(+), 190 deletions(-)
 create mode 100644 src/views/sensorFusion/player.vue

diff --git a/src/components/sensorFusion/meanValue.vue b/src/components/sensorFusion/meanValue.vue
index e77cfce..205e537 100644
--- a/src/components/sensorFusion/meanValue.vue
+++ b/src/components/sensorFusion/meanValue.vue
@@ -124,7 +124,11 @@ export default {
             // for (let i = 0; i < this.avg.length; i++) {
             //     avgData = this.avg[i];
             // }
-            let arr = this.dataList[0]||{}
+            let arr = {};
+            if(this.dataList&&this.dataList.length>0){
+               arr = this.dataList[0]
+            }
+            
             if (arr && Object.keys(arr).length > 0) {
                 avgData = arr.avg ? Math.abs(arr.avg).toFixed(2) : 0;
                 medData = arr.med ? Math.abs(arr.med).toFixed(2) : 0;
@@ -317,43 +321,43 @@ export default {
         }, 300);
     },
     watch: {
-        // intersectionName: {
-        //     handler: function (oldValues, newValues) {
-        //         this.$nextTick(() => {
-        //             this.initEcharts();
-        //         });
-        //     }
-        // },
-        // chatShowType: {
-        //     handler: function (oldValues, newValues) {
-        //         let that = this;
-        //         setTimeout(() => {
-        //             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);
-        //     }
-        // },
-        // echartsRef: {
-        //     handler: function (newValues, oldValues) {
-        //         console.log('old', oldValues);
-        //         console.log('newV', newValues);
-        //         let that = this;
-        //         setTimeout(() => {
-        //             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);
-        //     }
-        // },
+        intersectionName: {
+            handler: function (oldValues, newValues) {
+                this.$nextTick(() => {
+                    this.initEcharts();
+                });
+            }
+        },
+        chatShowType: {
+            handler: function (oldValues, newValues) {
+                let that = this;
+                setTimeout(() => {
+                    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);
+            }
+        },
+        echartsRef: {
+            handler: function (newValues, oldValues) {
+                // console.log('old', oldValues);
+                // console.log('newV', newValues);
+                let that = this;
+                setTimeout(() => {
+                    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);
+            }
+        },
         dataList: {
             handler: function (newValues, oldValues) {
                 // if(newValues&&newValues.length>0) {
diff --git a/src/components/sensorFusion/thermalOD.vue b/src/components/sensorFusion/thermalOD.vue
index ba68baf..9d14594 100644
--- a/src/components/sensorFusion/thermalOD.vue
+++ b/src/components/sensorFusion/thermalOD.vue
@@ -254,8 +254,8 @@ export default {
         },
         echartsRef: {
             handler: function (oldValues, newValues) {
-                console.log('old', oldValues);
-                console.log('newV', newValues);
+                // console.log('old', oldValues);
+                // console.log('newV', newValues);
                 let that = this;
                 setTimeout(() => {
                     that.$nextTick(() => {
diff --git a/src/components/target/newtypeChart.vue b/src/components/target/newtypeChart.vue
index bebc396..f954103 100644
--- a/src/components/target/newtypeChart.vue
+++ b/src/components/target/newtypeChart.vue
@@ -277,15 +277,51 @@ export default {
     computed: {
         latestDataArr() {
             //最新一条数据
+            let latestDataArr = {};
             if (this.dataArr && this.dataArr.length > 0) {
-                let latestDataArr = _.cloneDeep(this.dataArr[0]);
-                return latestDataArr;
+                latestDataArr = _.cloneDeep(this.dataArr[0]);
             }
             if (this.cycleAccumulateData && this.cycleAccumulateData.length > 0) {
-                let latestDataArr = _.cloneDeep(this.cycleAccumulateData[0]);
-                return latestDataArr;
+                latestDataArr = _.cloneDeep(this.cycleAccumulateData[0]);
+                // console.log('周期统计最新一条卡片数据-',latestDataArr)
             }
-            return {};
+            if (!isNaN(latestDataArr.headway) && (latestDataArr.headway !== -1 || latestDataArr.headway === 0)) {
+                latestDataArr.headway = latestDataArr.headway;
+            } else {
+                latestDataArr.headway = '-';
+            }
+
+            if (!isNaN(latestDataArr.ave_headway) && (latestDataArr.ave_headway !== -1 || latestDataArr.ave_headway === 0)) {
+                latestDataArr.ave_headway = latestDataArr.ave_headway;
+                latestDataArr.headway = latestDataArr.ave_headway;
+            } else {
+                latestDataArr.ave_headway = '-';
+            }
+
+            if (!isNaN(latestDataArr.n_stay) && (latestDataArr.n_stay !== -1 || latestDataArr.n_stay === 0)) {
+                latestDataArr.n_stay = latestDataArr.n_stay;
+            } else {
+                latestDataArr.n_stay = '-';
+            }
+            if (!isNaN(latestDataArr.ave_stay) && (latestDataArr.ave_stay !== -1 || latestDataArr.ave_stay === 0)) {
+                latestDataArr.n_stay = latestDataArr.ave_stay;
+                latestDataArr.ave_stay = latestDataArr.ave_stay;
+            } else {
+                latestDataArr.ave_stay = '-';
+            }
+
+            if (!isNaN(latestDataArr.n_queue) && (latestDataArr.n_queue !== -1 || latestDataArr.n_queue === 0)) {
+                latestDataArr.n_queue = latestDataArr.n_queue;
+            } else {
+                latestDataArr.n_queue = '-';
+            }
+            if (!isNaN(latestDataArr.ave_queue) && (latestDataArr.ave_queue !== -1 || latestDataArr.ave_queue === 0)) {
+                latestDataArr.n_queue = latestDataArr.ave_queue;
+                latestDataArr.ave_queue = latestDataArr.ave_queue;
+            } else {
+                latestDataArr.ave_queue = '-';
+            }
+            return latestDataArr;
         },
         newDataArr() {
             if (this.dataArr && this.dataArr.length > 0) {
@@ -307,7 +343,7 @@ export default {
                         item.speed = '-';
                     }
 
-                    if (!isNaN(item.flow) && (item.headway !== -1 || item.headway === 0)) {
+                    if (!isNaN(item.flow) && (item.flow !== -1 || item.flow === 0)) {
                         item.flow = item.flow;
                     } else {
                         item.flow = '-';
@@ -319,11 +355,24 @@ export default {
                         item.headway = '-';
                     }
 
+                    if (!isNaN(item.ave_headway) && (item.ave_headway !== -1 || item.ave_headway === 0)) {
+                        item.ave_headway = item.ave_headway;
+                        item.headway = item.ave_headway;
+                    } else {
+                        item.ave_headway = '-';
+                    }
+
                     if (!isNaN(item.n_stay) && (item.n_stay !== -1 || item.n_stay === 0)) {
                         item.n_stay = item.n_stay;
                     } else {
                         item.n_stay = '-';
                     }
+                    if (!isNaN(item.ave_stay) && (item.ave_stay !== -1 || item.ave_stay === 0)) {
+                        item.n_stay = item.ave_stay;
+                        item.ave_stay = item.ave_stay;
+                    } else {
+                        item.ave_stay = '-';
+                    }
 
                     if (!isNaN(item.n_queue) && (item.n_queue !== -1 || item.n_queue === 0)) {
                         item.n_queue = item.n_queue;
@@ -332,6 +381,7 @@ export default {
                     }
                     if (!isNaN(item.ave_queue) && (item.ave_queue !== -1 || item.ave_queue === 0)) {
                         item.n_queue = item.ave_queue;
+                        item.ave_queue = item.ave_queue;
                     } else {
                         item.ave_queue = '-';
                     }
diff --git a/src/views/bounced/dataBoard.vue b/src/views/bounced/dataBoard.vue
index 22aa19c..9541d44 100644
--- a/src/views/bounced/dataBoard.vue
+++ b/src/views/bounced/dataBoard.vue
@@ -81,6 +81,7 @@
     </div>
 </template>
 <script>
+import _ from 'lodash';
 import newtypeChart from '../../components/target/newtypeChart.vue';
 // import {mapMutation} from 'vuex'
 import { getComponentSection } from '../../api/index';
@@ -179,7 +180,7 @@ export default {
             //     }, 3000);
         },
         //点击数据看板tab会执行获取所有配置的组件
-        getNew() {
+        getNew(getHistory) {
             this.loading = true;
             getComponentSection({ VideoId: this.$route.query.id, Number: 10 })
                 .then((res) => {
@@ -187,6 +188,12 @@ export default {
                         //console.log(res.data.data, '组件的数据');
                         this.componentList = res.data.data;
                         this.siftData();
+
+                        this.$nextTick(() => {
+                            if (this.$route.query.type == '离线视频' && getHistory) {
+                                getHistory();
+                            }
+                        });
                     }
                 })
                 .finally(() => {
@@ -235,13 +242,14 @@ export default {
             // console.log('折叠面板-', this.acticveName);
         },
         updateSectionData(newVal, updateKey, timeMode) {
+            let tempNewVal = _.cloneDeep(newVal);
             this.sectionData.forEach((item) => {
                 //item.title == val.combinationName
                 if (item.children && item.children.length > 0) {
                     item.children.forEach((cItem) => {
                         if (cItem.timeMode == timeMode) {
                             //找出对应timeMode的mqtt数据
-                            newVal.forEach((nItem) => {
+                            tempNewVal.forEach((nItem) => {
                                 if (cItem.analogAreaComponentId == nItem.component_id) {
                                     if (cItem[updateKey].length > 9) {
                                         this.$set(cItem, updateKey, cItem[updateKey].slice(0, 9));
@@ -265,6 +273,28 @@ export default {
             });
             this.$forceUpdate();
             // console.log('sectionData', this.sectionData);
+        },
+        //过滤重复的 time 字段，保留每个 time 最后一个对象
+        filteredArrayFun(originalArray) {
+            // 过滤重复的 time 字段
+            let uniqueArray = originalArray.reduce((accumulator, currentValue) => {
+                const existingItemIndex = accumulator.findIndex((item) => item.time === currentValue.time);
+
+                if (existingItemIndex === -1) {
+                    accumulator.push(currentValue);
+                }
+
+                return accumulator;
+            }, []);
+
+            // 按照时间从小到大排序
+            const sortedArray = uniqueArray.sort((a, b) => {
+                const dateA = new Date(a.time);
+                const dateB = new Date(b.time);
+                return dateA - dateB;
+            });
+
+            return sortedArray;
         }
     },
     mounted() {},
@@ -278,21 +308,25 @@ export default {
         cycleHistoryData: {
             handler(newVal) {
                 // debugger
-                // console.log('历史cycleHistoryData-', newVal);
+                console.log('历史cycleHistoryData-', newVal);
                 //该主题只会有固定间隔和固定时刻数据
                 if (newVal && this.sectionData.length > 0) {
                     //更新sectionData对应的analogAreaComponentId和timeMode更新数据
                     if (newVal.CycleStatisticsData && newVal.CycleStatisticsData.length > 0) {
                         newVal.CycleStatisticsData.forEach((ele) => {
                             if (ele.cycleStatisticsData && ele.cycleStatisticsData.length > 0) {
-                                this.updateSectionData(ele.cycleStatisticsData, 'cycleStatisticsData', '固定间隔');
+                                //按照时间从小到大排序
+                                let cycleStatisticsData = this.filteredArrayFun(ele.cycleStatisticsData);
+                                this.updateSectionData(cycleStatisticsData, 'cycleStatisticsData', '固定间隔');
                             }
                         });
                     }
-                    if (newVal.cycleTimeData && newVal.cycleTimeData.length > 0) {
-                        newVal.cycleTimeData.forEach((ele) => {
+                    if (newVal.CycleTimeData && newVal.CycleTimeData.length > 0) {
+                        newVal.CycleTimeData.forEach((ele) => {
                             if (ele.cycleTimeData && ele.cycleTimeData.length > 0) {
-                                this.updateSectionData(ele.cycleTimeData, 'cycleTimeData', '固定时刻');
+                                //按照时间从小到大排序
+                                let cycleTimeData = this.filteredArrayFun(ele.cycleTimeData);
+                                this.updateSectionData(cycleTimeData, 'cycleTimeData', '固定时刻');
                             }
                         });
                     }
@@ -305,8 +339,6 @@ export default {
         triggerListData: {
             handler(newVal) {
                 // console.log('实时触发triggerListData-', newVal);
-                //this.triggerList = newVal; //目前看用不到这个数组
-                // 触发数据
                 if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
                     //更新sectionData对应的analogAreaComponentId和timeMode更新trigger数据
                     this.updateSectionData(newVal, 'trigger', '实时触发');
@@ -319,7 +351,7 @@ export default {
         cycleTimeData: {
             handler(newVal) {
                 // 监听到打印固定时刻数据
-                // console.log(newVal, '固定时刻数据');
+                // console.log('固定时刻数据cycleTimeData-', newVal);
                 if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
                     this.updateSectionData(newVal, 'cycleTimeData', '固定时刻');
                 }
@@ -330,7 +362,7 @@ export default {
         //固定间隔
         cycleStatisticsData: {
             handler(newVal) {
-                // console.log('固定间隔', newVal);
+                // console.log('固定间隔cycleStatisticsData', newVal);
                 if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
                     this.updateSectionData(newVal, 'cycleStatisticsData', '固定间隔');
                 }
@@ -341,13 +373,14 @@ export default {
         //周期统计实时累计数据主题
         cycleAccumulateData: {
             handler(newVal) {
-                // console.log('周期统计实时累计数据主题', newVal);
+                // console.log('周期统计实时累计数据主题cycleAccumulateData-', newVal);
                 if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
                     //实时累计数据主题 只需要覆盖固定间隔主题的卡片数据，图表数据不需要更新
                     this.updateSectionData(newVal, 'cycleAccumulateData', '固定间隔');
                 }
             },
-            immediate: true
+            immediate: true,
+            deep: true
         }
     }
 };
diff --git a/src/views/index.vue b/src/views/index.vue
index ec2378f..bc7de67 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1059,16 +1059,19 @@ export default {
         },
         // 数据看板的标签点击
         handleClick: function (tab, event) {
-            var that = this;
             if (tab._props.name == 'second') {
-                that.$nextTick(() => {
-                    //
-                    that.$refs.dataBoardRef.getNew();
+                this.$nextTick(() => {
+                    if (this.$route.query.type == '离线视频') {
+                        this.$refs.dataBoardRef.getNew(this.getHistory);
+                    } else {
+                        this.$refs.dataBoardRef.getNew();
+                    }
+                    // this.$refs.dataBoardRef.getNew(this.getHistory);
                     //  setTimeout(() => {
                     //     debugger
                     //       this.getHistory()
                     //     }, 10000);
-                    this.getHistory();
+                    // this.getHistory();
                 });
             }
         },
@@ -1100,9 +1103,9 @@ export default {
                 ];
                 window.PubScribe(this.topicSends, '001', this.realInfo);
                 this.timer1 = null;
-                this.timer1 = setTimeout(() => {
-                    this.getHistory();
-                }, 5000);
+                // this.timer1 = setTimeout(() => {
+                //     this.getHistory();
+                // }, 5000);
             } else if (this.$route.query.type == '实时视频') {
                 this.topicSends = [
                     'stream' + this.number,
@@ -1244,6 +1247,7 @@ export default {
         },
         //获取离线视频固定时刻固定间隔
         getHistory() {
+            console.log('执行获取离线视频固定时刻固定间隔主题')
             window.publish('GetCycleHistory', 'Get-' + this.$route.query.id);
         },
         getZhuanFaMQTT(topic, msg) {
@@ -1525,7 +1529,7 @@ export default {
                         const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                         var detId = [];
                         const msgN = JSON.parse(temp);
-                        //console.log('历史数据', msgN);
+                        console.log('历史数据源头', msgN);
                         this.cycleHistoryData = msgN;
                     } catch (error) {}
                     break;
@@ -2561,7 +2565,7 @@ export default {
         dataBoard
     },
     beforeDestroy() {
-        clearTimeout(this.timer1);
+        // clearTimeout(this.timer1);
         clearTimeout(this.timer2);
         clearTimeout(this.timer3);
         clearTimeout(this.timer4);
diff --git a/src/views/sensorFusion/index.vue b/src/views/sensorFusion/index.vue
index 20bd0a4..95f97c8 100644
--- a/src/views/sensorFusion/index.vue
+++ b/src/views/sensorFusion/index.vue
@@ -1,5 +1,12 @@
 <template>
-    <div class="content-box">
+    <div class="content-box" v-loading="loading" v-if="offlineVideo">
+        <div class="container offlineVideo" v-if="!loading">
+            <!-- TODO -->
+            <!-- <player></player> -->
+            <el-empty description="此模块只支持实时视频分析"></el-empty>
+        </div>
+    </div>
+    <div v-else class="content-box" v-loading="loading">
         <el-collapse v-model="activeNames">
             <el-collapse-item title="监控列表" name="1">
                 <el-row>
@@ -601,7 +608,7 @@
                                         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-button v-for="(n, m) in o.children" :label="m + 1" :key="m"></el-radio-button>
                                     </el-radio-group>
                                     <!--初始化渲染图表-->
                                     <div class="echartList">
@@ -615,11 +622,6 @@
                                                     {{ 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"
@@ -631,15 +633,11 @@
                                                         :flowType="e.flowType"
                                                         :dataList="e.triggerDataList"
                                                         ref="chartsLine"
-                                                        v-else-if="e.triggerDataList != null"
+                                                        v-if="e.triggerDataList"
                                                     />
+                                                    <el-empty :image-size="100" description="暂无数据" v-else></el-empty>
                                                 </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"
@@ -650,15 +648,11 @@
                                                         :componentType="e.componentType"
                                                         :dataList="e.cycleTimeData"
                                                         :flowType="e.flowType"
-                                                        v-else
+                                                        v-if="e.cycleTimeData"
                                                     />
+                                                    <el-empty :image-size="100" description="暂无数据" v-else></el-empty>
                                                 </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%"
@@ -669,8 +663,9 @@
                                                         :componentType="e.componentType"
                                                         :dataList="e.cycleStatisticsData"
                                                         :flowType="e.flowType"
-                                                        v-else
+                                                        v-if="e.cycleStatisticsData"
                                                     />
+                                                    <el-empty :image-size="100" description="暂无数据" v-else></el-empty>
                                                 </div>
                                             </div>
                                             <div
@@ -794,11 +789,6 @@
                                                     {{ e.name }}
                                                 </div>
                                                 <div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
-                                                    <el-empty
-                                                        :image-size="100"
-                                                        description="暂无数据"
-                                                        v-if="!e.triggerDataList || e.triggerDataList.length == 0"
-                                                    ></el-empty>
                                                     <chartsPie
                                                         :echartsRef="'echartsPie' + e.duocgqrhpzId"
                                                         style="width: 100%; height: 100%"
@@ -806,15 +796,11 @@
                                                         :dataList="e.triggerDataList"
                                                         :timeMode="'实时触发'"
                                                         :intersectionName="intersectionName"
-                                                        v-else
+                                                        v-if="e.triggerDataList"
                                                     />
+                                                    <el-empty :image-size="100" description="暂无数据" v-else></el-empty>
                                                 </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%"
@@ -822,15 +808,11 @@
                                                         :dataList="e.cycleTimeData"
                                                         :timeMode="'固定时刻'"
                                                         :intersectionName="intersectionName"
-                                                        v-else
+                                                        v-if="e.cycleTimeData"
                                                     />
+                                                    <el-empty :image-size="100" description="暂无数据" v-else></el-empty>
                                                 </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%"
@@ -838,8 +820,9 @@
                                                         :timeMode="'固定间隔'"
                                                         :dataList="e.cycleStatisticsData"
                                                         :intersectionName="intersectionName"
-                                                        v-else
+                                                        v-if="e.cycleStatisticsData"
                                                     />
+                                                    <el-empty :image-size="100" description="暂无数据" v-else></el-empty>
                                                 </div>
                                             </div>
                                             <div
@@ -851,11 +834,6 @@
                                                     {{ e.name }}
                                                 </div>
                                                 <div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
-                                                    <el-empty
-                                                        :image-size="100"
-                                                        description="暂无数据"
-                                                        v-if="!e.triggerDataList || e.triggerDataList.length == 0"
-                                                    ></el-empty>
                                                     <chartsBar
                                                         :echartsRef="'echartsBar' + e.duocgqrhpzId"
                                                         style="width: 100%; height: 90%"
@@ -863,15 +841,11 @@
                                                         :timeMode="'实时触发'"
                                                         :intersectionName="intersectionName"
                                                         :dataList="e.triggerDataList"
-                                                        v-else
+                                                        v-if="e.triggerDataList"
                                                     />
+                                                    <el-empty :image-size="100" description="暂无数据" v-else></el-empty>
                                                 </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%"
@@ -879,15 +853,11 @@
                                                         :dataList="e.cycleTimeData"
                                                         :timeMode="'固定时刻'"
                                                         :intersectionName="intersectionName"
-                                                        v-else
+                                                        v-if="e.cycleTimeData"
                                                     />
+                                                    <el-empty :image-size="100" description="暂无数据" v-else></el-empty>
                                                 </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%"
@@ -895,8 +865,9 @@
                                                         :chatShowType="chatShowType"
                                                         :dataList="e.cycleStatisticsData"
                                                         :intersectionName="intersectionName"
-                                                        v-else
+                                                        v-if="e.cycleStatisticsData"
                                                     />
+                                                    <el-empty :image-size="100" description="暂无数据" v-else></el-empty>
                                                 </div>
                                             </div>
                                             <div
@@ -908,49 +879,37 @@
                                                     {{ e.name }}
                                                 </div>
                                                 <div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
-                                                    <el-empty
-                                                        :image-size="100"
-                                                        description="暂无数据"
-                                                        v-if="!e.triggerDataList || e.triggerDataList.length == 0"
-                                                    ></el-empty>
                                                     <meanValue
                                                         :echartsRef="'meanValue' + e.duocgqrhpzId"
                                                         style="width: 100%; height: 90%"
                                                         :chatShowType="chatShowType"
                                                         :intersectionName="intersectionName"
                                                         :dataList="e.triggerDataList"
-                                                        v-else
+                                                        v-if="e.triggerDataList"
                                                     />
+                                                    <el-empty :image-size="100" description="暂无数据" v-else></el-empty>
                                                 </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
+                                                        v-if="e.cycleTimeData"
                                                     />
+                                                    <el-empty :image-size="100" description="暂无数据" v-else></el-empty>
                                                 </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
+                                                        v-if="e.cycleStatisticsData"
                                                     />
+                                                    <el-empty :image-size="100" description="暂无数据" v-else></el-empty>
                                                 </div>
                                             </div>
                                             <div
@@ -962,11 +921,6 @@
                                                     {{ e.name }}
                                                 </div>
                                                 <div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
-                                                    <el-empty
-                                                        :image-size="100"
-                                                        description="暂无数据"
-                                                        v-if="!e.triggerDataList || e.triggerDataList.length == 0"
-                                                    ></el-empty>
                                                     <thermalOD
                                                         :echartsRef="'thermalOD' + e.duocgqrhpzId"
                                                         style="width: 100%; height: 90%"
@@ -977,15 +931,11 @@
                                                         :endName="e.endSectionNames"
                                                         :dataList="e.triggerDataList"
                                                         :intersectionName="intersectionName"
-                                                        v-else
+                                                        v-if="e.triggerDataList"
                                                     />
+                                                    <el-empty :image-size="100" description="暂无数据" v-else></el-empty>
                                                 </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%"
@@ -996,15 +946,11 @@
                                                         :endName="e.endSectionNames"
                                                         :dataList="e.cycleTimeData"
                                                         :intersectionName="intersectionName"
-                                                        v-else
+                                                        v-if="e.cycleTimeData"
                                                     />
+                                                    <el-empty :image-size="100" description="暂无数据" v-else></el-empty>
                                                 </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%"
@@ -1015,8 +961,9 @@
                                                         :endName="e.endSectionNames"
                                                         :dataList="e.cycleStatisticsData"
                                                         :intersectionName="intersectionName"
-                                                        v-else
+                                                        v-if="e.cycleStatisticsData"
                                                     />
+                                                    <el-empty :image-size="100" description="暂无数据" v-else></el-empty>
                                                 </div>
                                             </div>
                                         </div>
@@ -1378,6 +1325,7 @@
 
 <script>
 let id = 1000;
+// import player from './player.vue';
 import chartsLine from '@/components/sensorFusion/echartsLine.vue';
 import chartsPie from '@/components/sensorFusion/echartsPie.vue';
 import chartsBar from '@/components/sensorFusion/echartsBar.vue';
@@ -1397,11 +1345,13 @@ import {
     getAssembly, // 获取多传感器融合
     getSelectedComponent //获取已选的组件数据接口
 } from '@/api/sensorFusion.js';
+import { getVideoMode } from '@/api/index';
 import qs from 'qs';
 export default {
     name: 'sensorFusion',
     data() {
         return {
+            offlineVideo: true,
             checkList: [],
             defaultExpanded: [], //默认展示数组
             checkDataList: [],
@@ -1420,6 +1370,7 @@ export default {
             activeNames: ['1'], // 视频折叠
             intersectionName: [], //数据分析名称
             videoList: [],
+            loading: false,
             intersectionList: [],
             tabPosition: '1',
             threeData: [],
@@ -1526,6 +1477,9 @@ export default {
             disabledCheckList: [] //tree不可选数组
         };
     },
+    created() {
+        this.getVideoType();
+    },
     mounted() {
         //获取视频列表
         this.getRealTimeShipjk();
@@ -1533,6 +1487,20 @@ export default {
         this.getSensorFusionData();
     },
     methods: {
+        //获取视频源类型
+        getVideoType() {
+            this.loading = true;
+            getVideoMode()
+                .then((res) => {
+                    //console.log('res', res.data.data);
+                    if (res.data.data && res.data.data == '实时视频') {
+                        this.offlineVideo = false;
+                    }
+                })
+                .finally(() => {
+                    this.loading = false;
+                });
+        },
         //类型数据累计
         getTotal(arr, field, field2) {
             let total = 0;
@@ -1566,35 +1534,35 @@ export default {
         },
         //获取多融合传感器融合数据
         getSensorFusionData() {
+            this.loading = true;
             getAssembly({
                 Number: 10
-            }).then((res) => {
-                this.intersectionList = res.data.data || [];
+            })
+                .then((res) => {
+                    if (res.data.data && res.data.data.length > 0) {
+                        this.intersectionList = this.addSelectOptionField(res.data.data) || [];
+                        // this.addSelectOptionField(this.intersectionList);
+                        // this.addTriggerDataField(this.intersectionList);
+                        //mqtt订阅
+                        this.$nextTick(() => {
+                            this.getMqtt();
+                        });
 
-                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];
+                        //console.log(this.intersectionList, 'this.intersectionList');
+                        //开发路口默认展开第一个
+                        this.$nextTick(() => {
+                            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');
-            });
+                })
+                .finally(() => {
+                    this.loading = false;
+                });
         },
         //每个都添加option
         addSelectOptionField(obj) {
@@ -1611,6 +1579,7 @@ export default {
                     }
                 }
             }
+            return obj;
         },
         addTriggerDataField(obj) {
             if (Array.isArray(obj)) {
@@ -2339,6 +2308,9 @@ export default {
 
         //单选按钮选择事件
         changeChat(val, index) {
+            console.log('changeChat');
+            console.log(val);
+            console.log(index);
             this.chatShowType = '';
             this.$nextTick(() => {
                 this.chatShowType = val[index - 1].presentationForm;
@@ -2375,7 +2347,8 @@ export default {
         //确认按钮
         addSuccess() {
             this.centerDialogVisible = false;
-            this.getSensorFusionData();
+            // this.getSensorFusionData();
+            this.$router.go(0);
         },
         //tab切换事件
         tabChange(val) {
@@ -2842,9 +2815,9 @@ export default {
                                     // });
                                 } else if (msgN[j].component_type == '速度') {
                                     // if(msgN[j].component_name=='速度_3'){
-                                    //   console.log('实时触发trigger-速度', msgN[j]);  
+                                    //   console.log('实时触发trigger-速度', msgN[j]);
                                     // }
-                                    
+
                                     //卡片区
                                     let map = {
                                         speed: msgN[j].speed,
@@ -3797,13 +3770,19 @@ export default {
         MeanValue, //均值图
         thermalOD, //OD
         tableShow,
-        regionTable
+        regionTable,
+        // player
     }
 };
 </script>
 
 <style lang="less" scoped>
 .content-box {
+    .offlineVideo{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
     /deep/ .el-collapse-item__header {
         color: rgb(71, 161, 255);
         padding: 0px 1%;
diff --git a/src/views/sensorFusion/player.vue b/src/views/sensorFusion/player.vue
new file mode 100644
index 0000000..54e9f77
--- /dev/null
+++ b/src/views/sensorFusion/player.vue
@@ -0,0 +1,70 @@
+<template>
+    <div>
+        <jsmpeg-player :url="url" />
+    </div>
+</template>
+
+<script>
+import { JSMpegPlayer } from 'vue-jsmpeg-player';
+import 'vue-jsmpeg-player/dist/style.css';
+export default {
+    components: {
+        [JSMpegPlayer.name]: JSMpegPlayer
+    },
+    name: 'player',
+    data() {
+        return {
+            url: 'ws://localhost:8089/xxx',
+            socket: null,
+            messages: [],
+            connected: '',
+            inputMessage: ''
+        };
+    },
+    methods: {
+        init() {
+            const socket = new WebSocket('ws://localhost:3001');
+            socket.onopen = function () {
+                //连接建立时触发
+                console.log('已连接到WebSocket服务器');
+                this.connected = true;
+            };
+            socket.onmessage = function (event) {
+                //	客户端接收服务端数据时触发
+                console.log('收到消息:', event.data);
+                this.messages.push({ id: Date.now(), text: event.data });
+            };
+            socket.onclose = function () {
+                //	连接关闭时触发
+                console.log('WebSocket连接已关闭');
+                this.connected = false;
+            };
+            socket.onerror = function () {
+                //	通信发生错误时触发
+                console.log('WebSocket通信发生错误');
+            };
+            this.socket = socket;
+        },
+        //发送消息
+        sendMessage() {
+            if (this.socket && this.inputMessage) {
+                //使用连接发送数据
+                this.socket.send(this.inputMessage);
+                this.inputMessage = '';
+            }
+        }
+    },
+    mounted() {
+        // this.init();
+    },
+    beforeDestroy() {
+        if (this.socket) {
+            //关闭连接
+            this.socket.close();
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+</style>
\ No newline at end of file