物流工艺

src/components/canvas.vue

@@ -8,170 +8,139 @@
 export default {
   data () {
     return {
-      ctx: '',
+      points: [{x1: 711, y1: 749, x2: 711, y2: 731}, {x1: 645, y1: 683, x2: 625, y2: 683}, {x1: 778, y1: 683, x2: 800, y2: 683}, {x1: 305, y1: 470, x2: 305, y2: 440}, {x1: 419, y1: 435, x2: 419, y2: 420}, {x1: 455, y1: 240, x2: 550, y2: 240}, {x1: 830, y1: 332, x2: 830, y2: 370}, {x1: 830, y1: 407, x2: 830, y2: 464}, {x1: 830, y1: 426, x2: 593, y2: 426}, {x1: 593, y1: 426, x2: 593, y2: 470}],
-      points: ''
+      dot1: {x1: 711, y1: 749, x2: 711, y2: 731},
+      dot2: {x1: 645, y1: 683, x2: 625, y2: 683},
+      dot3: {x1: 778, y1: 683, x2: 800, y2: 683},
+      dot4: {x1: 305, y1: 470, x2: 305, y2: 440},
+      dot5: {x1: 419, y1: 435, x2: 419, y2: 420},
+      dot6: {x1: 455, y1: 240, x2: 550, y2: 240},
+      line1: 1,
+      line2: 1,
+      line3: 1,
+      dot7: {x1: 830, y1: 332, x2: 830, y2: 370},
+      dot8: {x1: 830, y1: 407, x2: 830, y2: 464},
+      dot9: {x1: 830, y1: 426, x2: 593, y2: 426},
+      dot10: {x1: 593, y1: 426, x2: 593, y2: 470},
+      line4: 1
     }
   },
   mounted () {
-    var canvas = document.getElementById('myCanvas')
+    this.animate()
-    this.ctx = canvas.getContext('2d')
-    this.points = [
-
-      {x: 50, y: 50},
-
-      {x: 100, y: 150},
-
-      {x: 250, y: 200},
-
-      {x: 300, y: 300},
-
-      {x: 350, y: 250},
-
-      {x: 400, y: 350}
-
-    ]
-    this.trail()
-    // this.animate()
   },
   methods: {
     rectClick () {
-      var ev = window.event
+      // var ev = window.event
       // 获取相对于当前所指向对象的位置坐标
-      alert('x:' + ev.offsetX + 'y:' + ev.offsetY)
+      // alert('x:' + ev.offsetX + 'y:' + ev.offsetY)
     },
-    trail () {
+    drawPoint (ctx, x, y) {
-      var canvas = document.getElementById('myCanvas')
-      let ctx = canvas.getContext('2d')
       ctx.beginPath()
-      ctx.moveTo(455, 240)
+      ctx.arc(x, y, 4, 0, 2 * Math.PI)
-      ctx.lineTo(550, 240)
+      ctx.fillStyle = 'yellow'
-      ctx.moveTo(830, 332)
+      ctx.fill()
-      ctx.lineTo(830, 370)
+      ctx.lineWidth = 1
-      ctx.moveTo(830, 407)
+      ctx.strokeStyle = 'yellow'
-      ctx.lineTo(830, 426)
+      ctx.closePath()
-      ctx.moveTo(830, 426)
+    },
-      ctx.lineTo(830, 464)
+    drawLine (ctx, x1, y1, x2, y2) {
-      ctx.moveTo(830, 426)
+      ctx.beginPath()
-      ctx.arcTo(600, 426, 576, 550, 50)
+      ctx.moveTo(x1, y1)
-      ctx.moveTo(645, 683)
+      ctx.lineTo(x2, y2)
-      ctx.lineTo(625, 683)
-      ctx.moveTo(778, 683)
-      ctx.lineTo(800, 683)
-      ctx.moveTo(711, 731)
-      ctx.lineTo(711, 749)
-      ctx.moveTo(305, 470)
-      ctx.lineTo(305, 440)
-      ctx.moveTo(419, 435)
-      ctx.lineTo(419, 420)
       ctx.strokeStyle = '#00c8da'
       ctx.lineWidth = 1
       ctx.stroke()
-
-      ctx.beginPath()
-      ctx.arc(500, 240, 4, 0, 2 * Math.PI, true)
-      ctx.fillStyle = 'yellow'
-      ctx.fill()
-      ctx.lineWidth = 1
-      ctx.strokeStyle = 'yellow'
-      ctx.stroke()
-
-      ctx.beginPath()
-      ctx.arc(830, 352, 4, 0, 2 * Math.PI, true)
-      ctx.fillStyle = 'yellow'
-      ctx.fill()
-      ctx.lineWidth = 1
-      ctx.strokeStyle = 'yellow'
-      ctx.stroke()
-
-      ctx.beginPath()
-      ctx.arc(830, 445, 4, 0, 2 * Math.PI, true)
-      ctx.fillStyle = 'yellow'
-      ctx.fill()
-      ctx.lineWidth = 1
-      ctx.strokeStyle = 'yellow'
-      ctx.stroke()
-
-      ctx.beginPath()
-      ctx.arc(700, 426, 4, 0, 2 * Math.PI, true)
-      ctx.fillStyle = 'yellow'
-      ctx.fill()
-      ctx.lineWidth = 1
-      ctx.strokeStyle = 'yellow'
-      ctx.stroke()
-
-      ctx.beginPath()
-      ctx.arc(635, 683, 4, 0, 2 * Math.PI, true)
-      ctx.fillStyle = 'yellow'
-      ctx.fill()
-      ctx.lineWidth = 1
-      ctx.strokeStyle = 'yellow'
-      ctx.stroke()
-
-      ctx.beginPath()
-      ctx.arc(790, 683, 4, 0, 2 * Math.PI, true)
-      ctx.fillStyle = 'yellow'
-      ctx.fill()
-      ctx.lineWidth = 1
-      ctx.strokeStyle = 'yellow'
-      ctx.stroke()
-
-      ctx.beginPath()
-      ctx.arc(711, 740, 4, 0, 2 * Math.PI, true)
-      ctx.fillStyle = 'yellow'
-      ctx.fill()
-      ctx.lineWidth = 1
-      ctx.strokeStyle = 'yellow'
-      ctx.stroke()
-
-      ctx.beginPath()
-      ctx.arc(305, 461, 4, 0, 2 * Math.PI, true)
-      ctx.fillStyle = 'yellow'
-      ctx.fill()
-      ctx.lineWidth = 1
-      ctx.strokeStyle = 'yellow'
-      ctx.stroke()
-
-      ctx.beginPath()
-      ctx.arc(419, 429, 4, 0, 2 * Math.PI, true)
-      ctx.fillStyle = 'yellow'
-      ctx.fill()
-      ctx.lineWidth = 1
-      ctx.strokeStyle = 'yellow'
-      ctx.stroke()
-    },
-    drawPoint (x, y) {
-      this.ctx.beginPath()
-
-      this.ctx.arc(x, y, 5, 0, 2 * Math.PI)
-
-      this.ctx.fill()
-
-      this.ctx.closePath()
-    },
-    drawLine (x1, y1, x2, y2) {
-      this.ctx.beginPath()
-
-      this.ctx.moveTo(x1, y1)
-
-      this.ctx.lineTo(x2, y2)
-
-      this.ctx.stroke()
-
-      this.ctx.closePath()
     },
     animate () {
-      var canvas = document.getElementById('myCanvas')
+      let canvas = document.getElementById('myCanvas')
-      this.ctx.clearRect(0, 0, canvas.width, canvas.height)
+      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 = 749
+          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 = 645
+          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 = 778
+          this.line1 = 1
+        }
+      }
+      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 = 470
+          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 = 435
+          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 = 332
+          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 = 407
+          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 = 426
+          this.line4 = 1
+        }
+      }
       for (let i = 0; i < this.points.length; i++) {
-        this.drawPoint(this.points[i].x, this.points[i].y)
+        this.drawLine(ctx, this.points[i].x1, this.points[i].y1, this.points[i].x2, this.points[i].y2)
       }
-
+      requestAnimationFrame(this.animate)
-      for (let i = 0; i < this.points.length - 1; i++) {
-        this.drawLine(this.points[i].x, this.points[i].y, this.points[i + 1].x, this.points[i + 1].y)
-      }
-
-      // requestAnimationFrame(this.animate)
     }
   }
 }

src/components/workshop.vue

@@ -924,7 +924,7 @@ export default {
   left: auto
   right 0
   top: 74%
-  box-shadow 5px 5px 8px rgba(0,135,172,0.6)
+  box-shadow -5px 5px 8px rgba(0,135,172,0.6)
   _wh(15.5%, 15%)
   border-top-left-radius 0
 .rotate_1

src/pages/shunhe/LogisticsProcess.vue

@@ -268,7 +268,7 @@ export default {
     defaultOption1 () {
       return {
         step: 0.4, // 数值越大速度滚动越快
-        limitMoveNum: 18, // 开始无缝滚动的数据量 this.dataList.length
+        limitMoveNum: 7, // 开始无缝滚动的数据量 this.dataList.length
         hoverStop: true, // 是否开启鼠标悬停stop
         direction: 1, // 0向下 1向上 2向左 3向右
         openWatch: true, // 开启数据实时监控刷新dom