diff --git a/src/views/pages/civilizedCity/index.vue b/src/views/pages/civilizedCity/index.vue
index 4c76b68..4f772e2 100644
--- a/src/views/pages/civilizedCity/index.vue
+++ b/src/views/pages/civilizedCity/index.vue
@@ -506,7 +506,12 @@ export default {
     bus.$off('openCurrentVideoSurveillance')
     bus.$on('openCurrentVideoSurveillance', (channelCode) => {
       this.openVideo = true
-      this.channelCode.unshift(channelCode)
+      if (!this.channelCode.includes(channelCode)) {
+        console.log(this.channelCode, channelCode, '====>实时监控')
+        this.channelCode.unshift(channelCode)
+      } else {
+        this.$message.warning('该实时监控已经加入视频列表了！')
+      }
     })
     bus.$off('closeVideoDia')
     bus.$on('closeVideoDia', () => {
diff --git a/src/views/pages/construction/index.vue b/src/views/pages/construction/index.vue
index 8df9d8d..bb132d5 100644
--- a/src/views/pages/construction/index.vue
+++ b/src/views/pages/construction/index.vue
@@ -74,36 +74,36 @@
 </template>
 
 <script>
-import { HieimpMap } from "@/supermap/map-init";
-import TiledMap from "./components/tiledMap";
-import { searchCamera } from "@/api/videoSurveillance/index";
-import bus from "@/views/layout/bus";
-import complaintEvent from "./components/ComplaintEvent";
-import VideoList from "./components/VideoList";
-import SiteList from "./components/SiteList";
-import { selectByJdWd,selectByDayRaise,selectByDayNoice,selectByDayRoadData } from "@/api/construction/index";
-import { createSiteListPop } from "@/supermap/createMarkerPopup";
-import {createCameraDetailsPop} from '@/supermap/createMarkerPopup';
+import { HieimpMap } from '@/supermap/map-init'
+import TiledMap from './components/tiledMap'
+import { searchCamera } from '@/api/videoSurveillance/index'
+import bus from '@/views/layout/bus'
+import complaintEvent from './components/ComplaintEvent'
+import VideoList from './components/VideoList'
+import SiteList from './components/SiteList'
+import { selectByJdWd, selectByDayRaise, selectByDayNoice, selectByDayRoadData } from '@/api/construction/index'
+import { createSiteListPop, createCameraDetailsPop } from '@/supermap/createMarkerPopup'
+
 import VideoPlay from './components/VideoPlay'
-import {  selectAllByGps } from '@/api/road'
+import { selectAllByGps } from '@/api/road'
 
 export default {
-  data() {
+  data () {
     return {
       hiMap: new HieimpMap(), // 地图全局对象
-      mapId: "map-single", // 地图容器的id
+      mapId: 'map-single', // 地图容器的id
 
-      state: "",
+      state: '',
       constructionSiteData: [],
-      changeLayerBtnList: ['AI事件','视频监控','工地','道路'],
+      changeLayerBtnList: ['AI事件', '视频监控', '工地', '道路'],
       changeLayerBtnGroup: [],
 
       openVideo: false,
-      channelCode:[],
+      channelCode: [],
 
       todayListNum: 0,
-      allListDataNum: 0,
-    };
+      allListDataNum: 0
+    }
   },
   components: {
     TiledMap,
@@ -112,308 +112,305 @@ export default {
     SiteList,
     VideoPlay
   },
-  created() {},
-  mounted() {
-    this.hiMapFun = this.hiMap.myMapFun(this.hiMap.mapObj);
+  created () {},
+  mounted () {
+    this.hiMapFun = this.hiMap.myMapFun(this.hiMap.mapObj)
     this.multiScreenFun = this.hiMap.multiScreenFun(
       this.hiMap.mapObj,
       this.hiMapFun
-    );
-
+    )
 
     selectByDayRaise().then((res) => {
       this.todayListNum += res.data.data.sum
     })
     selectByDayNoice().then((res) => {
       this.todayListNum += res.data.data.sum
-
     })
     selectByDayRoadData().then((res) => {
       this.todayListNum += res.data.data.sum
-
     })
 
-  
-
     // 根据经纬度查询半径内所有的工地
-    bus.$off("openCauseAnalysis");
-    bus.$on("openCauseAnalysis", (row) => {
-
+    bus.$off('openCauseAnalysis')
+    bus.$on('openCauseAnalysis', (row) => {
       this.removeRoadCauseAnalysis()
       // this.timeRegion = data.data.dt;
       // this.hiMapFun.removerPolygon();
-      this.hiMapFun.removeLayerByLayerName("constructionSite");
+      this.hiMapFun.removeLayerByLayerName('constructionSite')
       // debugger
       // this.circle(latLng);
-      this.hiMap.mapObj.map.flyTo({ lat: row.wd, lng: row.jd });
+      this.hiMap.mapObj.map.flyTo({ lat: row.wd, lng: row.jd })
       // this.WithinRadiusSite(latLng);
-      let dataEvent = [{
-          latLng: { lat: row.wd, lng: row.jd },
-          data: row,
-          type: "site",
+      const dataEvent = [{
+        latLng: { lat: row.wd, lng: row.jd },
+        data: row,
+        type: 'site'
       }]
       this.hiMapFun.addPointsToMap(
         dataEvent,
-        "construction.png",
-        "constructionSite",
+        'construction.png',
+        'constructionSite',
         createSiteListPop
-      );
-    });
-  
-    bus.$off("roadOnMap");
-    bus.$on("roadOnMap",(roadData) => {
-      this.removeRoadCauseAnalysis()
-      this.roadOnMap(roadData);
+      )
     })
 
-    bus.$off("removeCameraLayer");
-    bus.$on("removeCameraLayer",(type) => {
+    bus.$off('roadOnMap')
+    bus.$on('roadOnMap', (roadData) => {
+      this.removeRoadCauseAnalysis()
+      this.roadOnMap(roadData)
+    })
+
+    bus.$off('removeCameraLayer')
+    bus.$on('removeCameraLayer', (type) => {
       this.hiMapFun.removeLayerByLayerName(type)
     })
-  
-    bus.$off("CameraSingleDataOnMap");
-    bus.$on("CameraSingleDataOnMap",(labelName,data) => {
 
+    bus.$off('CameraSingleDataOnMap')
+    bus.$on('CameraSingleDataOnMap', (labelName, data) => {
       this.removeRoadCauseAnalysis()
-      this.addResourceTomap(labelName,data);
+      this.addResourceTomap(labelName, data)
     })
 
     bus.$off('openCurrentVideoWaterPoint')
-    bus.$on('openCurrentVideoWaterPoint',channelCode => {
-      this.openVideo = true;
+    bus.$on('openCurrentVideoWaterPoint', channelCode => {
+      this.openVideo = true
       this.channelCode.unshift(channelCode)
     })
-  
-    bus.$off("openCurrentVideoSurveillance");
-    bus.$on("openCurrentVideoSurveillance", (channelCode) => {
-      this.openVideo = true;
-      this.channelCode.unshift(channelCode);
-    });
 
-    bus.$off("roadCauseAnalysis");
-    bus.$on("roadCauseAnalysis", (data) => {
+    bus.$off('openCurrentVideoSurveillance')
+    bus.$on('openCurrentVideoSurveillance', (channelCode) => {
+      this.openVideo = true
+      if (!this.channelCode.includes(channelCode)) {
+        console.log(this.channelCode, channelCode, '====>实时监控')
+        this.channelCode.unshift(channelCode)
+      } else {
+        this.$message.warning('该实时监控已经加入视频列表了！')
+      }
+    })
+
+    bus.$off('roadCauseAnalysis')
+    bus.$on('roadCauseAnalysis', (data) => {
       this.removeRoadCauseAnalysis()
 
-      this.circle({ lat: Number(data.lat), lng: Number(data.lng) });
-      this.selectAllByGps(data);
+      this.circle({ lat: Number(data.lat), lng: Number(data.lng) })
+      this.selectAllByGps(data)
       this.WithinRadiusSite(data)
-    });
+    })
   },
   methods: {
-    querySearchAsync(queryString, cb) {
+    querySearchAsync (queryString, cb) {
       if (queryString.length > 0) {
         searchCamera(queryString).then((res) => {
-          cb(res.data.suggestions);
-        });
+          cb(res.data.suggestions)
+        })
       }
     },
-    handleSelect(item) {
-      this.hiMapFun.clearAllLayers();
-      const arr = item.detail.location.split(",");
+    handleSelect (item) {
+      this.hiMapFun.clearAllLayers()
+      const arr = item.detail.location.split(',')
       const searchDataDetail = [
         {
           latLng: { lat: arr[1], lng: arr[0] },
-          data: item,
-        },
-      ];
-      this.hiMap.mapObj.map.flyTo({ lat: arr[1], lng: arr[0] });
-      this.hiMapFun.openPopupVideoSurveillance(searchDataDetail[0]);
+          data: item
+        }
+      ]
+      this.hiMap.mapObj.map.flyTo({ lat: arr[1], lng: arr[0] })
+      this.hiMapFun.openPopupVideoSurveillance(searchDataDetail[0])
       this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
         searchDataDetail,
-        "poi-red.png",
-        "address"
-      );
+        'poi-red.png',
+        'address'
+      )
       // this.timer = setTimeout(() => {
       //   this.addResourceTomap("全部", this.cameraAllData);
       // }, 1000);
     },
     // 圈选查询
-    circle(latlng) {
-      this.hiMapFun.addCircleToMap(latlng, 3500);
+    circle (latlng) {
+      this.hiMapFun.addCircleToMap(latlng, 3500)
     },
     // 根据经纬度查半径内的工地
-    async WithinRadiusSite(data) {
+    async WithinRadiusSite (data) {
       const param = {
         jd: data.lng,
         radius: 3000,
-        wd: data.lat,
-      };
-      const res = await selectByJdWd(param);
-      this.constructionSiteData = res.data.data;
-      const dataEvent = [];
+        wd: data.lat
+      }
+      const res = await selectByJdWd(param)
+      this.constructionSiteData = res.data.data
+      const dataEvent = []
       this.constructionSiteData.forEach((item) => {
-        const arr = [0, 0.0, "", "0", "0.0"];
+        const arr = [0, 0.0, '', '0', '0.0']
         if (arr.indexOf(item.wd) == -1) {
           dataEvent.push({
             latLng: { lat: Number(item.wd), lng: Number(item.jd) },
             data: item,
-            type: "site",
-          });
+            type: 'site'
+          })
         }
-      });
+      })
       this.hiMapFun.addPointsToMap(
         dataEvent,
-        "construction.png",
-        "constructionSite",
+        'construction.png',
+        'constructionSite',
         createSiteListPop
-      );
+      )
     },
 
-    //路网上图
-    roadOnMap(roadData) {
+    // 路网上图
+    roadOnMap (roadData) {
       roadData.forEach((item) => {
-        let newPoint = JSON.parse(item.points);
+        const newPoint = JSON.parse(item.points)
         newPoint[0].map((Point) => {
-          Point.reverse();
-        });
-        item.pm10 = Number(item.pm10);
+          Point.reverse()
+        })
+        item.pm10 = Number(item.pm10)
         switch (true) {
-          case 0 < item.pm10 && item.pm10 <= 50:
-            this.hiMapFun.addPathToMap(newPoint, "#36fe78");
-            break;
-          case 50 < item.pm10 && item.pm10 <= 150:
-            this.hiMapFun.addPathToMap(newPoint, "#fde202");
-            break;
-          case 150 < item.pm10 && item.pm10 <= 250:
-            this.hiMapFun.addPathToMap(newPoint, "#feb403");
-            break;
-          case 250 < item.pm10 && item.pm10 <= 350:
-            this.hiMapFun.addPathToMap(newPoint, "#fd8402");
-            break;
-          case 350 < item.pm10 && item.pm10 <= 420:
-            this.hiMapFun.addPathToMap(newPoint, "#fd4302");
-            break;
-          case 420 < item.pm10 && item.pm10 <= 500:
-            this.hiMapFun.addPathToMap(newPoint, "#fd0202");
-            break;
-          case 500 < item.pm10 && item.pm10 <= 600:
-            this.hiMapFun.addPathToMap(newPoint, "#a80101");
-            break;
-          case 600 < item.pm10 && item.pm10 <= 700:
-            this.hiMapFun.addPathToMap(newPoint, "#690000");
-            break;
+          case item.pm10 > 0 && item.pm10 <= 50:
+            this.hiMapFun.addPathToMap(newPoint, '#36fe78')
+            break
+          case item.pm10 > 50 && item.pm10 <= 150:
+            this.hiMapFun.addPathToMap(newPoint, '#fde202')
+            break
+          case item.pm10 > 150 && item.pm10 <= 250:
+            this.hiMapFun.addPathToMap(newPoint, '#feb403')
+            break
+          case item.pm10 > 250 && item.pm10 <= 350:
+            this.hiMapFun.addPathToMap(newPoint, '#fd8402')
+            break
+          case item.pm10 > 350 && item.pm10 <= 420:
+            this.hiMapFun.addPathToMap(newPoint, '#fd4302')
+            break
+          case item.pm10 > 420 && item.pm10 <= 500:
+            this.hiMapFun.addPathToMap(newPoint, '#fd0202')
+            break
+          case item.pm10 > 500 && item.pm10 <= 600:
+            this.hiMapFun.addPathToMap(newPoint, '#a80101')
+            break
+          case item.pm10 > 600 && item.pm10 <= 700:
+            this.hiMapFun.addPathToMap(newPoint, '#690000')
+            break
           default:
-            this.hiMapFun.addPathToMap(newPoint, "#36fe78");
-            break;
+            this.hiMapFun.addPathToMap(newPoint, '#36fe78')
+            break
         }
-      });
+      })
     },
 
-    layerHandleChange(item) {
+    layerHandleChange (item) {
       this.removeRoadCauseAnalysis()
-      
+
       if (this.changeLayerBtnGroup.indexOf(item) !== -1) {
         switch (item) {
-          case "道路":
-            this.roadOnMap(this.$refs.complaintEventRef.roadData);
-            break;
-          case "AI事件":
-            break;
-          case "视频监控":
-            this.addResourceTomap('全部',this.$refs.videoListRef.cameraAllData)
-            break;
-          case "工地":
-            this.hiMapFun.removeLayerByLayerName("constructionSite");
-            let dataEvent = []
+          case '道路':
+            this.roadOnMap(this.$refs.complaintEventRef.roadData)
+            break
+          case 'AI事件':
+            break
+          case '视频监控':
+            this.addResourceTomap('全部', this.$refs.videoListRef.cameraAllData)
+            break
+          case '工地':
+            this.hiMapFun.removeLayerByLayerName('constructionSite')
+            const dataEvent = []
             this.$refs.siteListRef.siteData.forEach((item) => {
               dataEvent.push({
                 latLng: { lat: Number(item.wd), lng: Number(item.jd) },
                 data: item,
-                type: "site",
-              });
-            });
+                type: 'site'
+              })
+            })
             this.hiMapFun.addPointsToMap(
               dataEvent,
-              "construction.png",
-              "constructionSite",
+              'construction.png',
+              'constructionSite',
               createSiteListPop
-            );
-            break;
+            )
+            break
           default:
-            break;
+            break
         }
       } else {
         switch (item) {
-          case "道路":
-            this.hiMapFun.removerPolyline();
-            break;
-          case "AI事件":
-            break;
-          case "视频监控":
+          case '道路':
+            this.hiMapFun.removerPolyline()
+            break
+          case 'AI事件':
+            break
+          case '视频监控':
             this.hiMapFun.removeLayerByLayerName('全部')
-            break;
-          case "工地":
-            this.hiMapFun.removeLayerByLayerName("constructionSite");
-            break;
+            break
+          case '工地':
+            this.hiMapFun.removeLayerByLayerName('constructionSite')
+            break
           default:
-            break;
+            break
         }
       }
     },
 
-    addResourceTomap(type,data) {
-      const dataEvent = [];
+    addResourceTomap (type, data) {
+      const dataEvent = []
       data.forEach((item) => {
-        const arr = [0,0.0,'','0','0.0']
-        if(arr.indexOf(item.gpsX) == -1){
-          dataEvent.push({
-            latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) },
-            data: item,
-            type: 'videoSurveillance'
-          });
-        }
-        
-      });
-      this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, "videoSurveillance.png", type, createCameraDetailsPop)
-    },
-
-    circle(latlng) {
-      this.hiMapFun.addCircleToMap(latlng, 3800);
-    },
-
-    async selectAllByGps(data) {
-      const param = {
-        gpsX: data.lng,
-        gpsY: data.lat,
-        radius: 3000,
-      };
-
-      const res = await selectAllByGps(param);
-      console.log(res);
-      const dataEvent = [];
-      res.data.data.forEach((item) => {
-        const arr = [0, 0.0, "", "0", "0.0"];
+        const arr = [0, 0.0, '', '0', '0.0']
         if (arr.indexOf(item.gpsX) == -1) {
           dataEvent.push({
             latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) },
             data: item,
-            type: "videoSurveillance",
-          });
+            type: 'videoSurveillance'
+          })
         }
-      });
-      this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
-        dataEvent,
-        "videoSurveillance.png",
-        "videoSurveillance",
-        createCameraDetailsPop
-      );
+      })
+      this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, 'videoSurveillance.png', type, createCameraDetailsPop)
     },
 
-    removeRoadCauseAnalysis() {
-      this.hiMapFun.removerPolygon();
-      this.hiMapFun.removeLayerByLayerName("videoSurveillance");
-      this.hiMapFun.removeLayerByLayerName("constructionSite");
-      this.hiMapFun.removeLayerByLayerName("roadPoint")
+    circle (latlng) {
+      this.hiMapFun.addCircleToMap(latlng, 3800)
     },
+
+    async selectAllByGps (data) {
+      const param = {
+        gpsX: data.lng,
+        gpsY: data.lat,
+        radius: 3000
+      }
+
+      const res = await selectAllByGps(param)
+      console.log(res)
+      const dataEvent = []
+      res.data.data.forEach((item) => {
+        const arr = [0, 0.0, '', '0', '0.0']
+        if (arr.indexOf(item.gpsX) == -1) {
+          dataEvent.push({
+            latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) },
+            data: item,
+            type: 'videoSurveillance'
+          })
+        }
+      })
+      this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
+        dataEvent,
+        'videoSurveillance.png',
+        'videoSurveillance',
+        createCameraDetailsPop
+      )
+    },
+
+    removeRoadCauseAnalysis () {
+      this.hiMapFun.removerPolygon()
+      this.hiMapFun.removeLayerByLayerName('videoSurveillance')
+      this.hiMapFun.removeLayerByLayerName('constructionSite')
+      this.hiMapFun.removeLayerByLayerName('roadPoint')
+    }
   },
-  beforeDestroy() {},
-};
+  beforeDestroy () {}
+}
 </script>
 <style scoped lang="scss">
 @import url(../../../../node_modules/element-ui/lib/theme-chalk/index.css);
 
 @font-face {
-  font-family: 'Tensentype-ZhiHeiJ-W5';
+  font-family: "Tensentype-ZhiHeiJ-W5";
   src: url("../../../assets/construction/TTZhiHeiJ-W5.ttf");
 }
 .map-box {
@@ -442,11 +439,11 @@ export default {
       background-clip: text;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
-      font-family: 'Tensentype-ZhiHeiJ-W5';
+      font-family: "Tensentype-ZhiHeiJ-W5";
     }
     .title::before {
-      content: '在建工地综合监管平台';
-      text-shadow: 0px 3px 10px rgba(0,0,0,.9);
+      content: "在建工地综合监管平台";
+      text-shadow: 0px 3px 10px rgba(0, 0, 0, 0.9);
       position: absolute;
       z-index: -1;
     }
@@ -457,20 +454,20 @@ export default {
     z-index: 1000;
     left: 496px;
     top: 90px;
-    border: 1px solid rgba(31,254,253,.9);
+    border: 1px solid rgba(31, 254, 253, 0.9);
     ::v-deep .el-input__inner {
       color: #fff;
-      background: rgba($color: #203b5d, $alpha: .8);
+      background: rgba($color: #203b5d, $alpha: 0.8);
       width: 226px;
       height: 36px;
-      border:none;
+      border: none;
       &::placeholder {
         color: rgba($color: #fff, $alpha: 0.6);
       }
     }
     ::v-deep .el-input__prefix {
       top: -1px;
-      color: rgba(31,254,253,.9);
+      color: rgba(31, 254, 253, 0.9);
     }
     ::v-deep .el-input-group__append {
       width: 54px;
@@ -489,7 +486,7 @@ export default {
       z-index: -1 !important;
       width: 226px !important;
       left: 0px !important;
-      background: rgba(32,59,93,.8);
+      background: rgba(32, 59, 93, 0.8);
       border: 1px solid #1ffefd;
       li {
         color: #fff;
@@ -505,9 +502,9 @@ export default {
     z-index: 1000;
     left: 10px;
     top: 90px;
-    height:980px;
+    height: 980px;
     width: 478px;
-    background: rgba($color: #05213b, $alpha: .85)
+    background: rgba($color: #05213b, $alpha: 0.85);
   }
 
   .eventNum {
@@ -528,7 +525,7 @@ export default {
       span {
         font-size: 46px;
         font-weight: bold;
-        background: linear-gradient(0deg, #91f4f8 0%, #ffffff 100% );
+        background: linear-gradient(0deg, #91f4f8 0%, #ffffff 100%);
         background-clip: text;
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
@@ -543,8 +540,8 @@ export default {
     right: 8px;
     top: 92px;
     width: 398px;
-    height:460px;
-    background: rgba($color: #05213b, $alpha: .85);
+    height: 460px;
+    background: rgba($color: #05213b, $alpha: 0.85);
   }
 
   .siteList {
@@ -553,14 +550,14 @@ export default {
     right: 8px;
     top: 562px;
     width: 398px;
-    height:500px;
-    background: rgba($color: #05213b, $alpha: .85);
+    height: 500px;
+    background: rgba($color: #05213b, $alpha: 0.85);
   }
 
   .changeLayer {
     width: 332px;
     height: 67px;
-    background: rgba(7,26,44,.8);
+    background: rgba(7, 26, 44, 0.8);
     position: absolute;
     bottom: 10px;
     left: 50%;
@@ -571,7 +568,7 @@ export default {
       width: 96px;
       height: 100%;
       font-size: 16px;
-      color: rgba(255,255,255,.6);
+      color: rgba(255, 255, 255, 0.6);
       text-align: center;
       line-height: 67px;
     }
diff --git a/src/views/pages/roadGovernance/components/RoadMain.vue b/src/views/pages/roadGovernance/components/RoadMain.vue
index 34f91e7..e60f594 100644
--- a/src/views/pages/roadGovernance/components/RoadMain.vue
+++ b/src/views/pages/roadGovernance/components/RoadMain.vue
@@ -297,7 +297,12 @@ export default {
     bus.$off('openCurrentVideoSurveillance')
     bus.$on('openCurrentVideoSurveillance', (channelCode) => {
       this.openVideo = true
-      this.channelCode.unshift(channelCode)
+      if (!this.channelCode.includes(channelCode)) {
+        console.log(this.channelCode, channelCode, '====>实时监控')
+        this.channelCode.unshift(channelCode)
+      } else {
+        this.$message.warning('该实时监控已经加入视频列表了！')
+      }
     })
 
     // 累计事件数量
diff --git a/src/views/pages/videoSurveillance/index.vue b/src/views/pages/videoSurveillance/index.vue
index 6dcc448..4011796 100644
--- a/src/views/pages/videoSurveillance/index.vue
+++ b/src/views/pages/videoSurveillance/index.vue
@@ -19,7 +19,7 @@
           v-model="state"
           :fetch-suggestions="querySearchAsync"
           placeholder="搜索地点"
-          :trigger-on-focus="false" 
+          :trigger-on-focus="false"
           @select="handleSelect"
           :popper-append-to-body='false'
           popper-class="my-autocomplete"
@@ -35,7 +35,7 @@
       <!-- <aside class="left-list">
           <h2>事件</h2>
       </aside> -->
-      
+
       <aside class="tag-box">
         <div class="refresh" @click="refresh"><i class="el-icon-refresh"></i></div>
         <el-tabs type="border-card" class="border-card">
@@ -48,9 +48,9 @@
             >
             </el-input>
             <el-checkbox-group v-model="checkboxGroup">
-              <el-checkbox-button 
-                v-for="item in tabList" 
-                :label="item.labelName" 
+              <el-checkbox-button
+                v-for="item in tabList"
+                :label="item.labelName"
                 :key="item.id"
                 @change="tabChange(item)"
               >
@@ -63,7 +63,7 @@
               placeholder="请输入关键词"
               suffix-icon="el-icon-search"
               v-model="labelSearch"
-              @input="searchCameraTree"  
+              @input="searchCameraTree"
             >
             </el-input>
             <!-- <el-checkbox-group v-model="checkStatus" class="checkStatus" style="height:unset">
@@ -94,7 +94,7 @@
               <el-tree
                 v-show="!camreaTreeIsShow"
                 ref="tree"
-                :data="camreaTreeSingle" 
+                :data="camreaTreeSingle"
                 :props="{label:'channelName',children:'children'}"
                 :filter-node-method="filterNode"
                 @node-click="treeCameraClick"
@@ -105,83 +105,81 @@
               </el-tree>
           </el-tab-pane>
         </el-tabs>
-        
-      </aside>
 
+      </aside>
 
     </div>
     <video-play
       v-if="openVideo"
-      :key="channelCode" 
+      :key="channelCode"
       :channel-id="channelCode"
     ></video-play>
   </div>
 </template>
 
 <script>
-import { HieimpMap } from "@/supermap/map-init";
-import TiledMap from "./components/tiledMap";
-import * as turf from '@turf/turf';
-import { wgs84LL2bdLL } from '@/utils/coordinateSystemTransform';
-import {createCameraDetailsPop} from '@/supermap/createMarkerPopup';
+import { HieimpMap } from '@/supermap/map-init'
+import TiledMap from './components/tiledMap'
+import * as turf from '@turf/turf'
+import { wgs84LL2bdLL } from '@/utils/coordinateSystemTransform'
+import { createCameraDetailsPop } from '@/supermap/createMarkerPopup'
 import VideoPlay from './components/VideoPlay'
-import { getCameraAll,getCameraLabel,getCameraAllLabel,searchCamera,getCameraAllOrgan,getCameraByParentId,selectByLabelName,selectByChannelName } from '@/api/videoSurveillance/index'
-import bus from '@/views/layout/bus';
+import { getCameraAll, getCameraLabel, getCameraAllLabel, searchCamera, getCameraAllOrgan, getCameraByParentId, selectByLabelName, selectByChannelName } from '@/api/videoSurveillance/index'
+import bus from '@/views/layout/bus'
 // import testjson from "@/assets/response2.json";
 
 export default {
-  data() {
+  data () {
     return {
       loading: true,
       hiMap: new HieimpMap(), // 地图全局对象
-      mapId: "map-single", // 地图容器的id
+      mapId: 'map-single', // 地图容器的id
 
+      cameraAllData: [],
 
-      cameraAllData:[],
-      
       checkboxGroup: [],
       tabList: [],
       state: '',
-      timeout:  null,
-      camreaTree:[],
-      camreaTreeIsShow:true,
+      timeout: null,
+      camreaTree: [],
+      camreaTreeIsShow: true,
       camreaTreeSingle: [],
       checkStatus: '2',
       labelSearch: '',
       page: 1,
-      timer:null,
-      openVideo:false,
-      channelCode:[]
+      timer: null,
+      openVideo: false,
+      channelCode: []
       // testjson:testjson,
-    };
+    }
   },
   components: {
     TiledMap,
     VideoPlay
   },
-  created() {
-    
+  created () {
+
   },
   watch: {
-    page(newV,oldV){
+    page (newV, oldV) {
       this.getCameraAllPage(newV)
     },
-    checkStatus(newV,oldV) {
+    checkStatus (newV, oldV) {
       console.log(newV)
       this.$refs.tree.filter(newV)
     }
   },
-  mounted() {
-    this.hiMapFun = this.hiMap.myMapFun(this.hiMap.mapObj);
+  mounted () {
+    this.hiMapFun = this.hiMap.myMapFun(this.hiMap.mapObj)
     this.multiScreenFun = this.hiMap.multiScreenFun(
       this.hiMap.mapObj,
       this.hiMapFun
-    );
-    this.hiMap.mapObj.map.flyTo({ lat: 36.060, lng: 120.3899},16)
+    )
+    this.hiMap.mapObj.map.flyTo({ lat: 36.060, lng: 120.3899 }, 16)
     getCameraAllLabel().then((res) => {
       this.tabList = res.data.data
-    });
-    getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
+    })
+    getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then((res) => {
       this.camreaTree = res.data.data
       res.data.data.forEach((item) => {
         this.camreaTreeSingle.push({
@@ -191,203 +189,207 @@ export default {
       })
     })
     getCameraAll().then((res) => {
-        let t1 = new Date().getTime();
-        this.cameraAllData = res.data
-        this.addResourceTomap('全部',res.data);
-        this.loading = false
-        let t2 = new Date().getTime();
-        console.log("时间#############" + (t2 - t1));
+      const t1 = new Date().getTime()
+      this.cameraAllData = res.data
+      this.addResourceTomap('全部', res.data)
+      this.loading = false
+      const t2 = new Date().getTime()
+      console.log('时间#############' + (t2 - t1))
     })
     // this.getMapPoint()
     bus.$off('openCurrentVideoSurveillance')
-    bus.$on('openCurrentVideoSurveillance',channelCode => {
-      this.openVideo = true;
-      this.channelCode.unshift(channelCode)
+    bus.$on('openCurrentVideoSurveillance', channelCode => {
+      this.openVideo = true
+      if (!this.channelCode.includes(channelCode)) {
+        console.log(this.channelCode, channelCode, '====>实时监控')
+        this.channelCode.unshift(channelCode)
+      } else {
+        this.$message.warning('该实时监控已经加入视频列表了！')
+      }
     })
   },
   methods: {
-    getCameraAllPage(page){
-      let params = {
-        page:page,
-        pageSize:20000
+    getCameraAllPage (page) {
+      const params = {
+        page: page,
+        pageSize: 20000
       }
       getCameraAll(params).then((res) => {
         // let t1 = new Date().getTime();
         this.cameraAllData = res.data.data
-        this.addResourceTomap('全部',res.data.data);
+        this.addResourceTomap('全部', res.data.data)
         this.loading = false
         // let t2 = new Date().getTime();
         // console.log("时间#############" + (t2 - t1));
       })
     },
-    tabChange(item){
-      if(this.checkboxGroup.indexOf(item.labelName) !== -1){
-        if(item.labelName == '全部'){
-          this.addResourceTomap('全部',this.cameraAllData)
+    tabChange (item) {
+      if (this.checkboxGroup.indexOf(item.labelName) !== -1) {
+        if (item.labelName == '全部') {
+          this.addResourceTomap('全部', this.cameraAllData)
           this.checkboxGroup = ['全部']
         } else {
-          this.hiMapFun.removeLayerByLayerName('全部');
-          getCameraLabel({labelCode:item.labelCode}).then((res) => {
-            this.addResourceTomap(item.labelName,res.data.data);
+          this.hiMapFun.removeLayerByLayerName('全部')
+          getCameraLabel({ labelCode: item.labelCode }).then((res) => {
+            this.addResourceTomap(item.labelName, res.data.data)
             res.data.data.forEach((item) => {
               this.camreaTreeSingle.forEach((val) => {
-                if(item.nodeName == val.channelName){
+                if (item.nodeName == val.channelName) {
                   val.children.push(item)
                 }
               })
             })
-            this.camreaTreeIsShow = false;
+            this.camreaTreeIsShow = false
           })
         }
-      }else {
-        this.hiMapFun.removeLayerByLayerName(item.labelName);
-        this.checkStatus = "2"
+      } else {
+        this.hiMapFun.removeLayerByLayerName(item.labelName)
+        this.checkStatus = '2'
         this.camreaTreeIsShow = true
-        getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
+        getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then((res) => {
           this.camreaTree = res.data.data
         })
       }
     },
-    
-    addResourceTomap(type,data) {
-      const dataEvent = [];
+
+    addResourceTomap (type, data) {
+      const dataEvent = []
       data.forEach((item) => {
-        const arr = [0,0.0,'','0','0.0']
-        if(arr.indexOf(item.gpsX) == -1){
+        const arr = [0, 0.0, '', '0', '0.0']
+        if (arr.indexOf(item.gpsX) == -1) {
           dataEvent.push({
             latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) },
             data: item,
             type: 'videoSurveillance'
-          });
+          })
         }
-        
-      });
-      this.getMapPoint(dataEvent, "videoSurveillance.png", type);
+      })
+      this.getMapPoint(dataEvent, 'videoSurveillance.png', type)
     },
-    getMapPoint(data, img, type) {
+    getMapPoint (data, img, type) {
       // this.hiMapFun.clearAllLayers();
-      const features = data;
+      const features = data
       // debugger
       this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(features, img, type, createCameraDetailsPop)
       // this.hiMapFun.addResourceOnMapWithoutSuper(features, img, "newEVent", createListDetailsPop);
     },
 
-    querySearchAsync(queryString, cb) {
-      if(queryString.length > 0){
+    querySearchAsync (queryString, cb) {
+      if (queryString.length > 0) {
         searchCamera(queryString).then((res) => {
           cb(res.data.suggestions)
           // console.log(res)
         })
       }
-        // console.log(queryString)
-        // cb(this.testjson.suggestions)
+      // console.log(queryString)
+      // cb(this.testjson.suggestions)
     },
-    handleSelect(item) {
-      this.hiMapFun.clearAllLayers();
-      //定时器方法
-      let arr = item.detail.location.split(',')
+    handleSelect (item) {
+      this.hiMapFun.clearAllLayers()
+      // 定时器方法
+      const arr = item.detail.location.split(',')
       const searchDataDetail = [{
-          latLng: { lat: arr[1], lng: arr[0] },
-          data: item,
-        }]
-      this.hiMap.mapObj.map.flyTo({ lat: arr[1], lng: arr[0] });
+        latLng: { lat: arr[1], lng: arr[0] },
+        data: item
+      }]
+      this.hiMap.mapObj.map.flyTo({ lat: arr[1], lng: arr[0] })
       this.hiMapFun.openPopupVideoSurveillance(searchDataDetail[0])
-      this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(searchDataDetail,"poi-red.png", "address");
+      this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(searchDataDetail, 'poi-red.png', 'address')
       this.timer = setTimeout(() => {
-        this.addResourceTomap('全部',this.cameraAllData)
+        this.addResourceTomap('全部', this.cameraAllData)
       }, 1000)
 
-      //回调方法
+      // 回调方法
       // this.flyToMapCallback(item,this.asyncCameraAllDataOnMap)
       this.checkboxGroup = []
     },
-    flyToMapCallback(item,callback){
-      let arr = item.detail.location.split(',')
+    flyToMapCallback (item, callback) {
+      const arr = item.detail.location.split(',')
       const searchDataDetail = [{
-          latLng: { lat: arr[1], lng: arr[0] },
-          data: item,
-        }]
-      this.hiMap.mapObj.map.flyTo({ lat: arr[1], lng: arr[0] });
+        latLng: { lat: arr[1], lng: arr[0] },
+        data: item
+      }]
+      this.hiMap.mapObj.map.flyTo({ lat: arr[1], lng: arr[0] })
       this.hiMapFun.openPopupVideoSurveillance(searchDataDetail[0])
-      this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(searchDataDetail,"poi-red.png", "address");
+      this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(searchDataDetail, 'poi-red.png', 'address')
       callback(callback)
     },
-    asyncCameraAllDataOnMap(){
-      this.addResourceTomap('全部',this.cameraAllData)
+    asyncCameraAllDataOnMap () {
+      this.addResourceTomap('全部', this.cameraAllData)
     },
-    handleNodeClick(data) {
-      console.log(data);
-      getCameraAllOrgan({parentId:data.id}).then((res) => {
-        this.camreaTree.forEach( (item) => {
+    handleNodeClick (data) {
+      console.log(data)
+      getCameraAllOrgan({ parentId: data.id }).then((res) => {
+        this.camreaTree.forEach((item) => {
           item.children = res.data.data
         })
-        console.log(this.camreaTree);
+        console.log(this.camreaTree)
       })
     },
-    loadNode(node, resolve) {
-        // if (node.level === 0) {
-        //   return resolve([{ name: 'region' }]);
-        // }
-        console.log(node)
-        if (node.level > 0) {
-          let subData = []
-          getCameraAllOrgan({parentId:node.data.id}).then((res) => {
-            if(res.data.data.length == 0){
-              const params = {
-                parentId:node.data.id,
-                checkStatus: this.checkStatus=='2'?["0","1"]:this.checkStatus,
-              }
-              getCameraByParentId(params).then((res) => {
-                res.data.data.forEach((item) => {
-                  subData.push({
-                    name: item.channelName,
-                    gpsX: item.gpsX,
-                    gpsY: item.gpsY,
-                    channelCode:item.channelCode,
-                    checkStatus:item.checkStatus,
-                    leaf:true,
-                  })
-                })
-                return resolve(subData);
-              })
-            }else{
-              subData = res.data.data
-              return resolve(subData);
+    loadNode (node, resolve) {
+      // if (node.level === 0) {
+      //   return resolve([{ name: 'region' }]);
+      // }
+      console.log(node)
+      if (node.level > 0) {
+        let subData = []
+        getCameraAllOrgan({ parentId: node.data.id }).then((res) => {
+          if (res.data.data.length == 0) {
+            const params = {
+              parentId: node.data.id,
+              checkStatus: this.checkStatus == '2' ? ['0', '1'] : this.checkStatus
             }
-          })
-        }
+            getCameraByParentId(params).then((res) => {
+              res.data.data.forEach((item) => {
+                subData.push({
+                  name: item.channelName,
+                  gpsX: item.gpsX,
+                  gpsY: item.gpsY,
+                  channelCode: item.channelCode,
+                  checkStatus: item.checkStatus,
+                  leaf: true
+                })
+              })
+              return resolve(subData)
+            })
+          } else {
+            subData = res.data.data
+            return resolve(subData)
+          }
+        })
+      }
     },
-    treeCameraClick(data) {
+    treeCameraClick (data) {
       console.log(data)
-      if(data.channelCode){
+      if (data.channelCode) {
         const cameraTree = [{
           latLng: { lat: data.gpsY, lng: data.gpsX },
           data: data,
-          type:'cameraTree'
+          type: 'cameraTree'
         }]
-        this.hiMapFun.removeLayerByLayerName("cameraTree");
+        this.hiMapFun.removeLayerByLayerName('cameraTree')
         this.hiMapFun.openPopupVideoSurveillance(cameraTree[0])
-        const arr = [0,0.0,'','0','0.0']
-        if(arr.indexOf(data.gpsX) == -1){
-          this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(cameraTree,"poi-red.png", "cameraTree");
-          this.hiMap.mapObj.map.flyTo({ lat: data.gpsY, lng: data.gpsX });
+        const arr = [0, 0.0, '', '0', '0.0']
+        if (arr.indexOf(data.gpsX) == -1) {
+          this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(cameraTree, 'poi-red.png', 'cameraTree')
+          this.hiMap.mapObj.map.flyTo({ lat: data.gpsY, lng: data.gpsX })
         }
       }
     },
-    searchLabel(value) {
+    searchLabel (value) {
       const params = {
-        labelName:value
+        labelName: value
       }
       selectByLabelName(params).then((res) => {
         console.log(res)
         this.tabList = res.data.data
       })
     },
-    searchCameraTree(value) {
-      if(value.length > 0){
+    searchCameraTree (value) {
+      if (value.length > 0) {
         const params = {
-        channelName:value
-      }
+          channelName: value
+        }
         selectByChannelName(params).then((res) => {
           console.log(res)
           this.camreaTree = []
@@ -396,46 +398,46 @@ export default {
               name: item.channelName,
               gpsX: item.gpsX,
               gpsY: item.gpsY,
-              channelCode:item.channelCode,
-              leaf:true,
+              channelCode: item.channelCode,
+              leaf: true
             })
           })
         })
-      }else {
-        getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
+      } else {
+        getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then((res) => {
           this.camreaTree = res.data.data
         })
       }
     },
-    refresh() {
-      this.hiMapFun.clearAllLayers();
-      this.addResourceTomap('全部',this.cameraAllData)
+    refresh () {
+      this.hiMapFun.clearAllLayers()
+      this.addResourceTomap('全部', this.cameraAllData)
       this.checkboxGroup = []
     },
-    reset() {
+    reset () {
       this.checkboxGroup = []
-      this.checkStatus = "2";
+      this.checkStatus = '2'
       this.camreaTreeIsShow = true
-      getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
+      getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then((res) => {
         this.camreaTree = res.data.data
       })
-      document.getElementById("tree").scrollTop = 0;
+      document.getElementById('tree').scrollTop = 0
     },
-    filterNode(value, data) {
-      if (value == "2") return true;
-      if (value == "0") {
-        return data.checkStatus == 0;
+    filterNode (value, data) {
+      if (value == '2') return true
+      if (value == '0') {
+        return data.checkStatus == 0
       }
-      if (value == "1") {
-        return data.checkStatus == 1;
+      if (value == '1') {
+        return data.checkStatus == 1
       }
-    },
+    }
   },
-  beforeDestroy(){
-    clearInterval(this.timer);// 清除定时器
-    this.timer = null;
-},
-};
+  beforeDestroy () {
+    clearInterval(this.timer)// 清除定时器
+    this.timer = null
+  }
+}
 </script>
 
 <style scoped lang="scss">
@@ -444,10 +446,9 @@ export default {
 ::v-deep .el-loading-mask {
   z-index: 99999;
   width: 1920px;
-  height:1080px;
+  height: 1080px;
 }
 
-
 .map-box {
   width: 100%;
   height: 100%;
@@ -462,19 +463,20 @@ export default {
 #contain {
   // width: 1920px;
   // height: 1080px;
-  
+
   header {
     position: relative;
     z-index: 1000;
     width: 100%;
     height: 104px;
     padding-top: 10px;
-    background: url("~@/assets/img/titlevideo.png") no-repeat,url("~@/assets/img/titlevideobg.png") no-repeat;
+    background: url("~@/assets/img/titlevideo.png") no-repeat,
+      url("~@/assets/img/titlevideobg.png") no-repeat;
     text-align: center;
     span {
       font-size: 44px;
       font-weight: bold;
-      background: linear-gradient(0deg, #C7FBFB 0%, #FFFFFF 100%);
+      background: linear-gradient(0deg, #c7fbfb 0%, #ffffff 100%);
       background-clip: text;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
@@ -485,28 +487,28 @@ export default {
     position: absolute;
     z-index: 1000;
     left: 100px;
-    border-radius:4px;
+    border-radius: 4px;
     ::v-deep .el-input__inner {
       color: #fff;
       background: #629ab8;
       width: 255px;
       height: 44px;
-      border-radius:20px;
-      border:none;
+      border-radius: 20px;
+      border: none;
       &::placeholder {
-          color: #fff;
+        color: #fff;
       }
     }
     ::v-deep .el-input__prefix {
       top: 2px;
     }
     ::v-deep .el-input-group__append {
-      width:54px;
-      height:30px;
-      position:absolute;
-      top:6px;
-      right:6px;
-      border-radius:20px;
+      width: 54px;
+      height: 30px;
+      position: absolute;
+      top: 6px;
+      right: 6px;
+      border-radius: 20px;
       line-height: 30px;
       text-indent: -4px;
       color: #5e9bbd;
@@ -523,7 +525,7 @@ export default {
       li {
         color: #fff;
         &:hover {
-          background: #41738f
+          background: #41738f;
         }
       }
     }
@@ -548,7 +550,7 @@ export default {
     z-index: 1000;
     width: 350px;
     height: 500px;
-    border-radius:5px;
+    border-radius: 5px;
     background-color: #25536d;
     // background: url("~@/assets/img/table2.png") no-repeat;
     .refresh {
@@ -559,7 +561,7 @@ export default {
       cursor: pointer;
       z-index: 1008;
     }
-    
+
     ::v-deep .el-tabs {
       background: transparent;
       // width: 300px;
@@ -571,19 +573,18 @@ export default {
         // .el-tabs__item {
         //   color: #fff;
         // }
-        .el-tabs__item{
+        .el-tabs__item {
           width: 154px;
           border: none;
           text-align: center;
         }
         .el-tabs__item.is-active {
-          background: rgba(27,255,255,.2);
+          background: rgba(27, 255, 255, 0.2);
           color: #fff;
-          background-image:url("~@/assets/img/picture_left.png"),
-                           url("~@/assets/img/picture_right.png");
+          background-image: url("~@/assets/img/picture_left.png"),
+            url("~@/assets/img/picture_right.png");
           background-repeat: no-repeat;
-          background-position: 6% 55%,
-                               94% 55%;
+          background-position: 6% 55%, 94% 55%;
           background-size: 20% 20%;
           border: none;
         }
@@ -604,8 +605,8 @@ export default {
         height: 320px;
         overflow-y: auto;
         &::-webkit-scrollbar {
-        width: 4px;
-        background-color: #456d83;
+          width: 4px;
+          background-color: #456d83;
         }
         &::-webkit-scrollbar-thumb {
           border-radius: 10px;
@@ -618,8 +619,8 @@ export default {
       overflow-y: auto;
       margin-top: 22px;
       &::-webkit-scrollbar {
-      width: 4px;
-      background-color: #456d83;
+        width: 4px;
+        background-color: #456d83;
       }
       &::-webkit-scrollbar-thumb {
         border-radius: 10px;
@@ -635,7 +636,7 @@ export default {
       }
       .el-checkbox-button__inner {
         border-radius: 20px;
-        background-color: rgba(116,204,252,.4);
+        background-color: rgba(116, 204, 252, 0.4);
         color: #fff;
         border: none;
       }
@@ -643,8 +644,8 @@ export default {
         background: linear-gradient(90deg, #31abee 0%, #17d3d3 100%);
       }
     }
-    ::v-deep .el-checkbox-button.is-checked { 
-        background: linear-gradient(90deg, #31abee 0%, #17d3d3 100%);
+    ::v-deep .el-checkbox-button.is-checked {
+      background: linear-gradient(90deg, #31abee 0%, #17d3d3 100%);
     }
     ::v-deep .el-tabs__item {
       color: #d1ced5;
@@ -654,10 +655,10 @@ export default {
       color: #fff;
     }
     ::v-deep .el-tree-node__content:hover {
-      background: rgba(27,255,255,.2);
+      background: rgba(27, 255, 255, 0.2);
     }
     ::v-deep .el-tree-node:focus > .el-tree-node__content {
-      background-color: rgba(27,255,255,.2);
+      background-color: rgba(27, 255, 255, 0.2);
       color: #fff;
     }
     .reset-button {