From b8f970aeea984836f3cd484789c3fd6f9f6cc219 Mon Sep 17 00:00:00 2001
From: gaoyuanwei <2826352639@qq.com>
Date: Tue, 5 Jul 2022 19:13:09 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=AF=E6=B0=B4=E7=82=B9=E5=8C=BA=E5=B8=82?=
 =?UTF-8?q?=E5=88=86=E5=B8=83=E3=80=81=E5=BA=95=E9=83=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/waterPoints/components/SiteList.vue | 382 +++++++++++-------
 src/views/pages/waterPoints/index.vue         | 374 +++++++++--------
 2 files changed, 441 insertions(+), 315 deletions(-)

diff --git a/src/views/pages/waterPoints/components/SiteList.vue b/src/views/pages/waterPoints/components/SiteList.vue
index 7f7913a..eb6435a 100644
--- a/src/views/pages/waterPoints/components/SiteList.vue
+++ b/src/views/pages/waterPoints/components/SiteList.vue
@@ -1,9 +1,11 @@
 <template>
   <div class="box">
-    <div class="title">工地列表</div>
+    <div class="title"><p>积水点市区分布</p><div class="bottomLine"></div></div>
     <!-- 工地列表 -->
     <div class="eventData">
-      <div style="display: flex;justify-content: space-between">
+      <div id="event-type-chart"></div>
+
+      <!-- <div style="display: flex;justify-content: space-between">
         <el-input
           placeholder="请输入工地名称"
           prefix-icon="el-icon-search"
@@ -35,7 +37,7 @@
             'background-color': '#2b4b7a',
           }"
         >
-          <el-table-column width="114" label="工地名称" prop="projectName" 
+          <el-table-column width="114" label="工地名称" prop="projectName"
             show-overflow-tooltip>
           </el-table-column>
           <el-table-column width="78" prop="noice" label="噪声" sortable>
@@ -55,75 +57,82 @@
             </template>
           </el-table-column>
         </el-table>
-      </div>
+      </div> -->
     </div>
     </div>
 </template>
 <script>
-import bus from "@/views/layout/bus";
+import * as echarts from 'echarts'
+
+import bus from '@/views/layout/bus'
 import {
   selectAllBuilding,
   selectByProjectName,
   selectDayAll,
   selectWeekAll,
-  selectMonthAll,
-} from "@/api/construction/index";
+  selectMonthAll
+} from '@/api/construction/index'
 
 export default {
-  data() {
-    return {
-      searchValue: "",
-      siteData: [],
-      siteDataAll: [],
-      selectSiteData: [],
-      InformationActiveName: "基本信息",
-      informationShow: false,
-      detailedInfToday: [],
-      detailedInfWeek: [],
-      detailedInfMonth: [],
-      dustActiveName: "今日",
+  data () {
+    // return {
+    //   searchValue: '',
+    //   siteData: [],
+    //   siteDataAll: [],
+    //   selectSiteData: [],
+    //   InformationActiveName: '基本信息',
+    //   informationShow: false,
+    //   detailedInfToday: [],
+    //   detailedInfWeek: [],
+    //   detailedInfMonth: [],
+    //   dustActiveName: '今日',
 
-      options: [
-        {
-          value: '全部区市',
-          label: '全部区市'
-        },{
-          value: '市南区',
-          label: '市南区'
-        }, {
-          value: '市北区',
-          label: '市北区'
-        }, {
-          value: '崂山区',
-          label: '崂山区'
-        }, {
-          value: '李沧区',
-          label: '李沧区'
-        }, {
-          value: '即墨区',
-          label: '即墨区'
-        },{
-          value: '西海岸新区',
-          label: '西海岸新区'
-        },{
-          value: '城阳区',
-          label: '城阳区'
-        },{
-          value: '胶州市',
-          label: '胶州市'
-        },{
-          value: '平度市',
-          label: '平度市'
-        },{
-          value: '莱西市',
-          label: '莱西市'
-        }
-      ],
-      selectValue: ''
-    };
+    //   options: [
+    //     {
+    //       value: '全部区市',
+    //       label: '全部区市'
+    //     }, {
+    //       value: '市南区',
+    //       label: '市南区'
+    //     }, {
+    //       value: '市北区',
+    //       label: '市北区'
+    //     }, {
+    //       value: '崂山区',
+    //       label: '崂山区'
+    //     }, {
+    //       value: '李沧区',
+    //       label: '李沧区'
+    //     }, {
+    //       value: '即墨区',
+    //       label: '即墨区'
+    //     }, {
+    //       value: '西海岸新区',
+    //       label: '西海岸新区'
+    //     }, {
+    //       value: '城阳区',
+    //       label: '城阳区'
+    //     }, {
+    //       value: '胶州市',
+    //       label: '胶州市'
+    //     }, {
+    //       value: '平度市',
+    //       label: '平度市'
+    //     }, {
+    //       value: '莱西市',
+    //       label: '莱西市'
+    //     }
+    //   ],
+    //   selectValue: ''
+    // }
+    return {
+
+    }
   },
-  mounted() {
-    this.selectSiteByName();
+  mounted () {
+    this.initEventTypeCharts()
+
+    // this.selectSiteByName()
     // bus.$off("mainClick")
     // bus.$on("mainClick", (data) => {
     //   this.informationShow = true;
@@ -148,99 +157,182 @@ export default {
     // });
   },
   methods: {
-    //   查询所有工地
-    selectSiteByName() {
-      selectAllBuilding().then((res) => {
-        // console.log(res.data.data);
-        this.siteData = res.data.data
-        this.siteDataAll = res.data.data
-      });
-    },
-
-    searchSite() {
-      if (this.searchValue == "") {
-        this.siteData = this.siteDataAll;
-      } else {
-        const params = {
-          projectName: this.searchValue,
-        };
-        selectByProjectName(params).then((res) => {
-          this.siteData = res.data.data
-        });
+    initEventTypeCharts () {
+      const option = {
+        title: {
+          // text: '事件类型分布',
+          left: 'left',
+          top: 15,
+          textStyle: {
+            fontSize: 16,
+            color: '#fff',
+            fontWeight: 'normal'
+          }
+        },
+        grid: {
+          bottom: 40
+        },
+        xAxis: {
+          type: 'category',
+          data: ['市南区', '市北区', '李沧区', '崂山区', '城阳区', '西海岸新区', '即墨区', '莱西市', '胶州市', '平度市'],
+          axisLabel: {
+            color: '#fff',
+            margin: 7,
+            show: true,
+            interval: 0,
+            rotate: 30
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(254, 125, 42,0.6)'
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: 'value',
+          show: false
+        },
+        series: [
+          {
+            data: [12, 10, 5, 8, 7, 9, 1, 2, 3, 2],
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(254,125,42,1)'
+              }, {
+                offset: 1,
+                color: 'rgba(254,125,42,0)'
+              }]),
+              borderWidth: 2,
+              borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(255,211,107,1)'
+              }, {
+                offset: 1,
+                color: 'rgba(255,211,107,0)'
+              }])
+            },
+            barWidth: 23,
+            label: {
+              show: true,
+              position: 'top',
+              distance: 5,
+              color: 'fe982a',
+              fontSize: 18
+            }
+          }
+        ]
       }
-    },
+      const eventType = echarts.init(
+        document.getElementById('event-type-chart')
+      )
+      eventType.setOption(option)
+    }
+  }
+  // methods: {
+  //   //   查询所有工地
+  //   selectSiteByName () {
+  //     selectAllBuilding().then((res) => {
+  //       // console.log(res.data.data);
+  //       this.siteData = res.data.data
+  //       this.siteDataAll = res.data.data
+  //     })
+  //   },
 
-    fliterSiteByArea(val) {
-      console.log(val)
-      if (val == '全部区市') {
-        this.siteData = this.siteDataAll;
-      } else {
-        this.siteData = this.siteDataAll.filter((item) => item.ssdq == val)
-      }
-    },
-    // 行点击
-    analyse(row) {
-      bus.$emit("openCauseAnalysis", row);
-    },
-    // 关闭基本信息窗口
-    informationClose() {
-      this.informationShow = false;
-    },
-    // 今日噪声及扬尘信息
-    NoAndPMToday(data) {
-      // 今日
-      this.detailedInfToday = [];
-      const params = {
-        projectName: data,
-      };
-      selectDayAll(params).then((res) => {
-        for (let i = 0; i < res.data.data.length; i++) {
-          this.detailedInfToday.push(res.data.data[i]);
-        }
-      });
-    },
-    // 近一周噪声及扬尘信息
-    NoAndPMWeek(data) {
-      // 近一周
-      this.detailedInfWeek = [];
-      const params = {
-        projectName: data,
-      };
-      selectWeekAll(params).then((res) => {
-        for (let i = 0; i < res.data.data.length; i++) {
-          this.detailedInfWeek.push(res.data.data[i]);
-        }
-      });
-    },
-    // 近一月噪声及扬尘信息
-    NoAndPMMonth(data) {
-      // 近一月
-      this.detailedInfMonth = [];
-      const params = {
-        projectName: data,
-      };
-      selectMonthAll(params).then((res) => {
-        for (let i = 0; i < res.data.data.length; i++) {
-          this.detailedInfMonth.push(res.data.data[i]);
-        }
-      });
-    },
-  },
-};
+  //   searchSite () {
+  //     if (this.searchValue == '') {
+  //       this.siteData = this.siteDataAll
+  //     } else {
+  //       const params = {
+  //         projectName: this.searchValue
+  //       }
+  //       selectByProjectName(params).then((res) => {
+  //         this.siteData = res.data.data
+  //       })
+  //     }
+  //   },
+
+  //   fliterSiteByArea (val) {
+  //     console.log(val)
+  //     if (val == '全部区市') {
+  //       this.siteData = this.siteDataAll
+  //     } else {
+  //       this.siteData = this.siteDataAll.filter((item) => item.ssdq == val)
+  //     }
+  //   },
+  //   // 行点击
+  //   analyse (row) {
+  //     bus.$emit('openCauseAnalysis', row)
+  //   },
+  //   // 关闭基本信息窗口
+  //   informationClose () {
+  //     this.informationShow = false
+  //   },
+  //   // 今日噪声及扬尘信息
+  //   NoAndPMToday (data) {
+  //     // 今日
+  //     this.detailedInfToday = []
+  //     const params = {
+  //       projectName: data
+  //     }
+  //     selectDayAll(params).then((res) => {
+  //       for (let i = 0; i < res.data.data.length; i++) {
+  //         this.detailedInfToday.push(res.data.data[i])
+  //       }
+  //     })
+  //   },
+  //   // 近一周噪声及扬尘信息
+  //   NoAndPMWeek (data) {
+  //     // 近一周
+  //     this.detailedInfWeek = []
+  //     const params = {
+  //       projectName: data
+  //     }
+  //     selectWeekAll(params).then((res) => {
+  //       for (let i = 0; i < res.data.data.length; i++) {
+  //         this.detailedInfWeek.push(res.data.data[i])
+  //       }
+  //     })
+  //   },
+  //   // 近一月噪声及扬尘信息
+  //   NoAndPMMonth (data) {
+  //     // 近一月
+  //     this.detailedInfMonth = []
+  //     const params = {
+  //       projectName: data
+  //     }
+  //     selectMonthAll(params).then((res) => {
+  //       for (let i = 0; i < res.data.data.length; i++) {
+  //         this.detailedInfMonth.push(res.data.data[i])
+  //       }
+  //     })
+  //   }
+  // }
+}
 </script>
 <style lang='scss' scoped>
 .box {
   width: 100%;
   height: 100%;
-  background: url(../../../../assets/construction/listTopBg.png) no-repeat,
-              url(../../../../assets/construction/siteTag.png) no-repeat 324px 17px;
-  padding: 30px 0 18px 18px;
+  padding: 0px 0 18px 0px;
   .title {
     color: #fff;
-    font-size: 20px;
+    background: linear-gradient( to right, rgba(27, 103, 176, 1), rgba(27, 103, 176, 0) );
+    p{
+      padding: 5px;
+    }
+    .bottomLine{
+      width: 100%;
+      height: 5px;
+      background: linear-gradient( to right, rgba(55, 185, 192, 1), rgba(55, 185, 192, 0) );
+    }
   }
-  ::v-deep .eventData {
-    width: 368px;
+   .eventData {
+    width: 100%;
     margin-top: 14px;
     .el-input {
       width: 200px;
@@ -264,6 +356,12 @@ export default {
         width: 161px;
       }
     }
+    #event-type-chart,#event-state-chart {
+      width: 100%;
+      height: 207px;
+      display: flex;
+      justify-content: center;
+    }
   }
 
   ::v-deep .eventNoise {
diff --git a/src/views/pages/waterPoints/index.vue b/src/views/pages/waterPoints/index.vue
index 9b2c214..7585eb6 100644
--- a/src/views/pages/waterPoints/index.vue
+++ b/src/views/pages/waterPoints/index.vue
@@ -56,11 +56,23 @@
         <site-list></site-list>
       </div>
 
+      <!-- 事件多选 -->
+      <div class="eventSelection">
+        <el-checkbox-group v-model="eventCheckList">
+          <el-checkbox label="影响车辆(>30cm)"></el-checkbox>
+          <el-checkbox label="影响行人(<30cm)"></el-checkbox>
+          <el-checkbox label="无积水(<10cm)"></el-checkbox>
+        </el-checkbox-group>
+        <i class="eventSelectionIcon"></i>
+        <i class="eventSelectionIcon"></i>
+        <i class="eventSelectionIcon"></i>
+      </div>
+
       <div class="changeLayer">
-        <div class="title">地图显示</div>
+        <div class="title">地图图层</div>
         <div class="change-btn-box">
           <el-checkbox-group v-model="changeLayerBtnGroup">
-            <el-checkbox v-for="item in changeLayerBtnList" :key="item.index" :label="item" @change="layerHandleChange(item)"></el-checkbox>
+            <el-checkbox-button v-for="item in changeLayerBtnList" :key="item.index" :label="item" @change="layerHandleChange(item)" border></el-checkbox-button>
           </el-checkbox-group>
         </div>
       </div>
@@ -69,238 +81,223 @@
 </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 } 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 } from '@/api/construction/index'
+import { createSiteListPop, createCameraDetailsPop } from '@/supermap/createMarkerPopup'
 
 export default {
-  data() {
+  data () {
     return {
       hiMap: new HieimpMap(), // 地图全局对象
-      mapId: "map-single", // 地图容器的id
+      mapId: 'map-single', // 地图容器的id
 
-      state: "",
+      state: '',
       constructionSiteData: [],
-      changeLayerBtnList: ['AI事件','视频监控','工地','道路'],
+      changeLayerBtnList: ['视频监控', '积水点'],
       changeLayerBtnGroup: [],
-    
-    };
+      eventCheckList: []
+
+    }
   },
   components: {
     TiledMap,
     complaintEvent,
     VideoList,
-    SiteList,
+    SiteList
   },
-  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
-    );
-
-  
+    )
 
     // 根据经纬度查询半径内所有的工地
-    bus.$off("openCauseAnalysis");
-    bus.$on("openCauseAnalysis", (row) => {
+    bus.$off('openCauseAnalysis')
+    bus.$on('openCauseAnalysis', (row) => {
       // 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.roadOnMap(roadData);
+      )
     })
 
-    bus.$off("removeCameraLayer");
-    bus.$on("removeCameraLayer",(type) => {
+    bus.$off('roadOnMap')
+    bus.$on('roadOnMap', (roadData) => {
+      this.roadOnMap(roadData)
+    })
+
+    bus.$off('removeCameraLayer')
+    bus.$on('removeCameraLayer', (type) => {
       this.hiMapFun.removeLayerByLayerName(type)
     })
-  
-    bus.$off("CameraSingleDataOnMap");
-    bus.$on("CameraSingleDataOnMap",(labelName,data) => {
-      this.addResourceTomap(labelName,data);
+
+    bus.$off('CameraSingleDataOnMap')
+    bus.$on('CameraSingleDataOnMap', (labelName, data) => {
+      this.addResourceTomap(labelName, 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) {
       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 "工地":
-
-            break;
+          case '视频监控':
+            // this.addResourceTomap('全部',this.$refs.videoListRef.cameraAllData)
+            break
+          case '积水点':
+            break
           default:
-            break;
+            break
         }
       } else {
         switch (item) {
-          case "道路":
-            this.hiMapFun.removerPolyline();
-            break;
-          case "AI事件":
-            break;
-          case "视频监控":
-            this.hiMapFun.removeLayerByLayerName('全部')
-            break;
-          case "工地":
-
-            break;
+          case '视频监控':
+            // this.hiMapFun.removeLayerByLayerName('全部')
+            break
+          case '积水点':
+            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){
+        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)
-    },
+      })
+      this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, 'videoSurveillance.png', type, createCameraDetailsPop)
+    }
   },
-  beforeDestroy() {},
-};
+  beforeDestroy () {}
+}
 </script>
 <style scoped lang="scss">
 @import url(../../../../node_modules/element-ui/lib/theme-chalk/index.css);
@@ -446,7 +443,7 @@ export default {
     right: 8px;
     top: 562px;
     width: 398px;
-    height:500px;
+    // height:500px;
     background: rgba($color: #05213b, $alpha: .85);
   }
 
@@ -469,42 +466,73 @@ export default {
       line-height: 67px;
     }
     .change-btn-box {
-      height: 42px;
+      height: 67px;
+      line-height: 67px;
       width: 230px;
-      margin-top: 12px;
-      border-left: 1px solid #005ea3;
       padding-left: 20px;
 
       ::v-deep .el-checkbox-group {
-        .el-checkbox {
-          width: 70px;
-          color: #fff;
-          .el-checkbox__input {
-            .el-checkbox__inner {
-              border: 1px solid #1ffefd;
-              background: transparent;
-            }
-          }
+        .el-checkbox-button__inner{
+         padding: 6px 14px;
+         border: 0;
+         border-radius: 10px;
+
         }
-        .el-checkbox.is-checked {
-          .el-checkbox__label {
-            color: #1ffefd;
-          }
-          .el-checkbox__input {
-            .el-checkbox__inner {
-              border: 1px solid #1ffefd;
-              background: transparent;
-              &::after {
-                border: 1px solid #1ffefd;
-                border-left: 0;
-                border-top: 0;
-              }
-            }
-          }
+        .el-checkbox-button:first-child .el-checkbox-button__inner{
+          margin-right: 10px;
+        }
+        .el-checkbox-button.is-checked .el-checkbox-button__inner{
+          background: #027DB4;
+          color: #ffffff;
+          box-shadow: unset;
         }
       }
     }
   }
+
+  .eventSelection{
+    width: 170px;
+    height: 100px;
+    background: rgba(7, 26, 44, 0.8);
+    position: absolute;
+    bottom: 100px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    z-index: 1000;
+    ::v-deep .el-checkbox__label{
+      color: #ffffff;
+    }
+    ::v-deep .el-checkbox{
+      margin:0 15px;
+      .el-checkbox__inner{
+          margin-right: 15px;
+      }
+    }
+    .eventSelectionIcon{
+      display: block;
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      background: red;
+      position: absolute;
+      left: 34.5px;
+      top: 21px;
+    }
+    .eventSelectionIcon:nth-child(2){
+      background: yellow;
+       position: absolute;
+      left: 34.5px;
+      top: 42px;
+    }
+    .eventSelectionIcon:nth-child(3){
+      background: green;
+      position: absolute;
+      left: 34.5px;
+      top: 63px;
+    }
+  }
 }
 </style>
 <style lang='scss'>