大屏问题修改

src/components/screenDisplay.vue

@@ -508,16 +508,20 @@ import AMapLoader from "@amap/amap-jsapi-loader";
         </vue3ScrollSeamless>
       </div>
     </div>
-      <div class="videoInfo" v-show="videoOpen">
-      <div class="alarmInfo_header">
-        <div class="alarmInfo_title">{{stationName}}</div>
-        <div v-if="showVideoClose === true" class="alarmInfo_close" @click="handleVideoClose">X</div>
-      </div>
-      <div v-if="videoAllLoading" class="videoLoading-overlayAll">
-        <div class="videoLoading-spinner"></div>
-        <p> 视频加载中，请稍后......</p>
+    <div v-show="videoOpen">
+      <div class="thirdLeftLayerDialog">
+        <div class="videoInfo" ref="myDialogContainer">
+          <div class="alarmInfo_header">
+            <div class="alarmInfo_title">{{stationName}}</div>
+            <div v-if="showVideoClose === true" class="alarmInfo_close" @click="handleVideoClose">X</div>
+          </div>
+          <div v-if="videoAllLoading" class="videoLoading-overlayAll">
+            <div class="videoLoading-spinner"></div>
+            <p> 视频加载中，请稍后......</p>
+          </div>
+          <video-components-two @initSuccessAll="handleInitSuccessAll" :divWidth="divDialogWidth" :divHeight="divDialogHeight" :queryParams="queryParamsAll" :stopParams="stopParamsAll"/>
+        </div>
       </div>
-        <video-components-two @initSuccessAll="handleInitSuccessAll" :queryParams="queryParamsAll" :stopParams="stopParamsAll"/>
     </div>
     <div class="alarmInfo" v-if="open">
       <div class="alarmInfo_header">
@@ -3130,12 +3134,19 @@ export default defineComponent({
       this.divWidth = container.offsetWidth *0.9; // 获取元素的宽度，包括元素的padding，不包括border、margin和滚动条
       this.divHeight = container.offsetHeight *0.8; // 获取元素的宽度，包括元素的padding，不包括border、margin和滚动条
     },
+    getDivDialogWidth() {
+      console.log('22222222222222222222222222222222222222',window.innerWidth)
+      console.log('22222222222222222222222222222222222222',window.innerHeight)
+      this.divDialogWidth = window.innerWidth *0.9; // 获取元素的宽度，包括元素的padding，不包括border、margin和滚动条
+      this.divDialogHeight = window.innerHeight *0.8; // 获取元素的宽度，包括元素的padding，不包括border、margin和滚动条
+    },
     // 更多视频
     moreVideo() {
       this.videoOpen = true
       this.videoAllLoading = true
       this.queryParams = ''
       this.stopParams += 1
+      this.getDivDialogWidth()
       this.queryParamsAll = JSON.stringify(this.VideoInfo.playVideoList)
     },
     // 关闭更多视频弹窗
@@ -4386,6 +4397,17 @@ export default defineComponent({
   bottom: 5px;
   /*border: rgba(129, 210, 230, 0.5) solid 1px;*/
 }
+.thirdLeftLayerDialog{
+  z-index: 11;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  /* background: linear-gradient(to bottom, rgba(29, 70, 128, 0.5), rgba(29, 70, 128, 0.9), rgba(29, 70, 128, 0.5)); */
+  /*background: linear-gradient(318deg,#1d4680 0%, #0d174c);*/
+  top: 5px;
+  left: 5px;
+  bottom: 5px;
+}
 .noVideoData{
   color: white;
   text-align: center;