11111111

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";
+import VideoPlay from './VideoPlay'
-// 大华监控配置
+
-const DHWsInstance = DHWs.getInstance({
-  reConnectCount: 0,
-  connectionTimeout: 100
-})
 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-top: 8px;
-    margin-bottom: 5px;
+    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">
-        相关性分析
+        <p style="width:120px">
-        <span
+        相关性分析</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-top: 6px;
-    margin-bottom: 5px;
+    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;

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>

src/views/pages/areaMonitor/index.vue

@@ -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;
+    z-index: 1151;
-    right: 498px;
+    right: 10px;
-    top: 185px;
+    top: 89px;
-    width: 374px;
+    width: 477px;
-    height:500px;
+    height: 658px;
-    background: rgba($color: #05213b, $alpha: .85);
+    background: rgba(5, 33, 59, 1);
   }
   .legend {
     position: absolute;