From e07cf37e0b927469826559637822296b33e0a1c1 Mon Sep 17 00:00:00 2001
From: gongjiale <942894820@qq.com>
Date: Fri, 25 Nov 2022 16:21:25 +0800
Subject: [PATCH] 11111111

---
 .../areaMonitor/components/VideoListLeft.vue  |  46 +--
 .../areaMonitor/components/VideoListRight.vue |  38 +-
 .../areaMonitor/components/VideoLists.vue     | 376 ++++++++++++++++++
 src/views/pages/areaMonitor/image/five.png    | Bin 0 -> 317 bytes
 src/views/pages/areaMonitor/image/four.png    | Bin 0 -> 272 bytes
 src/views/pages/areaMonitor/image/one.png     | Bin 0 -> 747 bytes
 src/views/pages/areaMonitor/image/three.png   | Bin 0 -> 836 bytes
 src/views/pages/areaMonitor/index.vue         |  26 +-
 8 files changed, 437 insertions(+), 49 deletions(-)
 create mode 100644 src/views/pages/areaMonitor/components/VideoLists.vue
 create mode 100644 src/views/pages/areaMonitor/image/five.png
 create mode 100644 src/views/pages/areaMonitor/image/four.png
 create mode 100644 src/views/pages/areaMonitor/image/one.png
 create mode 100644 src/views/pages/areaMonitor/image/three.png

diff --git a/src/views/pages/areaMonitor/components/VideoListLeft.vue b/src/views/pages/areaMonitor/components/VideoListLeft.vue
index 58c503a..6919ae9 100644
--- a/src/views/pages/areaMonitor/components/VideoListLeft.vue
+++ b/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">
-      </div>
+        <video-play v-if="openVideo" :channel-id="channelCode"></video-play>
+  
       </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,17 +67,25 @@ 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%;
     .video-List {
-    //   background: red;
+       //background: red;
       height: 146px;
       margin-left: 40px;
       margin-right: 40px;
diff --git a/src/views/pages/areaMonitor/components/VideoListRight.vue b/src/views/pages/areaMonitor/components/VideoListRight.vue
index ef365d7..dfa345c 100644
--- a/src/views/pages/areaMonitor/components/VideoListRight.vue
+++ b/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,7 +48,7 @@
             border-radius: 4px;
           "
           >分析过程</span
-        >
+        > -->
       </div>
       <div class="list2-conclusion">
         结论：<span>{{ relevanceName1 }}</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">
@@ -105,6 +106,7 @@
 </template>
   <script>
 import bus from "@/views/layout/bus";
+
 import * as echarts from "echarts";
 export default {
   data() {
@@ -135,7 +137,8 @@ export default {
       },
     };
   },
-  components: {},
+  components: {
+  },
   created() {},
   mounted() {
     //获取高发区域
@@ -155,30 +158,35 @@ export default {
       this.top5AreaList = [
         {
           title: "TOP1",
+          img:require("../image/one.png"),
           areaName: "第一海水浴场",
           areaId: "1",
           num: "223",
         },
         {
           title: "TOP2",
+          img:require("../image/two.png"),
           areaName: "石老人海水浴场",
           areaId: "2",
           num: "123",
         },
         {
           title: "TOP3",
+          img:require("../image/three.png"),
           areaName: "金沙滩海水浴场",
           areaId: "3",
           num: "111",
         },
         {
           title: "4",
+          img:require("../image/four.png"),
           areaName: "第一海水浴场",
           areaId: "4",
           num: "65",
         },
         {
           title: "5",
+          img:require("../image/five.png"),
           areaName: "第一海水浴场",
           areaId: "5",
           num: "32",
@@ -509,16 +517,23 @@ export default {
     font-size: 12px;
   }
   .inner-title {
-    margin-top: 5px;
-    margin-bottom: 5px;
+    margin-top: 6px;
+    margin-bottom: 6px;
     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%;
 
@@ -579,6 +594,7 @@ export default {
   }
   .list2 {
     width: 100%;
+    margin-bottom: 10px;
     .list2-conclusion {
       color: #fff;
       border-color: #107bb0;
diff --git a/src/views/pages/areaMonitor/components/VideoLists.vue b/src/views/pages/areaMonitor/components/VideoLists.vue
new file mode 100644
index 0000000..7883a64
--- /dev/null
+++ b/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: 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: 398px;
+    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>
diff --git a/src/views/pages/areaMonitor/image/five.png b/src/views/pages/areaMonitor/image/five.png
new file mode 100644
index 0000000000000000000000000000000000000000..eb9c50ef358447ca40faa46f5cb5bc28841abb11
GIT binary patch
literal 317
zcmV-D0mA-?P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00001b5ch_0Itp)
z=>Px#_en%SR5(wik}*mHQ4~eb-9Q?bkuC_98jwKTfRG|c8XHrIz3Ee036_C?O%T%9
zXqm=Bf`yfk1q5*cUU`s!%>0=QlMhq<KZkqndt%R{?EkjUfoTD^E$Q|DT?%jm90TJN
zqzd2;Xh`Z;u}dX*0#=f)>H^+@Iq(6TMjBu#={Bj9DDfNk1)hN~papc|oupjil)?;{
zNP67DZJz)yz$lv}2PpEk9cpVy?b0!p0HTATq=Q0$?dzC-%GLIAQ)aIW5QV*EU2Pu$
z3*b`H{jN=X00uym7~dIi5nxG&S;b_Dw!1)-)dYTk&&qpHW&3JPp$Pm3kTFydGV=u8
P00000NkvXXu0mjf%HDxD

literal 0
HcmV?d00001

diff --git a/src/views/pages/areaMonitor/image/four.png b/src/views/pages/areaMonitor/image/four.png
new file mode 100644
index 0000000000000000000000000000000000000000..d0e4d8477890f1b29d3928b208306c02f623ed9b
GIT binary patch
literal 272
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`jKx9jP7LeL$-D$|PI<aGhFJKo
zoovn57%0%Xe{w`iP@<sL`cq<S8bUb&UzSL9X6QI5U!0J@ndNP1q}251&-LV4)y2l&
zXB*EnR#MElu9~|!XzKU-W&9Ezr_R)JZ-`|qb9fkiKrW(w>49$y8jS7<UnVl$4o%<`
zY2-8bCsM$WHfh<m-3L@86RJ6;sBTSm+V(g`g)zsx(K29a$u6d-16raRDj#-R6&Oxh
za;)}TGk?x^=TbJ6d&ydi9lv#h=15#M_tZ@}*>C%UeSzA`ONWY|Y@4t>$Da9I;SV3d
TspbwKKQnl``njxgN@xNA2SR64

literal 0
HcmV?d00001

diff --git a/src/views/pages/areaMonitor/image/one.png b/src/views/pages/areaMonitor/image/one.png
new file mode 100644
index 0000000000000000000000000000000000000000..3c82f5b276511c3886562095bd5b2b3cd2fceedc
GIT binary patch
literal 747
zcmV<H0u=p;P)<h;3K|Lk000e1NJLTq000&M000&U1^@s6#I$TX00001b5ch_0Itp)
z=>Px%rAb6VR7gv;luKw+K@^7nGf}8EH^nMGR=qd6(S_j3jbKGkp+1WsB5HG6A4svA
z>c&Oeb;U=aBG}xtC?aBu6)M$@;?h;SQQVjtE2s!ob5j?U%r7^Onxtu(ES%Lm&V2LF
zng5L7KQ$@ky6r|cG+JspPhrB0de;m0ECPSD8}=#a7qx&j)c&yZ>t$tdNBst+)z_N9
zN^cAg&3#)0j@!ZB;z{W#7=I-=tsqmHGA+V~rH2yiE1a{ORBt8~t{oZ#cnQSoT)<8U
zR{4E@lU}jXQS*Po{#cZ}DiQIU<lD@gpjjwgO|j%a1{{xsE{pIsfcK{3ZF6m78o>4(
zU;@A{Y91{IhRBo|P3~}Q;~jvlB66lFn!KL@&)CMXG%yBY){J?LZp0XcptVpLHTRSQ
z6Y|({k|*4V@dJW2P|{)!C7)+g(a~T*YyZSLYQ0GUfliRusspnRns-I1FMj;$x;kV1
zo$sjyySaAo0U)O!xFWy@63?mu189X{Gl+hI1D2EO%BDNl+>T%?w2T6nqz;@Em7dKk
z<sOvGzPw1zF@k0Qsit~wU1H973gCbi?hZ#&Z;HVFAYmKh1P%-3v{pPW#1Y>WzI_VS
z`}Pz_j|fK6#Fzrc0U0!%WM@9EsPbmoLyc*0g2Y-SGDz}Psb`C<MqVJ~s;|k6d3%d(
zSh91bJ+wuGH%J_+1T9eZBrSpNaP()QA~?U8h!_W<aDIsc<^{N^1NxD5Z*HobfJL8B
zY0xJ-c#$IgB!am|`K(3GS<&QV#WYoO-FREDIbX_tp;*JIeCaQ_y`o|_V*L9Tvi4fA
zpWiiOUZxsrN=4i@+60JIx)Fhh<#@w2fnD2(`=XXfm1{blRW&%HmN;8Y{wWwKr+Qge
dR0A&;^A}B<3?}qh=br!o002ovPDHLkV1gRKR9pZ6

literal 0
HcmV?d00001

diff --git a/src/views/pages/areaMonitor/image/three.png b/src/views/pages/areaMonitor/image/three.png
new file mode 100644
index 0000000000000000000000000000000000000000..7b5fb4b98be458b3d627383ddcafd30426e4d3d5
GIT binary patch
literal 836
zcmV-K1H1f*P)<h;3K|Lk000e1NJLTq000&M000&U1^@s6#I$TX00001b5ch_0Itp)
z=>Px%{z*hZR7gv;lubxfQ547j=f2SlG?+I=wM$GS7eT9*DS;X0yct_W2z@NF2uYkb
zwrP>>0_Tk%A+#&0AS!j<h+%D#mPKHTtQOG+(T6#2lqATRcTc?MjE#<;L1*>uz32Sy
z|9sp>_)kX5xrtaPOoHk+b013{^#!7l+?agua9b@2@n~~kdDs{1e!M1l&TQQ=56`#F
zfD4h{S*-Pb&jTlhLmf*t1zlNO6UJHM4ixbTX}gL9)dDz@>(7!qbJxCLw8Jfh71R4c
zxB$Yqvu4Ht0=Bx&gmGf-W{65#;(5`Qf>){3{M26%{Q~hbcg?6KqE@dz(&vJwW1)+J
zs24=9Rez+)GWC}L_GO&kfl%(oN$zyiSTQ{Tf|`L(sG70giian`yq5?ky?*1C3r>!N
zgDiQ-`BXJSO_=&10gYKzZmJ4>QAELgX{W9NXwFIfo~jwgEmOAucp*f++R*jT1<%C8
zWj6C90Yzz#*yXXg1<aST!M3EDBI2o%fHCRxgK~P{Txu68*F9<Z)$#XkD=DFxj=9Bg
zOPcy^2ATwMyCm@zlH+-k!4y#gk@keCzagN~Z2?mw30W?gx|q1n=a057v?gOoQ*UHo
z5a2PA@&pSdnXM}cssp1!GV7(m=uOMid7;TXrxvD4lc|CjKy?Hh^lHY_C17_tOx*<F
zmy*v2fdD|7ld6F1@dkTlW=Gm9(rLRXTM7aO03KqH6W6b5MoU)cl9x9-)~4FO#VCMM
z$$ZV7lm+_<!V71da?8Vnb0l$z2_Jo$aVYmJ?@7;^ZF?k%C^H)JYP`Y*0S}Ny*n7<Q
zxF$GzXvITE3DmsO1q949aW^T-U2lEY#7YA46fbwOO#M87E&#=uv(F59)~9ukt(DQb
zU?=#;aJX6#{KWZoW_o)t;y(R<23v96g}Ih(T;_k`Y^i>uW;OV#il>J|r-h&!YpHU^
z(wXZ`)z~ui_W*XUlko>tGs-p$cGW6$YP~u-=hEhZl~ix2c^kQ4xz8Vnr8y=pG81qB
O0000<MNUMnLSTXnAc=JV

literal 0
HcmV?d00001

diff --git a/src/views/pages/areaMonitor/index.vue b/src/views/pages/areaMonitor/index.vue
index a3fd255..1b2b9c9 100644
--- a/src/views/pages/areaMonitor/index.vue
+++ b/src/views/pages/areaMonitor/index.vue
@@ -54,7 +54,7 @@
     
       <div class="complaintContent1">
       
-        <video-list-right></video-list-right>
+        <video-list-right  ></video-list-right>
       </div>
 
       <!-- 重点视频列表 -->
@@ -71,7 +71,7 @@
 
           <!--视频列表弹出框-->
       <div class="siteList1" v-if="videoVisible">
-        <video-list></video-list>
+        <video-lists></video-lists>
       </div>
  
       <!-- 热力图图例 -->
@@ -147,7 +147,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 {
@@ -204,7 +204,7 @@ export default {
     complaintEvent,
     VideoListRight,
     VideoListLeft,
-    VideoList,
+    VideoLists,
     SiteListMore,
     VideoPlay,
     HorizonTimeLine,
@@ -837,7 +837,7 @@ export default {
     z-index: 1000;
     right: 10px;
     top: 90px;
-    height:660px;
+    height:700px;
     width: 478px;
     background: rgba($color: #05213b, $alpha: .85)
   }
@@ -845,9 +845,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 {
@@ -913,12 +913,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: 658px;
+    background: rgba(5, 33, 59, 1);
   }
   .legend {
     position: absolute;