111

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

@@ -4,8 +4,7 @@
       <div class="inner-title">
         重点点位视频监控
         <span
-          style="
-            float: right;
+          style="float: right;
             font-size: 16px;
             color: #fff;
             margin-right: 10px;
@@ -17,25 +16,53 @@
           ></span
         >
       </div>
-      <div class="video-List">放视频</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 {};
+    return {
+      videoVisible: false,
+    };
   },
-  components: {},
+  components: {VideoList},
   created() {},
-  mounted() {},
+  mounted() {
+  
+  },
   methods: {
     //打开视频列表
     openVideoList(){
+      this.videoVisible=!this.videoVisible
+      this.$emit("IsShowLideoVisible",this.videoVisible);
+    },
+ 
 
-    }
   },
   watch: {},
 };

src/views/pages/area/index.vue

@@ -53,13 +53,13 @@
       <!-- 视频标签、列表 -->
     
       <div class="complaintContent1">
+      
         <video-list-right></video-list-right>
       </div>
 
       <!-- 重点视频列表 -->
-      
       <div class="mainVideoList">
-         <video-list-left></video-list-left>
+         <video-list-left  @IsShowLideoVisible="IsShowLideoVisible"></video-list-left>
       </div>
       <div class="keyAreas" @click="handleKeyArea">
          重点区域
@@ -68,6 +68,12 @@
       <div class="siteList" v-if="keyAreasShow">
         <site-list-more></site-list-more>
       </div>
+
+          <!--视频列表弹出框-->
+      <div class="siteList1" v-if="videoVisible">
+        <video-list></video-list>
+      </div>
+ 
       <!-- 热力图图例 -->
       <div class="legend"></div>
       
@@ -125,6 +131,9 @@
       </div>
       <video-play v-if="openVideo" :channel-id="channelCode"></video-play>
     </div>
+ 
+     
+   
   </div>
 </template>
 
@@ -138,6 +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 SiteListMore from "./components/SiteListMore";
 import { selectByJdWd } from "@/api/construction/index";
 import {
@@ -157,6 +167,7 @@ import HorizonTimeLine from "./components/HorizonTimeLine";
 export default {
   data() {
     return {
+      videoVisible:false,
       hiMap: new HieimpMap(), // 地图全局对象
       mapId: "map-single", // 地图容器的id
 
@@ -193,6 +204,7 @@ export default {
     complaintEvent,
     VideoListRight,
     VideoListLeft,
+    VideoList,
     SiteListMore,
     VideoPlay,
     HorizonTimeLine,
@@ -265,6 +277,9 @@ export default {
     }
   },
   methods: {
+    IsShowLideoVisible(val){
+ this.videoVisible=val
+    },
     // 获取年月日
     getCurrentTime() {
       const yy = new Date().getFullYear();
@@ -719,6 +734,9 @@ 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%;
@@ -732,6 +750,7 @@ export default {
 }
 
 #contain {
+ 
   header {
     position: relative;
     z-index: 1000;
@@ -892,6 +911,15 @@ export default {
     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);
+  }
   .legend {
     position: absolute;
     left: 50%;

src/views/pages/mapHome/IntegrationMiddle.vue

@@ -839,6 +839,7 @@
         </div>
         <div class="monitor" id="video2"></div>
       </div> -->
+      
     </aside>
 
     <!-- 资源清单 -->
@@ -1718,7 +1719,7 @@ export default {
       // 视频扎点
       dataCamera: [],
       basisShow: false,
-      homeEventData: [],
+      openDialog2: [],
       FloodMaplatlng: {} // 事件飞入点-防汛使用
     }
   },