瀏覽代碼

柯赛看板调整,增加登录进去自动弹框是否自动全屏,设备维保执行情况--样式调整

xiaost 8 月之前
父節點
當前提交
eeb98547ac

+ 17 - 0
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

+ 1 - 1
src/assets/scss/indexprodline.scss

@@ -72,7 +72,7 @@
         width: 500px;
       }
       font-size: 18px;
-      width: 120px;
+      width: 300px;
       line-height: 50px;
       text-align: center;
       transform: skewX(-45deg);

+ 163 - 0
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>

+ 3 - 1
src/main.js

@@ -21,6 +21,7 @@ import ElementUI from 'element-ui';
 import Cookies from 'js-cookie';
 import VueMoment from 'vue-moment';
 
+import ShowMsgBox from './assets/js/msgBox';
 //5.x 引用方式为按需引用
 //希望使用5.x版本的话,需要在package.json中更新版本号,并切换引用方式
 //import * as echarts from 'echarts'
@@ -33,6 +34,7 @@ Vue.component('icon', Icon);
 Vue.use(dataV);
 Vue.use(ElementUI);
 Vue.use(VueMoment);
+Vue.use(ShowMsgBox);
 
 router.beforeEach((to, from, next) => {
   /**
@@ -62,7 +64,7 @@ new Vue({
 }).$mount('#app');
 
 import axios from 'axios';
-
+Vue.prototype.isFullScreen = false;
 //把方法放到vue的原型上,这样就可以全局使用了
 Vue.prototype.$http = axios.create({
   //设置20秒超时时间

+ 7 - 5
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");

+ 1 - 1
src/views/prodline/index.vue

@@ -48,7 +48,7 @@
                   产线看板<i class="el-icon-arrow-down el-icon--right"></i>&nbsp;&nbsp;&nbsp;&nbsp;
                 </span>
               </el-dropdown>
-              <el-select v-model="licode" class="dropdown" @change ="handleBlur" style="width: 230px">
+              <el-select v-model="licode" class="dropdown" @change ="handleBlur" style="width: 150px">
                 <el-option
                     v-for="item in linedata"
                     :key="item.LI_CODE"

+ 10 - 4
src/views/prodline/up1.vue

@@ -5,10 +5,9 @@
         <span>
           <icon name="align-left" class="text-icon"></icon>
         </span>
-        <span class="fs-xl text mx-2">设备维保执行情况</span>
+        <span class="fs-xxl text mx-2 fw-b">设备维保执行情况</span>
       </div>
       <div class="d-flex ai-center flex-column body-box">
-        <!--<dv-capsule-chart class="dv-cap-chart" :config="config" />-->
         <div class="up">
           <div
               class="bg-color-black item"
@@ -172,7 +171,7 @@ export default {
                     title: element.name,
                     number: {
                       number: [element.value],
-                      textAlign: 'left',
+                      textAlign: 'center',
                       content: '{nt}',
                       style: {
                         fontSize: 26
@@ -244,12 +243,19 @@ $box-width: 100%;
         border-radius: 6px;
         padding-top: 8px;
         margin-top: 8px;
-        width: 33%;
+        width: 33.3%;
         height: 65px;
 
         .dv-dig-flop {
           width: 150px;
           height: 30px;
+          display: flex;
+          justify-content: center;
+        }
+
+        p{
+          display: flex;
+          justify-content: center;
         }
 
         .colorY, .colorY:hover {