复制专题。

src/router/index.js

@@ -102,6 +102,12 @@ export const pageRoutes = [{
   name: 'area',
   meta: { title: '重点区域监控平台' }
 },
+{
+  path: '/areaMonitor',
+  component: () => import('@/views/pages/areaMonitor'),
+  name: 'areaMonitor',
+  meta: { title: '重点区域监控平台' }
+},
 {
   path: '/point',
   component: () => import('@/views/pages/civilizedCity/components/Point'),

src/views/pages/area/index.vue

@@ -38,42 +38,23 @@
 
       <div class="eventNum">
         累计事件数量(2022.05.25-至今)
-        <p>
+        <p><span>{{ allListDataNum }}</span>件</p>
-          <span>{{ allListDataNum }}</span
-          >件
-        </p>
       </div>
 
       <!-- 事件感知 -->
       <div class="complaintContent">
-        <!-- <complaint-event ref="complaintEventRef"></complaint-event> -->
+        <complaint-event ref="complaintEventRef"></complaint-event>
-        <early-warning> </early-warning>
       </div>
 
       <!-- 视频标签、列表 -->
-    
+      <div class="videoList">
-      <div class="complaintContent1">
+        <video-list ref="videoListRef"></video-list>
-      
-        <video-list-right></video-list-right>
       </div>
 
-      <!-- 重点视频列表 -->
-      <div class="mainVideoList">
-         <video-list-left  @IsShowLideoVisible="IsShowLideoVisible"></video-list-left>
-      </div>
-      <div class="keyAreas" @click="handleKeyArea">
-         重点区域
-      </div> 
       <!-- 工地列表 -->
-      <div class="siteList" v-if="keyAreasShow">
+      <div class="siteList">
-        <site-list-more></site-list-more>
+        <site-list></site-list>
       </div>
-
-          <!--视频列表弹出框-->
-      <div class="siteList1" v-if="videoVisible">
-        <video-list></video-list>
-      </div>
- 
       <!-- 热力图图例 -->
       <div class="legend"></div>
 
@@ -91,49 +72,34 @@
         <div class="title">地图显示</div>
         <div class="change-btn-box">
           <el-checkbox-group v-model="changeLayerBtnGroup">
-            <el-checkbox
+            <el-checkbox v-for="item in changeLayerBtnList" :key="item.index" :label="item" @change="layerHandleChange(item)"></el-checkbox>
-              v-for="item in changeLayerBtnList"
-              :key="item.index"
-              :label="item"
-              @change="layerHandleChange(item)"
-            ></el-checkbox>
           </el-checkbox-group>
         </div>
         <div class="title">重点区域</div>
-        <div class="change-btn-box" style="width: 230px">
+        <div class="change-btn-box" style="width:230px">
           <el-checkbox-group v-model="changeLayerBtnGroup">
-            <el-checkbox
+            <el-checkbox v-for="item in changeLayerBtnListArea" :key="item.index" :label="item" @change="layerHandleChange(item)"></el-checkbox>
-              v-for="item in changeLayerBtnListArea"
-              :key="item.index"
-              :label="item"
-              @change="layerHandleChange(item)"
-            ></el-checkbox>
           </el-checkbox-group>
         </div>
         <div class="title">
-          <span class="special-title" @click="clearThermodynamic">
+          <span class="special-title" @click="clearThermodynamic"> 人流热力 </span>
-            人流热力
-          </span>
         </div>
         <div class="change-btn-box">
           <!-- <el-checkbox-group v-model="changeLayerBtnGroup">
             <el-checkbox v-for="item in changeLayerBtnListHot" :key="item.index" :label="item" @change="layerHandleChange(item)"></el-checkbox>
           </el-checkbox-group> -->
-          <el-radio-group
+          <el-radio-group v-model="thermodynamicPeopleType" @change="changeThermodynamicPeopleType">
-            v-model="thermodynamicPeopleType"
-            @change="changeThermodynamicPeopleType"
-          >
             <el-radio label="all">全市</el-radio>
             <el-radio label="local">本地</el-radio>
             <el-radio label="noLocal">外地</el-radio>
           </el-radio-group>
         </div>
       </div>
-      <video-play v-if="openVideo" :channel-id="channelCode"></video-play>
+      <video-play
+        v-if="openVideo"
+        :channel-id="channelCode"
+      ></video-play>
     </div>
- 
-     
-   
   </div>
 </template>
 
@@ -143,72 +109,50 @@ import TiledMap from "./components/tiledMap";
 import { searchCamera } from "@/api/videoSurveillance/index";
 import bus from "@/views/layout/bus";
 import complaintEvent from "./components/ComplaintEvent";
-import EarlyWarning from "./components/EarlyWarning";
+import VideoPlay from './components/VideoPlay'
-import VideoPlay from "./components/VideoPlay";
-import VideoListRight from "./components/VideoListRight";
-import VideoListLeft from "./components/VideoListLeft";
 import VideoList from "./components/VideoList";
-import SiteListMore from "./components/SiteListMore";
+import SiteList from "./components/SiteList";
 import { selectByJdWd } from "@/api/construction/index";
-import {
+import { createSiteListPop,createCameraDetailsPop,createEventListDetailsPop,createImportantAreaPop } from "@/supermap/createMarkerPopup";
-  createSiteListPop,
+import { listPassengerFlow, listPassengerFlowByAllNums } from "@/api/civilizedCity.js";
-  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";
+import HorizonTimeLine from './components/HorizonTimeLine'
 export default {
   data() {
     return {
-      videoVisible:false,
       hiMap: new HieimpMap(), // 地图全局对象
       mapId: "map-single", // 地图容器的id
 
       state: "",
       constructionSiteData: [],
-      changeLayerBtnList: ["AI事件", "视频监控", "聚集区"],
+      changeLayerBtnList: ['AI事件','视频监控', '聚集区'],
-      changeLayerBtnListArea: [
+      changeLayerBtnListArea: ['公园广场','商业街区','景区景点','海水浴场','窗口单位'],
-        "公园广场",
+      changeLayerBtnListHot: ['全市','本市','外地',],
-        "商业街区",
-        "景区景点",
-        "海水浴场",
-        "窗口单位",
-      ],
-      changeLayerBtnListHot: ["全市", "本市", "外地"],
       changeLayerBtnGroup: [],
 
-      thermodynamicPeopleType: "",
+      thermodynamicPeopleType: '',
       thermodynamicPeopleAll: [],
       thermodynamicPeopleLocal: [],
       thermodynamicPeopleNoLocal: [],
-      allListDataNum: "",
+      allListDataNum: '',
       openVideo: false,
       channelCode: [],
       hotDataNum: [],
       // 时间轴
       timelineData: [],
       // 热力图当日数据
-      hotDataAll: {},
+      hotDataAll: {}
-      keyAreasShow: false, //是否显示重点区域。
     };
   },
   components: {
     TiledMap,
     complaintEvent,
-    VideoListRight,
-    VideoListLeft,
     VideoList,
-    SiteListMore,
+    SiteList,
     VideoPlay,
-    HorizonTimeLine,
+    HorizonTimeLine
-    EarlyWarning,
   },
   created() {},
   mounted() {
@@ -218,16 +162,16 @@ export default {
       this.hiMapFun
     );
 
-    bus.$off("openCurrentVideoSurveillance");
+    bus.$off('openCurrentVideoSurveillance')
-    bus.$on("openCurrentVideoSurveillance", (channelCode) => {
+    bus.$on('openCurrentVideoSurveillance', (channelCode) => {
-      this.openVideo = true;
+      this.openVideo = true
-      this.channelCode.unshift(channelCode);
+      this.channelCode.unshift(channelCode)
-    });
+    })
-    bus.$off("openCurrentVideoWaterPoint");
+    bus.$off('openCurrentVideoWaterPoint')
-    bus.$on("openCurrentVideoWaterPoint", (channelCode) => {
+    bus.$on('openCurrentVideoWaterPoint', channelCode => {
-      this.openVideo = true;
+      this.openVideo = true
-      this.channelCode.unshift(channelCode);
+      this.channelCode.unshift(channelCode)
-    });
+    })
     // 根据经纬度查询半径内所有的工地
     bus.$off("openCauseAnalysis");
     bus.$on("openCauseAnalysis", (row) => {
@@ -238,13 +182,11 @@ export default {
       // this.circle(latLng);
       this.hiMap.mapObj.map.flyTo({ lat: row.wd, lng: row.jd });
       // this.WithinRadiusSite(latLng);
-      let dataEvent = [
+      let dataEvent = [{
-        {
           latLng: { lat: row.wd, lng: row.jd },
           data: row,
           type: "site",
-        },
+      }]
-      ];
       this.hiMapFun.addPointsToMap(
         dataEvent,
         "construction.png",
@@ -254,118 +196,115 @@ export default {
     });
   
     bus.$off("roadOnMap");
-    bus.$on("roadOnMap", (roadData) => {
+    bus.$on("roadOnMap",(roadData) => {
       this.roadOnMap(roadData);
-    });
+    })
 
     bus.$off("removeCameraLayer");
-    bus.$on("removeCameraLayer", (type) => {
+    bus.$on("removeCameraLayer",(type) => {
-      this.hiMapFun.removeLayerByLayerName(type);
+      this.hiMapFun.removeLayerByLayerName(type)
-    });
+    })
   
     bus.$off("CameraSingleDataOnMap");
-    bus.$on("CameraSingleDataOnMap", (labelName, data) => {
+    bus.$on("CameraSingleDataOnMap",(labelName,data) => {
-      this.addResourceTomap(labelName, data);
+      this.addResourceTomap(labelName,data);
-    });
+    })
 
-    this.thermodynamic();
+    this.thermodynamic()
-    this.personToday();
+    this.personToday()
-    this.getCurrentTime();
+    this.getCurrentTime()
     // 获取当日全部数据
     for (let i = 0; i < this.timelineData.length; i++) {
-      this.todayAllData(this.timelineData[i].timeId);
+      this.todayAllData(this.timelineData[i].timeId)
     }
    },
   methods: {
-    IsShowLideoVisible(val){
- this.videoVisible=val
-    },
     // 获取年月日
-    getCurrentTime() {
+    getCurrentTime () {
-      const yy = new Date().getFullYear();
+      const yy = new Date().getFullYear()
-      const m = new Date().getMonth() + 1;
+      const m = new Date().getMonth() + 1
-      const mm = m < 10 ? "0" + m : m;
+      const mm = m < 10 ? '0' + m : m
       const dd =
         new Date().getDate() < 10
-          ? "0" + new Date().getDate()
+          ? '0' + new Date().getDate()
-          : new Date().getDate();
+          : new Date().getDate()
 
-      this.gettime = yy + mm + dd;
+      this.gettime = yy + mm + dd
       // console.log(this.gettime);
 
       for (let i = 8; i <= 20; i++) {
         if (i < 10) {
           this.timelineData.push({
-            timeId: this.gettime + "0" + i + "00",
+            timeId: this.gettime + '0' + i + '00',
-            year: i,
+            year: i
-          });
+          })
         } else {
           this.timelineData.push({
-            timeId: this.gettime + i + "00",
+            timeId: this.gettime + i + '00',
-            year: i,
+            year: i
-          });
+          })
         }
       }
       // console.log(this.timelineData);
     },
     // 全部
-    todayAllData(val) {
+    todayAllData (val) {
       const params = {
-        timeId: val,
+        timeId: val
-      };
+      }
-      this.hotDataAll[val] = [];
+      this.hotDataAll[val] = []
       listPassengerFlow(params).then((res) => {
         // console.log(res.data);
         // this.hotDataAll.params = res.data;
-        this.hotDataAll[val] = res.data;
+        this.hotDataAll[val] = res.data
-      });
+      })
       // console.log(this.hotDataAll);
     },
     // 热力图点击事件
-    timeIdData(val) {
+    timeIdData (val) {
       // 清除实时热力图
-      this.hiMapFun.removeLayerByLayerName("thermodynamic");
+      this.hiMapFun.removeLayerByLayerName('thermodynamic')
-      this.hiMapFun.removeLayerByLayerName("types");
+      this.hiMapFun.removeLayerByLayerName('types')
-      const dataA = [];
+      const dataA = []
-      const dataNumber = [];
+      const dataNumber = []
-      const dataMax = [];
+      const dataMax = []
 
-      const listB = this.hotDataAll[val];
+      const listB = this.hotDataAll[val]
-      console.log(listB);
+      console.log(listB)
       // 最大值
       for (let num = 0; num < listB.length; num++) {
-        dataNumber.push(listB[num].allNums);
+        dataNumber.push(listB[num].allNums)
       }
-      const max = Math.max.apply(null, dataNumber);
+      const max = Math.max.apply(null, dataNumber)
-      console.log(max); // 16617
+      console.log(max) // 16617
       listB.forEach((item) => {
-        const arr = [0, 0.0, "", "0", "0.0"];
+        const arr = [0, 0.0, '', '0', '0.0']
         if (arr.indexOf(item.latitude) == -1) {
           dataA.push([
             Number(item.latitude),
             Number(item.longitude),
-            Number((item.allNums / max).toFixed(1)),
+            Number((item.allNums / max).toFixed(1))
-          ]);
+          ])
         }
-      });
+      })
       // 筛选
       dataA.forEach((item) => {
         if (item[2] > 0.1) {
-          dataMax.push(item);
+          dataMax.push(item)
         }
-      });
+      })
 
-      this.hiMapFun.thermodynamic(dataMax, 25, "types");
+      this.hiMapFun.thermodynamic(dataMax, 25, 'types')
       // });
     },
     // 获取热力图的按钮
-    hotName(item) {
+    hotName (item) {
       // console.log(item);
       if (this.checkList.indexOf(item) == -1) {
-        this.checkList.push(item);
+        this.checkList.push(item)
-        this.bottomTabList[3].img = this.bottomTabList[3].imgActive;
+        this.bottomTabList[3].img = this.bottomTabList[3].imgActive
       }
-      console.log(this.checkList);
+      console.log(this.checkList)
     },
     querySearchAsync(queryString, cb) {
       if (queryString.length > 0) {
@@ -375,10 +314,10 @@ export default {
       }
     },
     // 人口聚集今日事件大于5000
-    personToday() {
+    personToday () {
       listPassengerFlowByAllNums().then((res) => {
-        this.hotDataNum = res.data;
+        this.hotDataNum = res.data
-      });
+      })
     },
     handleSelect(item) {
       this.hiMapFun.clearAllLayers();
@@ -483,74 +422,70 @@ export default {
       if (this.changeLayerBtnGroup.indexOf(item) !== -1) {
         switch (item) {
           case "AI事件":
-            this.hiMapFun.removeLayerByLayerName("EventListDetail");
+            this.hiMapFun.removeLayerByLayerName('EventListDetail')
             selectByAreaEvent().then((res) => {
               const dataEvent = [];
               res.data.data.events.forEach((item) => {
-                dataEvent.push({
+                dataEvent.push(
+                  {
                     latLng: { lat: item.latitude, lng: item.longitude },
                     data: item,
                     type: "eventList",
-                });
+                  }
-              });
+                )
-              this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
+              })
-                dataEvent,
+              this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, "poi-event.png", "EventListDetail", createEventListDetailsPop)
-                "poi-event.png",
+            })
-                "EventListDetail",
-                createEventListDetailsPop
-              );
-            });
             break;
           case "视频监控":
-            this.addResourceTomap(
+            this.addResourceTomap('全部',this.$refs.videoListRef.cameraAllData)
-              "全部",
-              this.$refs.videoListRef.cameraAllData
-            );
             break;
           case "聚集区":
-            this.hiMapFun.removeLayerByLayerName("PersonHotDetail");
+            this.hiMapFun.removeLayerByLayerName('PersonHotDetail')
-            const hotEventListDetail = [];
+            const hotEventListDetail = []
             this.hotDataNum.forEach((item) => {
               hotEventListDetail.push({
                 latLng: { lat: item.latitude, lng: item.longitude },
                 data: item,
-                type: "personHot",
+                type: 'personHot'
-              });
+              })
-            });
+            })
             this.hiMapFun.addPointsToMap(
               hotEventListDetail,
-              "poi-blue.png",
+              'poi-blue.png',
-              "PersonHotDetail"
+              'PersonHotDetail'
-            );
+            )
             break;
           case "公园广场":
           case "商业街区":
           case "景区景点":
           case "海水浴场":
           case "窗口单位":
-            this.hiMapFun.removeLayerByLayerName(item);
+            this.hiMapFun.removeLayerByLayerName(item)
-            selectKeyArea({ type: item }).then((res) => {
+            selectKeyArea({ type: item}).then((res) => {
-              if (item === "商业街区") {
+              if(item === '商业街区') {
                 res.data.data.forEach((newItem) => {
-                  if (newItem.point) {
+                  if(newItem.point) {
-                    let arr = JSON.parse(newItem.point);
+                    let arr = JSON.parse(newItem.point)
-                    let areaLatLng = [];
+                    let areaLatLng = []
                     arr.forEach((pointItem) => {
                       let lonLat = gcjLL2wgs84LL(pointItem[0], pointItem[1]);
-                      areaLatLng.push([lonLat[1], lonLat[0]]);
+                      areaLatLng.push([lonLat[1],lonLat[0]])
-                    });
+                    })
-                    this.hiMapFun.addAreaToMap(areaLatLng);
+                    this.hiMapFun.addAreaToMap(areaLatLng)
                   }
-                });
+                })
               } else {
                 const dataEvent = [];
                 res.data.data.forEach((item) => {
-                  dataEvent.push({
+                  dataEvent.push(
+                    {
                       latLng: { lat: item.latitude, lng: item.longitude },
                       data: item,
                       type: "site",
-                  });
+                    }
-                });
+                  )
+                })
                 this.hiMapFun.addPointsToMap(
                   dataEvent,
                   "poi-red.png",
@@ -558,7 +493,7 @@ export default {
                   createImportantAreaPop
                 );
               }
-            });
+            })
             break;
           default:
             break;
@@ -570,19 +505,19 @@ export default {
           case "景区景点":
           case "海水浴场":
           case "窗口单位":
-            if (item === "商业街区") {
+            if(item === '商业街区') {
-              this.hiMapFun.removerPolygon();
+              this.hiMapFun.removerPolygon()
             }
-            this.hiMapFun.removeLayerByLayerName(item);
+            this.hiMapFun.removeLayerByLayerName(item)
             break;
           case "AI事件":
-            this.hiMapFun.removeLayerByLayerName("EventListDetail");
+            this.hiMapFun.removeLayerByLayerName('EventListDetail')
             break;
           case "视频监控":
-            this.hiMapFun.removeLayerByLayerName("全部");
+            this.hiMapFun.removeLayerByLayerName('全部')
             break;
           case "聚集区":
-            this.hiMapFun.removeLayerByLayerName("PersonHotDetail");
+            this.hiMapFun.removeLayerByLayerName('PersonHotDetail')
             break;
           default:
             break;
@@ -590,24 +525,20 @@ export default {
       }
     },
 
-    addResourceTomap(type, data) {
+    addResourceTomap(type,data) {
       const dataEvent = [];
       data.forEach((item) => {
-        const arr = [0, 0.0, "", "0", "0.0"];
+        const arr = [0,0.0,'','0','0.0']
-        if (arr.indexOf(item.gpsX) == -1) {
+        if(arr.indexOf(item.gpsX) == -1){
           dataEvent.push({
             latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) },
             data: item,
-            type: "videoSurveillance",
+            type: 'videoSurveillance'
           });
         }
+        
       });
-      this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
+      this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, "videoSurveillance.png", type, createCameraDetailsPop)
-        dataEvent,
-        "videoSurveillance.png",
-        type,
-        createCameraDetailsPop
-      );
     },
 
     thermodynamic() {
@@ -627,42 +558,37 @@ export default {
           let maxNoLocal = Math.max.apply(null, dataNumberNoLocal);
           data.forEach((item) => {
             const arr = [0, 0.0, "", "0", "0.0"];
-          if (
+            if (arr.indexOf(item.latitude) == -1 && arr.indexOf(item.longitude) == -1) {
-            arr.indexOf(item.latitude) == -1 &&
-            arr.indexOf(item.longitude) == -1
-          ) {
               //全部
-            if (item.allNums !== "0") {
+              if(item.allNums !== '0'){
-              let allNums = Number((item.allNums / max).toFixed(1));
+                let allNums = Number((item.allNums / max).toFixed(1))
-              if (allNums > 0.1) {
+                if(allNums > 0.1){
                   this.thermodynamicPeopleAll.push([
                     Number(item.latitude),
                     Number(item.longitude),
-                  allNums,
+                    allNums
                   ]);
                 }
               }
               //本地
-            if (item.localNums !== "0") {
+              if(item.localNums !== '0'){
-              let localNums = Number((item.localNums / maxLocal).toFixed(1));
+                let localNums =  Number((item.localNums / maxLocal).toFixed(1))
-              if (localNums > 0.1) {
+                if(localNums > 0.1){
                   this.thermodynamicPeopleLocal.push([
                     Number(item.latitude),
                     Number(item.longitude),
-                  localNums,
+                    localNums
                   ]);
                 }
               }
               //外地
-            if (item.nonlocalNums !== "0") {
+              if(item.nonlocalNums !== '0'){
-              let nonlocalNums = Number(
+                let nonlocalNums  = Number((item.nonlocalNums / maxNoLocal).toFixed(1))
-                (item.nonlocalNums / maxNoLocal).toFixed(1)
+                if(nonlocalNums > 0.1){
-              );
-              if (nonlocalNums > 0.1) {
                   this.thermodynamicPeopleNoLocal.push([
                     Number(item.latitude),
                     Number(item.longitude),
-                  nonlocalNums,
+                    nonlocalNums
                   ]);
                 }
               }
@@ -674,55 +600,39 @@ export default {
     clearThermodynamic() {
       this.hiMapFun.removeLayerByLayerName("types");
       this.hiMapFun.removeLayerByLayerName("thermodynamic");
-      this.thermodynamicPeopleType = "";
+      this.thermodynamicPeopleType = ''
     },
     changeThermodynamicPeopleType(value) {
       this.hiMapFun.removeLayerByLayerName("types");
       switch (value) {
-        case "all":
+        case 'all':
           this.hiMapFun.removeLayerByLayerName("thermodynamic");
-          this.hiMapFun.thermodynamic(
+          this.hiMapFun.thermodynamic(this.thermodynamicPeopleAll, 25, "thermodynamic");
-            this.thermodynamicPeopleAll,
-            25,
-            "thermodynamic"
-          );
           break;
-        case "local":
+        case 'local':
           this.hiMapFun.removeLayerByLayerName("thermodynamic");
-          this.hiMapFun.thermodynamic(
+          this.hiMapFun.thermodynamic(this.thermodynamicPeopleLocal, 25, "thermodynamic");
-            this.thermodynamicPeopleLocal,
-            25,
-            "thermodynamic"
-          );
           break;
-        case "noLocal":
+        case 'noLocal':
           this.hiMapFun.removeLayerByLayerName("thermodynamic");
-          this.hiMapFun.thermodynamic(
+          this.hiMapFun.thermodynamic(this.thermodynamicPeopleNoLocal, 25, "thermodynamic");
-            this.thermodynamicPeopleNoLocal,
-            25,
-            "thermodynamic"
-          );
           break;
       }
     },
-    removeRoadCauseAnalysis() {
+    removeRoadCauseAnalysis () {
-      this.hiMapFun.removerPolygon();
+      this.hiMapFun.removerPolygon()
-      this.hiMapFun.removeLayerByLayerName("roadPoint");
+      this.hiMapFun.removeLayerByLayerName('roadPoint')
-      this.hiMapFun.removeLayerByLayerName("EventListDetail");
+      this.hiMapFun.removeLayerByLayerName('EventListDetail')
-      this.hiMapFun.removeLayerByLayerName("PersonHotDetail");
+      this.hiMapFun.removeLayerByLayerName('PersonHotDetail')
       this.hiMapFun.removeLayerByLayerName("thermodynamic");
       this.hiMapFun.removeLayerByLayerName("types");
-      this.hiMapFun.removeLayerByLayerName("全部");
+      this.hiMapFun.removeLayerByLayerName('全部')
-      this.hiMapFun.removeLayerByLayerName("公园广场");
+      this.hiMapFun.removeLayerByLayerName('公园广场')
-      this.hiMapFun.removeLayerByLayerName("商业街区");
+      this.hiMapFun.removeLayerByLayerName('商业街区')
-      this.hiMapFun.removeLayerByLayerName("景区景点");
+      this.hiMapFun.removeLayerByLayerName('景区景点')
-      this.hiMapFun.removeLayerByLayerName("海水浴场");
+      this.hiMapFun.removeLayerByLayerName('海水浴场')
-      this.hiMapFun.removeLayerByLayerName("窗口单位");
+      this.hiMapFun.removeLayerByLayerName('窗口单位')
-    },
+    }
-    //点击是否显示重点区域。
-    handleKeyArea() {
-      this.keyAreasShow = !this.keyAreasShow;
-    },
   },
   beforeDestroy() {},
 };
@@ -734,9 +644,6 @@ export default {
   font-family: 'Tensentype-ZhiHeiJ-W5';
   src: url("../../../assets/construction/TTZhiHeiJ-W5.ttf");
 }
-::v-deep .el-dialog {
-  background: rgba(32,59,93,.8);
-}
 .map-box {
   width: 100%;
   height: 100%;
@@ -750,7 +657,6 @@ export default {
 }
 
 #contain {
- 
   header {
     position: relative;
     z-index: 1000;
@@ -778,7 +684,7 @@ export default {
   .searchPoint {
     position: absolute;
     z-index: 1000;
-    right: 500px;
+    left: 496px;
     top: 90px;
     border: 1px solid rgba(31,254,253,.9);
     ::v-deep .el-input__inner {
@@ -832,24 +738,7 @@ export default {
     width: 478px;
     background: rgba($color: #05213b, $alpha: .85)
   }
-  .complaintContent1 {
+
-   position: absolute;
-    z-index: 1000;
-    right: 10px;
-    top: 90px;
-    height:660px;
-    width: 478px;
-    background: rgba($color: #05213b, $alpha: .85)
-  }
- .mainVideoList{
-    position: absolute;
-    z-index: 10;
-    right: 10px;
-    top: 760px;
-    width: 478px;
-    height:200px;
-    background: rgba($color: #05213b, $alpha: .85);
-}
   .eventNum {
     width: 245px;
     height: 92px;
@@ -876,21 +765,6 @@ export default {
       }
     }
   }
-  .keyAreas {
-    width: 100px;
-    height: 40px;
-    position: absolute;
-    cursor: pointer;
-    top: 110px;
-    left: 498px;
-    z-index: 1000;
-    background-color: #1A69B2;
-    text-align: center;
-    padding: 6px 0 13px 0;
-    font-size: 16px;
-    color:#fff;
-  }
-
 
   .videoList {
     position: absolute;
@@ -905,18 +779,9 @@ export default {
   .siteList {
     position: absolute;
     z-index: 10;
-    left: 498px;
+    right: 8px;
-    top: 175px;
+    top: 562px;
-    width: 574px;
+    width: 398px;
-    height:500px;
-    background: rgba($color: #05213b, $alpha: .85);
-  }
-  .siteList1 {
-    position: absolute;
-    z-index: 10;
-    right: 498px;
-    top: 185px;
-    width: 374px;
     height:500px;
     background: rgba($color: #05213b, $alpha: .85);
   }

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

@@ -0,0 +1,543 @@
+<template>
+  <div class="box">
+    <header>
+      <div class="title">事件感知</div>
+    </header>
+    <div class="toady-list">
+      <div class="toady-list-content">
+        <div class="toady-list-rotate"></div>
+        <div class="toady-list-icon"></div>
+        <div class="toady-list-num">今日事件<span> {{todayListNum}} </span>件</div>
+      </div>
+    </div>
+    <div class="tab-box">
+      <div class="tabs-button">
+        <div class="tabs-button-box">
+          <div  class="tabs-button-btn"
+                @click="tabHandleClick(item)"
+                v-for="item in tabsButton" 
+                :key="item.index"
+                :class="tabsActiveName == item?'tabs-button-btn-active' : ''"
+                >
+            {{item}}
+          </div>
+        </div>
+        <div class="statisticalAnalysisBtn" @click="openStatisticalAnalysis"> 统计分析 ></div>
+      </div>
+      <!-- <div class="filter-btn-box" v-show="tabsActiveName !== '走航监测'">
+        <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 class="filter-btn-processStateSelect">
+          <div  class="processStateSelect-btn" 
+                v-for="item in filterButton.processStateSelect" 
+                :key="item"
+                :class="filterButton.processStateSelectActive == item ? 'processStateSelect-btn-active' : ''"
+                @click="processStateSelect(item)"
+                >
+            <div class="select-circle"></div>
+            <div class="processStateSelect">{{item}}</div>
+          </div>
+        </div>
+      </div> -->
+      <el-dropdown trigger="click">
+        <span class="el-dropdown-link">
+          {{ listTypeSelect || '全部'}}<i class="el-icon-arrow-down el-icon--right"></i>
+        </span>
+        <el-dropdown-menu slot="dropdown" class="dropdownCss">
+          <el-dropdown-item
+            v-for="(item, index) in EventBtns"
+            :key="index"
+            @click.native="EventBtnsClick(item)"
+            >{{ item }}
+          </el-dropdown-item
+          >
+        </el-dropdown-menu>
+      </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">
+            <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>
+          </div>
+        </div>
+        <!-- <el-pagination
+          v-if="total==0"
+          background
+          layout="prev, pager, next"
+          @current-change="pageChange"
+          :page-size = 4
+          :total="total"
+          :current-page="currentPage"
+          >
+        </el-pagination> -->
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          @current-change="pageChange"
+          :page-size = 4
+          :total="total"
+          :current-page="currentPage"
+          >
+        </el-pagination>
+      </div>
+    </div>
+    <statistical-analysis v-if="statisticalAnalysisIsShow" class="statisticalAnalysis" @closeDialog='statisticalAnalysisIsShow = false'></statistical-analysis>
+  </div>
+</template>
+<script>
+import { selectByAreaEvent, selectByNameAreaEvent, selectByDayAreaEvent } from "@/api/area";
+import StatisticalAnalysis from "./StatisticalAnalysis.vue";
+import bus from "@/views/layout/bus";
+export default {
+  data() {
+    return {
+      tabsButton: ["视频感知",],
+      tabsActiveName: "视频感知",
+      statisticalAnalysisIsShow: false,
+      filterButton:{
+        typeSelect:['事件','事件1'],
+        typeSelectActive:'事件',
+        processStateSelect:['全部','未派发','未处置','已处置'],
+        processStateSelectActive:'全部',
+      },
+      eventListData: [],
+      preTime: "",
+      // pageCount: 0,
+      total:0,
+      currentPage:1,
+      roadData:[],
+      listTypeSelect: "全部",
+      EventBtns: ["全部","占道经营","渣土车发现","违章停车","环境卫生","沿街晾晒","渣土车未密闭","道路积水事件",],
+
+      todayListNum:0,
+    };
+  },
+  components: {
+    StatisticalAnalysis,
+  },
+  created() {
+    const currentDate = new Date();
+    currentDate.setTime(currentDate.getTime());
+    currentDate.setTime(currentDate.getTime() - 24 * 60 * 60 * 1000);
+    this.preTime =
+      currentDate.getFullYear() +
+      "-" +
+      (currentDate.getMonth() + 1) +
+      "-" +
+      currentDate.getDate() +
+      " " +
+      "00:00:00";
+  },
+  mounted() {
+    const params = {
+        page: 1,
+        pageSize: 4,
+    };
+    selectByAreaEvent(params).then((res) => {
+      this.eventListData = res.data.data.events
+      this.total = res.data.data.sum
+      this.$parent.allListDataNum = res.data.data.sum;
+    });
+
+    selectByDayAreaEvent().then((res)=>{
+      if(res.data.data.sum){
+        this.todayListNum = res.data.data.sum
+      }
+    })
+  },
+  methods: {
+    tabHandleClick(item) {
+      this.tabsActiveName = item
+      if(item == '视频感知'){
+        
+      }
+      if(item == '物联感知'){
+        this.filterButton.typeSelect = ['工地扬尘','工地噪声']
+        this.typeSelectActive = '工地扬尘'
+      }
+      if(item == '走航监测'){
+        this.selectRoadData()
+      }
+    },
+    openStatisticalAnalysis() {
+      this.statisticalAnalysisIsShow = true
+    },
+    typeSelect(item) {
+      this.filterButton.typeSelectActive = item
+    },
+    processStateSelect(item) {
+      this.filterButton.processStateSelectActive = item
+    },
+    //分页
+    pageChange(val) {
+      this.currentPage = val
+      if(this.listTypeSelect == '全部'){
+        selectByAreaEvent({ pageSize: 4,page: val,}).then((res) => {
+          this.eventListData = res.data.data.events
+          this.total = res.data.data.sum
+        });
+      } else {
+        selectByNameAreaEvent({eventNewName: this.listTypeSelect, pageSize: 4,page: val,}).then((res) => {
+          // res.data.data.sort(this.compare("captureTime", "inverted"));
+          // console.log(res.data.data)
+          this.eventListData = res.data.data.events;
+          this.total = res.data.data.sum
+          // this.pageCount = 0
+        })
+      }
+    },
+
+    EventBtnsClick(item) {
+      this.currentPage = 1
+      this.listTypeSelect = item;
+      if(item == '全部'){
+        selectByAreaEvent({ pageSize: 4,page: 1,}).then((res) => {
+          this.eventListData = res.data.data.events
+          this.total = res.data.data.sum
+        });
+      } else {
+        selectByNameAreaEvent({eventNewName: item, pageSize: 4,page: 1,}).then((res) => {
+          // res.data.data.sort(this.compare("captureTime", "inverted"));
+          // console.log(res.data.data)
+          this.eventListData = res.data.data.events;
+          this.total = res.data.data.sum
+          // this.pageCount = 0
+        })
+      }
+    },
+
+    openDetailsDialog(data) {
+      this.$parent.hiMapFun.removeLayerByLayerName('EventListDetail')
+      const EventListDetail = [
+        {
+          latLng: { lat: data.latitude, lng: data.longitude },
+          data: data,
+          type: "eventList",
+        },
+      ];
+      this.$parent.hiMap.mapObj.map.flyTo({ lat: data.latitude, lng: data.longitude });
+      this.$parent.hiMapFun.openPopupVideoSurveillance(EventListDetail[0]);
+      this.$parent.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
+        EventListDetail,
+        "poi-event.png",
+        "EventListDetail"
+      );
+    }
+  },
+};
+</script>
+<style lang='scss' scoped>
+
+@font-face {
+  font-family: 'Tensentype-ZhiHeiJ-W5';
+  src: url("../../../../assets/construction/TTZhiHeiJ-W5.ttf");
+}
+@font-face {
+  font-family: 'DIN-Bold';
+  src: url("../../../../assets/construction/DIN-Bold.otf");
+}
+.box {
+  position: relative;
+  header {
+    width: 100%;
+    height: 44px;
+    background: url(../../../../assets/construction/subTitle.png) no-repeat center;
+    text-align: center;
+    .title {
+      font-size: 26px;
+      font-weight: bold;  
+      background: linear-gradient(0deg, #9dbbd2 0%, #ffffff 100%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      font-family: 'Tensentype-ZhiHeiJ-W5';
+    }
+    .title::before {
+      content: '事件感知';
+      text-shadow: 0px 2px 5px rgba($color: #091a29, $alpha: .6);
+      position: absolute;
+      z-index: -1;
+    }
+  }
+  .toady-list {
+    width:100%;
+    height:132px;
+    background: url(../../../../assets/construction/toadyListBgi.png) no-repeat center top;
+    .toady-list-content {
+      margin-left: 80px;
+      height:128px;
+      position: relative;
+      .toady-list-rotate {
+        position: absolute;
+        width: 128px;
+        height: 128px;
+        background: url(../../../../assets/construction/rotateBgi.png) no-repeat;
+        animation: routation 20s linear infinite;
+      }
+      .toady-list-icon {
+        position: absolute;
+        width: 128px;
+        height: 128px;
+        background: url(../../../../assets/construction/toadyListIcon.png) no-repeat;
+      }
+      .toady-list-num {
+        position: absolute;
+        width: 248px;
+        height: 72px;
+        top: 20px;
+        left: 100px;
+        background: url(../../../../assets/construction/toadyListBgi2.png) no-repeat;
+        color: #fff;
+        line-height: 72px;
+        text-align: center;
+        font-size: 18px;
+        span {
+          font-size: 38px;
+          font-weight: bold;
+          background: linear-gradient(180deg, #ff9fa8 0%, #fff 100%);
+          background-clip: text;
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          font-family: 'DIN-Bold';
+        }
+      }
+    }
+  }
+  
+  @keyframes routation {
+    0%{
+			transform:rotate(0deg);
+		}
+		100%{
+			transform:rotate(360deg);
+		}
+  }
+
+  .tab-box {
+    margin:0 10px;
+
+    .tabs-button {
+      position: relative;
+      .tabs-button-box {
+        width: 340px;
+        padding-bottom: 11px;
+        border-bottom: 3px solid #2c619c;
+        display: flex;
+        align-items: center;
+        // justify-content: space-around;
+        .tabs-button-btn {
+          font-size: 18px;
+          color: rgba($color: #fff, $alpha: 0.6);
+          position: relative;
+          cursor: pointer;
+        }
+        .tabs-button-btn-active {
+          font-size: 20px;
+          color: #fff;
+        }
+        .tabs-button-btn-active::after {
+          content: '';
+          position: absolute;
+          bottom: -15px;
+          // right: 24%;
+          right: 6%;
+          width: 64px;
+          height: 5px;
+          border-radius: 5px;
+          background-color: #1ffffc;
+        }
+      }
+      .statisticalAnalysisBtn {
+        position: absolute;
+        top: 5px;
+        right: 0px;
+        width: 96px;
+        height: 28px;
+        font-size: 16px;
+        color: #1ffefd;
+        line-height: 28px;
+        text-align: center;
+        border: 1px solid rgba(31, 254, 253, .6);
+        border-radius: 14px;
+        cursor: pointer;
+      }
+    }
+
+    .filter-btn-box {
+      margin-top: 16px;
+      .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;
+        }
+      }
+      .filter-btn-processStateSelect {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 12px;
+        color: #fff;
+        .processStateSelect-btn {
+          display: flex;
+          align-items: center;
+          margin-left: 24px;
+          cursor: pointer;
+          .select-circle {
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            border: 1px solid #00ffff;
+            position: relative;
+          }
+          .processStateSelect {
+            margin-left: 8px;
+          }
+        }
+        .processStateSelect-btn-active {
+          .select-circle::after {
+            content: "";
+            width: 8px;
+            height: 8px;
+            background: #00ffff;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            margin: auto;
+            border-radius: 50%;
+          }
+        }
+      }
+    }
+
+    .event-list {
+      // margin-top: 12px;
+      // margin-top: 30px;
+      width: 100%;
+      height: 670px;
+      position: relative;
+
+      .event-details {
+        cursor: pointer;
+        margin-top: 16px;
+        // margin-top: 18px;
+        width: 100%;
+        height: 140px;
+        padding-right: 8px;
+        background: linear-gradient(90deg, #173759 0, #133150 100%);
+        .event-details-title {
+          height: 36px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          span:nth-child(1) {
+            width: 140px;
+            padding-left: 10px;
+            color: #1ffefd;
+            font-size: 18px;
+            font-weight: bold;
+            line-height: 36px;
+            background: linear-gradient(90deg, rgba($color: #0873c1, $alpha: 1) 0, rgba($color: #0873c1, $alpha: 0) 100%);
+          }
+          span:nth-child(2) {
+            color: rgba(255,255,255,.6);
+            padding-left: 80px;
+          }
+          span:nth-child(3) {
+            width: 49px;
+            height: 20px;
+            text-align: center;
+            line-height: 20px;
+            background: #ae761c;
+            border-radius: 2px;
+            font-size: 14px;
+            color: #fff;
+          }
+        }
+        .event-details-des {
+          padding: 8px 0 0 12px;
+          font-size: 16px;
+          h5 {
+            font-weight: normal;
+            padding-left: 18px;
+            color: rgba(255,255,255, .6);
+            background: url(../../../../assets/construction/iconAddress.png) no-repeat left center;
+          }
+          p {
+            color: rgba(255,255,255, .8);
+            line-height: 28px;
+            overflow:hidden; 
+            text-overflow:ellipsis;
+            display:-webkit-box; 
+            -webkit-box-orient:vertical;
+            -webkit-line-clamp:1; 
+          }
+        }
+      }
+
+      ::v-deep .el-pagination {
+        position: absolute;
+        left: 50%;
+        bottom: 0px;
+        transform: translateX(-50%);
+        // margin-top: 16px;
+        button, ul>li {
+          width: 28px;
+          height: 28px;
+          border-radius: 2px;
+          border: 1px solid rgba(31,254,253, .5);
+          background: transparent;
+          color: rgba(31,254,253, .5);
+        }
+        li:not(.disabled).active {
+          color: #fff;
+          border: 1px solid rgba(31,254,253, .5);
+          background: rgba(31,254,253, .5);
+        }
+      }
+    }
+  }
+
+  .statisticalAnalysis {
+    position: absolute;
+    left: 486px;
+    top: 0;
+    width: 400px;
+    height: 878px;
+    background: rgba(24,51,76,.95);
+    border: 1px solid rgba(50,227,235,.95);
+    box-shadow: 0 0 10px  rgba($color: #1ffefd, $alpha: .4);
+  }
+
+  ::v-deep .el-dropdown {
+    margin-top: 10px;
+    .el-dropdown-link {
+        cursor: pointer;
+        color: #fff;
+      }
+  }
+}
+</style>

src/views/pages/areaMonitor/components/EarlyWarning.vue

@@ -0,0 +1,429 @@
+<!--  -->
+<template>
+    <div class="early-warning">
+        <header>
+            <div class="title">监测预警</div>
+        </header>
+        <div class="select-date">
+            <div
+                @click="tabsHandleClick(item)"
+                v-for="item in dateTabs"
+                :key="item.index"
+            >
+                <p>{{ item.name }}</p>
+                <p>{{ item.dataNum || "71" }}</p>
+            </div>
+        </div>
+        <div class="event-source">
+            <div class="event-source-title">事件来源：</div>
+            <div>
+                <el-radio v-model="checkStatus" label="0">全部</el-radio>
+                <el-radio v-model="checkStatus" label="1"
+                    >数据智能监测</el-radio
+                >
+                <el-radio v-model="checkStatus" label="2">视频感知</el-radio>
+            </div>
+        </div>
+        <div class="type-status">
+            <span>日期：</span>
+            <el-date-picker
+                v-model="dataValue"
+                type="date"
+                placeholder="选择日期"
+            >
+            </el-date-picker>
+        </div>
+        <div class="type-status">
+            <span>重点区域类型：</span>
+            <el-select
+                v-model="typevalue"
+                class="selectclass"
+                placeholder="请选择"
+            >
+                <el-option
+                    v-for="item in typeoptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                >
+                </el-option>
+            </el-select>
+            <span>事件状态：</span>
+            <el-select
+                v-model="statusvalue"
+                class="selectclass"
+                placeholder="请选择"
+            >
+                <el-option
+                    v-for="item in statusoptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                >
+                </el-option>
+            </el-select>
+        </div>
+        <div class="event-list">
+            <div class="event-details" v-for="item in eventListData" :key="item.index" @click="openDetailsDialog(item)">
+                <div class="event-details-title">
+                    <p>{{item.eventNewName||''}}</p>
+                    <span>数据智能检测</span>
+                    <span>城市广场</span>
+                    <span>已下发</span>
+                </div>
+                <div class="event-details-des">
+                    <p>人数:12</p>
+                    <p>{{ item.captureTime || ''}}</p>
+                </div>
+            </div>
+            <el-pagination
+                background
+                layout="prev, pager, next"
+                @current-change="pageChange"
+                :page-size = "pageSize"
+                :total="total"
+                :current-page="currentPage"
+            >
+            </el-pagination>
+      </div>
+    </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+import {
+    selectByAreaEvent,
+    selectByNameAreaEvent,
+    selectByDayAreaEvent,
+} from "@/api/area";
+
+export default {
+    //import引入的组件需要注入到对象中才能使用
+    components: {},
+    data() {
+        //这里存放数据
+        return {
+            dateTabs: [
+                {
+                    name: "今日事件",
+                    data: [],
+                    dataNum: "",
+                },
+                {
+                    name: "数据智能监测",
+                    data: [],
+                    dataNum: "",
+                },
+                {
+                    name: "视频感知",
+                    data: [],
+                    dataNum: "",
+                },
+            ],
+            checkStatus: "2",
+            dataValue: "",
+            typevalue: "",
+            typeoptions: [
+                {
+                    value: "1",
+                    label: "全部",
+                },
+                {
+                    value: "2",
+                    label: "海水浴场",
+                },
+                {
+                    value: "3",
+                    label: "城市广场",
+                },
+                {
+                    value: "4",
+                    label: "商业街区",
+                },
+            ],
+            statusvalue: "",
+            statusoptions: [
+                {
+                    value: "1",
+                    label: "全部",
+                },
+                {
+                    value: "2",
+                    label: "待下发",
+                },
+                {
+                    value: "3",
+                    label: "已下发",
+                },
+                {
+                    value: "4",
+                    label: "已忽略",
+                },
+            ],
+            eventListData: [],
+            total:0,
+            pageSize:6,
+            currentPage:1,
+
+
+        };
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {
+        checkStatus(newV, oldV) {
+            console.log(newV);
+            // this.$refs.tree.filter(newV);
+        },
+    },
+    //方法集合
+    methods: {
+        tabsHandleClick(item) {
+            // debugger
+            // this.hiMapFun.removeLayerByLayerName('roadPoint')
+            this.tableData = item.data;
+            // this.addToMap(item.data)
+        },
+          //分页
+        pageChange(val) {
+            this.currentPage = val
+            // if(this.listTypeSelect == '全部'){
+                selectByAreaEvent({ pageSize: this.pageSize,page: val,}).then((res) => {
+                this.eventListData = res.data.data.events
+                this.total = res.data.data.sum
+                });
+            // } else {
+            //     selectByNameAreaEvent({eventNewName: this.listTypeSelect, pageSize: 4,page: val,}).then((res) => {
+            //     this.eventListData = res.data.data.events;
+            //     this.total = res.data.data.sum
+            //     // this.pageCount = 0
+            //     })
+            // }
+        },
+        openDetailsDialog(data) {
+            this.$parent.hiMapFun.removeLayerByLayerName('EventListDetail')
+            const EventListDetail = [
+                {
+                latLng: { lat: data.latitude, lng: data.longitude },
+                data: data,
+                type: "eventList",
+                },
+            ];
+            this.$parent.hiMap.mapObj.map.flyTo({ lat: data.latitude, lng: data.longitude });
+            this.$parent.hiMapFun.openPopupVideoSurveillance(EventListDetail[0]);
+            this.$parent.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
+                EventListDetail,
+                "poi-event.png",
+                "EventListDetail"
+            );
+        }
+    },
+    //生命周期 - 创建完成（可以访问当前this实例）
+    created() {},
+    //生命周期 - 挂载完成（可以访问DOM元素）
+    mounted() {
+        // 查询检测预警。
+        const params = {
+            page: 1,
+            pageSize: this.pageSize,
+        };
+        selectByAreaEvent(params).then((res) => {
+            this.eventListData = res.data.data.events;
+            this.total = res.data.data.sum;
+            this.$parent.allListDataNum = res.data.data.sum;
+        });
+    },
+    beforeCreate() {}, //生命周期 - 创建之前
+    beforeMount() {}, //生命周期 - 挂载之前
+    beforeUpdate() {}, //生命周期 - 更新之前
+    updated() {}, //生命周期 - 更新之后
+    beforeDestroy() {}, //生命周期 - 销毁之前
+    destroyed() {}, //生命周期 - 销毁完成
+    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+.early-warning {
+    display: flex;
+    flex-direction: column;
+    header {
+        width: 100%;
+        height: 44px;
+        background: url(../../../../assets/construction/subTitle.png) no-repeat
+            center;
+        text-align: center;
+        .title {
+            font-size: 26px;
+            font-weight: bold;
+            background: linear-gradient(0deg, #9dbbd2 0%, #ffffff 100%);
+            background-clip: text;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            font-family: "Tensentype-ZhiHeiJ-W5";
+        }
+        .title::before {
+            content: "事件感知";
+            text-shadow: 0px 2px 5px rgba($color: #091a29, $alpha: 0.6);
+            position: absolute;
+            z-index: -1;
+        }
+    }
+    .select-date {
+        margin: 20px 0;
+        display: flex;
+        justify-content: space-evenly;
+        div {
+            width: 100px;
+            height: 68px;
+            background: url("~@/assets/img/roadGovernancebg.png") no-repeat;
+            background-size: 100% 100%;
+            text-align: center;
+            cursor: pointer;
+            p:nth-child(1) {
+                color: #fff;
+                margin-top: 10px;
+                font-size: 16px;
+            }
+            p:nth-child(2) {
+                margin-top: 4px;
+                font-size: 18px;
+                font-weight: bold;
+                color: #66ffff;
+            }
+        }
+        div:nth-child(2) {
+            margin: 0 20px;
+        }
+    }
+    .event-source {
+        display: flex;
+        color: #fff;
+        align-items: center;
+        .event-source-title {
+            margin: 0 20px 0 10px;
+            font-size: 16px;
+        }
+        ::v-deep .el-radio {
+            color: #fff;
+        }
+    }
+    .type-status {
+        display: flex;
+        padding: 5px 0px;
+        color: #fff;
+        align-items: center;
+        span {
+            font-size: 16px;
+            margin-left: 10px;
+        }
+        .selectclass {
+            width: 125px;
+        }
+        ::v-deep .el-input__inner {
+            background-color: transparent !important;
+            border-color: #107bb0;
+            box-shadow: 1px 1px 5px 1px RGB(16, 123, 176, 0.8) inset;
+            height: 30px;
+            color: #fff;
+        }
+        ::v-deep .el-input__icon {
+            line-height: 30px;
+        }
+    }
+
+    .event-list {
+      // margin-top: 12px;
+      // margin-top: 30px;
+      width: 100%;
+      padding:0px 10px;
+      height: 670px;
+      position: relative;
+
+      .event-details {
+        cursor: pointer;
+        margin-top: 16px;
+        // margin-top: 18px;
+        width: 100%;
+        height: 80px;
+        padding-right: 8px;
+        background: linear-gradient(90deg, #173759 0, #133150 100%);
+        .event-details-title {
+          height: 36px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          p {
+            width: auto;
+            padding-left: 10px;
+            color: #1ffefd;
+            font-size: 18px;
+            font-weight: bold;
+            line-height: 36px;
+            background: linear-gradient(90deg, rgba($color: #0873c1, $alpha: 1) 0, rgba($color: #0873c1, $alpha: 0) 100%);
+          }
+          span{
+            width: auto;
+            padding:0px 10px;
+            height: 20px;
+            text-align: center;
+            line-height: 20px;
+            border-radius: 2px;
+            font-size: 14px;
+            color: #fff;
+          }
+          span:nth-child(1) {
+            background: #ae761c;
+          }
+          span:nth-child(2) {
+            background: #3B5E6E;
+          }
+          span:nth-child(3) {
+            background: #022587;
+          }
+          span:nth-child(4) {
+            background: #ae761c;
+          }
+        }
+        .event-details-des {
+          padding: 8px 0 0 12px;
+          font-size: 16px;
+          display: flex;
+          p {
+            width:50%;
+            color: rgba(255,255,255, .8);
+            line-height: 28px;
+            overflow:hidden; 
+            text-overflow:ellipsis;
+            display:-webkit-box; 
+            -webkit-box-orient:vertical;
+            -webkit-line-clamp:1; 
+          }
+        }
+      }
+
+      ::v-deep .el-pagination {
+        position: absolute;
+        left: 50%;
+        bottom: 0px;
+        transform: translateX(-50%);
+        // margin-top: 16px;
+        button, ul>li {
+          width: 28px;
+          height: 28px;
+          border-radius: 2px;
+          border: 1px solid rgba(31,254,253, .5);
+          background: transparent;
+          color: rgba(31,254,253, .5);
+        }
+        li:not(.disabled).active {
+          color: #fff;
+          border: 1px solid rgba(31,254,253, .5);
+          background: rgba(31,254,253, .5);
+        }
+      }
+    }
+}
+</style>

src/views/pages/areaMonitor/components/HorizonTimeLine.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="m-timeline-wrap">
+    <div class="m-time-dot">
+      <div
+        :class="['m-dot-box', { active: active == item.year }]"
+        @click="onClickYear(item)"
+        v-for="(item, index) in timelineData"
+        :key="index"
+      >
+        <p class="u-year">{{ item.year }}</p>
+        <div class="m-dot">
+          <div class="u-dot"></div>
+        </div>
+        <!-- 演示按钮 -->
+      </div>
+      <!-- <el-button
+        class="shoWToday"
+        @click="shoWTodayClick"
+        icon="el-icon-video-play"
+        >播放</el-button> -->
+      <div class="shoWToday" @click="shoWTodayClick"><div></div></div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "HorizonTimeLine",
+  props: {
+    timelineData: {
+      // 时间轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    // activeYear: {
+    //   // 初始选中年份
+    //   type: String,
+    //   default: "12:00",
+    // },
+  },
+  data() {
+    return {
+      active: this.activeYear,
+      gettime: "",
+      index: 0,
+      time: null,
+    };
+  },
+  methods: {
+    onClickYear(item) {
+      console.log("onClickYear==========》", item);
+      if (this.active !== item.year) {
+        this.active = item.year;
+        // console.log("hello", item.year);
+      }
+      this.$emit("timeId", item.timeId);
+    },
+    shoWTodayClick() {
+      this.$emit("hotName", "人流热力");
+      // debugger;
+      console.log("点击==========》", this.timelineData[this.index]);
+      this.onClickYear(this.timelineData[this.index]);
+      this.index++;
+      this.time = setInterval(() => {
+        console.log("时间轴数据===========》", this.timelineData, this.index);
+        if (this.index == this.timelineData.length) {
+          console.log("清空定时器");
+          this.onClickYear("");
+          this.$emit("hot");
+          this.index = 0;
+          clearInterval(this.time);
+        } else {
+          console.log("点击==========》", this.timelineData[this.index]);
+          this.onClickYear(this.timelineData[this.index]);
+          this.index++;
+        }
+      }, 200);
+      console.log(this.timelineData);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+$themecolor: #3c657c;
+.m-timeline-wrap {
+  // min-width: 120px;
+  width: 520px;
+  min-width: 520px;
+  height: 3px;
+  background: #3c657c;
+  .shoWToday {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background: #3c657c;
+    cursor: pointer;
+    position: relative;
+    top: -15px;
+    left: 10px;
+    div {
+      position: absolute;
+      left: 13px;
+      top: 6px;
+      width: 0px;
+      height: 0px;
+      border: 8px solid;
+      border-color: transparent transparent transparent #fff;
+      transition: all 0.3s;
+    }
+    div:hover{
+      border-color: transparent transparent transparent #66FFFF;
+    }
+  }
+  .m-time-dot {
+    display: flex;
+    justify-content: space-around;
+    .m-dot-box {
+      cursor: pointer;
+      text-align: center;
+      transform: translateY(-39px);
+      .u-year {
+        font-size: 15px;
+        font-weight: 500;
+        color: #3c657c;
+        transition: all 0.3s ease-in-out;
+      }
+      .m-dot {
+        margin: 0 auto;
+        margin-top: 10px;
+        width: 14px;
+        height: 14px;
+        background: #3c657c;
+        border-radius: 50%;
+        transition: all 0.3s ease-in-out;
+        .u-dot {
+          width: 14px;
+          height: 14px;
+          background: #3c657c;
+          border-radius: 50%;
+          transition: all 0.3s ease-in-out;
+        }
+      }
+    }
+    .m-dot-box:hover {
+      .u-year {
+        color: $themecolor;
+      }
+      .m-dot {
+        .u-dot {
+          background: $themecolor;
+        }
+      }
+    }
+    .active {
+      .u-year {
+        transform: scale(1) translateY(-18px); // 同时设置多个transform属性只需用空格间隔，执行时从后往前执行！
+        color: $themecolor;
+      }
+      .m-dot {
+        transform: scale(2);
+        .u-dot {
+          transform: scale(0.67);
+          background: $themecolor;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/pages/areaMonitor/components/ImportantAreaPopBack.vue

@@ -0,0 +1,511 @@
+<template>
+  <div class="pop-box">
+    <div class="title-bg"></div>
+    <div class="title">
+      <span>{{ feature.data.areaName || "" }}</span>
+    </div>
+    <div class="site-address">{{ feature.data.location || "" }}</div>
+    <div class="site-content">
+      <div class="site-content-left">
+        <div>
+          <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>
+              <p><span>{{ feature.data.noice || "" }}</span>dB</p>
+            </div>
+          </div>
+          <div class="raise-dust">
+            <img src="../../../../assets/construction/raiseDust.png" alt="">
+            <div>
+              <p>扬尘</p>
+              <p><span>{{ feature.data.pm10 || "" }}</span>ug/m<sup>3</sup> </p>
+            </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="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="this.picUrl" style="width:100%;height:100%;" :src="this.picUrl" :preview-src-list="[this.picUrl]" alt="" />
+          <span v-else>暂无图片</span>
+        </div>
+        <div class="video-table">
+          <h4>周边监控</h4>
+          <el-table
+            :data="cameraData"
+            @row-click="openVideo"
+            :cell-style="{
+              color: '#fff',
+              cursor: 'pointer',
+              'background-color': '#18304c',
+              borderColor: '#325d94'
+            }"
+            :header-cell-style="{
+              color: '#1ffefd',
+              borderColor: '#325d94',
+              'background-color': '#2b4b7a',
+            }"
+          >
+            <el-table-column align="center" width="64" label="序号" type="index" style="text-align: center">
+            </el-table-column>
+            <el-table-column prop="cameraName" label="设备名称" show-overflow-tooltip></el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</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 { selectLocalWeekArea, selectLocalMonthArea, selectByAreaImage } from '@/api/area.js'
+export default {
+  name: "",
+  props: {
+    feature: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  mounted() {
+    selectLocalWeekArea({areaName: this.feature.data.areaName}).then((res) => {
+      res.data.data.forEach((item) => {
+        this.weekData.time.unshift(item.pushTime)
+        this.weekData.local.unshift(item.localNums)
+        this.weekData.outer.unshift(item.nonlocalNums)
+      })
+      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)
+      })
+    })
+    selectByAreaImage({areaName: this.feature.data.areaName}).then((res) => {
+      let returnData = res.data.data
+      if (returnData.length) {
+        this.picUrl = returnData[0].picUrl
+        this.cameraData.push({
+          cameraName: returnData[0].channelName,
+          channelCode: returnData[0].channelCode
+        })
+      }
+    })
+  },
+  data() {
+    return {
+      filterButton:{
+        typeSelect:['近7天','近30天',],
+        typeSelectActive:'近7天',
+      },
+      cameraData: [],
+      weekData:{
+        time:[],
+        local:[],
+        outer:[],
+      },
+      monthData:{
+        time:[],
+        local:[],
+        outer:[],
+      },
+      chartData:{},
+      picUrl: ''
+    };
+  },
+  methods: {
+    // particularsClick(data){
+    //   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
+      if(item == '近7天'){
+        this.chartData = this.weekData
+      }
+      if(item == '近30天'){
+        this.chartData = this.monthData
+      }
+      this.initCharts()
+    },
+    openVideo(row){
+      bus.$emit('openCurrentVideoWaterPoint',row.channelCode)
+    },
+    initCharts () {
+      const option = {
+        grid: {
+          bottom: 34,
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        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',
+            minInterval : 1,
+            name: '人',
+            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']
+              }
+            }
+          }
+        ],
+        color: ['#309afe','#fab228'],
+        legend: {
+          right: '16%',
+          top: '12%',
+          icon: 'line',
+          data: ['本地人数','外地人数',],
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        series: [
+          {
+            name: '本地人数',
+            data: this.chartData.local,
+            type: 'bar',
+            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.outer,
+            type: 'bar',
+            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()
+    },
+  },
+  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: 6px 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;
+            .left-mid-line {
+              margin: 6px 0;
+            }
+            .area-content-left-top {
+              width: 100%;
+              height: 50px;
+              background: linear-gradient(0deg, rgba($color: #255287, $alpha: 0) 0, rgba($color: #255287, $alpha: 1) 100%);
+              display: flex;
+              justify-content: space-around;
+              align-items: center;
+              & > div {
+                text-align: center;
+                > div:first-child {
+                  color: #1ffefd;
+                }
+                > div:last-child {
+                  color: rgba(255, 255, 255,.6);
+                  font-size: 14px;
+                }
+              }
+            }
+            .site-content-left-bottom {
+              width: 100%;
+              margin-top: 16px;
+              .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;
+            .img-container {
+              width: 280px;
+              height: 158px;
+              cursor: pointer;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            }
+            .video-table {
+              margin-top: 20px;
+              h4 {
+                color: #fff;
+              }
+              .el-table{
+                margin-top: 8px;
+                border: 1px solid #325d94;
+                .el-table__body-wrapper{
+                  height: 90px;
+                  overflow-y: auto;
+                  background: #18304c;
+                  &::-webkit-scrollbar {
+                  width: 8px;
+                  background-color: #10335e;
+                  }
+                  &::-webkit-scrollbar-thumb {
+                    background-color: #446dac !important;
+                  }
+                  .el-table__empty-block {
+                    background: rgba(24,51,76,.95);
+                  }
+                }
+                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/areaMonitor/components/SiteList.vue

@@ -0,0 +1,399 @@
+<template>
+  <div class="box">
+    <div class="title">重点区域列表</div>
+    <!-- 工地列表 -->
+    <div class="eventData">
+      <div style="display: flex;justify-content: space-between">
+        <el-input
+          placeholder="请输入区域名称"
+          prefix-icon="el-icon-search"
+          @input="searchSite"
+          v-model="searchValue"
+        >
+        </el-input>
+        <el-select v-model="selectValue" placeholder="全部" @change="fliterSiteByArea">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </div>
+      <div class="eventNoise">
+        <el-table
+          :data="siteData"
+          height='356'
+          @row-click="analyse"
+          :cell-style="{
+            color: '#fff',
+            cursor: 'pointer',
+            'background-color': '#18304c',
+          }"
+          :header-cell-style="{
+            color: '#1ffefd',
+            'background-color': '#2b4b7a',
+          }"
+        >
+          <el-table-column  prop="areaName" label="名称" show-overflow-tooltip>
+            
+          </el-table-column>
+          <el-table-column  prop="location" label="位置" show-overflow-tooltip>
+            
+          </el-table-column>
+          <el-table-column  prop="allNums" label="人数">
+            
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    </div>
+</template>
+<script>
+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() {
+    return {
+      searchValue: "",
+      siteData: [],
+      siteDataAll: [],
+      selectSiteData: [],
+      InformationActiveName: "基本信息",
+      informationShow: false,
+      detailedInfToday: [],
+      detailedInfWeek: [],
+      detailedInfMonth: [],
+      dustActiveName: "今日",
+
+      options: [
+        {
+          value: "全部",
+          label: '全部'
+        },{
+          value: "公园广场",
+          label: '公园广场'
+        },{
+          value: "商业街区",
+          label: '商业街区'
+        }, {
+          value: "景区景点",
+          label: '景区景点'
+        }, {
+          value: "海水浴场",
+          label: '海水浴场'
+        }, {
+          value: "窗口单位",
+          label: '窗口单位'
+        }, 
+      ],
+      selectValue: "全部",
+      siteDataAll: []
+    };
+  },
+  mounted() {
+    let params = {
+      type1: "'公园广场','窗口单位'",
+      type2: "'景区景点','海水浴场'",
+      type3: "'商业街区'"
+    }
+    selectKeyAreaList(params).then((res) => {
+      this.siteDataAll = res.data.data
+      this.siteData = res.data.data
+    })
+  },
+  methods: {
+    searchSite() {
+      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 {
+        const params = {
+          areaName: this.searchValue,
+        };
+        selectByLikeName(params).then((res) => {
+          this.siteData = res.data.data
+        });
+      }
+    },
+
+    fliterSiteByArea(val) {
+      if(val === '全部') {
+        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()
+      this.$parent.removeRoadCauseAnalysis()
+      if(row.latitude && row.longitude) {
+        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 if(row.point) {
+        let arr = JSON.parse(row.point)
+        let areaLatLng = []
+        arr.forEach((item) => {
+          let lonLat = gcjLL2wgs84LL(item[0], item[1]);
+          areaLatLng.push([lonLat[1],lonLat[0]])
+        })
+        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() {
+      this.informationShow = false;
+    },
+  },
+};
+</script>
+<style lang='scss' scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  background: url(../../../../assets/construction/listTopBg.png) no-repeat,
+              url(../../../../assets/construction/siteTag.png) no-repeat 324px 17px;
+  padding: 30px 0 18px 18px;
+  .title {
+    color: #fff;
+    font-size: 20px;
+  }
+  ::v-deep .eventData {
+    width: 368px;
+    margin-top: 14px;
+    .el-input {
+      width: 200px;
+    }
+    .el-input__inner {
+      border: 1px solid rgba(31,254,253,.9);
+      color: #fff;
+      background: rgba($color: #203b5d, $alpha: .8);
+      border-radius: unset;
+      &::placeholder {
+        color: rgba($color: #fff, $alpha: 0.6);
+      }
+    }
+    .el-input__prefix {
+      color: rgba(31,254,253,.9);
+    }
+
+    .el-select {
+      // margin-left: 10px;
+      .el-input {
+        width: 161px;
+      }
+    }
+  }
+
+  ::v-deep .eventNoise {
+    margin-top: 16px;
+    .el-table {
+      border: 1px solid #325d94;
+      width: 100%;
+      background: transparent;
+      th,td {
+          border-right: 1px solid #325d94 !important;
+        }
+      // .descending.is-leaf.is-sortable {
+      //   .sort-caret {
+      //     border-top-color: #1dfeff;
+      //   }
+      // }
+    }
+    .cell {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      font-size: 16px;
+      font-weight: normal;
+      text-align: center;
+      height: 36px;
+      line-height: 36px;
+    }
+    .el-table th.is-leaf {
+      border: 1px solid #1f557c;
+    }
+    .el-table td {
+      border: 0;
+      padding: 5px 0;
+    }
+    .el-table th {
+      padding: 5px 0;
+    }
+    .el-table::before {
+      height: 0px;
+    }
+    .el-table__row:nth-of-type(even) > td {
+      background-color: #113660 !important;
+    }
+    .el-table__body-wrapper {
+      &::-webkit-scrollbar {
+        width: 8px;
+        background-color: #10335e;
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: #446dac !important;
+      }
+    }
+  }
+  // 基本信息
+  .informationPop {
+    position: absolute;
+    top: 150px;
+    left: -800px;
+    width: 700px;
+    height: 350px;
+    background: #fff;
+    ::v-deep .el-tabs {
+      .el-tabs__header {
+        margin: 0;
+        .el-tabs__item {
+          background: #000;
+          color: #fff;
+          font-size: 16px;
+          font-weight: 600;
+          padding: 0 10px;
+        }
+        .el-tabs__item.is-active {
+          background: #ccc;
+        }
+        .el-tabs__active-bar {
+          display: none;
+        }
+        .is-top {
+          background: #000;
+        }
+        .el-tabs__nav-wrap::after {
+          display: none;
+        }
+        .el-table::before {
+          display: none;
+        }
+        .el-table th,
+        .el-table tr {
+          background: #3c657c;
+        }
+      }
+    }
+    .informationMain {
+      width: 100%;
+      display: flex;
+      height: 310px;
+      p {
+        padding: 4px 10px;
+      }
+      .informationLeft {
+        width: 60%;
+      }
+      .informationRight {
+        width: 40%;
+      }
+    }
+    .informationClose {
+      position: absolute;
+      z-index: 100;
+      right: 13px;
+      top: 2px;
+      color: #fff;
+      cursor: pointer;
+      font-size: 20px;
+    }
+  }
+  // 详细信息
+  .dustList {
+    width: 100%;
+    ::v-deep .el-table::before {
+      display: none;
+    }
+    ::v-deep .el-tabs {
+      .el-tabs__header {
+        display: flex;
+        justify-content: flex-start;
+        padding: 10px 0 10px 5px;
+        margin-bottom: 0px;
+        .is-top {
+          background: #fff;
+        }
+        .el-tabs__item {
+          background: #ccc;
+          color: #fff;
+          font-size: 14px;
+          font-weight: 600;
+          width: 75px;
+          text-align: center;
+          margin: 0 2px;
+          border-radius: 23px;
+          padding: 0;
+          line-height: 26px;
+          height: 26px;
+          border: 0;
+        }
+        .el-tabs__item.is-active {
+          background: #409eff;
+        }
+        .el-tabs__active-bar {
+          display: none;
+        }
+        .el-tabs__nav-wrap::after {
+          display: none;
+        }
+        .el-table::before {
+          display: none;
+        }
+        .el-table th,
+        .el-table tr {
+          background: #fff;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/pages/areaMonitor/components/SiteListMore.vue

@@ -0,0 +1,451 @@
+<template>
+    <div class="box">
+      <div class="title">重点区域列表</div>
+      <!-- 工地列表 -->
+      <div class="eventData">
+        <div style="display: flex;justify-content: space-between">
+          <el-input
+            placeholder="请输入区域名称"
+            prefix-icon="el-icon-search"
+            @input="searchSite"
+            v-model="searchValue"
+          >
+          </el-input>
+          <el-select v-model="selectAreaValue" placeholder="全部" @change="fliterSiteByArea">
+            <el-option
+              v-for="item in areaOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+          <el-select v-model="selectValue" placeholder="全部" @change="fliterSiteByArea">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="eventNoise">
+          <el-table
+            :data="siteData"
+            height='356'
+            @row-click="analyse"
+            :cell-style="{
+              color: '#fff',
+              cursor: 'pointer',
+              'background-color': '#18304c',
+            }"
+            :header-cell-style="{
+              color: '#1ffefd',
+              'background-color': '#2b4b7a',
+            }"
+          >
+            <el-table-column  prop="areaName" label="名称" show-overflow-tooltip>
+            </el-table-column>
+            <el-table-column  prop="type" label="区域类型" show-overflow-tooltip>
+            </el-table-column>
+            <el-table-column  prop="management" label="管辖单位" show-overflow-tooltip>
+            </el-table-column>
+            <el-table-column  prop="location" label="位置" show-overflow-tooltip>
+              
+            </el-table-column>
+            <el-table-column  prop="allNums" label="负责人">
+              
+            </el-table-column>
+            <el-table-column  prop="allNums" label="联系电话">
+              
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+      </div>
+  </template>
+  <script>
+  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() {
+      return {
+        searchValue: "",
+        siteData: [],
+        siteDataAll: [],
+        selectSiteData: [],
+        InformationActiveName: "基本信息",
+        informationShow: false,
+        detailedInfToday: [],
+        detailedInfWeek: [],
+        detailedInfMonth: [],
+        dustActiveName: "今日",
+        areaOptions: [
+          {
+            value: "全部",
+            label: '全部'
+          },{
+            value: "市南区",
+            label: '市南区'
+          },{
+            value: "市北区",
+            label: '市北区'
+          }, {
+            value: "李沧区",
+            label: '李沧区'
+          }, {
+            value: "黄岛区",
+            label: '黄岛区'
+          }, {
+            value: "城阳区",
+            label: '城阳区'
+          }, 
+          {
+            value: "即墨区",
+            label: '即墨区'
+          }, {
+            value: "平度区",
+            label: '平度区'
+          }, {
+            value: "莱西市",
+            label: '莱西市'
+          }, {
+            value: "崂山区",
+            label: '崂山区'
+          }, {
+            value: "胶州市",
+            label: '胶州市'
+          }, 
+        ],
+        selectAreaValue:"全部",
+        options: [
+          {
+            value: "全部",
+            label: '全部'
+          },{
+            value: "公园广场",
+            label: '公园广场'
+          },{
+            value: "商业街区",
+            label: '商业街区'
+          }, {
+            value: "景区景点",
+            label: '景区景点'
+          }, {
+            value: "海水浴场",
+            label: '海水浴场'
+          }, {
+            value: "窗口单位",
+            label: '窗口单位'
+          }, 
+        ],
+        selectValue: "全部",
+        siteDataAll: []
+      };
+    },
+    mounted() {
+      let params = {
+        type1: "'公园广场','窗口单位'",
+        type2: "'景区景点','海水浴场'",
+        type3: "'商业街区'"
+      }
+      selectKeyAreaList(params).then((res) => {
+        this.siteDataAll = res.data.data
+        this.siteData = res.data.data
+      })
+    },
+    methods: {
+      searchSite() {
+        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 {
+          const params = {
+            areaName: this.searchValue,
+          };
+          selectByLikeName(params).then((res) => {
+            this.siteData = res.data.data
+          });
+        }
+      },
+  
+      fliterSiteByArea(val) {
+        if(val === '全部') {
+          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()
+        this.$parent.removeRoadCauseAnalysis()
+        if(row.latitude && row.longitude) {
+          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 if(row.point) {
+          let arr = JSON.parse(row.point)
+          let areaLatLng = []
+          arr.forEach((item) => {
+            let lonLat = gcjLL2wgs84LL(item[0], item[1]);
+            areaLatLng.push([lonLat[1],lonLat[0]])
+          })
+          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() {
+        this.informationShow = false;
+      },
+    },
+  };
+  </script>
+  <style lang='scss' scoped>
+  .box {
+    width: 100%;
+    height: 100%;
+    background: url(../../../../assets/construction/listTopBg.png) no-repeat,
+                url(../../../../assets/construction/siteTag.png) no-repeat 507px 17px;
+    padding: 30px 0 18px 14px;
+    .title {
+      color: #fff;
+      font-size: 20px;
+    }
+    ::v-deep .eventData {
+      width: 544px;
+      margin-top: 14px;
+      .el-input {
+        width: 200px;
+      }
+      .el-input__inner {
+        border: 1px solid rgba(31,254,253,.9);
+        color: #fff;
+        background: rgba($color: #203b5d, $alpha: .8);
+        border-radius: unset;
+        &::placeholder {
+          color: rgba($color: #fff, $alpha: 0.6);
+        }
+      }
+      .el-input__prefix {
+        color: rgba(31,254,253,.9);
+      }
+  
+      .el-select {
+        // margin-left: 10px;
+        .el-input {
+          width: 161px;
+        }
+      }
+    }
+  
+    ::v-deep .eventNoise {
+      margin-top: 16px;
+      .el-table {
+        border: 1px solid #325d94;
+        width: 100%;
+        background: transparent;
+        th,td {
+            border-right: 1px solid #325d94 !important;
+          }
+        // .descending.is-leaf.is-sortable {
+        //   .sort-caret {
+        //     border-top-color: #1dfeff;
+        //   }
+        // }
+      }
+      .cell {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        font-size: 16px;
+        font-weight: normal;
+        text-align: center;
+        height: 36px;
+        line-height: 36px;
+      }
+      .el-table th.is-leaf {
+        border: 1px solid #1f557c;
+      }
+      .el-table td {
+        border: 0;
+        padding: 5px 0;
+      }
+      .el-table th {
+        padding: 5px 0;
+      }
+      .el-table::before {
+        height: 0px;
+      }
+      .el-table__row:nth-of-type(even) > td {
+        background-color: #113660 !important;
+      }
+      .el-table__body-wrapper {
+        &::-webkit-scrollbar {
+          width: 8px;
+          background-color: #10335e;
+        }
+        &::-webkit-scrollbar-thumb {
+          background-color: #446dac !important;
+        }
+      }
+    }
+    // 基本信息
+    .informationPop {
+      position: absolute;
+      top: 150px;
+      left: -800px;
+      width: 700px;
+      height: 350px;
+      background: #fff;
+      ::v-deep .el-tabs {
+        .el-tabs__header {
+          margin: 0;
+          .el-tabs__item {
+            background: #000;
+            color: #fff;
+            font-size: 16px;
+            font-weight: 600;
+            padding: 0 10px;
+          }
+          .el-tabs__item.is-active {
+            background: #ccc;
+          }
+          .el-tabs__active-bar {
+            display: none;
+          }
+          .is-top {
+            background: #000;
+          }
+          .el-tabs__nav-wrap::after {
+            display: none;
+          }
+          .el-table::before {
+            display: none;
+          }
+          .el-table th,
+          .el-table tr {
+            background: #3c657c;
+          }
+        }
+      }
+      .informationMain {
+        width: 100%;
+        display: flex;
+        height: 310px;
+        p {
+          padding: 4px 10px;
+        }
+        .informationLeft {
+          width: 60%;
+        }
+        .informationRight {
+          width: 40%;
+        }
+      }
+      .informationClose {
+        position: absolute;
+        z-index: 100;
+        right: 13px;
+        top: 2px;
+        color: #fff;
+        cursor: pointer;
+        font-size: 20px;
+      }
+    }
+    // 详细信息
+    .dustList {
+      width: 100%;
+      ::v-deep .el-table::before {
+        display: none;
+      }
+      ::v-deep .el-tabs {
+        .el-tabs__header {
+          display: flex;
+          justify-content: flex-start;
+          padding: 10px 0 10px 5px;
+          margin-bottom: 0px;
+          .is-top {
+            background: #fff;
+          }
+          .el-tabs__item {
+            background: #ccc;
+            color: #fff;
+            font-size: 14px;
+            font-weight: 600;
+            width: 75px;
+            text-align: center;
+            margin: 0 2px;
+            border-radius: 23px;
+            padding: 0;
+            line-height: 26px;
+            height: 26px;
+            border: 0;
+          }
+          .el-tabs__item.is-active {
+            background: #409eff;
+          }
+          .el-tabs__active-bar {
+            display: none;
+          }
+          .el-tabs__nav-wrap::after {
+            display: none;
+          }
+          .el-table::before {
+            display: none;
+          }
+          .el-table th,
+          .el-table tr {
+            background: #fff;
+          }
+        }
+      }
+    }
+  }
+  </style>
+  

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

@@ -0,0 +1,765 @@
+<template>
+ <div>
+  <div id="StatisticalAnalysis">
+    <div class="title-bg"></div>
+    <div class="close-btn" @click="closeDialog"><i class="el-icon-close"></i></div>
+    <h4>统计分析</h4>
+    <!-- <div class="tabs-button">
+      <div class="tabs-button-box">
+        <div  class="tabs-button-btn"
+              @click="tabHandleClick(item)"
+              v-for="item in tabsButton" 
+              :key="item"
+              :class="tabsActiveName == item?'tabs-button-btn-active' : ''"
+              >
+          {{item}}
+        </div>
+      </div>
+    </div>
+    <div class="filter-btn-box">
+      <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> -->
+    <div key="video" v-if="tabsActiveName == '视频感知事件'">
+      <div class="event-num">
+        <span> {{ totalEventCount }}</span>件
+      </div>
+      <div class="line"></div>
+      <div id="event-type-chart"></div>
+      <div class="line"></div>
+      <div id="event-state-chart"></div>
+      <div class="line"></div>
+      <div id="event-time-chart"></div>
+    </div>
+    <div key="road" v-if="tabsActiveName == '出租车走航监测'">
+      <div class="event-num">
+        <span>000</span>件
+      </div>
+      <div class="line"></div>
+      <div id="road-time-chart"></div>
+      <div class="line"></div>
+      <el-table
+          :data="PollutionRoad"
+          height='356'
+          :cell-style="{
+            color: '#fff',
+            cursor: 'pointer',
+            'background-color': '#18304c',
+          }"
+          :header-cell-style="{
+            color: '#1ffefd',
+            'background-color': '#2b4b7a',
+          }"
+        >
+          <el-table-column label="Top" width="50" type="index">
+          </el-table-column>
+          <el-table-column  label="道路" prop="roadName" show-overflow-tooltip>
+          </el-table-column>
+          <el-table-column width="84" prop="start" label="路段开始" show-overflow-tooltip>
+          </el-table-column>
+          <el-table-column width="84" prop="end" label="路段结束" show-overflow-tooltip>
+          </el-table-column>
+          <el-table-column width="86" prop="times" label="告警次数">
+          </el-table-column>
+      </el-table>
+    </div>
+  </div>
+ </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { selectMonthAreaEvent, selectByAreaEvent, selectEventType } from "@/api/area";
+ export default {
+   data () {
+     return {
+       totalEventCount: '000',
+        tabsButton: ["视频感知事件","出租车走航监测"],
+        tabsActiveName: "视频感知事件",
+        filterButton:{
+          typeSelect:['全部','近7天','近30天'],
+          typeSelectActive:'全部',
+        },
+        PollutionRoad:[
+          {
+            roadName: '某某路',
+            start: '开始',
+            end: '结束',
+            times: '10',
+          }, 
+          {
+            roadName: '某某路',
+            start: '开始',
+            end: '结束',
+            times: '10',
+          },
+          {
+            roadName: '某某路',
+            start: '开始',
+            end: '结束',
+            times: '10',
+          },
+        ]
+     }
+   },
+   mounted() {
+    
+      this.$nextTick( () => {
+        this.getVideoData()
+        this.initEventTypeCharts()
+        this.initEventStateCharts()
+        // this.initEventTimeCharts()
+        // this.initRoadTimeCharts()
+      })
+    
+   },
+   methods: {
+    tabHandleClick(item) {
+      this.tabsActiveName = item
+      if(item == '视频感知事件') {
+        this.$nextTick( () => {
+          this.initEventTypeCharts()
+          this.initEventStateCharts()
+          this.initEventTimeCharts()
+        })
+      }
+      if(item == '出租车走航监测') {
+        this.$nextTick( () => {
+          this.initRoadTimeCharts()
+        })
+      }
+    },
+    typeSelect(item) {
+      this.filterButton.typeSelectActive = item
+    },
+
+    getVideoData() {
+      this.totalEventCount = 0;
+      const params = {
+        page: 1,
+        pageSize: 4,
+      };
+      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 = []
+          let yValue = []
+          res.data.data.forEach(item => {
+            xValue.push(item.pushTime)
+            yValue.push(item.number)
+          });
+          this.initEventTimeCharts(xValue, yValue)
+        }
+      });
+    },
+    
+    closeDialog(){
+      this.$emit('closeDialog')
+    },
+
+    initEventTypeCharts (arrLabel, arrValue) {
+      const option = {
+         title: {
+          text: "事件类型分布",
+          left: "left",
+          top: 15,
+          textStyle: {
+            fontSize: 16,
+            color: "#fff",
+            fontWeight: "normal"
+          },
+        },
+        grid: {
+          bottom: 34,
+        },
+        xAxis: {
+          type: 'category',
+          data: arrLabel,
+          axisLabel: {
+            color: '#fff',
+            margin: 7,
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(254, 125, 42,0.6)',
+            }
+          },
+          axisTick: {
+            show: false,
+          }
+        },
+        yAxis: {
+          type: 'value',
+          show: false,
+        },
+        series: [
+          {
+            data: arrValue,
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                    offset: 0,
+                    color: 'rgba(254,125,42,1)'
+                }, {
+                    offset: 1,
+                    color: 'rgba(254,125,42,0)'
+                }]),
+              borderWidth: 2,
+              borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                    offset: 0,
+                    color: 'rgba(255,211,107,1)'
+                }, {
+                    offset: 1,
+                    color: 'rgba(255,211,107,0)'
+                }]),
+            },
+            barWidth : 23,
+            label: {
+              show: true,
+              position : 'top',
+              distance: 5,
+              color: 'fe982a',
+              fontSize: 18,
+            }
+          }
+        ]
+      }
+      const eventType = echarts.init(
+        document.getElementById('event-type-chart')
+      )
+      eventType.setOption(option)
+    },
+    initEventStateCharts () {
+      const option = {
+        title: [
+          {
+            text: "事件状态分布",
+            left: "left",
+            top: 15,
+            textStyle: {
+              fontSize: 16,
+              color: "#fff",
+              fontWeight: "normal"
+            },
+          },
+          { 
+            text: "事件处置率",
+            subtext: '     50%',
+            left: 35,
+            top: 'center',
+            textStyle: {
+              fontSize: 16,
+              color: "#fff",
+              fontWeight: "normal"
+            },
+            subtextStyle: {
+              fontSize: 16,
+              color: "#3bed82",
+              fontWeight: "normal",
+              left: 40,
+            },
+          }
+        ],
+        grid: {
+          bottom: 34,
+        },
+        legend: {
+          top: '36%',
+          left: '45%',
+          icon: 'rect',
+          itemHeight: 10,
+          itemWidth: 10,
+          textStyle: {
+            rich: {
+              name: {
+                color: 'rgba(255, 255, 255,0.8)',
+                fontSize: 16,
+              },
+              value: {
+                fontSize: 20,
+                color: '#1ef6f5'
+              }
+            }
+          },
+          formatter(name) {
+            let than = option.series[0].data;
+            let total = 0;
+            let tarValue;
+            for (let i = 0, l = than.length; i < l; i++) {
+              total += than[i].value;
+              if (than[i].name == name) {
+                tarValue = than[i].value;
+              }
+            }
+            let p = (tarValue / total) * 100;
+            return '{name|' + name + " " + " " + '}{value|' + tarValue + '件' + " " + " " + p + "%" + '}'
+          },
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        series: [
+          {
+            type: 'pie',
+            radius: ['65%', '100%'],
+            left: 10,
+            top: 20,
+            width: 140,
+            hoverAnimation: false,
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            itemStyle: {
+              borderColor: 'rgba(24,51,76,0.95)',
+              borderWidth: 1,
+            },
+            emphasis: {
+              label: {
+                show: false,
+              }
+            },
+            tooltip: {
+              trigger: 'item'
+            },
+            labelLine: {
+              show: false
+            },
+            color:['#3bed82', '#fe7d2a','#bfbfbf'],
+            data: [
+              { value: 50, name: '已处置' },
+              { value: 25, name: '未处置' },
+              { value: 25, name: '已作废' },
+            ]
+          },
+          {
+            type: 'pie',
+            radius: ['65%', '80%'],
+            left: 10,
+            z: 22,
+            top: 20,
+            width: 140,
+            avoidLabelOverlap: false,
+            hoverAnimation: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: false,
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            color:['rgba(0,0,0,0.35)'],
+            data: [
+              { value: 100 },
+            ]
+          },
+        ]
+      }
+      const eventState = echarts.init(
+        document.getElementById('event-state-chart')
+      )
+      eventState.setOption(option)
+    },
+    initEventTimeCharts (xValue, yValue) {
+      const option = {
+         title: {
+          text: "事件时间趋势(近30天)",
+          left: "left",
+          top: 15,
+          textStyle: {
+            fontSize: 16,
+            color: "#fff",
+            fontWeight: "normal"
+          },
+        },
+        grid: {
+          top: 80,
+          bottom: 34,
+        },
+        tooltip: {
+          trigger: "axis"
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: 'rgba(255, 255, 255,0.8)',
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#345a99',
+            }
+          },
+          axisTick: {
+            show: false,
+          },
+          boundaryGap: ['2%', '2%'],
+          data: xValue
+        },
+        yAxis: {
+          type: 'value',
+          name: '数量',
+          minInterval : 1,
+          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: yValue,
+            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 eventTime = echarts.init(
+        document.getElementById('event-time-chart')
+      )
+      eventTime.setOption(option)
+    },
+    initRoadTimeCharts () {
+      const option = {
+         title: {
+          text: "事件时间趋势",
+          left: "left",
+          top: 15,
+          textStyle: {
+            fontSize: 16,
+            color: "#fff",
+            fontWeight: "normal"
+          },
+        },
+        grid: {
+          top: 80,
+          bottom: 34,
+        },
+        tooltip: {
+          trigger: "axis"
+        },
+        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>
+
+<style lang="scss" scpoed>
+ #StatisticalAnalysis {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  padding: 12px 12px 18px;
+  .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%);
+  }
+  .close-btn {
+    position: absolute;
+    right: 12px;
+    top: 12px;
+    color: #3afefc;
+    font-size: 12px;
+    cursor: pointer;
+  }
+  h4 {
+    font-size: 18px;
+    color: #fff;
+    font-weight: normal;
+  }
+
+  .tabs-button {
+    position: relative;
+    margin-top: 20px;
+    .tabs-button-box {
+      padding-bottom: 11px;
+      border-bottom: 3px solid #2c619c;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      .tabs-button-btn {
+        font-size: 18px;
+        color: rgba($color: #fff, $alpha: 0.6);
+        position: relative;
+        cursor: pointer;
+      }
+      .tabs-button-btn-active {
+        font-size: 20px;
+        color: #fff;
+      }
+      .tabs-button-btn-active::after {
+        content: '';
+        position: absolute;
+        bottom: -15px;
+        right: 24%;
+        width: 64px;
+        height: 5px;
+        border-radius: 5px;
+        background-color: #1ffffc;
+      }
+    }
+  }
+
+
+  .filter-btn-box {
+    margin-top: 14px;
+    .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;
+      }
+    }
+  }
+
+  .event-num {
+    width: 138px;
+    height: 45px;
+    margin: 10px auto;
+    background: url(../../../../assets/construction/StatisticalAnalysisEventNum.png) no-repeat;
+    color: #1ffefd;
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    span {
+      font-size: 36px;
+      font-weight: bold;
+      background: linear-gradient(0deg, #91f4f8 0%, #ffffff 100% );
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      margin-right: 8px;
+    }
+  }
+
+  .line {
+    width: 100%;
+    height: 1px;
+    background: linear-gradient(90deg, rgba($color: #306db0, $alpha: 0) 0,rgba($color: #306db0, $alpha: 1) 50%, rgba($color: #306db0, $alpha: 0) 100%);
+  }
+
+  #event-type-chart,#event-state-chart {
+    width: 100%;
+    height: 207px;
+  }
+  #event-time-chart {
+    width: 100%;
+    height: 240px;
+  }
+  #road-time-chart {
+    height: 240px;
+    width: 100%;
+  }
+  ::v-deep .el-table {
+      border: 1px solid #325d94;
+      width: 100%;
+      th,td {
+          border-right: 1px solid #325d94 !important;
+        }
+    }
+    .cell {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      font-size: 14px;
+      font-weight: normal;
+      text-align: center;
+      height: 36px;
+      line-height: 36px;
+    }
+    .el-table th.is-leaf {
+      border: 1px solid #1f557c;
+    }
+    .el-table td {
+      border: 0;
+      padding: 5px 0;
+    }
+    .el-table th {
+      padding: 5px 0;
+    }
+    .el-table::before {
+      height: 0px;
+    }
+    .el-table__row:nth-of-type(even) > td {
+      background-color: #113660 !important;
+    }
+    .el-table__body-wrapper {
+      &::-webkit-scrollbar {
+        width: 8px;
+        background-color: #10335e;
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: #446dac !important;
+      }
+    }
+ }
+</style>

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

@@ -0,0 +1,376 @@
+<template>
+  <div class="box">
+
+    <div class="tabs-button">
+      <div class="tabs-button-box">
+        <div  class="tabs-button-btn"
+              @click="tabHandleClick(item)"
+              v-for="item in tabsButton" 
+              :key="item"
+              :class="tabsActiveName == item ? 'tabs-button-btn-active' : '' "
+              >
+          {{item}}
+        </div>
+      </div>
+    </div>
+
+    <div v-show="tabsActiveName == '视频标签'" class="label-content">
+      <el-input
+        placeholder="请输入关键词"
+        prefix-icon="el-icon-search"
+        v-model="labelSearch"
+        @input="searchLabel"
+      >
+      </el-input>
+      <el-checkbox-group v-model="checkboxGroup">
+        <el-checkbox-button 
+          v-for="item in tabList" 
+          :label="item.labelName" 
+          :key="item.id"
+          @change="tabChange(item)"
+        >
+          {{item.labelName}}
+        </el-checkbox-button>
+      </el-checkbox-group>
+    </div>
+
+    <div v-show="tabsActiveName == '视频列表'" class="label-content">
+      <el-input
+        placeholder="请输入关键词"
+        suffix-icon="el-icon-search"
+        v-model="labelSearch"
+        @input="searchCameraTree"  
+      >
+      </el-input>
+        <el-tree
+          v-show="cameraTreeIsShow"
+          id="tree"
+          :data="cameraTree"
+          :props="{label:'name',children:'children',isLeaf:'leaf',}"
+          :load="loadNode"
+          node-key="id"
+          @node-click="treeCameraClick"
+          empty-text="暂无数据"
+          :filter-node-method="filterNode"
+          lazy>
+          <!-- 是否离线checkStatus -->
+          <!-- <span  :style="{backgroundColor: data.checkStatus == 0 ?'#ccc' : ''}" slot-scope="{ node, data }" class="custom-tree-node"> -->
+            <!-- <span>{{ data.channelName || '' }}</span> -->
+          <!-- </span> -->
+        </el-tree>
+        <el-tree
+          v-show="!cameraTreeIsShow"
+          ref="tree"
+          :data="cameraTreeSingle" 
+          :props="{label:'channelName',children:'children'}"
+          :filter-node-method="filterNode"
+          @node-click="treeCameraClick"
+        >
+          <!-- <span  :style="{backgroundColor: data.checkStatus == 0 ?'#ccc' : ''}" slot-scope="{ node, data }" class="custom-tree-node"> -->
+            <!-- <span>{{ data.channelName || '' }}</span> -->
+          <!-- </span> -->
+        </el-tree>
+    </div>
+  </div>
+</template>
+<script>
+
+import { getCameraAll,getCameraLabel,getCameraAllLabel,searchCamera,getCameraAllOrgan,getCameraByParentId,selectByLabelName,selectByChannelName } from '@/api/videoSurveillance/index'
+import bus from "@/views/layout/bus";
+
+export default {
+  data() {
+    return {
+      tabsButton: ["视频标签","视频列表"],
+      tabsActiveName: "视频标签",
+      tabList:[],
+      labelSearch:'',
+      checkboxGroup: [],
+      cameraAllData:[],
+      cameraTreeIsShow:true,
+      cameraTreeSingle: [],
+      checkStatus: '2',
+      cameraTree:[],
+    };
+  },
+  mounted() {
+    getCameraAllLabel().then((res) => {
+      this.tabList = res.data.data
+    });
+    getCameraAll().then((res) => {
+      this.cameraAllData = res.data
+      // this.addResourceTomap('cameraAll',res.data);
+    })
+    getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
+      this.cameraTree = res.data.data
+      console.log(this.cameraTree)
+      res.data.data.forEach((item) => {
+        this.cameraTreeSingle.push({
+          channelName: item.name,
+          children: []
+        })
+      })
+    })
+  },
+   watch: {
+    checkStatus(newV,oldV) {
+      console.log(newV)
+      this.$refs.tree.filter(newV)
+    }
+  },
+  methods: {
+    tabHandleClick(item) {
+      this.tabsActiveName = item
+    },
+    tabChange(item){
+      if(this.checkboxGroup.indexOf(item.labelName) !== -1){
+          bus.$emit("removeCameraLayer",'全部')
+          getCameraLabel({labelCode:item.labelCode}).then((res) => {
+            bus.$emit("CameraSingleDataOnMap",item.labelName,res.data.data)
+
+            // this.addResourceTomap(item.labelName,res.data.data);
+            // res.data.data.forEach((item) => {
+            //   this.cameraTreeSingle.forEach((val) => {
+            //     if(item.nodeName == val.channelName){
+            //       val.children.push(item)
+            //     }
+            //   })
+            // })
+            // this.cameraTreeIsShow = false;
+          })
+      }else {
+        bus.$emit("removeCameraLayer",item.labelName)
+        // this.checkStatus = "2"
+        // this.cameraTreeIsShow = true
+        // getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
+        //   this.cameraTree = res.data.data
+        // })
+      }
+    },
+    searchLabel(value) {
+      const params = {
+        labelName:value
+      }
+      selectByLabelName(params).then((res) => {
+        console.log(res)
+        this.tabList = res.data.data
+      })
+    },
+    searchCameraTree(value) {
+      if(value.length > 0){
+        const params = {
+        channelName:value
+      }
+        selectByChannelName(params).then((res) => {
+          console.log(res)
+          this.cameraTree = []
+          res.data.data.forEach((item) => {
+            this.cameraTree.push({
+              name: item.channelName,
+              gpsX: item.gpsX,
+              gpsY: item.gpsY,
+              channelCode:item.channelCode,
+              leaf:true,
+            })
+          })
+        })
+      }else {
+        getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
+          this.cameraTree = res.data.data
+        })
+      }
+    },
+    reset() {
+      this.checkboxGroup = []
+      this.checkStatus = "2";
+      this.cameraTreeIsShow = true
+      getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
+        this.cameraTree = res.data.data
+      })
+      document.getElementById("tree").scrollTop = 0;
+    },
+    loadNode(node, resolve) {
+        // if (node.level === 0) {
+        //   return resolve([{ name: 'region' }]);
+        // }
+        console.log(node)
+        if (node.level > 0) {
+          let subData = []
+          getCameraAllOrgan({parentId:node.data.id}).then((res) => {
+            if(res.data.data.length == 0){
+              const params = {
+                parentId:node.data.id,
+                checkStatus: this.checkStatus=='2'?["0","1"]:this.checkStatus,
+              }
+              getCameraByParentId(params).then((res) => {
+                res.data.data.forEach((item) => {
+                  subData.push({
+                    name: item.channelName,
+                    gpsX: item.gpsX,
+                    gpsY: item.gpsY,
+                    channelCode:item.channelCode,
+                    checkStatus:item.checkStatus,
+                    leaf:true,
+                  })
+                })
+                return resolve(subData);
+              })
+            }else{
+              subData = res.data.data
+              return resolve(subData);
+            }
+          })
+        }
+    },
+    treeCameraClick(data) {
+      console.log(data)
+      if(data.channelCode){
+        const cameraTree = [{
+          latLng: { lat: data.gpsY, lng: data.gpsX },
+          data: data,
+          type:'cameraTree'
+        }]
+        this.$parent.hiMapFun.removeLayerByLayerName("cameraTree");
+        this.$parent.hiMapFun.openPopupVideoSurveillance(cameraTree[0])
+        const arr = [0,0.0,'','0','0.0']
+        if(arr.indexOf(data.gpsX) == -1){
+          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;
+      if (value == "0") {
+        return data.checkStatus == 0;
+      }
+      if (value == "1") {
+        return data.checkStatus == 1;
+      }
+    },
+  },
+};
+</script>
+<style lang='scss' scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  background: url(../../../../assets/construction/listTopBg.png) no-repeat,
+              url(../../../../assets/construction/videoTag.png) no-repeat 324px 17px;
+  padding: 30px 0 18px 18px;
+
+  .tabs-button {
+    position: relative;
+    .tabs-button-box {
+      width: 358px;
+      padding-bottom: 11px;
+      border-bottom: 3px solid #2c619c;
+      display: flex;
+      align-items: center;
+      .tabs-button-btn {
+        font-size: 18px;
+        color: rgba($color: #fff, $alpha: 0.6);
+        position: relative;
+        cursor: pointer;
+        margin-right: 28px;
+      }
+      .tabs-button-btn-active {
+        font-size: 20px;
+        color: #fff;
+      }
+      .tabs-button-btn-active::after {
+        content: '';
+        position: absolute;
+        bottom: -15px;
+        right: 6%;
+        width: 64px;
+        height: 5px;
+        border-radius: 5px;
+        background-color: #1ffffc;
+      }
+    }
+  }
+
+  ::v-deep .label-content {
+    margin-top: 16px;
+    .el-input {
+      width: 358px;
+    }
+    .el-input__inner {
+      border: 1px solid rgba(31,254,253,.9);
+      color: #fff;
+      border-radius: unset;
+      background: rgba($color: #203b5d, $alpha: .8);
+      &::placeholder {
+        color: rgba($color: #fff, $alpha: 0.6);
+      }
+    }
+    .el-input__prefix {
+      color: rgba(31,254,253,.9);
+    }
+
+    .el-checkbox-group {
+      height: 316px;
+      width: 372px;
+      overflow-y: auto;
+      margin-top: 6px;
+      &::-webkit-scrollbar {
+      width: 8px;
+      background-color: #10335e;
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: #446dac !important;
+      }
+    }
+    .el-checkbox-button {
+      border-radius: 15px;
+      margin: 10px;
+      .el-checkbox-button__inner {
+        height: 30px;
+        line-height: 6px;
+        border-radius: 15px;
+        background: linear-gradient(0deg, rgba($color: #24517b, $alpha: 1) 0, rgba($color: #24517b, $alpha: 0) 100%);
+        border: 1px solid #1d98a0;
+        font-size: 16px;
+        color: #1ffefd;
+      }
+      .el-checkbox-button__inner:hover {
+        border: 1px solid #1ffefd;
+        background: linear-gradient(0deg, #1577d3 0%, #1251ab 100%);
+      }
+    }
+    .el-checkbox-button.is-checked {
+      .el-checkbox-button__inner{
+        color: #fff;
+        border: 1px solid #1ffefd;
+        background: linear-gradient(0deg, #1577d3 0%, #1251ab 100%);
+      }
+    }
+
+    .el-tree {
+      width: 366px;
+      height: 300px;
+      overflow-y: auto;
+      margin-top: 10px;
+      background: transparent;
+      color: #fff;
+
+      &::-webkit-scrollbar {
+      width: 8px;
+      background-color: #10335e;
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: #446dac !important;
+      }
+
+      .el-tree-node__content:hover {
+        background: rgba(27,255,255,.2);
+      }
+      .el-tree-node:focus > .el-tree-node__content {
+        background-color: rgba(27,255,255,.2);
+        color: #fff;
+      }
+    }
+  }
+}
+</style>

src/views/pages/areaMonitor/components/VideoListLeft.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="box">
+    <div class="list4">
+      <div class="inner-title">
+        重点点位视频监控
+        <span
+          style="float: right;
+            font-size: 16px;
+            color: #fff;
+            margin-right: 10px;
+            font-weight: normal;
+          "
+          >查看点位列表
+          <span style="color: #1296db; font-size: 18px; font-weight: bold;cursor: pointer;"
+            @click="openVideoList">></span
+          ></span
+        >
+      </div>
+      <div class="video-List">
+      <div id="video1" class="monitor">
+      </div>
+      </div>
+    </div>
+    <!--视频列表弹出框-->
+    <!-- <dialog :visible.sync="this.listVisible">>
+      <video-list></video-list>
+      </dialog> -->
+      <!-- <el-dialog
+  title="提示"
+  :visible.sync="dialogVisible"
+  width="30%"
+  :before-close="handleClose">
+  <video-list></video-list> 
+</el-dialog> -->
+   
+  </div>
+</template>
+    <script>
+import bus from "@/views/layout/bus";
+import * as echarts from "echarts";
+import VideoList from "./VideoList";
+// 大华监控配置
+const DHWsInstance = DHWs.getInstance({
+  reConnectCount: 0,
+  connectionTimeout: 100
+})
+export default {
+  data() {
+    return {
+      videoVisible: false,
+    };
+  },
+  components: {VideoList},
+  created() {},
+  mounted() {
+  
+  },
+  methods: {
+    //打开视频列表
+    openVideoList(){
+      this.videoVisible=!this.videoVisible
+      this.$emit("IsShowLideoVisible",this.videoVisible);
+    },
+ 
+
+  },
+  watch: {},
+};
+</script>
+    <style lang='scss' scoped>
+@font-face {
+  font-family: "Tensentype-ZhiHeiJ-W5";
+  src: url("../../../../assets/construction/TTZhiHeiJ-W5.ttf");
+}
+@font-face {
+  font-family: "DIN-Bold";
+  src: url("../../../../assets/construction/DIN-Bold.otf");
+}
+.box {
+  position: relative;
+  .inner-title {
+    margin-top: 5px;
+    margin-bottom: 5px;
+    margin-left: 10px;
+    font-size: 16px;
+    font-weight: bold;
+    color: #ffffff;
+  }
+  .list4 {
+    width: 100%;
+    .video-List {
+    //   background: red;
+      height: 146px;
+      margin-left: 40px;
+      margin-right: 40px;
+      margin-top: 10px;
+    }
+  }
+}
+</style>
+    

src/views/pages/areaMonitor/components/VideoListRight.vue

@@ -0,0 +1,535 @@
+<template>
+  <div class="box">
+    <header>
+      <div class="title">决策建议</div>
+    </header>
+    <div class="list1">
+      <el-date-picker
+        v-model="daterange"
+        type="daterange"
+        value-format="yyyy-MM-dd"
+        :range-separator="$t('datePicker.range')"
+        :start-placeholder="$t('datePicker.start')"
+        :end-placeholder="$t('datePicker.end')"
+      >
+      </el-date-picker>
+      <!--人员聚集高发区域Top5-->
+      <div class="list1-people">
+        <div class="people-left">
+          <div class="inner-title">人员聚集高发区域Top5</div>
+          <div class="left-list" v-for="item in top5AreaList">
+            <div class="left-list1">{{ item.title }}</div>
+            <div
+              :class="selectArea === item.areaId ? 'active-item' : 'left-list2'"
+              @click="chooseSelectArea(item)"
+            >
+              {{ item.areaName }}
+            </div>
+            <div class="left-list3">{{ item.num }}</div>
+          </div>
+        </div>
+        <div class="people-right">
+          <div class="inner-title">高发事件Top5</div>
+          <div class="top5EventStyle" id="top5-event-chart"></div>
+        </div>
+      </div>
+    </div>
+    <!--相关性分析-->
+    <div class="list2">
+      <div class="inner-title">
+        相关性分析
+        <span
+          style="
+            font-size: 14px;
+            margin-left: 8px;
+            padding: 2px 20px;
+            background: #015478;
+            border-radius: 4px;
+          "
+          >分析过程</span
+        >
+      </div>
+      <div class="list2-conclusion">
+        结论：<span>{{ relevanceName1 }}</span
+        >、<span>{{ relevanceName2 }}</span
+        >、<span>{{ relevanceName1 }}</span> 与<span>{{ areaName }}</span
+        >人员聚集较强相关。
+      </div>
+      <div class="relevanceChart" id="relevance-chart"></div>
+    </div>
+    <!--管理力量分析建议-->
+    <div class="list3"> 
+       <div class="inner-title">管理力量分析建议</div>
+       <div class="list3-analysis">
+        <div class="analysis-item">
+          <div class="item-div">
+          <div>管理人员</div>
+          <div>{{analysis.manageNum}}人</div>
+          </div>
+        </div>
+        <div class="analysis-item">
+          <div class="item-div">
+          <div>环卫人员</div>
+          <div>{{analysis.sanitationNum}}人</div>
+          </div>
+          </div>
+     
+        <div class="analysis-item">
+          <div class="item-div">
+          <div>垃圾运送</div>
+          <div>{{analysis.garbageNum}}次/天</div>
+          </div>
+        </div>
+        <div class="analysis-item">
+          <div class="item-div">
+          <div>机械化作业</div>
+          <div>{{analysis.mechanNum}}次/天</div>
+        </div>
+        </div>
+       </div>
+       <div class="analysis-advice">
+        <span style=" font-size: 14px;color: #fff;">决策建议：</span>
+        预测<span style=" font-size: 14px;
+        color: rgb(0 255 255);
+        cursor: pointer;
+        text-decoration: underline;" >{{analysis.area}}</span>
+        下周人流量较高，建议增加环卫人员数量、垃圾收运频次
+       </div>
+      </div>
+    
+  </div>
+</template>
+  <script>
+import bus from "@/views/layout/bus";
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+     
+      daterange: null,
+      dataForm: {
+        title: "",
+        startDate: "",
+        endDate: "",
+      },
+      //人员聚集高发区域TOP5list
+      top5AreaList: [],
+      //选中的高发区域
+      selectArea: "",
+       //相关性
+       relevanceName1: "垃圾桶满溢",
+      relevanceName2: "路面不洁",
+      relevanceName3: "违规停车",
+      areaName: "第一海水浴场",
+      //管理力量分析
+      analysis:{
+        manageNum:3,
+        sanitationNum:14,
+        garbageNum:2,
+        mechanNum:1,
+        advice:'',
+        area:'第一海水浴场'
+      }
+    };
+  },
+  components: {},
+  created() {},
+  mounted() {
+    //获取高发区域
+    this.getTop5Area();
+    //获取高发事件
+    this.getTop5EventCharts();
+    //获取相关性分析
+    this.getRelevanceCharts();
+  },
+  methods: {
+    //选择选中的高发区域
+    chooseSelectArea(item) {
+      this.selectArea = item.areaId;
+    },
+    //获取高发区域
+    getTop5Area() {
+      this.top5AreaList = [
+        {
+          title: "TOP1",
+          areaName: "第一海水浴场",
+          areaId: "1",
+          num: "223",
+        },
+        {
+          title: "TOP2",
+          areaName: "石老人海水浴场",
+          areaId: "2",
+          num: "123",
+        },
+        {
+          title: "TOP3",
+          areaName: "金沙滩海水浴场",
+          areaId: "3",
+          num: "111",
+        },
+        {
+          title: "4",
+          areaName: "第一海水浴场",
+          areaId: "4",
+          num: "65",
+        },
+        {
+          title: "5",
+          areaName: "第一海水浴场",
+          areaId: "5",
+          num: "32",
+        },
+      ];
+    },
+    //获取高发事件
+    getTop5EventCharts() {
+      let eventChart = echarts.init(
+        document.getElementById("top5-event-chart")
+      );
+      let option = {
+        backgroundColor: "rgba(32, 33, 36,.7)",
+        grid: {
+          top: "20px",
+          left: "40px",
+          bottom: "20px",
+        },
+        tooltip: {
+          // 鼠标悬浮提示框显示 X和Y 轴数据
+          trigger: "axis",
+          backgroundColor: "rgba(32, 33, 36,.7)",
+          borderColor: "rgba(32, 33, 36,0.20)",
+          borderWidth: 1,
+          textStyle: {
+            color: "#fff",
+            fontSize: "12",
+          },
+          shadowStyle: {
+            color: "rgba(74, 211, 164, 0.15)",
+            width: "20",
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: ["人员聚集", "违规停车", "路面不洁", "违章", "占道经营"],
+          axisLine: {
+            lineStyle: {
+              color: "#fff",
+              fontSize: 10,
+            },
+          },
+        },
+        yAxis: {
+          type: "value",
+          axisLine: {
+            lineStyle: {
+              color: "#fff",
+              fontSize: 10,
+            },
+          },
+        },
+        series: [
+          {
+            data: [250, 200, 150, 110, 100, 50],
+            type: "bar",
+            itemStyle: {
+              normal: {
+                //这里是重点
+                color: "#fe8463",
+              },
+            },
+          },
+        ],
+      };
+      eventChart.setOption(option);
+    },
+    //获取相关性分析
+    getRelevanceCharts() {
+      let eventChart = echarts.init(document.getElementById("relevance-chart"));
+      let option = {
+        backgroundColor: "rgba(32, 33, 36,.7)",
+        grid: {
+          top: "20px",
+          right: "40px",
+          left: "40px",
+          bottom: "20px",
+        },
+        tooltip: {
+          // 鼠标悬浮提示框显示 X和Y 轴数据
+          trigger: "axis",
+          backgroundColor: "rgba(32, 33, 36,.7)",
+          borderColor: "rgba(32, 33, 36,0.20)",
+          borderWidth: 1,
+          textStyle: {
+            // 文字提示样式
+            color: "#fff",
+            fontSize: "12",
+          },
+          shadowStyle: {
+            color: "rgba(74, 211, 164, 0.15)",
+            width: "20",
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: ["11.04", "11.05", "11.06", "11.07", "11.08","11.09","11.10"],
+          axisLine: {
+            lineStyle: {
+              color: "#fff",
+              fontSize: 10,
+            },
+          },
+        },
+        yAxis: [
+          {
+            type: "value",
+            axisLine: {
+              lineStyle: {
+                color: "#fff",
+                fontSize: 10,
+              },
+            },
+          },
+          {
+            type: "value",
+            axisLine: {
+              lineStyle: {
+                color: "#fff",
+                fontSize: 10,
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            data: [25, 20, 15, 11, 10, 5,6,3],
+            type: "bar",
+            itemStyle: {
+              normal: {
+  
+                color: "rgb(89 166 190)",
+              },
+            },
+          },
+          {
+            type: "line",
+            yAxisIndex: 1,
+            data: [59, 10, 140, 40, 30, 40,160,50],
+            itemStyle: {
+              color: 'green',
+              showSymbol: false,
+            },
+          },
+          {
+            type: "line",
+            yAxisIndex: 1,
+            data: [20, 30, 49, 57, 120, 28,40,60],
+            itemStyle: {
+              color: 'yellow',
+              showSymbol: false,
+            },
+          },
+          {
+            type: "line",
+            yAxisIndex: 1,
+            data: [60, 80, 100, 100, 150, 126,100,160],
+            itemStyle: {
+              color: 'orange',
+              showSymbol: false,
+            },
+          },
+          
+        ],
+      };
+      eventChart.setOption(option);
+    },
+  },
+  watch: {
+    daterange(val) {
+      if (val == null) {
+        this.dataForm.startDate = null;
+        this.dataForm.endDate = null;
+      } else {
+        this.dataForm.startDate = val[0];
+        this.dataForm.endDate = val[1];
+      }
+    },
+  },
+};
+</script>
+  <style lang='scss' scoped>
+@font-face {
+  font-family: "Tensentype-ZhiHeiJ-W5";
+  src: url("../../../../assets/construction/TTZhiHeiJ-W5.ttf");
+}
+@font-face {
+  font-family: "DIN-Bold";
+  src: url("../../../../assets/construction/DIN-Bold.otf");
+}
+.box {
+  position: relative;
+
+  ::v-deep .el-input__inner {
+    margin-top: 7px;
+    width: 96%;
+    margin-left: 2%;
+    height: 20px;
+    line-height: 20px;
+    border-radius: 1px;
+    background: #9000;
+    color: #ffffff;
+  }
+  ::v-deep .el-date-editor .el-range__icon {
+    line-height: 14px;
+    color: #ffffff;
+  }
+  ::v-deep .el-date-editor .el-range-separator {
+    line-height: 14px;
+    color: #ffffff;
+  }
+  ::v-deep .el-date-editor .el-range-input {
+    background: #9000;
+    color: #ffffff;
+    font-size: 12px;
+  }
+  .inner-title {
+    margin-top: 5px;
+    margin-bottom: 5px;
+    margin-left: 10px;
+    font-size: 16px;
+    font-weight: bold;
+    color: #ffffff;
+  }
+  .list1 {
+    width: 100%;
+    .list1-people {
+      width: 100%;
+
+      display: table;
+      .people-left {
+        width: 50%;
+        height: 140px;
+        display: table-cell;
+        .left-list {
+          text-align: center;
+          color: #fff;
+          width: 100%;
+          height: 24px;
+          margin-left: 10px;
+          margin-top: 5px;
+          .left-list1 {
+            font-size: 12x;
+            float: left;
+            width: 20%;
+          }
+          .left-list2 {
+            cursor: pointer;
+            font-size: 14px;
+            float: left;
+            width: 50%;
+            &:hover {
+              color: rgb(0 255 255);
+            }
+          }
+          .active-item {
+            font-size: 14px;
+            float: left;
+            width: 50%;
+            color: rgb(0 255 255);
+            font-weight: bold;
+            text-decoration: underline;
+          }
+          .left-list3 {
+            font-size: 14px;
+            float: left;
+            width: 24%;
+          }
+        }
+      }
+      .people-right {
+        width: 50%;
+        height: 140px;
+        display: table-cell;
+        .top5EventStyle {
+          float: left;
+          margin-right:10px;
+          margin-left: 0px;
+          width: 100%;
+          height: 140px;
+        }
+      }
+    }
+  }
+  .list2 {
+    width: 100%;
+    .list2-conclusion {
+      color: #fff;
+      border: 1px solid #fff;
+      margin: 10px;
+      padding: 0px 3px;
+      font-size: 14px;
+      span {
+        font-size: 14px;
+        color: rgb(0 255 255);
+      }
+    }
+    .relevanceChart {
+      margin-left: 10px;
+      height: 160px;
+      margin-right:10px;
+    }
+  }
+  .list3 {
+    width: 100%;    
+    .list3-analysis{
+      display: table;
+      width: 98%;
+      margin-left: 10px;
+    
+      .analysis-item{
+        text-align: center;
+        display: table-cell;
+        width:25%;
+        color:#fff;
+        .item-div{
+          background: #5f676c;
+          margin: 10px 10px;
+        }
+      }
+    }
+ .analysis-advice{
+  color: rgb(0 255 255);
+  font-size: 14px;
+  margin-left: 10px;
+ }
+
+  }
+  .list4 {
+    width: 100%;
+   
+  }
+  header {
+    width: 100%;
+    height: 44px;
+    background: url(../../../../assets/construction/subTitle.png) no-repeat
+      center;
+    text-align: center;
+    .title {
+      font-size: 26px;
+      font-weight: bold;
+      background: linear-gradient(0deg, #9dbbd2 0%, #ffffff 100%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      font-family: "Tensentype-ZhiHeiJ-W5";
+    }
+    .title::before {
+      content: "事件感知";
+      text-shadow: 0px 2px 5px rgba($color: #091a29, $alpha: 0.6);
+      position: absolute;
+      z-index: -1;
+    }
+  }
+}
+</style>
+  

src/views/pages/areaMonitor/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/areaMonitor/components/tiledMap.vue

@@ -0,0 +1,52 @@
+<!--
+ * @Author: hisense.wuhongjian
+ * @Date: 2020-06-09 20:35:02
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2021-12-21 14:40:47
+ * @Description: 超图地图容器
+-->
+<template>
+  <div :id="mapId" class="tiled-map" />
+</template>
+<script>
+export default {
+  name: 'TiledMap',
+  props: {
+    mapId: {
+      // 地图容器的div的id
+      type: String,
+      default: () => 'map',
+    },
+    hiMap: {
+      // 调用该组件的父组件的v-model绑定的对象
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      map: '', // 地图对象
+    };
+  },
+  mounted() {
+    if (!this.map) {
+      this.initMap();
+    }
+  },
+  methods: {
+    initMap() {
+      // setTimeout(()=>{
+      this.map = this.hiMap.initMap(this.mapId, { type: 'remote' });
+      // },000);
+      // this.hiMapFun = this.hiMap.myMapFun(this.hiMap.mapObj);
+    },
+  },
+};
+</script>
+<style lang="scss">
+.tiled-map {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+</style>