canvas

src/config/getData.js

@@ -34,3 +34,7 @@ export const areaControl = (code, option) => post('api/pda/areaControl', {
   region_code: code,
   option: option
 })
+// 1.10 查询设备状态
+export const queryDevice = (code) => post('api/pda/queryDevice', {
+  device_code: code
+})

src/config/mork.js

@@ -53,3 +53,28 @@ export const areaControl = (code, option) => {
   }
   return res
 }
+export const queryDevice = (t) => {
+  let res = {}
+  if (t === 0) {
+    res = {
+      data: {car1: {x: 105, y: 312, angle: 'up'}}
+    }
+  } else if (t === 1) {
+    res = {
+      data: {car1: {x: 105, y: 262, angle: 'up'}}
+    }
+  } else if (t === 2) {
+    res = {
+      data: {car1: {x: 105, y: 202, angle: 'up'}}
+    }
+  } else if (t === 3) {
+    res = {
+      data: {car1: {x: 105, y: 262, angle: 'down'}}
+    }
+  } else if (t === 4) {
+    res = {
+      data: {car1: {x: 105, y: 312, angle: 'down'}}
+    }
+  }
+  return res
+}

src/pages/canvas.vue

@@ -6,39 +6,75 @@
 
 <script>
 import Easing from '@config/Easing.js'
+import {queryDevice} from '@config/mork.js'
 export default {
   data () {
     return {
-      keyPoints: [{x: 105, y: 312}, {x: 105, y: 58}]
+      timer: null,
+      AnimationID: null,
+      keyPoints: [],
+      angle: '',
+      ctx: null
     }
   },
   mounted () {
-    setTimeout(() => {
-      this.handleCanvasCar()
-    }, 1000)
+    this.reFresh()
+  },
+  beforeDestroy () {
+    if (this.timer) {
+      window.clearInterval(this.timer)
+      this.timer = null
+    }
+    if (this.AnimationID) {
+      window.cancelAnimationFrame(this.AnimationID)
+      this.AnimationID = null
+    }
+    this.ctx.clearRect(0, 0, 680, 467)
   },
   methods: {
+    reFresh () {
+      let t = 0
+      // this._queryDevice(t)
+      this.timer = setInterval(() => {
+        if (t > 4) {
+          t = 0
+        }
+        this._queryDevice(t)
+        t++
+      }, 1000)
+    },
     rectClick () {
       var ev = window.event
       console.log('x:' + ev.offsetX + 'y:' + ev.offsetY)
     },
+    async _queryDevice (t) {
+      let res = await queryDevice(t)
+      if (this.keyPoints.length <= 1) {
+        this.keyPoints.push(res.data.car1)
+      } else if (this.keyPoints.length > 1) {
+        this.keyPoints.shift()
+        this.keyPoints.push(res.data.car1)
+        this.angle = res.data.car1.angle
+        const canvas = document.querySelector('#carCanvas')
+        this.ctx = canvas.getContext('2d')
+        this.ctx.clearRect(0, 0, 680, 467)
+        this.handleCanvasCar()
+      }
+    },
     handleCanvasCar () {
-      const canvas = document.querySelector('#carCanvas')
-      const ctx = canvas.getContext('2d')
       let img = new Image()
-      img.src = require('../images/agv.png')
+      img.src = require(`../images/agv_${this.angle}.png`)
       let nextX
       let nextY
       // 第一帧执行的时间
       let startTime
       // 期望动画持续的时间
-      const duration = 120
+      const duration = 1000
       // 动画被切分成若干段,每一段所占总进度的比例
       const partProportion = 1 / (this.keyPoints.length - 1)
       // 缓存绘制第n段线段的n值,为了在进行下一段绘制前把这一段线段的末尾补齐
       // 动画帧绘制方法currentTime是requestAnimation执行回调方法step时会传入的一个执行时的时间(由performance.now()获得).
       const step = (currentTime) => {
-        console.log(currentTime)
         // 第一帧绘制时记录下开始的时间
         !startTime && (startTime = currentTime)
         // 已经过去的时间(ms)
@@ -53,18 +89,18 @@ export default {
         const partProgress = (progress - (lineIndex - 1) * partProportion) / partProportion
         // 绘制方法
         const draw = () => {
-          ctx.beginPath()
-          ctx.clearRect(0, 0, 680, 467)
+          this.ctx.beginPath()
+          this.ctx.clearRect(0, 0, 680, 467)
           nextX = ~~(this.keyPoints[lineIndex - 1].x + ((this.keyPoints[lineIndex]).x - this.keyPoints[lineIndex - 1].x) * partProgress)
           nextY = ~~(this.keyPoints[lineIndex - 1].y + ((this.keyPoints[lineIndex]).y - this.keyPoints[lineIndex - 1].y) * partProgress)
-          ctx.drawImage(img, nextX - 10, nextY - 19, 20, 38)
+          this.ctx.drawImage(img, nextX - 10, nextY - 19, 20, 38)
         }
         draw()
         if (progress < 1) {
-          requestAnimationFrame(step)
+          this.AnimationID = requestAnimationFrame(step)
         }
       }
-      requestAnimationFrame(step)
+      this.AnimationID = requestAnimationFrame(step)
     }
   }
 }

src/pages/index.vue

@@ -134,8 +134,8 @@
 
 <script>
 import TCanvas from './canvas.vue'
-// import {queryAllPoints, queryMaterials, queryAreas, queryTaskIds} from '@config/mork.js'
-import {queryAllPoints, queryMaterials, queryAreas, queryTaskIds, callTask, putAction, areaControl, pdaCancel, forceFinish} from '@config/getData.js'
+import {queryAllPoints, queryMaterials, queryAreas, queryTaskIds} from '@config/mork.js'
+import {callTask, putAction, areaControl, pdaCancel, forceFinish} from '@config/getData.js'
 export default {
   components: {
     TCanvas