优化

src/config/http.js

@@ -35,25 +35,25 @@ axios.interceptors.response.use(
     if (error && error.response) {
       switch (error.response.status) {
         case 400:
-          console.error('请求参数错误')
+          console.log('请求参数错误')
-          this.$message.error('请求参数错误')
           break
         case 401:
-          console.error('身份验证失败，即将跳转登录页')
+          console.log('身份验证失败，即将跳转登录页')
           break
         case 404:
-          console.error('请求资源不存在')
+          console.log('请求资源不存在')
           break
         case 500:
-          console.error('服务器内部错误')
+          console.log('服务器内部错误')
           break
         default:
-          console.error('请求失败：', error.response.status)
+          console.log('请求失败：', error.response.status)
       }
+      return Promise.reject(error.response.data || error.message)
     } else {
-      console.error('网络错误或服务器无响应')
+      console.log('网络错误或服务器无响应')
+      return Promise.reject(new Error('网络错误或服务器无响应'))
     }
-    return Promise.reject(error.response.data || error.message)
   }
 )
 
@@ -64,7 +64,7 @@ export const post = (sevmethod, params) => {
         resolve(response.data)
       })
       .catch((error) => {
-        reject(error)
+        reject(error.message)
       })
   })
 }
@@ -76,7 +76,7 @@ export const get = (sevmethod, params = {}) => {
         resolve(response.data)
       })
       .catch(error => {
-        reject(error)
+        reject(error.message)
       })
   })
 }

src/pages/modules/map.vue

@@ -51,7 +51,7 @@
 </template>
 
 <script>
-// import { throttle } from 'lodash'
+import { throttle } from 'lodash'
 import markerImage from '@images/new/agv.png'
 import { getMapInfoByCode, getRouteInfo, queryMapAllStation } from '@config/getData.js'
 import canvasZoomDrag from '@config/canvasZoomDrag'
@@ -66,12 +66,21 @@ export default {
       showPopup: false,
       selectedPoint: {},
       popupStyle: {left: '0px', top: '0px'},
-      selectedPointId: null
+      selectedPointId: null,
+      cachedImages: {
+        map: null,
+        marker: null
+      },
+      imageLoadStatus: {
+        map: false,
+        marker: false
+      }
     }
   },
   mixins: [canvasZoomDrag],
   mounted () {
-    this._getMapInfoByCode()
+    this.preloadMarkerImage()
+    this.loadAllDataInParallel()
     document.addEventListener('click', this.handleDocumentClick)
   },
   beforeDestroy () {
@@ -79,49 +88,119 @@ export default {
     document.removeEventListener('click', this.handleDocumentClick)
   },
   methods: {
+    preloadMarkerImage () {
+      if (this.cachedImages.marker) {
+        this.imageLoadStatus.marker = true
+        return
+      }
+      const img = new Image()
+      img.src = markerImage
+      img.onload = () => {
+        this.cachedImages.marker = img
+        this.imageLoadStatus.marker = true
+        this.checkImagesLoadedAndRedraw()
+      }
+      img.onerror = () => {
+        console.error('标记图片加载失败')
+        this.imageLoadStatus.marker = true
+        this.checkImagesLoadedAndRedraw()
+      }
+    },
+    loadMapImage () {
+      if (!this.mapData.mapImageAddress) {
+        return Promise.reject(new Error('地图数据缺失'))
+      }
+      if (this.cachedImages.map && this.imageLoadStatus.map) {
+        return Promise.resolve(this.cachedImages.map)
+      }
+      return new Promise((resolve, reject) => {
+        const img = new Image()
+        img.src = `${this.$store.getters.baseUrl}${this.mapData.mapImageAddress}`
+        // img.src = this.mapData.mapImageAddress
+        img.onload = () => {
+          this.cachedImages.map = img
+          this.imageLoadStatus.map = true
+          this.checkImagesLoadedAndRedraw()
+          resolve(img)
+        }
+        img.onerror = (error) => {
+          console.error('地图图片加载失败:', error)
+          this.imageLoadStatus.map = true
+          reject(error)
+        }
+      })
+    },
+    checkImagesLoadedAndRedraw () {
+      if (this.imageLoadStatus.map && this.imageLoadStatus.marker) {
+        this.redrawCanvas()
+      }
+    },
+    async loadAllDataInParallel () {
+      try {
+        this.loading = this.$loading({
+          lock: true,
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.6)'
+        })
+        const [mapData, pathData, stations] = await Promise.all([
+          this._getMapInfoByCode(),
+          this._getRouteInfo(),
+          this._queryMapAllStation()
+        ])
+        this.mapData = mapData
+        this.pathData = [...pathData]
+        this.pointData = this.filterPointData(pathData, stations)
+        this.initCanvas()
+        await this.loadMapImage()
+        this.loading.close()
+      } catch (e) {
+        this.$message.error(`数据加载失败: ${e.message || '未知错误'}`)
+        this.loading.close()
+      }
+    },
     async _getMapInfoByCode () {
       try {
-        let res = await getMapInfoByCode()
+        const res = await getMapInfoByCode()
-        if (res) {
+        if (!res) throw new Error('地图信息为空')
-          this.mapData = res
+        return res
-          this._getRouteInfo()
-        }
       } catch (e) {
-        this.$message.error(e)
+        console.error('获取地图信息失败:', e)
+        throw new Error(`获取地图信息失败: ${e.message}`)
       }
     },
     async _getRouteInfo () {
       try {
-        let res = await getRouteInfo()
+        const res = await getRouteInfo()
-        this.pathData = [...res]
+        if (!res) throw new Error('路径信息为空')
-        this._queryMapAllStation()
+        return res
       } catch (e) {
-        this.$message.error(e)
+        console.error('获取路径信息失败:', e)
+        throw new Error(`获取路径信息失败: ${e.message}`)
       }
     },
     async _queryMapAllStation () {
       try {
-        let res = await queryMapAllStation()
+        const res = await queryMapAllStation()
-        const stations = [...res]
+        if (!res) throw new Error('站点信息为空')
-        this.pointData = this.filterPointData(this.pathData, stations)
+        return res
-        this.initCanvas()
       } catch (e) {
-        this.$message.error(e)
+        console.error('获取站点信息失败:', e)
+        throw new Error(`获取站点信息失败: ${e.message}`)
       }
     },
     filterPointData (routes, stations) {
       const result = []
       const seenStationIds = new Set()
-      routes.forEach((route) => {
+      routes.forEach(route => {
-        const startStation = stations.find((station) => station.station_id === route.start_id)
+        const startStation = stations.find(s => s.station_id === route.start_id)
-        const endStation = stations.find((station) => station.station_id === route.end_id)
+        const endStation = stations.find(s => s.station_id === route.end_id)
         if (startStation && !seenStationIds.has(startStation.station_id)) {
           result.push(startStation)
           seenStationIds.add(startStation.station_id)
         }
         if (endStation && !seenStationIds.has(endStation.station_id)) {
           result.push(endStation)
-          seenStationIds.add(endStation.station_id) // 标记为已添加
+          seenStationIds.add(endStation.station_id)
         }
       })
       return result
@@ -133,19 +212,28 @@ export default {
       this.canvas.height = this.mapData.height
       this.redrawCanvas()
     },
-    redrawCanvas () {
+    redrawCanvas: throttle(function () {
+      if (!this.ctx || !this.mapData) return
       this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
-      const img = new Image()
+      this.ctx.save()
-      img.src = `${this.$store.getters.baseUrl}${this.mapData.mapImageAddress}`
+      // 绘制地图背景
-      // img.src = `${this.mapData.mapImageAddress}`
+      if (this.cachedImages.map) {
-      img.onload = () => {
+        this.ctx.drawImage(
-        this.ctx.drawImage(img, 0, 0, this.canvas.width, this.canvas.height)
+          this.cachedImages.map,
-        this.ctx.save()
+          0, 0,
-        this.drawPath()
+          this.canvas.width,
-        this.drawMarkers()
+          this.canvas.height
+        )
+      } else {
+        this.ctx.fillStyle = '#ccc'
+        this.ctx.fillText('地图加载中...', 50, 50)
       }
-    },
+      this.drawPath()
+      this.drawMarkers()
+      this.ctx.restore()
+    }, 30),
     drawPath () {
+      if (!this.pathData.length) return
       this.ctx.beginPath()
       this.pathData.forEach((point, index) => {
         const startX = (point.start_x - this.mapData.x) / this.mapData.resolution
@@ -154,32 +242,38 @@ export default {
         const endY = this.mapData.height - (point.end_y - this.mapData.y) / this.mapData.resolution
         this.ctx.moveTo(startX, startY)
         this.ctx.lineTo(endX, endY)
-        this.ctx.strokeStyle = '#009de5'
-        this.ctx.lineWidth = 3
-        this.ctx.stroke()
       })
+      this.ctx.strokeStyle = '#009de5'
+      this.ctx.lineWidth = 2
+      this.ctx.stroke()
     },
     drawMarkers () {
-      const markerImg = new Image()
+      if (!this.pointData.length) return
-      markerImg.src = markerImage
+      const markerSize = 10 // 标记大小随缩放变化
-      markerImg.onload = () => {
+      this.pointData.forEach(point => {
-        this.pointData.forEach(point => {
+        const x = (point.x - this.mapData.x) / this.mapData.resolution
-          const x = (point.x - this.mapData.x) / this.mapData.resolution
+        const y = this.mapData.height - (point.y - this.mapData.y) / this.mapData.resolution
-          const y = this.mapData.height - (point.y - this.mapData.y) / this.mapData.resolution
+        // 绘制选中状态
-          if (point.station_id === this.selectedPointId) {
+        if (point.station_id === this.selectedPointId) {
-            this.ctx.beginPath()
+          this.ctx.beginPath()
-            this.ctx.arc(x, y, 5, 0, Math.PI * 2)
+          this.ctx.arc(x, y, 5, 0, Math.PI * 2)
-            this.ctx.fillStyle = '#59ccd2'
+          this.ctx.fillStyle = '#59ccd2'
-            this.ctx.fill()
+          this.ctx.fill()
-          } else {
+        } else if (this.cachedImages.marker) {
-            this.ctx.drawImage(markerImg, x - 5, y - 5, 10, 10)
+          this.ctx.drawImage(
-          }
+            this.cachedImages.marker,
-          this.ctx.font = '12px Arial'
+            x - markerSize / 2, // 居中对齐
-          this.ctx.fillStyle = 'white'
+            y - markerSize / 2,
-          this.ctx.textAlign = 'center'
+            markerSize,
-          this.ctx.fillText(point.station_name, x, y + 18)
+            markerSize
-        })
+          )
-      }
+        }
+        // 绘制点位名称（文字大小随缩放变化）
+        this.ctx.font = '12px Arial'
+        this.ctx.fillStyle = 'white'
+        this.ctx.textAlign = 'center'
+        this.ctx.fillText(point.station_name, x, y + 18)
+      })
     },
     handleCanvasClick (event) {
       const rect = this.canvas.getBoundingClientRect()
@@ -192,22 +286,34 @@ export default {
         y = Math.abs(y) === 0 ? 0 : y
         // 检查点击位置是否在标记图片内
         if (mouseX >= x - 10 && mouseX <= x + 10 && mouseY >= y - 10 && mouseY <= y + 10) {
-          if (this.selectedPointId === point.station_id) {
+          this.handlePointSelect(point, event)
-            this.resetSelection()
+          event.stopPropagation()
-          } else {
-            this.selectedPointId = point.station_id
-            this.selectedPoint = point
-            this.showPopup = true
-            this.popupStyle = {
-              left: `${event.clientX - 40}px`,
-              top: `${event.clientY - 150}px`
-            }
-            this.initCanvas()
-            event.stopPropagation()
-          }
         }
       })
     },
+    handlePointSelect (point, event) {
+      if (this.selectedPointId === point.station_id) {
+        this.resetSelection()
+      } else {
+        this.selectedPointId = point.station_id
+        this.selectedPoint = point
+        this.showPopup = true
+        this.calculatePopupPosition(event)
+        this.redrawCanvas()
+      }
+    },
+    calculatePopupPosition (event) {
+      const popupWidth = 200
+      const popupHeight = 180
+      let left = event.clientX - 40
+      let top = event.clientY - 150
+
+      // 限制弹窗在窗口可视范围内
+      left = Math.max(10, Math.min(left, window.innerWidth - popupWidth - 10))
+      top = Math.max(10, Math.min(top, window.innerHeight - popupHeight - 10))
+
+      this.popupStyle = { left: `${left}px`, top: `${top}px` }
+    },
     handleDocumentClick () {
       this.resetSelection()
     },
@@ -216,7 +322,7 @@ export default {
         this.selectedPointId = null
         this.selectedPoint = null
         this.showPopup = false
-        this.initCanvas()
+        this.redrawCanvas()
       }
     }
   }

src/pages/modules/map1.vue

@@ -0,0 +1,273 @@
+
+<template>
+  <div class="page_container">
+    <div class="canvas-container">
+      <canvas
+        id="mapCanvas"
+        ref="mapCanvas"
+        @wheel="handleZoom"
+        @click="handleCanvasClick"
+        @touchstart="handleTouchStart"
+        @touchmove="handleTouchMove"
+        @mousedown="handleMouseDown"
+        @mousemove="handleMouseMove"
+        @mouseup="handleMouseUp"
+        @mouseleave="handleMouseUp"
+      ></canvas>
+      <el-row type="flex" justify="end" class="map_tools">
+        <el-button type="primary" :disabled="zoomPercentage === 2" icon="el-icon-minus" size="mini" style="border: 0;border-radius: 0;" @click="zoomOut"></el-button>
+        <div class="zoom_data">{{ zoomPercentage }}%</div>
+        <el-button type="primary" :disabled="zoomPercentage === 200" icon="el-icon-plus" size="mini" style="border: 0;border-radius: 0;" @click="zoomIn"></el-button>
+      </el-row>
+    </div>
+    <div
+      v-if="showPopup"
+      class="point-popup"
+      :style="popupStyle"
+      @click.stop
+    >
+      <el-row type="flex" justify="space-between" class="popup-content" style="border-bottom: 1px solid #fff;">
+        <el-col :span="10"><h3>编号</h3></el-col>
+        <el-col :span="14"><p>{{selectedPoint.station_code}}</p></el-col>
+      </el-row>
+      <el-row type="flex" justify="space-between" class="popup-content">
+        <el-col :span="10"><h3>别名</h3></el-col>
+        <el-col :span="14"><p>{{selectedPoint.station_name}}</p></el-col>
+      </el-row>
+      <el-row type="flex" justify="space-between" class="popup-content">
+        <el-col :span="10"><h3>X坐标</h3></el-col>
+        <el-col :span="14"><p>{{ selectedPoint.x }}</p></el-col>
+      </el-row>
+      <el-row type="flex" justify="space-between" class="popup-content">
+        <el-col :span="10"><h3>Y坐标</h3></el-col>
+        <el-col :span="14"><p>{{ selectedPoint.y }}</p></el-col>
+      </el-row>
+      <el-row type="flex" justify="space-between" class="popup-content">
+        <el-col :span="10"><h3>角度值</h3></el-col>
+        <el-col :span="14"><p>{{ selectedPoint.angle }}</p></el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { throttle } from 'lodash'
+import markerImage from '@images/new/agv.png'
+import { getMapInfoByCode, getRouteInfo, queryMapAllStation } from '@config/mork.js'
+import canvasZoomDrag from '@config/canvasZoomDrag'
+export default {
+  data () {
+    return {
+      canvas: null, // Canvas 元素
+      ctx: null, // Canvas 绘图上下文
+      mapData: null, // 地图数据
+      pathData: null, // 路径数据
+      pointData: null, // 点位数据
+      showPopup: false,
+      selectedPoint: {},
+      popupStyle: {left: '0px', top: '0px'},
+      selectedPointId: null
+    }
+  },
+  mixins: [canvasZoomDrag],
+  mounted () {
+    this._getMapInfoByCode()
+    document.addEventListener('click', this.handleDocumentClick)
+  },
+  beforeDestroy () {
+    // 移除事件监听
+    document.removeEventListener('click', this.handleDocumentClick)
+  },
+  methods: {
+    async _getMapInfoByCode () {
+      try {
+        let res = await getMapInfoByCode()
+        if (res) {
+          this.mapData = res
+          this._getRouteInfo()
+        }
+      } catch (e) {
+        this.$message.error(e)
+      }
+    },
+    async _getRouteInfo () {
+      try {
+        let res = await getRouteInfo()
+        this.pathData = [...res]
+        this._queryMapAllStation()
+      } catch (e) {
+        this.$message.error(e)
+      }
+    },
+    async _queryMapAllStation () {
+      try {
+        let res = await queryMapAllStation()
+        const stations = [...res]
+        this.pointData = this.filterPointData(this.pathData, stations)
+        this.initCanvas()
+      } catch (e) {
+        this.$message.error(e)
+      }
+    },
+    filterPointData (routes, stations) {
+      const result = []
+      const seenStationIds = new Set()
+      routes.forEach((route) => {
+        const startStation = stations.find((station) => station.station_id === route.start_id)
+        const endStation = stations.find((station) => station.station_id === route.end_id)
+        if (startStation && !seenStationIds.has(startStation.station_id)) {
+          result.push(startStation)
+          seenStationIds.add(startStation.station_id)
+        }
+        if (endStation && !seenStationIds.has(endStation.station_id)) {
+          result.push(endStation)
+          seenStationIds.add(endStation.station_id) // 标记为已添加
+        }
+      })
+      return result
+    },
+    initCanvas () {
+      this.canvas = this.$refs.mapCanvas
+      this.ctx = this.canvas.getContext('2d')
+      this.canvas.width = this.mapData.width
+      this.canvas.height = this.mapData.height
+      this.redrawCanvas()
+    },
+    redrawCanvas () {
+      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
+      const img = new Image()
+      // img.src = `${this.$store.getters.baseUrl}${this.mapData.mapImageAddress}`
+      img.src = `${this.mapData.mapImageAddress}`
+      img.onload = () => {
+        this.ctx.drawImage(img, 0, 0, this.canvas.width, this.canvas.height)
+        this.ctx.save()
+        this.drawPath()
+        this.drawMarkers()
+      }
+    },
+    drawPath () {
+      this.ctx.beginPath()
+      this.pathData.forEach((point, index) => {
+        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
+        const endY = this.mapData.height - (point.end_y - this.mapData.y) / this.mapData.resolution
+        this.ctx.moveTo(startX, startY)
+        this.ctx.lineTo(endX, endY)
+        this.ctx.strokeStyle = '#009de5'
+        this.ctx.lineWidth = 2
+        this.ctx.stroke()
+      })
+    },
+    drawMarkers () {
+      const markerImg = new Image()
+      markerImg.src = markerImage
+      markerImg.onload = () => {
+        this.pointData.forEach(point => {
+          const x = (point.x - this.mapData.x) / this.mapData.resolution
+          const y = this.mapData.height - (point.y - this.mapData.y) / this.mapData.resolution
+          if (point.station_id === this.selectedPointId) {
+            this.ctx.beginPath()
+            this.ctx.arc(x, y, 5, 0, Math.PI * 2)
+            this.ctx.fillStyle = '#59ccd2'
+            this.ctx.fill()
+          } else {
+            this.ctx.drawImage(markerImg, x - 5, y - 5, 10, 10)
+          }
+          this.ctx.font = '12px Arial'
+          this.ctx.fillStyle = 'white'
+          this.ctx.textAlign = 'center'
+          this.ctx.fillText(point.station_name, x, y + 18)
+        })
+      }
+    },
+    handleCanvasClick (event) {
+      const rect = this.canvas.getBoundingClientRect()
+      const mouseX = (event.clientX - rect.left) / this.scale
+      const mouseY = (event.clientY - rect.top) / this.scale
+      this.pointData.forEach(point => {
+        let x = (point.x - this.mapData.x) / this.mapData.resolution
+        let y = this.mapData.height - (point.y - this.mapData.y) / this.mapData.resolution
+        x = Math.abs(x) === 0 ? 0 : x
+        y = Math.abs(y) === 0 ? 0 : y
+        // 检查点击位置是否在标记图片内
+        if (mouseX >= x - 10 && mouseX <= x + 10 && mouseY >= y - 10 && mouseY <= y + 10) {
+          if (this.selectedPointId === point.station_id) {
+            this.resetSelection()
+          } else {
+            this.selectedPointId = point.station_id
+            this.selectedPoint = point
+            this.showPopup = true
+            this.popupStyle = {
+              left: `${event.clientX - 40}px`,
+              top: `${event.clientY - 150}px`
+            }
+            this.initCanvas()
+            event.stopPropagation()
+          }
+        }
+      })
+    },
+    handleDocumentClick () {
+      this.resetSelection()
+    },
+    resetSelection () {
+      if (this.selectedPointId) {
+        this.selectedPointId = null
+        this.selectedPoint = null
+        this.showPopup = false
+        this.initCanvas()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.canvas-container
+  position relative
+  display flex
+  justify-content: center;
+  align-items: center;
+  height calc(100% - .32rem)
+  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%)
+  border 1px solid rgba(255, 255, 255, .3)
+  border-radius: 8px;
+  padding 10px
+  box-shadow 0 0px 4px 2px rgba(255,255,255,0.1)
+  z-index 100
+  min-width 150px
+  animation fadeIn 0.2s ease-out
+  h3
+    color #fff
+    font-size 14px
+    line-height 24px
+    text-align center
+  p
+    color #fff
+    font-size 14px
+    line-height 24px
+    text-align center
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(5px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+</style>

src/vuex/modules/com.js

@@ -1,7 +1,7 @@
 import * as types from '../types'
 import { getStore, setStore } from '@config/utils.js'
 
-const baseUrl = process.env.NODE_ENV === 'development' ? 'http://localhost:8011' : 'http://localhost:8011'
+const baseUrl = process.env.NODE_ENV === 'development' ? 'http://192.168.10.50:8011' : 'http://localhost:8011'
 const setTime = '5000'
 const username = 'user'
 const password = '123456'