看板- 增加全屏，取消全屏点击按钮

src/utils/drawMixin.js

@@ -48,10 +48,50 @@ export default {
       }
     },
     resize () {
-      clearTimeout(this.drawTiming)
+      clearTimeout(this.drawTiming);
+      const isFullScreen = document.fullscreenElement
+      if (isFullScreen) {
+        this.$refs['fullScreen'].style.display='none';
+        this.$refs['exitFullScreen'].style.display='inline-block';
+      } else {
+        this.$refs['fullScreen'].style.display='inline-block';
+        this.$refs['exitFullScreen'].style.display='none';
+      }
       this.drawTiming = setTimeout(() => {
         this.calcRate()
       }, 20000)
-    }
+    },
+    fullScreen(){
+      var docElm = document.documentElement; //若要全屏页面中div，var element= document.getElementById("divID");
+      if (docElm.requestFullscreen) {
+        docElm.requestFullscreen();
+      }
+      else if (docElm.msRequestFullscreen) {
+        docElm.msRequestFullscreen();
+      }
+      else if (docElm.mozRequestFullScreen) {
+        docElm.mozRequestFullScreen();
+      }
+      else if (docElm.webkitRequestFullScreen) {
+        docElm.webkitRequestFullScreen();
+      }
+      this.resize();
+    },
+    exitFullScreen() {
+      var element = document.documentElement; //若要全屏页面中div，var element= document.getElementById("divID");
+      //HTML5 W3C 提议
+      if (element.requestFullScreen) {
+        document.exitFullscreen();
+      }
+      //IE 11
+      else if (element.msRequestFullscreen) {
+        document.msExitFullscreen();
+      }
+      // Webkit (works in Safari5.1 and Chrome 15)
+      else if (element.webkitRequestFullScreen) {
+        document.webkitCancelFullScreen();
+      }
+      this.resize();
+    },
   },
 }

src/views/assembly/index.vue

@@ -38,6 +38,8 @@
           <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>
             </div>
             <div class="react-right mr-4 react-l-s">
               <span class="react-after"></span>

src/views/package/index.vue

@@ -38,6 +38,8 @@
           <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>
             </div>
             <div class="react-right mr-4 react-l-s">
               <span class="react-after"></span>

src/views/smt/index.vue

@@ -37,7 +37,8 @@
           </div>
           <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>
             </div>
             <div class="react-right mr-4 react-l-s">
               <span class="react-after"></span>
@@ -179,7 +180,7 @@ export default {
         expires: 30,
       });
       location.reload();
-    }
+    },
   }
 }
 </script>