修改

public/index.html

@@ -103,7 +103,7 @@
     <script type="text/javascript" src="./static/leaflet/leaflet.motion.min.js"></script>
     <script type="text/javascript" src="./static/leaflet/leaflet.polylineDecorator.js"></script>
     <script type="text/javascript" src="./static/leaflet/leaflet-tooltip-layout.dist.js"></script>
-    <script type="text/javascript" src="./static/leaflet/leaflet.canvas-markers.js"></script>
+    <!-- <script type="text/javascript" src="./static/leaflet/leaflet.canvas-markers.js"></script> -->
     <script type="text/javascript" src="./static/leaflet/leaflet.markercluster.js"></script>
     <!-- 热力图 -->
     <script type="text/javascript" src="./leaflet/leaflet-heat.js"></script>
@@ -115,7 +115,7 @@
     <script type="text/javascript" src="./static/js/encrypt.js"></script>
     <script type="text/javascript" src="./static/js/DHWs.js"></script>
     
-    <script type="text/javascript" src="./TextIconOverlay_min.js"></script>
+    <!-- <script type="text/javascript" src="./TextIconOverlay_min.js"></script> -->
     <script type="text/javascript" src="./MarkerClusterer_min.js"></script>
     <script src="./static/js/InfoBox.js"></script>
     <!-- <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.css" />

src/api/waterPoints.js

@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+export function selectWaterPoint(params) {
+  return request({
+    url: 'api/project/water/selectWaterPoint',
+    method: 'get',
+    params
+  })
+}
+
+
+export function selectWaterCamera(params) {
+  return request({
+    url: 'api/project/water/selectWaterCamera',
+    method: 'get',
+    params
+  })
+}
+
+export function selectCameraByName(params) {
+  return request({
+    url: 'api/project/water/selectCameraByName',
+    method: 'get',
+    params
+  })
+}

src/router/index.js

@@ -195,15 +195,15 @@ const router = new Router({
 router.beforeEach((to, from, next) => {
 
   
-  // const userName = Cookies.get('userCJZT');
+  const userName = Cookies.get('userCJZT');
-  // console.log(userName)
+  console.log(userName)
-  // if (to.path === '/login' || to.path === '/') {
+  if (to.path === '/login' || to.path === '/' || to.path === '/waterPoints') {
-  //   return next();
+    return next();
-  // }else{
+  }else{
-  //   if (!userName) {
+    if (!userName) {
-  //     return next(`/login?redirect=${to.path}`)
+      return next(`/login?redirect=${to.path}`)
-  //   }
+    }
-  // }
+  }
 
   if (to.name == 'mapHome') {
     document.title = _global.config.sysTitle

src/supermap/createMarkerPopup.js

@@ -32,6 +32,7 @@ import { selectByChannelCode } from '@/api/videoSurveillance/index.js'
 import RoadGovernancePop from '@/views/pages/roadGovernance/components/RoadGovernancePop'
 import EventListDetailsPop from '@/views/pages/civilizedCity/components/EventListDetailsPop'
 import SiteListPop from '@/views/pages/construction/components/SiteListPop'
+import WaterPointPop  from '@/views/pages/waterPoints/components/WaterPointPop'
 
 /**
  * 生成专题通用弹窗Dom
@@ -626,6 +627,24 @@ function createSiteListPop(feature) {
   return popupDom.initDom()
 }
 
+// 创建积水点的弹窗
+function createWaterPointPop(feature) {
+  const popupDom = new Dom({
+    template: '<Water-Point-Pop :feature="feature"></Water-Point-Pop>',
+    data() {
+      return {
+        feature: feature
+      }
+    },
+    created() {
+    },
+    components: {
+      WaterPointPop
+    }
+  })
+  return popupDom.initDom()
+}
+
 export {
   createTopicGeneralPopup,
   createKeyRiskAreaPopup,
@@ -651,4 +670,5 @@ export {
   createRoadGovernancePop,
   createEventListDetailsPop,
   createSiteListPop,
+  createWaterPointPop,
 }

src/supermap/map-showResource.js

@@ -564,7 +564,7 @@ function addPointsToMap (features, url, lastOne, createPopupFun, DS, featureGrou
   // layers = createMarkerClusterLayer(defaultStyle)
   const icon = createDefaultFeatureStyle({
     img: url || 'the-head.png',
-    iconSize: url == 'construction.png'?[37,49]:[36, 36],
+    iconSize: url == ('construction.png'||url == 'waterPoint.png')?[37,49]:[36, 36],
   })
   const arr = []
   features.map((feature, index) => {
@@ -587,7 +587,9 @@ function addPointsToMap (features, url, lastOne, createPopupFun, DS, featureGrou
             } else if(feature.type=='site'){
               L.popup({ className: 'site-popup', keepInView: true,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
             } 
-            else {
+            else if(feature.type=='waterPoint'){
+              L.popup({ className: 'water-point-pop', keepInView: true,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
+            } else{
               L.popup({ className: 'epidemic-address', keepInView: true, maxHeight: 300 }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
             }
           }

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

@@ -14,7 +14,7 @@
       </div>
     </div>
 
-    <div class="label-content">
+    <div v-if="tabsActiveName == '视频标签'" class="label-content">
       <el-input
         placeholder="请输入关键词"
         prefix-icon="el-icon-search"
@@ -33,6 +33,48 @@
         </el-checkbox-button>
       </el-checkbox-group>
     </div>
+
+    <div v-if="tabsActiveName == '视频列表'" class="label-content">
+      <el-input
+        placeholder="请输入关键词"
+        suffix-icon="el-icon-search"
+        v-model="labelSearch"
+        @input="searchCameraTree"  
+      >
+      </el-input>
+      <el-radio v-model="checkStatus" label="2">全部</el-radio>
+      <el-radio v-model="checkStatus" label="1">正常</el-radio>
+      <el-radio v-model="checkStatus" label="0">异常</el-radio>
+      <span class="reset-button" @click="reset">重置</span>
+        <el-tree
+          v-show="camreaTreeIsShow"
+          id="tree"
+          :data="camreaTree"
+          :props="{label:'name',children:'children',isLeaf:'leaf',}"
+          :load="loadNode"
+          node-key="id"
+          @node-click="treeCameraClick"
+          empty-text="暂无数据"
+          :filter-node-method="filterNode"
+          lazy>
+          <!-- 是否离线checkStatus -->
+          <span  :style="{backgroundColor: data.checkStatus == 0 ?'#ccc':''}" slot-scope="{ node, data }" class="custom-tree-node">
+            <span>{{data.checkStatus == 0 ? `(离线)`:''}}{{ data.name }}</span>
+          </span>
+        </el-tree>
+        <el-tree
+          v-show="!camreaTreeIsShow"
+          ref="tree"
+          :data="camreaTreeSingle" 
+          :props="{label:'channelName',children:'children'}"
+          :filter-node-method="filterNode"
+          @node-click="treeCameraClick"
+        >
+          <span  :style="{backgroundColor: data.checkStatus == 0 ?'#ccc':''}" slot-scope="{ node, data }" class="custom-tree-node">
+            <span>{{data.checkStatus == 0 ? `(离线)`:''}}{{ data.channelName }}</span>
+          </span>
+        </el-tree>
+    </div>
   </div>
 </template>
 <script>
@@ -49,6 +91,10 @@ export default {
       labelSearch:'',
       checkboxGroup: [],
       cameraAllData:[],
+      camreaTreeIsShow:true,
+      camreaTreeSingle: [],
+      checkStatus: '2',
+      camreaTree:[],
     };
   },
   mounted() {
@@ -59,6 +105,21 @@ export default {
       this.cameraAllData = res.data
       // this.addResourceTomap('cameraAll',res.data);
     })
+    getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
+      this.camreaTree = res.data.data
+      res.data.data.forEach((item) => {
+        this.camreaTreeSingle.push({
+          channelName: item.name,
+          children: []
+        })
+      })
+    })
+  },
+   watch: {
+    checkStatus(newV,oldV) {
+      console.log(newV)
+      this.$refs.tree.filter(newV)
+    }
   },
   methods: {
     tabHandleClick(item) {
@@ -98,6 +159,98 @@ export default {
         this.tabList = res.data.data
       })
     },
+    searchCameraTree(value) {
+      if(value.length > 0){
+        const params = {
+        channelName:value
+      }
+        selectByChannelName(params).then((res) => {
+          console.log(res)
+          this.camreaTree = []
+          res.data.data.forEach((item) => {
+            this.camreaTree.push({
+              name: item.channelName,
+              gpsX: item.gpsX,
+              gpsY: item.gpsY,
+              channelCode:item.channelCode,
+              leaf:true,
+            })
+          })
+        })
+      }else {
+        getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
+          this.camreaTree = res.data.data
+        })
+      }
+    },
+    reset() {
+      this.checkboxGroup = []
+      this.checkStatus = "2";
+      this.camreaTreeIsShow = true
+      getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
+        this.camreaTree = res.data.data
+      })
+      document.getElementById("tree").scrollTop = 0;
+    },
+    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) {
+      console.log(data)
+      // if(data.channelCode){
+      //   const cameraTree = [{
+      //     latLng: { lat: data.gpsY, lng: data.gpsX },
+      //     data: data,
+      //     type:'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 });
+      //   }
+      // }
+    },
+    filterNode(value, data) {
+      if (value == "2") return true;
+      if (value == "0") {
+        return data.checkStatus == 0;
+      }
+      if (value == "1") {
+        return data.checkStatus == 1;
+      }
+    },
   },
 };
 </script>

src/views/pages/roadGovernance/components/RoadMain.vue

@@ -323,8 +323,20 @@ export default {
 
   methods: {
     // 道路污染数据  昨日
+    // 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();
+    // },
     async getRoadData() {
-      const res = await getRoadData({ dt: this.preTime });
+      const res = await getRoadData({ dt: '2022-7-7 00:00:00' });
       //路网数据
       this.roadData = res.data.data;
       //道路事件  pm>200

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

@@ -1,13 +1,13 @@
 <template>
   <div class="box">
     <header>
-      <div class="title">事件感知</div>
+      <div class="title">易积水点列表</div>
     </header>
     <div class="toady-list">
       <div class="toady-list-content">
         <div class="toady-list-rotate"></div>
         <div class="toady-list-icon"></div>
-        <div class="toady-list-num">今日事件<span> 36 </span>件</div>
+        <div class="toady-list-num">易积水点<span>{{list.length || 0}}  </span>个</div>
       </div>
     </div>
     <div class="tab-box">
@@ -37,18 +37,18 @@
         </div>
       </div>
       <div class='box3'>
-        <div class="item" v-for='item in list' :key='item.id'>
+        <div class="item" v-for='item in list' :key='item.index' @click="openDialog(item)">
           <div class="top">
             <div>
-              <span class='name'>{{item.name}}</span>
+              <span class='name'>{{item.waterPointName}}</span>
-              <span class='topType'>{{item.topType}}</span>
+              <!-- <span class='topType'>物联感知</span> -->
             </div>
             <div>
-              <span class="img" :class="item.type=='影响车辆(>30cm)'?'red':item.type=='影响行人(<30cm)'?'yellow':'green'"></span>
+              <!-- <span class="img" :class="item.type=='影响车辆(>30cm)'?'red':item.type=='影响行人(<30cm)'?'yellow':'green'"></span> -->
-              <span class="type">{{item.type}}</span>
+              <span class="type"></span>
             </div>
           </div>
-          <div class="bottom">{{item.text}}</div>
+          <div class="bottom"></div>
         </div>
       </div>
     </div>
@@ -57,6 +57,7 @@
 </template>
 <script>
 import { selectRaise, getAndSaveRecords, selectNoiceEvent } from '@/api/construction/index'
+import { selectWaterPoint,selectWaterCamera } from '@/api/waterPoints'
 import StatisticalAnalysis from './StatisticalAnalysis.vue'
 import bus from '@/views/layout/bus'
 import {
@@ -82,79 +83,15 @@ export default {
       preTime: '',
       total: 0,
       roadData: [],
-      list: [{
+      list: [
-        name: '香港中路山东路',
+        // {
-        id: '1',
+        //   name: '香港中路山东路',
-        topType: '物联感知',
+        //   id: '1',
-        type: '影响车辆(>30cm)',
+        //   topType: '物联感知',
-        text: '液位：12cm'
+        //   type: '影响车辆(>30cm)',
-      }, {
+        //   text: '液位：12cm'
-        name: '香港中路山东路',
+        // }, 
-        id: '2',
+      ]
-        topType: '物联感知',
-        type: '影响车辆(>30cm)',
-        text: '液位：12cm'
-      }, {
-        name: '香港中路山东路',
-        id: '3',
-        topType: '物联感知',
-        type: '影响行人(<30cm)',
-        text: '液位：12cm'
-      }, {
-        name: '香港中路山东路',
-        id: '4',
-        topType: '物联感知',
-        type: '影响车辆(>30cm)',
-        text: '液位：12cm'
-      }, {
-        name: '香港中路山东路',
-        id: '5',
-        topType: '物联感知',
-        type: '影响车辆(>30cm)',
-        text: '液位：12cm'
-      }, {
-        name: '香港中路山东路',
-        id: '6',
-        topType: '物联感知',
-        type: '无积水(<10cm)',
-        text: '液位：12cm'
-      }, {
-        name: '香港中路山东路',
-        id: '7',
-        topType: '物联感知',
-        type: '影响车辆(>30cm)',
-        text: '液位：12cm'
-      }, {
-        name: '香港中路山东路',
-        id: '8',
-        topType: '物联感知',
-        type: '影响行人(<30cm)',
-        text: '液位：12cm'
-      }, {
-        name: '香港中路山东路',
-        id: '9',
-        topType: '物联感知',
-        type: '影响车辆(>30cm)',
-        text: '液位：12cm'
-      }, {
-        name: '香港中路山东路',
-        id: '10',
-        topType: '物联感知',
-        type: '影响车辆(>30cm)',
-        text: '液位：12cm'
-      }, {
-        name: '香港中路山东路',
-        id: '11',
-        topType: '物联感知',
-        type: '影响车辆(>30cm)',
-        text: '液位：12cm'
-      }, {
-        name: '香港中路山东路',
-        id: '12',
-        topType: '物联感知',
-        type: '无积水(<10cm)',
-        text: '液位：12cm'
-      }]
     }
   },
   components: {
@@ -178,6 +115,17 @@ export default {
     this.selectRoadData()
     this.selectRaise()
     this.selectNoiceEvent()
+
+    selectWaterPoint().then( (res) => {
+      console.log(res)
+      this.list = res.data.data
+      bus.$emit('waterPoint',res.data.data)
+    })
+    // selectWaterCamera().then( (res) => {
+    //   console.log(res)
+    //   this.list = res.data.data
+    //   bus.$emit('waterPoint',res.data.data)
+    // })
   },
   methods: {
     selectType (item) {
@@ -271,6 +219,10 @@ export default {
           this.eventListData = res.data.data.roadData
         })
       }
+    },
+
+    openDialog(item) {
+      bus.$emit("openWaterPointDialog", item);
     }
   }
 }
@@ -302,7 +254,7 @@ export default {
       font-family: "Tensentype-ZhiHeiJ-W5";
     }
     .title::before {
-      content: "事件感知";
+      content: "易积水点列表";
       text-shadow: 0px 2px 5px rgba($color: #091a29, $alpha: 0.6);
       position: absolute;
       z-index: -1;
@@ -585,6 +537,7 @@ export default {
   margin-top: 10px;
   height: 620px;
   overflow-y: scroll;
+  cursor: pointer;
   .item {
     margin-top: 10px;
     background: rgba(5, 33, 59, 0.35);
@@ -593,7 +546,7 @@ export default {
       display: flex;
       justify-content: space-between;
       & > div:nth-of-type(2) {
-        width: 140px;
+        // width: 140px;
       }
       .name {
         font-weight: 600;

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

@@ -1,6 +1,6 @@
 <template>
   <div class="box">
-    <div class="title"><p>积水点市区分布</p><div class="bottomLine"></div></div>
+    <div class="title"><p>易积水点市区分布</p><div class="bottomLine"></div></div>
     <!-- 工地列表 -->
     <div class="eventData">
       <div id="event-type-chart"></div>

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

@@ -0,0 +1,409 @@
+<!--
+ * @Author: hisense.wuhongjian
+ * @Date: 2021-05-21 17:43:34
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2021-12-01 13:32:53
+ * @Description: 告诉大家这是什么
+-->
+<template>
+  <div class="dh-view" />
+</template>
+
+
+
+<script>
+const DHWsInstance = DHWs.getInstance({
+  reConnectCount: 2,
+  connectionTimeout: 30 * 1000,
+  messageEvents: {
+    loginState() {
+      console.log('aaaa');
+    }
+  }
+}); // 获取对象实例，使用单例模式，唯一
+DHWsInstance.detectConnectQt().then(res => {
+  if (res) {
+    console.info('登陆成功');
+  } else {
+    console.info('登陆失败,重新登录');
+    DHWsInstance.login({
+      loginIp: _global.config.loginInfo.loginIp,
+      loginPort: _global.config.loginInfo.loginPort,
+      userName: _global.config.loginInfo.userName,
+      userPwd: _global.config.loginInfo.userPwd,
+    });
+    // this.$Message.info('登录中...');
+    DHWsInstance.on('loginState', (res) => {
+      // this.isLogin = res;
+      if (res) {
+        // this.$Message.success('登录成功');
+        // this.activePanel = 'key2'
+      } else {
+        // this.$Message.info('登录失败');
+      }
+    });
+  }
+});
+import bus from '@/views/layout/bus';
+export default {
+  props: {
+    isDestroyed: {
+      type: Boolean,
+      default: true,
+    },
+    width: {
+      type: Number,
+      default: 0,
+    },
+    posX: {
+      type: Number,
+      default: 0,
+    },
+    posY: {
+      type: Number,
+      default: 0,
+    },
+    channelId: {
+      type: Array,
+      default: [],
+    },
+    count: {
+      type: Number,
+      default: 0,
+    },
+    // ws: {
+    //   type: Object,
+    //   default: () => {
+    //     return {};
+    //   }
+    // }
+  },
+  data() {
+    return {
+      ws: DHWsInstance,
+      activePanel: 'key12580',
+      isLogin: false,
+      loginType: '1',
+      loginIp: _global.config.loginInfo.loginIp,
+      loginPort: _global.config.loginInfo.loginPort,
+      userName: _global.config.loginInfo.userName,
+      userPwd: _global.config.loginInfo.userPwd,
+      ctrlType: 'playerWin',
+      ctrlList: [
+        {
+          value: 'ctrl1',
+          label: '控件1',
+        },
+        {
+          value: 'ctrl2',
+          label: '控件2',
+        },
+        {
+          value: 'ctrl3',
+          label: '控件3',
+        },
+      ],
+      splitList: [
+        {
+          value: 1,
+          label: '1 * 1',
+        },
+        {
+          value: 4,
+          label: '2 * 2',
+        },
+        {
+          value: 9,
+          label: '3 * 3',
+        },
+      ],
+      displayModeList: [
+        {
+          value: 1,
+          label: '播放器预览模式',
+        },
+        {
+          value: 2,
+          label: '播放器回放模式',
+        },
+      ],
+      ctrl: 'ctrl133',
+      splitNum: 1,
+      displayMode: 1,
+      displayTimeRange: [],
+      recordPath: 'C:\\DSS LightWeight\\DSS LightWeight Client\\Record\\',
+      downloadName: '',
+      downTimeRange: [],
+      downloadFormat: 0,
+      downloadFormatList: [
+        {
+          value: 0,
+          label: 'dav',
+        },
+        {
+          value: 1,
+          label: 'avi',
+        },
+        {
+          value: 2,
+          label: 'mp4',
+        },
+      ],
+      downloadSource: 3,
+      downloadSourceList: [
+        {
+          value: 3,
+          label: '中心录像',
+        },
+        {
+          value: 2,
+          label: '设备录像',
+        },
+      ],
+      showDownloadStreamType: false,
+      downloadStreamType: 1,
+      downloadStreamTypeList: [
+        {
+          value: 1,
+          label: '主码流',
+        },
+        {
+          value: 2,
+          label: '辅码流',
+        },
+        {
+          value: 3,
+          label: '三码流',
+        },
+      ],
+      downloadIsShow: true,
+      downloadIsShowList: [
+        {
+          value: true,
+          label: '是',
+        },
+        {
+          value: false,
+          label: '否',
+        },
+      ],
+      // posX: 650,
+      // posY: 120,
+      // width: 1250,
+      height: 800,
+      ratio: 100,
+      scrollX: 0,
+      scrollXH: 0,
+      scrollY: 0,
+      scrollYW: 0,
+      cutPosX: 0,
+      cutPosY: 0,
+      cutWidth: 100,
+      cutHeight: 100,
+    };
+  },
+  watch: {
+    channelId() {
+      console.log('监测到了节点的变化', this.channelId);
+      // bus.$emit('destroyVideoSur', true);
+      // this.login();
+
+      this.realTimeVideo();
+    },
+    count() {
+      // this.setVisible();
+    },
+  },
+  created() {
+    console.log("#############################我是新的")
+    // this.destroy();
+    // this.login();
+  },
+  mounted() {
+    this.realTimeVideo();
+    // bus.$emit('destroyVideoSur', true);
+    // this.loginOut();
+    // this.login();
+    // bus.$off('destroyDHView');
+    // bus.$on('destroyDHView', val =>{
+    //   console.log('销毁弹窗插件', val);
+    //   if(!val) {
+    //     this.destroy();
+    //     this.loginOut();
+    //   } else {
+    //     this.login();
+    //   }
+    // });
+  },
+  methods: {
+    loginOut() {
+      this.ws.logout({
+        loginIp: _global.config.loginInfo.loginIp
+      });
+    },
+    create() {
+      // 调用创建控件接口
+      if (!this.isLogin) {
+        // this.$Message.info('正在登陆客户端，请稍等......');
+        return false;
+      }
+      const params = [
+        {
+          ctrlType: this.ctrlType,
+          ctrlCode: this.ctrl,
+          ctrlProperty: {
+            displayMode: this.displayMode,
+            splitNum: this.splitNum,
+            channelList: [{ channelId: this.channelId }],
+          },
+          visible: true,
+          posX: this.posX,
+          posY: this.posY,
+          width: this.width,
+          height: this.height,
+          ratio: this.ratio,
+          scrollX: this.scrollX,
+          scrollY: this.scrollY,
+          scrollXH: this.scrollXH,
+          scrollYW: this.scrollYW,
+          cutList: [
+            {
+              posX: 0,
+              posY: 0,
+              width: 0,
+              height: 0,
+            },
+          ],
+        },
+      ];
+      this.ws.createCtrl(params);
+      this.ws.on('createCtrlResult', (res) => {
+        console.info('插件返回信息', res);
+      });
+    },
+    login() { // 调用登录接口
+      this.ws.detectConnectQt().then(res => {
+        if (res) { // 连接客户端成功
+          this.ws.login({
+            loginIp: _global.config.loginInfo.loginIp,
+            loginPort: _global.config.loginInfo.loginPort,
+            userName: _global.config.loginInfo.userName,
+            userPwd: _global.config.loginInfo.userPwd,
+            https: 1
+          });
+          // this.$Message.info('登录中...');
+          this.ws.on('loginState', (res) => {
+            this.isLogin = res;
+            if (res) {
+              this.$Message.success('登录成功');
+              // this.activePanel = 'key2';
+            } else {
+              this.$Message.info('登录失败');
+            }
+          });
+        } else { // 连接客户端失败
+          // this.$Message.info('请重新安装客户端');
+          this.$confirm('未检测到相关视频插件，是否进行下载？', '提示', {
+            confirmButtonText: '下载',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            const agent = this.getPCNum();
+            if (agent === 32) {
+              // 64位操作系统
+              this.downloadFile(_global.config.loginInfo.name_32, _global.config.loginInfo.url_32);
+            } else {
+              // 32位操作系统
+              this.downloadFile(_global.config.loginInfo.name_64, _global.config.loginInfo.url_64);
+            }
+          }).catch(() => {
+
+          });
+        }
+      });
+    },
+    downloadFile(name, url) {
+      const alink = document.createElement('a');
+      alink.download = name;// 文件名,大部分浏览器兼容,IE10及以下不兼容
+      alink.href = url;// 创建 url地址
+      alink.click(); // 自动点击
+    },
+    getPCNum() {
+      const agent = navigator.userAgent.toLowerCase();
+      if (agent.indexOf('win32') >= 0 || agent.indexOf('wow32') >= 0) {
+        return 32;
+      }
+      if (agent.indexOf('win64') >= 0 || agent.indexOf('wow64') >= 0) {
+        return 64;
+      }
+    },
+    setVisible() {
+      // 调用设置控件显隐接口
+      if (!this.isLogin) {
+        // this.$Message.info("正在登陆客户端，请稍等......");
+        return false;
+      }
+      const params = [
+        {
+          ctrlCode: this.ctrl,
+          visible: !this.ws.ctrls.find((i) => {
+            if (i.ctrlCode === this.ctrl) {
+              return i;
+            }
+          }).visible,
+        },
+      ];
+      this.ws.setCtrlVisible(params);
+    },
+    realTimeVideo() {
+      // // 调用控件实时播放接口
+      // if (!this.isLogin) {
+      //   console.log("正在登陆客户端，请稍等......");
+      //   // this.$Message.info("正在登陆客户端，请稍等......");
+      //   return false;
+      // }
+      // this.displayMode = 1;
+      // if (this.ws.ctrls.length === 0) {
+      //   console.log("请先创建控件！");
+      //   // this.$Message.info("请先创建控件！");
+      // }
+      // const params = {
+      //   ctrlCode: this.ctrl,
+      //   channelIds: [this.channelId],
+      // };
+      // this.ws.openCtrlPreview(params);
+      console.log('播放', this.channelId);
+      if (!this.isLogin) {
+        // this.$Message.info('正在登陆客户端，请稍等......');
+        // return false;
+        this.login();
+      }
+      // const params = [this.channelId];
+      console.log('播放', this.channelId);
+      this.ws.openVideo(this.channelId);
+    },
+    destroy() {
+      // 调用销毁控件接口
+      if (!this.isLogin) {
+        // this.login();
+        // this.$Message.info("正在登陆客户端，请稍等......");
+        return false;
+      }
+      console.log('销毁插件', this.ws.ctrls);
+      const ctrls = this.ws.ctrls.map((i) => {
+        if (i.ctrlCode === this.ctrl) {
+          return i.ctrlCode;
+        }
+      });
+      console.log('销毁的插件名称', ctrls);
+      this.ws.destroyCtrl(ctrls);
+    },
+  },
+  // beforeDestroyed() {
+  //   this.destroy()
+  // }
+};
+</script>
+
+<style lang="scss">
+</style>

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

@@ -0,0 +1,275 @@
+<template>
+  <div class="pop-box">
+    <div class="title-bg"></div>
+    <div class="title">
+      <span>{{ feature.data.address || feature.data.waterPointName || "" }}</span>
+    </div>
+    <div style="margin-top: 20px">
+      所属区市: {{ feature.data.ssqy || "" }}
+    </div>
+    <div>
+      积水级别: 
+    </div>
+    <div>
+      液位:
+    </div>
+    <!-- <div class="site-address">{{ feature.data.sgwz || "" }}</div> -->
+    <div class="site-content">
+      <div class="site-content-right">
+        <div
+          class="images" 
+          v-viewer="{movable: false}"
+          style="
+            width: 280px;
+            height: 158px;
+            cursor: pointer;
+          "
+        >
+          <img @click="show" style="width:100%;height:100%;" :src="`http://15.72.183.90:7004`+feature.data.videoCapture||''" alt="">
+        </div>
+        <div class="video-table">
+          <h4>周边监控</h4>
+          <el-table
+            :data="cameraData"
+            @row-click="openVideo"
+            :cell-style="{
+              color: '#fff',
+              cursor: 'pointer',
+              'background-color': '#18304c',
+              borderColor: '#325d94'
+            }"
+            :header-cell-style="{
+              color: '#1ffefd',
+              borderColor: '#325d94',
+              'background-color': '#2b4b7a',
+            }"
+          >
+            <el-table-column align="center" width="64" label="序号" type="index" style="text-align: center">
+            </el-table-column>
+            <el-table-column prop="cameraName" label="设备名称" show-overflow-tooltip></el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+    <div>
+      描述:
+    </div>
+    <div>
+      更新时间: {{ feature.data.updatedDate || "" }}
+    </div>
+  </div>
+</template>
+<script>
+import bus from "@/views/layout/bus";
+import 'viewerjs/dist/viewer.css'
+import { directive as viewer } from "v-viewer"
+import * as echarts from 'echarts'
+import {selectWeekPmAndNoice,selectMonthPmAndNoice} from '@/api/construction/index.js'
+import { selectCameraByName } from '@/api/waterPoints'
+export default {
+  name: "",
+  props: {
+    feature: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  mounted() {
+  selectCameraByName({ waterPointName: this.feature.data.waterPointName }).then((res) => {
+      this.feature.data.channelCode = res.data.data[0].channelCode
+      this.feature.data.channelName = res.data.data[0].channelName
+      this.feature.data.ssqy = res.data.data[0].ssqy
+      this.feature.data.videoCapture = res.data.data[0].videoCapture
+      console.log(this.feature);
+      this.cameraData.push({
+        cameraName: this.feature.data.channelName,
+        channelCode: this.feature.data.channelCode
+      })
+  })
+    
+    selectWeekPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
+      console.log(res)
+    })
+    selectMonthPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
+      console.log(res)
+    })
+  },
+  data() {
+    return {
+      filterButton:{
+        typeSelect:['近7天','近30天',],
+        typeSelectActive:'近7天',
+      },
+      cameraData: []
+
+    };
+  },
+  methods: {
+    // particularsClick(data){
+    //   console.log(data)
+    //   bus.$emit("mainClick", data);
+    // },
+
+    typeSelect(item) {
+      this.filterButton.typeSelectActive = item
+    },
+
+    show () {
+      const viewer = this.$el.querySelector('.images').$viewer
+      viewer.show()
+    },
+
+    openVideo(row){
+      console.log(row)
+      bus.$emit('openCurrentVideoWaterPoint',row.channelCode)
+    },
+  },
+  directives: {
+    viewer: viewer({
+        debug: true,
+    }),
+  },
+};
+</script>
+<style lang="scss">
+// .leaflet-popup {
+//   width: auto !important;
+// }
+  .water-point-pop {
+    .leaflet-popup-content-wrapper {
+      box-shadow: 0 0 10px  rgba($color: #1ffefd, $alpha: .4);
+      background: rgba(24,51,76,.95);
+      border: 1px solid rgba(50,227,235,.95);
+    }
+    .leaflet-popup-content {
+      width: 634px !important;
+      height: 400px;
+      padding: 12px 16px;
+      .pop-box {
+        width: 100%;
+        height: 100%;
+
+        .title-bg {
+          position: absolute;
+          top: 0;
+          left: 0;
+          height: 42px;
+          width: 100%;
+          opacity: .4;
+          background: linear-gradient(180deg, rgba($color: #1fa2fe, $alpha: 1) 0, rgba($color: #1fa2fe, $alpha: 0) 100%);
+        }
+
+        .title{
+            color: #1ffefd;
+            font-size: 16px;
+            font-weight: bold;
+            span:nth-child(2) {
+              display: inline-block;
+              width: 40px;
+              height: 22px;
+              margin-left: 8px;
+              border-radius: 2px;
+              border: 1px solid #0494ff;
+              color: #1ffefd;
+              text-align: center;
+              font-size: 14px;
+            }
+        }
+        
+        .site-address {
+          margin: 12px 0;
+          padding-left: 20px;
+          background: url(../../../../assets/construction/iconAddress.png) no-repeat left center;
+          color: rgba(255, 255, 255, .6);
+        }
+
+        .site-content {
+          
+          .site-content-right {
+            display: flex;
+            justify-content: space-between;
+            // width: 280px;
+            .images {
+              margin-top: 30px;
+            }
+            .video-table {
+              margin-top: 20px;
+              width: 300px;
+              h4 {
+                color: #fff;
+              }
+              .el-table{
+                margin-top: 8px;
+                border: 1px solid #325d94;
+                .el-table__body-wrapper{
+                  height: 90px;
+                  overflow-y: auto;
+                  &::-webkit-scrollbar {
+                  width: 8px;
+                  background-color: #10335e;
+                  }
+                  &::-webkit-scrollbar-thumb {
+                    background-color: #446dac !important;
+                  }
+                }
+                th,td {
+                  border-right: 1px solid #325d94;
+                }
+              }
+              .el-table::before {
+                display: none;
+              }
+            }
+          }
+        }
+      }
+
+    }
+
+    .leaflet-popup-close-button {
+      color: #3afefc !important;
+      font-size: 12px;
+    }
+  }
+</style>
+<style lang='scss' scoped>
+.particulars {
+  position: absolute;
+  right: 5px;
+  width: 80px;
+  height: 40px;
+  bottom: 5px;
+}
+.List-Details-pop {
+  background-color: #fff;
+  font-size: 16px;
+  padding-bottom: 20px;
+  display: flex;
+  width: 400px;
+
+  .topContent {
+    background: #000;
+    padding: 14px;
+    width: 400px;
+  }
+  .content {
+    width: 400px;
+    display: flex;
+    flex-wrap: wrap;
+    b {
+      color: #000;
+      font-size: 14px;
+    }
+    p {
+      color: #000;
+      font-size: 14px;
+    }
+  }
+  .title {
+    background-color: #000;
+    color: #fff;
+  }
+}
+</style>

src/views/pages/waterPoints/index.vue

@@ -8,7 +8,7 @@
       </div>
 
       <header>
-        <div class="title">青岛市积水点地图</div>
+        <div class="title">青岛市易积水点地图</div>
         <div></div>
       </header>
 
@@ -26,20 +26,20 @@
         >
           <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> -->
         </el-autocomplete>
       </div>
 
-      <div class="eventNum">
+      <!-- <div class="eventNum">
         累计事件数量
         <p><span>1236</span>件</p>
-      </div>
+      </div> -->
 
       <!-- 事件感知 -->
       <div class="complaintContent">
@@ -47,17 +47,17 @@
       </div>
 
       <!-- 视频标签、列表 -->
-      <div class="videoList">
+      <!-- <div class="videoList">
         <video-list ref="videoListRef"></video-list>
-      </div>
+      </div> -->
 
       <!-- 工地列表 -->
-      <div class="siteList">
+      <!-- <div class="siteList">
         <site-list></site-list>
-      </div>
+      </div> -->
 
       <!-- 事件多选 -->
-      <div class="eventSelection">
+      <!-- <div class="eventSelection">
         <el-checkbox-group v-model="eventCheckList">
           <el-checkbox label="影响车辆(>30cm)"></el-checkbox>
           <el-checkbox label="影响行人(<30cm)"></el-checkbox>
@@ -66,22 +66,22 @@
         <i class="eventSelectionIcon"></i>
         <i class="eventSelectionIcon"></i>
         <i class="eventSelectionIcon"></i>
-      </div>
+      </div> -->
 
       <div class="changeLayer">
         <div class="title">地图图层</div>
         <div class="change-btn-box">
           <el-checkbox-group v-model="changeLayerBtnGroup">
-            <el-checkbox-button
+            <el-checkbox-button v-for="item in changeLayerBtnList" :key="item.index" :label="item" @change="layerHandleChange(item)" border></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>
+
+      <video-play
+      v-if="openVideo"
+      :key="channelCode" 
+      :channel-id="channelCode"
+    ></video-play>
     </div>
   </div>
 </template>
@@ -95,10 +95,8 @@ import complaintEvent from './components/ComplaintEvent'
 import VideoList from './components/VideoList'
 import SiteList from './components/SiteList'
 import { selectByJdWd } from '@/api/construction/index'
-import {
+import { createSiteListPop, createCameraDetailsPop,createWaterPointPop } from '@/supermap/createMarkerPopup'
-  createSiteListPop,
+import VideoPlay from './components/VideoPlay'
-  createCameraDetailsPop
-} from '@/supermap/createMarkerPopup'
 
 export default {
   data () {
@@ -108,16 +106,21 @@ export default {
 
       state: '',
       constructionSiteData: [],
-      changeLayerBtnList: ['视频监控', '积水点'],
+      // changeLayerBtnList: ['视频监控', '易积水点'],
+      changeLayerBtnList: ['易积水点'],
       changeLayerBtnGroup: [],
-      eventCheckList: []
+      eventCheckList: [],
+      openVideo: false,
+      channelCode:[]
+
     }
   },
   components: {
     TiledMap,
     complaintEvent,
     VideoList,
-    SiteList
+    SiteList,
+    VideoPlay
   },
   created () {},
   mounted () {
@@ -127,23 +130,15 @@ export default {
       this.hiMapFun
     )
 
-    // 根据经纬度查询半径内所有的工地
     bus.$off('openCauseAnalysis')
     bus.$on('openCauseAnalysis', (row) => {
-      // this.timeRegion = data.data.dt;
-      // this.hiMapFun.removerPolygon();
-      this.hiMapFun.removeLayerByLayerName('constructionSite')
-      // debugger
-      // this.circle(latLng);
       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,
         type: 'site'
-        }
+      }]
-      ]
       this.hiMapFun.addPointsToMap(
         dataEvent,
         'construction.png',
@@ -152,9 +147,9 @@ export default {
       )
     })
 
-    bus.$off('roadOnMap')
+    bus.$off('waterPoint')
-    bus.$on('roadOnMap', (roadData) => {
+    bus.$on('waterPoint', (waterPointData) => {
-      this.roadOnMap(roadData)
+      this.waterPointOnMap(waterPointData)
     })
 
     bus.$off('removeCameraLayer')
@@ -166,6 +161,30 @@ export default {
     bus.$on('CameraSingleDataOnMap', (labelName, data) => {
       this.addResourceTomap(labelName, data)
     })
+
+    bus.$off('openWaterPointDialog')
+    bus.$on('openWaterPointDialog', (item) => {
+      this.hiMap.mapObj.map.flyTo({ lat: item.latitude, lng: item.longitude },16)
+      // this.WithinRadiusSite(latLng);
+      // const dataEvent = [{
+      //   latLng: { lat: item.latitude, lng: item.longitude },
+      //   data: item,
+      //   type: 'waterPoint'
+      // }]
+      // this.hiMapFun.addPointsToMap(
+      //   dataEvent,
+      //   'waterPoint.png',
+      //   'waterPoint',
+      //   createWaterPointPop
+      // )
+    })
+
+    bus.$off('openCurrentVideoWaterPoint')
+    bus.$on('openCurrentVideoWaterPoint',channelCode => {
+      this.openVideo = true;
+      this.channelCode.unshift(channelCode)
+    })
+
   },
   methods: {
     querySearchAsync (queryString, cb) {
@@ -273,7 +292,7 @@ export default {
           case '视频监控':
             // this.addResourceTomap('全部',this.$refs.videoListRef.cameraAllData)
             break
-          case '积水点':
+          case '易积水点':
             break
           default:
             break
@@ -283,7 +302,7 @@ export default {
           case '视频监控':
             // this.hiMapFun.removeLayerByLayerName('全部')
             break
-          case '积水点':
+          case '易积水点':
             break
           default:
             break
@@ -303,12 +322,22 @@ export default {
           })
         }
       })
-      this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
+      this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, 'videoSurveillance.png', type, createCameraDetailsPop)
-        dataEvent,
+    },
-        'videoSurveillance.png',
+
-        type,
+    waterPointOnMap (data) {
-        createCameraDetailsPop
+      const dataEvent = []
-      )
+      data.forEach((item) => {
+        const arr = [0, 0.0, '', '0', '0.0']
+        if (arr.indexOf(item.longitude) == -1) {
+          dataEvent.push({
+            latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
+            data: item,
+            type: 'waterPoint'
+          })
+        }
+      })
+      this.hiMapFun.addPointsToMap(dataEvent, 'waterPoint.png', 'waterPoint', createWaterPointPop)
     }
   },
   beforeDestroy () {}
@@ -319,7 +348,7 @@ export default {
 
 @font-face {
   font-family: 'Tensentype-ZhiHeiJ-W5';
-  src: url('../../../assets/construction/TTZhiHeiJ-W5.ttf');
+  src: url("../../../assets/construction/TTZhiHeiJ-W5.ttf");
 }
 .map-box {
   width: 100%;
@@ -338,7 +367,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;
@@ -350,8 +379,8 @@ export default {
       font-family: 'Tensentype-ZhiHeiJ-W5';
     }
     .title::before {
-      content: '青岛市积水点地图';
+      content: '青岛市易积水点地图';
-      text-shadow: 0px 3px 10px rgba(0, 0, 0, 0.9);
+      text-shadow: 0px 3px 10px rgba(0,0,0,.9);
       position: absolute;
       z-index: -1;
     }
@@ -362,10 +391,10 @@ export default {
     z-index: 1000;
     left: 496px;
     top: 90px;
-    border: 1px solid rgba(31, 254, 253, 0.9);
+    border: 1px solid rgba(31,254,253,.9);
     ::v-deep .el-input__inner {
       color: #fff;
-      background: rgba($color: #203b5d, $alpha: 0.8);
+      background: rgba($color: #203b5d, $alpha: .8);
       width: 226px;
       height: 36px;
       border:none;
@@ -375,7 +404,7 @@ export default {
     }
     ::v-deep .el-input__prefix {
       top: -1px;
-      color: rgba(31, 254, 253, 0.9);
+      color: rgba(31,254,253,.9);
     }
     ::v-deep .el-input-group__append {
       width: 54px;
@@ -394,7 +423,7 @@ export default {
       z-index: -1 !important;
       width: 226px !important;
       left: 0px !important;
-      background: rgba(32, 59, 93, 0.8);
+      background: rgba(32,59,93,.8);
       border: 1px solid #1ffefd;
       li {
         color: #fff;
@@ -412,7 +441,7 @@ export default {
     top: 90px;
     height:908px;
     width: 478px;
-    background: rgba($color: #05213b, $alpha: 0.85);
+    background: rgba($color: #05213b, $alpha: .85)
   }
 
   .eventNum {
@@ -449,7 +478,7 @@ export default {
     top: 92px;
     width: 398px;
     // height:460px;
-    background: rgba($color: #05213b, $alpha: 0.85);
+    background: rgba($color: #05213b, $alpha: .85);
   }
 
   .siteList {
@@ -459,13 +488,13 @@ export default {
     top: 660px;
     width: 398px;
     // height:500px;
-    background: rgba($color: #05213b, $alpha: 0.85);
+    background: rgba($color: #05213b, $alpha: .85);
   }
 
   .changeLayer {
     width: 332px;
     height: 67px;
-    background: rgba(7, 26, 44, 0.8);
+    background: rgba(7,26,44,.8);
     position: absolute;
     bottom: 10px;
     left: 50%;
@@ -476,7 +505,7 @@ export default {
       width: 96px;
       height: 100%;
       font-size: 16px;
-      color: rgba(255, 255, 255, 0.6);
+      color: rgba(255,255,255,.6);
       text-align: center;
       line-height: 67px;
     }
@@ -491,12 +520,13 @@ export default {
          padding: 6px 14px;
          border: 0;
          border-radius: 10px;
+
         }
         .el-checkbox-button:first-child .el-checkbox-button__inner{
           margin-right: 10px;
         }
         .el-checkbox-button.is-checked .el-checkbox-button__inner{
-          background: #027db4;
+          background: #027DB4;
           color: #ffffff;
           box-shadow: unset;
         }
@@ -549,7 +579,7 @@ export default {
   }
 }
 </style>
-<style lang="scss">
+<style lang='scss'>
 // ::-webkit-scrollbar {
 //   width: 8px;
 //   background: rgba(255, 255, 255, 0.1);