全部修改架构

src/pages/modules/map.vue

@@ -71,12 +71,13 @@
 
 <script>
 import { throttle } from 'lodash'
-import markerImage from '@images/new/agv.png'
-import carImage from '@images/new/car.png'
-import { getMapInfoByCode, getRouteInfo, queryMapAllStation } from '@config/getData.js'
-import canvasZoomDrag from '@config/canvasZoomDrag'
+import markerImage from '../../images/new/station.png'
+import carImage from '../../images/new/agv.png'
+import { getMapInfoByCode, getRouteInfo, queryMapAllStation } from '../../config/getData.js'
+import canvasZoomDrag from '../../config/canvasZoomDrag'
 import { mapGetters } from 'vuex'
 export default {
+  name: 'ModuleMap',
   data () {
     return {
       canvas: null, // Canvas 元素
@@ -105,13 +106,14 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['agvObj']),
-    carData () {
-      let res = ''
-      if (this.agvObj !== '') {
-        res = JSON.parse(this.agvObj)
-      }
-      return res
+    ...mapGetters(['carPosition'])
+  },
+  watch: {
+    carPosition: {
+      handler() {
+        this.redrawCanvas()
+      },
+      deep: true
     }
   },
   mixins: [canvasZoomDrag],
@@ -120,21 +122,9 @@ export default {
     this.preloadCarImage()
     this.loadAllDataInParallel()
     document.addEventListener('click', this.handleDocumentClick)
-    this.carPositionWatcher = this.$watch(
-      () => this.carData,
-      (newVal) => {
-        if (newVal !== '') {
-          this.redrawCanvas()
-        }
-      },
-      { deep: true }
-    )
   },
   beforeDestroy () {
     document.removeEventListener('click', this.handleDocumentClick)
-    if (this.carPositionWatcher) {
-      this.carPositionWatcher()
-    }
   },
   methods: {
     preloadCarImage () {
@@ -302,7 +292,7 @@ export default {
     }, 30),
     drawPath () {
       if (!this.pathData.length) return
-      this.pathData.forEach((point, index) => {
+      this.pathData.forEach(point => {
         const startX = (point.start_x - this.mapData.x) / this.mapData.resolution
         const startY = this.mapData.height - (point.start_y - this.mapData.y) / this.mapData.resolution
         const endX = (point.end_x - this.mapData.x) / this.mapData.resolution
@@ -349,16 +339,20 @@ export default {
       })
     },
     drawCar () {
-      if (!this.carData || !this.cachedImages.car || !this.mapData) return
-      const carX = (this.carData.x - this.mapData.x) / this.mapData.resolution
-      const carY = this.mapData.height - (this.carData.y - this.mapData.y) / this.mapData.resolution
+      if (!this.cachedImages.car || !this.mapData) return
+      const carX = (this.carPosition.x - this.mapData.x) / this.mapData.resolution
+      const carY = this.mapData.height - (this.carPosition.y - this.mapData.y) / this.mapData.resolution
+      this.ctx.save()
+      this.ctx.translate(carX, carY)
+      this.ctx.rotate(-this.carPosition.angle)
       this.ctx.drawImage(
         this.cachedImages.car,
-        carX - 35,
-        carY - 21,
-        70,
-        42
+        -25,
+        -25,
+        50,
+        50
       )
+      // this.ctx.restore()
     },
     handleCanvasClick (event) {
       const rect = this.canvas.getBoundingClientRect()
@@ -519,19 +513,6 @@ export default {
   background-color rgba(4, 33, 58, 70%)
   box-shadow inset 1px 1px 7px 2px #4d9bcd
   overflow hidden
-.map_tools
-  position absolute
-  top 0
-  right 0
-.zoom_data
-  width .6rem
-  font-size .16rem
-  height .32rem
-  line-height .32rem
-  color #00d9f3
-  text-align center
-  border-top 1px solid #009fde
-  border-bottom 1px solid #009fde
 .point-popup
   position fixed
   background rgba(0, 0, 0, 70%)