a

src/views/pms/video_center/sip/splitview.vue

@@ -3,18 +3,23 @@
     <el-card
       id="devicePosition"
       shadow="never"
-      style="height: calc(100% - 40px); border: 0"
+      style="height: calc(100%); border: 0; width: 100vw"
       :body-style="{ padding: '0px' }"
       class="border-none"
     >
       <el-container style="height: 100%">
-        <el-aside width="250px" style="background-color: #ffffff">
+        <!-- 左侧设备列表 -->
+        <el-aside width="250px" style="background-color: #ffffff" :class="{ hidden: isFullscreen }">
           <DeviceTree :click-event="clickEvent" />
         </el-aside>
-        <el-main style="padding: 0">
+
+        <!-- 主体内容 -->
+        <div style="padding: 0" class="el-main">
+          <!-- 上方分屏按钮 -->
           <div
             height="5vh"
             style="text-align: left; font-size: 17px; line-height: 5vh; margin-bottom: 10px"
+            :class="{ hidden: isFullscreen }"
           >
             {{ t('sip.splitview998531-1') }}
             <el-button
@@ -50,9 +55,17 @@
             >
               {{ t('sip.splitview998531-4') }}
             </el-button>
+
+            <el-button @click="toggleFullscreen" :type="isFullscreen ? 'danger' : 'primary'">
+              {{ isFullscreen ? '退出全屏' : '全屏' }}
+            </el-button>
           </div>
-          <div style="height: 85vh; display: flex; flex-wrap: wrap">
-            <!-- 渲染所有分屏数量的播放框 -->
+
+          <!-- 分屏播放区域 -->
+          <div
+            style="height: 85vh; display: flex; flex-wrap: wrap"
+            :class="{ 'fullscreen-layout': isFullscreen }"
+          >
             <div
               v-for="i in spilt"
               :key="i"
@@ -61,14 +74,12 @@
               :class="{ redborder: playerIdx == i - 1 }"
               @click="playerIdx = i - 1"
             >
-              <!-- 显示序号，如果该位置没有视频或不在可用通道范围内 -->
               <div
                 v-if="!videoUrl[i - 1] || i - 1 >= availableChannels.length"
                 style="color: #ffffff; font-size: 30px; font-weight: bold"
               >
                 {{ i }}
               </div>
-              <!-- 只有当有视频URL时才渲染播放器 -->
               <player
                 v-if="videoUrl[i - 1]"
                 :ref="(el) => setPlayerRef(el, i - 1)"
@@ -87,7 +98,7 @@
               />
             </div>
           </div>
-        </el-main>
+        </div>
       </el-container>
     </el-card>
   </div>
@@ -280,13 +291,76 @@ watch(
   }
 )
 
+// 全屏状态
+const isFullscreen = ref(false)
+
+// 切换全屏
+const toggleFullscreen = () => {
+  const container = document.getElementById('devicePosition') // 获取全屏容器
+  if (!container) return
+
+  if (!isFullscreen.value) {
+    // 进入全屏
+    if (container.requestFullscreen) {
+      container.requestFullscreen()
+    } else if (container.webkitRequestFullscreen) {
+      container.webkitRequestFullscreen() // Safari
+    } else if (container.mozRequestFullScreen) {
+      container.mozRequestFullScreen() // Firefox
+    } else if (container.msRequestFullscreen) {
+      container.msRequestFullscreen() // IE/Edge
+    }
+  } else {
+    // 退出全屏
+    if (document.exitFullscreen) {
+      document.exitFullscreen()
+    } else if (document.webkitExitFullscreen) {
+      document.webkitExitFullscreen() // Safari
+    } else if (document.mozCancelFullScreen) {
+      document.mozCancelFullScreen() // Firefox
+    } else if (document.msExitFullscreen) {
+      document.msExitFullscreen() // IE/Edge
+    }
+  }
+}
+
+// 监听全屏状态变化
+const handleFullscreenChange = () => {
+  isFullscreen.value = !!(
+    document.fullscreenElement ||
+    document.webkitFullscreenElement ||
+    document.mozFullScreenElement ||
+    document.msFullscreenElement
+  )
+
+  // 动态调整主内容区域宽度
+  const mainContent = document.querySelector('.el-main')
+  if (mainContent) {
+    if (isFullscreen.value) {
+      mainContent.style.width = '100vw'
+      mainContent.style.marginLeft = '0'
+    } else {
+      mainContent.style.width = ''
+      mainContent.style.marginLeft = ''
+    }
+  }
+}
+
 // 生命周期钩子
 onMounted(() => {
   checkPlayByParam()
+  document.addEventListener('fullscreenchange', handleFullscreenChange)
+  document.addEventListener('webkitfullscreenchange', handleFullscreenChange)
+  document.addEventListener('mozfullscreenchange', handleFullscreenChange)
+  document.addEventListener('MSFullscreenChange', handleFullscreenChange)
 })
 
 onUnmounted(() => {
   clearTimeout(updateLooper.value)
+  document.removeEventListener('fullscreenchange', handleFullscreenChange)
+  document.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
+  document.removeEventListener('mozfullscreenchange', handleFullscreenChange)
+  document.removeEventListener('MSFullscreenChange', handleFullscreenChange)
 })
 
 // 销毁事件
@@ -537,7 +611,7 @@ const clear = (idx) => {
   justify-content: center;
   margin-right: 10px;
   position: relative;
-  border-radius: 5px;
+  /* border-radius: 5px; */
 }
 
 .empty-box {
@@ -551,4 +625,47 @@ const clear = (idx) => {
   top: 0px;
   height: 100% !important;
 }
+
+.hidden {
+  display: none !important;
+}
+
+/* 全屏时隐藏滚动条 */
+:-webkit-full-screen {
+  overflow: hidden;
+}
+
+:-moz-full-screen {
+  overflow: hidden;
+}
+
+:-ms-fullscreen {
+  overflow: hidden;
+}
+
+/* :fullscreen {
+  height: 100vh !important;
+  width: 100vw !important;
+  margin: 0 !important;
+
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  overflow: hidden !important;
+  max-width: 100vw !important;
+  max-height: 100vh !important;
+} */
+
+.fullscreen-layout {
+  height: 100vh !important;
+  width: 100% !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  overflow: hidden !important;
+  max-width: 100% !important;
+  max-height: 105vh !important;
+}
 </style>