物流工艺

src/components/canvas.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="canvas_container" @click="rectClick">
+    <canvas id="myCanvas" width="946" height="822"></canvas>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      ctx: '',
+      points: ''
+    }
+  },
+  mounted () {
+    var canvas = document.getElementById('myCanvas')
+    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
+      // 获取相对于当前所指向对象的位置坐标
+      alert('x:' + ev.offsetX + 'y:' + ev.offsetY)
+    },
+    trail () {
+      var canvas = document.getElementById('myCanvas')
+      let ctx = canvas.getContext('2d')
+      ctx.beginPath()
+      ctx.moveTo(455, 240)
+      ctx.lineTo(550, 240)
+      ctx.moveTo(830, 332)
+      ctx.lineTo(830, 370)
+      ctx.moveTo(830, 407)
+      ctx.lineTo(830, 426)
+      ctx.moveTo(830, 426)
+      ctx.lineTo(830, 464)
+      ctx.moveTo(830, 426)
+      ctx.arcTo(600, 426, 576, 550, 50)
+      ctx.moveTo(645, 683)
+      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')
+      this.ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+      for (let i = 0; i < this.points.length; i++) {
+        this.drawPoint(this.points[i].x, this.points[i].y)
+      }
+
+      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)
+    }
+  }
+}
+</script>
+<style lang="stylus" scoped>
+@import '~@css/mixin'
+.canvas_container
+  position absolute
+  top 0
+  left 0
+  _wh(946px, 822px)
+  // background red
+</style>

src/components/workshop.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="center_wrapper">
+    <t-canvas></t-canvas>
     <div class="status_wrap">
       <div class="status_item">
           <div class="status_tip green"></div>
@@ -251,6 +252,8 @@
         </div>
       </div>
     </div>
+    <div class="blue_line blue_line_1"></div>
+    <div class="blue_line blue_line_2"></div>
     <div class="machine_block machine_block_4">
       <div v-if="press.length > 3" class="yj_1600_block">
         <div class="p_device weilan_1600_wrap">
@@ -399,10 +402,14 @@
 </template>
 
 <script>
+import TCanvas from '@components/canvas.vue'
 // import {homepageEquipment} from '@js/getData2.js'
 import {homepageEquipment} from '@js/mork2.js'
 export default {
   name: 'workshop',
+  components: {
+    TCanvas
+  },
   data () {
     return {
       mixingMachine: [],
@@ -516,20 +523,23 @@ export default {
 .machine_block_2
   _wh(35%, 23%)
   left 58%
-  top 21%
+  top 17%
 .machine_block_3
-  _wh(55%, 30%)
+  _wh(66%, 32%)
-  left 2%
+  top 57%
-  top 58%
   padding .1rem 3.5%
 .machine_block_4
-  _wh(38%, 34%)
+  _wh(31%, 32%)
-  left 60%
+  left auto
-  top 54%
+  right 0
+  top 57%
+  border-left none
+  border-bottom none
+  box-shadow 5px -5px 8px rgba(0, 135, 172, .6)
 .machine_block_5
-  _wh(14%, auto)
+  _wh(14%, 11%)
-  left 61%
+  left 68.2%
-  top 75%
+  top 78%
   padding 0.1rem
 .machine_block_6
   _wh(90%, 9%)
@@ -745,7 +755,7 @@ export default {
   position absolute
   left: 5%;
   top: 5%;
-  _wh(33%, 40%)
+  _wh(41%, 40%)
 .weilan_1600_wrap
   _wh(70%, 100%)
 .slw_1600_wrap_1
@@ -854,7 +864,7 @@ export default {
   _fj(center)
   flex-wrap wrap
 .lz_hj
-  _wh(25%, 10%)
+  _wh(21%, 30%)
   img
     _wh(100%, 100%)
 .lz_hlj_wrap
@@ -879,14 +889,14 @@ export default {
 .ktp_yao_front_wrap
   _wh(1.5%, auto)
   transform: rotate(-90deg);
-  top: 19%;
+  top: 20%;
   left: 29.5%;
 .ktp_yao_front
   _wh(100%, auto)
 .cpj_ssx_wrap
   _wh(12%, auto)
   left: 81%;
-  top: 48%;
+  top: 46%;
 .ssx_wrap
   _wh(100%, auto)
   _fj()
@@ -898,6 +908,25 @@ export default {
   _wh(18%, auto)
   top: -51%;
   left: 20%;
+.blue_line
+  position absolute
+  border-radius 10px
+  border 1px solid #00c8da
+  border-top 0
+  border-right 0
+.blue_line_1
+  left: 69%;
+  top: 57%;
+  box-shadow -5px 5px 8px rgba(0,135,172,0.6)
+  _wh(15.5%, 17%)
+  border-bottom-right-radius 0
+.blue_line_2
+  left: auto
+  right 0
+  top: 74%
+  box-shadow 5px 5px 8px rgba(0,135,172,0.6)
+  _wh(15.5%, 15%)
+  border-top-left-radius 0
 .rotate_1
   animation rotate_1 1.5s linear 1.5s infinite alternate-reverse
 @keyframes rotate_1 {