update

src/api/construction/index.js

@@ -126,3 +126,28 @@ export function selectWeekPmAndNoice(params) {
   })
 }
 
+export function selectByDayRaise(params) {
+  return request({
+    url: 'api/project/building/selectByDayRaise',
+    method: 'get',
+    params,
+  })
+}
+
+export function selectByDayNoice(params) {
+  return request({
+    url: 'api/project/building/selectByDayNoice',
+    method: 'get',
+    params,
+  })
+}
+
+export function selectByDayRoadData(params) {
+  return request({
+    url: 'api/project/building/selectByDayRoadData',
+    method: 'get',
+    params,
+  })
+}
+
+

src/supermap/createMarkerPopup.js

@@ -35,6 +35,9 @@ 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 bus from "@/views/layout/bus";
+
 /**
  * 生成专题通用弹窗Dom
  * @param responseData
@@ -206,6 +209,8 @@ function creatNucleicAcidMonitoringSites(feature) {
 
 //在建工地走航监测弹窗
 function createSiteRoadPop(feature) {
+  bus.$emit('roadCauseAnalysis',feature.data)
+
   const popupDom = new Dom({
     template: '<Site-Road-pop :feature="feature"></Site-Road-pop>',
     data() {

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

@@ -7,7 +7,7 @@
       <div class="toady-list-content">
         <div class="toady-list-rotate"></div>
         <div class="toady-list-icon"></div>
-        <div class="toady-list-num">今日事件<span> 36 </span>件</div>
+        <div class="toady-list-num">今日事件<span>{{todayListNum || 0}} </span>件</div>
       </div>
     </div>
     <div class="tab-box">
@@ -61,7 +61,7 @@
           </div>
         </div>
         <div v-show="tabsActiveName == '物联感知'">
-          <div class="event-details" v-for="item in eventListData" :key="item.index">
+          <div class="event-details" v-for="item in eventListData" :key="item.index" @click="openSiteDialog(item)">
             <div class="event-details-title">
               <span>{{item.projectName||''}}</span>
               <span>{{item.pushTime||''}}</span>
@@ -80,6 +80,7 @@
           @current-change="pageChange"
           :total="total"
           :current-page.sync="currentPage"
+          :page-size = 5
           >
         </el-pagination>
       </div>
@@ -121,6 +122,12 @@ export default {
   components: {
     StatisticalAnalysis,
   },
+  props: {
+      todayListNum:{
+        type: Number,
+        default: 0
+      } 
+  },
   created() {
     const currentDate = new Date();
     currentDate.setTime(currentDate.getTime());
@@ -128,7 +135,7 @@ export default {
     this.preTime =
       currentDate.getFullYear() +
       "-" +
-      (currentDate.getMonth() + 1) +
+      ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : "0" + (currentDate.getMonth() + 1)) +
       "-" +
       currentDate.getDate() +
       " " +
@@ -137,12 +144,26 @@ export default {
   mounted() {
     this.getRoadData()
     this.selectRoadData()
+
+    
+    selectRaise({pageSize: 5,page: 1,}).then((res) => {
+      this.$parent.allListDataNum += res.data.data.sum;
+    });
+    selectNoiceEvent({pageSize: 5,page: 1,}).then((res) => {
+      this.$parent.allListDataNum += res.data.data.sum;
+    });
+    selectRoadData({pageSize: 5,page: 1,}).then((res) => {
+      this.$parent.allListDataNum += res.data.data.sum;
+    });
+    
+    
   },
   methods: {
     tabHandleClick(item) {
       this.tabsActiveName = item
       this.currentPage = 1
       if(item == '视频感知'){
+        this.filterButton.typeSelect = []
         
       }
       if(item == '物联感知'){
@@ -250,6 +271,8 @@ export default {
 
     openRoadDialog(data) {
       console.log(data)
+      this.$parent.removeRoadCauseAnalysis()
+      this.$parent.hiMapFun.removeLayerByLayerName("roadPoint");
       this.$parent.hiMap.mapObj.map.flyTo({ lat: data.lat, lng: data.lng });
       let dataEvent = [{
           latLng: { lat: data.lat, lng: data.lng },
@@ -262,7 +285,12 @@ export default {
         "roadPoint",
         createSiteRoadPop
       );
-    }
+
+    },
+
+    openSiteDialog(data) {
+      bus.$emit("openCauseAnalysis", data);
+    },
   },
 };
 </script>
@@ -466,14 +494,14 @@ export default {
       // margin-top: 30px;
       width: 100%;
       // height: 625px;
-      height: 570px;
+      height: 644px;
       position: relative;
 
       .event-details {
-        margin-top: 10px;
+        margin-top: 12px;
         // margin-top: 18px;
         width: 100%;
-        max-height: 100px;
+        height: 110px;
         padding-right: 8px;
         background: linear-gradient(90deg, #173759 0, #133150 100%);
         cursor: pointer;

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

@@ -0,0 +1,518 @@
+<template>
+  <div class="pop-box">
+    <div class="title-bg"></div>
+    <div class="title">
+      <span>{{ feature.data.channelName || feature.data.name ||''}}</span>
+    </div>
+    <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 || 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 || feature.data.noice == 0 ? feature.data.noice : '' }}</span>ug/m<sup>3</sup> </p>
+            </div>
+          </div>
+        </div>
+        <div class="site-content-left-bottom">
+          <div class="filter-btn-typeSelect">
+            <div  class="typeSelect-btn" 
+                  v-for="item in filterButton.typeSelect" 
+                  :key="item" 
+                  :class="filterButton.typeSelectActive == item ? 'typeSelect-btn-active':''"
+                  @click="typeSelect(item)"
+                  >{{item}}</div>
+          </div>
+          <div id="chart"></div>
+        </div>
+      </div>
+      <div class="site-content-right">
+        <div
+          class="images" 
+          v-viewer="{movable: false}"
+          style="
+            width: 280px;
+            height: 158px;
+            cursor: pointer;
+          "
+        >
+          <img @click="show" style="width:100%;height:100%;" :src="feature.data.picUrl||''" alt="">
+        </div>
+        <div class="video-table">
+          <h4>周边监控</h4>
+          <el-table
+            :data="cameraData"
+            @row-click="openVideo"
+            :cell-style="{
+              color: '#fff',
+              cursor: 'pointer',
+              'background-color': '#18304c',
+              borderColor: '#325d94'
+            }"
+            :header-cell-style="{
+              color: '#1ffefd',
+              borderColor: '#325d94',
+              'background-color': '#2b4b7a',
+            }"
+            style="background: transparent"
+          >
+            <el-table-column align="center" width="64" label="序号" type="index" style="text-align: center">
+            </el-table-column>
+            <el-table-column prop="cameraName" label="设备名称" show-overflow-tooltip></el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import bus from "@/views/layout/bus";
+import 'viewerjs/dist/viewer.css'
+import { directive as viewer } from "v-viewer"
+import * as echarts from 'echarts'
+import {selectWeekPmAndNoice,selectMonthPmAndNoice} from '@/api/construction/index.js'
+import { time } from 'highcharts';
+export default {
+  name: "",
+  props: {
+    feature: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  mounted() {
+    selectWeekPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
+      res.data.data.forEach((item) => {
+        this.weekData.time.push(item.pushTime)
+        this.weekData.pm10.push(item.pm10)
+        this.weekData.noice.push(item.noice)
+      })
+      this.chartData = this.weekData
+      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 {
+      filterButton:{
+        typeSelect:['近7天','近30天',],
+        typeSelectActive:'近7天',
+      },
+      cameraData: [],
+      weekData:{
+        time:[],
+        pm10:[],
+        noice:[],
+      },
+      monthData:{
+        time:[],
+        pm10:[],
+        noice:[],
+      },
+      chartData:{},
+    };
+  },
+  methods: {
+    // particularsClick(data){
+    //   console.log(data)
+    //   bus.$emit("mainClick", data);
+    // },
+
+    typeSelect(item) {
+      this.filterButton.typeSelectActive = item
+      if(item == '近7天'){
+        this.chartData = this.weekData
+      }
+      if(item == '近30天'){
+        this.chartData = this.monthData
+      }
+      this.initCharts()
+    },
+
+    initCharts () {
+      const option = {
+        grid: {
+          bottom: 34,
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: 'rgba(255, 255, 255,.8)',
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#345a99',
+            }
+          },
+          axisTick: {
+            show: false,
+          },
+          boundaryGap: ['2%', '2%'],
+          data: this.chartData.time
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: 'dB',
+            nameTextStyle: {
+              color: 'rgba(255, 255, 255,.8)'
+            },
+            axisLabel: {
+              color: 'rgba(255, 255, 255,.8)',
+            },
+            axisLine: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            splitArea: {
+              interval: '1',
+              show: true,
+              areaStyle: {
+                color: ['#1d3556','#18334c']
+              }
+            }
+          },
+          {
+            type: 'value',
+            name: 'ug/m³',
+            nameTextStyle: {
+              color: 'rgba(255, 255, 255,.8)'
+            },
+            axisLabel: {
+              color: 'rgba(255, 255, 255,.8)',
+              show: true,
+            },
+            axisLine: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            max:100,
+            min: 0,
+          },
+        ],
+        color: ['#309afe','#fab228'],
+        legend: {
+          right: '16%',
+          top: '12%',
+          icon: 'line',
+          data: ['噪声值','扬尘值',],
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        tooltip: {
+          show: true,
+          trigger: 'axis'
+        },
+        series: [
+          {
+            name: '噪声值',
+            data: this.chartData.noice,
+            type: 'line',
+            symbol: 'none',
+            lineStyle: {
+              width: 2,
+              color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [{
+                            offset: 0, color: '#3cb2ff' // 0% 处的颜色
+                        }, {
+                            offset: 1, color: '#2682ff' // 100% 处的颜色
+                        }],
+                        global: false // 缺省为 false
+                      }
+            }
+          },
+          {
+            name: '扬尘值',
+            data: this.chartData.pm10,
+            type: 'line',
+            symbol: 'none',
+            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 charts = echarts.init(
+        document.getElementById('chart')
+      )
+      charts.setOption(option)
+    },
+
+    show () {
+      const viewer = this.$el.querySelector('.images').$viewer
+      viewer.show()
+    },
+
+    openVideo(row){
+      bus.$emit('openCurrentVideoWaterPoint',row.channelCode)
+    },
+  },
+  directives: {
+    viewer: viewer({
+        debug: true,
+    }),
+  },
+};
+</script>
+<style lang="scss">
+// .leaflet-popup {
+//   width: auto !important;
+// }
+  .site-popup {
+    .leaflet-popup-content-wrapper {
+      box-shadow: 0 0 10px  rgba($color: #1ffefd, $alpha: .4);
+      background: rgba(24,51,76,.95);
+      border: 1px solid rgba(50,227,235,.95);
+    }
+    .leaflet-popup-content {
+      width: 734px !important;
+      height: 453px;
+      padding: 12px 16px;
+      .pop-box {
+        width: 100%;
+        height: 100%;
+
+        .title-bg {
+          position: absolute;
+          top: 0;
+          left: 0;
+          height: 42px;
+          width: 100%;
+          opacity: .4;
+          background: linear-gradient(180deg, rgba($color: #1fa2fe, $alpha: 1) 0, rgba($color: #1fa2fe, $alpha: 0) 100%);
+        }
+
+        .title{
+            color: #fff;
+            font-size: 16px;
+            span:nth-child(2) {
+              display: inline-block;
+              width: 40px;
+              height: 22px;
+              margin-left: 8px;
+              border-radius: 2px;
+              border: 1px solid #0494ff;
+              color: #1ffefd;
+              text-align: center;
+              font-size: 14px;
+            }
+        }
+        
+        .site-address {
+          margin: 12px 0 0 0;
+          padding-left: 20px;
+          background: url(../../../../assets/construction/iconAddress.png) no-repeat left center;
+          color: rgba(255, 255, 255, .6);
+        }
+
+        .site-content {
+          display: flex;
+          .site-content-left {
+            width: 392px;
+            margin-right: 29px;
+            .site-content-left-top {
+              width: 100%;
+              height: 107px;
+              padding: 24px 0 0 18px;
+              background: linear-gradient(0deg, rgba($color: #255287, $alpha: 0) 0, rgba($color: #255287, $alpha: 1) 100%);
+              display: flex;
+              .noise {
+                height: 60px;
+                width: 180px;
+                border-right: 1px solid #2c619c;
+                display: flex;
+                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)
+                  }
+                }
+              }
+              .raise-dust {
+                margin-left: 20px;
+                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)
+                  }
+                }
+              }
+            }
+            .site-content-left-bottom {
+              width: 100%;
+              margin-top: 10px;
+              .filter-btn-typeSelect {
+                display: flex;
+                .typeSelect-btn {
+                  border-radius: 20px;
+                  border: 1px solid rgba(0, 255, 255, .6);
+                  background: rgba(2,51,87,.6);
+                  margin-right: 5px;
+                  padding: 4px 10px;
+                  font-size: 14px;
+                  color: #fff;
+                  cursor: pointer;
+                }
+                .typeSelect-btn-active {
+                  background: #005ea3;
+                  border: 1px solid #00ffff;
+                }
+              }
+              #chart {
+                width: 100%;
+                height: 206px;
+              }
+            }
+          }
+          .site-content-right {
+            width: 280px;
+            .video-table {
+              margin-top: 10px;
+              h4 {
+                color: #fff;
+              }
+              .el-table{
+                margin-top: 8px;
+                border: 1px solid #325d94;
+                .el-table__body-wrapper{
+                  height: 90px;
+                  overflow-y: auto;
+                  &::-webkit-scrollbar {
+                  width: 8px;
+                  background-color: #10335e;
+                  }
+                  &::-webkit-scrollbar-thumb {
+                    background-color: #446dac !important;
+                  }
+                }
+                th,td {
+                  border-right: 1px solid #325d94;
+                }
+              }
+              .el-table::before {
+                display: none;
+              }
+            }
+          }
+        }
+      }
+
+    }
+
+    .leaflet-popup-close-button {
+      color: #3afefc !important;
+      font-size: 12px;
+    }
+  }
+</style>
+<style lang='scss' scoped>
+.particulars {
+  position: absolute;
+  right: 5px;
+  width: 80px;
+  height: 40px;
+  bottom: 5px;
+}
+.List-Details-pop {
+  background-color: #fff;
+  font-size: 16px;
+  padding-bottom: 20px;
+  display: flex;
+  width: 400px;
+
+  .topContent {
+    background: #000;
+    padding: 14px;
+    width: 400px;
+  }
+  .content {
+    width: 400px;
+    display: flex;
+    flex-wrap: wrap;
+    b {
+      color: #000;
+      font-size: 14px;
+    }
+    p {
+      color: #000;
+      font-size: 14px;
+    }
+  }
+  .title {
+    background-color: #000;
+    color: #fff;
+  }
+}
+</style>

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

@@ -34,6 +34,7 @@
             color: '#1ffefd',
             'background-color': '#2b4b7a',
           }"
+          style="background: transparent"
         >
           <el-table-column width="114" label="工地名称" prop="projectName" 
             show-overflow-tooltip>

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

@@ -1,7 +1,8 @@
 <template>
   <div class="pop-box">
     <div class="details-pop">
-        <div class="title">问题详情</div>
+        <div class="title-bg"></div>
+        <div class="title">事件详情</div>
         <div>
             <div class="top">
                 <p><span>道路名称：</span><span>{{feature.data.roadName||''}}</span></p>
@@ -56,8 +57,18 @@ export default {
   width: auto !important
 }
 .site-road-popup {
+  .leaflet-popup-content-wrapper {
+    box-shadow: 0 0 10px  rgba($color: #1ffefd, $alpha: .4);
+    background: rgba(24,51,76,.95);
+    border: 1px solid rgba(50,227,235,.95);
+  }
   .leaflet-popup-content {
     width: unset !important;
+  
+  }
+  .leaflet-popup-close-button {
+      color: #3afefc !important;
+      font-size: 12px;
     }
 }
 </style>
@@ -88,13 +99,12 @@ export default {
       width: 100%;
       display: flex;
       margin: 7px;
-      font-size: 20px;
       span {
-        color: #fff;
+        color: #20fefd;
       }
-      span:nth-of-type(1) {
+      span:nth-child(1) {
-        // width: 70px;
+        width: 90px;
-        margin-left: 10px;
+        color: rgba(255,255,255,0.6);
       }
     }
     .pic {
@@ -128,18 +138,19 @@ export default {
 ::v-deep .el-upload-list__item:first-child {
   margin-top: -25px;
 }
-.title {
+.title-bg {
-  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;
+  top: 0;
+  left: 0;
+  height: 42px;
+  width: 100%;
+  opacity: .4;
+  background: linear-gradient(180deg, rgba($color: #1fa2fe, $alpha: 1) 0, rgba($color: #1fa2fe, $alpha: 0) 100%);
 }
+.title {
+  color: #fff;
+  font-size: 16px;
+  padding: 12px 0 0 19px;
+  position: relative;
 }
 </style>

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

@@ -224,20 +224,21 @@ export default {
     },
     treeCameraClick(data) {
       console.log(data)
-      // if(data.channelCode){
+      this.$parent.removeRoadCauseAnalysis()
-      //   const cameraTree = [{
+      if(data.channelCode){
-      //     latLng: { lat: data.gpsY, lng: data.gpsX },
+        const cameraTree = [{
-      //     data: data,
+          latLng: { lat: data.gpsY, lng: data.gpsX },
-      //     type:'cameraTree'
+          data: data,
-      //   }]
+          type:'cameraTree'
-      //   this.hiMapFun.removeLayerByLayerName("cameraTree");
+        }]
-      //   this.hiMapFun.openPopupVideoSurveillance(cameraTree[0])
+        this.$parent.hiMapFun.removeLayerByLayerName("cameraTree");
-      //   const arr = [0,0.0,'','0','0.0']
+        this.$parent.hiMapFun.openPopupVideoSurveillance(cameraTree[0])
-      //   if(arr.indexOf(data.gpsX) == -1){
+        const arr = [0,0.0,'','0','0.0']
-      //     this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(cameraTree,"poi-red.png", "cameraTree");
+        if(arr.indexOf(data.gpsX) == -1){
-      //     this.hiMap.mapObj.map.flyTo({ lat: data.gpsY, lng: data.gpsX });
+          this.$parent.hiMapFun.addResourceOnMapWithoutSuperMapCluster(cameraTree,"poi-red.png", "cameraTree");
-      //   }
+          this.$parent.hiMap.mapObj.map.flyTo({ lat: data.gpsY, lng: data.gpsX });
-      // }
+        }
+      }
     },
     filterNode(value, data) {
       if (value == "2") return true;

src/views/pages/construction/index.vue

@@ -38,12 +38,12 @@
 
       <div class="eventNum">
         累计事件数量
-        <p><span>1236</span>件</p>
+        <p><span>{{allListDataNum}}</span>件</p>
       </div>
 
       <!-- 事件感知 -->
       <div class="complaintContent">
-        <complaint-event ref="complaintEventRef"></complaint-event>
+        <complaint-event ref="complaintEventRef" :todayListNum="todayListNum"></complaint-event>
       </div>
 
       <!-- 视频标签、列表 -->
@@ -53,7 +53,7 @@
 
       <!-- 工地列表 -->
       <div class="siteList">
-        <site-list></site-list>
+        <site-list ref="siteListRef"></site-list>
       </div>
 
       <div class="changeLayer">
@@ -81,10 +81,11 @@ import bus from "@/views/layout/bus";
 import complaintEvent from "./components/ComplaintEvent";
 import VideoList from "./components/VideoList";
 import SiteList from "./components/SiteList";
-import { selectByJdWd } from "@/api/construction/index";
+import { selectByJdWd,selectByDayRaise,selectByDayNoice,selectByDayRoadData } from "@/api/construction/index";
 import { createSiteListPop } from "@/supermap/createMarkerPopup";
 import {createCameraDetailsPop} from '@/supermap/createMarkerPopup';
 import VideoPlay from './components/VideoPlay'
+import {  selectAllByGps } from '@/api/road'
 
 export default {
   data() {
@@ -98,8 +99,10 @@ export default {
       changeLayerBtnGroup: [],
 
       openVideo: false,
-      channelCode:[]
+      channelCode:[],
 
+      todayListNum: 0,
+      allListDataNum: 0,
     };
   },
   components: {
@@ -118,10 +121,25 @@ export default {
     );
 
 
+    selectByDayRaise().then((res) => {
+      this.todayListNum += res.data.data.sum
+    })
+    selectByDayNoice().then((res) => {
+      this.todayListNum += res.data.data.sum
+
+    })
+    selectByDayRoadData().then((res) => {
+      this.todayListNum += res.data.data.sum
+
+    })
+
+  
 
     // 根据经纬度查询半径内所有的工地
     bus.$off("openCauseAnalysis");
     bus.$on("openCauseAnalysis", (row) => {
+
+      this.removeRoadCauseAnalysis()
       // this.timeRegion = data.data.dt;
       // this.hiMapFun.removerPolygon();
       this.hiMapFun.removeLayerByLayerName("constructionSite");
@@ -144,6 +162,7 @@ export default {
   
     bus.$off("roadOnMap");
     bus.$on("roadOnMap",(roadData) => {
+      this.removeRoadCauseAnalysis()
       this.roadOnMap(roadData);
     })
 
@@ -154,6 +173,8 @@ export default {
   
     bus.$off("CameraSingleDataOnMap");
     bus.$on("CameraSingleDataOnMap",(labelName,data) => {
+
+      this.removeRoadCauseAnalysis()
       this.addResourceTomap(labelName,data);
     })
 
@@ -162,6 +183,21 @@ export default {
       this.openVideo = true;
       this.channelCode.unshift(channelCode)
     })
+  
+    bus.$off("openCurrentVideoSurveillance");
+    bus.$on("openCurrentVideoSurveillance", (channelCode) => {
+      this.openVideo = true;
+      this.channelCode.unshift(channelCode);
+    });
+
+    bus.$off("roadCauseAnalysis");
+    bus.$on("roadCauseAnalysis", (data) => {
+      this.removeRoadCauseAnalysis()
+
+      this.circle({ lat: Number(data.lat), lng: Number(data.lng) });
+      this.selectAllByGps(data);
+      this.WithinRadiusSite(data)
+    });
   },
   methods: {
     querySearchAsync(queryString, cb) {
@@ -264,6 +300,8 @@ export default {
     },
 
     layerHandleChange(item) {
+      this.removeRoadCauseAnalysis()
+      
       if (this.changeLayerBtnGroup.indexOf(item) !== -1) {
         switch (item) {
           case "道路":
@@ -275,7 +313,21 @@ export default {
             this.addResourceTomap('全部',this.$refs.videoListRef.cameraAllData)
             break;
           case "工地":
-
+            this.hiMapFun.removeLayerByLayerName("constructionSite");
+            let dataEvent = []
+            this.$refs.siteListRef.siteData.forEach((item) => {
+              dataEvent.push({
+                latLng: { lat: Number(item.wd), lng: Number(item.jd) },
+                data: item,
+                type: "site",
+              });
+            });
+            this.hiMapFun.addPointsToMap(
+              dataEvent,
+              "construction.png",
+              "constructionSite",
+              createSiteListPop
+            );
             break;
           default:
             break;
@@ -291,7 +343,7 @@ export default {
             this.hiMapFun.removeLayerByLayerName('全部')
             break;
           case "工地":
-
+            this.hiMapFun.removeLayerByLayerName("constructionSite");
             break;
           default:
             break;
@@ -314,6 +366,45 @@ export default {
       });
       this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, "videoSurveillance.png", type, createCameraDetailsPop)
     },
+
+    circle(latlng) {
+      this.hiMapFun.addCircleToMap(latlng, 3800);
+    },
+
+    async selectAllByGps(data) {
+      const param = {
+        gpsX: data.lng,
+        gpsY: data.lat,
+        radius: 3000,
+      };
+
+      const res = await selectAllByGps(param);
+      console.log(res);
+      const dataEvent = [];
+      res.data.data.forEach((item) => {
+        const arr = [0, 0.0, "", "0", "0.0"];
+        if (arr.indexOf(item.gpsX) == -1) {
+          dataEvent.push({
+            latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) },
+            data: item,
+            type: "videoSurveillance",
+          });
+        }
+      });
+      this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
+        dataEvent,
+        "videoSurveillance.png",
+        "videoSurveillance",
+        createCameraDetailsPop
+      );
+    },
+
+    removeRoadCauseAnalysis() {
+      this.hiMapFun.removerPolygon();
+      this.hiMapFun.removeLayerByLayerName("videoSurveillance");
+      this.hiMapFun.removeLayerByLayerName("constructionSite");
+      this.hiMapFun.removeLayerByLayerName("roadPoint")
+    },
   },
   beforeDestroy() {},
 };
@@ -414,7 +505,7 @@ export default {
     z-index: 1000;
     left: 10px;
     top: 90px;
-    height:908px;
+    height:980px;
     width: 478px;
     background: rgba($color: #05213b, $alpha: .85)
   }

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

@@ -242,40 +242,12 @@ export default {
   created() {
     const currentDate = new Date();
     currentDate.setTime(currentDate.getTime());
-    this.monthTime =
+    this.monthTime = currentDate.getFullYear() + "-" + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : "0" + (currentDate.getMonth() + 1)) + "-" + "01" + " " + "00:00:00";
-      currentDate.getFullYear() +
+    this.currentTime = currentDate.getFullYear() + "-" + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : "0" + (currentDate.getMonth() + 1)) + "-" + currentDate.getDate() + " " + "00:00:00";
-      "-" +
-      (currentDate.getMonth() + 1) +
-      "-" +
-      "01" +
-      " " +
-      "00:00:00";
-    this.currentTime =
-      currentDate.getFullYear() +
-      "-" +
-      (currentDate.getMonth() + 1) +
-      "-" +
-      currentDate.getDate() +
-      " " +
-      "00:00:00";
     currentDate.setTime(currentDate.getTime() - 24 * 60 * 60 * 1000);
-    this.preTime =
+    this.preTime =currentDate.getFullYear() +"-" +  ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : "0" + (currentDate.getMonth() + 1)) + "-" + currentDate.getDate() + " " +"00:00:00";
-      currentDate.getFullYear() +
-      "-" +
-      (currentDate.getMonth() + 1) +
-      "-" +
-      currentDate.getDate() +
-      " " +
-      "00:00:00";
     currentDate.setDate(currentDate.getDate() - currentDate.getDay() + 1);
-    this.weekTime =
+    this.weekTime =currentDate.getFullYear() + "-" + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : "0" + (currentDate.getMonth() + 1)) + "-" + currentDate.getDate() + " " + "00:00:00";
-      currentDate.getFullYear() +
-      "-" +
-      (currentDate.getMonth() + 1) +
-      "-" +
-      currentDate.getDate() +
-      " " +
-      "00:00:00";
   },
   // 生命周期 - 挂载完成（访问DOM元素）
   mounted() {