header组件

src/components/header.vue

@@ -1,38 +1,64 @@
 <template>
   <header>
-    <h1>{{title}}</h1>
+    <p>海亮铜管智能车间生产监控中心</p>
-    <h-time></h-time>
+    <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>
   </header>
 </template>
 
 <script>
-import HTime from '@components/time.vue'
 export default {
   name: 'Header',
-  components: {
-    HTime
-  },
   data () {
     return {
-      option: [],
+      timer: null,
-      active: '',
+      time: '',
-      open: false
+      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: {
-    toggleItem () {
+    updateTime () {
-      if (!this.open) {
+      let cd = new Date()
-        this.open = true
+      let year = cd.getFullYear()
-      } else {
+      let month = cd.getMonth() + 1 < 10 ? '0' + (cd.getMonth() + 1) : cd.getMonth() + 1
-        this.open = false
+      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()
-    dropdownMenu (i) {
+      let ss = cd.getSeconds() < 10 ? '0' + cd.getSeconds() : cd.getSeconds()
-      this.active = i + ''
+      var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
-      this.open = false
+      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}`
     }
   }
 }
@@ -42,11 +68,31 @@ export default {
 @import '~@css/mixin'
 header
   width 100%
-  height .75rem
+  height 1rem
   position relative
-  background center center / 100% 100% url(../assets/images/header.png) no-repeat
+  background center center / 100% 100% url(../assets/images/screen1/header.png) no-repeat
-  h1
+  p
-    font-size .25rem
+    font-family "PangMenZhengDao"
-    line-height .75rem
+    _font(.48rem, 1rem, #ffffff, lighter, center)
-    text-align center
+    letter-spacing .05rem
+    text-shadow 0 .08rem .08rem rgba(0,0,0,0.30)
+.data_box
+  position absolute
+  right 0
+  top .14rem
+  height .37rem
+.date, .week
+  padding-right .2rem
+.time
+  width 1.7rem
+  text-align center
+.date_item
+  float left
+  _font(.2rem, .37rem, #fff,,)
+.tiem_item
+  float left
+  _font(.32rem, .37rem, #fff,,)
+.colon
+  float left
+  _font(.32rem, .37rem, #fff,,)
 </style>

src/components/time.vue

@@ -1,83 +0,0 @@
-<template>
-  <div class="data_box clearfix">
-    <div class="date_item date">{{date}}</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 class="date_item week">{{week}}</div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Time',
-  data () {
-    return {
-      timer: null,
-      time: '',
-      hours: '',
-      minutes: '',
-      seconds: '',
-      date: '',
-      week: ''
-    }
-  },
-  mounted () {
-    this.timer = window.setInterval(this.updateTime, 1000)
-  },
-  methods: {
-    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}`
-    }
-  },
-  beforeDestroy () {
-    this.$once('hook:beforeDestroy', () => {
-      clearInterval(this.timer)
-    })
-  }
-}
-</script>
-
-<style lang="stylus" scoped>
-.data_box
-  position absolute
-  right .3rem
-  top 0
-  height .75rem
-  span
-    display inline-block
-    font-size .14rem
-    line-height .75rem
-.time
-  width 1rem
-  text-align center
-.date_item
-  float left
-  line-height .75rem
-.tiem_item
-  float left
-  width .2rem
-.colon
-  float left
-  width .09rem
-  text-align center
-</style>

src/pages/MonitoringScreen.vue

@@ -1,19 +1,6 @@
 <template>
   <section class="bg">
-    <header>
+    <t-header title="海亮铜管智能车间生产监控中心"></t-header>
-      <p>海亮铜管智能车间生产监控中心</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>
-    </header>
     <div class="container">
       <div class="left_wrap">
         <div class="item_wrap">
@@ -327,23 +314,20 @@
 </template>
 
 <script>
+import THeader from '@components/header.vue'
 import {planReached, worksectionHarvest, monthHarvest, productSchedule, unfinishOrder, output, topHarvest, monthOrder} from '@js/getData2.js'
 export default {
   name: 'MonitoringScreen',
+  components: {
+    THeader
+  },
   data () {
     return {
       interTime: this.$store.getters.setTime,
-      timer1: null,
       timer2: null,
       timer3: null,
       timeOut1: null,
       timeOut2: null,
-      time: '',
-      hours: '',
-      minutes: '',
-      seconds: '',
-      date: '',
-      week: '',
       swiper: false,
       myCharts1: '',
       myCharts2: '',
@@ -404,13 +388,10 @@ export default {
     }
   },
   created () {
-    this.updateTime()
-    this.timer1 = window.setInterval(this.updateTime, 1000)
     this.refresh()
   },
   beforeDestroy () {
     this.$once('hook:beforeDestroy', () => {
-      clearInterval(this.timer1)
       clearInterval(this.timer2)
     })
   },
@@ -431,24 +412,6 @@ export default {
         this.initData()
       }, this.interTime)
     },
-    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}`
-    },
     setEchart1 () {
       let date = []
       let data1 = []
@@ -985,35 +948,6 @@ export default {
 .bg
   _wh(100%, 100%)
   overflow hidden
-header
-  width 100%
-  height 1rem
-  position relative
-  background center center / 100% 100% url(../assets/images/screen1/header.png) no-repeat
-  p
-    font-family "PangMenZhengDao"
-    _font(.48rem, 1rem, #ffffff, lighter, center)
-    letter-spacing .05rem
-    text-shadow 0 .08rem .08rem rgba(0,0,0,0.30)
-.data_box
-  position absolute
-  right 0
-  top .14rem
-  height .37rem
-.date, .week
-  padding-right .2rem
-.time
-  width 1.7rem
-  text-align center
-.date_item
-  float left
-  _font(.2rem, .37rem, #fff,,)
-.tiem_item
-  float left
-  _font(.32rem, .37rem, #fff,,)
-.colon
-  float left
-  _font(.32rem, .37rem, #fff,,)
 .container
   _wh(100%, calc(100% - 1.38rem))
   padding .3rem .2509rem 0

src/pages/WorkshopScreen.vue

@@ -0,0 +1,15 @@
+<template>
+  <section class="bg">
+    <t-header title="海亮铜管智能车间生产监控中心"></t-header>
+  </section>
+</template>
+
+<script>
+import THeader from '@components/header.vue'
+export default {
+  name: 'WorkshopScreen',
+  components: {
+    THeader
+  }
+}
+</script>

src/router/index.js

@@ -4,6 +4,7 @@ import Router from 'vue-router'
 const Setup = r => require.ensure([], () => r(require('@page/Setup')), 'Setup')
 const MonitoringScreen = r => require.ensure([], () => r(require('@page/MonitoringScreen')), 'MonitoringScreen')
 const DeviceScreen = r => require.ensure([], () => r(require('@page/DeviceScreen')), 'DeviceScreen')
+const WorkshopScreen = r => require.ensure([], () => r(require('@page/WorkshopScreen')), 'WorkshopScreen')
 
 Vue.use(Router)
 
@@ -25,6 +26,10 @@ export default new Router({
     {
       path: '/devicescreen',
       component: DeviceScreen
+    },
+    {
+      path: '/WorkshopScreen',
+      component: WorkshopScreen
     }
   ]
 })