zc

src/components/alarmWindow/AlertModal.vue

@@ -55,7 +55,7 @@
                 <!--<i class="el-icon-video-camera"></i>-->
                 <!--<span>实时监控画面</span>-->
               <!--</div>-->
-              <H5PlayerVideo style="margin:10px 0 0 12px;" v-if="videoData" :videoProps="videoData"></H5PlayerVideo>
+              <H5PlayerVideo v-if="videoData" :videoProps="videoData"></H5PlayerVideo>
               <p v-if="!videoData" style="line-height:210px;text-align: center;color:#fff;font-size:16px;">该实验室无监控</p>
               <!--<mpegts-video v-if="videoData" style="display: inline-block" :videoProps="videoData"></mpegts-video>-->
             </div>
@@ -83,7 +83,7 @@
           </div>
         </div>
       </div>
-      <!--<fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>-->
+      <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
     </div>
   <!--</transition>-->
 </template>

src/components/fullH5PlayerVideo/fullH5PlayerVideo.vue

@@ -25,6 +25,9 @@ import { iotCameraGetPreviewURLs } from '@/api/index'
     created() {
     },
     mounted() {
+      // 将全屏容器移到 body 直接子级，避免父容器 transform 创建的层叠上下文
+      // 导致 position:fixed 无法覆盖 Header 等元素
+      document.body.appendChild(this.$el);
       this.iotCameraGetPreviewURLs();
     },
     methods: {
@@ -179,6 +182,10 @@ import { iotCameraGetPreviewURLs } from '@/api/index'
     beforeDestroy() {
       let self = this
       self.videoOff()
+      // 移除挂载到 body 的元素
+      if (this.$el && this.$el.parentNode === document.body) {
+        document.body.removeChild(this.$el);
+      }
     }
   }
 </script>

src/components/videoForMod/videoForMod.vue

@@ -63,12 +63,14 @@
       stopTime(cameraIndexCode){
         this.$set(this,'fullVideoProps',{cameraIndexCode:cameraIndexCode});
         this.$set(this,'fullVideoType',true);
+        document.body.classList.add('video-fullscreen-active');
       },
       //全屏关闭-开启轮播
       outFullScreen(){
         let self = this;
         this.$set(this,'fullVideoType',false);
         this.$set(this,'fullVideoProps',{});
+        document.body.classList.remove('video-fullscreen-active');
       },
     }
   }

src/styles/global.scss

@@ -227,4 +227,14 @@ html, body {
 }
 .el-select-dropdown{
   max-width: 200px;
+}
+
+// 视频全屏时，确保全屏层在所有内容之上
+body.video-fullscreen-active {
+  .top-nav {
+    z-index: 0 !important;
+  }
+  .screen {
+    z-index: 0 !important;
+  }
 }