代码优化

src/pages/Setup.vue

@@ -98,9 +98,9 @@ export default {
       if (this.value === '1') {
         this.$router.push('/home')
       } else if (this.value === '2') {
-        this.$router.push('/pressprod')
+        this.$router.push('/boardindex/pressprod')
       } else if (this.value === '3') {
-        this.$router.push('/SortWorkMonitor')
+        this.$router.push('/boardindex/sortwork')
       }
       let element = document.documentElement
       if (this.fullscreen) {

src/pages/modules/board/DryTask.vue

@@ -0,0 +1,6 @@
+<template>
+  <section class="bg">
+    <t-header title="压制生产看板">
+    </t-header>
+  </section>
+</template>

src/pages/modules/board/PressProd.vue

@@ -1,8 +1,5 @@
 <template>
-    <section class="bg">
-      <t-header title="压制生产看板">
-      </t-header>
-      <div class="container">
+<div class="wraper">
   <div class="con1">
     <div class="cbox">
       <div>当前班次：</div>
@@ -93,20 +90,14 @@
         </div>
       </div>
   </div>
-      </div>
-      <section class="bottom"></section>
-    </section>
+</div>
 </template>
 
 <script>
-import THeader from '@components/header.vue'
 import { cockpitpress } from '@js/getData1'
 // import {cockpitpress} from '@js/mork1.js'
 export default {
   name: 'ProdCount',
-  components: {
-    THeader
-  },
   data () {
     return {
       timeOut: null,
@@ -632,17 +623,6 @@ export default {
 
 <style lang="stylus" scoped>
 @import '~@style/mixin'
-.bg
-  _wh(100%, 100%)
-  overflow hidden
-.container
-  _wh(100%, calc(100% - 138px))
-  padding 30px 25px 0
-  overflow hidden
-  clear both
-.bottom
-  _wh(100%, 38px)
-  background center bottom / 1906px 100% url(../../images/screen1/bottom.png) no-repeat
 .blue
   color #32C5FF !important
 .green
@@ -660,7 +640,7 @@ export default {
   height 123px
   overflow hidden
   position relative
-  background center center / 100% 100% url(../../images/screen1/sctj_top.png) no-repeat
+  background center center / 100% 100% url(../../../images/screen1/sctj_top.png) no-repeat
   margin 5px 0
   text-align center
   display flex
@@ -680,7 +660,7 @@ export default {
       height 19px
       overflow hidden
       position relative
-      background center center / 100% 100% url(../../images/screen1/sctj_icon.png) no-repeat
+      background center center / 100% 100% url(../../../images/screen1/sctj_icon.png) no-repeat
       margin-right 20px
     .num
       display flex
@@ -712,7 +692,7 @@ export default {
     _font(18px, 32px, #fff,,left)
     letter-spacing: 2px;
     text-shadow: 0 0 9px #159aff;
-    background center center / 100% 100% url(../../images/screen1/bg_title_l.png) no-repeat
+    background center center / 100% 100% url(../../../images/screen1/bg_title_l.png) no-repeat
   .item_content_0
     // _wh(calc(100% - 44px), calc(100% - 112px))
     _wh(calc(100% - 44px), 100%)
@@ -729,7 +709,7 @@ export default {
   position relative
   top 3px
   left -6px
-  background center center / 100% 100% url(../../images/screen1/bg_title_tip.png) no-repeat
+  background center center / 100% 100% url(../../../images/screen1/bg_title_tip.png) no-repeat
 .con3
   width 30%
   height calc(100% - 34px)
@@ -744,7 +724,7 @@ export default {
     _font(18px, 32px, #fff,,left)
     letter-spacing: 2px;
     text-shadow: 0 0 9px #159aff;
-    background center center / 100% 100% url(../../images/screen1/bg_title_s.png) no-repeat
+    background center center / 100% 100% url(../../../images/screen1/bg_title_s.png) no-repeat
   .item_content_1
     _wh(calc(100% - 44px), 100%)
     margin 60px auto
@@ -758,7 +738,7 @@ export default {
 //     _wh(calc(100% - 0px), 32px)
 //     margin 17px 0 10px 0
 //     padding-left 18px
-//     background center center / 100% 100% url(../../images/screen1/bg_title_j.png) no-repeat
+//     background center center / 100% 100% url(../../../images/screen1/bg_title_j.png) no-repeat
 //     color #fff
 //     h2
 //       _font(16px, 32px, #fff,,left)
@@ -840,7 +820,7 @@ export default {
     line-height 32px
     padding 0 10px
 .item_tip_bg_l
-    background center center / 100% 100% url(../../images/screen1/bg_title_j.png) no-repeat
+    background center center / 100% 100% url(../../../images/screen1/bg_title_j.png) no-repeat
 .item_tip_left
     _wh(60%, 100%)
     font-family "SourceHanSansCN"
@@ -848,7 +828,7 @@ export default {
     letter-spacing 2px
     text-shadow 0 0 9px #159AFF
     padding-left 34px
-    background center left / 22px 22px url(../../images/screen1/bg_title_tip.png) no-repeat
+    background center left / 22px 22px url(../../../images/screen1/bg_title_tip.png) no-repeat
 .item_content
     _wh(100%, calc(100% - 37px))
     margin-top 7px

src/pages/modules/board/SortWorkMonitor.vue

@@ -1,8 +1,5 @@
 <template>
-  <section class="bg">
-    <t-header title="分拣作业监控">
-    </t-header>
-    <div class="container">
+<div class="wraper">
   <div class="zdy_box">
     <div class="zero-wrap">
       <div class="zero-title">
@@ -155,20 +152,14 @@
         </div>
     </div>
   </div>
-    </div>
-    <section class="bottom"></section>
-  </section>
+</div>
 </template>
 
 <script>
-import THeader from '@components/header.vue'
 import {cockpitsorting} from '@js/getData1.js'
 // import {cockpitsorting} from '@js/mork1.js'
 export default {
   name: 'SortWorkMonitor',
-  components: {
-    THeader
-  },
   data () {
     return {
       timer: null,
@@ -472,16 +463,6 @@ export default {
 
 <style lang="stylus" scoped>
 @import '~@style/mixin'
-.bg
-  _wh(100%, 100%)
-  overflow hidden
-.container
-  _wh(100%, calc(100% - 138px))
-  padding 30px 25px 0
-  clear both
-.bottom
-  _wh(100%, 38px)
-  background center bottom / 1906px 100% url(../../images/screen1/bottom.png) no-repeat
 .zero-wrap
   _wh(100%, 12%)
   padding 0 0 15px 0
@@ -494,14 +475,14 @@ export default {
   font-weight: bold;
   font-size 18px
   color #ffffff
-  background center center / 100% 100% url(../../images/screen1/bg_title_s.png) no-repeat
+  background center center / 100% 100% url(../../../images/screen1/bg_title_s.png) no-repeat
   &:nth-child(2)
     margin-left 2%
     margin-right 2%
 .one_wrap
   _wh(100%, 12%)
   padding 0 0 15px 15px
-  // background center center / 100% 100% url(../../images/screen1/sctj_top.png) no-repeat
+  // background center center / 100% 100% url(../../../images/screen1/sctj_top.png) no-repeat
   overflow hidden
   display flex
 .e-box
@@ -519,7 +500,7 @@ export default {
 //   line-height 34px
 //   font-size 18px
 //   color #32c5ff
-  // background center center / 100% 100% url(../../images/screen1/bg_title_s.png) no-repeat
+  // background center center / 100% 100% url(../../../images/screen1/bg_title_s.png) no-repeat
 .pie_wraper_2
   // position absolute
   // top 17px
@@ -528,7 +509,7 @@ export default {
   height 222px
   // width 70%
   // height 70%
-  background center / 100% auto url('../../images/pie-bg_2.png') no-repeat
+  background center / 100% auto url('../../../images/pie-bg_2.png') no-repeat
   .w_wraper
     width 100%
     height 100%
@@ -611,7 +592,7 @@ export default {
     line-height 32px
     padding 0 10px
 .item_tip_bg_l
-    background center center / 100% 100% url(../../images/screen1/bg_title_j.png) no-repeat
+    background center center / 100% 100% url(../../../images/screen1/bg_title_j.png) no-repeat
 .item_tip_left
     _wh(60%, 100%)
     font-family "SourceHanSansCN"
@@ -619,7 +600,7 @@ export default {
     letter-spacing 2px
     text-shadow 0 0 9px #159AFF
     padding-left 34px
-    background center left / 22px 22px url(../../images/screen1/bg_title_tip.png) no-repeat
+    background center left / 22px 22px url(../../../images/screen1/bg_title_tip.png) no-repeat
 .item_content
     _wh(100%, calc(100% - 37px))
     margin-top 7px

src/pages/modules/board/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <section class="wraper">
+    <t-header :title="$route.meta.title"></t-header>
+    <div class="container">
+      <router-view></router-view>
+    </div>
+    <section class="bottom"></section>
+  </section>
+</template>
+
+<script>
+import THeader from '@components/header.vue'
+export default {
+  components: {
+    THeader
+  }
+}
+</script>
+
+<style lang="stylus">
+.wraper
+  width 100%
+  height 100%
+  overflow hidden
+.container
+  width 100%
+  height calc(100% - 138px)
+  padding 30px 25px 0
+  overflow hidden
+  clear both
+.bottom
+  width 100%
+  height 38px
+  background center bottom / 1906px 100% url(../../../images/screen1/bottom.png) no-repeat
+</style>

src/router/index.js

@@ -3,8 +3,9 @@ import Router from 'vue-router'
 
 const Setup = r => require.ensure([], () => r(require('@page/Setup')), 'Setup')
 const home = r => require.ensure([], () => r(require('@page/modules/home/index')), 'home')
-const PressProd = r => require.ensure([], () => r(require('@page/modules/PressProd')), 'PressProd')
-const SortWorkMonitor = r => require.ensure([], () => r(require('@page/modules/SortWorkMonitor')), 'SortWorkMonitor')
+const boardIndex = r => require.ensure([], () => r(require('@page/modules/board/index')), 'boardIndex')
+const PressProd = r => require.ensure([], () => r(require('@page/modules/board/PressProd')), 'PressProd')
+const SortWorkMonitor = r => require.ensure([], () => r(require('@page/modules/board/SortWorkMonitor')), 'SortWorkMonitor')
 
 Vue.use(Router)
 
@@ -24,12 +25,17 @@ export default new Router({
       component: home
     },
     {
-      path: '/pressprod',
-      component: PressProd
-    },
-    {
-      path: '/SortWorkMonitor',
-      component: SortWorkMonitor
+      path: '/boardindex',
+      component: boardIndex,
+      children: [{
+        path: 'pressprod',
+        component: PressProd,
+        meta: {title: '压制生产看板'}
+      }, {
+        path: 'sortwork',
+        component: SortWorkMonitor,
+        meta: {title: '分拣作业监控'}
+      }]
     }
   ]
 })