修改重定位操作

src/i18n/langs/en.js

@@ -122,5 +122,6 @@ module.exports = {
   Dispatchvehiclenotconnected: 'Dispatch and the vehicle body are not connected.',
   Vehiclereturnpoint: 'Vehicle return point',
   autobackfailedmanually:'The automatic fallback has failed. Please take over manually.',
-  vehicleautobacknotmanwaitcompleted: 'The vehicle is in the process of automatic fallback. Do not manually move the vehicle. Please wait until the automatic fallback is completed.'
+  vehicleautobacknotmanwaitcompleted: 'The vehicle is in the process of automatic fallback. Do not manually move the vehicle. Please wait until the automatic fallback is completed.',
+  yousurereposition: 'Are you sure you want to reposition?'
 }

src/i18n/langs/zh.js

@@ -122,5 +122,6 @@ module.exports = {
   Dispatchvehiclenotconnected: '调度和车辆本体未连接',
   Vehiclereturnpoint: '车辆返回点',
   autobackfailedmanually:'自动回退失败，请手动接管。',
-  vehicleautobacknotmanwaitcompleted: '车子正在自动回退中，请勿手动移动车辆，等待车辆自动回退完成。'
+  vehicleautobacknotmanwaitcompleted: '车子正在自动回退中，请勿手动移动车辆，等待车辆自动回退完成。',
+  yousurereposition: '是否确定重定位？'
 }

src/pages/modules/map/index copy.vue

@@ -0,0 +1,886 @@
+<template>
+  <div class="page_container" :class="{'enClass': $i18n.locale === 'en-us'}">
+    <div class="canvas-container" ref="mapContainer">
+      <canvas
+        class="mapCanvas"
+        ref="mapCanvas"
+        @click="handleCanvasClick"
+        @touchstart="handleTouchStart"
+        @touchmove="handleTouchMove"
+        @touchend="handleTouchEnd"
+        @mousedown="handleMouseDown"
+        @mousemove="handleMouseMove"
+        @mouseup="handleMouseUp"
+        @mouseleave="handleMouseUp"
+        @wheel="handleZoom"
+      ></canvas>
+      <svg 
+        class="mapSvg" 
+        ref="mapSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g 
+          ref="pointImgGrop"
+          id="pointImgGrop"
+          @mousedown="handlePointsDragStart"
+          @touchstart="handlePointsDragStart"
+        >
+          <g ref="pointGrop">
+            <circle
+              v-for="(point, index) in greenPoints"
+              :key="`point-${index}`"
+              :cx="point.px_x"
+              :cy="point.px_y"
+              r="3"
+              fill="green"
+            />
+          </g>
+          <image
+            ref="carImage"
+            :href="require('@/images/new/agv.png')"
+            alt="小车"
+            width="30"
+            height="30"
+            :x="-15"
+            :y="-15"
+            @mousedown="startCarDrag"
+            @touchstart="startCarDrag"
+          />
+        </g>
+      </svg>
+      <div class="map_tools">
+        <el-button class="zoom_btn" type="primary" :disabled="zoomPercentage === 2" icon="el-icon-minus" size="mini" @click="zoomOut"></el-button>
+        <div class="zoom_data">{{ zoomPercentage }}%</div>
+        <el-button class="zoom_btn" type="primary" :disabled="zoomPercentage === 200" icon="el-icon-plus" size="mini" @click="zoomIn"></el-button>
+        <el-button class="zoom_btn" style="margin-top: .2rem !important" type="primary" icon="el-icon-rank" size="mini" @click="resetZoomAndDrag"></el-button>
+        <el-button class="zoom_btn" type="primary" icon="el-icon-location" size="mini" :disabled="isCarLocked" @click="handleRelocate"></el-button>
+      </div>
+    </div>
+    <PointPopup
+      v-if="showPopup"
+      :style="popupStyle"
+      :point="selectedPoint"
+    />
+    <PathPopup
+      v-if="showPathPopup"
+      :style="pathPopupStyle"
+      :path="selectedPath"
+      :getStationName="getStationNameById"
+    />
+    <div v-show="isCarLocked" class="re-popup">
+      <p>是否确定重定位？</p>
+      <el-row style="margin-top: .2rem">
+        <el-button type="danger" @click="cancelLocked"><p>{{$t('Cancel')}}</p></el-button>
+        <el-button type="primary" @click="confirmLocked"><p>{{$t('Confirm')}}</p></el-button>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import { throttle } from 'lodash'
+import markerImage from '@/images/new/station.png'
+import { getMapInfoByCode, getRouteInfo, queryMapAllStation, relocate } from '@/config/getData.js'
+import { mapGetters } from 'vuex'
+import PointPopup from './PointPopup.vue'
+import PathPopup from './PathPopup.vue'
+const ZOOM_CONFIG = {
+  MIN: 0.02,
+  MAX: 2,
+  STEP: 0.08,
+  TOUCH_STEP_FACTOR: 50
+}
+const PATH_CLICK_THRESHOLD = 5
+const MARKER_SIZE = 16
+const CAR_SIZE = 15
+export default {
+  name: 'ModuleMap',
+  components: {
+    PointPopup,
+    PathPopup
+  },
+  data () {
+    return {
+      loading: null,
+      canvas: null,
+      ctx: null,
+      canvasWidth: 0,
+      canvasHeight: 0,
+      originX: 0,
+      originY: 0,
+      cachedImages: {
+        map: null,
+        marker: null
+      },
+      mapData: null,
+      pathData: null,
+      pointData: null,
+      mapScale: 1,
+      showPopup: false,
+      selectedPoint: {},
+      popupStyle: {left: '0px', top: '0px'},
+      selectedPointId: null,
+      showPathPopup: false,
+      selectedPath: {route_id: null},
+      pathPopupStyle: { left: '0px', top: '0px' },
+      touchStart: null,
+      isDragging: false,
+      lastX: 0,
+      lastY: 0,
+      offsetX: 0,
+      offsetY: 0,
+      scale: 1,
+      zoomPercentage: 100,
+      pxCarPosition:{px_x: 0, px_y: 0, px_angle: 0},
+      websocket: null,
+      greenPoints: [],
+      isCarLocked: false,
+      isDraggingCar: false,
+      carLastX: 0,
+      carLastY: 0,
+      carOffsetX: 0,
+      carOffsetY: 0,
+      isDraggingPoints: false,
+      carCenterX: 0,
+      carCenterY: 0
+    }
+  },
+  computed: {
+    ...mapGetters(['serverUrl', 'carPosition', 'userRole'])
+  },
+  watch: {
+    carPosition: {
+      handler(newVal) {
+        this.updateCarPosition(newVal)
+      },
+      deep: true
+    },
+    mapData: {
+      handler(newVal) {
+        if (newVal) {
+          this.updateCarPosition(this.carPosition)
+        }
+      }
+    }
+  },
+  mounted () {
+    this.loadAllDataInParallel()
+  },
+  methods: {
+    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()
+        ])
+        await Promise.all([
+          this.preloadImage('map', `${this.serverUrl}${mapData.mapImageAddress}`),
+          this.preloadImage('marker', markerImage)
+        ])
+        this.mapData = mapData
+        this.pathData = [...pathData]
+        this.pointData = this.filterPointData(pathData, stations)
+        this.initCanvas()
+      } catch (e) {
+        this.$message.error(e.message)
+      } finally {
+        this.loading.close()
+      }
+    },
+    async _getMapInfoByCode () {
+      try {
+        const res = await getMapInfoByCode()
+        if (!res) throw new Error('地图信息为空')
+        return res
+      } catch (e) {
+        console.error('获取地图信息失败:', e)
+        throw new Error(`获取地图信息失败: ${e.message}`)
+      }
+    },
+    async _getRouteInfo () {
+      try {
+        const res = await getRouteInfo()
+        if (!res) throw new Error('路径信息为空')
+        return res
+      } catch (e) {
+        console.error('获取路径信息失败:', e)
+        throw new Error(`获取路径信息失败: ${e.message}`)
+      }
+    },
+    async _queryMapAllStation () {
+      try {
+        const res = await queryMapAllStation()
+        if (!res) throw new Error('站点信息为空')
+        return res
+      } catch (e) {
+        console.error('获取站点信息失败:', e)
+        throw new Error(`获取站点信息失败: ${e.message}`)
+      }
+    },
+    filterPointData (routes, stations) {
+      const result = []
+      const seenStationIds = new Set()
+      
+      routes.forEach(route => {
+        [route.start_id, route.end_id].forEach(stationId => {
+          const station = stations.find(s => s.station_id === stationId)
+          if (station && !seenStationIds.has(station.station_id)) {
+            result.push(station)
+            seenStationIds.add(station.station_id)
+          }
+        })
+      })
+      return result
+    },
+    convertCmToPx (cmX, cmY) {
+      const mapX = ((cmX - this.mapData.x) / this.mapData.resolution) * this.mapScale
+      const mapY = (this.mapData.height - (cmY - this.mapData.y) / this.mapData.resolution) * this.mapScale
+      return { x: mapX, y: mapY }
+    },
+    pointCmToPx (cmX, cmY) {
+      const mapX = cmX / this.mapData.resolution * this.mapScale
+      const mapY = -1 * cmY / this.mapData.resolution * this.mapScale
+      return { x: mapX, y: mapY }
+    },
+    converPxToCm (pX, pY) {
+      const mapX = pX / this.mapScale
+      const mapY = pY / this.mapScale
+      const cmX = mapX * this.mapData.resolution + this.mapData.x
+      const cmY = (this.mapData.height - mapY) * this.mapData.resolution + this.mapData.y
+      return { x: cmX, y: cmY }
+    },
+    preloadImage(key, url) {
+      return new Promise((resolve, reject) => {
+        // 如果图片已加载，直接返回
+        if (this.cachedImages[key]?.complete) {
+          resolve()
+          return
+        }
+        const img = new Image()
+        img.src = url
+        img.onload = () => {
+          this.cachedImages[key] = img
+          resolve()
+        }
+        img.onerror = () => reject(new Error(`图片加载失败: ${url}`))
+      })
+    },
+    initCanvas () {
+      this.canvas = this.$refs.mapCanvas
+      this.ctx = this.canvas.getContext('2d')
+      const container = this.$refs.mapContainer
+      this.canvasWidth = container.clientWidth
+      this.canvasHeight = container.clientHeight
+      this.canvas.width = this.canvasWidth
+      this.canvas.height = this.canvasHeight
+      // 计算地图图片缩放比例
+      if (this.mapData.width > this.canvas.width || this.mapData.height > this.canvas.height) {
+        const scaleX = this.canvas.width / this.mapData.width
+        const scaleY = this.canvas.height / this.mapData.height
+        this.mapScale = Math.min(scaleX, scaleY)
+      }
+      // 计算点位坐标厘米和像素的转换
+      this.pathData.forEach(point => {
+        const start = this.convertCmToPx(point.start_x, point.start_y)
+        const end = this.convertCmToPx(point.end_x, point.end_y)
+        this.$set(point, 'px_start_x', start.x)
+        this.$set(point, 'px_start_y', start.y)
+        this.$set(point, 'px_end_x', end.x)
+        this.$set(point, 'px_end_y', end.y)
+      })
+      this.pointData.forEach(point => {
+        const pt = this.convertCmToPx(point.x, point.y)
+        this.$set(point, 'px_x', pt.x)
+        this.$set(point, 'px_y', pt.y)
+      })
+      const scaledWidth = this.mapData.width * this.mapScale
+      const scaledHeight = this.mapData.height * this.mapScale
+      // 计算地图图片左上角位置（即要移动到的原点）
+      this.originX = (this.canvas.width - scaledWidth) / 2
+      this.originY = (this.canvas.height - scaledHeight) / 2
+      this.ctx.translate(this.originX, this.originY)
+      this.ctx.save()
+      this.redrawCanvas()
+      // svg
+      const mapSvg = this.$refs.mapSvg
+      mapSvg.setAttribute('width', this.canvasWidth)
+      mapSvg.setAttribute('height', this.canvasHeight)
+      mapSvg.setAttribute('viewBox', `-${this.originX} -${this.originY} ${this.canvasWidth} ${this.canvasHeight}`)
+    },
+    redrawCanvas: throttle(function () {
+      if (!this.ctx || !this.mapData) return
+      this.ctx.save()
+      this.ctx.setTransform(1, 0, 0, 1, 0, 0)
+      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
+      this.ctx.restore()
+      const scaledWidth = this.mapData.width * this.mapScale
+      const scaledHeight = this.mapData.height * this.mapScale
+      if (this.cachedImages.map) {
+        this.ctx.drawImage(this.cachedImages.map, 0, 0, scaledWidth, scaledHeight)
+        this.drawPath()
+        this.drawMarkers()
+      } else {
+        this.cachedImages.map = new Image()
+        // this.cachedImages.map.src = this.mapData.mapImageAddress
+        this.cachedImages.map.src = `${this.serverUrl}${this.mapData.mapImageAddress}`
+        this.cachedImages.map.onload = () => {
+          this.ctx.drawImage(this.cachedImages.map, 0, 0, scaledWidth, scaledHeight)
+          this.drawPath()
+          this.drawMarkers()
+        }
+      }
+    }, 30),
+    drawPath () {
+      if (!this.pathData.length) return
+      this.pathData.forEach((point, index) => {
+        const nextPoint = this.pathData[index + 1]
+        let controlX, controlY
+        if (nextPoint) {
+          // 有下一个点时，使用当前终点和下一个起点的中点作为控制点
+          controlX = (point.px_end_x + nextPoint.px_start_x) / 2
+          controlY = (point.px_end_y + nextPoint.px_start_y) / 2
+        } else {
+          // 最后一个点，使用当前终点作为控制点
+          controlX = point.px_end_x
+          controlY = point.px_end_y
+        }
+        this.ctx.beginPath()
+        this.ctx.moveTo(point.px_start_x, point.px_start_y)
+        this.ctx.quadraticCurveTo(controlX, controlY, point.px_end_x, point.px_end_y)
+        if (this.selectedPath.route_id === point.route_id) {
+          this.ctx.strokeStyle = '#ff5722' // 橙色高亮
+          this.ctx.lineWidth = 4
+        } else {
+          this.ctx.strokeStyle = '#009de5' // 默认蓝色
+          this.ctx.lineWidth = 2
+        }
+        this.ctx.stroke()
+      })
+    },
+    drawMarkers () {
+      if (!this.pointData.length || !this.ctx) return
+      if (!this.cachedImages.marker) {
+        this.cachedImages.marker = new Image()
+        this.cachedImages.marker.src = markerImage
+        // 图标加载完成后重新绘制，确保点位显示
+        this.cachedImages.marker.onload = () => {
+          this.redrawCanvas()
+        }
+        return // 等待图标加载完成后再绘制
+      }
+      this.pointData.forEach(point => {
+        // 绘制选中状态
+        if (point.station_id === this.selectedPointId) {
+          this.ctx.beginPath()
+          this.ctx.arc(point.px_x, point.px_y, 5, 0, Math.PI * 2)
+          this.ctx.fillStyle = '#59ccd2'
+          this.ctx.fill()
+        } else {
+          this.ctx.drawImage(this.cachedImages.marker, point.px_x - MARKER_SIZE / 2, point.px_y - MARKER_SIZE / 2, MARKER_SIZE, MARKER_SIZE)
+        }
+        // 绘制点位名称（文字大小随缩放变化）
+        if (point.station_type !== 'Station') {
+          this.ctx.font = '12px Arial'
+          this.ctx.fillStyle = '#62fa0a'
+          this.ctx.textAlign = 'center'
+          this.ctx.fillText(point.station_name, point.px_x, point.px_y + 22)
+          this.ctx.fillText(point.x, point.px_x, point.px_y + 34)
+          this.ctx.fillText(point.y, point.px_x, point.px_y + 50)
+        }
+      })
+    },
+    handleCanvasClick (event) {
+      const rect = this.canvas.getBoundingClientRect()
+      const mouseX = (event.clientX - rect.left) / this.scale - this.originX
+      const mouseY = (event.clientY - rect.top) / this.scale - this.originY
+      // 1. 优先检测点位点击
+      let pointClicked = false
+      for (const point of this.pointData) {
+        let x = point.px_x
+        let y = point.px_y
+        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) {
+          this.handlePointSelect(point, event)
+          event.stopPropagation()
+          pointClicked = true
+          if (this.showPathPopup) {
+            this.selectedPath = {route_id: null}
+            this.showPathPopup = false
+            this.redrawCanvas()
+          }
+          break
+        }
+      }
+      // 2. 只有点位未被点击时，才检测路径点击
+      if (!pointClicked) {
+        if (this.showPopup) {
+          this.selectedPointId = null
+          this.selectedPoint = null
+          this.showPopup = false
+          this.redrawCanvas()
+        }
+        let pathClicked = false
+        for (const path of this.pathData) {
+          // 计算点击点到线段的距离
+          const distance = this.pointToLineDistance(
+            { x: mouseX, y: mouseY },
+            { x: path.px_start_x, y: path.px_start_y },
+            { x: path.px_end_x, y: path.px_end_y }
+          )
+          // 距离小于阈值则认为点击了该路径
+          if (distance <= PATH_CLICK_THRESHOLD) {
+            this.handlePathSelect(path, event)
+            event.stopPropagation()
+            pathClicked = true
+            break
+          }
+        }
+        if (!pathClicked && this.showPathPopup) {
+          this.selectedPath = {route_id: null}
+          this.showPathPopup = false
+          this.redrawCanvas()
+        }
+      }
+    },
+    // 计算点到线段的最短距离
+    pointToLineDistance (point, lineStart, lineEnd) {
+      // 线段向量
+      const dx = lineEnd.x - lineStart.x
+      const dy = lineEnd.y - lineStart.y
+      // 线段长度的平方
+      const lengthSquared = dx * dx + dy * dy
+      // 线段长度为0（起点终点重合），直接返回点到起点的距离
+      if (lengthSquared === 0) {
+        return Math.hypot(point.x - lineStart.x, point.y - lineStart.y)
+      }
+      // 计算点击点在投影到线段上的位置比例（0~1之间为在线段上）
+      let t = ((point.x - lineStart.x) * dx + (point.y - lineStart.y) * dy) / lengthSquared
+      t = Math.max(0, Math.min(1, t)) // 限制在0~1范围内
+      // 投影点坐标
+      const projectionX = lineStart.x + t * dx
+      const projectionY = lineStart.y + t * dy
+      // 点到投影点的距离
+      return Math.hypot(point.x - projectionX, point.y - projectionY)
+    },
+    // 处理点位选中
+    handlePointSelect (point, event) {
+      if (this.selectedPointId === point.station_id) {
+        this.selectedPointId = null
+        this.selectedPoint = null
+        this.showPopup = false
+      } else {
+        this.selectedPointId = point.station_id
+        this.selectedPoint = point
+        this.calculatePopupPosition(event, 143, this.popupStyle)
+        this.showPopup = true
+      }
+      this.redrawCanvas()
+    },
+    // 处理路径选中
+    handlePathSelect (path, event) {
+      if (this.selectedPath.route_id === path.route_id) {
+        this.selectedPath = {route_id: null}
+        this.showPathPopup = false
+      } else {
+        this.selectedPath = path
+        this.calculatePopupPosition(event, 95, this.pathPopupStyle)
+        this.showPathPopup = true
+      }
+      this.redrawCanvas()
+    },
+    calculatePopupPosition (event, height, styleObj = this.popupStyle) {
+      const left = event.clientX
+      const top = event.clientY - height - 10
+      styleObj.left = `${left}px`
+      styleObj.top = `${top}px`
+    },
+    getStationNameById (stationId) {
+      if (!stationId || !this.pointData || !this.pointData.length) return null
+      const station = this.pointData.find(point => point.station_id === stationId)
+      return station ? station.station_name : null
+    },
+    // 触摸事件：支持单指拖动和双指缩放
+    handleTouchStart (event) {
+      // 记录触摸点
+      const touches = Array.from(event.touches)
+      if (touches.length === 1) {
+        // 单指：准备拖动
+        this.isDragging = true
+        this.lastX = touches[0].clientX
+        this.lastY = touches[0].clientY
+      } else if (touches.length === 2) {
+        // 双指：准备缩放（禁用拖动）
+        this.isDragging = false
+        this.touchStart = touches.map(touch => ({
+          x: touch.clientX,
+          y: touch.clientY
+        }))
+      }
+    },
+    applyTransform () {
+      const mapSvg = this.$refs.mapSvg
+      if (this.canvas) {
+        this.canvas.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(${this.scale})`
+        mapSvg.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(${this.scale})`
+      }
+    },
+    // 计算两点之间的距离
+    getDistance (x1, y1, x2, y2) {
+      return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2)
+    },
+    zoom (step) {
+      this.scale = Math.min(ZOOM_CONFIG.MAX, Math.max(ZOOM_CONFIG.MIN, this.scale + step / 100))
+      this.zoomPercentage = Math.round(this.scale * 100)
+      this.applyTransform()
+    },
+    handleTouchMove (event) {
+      event.preventDefault() // 阻止页面滚动
+      const touches = Array.from(event.touches)
+      if (this.isDragging && touches.length === 1) {
+        // 单指拖动
+        const currentX = touches[0].clientX
+        const currentY = touches[0].clientY
+        // 计算移动距离（考虑缩放影响，拖动速度与缩放比例成反比）
+        const moveX = (currentX - this.lastX) / this.scale
+        const moveY = (currentY - this.lastY) / this.scale
+        // 更新偏移量
+        this.offsetX += moveX
+        this.offsetY += moveY
+        // 更新上一次位置
+        this.lastX = currentX
+        this.lastY = currentY
+        // 应用变换
+        this.applyTransform()
+      } else if (this.touchStart && touches.length === 2) {
+        // 双指缩放（原有逻辑）
+        const startDist = this.getDistance(this.touchStart[0].x, this.touchStart[0].y, this.touchStart[1].x, this.touchStart[1].y)
+        const currentDist = this.getDistance(touches[0].clientX, touches[0].clientY, touches[1].clientX, touches[1].clientY)
+        // 计算缩放步长（更平滑的缩放）
+        const scaleFactor = currentDist / startDist
+        const step = (scaleFactor - 1) * ZOOM_CONFIG.TOUCH_STEP_FACTOR // 调整缩放灵敏度
+        this.zoom(step)
+        // 更新触摸起点
+        this.touchStart = touches.map(touch => ({
+          x: touch.clientX,
+          y: touch.clientY
+        }))
+      }
+    },
+    handleTouchEnd () {
+      this.touchStart = null
+      this.isDragging = false
+    },
+    // 鼠标按下（开始拖动）
+    handleMouseDown (event) {
+      event.preventDefault()
+      this.isDragging = true
+      // 记录初始鼠标位置
+      this.lastX = event.clientX
+      this.lastY = event.clientY
+      // 鼠标样式变为抓手
+      this.canvas.style.cursor = 'grabbing'
+    },
+    // 鼠标移动（拖动中）
+    handleMouseMove (event) {
+      if (!this.isDragging) return
+      event.preventDefault()
+      // 计算移动距离（考虑缩放影响）
+      const currentX = event.clientX
+      const currentY = event.clientY
+      const moveX = (currentX - this.lastX) / this.scale
+      const moveY = (currentY - this.lastY) / this.scale
+      // 更新偏移量
+      this.offsetX += moveX
+      this.offsetY += moveY
+      // 更新上一次位置
+      this.lastX = currentX
+      this.lastY = currentY
+      // 应用变换
+      this.applyTransform()
+    },
+    // 鼠标松开（结束拖动）
+    handleMouseUp () {
+      this.isDragging = false
+      this.canvas.style.cursor = 'default'
+    },
+    // 鼠标滚动缩放
+    handleZoom (event) {
+      event.preventDefault()
+      const delta = event.deltaY
+      const step = delta > 0 ? -1 : 1
+      this.zoom(step)
+    },
+    zoomIn () {
+      if (this.scale < 2) {
+        this.zoom(ZOOM_CONFIG.STEP * 100) // 每次放大8%
+      }
+    },
+    zoomOut () {
+      if (this.scale > 0.02) {
+        this.zoom(-ZOOM_CONFIG.STEP * 100) // 每次缩小8%
+      }
+    },
+    resetZoomAndDrag () {
+      this.scale = 1
+      this.zoomPercentage = 100
+      this.offsetX = 0
+      this.offsetY = 0
+      this.isDragging = false
+      this.applyTransform()
+      this.redrawCanvas()
+    },
+    updateCarPosition(newVal) {
+      if (!this.mapData || typeof newVal?.x !== 'number' || typeof newVal?.y !== 'number' || this.isCarLocked) {
+        return
+      }
+      const coor = this.convertCmToPx(newVal.x, newVal.y)
+      let angle = newVal.angle * -1 * 57.295779513 // 页面Y轴向下，现实Y轴向上，方向相反，所以乘以 -1，范围[-π,π]，需要转化为角度
+      angle = Math.abs(angle) === 0 ? 0 : angle
+      this.pxCarPosition = {px_x: coor.x, px_y: coor.y, px_angle: angle}
+      const pointImgGrop = this.$refs.pointImgGrop
+      pointImgGrop.setAttribute('transform',
+        `translate(${this.pxCarPosition.px_x}, ${this.pxCarPosition.px_y})
+        rotate(${this.pxCarPosition.px_angle} 0 0)`
+      )
+    },
+    initWebSocket () {
+      this.closeWebSocket()
+      this.loading = this.$loading({
+        lock: true,
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.6)'
+      })
+      const protocol = this.serverUrl.startsWith('https') ? 'wss' : 'ws'
+      const wsHost = this.serverUrl.replace(/^https?:\/\//, '')
+      this.websocket = new WebSocket(`${protocol}://${wsHost}/webSocket/PointCloudData/${this.userRole}`)
+      this.websocket.onopen = () => {}
+      this.websocket.onmessage = (event) => {
+        try {
+          const pointData = JSON.parse(event.data)
+          pointData.currentData.forEach(point => {
+            const pt = this.pointCmToPx(point.x, point.y)
+            this.$set(point, 'px_x', pt.x)
+            this.$set(point, 'px_y', pt.y)
+          })
+          this.greenPoints = pointData.currentData
+          this.loading.close()
+        } catch (error) {
+          console.error('WebSocket消息解析失败:', error)
+        }
+      }
+      this.websocket.onerror = (error) => {
+        this.$message.error(this.$t('WebSocketerror') + ':', error)
+      }
+      this.websocket.onclose = () => {
+        this.loading.close()
+      }
+    },
+    closeWebSocket () {
+      if (this.websocket) {
+        this.websocket.close(1000, '正常关闭')
+        this.websocket = null
+      }
+    },
+    // 重点位
+    handleRelocate () {
+      // const res = [{x: 3, y: 0, color: 'red'}, {x: 0, y: 3, color: 'orange'}, {x: -3, y: 0, color: 'green'}, {x: 0, y: -3, color: 'blue'}]
+      // res.forEach(point => {
+      //   const pt = this.pointCmToPx(point.x, point.y)
+      //   this.$set(point, 'px_x', pt.x)
+      //   this.$set(point, 'px_y', pt.y)
+      // })
+      // this.greenPoints = res
+      this.initWebSocket()
+      this.isCarLocked = true
+    },
+    startCarDrag (e) {
+      if (!this.isCarLocked) return
+      this.isDraggingCar = true
+      this.carLastX = e.clientX || e.touches[0].clientX
+      this.carLastY = e.clientY || e.touches[0].clientY
+      const options = { passive: false }
+      document.addEventListener('mousemove', this.onCarDragMove, options)
+      document.addEventListener('mouseup', this.endCarDrag, options)
+      document.addEventListener('touchmove', this.onCarDragMove, options)
+      document.addEventListener('touchend', this.endCarDrag, options)
+      e.stopPropagation()
+    },
+    onCarDragMove: throttle(function (e) {
+      if (!this.isDraggingCar) return
+      const currentX = e.clientX || e.touches[0].clientX
+      const currentY = e.clientY || e.touches[0].clientY
+      const moveX = (currentX - this.carLastX) / this.scale
+      const moveY = (currentY - this.carLastY) / this.scale
+      this.carOffsetX += moveX
+      this.carOffsetY += moveY
+      this.carLastX = currentX
+      this.carLastY = currentY
+      const pointImgGrop = this.$refs.pointImgGrop
+      pointImgGrop.setAttribute('transform',
+        `translate(${this.pxCarPosition.px_x}, ${this.pxCarPosition.px_y})
+        translate(${this.carOffsetX}, ${this.carOffsetY})
+        rotate(${this.pxCarPosition.px_angle} 0 0)`
+      )
+    }, 16),
+    endCarDrag () {
+      if (this.isDraggingCar) {
+        this.isDraggingCar = false
+        this.removeCarDragEventListeners()
+      }
+      if (this.isDraggingPoints) {
+        this.endPointsDrag()
+      }
+    },
+    removeCarDragEventListeners() {
+      const options = { passive: false }
+      document.removeEventListener('mousemove', this.onCarDragMove, options)
+      document.removeEventListener('mouseup', this.endCarDrag, options)
+      document.removeEventListener('touchmove', this.onCarDragMove, options)
+      document.removeEventListener('touchend', this.endCarDrag, options)
+    },
+    handlePointsDragStart (e) {
+      if (!this.isCarLocked) return
+      this.isDraggingPoints = true
+      const clientX = e.clientX || e.touches[0].clientX
+      const clientY = e.clientY || e.touches[0].clientY
+      const carImage = this.$refs.carImage
+      const carRect = carImage.getBoundingClientRect()
+      this.carCenterX = carRect.left + carRect.width / 2
+      this.carCenterY = carRect.top + carRect.height / 2
+      const options = { passive: false }
+      document.addEventListener('mousemove', this.onPointsDragMove, options)
+      document.addEventListener('mouseup', this.endPointsDrag, options)
+      document.addEventListener('touchmove', this.onPointsDragMove, options)
+      document.addEventListener('touchend', this.endPointsDrag, options)
+      e.stopPropagation()
+    },
+    onPointsDragMove: throttle(function (e) {
+      if (!this.isDraggingPoints) return
+      const clientX = e.clientX || e.touches[0].clientX
+      const clientY = e.clientY || e.touches[0].clientY
+      // 计算当前鼠标相对于小车中心的角度（弧度）
+      const currentAngleRad = Math.atan2(clientY - this.carCenterY, clientX - this.carCenterX)
+      this.pxCarPosition.px_angle = currentAngleRad * 57.295779513
+      const pointImgGrop = this.$refs.pointImgGrop
+      pointImgGrop.setAttribute('transform', 
+        `translate(${this.pxCarPosition.px_x}, ${this.pxCarPosition.px_y})
+        translate(${this.carOffsetX}, ${this.carOffsetY})
+        rotate(${this.pxCarPosition.px_angle} 0 0)`
+      )
+    }, 16),
+    endPointsDrag () {
+      if (this.isDraggingPoints) {
+        this.isDraggingPoints = false
+        this.removePointsDragEventListeners()
+      }
+    },
+    removePointsDragEventListeners() {
+      const options = { passive: false }
+      document.removeEventListener('mousemove', this.onPointsDragMove, options)
+      document.removeEventListener('mouseup', this.endPointsDrag, options)
+      document.removeEventListener('touchmove', this.onPointsDragMove, options)
+      document.removeEventListener('touchend', this.endPointsDrag, options)
+    },
+    cancelLocked () {
+      this.closeWebSocket()
+      this.isCarLocked = false
+      this.carOffsetX = 0
+      this.carOffsetY = 0
+      this.greenPoints = []
+      this.carLastX = 0
+      this.carLastY = 0
+      this.carCenterX = 0
+      this.carCenterY = 0
+    },
+    confirmLocked () {
+      const carImage = this.$refs.carImage
+      const carRect = carImage.getBoundingClientRect()
+      const clientX = carRect.left + carRect.width / 2
+      const clientY = carRect.top + carRect.height / 2
+      const rect = this.canvas.getBoundingClientRect()
+      const mouseX = (clientX - rect.left) / this.scale - this.originX
+      const mouseY = (clientY - rect.top) / this.scale - this.originY
+      const carCoor = this.converPxToCm(mouseX, mouseY)
+      let angleInRadians = this.pxCarPosition.px_angle * Math.PI / 180
+      // 规范化到[-π, π]范围
+      angleInRadians = ((angleInRadians + Math.PI) % (2 * Math.PI) - Math.PI)
+      angleInRadians = angleInRadians * -1
+      console.log(carCoor)
+      console.log(angleInRadians)
+      this._relocate(carCoor.x, carCoor.y, angleInRadians)
+      this.cancelLocked()
+    },
+    async _relocate (x, y, angle) {
+      try {
+        this.loading = this.$loading({
+          lock: true,
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.6)'
+        })
+        let res = await relocate(x, y, angle)
+        if (res) {
+          this.$message(res.message)
+        }
+        this.loading.close()
+      } catch (e) {
+        this.$message.error(e)
+        this.loading.close()
+      }
+    }
+  },
+  beforeDestroy () {
+    this.closeWebSocket()
+    this.removeCarDragEventListeners()
+    this.removePointsDragEventListeners() // 清理点组拖拽监听
+    Object.values(this.cachedImages).forEach(img => {
+      if (img && img.src) {
+        img.src = ''
+      }
+    })
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.canvas-container
+  position relative
+  height 100%
+  background-color rgba(4, 33, 58, 70%)
+  box-shadow inset 1px 1px 7px 2px #4d9bcd
+  overflow hidden
+.mapCanvas, .mapSvg
+  position absolute
+  top 0
+  left 0
+  width 100%
+  height 100%
+  z-index 9
+.mapSvg
+  pointer-events none
+  z-index 10
+  #pointImgGrop
+    pointer-events bounding-box
+    cursor: grab
+.re-popup
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  background: rgba(0,0,0,0.7);
+  border: 1px solid rgba(255,255,255,0.3);
+  border-radius: 8px;
+  padding: 10px;
+  box-shadow: 0 0px 4px 2px rgba(255,255,255,0.1);
+  z-index: 100
+  p
+    font-size: 0.18rem;
+    line-height: 0.32rem;
+    color: #fff;
+</style>

src/pages/modules/map/index.vue

@@ -22,8 +22,6 @@
         <g 
           ref="pointImgGrop"
           id="pointImgGrop"
-          @mousedown="handlePointsDragStart"
-          @touchstart="handlePointsDragStart"
         >
           <g ref="pointGrop">
             <circle
@@ -35,14 +33,25 @@
               fill="green"
             />
           </g>
+          <image
+            v-if="isCarLocked"
+            :href="require('@/images/new/agv_out.png')"
+            alt="小车"
+            width="80"
+            height="80"
+            x="-40"
+            y="-40"
+            @mousedown="handlePointsDragStart"
+            @touchstart="handlePointsDragStart"
+          />
           <image
             ref="carImage"
             :href="require('@/images/new/agv.png')"
             alt="小车"
             width="30"
             height="30"
-            :x="-15"
+            x="-15"
-            :y="-15"
+            y="-15"
             @mousedown="startCarDrag"
             @touchstart="startCarDrag"
           />
@@ -68,7 +77,7 @@
       :getStationName="getStationNameById"
     />
     <div v-show="isCarLocked" class="re-popup">
-      <p>是否确定重定位？</p>
+      <p>{{ $t('yousurereposition') }}</p>
       <el-row style="margin-top: .2rem">
         <el-button type="danger" @click="cancelLocked"><p>{{$t('Cancel')}}</p></el-button>
         <el-button type="primary" @click="confirmLocked"><p>{{$t('Confirm')}}</p></el-button>
@@ -181,6 +190,7 @@ export default {
           this._queryMapAllStation()
         ])
         await Promise.all([
+        // this.preloadImage('map', `${mapData.mapImageAddress}`),
           this.preloadImage('map', `${this.serverUrl}${mapData.mapImageAddress}`),
           this.preloadImage('marker', markerImage)
         ])
@@ -386,13 +396,13 @@ export default {
           this.ctx.drawImage(this.cachedImages.marker, point.px_x - MARKER_SIZE / 2, point.px_y - MARKER_SIZE / 2, MARKER_SIZE, MARKER_SIZE)
         }
         // 绘制点位名称（文字大小随缩放变化）
-        if (point.station_type !== 'Station') {
+        if (point.station_type === 'Station') {
           this.ctx.font = '12px Arial'
           this.ctx.fillStyle = '#62fa0a'
           this.ctx.textAlign = 'center'
           this.ctx.fillText(point.station_name, point.px_x, point.px_y + 22)
-          this.ctx.fillText(point.x, point.px_x, point.px_y + 34)
+          // this.ctx.fillText(point.x, point.px_x, point.px_y + 34)
-          this.ctx.fillText(point.y, point.px_x, point.px_y + 50)
+          // this.ctx.fillText(point.y, point.px_x, point.px_y + 50)
         }
       })
     },