feat:工地、重点区域功能补充

src/api/area.js

@@ -16,3 +16,48 @@ export function selectKeyAreaList(params) {
     })
   }
 
+// 重点区域根据区域名称进行查询
+export function selectByLikeName(params) {
+  return request({
+    url: 'api/project/keyArea/selectByLikeName',
+    method: 'get',
+    params
+  })
+}
+// 重点区域根据类型进行筛选
+export function selectKeyArea(params) {
+  return request({
+    url: 'api/project/keyArea/selectKeyArea',
+    method: 'get',
+    params
+  })
+}
+
+// 重点区域--视频所有事件
+export function selectByAreaEvent(params) {
+  return request({
+    url: 'api/project/keyArea/selectByAreaEvent',
+    method: 'get',
+    params
+  })
+}
+
+// 重点区域--视频当天事件
+export function selectByDayAreaEvent(params) {
+  return request({
+    url: 'api/project/keyArea/selectByDayAreaEvent',
+    method: 'get',
+    params
+  })
+}
+
+// 数据统计--事件趋势
+export function selectMonthAreaEvent(params) {
+  return request({
+    url: 'api/project/keyArea/selectMonthAreaEvent',
+    method: 'get',
+    params
+  })
+}
+
+  

src/api/construction/index.js

@@ -21,6 +21,14 @@ export function selectMonthNoice() {
     method: 'get',
   })
 }
+//噪声
+export function selectNoiceEvent(params) {
+  return request({
+    url: 'api/project/building/selectNoiceEvent',
+    method: 'get',
+    params,
+  })
+}
 // 扬尘今日
 export function selectDayPm10() {
   return request({
@@ -42,6 +50,14 @@ export function selectMonthPm10() {
     method: 'get',
   })
 }
+//扬尘
+export function selectRaise(params) {
+  return request({
+    url: 'api/project/building/selectRaise',
+    method: 'get',
+    params,
+  })
+}
 // 根据工地名搜索工地
 export function selectByProjectName(params) {
   return request({
@@ -90,19 +106,19 @@ export function selectMonthAll(params) {
   })
 }
 
-//扬尘
+// 查询当天工地视频感知事件
-export function selectRaise(params) {
+export function selectDayVideo(params) {
   return request({
-    url: 'api/project/building/selectRaise',
+    url: 'api/project/building/selectByEvent',
     method: 'get',
     params,
   })
 }
 
-//噪声
+// 查询全部工地视频感知事件
-export function selectNoiceEvent(params) {
+export function selectAllVideo(params) {
   return request({
-    url: 'api/project/building/selectNoiceEvent',
+    url: 'api/project/building/selectByAllEvent',
     method: 'get',
     params,
   })
@@ -150,4 +166,103 @@ export function selectByDayRoadData(params) {
   })
 }
 
+// 数据统计--查询七天扬尘事件
+export function selectByWeekNaise(params) {
+  return request({
+    url: 'api/project/building/selectByWeekNaise',
+    method: 'get',
+    params,
+  })
+}
+// 数据统计--查询30天扬尘事件
+export function selectByMonthNaise(params) {
+  return request({
+    url: 'api/project/building/selectByMonthNaise',
+    method: 'get',
+    params,
+  })
+}
+
+// 数据统计--查询七天噪声事件
+export function selectByWeekNoice(params) {
+  return request({
+    url: 'api/project/building/selectByWeekNoice',
+    method: 'get',
+    params,
+  })
+}
+// 数据统计--查询30天噪声事件
+export function selectByMonthNoice(params) {
+  return request({
+    url: 'api/project/building/selectByMonthNoice',
+    method: 'get',
+    params,
+  })
+}
+
+// 数据统计--查询七天视频事件
+export function selectByWeekEvent(params) {
+  return request({
+    url: 'api/project/building/selectByWeekEvent',
+    method: 'get',
+    params,
+  })
+}
+// 数据统计--查询30天视频事件
+export function selectByMonthEvent(params) {
+  return request({
+    url: 'api/project/building/selectByMonthEvent',
+    method: 'get',
+    params,
+  })
+}
+
+// 数据统计-视频事件时间趋势
+export function selectMonthCurrentByEvent(params) {
+  return request({
+    url: 'api/project/building/selectMonthCurrentByEvent',
+    method: 'get',
+    params,
+  })
+}
+// 数据统计-物联事件时间趋势
+export function selectMonthCurrentByBuilding(params) {
+  return request({
+    url: 'api/project/building/selectMonthCurrentByBuilding',
+    method: 'get',
+    params,
+  })
+}
+// 数据统计-走航表格数据--全部
+export function selectRoadDataCountEvent(params) {
+  return request({
+    url: 'api/project/building/selectRoadDataCountEvent',
+    method: 'get',
+    params,
+  })
+}
+// 数据统计-走航表格数据--近7天
+export function selectRoadDataWeekEvent(params) {
+  return request({
+    url: 'api/project/building/selectRoadDataWeekEvent',
+    method: 'get',
+    params,
+  })
+}
+// 数据统计-走航表格数据--近30天
+export function selectRoadDataMonthEvent(params) {
+  return request({
+    url: 'api/project/building/selectRoadDataMonthEvent',
+    method: 'get',
+    params,
+  })
+}
+// 数据统计-走航事件时间趋势
+export function selectMonthCurrentByRoadData(params) {
+  return request({
+    url: 'api/project/building/selectMonthCurrentByRoadData',
+    method: 'get',
+    params,
+  })
+}
 

src/supermap/createMarkerPopup.js

@@ -34,6 +34,7 @@ import EventListDetailsPop from '@/views/pages/civilizedCity/components/EventLis
 import SiteListPop from '@/views/pages/construction/components/SiteListPop'
 import WaterPointPop  from '@/views/pages/waterPoints/components/WaterPointPop'
 import SiteRoadPop  from '@/views/pages/construction/components/SiteRoadPop'
+import ImportantAreaPop  from '@/views/pages/area/components/ImportantAreaPop'
 
 
 import bus from "@/views/layout/bus";
@@ -226,6 +227,25 @@ function createSiteRoadPop(feature) {
   })
   return popupDom.initDom()
 }
+// 重点区域弹窗
+function createImportantAreaPop(feature) {
+  bus.$emit('areaCauseAnalysis',feature.data)
+
+  const popupDom = new Dom({
+    template: '<Important-Area-pop :feature="feature"></Important-Area-pop>',
+    data() {
+      return {
+        feature: feature,
+      }
+    },
+    created() {
+    },
+    components: {
+      ImportantAreaPop
+    }
+  })
+  return popupDom.initDom()
+}
 /**
  * 生成专题企业信息通用弹窗Dom
  * @param resourceTitle
@@ -696,4 +716,5 @@ export {
   createSiteListPop,
   createWaterPointPop,
   createSiteRoadPop,
+  createImportantAreaPop
 }

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

@@ -45,7 +45,7 @@
           </div>
         </div>
       </div> -->
-      <el-dropdown trigger="click">
+      <!-- <el-dropdown trigger="click">
         <span class="el-dropdown-link">
           {{ listTypeSelect || '全部'}}<i class="el-icon-arrow-down el-icon--right"></i>
         </span>
@@ -58,7 +58,7 @@
           </el-dropdown-item
           >
         </el-dropdown-menu>
-      </el-dropdown>
+      </el-dropdown> -->
       <div class="event-list" :style="{ 'margin-top': (tabsActiveName == '走航监测'? '60px' :'12px')}">
         <div class="event-details" v-for="item in eventListData" :key="item.index" @click="openDetailsDialog(item)">
           <div class="event-details-title">
@@ -72,20 +72,21 @@
             <p>事件描述:{{ item.eventCnName || ''}}</p>
           </div>
         </div>
-        <el-pagination
+        <!-- <el-pagination
           v-if="total==0"
           background
           layout="prev, pager, next"
           @current-change="pageChange"
-          :page-count="pageCount"
+          :page-size = 4
+          :total="total"
           :current-page="currentPage"
           >
-        </el-pagination>
+        </el-pagination> -->
         <el-pagination
-          v-else
           background
           layout="prev, pager, next"
           @current-change="pageChange"
+          :page-size = 4
           :total="total"
           :current-page="currentPage"
           >
@@ -96,7 +97,7 @@
   </div>
 </template>
 <script>
-import { selectRaise,getAndSaveRecords,selectNoiceEvent } from "@/api/construction/index";
+import { selectByAreaEvent, selectByDayAreaEvent } from "@/api/area";
 import StatisticalAnalysis from "./StatisticalAnalysis.vue";
 import bus from "@/views/layout/bus";
 import {
@@ -118,7 +119,7 @@ export default {
       },
       eventListData: [],
       preTime: "",
-      pageCount: 0,
+      // pageCount: 0,
       total:0,
       currentPage:1,
       roadData:[],
@@ -149,14 +150,15 @@ export default {
         page: 1,
         pageSize: 4,
     };
-    selectEvent(params).then((res) => {
+    selectByAreaEvent(params).then((res) => {
-        this.eventListData = res.data.data.events
+      this.eventListData = res.data.data.events
-        this.pageCount = res.data.data.page
+      this.total = res.data.data.sum
+      this.$parent.allListDataNum = res.data.data.sum;
     });
 
-    selectByTime().then((res)=>{
+    selectByDayAreaEvent().then((res)=>{
-      if(res.data.data){
+      if(res.data.data.sum){
-        this.todayListNum = res.data.data.length
+        this.todayListNum = res.data.data.sum
       }
     })
   },
@@ -187,10 +189,9 @@ export default {
     pageChange(val) {
       this.currentPage = val
       if(this.listTypeSelect == '全部'){
-        selectEvent({ pageSize: 4,page: val,}).then((res) => {
+        selectByAreaEvent({ pageSize: 4,page: val,}).then((res) => {
           this.eventListData = res.data.data.events
-          this.pageCount = res.data.data.page
+          this.total = res.data.data.sum
-          this.total = 0
         });
       } else {
         selectByName({eventNewName: this.listTypeSelect, pageSize: 4,page: val,}).then((res) => {
@@ -198,7 +199,7 @@ export default {
           // console.log(res.data.data)
           this.eventListData = res.data.data.events;
           this.total = res.data.data.sum
-          this.pageCount = 0
+          // this.pageCount = 0
         })
       }
     },
@@ -207,10 +208,9 @@ export default {
       this.currentPage = 1
       this.listTypeSelect = item;
       if(item == '全部'){
-        selectEvent({ pageSize: 4,page: 1,}).then((res) => {
+        selectAllVideo({ pageSize: 4,page: 1,}).then((res) => {
-          this.eventListData = res.data.data.events
+          this.eventListData = res.data.data.data
-          this.pageCount = res.data.data.page
+          this.total = res.data.data.sum
-          this.total = 0
         });
       } else {
         selectByName({eventNewName: item, pageSize: 4,page: 1,}).then((res) => {
@@ -218,7 +218,7 @@ export default {
           // console.log(res.data.data)
           this.eventListData = res.data.data.events;
           this.total = res.data.data.sum
-          this.pageCount = 0
+          // this.pageCount = 0
         })
       }
     },

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

@@ -2,14 +2,31 @@
   <div class="pop-box">
     <div class="title-bg"></div>
     <div class="title">
-      <span>{{ feature.data.projectName || "" }}</span>
+      <span>{{ feature.data.areaName || "" }}</span>
-      <span v-if="feature.data.yjsg=='是'">夜间</span>
     </div>
-    <div class="site-address">{{ feature.data.sgwz || "" }}</div>
+    <div class="site-address">{{ feature.data.location || "" }}</div>
     <div class="site-content">
       <div class="site-content-left">
-        <div class="site-content-left-top">
+        <div>
-          <div class="noise">
+          <div>管理单位：{{ feature.data.management || "" }}</div>
+          <el-tooltip :content="feature.data.about">
+            <div class="left-mid-line" style="text-overflow:ellipsis">景区简介：{{ getAbout(feature.data.about)}}</div>
+          </el-tooltip>
+        </div>
+        <div class="area-content-left-top">
+          <div>
+            <div>当前人数</div>
+            <div>{{ feature.data.allNums || "0" }}人</div>
+          </div>
+          <div>
+            <div>本地人数</div>
+            <div>{{ feature.data.localNums || "0" }}人</div>
+          </div>
+          <div>
+            <div>外地人数</div>
+            <div>{{ feature.data.nonlocalNums || "0" }}人</div>
+          </div>
+          <!-- <div class="noise">
             <img src="../../../../assets/construction/noise.png" alt="">
             <div>
               <p>噪声</p>
@@ -22,7 +39,7 @@
               <p>扬尘</p>
               <p><span>{{ feature.data.pm10 || "" }}</span>ug/m<sup>3</sup> </p>
             </div>
-          </div>
+          </div> -->
         </div>
         <div class="site-content-left-bottom">
           <div class="filter-btn-typeSelect">
@@ -37,7 +54,7 @@
         </div>
       </div>
       <div class="site-content-right">
-        <div
+        <!-- <div
           class="images" 
           v-viewer="{movable: false}"
           style="
@@ -47,6 +64,11 @@
           "
         >
           <img @click="show" style="width:100%;height:100%;" :src="feature.data.picUrl||''" alt="">
+        </div> -->
+        <div class="images img-container">
+          <!-- <el-image v-if="feature.data.picUrl && feature.data.picUrl.length" style="width:100%;height:100%;" :src="feature.data.picUrl[0]" :preview-src-list="feature.data.picUrl" alt="" /> -->
+          <el-image v-if="feature.data.picUrl && feature.data.picUrl.length" style="width:100%;height:100%;" :src="feature.data.picUrl" :preview-src-list="[feature.data.picUrl]" alt="" />
+          <span v-else>暂无图片</span>
         </div>
         <div class="video-table">
           <h4>周边监控</h4>
@@ -90,7 +112,6 @@ export default {
     },
   },
   mounted() {
-    console.log(this.feature);
     selectWeekPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
       console.log(res)
     })
@@ -116,7 +137,15 @@ export default {
     //   console.log(data)
     //   bus.$emit("mainClick", data);
     // },
-
+    getAbout(content) {
+      if(!content) {
+        return '暂无'
+      } else if(content.length < 40) {
+        return content
+      } else {
+        return content.substring(0, 40) + '...'
+      }
+    },
     typeSelect(item) {
       this.filterButton.typeSelectActive = item
       this.initCharts()
@@ -147,7 +176,7 @@ export default {
         yAxis: [
           {
             type: 'value',
-            name: 'dB',
+            name: '人',
             nameTextStyle: {
               color: 'rgba(255, 255, 255,.8)'
             },
@@ -170,7 +199,7 @@ export default {
           },
           {
             type: 'value',
-            name: 'ug/m³',
+            name: '人',
             nameTextStyle: {
               color: 'rgba(255, 255, 255,.8)'
             },
@@ -193,16 +222,16 @@ export default {
           right: '16%',
           top: '12%',
           icon: 'line',
-          data: ['噪声值','扬尘值',],
+          data: ['本地人数','外地人数',],
           textStyle: {
             color: '#fff'
           }
         },
         series: [
           {
-            name: '噪声值',
+            name: '本地人数',
             data: [60, 30, 60, 70, 40, 60, 70],
-            type: 'line',
+            type: 'bar',
             symbol: 'none',
             lineStyle: {
               width: 2,
@@ -222,9 +251,9 @@ export default {
             }
           },
           {
-            name: '扬尘值',
+            name: '外地人数',
             data: [30, 40, 50, 80, 90, 40, 60],
-            type: 'line',
+            type: 'bar',
             symbol: 'none',
             lineStyle: {
               width: 2,
@@ -263,7 +292,7 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 // .leaflet-popup {
 //   width: auto !important;
 // }
@@ -308,7 +337,7 @@ export default {
         }
         
         .site-address {
-          margin: 12px 0;
+          margin: 6px 0;
           padding-left: 20px;
           background: url(../../../../assets/construction/iconAddress.png) no-repeat left center;
           color: rgba(255, 255, 255, .6);
@@ -319,54 +348,24 @@ export default {
           .site-content-left {
             width: 392px;
             margin-right: 29px;
-            .site-content-left-top {
+            .left-mid-line {
+              margin: 6px 0;
+            }
+            .area-content-left-top {
               width: 100%;
-              height: 107px;
+              height: 50px;
-              padding: 24px 0 0 18px;
               background: linear-gradient(0deg, rgba($color: #255287, $alpha: 0) 0, rgba($color: #255287, $alpha: 1) 100%);
               display: flex;
-              .noise {
+              justify-content: space-around;
-                height: 60px;
+              align-items: center;
-                width: 180px;
+              & > div {
-                border-right: 1px solid #2c619c;
+                text-align: center;
-                display: flex;
+                > div:first-child {
-                div {
+                  color: #1ffefd;
-                  margin-left: 16px;
-                  font-size: 16px;
-                  color: #fff;
-                  p {
-                    margin: 2px;
-                  }
-                  span {
-                    color: #1ffefd;
-                    font-size: 24px;
-                  }
-                  p:nth-child(2) {
-                    color: rgba(255, 255, 255,.6)
-                  }
                 }
-              }
+                > div:last-child {
-              .raise-dust {
+                  color: rgba(255, 255, 255,.6);
-                margin-left: 20px;
+                  font-size: 14px;
-                display: flex;
-                img {
-                  width: 60px;
-                  height: 60px;
-                }
-                div {
-                  margin-left: 16px;
-                  font-size: 16px;
-                  color: #fff;
-                  p {
-                    margin: 2px;
-                  }
-                  span {
-                    color: #1ffefd;
-                    font-size: 24px;
-                  }
-                  p:nth-child(2) {
-                    color: rgba(255, 255, 255,.6)
-                  }
                 }
               }
             }
@@ -398,6 +397,14 @@ export default {
           }
           .site-content-right {
             width: 280px;
+            .img-container {
+              width: 280px;
+              height: 158px;
+              cursor: pointer;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            }
             .video-table {
               margin-top: 20px;
               h4 {
@@ -409,6 +416,7 @@ export default {
                 .el-table__body-wrapper{
                   height: 90px;
                   overflow-y: auto;
+                  background: #18304c;
                   &::-webkit-scrollbar {
                   width: 8px;
                   background-color: #10335e;

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

@@ -5,13 +5,13 @@
     <div class="eventData">
       <div style="display: flex;justify-content: space-between">
         <el-input
-          placeholder="请输入工地名称"
+          placeholder="请输入区域名称"
           prefix-icon="el-icon-search"
           @input="searchSite"
           v-model="searchValue"
         >
         </el-input>
-        <el-select v-model="selectValue" placeholder="全部区市" @change="fliterSiteByArea">
+        <el-select v-model="selectValue" placeholder="全部" @change="fliterSiteByArea">
           <el-option
             v-for="item in options"
             :key="item.value"
@@ -53,10 +53,12 @@
 import bus from "@/views/layout/bus";
 import {
   selectKeyAreaList,
+  selectKeyArea,
   selectByAreaName,
+  selectByLikeName
 } from "@/api/area";
 import { gcjLL2wgs84LL } from "@/utils/coordinateSystemTransform";
-
+import { createImportantAreaPop } from "@/supermap/createMarkerPopup";
 
 export default {
   data() {
@@ -74,67 +76,108 @@ export default {
 
       options: [
         {
-          value: '公园广场',
+          value: "全部",
+          label: '全部'
+        },{
+          value: "公园广场",
           label: '公园广场'
         },{
-          value: '商业街区',
+          value: "商业街区",
           label: '商业街区'
         }, {
-          value: '景区景点',
+          value: "景区景点",
           label: '景区景点'
         }, {
-          value: '海水浴场',
+          value: "海水浴场",
           label: '海水浴场'
         }, {
-          value: '窗口单位',
+          value: "窗口单位",
           label: '窗口单位'
         }, 
       ],
-      selectValue: '公园广场',
+      selectValue: "全部",
+      siteDataAll: []
     };
   },
   mounted() {
-    selectKeyAreaList({type:"公园广场"}).then((res) => {
+    let params = {
-      console.log(res.data.data)
+      type1: "'公园广场','窗口单位'",
+      type2: "'景区景点','海水浴场'",
+      type3: "'商业街区'"
+    }
+    selectKeyAreaList(params).then((res) => {
+      this.siteDataAll = res.data.data
       this.siteData = res.data.data
     })
   },
   methods: {
-    
-    
-
     searchSite() {
-      if (this.searchValue == "") {
+      if (!this.searchValue && this.selectValue !== '全部') {
+         selectKeyArea({ type: this.selectValue }).then((res) => {
+          this.siteData = res.data.data
+        })
+      } else if (!this.searchValue) {
         this.siteData = this.siteDataAll;
-      } else {
+      }else {
         const params = {
-          projectName: this.searchValue,
+          areaName: this.searchValue,
         };
-        // selectByProjectName(params).then((res) => {
+        selectByLikeName(params).then((res) => {
-        //   this.siteData = res.data.data
+          this.siteData = res.data.data
-        // });
+        });
       }
     },
 
     fliterSiteByArea(val) {
-      selectKeyAreaList({type:val}).then((res) => {
+      if(val === '全部') {
-        this.siteData = res.data.data
+        let params = {
-      })
+          type1: "'公园广场','窗口单位'",
+          type2: "'景区景点','海水浴场'",
+          type3: "'商业街区'"
+        }
+        selectKeyAreaList(params).then((res) => {
+          this.siteData = res.data.data
+        })
+      } else {
+        selectKeyArea({ type: val}).then((res) => {
+          this.siteData = res.data.data
+        })
+      }
+      
     },
     // 行点击
     analyse(row) {
       // bus.$emit("openCauseAnalysis", row);
-      this.$parent.hiMapFun.removerPolygon()
+      if(row.latitude && row.longitude) {
-      selectByAreaName({areaName:row.areaName}).then((res) => {
+        this.$parent.hiMapFun.removerPolygon()
+        this.$parent.removeRoadCauseAnalysis()
+        this.$parent.hiMapFun.removeLayerByLayerName("roadPoint");
+        this.$parent.hiMap.mapObj.map.flyTo({ lat: row.latitude, lng: row.longitude });
+        let dataEvent = [{
+            latLng: { lat: row.latitude, lng: row.longitude },
+            data: row,
+            type: "site",
+        }]
+        this.$parent.hiMapFun.addPointsToMap(
+          dataEvent,
+          "poi-red.png",
+          "roadPoint",
+          createImportantAreaPop
+        );
+      } else {
+        selectByAreaName({areaName:row.areaName}).then((res) => {
         if(res.data.data){
           let areaLatLng = []
           res.data.data.forEach((item) => {
             let lonLat = gcjLL2wgs84LL(item.longitude, item.latitude);
             areaLatLng.push([lonLat[1],lonLat[0]])
           })
+          this.$parent.hiMapFun.removerPolygon()
+          this.$parent.removeRoadCauseAnalysis()
           this.$parent.hiMapFun.addAreaToMap(areaLatLng)
         }
       })
+      }  
     },
     // 关闭基本信息窗口
     informationClose() {

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

@@ -28,7 +28,7 @@
     </div> -->
     <div key="video" v-if="tabsActiveName == '视频感知事件'">
       <div class="event-num">
-        <span>000</span>件
+        <span> {{ totalEventCount }}</span>件
       </div>
       <div class="line"></div>
       <div id="event-type-chart"></div>
@@ -75,9 +75,11 @@
 
 <script>
 import * as echarts from 'echarts'
+import { selectMonthAreaEvent, selectByAreaEvent } from "@/api/area";
  export default {
    data () {
      return {
+       totalEventCount: '000',
         tabsButton: ["视频感知事件","出租车走航监测"],
         tabsActiveName: "视频感知事件",
         filterButton:{
@@ -109,9 +111,10 @@ import * as echarts from 'echarts'
    mounted() {
     
       this.$nextTick( () => {
+        this.getVideoData()
         this.initEventTypeCharts()
         this.initEventStateCharts()
-        this.initEventTimeCharts()
+        // this.initEventTimeCharts()
         // this.initRoadTimeCharts()
       })
     
@@ -136,6 +139,28 @@ import * as echarts from 'echarts'
       this.filterButton.typeSelectActive = item
     },
 
+    getVideoData() {
+      this.totalEventCount = 0;
+      const params = {
+        page: 1,
+        pageSize: 4,
+      };
+      selectByAreaEvent(params).then((res) => {
+        this.totalEventCount = res.data.data.sum
+      });
+      selectMonthAreaEvent().then((res) => {
+        if(res.data.data && res.data.data.length) {
+          let xValue = []
+          let yValue = []
+          res.data.data.forEach(item => {
+            xValue.push(item.pushTime)
+            yValue.push(item.number)
+          });
+          this.initEventTimeCharts(xValue, yValue)
+        }
+      });
+    },
+    
     closeDialog(){
       this.$emit('closeDialog')
     },
@@ -346,10 +371,10 @@ import * as echarts from 'echarts'
       )
       eventState.setOption(option)
     },
-    initEventTimeCharts () {
+    initEventTimeCharts (xValue, yValue) {
       const option = {
          title: {
-          text: "事件时间趋势",
+          text: "事件时间趋势(近30天)",
           left: "left",
           top: 15,
           textStyle: {
@@ -377,7 +402,7 @@ import * as echarts from 'echarts'
             show: false,
           },
           boundaryGap: ['2%', '2%'],
-          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
+          data: xValue
         },
         yAxis: {
           type: 'value',
@@ -404,7 +429,7 @@ import * as echarts from 'echarts'
         },
         series: [
           {
-            data: [30, 40, 50, 80, 90, 40, 60, 44, 50, 80, 90, 70],
+            data: yValue,
             type: 'line',
             symbol: 'none',
             areaStyle: {

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

@@ -37,8 +37,8 @@
       </div>
 
       <div class="eventNum">
-        累计事件数量
+        累计事件数量(2022.05.25-至今)
-        <p><span>1236</span>件</p>
+        <p><span>{{ allListDataNum }}</span>件</p>
       </div>
 
       <!-- 事件感知 -->
@@ -81,6 +81,10 @@
           </el-radio-group>
         </div>
       </div>
+      <video-play
+        v-if="openVideo"
+        :channel-id="channelCode"
+      ></video-play>
     </div>
   </div>
 </template>
@@ -91,11 +95,13 @@ import TiledMap from "./components/tiledMap";
 import { searchCamera } from "@/api/videoSurveillance/index";
 import bus from "@/views/layout/bus";
 import complaintEvent from "./components/ComplaintEvent";
+import VideoPlay from './components/VideoPlay'
 import VideoList from "./components/VideoList";
 import SiteList from "./components/SiteList";
 import { selectByJdWd } from "@/api/construction/index";
-import { createSiteListPop,createCameraDetailsPop,createEventListDetailsPop } from "@/supermap/createMarkerPopup";
+import { createSiteListPop,createCameraDetailsPop,createEventListDetailsPop,createImportantAreaPop } from "@/supermap/createMarkerPopup";
 import { listPassengerFlow, selectByTime, } from "@/api/civilizedCity.js";
+import { selectByAreaEvent, selectKeyArea } from "@/api/area";
 
 export default {
   data() {
@@ -114,8 +120,9 @@ export default {
       thermodynamicPeopleAll: [],
       thermodynamicPeopleLocal: [],
       thermodynamicPeopleNoLocal: [],
-
+      allListDataNum: '',
-    
+      openVideo: false,
+      channelCode: [],
     };
   },
   components: {
@@ -123,6 +130,7 @@ export default {
     complaintEvent,
     VideoList,
     SiteList,
+    VideoPlay
   },
   created() {},
   mounted() {
@@ -132,8 +140,11 @@ export default {
       this.hiMapFun
     );
 
-  
+    bus.$off('openCurrentVideoSurveillance')
-
+    bus.$on('openCurrentVideoSurveillance', (channelCode) => {
+      this.openVideo = true
+      this.channelCode.unshift(channelCode)
+    })
     // 根据经纬度查询半径内所有的工地
     bus.$off("openCauseAnalysis");
     bus.$on("openCauseAnalysis", (row) => {
@@ -173,12 +184,6 @@ export default {
     })
 
     this.thermodynamic()
-
-    selectByTime().then((res)=>{
-      if(res.data.data){
-        this.todayListNum = res.data.data.length
-      }
-    })
    },
   methods: {
     querySearchAsync(queryString, cb) {
@@ -281,16 +286,14 @@ export default {
     },
 
     layerHandleChange(item) {
+      console.log('this.changeLayerBtnGroup---', this.changeLayerBtnGroup)
       if (this.changeLayerBtnGroup.indexOf(item) !== -1) {
         switch (item) {
-          case "道路":
-            this.roadOnMap(this.$refs.complaintEventRef.roadData);
-            break;
           case "AI事件":
             this.hiMapFun.removeLayerByLayerName('EventListDetail')
-            selectByTime().then((res) => {
+            selectByAreaEvent().then((res) => {
               const dataEvent = [];
-              res.data.data.forEach((item) => {
+              res.data.data.events.forEach((item) => {
                 dataEvent.push(
                   {
                     latLng: { lat: item.latitude, lng: item.longitude },
@@ -305,16 +308,44 @@ export default {
           case "视频监控":
             this.addResourceTomap('全部',this.$refs.videoListRef.cameraAllData)
             break;
+          case "公园广场":
+          case "商业街区":
+          case "景区景点":
+          case "海水浴场":
+          case "窗口单位":
+            this.hiMapFun.removeLayerByLayerName(item)
+            selectKeyArea({ type: item}).then((res) => {
+              const dataEvent = [];
+              console.log('res.data.data----', res.data.data)
+              res.data.data.forEach((item) => {
+                dataEvent.push(
+                  {
+                    latLng: { lat: item.latitude, lng: item.longitude },
+                    data: item,
+                    type: "site",
+                  }
+                )
+              })
+              this.hiMapFun.addPointsToMap(
+                dataEvent,
+                "poi-red.png",
+                item,
+                createImportantAreaPop
+              );
+            })
+            break;
           default:
             break;
         }
       } else {
         switch (item) {
-          case "道路":
+          case "公园广场":
-            this.hiMapFun.removerPolyline();
+          case "商业街区":
-            break;
+          case "景区景点":
+          case "海水浴场":
+          case "窗口单位":
           case "AI事件":
-            this.hiMapFun.removeLayerByLayerName('EventListDetail')
+            this.hiMapFun.removeLayerByLayerName(item)
             break;
           case "视频监控":
             this.hiMapFun.removeLayerByLayerName('全部')
@@ -414,6 +445,12 @@ export default {
         
       }
     },
+    removeRoadCauseAnalysis () {
+      this.hiMapFun.removerPolygon()
+      this.hiMapFun.removeLayerByLayerName('roadPoint')
+      this.hiMapFun.removeLayerByLayerName('EventListDetail')
+      this.hiMapFun.removeLayerByLayerName('全部')
+    }
   },
   beforeDestroy() {},
 };

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

@@ -24,7 +24,7 @@
         </div>
         <div class="statisticalAnalysisBtn" @click="openStatisticalAnalysis"> 统计分析 ></div>
       </div>
-      <div class="filter-btn-box" v-show="tabsActiveName !== '走航监测'">
+      <div class="filter-btn-box" v-show="tabsActiveName !== '走航监测' && tabsActiveName !== '视频感知'">
         <div class="filter-btn-typeSelect">
           <div  class="typeSelect-btn" 
                 v-for="item in filterButton.typeSelect" 
@@ -60,6 +60,22 @@
             </div>
           </div>
         </div>
+        <div v-show="tabsActiveName == '视频感知'">
+          <div class="event-details special-video-height" v-for="item in eventListData" :key="item.index" @click="openVideoDialog(item)">
+            <div class="event-details-title">
+              <span>{{item.eventNewName||''}}</span>
+              <span>{{item.captureTime||''}}</span>
+              <!-- <span>未派发</span> -->
+            </div>
+            <div class="event-details-des">
+              <h5>事件地址：{{item.district||''}}</h5>
+              <p>摄像头名称：{{item.cameraName||''}}</p>
+              <p>事件描述：{{item.eventCnName||''}}</p>
+              <!-- <p>简述简述简述简述简述简述简述简述</p> -->
+              <!-- <p>{{filterButton.typeSelectActive == '工地扬尘'? 'pm10' : '噪声值'}}:{{filterButton.typeSelectActive == '工地扬尘'? item.pm10 :item.noice ||''}}</p> -->
+            </div>
+          </div>
+        </div>
         <div v-show="tabsActiveName == '物联感知'">
           <div class="event-details" v-for="item in eventListData" :key="item.index" @click="openSiteDialog(item)">
             <div class="event-details-title">
@@ -89,10 +105,10 @@
   </div>
 </template>
 <script>
-import { selectRaise,getAndSaveRecords,selectNoiceEvent } from "@/api/construction/index";
+import { selectAllVideo, selectRaise,getAndSaveRecords,selectNoiceEvent } from "@/api/construction/index";
 import StatisticalAnalysis from "./StatisticalAnalysis.vue";
 import {
-  createSiteRoadPop,
+  createSiteRoadPop,createEventListDetailsPop
 } from "@/supermap/createMarkerPopup";
 import bus from "@/views/layout/bus";
 import {
@@ -146,7 +162,9 @@ export default {
     this.getRoadData()
     this.selectRoadData()
 
-    
+    selectAllVideo({pageSize: 5,page: 1,}).then((res) => {
+      this.$parent.allListDataNum += res.data.data.sum;
+    });
     selectRaise({pageSize: 5,page: 1,}).then((res) => {
       this.$parent.allListDataNum += res.data.data.sum;
     });
@@ -161,11 +179,11 @@ export default {
   },
   methods: {
     tabHandleClick(item) {
+      this.$parent.removeRoadCauseAnalysis()
       this.tabsActiveName = item
       this.currentPage = 1
       if(item == '视频感知'){
-        this.filterButton.typeSelect = []
+        this.selectAllVideo()
-        
       }
       if(item == '物联感知'){
         this.filterButton.typeSelect = ['工地扬尘','工地噪声']
@@ -211,7 +229,17 @@ export default {
         this.total = res.data.data.sum
       });
     },
-
+    //视频感知
+    selectAllVideo(val) {
+      let params = {
+        pageSize: 4,
+        page: val || 1,
+      }
+      selectAllVideo(params).then((res) => {
+        this.eventListData = res.data.data.data;
+        this.total = res.data.data.sum;
+      });
+    },
     //物联感知  扬尘 
     selectRaise() {
       let params = {
@@ -238,7 +266,7 @@ export default {
     //分页
     pageChange(val) {
       if(this.tabsActiveName == '视频感知') {
-        
+        this.selectAllVideo(val)
       } else if(this.tabsActiveName == '物联感知') {
         if(this.filterButton.typeSelectActive == '工地扬尘'){
           let params = {
@@ -288,7 +316,25 @@ export default {
       );
 
     },
-
+    openVideoDialog(data) {
+      const EventListDetail = [
+        {
+          latLng: { lat: data.latitude, lng: data.longitude },
+          data: data,
+          type: 'eventList',
+          from: ''
+        }
+      ]
+      this.$parent.hiMap.mapObj.map.flyTo({ lat: data.latitude, lng: data.longitude })
+      this.$parent.hiMapFun.openPopupVideoSurveillance(EventListDetail[0])
+      // this.$parent.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
+      this.$parent.hiMapFun.addPointsToMap(
+        EventListDetail,
+        'poi-event.png',
+        'videoNotice',
+        createEventListDetailsPop
+      )
+    },
     openSiteDialog(data) {
       bus.$emit("openCauseAnalysis", data);
     },
@@ -561,6 +607,9 @@ export default {
           }
         }
       }
+      .special-video-height {
+        height: 130px;
+      }
 
       ::v-deep .el-pagination {
         position: absolute;

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

@@ -20,10 +20,20 @@
           </el-option>
         </el-select>
       </div>
+      <div class="new-condition-line">
+        <el-select v-model="selectNight" placeholder="夜间施工许可" @change="fliterSiteByNight">
+          <el-option
+            v-for="item in nightOption"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </div>
       <div class="eventNoise">
         <el-table
           :data="siteData"
-          height='356'
+          height='300'
           @row-click="analyse"
           :cell-style="{
             color: '#fff',
@@ -49,7 +59,7 @@
               {{scope.row.pm10 + 'mg/m³'}}
             </template>
           </el-table-column>
-          <el-table-column width="88" prop="yjsg" label="夜间施工">
+          <el-table-column prop="yjsg" label="夜间施工许可">
             <template slot-scope="scope">
               <img v-if="scope.row.yjsg == '是'" src="../../../../assets/construction/night.png" alt="">
               <img v-else src="../../../../assets/construction/nonight.png" alt="">
@@ -120,7 +130,20 @@ export default {
           label: '莱西市'
         }
       ],
-      selectValue: ''
+      nightOption: [
+        {
+          value: '全部',
+          label: '全部'
+        },{
+          value: '是',
+          label: '是'
+        }, {
+          value: '否',
+          label: '否'
+        }
+      ],
+      selectValue: '', // 选择的区市
+      selectNight: '' // 选择的夜间施工许可
     };
   },
   mounted() {
@@ -179,6 +202,14 @@ export default {
         this.siteData = this.siteDataAll.filter((item) => item.ssdq == val)
       }
     },
+    // 根据是否夜间施工自查询
+    fliterSiteByNight(val) {
+      if (val == '全部') {
+        this.siteData = this.siteDataAll;
+      } else {
+        this.siteData = this.siteDataAll.filter((item) => item.yjsg == val)
+      }
+    },
     // 行点击
     analyse(row) {
       bus.$emit("openCauseAnalysis", row);
@@ -265,6 +296,17 @@ export default {
         width: 161px;
       }
     }
+    .new-condition-line {
+      display: flex;
+      justify-content: space-between;
+      margin-top:16px;
+      .el-select {
+        width: 200px;
+        .el-input {
+          width: 200px;
+        }
+      }
+    }
   }
 
   ::v-deep .eventNoise {

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

@@ -38,17 +38,15 @@
         </div>
       </div>
       <div class="site-content-right">
-        <div
+        <div class="images img-container">
-          class="images" 
+          <!-- <el-image v-if="feature.data.picUrl && feature.data.picUrl.length" style="width:100%;height:100%;" :src="feature.data.picUrl[0]" :preview-src-list="feature.data.picUrl" alt="" /> -->
-          v-viewer="{movable: false}"
+          <el-image v-if="feature.data.picUrl && feature.data.picUrl.length" style="width:100%;height:100%;" :src="feature.data.picUrl" :preview-src-list="[feature.data.picUrl]" alt="" />
-          style="
+          <span v-else>暂无图片</span>
-            width: 280px;
-            height: 158px;
-            cursor: pointer;
-          "
-        >
-          <img @click="show" style="width:100%;height:100%;" :src="feature.data.picUrl||''" alt="">
         </div>
+        <!-- <el-image-viewer
+          v-if="imgViewerVisible"
+          :url-list=
+        /> -->
         <div class="video-table">
           <h4>周边监控</h4>
           <el-table
@@ -130,6 +128,10 @@ export default {
         pm10:[],
         noice:[],
       },
+      imgList: [
+        'http://15.72.183.90:7009/images/101_37020201581314000514.jpg',
+        'http://15.72.183.90:7009/components/osg-default/_/video_event_panoramic/20220809-aa34ff49-000a580ae0030e-000f1990-0005b818'
+      ],
       monthData:{
         time:[],
         pm10:[],
@@ -439,6 +441,14 @@ export default {
           }
           .site-content-right {
             width: 280px;
+            .img-container {
+              width: 280px;
+              height: 158px;
+              cursor: pointer;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            }
             .video-table {
               margin-top: 10px;
               h4 {

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

@@ -22,13 +22,13 @@
               v-for="item in filterButton.typeSelect" 
               :key="item" 
               :class="filterButton.typeSelectActive == item ? 'typeSelect-btn-active':''"
-              @click="typeSelect(item)"
+              @click="handleTypeSelect(item)"
               >{{item}}</div>
       </div>
     </div>
     <div key="video" v-if="tabsActiveName == '视频感知'">
       <div class="event-num">
-        <span>000</span>件
+        <span>{{ eventTotal }}</span>件
       </div>
       <div class="line"></div>
       <div id="event-type-chart"></div>
@@ -39,7 +39,7 @@
     </div>
     <div key="video" v-if="tabsActiveName == '物联感知'">
       <div class="event-num">
-        <span>000</span>件
+        <span>{{ eventTotal }}</span>件
       </div>
       <div class="line"></div>
       <div id="event-type-chart"></div>
@@ -50,80 +50,69 @@
     </div>
     <div key="road" v-if="tabsActiveName == '走航监测'">
       <div class="event-num">
-        <span>000</span>件
+        <span>{{ eventTotal }}</span>件
       </div>
       <div class="line"></div>
-      <div id="road-time-chart"></div>
-      <div class="line"></div>
       <el-table
-          :data="PollutionRoad"
+        :data="PollutionRoad"
-          height='356'
+        height='356'
-          :cell-style="{
+        :cell-style="{
-            color: '#fff',
+          color: '#fff',
-            cursor: 'pointer',
+          cursor: 'pointer',
-            'background-color': '#18304c',
+          'background-color': '#18304c',
-          }"
+        }"
-          :header-cell-style="{
+        :header-cell-style="{
-            color: '#1ffefd',
+          color: '#1ffefd',
-            'background-color': '#2b4b7a',
+          'background-color': '#2b4b7a',
-          }"
+        }"
-          style="background: transparent"
+        style="background: transparent"
-        >
+      >
-          <el-table-column label="Top" width="46" type="index">
+        <el-table-column label="Top" width="46" type="index">
-          </el-table-column>
+        </el-table-column>
-          <el-table-column  label="道路" prop="roadName" show-overflow-tooltip>
+        <el-table-column  label="道路" prop="roadName" show-overflow-tooltip>
-          </el-table-column>
+        </el-table-column>
-          <el-table-column width="81" prop="start" label="路段开始" show-overflow-tooltip>
+        <el-table-column width="81" prop="start" label="路段开始" show-overflow-tooltip>
-          </el-table-column>
+        </el-table-column>
-          <el-table-column width="81" prop="end" label="路段结束" show-overflow-tooltip>
+        <el-table-column width="81" prop="end" label="路段结束" show-overflow-tooltip>
-          </el-table-column>
+        </el-table-column>
-          <el-table-column width="86" prop="times" label="告警次数">
+        <el-table-column width="86" prop="number" label="告警次数">
-          </el-table-column>
+        </el-table-column>
       </el-table>
+      <div class="line"></div>
+      <div id="event-time-chart"></div>
     </div>
   </div>
  </div>
 </template>
 
 <script>
+import { selectAllVideo, selectByWeekEvent, selectByMonthEvent, selectByWeekNaise, selectByMonthNaise, selectRaise, selectByWeekNoice, selectByMonthNoice, selectNoiceEvent, selectMonthCurrentByEvent, selectMonthCurrentByBuilding, selectRoadDataCountEvent,selectRoadDataWeekEvent, selectRoadDataMonthEvent, selectMonthCurrentByRoadData } from "@/api/construction/index";
+import { selectRoadData } from "@/api/road";
 import * as echarts from 'echarts'
  export default {
    data () {
      return {
+        eventTotal: '000',
         tabsButton: ["视频感知","物联感知","走航监测"],
         tabsActiveName: "视频感知",
         filterButton:{
           typeSelect:['全部','近7天','近30天'],
           typeSelectActive:'全部',
         },
-        PollutionRoad:[
+        // 走航检测 表格
-          {
+        PollutionRoad:[],
-            roadName: '某某路',
+        // 柱状图
-            start: '开始',
+        barLabelArr: [],
-            end: '结束',
+        barValueArr: []
-            times: '10',
-          }, 
-          {
-            roadName: '某某路',
-            start: '开始',
-            end: '结束',
-            times: '10',
-          },
-          {
-            roadName: '某某路',
-            start: '开始',
-            end: '结束',
-            times: '10',
-          },
-        ]
      }
    },
    mounted() {
     
       this.$nextTick( () => {
-        this.initEventTypeCharts()
+        // this.initEventTypeCharts()
         this.initEventStateCharts()
-        this.initEventTimeCharts()
+        // this.initEventTimeCharts()
+        this.getVideoData()
         // this.initRoadTimeCharts()
       })
     
@@ -133,26 +122,147 @@ import * as echarts from 'echarts'
       this.tabsActiveName = item
       if(item == '视频感知') {
         this.$nextTick( () => {
-          this.initEventTypeCharts()
+          this.getVideoData()
+          // this.initEventTypeCharts()
           this.initEventStateCharts()
-          this.initEventTimeCharts()
+          // this.initEventTimeCharts()
         })
-      }
+      } else if(item == '物联感知') {
-      if(item == '走航监测') {
         this.$nextTick( () => {
-          this.initRoadTimeCharts()
+          this.getDeviceData()
+          // this.initEventTypeCharts()
+          this.initEventStateCharts()
+          // this.initEventTimeCharts()
+        })
+      } else if(item == '走航监测') {
+        this.$nextTick( () => {
+          this.getRoadData()
+          // this.initRoadTimeCharts()
         })
       }
     },
-    typeSelect(item) {
+    handleTypeSelect(item) {
       this.filterButton.typeSelectActive = item
+      if(this.tabsActiveName == '物联感知') {
+        this.getDeviceData()
+      } else if (this.tabsActiveName == '视频感知') {
+        this.getVideoData()
+      } else if (this.tabsActiveName == '走航监测') {
+        this.getRoadData()
+      }
     },
     
     closeDialog(){
       this.$emit('closeDialog')
     },
-
+    // 查询视频数据
-    initEventTypeCharts () {
+    getVideoData() {
+      let raiseType = selectAllVideo
+      if(this.filterButton.typeSelectActive === '近7天') {
+        raiseType = selectByWeekEvent
+      } else if (this.filterButton.typeSelectActive === '近30天') {
+        raiseType = selectByMonthEvent
+      }
+      let params = {
+        pageSize: 5,
+        page: 1,
+      }
+      this.eventTotal = 0
+      this.barLabelArr = []
+      this.barValueArr = []
+      raiseType(params).then((res) => {
+        this.eventTotal = res.data.data.sum;
+        this.barLabelArr.push('渣土车发现')
+        this.barValueArr.push(res.data.data.sum)
+        this.initEventTypeCharts()
+      });
+      selectMonthCurrentByEvent().then((res) => {
+        if(res.data.data && res.data.data.length) {
+          let xValue = []
+          let yValue = []
+          res.data.data.forEach(item => {
+            xValue.push(item.pushTime)
+            yValue.push(item.number)
+          });
+          this.initEventTimeCharts(xValue, yValue)
+        }
+      });
+    },
+    // 查询物联数据
+    getDeviceData() {
+      let raiseType = selectRaise
+      let noiceType = selectNoiceEvent
+      if(this.filterButton.typeSelectActive === '近7天') {
+        raiseType = selectByWeekNaise
+        noiceType = selectByWeekNoice
+      } else if (this.filterButton.typeSelectActive === '近30天') {
+        raiseType = selectByMonthNaise
+        noiceType = selectByMonthNoice
+      }
+      let params = {
+        pageSize: 5,
+        page: 1,
+      }
+      this.eventTotal = 0
+      this.barLabelArr = []
+      this.barValueArr = []
+      raiseType(params).then((res) => {
+        this.eventTotal += res.data.data.sum;
+        this.barLabelArr.push('工地扬尘')
+        this.barValueArr.push(res.data.data.sum)
+        this.initEventTypeCharts('device')
+      });
+      noiceType(params).then((res) => {
+        this.eventTotal += res.data.data.sum;
+        this.barLabelArr.push('工地噪声')
+        this.barValueArr.push(res.data.data.sum)
+        this.initEventTypeCharts('device')
+      });
+      selectMonthCurrentByBuilding().then((res) => {
+        if(res.data.data && res.data.data.length) {
+          let xValue = []
+          let yValue = []
+          res.data.data.forEach(item => {
+            xValue.push(item.pushTime)
+            yValue.push(item.number)
+          });
+          this.initEventTimeCharts(xValue, yValue)
+        }
+      });
+    },
+    // 查询走航数据
+    getRoadData() {
+      let raiseType = selectRoadDataCountEvent
+      // let roadType = selectRoadData
+      if(this.filterButton.typeSelectActive === '近7天') {
+        raiseType = selectRoadDataWeekEvent
+      } else if (this.filterButton.typeSelectActive === '近30天') {
+        raiseType = selectRoadDataMonthEvent
+      }
+      this.eventTotal = 0
+      // 表格数据
+      raiseType().then((res) => {
+        if(res.data.data.roadDataDtos && res.data.data.roadDataDtos.length) {
+          this.PollutionRoad = res.data.data.roadDataDtos.slice(0, 5)
+          this.eventTotal = res.data.data.sum
+        }
+      });
+      selectMonthCurrentByRoadData().then((res) => {
+        if(res.data.data && res.data.data.length) {
+          let xValue = []
+          let yValue = []
+          res.data.data.forEach(item => {
+            xValue.push(item.pushTime)
+            yValue.push(item.number)
+          });
+          this.initEventTimeCharts(xValue, yValue)
+        }
+      });
+    },
+    initEventTypeCharts (type) {
+      if(type === 'device' && this.barLabelArr.length < 2) {
+        return
+      }
       const option = {
          title: {
           text: "事件类型分布",
@@ -169,7 +279,7 @@ import * as echarts from 'echarts'
         },
         xAxis: {
           type: 'category',
-          data: ['非法运土', '工地扬尘', '其他'],
+          data: this.barLabelArr,
           axisLabel: {
             color: '#fff',
             margin: 7,
@@ -189,7 +299,7 @@ import * as echarts from 'echarts'
         },
         series: [
           {
-            data: [120, 200, 150],
+            data: this.barValueArr,
             type: 'bar',
             itemStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
@@ -358,10 +468,10 @@ import * as echarts from 'echarts'
       )
       eventState.setOption(option)
     },
-    initEventTimeCharts () {
+    initEventTimeCharts (xValue, yValue) {
       const option = {
          title: {
-          text: "事件时间趋势",
+          text: "事件时间趋势(近30天)",
           left: "left",
           top: 15,
           textStyle: {
@@ -389,7 +499,7 @@ import * as echarts from 'echarts'
             show: false,
           },
           boundaryGap: ['2%', '2%'],
-          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
+          data: xValue
         },
         yAxis: {
           type: 'value',
@@ -416,7 +526,7 @@ import * as echarts from 'echarts'
         },
         series: [
           {
-            data: [30, 40, 50, 80, 90, 40, 60, 44, 50, 80, 90, 70],
+            data: yValue,
             type: 'line',
             symbol: 'none',
             areaStyle: {
@@ -452,100 +562,6 @@ import * as echarts from 'echarts'
       )
       eventTime.setOption(option)
     },
-    initRoadTimeCharts () {
-      const option = {
-         title: {
-          text: "事件时间趋势",
-          left: "left",
-          top: 15,
-          textStyle: {
-            fontSize: 16,
-            color: "#fff",
-            fontWeight: "normal"
-          },
-        },
-        grid: {
-          top: 80,
-          bottom: 34,
-        },
-        xAxis: {
-          type: 'category',
-          boundaryGap: false,
-          axisLabel: {
-            color: 'rgba(255, 255, 255,0.8)',
-          },
-          axisLine: {
-            lineStyle: {
-              color: '#345a99',
-            }
-          },
-          axisTick: {
-            show: false,
-          },
-          boundaryGap: ['2%', '2%'],
-          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
-        },
-        yAxis: {
-          type: 'value',
-          name: '数量',
-          nameTextStyle: {
-            color: 'rgba(255, 255, 255,0.8)'
-          },
-          axisLabel: {
-            color: 'rgba(255, 255, 255,0.8)',
-          },
-          axisLine: {
-            show: false,
-          },
-          splitLine: {
-            show: false,
-          },
-          splitArea: {
-            interval: '1',
-            show: true,
-            areaStyle: {
-              color: ['#1d3556','#18334c']
-            }
-          }
-        },
-        series: [
-          {
-            data: [30, 40, 50, 80, 90, 40, 60, 44, 50, 80, 90, 70],
-            type: 'line',
-            symbol: 'none',
-            areaStyle: {
-              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                          offset: 0,
-                          color: 'rgba(254, 152, 32, 0)'
-                      }, {
-                          offset: 1,
-                          color: 'rgba(254, 152, 32, 0.7)'
-                      }]),
-            },
-            lineStyle: {
-              width: 2,
-              color: {
-                        type: 'linear',
-                        x: 0,
-                        y: 0,
-                        x2: 0,
-                        y2: 1,
-                        colorStops: [{
-                            offset: 0, color: '#fdd033' // 0% 处的颜色
-                        }, {
-                            offset: 1, color: '#fe9820' // 100% 处的颜色
-                        }],
-                        global: false // 缺省为 false
-                      }
-            }
-          }
-        ]
-      }
-      const roadTime = echarts.init(  
-        document.getElementById('road-time-chart')
-      )
-      roadTime.setOption(option)
-    },
   },
  }
 </script>

src/views/pages/construction/index.vue

@@ -37,7 +37,7 @@
       </div>
 
       <div class="eventNum">
-        累计事件数量
+        累计事件数量(2022.05.25-至今)
         <p><span>{{allListDataNum}}</span>件</p>
       </div>
 
@@ -81,8 +81,8 @@ import bus from '@/views/layout/bus'
 import complaintEvent from './components/ComplaintEvent'
 import VideoList from './components/VideoList'
 import SiteList from './components/SiteList'
-import { selectByJdWd, selectByDayRaise, selectByDayNoice, selectByDayRoadData } from '@/api/construction/index'
+import { selectByJdWd, selectDayVideo, selectByDayRaise, selectByDayNoice, selectByDayRoadData } from '@/api/construction/index'
-import { createSiteListPop, createCameraDetailsPop } from '@/supermap/createMarkerPopup'
+import { createSiteListPop, createCameraDetailsPop, createImportantAreaPop } from '@/supermap/createMarkerPopup'
 
 import VideoPlay from './components/VideoPlay'
 import { selectAllByGps } from '@/api/road'
@@ -119,6 +119,10 @@ export default {
       this.hiMap.mapObj,
       this.hiMapFun
     )
+    this.todayListNum = 0
+    selectDayVideo().then((res) => {
+      this.todayListNum += res.data.data.sum
+    })
 
     selectByDayRaise().then((res) => {
       this.todayListNum += res.data.data.sum
@@ -396,6 +400,7 @@ export default {
       this.hiMapFun.removeLayerByLayerName('videoSurveillance')
       this.hiMapFun.removeLayerByLayerName('constructionSite')
       this.hiMapFun.removeLayerByLayerName('roadPoint')
+      this.hiMapFun.removeLayerByLayerName('videoNotice')
     }
   },
   beforeDestroy () {}

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

@@ -248,7 +248,8 @@ export default {
     const yDate = currentDate.getDate() > 9 ? currentDate.getDate() : '0' + currentDate.getDate()
     this.preTime = currentDate.getFullYear() + '-' + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : '0' + (currentDate.getMonth() + 1)) + '-' + yDate + ' ' + '00:00:00'
     currentDate.setDate(currentDate.getDate() - currentDate.getDay() + 1)
-    this.weekTime = currentDate.getFullYear() + '-' + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : '0' + (currentDate.getMonth() + 1)) + '-' + yDate + ' ' + '00:00:00'
+    // this.weekTime = currentDate.getFullYear() + '-' + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : '0' + (currentDate.getMonth() + 1)) + '-' + yDate + ' ' + '00:00:00'
+    this.weekTime = this.getWeekDate()
   },
   // 生命周期 - 挂载完成（访问DOM元素）
   mounted () {
@@ -305,6 +306,25 @@ export default {
   },
 
   methods: {
+    // 获取本周一日期
+    getWeekDate() {
+      let now = new Date()
+      let nowTime = now.getTime();
+      let day = now.getDay();
+      let oneDayTime = 1000 * 60 * 60 * 24;
+      let mondayTime = nowTime - (day - 1) * oneDayTime;
+      let lw = new Date(mondayTime);
+      let lastY = lw.getFullYear();
+      let lastM = lw.getMonth() + 1;
+      let lastD = lw.getDate();
+      let startData =
+        lastY +
+        "-" +
+        (lastM < 10 ? "0" + lastM : lastM) +
+        "-" +
+        (lastD < 10 ? "0" + lastD : lastD);
+      return startData +  ' ' + '00:00:00'
+    },
     // 道路污染数据  昨日
     async getRoadData () {
       const res = await getRoadData({ dt: this.preTime })

src/views/pages/videoSurveillance/components/CameraDetailsPop.vue

@@ -72,6 +72,7 @@ export default {
   },
   methods: {
     openCurrentVideo(channelCode){
+      console.log('channelCode-----', channelCode)
       bus.$emit('openCurrentVideoSurveillance',channelCode)
       // getStreamByChannelCode({channelCode:channelCode}).then(res => {
       //   let newVideoStream = this.IntelliURLReplaceIP(res.data.data)