退出按钮

src/components/header.vue

@@ -1,20 +1,19 @@
 <template>
   <header>
-    <div class="center_text">晟华大屏监控</div>
-    <div class="tag_block">
-      <div class="tag_left">
-        <!-- <div v-if="index == '0'" class="tag cur_tag">首页</div>
-        <router-link v-else to="/homepage" class="tag">首页</router-link> -->
-        <div v-if="index == '1'" class="tag cur_tag">生产统计</div>
-        <router-link v-else to="/prodcount" class="tag">生产统计</router-link>
-      </div>
-      <div class="tag_right">
-        <div v-if="index == '2'" class="tag cur_tag">仓储监控</div>
-        <router-link v-else to="/storagemonitor" class="tag">仓储监控</router-link>
-        <div v-if="index == '3'" class="tag cur_tag">设备监控</div>
-        <router-link v-else to="/devicemonitor" class="tag">设备监控</router-link>
+    <div class="exit_btn iconfont" @click.stop="$router.push('/setup')">&#xe85b;</div>
+    <p>{{title}}</p>
+    <div class="data_box clearfix">
+      <div class="date_item date">{{date}}</div>
+      <div class="date_item week">{{week}}</div>
+      <div class="date_item clearfix">
+        <div class="tiem_item hours">{{hours}}</div>
+        <div class="colon">:</div>
+        <div class="tiem_item minutes">{{minutes}}</div>
+        <div class="colon">:</div>
+        <div class="tiem_item seconds">{{seconds}}</div>
       </div>
     </div>
+    <slot></slot>
   </header>
 </template>
 
@@ -22,54 +21,102 @@
 export default {
   name: 'Header',
   data () {
-    return {}
+    return {
+      expand: false,
+      timer: null,
+      time: '',
+      hours: '',
+      minutes: '',
+      seconds: '',
+      date: '',
+      week: ''
+    }
   },
   props: {
-    index: String
+    title: String
+  },
+  created () {
+    this.updateTime()
+    this.timer = window.setInterval(this.updateTime, 1000)
+  },
+  beforeDestroy () {
+    this.$once('hook:beforeDestroy', () => {
+      clearInterval(this.timer)
+    })
+  },
+  methods: {
+    expandTooltip () {
+      this.expand = !this.expand
+    },
+    updateTime () {
+      let cd = new Date()
+      let year = cd.getFullYear()
+      let month = cd.getMonth() + 1 < 10 ? '0' + (cd.getMonth() + 1) : cd.getMonth() + 1
+      let date = cd.getDate() < 10 ? '0' + cd.getDate() : cd.getDate()
+      let hh = cd.getHours() < 10 ? '0' + cd.getHours() : cd.getHours()
+      let mm = cd.getMinutes() < 10 ? '0' + cd.getMinutes() : cd.getMinutes()
+      let ss = cd.getSeconds() < 10 ? '0' + cd.getSeconds() : cd.getSeconds()
+      var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+      let myddy = new Date().getDay()
+      let week = weekday[myddy]
+      this.time = `${hh}:${mm}:${ss}`
+      this.hours = `${hh}`
+      this.minutes = `${mm}`
+      this.seconds = `${ss}`
+      this.date = `${year}年${month}月${date}日`
+      this.week = `${week}`
+    }
   }
 }
 </script>
 
 <style lang="stylus" scoped>
-@import '~@style/mixin'
-header
-  _wh(100%, 84px)
-  overflow hidden
-  position relative
-  _bis('../assets/images/top.png',auto, 84px)
-.center_text
-  _wh(400px, 40px)
+.exit_btn
   position absolute
-  _font(36px, 40px, #fff,,center)
-  font-family "阿里妈妈数黑体" !important
-  left 50%
-  top 8px
-  margin-left -200px
-  letter-spacing 6px
-.tag_block
-  _wh(100%, 100%)
-  _fj(row)
-  padding 25px 15px 0
-.tag_left
-  _wh(50%, 100%)
-  _fj(row, flex-start)
-  .tag
-    margin-right 20px
-.tag_right
-  _wh(50%, 100%)
-  _fj(row, flex-end)
-  .tag
-    margin-left 20px
-.tag
-  display inline-block
-  _wh(132px, 36px)
-  _font(16px, 36px)
-  _bis('../assets/images/tag_1.png')
-  cursor pointer
-  &:hover
-    color #32C5FF
-    _bis('../assets/images/tag_2.png')
-.cur_tag
-  color #32C5FF
-  _bis('../assets/images/tag_2.png')
+  left 25px
+  top 14px
+  height 37px
+  width 37px
+  line-height 37px
+  font-size 20px
+  color #fff
+  background-color transparent
+header
+  position relative
+  width 100%
+  height 8%
+  position relative
+  background center center / 100% 100% url(../images/screen1/header.png) no-repeat
+  p
+    // font-family "PangMenZhengDao"
+    font-family "YouSheBiaoTiHei"
+    font-size 50px
+    line-height 100px
+    color #fff
+    font-weight lighter
+    text-align center
+    letter-spacing 5px
+    text-shadow 0 8px 8px rgba(0,0,0,0.30)
+.data_box
+  position absolute
+  right 25px
+  top 14px
+  height 37px
+.date, .week
+  padding-right 20px
+.date_item
+  float left
+  font-size 20px
+  line-height 37px
+  color #fff
+.tiem_item
+  float left
+  font-size 32px
+  line-height 37px
+  color #fff
+.colon
+  float left
+  font-size 32px
+  line-height 37px
+  color #fff
 </style>

src/components/header3.vue

@@ -1,143 +0,0 @@
-<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>
-      <div class="date_item week">{{week}}</div>
-      <div class="date_item time clearfix">
-        <div class="tiem_item hours">{{hours}}</div>
-        <div class="colon">:</div>
-        <div class="tiem_item minutes">{{minutes}}</div>
-        <div class="colon">:</div>
-        <div class="tiem_item seconds">{{seconds}}</div>
-      </div>
-    </div>
-    <slot></slot>
-  </header>
-</template>
-
-<script>
-export default {
-  name: 'Header',
-  data () {
-    return {
-      expand: false,
-      timer: null,
-      time: '',
-      hours: '',
-      minutes: '',
-      seconds: '',
-      date: '',
-      week: ''
-    }
-  },
-  props: {
-    title: String
-  },
-  created () {
-    this.updateTime()
-    this.timer = window.setInterval(this.updateTime, 1000)
-  },
-  beforeDestroy () {
-    this.$once('hook:beforeDestroy', () => {
-      clearInterval(this.timer)
-    })
-  },
-  methods: {
-    expandTooltip () {
-      this.expand = !this.expand
-    },
-    updateTime () {
-      let cd = new Date()
-      let year = cd.getFullYear()
-      let month = cd.getMonth() + 1 < 10 ? '0' + (cd.getMonth() + 1) : cd.getMonth() + 1
-      let date = cd.getDate() < 10 ? '0' + cd.getDate() : cd.getDate()
-      let hh = cd.getHours() < 10 ? '0' + cd.getHours() : cd.getHours()
-      let mm = cd.getMinutes() < 10 ? '0' + cd.getMinutes() : cd.getMinutes()
-      let ss = cd.getSeconds() < 10 ? '0' + cd.getSeconds() : cd.getSeconds()
-      var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
-      let myddy = new Date().getDay()
-      let week = weekday[myddy]
-      this.time = `${hh}:${mm}:${ss}`
-      this.hours = `${hh}`
-      this.minutes = `${mm}`
-      this.seconds = `${ss}`
-      this.date = `${year}年${month}月${date}日`
-      this.week = `${week}`
-    }
-  }
-}
-</script>
-
-<style lang="stylus" scoped>
-header
-  position relative
-  width 100%
-  height 8%
-  position relative
-  background center center / 100% 100% url(../images/screen1/header.png) no-repeat
-  p
-    // font-family "PangMenZhengDao"
-    font-family "YouSheBiaoTiHei"
-    font-size 50px
-    line-height 100px
-    color #fff
-    font-weight lighter
-    text-align center
-    letter-spacing 5px
-    text-shadow 0 8px 8px rgba(0,0,0,0.30)
-.data_box
-  position absolute
-  right 0
-  top 14px
-  height 37px
-.date, .week
-  padding-right 20px
-.time
-  width 170px
-  text-align center
-.date_item
-  float left
-  font-size 20px
-  line-height 37px
-  color #fff
-.tiem_item
-  float left
-  font-size 32px
-  line-height 37px
-  color #fff
-.colon
-  float left
-  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: '大屏'}, {value: '2', label: '看板1'}, {value: '3', label: '看板2'}],
+      options: [{value: '1', label: '大屏'}, {value: '2', label: '压制生产看板'}, {value: '3', label: '分拣作业监控'}],
       value: this.$store.getters.equipId,
       baseUrl: this.$store.getters.baseUrl,
       setTime: this.$store.getters.setTime / 1000,

src/pages/modules/PressProd.vue

@@ -99,7 +99,7 @@
 </template>
 
 <script>
-import THeader from '@components/header3.vue'
+import THeader from '@components/header.vue'
 import { cockpitpress } from '@js/getData1'
 // import {cockpitpress} from '@js/mork1.js'
 export default {
@@ -637,7 +637,7 @@ export default {
   overflow hidden
 .container
   _wh(100%, calc(100% - 138px))
-  padding 30px 25.09px 0
+  padding 30px 25px 0
   overflow hidden
   clear both
 .bottom

src/pages/modules/SortWorkMonitor.vue

@@ -161,7 +161,7 @@
 </template>
 
 <script>
-import THeader from '@components/header3.vue'
+import THeader from '@components/header.vue'
 import {cockpitsorting} from '@js/getData1.js'
 // import {cockpitsorting} from '@js/mork1.js'
 export default {
@@ -477,7 +477,7 @@ export default {
   overflow hidden
 .container
   _wh(100%, calc(100% - 138px))
-  padding 30px 25.09px 0
+  padding 30px 25px 0
   clear both
 .bottom
   _wh(100%, 38px)

src/pages/modules/home/index.vue

@@ -8,10 +8,7 @@
             <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 class="exit_btn iconfont" @click.stop="$router.push('/setup')">&#xe85b;</div>
       </div>
       <div class="left_bg"></div>
       <div class="right_bg"></div>
@@ -1423,29 +1420,4 @@ 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/style/iconfont.styl

@@ -1,5 +1,5 @@
 @font-face {
-  font-family: "iconfont"; /* Project id 1255596 */
+  font-family: "iconfont";
   src: url('iconfont/iconfont.woff2') format('woff2'),
        url('iconfont/iconfont.woff') format('woff'),
        url('iconfont/iconfont.ttf') format('truetype');
@@ -30,4 +30,4 @@
 
 .icon-guanbi:before {
   content: "\e60f";
-}
+}

src/style/iconfont/iconfont.json

@@ -1,37 +0,0 @@
-{
-  "id": "1255596",
-  "name": "nl-hht-hl",
-  "font_family": "iconfont",
-  "css_prefix_text": "icon-",
-  "description": "",
-  "glyphs": [
-    {
-      "icon_id": "2229060",
-      "name": "无信号",
-      "font_class": "no-signal",
-      "unicode": "e76b",
-      "unicode_decimal": 59243
-    },
-    {
-      "icon_id": "400034",
-      "name": "下拉",
-      "font_class": "htmal5icon03",
-      "unicode": "e626",
-      "unicode_decimal": 58918
-    },
-    {
-      "icon_id": "731140",
-      "name": "选择",
-      "font_class": "guanbi1",
-      "unicode": "e608",
-      "unicode_decimal": 58888
-    },
-    {
-      "icon_id": "4736203",
-      "name": "关闭",
-      "font_class": "guanbi",
-      "unicode": "e60f",
-      "unicode_decimal": 58895
-    }
-  ]
-}

src/style/layout.styl

@@ -8,4 +8,17 @@
 .state_2
   background center / 100% 100% url('../images/state_2.png') no-repeat
 .state_3
-  background center / 100% 100% url('../images/state_3.png') no-repeat
+  background center / 100% 100% url('../images/state_3.png') no-repeat
+.exit_btn
+  position: fixed;
+  left: 16px;
+  top: 74px;
+  width: 40px;
+  height 40px;
+  line-height 40px;
+  border-radius: 50%;
+  background-color: rgba(0,0,0,0.1);
+  font-size: 22px;
+  color: rgba(103,100,100,0.1);
+  text-align: center;
+  cursor: pointer;