diff --git a/src/config/http.js b/src/config/http.js index a81da03..5eb7300 100644 --- a/src/config/http.js +++ b/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) diff --git a/src/images/agv.png b/src/images/agv.png new file mode 100644 index 0000000..107cccf Binary files /dev/null and b/src/images/agv.png differ diff --git a/src/images/area_bg.jpg b/src/images/area_bg.jpg deleted file mode 100644 index c637044..0000000 Binary files a/src/images/area_bg.jpg and /dev/null differ diff --git a/src/images/area_bg.png b/src/images/area_bg.png index 4dc3fdb..6e1d899 100644 Binary files a/src/images/area_bg.png and b/src/images/area_bg.png differ diff --git a/src/images/bg.jpg b/src/images/bg.jpg deleted file mode 100644 index e7aa85b..0000000 Binary files a/src/images/bg.jpg and /dev/null differ diff --git a/src/images/che.png b/src/images/che.png deleted file mode 100644 index d73781d..0000000 Binary files a/src/images/che.png and /dev/null differ diff --git a/src/images/che1.png b/src/images/che1.png deleted file mode 100644 index 4fd97f1..0000000 Binary files a/src/images/che1.png and /dev/null differ diff --git a/src/images/item_bg.png b/src/images/item_bg.png deleted file mode 100644 index 81b5cdf..0000000 Binary files a/src/images/item_bg.png and /dev/null differ diff --git a/src/pages/canvas.vue b/src/pages/canvas.vue index c8a8bdc..b1be98f 100644 --- a/src/pages/canvas.vue +++ b/src/pages/canvas.vue @@ -1,6 +1,6 @@ @@ -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 diff --git a/src/pages/index.vue b/src/pages/index.vue index bbce86b..ff3db62 100644 --- a/src/pages/index.vue +++ b/src/pages/index.vue @@ -125,7 +125,7 @@ -
+
@@ -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) } } } diff --git a/src/style/layout.styl b/src/style/layout.styl index 44d9d90..19b87e7 100644 --- a/src/style/layout.styl +++ b/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%