From da61132e87ae443c5b9d1bf57a0f3f8a8061305e Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Thu, 22 Aug 2024 17:08:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=BD=E5=B7=A5=E7=AE=A1=E6=8E=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../manage/realTimeManage/realTimeManage.vue  | 41 +++++++++++++++----
 1 file changed, 34 insertions(+), 7 deletions(-)

diff --git a/src/views/construction/manage/realTimeManage/realTimeManage.vue b/src/views/construction/manage/realTimeManage/realTimeManage.vue
index 4ad24be..3df08ad 100644
--- a/src/views/construction/manage/realTimeManage/realTimeManage.vue
+++ b/src/views/construction/manage/realTimeManage/realTimeManage.vue
@@ -49,12 +49,19 @@
     <!-- 视频 -->
     <div class="center">
       <div class="change-box layout">
-        <el-button type="primary" plain>1</el-button>
-        <el-button type="primary" plain>4</el-button>
+        <el-button type="primary" plain @click="changePlayVideo(1)">1</el-button>
+        <el-button type="primary" plain @click="changePlayVideo(4)">4</el-button>
       </div>
       <!-- 球机视频 -->
-      <div class="video-box">
-        <video id="videoPlayer1" class="ball-content" autoplay="autoplay" loop="loop" muted controls="controls"></video>
+      <div class="video-box layout">
+        <video v-if="boxNum == 1 || boxNum == 4" id="videoPlayer1" :class="classStyle" autoplay="autoplay" loop="loop"
+          muted controls="controls"></video>
+        <video v-if="boxNum == 4" id="videoPlayer2" :class="classStyle" autoplay="autoplay" loop="loop" muted
+          controls="controls"></video>
+        <video v-if="boxNum == 4" id="videoPlayer3" :class="classStyle" autoplay="autoplay" loop="loop" muted
+          controls="controls"></video>
+        <video v-if="boxNum == 4" id="videoPlayer4" :class="classStyle" autoplay="autoplay" loop="loop" muted
+          controls="controls"></video>
       </div>
       <!-- 违章识别 -->
       <div class="vio-box">
@@ -129,7 +136,10 @@ export default {
       loading: false,
       //预警滚动是否有数据
       isHasData: true,
-      busy: true
+      busy: true,
+      // 窗口数量
+      boxNum: 1,
+      classStyle: 'ball-content'
     };
   },
   created() {
@@ -262,8 +272,15 @@ export default {
     // 轮播图切换时触发
     loadVioInfos(newIndex, oldIndex) {
       this.loadPhotosById(newIndex);
-      // alert(newIndex)
-      // alert(oldIndex)
+    },
+    // 切换播放窗口
+    changePlayVideo(type) {
+      this.boxNum = type;
+      if (type == 1) {
+        this.classStyle = 'ball-content'
+      } else {
+        this.classStyle = 'ball-content-4'
+      }
     },
     //给梳妆街头不同层级设置不同的icon
     renderContent(h, { node, data }) {
@@ -497,6 +514,9 @@ export default {
 .video-box {
   width: 100%;
   height: calc(100% - 275px);
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-around;
 }
 
 .ball-content {
@@ -506,6 +526,13 @@ export default {
   object-fit: fill;
 }
 
+.ball-content-4 {
+  width: 49.5%;
+  height: 49%;
+  pointer-events: none;
+  object-fit: fill;
+}
+
 .vio-box {
   width: 100%;
   height: 200px;