修改

src/api/area.js

@@ -8,3 +8,11 @@ export function selectKeyAreaList(params) {
     })
   }
 
+  export function selectByAreaName(params) {
+    return request({
+      url: 'api/project/keyArea/selectByAreaName',
+      method: 'get',
+      params,
+    })
+  }
+  

src/supermap/createMarkerPopup.js

@@ -33,6 +33,7 @@ import RoadGovernancePop from '@/views/pages/roadGovernance/components/RoadGover
 import EventListDetailsPop from '@/views/pages/civilizedCity/components/EventListDetailsPop'
 import SiteListPop from '@/views/pages/construction/components/SiteListPop'
 import WaterPointPop  from '@/views/pages/waterPoints/components/WaterPointPop'
+import SiteRoadPop  from '@/views/pages/construction/components/SiteRoadPop'
 
 /**
  * 生成专题通用弹窗Dom
@@ -202,6 +203,24 @@ function creatNucleicAcidMonitoringSites(feature) {
   })
   return popupDom.initDom()
 }
+
+//在建工地走航监测弹窗
+function createSiteRoadPop(feature) {
+  const popupDom = new Dom({
+    template: '<Site-Road-pop :feature="feature"></Site-Road-pop>',
+    data() {
+      return {
+        feature: feature,
+      }
+    },
+    created() {
+    },
+    components: {
+      SiteRoadPop
+    }
+  })
+  return popupDom.initDom()
+}
 /**
  * 生成专题企业信息通用弹窗Dom
  * @param resourceTitle
@@ -671,4 +690,5 @@ export {
   createEventListDetailsPop,
   createSiteListPop,
   createWaterPointPop,
+  createSiteRoadPop,
 }

src/supermap/map-showResource.js

@@ -586,8 +586,9 @@ function addPointsToMap (features, url, lastOne, createPopupFun, DS, featureGrou
               L.popup({ className: 'roadGovernance-popup', keepInView: false,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
             } else if(feature.type=='site'){
               L.popup({ className: 'site-popup', keepInView: false,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
-            } 
+            } else if(feature.type=='siteRoad'){
-            else if(feature.type=='waterPoint'){
+              L.popup({ className: 'site-road-popup', keepInView: false,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
+            } else if(feature.type=='waterPoint'){
               L.popup({ className: 'water-point-pop', keepInView: false,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
             } else{
               L.popup({ className: 'epidemic-address', keepInView: false, maxHeight: 300 }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)

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

@@ -52,7 +52,8 @@
 <script>
 import bus from "@/views/layout/bus";
 import {
-  selectKeyAreaList
+  selectKeyAreaList,
+  selectByAreaName,
 } from "@/api/area";
 
 export default {
@@ -95,6 +96,9 @@ export default {
       console.log(res.data.data)
       this.siteData = res.data.data
     })
+    selectByAreaName({areaName:"李村商圈"}).then((res) => {
+      console.log(res.data.data)
+    })
   
   },
   methods: {

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

@@ -46,7 +46,8 @@
         </div>
       </div>
       <div class="event-list" :style="{ 'margin-top': (tabsActiveName == '走航监测'? '60px' :'12px')}">
-        <div class="event-details" v-for="item in eventListData" :key="item.index">
+        <div v-show="tabsActiveName == '走航监测'" >
+          <div class="event-details" v-for="item in eventListData" :key="item.index" @click="openRoadDialog(item)">
             <div class="event-details-title">
               <span>{{item.roadName||''}}</span>
               <span>{{item.dt||''}}</span>
@@ -58,11 +59,28 @@
               <p>pm10:{{item.pm10||''}}</p>
             </div>
           </div>
+        </div>
+        <div v-show="tabsActiveName == '物联感知'">
+          <div class="event-details" v-for="item in eventListData" :key="item.index">
+            <div class="event-details-title">
+              <span>{{item.projectName||''}}</span>
+              <span>{{item.pushTime||''}}</span>
+              <!-- <span>未派发</span> -->
+            </div>
+            <div class="event-details-des">
+              <h5>{{item.sgwz||''}}</h5>
+              <!-- <p>简述简述简述简述简述简述简述简述</p> -->
+              <p>{{filterButton.typeSelectActive == '工地扬尘'? 'pm10' : '噪声值'}}:{{filterButton.typeSelectActive == '工地扬尘'? item.pm10 :item.noice ||''}}</p>
+            </div>
+          </div>
+        </div>
         <el-pagination
           background
           layout="prev, pager, next"
           @current-change="pageChange"
-          :total="total">
+          :total="total"
+          :current-page.sync="currentPage"
+          >
         </el-pagination>
       </div>
     </div>
@@ -72,6 +90,9 @@
 <script>
 import { selectRaise,getAndSaveRecords,selectNoiceEvent } from "@/api/construction/index";
 import StatisticalAnalysis from "./StatisticalAnalysis.vue";
+import {
+  createSiteRoadPop,
+} from "@/supermap/createMarkerPopup";
 import bus from "@/views/layout/bus";
 import {
   getRoadData,
@@ -85,8 +106,8 @@ export default {
       tabsActiveName: "走航监测",
       statisticalAnalysisIsShow: false,
       filterButton:{
-        typeSelect:['事件','事件1'],
+        typeSelect:['事件1','事件2'],
-        typeSelectActive:'事件',
+        typeSelectActive:'事件1',
         processStateSelect:['全部','未派发','未处置','已处置'],
         processStateSelectActive:'全部',
       },
@@ -94,6 +115,7 @@ export default {
       preTime: "",
       total: 0,
       roadData:[],
+      currentPage: 1,
     };
   },
   components: {
@@ -115,18 +137,18 @@ export default {
   mounted() {
     this.getRoadData()
     this.selectRoadData()
-    this.selectRaise()
-    this.selectNoiceEvent()
   },
   methods: {
     tabHandleClick(item) {
       this.tabsActiveName = item
+      this.currentPage = 1
       if(item == '视频感知'){
         
       }
       if(item == '物联感知'){
         this.filterButton.typeSelect = ['工地扬尘','工地噪声']
-        this.typeSelectActive = '工地扬尘'
+        this.filterButton.typeSelectActive = '工地扬尘'
+        this.selectRaise()
       }
       if(item == '走航监测'){
         this.selectRoadData()
@@ -137,6 +159,13 @@ export default {
     },
     typeSelect(item) {
       this.filterButton.typeSelectActive = item
+      this.currentPage = 1
+      if(item == '工地扬尘') {
+        this.selectRaise()
+      }
+      if(item == '工地噪声') {
+        this.selectNoiceEvent()
+      }
     },
     processStateSelect(item) {
       this.filterButton.processStateSelectActive = item
@@ -161,25 +190,26 @@ export default {
       });
     },
 
-    //物联感知  扬尘 噪声
+    //物联感知  扬尘 
     selectRaise() {
       let params = {
         pageSize: 5,
         page: 1,
       }
       selectRaise(params).then((res) => {
-        console.log(res)
+        this.eventListData = res.data.data.data;
-        // this.eventListData = res.data.data.roadData;
+        this.total = res.data.data.sum;
-
       });
     },
+    //噪声
     selectNoiceEvent() {
       let params = {
         pageSize: 5,
         page: 1,
       }
       selectNoiceEvent(params).then((res) => {
-        console.log(res)
+        this.eventListData = res.data.data.data;
+        this.total = res.data.data.sum;
       });
     },
 
@@ -188,13 +218,24 @@ export default {
       if(this.tabsActiveName == '视频感知') {
         
       } else if(this.tabsActiveName == '物联感知') {
+        if(this.filterButton.typeSelectActive == '工地扬尘'){
           let params = {
             pageSize: 5,
             page: val,
           }
           selectRaise(params).then((res) => {
-          console.log(res)
+            this.eventListData = res.data.data.data;
           });
+        }
+        if(this.filterButton.typeSelectActive == '工地噪声'){
+          let params = {
+            pageSize: 5,
+            page: val,
+          }
+          selectNoiceEvent(params).then((res) => {
+            this.eventListData = res.data.data.data;
+          });
+        }
       } else if(this.tabsActiveName == '走航监测') {
         let params = {
           pageSize: 5,
@@ -204,6 +245,23 @@ export default {
           this.eventListData = res.data.data.roadData;
         });
       }
+    },
+
+
+    openRoadDialog(data) {
+      console.log(data)
+      this.$parent.hiMap.mapObj.map.flyTo({ lat: data.lat, lng: data.lng });
+      let dataEvent = [{
+          latLng: { lat: data.lat, lng: data.lng },
+          data: data,
+          type: "siteRoad",
+      }]
+      this.$parent.hiMapFun.addPointsToMap(
+        dataEvent,
+        "poi-red.png",
+        "roadPoint",
+        createSiteRoadPop
+      );
     }
   },
 };
@@ -418,13 +476,17 @@ export default {
         max-height: 100px;
         padding-right: 8px;
         background: linear-gradient(90deg, #173759 0, #133150 100%);
+        cursor: pointer;
         .event-details-title {
           height: 36px;
           display: flex;
           justify-content: space-between;
           align-items: center;
           span:nth-child(1) {
-            width: 140px;
+            width: 180px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
             padding-left: 10px;
             color: #1ffefd;
             font-size: 18px;
@@ -455,6 +517,9 @@ export default {
             padding-left: 18px;
             color: rgba(255,255,255, .6);
             background: url(../../../../assets/construction/iconAddress.png) no-repeat left center;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
           }
           p {
             color: rgba(255,255,255, .8);

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

@@ -8,19 +8,20 @@
     <div class="site-address">{{ feature.data.sgwz || "" }}</div>
     <div class="site-content">
       <div class="site-content-left">
+        <span style="color:rgba(255, 255, 255, .6);font-size:14px">更新时间 {{ feature.data.pushTime || ''}}</span>
         <div class="site-content-left-top">
           <div class="noise">
             <img src="../../../../assets/construction/noise.png" alt="">
             <div>
               <p>噪声</p>
-              <p><span>{{ feature.data.noice || "" }}</span>dB</p>
+              <p><span>{{ feature.data.noice || feature.data.noice == 0 ? feature.data.noice : ''}}</span>dB</p>
             </div>
           </div>
           <div class="raise-dust">
             <img src="../../../../assets/construction/raiseDust.png" alt="">
             <div>
               <p>扬尘</p>
-              <p><span>{{ feature.data.pm10 || "" }}</span>ug/m<sup>3</sup> </p>
+              <p><span>{{ feature.data.pm10 || feature.data.noice == 0 ? feature.data.noice : '' }}</span>ug/m<sup>3</sup> </p>
             </div>
           </div>
         </div>
@@ -52,6 +53,7 @@
           <h4>周边监控</h4>
           <el-table
             :data="cameraData"
+            @row-click="openVideo"
             :cell-style="{
               color: '#fff',
               cursor: 'pointer',
@@ -63,6 +65,7 @@
               borderColor: '#325d94',
               'background-color': '#2b4b7a',
             }"
+            style="background: transparent"
           >
             <el-table-column align="center" width="64" label="序号" type="index" style="text-align: center">
             </el-table-column>
@@ -79,6 +82,7 @@ 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 { time } from 'highcharts';
 export default {
   name: "",
   props: {
@@ -90,16 +94,29 @@ export default {
     },
   },
   mounted() {
-    console.log(this.feature);
     selectWeekPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
-      console.log(res)
+      res.data.data.forEach((item) => {
+        this.weekData.time.push(item.pushTime)
+        this.weekData.pm10.push(item.pm10)
+        this.weekData.noice.push(item.noice)
       })
-    selectMonthPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
+      this.chartData = this.weekData
-      console.log(res)
-    })
-    this.$nextTick( () => {
       this.initCharts()
     })
+    selectMonthPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
+      res.data.data.forEach((item) => {
+        this.monthData.time.push(item.pushTime)
+        this.monthData.pm10.push(item.pm10)
+        this.monthData.noice.push(item.noice)
+      })
+    })
+
+    if(this.feature.data.channelName){
+      this.cameraData.push({
+        cameraName: this.feature.data.channelName,
+        channelCode: this.feature.data.channelCode
+      })
+    }
   },
   data() {
     return {
@@ -107,8 +124,18 @@ export default {
         typeSelect:['近7天','近30天',],
         typeSelectActive:'近7天',
       },
-      cameraData: []
+      cameraData: [],
-
+      weekData:{
+        time:[],
+        pm10:[],
+        noice:[],
+      },
+      monthData:{
+        time:[],
+        pm10:[],
+        noice:[],
+      },
+      chartData:{},
     };
   },
   methods: {
@@ -119,6 +146,12 @@ export default {
 
     typeSelect(item) {
       this.filterButton.typeSelectActive = item
+      if(item == '近7天'){
+        this.chartData = this.weekData
+      }
+      if(item == '近30天'){
+        this.chartData = this.monthData
+      }
       this.initCharts()
     },
 
@@ -142,7 +175,7 @@ export default {
             show: false,
           },
           boundaryGap: ['2%', '2%'],
-          data: ['1', '2', '3', '4', '5', '6', '7']
+          data: this.chartData.time
         },
         yAxis: [
           {
@@ -198,10 +231,14 @@ export default {
             color: '#fff'
           }
         },
+        tooltip: {
+          show: true,
+          trigger: 'axis'
+        },
         series: [
           {
             name: '噪声值',
-            data: [60, 30, 60, 70, 40, 60, 70],
+            data: this.chartData.noice,
             type: 'line',
             symbol: 'none',
             lineStyle: {
@@ -223,7 +260,7 @@ export default {
           },
           {
             name: '扬尘值',
-            data: [30, 40, 50, 80, 90, 40, 60],
+            data: this.chartData.pm10,
             type: 'line',
             symbol: 'none',
             lineStyle: {
@@ -255,6 +292,10 @@ export default {
       const viewer = this.$el.querySelector('.images').$viewer
       viewer.show()
     },
+
+    openVideo(row){
+      bus.$emit('openCurrentVideoWaterPoint',row.channelCode)
+    },
   },
   directives: {
     viewer: viewer({
@@ -308,7 +349,7 @@ export default {
         }
         
         .site-address {
-          margin: 12px 0;
+          margin: 12px 0 0 0;
           padding-left: 20px;
           background: url(../../../../assets/construction/iconAddress.png) no-repeat left center;
           color: rgba(255, 255, 255, .6);
@@ -372,7 +413,7 @@ export default {
             }
             .site-content-left-bottom {
               width: 100%;
-              margin-top: 16px;
+              margin-top: 10px;
               .filter-btn-typeSelect {
                 display: flex;
                 .typeSelect-btn {
@@ -399,7 +440,7 @@ export default {
           .site-content-right {
             width: 280px;
             .video-table {
-              margin-top: 20px;
+              margin-top: 10px;
               h4 {
                 color: #fff;
               }

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

@@ -0,0 +1,145 @@
+<template>
+  <div class="pop-box">
+    <div class="details-pop">
+        <div class="title">问题详情</div>
+        <div>
+            <div class="top">
+                <p><span>道路名称：</span><span>{{feature.data.roadName||''}}</span></p>
+                <p><span>路段起始：</span><span>{{feature.data.start||''}}</span></p>
+                <p><span>路段结束：</span><span>{{feature.data.end||''}}</span></p>
+                <p><span>PM10：</span><span>{{feature.data.pm10||''}}</span></p>
+                <p><span>区市：</span><span>{{feature.data.regionName||''}}</span></p>
+                <p><span>街道：</span><span>{{feature.data.streetName||''}}</span></p>
+                <p><span>时间：</span><span>{{feature.data.dt||''}}</span></p>
+            </div>
+            <!-- <button class="button" @click="analyse(feature)">线索分析</button> -->
+        </div>
+    </div>
+  </div>
+</template>
+<script>
+import bus from '@/views/layout/bus';
+export default {
+  name: "",
+  components: {},
+  props: {
+      feature: {
+      type: Object,
+        default: () => {
+          return {
+          }
+        },
+      },
+      allMapObject: {
+        type: Object,
+        default: () => {
+          return {};
+        }
+      }
+  },
+  mounted() {
+  },
+  data() {
+    return {
+    };
+  },
+  methods: {
+    analyse(data){
+      bus.$emit('openCauseAnalysis',data)
+      // this.allMapObject.mapObj.map.closePopup();
+    }
+  },
+};
+</script>
+<style lang="scss">
+.leaflet-popup {
+  width: auto !important
+}
+.site-road-popup {
+  .leaflet-popup-content {
+    width: unset !important;
+  }
+}
+</style>
+<style lang="scss" scoped>
+.details-pop {
+
+  width: 350px;
+  // height: 4200px;
+  color: black;
+  background: rgba(24,48,76,0.9);
+  position: relative;
+  .item {
+    width: 100%;
+    display: flex;
+  }
+  & > div:nth-of-type(2) {
+    // height: 110px;
+    overflow-y: scroll;
+  }
+  & > div:nth-of-type(2)::-webkit-scrollbar {
+    width: 0 !important;
+  }
+  .top {
+    padding: 0 10px;
+    display: flex;
+    flex-wrap: wrap;
+    p {
+      width: 100%;
+      display: flex;
+      margin:7px;
+      font-size: 20px;
+      span {
+        color: #fff;
+      }
+      span:nth-of-type(1) {
+        // width: 70px;
+        margin-left: 10px;
+      }
+    }
+    .pic {
+      span {
+        margin-left: 10px;
+      }
+      span:nth-of-type(1) {
+        margin-left: 10px;
+      }
+      span:nth-of-type(2) {
+        margin-left: 0;
+      }
+    }
+  }
+  .bottom {
+    display: flex;
+    margin: 20px 150px 30px;
+  }
+}
+.button {
+    width: 144px;
+    height: 50px;
+    background: url("~@/assets/img/roadGovernancePop.png") no-repeat;
+    color: #082d36;
+    margin:0 0 10px 100px;
+    line-height:10px;
+    text-align: center;
+    border: none;
+    cursor: pointer;
+}
+::v-deep .el-upload-list__item:first-child {
+  margin-top: -25px;
+}
+.title {
+  height: 50px;
+  padding: 0 10px;
+  line-height: 50px;
+  font-size: 20px;
+  color: #66ffff;
+  // background: #304c76;
+  position: relative;
+  background: url("~@/assets/img/roadGovernancetitlebg.png") no-repeat 97px center;
+  span {
+    position: absolute;
+    right: 10px;
+  }
+}
+</style>

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

@@ -26,7 +26,7 @@
               >{{item}}</div>
       </div>
     </div>
-    <div key="video" v-if="tabsActiveName == '视频感知事件'">
+    <div key="video" v-if="tabsActiveName == '视频感知'">
       <div class="event-num">
         <span>000</span>件
       </div>
@@ -37,7 +37,18 @@
       <div class="line"></div>
       <div id="event-time-chart"></div>
     </div>
-    <div key="road" v-if="tabsActiveName == '出租车走航监测'">
+    <div key="video" v-if="tabsActiveName == '物联感知'">
+      <div class="event-num">
+        <span>000</span>件
+      </div>
+      <div class="line"></div>
+      <div id="event-type-chart"></div>
+      <div class="line"></div>
+      <div id="event-state-chart"></div>
+      <div class="line"></div>
+      <div id="event-time-chart"></div>
+    </div>
+    <div key="road" v-if="tabsActiveName == '走航监测'">
       <div class="event-num">
         <span>000</span>件
       </div>
@@ -56,14 +67,15 @@
             color: '#1ffefd',
             'background-color': '#2b4b7a',
           }"
+          style="background: transparent"
         >
-          <el-table-column label="Top" width="50" type="index">
+          <el-table-column label="Top" width="46" type="index">
           </el-table-column>
           <el-table-column  label="道路" prop="roadName" show-overflow-tooltip>
           </el-table-column>
-          <el-table-column width="84" prop="start" label="路段开始" show-overflow-tooltip>
+          <el-table-column width="81" prop="start" label="路段开始" show-overflow-tooltip>
           </el-table-column>
-          <el-table-column width="84" prop="end" label="路段结束" show-overflow-tooltip>
+          <el-table-column width="81" prop="end" label="路段结束" show-overflow-tooltip>
           </el-table-column>
           <el-table-column width="86" prop="times" label="告警次数">
           </el-table-column>
@@ -78,8 +90,8 @@ import * as echarts from 'echarts'
  export default {
    data () {
      return {
-        tabsButton: ["视频感知事件","出租车走航监测"],
+        tabsButton: ["视频感知","物联感知","走航监测"],
-        tabsActiveName: "视频感知事件",
+        tabsActiveName: "视频感知",
         filterButton:{
           typeSelect:['全部','近7天','近30天'],
           typeSelectActive:'全部',
@@ -119,14 +131,14 @@ import * as echarts from 'echarts'
    methods: {
     tabHandleClick(item) {
       this.tabsActiveName = item
-      if(item == '视频感知事件') {
+      if(item == '视频感知') {
         this.$nextTick( () => {
           this.initEventTypeCharts()
           this.initEventStateCharts()
           this.initEventTimeCharts()
         })
       }
-      if(item == '出租车走航监测') {
+      if(item == '走航监测') {
         this.$nextTick( () => {
           this.initRoadTimeCharts()
         })

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

@@ -14,7 +14,7 @@
       </div>
     </div>
 
-    <div v-if="tabsActiveName == '视频标签'" class="label-content">
+    <div v-show="tabsActiveName == '视频标签'" class="label-content">
       <el-input
         placeholder="请输入关键词"
         prefix-icon="el-icon-search"
@@ -34,7 +34,7 @@
       </el-checkbox-group>
     </div>
 
-    <div v-if="tabsActiveName == '视频列表'" class="label-content">
+    <div v-show="tabsActiveName == '视频列表'" class="label-content">
       <el-input
         placeholder="请输入关键词"
         suffix-icon="el-icon-search"
@@ -346,6 +346,31 @@ export default {
         background: linear-gradient(0deg, #1577d3 0%, #1251ab 100%);
       }
     }
+
+    .el-tree {
+      width: 366px;
+      height: 300px;
+      overflow-y: auto;
+      margin-top: 10px;
+      background: transparent;
+      color: #fff;
+
+      &::-webkit-scrollbar {
+      width: 8px;
+      background-color: #10335e;
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: #446dac !important;
+      }
+
+      .el-tree-node__content:hover {
+        background: rgba(27,255,255,.2);
+      }
+      .el-tree-node:focus > .el-tree-node__content {
+        background-color: rgba(27,255,255,.2);
+        color: #fff;
+      }
+    }
   }
 }
 </style>

src/views/pages/construction/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/construction/index.vue

@@ -64,6 +64,11 @@
           </el-checkbox-group>
         </div>
       </div>
+
+      <video-play
+        v-if="openVideo"
+        :channel-id="channelCode"
+      ></video-play>
     </div>
   </div>
 </template>
@@ -79,6 +84,7 @@ import SiteList from "./components/SiteList";
 import { selectByJdWd } from "@/api/construction/index";
 import { createSiteListPop } from "@/supermap/createMarkerPopup";
 import {createCameraDetailsPop} from '@/supermap/createMarkerPopup';
+import VideoPlay from './components/VideoPlay'
 
 export default {
   data() {
@@ -91,6 +97,9 @@ export default {
       changeLayerBtnList: ['AI事件','视频监控','工地','道路'],
       changeLayerBtnGroup: [],
 
+      openVideo: false,
+      channelCode:[]
+    
     };
   },
   components: {
@@ -98,6 +107,7 @@ export default {
     complaintEvent,
     VideoList,
     SiteList,
+    VideoPlay
   },
   created() {},
   mounted() {
@@ -146,6 +156,12 @@ export default {
     bus.$on("CameraSingleDataOnMap",(labelName,data) => {
       this.addResourceTomap(labelName,data);
     })
+
+    bus.$off('openCurrentVideoWaterPoint')
+    bus.$on('openCurrentVideoWaterPoint',channelCode => {
+      this.openVideo = true;
+      this.channelCode.unshift(channelCode)
+    })
   },
   methods: {
     querySearchAsync(queryString, cb) {

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

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

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

@@ -6,7 +6,7 @@
     <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-icon"></div> -->
         <div class="toady-list-num">易积水点<span>{{listAll.length || 0}}  </span>个</div>
       </div>
     </div>
@@ -355,8 +355,8 @@ export default {
         position: absolute;
         width: 128px;
         height: 128px;
-        background: url(../../../../assets/construction/rotateBgi.png) no-repeat;
+        background: url(../../../../assets/waterPoints/rotateBgi.png) no-repeat;
-        animation: routation 20s linear infinite;
+        // animation: routation 20s linear infinite;
       }
       .toady-list-icon {
         position: absolute;
@@ -373,7 +373,7 @@ export default {
         height: 72px;
         top: 20px;
         left: 100px;
-        background: url(../../../../assets/construction/toadyListBgi2.png)
+        background: url(../../../../assets/waterPoints/toadyListBgi2.png)
           no-repeat;
         color: #fff;
         line-height: 72px;