修改弹窗内容

src/components/MsgBox.vue

@@ -0,0 +1,163 @@
+<template>
+  <div v-if="show"  class="mask"  ><!--tabindex="0" v-focusable="true"-->
+    <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">
+        <button  ref="boxCofirmFocus" class="margin-left-m btn-blue-auto pointer" style="width:100px" @click="confirmClick">确定</button>
+        <div class="btn-huibai-auto pointer margin-left-m" style="width:80px" @click="cancelClick">取消</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  name: 'MsgBox',
+  props: {
+    caption:{},
+    show: {},
+    msg:{},
+    callback:{}
+  },
+  data() {
+    return {
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+          setTimeout(() => {
+            if (this.$refs.boxCofirmFocus) {
+              this.$refs.boxCofirmFocus.focus();
+              //console.log(this.$refs.boxCofirmFocus);
+             // this.$tv.requestFocus(this.$refs.boxCofirmFocus)
+            }
+          },3500);
+
+    });
+  },
+  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: 40px;
+  color: #fff;
+  background-color: #36a4fd;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #36a4fd;
+  font-size: 17px;
+}
+
+.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>
+<script setup>
+</script>

src/main.js

@@ -20,7 +20,6 @@ import echarts from 'echarts'
 import ElementUI from 'element-ui';
 
 import Cookies from 'js-cookie'
-import focusable from 'vue-tv-focusable';
 
 //5.x 引用方式为按需引用
 //希望使用5.x版本的话,需要在package.json中更新版本号,并切换引用方式
@@ -34,7 +33,6 @@ Vue.component('icon', Icon);
 Vue.use(dataV);
 Vue.use(ElementUI);
 Vue.use(ShowMsgBox);
-Vue.use(focusable);
 
 router.beforeEach((to, from, next) => {
   /**

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

@@ -158,10 +158,12 @@ export default {
   },
   created() {
     this.getLines();
+    this.isFullScreen = document.fullscreenElement;
   },
   mounted() {
     this.timeFn()
     this.cancelLoading()
+    this.autoFullScreen()
   },
   beforeDestroy () {
     clearInterval(this.timing)