退出功能

src/components/header3.vue

@@ -1,5 +1,9 @@
 <template>
   <header>
+    <div class="exit_btn" :style="expand ? {opacity: 1} : {opacity: 0.1}">
+      <div class="exit_txt" @click="$router.push('/setup')" :style="expand ? {width: '70px'} : {width: '0px'}">退出</div>
+      <div class="exit_arrow" v-text="!expand ? '&gt;&gt;' : '&lt;&lt;'" @click.stop="expand = !expand"></div>
+    </div>
     <p>{{title}}</p>
     <div class="data_box clearfix">
       <div class="date_item date">{{date}}</div>
@@ -21,6 +25,7 @@ export default {
   name: 'Header',
   data () {
     return {
+      expand: false,
       timer: null,
       time: '',
       hours: '',
@@ -43,6 +48,9 @@ export default {
     })
   },
   methods: {
+    expandTooltip () {
+      this.expand = !this.expand
+    },
     updateTime () {
       let cd = new Date()
       let year = cd.getFullYear()
@@ -107,4 +115,29 @@ header
   font-size 32px
   line-height 37px
   color #fff
+.exit_btn
+  position: absolute;
+  left: 0;
+  top: 30px;
+  height 50px;
+  display: flex;
+  justify-content: space-between;
+.exit_txt
+  font-size: 20px;
+  line-height: 50px;
+  color: #e6e7e1;
+  text-align: center;
+  font-weight: bold;
+  transition width .3s ease
+  overflow hidden
+  background-color: rgba(30, 182, 203, 80%);
+.exit_arrow
+  width: 46px;
+  font-size: 20px;
+  line-height: 50px;
+  color: #e6e7e1;
+  text-align: center;
+  background-color: rgba(30, 182, 203, 60%);
+  border-top-right-radius: 30px;
+  border-bottom-right-radius: 30px
 </style>

src/pages/Setup.vue

@@ -68,7 +68,7 @@ export default {
     return {
       loginname: '',
       password: '',
-      options: [{value: '1', label: '主页'}],
+      options: [{value: '1', label: '大屏'}, {value: '2', label: '看板1'}, {value: '3', label: '看板2'}],
       value: this.$store.getters.equipId,
       baseUrl: this.$store.getters.baseUrl,
       setTime: this.$store.getters.setTime / 1000,
@@ -97,6 +97,10 @@ export default {
       this.$store.dispatch('setConfig', obj)
       if (this.value === '1') {
         this.$router.push('/home')
+      } else if (this.value === '2') {
+        this.$router.push('/pressprod')
+      } else if (this.value === '3') {
+        this.$router.push('/SortWorkMonitor')
       }
       let element = document.documentElement
       if (this.fullscreen) {

src/pages/modules/home/index.vue

@@ -4,10 +4,14 @@
           <div class="n_header_h1">
               <h1>生产监控中心</h1>
           </div>
-          <div class="n_header_h2">
-              <h2>宁德华弘新材料科技有限公司</h2>
+          <div class="n_header_h2" >
+            <h2>宁德华弘新材料科技有限公司</h2>
           </div>
           <v-time></v-time>
+          <div class="exit_btn" :style="expand ? {opacity: 1} : {opacity: 0.1}">
+            <div class="exit_txt" @click="$router.push('/setup')" :style="expand ? {width: '70px'} : {width: '0px'}">退出</div>
+            <div class="exit_arrow" v-text="!expand ? '&gt;&gt;' : '&lt;&lt;'" @click.stop="expand = !expand"></div>
+          </div>
       </div>
       <div class="left_bg"></div>
       <div class="right_bg"></div>
@@ -142,6 +146,7 @@ export default {
     return {
       interTime: this.$store.getters.setTime,
       timer: null,
+      expand: false,
       todayMixProduction: {}, // 今日生产混料
       todayPressProduction: {}, // 今日生产成型
       todaySortProduction: {}, // 今日生产包装
@@ -184,9 +189,9 @@ export default {
     }
   },
   created () {
-    // this._homepageDataLeft()
-    // this._homepageDataRight()
-    // this.refresh()
+    this._homepageDataLeft()
+    this._homepageDataRight()
+    this.refresh()
   },
   beforeDestroy () {
     clearInterval(this.timer)
@@ -196,6 +201,9 @@ export default {
     clearInterval(this.chart5Timer)
   },
   methods: {
+    expandTooltip () {
+      this.expand = !this.expand
+    },
     refresh () {
       this.timer = setInterval(() => {
         this._homepageDataLeft()
@@ -1456,4 +1464,29 @@ export default {
       .state_name
         width 100%
         height 20px
+.exit_btn
+  position: absolute;
+  left: 0;
+  top: 30px;
+  height 50px;
+  display: flex;
+  justify-content: space-between;
+.exit_txt
+  font-size: 20px;
+  line-height: 50px;
+  color: #e6e7e1;
+  text-align: center;
+  font-weight: bold;
+  transition width .3s ease
+  overflow hidden
+  background-color: rgba(30, 182, 203, 80%);
+.exit_arrow
+  width: 46px;
+  font-size: 20px;
+  line-height: 50px;
+  color: #e6e7e1;
+  text-align: center;
+  background-color: rgba(30, 182, 203, 60%);
+  border-top-right-radius: 30px;
+  border-bottom-right-radius: 30px
 </style>

src/pages/modules/home/workshop.vue

@@ -1308,8 +1308,8 @@ export default {
   display flex
   justify-content flex-start
   img
-    width 55px
-    height 29.64px
+    width 27px
+    height auto
 .ggtj_wrap_1
   left: 51%;
   top: 18%;

src/style/reset.css

@@ -72,6 +72,7 @@ html, body {
      width: 1920px;
      height: 100%;
      min-height: 1080px;
+     /* height: 1200px; */
      /* height: 1080px; 看板 */
      /* height: 1200px; 大屏 */
 }

src/vuex/modules/com.js

@@ -8,7 +8,7 @@ const baseUrl = process.env.NODE_ENV === 'development' ? 'http://192.168.81.59:8
  */
 const state = {
   baseUrl: getStore('baseUrl') || baseUrl,
-  setTime: getStore('setTime') || 5000,
+  setTime: getStore('setTime') || 50000,
   equipId: getStore('equipId') || '1'
 }