自动全屏

src/views/assembly/index.vue

@@ -144,7 +144,9 @@ export default {
       dateYear: null,
       dateWeek: null,
       weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
-      decorationColor: ['#568aea', '#000000']
+      decorationColor: ['#568aea', '#000000'],
+      isFullScreen: false, // 添加全屏状态标志
+      intervalId: null // 添加定时器ID
     }
   },
   components: {
@@ -158,16 +160,21 @@ export default {
   },
   created() {
     this.getLines();
-    this.isFullScreen = document.fullscreenElement;
+    this.isFullScreen = !!document.fullscreenElement;
   },
   mounted() {
     this.timeFn()
     this.cancelLoading()
     this.autoFullScreen()
+
+    // 添加全屏状态变化监听
+    document.addEventListener('fullscreenchange', this.handleFullScreenChange);
   },
-  beforeDestroy () {
+  beforeDestroy() {
     clearInterval(this.timing)
     clearInterval(this.intervalId)
+    // 移除事件监听
+    document.removeEventListener('fullscreenchange', this.handleFullScreenChange);
   },
   methods: {
     timeFn() {
@@ -182,49 +189,67 @@ export default {
         this.loading = false
       }, 3000)
     },
-    autoFullScreen(){
-      if (!this.isFullScreen) {
-        setTimeout(() => {
-          this.$showMsgBox({
-            caption: "提示",
-            msg: '是否全屏展示？',
-            callback: (data) => {
-              if (data == "yes") {
-                this.fullScreen();
-              }
-            }
-          })
-        }, 3000)
+    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;
     },
-    handleBlur (val){
-      sessionStorage.setItem('li_code',val);
+    autoFullScreen() {
+      // 如果已经全屏，则不再执行
+      if (this.isFullScreen) return;
+
+      // 延迟3秒后自动全屏
+      setTimeout(() => {
+        this.fullScreen();
+      }, 3000);
+    },
+    handleBlur(val) {
+      sessionStorage.setItem('li_code', val);
       this.$cookie.set("AS_LI_CODE", val, {
         expires: 30,
       });
       location.reload();
     },
-    getLines (){
+    getLines() {
       this.$http.get("kanban/getLinesByWorkCenter.action?wccode=组装").then(
-              (res)=>{
-                if(res.data.linedata) {
-                  const data = res.data.linedata.concat({'LI_CODE':'所有','LI_NAME':'所有'});
-                  if(this.$cookie.get("AS_LI_CODE") && data.some(item => item.LI_CODE === this.$cookie.get("AS_LI_CODE")) ){
-                    sessionStorage.setItem('li_code', this.$cookie.get("AS_LI_CODE"));
-                  }else {
-                    sessionStorage.setItem('li_code', data[0].LI_CODE);
-                    this.$cookie.set("AS_LI_CODE", data[0].LI_CODE, {
-                      expires: 30,
-                    });
-                  }
-                  this.linedata = data;
-                }else{
-                  sessionStorage.setItem('li_code','');
-                }
-                this.linecode = sessionStorage.getItem("li_code");
-              },(result)=>{
-                console.error(result)
-              });
+          (res) => {
+            if (res.data.linedata) {
+              const data = res.data.linedata.concat({'LI_CODE': '所有', 'LI_NAME': '所有'});
+              if (this.$cookie.get("AS_LI_CODE") && data.some(item => item.LI_CODE === this.$cookie.get("AS_LI_CODE"))) {
+                sessionStorage.setItem('li_code', this.$cookie.get("AS_LI_CODE"));
+              } else {
+                sessionStorage.setItem('li_code', data[0].LI_CODE);
+                this.$cookie.set("AS_LI_CODE", data[0].LI_CODE, {
+                  expires: 30,
+                });
+              }
+              this.linedata = data;
+            } else {
+              sessionStorage.setItem('li_code', '');
+            }
+            this.linecode = sessionStorage.getItem("li_code");
+          }, (result) => {
+            console.error(result)
+          });
     }
   }
 }
@@ -232,13 +257,11 @@ export default {
 
 <style lang="scss" scoped>
 @import '../../assets/scss/indexassembly.scss';
-.dropdown{
+.dropdown {
   font-size: 18px;
   color: #568aea;
   transform: skewX(45deg);
   ::v-deep .el-select-dropdown {
-    /* // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；
-    // 因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示； */
     border: 1px solid #0f1325;
     background: #04308D !important;
   }
@@ -271,4 +294,4 @@ export default {
     background-color: rgba(0, 225, 219, 0.690196078431373);
   }
 }
-</style>
+</style>