华耘增加支持跳转页面提示是否需要全屏

src/assets/js/msgBox.js

@@ -0,0 +1,17 @@
+import MsgBox from '_c/MsgBox.vue'
+let ConfirmConstructor, instance
+
+const showMsgBox = {
+    install(Vue) {
+        ConfirmConstructor = Vue.extend(MsgBox)
+        instance = new ConfirmConstructor().$mount()
+        document.body.appendChild(instance.$el)
+
+        Vue.prototype.$showMsgBox = options => {
+            Object.assign(instance, options)
+            instance.init()
+        }
+
+    }
+}
+export default showMsgBox

src/components/MsgBox.vue

@@ -0,0 +1,149 @@
+<template>
+  <div v-if="show" class="mask">
+    <div class="dlg-msg-box flex flex-col">
+      <div class="flex flex-space-between full-width">
+        <div class="font-bold">{{caption}}</div>
+      </div>
+      <div class="margin-top-l" style="height:45px;">{{msg}}</div>
+      <div class="flex flex-end margin-top-xl">
+        <div class="btn-huibai-auto pointer" style="width:80px" @click="cancelClick">取消</div>
+        <div class="margin-left-m btn-blue-auto pointer" style="width:80px" @click="confirmClick">确定</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  name: 'MsgBox',
+  props: {
+    caption:{},
+    show: {},
+    msg:{},
+    callback:{}
+  },
+  data() {
+    return {
+    }
+  },
+
+  methods: {
+    init() {
+      this.show = true;
+
+    },
+    close() {
+      this.show = false;
+      this.callback("close")
+    },
+    confirmClick() {
+      this.show = false;
+      this.callback("yes")
+      //this.$emit('confirm');
+    },
+    cancelClick() {
+      this.show = false;
+      this.callback("no")
+    }
+  }
+}
+</script>
+
+<style>
+.dlg-msg-box {
+  border-radius: 5px;
+  width: 350px;
+  height: 160px;
+  background-color: #fff;
+  padding: 30px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+/* 遮罩层*/
+.mask {
+  background-color: rgba(0,0,0,0.4);
+  /* 使用固定定位让元素撑满全屏 */
+  position: fixed;
+  display: flex;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+}
+.flex {
+  display: flex;
+}
+
+/* 横向排列 */
+.flex-col {
+  flex-direction: column;
+}
+/* 两端靠边 */
+.flex-space-between {
+  justify-content: space-between;
+}
+.full-width {
+  width: 100%;
+}
+/* 字体粗细 */
+.font-bold {
+  font-weight: 600;
+}
+.margin-top-l {
+  margin-top: 15px;
+}
+
+.margin-top-xl {
+  margin-top: 25px;
+}
+.margin-left-m {
+  margin-left: 10px;
+}
+.flex-end {
+  justify-content: flex-end;
+}
+.btn-blue-auto {
+  display: flex;
+  height: 35px;
+  color: #fff;
+  background-color: #36a4fd;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #36a4fd;
+}
+
+.btn-blue-auto:hover {
+  background-color: #4689db;
+}
+
+.btn-huibai-auto {
+  display: flex;
+  height: 36px;
+  color: #000;
+  background-color: #f2f8ff;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #f2f8ff;
+}
+
+.btn-huibai-auto:hover {
+  background-color: #ecf1f7;
+}
+.pointer {
+  cursor: pointer;
+}
+
+</style>

src/main.js

@@ -5,6 +5,7 @@ import store from './store';
 import dataV from '@jiaminghi/data-view';
 // 引入全局css
 import './assets/scss/style.scss';
+import ShowMsgBox from './assets/js/msgBox';
 import 'element-ui/lib/theme-chalk/index.css';
 // 按需引入vue-awesome图标
 import Icon from 'vue-awesome/components/Icon';
@@ -31,6 +32,7 @@ Vue.prototype.$cookie = Cookies;
 Vue.component('icon', Icon);
 Vue.use(dataV);
 Vue.use(ElementUI);
+Vue.use(ShowMsgBox);
 
 router.beforeEach((to, from, next) => {
   /**
@@ -79,6 +81,8 @@ Vue.prototype.$http.interceptors.request.use(config => {
   return config;
 });
 
+
+Vue.prototype.isFullScreen = false;
 // response interceptor 响应拦截
 //token，一般是在登录完成之后，将用户的token通过localStorage或者cookie存在本地，
 // 然后用户每次在进入页面的时候（即在main.js中），会首先从本地存储中读取token，如果token存在说明用户已经登陆过，

src/utils/drawMixin.js

@@ -51,15 +51,17 @@ export default {
       clearTimeout(this.drawTiming);
       const isFullScreen = document.fullscreenElement
       if (isFullScreen) {
-        this.$refs['fullScreen'].style.display='none';
-        this.$refs['exitFullScreen'].style.display='inline-block';
+        this.isFullScreen = true;
+        //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.isFullScreen = false;
+        // this.$refs['fullScreen'].style.display='inline-block';
+        //this.$refs['exitFullScreen'].style.display='none';
       }
       this.drawTiming = setTimeout(() => {
         this.calcRate()
-      }, 20000)
+      }, 10000)
     },
     fullScreen(){
       var docElm = document.documentElement; //若要全屏页面中div，var element= document.getElementById("divID");

src/views/assembly/index.vue

@@ -38,8 +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>
+              <span class="text" @click="fullScreen" ref="fullScreen" v-show=!isFullScreen>全屏</span>
+              <span class="text" @click="exitFullScreen" ref="exitFullScreen"  v-show=isFullScreen>退出全屏</span>
             </div>
             <div class="react-right mr-4 react-l-s" style="width: 900px">
               <span class="react-after"></span>
@@ -153,10 +153,12 @@ export default {
   },
   created() {
     this.getLines();
+    this.isFullScreen = document.fullscreenElement;
   },
   mounted() {
     this.timeFn()
     this.cancelLoading()
+    this.autoFullScreen()
   },
   beforeDestroy () {
     clearInterval(this.timing)
@@ -173,7 +175,22 @@ export default {
     cancelLoading() {
       setTimeout(() => {
         this.loading = false
-      }, 5000)
+      }, 3000)
+    },
+    autoFullScreen(){
+      if (!this.isFullScreen) {
+        setTimeout(() => {
+          this.$showMsgBox({
+            caption: "提示",
+            msg: '是否全屏展示？',
+            callback: (data) => {
+              if (data == "yes") {
+                this.fullScreen();
+              }
+            }
+          })
+        }, 3000)
+      }
     },
     handleBlur (val){
       sessionStorage.setItem('li_code',val);

src/views/hj/index.vue

@@ -38,8 +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>
+              <span class="text" @click="fullScreen" ref="fullScreen" v-show=!isFullScreen>全屏</span>
+              <span class="text" @click="exitFullScreen" ref="exitFullScreen"  v-show=isFullScreen>退出全屏</span>
             </div>
             <div class="react-right mr-4 react-l-s" style="width: 900px">
               <span class="react-after"></span>
@@ -137,10 +137,6 @@ export default {
       dateWeek: null,
       weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
       decorationColor: ['#568aea', '#000000'],
-      workshopoptions:[
-        {label: 'SMT', value: 'SMT'},
-        {label: '组装', value: '组装'},
-      ],
       isShow:false
     }
   },
@@ -155,10 +151,12 @@ export default {
   },
   created() {
     this.getLines();
+    this.isFullScreen = document.fullscreenElement;
   },
   mounted() {
     this.timeFn()
     this.cancelLoading()
+    this.autoFullScreen()
   },
   beforeDestroy () {
     clearInterval(this.timing)
@@ -175,7 +173,22 @@ export default {
     cancelLoading() {
       setTimeout(() => {
         this.loading = false
-      }, 5000)
+      }, 3000)
+    },
+    autoFullScreen(){
+      if (!this.isFullScreen) {
+        setTimeout(() => {
+          this.$showMsgBox({
+            caption: "提示",
+            msg: '是否全屏展示？',
+            callback: (data) => {
+              if (data == "yes") {
+                this.fullScreen();
+              }
+            }
+          })
+        }, 3000)
+      }
     },
     handleBlur (val){
       sessionStorage.setItem('li_code',val);

src/views/smt/index.vue

@@ -38,8 +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>
+              <span class="text" @click="fullScreen" ref="fullScreen" v-show=!isFullScreen>全屏</span>
+              <span class="text" @click="exitFullScreen" ref="exitFullScreen" v-show=isFullScreen>退出全屏</span>
             </div>
             <div class="react-right mr-4 react-l-s" style="width: 900px">
               <span class="react-after"></span>
@@ -137,11 +137,6 @@ export default {
       dateWeek: null,
       weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
       decorationColor: ['#568aea', '#000000'],
-      workshopoptions:[
-        {label: 'SMT', value: 'SMT'},
-        {label: '组装', value: '组装'},
-      ],
-      isShow:false
     }
   },
   components: {
@@ -155,10 +150,12 @@ export default {
   },
   created() {
     this.getLines();
+    this.isFullScreen = document.fullscreenElement;
   },
   mounted() {
     this.timeFn()
-    this.cancelLoading()
+    this.cancelLoading();
+    this.autoFullScreen();
   },
   beforeDestroy () {
     clearInterval(this.timing)
@@ -175,7 +172,22 @@ export default {
     cancelLoading() {
       setTimeout(() => {
         this.loading = false
-      }, 5000)
+      }, 3000)
+    },
+    autoFullScreen(){
+      if (!this.isFullScreen) {
+        setTimeout(() => {
+          this.$showMsgBox({
+            caption: "提示",
+            msg: '是否全屏展示？',
+            callback: (data) => {
+              if (data == "yes") {
+                this.fullScreen();
+              }
+            }
+          })
+        }, 3000)
+      }
     },
     handleBlur (val){
       sessionStorage.setItem('li_code',val);
@@ -259,5 +271,6 @@ export default {
   .el-select-dropdown__item:hover {
     background-color: rgba(0, 225, 219, 0.690196078431373);
   }
+
 }
 </style>

src/views/total/index.vue

@@ -38,8 +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>
+              <span class="text" @click="fullScreen" ref="fullScreen" v-show=!isFullScreen>全屏</span>
+              <span class="text" @click="exitFullScreen" ref="exitFullScreen"  v-show=isFullScreen>退出全屏</span>
             </div>
             <div class="react-right mr-4 react-l-s" style="width: 900px">
               <span class="react-after"></span>
@@ -128,11 +128,6 @@ export default {
       dateWeek: null,
       weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
       decorationColor: ['#568aea', '#000000'],
-      workshopoptions:[
-        {label: 'SMT', value: 'SMT'},
-        {label: '组装', value: '组装'},
-      ],
-      isShow:false
     }
   },
   components: {
@@ -144,10 +139,12 @@ export default {
   },
   created() {
     this.getLines();
+    this.isFullScreen = document.fullscreenElement;
   },
   mounted() {
     this.timeFn()
     this.cancelLoading()
+    this.autoFullScreen();
   },
   beforeDestroy () {
     clearInterval(this.timing)
@@ -164,7 +161,22 @@ export default {
     cancelLoading() {
       setTimeout(() => {
         this.loading = false
-      }, 5000)
+      }, 3000)
+    },
+    autoFullScreen(){
+      if (!this.isFullScreen){
+        setTimeout(() => {
+          this.$showMsgBox({
+            caption:"提示",
+            msg: '是否全屏展示？',
+            callback:(data) => {
+              if (data == "yes") {
+                this.fullScreen();
+              }
+            }
+          })
+        }, 3000)
+      }
     },
     handleBlur (val){
       sessionStorage.setItem('li_code',val);