240720

src/components/DataMenu.vue

 <template>
     
         <el-menu active-text-color="#409eff" text-color="#fff" default-active="1" class="el-menu-vertical-demo " style="height: 100%;" 
-        @select="subEvent" @open="subEvent">
+        @select="subEvent" >
                         <MyMenu :meun="toRaw(meun)" :thisIndex="'1'"></MyMenu>
                     </el-menu>
     
@@ -28,7 +28,7 @@ import { reactive, ref } from 'vue'
 import MyMenu from './MyMenu.vue';
 import { toRaw } from '@vue/reactivity'
 const props = defineProps(['meun']);
-const emit= defineEmits(['subEvent']);
+const emit= defineEmits(['subEvent','openM','closeM']);
 
 
 // console.log('data props:')
@@ -45,8 +45,23 @@ function subEvent(index, indexPath,item){
     emit('subEvent',index)
 }
 
+function closeM(){
+    console.log('提交收起事件')
+    emit('closeM');
+}
+function test()
+{
+    console.log('test');
+}
+    function openM(){
+    console.log('提交展开事件')
+    emit('openM');
+}
+
 function subMenuEvent(menu){
     emit('subEvent',menu.menuId);
 }
-
+const handleOpen = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
 </script>
\ No newline at end of file

src/views/Video/VideoViewPage.vue

@@ -102,8 +102,9 @@ onDeactivated(() => {
 //声明公用变量
 var initCount = 0;
 var pubKey = '';
-var playWnd_width = window.innerWidth;
-var playWnd_height = 700;
+var playWnd_width = window.innerWidth - 200;
+console.log(app)
+var playWnd_height = window.innerHeight - 220;
 var oWebControl;
 var videoIp;
 var videoPort=1443;
@@ -123,6 +124,15 @@ function down(){
     const filepath='/OutputFile/VideoWebPlugin.zip';
     window.open(filepath);
 }
+function resetVideoWidth(){
+    var menuWidth=localStorage.getItem("tabWidth");
+    if(!menuWidth || menuWidth ==='' || !Number(menuWidth)){
+        playWnd_width = window.innerWidth - 200;
+    }else{
+        playWnd_width = window.innerWidth - Number(menuWidth);
+    }
+    console.log('playVW',playWnd_width);
+}
 
 //获取服务中心->供热站->换热站，三级列表
 function getStats() {
@@ -238,7 +248,6 @@ $(document).ready(function () {
     $('#startPlay').click(
         function () {
             if (oWebControl) {
-                // resizeVideo();
                 showPlay();
             } else {
                 initPlugin();
@@ -403,15 +412,15 @@ function setEncrypt(value) {
 
 // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
 $(window).resize(function () {
+    resetVideoWidth();
     if (oWebControl != null) {
-
         oWebControl.JS_Resize(playWnd_width, playWnd_height);
         setWndCover();
     }
 });
 
 function resizeVideo() {
-    playWnd_width = window.innerWidth;
+    resetVideoWidth();
     if (oWebControl != null) {
         oWebControl.JS_Resize(playWnd_width, playWnd_height);
         setWndCover();
@@ -420,6 +429,7 @@ function resizeVideo() {
 
 // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
 $(window).scroll(function () {
+    resetVideoWidth();
     if (oWebControl != null) {
         oWebControl.JS_Resize(playWnd_width, playWnd_height);
         setWndCover();

src/views/home.vue

@@ -14,7 +14,7 @@
                 </i>
             </div>
             <div class="ams-menu">
-                <DataMenu></DataMenu>
+                <DataMenu @mouseenter="enterMenu" @mouseleave="leaveMenu"></DataMenu>
             </div>
         </div>
         <div class="ams-container" :style="{ left: menuWidth - 2 + 'px' }">
@@ -216,6 +216,7 @@ var $this;
 var $interval;
 const componentView = ref(null);
 
+localStorage.setItem('tabWidth','');
 
 export default defineComponent({
     components: {
@@ -290,15 +291,13 @@ export default defineComponent({
             amslogo_style.width = store.state.iscollapse ? 40 : 150;
             mainWidth.value = window.innerWidth - menuWidth.value;
             await EventBus.emit('changeValue', mainWidth.value);
+            localStorage.setItem('tabWidth',menuWidth.value);
             console.log('触发')
             // console.log(proxy.$refs.componentView);
             // console.log(proxy.$refs.componentView.resizeVideo);
             if(proxy.$refs.componentView && proxy.$refs.componentView.showPlay){
                 proxy.$refs.componentView.showPlay();
             }
-            // if(proxy.$refs.componentView && proxy.$refs.componentView.resizeVideo){
-            //     proxy.$refs.componentView.resizeVideo();
-            // }
         }
 
         //开放手动折叠菜单方法
@@ -534,6 +533,29 @@ export default defineComponent({
                 }
             }
         }
+    
+
+    function enterMenu(){
+        var menuWidth=localStorage.getItem("tabWidth");
+        if(menuWidth && menuWidth === '63'){
+            // console.log('e');
+            //隐藏视频插件
+            if (proxy.$refs.componentView && proxy.$refs.componentView.hidePlay) {
+                proxy.$refs.componentView.hidePlay();
+            }
+        }
+    }
+
+    function leaveMenu(){
+        var menuWidth=localStorage.getItem("tabWidth");
+        if(menuWidth && menuWidth === '63'){
+            // console.log('l');
+            //重置视频插件位置
+            if (proxy.$refs.componentView && proxy.$refs.componentView.showPlay) {
+                    proxy.$refs.componentView.showPlay();
+                }
+        }
+    }
 
     function openMap(){
         const routePath = '/GisHome'; // 要导航到的路由路径
@@ -574,7 +596,9 @@ export default defineComponent({
             changeTabsHandle,
             activeTable,
             logout,
-            openMap
+            openMap,
+            enterMenu,
+            leaveMenu
             //enterpriseId
         };
     },