feat:重点区域功能补充，工地优化

src/api/area.js

@@ -70,4 +70,32 @@ export function selectMonthAreaEvent(params) {
   })
 }
 
+// 数据统计--分类
+export function selectEventType(params) {
+  return request({
+    url: 'api/project/keyArea/selectEventType',
+    method: 'get',
+    params
+  })
+}
+
+
+// 弹窗--近7天
+export function selectLocalWeekArea(params) {
+  return request({
+    url: 'api/project/keyArea/selectLocalWeekArea',
+    method: 'get',
+    params
+  })
+}
+
+// 弹窗--近30天
+export function selectLocalMonthArea(params) {
+  return request({
+    url: 'api/project/keyArea/selectLocalMonthArea',
+    method: 'get',
+    params
+  })
+}
+
   

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

@@ -100,7 +100,7 @@ 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 {selectLocalWeekArea, selectLocalMonthArea} from '@/api/area.js'
 export default {
   name: "",
   props: {
@@ -112,15 +112,22 @@ export default {
     },
   },
   mounted() {
-    selectWeekPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
+    selectLocalWeekArea({areaName: this.feature.data.areaName}).then((res) => {
-      console.log(res)
+      res.data.data.forEach((item) => {
-    })
+        this.weekData.time.unshift(item.pushTime)
-    selectMonthPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
+        this.weekData.local.unshift(item.localNums)
-      console.log(res)
+        this.weekData.outer.unshift(item.nonlocalNums)
-    })
+      })
-    this.$nextTick( () => {
+      this.chartData = this.weekData
       this.initCharts()
     })
+    selectLocalMonthArea({areaName: this.feature.data.areaName}).then((res) => {
+      res.data.data.forEach((item) => {
+        this.monthData.time.unshift(item.pushTime)
+        this.monthData.local.unshift(item.localNums)
+        this.monthData.outer.unshift(item.nonlocalNums)
+      })
+    })
   },
   data() {
     return {
@@ -128,8 +135,18 @@ export default {
         typeSelect:['近7天','近30天',],
         typeSelectActive:'近7天',
       },
-      cameraData: []
+      cameraData: [],
-
+      weekData:{
+        time:[],
+        local:[],
+        outer:[],
+      },
+      monthData:{
+        time:[],
+        local:[],
+        outer:[],
+      },
+      chartData:{},
     };
   },
   methods: {
@@ -148,10 +165,17 @@ export default {
     },
     typeSelect(item) {
       this.filterButton.typeSelectActive = item
+      if(item == '近7天'){
+        this.chartData = this.weekData
+      }
+      if(item == '近30天'){
+        this.chartData = this.monthData
+      }
       this.initCharts()
     },
 
     initCharts () {
+      console.log('this.chartData---', this.chartData)
       const option = {
         grid: {
           bottom: 34,
@@ -171,7 +195,7 @@ export default {
             show: false,
           },
           boundaryGap: ['2%', '2%'],
-          data: ['1', '2', '3', '4', '5', '6', '7']
+          data: this.chartData.time
         },
         yAxis: [
           {
@@ -196,26 +220,7 @@ export default {
                 color: ['#1d3556','#18334c']
               }
             }
-          },
+          }
-          {
-            type: 'value',
-            name: '人',
-            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: {
@@ -230,7 +235,7 @@ export default {
         series: [
           {
             name: '本地人数',
-            data: [60, 30, 60, 70, 40, 60, 70],
+            data: this.chartData.local,
             type: 'bar',
             symbol: 'none',
             lineStyle: {
@@ -252,7 +257,7 @@ export default {
           },
           {
             name: '外地人数',
-            data: [30, 40, 50, 80, 90, 40, 60],
+            data: this.chartData.outer,
             type: 'bar',
             symbol: 'none',
             lineStyle: {

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

@@ -148,9 +148,9 @@ export default {
     // 行点击
     analyse(row) {
       // bus.$emit("openCauseAnalysis", row);
+      this.$parent.hiMapFun.removerPolygon()
+      this.$parent.removeRoadCauseAnalysis()
       if(row.latitude && row.longitude) {
-        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 = [{
@@ -164,20 +164,29 @@ export default {
           "roadPoint",
           createImportantAreaPop
         );
-      } else {
+      } else if(row.point) {
-        selectByAreaName({areaName:row.areaName}).then((res) => {
+        let arr = JSON.parse(row.point)
-        if(res.data.data){
+        let areaLatLng = []
-          let areaLatLng = []
+        arr.forEach((item) => {
-          res.data.data.forEach((item) => {
+          let lonLat = gcjLL2wgs84LL(item[0], item[1]);
-            let lonLat = gcjLL2wgs84LL(item.longitude, item.latitude);
+          areaLatLng.push([lonLat[1],lonLat[0]])
-            areaLatLng.push([lonLat[1],lonLat[0]])
+        })
-          })
+        this.$parent.hiMapFun.addAreaToMap(areaLatLng)
-          this.$parent.hiMapFun.removerPolygon()
-          this.$parent.removeRoadCauseAnalysis()
-          this.$parent.hiMapFun.addAreaToMap(areaLatLng)
-        }
-      })
       }
+      // 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

@@ -75,7 +75,7 @@
 
 <script>
 import * as echarts from 'echarts'
-import { selectMonthAreaEvent, selectByAreaEvent } from "@/api/area";
+import { selectMonthAreaEvent, selectByAreaEvent, selectEventType } from "@/api/area";
  export default {
    data () {
      return {
@@ -148,6 +148,30 @@ import { selectMonthAreaEvent, selectByAreaEvent } from "@/api/area";
       selectByAreaEvent(params).then((res) => {
         this.totalEventCount = res.data.data.sum
       });
+      selectEventType().then((res) => {
+        let tempArr = res.data.data || []
+        let arrLabel = []
+        let arrValue = []
+        tempArr.forEach(item => {
+          if(!arrLabel.length) {
+            arrLabel.push(item.eventNewName)
+            arrValue.push(item.number)
+          } else {
+            let existFlag = false
+            arrLabel.forEach((labelItem,labelIndex) => {
+              if(labelItem === item.eventNewName) {
+                existFlag = true
+                arrValue[labelIndex] += item.number
+              }
+            })
+            if(!existFlag) {
+              arrLabel.push(item.eventNewName)
+              arrValue.push(item.number)
+            }
+          }
+        })
+        this.initEventTypeCharts(arrLabel, arrValue)
+      });
       selectMonthAreaEvent().then((res) => {
         if(res.data.data && res.data.data.length) {
           let xValue = []
@@ -165,7 +189,7 @@ import { selectMonthAreaEvent, selectByAreaEvent } from "@/api/area";
       this.$emit('closeDialog')
     },
 
-    initEventTypeCharts () {
+    initEventTypeCharts (arrLabel, arrValue) {
       const option = {
          title: {
           text: "事件类型分布",
@@ -182,7 +206,7 @@ import { selectMonthAreaEvent, selectByAreaEvent } from "@/api/area";
         },
         xAxis: {
           type: 'category',
-          data: ['非法运土', '工地扬尘', '其他'],
+          data: arrLabel,
           axisLabel: {
             color: '#fff',
             margin: 7,
@@ -202,7 +226,7 @@ import { selectMonthAreaEvent, selectByAreaEvent } from "@/api/area";
         },
         series: [
           {
-            data: [120, 200, 150],
+            data: arrValue,
             type: 'bar',
             itemStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

src/views/pages/area/index.vue

@@ -116,6 +116,7 @@ import { selectByJdWd } from "@/api/construction/index";
 import { createSiteListPop,createCameraDetailsPop,createEventListDetailsPop,createImportantAreaPop } from "@/supermap/createMarkerPopup";
 import { listPassengerFlow, listPassengerFlowByAllNums } from "@/api/civilizedCity.js";
 import { selectByAreaEvent, selectKeyArea } from "@/api/area";
+import { gcjLL2wgs84LL } from "@/utils/coordinateSystemTransform";
 // 时间轴
 import HorizonTimeLine from './components/HorizonTimeLine'
 export default {
@@ -450,22 +451,36 @@ export default {
           case "窗口单位":
             this.hiMapFun.removeLayerByLayerName(item)
             selectKeyArea({ type: item}).then((res) => {
-              const dataEvent = [];
+              if(item === '商业街区') {
-              res.data.data.forEach((item) => {
+                res.data.data.forEach((newItem) => {
-                dataEvent.push(
+                  if(newItem.point) {
-                  {
+                    let arr = JSON.parse(newItem.point)
-                    latLng: { lat: item.latitude, lng: item.longitude },
+                    let areaLatLng = []
-                    data: item,
+                    arr.forEach((pointItem) => {
-                    type: "site",
+                      let lonLat = gcjLL2wgs84LL(pointItem[0], pointItem[1]);
+                      areaLatLng.push([lonLat[1],lonLat[0]])
+                    })
+                    this.hiMapFun.addAreaToMap(areaLatLng)
                   }
-                )
+                })
-              })
+              } else {
-              this.hiMapFun.addPointsToMap(
+                const dataEvent = [];
-                dataEvent,
+                res.data.data.forEach((item) => {
-                "poi-red.png",
+                  dataEvent.push(
-                item,
+                    {
-                createImportantAreaPop
+                      latLng: { lat: item.latitude, lng: item.longitude },
-              );
+                      data: item,
+                      type: "site",
+                    }
+                  )
+                })
+                this.hiMapFun.addPointsToMap(
+                  dataEvent,
+                  "poi-red.png",
+                  item,
+                  createImportantAreaPop
+                );
+              }
             })
             break;
           default:
@@ -478,6 +493,9 @@ export default {
           case "景区景点":
           case "海水浴场":
           case "窗口单位":
+            if(item === '商业街区') {
+              this.hiMapFun.removerPolygon()
+            }
             this.hiMapFun.removeLayerByLayerName(item)
             break;
           case "AI事件":

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

@@ -311,10 +311,15 @@ export default {
 //   width: auto !important;
 // }
   .site-popup {
+    a.leaflet-popup-close-button {
+      top:120px;
+    }
     .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);
+      position: relative;
+      top: 120px;
     }
     .leaflet-popup-content {
       width: 734px !important;

src/views/pages/construction/index.vue

@@ -442,7 +442,7 @@ export default {
       font-family: "Tensentype-ZhiHeiJ-W5";
     }
     .title::before {
-      content: "在建工地综合监管平台";
+      content: "工地扬尘噪音监管";
       text-shadow: 0px 3px 10px rgba(0, 0, 0, 0.9);
       position: absolute;
       z-index: -1;