map重定位

2025-10-17 14:19:52 +08:00
parent e6cfb7f693
commit 58a1b5db7b
12 changed files with 1120 additions and 39 deletions
--- a/src/config/mork.js
+++ b/src/config/mork.js
@@ -204,3 +204,24 @@ export const getReturnStation = () => {
  let res = {station_id: 'B3333',station_code:"111",station_name:"1111"}
  return res
 }
+export const sendAutoBack = (sn, code) => {
+  let res = {
+    code: 200,
+    message: 'ok'
+  }
+  return res
+}
+export const oneClickDeployment = (sn, code) => {
+  let res = {
+    code: 200,
+    message: 'ok'
+  }
+  return res
+}
+export const abandonMapping = (sn, code) => {
+  let res = {
+    code: 200,
+    message: 'ok'
+  }
+  return res
+}
--- a/src/i18n/langs/en.js
+++ b/src/i18n/langs/en.js
@@ -120,5 +120,7 @@ module.exports = {
  Dispatchnotconnected: 'Dispatch is not connected',
  Vehiclenotconnected: 'Vehicle body is not connected',
  Dispatchvehiclenotconnected: 'Dispatch and the vehicle body are not connected.',
-  Vehiclereturnpoint: 'Vehicle return point'
+  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.'
 }
--- a/src/i18n/langs/zh.js
+++ b/src/i18n/langs/zh.js
@@ -120,5 +120,7 @@ module.exports = {
  Dispatchnotconnected: '调度未连接',
  Vehiclenotconnected: '车辆本体未连接',
  Dispatchvehiclenotconnected: '调度和车辆本体未连接',
-  Vehiclereturnpoint: '车辆返回点'
+  Vehiclereturnpoint: '车辆返回点',
+  autobackfailedmanually:'自动回退失败，请手动接管。',
+  vehicleautobacknotmanwaitcompleted: '车子正在自动回退中，请勿手动移动车辆，等待车辆自动回退完成。'
 }
--- a/src/pages/modules/building.vue
+++ b/src/pages/modules/building.vue
@@ -4,13 +4,14 @@
      <gl-map ref="glMap"/>
    </div>
    <el-row type="flex" justify="space-between">
-      <el-col :span="16">
+      <el-col :span="15">
        <el-row type="flex">
          <button id="v-step-2" class="button_control" :disabled="disabled" @click="addPoint"><p>{{$t('MarkPoint')}}</p></button>
          <button class="button_control" style="margin-left: 10px" :disabled="disabled" @click="closeCloud"><p>{{cloudOff ? $t('EnablePointCloud') : $t('DisablePointCloud')}}</p></button>
          <div class="car-info">{{$t('CartPosition')}}: <span>{{ carPosition.x }}, {{carPosition.y}}</span></div>
        </el-row>
      </el-col>
+      <el-col :span="1" style="color: #fff;">{{ autoBackEnable }}, {{autoBackFinish}}</el-col>
      <el-col :span="8">
        <el-row type="flex" justify="end">
          <button class="button_control" @click="$router.push('/index/home')"><p>{{$t('AbandonMapbuild')}}</p></button>
@@ -52,6 +53,12 @@
        ></el-progress>
      </div>
    </div>
+    <div v-if="tipShow" class="progress-mask">
+      <div class="progress-container">
+        <div class="progress_tip">{{autoBackFinish === '2' ? $t('autobackfailedmanually') : $t('vehicleautobacknotmanwaitcompleted')}}</div>
+        <button v-if="autoBackFinish === '2'" class="button_control" style="margin-top: 25px;" @click="failHandle"><p>{{$t('Confirm')}}</p></button>
+      </div>
+    </div>
  </div>
 </template>

@@ -59,7 +66,6 @@
 import GlMap from './gl-map.vue'
 import { driver } from 'driver.js'
 import 'driver.js/dist/driver.css'
-// import { startMapping } from '../../config/mork.js'
 import { startMapping, stopMapping, getMappingStatus, setStation, oneClickDeployment, abandonMapping, sendAutoBack } from '../../config/getData.js'
 import { mapGetters } from 'vuex'
 export default {
@@ -138,37 +144,37 @@ export default {
      warnTip: false,
      percentage: 0,
      intervalId: null, // 用于存储定时器ID
-      backActive: false // 打点完成后新增一个弹框 提示用户是否自动开回上一个点
+      backActive: false, // 打点完成后新增一个弹框 提示用户是否自动开回上一个点
+      tipShow: false // 正在自动回退中的提示
    }
  },
  computed: {
-    ...mapGetters(['isTop', 'carPosition', 'autoLoopEnable', 'autoBackEnable'])
+    ...mapGetters(['isTop', 'carPosition', 'autoLoopEnable', 'autoBackEnable', 'autoBackFinish'])
  },
  watch: {
-    autoBackEnable (val) {
-      if (this.backActive && val === '0') {
-        this.loading = this.$loading({
-          lock: true,
-          spinner: 'el-icon-loading',
-          background: 'rgba(0, 0, 0, 0.6)'
-        })
-      }
-      if (this.backActive && val === '1') {
-        this.loading.close()
-      }
-      if (this.backActive && val === '2') {
-        this.$confirm(this.$t('Whetherdrivebackpoint'), this.$t('Prompt'), {
-          confirmButtonText: this.$t('yes'),
-          cancelButtonText: this.$t('no'),
-          type: 'warning'
-        }).then(() => {
-          this._sendAutoBack()
-          this.backActive = false
-        }).catch(() => {
-          this.backActive = false
-        })
-      }
+    autoBackEnable: {
+      handler (val) {
+        this.backHandleChange(this.backActive, val)
+      },
+      deep: true
    },
+    backActive: {
+      handler (val) {
+        this.backHandleChange(val, this.autoBackEnable)
+      },
+      deep: true
+    },
+    autoBackFinish: {
+      handler (val) {
+        if (val === '1') {
+          this.$nextTick(() => {
+            this.$refs.glMap.init()
+          })
+          this.tipShow = false
+        }
+      },
+      deep: true
+    }
  },
  beforeDestroy () {
    document.removeEventListener('keydown', this.handleKeydown);
@@ -185,6 +191,31 @@ export default {
  },
  methods: {
    /* eslint-disable */
+    backHandleChange(active, val) {
+      if (active && val === '0') {
+        this.loading = this.$loading({
+          lock: true,
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.6)'
+        })
+      }
+      if (active && val === '1') {
+        this.loading.close()
+      }
+      if (active && val === '2') {
+        this.loading.close()
+        this.$confirm(this.$t('Whetherdrivebackpoint'), this.$t('Prompt'), {
+          confirmButtonText: this.$t('yes'),
+          cancelButtonText: this.$t('no'),
+          type: 'warning'
+        }).then(() => {
+          this._sendAutoBack()
+          this.backActive = false
+        }).catch(() => {
+          this.backActive = false
+        })
+      }
+    },
    handleKeydown(event) {
      // 仅在对话框可见时响应Enter键
      if (this.dialogVisible && event.key === 'Enter') {
@@ -473,7 +504,7 @@ export default {
        })
      }
    },
-    // 打点功能点击反馈成功后
+    // 打点功能点击返回成功后
    async _sendAutoBack () {
      try {
        this.loading = this.$loading({
@@ -483,15 +514,21 @@ export default {
        })
        let res = await sendAutoBack()
        if (res && res.code === 200) {
-          this.$message({
-            type: 'success',
-            message: res.message
+          this.$nextTick(() => {
+            this.$refs.glMap.closeWebSocket()
          })
+          this.tipShow = true
        }
        this.loading.close()
      } catch (e) {
        this.loading.close()
      }
+    },
+    failHandle () {
+      this.$nextTick(() => {
+        this.$refs.glMap.init()
+      })
+      this.tipShow = false
    }
  }
 }
--- a/src/pages/modules/gl-map.vue
+++ b/src/pages/modules/gl-map.vue
@@ -564,7 +564,6 @@ export default {
        this.socket.close(1000, '组件销毁')
        this.socket = null
      }
-      this.allPoints = []
    },
    init() {
      this.initWebSocket()
--- a/src/pages/modules/map/PathPopup.vue
+++ b/src/pages/modules/map/PathPopup.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="point-popup" @click.stop>
+    <el-row type="flex" justify="space-between" class="popup-content" style="border-bottom: 1px solid #fff;">
+      <el-col :span="10"><h3>{{ $t('PathID') }}</h3></el-col>
+      <el-col :span="14"><p>{{ path.route_id }}</p></el-col>
+    </el-row>
+    <el-row type="flex" justify="space-between" class="popup-content">
+      <el-col :span="10"><h3>{{ $t('StartCode') }}</h3></el-col>
+      <el-col :span="14"><p>{{ getStationName(path.start_id) }}</p></el-col>
+    </el-row>
+    <el-row type="flex" justify="space-between" class="popup-content">
+      <el-col :span="10"><h3>{{ $t('EndCode') }}</h3></el-col>
+      <el-col :span="14"><p>{{ getStationName(path.end_id) }}</p></el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PathPopup',
+  props: {
+    path: {
+      type: Object,
+      required: true
+    },
+    getStationName: {
+      type: Function,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.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 160px
+  // animation fadeIn 0.2s ease-out
+  transform translateX(-50%, -10px)
+  white-space nowrap
+  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: translate(-50%, -10px); }
+  to { opacity: 1; transform: translateY(-50%, 0); }
+}
+.enClass
+  .point-popup
+    min-width 240px
+</style>
--- a/src/pages/modules/map/PointPopup.vue
+++ b/src/pages/modules/map/PointPopup.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="point-popup" @click.stop>
+    <el-row type="flex" justify="space-between" class="popup-content" style="border-bottom: 1px solid #fff;">
+      <el-col :span="10"><h3>{{ $t('Number') }}</h3></el-col>
+      <el-col :span="14"><p>{{ point.station_code }}</p></el-col>
+    </el-row>
+    <el-row type="flex" justify="space-between" class="popup-content">
+      <el-col :span="10"><h3>{{ $t('Alias') }}</h3></el-col>
+      <el-col :span="14"><p>{{ point.station_name }}</p></el-col>
+    </el-row>
+    <el-row type="flex" justify="space-between" class="popup-content">
+      <el-col :span="10"><h3>{{ $t('XCoordinate') }}</h3></el-col>
+      <el-col :span="14"><p>{{ point.x }}</p></el-col>
+    </el-row>
+    <el-row type="flex" justify="space-between" class="popup-content">
+      <el-col :span="10"><h3>{{ $t('YCoordinate') }}</h3></el-col>
+      <el-col :span="14"><p>{{ point.y }}</p></el-col>
+    </el-row>
+    <el-row type="flex" justify="space-between" class="popup-content">
+      <el-col :span="10"><h3>{{ $t('AngleValue') }}</h3></el-col>
+      <el-col :span="14"><p>{{ point.angle }}</p></el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PointPopup',
+  props: {
+    point: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.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 160px
+  animation fadeIn 0.2s ease-out
+  transform translate(-50%, -10px)
+  white-space nowrap
+  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: translate(-50%, -10px); }
+  to { opacity: 1; transform: translateY(-50%, 0); }
+}
+.enClass
+  .point-popup
+    min-width 240px
+</style>
--- a/src/pages/modules/map/index.vue
+++ b/src/pages/modules/map/index.vue
@@ -0,0 +1,881 @@
+<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="point.color"
+            />
+          </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', 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 res = JSON.parse(event.data)
+          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.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
+    },
+    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>
--- a/src/pages/shells/index.vue
+++ b/src/pages/shells/index.vue
@@ -109,7 +109,8 @@ export default {
      //   ],
      //   forkTipObstacles: '1',
      //   auto_loop_enable: '0',
-      //   auto_back_enable: ''
+      //   auto_back_enable: '',
+      //   auto_back_finish: ''
      // },
      taskSeq: [],
      currentStep: null,
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@ const Home = r => require.ensure([], () => r(require('../pages/modules/home.vue'
 const Device = r => require.ensure([], () => r(require('../pages/modules/device.vue')), 'Device')
 const Warning = r => require.ensure([], () => r(require('../pages/modules/warning.vue')), 'Warning')
 const Building = r => require.ensure([], () => r(require('../pages/modules/building.vue')), 'Building')
-const Map = r => require.ensure([], () => r(require('../pages/modules/map.vue')), 'Map')
+const Map = r => require.ensure([], () => r(require('../pages/modules/map/index.vue')), 'Map')
 const Relocation = r => require.ensure([], () => r(require('../pages/modules/relocation.vue')), 'Relocation')
 Vue.use(VueRouter)

--- a/src/style/common.styl
+++ b/src/style/common.styl
@@ -353,12 +353,13 @@
  padding .4rem 0 .6rem 0
 .page_container
  _wh(96%, 100%)
-  padding .09rem
+  padding .09rem 0
  margin 0 auto
 .map_tools
  position absolute
  top 0
  right 0
+  z-index 30
 .zoom_data
  width .7rem
  font-size .16rem
--- a/src/vuex/modules/data.js
+++ b/src/vuex/modules/data.js
@@ -6,7 +6,8 @@ const state = {
  errorData: [],
  backIoStatus: '0',
  autoLoopEnable: '0',
-  autoBackEnable: ''
+  autoBackEnable: '',
+  autoBackFinish: ''
 }

 const getters = {
@@ -15,7 +16,8 @@ const getters = {
  errorData: state => state.errorData,
  backIoStatus: state => state.backIoStatus,
  autoLoopEnable: state => state.autoLoopEnable,
-  autoBackEnable: state => state.autoBackEnable
+  autoBackEnable: state => state.autoBackEnable,
+  autoBackFinish: state => state.autoBackFinish
 }

 const actions = {
@@ -47,6 +49,9 @@ const mutations = {
    if (Object.prototype.hasOwnProperty.call(data, 'auto_back_enable')) {
      state.autoBackEnable = data.auto_back_enable
    }
+    if (Object.prototype.hasOwnProperty.call(data, 'auto_back_finish')) {
+      state.autoBackFinish = data.auto_back_finish
+    }
  }
 }