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

---
 src/components/chart/regionTable.vue |  14 ++--
 src/components/chart/tableShow.vue   |  14 ++--
 src/main.js                          |  57 ++++++++-----
 src/utils/mqttConfig.js              | 118 +++++++++++++++------------
 src/views/AnalysisMain.vue           |  34 ++++++--
 src/views/bounced/dataBoard.vue      |   8 +-
 src/views/general/AboutMachine.vue   |   4 +-
 src/views/index.vue                  |  29 +++++--
 src/views/sensorFusion/index.vue     |  18 ++--
 9 files changed, 188 insertions(+), 108 deletions(-)

diff --git a/src/components/chart/regionTable.vue b/src/components/chart/regionTable.vue
index cad055b..d04b6e6 100644
--- a/src/components/chart/regionTable.vue
+++ b/src/components/chart/regionTable.vue
@@ -12,7 +12,7 @@
 
         <div v-if="msg" class="regionBox">
             <!-- 实时触发 -->
-            <el-table :data="msg" style="width: 100%" v-if="triggerType == '实时触发'">
+            <el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '实时触发'">
                 <!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> -->
                 <!-- <el-table-column align="center" prop="graphical_id" label="区域编号"></el-table-column> -->
                 <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
@@ -55,7 +55,7 @@
                     </template>
                 </el-table-column>
             </el-table>
-            <el-table :data="msg" style="width: 100%" v-if="triggerType == '固定时刻'">
+            <el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '固定时刻'">
                 <!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> -->
                 <!-- <el-table-column align="center" prop="graphical_id" label="区域编号"></el-table-column> -->
                 <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
@@ -99,7 +99,7 @@
                 </el-table-column>
             </el-table>
             <!-- 固定间隔 -->
-            <el-table :data="msg" style="width: 100%" v-if="triggerType == '固定间隔'">
+            <el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '固定间隔'">
                 <!-- <el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
                 <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
                 <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
@@ -142,7 +142,7 @@
             </el-table>
         </div>
 
-        <el-dialog title="编辑" :visible.sync="dialogVisible" width="40%">
+        <el-dialog title="编辑" :append-to-body="true" :visible.sync="dialogVisible" width="40%">
             <el-form :model="msg" label-width="80px">
                 <el-form-item label="val1">
                     <el-time-select
@@ -227,9 +227,9 @@ export default {
 </script>
 <style scoped lang="scss">
 /deep/ .el-table {
-    height: 709px !important;
-    overflow-y: scroll;
-    z-index: 9999;
+    // height: 709px !important;
+    // overflow-y: scroll;
+    z-index: 900;
 }
 .el-table::-webkit-scrollbar {
     width: 0 !important;
diff --git a/src/components/chart/tableShow.vue b/src/components/chart/tableShow.vue
index f36c23f..383d235 100644
--- a/src/components/chart/tableShow.vue
+++ b/src/components/chart/tableShow.vue
@@ -13,7 +13,7 @@
 
         <!-- 实时触发 -->
         <div v-if="msg && msg.length > 0">
-            <el-table :data="msg" style="width: 100%" v-if="triggerType == '实时触发'">
+            <el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '实时触发'">
                 <!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column>
                 <el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
                 <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
@@ -53,7 +53,7 @@
                     </template>
                 </el-table-column>
             </el-table>
-            <el-table :data="msg" style="width: 100%" v-if="triggerType == '固定时刻'">
+            <el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '固定时刻'">
                 <!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column>
                 <el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
                 <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
@@ -95,7 +95,7 @@
             </el-table>
 
             <!-- 固定间隔 -->
-            <el-table :data="msg" style="width: 100%" v-if="triggerType == '固定间隔'">
+            <el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '固定间隔'">
                 <el-table-column align="center" prop="gate_id" label="断面编号"></el-table-column>
                 <el-table-column align="center" prop="name" label="断面名称"></el-table-column>
                 <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
@@ -159,7 +159,7 @@
         <div v-else>
             <el-empty :image-size="100"></el-empty>
         </div>
-        <el-dialog title="编辑" :visible.sync="dialogVisible" width="40%">
+        <el-dialog title="编辑" :append-to-body="true" :visible.sync="dialogVisible" width="40%">
             <el-form :model="msg" label-width="80px">
                 <el-form-item label="val1">
                     <el-time-select
@@ -269,9 +269,9 @@ export default {
 </script>
 <style scoped lang="scss">
 /deep/ .el-table {
-    height: 709px !important;
-    overflow-y: scroll;
-    z-index: 9999;
+    // height: 709px !important;
+    // overflow-y: scroll;
+    z-index: 900;
 }
 .el-table::-webkit-scrollbar {
     width: 0 !important;
diff --git a/src/main.js b/src/main.js
index 89ce8f3..46173b9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -79,23 +79,29 @@ var currentTopics = null;
 var client = null;
 var callback = null;
 let mqtt = new mqttConfig(currentTopics);
-window.PubScribe = function (topic, number, _callback, other = false) {
+window.PubScribe = function (topic, number, _callback, other = false, fromName = '') {
     callback = _callback;
     if (currentTopics != null) {
         //取消currentTopics主题订阅
         if (client != null) {
+            console.log('client', client)
             client.unsubscribe(currentTopics);
             currentTopics = null;
         }
     }
     if (client == null) {
         if (other == false) {
+            console.log("topic", topic)
+            currentTopics = topic;
             client = mqtt.createConnect(() => {
                 client.subscribe(topic, {
                     qos: 0
                 }, (err) => {
                     if (!err) {
-                        console.log("订阅成功0",topic);
+                        console.log("订阅成功0", topic);
+                        console.log("订阅成功0-fromName注释：url里的id字符串来于分析index视频页面，videoId来于分析AnalysisMain，融合页面来之融合");
+                        console.log("订阅成功0-fromName", fromName);
+                        console.log("订阅成功0-number", number);
                         client.publish('msg_stream', JSON.stringify({
                             "msg_flag": parseInt(number)
                         }))
@@ -121,12 +127,16 @@ window.PubScribe = function (topic, number, _callback, other = false) {
         } else {
             if (topic != null) {
                 console.log("topic", topic)
+                currentTopics = topic;
                 client = mqtt.createConnect(() => {
                     client.subscribe(topic, {
                         qos: 0
                     }, (err) => {
                         if (!err) {
-                            console.log("订阅成功11");
+                            console.log("订阅成功11", topic);
+                            console.log("订阅成功11-fromName注释：url里的id字符串来于分析index视频页面，videoId来于分析AnalysisMain，融合页面来之融合");
+                            console.log("订阅成功11-fromName", fromName);
+                            console.log("订阅成功11-number", number);
                             client.publish('msg_stream', JSON.stringify({
                                 "msg_flag": parseInt(number)
                             }))
@@ -137,7 +147,7 @@ window.PubScribe = function (topic, number, _callback, other = false) {
                         try {
                             callback(topic, message);
                         } catch (error) {
-    
+
                         }
                     });
                 });
@@ -148,24 +158,31 @@ window.PubScribe = function (topic, number, _callback, other = false) {
         if (topic != null) {
             console.log("topic", topic)
             currentTopics = topic;
-            client.subscribe(currentTopics, {
-                qos: 0
-            }, (err) => {
-                if (!err) {
-                    console.log("订阅成功1");
-                    // setTimeout(function() {  
-                    client.publish('msg_stream', JSON.stringify({
-                        "msg_flag": parseInt(number)
-                    }))
-                    // if(number!= -1 &&number!= '001' ){
-                    //     client.publish('Custom',JSON.stringify({"type":'getImage',"videoid":videoid}))
-                    // }
+            mqtt.MySub(() => {
+                client.subscribe(currentTopics, {
+                    qos: 0
+                }, (err) => {
+                    if (!err) {
+                        console.log("订阅成功1", topic);
+                        // setTimeout(function() {  
+                        console.log("订阅成功1");
+                        console.log("订阅成功1-fromName注释：url里的id字符串来于分析index视频页面，videoId来于分析AnalysisMain，融合页面来之融合");
+                        console.log("订阅成功1-fromName", fromName);
+                        console.log("订阅成功1-number", number);
+                        client.publish('msg_stream', JSON.stringify({
+                            "msg_flag": parseInt(number)
+                        }))
+                        // if(number!= -1 &&number!= '001' ){
+                        //     client.publish('Custom',JSON.stringify({"type":'getImage',"videoid":videoid}))
+                        // }
 
-                } else {
-                    console.log('消息订阅失败！')
-                }
+                    } else {
+                        console.log('消息订阅失败！')
+                    }
+
+                });
+            })
 
-            });
         }
     }
 }
diff --git a/src/utils/mqttConfig.js b/src/utils/mqttConfig.js
index d04b437..114a564 100644
--- a/src/utils/mqttConfig.js
+++ b/src/utils/mqttConfig.js
@@ -3,7 +3,7 @@ import Vue from 'vue'
 var vm = new Vue();
 var ip = window.location.host.split(":")[0];
 // var ip = '172.16.1.168';
-console.log("ip",ip)
+console.log("ip", ip)
 class mqttHandle {
     constructor() {
         var newName = localStorage.getItem('ms_username')
@@ -15,7 +15,7 @@ class mqttHandle {
             cleanSession: true,
             connectTimeout: 7000, // 超时时间
             reconnectPeriod: 7000, // 重连时间间隔
-            host:ip,
+            host: ip,
             port: '10087',
             // 认证信息
             // clientId: Number(new Date()).toString(),
@@ -28,15 +28,24 @@ class mqttHandle {
         //     qos: 0,
         // }
         this.mqttClient = null;
+        // 追踪是否为初始连接
+        this.initialConnection = true;
+        // 存储当前 onConnected 回调
+        this.onConnected = () => {}; // 默认为空函数
     }
     /**
      * 创建链接
      * @returns client
      */
-    createConnect(onConnected) {
+    createConnect(onConnectedFun) {
         //配置链接
-        const { host, port, endpoint, ...options } = this.connect;
-        console.log("this.connect.host",this.connect.host)
+        const {
+            host,
+            port,
+            endpoint,
+            ...options
+        } = 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}`;
         // if (!client.connected) {
@@ -50,68 +59,73 @@ class mqttHandle {
         //         }
         //     })
         // }
-        if (this.mqttClient == undefined)
-         {
+        if (this.mqttClient == undefined) {
             this.mqttClient = mqtt.connect(connectUrl, options);
             this.mqttClient.on("connect", () => {
                 console.log("Connection succeeded!");
-                onConnected();
-               // this._client.subscribe('img'+this.number, { qos: 0 });
-               // this._client.subscribe('stream'+this.number, { qos: 0 });
-               // this._client.subscribe('trajectory'+this.number, { qos: 0 });
-               // this._client.subscribe('detection'+this.number, { qos: 0 });
-               // this._client.subscribe('img0', { qos: 0 });
-               // this._client.subscribe('stream0', { qos: 0 });
-               // this._client.subscribe('trajectory0', { qos: 0 });
-               // this._client.subscribe('detection0', { qos: 0 });
-           });
-           this.mqttClient.on('reconnect', (error) => {
-               console.log('正在重连')
-           })
-           this.mqttClient.on("error", (error) => {
-               console.log("Connection failed");
-           });
-    
-           //配置topic
-           // const { topic, qos } = this.subscription;
-           // console.log(topic, qos,'topic, qos');
-           // this._client.subscribe(topic, { qos: qos }, (error, res) => {
-           //     if (error) {
-           //         console.log("Subscribe to topics error", error);
-           //         return;
-           //     }
-           //     this.subscribeSuccess = true;
-           //     console.log("Subscribe to topics res", res[0].qos, res[0].topic);
-           // });
+                // 如果是初始连接
+                if (this.initialConnection) {
+                    this.initialConnection = false;
+                    this.onConnected = onConnectedFun;
+                }
+                this.onConnected()
+                // this._client.subscribe('img'+this.number, { qos: 0 });
+                // this._client.subscribe('stream'+this.number, { qos: 0 });
+                // this._client.subscribe('trajectory'+this.number, { qos: 0 });
+                // this._client.subscribe('detection'+this.number, { qos: 0 });
+                // this._client.subscribe('img0', { qos: 0 });
+                // this._client.subscribe('stream0', { qos: 0 });
+                // this._client.subscribe('trajectory0', { qos: 0 });
+                // this._client.subscribe('detection0', { qos: 0 });
+            });
+            this.mqttClient.on('reconnect', (error) => {
+                console.log('正在重连')
+            }) 
+            this.mqttClient.on("error", (error) => {
+                console.log("Connection failed");
+            });
+
+            //配置topic
+            // const { topic, qos } = this.subscription;
+            // console.log(topic, qos,'topic, qos');
+            // this._client.subscribe(topic, { qos: qos }, (error, res) => {
+            //     if (error) {
+            //         console.log("Subscribe to topics error", error);
+            //         return;
+            //     }
+            //     this.subscribeSuccess = true;
+            //     console.log("Subscribe to topics res", res[0].qos, res[0].topic);
+            // });
         }
 
         return this.mqttClient;
-       
+
         // try {
-           
- 
+
+
         // } catch (error) {
         //     console.log("mqtt.connect error", error);
         // }
-        
+
     }
 
-    MySub(subscriptions)
-    {
+    MySub(subscriptions) {
         //['hert','img0','img1','img2','img3','img4','img5','img6','img7']
-        this.mqttClient.subscribe(subscriptions, { qos: 0 }, (err)=>
-        {
-            if (!err) {
-              console.log("订阅成功："+subscriptions);
-             
-            } else {
-              console.log('消息订阅失败！'+subscriptions)
-            }
-        });
+        // this.mqttClient.subscribe(subscriptions, {
+        //     qos: 0
+        // }, (err) => {
+        //     if (!err) {
+        //         console.log("订阅成功：" + subscriptions);
+
+        //     } else {
+        //         console.log('消息订阅失败！' + subscriptions)
+        //     }
+        // });
+        this.onConnected = subscriptions
+        this.onConnected()
     }
 
-    MyUnSub(subscription)
-    {
+    MyUnSub(subscription) {
 
     }
 
diff --git a/src/views/AnalysisMain.vue b/src/views/AnalysisMain.vue
index 25c13b0..2aee10d 100644
--- a/src/views/AnalysisMain.vue
+++ b/src/views/AnalysisMain.vue
@@ -233,7 +233,11 @@ export default {
                 videoId: ''
             },
             disable: false, //根据权限禁用按钮
-            highPic: {} //接收第一张高频图片
+            highPic: {}, //接收第一张高频图片
+            timer1: null,
+            timer2: null,
+            timer3: null,
+            timer4: null
         };
     },
 
@@ -261,7 +265,8 @@ export default {
                     newVal.forEach((item) => {
                         if (item.status == '加载中') {
                             //console.log('加载中', item);
-                            setTimeout(() => {
+                            this.timer1 = null;
+                            this.timer1 = setTimeout(() => {
                                 this.getVideoList();
                             }, 10000);
                         }
@@ -318,6 +323,7 @@ export default {
             if (this.videoTypeForm.videoType == '实时视频') {
                 this.topicSends = ['hert', 'img0', 'img1', 'img2', 'img3', 'img4', 'img5', 'img6', 'img7', 'Contorl_server'];
                 //console.log('this.videoTypeForm.videoType', this.videoTypeForm.videoType);
+                // console.log('在AnalysisMain分析页面')
                 window.PubScribe(this.topicSends, -1, this.realInfo, false, 'videoId');
                 window.publish('Custom', JSON.stringify({ type: 'getImage', videoid: 'all' }));
             } else if (this.videoTypeForm.videoType == '离线视频') {
@@ -440,7 +446,7 @@ export default {
                     //console.log('已分析');
                     this.videoList[i].videoAnalysisStatus = '已分析';
                     var ip = window.location.host;
-                     var ipData = 'http://' + ip.split(':')[0];
+                    var ipData = 'http://' + ip.split(':')[0];
                     // 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) {
@@ -631,11 +637,12 @@ export default {
                         spinner: 'el-icon-loading',
                         background: 'rgba(0, 0, 0, 0.7)'
                     });
-
-                    setTimeout(() => {
+                    let that = this;
+                    this.timer2 = null;
+                    this.timer2 = setTimeout(() => {
                         loading.close();
-
-                        setTimeout(() => {
+                        that.timer3 = null;
+                        that.timer3 = setTimeout(() => {
                             this.getVideoList();
                         }, 5000);
 
@@ -807,7 +814,8 @@ export default {
                 //console.log('res', res);
                 if (res.data.msg == '成功') {
                     // if(val=='重启'){
-                    setTimeout(() => {
+                    this.timer4 = null;
+                    this.timer4 = setTimeout(() => {
                         window.publish('Custom', JSON.stringify({ type: 'getImage', videoid: 'all' }));
                     }, 2000);
                     // }
@@ -906,6 +914,16 @@ export default {
 
     components: {
         editModal
+    },
+    beforeDestroy() {
+        clearTimeout(this.timer1);
+        clearTimeout(this.timer2);
+        clearTimeout(this.timer3);
+        clearTimeout(this.timer4);
+        this.timer1 = null;
+        this.timer2 = null;
+        this.timer3 = null;
+        this.timer4 = null;
     }
 };
 </script>
diff --git a/src/views/bounced/dataBoard.vue b/src/views/bounced/dataBoard.vue
index 311257d..85a7d7c 100644
--- a/src/views/bounced/dataBoard.vue
+++ b/src/views/bounced/dataBoard.vue
@@ -1,6 +1,6 @@
 <template>
-    <div ref="box" class="box">
-        <el-empty v-show="sectionData.length == 0" :image-size="400"></el-empty>
+    <div ref="box" class="box" v-loading="loading">
+        <el-empty v-show="!loading&&sectionData.length == 0" :image-size="400"></el-empty>
         <!-- <p class="title" style="margin-bottom: 20px;font-size: 20px;font-weight: 400;">数据看板</p> -->
         <el-scrollbar class="scrollbar">
             <div class="dataBoard" ref="dataBoard" v-if="activeName == 'second'">
@@ -136,6 +136,7 @@ export default {
     },
     data() {
         return {
+            loading:false,
             acticveName: [],
             title1: '01断面',
             title2: '01区域',
@@ -189,12 +190,15 @@ export default {
         },
         getNew() {
             // this.idVal = ;
+            this.loading=true;
             getComponentSection({ VideoId: this.$route.query.id, Number: 10 }).then((res) => {
                 if (res.data.code == 200) {
                     //console.log(res.data.data, '组件的数据');
                     this.componentList = res.data.data;
                     this.siftData();
                 }
+            }).finally(()=>{
+                this.loading=false;
             });
         },
 
diff --git a/src/views/general/AboutMachine.vue b/src/views/general/AboutMachine.vue
index e4c3795..1d696c5 100644
--- a/src/views/general/AboutMachine.vue
+++ b/src/views/general/AboutMachine.vue
@@ -675,8 +675,8 @@ export default {
         },
         // 备份服务器事件
         backupHandle() {
-            // var ipUrl = window.location.origin
-            var ipUrl = '172.16.1.168'
+            var ipUrl = window.location.origin
+            // var ipUrl = '172.16.1.168'
             this.$confirm('此操作将备份操作, 是否继续?', '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
diff --git a/src/views/index.vue b/src/views/index.vue
index 1b393b3..78be50a 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -913,7 +913,11 @@ export default {
             data3: '',
             roleStatus: '', //三维权限控制
             highPic: {}, //接收第一张高频图片
-            highPicList: [] //存储高频图片
+            highPicList: [], //存储高频图片
+            timer1: null,
+            timer2: null,
+            timer3: null,
+            timer4: null
         };
     },
 
@@ -1095,7 +1099,8 @@ export default {
                     // 'simulator_target-' + this.$route.query.id
                 ];
                 window.PubScribe(this.topicSends, '001', this.realInfo);
-                setTimeout(() => {
+                this.timer1 = null;
+                this.timer1 = setTimeout(() => {
                     this.getHistory();
                 }, 5000);
             } else if (this.$route.query.type == '实时视频') {
@@ -1122,9 +1127,11 @@ export default {
                     //目标数量
                     // 'simulator_target-' + this.$route.query.id
                 ];
+                // console.log('在test1/index视频页面number-',this.number)
                 window.PubScribe(this.topicSends, this.number, this.realInfo, false, this.$route.query.id);
             }
-            setTimeout(() => {
+            this.timer2 = null;
+            this.timer2 = setTimeout(() => {
                 window.publish('Custom', JSON.stringify({ type: 'getImage', videoid: this.$route.query.id }));
             }, 5000);
         },
@@ -1140,7 +1147,8 @@ export default {
                 } else if (res.data.data.videoAnalysisStatus == '分析中') {
                     this.disabledVideoAnalysis = true;
                     this.videoUnityShow = false;
-                    setTimeout(() => {
+                    this.timer3 = null;
+                    this.timer3 = setTimeout(() => {
                         this.getAnalysisStatus();
                     }, 5000);
                 } else if (res.data.data.videoAnalysisStatus == '已分析') {
@@ -1252,7 +1260,8 @@ export default {
                         message: '启动成功',
                         type: 'success'
                     });
-                    setTimeout(() => {
+                    this.timer4 = null;
+                    this.timer4 = setTimeout(() => {
                         this.getAnalysisStatus();
                     }, 5000);
                     // if(this.videoAnalysisSta=='已分析'){
@@ -2541,6 +2550,16 @@ export default {
         editModal,
         analysisConfiguration,
         dataBoard
+    },
+    beforeDestroy() {
+        clearTimeout(this.timer1);
+        clearTimeout(this.timer2);
+        clearTimeout(this.timer3);
+        clearTimeout(this.timer4);
+        this.timer1 = null;
+        this.timer2 = null;
+        this.timer3 = null;
+        this.timer4 = null;
     }
 };
 </script>
diff --git a/src/views/sensorFusion/index.vue b/src/views/sensorFusion/index.vue
index 8d558fa..c130198 100644
--- a/src/views/sensorFusion/index.vue
+++ b/src/views/sensorFusion/index.vue
@@ -2936,7 +2936,8 @@ export default {
                 );
                 this.topicVideoIdList.push({ videoId: this.videoList[i].videoId });
             }
-            window.PubScribe(this.topicSends, -1, this.realInfo, true);
+            // console.log('在sensorFusion融合页面')
+            window.PubScribe(this.topicSends, -1, this.realInfo, true, '融合页面');
         },
         //mqtt订阅
         realInfo(topic, message, videoId) {
@@ -3519,7 +3520,8 @@ export default {
                             // console.log('固定间隔', msgN);
                             for (let j = 0; j < msgN.length; j++) {
                                 //处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
-                                let newSpeed = '-',aveHeadway = msgN[j].ave_headway;
+                                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);
                                 }
@@ -3895,7 +3897,8 @@ export default {
                             // this.cycleStatisticsData = msgN;
                             for (let j = 0; j < msgN.length; j++) {
                                 //处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
-                                let newSpeed = '-',aveHeadway = msgN[j].ave_headway;
+                                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);
                                 }
@@ -4179,15 +4182,20 @@ export default {
             width: 440px;
             height: 340px;
             background: rgba(71, 94, 115, 0.1);
-            margin-left: 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;
-                margin-left: 3%;
+                overflow-x: auto;
+                // margin-left: 3%;
+                box-sizing: border-box;
+                padding: 0 3%;
             }
             .echartsList {
                 width: 100%;