积水点bug

src/views/pages/waterPoints/components/VideoList.vue

@@ -29,26 +29,32 @@
           </div>
         </div>
       </div> -->
-        <div class="water-point-reporting-title">
+      <div class="water-point-reporting-title">
-          <div class="water-point-reporting-title-top">积水点来源分析</div>
+        <div class="water-point-reporting-title-top">积水点来源分析</div>
-          <div class="water-point-reporting-title-bottom"></div>
+        <div class="water-point-reporting-title-bottom"></div>
+      </div>
+      <div id="analysis-of-water-source"></div>
+      <div class="water-point-reporting-title">
+        <div class="water-point-reporting-title-top">
+          易积水点市区分布 (水务局)
         </div>
-        <div id="analysis-of-water-source"></div>
+        <!-- <div class="water-point-reporting-title-top">积水点级别分析</div> -->
-        <div class="water-point-reporting-title">
+        <div class="water-point-reporting-title-bottom"></div>
-          <div class="water-point-reporting-title-top">易积水点市区分布</div>
+      </div>
-          <!-- <div class="water-point-reporting-title-top">积水点级别分析</div> -->
+      <!-- <div id="analysis-of-water-level"></div> -->
-          <div class="water-point-reporting-title-bottom"></div>
+      <div id="event-type-chart"></div>
-        </div>
-        <!-- <div id="analysis-of-water-level"></div> -->
-        <div id="event-type-chart"></div>
-
     </div>
   </div>
 </template>
 <script>
 import moment from 'moment'
 import * as echarts from 'echarts'
-import { selectCountWaters, selectCountLevel, selectWaterPoliceList, selectCountWater } from '@/api/waterPoints'
+import {
+  selectCountWaters,
+  selectCountLevel,
+  selectWaterPoliceList,
+  selectCountWater
+} from '@/api/waterPoints'
 
 export default {
   data () {
@@ -135,9 +141,19 @@ export default {
           name: '影响车辆'
         }
       ],
-      district: ['市南区', '市北区', '李沧区', '崂山区', '城阳区', '西海岸新区', '即墨区', '莱西市', '胶州市', '平度市'],
+      district: [
+        '市南区',
+        '市北区',
+        '李沧区',
+        '崂山区',
+        '城阳区',
+        '西海岸新区',
+        '即墨区',
+        '莱西市',
+        '胶州市',
+        '平度市'
+      ],
       districtData: []
-
     }
   },
   mounted () {
@@ -313,7 +329,7 @@ export default {
               normal: {
                 show: (function (value) {
                   if (value == 0) return false
-                }()),
+                })(),
                 position: 'inner'
               }
             },
@@ -349,7 +365,18 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: ['市南区', '市北区', '李沧区', '崂山区', '城阳区', '西海岸新区', '即墨区', '莱西市', '胶州市', '平度市'],
+          data: [
+            '市南区',
+            '市北区',
+            '李沧区',
+            '崂山区',
+            '城阳区',
+            '西海岸新区',
+            '即墨区',
+            '莱西市',
+            '胶州市',
+            '平度市'
+          ],
           axisLabel: {
             color: '#fff',
             margin: 7,
@@ -375,21 +402,27 @@ export default {
             data: this.districtData,
             type: 'bar',
             itemStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                offset: 0,
+                {
-                color: 'rgba(254,125,42,1)'
+                  offset: 0,
-              }, {
+                  color: 'rgba(254,125,42,1)'
-                offset: 1,
+                },
-                color: 'rgba(254,125,42,0)'
+                {
-              }]),
+                  offset: 1,
+                  color: 'rgba(254,125,42,0)'
+                }
+              ]),
               borderWidth: 2,
-              borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+              borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                offset: 0,
+                {
-                color: 'rgba(255,211,107,1)'
+                  offset: 0,
-              }, {
+                  color: 'rgba(255,211,107,1)'
-                offset: 1,
+                },
-                color: 'rgba(255,211,107,0)'
+                {
-              }])
+                  offset: 1,
+                  color: 'rgba(255,211,107,0)'
+                }
+              ])
             },
             barWidth: 23,
             label: {
@@ -397,7 +430,9 @@ export default {
               position: 'inside',
               distance: 0,
               formatter: function (param) {
-                if (param.value > 0) { return param.value } else return ''
+                if (param.value > 0) {
+                  return param.value
+                } else return ''
               },
               textStyle: {
                 color: '#fff',
@@ -412,7 +447,6 @@ export default {
       )
       eventType.setOption(option)
     }
-
   }
 }
 </script>
@@ -430,7 +464,7 @@ export default {
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-    font-family: "Tensentype-ZhiHeiJ-W5";
+    font-family: 'Tensentype-ZhiHeiJ-W5';
   }
   .time {
     text-align: left;

src/views/pages/waterPoints/index.vue

@@ -26,10 +26,10 @@
         >
           <template slot-scope="{ item }">
             <div style="margin-bottom: -10px" class="name">
-              {{ item.text || "" }}
+              {{ item.text || '' }}
             </div>
             <span style="font-size: 10px; color: #afbcc5">{{
-              item.detail.address || ""
+              item.detail.address || ''
             }}</span>
           </template>
           <!-- <template slot="append">搜索</template> -->
@@ -47,11 +47,20 @@
       </div>
 
       <!-- 事件多选 -->
-      <div class="eventSelection">
+      <div class="eventSelection" v-if="eventSelectionShow">
         <el-checkbox-group v-model="eventCheckList">
-          <el-checkbox label="影响车辆(>30cm)" @change="selectType('影响车辆(>30cm)')"></el-checkbox>
+          <el-checkbox
-          <el-checkbox label="影响行人(<30cm)" @change="selectType('影响行人(<30cm)')"></el-checkbox>
+            label="影响车辆(>30cm)"
-          <el-checkbox label="无积水或少量积水(<10cm)" @change="selectType('无积水或少量积水(<10cm)')"></el-checkbox>
+            @change="selectType('影响车辆(>30cm)')"
+          ></el-checkbox>
+          <el-checkbox
+            label="影响行人(<30cm)"
+            @change="selectType('影响行人(<30cm)')"
+          ></el-checkbox>
+          <el-checkbox
+            label="无积水或少量积水(<10cm)"
+            @change="selectType('无积水或少量积水(<10cm)')"
+          ></el-checkbox>
         </el-checkbox-group>
         <i class="eventSelectionIcon"></i>
         <i class="eventSelectionIcon"></i>
@@ -68,20 +77,26 @@
         <site-list></site-list>
       </div>
 
-      <!-- <div class="changeLayer">
+      <div class="changeLayer">
-        <div class="title">地图图层</div>
+        <div class="title">地图图层:</div>
         <div class="change-btn-box">
           <el-checkbox-group v-model="changeLayerBtnGroup">
-            <el-checkbox-button v-for="item in changeLayerBtnList" :key="item.index" :label="item" @change="layerHandleChange(item)" border></el-checkbox-button>
+            <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> -->
+      </div>
 
       <video-play
-      v-if="openVideo"
+        v-if="openVideo"
-      :key="channelCode"
+        :key="channelCode"
-      :channel-id="channelCode"
+        :channel-id="channelCode"
-    ></video-play>
+      ></video-play>
     </div>
   </div>
 </template>
@@ -96,7 +111,11 @@ import complaintEvent from './components/ComplaintEvent'
 import VideoList from './components/VideoList'
 import SiteList from './components/SiteList'
 import { selectByJdWd } from '@/api/construction/index'
-import { createSiteListPop, createCameraDetailsPop, createWaterPointPop } from '@/supermap/createMarkerPopup'
+import {
+  createSiteListPop,
+  createCameraDetailsPop,
+  createWaterPointPop
+} from '@/supermap/createMarkerPopup'
 import VideoPlay from './components/VideoPlay'
 
 export default {
@@ -104,16 +123,19 @@ export default {
     return {
       hiMap: new HieimpMap(), // 地图全局对象
       mapId: 'map-single', // 地图容器的id
-
+      eventSelectionShow: false,
       state: '',
       constructionSiteData: [],
       // changeLayerBtnList: ['视频监控', '易积水点'],
       changeLayerBtnList: ['易积水点'],
       changeLayerBtnGroup: [],
-      eventCheckList: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水或少量积水(<10cm)'],
+      eventCheckList: [
+        '影响车辆(>30cm)',
+        '影响行人(<30cm)',
+        '无积水或少量积水(<10cm)'
+      ],
       openVideo: false,
       channelCode: []
-
     }
   },
   components: {
@@ -139,11 +161,13 @@ export default {
     bus.$on('openCauseAnalysis', (row) => {
       this.hiMap.mapObj.map.flyTo({ lat: row.wd, lng: row.jd })
       // this.WithinRadiusSite(latLng);
-      const dataEvent = [{
+      const dataEvent = [
-        latLng: { lat: row.wd, lng: row.jd },
+        {
-        data: row,
+          latLng: { lat: row.wd, lng: row.jd },
-        type: 'site'
+          data: row,
-      }]
+          type: 'site'
+        }
+      ]
       this.hiMapFun.addPointsToMap(
         dataEvent,
         'construction.png',
@@ -177,7 +201,10 @@ export default {
 
     bus.$off('openWaterPointDialog')
     bus.$on('openWaterPointDialog', (item) => {
-      this.hiMap.mapObj.map.flyTo({ lat: item.latitude, lng: item.longitude }, 16)
+      this.hiMap.mapObj.map.flyTo(
+        { lat: item.latitude, lng: item.longitude },
+        16
+      )
       // this.WithinRadiusSite(latLng);
       // const dataEvent = [{
       //   latLng: { lat: item.latitude, lng: item.longitude },
@@ -193,7 +220,7 @@ export default {
     })
 
     bus.$off('openCurrentVideoWaterPoint')
-    bus.$on('openCurrentVideoWaterPoint', channelCode => {
+    bus.$on('openCurrentVideoWaterPoint', (channelCode) => {
       this.openVideo = true
       this.channelCode.unshift(channelCode)
     })
@@ -332,6 +359,7 @@ export default {
             // this.addResourceTomap('全部',this.$refs.videoListRef.cameraAllData)
             break
           case '易积水点':
+            this.eventSelectionShow = !this.eventSelectionShow
             break
           default:
             break
@@ -342,6 +370,7 @@ export default {
             // this.hiMapFun.removeLayerByLayerName('全部')
             break
           case '易积水点':
+            this.eventSelectionShow = !this.eventSelectionShow
             break
           default:
             break
@@ -361,7 +390,12 @@ export default {
           })
         }
       })
-      this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, 'videoSurveillance.png', type, createCameraDetailsPop)
+      this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
+        dataEvent,
+        'videoSurveillance.png',
+        type,
+        createCameraDetailsPop
+      )
     },
 
     waterPointOnMap (data) {
@@ -380,28 +414,40 @@ export default {
           switch (item.pointLevel) {
             case 'non':
               dataEvent1.push({
-                latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
+                latLng: {
+                  lat: Number(item.latitude),
+                  lng: Number(item.longitude)
+                },
                 data: item,
                 type: 'waterPoint'
               })
               break
             case 'pedestrian':
               dataEvent2.push({
-                latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
+                latLng: {
+                  lat: Number(item.latitude),
+                  lng: Number(item.longitude)
+                },
                 data: item,
                 type: 'waterPoint'
               })
               break
             case 'traffic':
               dataEvent3.push({
-                latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
+                latLng: {
+                  lat: Number(item.latitude),
+                  lng: Number(item.longitude)
+                },
                 data: item,
                 type: 'waterPoint'
               })
               break
             default:
               dataEvent4.push({
-                latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
+                latLng: {
+                  lat: Number(item.latitude),
+                  lng: Number(item.longitude)
+                },
                 data: item,
                 type: 'waterPoint'
               })
@@ -409,10 +455,30 @@ export default {
           }
         }
       })
-      this.hiMapFun.addPointsToMap(dataEvent1, 'waterPoint1.png', 'waterPoint1', createWaterPointPop)
+      this.hiMapFun.addPointsToMap(
-      this.hiMapFun.addPointsToMap(dataEvent2, 'waterPoint2.png', 'waterPoint2', createWaterPointPop)
+        dataEvent1,
-      this.hiMapFun.addPointsToMap(dataEvent3, 'waterPoint3.png', 'waterPoint3', createWaterPointPop)
+        'waterPoint1.png',
-      this.hiMapFun.addPointsToMap(dataEvent4, 'waterPoint4.png', 'waterPoint4', createWaterPointPop)
+        'waterPoint1',
+        createWaterPointPop
+      )
+      this.hiMapFun.addPointsToMap(
+        dataEvent2,
+        'waterPoint2.png',
+        'waterPoint2',
+        createWaterPointPop
+      )
+      this.hiMapFun.addPointsToMap(
+        dataEvent3,
+        'waterPoint3.png',
+        'waterPoint3',
+        createWaterPointPop
+      )
+      this.hiMapFun.addPointsToMap(
+        dataEvent4,
+        'waterPoint4.png',
+        'waterPoint4',
+        createWaterPointPop
+      )
     },
 
     selectType (item) {
@@ -426,8 +492,8 @@ export default {
 @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");
+  src: url('../../../assets/construction/TTZhiHeiJ-W5.ttf');
 }
 .map-box {
   width: 100%;
@@ -446,7 +512,7 @@ export default {
     z-index: 1000;
     width: 100%;
     height: 166px;
-    background: url("~@/assets/construction/title.png") no-repeat;
+    background: url('~@/assets/construction/title.png') no-repeat;
     text-align: center;
     .title {
       font-size: 46px;
@@ -455,10 +521,10 @@ 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: "青岛市易积水点地图";
+      content: '青岛市易积水点地图';
       text-shadow: 0px 3px 10px rgba(0, 0, 0, 0.9);
       position: absolute;
       z-index: -1;
@@ -571,7 +637,7 @@ export default {
   }
 
   .changeLayer {
-    width: 332px;
+    // width: 332px;
     height: 67px;
     background: rgba(7, 26, 44, 0.8);
     position: absolute;
@@ -591,7 +657,7 @@ export default {
     .change-btn-box {
       height: 67px;
       line-height: 67px;
-      width: 230px;
+      // width: 230px;
       padding-left: 20px;
 
       ::v-deep .el-checkbox-group {
@@ -663,7 +729,7 @@ export default {
   }
 }
 </style>
-<style lang='scss'>
+<style lang="scss">
 // ::-webkit-scrollbar {
 //   width: 8px;
 //   background: rgba(255, 255, 255, 0.1);