物流工艺样式

src/assets/css/reset.css

@@ -82,9 +82,7 @@ li {
 /* 顺安大屏尺寸1920*1200 */
 html, body {
      /* width: 100%;
-     height: 100%;
+     height: 100%; */
-     min-width: 1440px;
-     min-height: 1040px; */
      width: 1920px;
      height: 1200px; 
      /* 顺和大屏尺寸 */

src/components/header.vue

@@ -66,16 +66,19 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
-@import '~@css/mixin'
 header
   position relative
   width 100%
-  height 1rem
+  height 8%
   position relative
   background center center / 100% 100% url(../assets/images/screen1/header.png) no-repeat
   p
     font-family "PangMenZhengDao"
-    _font(.5rem, 1rem, #ffffff, lighter, center)
+    font-size .5rem
+    line-height 1rem
+    color #fff
+    font-weight lighter
+    text-align center
     letter-spacing .05rem
     text-shadow 0 .08rem .08rem rgba(0,0,0,0.30)
 .data_box
@@ -90,11 +93,17 @@ header
   text-align center
 .date_item
   float left
-  _font(.2rem, .37rem, #fff,,)
+  font-size .2rem
+  line-height .37rem
+  color #fff
 .tiem_item
   float left
-  _font(.32rem, .37rem, #fff,,)
+  font-size .32rem
+  line-height .37rem
+  color #fff
 .colon
   float left
-  _font(.32rem, .37rem, #fff,,)
+  font-size .32rem
+  line-height .37rem
+  color #fff
 </style>

src/pages/shunhe/LogisticsProcess/canvas.vue

@@ -1,6 +1,6 @@
 <template>
-  <!-- <div class="canvas_container" @click="rectClick"> -->
+  <div class="canvas_container" @click="rectClick">
-  <div class="canvas_container">
+  <!-- <div class="canvas_container"> -->
     <canvas id="myCanvas" width="946" height="982"></canvas>
   </div>
 </template>
@@ -10,21 +10,16 @@ export default {
   data () {
     return {
       af: undefined,
-      // points: [{x1: 650, y1: 885, x2: 650, y2: 852}, {x1: 577, y1: 815, x2: 548, y2: 815}, {x1: 719, y1: 815, x2: 754, y2: 815}, {x1: 305, y1: 560, x2: 305, y2: 545}, {x1: 419, y1: 510, x2: 419, y2: 490}, {x1: 455, y1: 282, x2: 548, y2: 282}, {x1: 830, y1: 395, x2: 830, y2: 474}, {x1: 830, y1: 499, x2: 830, y2: 561}, {x1: 830, y1: 516, x2: 488, y2: 516}, {x1: 488, y1: 516, x2: 488, y2: 560}],
+      points: [{x1: 305, y1: 563, x2: 305, y2: 550}, {x1: 419, y1: 514, x2: 419, y2: 494}, {x1: 453, y1: 282, x2: 550, y2: 282}, {x1: 830, y1: 395, x2: 830, y2: 474}, {x1: 830, y1: 499, x2: 830, y2: 563}, {x1: 830, y1: 516, x2: 488, y2: 516}, {x1: 488, y1: 516, x2: 488, y2: 563}],
-      points: [{x1: 305, y1: 560, x2: 305, y2: 545}, {x1: 419, y1: 510, x2: 419, y2: 490}, {x1: 455, y1: 282, x2: 548, y2: 282}, {x1: 830, y1: 395, x2: 830, y2: 474}, {x1: 830, y1: 499, x2: 830, y2: 561}, {x1: 830, y1: 516, x2: 488, y2: 516}, {x1: 488, y1: 516, x2: 488, y2: 560}],
+      dot4: {x1: 305, y1: 563, x2: 305, y2: 550},
-      dot1: {x1: 650, y1: 885, x2: 650, y2: 852},
+      dot5: {x1: 419, y1: 514, x2: 419, y2: 494},
-      dot2: {x1: 577, y1: 815, x2: 548, y2: 815},
+      dot6: {x1: 453, y1: 282, x2: 550, y2: 282},
-      dot3: {x1: 719, y1: 815, x2: 754, y2: 815},
-      dot4: {x1: 305, y1: 560, x2: 305, y2: 545},
-      dot5: {x1: 419, y1: 510, x2: 419, y2: 490},
-      dot6: {x1: 455, y1: 282, x2: 548, y2: 282},
-      line1: 1,
       line2: 1,
       line3: 1,
       dot7: {x1: 830, y1: 395, x2: 830, y2: 474},
-      dot8: {x1: 830, y1: 499, x2: 830, y2: 561},
+      dot8: {x1: 830, y1: 499, x2: 830, y2: 563},
       dot9: {x1: 830, y1: 516, x2: 488, y2: 516},
-      dot10: {x1: 488, y1: 516, x2: 488, y2: 560},
+      dot10: {x1: 488, y1: 516, x2: 488, y2: 563},
       line4: 1
     }
   },
@@ -62,32 +57,6 @@ export default {
       let canvas = document.getElementById('myCanvas')
       let ctx = canvas.getContext('2d')
       ctx.clearRect(0, 0, canvas.width, canvas.height)
-      // if (this.line1 === 1) {
-      //   this.dot1.y1 -= 1
-      //   this.drawPoint(ctx, this.dot1.x1, this.dot1.y1)
-      //   if (this.dot1.y1 === this.dot1.y2) {
-      //     this.dot1.y1 = 885
-      //     this.line1 = 2
-      //   }
-      // }
-      // if (this.line1 === 2) {
-      //   this.dot2.x1 -= 1
-      //   this.drawPoint(ctx, this.dot2.x1, this.dot2.y1)
-      //   // this.line1 = 3
-      //   if (this.dot2.x1 === this.dot2.x2) {
-      //     this.dot2.x1 = 577
-      //     this.line1 = 3
-      //   }
-      // }
-      // if (this.line1 === 3) {
-      //   this.dot3.x1 += 1
-      //   this.drawPoint(ctx, this.dot3.x1, this.dot3.y1)
-      //   // this.line1 = 2
-      //   if (this.dot3.x1 === this.dot3.x2) {
-      //     this.dot3.x1 = 719
-      //     this.line1 = 1
-      //   }
-      // }
       if (this.line2 === 1) {
         this.dot4.y1 -= 1
         this.drawPoint(ctx, this.dot4.x1, this.dot4.y1)

src/pages/shunhe/LogisticsProcess/index.vue

@@ -34,7 +34,7 @@
             <div class="item_tip">
               <div class="item_tip_left">当日工序生产统计</div>
             </div>
-            <div class="item_content_1" style="padding-left: 15px;padding-right:15px">
+            <div class="item_content_1 item_content_3">
               <div class="item_inner_wrap">
                 <div class="item_inner_h1">
                   <div class="item_inner_h1_l">混料</div>
@@ -232,9 +232,9 @@
 
 <script>
 import THeader from '@components/header.vue'
-import TWorkshop from '@components/workshop.vue'
+import TWorkshop from './workshop.vue'
-import {homepageData} from '@js/getData2.js'
+// import {homepageData} from '@js/getData2.js'
-// import {homepageData} from '@js/mork2.js'
+import {homepageData} from '@js/mork2.js'
 export default {
   name: 'LogisticsProcess',
   components: {
@@ -695,62 +695,87 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
-@import '~@css/mixin'
 .bg
-  _wh(100%, 100%)
+  width 100%
+  height 100%
   overflow hidden
 .container
-  _wh(100%, calc(100% - 1.38rem))
+  width 100%
-  padding .3rem .2509rem 0
+  height 89%
+  padding 1.563% 1.306% 0
   clear both
 .bottom
-  _wh(100%, .38rem)
+  width 100%
-  background center bottom / 19.06rem 100% url(../../assets/images/screen1/bottom.png) no-repeat
+  height 3%
+  background center bottom / 19.06rem 100% url(../../../assets/images/screen1/bottom.png) no-repeat
 .left_wrap
   float left
-  _wh(4.0756rem, 100%)
+  width 4.0756rem
+  height 100%
   background-image linear-gradient(to bottom, #040b1a, #050919)
 .center_wrap
   float left
-  _wh(9.96rem, 100%)
+  width 9.96rem
+  height 100%
   margin-left .2936rem
   padding .25rem
-  background center bottom / 100% 100% url(../../assets/images/screen1/item_2.png) no-repeat
+  background center bottom / 100% 100% url(../../../assets/images/screen1/item_2.png) no-repeat
 .right_wrap
   float right
-  _wh(4.0273rem, 100%)
+  width 4.0273rem
+  height 100%
   background-image linear-gradient(to bottom, #040b1a, #050919)
 .item_wrap
-  _wh(100%, calc(100% / 2))
+  width 100%
+  height calc(100% / 2)
 .item_tip
   clear both
-  _wh(100%, .32rem)
+  width 100%
+  height .32rem
   line-height .32rem
-  background center center / 100% 100% url(../../assets/images/screen1/title_bg_1.png) no-repeat
+  background center center / 100% 100% url(../../../assets/images/screen1/title_bg_1.png) no-repeat
 .item_tip_left
   float left
-  _wh(60%, 100%)
+  width 60%
+  height 100%
   font-family "SourceHanSansCN"
-  _font(.18rem, inherit, #fff, 700,)
+  font-size .18rem
+  line-height inherit
+  color #fff
+  text-align left
+  font-weight 700
   letter-spacing .02rem
   text-shadow 0 0 .09rem #159AFF
   padding-left .38rem
 .item_content_1
-  _wh(100%, calc(100% - .32rem))
+  width 100%
+  height calc(100% - .32rem)
   padding .12rem 0 .15rem
 .item_content_2
-    _wh(calc(100% - 30px), calc(100% - .5rem))
+    width calc(100% - 30px)
+    height calc(100% - .5rem)
     margin .12rem 15px 0 15px
     border .01rem solid rgba(8,205,248,0.3)
+.item_content_3
+  padding-left .15rem
+  padding-right .15rem
+  display flex
+  flex-direction column
+  justify-content space-between
 .scroll_wrap
-    _wh(100%, 100%)
+    width 100%
+    height 100%
 .scroll_tab_1
-    _wh(100%, .4rem)
+    width 100%
+    height .4rem
     border-bottom .01rem solid rgba(8,205,248,0.3)
     li
       float left
       width 30%
-      _font(.14rem,.4rem,#78B1DE,,center)
+      font-size .14rem
+      line-height .4rem
+      color #78B1DE
+      text-align center
       word-wrap break-word
       word-break break-all
       white-space nowrap
@@ -777,8 +802,13 @@ export default {
         float left
         width 32%
         height 100%
-        _fj(center)
+        display: flex
-        _font(.12rem, .16rem, #fff,,center)
+        justify-content center
+        align-items center
+        font-size .12rem
+        line-height .16rem
+        color #fff
+        text-align center
         word-wrap break-word
         word-break break-all
         padding 0 .02rem
@@ -789,71 +819,105 @@ export default {
           width 20%
 .item_inner_wrap
     width 100%
-    padding-bottom .17rem
+    padding-bottom 4%
-    margin-bottom .2rem
+    background center bottom / 100% .03rem url(../../../assets/images/screen1/line_2.png) no-repeat
-    background center bottom / 100% .03rem url(../../assets/images/screen1/line_2.png) no-repeat
     &:last-child
       background none
       padding 0
       margin 0
 .item_inner_h1
-    _wh(100%, .2rem)
+    width 100%
+    height .2rem
     overflow hidden
-    _fj()
+    display: flex
+    justify-content space-between
+    align-items center
 .item_inner_h1_l
-    _wh(0.6rem, 100%)
+    width .6rem
+    height 100%
     font-family "SourceHanSansCN"
-    _font(.14rem, .16rem, #84B0DA, 700,)
+    font-size .14rem
+    line-height .16rem
+    color #84B0DA
+    font-weight 700
+    text-align left
     letter-spacing .02rem
 .item_inner_h1_r
-    _wh(calc(100% - 0.6rem), 100%)
+    width calc(100% - 0.6rem)
-    _fj()
+    height 100%
+    display: flex
+    justify-content space-between
+    align-items center
 .process_wrap
-  _wh(100%, .0805rem)
+  width 100%
+  height .0805rem
   background-color #B68845
-  _fj()
+  display: flex
+  justify-content space-between
+  align-items center
 .process_rate
     height 100%
     background-color #07e083
 .item_inner_h2
-    _wh(100%, .3rem)
+    width 100%
+    height .3rem
     margin-top .1rem
-    _fj()
+    display: flex
+    justify-content space-between
+    align-items center
 .item_inner_h2_inner
-    _wh(48%, .3rem)
+    width 48%
-    _fj()
+    height .3rem
-    background center bottom / 100% 100% url(../../assets/images/screen1/item_5.png) no-repeat
+    display: flex
+    justify-content space-between
+    align-items center
+    background center bottom / 100% 100% url(../../../assets/images/screen1/item_5.png) no-repeat
 .item_inner_h2_inner_l
-    _wh(50%, 100%)
+    width 50%
-    _fj()
+    height 100%
+    display: flex
+    justify-content space-between
+    align-items center
     span
       display block
       &:nth-child(1)
-          _wh(.0725rem, .0725rem)
+          width .0725rem
+          height .0725rem
           margin-left .15rem
           i
             display block
-            _wh(.0725rem, .0725rem)
+            width .0725rem
+            height .0725rem
             border-radius 100%
       &:nth-child(2)
-          _wh(calc(100% - 0.2825rem), .3rem)
+          width calc(100% - 0.2825rem)
+          height .3rem
           font-family "SourceHanSansCN"
-          _font(.12rem, .3rem, #fff,400,)
+          font-size .12rem
+          line-height .3rem
+          color #fff
           margin-left .06rem
           overflow hidden
           text-overflow ellipsis
           white-space nowrap
 .item_inner_h2_inner_r
-    _wh(50%, 100%)
+    width 50%
+    height 100%
     line-height .3rem
     overflow hidden
     text-align right
     span
       font-family "SourceHanSansCN"
-      _font(.12rem, .3rem, #fff,700,)
+      font-size .12rem
+      line-height .3rem
+      color #fff
+      font-weight 700
       &:nth-child(1)
           font-family "SourceHanSansCN"
-          _font(.18rem, .3rem, #00D5FF,700,)
+          font-size .18rem
+          line-height .3rem
+          color #00D5FF
+          font-weight 700
           overflow hidden
           text-overflow ellipsis
           white-space nowrap
@@ -865,12 +929,18 @@ export default {
   position absolute
   left .2509rem
   top 11%
-  _wh(20%, .4rem)
+  width 20%
-  _fj(flex-start)
+  height .4rem
+  display: flex
+  justify-content flex-start
+  align-items center
   a
     cursor pointer
     font-family "SourceHanSansCN"
-    _font(.18rem, .30rem, #fff, 700,)
+    font-size .18rem
+    line-height .3rem
+    color #fff
+    font-weight 700
     letter-spacing .01rem
     padding .05rem .2rem
     border-radius .05rem

src/router/index.js

@@ -9,7 +9,7 @@ const HomeScreen = r => require.ensure([], () => r(require('@page/HomeScreen')),
 
 const ProdCount = r => require.ensure([], () => r(require('@page/shunhe/ProdCount')), 'ProdCount')
 const StorageMonitor = r => require.ensure([], () => r(require('@page/shunhe/StorageMonitor')), 'StorageMonitor')
-const LogisticsProcess = r => require.ensure([], () => r(require('@page/shunhe/LogisticsProcess')), 'LogisticsProcess')
+const LogisticsProcess = r => require.ensure([], () => r(require('@page/shunhe/LogisticsProcess/index')), 'LogisticsProcess')
 const SortWorkMonitor = r => require.ensure([], () => r(require('@page/shunhe/SortWorkMonitor')), 'SortWorkMonitor')
 
 Vue.use(Router)