大屏视频播放宽高调整

src/components/screenDisplay.vue

@@ -422,14 +422,14 @@ import AMapLoader from "@amap/amap-jsapi-loader";
     </div>
     <div v-show="mapLevel === 3">
       <div class="thirdLeftLayer">
-        <div class="thirdLeftLayer_one">
+        <div class="thirdLeftLayer_one" ref="myContainer">
           <div class="title_row">
             <div class="titleStyleTwoVideo"><p>换热站监控</p></div>
             <div class="moreInfo" @click="PreviousVideo()">上一个</div>
             <div class="moreInfo" @click="nextVideo()">下一个</div>
-            <div class="moreInfo" @click="moreVideo()">更多》</div>
+<!--            <div class="moreInfo" @click="moreVideo()">更多》</div>-->
           </div>
-          <video-components :queryParams="queryParams" :stopParams="stopParams"/>
+          <video-components :divWidth="divWidth" :divHeight="divHeight" :queryParams="queryParams" :stopParams="stopParams"/>
 
         </div>
         <div class="thirdLeftLayer_one">
@@ -483,6 +483,13 @@ import AMapLoader from "@amap/amap-jsapi-loader";
         </vue3ScrollSeamless>
       </div>
     </div>
+    <div class="videoInfo" v-show="videoOpen">
+      <div class="alarmInfo_header">
+        <div class="alarmInfo_title">换热站监控</div>
+        <div class="alarmInfo_close" @click="handleVideoClose">X</div>
+      </div>
+        <video-components-two :queryParams="queryParamsAll" :stopParams="stopParamsAll"/>
+    </div>
     <div class="alarmInfo" v-if="open">
       <div class="alarmInfo_header">
         <div class="alarmInfo_title">报警信息轮播</div>
@@ -520,6 +527,7 @@ import { ElLoading } from "element-plus";
 import { ElMessage } from "element-plus";
 const m = detectZoom();
 import videoComponents from './videoComponents.vue'
+import videoComponentsTwo from './videoComponentsTwo.vue'
 import {vue3ScrollSeamless} from "vue3-scroll-seamless";
 import {
   postServicCenterList,
@@ -548,6 +556,7 @@ import {defineComponent} from "vue";
 export default defineComponent({
   components: {
     videoComponents,
+    videoComponentsTwo,
     vue3ScrollSeamless
   },
   watch: {
@@ -572,7 +581,11 @@ export default defineComponent({
     return {
       videoNum: 0,
       queryParams: '',
+      divWidth: '',
+      divHeight: '',
+      queryParamsAll: '',
       stopParams: 0,
+      stopParamsAll: 0,
       showVideo: false,
       VideoInfo: {
         selectOptions: [],
@@ -581,6 +594,7 @@ export default defineComponent({
         playVideoList: []
       },
       open: false,
+      videoOpen: false,
       items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
       currentIndex: 0,
       heatSourceList: [], // 热源趋势echarts展示
@@ -2961,12 +2975,28 @@ export default defineComponent({
         })
         const videoList = []
         videoList.push(this.VideoInfo.playVideoList[this.videoNum])
+        this.getDivWidth()
         this.queryParams = JSON.stringify(videoList)
       })
     },
+    getDivWidth() {
+      const container = this.$refs.myContainer;
+      this.divWidth = container.offsetWidth *0.9; // 获取元素的宽度，包括元素的padding，不包括border、margin和滚动条
+      this.divHeight = container.offsetHeight *0.8; // 获取元素的宽度，包括元素的padding，不包括border、margin和滚动条
+      console.log('width',this.divWidth);
+      console.log('divHeight',this.divHeight);
+    },
     // 更多视频
     moreVideo() {
-
+      this.videoOpen = true
+      this.stopParams += 1
+      console.log('this.VideoInfo.playVideoList',this.VideoInfo.playVideoList)
+      this.queryParamsAll = JSON.stringify(this.VideoInfo.playVideoList)
+    },
+    // 关闭更多视频弹窗
+    handleVideoClose() {
+      this.stopParamsAll += 1
+      this.videoOpen = false
     },
     // 下一个视频
     nextVideo() {
@@ -3870,6 +3900,18 @@ export default defineComponent({
   left: 30%;
   top: 17%;
 }
+.videoInfo{
+  width: 1300px;
+  height: 750px;
+  border: rgba(129, 210, 230, 0.5) solid 1px;
+  //padding: 0 0 0 10px;
+  background: linear-gradient(318deg, rgba(29, 70, 128, 0.8) 0%, rgba(13, 23, 76, 0.8) 100%);
+  color: white;
+  position: absolute;
+  z-index: 9;
+  left: 13%;
+  top: 10%;
+}
 .alarmTable{
   margin-bottom: 20px;
   width: 750px;
@@ -3988,6 +4030,7 @@ export default defineComponent({
   /*border: rgba(129, 210, 230, 0.5) solid 1px;*/
 }
 .thirdLeftLayer_one{
+  width: 100%;
   margin-bottom: 11px;
   height: 32%;
   border: rgba(129, 210, 230, 0.5) solid 1px;

src/components/videoComponents.vue

@@ -97,6 +97,14 @@ const pProps = defineProps({
     type: String,
     required: true,
   },
+  divWidth: {
+    type: Number,
+    required: true,
+  },
+  divHeight: {
+    type: Number,
+    required: true,
+  },
   stopParams: {
     type: String,
     required: true,
@@ -106,8 +114,8 @@ const pProps = defineProps({
 //声明公用变量
 var initCount = 0;
 var pubKey = '';
-var playWnd_width = window.innerWidth - 1570;
-var playWnd_height = window.innerHeight - 720;
+var playWnd_width = pProps.divWidth;
+var playWnd_height = pProps.divHeight;
 var oWebControl;
 var videoIp="218.69.97.198";;
 var videoPort=1443;
@@ -128,12 +136,12 @@ function down(){
   window.open(filepath);
 }
 function resetVideoWidth(){
-  var menuWidth=localStorage.getItem("tabWidth");
-  if(!menuWidth || menuWidth ==='' || !Number(menuWidth)){
-    playWnd_width = window.innerWidth - 1570;
-  }else{
-    playWnd_width = window.innerWidth - Number(menuWidth);
-  }
+  // var menuWidth=localStorage.getItem("tabWidth");
+  // if(!menuWidth || menuWidth ==='' || !Number(menuWidth)){
+  //   pProps.divWidth = window.innerWidth - 1570;
+  // }else{
+  //   pProps.divWidth = window.innerWidth - Number(menuWidth);
+  // }
   console.log('playVW',playWnd_width);
 }
 
@@ -288,7 +296,7 @@ function initPlugin() {
           cbIntegrationCallBack: cbIntegrationCallBack
         });
 
-        oWebControl.JS_CreateWnd("playWnd", playWnd_width, playWnd_height).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
+        oWebControl.JS_CreateWnd("playWnd", pProps.divWidth, pProps.divHeight).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
           init();  // 创建播放实例成功后初始化
         });
       }, function () { // 启动插件服务失败
@@ -400,7 +408,7 @@ function init() {
         buttonIDs: buttonIDs                       //自定义工具条按钮
       })
     }).then(function (oData) {
-      oWebControl.JS_Resize(playWnd_width, playWnd_height);  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
+      oWebControl.JS_Resize(pProps.divWidth, pProps.divHeight);  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
     });
   });
 }
@@ -432,7 +440,7 @@ function setEncrypt(value) {
 $(window).resize(function () {
   resetVideoWidth();
   if (oWebControl != null) {
-    oWebControl.JS_Resize(playWnd_width, playWnd_height);
+    oWebControl.JS_Resize(pProps.divWidth, pProps.divHeight);
     setWndCover();
   }
 });
@@ -440,7 +448,7 @@ $(window).resize(function () {
 function resizeVideo() {
   resetVideoWidth();
   if (oWebControl != null) {
-    oWebControl.JS_Resize(playWnd_width, playWnd_height);
+    oWebControl.JS_Resize(pProps.divWidth, pProps.divHeight);
     setWndCover();
   }
 }
@@ -449,7 +457,7 @@ function resizeVideo() {
 $(window).scroll(function () {
   resetVideoWidth();
   if (oWebControl != null) {
-    oWebControl.JS_Resize(playWnd_width, playWnd_height);
+    oWebControl.JS_Resize(pProps.divWidth, pProps.divHeight);
     setWndCover();
   }
 });
@@ -465,23 +473,23 @@ function setWndCover() {
   var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
   var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;
 
-  iCoverLeft = (iCoverLeft > playWnd_width) ? playWnd_width : iCoverLeft;
-  iCoverTop = (iCoverTop > playWnd_height) ? playWnd_height : iCoverTop;
-  iCoverRight = (iCoverRight > playWnd_width) ? playWnd_width : iCoverRight;
-  iCoverBottom = (iCoverBottom > playWnd_height) ? playWnd_height : iCoverBottom;
+  iCoverLeft = (iCoverLeft > pProps.divWidth) ? pProps.divWidth : iCoverLeft;
+  iCoverTop = (iCoverTop > pProps.divHeight) ? pProps.divHeight : iCoverTop;
+  iCoverRight = (iCoverRight > pProps.divWidth) ? pProps.divWidth : iCoverRight;
+  iCoverBottom = (iCoverBottom > pProps.divHeight) ? pProps.divHeight : iCoverBottom;
 
-  oWebControl.JS_RepairPartWindow(0, 0, playWnd_width + 1, playWnd_height);    // 多1个像素点防止还原后边界缺失一个像素条
+  oWebControl.JS_RepairPartWindow(0, 0, pProps.divWidth + 1, pProps.divHeight);    // 多1个像素点防止还原后边界缺失一个像素条
   if (iCoverLeft != 0) {
-    oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, playWnd_height);
+    oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, pProps.divHeight);
   }
   if (iCoverTop != 0) {
-    oWebControl.JS_CuttingPartWindow(0, 0, playWnd_width + 1, iCoverTop);    // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
+    oWebControl.JS_CuttingPartWindow(0, 0, pProps.divWidth + 1, iCoverTop);    // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
   }
   if (iCoverRight != 0) {
-    oWebControl.JS_CuttingPartWindow(playWnd_width - iCoverRight, 0, iCoverRight, playWnd_height);
+    oWebControl.JS_CuttingPartWindow(pProps.divWidth - iCoverRight, 0, iCoverRight, pProps.divHeight);
   }
   if (iCoverBottom != 0) {
-    oWebControl.JS_CuttingPartWindow(0, playWnd_height - iCoverBottom, playWnd_width, iCoverBottom);
+    oWebControl.JS_CuttingPartWindow(0, pProps.divHeight - iCoverBottom, pProps.divWidth, iCoverBottom);
   }
 }
 
@@ -640,6 +648,7 @@ watch(
       const params = JSON.parse(pProps.queryParams)
       // const params = ['31c0d567dd1944d5b4ea3eddf94f740b']
       console.log('params',params)
+      console.log('divWidth',pProps.divWidth)
       getVideoFromVideoList(params)
     }
 )