物流工艺样式

src/pages/shunhe/LogisticsProcess/canvas.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="canvas_container" @click="rectClick">
+  <!-- <div class="canvas_container"> -->
+    <canvas id="myCanvas" width="946" height="982"></canvas>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      af: undefined,
+      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}],
+      dot4: {x1: 305, y1: 563, x2: 305, y2: 550},
+      dot5: {x1: 419, y1: 514, x2: 419, y2: 494},
+      dot6: {x1: 453, y1: 282, x2: 550, y2: 282},
+      line2: 1,
+      line3: 1,
+      dot7: {x1: 830, y1: 395, x2: 830, y2: 474},
+      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: 563},
+      line4: 1
+    }
+  },
+  mounted () {
+    this.animate()
+  },
+  destroyed () {
+    window.cancelAnimationFrame(this.af)
+    this.af = undefined
+  },
+  methods: {
+    rectClick () {
+      var ev = window.event
+      // 获取相对于当前所指向对象的位置坐标
+      alert('x:' + ev.offsetX + 'y:' + ev.offsetY)
+    },
+    drawPoint (ctx, x, y) {
+      ctx.beginPath()
+      ctx.arc(x, y, 4, 0, 2 * Math.PI)
+      ctx.fillStyle = 'yellow'
+      ctx.fill()
+      ctx.lineWidth = 1
+      ctx.strokeStyle = 'yellow'
+      ctx.closePath()
+    },
+    drawLine (ctx, x1, y1, x2, y2) {
+      ctx.beginPath()
+      ctx.moveTo(x1, y1)
+      ctx.lineTo(x2, y2)
+      ctx.strokeStyle = '#00c8da'
+      ctx.lineWidth = 1
+      ctx.stroke()
+    },
+    animate () {
+      let canvas = document.getElementById('myCanvas')
+      let ctx = canvas.getContext('2d')
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+      if (this.line2 === 1) {
+        this.dot4.y1 -= 1
+        this.drawPoint(ctx, this.dot4.x1, this.dot4.y1)
+        if (this.dot4.y1 === this.dot4.y2) {
+          this.dot4.y1 = 560
+          this.line2 = 2
+        }
+      }
+      if (this.line2 === 2) {
+        this.dot5.y1 -= 1
+        this.drawPoint(ctx, this.dot5.x1, this.dot5.y1)
+        if (this.dot5.y1 === this.dot5.y2) {
+          this.dot5.y1 = 510
+          this.line2 = 1
+        }
+      }
+      if (this.line3 === 1) {
+        this.dot6.x1 += 1
+        this.drawPoint(ctx, this.dot6.x1, this.dot6.y1)
+        if (this.dot6.x1 === this.dot6.x2) {
+          this.dot6.x1 = 455
+          this.line3 = 1
+        }
+      }
+      if (this.line4 === 1) {
+        this.dot7.y1 += 1
+        this.drawPoint(ctx, this.dot7.x1, this.dot7.y1)
+        if (this.dot7.y1 === this.dot7.y2) {
+          this.dot7.y1 = 395
+          this.line4 = 2
+        }
+      }
+      if (this.line4 === 2) {
+        this.dot8.y1 += 1
+        this.drawPoint(ctx, this.dot8.x1, this.dot8.y1)
+        if (this.dot8.y1 === this.dot8.y2) {
+          this.dot8.y1 = 499
+          this.line4 = 3
+        }
+      }
+      if (this.line4 === 3) {
+        this.dot9.x1 -= 1
+        this.drawPoint(ctx, this.dot9.x1, this.dot9.y1)
+        if (this.dot9.x1 === this.dot9.x2) {
+          this.dot9.x1 = 830
+          this.line4 = 4
+        }
+      }
+      if (this.line4 === 4) {
+        this.dot10.y1 += 1
+        this.drawPoint(ctx, this.dot10.x1, this.dot10.y1)
+        if (this.dot10.y1 === this.dot10.y2) {
+          this.dot10.y1 = 516
+          this.line4 = 1
+        }
+      }
+      for (let i = 0; i < this.points.length; i++) {
+        this.drawLine(ctx, this.points[i].x1, this.points[i].y1, this.points[i].x2, this.points[i].y2)
+      }
+      this.af = window.requestAnimationFrame(this.animate)
+    }
+  }
+}
+</script>
+<style lang="stylus" scoped>
+@import '~@css/mixin'
+.canvas_container
+  position absolute
+  top 0
+  left 0
+  _wh(946px, 982px)
+  // background red
+</style>

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 {homepageData} from '@js/getData2.js'
-// import {homepageData} from '@js/mork2.js'
+import TWorkshop from './workshop.vue'
+// import {homepageData} from '@js/getData2.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))
-  padding .3rem .2509rem 0
+  width 100%
+  height 89%
+  padding 1.563% 1.306% 0
   clear both
 .bottom
-  _wh(100%, .38rem)
-  background center bottom / 19.06rem 100% url(../../assets/images/screen1/bottom.png) no-repeat
+  width 100%
+  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)
-        _font(.12rem, .16rem, #fff,,center)
+        display: flex
+        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
-    margin-bottom .2rem
-    background center bottom / 100% .03rem url(../../assets/images/screen1/line_2.png) no-repeat
+    padding-bottom 4%
+    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%)
-    _fj()
+    width calc(100% - 0.6rem)
+    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)
-    _fj()
-    background center bottom / 100% 100% url(../../assets/images/screen1/item_5.png) no-repeat
+    width 48%
+    height .3rem
+    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%)
-    _fj()
+    width 50%
+    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)
-  _fj(flex-start)
+  width 20%
+  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