From 8c0c9e3d7125e68c1c1cb365707583cc2e6c2192 Mon Sep 17 00:00:00 2001
From: gaoyuanwei <2826352639@qq.com>
Date: Mon, 8 Aug 2022 14:56:03 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3HIBRAINQD-2=EF=BC=8C=E5=9C=88?=
 =?UTF-8?q?=E9=80=89=E4=B8=8D=E6=B8=85=E7=A9=BA=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/CauseAnalysis.vue              |  59 +-
 .../roadGovernance/components/RoadMain.vue    | 677 +++++++++---------
 2 files changed, 375 insertions(+), 361 deletions(-)

diff --git a/src/views/pages/roadGovernance/components/CauseAnalysis.vue b/src/views/pages/roadGovernance/components/CauseAnalysis.vue
index 6e8833f..1d5c019 100644
--- a/src/views/pages/roadGovernance/components/CauseAnalysis.vue
+++ b/src/views/pages/roadGovernance/components/CauseAnalysis.vue
@@ -179,6 +179,8 @@
 </template>
 
 <script>
+import bus from '@/views/layout/bus'
+
 export default {
   components: {},
   props: {
@@ -188,20 +190,20 @@ export default {
     },
     buildingData: {
       type: Array,
-      default: [],
+      default: []
     },
     slagTruckData: {
       type: Array,
-      default: [],
+      default: []
     },
     sanitationTruckData: {
       type: Array,
-      default: [],
-    },
+      default: []
+    }
   },
   data () {
     return {
-      summaryData:[
+      summaryData: [
         {
           name: '建筑工地',
           num: 0,
@@ -241,30 +243,31 @@ export default {
           name: '洒水',
           num: 0,
           unit: '次'
-        },
+        }
       ],
       buildingSelect: true,
       slagTruckSelect: true,
       sanitationTruckSelect: true,
-      tabsActiveName: '建筑工地',
+      tabsActiveName: '建筑工地'
     }
   },
   watch: {
-    buildingData(){
+    buildingData () {
       this.summaryData[0].num = this.buildingData.length
     },
-    sanitationTruckData(){
+    sanitationTruckData () {
       this.summaryData[3].num = this.sanitationTruckData.length
-    },
-    
+    }
+
   },
   computed: {},
   methods: {
     close () {
+      bus.$emit('closeCoverage')
       this.$emit('close')
     },
-    selectShowOnMap(type,selectStatus){
-      this.$emit('selectShowOnMap',type,selectStatus)
+    selectShowOnMap (type, selectStatus) {
+      this.$emit('selectShowOnMap', type, selectStatus)
     }
   },
   created () {},
@@ -274,11 +277,11 @@ export default {
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
 @import url(../../../../../node_modules/element-ui/lib/theme-chalk/index.css);
-.cause-analysis{
+.cause-analysis {
   width: 100%;
   height: 100%;
   position: relative;
-  
+
   .close-btn {
     position: absolute;
     top: -8px;
@@ -295,11 +298,12 @@ export default {
     color: #66ffff;
     font-size: 20px;
     margin-bottom: 30px;
-    background: url("~@/assets/img/roadGovernancetitlebg.png") no-repeat 97px center;
+    background: url("~@/assets/img/roadGovernancetitlebg.png") no-repeat 97px
+      center;
   }
   .range {
     font-size: 16px;
-    color: rgba(255, 255, 255, .6);
+    color: rgba(255, 255, 255, 0.6);
   }
   main {
     height: 680px;
@@ -309,11 +313,11 @@ export default {
     &::-webkit-scrollbar {
       width: 8px;
       // height: 720px;
-      background-color: rgba(255, 255, 255, .1);
-      }
+      background-color: rgba(255, 255, 255, 0.1);
+    }
     &::-webkit-scrollbar-thumb {
       border-radius: 10px;
-      background-color: rgba(255, 255, 255, .15) !important;
+      background-color: rgba(255, 255, 255, 0.15) !important;
     }
     .summary {
       display: flex;
@@ -334,13 +338,14 @@ export default {
     }
     ::v-deep .table-box {
       // width: 266px;
-      background-color: rgba(50, 238, 255, .1);
+      background-color: rgba(50, 238, 255, 0.1);
       padding: 15px 15px 20px 20px;
       h3 {
         font-size: 16px;
         color: #66ffff;
       }
-      .el-table, .el-table__expanded-cell {
+      .el-table,
+      .el-table__expanded-cell {
         background-color: transparent !important;
       }
       .el-table th,
@@ -348,14 +353,15 @@ export default {
       .el-table td {
         background-color: transparent !important;
       }
-      .el-table__row>td{
+      .el-table__row > td {
         border: none;
       }
       table th,
       table td {
         border-bottom: none !important;
       }
-      .el-table::before {//去掉最下面的那一条线
+      .el-table::before {
+        //去掉最下面的那一条线
         height: 0px;
       }
       .cell {
@@ -365,7 +371,7 @@ export default {
       .table-title-box {
         display: flex;
         .el-checkbox {
-          margin:2px 0 0 10px;
+          margin: 2px 0 0 10px;
         }
       }
     }
@@ -373,7 +379,7 @@ export default {
     ::v-deep .el-tabs {
       .el-tabs__item {
         font-size: 16px;
-        color: #fff
+        color: #fff;
       }
       .el-tabs__item.is-active {
         color: #409eff;
@@ -383,6 +389,5 @@ export default {
       }
     }
   }
-
 }
 </style>
diff --git a/src/views/pages/roadGovernance/components/RoadMain.vue b/src/views/pages/roadGovernance/components/RoadMain.vue
index af7059f..34f91e7 100644
--- a/src/views/pages/roadGovernance/components/RoadMain.vue
+++ b/src/views/pages/roadGovernance/components/RoadMain.vue
@@ -114,7 +114,7 @@
 </template>
 
 <script>
-import { HieimpMap } from "@/supermap/map-init";
+import { HieimpMap } from '@/supermap/map-init'
 import {
   getRoadData,
   listBuildingSiteByPoints,
@@ -124,347 +124,357 @@ import {
   selectBuildSite,
   getRoadDataByTimeRegion,
   selectAllTrailSanitation,
-  selectRoadData,
-} from "@/api/road";
-import TiledMap from "@/views/pages/mapHome/components/tiledMap";
+  selectRoadData
+} from '@/api/road'
+import TiledMap from '@/views/pages/mapHome/components/tiledMap'
 import {
   createRoadGovernancePop,
-  createCameraDetailsPop,
-} from "@/supermap/createMarkerPopup";
-import CauseAnalysis from "@/views/pages/roadGovernance/components/CauseAnalysis";
-import bus from "@/views/layout/bus";
+  createCameraDetailsPop
+} from '@/supermap/createMarkerPopup'
+import CauseAnalysis from '@/views/pages/roadGovernance/components/CauseAnalysis'
+import bus from '@/views/layout/bus'
 // import testSlagTruckData from "./slagTruckData";
-import VideoPlay from "../../videoSurveillance/components/VideoPlay";
+import VideoPlay from '../../videoSurveillance/components/VideoPlay'
 export default {
-  data() {
+  data () {
     return {
       // title: '',
       hiMap: new HieimpMap(), // 地图全局对象
-      mapId: "map-cloudBrain", // 地图容器的id
+      mapId: 'map-cloudBrain', // 地图容器的id
       showDetailFlag: false, // 事件列表与详情 flag
       homeEventData: {},
-      myEvnIn: "",
+      myEvnIn: '',
       dateTabs: [
         {
-          name: "本周",
+          name: '本周',
           data: [],
-          dataNum: "",
+          dataNum: ''
         },
         {
-          name: "本月",
+          name: '本月',
           data: [],
-          dataNum: "",
+          dataNum: ''
         },
         {
-          name: "本年",
+          name: '本年',
           data: [],
-          dataNum: "",
-        },
+          dataNum: ''
+        }
       ],
       EvnInfoData: {},
       evenCondition: [],
       bottomTabList: [
         {
-          name: "道路",
-          id: "road",
-          index: "0",
-          img: require("../../../../assets/roadGovernance/roadActive.png"),
-          imgDefault: require("../../../../assets/roadGovernance/road.png"),
-          imgActive: require("../../../../assets/roadGovernance/roadActive.png"),
+          name: '道路',
+          id: 'road',
+          index: '0',
+          img: require('../../../../assets/roadGovernance/roadActive.png'),
+          imgDefault: require('../../../../assets/roadGovernance/road.png'),
+          imgActive: require('../../../../assets/roadGovernance/roadActive.png')
         },
         {
-          name: "渣土车",
-          id: "slagTruck",
-          index: "1",
-          img: require("../../../../assets/roadGovernance/slagTruck.png"),
-          imgDefault: require("../../../../assets/roadGovernance/slagTruck.png"),
-          imgActive: require("../../../../assets/roadGovernance/slagTruckActive.png"),
+          name: '渣土车',
+          id: 'slagTruck',
+          index: '1',
+          img: require('../../../../assets/roadGovernance/slagTruck.png'),
+          imgDefault: require('../../../../assets/roadGovernance/slagTruck.png'),
+          imgActive: require('../../../../assets/roadGovernance/slagTruckActive.png')
         },
         {
-          name: "环卫车",
-          id: "sanitationTruck",
-          index: "2",
-          img: require("../../../../assets/roadGovernance/sanitationTruck.png"),
-          imgDefault: require("../../../../assets/roadGovernance/sanitationTruck.png"),
-          imgActive: require("../../../../assets/roadGovernance/sanitationTruckActive.png"),
+          name: '环卫车',
+          id: 'sanitationTruck',
+          index: '2',
+          img: require('../../../../assets/roadGovernance/sanitationTruck.png'),
+          imgDefault: require('../../../../assets/roadGovernance/sanitationTruck.png'),
+          imgActive: require('../../../../assets/roadGovernance/sanitationTruckActive.png')
         },
         {
-          name: "建筑工地",
-          id: "construction",
-          index: "3",
-          img: require("../../../../assets/roadGovernance/construction.png"),
-          imgDefault: require("../../../../assets/roadGovernance/construction.png"),
-          imgActive: require("../../../../assets/roadGovernance/constructionActive.png"),
+          name: '建筑工地',
+          id: 'construction',
+          index: '3',
+          img: require('../../../../assets/roadGovernance/construction.png'),
+          imgDefault: require('../../../../assets/roadGovernance/construction.png'),
+          imgActive: require('../../../../assets/roadGovernance/constructionActive.png')
         },
         {
-          name: "视频监控",
-          id: "monitor",
-          index: "4",
-          img: require("../../../../assets/roadGovernance/monitor.png"),
-          imgDefault: require("../../../../assets/roadGovernance/monitor.png"),
-          imgActive: require("../../../../assets/roadGovernance/monitorActive.png"),
-        },
+          name: '视频监控',
+          id: 'monitor',
+          index: '4',
+          img: require('../../../../assets/roadGovernance/monitor.png'),
+          imgDefault: require('../../../../assets/roadGovernance/monitor.png'),
+          imgActive: require('../../../../assets/roadGovernance/monitorActive.png')
+        }
       ],
-      tabsActiveName: "出租车走航监测",
-      tabsActiveTime: "昨日",
-      checkboxGroup: ["道路"],
+      tabsActiveName: '出租车走航监测',
+      tabsActiveTime: '昨日',
+      checkboxGroup: ['道路'],
       tableData: [],
       analysisIsShow: false,
       buildingData: [],
       slagTruckData: [],
       sanitationTruckData: [],
       roadData: [],
-      preTime: "",
-      currentTime: "",
-      weekTime: "",
-      monthTime: "",
+      preTime: '',
+      currentTime: '',
+      weekTime: '',
+      monthTime: '',
       channelCode: [],
       openVideo: false,
-      timeRegion: "",
+      timeRegion: '',
       // 累计事件数量
       EventAll: [],
-      EventAllLength: "",
-      EventAllArr: [],
-    };
+      EventAllLength: '',
+      EventAllArr: []
+    }
   },
   props: {
     title: {
       type: String,
-      default: "城市云脑-道路保洁监管",
-    },
+      default: '城市云脑-道路保洁监管'
+    }
   },
   components: {
     TiledMap,
     CauseAnalysis,
-    VideoPlay,
+    VideoPlay
   },
   // 生命周期 - 创建完成（访问当前this实例）
-  created() {
-    const currentDate = new Date();
-    currentDate.setTime(currentDate.getTime());
-    this.monthTime = currentDate.getFullYear() + "-" + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : "0" + (currentDate.getMonth() + 1)) + "-" + "01" + " " + "00:00:00";
-    this.currentTime = currentDate.getFullYear() + "-" + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : "0" + (currentDate.getMonth() + 1)) + "-" + yDate + " " + "00:00:00";
-    currentDate.setTime(currentDate.getTime() - 24 * 60 * 60 * 1000);
-    const yDate = currentDate.getDate() > 9 ? currentDate.getDate(): '0' + currentDate.getDate()
-    this.preTime =currentDate.getFullYear() +"-" +  ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : "0" + (currentDate.getMonth() + 1)) + "-" + yDate + " " +"00:00:00";
-    currentDate.setDate(currentDate.getDate() - currentDate.getDay() + 1);
-    this.weekTime =currentDate.getFullYear() + "-" + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : "0" + (currentDate.getMonth() + 1)) + "-" + yDate + " " + "00:00:00";
+  created () {
+    const currentDate = new Date()
+    currentDate.setTime(currentDate.getTime())
+    this.monthTime = currentDate.getFullYear() + '-' + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : '0' + (currentDate.getMonth() + 1)) + '-' + '01' + ' ' + '00:00:00'
+    this.currentTime = currentDate.getFullYear() + '-' + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : '0' + (currentDate.getMonth() + 1)) + '-' + yDate + ' ' + '00:00:00'
+    currentDate.setTime(currentDate.getTime() - 24 * 60 * 60 * 1000)
+    const yDate = currentDate.getDate() > 9 ? currentDate.getDate() : '0' + currentDate.getDate()
+    this.preTime = currentDate.getFullYear() + '-' + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : '0' + (currentDate.getMonth() + 1)) + '-' + yDate + ' ' + '00:00:00'
+    currentDate.setDate(currentDate.getDate() - currentDate.getDay() + 1)
+    this.weekTime = currentDate.getFullYear() + '-' + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : '0' + (currentDate.getMonth() + 1)) + '-' + yDate + ' ' + '00:00:00'
   },
   // 生命周期 - 挂载完成（访问DOM元素）
-  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.getRoadData();
-    this.getRoadDataWeek();
-    this.getRoadDataMonth();
+    this.getRoadData()
+    this.getRoadDataWeek()
+    this.getRoadDataMonth()
 
-    bus.$off("openCauseAnalysis");
-    bus.$on("openCauseAnalysis", (data) => {
-      this.timeRegion = data.data.dt;
-      this.hiMapFun.removerPolygon();
-      this.hiMapFun.removeLayerByLayerName("videoSurveillance");
-      this.hiMapFun.removeLayerByLayerName("building");
-      this.hiMapFun.removeLayerByLayerName("sanitationTruck");
-      this.hiMapFun.removeLayerByLayerName("slagTruck");
+    bus.$off('openCauseAnalysis')
+    bus.$on('openCauseAnalysis', (data) => {
+      this.timeRegion = data.data.dt
+      this.hiMapFun.removerPolygon()
+      this.hiMapFun.removeLayerByLayerName('videoSurveillance')
+      this.hiMapFun.removeLayerByLayerName('building')
+      this.hiMapFun.removeLayerByLayerName('sanitationTruck')
+      this.hiMapFun.removeLayerByLayerName('slagTruck')
       // this.hiMapFun.removeLayerByLayerName('roadCircle')
       // this.hiMapFun.clearAllLayers();
-      this.analysisIsShow = true;
+      this.analysisIsShow = true
       // debugger
-      this.circle(data.latLng);
-      this.listTrailSanitationByPoints(data);
-      this.listBuildingSiteByPoints(data.latLng);
-      this.listSedimentTrailByPoints(data);
-      this.selectAllByGps(data.latLng);
-      if (this.checkboxGroup.indexOf("视频监控") == -1) {
-        this.checkboxGroup.push("视频监控");
-        this.bottomTabList[4].img = this.bottomTabList[4].imgActive;
+      this.circle(data.latLng)
+      this.listTrailSanitationByPoints(data)
+      this.listBuildingSiteByPoints(data.latLng)
+      this.listSedimentTrailByPoints(data)
+      this.selectAllByGps(data.latLng)
+      if (this.checkboxGroup.indexOf('视频监控') == -1) {
+        this.checkboxGroup.push('视频监控')
+        this.bottomTabList[4].img = this.bottomTabList[4].imgActive
       }
-    });
-    bus.$off("openCurrentVideoSurveillance");
-    bus.$on("openCurrentVideoSurveillance", (channelCode) => {
-      this.openVideo = true;
-      this.channelCode.unshift(channelCode);
-    });
+    })
+    // 关闭圆圈图层
+    bus.$off('closeCoverage')
+    bus.$on('closeCoverage', () => {
+      this.analysisIsShow = false
+      this.hiMapFun.removerPolygon()
+      this.hiMapFun.removeLayerByLayerName('videoSurveillance')
+      this.hiMapFun.removeLayerByLayerName('building')
+      this.hiMapFun.removeLayerByLayerName('sanitationTruck')
+      this.hiMapFun.removeLayerByLayerName('slagTruck')
+    })
+    bus.$off('openCurrentVideoSurveillance')
+    bus.$on('openCurrentVideoSurveillance', (channelCode) => {
+      this.openVideo = true
+      this.channelCode.unshift(channelCode)
+    })
 
     // 累计事件数量
-    this.EventNum();
+    this.EventNum()
   },
 
   methods: {
     // 道路污染数据  昨日
-    async getRoadData() {
-      const res = await getRoadData({ dt: this.preTime });
-      //路网数据
-      this.roadData = res.data.data;
-      //道路事件  pm>200
+    async getRoadData () {
+      const res = await getRoadData({ dt: this.preTime })
+      // 路网数据
+      this.roadData = res.data.data
+      // 道路事件  pm>200
       // const data = res.data.data.filter((item) => item.pm10 > 150);
       // this.tableData = data;
       // this.dateTabs[0].data = data;
       // this.dateTabs[0].dataNum = data.length;
       // this.addToMap(data);
-      this.roadOnMap();
+      this.roadOnMap()
     },
-    async getRoadDataWeek() {
+    async getRoadDataWeek () {
       const res = await getRoadDataByTimeRegion({
         start: this.weekTime,
-        end: this.preTime,
-      });
-      //道路事件  pm>200
-      const data = res.data.data.filter((item) => item.pm10 > 150).reverse();
-      this.tableData = data;
-      this.dateTabs[0].data = data;
-      this.dateTabs[0].dataNum = data.length;
-      this.addToMap(data);
+        end: this.preTime
+      })
+      // 道路事件  pm>200
+      const data = res.data.data.filter((item) => item.pm10 > 150).reverse()
+      this.tableData = data
+      this.dateTabs[0].data = data
+      this.dateTabs[0].dataNum = data.length
+      this.addToMap(data)
     },
-    async getRoadDataMonth() {
+    async getRoadDataMonth () {
       const res = await getRoadDataByTimeRegion({
         start: this.monthTime,
-        end: this.preTime,
-      });
-      //道路事件  pm>200
-      const data = res.data.data.filter((item) => item.pm10 > 150).reverse();
-      this.dateTabs[1].data = data;
-      this.dateTabs[1].dataNum = data.length;
+        end: this.preTime
+      })
+      // 道路事件  pm>200
+      const data = res.data.data.filter((item) => item.pm10 > 150).reverse()
+      this.dateTabs[1].data = data
+      this.dateTabs[1].dataNum = data.length
     },
     // 根据经纬度和半径查询建筑工地信息
-    async listBuildingSiteByPoints(data) {
+    async listBuildingSiteByPoints (data) {
       const param = {
         longitude: data.lng,
         latitude: data.lat,
-        radius: 3000,
+        radius: 3000
         // start: '2021-05-17 00:00:00',
         // end: '2022-05-18 00:00:00'
-      };
-      const res = await listBuildingSiteByPoints(param);
-      this.buildingData = res.data.data;
-      const dataEvent = [];
+      }
+      const res = await listBuildingSiteByPoints(param)
+      this.buildingData = res.data.data
+      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.wd) == -1) {
           dataEvent.push({
-            latLng: { lat: Number(item.wd), lng: Number(item.jd) },
-          });
+            latLng: { lat: Number(item.wd), lng: Number(item.jd) }
+          })
         }
-      });
-      this.hiMapFun.addPointsToMap(dataEvent, "building.png", "building");
+      })
+      this.hiMapFun.addPointsToMap(dataEvent, 'building.png', 'building')
     },
     // 根据经纬度和半径查询渣土车
-    async listSedimentTrailByPoints(data) {
+    async listSedimentTrailByPoints (data) {
       let endTime = data.data.dt
       let newEndTime = ''
-        //endtime 加一天
+      // endtime 加一天
       endTime = new Date(endTime)
-      endTime.setTime(endTime.getTime() + 24 * 60 * 60 * 1000);
+      endTime.setTime(endTime.getTime() + 24 * 60 * 60 * 1000)
       newEndTime =
         endTime.getFullYear() +
-        "-" +
+        '-' +
         (endTime.getMonth() + 1) +
-        "-" +
+        '-' +
         endTime.getDate() +
-        " " +
-        "00:00:00";
+        ' ' +
+        '00:00:00'
 
       const param = {
         longitude: data.latLng.lng,
         latitude: data.latLng.lat,
         radius: 3000,
         start: data.data.dt,
-        end: newEndTime,
-      };
-      const res = await listSedimentTrailByPoints(param);
+        end: newEndTime
+      }
+      const res = await listSedimentTrailByPoints(param)
       // this.slagTruckData = res.data.data
-      this.slagTruckData = [];
+      this.slagTruckData = []
 
-      const dataEvent = [];
+      const dataEvent = []
       for (const key in this.slagTruckData) {
         // console.log(this.slagTruckData[key][0])
         dataEvent.push({
           latLng: {
             lat: Number(this.slagTruckData[key][0].latitude),
-            lng: Number(this.slagTruckData[key][0].longitude),
-          },
-        });
+            lng: Number(this.slagTruckData[key][0].longitude)
+          }
+        })
       }
       // debugger
-      this.hiMapFun.addPointsToMap(dataEvent, "slagTruck.png", "slagTruck");
+      this.hiMapFun.addPointsToMap(dataEvent, 'slagTruck.png', 'slagTruck')
     },
     // 根据经纬度和半径查询环卫车
-    async listTrailSanitationByPoints(data) {
+    async listTrailSanitationByPoints (data) {
       let endTime = data.data.dt
       let newEndTime = ''
-        //endtime 加一天
+      // endtime 加一天
       endTime = new Date(endTime)
-      endTime.setTime(endTime.getTime() + 24 * 60 * 60 * 1000);
+      endTime.setTime(endTime.getTime() + 24 * 60 * 60 * 1000)
       newEndTime =
         endTime.getFullYear() +
-        "-" +
+        '-' +
         (endTime.getMonth() + 1) +
-        "-" +
+        '-' +
         endTime.getDate() +
-        " " +
-        "00:00:00";
+        ' ' +
+        '00:00:00'
 
       const param = {
         longitude: data.latLng.lng,
         latitude: data.latLng.lat,
         radius: 3000,
         start: data.data.dt,
-        end: newEndTime,
-      };
+        end: newEndTime
+      }
 
-      const res = await listTrailSanitationByPoints(param);
+      const res = await listTrailSanitationByPoints(param)
       // console.log('环卫车', res)
       // const  testdata = [{"id":47,"simkh":"13161720498","cph":"鲁BJ8073","wz":null,"fssj":"2021-07-26 05:52:28","jd":120.3683,"wd":36.1868,"sd":0.0,"fx":106,"zt":"00000000000011000000000011000010","yl":0.0,"lc":14605.8,"yl2":0.0,"sfzx":0,"xh":null,"bjzt":"00000000000000000000000010000000","gd":16.0,"updatetime":"2021-07-30 23:55:53"},{"id":48,"simkh":"14196029850","cph":"鲁BJ8103","wz":null,"fssj":"2021-06-05 18:01:14","jd":120.3682,"wd":36.1871,"sd":0.0,"fx":153,"zt":"00000000000011000000000011000010","yl":0.0,"lc":11395.1,"yl2":0.0,"sfzx":0,"xh":null,"bjzt":"00000000000000000000000010000000","gd":5.0,"updatetime":"2021-07-30 23:55:53"},{"id":52,"simkh":"13161321402","cph":"鲁BK8773","wz":null,"fssj":"2021-07-30 20:56:00","jd":120.3666,"wd":36.1669,"sd":0.0,"fx":337,"zt":"00000000000000000000000000000011","yl":0.0,"lc":4433.3,"yl2":0.0,"sfzx":0,"xh":null,"bjzt":"00000000000000000000000000000000","gd":48.0,"updatetime":"2021-07-30 23:55:58"},{"id":55,"simkh":"14196029856","cph":"鲁BL5506","wz":null,"fssj":"2021-07-30 23:56:38","jd":120.3813,"wd":36.1744,"sd":0.0,"fx":183,"zt":"00000000000011000000000011000010","yl":0.0,"lc":26407.1,"yl2":0.0,"sfzx":1,"xh":null,"bjzt":"00000000000000000000000000000000","gd":0.0,"updatetime":"2021-07-30 23:56:01"},{"id":58,"simkh":"13301742326","cph":"鲁BM1753","wz":null,"fssj":"2021-07-30 23:55:58","jd":120.3816,"wd":36.1743,"sd":0.0,"fx":148,"zt":"00000000000011000000000011000010","yl":0.0,"lc":34502.3,"yl2":0.0,"sfzx":0,"xh":null,"bjzt":"00000000000000000000000000000000","gd":0.0,"updatetime":"2021-07-30 23:56:02"},{"id":61,"simkh":"13161502470","cph":"鲁BM7318","wz":null,"fssj":"2021-07-30 23:55:28","jd":120.3682,"wd":36.1872,"sd":0.0,"fx":169,"zt":"00000000000011000000000011000010","yl":0.0,"lc":34270.2,"yl2":0.0,"sfzx":0,"xh":null,"bjzt":"00000000000000000000000000000000","gd":12.0,"updatetime":"2021-07-30 23:56:03"},{"id":62,"simkh":"13161513479","cph":"鲁BN2381","wz":null,"fssj":"2021-07-30 15:44:53","jd":120.3815,"wd":36.1743,"sd":0.0,"fx":19,"zt":"00000000000011000000000011000001","yl":0.0,"lc":2238.4,"yl2":0.0,"sfzx":0,"xh":null,"bjzt":"00000000000000000000000000000000","gd":36.0,"updatetime":"2021-07-30 23:56:04"},{"id":63,"simkh":"13161695408","cph":"鲁BN1272","wz":null,"fssj":"2021-07-30 23:57:14","jd":120.3816,"wd":36.1744,"sd":0.0,"fx":323,"zt":"00000000000011000000000011000010","yl":0.0,"lc":29806.0,"yl2":0.0,"sfzx":1,"xh":null,"bjzt":"00000000000000000000000000000000","gd":79.0,"updatetime":"2021-07-30 23:56:04"},{"id":64,"simkh":"13301662012","cph":"鲁BN2382","wz":null,"fssj":"2021-07-30 23:56:52","jd":120.3816,"wd":36.1746,"sd":0.0,"fx":212,"zt":"00000000000011000000000011000010","yl":0.0,"lc":14075.5,"yl2":0.0,"sfzx":1,"xh":null,"bjzt":"00000000000000000000000000000000","gd":10.0,"updatetime":"2021-07-30 23:56:04"}]
-      this.sanitationTruckData = res.data.data;
-      const dataEvent = [];
+      this.sanitationTruckData = res.data.data
+      const dataEvent = []
       this.sanitationTruckData.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) },
-          });
+            latLng: { lat: Number(item.wd), lng: Number(item.jd) }
+          })
         }
-      });
+      })
       this.hiMapFun.addPointsToMap(
         dataEvent,
-        "sanitationTruck.png",
-        "sanitationTruck"
-      );
+        'sanitationTruck.png',
+        'sanitationTruck'
+      )
     },
     // 根据经纬度和半径查询摄像头
-    async selectAllByGps(data) {
+    async selectAllByGps (data) {
       const param = {
         gpsX: data.lng,
         gpsY: data.lat,
-        radius: 3000,
-      };
+        radius: 3000
+      }
 
-      const res = await selectAllByGps(param);
-      console.log(res);
-      const dataEvent = [];
+      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",
+        'videoSurveillance.png',
+        'videoSurveillance',
         createCameraDetailsPop
-      );
+      )
     },
     // 点位上图
-    addToMap(data) {
+    addToMap (data) {
       // const arr = [
       //   {
       //     latLng: {
@@ -479,238 +489,237 @@ export default {
       //     }
       //   }
       // ]
-      const dataEvent = [];
+      const dataEvent = []
       data.forEach((item) => {
-        const arr = [0, 0.0, "", "0", "0.0"];
+        const arr = [0, 0.0, '', '0', '0.0']
         if (arr.indexOf(item.lat) == -1) {
           dataEvent.push({
             latLng: { lat: Number(item.lat), lng: Number(item.lng) },
             data: item,
-            type: "road",
-            strong: 0.5,
-          });
+            type: 'road',
+            strong: 0.5
+          })
         }
-      });
+      })
       this.hiMapFun.addPointsToMap(
         dataEvent,
-        "poi-red.png",
-        "roadPoint",
+        'poi-red.png',
+        'roadPoint',
         createRoadGovernancePop
-      );
+      )
     },
 
     // 圈选查询
-    circle(latlng) {
-      this.hiMapFun.addCircleToMap(latlng, 3800);
+    circle (latlng) {
+      this.hiMapFun.addCircleToMap(latlng, 3800)
     },
-    removeLayer(data) {
-      this.hiMapFun.removeLayerByLayerName(data.layerName);
+    removeLayer (data) {
+      this.hiMapFun.removeLayerByLayerName(data.layerName)
     },
-    mapFly(data) {
-      this.showDetailFlag = true;
-      this.myEvnIn = data;
+    mapFly (data) {
+      this.showDetailFlag = true
+      this.myEvnIn = data
       // console.log('切换地图视角', latLng);
       // this.hiMap.mapObj.map.flyTo(latLng, _global.config.maxMapZoom)
-      console.log("事件信息", data);
-      this.getHomeResourceCnt("event");
-      this.getEvnInfo(data.eventId);
-      this.getEvenCondition(data.eventId);
+      console.log('事件信息', data)
+      this.getHomeResourceCnt('event')
+      this.getEvnInfo(data.eventId)
+      this.getEvenCondition(data.eventId)
     },
-    tabsHandleChange(item) {
+    tabsHandleChange (item) {
       if (this.checkboxGroup.indexOf(item.name) !== -1) {
         this.bottomTabList[item.index].img =
-          this.bottomTabList[item.index].imgActive;
+          this.bottomTabList[item.index].imgActive
         switch (item.id) {
-          case "road":
-            this.roadOnMap();
-            break;
-          case "slagTruck":
-            break;
-          case "sanitationTruck":
+          case 'road':
+            this.roadOnMap()
+            break
+          case 'slagTruck':
+            break
+          case 'sanitationTruck':
             selectAllTrailSanitation().then((res) => {
-              const dataEvent = [];
+              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.wd) == -1) {
                   dataEvent.push({
-                    latLng: { lat: Number(item.wd), lng: Number(item.jd) },
-                  });
+                    latLng: { lat: Number(item.wd), lng: Number(item.jd) }
+                  })
                 }
-              });
+              })
               this.hiMapFun.addPointsToMap(
                 dataEvent,
-                "sanitationTruck.png",
-                "sanitationTruckAll"
-              );
-            });
-            break;
-          case "construction":
+                'sanitationTruck.png',
+                'sanitationTruckAll'
+              )
+            })
+            break
+          case 'construction':
             selectBuildSite().then((res) => {
-              const dataEvent = [];
+              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.wd) == -1) {
                   dataEvent.push({
-                    latLng: { lat: Number(item.wd), lng: Number(item.jd) },
-                  });
+                    latLng: { lat: Number(item.wd), lng: Number(item.jd) }
+                  })
                 }
-              });
+              })
               this.hiMapFun.addPointsToMap(
                 dataEvent,
-                "building.png",
-                "buildingAll"
-              );
-            });
-            break;
-          case "monitor":
-            break;
+                'building.png',
+                'buildingAll'
+              )
+            })
+            break
+          case 'monitor':
+            break
           default:
-            break;
+            break
         }
       } else {
         this.bottomTabList[item.index].img =
-          this.bottomTabList[item.index].imgDefault;
+          this.bottomTabList[item.index].imgDefault
         switch (item.id) {
-          case "road":
-            this.hiMapFun.removerPolyline();
-            break;
-          case "slagTruck":
-            break;
-          case "sanitationTruck":
-            this.hiMapFun.removeLayerByLayerName("sanitationTruckAll");
-            break;
-          case "construction":
-            this.hiMapFun.removeLayerByLayerName("buildingAll");
-            break;
-          case "monitor":
-            this.hiMapFun.removeLayerByLayerName("videoSurveillance");
-            break;
+          case 'road':
+            this.hiMapFun.removerPolyline()
+            break
+          case 'slagTruck':
+            break
+          case 'sanitationTruck':
+            this.hiMapFun.removeLayerByLayerName('sanitationTruckAll')
+            break
+          case 'construction':
+            this.hiMapFun.removeLayerByLayerName('buildingAll')
+            break
+          case 'monitor':
+            this.hiMapFun.removeLayerByLayerName('videoSurveillance')
+            break
           default:
-            break;
+            break
         }
       }
     },
-    handleRowClick(data) {
-      console.log("行点击", data);
-      this.hiMap.mapObj.map.flyTo({ lat: data.lat+0.007, lng: data.lng },13);
+    handleRowClick (data) {
+      console.log('行点击', data)
+      this.hiMap.mapObj.map.flyTo({ lat: data.lat + 0.007, lng: data.lng }, 13)
       const feature = {
         latLng: { lat: data.lat, lng: data.lng },
-        data: data,
-      };
-      this.hiMapFun.openPopupRoadGovernance(feature);
+        data: data
+      }
+      this.hiMapFun.openPopupRoadGovernance(feature)
     },
-    close() {
-      this.analysisIsShow = false;
+    close () {
+      this.analysisIsShow = false
     },
-    selectShowOnMap(type, selectStatus) {
-      console.log(type, selectStatus);
+    selectShowOnMap (type, selectStatus) {
+      console.log(type, selectStatus)
       switch (type) {
-        case "slagTruck":
+        case 'slagTruck':
           if (selectStatus) {
-            //暂时没有数据
+            // 暂时没有数据
           } else {
-            this.hiMapFun.removeLayerByLayerName("slagTruck");
+            this.hiMapFun.removeLayerByLayerName('slagTruck')
           }
-          break;
-        case "sanitationTruck":
+          break
+        case 'sanitationTruck':
           if (selectStatus) {
-            const dataEvent = [];
+            const dataEvent = []
             this.sanitationTruckData.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) },
-                });
+                  latLng: { lat: Number(item.wd), lng: Number(item.jd) }
+                })
               }
-            });
+            })
             this.hiMapFun.addPointsToMap(
               dataEvent,
-              "sanitationTruck.png",
-              "sanitationTruck"
-            );
+              'sanitationTruck.png',
+              'sanitationTruck'
+            )
           } else {
-            this.hiMapFun.removeLayerByLayerName("sanitationTruck");
+            this.hiMapFun.removeLayerByLayerName('sanitationTruck')
           }
-          break;
-        case "construction":
+          break
+        case 'construction':
           if (selectStatus) {
-            const dataEvent = [];
+            const dataEvent = []
             this.buildingData.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) },
-                });
+                  latLng: { lat: Number(item.wd), lng: Number(item.jd) }
+                })
               }
-            });
-            this.hiMapFun.addPointsToMap(dataEvent, "building.png", "building");
+            })
+            this.hiMapFun.addPointsToMap(dataEvent, 'building.png', 'building')
           } else {
-            this.hiMapFun.removeLayerByLayerName("building");
+            this.hiMapFun.removeLayerByLayerName('building')
           }
-          break;
+          break
       }
     },
-    //路网上图
-    roadOnMap() {
+    // 路网上图
+    roadOnMap () {
       this.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
         }
-      });
+      })
     },
-    tabsHandleClick(item) {
-      this.hiMapFun.removeLayerByLayerName("roadPoint");
-      this.tableData = item.data;
-      this.addToMap(item.data);
+    tabsHandleClick (item) {
+      this.hiMapFun.removeLayerByLayerName('roadPoint')
+      this.tableData = item.data
+      this.addToMap(item.data)
     },
     // 累计事件数量   本年度
-    EventNum() {
-      selectRoadData({page:1,pageSize:999}).then((res) => {
+    EventNum () {
+      selectRoadData({ page: 1, pageSize: 999 }).then((res) => {
         // this.EventAll = res.data.data;
         // this.EventAllLength = this.EventAll.length;
         // const a = this.EventAllLength.toString();
         // this.EventAllArr = a.split("");
 
-      
-        this.dateTabs[2].data = res.data.data.roadData;
-        this.dateTabs[2].dataNum = res.data.data.roadData.length;
+        this.dateTabs[2].data = res.data.data.roadData
+        this.dateTabs[2].dataNum = res.data.data.roadData.length
         console.log(this.dateTabs)
         console.log(res.data.data)
-      });
-    },
-  },
-};
+      })
+    }
+  }
+}
 </script>
 <style lang='scss'>
 ::-webkit-scrollbar {