no message

src/config/http.js

@@ -1,3 +1,4 @@
+import Vue from 'vue'
 import axios from 'axios'
 import store from '../vuex/store'
 import router from '@/router'
@@ -22,7 +23,6 @@ axios.interceptors.request.use(
     return config
   },
   error => {
-    this.$message.error('错误的传参')
     return Promise.reject(error)
   }
 )
@@ -53,8 +53,11 @@ export const post = (sevmethod, params) => {
       .then(response => {
         resolve(response.data)
       }, error => {
-        this.$message.error(error.message)
-        reject(error.message)
+        Vue.prototype.$message({
+          message: error,
+          type: 'error'
+        })
+        reject(error)
       })
       .catch((error) => {
         reject(error)
@@ -68,8 +71,7 @@ export const get = (sevmethod, params) => {
       .then(response => {
         resolve(response.data)
       }, error => {
-        this.$message.error(error.message)
-        reject(error.message)
+        reject(error)
       })
       .catch((error) => {
         reject(error)

src/pages/canvas.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="canvas-wrap">
-    <canvas id="carCanvas" width="645" height="686"></canvas>
+  <div class="canvas-wrap" @click="rectClick">
+    <canvas id="carCanvas" width="680" height="467"></canvas>
   </div>
 </template>
 
@@ -9,31 +9,36 @@ import Easing from '@config/Easing.js'
 export default {
   data () {
     return {
-      keyPoints: [{x: 112, y: 183}, {x: 112, y: 425}, {x: 43, y: 427}, {x: 112, y: 425}]
+      keyPoints: [{x: 105, y: 312}, {x: 105, y: 58}]
     }
   },
   mounted () {
     setTimeout(() => {
       this.handleCanvasCar()
-    }, 3000)
+    }, 1000)
   },
   methods: {
+    rectClick () {
+      var ev = window.event
+      console.log('x:' + ev.offsetX + 'y:' + ev.offsetY)
+    },
     handleCanvasCar () {
       const canvas = document.querySelector('#carCanvas')
       const ctx = canvas.getContext('2d')
       let img = new Image()
-      img.src = require('../images/che.png')
+      img.src = require('../images/agv.png')
       let nextX
       let nextY
       // 第一帧执行的时间
       let startTime
       // 期望动画持续的时间
-      const duration = 1000
+      const duration = 120
       // 动画被切分成若干段,每一段所占总进度的比例
       const partProportion = 1 / (this.keyPoints.length - 1)
       // 缓存绘制第n段线段的n值,为了在进行下一段绘制前把这一段线段的末尾补齐
       // 动画帧绘制方法currentTime是requestAnimation执行回调方法step时会传入的一个执行时的时间(由performance.now()获得).
       const step = (currentTime) => {
+        console.log(currentTime)
         // 第一帧绘制时记录下开始的时间
         !startTime && (startTime = currentTime)
         // 已经过去的时间(ms)
@@ -49,16 +54,14 @@ export default {
         // 绘制方法
         const draw = () => {
           ctx.beginPath()
-          ctx.clearRect(0, 0, 400, 500)
+          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 - 15, nextY - 50, 30, 50)
+          ctx.drawImage(img, nextX - 10, nextY - 19, 20, 38)
         }
         draw()
         if (progress < 1) {
           requestAnimationFrame(step)
-        } else {
-          console.log('动画执行完毕')
         }
       }
       requestAnimationFrame(step)
@@ -71,16 +74,6 @@ export default {
 .canvas-wrap
   position relative
   width 100%
-  height 100%
+  height 467px
   background center / 100% auto url('~@/images/area_bg.png') no-repeat
-#lineCanvas
-  position absolute
-  left 0
-  top 0
-  z-index 10
-#carCanvas
-  position absolute
-  left 0
-  top 0
-  z-index 11
 </style>

src/pages/index.vue

@@ -125,7 +125,7 @@
           </div>
         </div>
       </div>
-      <div class="r-wrap" @click="rectClick">
+      <div class="zd-row flexcol jccenter r-wrap">
         <t-canvas></t-canvas>
       </div>
     </div>
@@ -174,10 +174,10 @@ export default {
     }
   },
   mounted () {
-    this._queryAllPoints()
-    this._queryMaterials()
-    this._queryAreas()
-    this._queryTaskIds()
+    // this._queryAllPoints()
+    // this._queryMaterials()
+    // this._queryAreas()
+    // this._queryTaskIds()
   },
   methods: {
     back () {
@@ -295,10 +295,6 @@ export default {
       } catch (e) {
         this.disabled5 = false
       }
-    },
-    rectClick () {
-      var ev = window.event
-      console.log('x:' + ev.offsetX + 'y:' + ev.offsetY)
     }
   }
 }

src/style/layout.styl

@@ -127,6 +127,7 @@
   overflow auto
 .r-wrap
   _wh(700px, 100%)
+  padding 10px
   background: center / 100% 100% url('~@/images/item_2_bg.png') no-repeat;
 .item-wrap
   width 100%