慧眼看板调整--增加自动全屏

src/views/assembly/index.vue

@@ -38,8 +38,10 @@
           <div class="d-flex aside-width">
             <div class="react-right bg-color-r mr-3">
               <!-- <span class="text ">设备运行分析</span>-->
-              <span class="text" @click="fullScreen" ref="fullScreen">全屏</span>
-              <span class="text" @click="exitFullScreen" ref="exitFullScreen"  style="display: none">退出全屏</span>
+              <el-button type="text" class="text" style="width:50% ;font-size: 21px;" @click="fullScreen"
+                ref="fullScreen" v-show=!isFullScreen>全屏</el-button>
+              <el-button type="text" class="text" style="width:50% ;font-size: 21px;" @click="exitFullScreen"
+                ref="exitFullScreen" v-show=isFullScreen>退出全屏</el-button>
             </div>
             <div class="react-right mr-4 react-l-s" style="width: 900px">
               <span class="react-after"></span>
@@ -155,7 +157,8 @@ export default {
       linecode: '', // 当前选中的产线
       currentLineIndex: 0, // 当前产线索引
       countdown: 60, // 倒计时
-      countdownTimer: null // 倒计时定时器
+      countdownTimer: null, // 倒计时定时器
+      isFullScreen: false, // 添加全屏状态标志
     }
   },
   components: {
@@ -169,17 +172,26 @@ export default {
     bottom2
   },
   created() {
+    this.isFullScreen = !!document.fullscreenElement;
     this.getLines();
   },
   mounted() {
     this.timeFn()
     this.cancelLoading()
+    this.$nextTick(()=>{
+      this.autoFullScreen()
+    })
+    // 添加全屏状态变化监听
+    document.addEventListener('fullscreenchange', this.handleFullScreenChange);
   },
   beforeDestroy() {
     clearInterval(this.timing)
     clearInterval(this.lineTimer) // 清除产线切换定时器
     clearInterval(this.countdownTimer) // 清除倒计时定时器
     clearInterval(this.intervalId)
+    // 移除事件监听
+    document.removeEventListener('fullscreenchange', this.handleFullScreenChange);
+
   },
   methods: {
     timeFn() {
@@ -194,6 +206,37 @@ export default {
         this.loading = false
       }, 2000)
     },
+    handleFullScreenChange() {
+      this.isFullScreen = !!document.fullscreenElement;
+    },
+    fullScreen() {
+      const element = document.documentElement;
+      if (element.requestFullscreen) {
+        element.requestFullscreen();
+      } else if (element.webkitRequestFullscreen) {
+        element.webkitRequestFullscreen();
+      } else if (element.msRequestFullscreen) {
+        element.msRequestFullscreen();
+      }
+      this.isFullScreen = true;
+    },
+    exitFullScreen() {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      }
+      this.isFullScreen = false;
+    },
+    autoFullScreen() {
+      if (this.isFullScreen) return;
+      // 延迟3秒后自动全屏
+      setTimeout(() => {
+        this.fullScreen();
+      }, 3000);
+    },
     handleLineChange(val) {
       this.switchToLine(val);
     },

src/views/package/index.vue

@@ -155,7 +155,8 @@ export default {
       linecode: '', // 当前选中的产线
       currentLineIndex: 0, // 当前产线索引
       countdown: 60, // 倒计时
-      countdownTimer: null // 倒计时定时器
+      countdownTimer: null, // 倒计时定时器
+      isFullScreen:false
     }
   },
   components: {
@@ -169,17 +170,25 @@ export default {
     bottom2
   },
   created() {
+    this.isFullScreen = !!document.fullscreenElement;
     this.getLines();
   },
   mounted() {
     this.timeFn()
     this.cancelLoading()
+    this.$nextTick(()=>{
+      this.autoFullScreen()
+    })
+    // 添加全屏状态变化监听
+    document.addEventListener('fullscreenchange', this.handleFullScreenChange);
   },
   beforeDestroy() {
     clearInterval(this.timing)
     clearInterval(this.lineTimer) // 清除产线切换定时器
     clearInterval(this.countdownTimer) // 清除倒计时定时器
     clearInterval(this.intervalId)
+    // 移除事件监听
+    document.removeEventListener('fullscreenchange', this.handleFullScreenChange);
   },
   methods: {
     timeFn() {
@@ -194,6 +203,35 @@ export default {
         this.loading = false
       }, 2000)
     },
+    handleFullScreenChange() {
+      this.isFullScreen = !!document.fullscreenElement;
+    },
+    fullScreen() {
+      const element = document.documentElement;
+      if (element.requestFullscreen) {
+        element.requestFullscreen();
+      } else if (element.webkitRequestFullscreen) {
+        element.webkitRequestFullscreen();
+      } else if (element.msRequestFullscreen) {
+        element.msRequestFullscreen();
+      }
+      this.isFullScreen = true;
+    },
+    exitFullScreen() {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      }
+      this.isFullScreen = false;
+    },
+    autoFullScreen() {
+      if (this.isFullScreen) return;
+      this.fullScreen();
+    },
+
     handleLineChange(val) {
       this.switchToLine(val);
     },

src/views/smt/index.vue

@@ -157,7 +157,8 @@ export default {
       linecode: '', // 当前选中的产线
       currentLineIndex: 0, // 当前产线索引
       countdown: 60, // 倒计时
-      countdownTimer: null // 倒计时定时器
+      countdownTimer: null, // 倒计时定时器
+      isFullScreen:false
     }
   },
   components: {
@@ -171,11 +172,17 @@ export default {
     bottom2
   },
   created() {
+    this.isFullScreen = !!document.fullscreenElement;
     this.getLines();
   },
   mounted() {
     this.timeFn()
     this.cancelLoading()
+    this.$nextTick(()=>{
+      this.autoFullScreen()
+    })
+    // 添加全屏状态变化监听
+    document.addEventListener('fullscreenchange', this.handleFullScreenChange);
   },
   beforeDestroy() {
     clearInterval(this.timing)
@@ -196,6 +203,34 @@ export default {
         this.loading = false
       }, 2000)
     },
+    handleFullScreenChange() {
+      this.isFullScreen = !!document.fullscreenElement;
+    },
+    fullScreen() {
+      const element = document.documentElement;
+      if (element.requestFullscreen) {
+        element.requestFullscreen();
+      } else if (element.webkitRequestFullscreen) {
+        element.webkitRequestFullscreen();
+      } else if (element.msRequestFullscreen) {
+        element.msRequestFullscreen();
+      }
+      this.isFullScreen = true;
+    },
+    exitFullScreen() {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      }
+      this.isFullScreen = false;
+    },
+    autoFullScreen() {
+      if (this.isFullScreen) return;
+      this.fullScreen();
+    },
     handleLineChange(val) {
       this.switchToLine(val);
     },