Merge branch 'master' of http://192.168.124.50:80/wuhongjian/qd-changjing

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

@@ -232,7 +232,7 @@ export default {
         selectByAreaEvent(params).then((res) => {
             this.eventListData = res.data.data.events;
             this.total = res.data.data.sum;
-            this.$parent.allListDataNum = res.data.data.sum;
+            // this.$parent.allListDataNum = res.data.data.sum;
         });
     },
     beforeCreate() {}, //生命周期 - 创建之前

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

@@ -2,14 +2,14 @@
   <div class="box">
     <div class="list4">
       <div class="inner-title">
-        重点点位视频监控
+        <p style="width:170px">重点点位视频监控</p>
         <span
         @click="openVideoList"
           style="float: right;
             font-size: 16px;
             margin-right: 10px;
             font-weight: normal;
-            color: rgb(0 255 255);  cursor: pointer;
+            color: rgb(0 255 255);  cursor: pointer;    margin-top: -27px;
           "
           >查看点位列表>
           <!-- <span style="color: #1296db; font-size: 18px; font-weight: bold;cursor: pointer;"
@@ -17,40 +17,28 @@
             </span>
       </div>
       <div class="video-List">
-      <div id="video1" class="monitor">
+        <video-play v-if="openVideo" :channel-id="channelCode"></video-play>
+  
       </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
-})
+import VideoPlay from './VideoPlay'
+
 export default {
   data() {
     return {
+      openVideo:true,
+      channelCode: ['37020220001321113922'],
       videoVisible: false,
     };
   },
-  components: {VideoList},
+  components: {VideoPlay},
   created() {},
   mounted() {
   
@@ -79,12 +67,20 @@ export default {
 .box {
   position: relative;
   .inner-title {
-    margin-top: 5px;
-    margin-bottom: 5px;
+    margin-top: 8px;
+    margin-bottom: 8px;
     margin-left: 10px;
     font-size: 16px;
     font-weight: bold;
     color: #ffffff;
+    color: #ffffff;
+    p{
+      line-height: 27px;
+      background: linear-gradient(90deg, #0873c1 0, rgba(8, 115, 193, 0) 100%)  ;
+      color: #1ffefd;
+      width: auto;
+      padding-left: 5px;
+    }
   }
   .list4 {
     width: 100%;

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

@@ -16,9 +16,9 @@
       <!--人员聚集高发区域Top5-->
       <div class="list1-people">
         <div class="people-left">
-          <div class="inner-title">人员聚集高发区域Top5</div>
+          <div class="inner-title"><p style="width:180px">人员聚集高发区域Top5</p></div>
           <div class="left-list" v-for="item in top5AreaList">
-            <div class="left-list1">{{ item.title }}</div>
+            <div class="left-list1"><img :src="item.img"></div>
             <div
               :class="selectArea === item.areaId ? 'active-item' : 'left-list2'"
               @click="chooseSelectArea(item)"
@@ -29,7 +29,7 @@
           </div>
         </div>
         <div class="people-right">
-          <div class="inner-title">高发事件Top5</div>
+          <div class="inner-title"><p style="width:150px">高发事件Top5</p></div>
           <div class="top5EventStyle" id="top5-event-chart"></div>
         </div>
       </div>
@@ -37,8 +37,9 @@
     <!--相关性分析-->
     <div class="list2">
       <div class="inner-title">
-        相关性分析
-        <span
+        <p style="width:120px">
+        相关性分析</p>
+        <!-- <span
           style="
             font-size: 14px;
             margin-left: 8px;
@@ -47,10 +48,10 @@
             border-radius: 4px;
           "
           >分析过程</span
-        >
+        > -->
       </div>
       <div class="list2-conclusion">
-        结论：<span>{{ relevanceName1 }}</span
+        <img src="../image/zongjie.png"> 结论：<span>{{ relevanceName1 }}</span
         >、<span>{{ relevanceName2 }}</span
         >、<span>{{ relevanceName1 }}</span> 与<span>{{ areaName }}</span
         >人员聚集较强相关。
@@ -59,7 +60,7 @@
     </div>
     <!--管理力量分析建议-->
     <div class="list3">
-      <div class="inner-title">管理力量分析建议</div>
+      <div class="inner-title"><p style="width:160px">管理力量分析建议</p></div>
       <div class="list3-analysis">
         <div class="analysis-item">
           <div class="item-div">
@@ -88,7 +89,7 @@
         </div>
       </div>
       <div class="analysis-advice">
-        <span style="font-size: 14px; color: #fff">决策建议：</span>
+        <span style="font-size: 14px; color: #fff"><img src="../image/jianyi.png"> 决策建议：</span>
         预测<span
           style="
             font-size: 14px;
@@ -98,18 +99,19 @@
           "
           >{{ 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,
+      daterange: ['2022-11-18','2022-11-25'],
       dataForm: {
         title: "",
         startDate: "",
@@ -127,15 +129,16 @@ export default {
       //管理力量分析
       analysis: {
         manageNum: 3,
-        sanitationNum: 14,
+        sanitationNum: 5,
         garbageNum: 2,
         mechanNum: 1,
         advice: "",
-        area: "第一海水浴场",
+        area: "台东商圈",
       },
     };
   },
-  components: {},
+  components: {
+  },
   created() {},
   mounted() {
     //获取高发区域
@@ -155,33 +158,38 @@ export default {
       this.top5AreaList = [
         {
           title: "TOP1",
-          areaName: "第一海水浴场",
+          img:require("../image/one.png"),
+          areaName: "台东商圈",
           areaId: "1",
-          num: "223",
+          num: "12",
         },
         {
           title: "TOP2",
-          areaName: "石老人海水浴场",
+          img:require("../image/two.png"),
+          areaName: "李村商圈",
           areaId: "2",
-          num: "123",
+          num: "8",
         },
         {
           title: "TOP3",
-          areaName: "金沙滩海水浴场",
+          img:require("../image/three.png"),
+          areaName: "五四广场",
           areaId: "3",
-          num: "111",
+          num: "7",
         },
         {
           title: "4",
+          img:require("../image/four.png"),
           areaName: "第一海水浴场",
           areaId: "4",
-          num: "65",
+          num: "5",
         },
         {
           title: "5",
-          areaName: "第一海水浴场",
+          img:require("../image/five.png"),
+          areaName: "石老人海水浴场",
           areaId: "5",
-          num: "32",
+          num: "4",
         },
       ];
     },
@@ -214,7 +222,7 @@ export default {
         },
         xAxis: {
           type: "category",
-          data: ["人员聚集", "违规停车", "路面不洁", "违章", "占道经营"],
+          data: ["违章停车", "垃圾桶满溢", "占道经营", "道路不洁", "垃圾收运不及时"],
           axisLine: {
             show: false, // 不显示坐标轴线
             lineStyle: {
@@ -254,7 +262,8 @@ export default {
         },
         series: [
           {
-            data: [250, 200, 150, 110, 100, 50],
+            name:"事件数量",
+            data: [31, 24, 17, 13, 12],
             type: "bar",
             itemStyle: {
               normal: {
@@ -308,7 +317,7 @@ export default {
         },
         xAxis: {
           type: "category",
-          data: ["11.04", "11.05", "11.06", "11.07", "11.08", "11.09", "11.10"],
+          data: ["11/18", "11/19", "11/20", "11/21", "11/22", "11/23", "11/24"],
           axisLine: {
             show: false, // 不显示坐标轴线
             lineStyle: {
@@ -374,8 +383,8 @@ export default {
         ],
         series: [
           {
-            name: "人员数量",
-            data: [14, 10, 4, 11, 10, 12, 6, 13],
+            name: "人流量",
+            data: [2500, 5600, 6500, 1200, 2300, 2400, 1900, 1800],
             type: "bar",
             itemStyle: {
               normal: {
@@ -394,10 +403,10 @@ export default {
             },
           },
           {
-            name: "路面不洁",
+            name: "违章停车数量",
             type: "line",
             yAxisIndex: 1,
-            data: [150, 165, 160, 150, 130, 140, 160],
+            data: [1, 10, 12, 2, 2, 3, 2,1],
             itemStyle: {
               normal: {
                 color: "#faa12f", //圆点颜色
@@ -414,10 +423,10 @@ export default {
             },
           },
           {
-            name: "违规停车",
+            name: "垃圾桶满溢事件数量",
             type: "line",
             yAxisIndex: 1,
-            data: [140, 155, 126, 172, 130, 120, 150],
+            data: [1,7,8,1,2,2,1,2],
             itemStyle: {
               normal: {
                 color: "#eff20c", //圆点颜色
@@ -434,10 +443,10 @@ export default {
             },
           },
           {
-            name: "垃圾桶满溢",
+            name: "占道经营事件数量",
             type: "line",
             yAxisIndex: 1,
-            data: [170, 155, 110, 120, 110, 120, 110],
+            data: [1,4,5,1,1,2,1,2],
             itemStyle: {
               normal: {
                 color: "#08e715", //圆点颜色
@@ -453,6 +462,46 @@ export default {
               },
             },
           },
+          {
+            name: "道路不洁事件数量",
+            type: "line",
+            yAxisIndex: 1,
+            data: [1,2,1,1,2,2,3,1],
+            itemStyle: {
+              normal: {
+                color: "#e51b4d", //圆点颜色
+                borderColor: "rgba(251,222,153,0.5)",
+                borderWidth: 4,
+                lineStyle: {
+                  //折线颜色大小
+                  type: "solid", //'dotted'虚线 'solid'实线
+                  color: "#e51b4d",
+                  width: 1,
+                  borderColor: "#e51b4d", //拐点边框颜色
+                },
+              },
+            },
+          },
+          {
+            name: "垃圾收运不及时事件数量",
+            type: "line",
+            yAxisIndex: 1,
+            data: [2,1,1,2,1,3,1,1],
+            itemStyle: {
+              normal: {
+                color: "#d63ac3", //圆点颜色
+                borderColor: "rgba(251,222,153,0.5)",
+                borderWidth: 4,
+                lineStyle: {
+                  //折线颜色大小
+                  type: "solid", //'dotted'虚线 'solid'实线
+                  color: "#d63ac3",
+                  width: 1,
+                  borderColor: "#d63ac3", //拐点边框颜色
+                },
+              },
+            },
+          },
         ],
       };
       eventChart.setOption(option);
@@ -503,22 +552,32 @@ export default {
     line-height: 14px;
     color: #ffffff;
   }
+  ::v-deep   .el-date-editor .el-range__close-icon {
+    line-height: 14px;
+  }
   ::v-deep .el-date-editor .el-range-input {
     background: #9000;
     color: #ffffff;
     font-size: 12px;
   }
   .inner-title {
-    margin-top: 5px;
-    margin-bottom: 5px;
+    margin-top: 10px;
+    margin-bottom: 10px;
     margin-left: 10px;
     font-size: 16px;
     font-weight: bold;
     color: #ffffff;
-    // background: linear-gradient(90deg, #0873c1 0, rgba(8, 115, 193, 0) 100%);
+    p{
+      line-height: 27px;
+      background: linear-gradient(90deg, #0873c1 0, rgba(8, 115, 193, 0) 100%)  ;
+      color: #1ffefd;
+      width: auto;
+      padding-left: 5px;
+    }
   }
   .list1 {
     width: 100%;
+    margin-bottom:10px;
     .list1-people {
       width: 100%;
 
@@ -549,6 +608,7 @@ export default {
             }
           }
           .active-item {
+            cursor: pointer;
             font-size: 14px;
             float: left;
             width: 50%;
@@ -579,6 +639,7 @@ export default {
   }
   .list2 {
     width: 100%;
+    margin-bottom: 10px;
     .list2-conclusion {
       color: #fff;
       border-color: #107bb0;
@@ -617,9 +678,13 @@ export default {
       }
     }
     .analysis-advice {
+      border-color: #107bb0;
+      box-shadow: 1px 1px 5px 1px RGB(16, 123, 176, 0.8) inset;
       color: rgb(0 255 255);
       font-size: 14px;
       margin-left: 10px;
+      margin-right: 10px;
+      margin-top: 8px;
     }
   }
   .list4 {

src/views/pages/areaMonitor/components/VideoLists.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: 445px;
+      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: 425px;
+      width: 444px;
+      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: 444px;
+    height:460px;
+      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/index.vue

@@ -8,7 +8,7 @@
       </div>
 
       <header>
-        <div class="title">重点区域监控平台</div>
+        <div class="title">重点区域精细化管理</div>
         <div></div>
       </header>
 
@@ -36,13 +36,13 @@
         </el-autocomplete>
       </div>
 
-      <div class="eventNum">
+      <!-- <div class="eventNum">
         累计事件数量(2022.05.25-至今)
         <p>
           <span>{{ allListDataNum }}</span
           >件
         </p>
-      </div>
+      </div> -->
 
       <!-- 事件感知 -->
       <div class="complaintContent">
@@ -71,14 +71,14 @@
 
           <!--视频列表弹出框-->
       <div class="siteList1" v-if="videoVisible">
-        <video-list></video-list>
+        <video-lists></video-lists>
       </div>
  
       <!-- 热力图图例 -->
-      <div class="legend"></div>
+      <!-- <div class="legend"></div> -->
       
       <!-- 时间轴 -->
-      <div class="timerShaft">
+      <!-- <div class="timerShaft">
         <HorizonTimeLine
           :timelineData="timelineData"
           @timeId="timeIdData"
@@ -86,7 +86,7 @@
           @hotName="hotName"
         />
         <span>时</span>
-      </div>
+      </div> -->
       <div class="changeLayer">
         <div class="title">地图显示</div>
         <div class="change-btn-box">
@@ -126,6 +126,7 @@
             <el-radio label="all">全市</el-radio>
             <el-radio label="local">本地</el-radio>
             <el-radio label="noLocal">外地</el-radio>
+            <el-radio label="clear">清除</el-radio>
           </el-radio-group>
         </div>
       </div>
@@ -147,7 +148,7 @@ import EarlyWarning from "./components/EarlyWarning";
 import VideoPlay from "./components/VideoPlay";
 import VideoListRight from "./components/VideoListRight";
 import VideoListLeft from "./components/VideoListLeft";
-import VideoList from "./components/VideoList";
+import VideoLists from "./components/VideoLists";
 import SiteListMore from "./components/SiteListMore";
 import { selectByJdWd } from "@/api/construction/index";
 import {
@@ -205,7 +206,7 @@ export default {
     complaintEvent,
     VideoListRight,
     VideoListLeft,
-    VideoList,
+    VideoLists,
     SiteListMore,
     VideoPlay,
     HorizonTimeLine,
@@ -481,6 +482,7 @@ export default {
     },
 
     layerHandleChange(item) {
+      console.log("地图显示等",item);
       if (this.changeLayerBtnGroup.indexOf(item) !== -1) {
         switch (item) {
           case "AI事件":
@@ -704,6 +706,11 @@ export default {
             "thermodynamic"
           );
           break;
+        case "clear":
+          this.hiMapFun.removeLayerByLayerName("types");
+          this.hiMapFun.removeLayerByLayerName("thermodynamic");
+          this.thermodynamicPeopleType = "";
+          break;  
       }
     },
     removeRoadCauseAnalysis() {
@@ -769,7 +776,7 @@ export default {
       font-family: 'Tensentype-ZhiHeiJ-W5';
     }
     .title::before {
-      content: '重点区域监控平台';
+      content: '重点区域精细化管理';
       text-shadow: 0px 3px 10px rgba(0,0,0,.9);
       position: absolute;
       z-index: -1;
@@ -838,7 +845,7 @@ export default {
     z-index: 1000;
     right: 10px;
     top: 90px;
-    height:660px;
+    height:700px;
     width: 478px;
     background: rgba($color: #05213b, $alpha: .85)
   }
@@ -846,9 +853,9 @@ export default {
     position: absolute;
     z-index: 10;
     right: 10px;
-    top: 760px;
+    top: 800px;
     width: 478px;
-    height:200px;
+    height:270px;
     background: rgba($color: #05213b, $alpha: .85);
 }
   .eventNum {
@@ -914,12 +921,12 @@ export default {
   }
   .siteList1 {
     position: absolute;
-    z-index: 10;
-    right: 498px;
-    top: 185px;
-    width: 374px;
-    height:500px;
-    background: rgba($color: #05213b, $alpha: .85);
+    z-index: 1151;
+    right: 10px;
+    top: 89px;
+    width: 477px;
+    height:700px;
+    background: rgba(5, 33, 59, 1);
   }
   .legend {
     position: absolute;