diff --git a/src/views/mapPage/realTimeMap/components-tool/editMapRouteDialog.vue b/src/views/mapPage/realTimeMap/components-tool/editMapRouteDialog.vue
index 164df097..0706999b 100644
--- a/src/views/mapPage/realTimeMap/components-tool/editMapRouteDialog.vue
+++ b/src/views/mapPage/realTimeMap/components-tool/editMapRouteDialog.vue
@@ -1,32 +1,52 @@
 <template>
   <!-- 新增设备 -->
-  <Dialog v-model="dialogFormVisible" title="编辑路线" width="750" class="map-edit-route-dialog">
+  <Dialog v-model="dialogFormVisible" title="编辑路线" width="780" class="map-edit-route-dialog">
     <el-form :model="form" label-width="120" ref="ruleFormRef">
-      <el-row :gutter="24">
+      <el-row :gutter="30">
         <el-col :span="12">
           <el-form-item label="开始点位x轴" prop="startPointX" required>
-            <el-input v-model="form.startPointX" placeholder="请输入开始点位x轴" type="number" />
+            <el-input
+              v-model="form.startPointX"
+              placeholder="请输入开始点位x轴"
+              type="number"
+              :min="0"
+            />
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="开始点位y轴" prop="startPointY" required>
-            <el-input v-model="form.startPointY" placeholder="请输入开始点位y轴" type="number" />
+            <el-input
+              v-model="form.startPointY"
+              placeholder="请输入开始点位y轴"
+              type="number"
+              :min="0"
+            />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="24">
+      <el-row :gutter="30">
         <el-col :span="12">
           <el-form-item label="结束点位x轴" prop="endPointX" required>
-            <el-input v-model="form.endPointX" placeholder="请输入结束点位x轴" type="number" />
+            <el-input
+              v-model="form.endPointX"
+              placeholder="请输入结束点位x轴"
+              type="number"
+              :min="0"
+            />
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="结束点位y轴" prop="endPointY" required>
-            <el-input v-model="form.endPointY" placeholder="请输入结束点位y轴" type="number" />
+            <el-input
+              v-model="form.endPointY"
+              placeholder="请输入结束点位y轴"
+              type="number"
+              :min="0"
+            />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="24">
+      <el-row :gutter="30">
         <el-col :span="12">
           <el-form-item label="开始控制点x轴" prop="beginControlX" required>
             <el-input v-model="form.beginControlX" type="number" :disabled="true" />
@@ -38,7 +58,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="24">
+      <el-row :gutter="30">
         <el-col :span="12">
           <el-form-item label="结束控制点x轴" prop="endControlX" required>
             <el-input v-model="form.endControlX" type="number" :disabled="true" />
@@ -50,7 +70,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="24">
+      <el-row :gutter="30">
         <el-col :span="12">
           <el-form-item label="行走方法" prop="method" required>
             <el-select v-model="form.method" placeholder="请选择行走方法" @change="methodChange">
@@ -68,81 +88,69 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="24">
+      <el-row :gutter="30">
         <el-col :span="12">
           <el-form-item label="膨胀区域前" prop="expansionZoneFront" required>
-            <div>
-              <el-input-number
-                v-model="form.expansionZoneFront"
-                placeholder="请输入膨胀区域前"
-                :precision="2"
-                class="!w-170px"
-              />
-              <span class="ml-3">米</span>
-            </div>
+            <el-input v-model="form.expansionZoneFront" type="number">
+              <template #append>米</template>
+            </el-input>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="膨胀区域后" prop="expansionZoneAfter" required>
-            <div>
-              <el-input-number
-                v-model="form.expansionZoneAfter"
-                placeholder="请输入膨胀区域后"
-                :precision="2"
-                class="!w-170px"
-              />
-              <span class="ml-3">米</span>
-            </div>
+            <el-input v-model="form.expansionZoneAfter" type="number">
+              <template #append>米</template>
+            </el-input>
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="24">
+      <el-row :gutter="30">
         <el-col :span="12">
           <el-form-item label="膨胀区域左" prop="expansionZoneLeft" required>
-            <div>
-              <el-input-number
-                v-model="form.expansionZoneLeft"
-                placeholder="请输入膨胀区域左"
-                :precision="2"
-                class="!w-170px"
-              />
-              <span class="ml-3">米</span>
-            </div>
+            <el-input v-model="form.expansionZoneLeft" type="number">
+              <template #append>米</template>
+            </el-input>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="膨胀区域右" prop="expansionZoneRight" required>
-            <div>
-              <el-input-number
-                v-model="form.expansionZoneRight"
-                placeholder="请输入膨胀区域右"
-                :precision="2"
-                class="!w-170px"
-              />
-              <span class="ml-3">米</span>
-            </div>
+            <el-input v-model="form.expansionZoneRight" type="number">
+              <template #append>米</template>
+            </el-input>
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="24">
+      <el-row :gutter="30">
         <el-col :span="12">
           <el-form-item label="正向限速" prop="forwardSpeedLimit" required>
-            <el-input
-              v-model="form.forwardSpeedLimit"
-              type="number"
-              placeholder="请输入正向限速"
-            /> </el-form-item
-        ></el-col>
+            <div class="flex-center">
+              <el-slider v-model="form.forwardSpeedLimit" :min="0.1" :max="10" :step="0.1" />
+              <el-input
+                v-model="form.forwardSpeedLimit"
+                style="width: 200px; margin-left: 6px"
+                type="number"
+              >
+                <template #append>m/s</template>
+              </el-input>
+            </div>
+          </el-form-item>
+        </el-col>
         <el-col :span="12">
           <el-form-item label="反向限速" prop="reverseSpeedLimit" required>
-            <el-input
-              v-model="form.reverseSpeedLimit"
-              type="number"
-              placeholder="请输入反向限速"
-            /> </el-form-item
-        ></el-col>
+            <div class="flex-center">
+              <el-slider v-model="form.reverseSpeedLimit" :min="0.1" :max="10" :step="0.1" />
+              <el-input
+                v-model="form.reverseSpeedLimit"
+                style="width: 200px; margin-left: 6px"
+                type="number"
+              >
+                <template #append>m/s</template>
+              </el-input>
+            </div>
+          </el-form-item></el-col
+        >
       </el-row>
-      <el-row :gutter="24">
+      <el-row :gutter="30">
         <el-col :span="12">
           <el-form-item label="车头朝向" prop="toward" required>
             <el-select v-model="form.toward" placeholder="请选择车头朝向">
@@ -286,4 +294,15 @@ defineExpose({ open }) // 提供 open 方法，用于打开弹窗
     border-top: none !important;
   }
 }
+
+.el-input-group__append,
+.el-input-group__prepend {
+  padding: 0 8px;
+}
+
+.flex-center {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
 </style>
diff --git a/src/views/mapPage/realTimeMap/components-tool/editNodeProperties.vue b/src/views/mapPage/realTimeMap/components-tool/editNodeProperties.vue
index 16d96d21..d0b0ec89 100644
--- a/src/views/mapPage/realTimeMap/components-tool/editNodeProperties.vue
+++ b/src/views/mapPage/realTimeMap/components-tool/editNodeProperties.vue
@@ -1,11 +1,21 @@
 <template>
   <Dialog v-model="dialogFormVisible" title="节点属性" width="540" class="node-form-dialog">
     <el-form :model="form" label-width="auto" ref="ruleFormRef">
-      <el-form-item label="X" prop="locationX" required>
-        <el-input type="number" v-model="form.locationX" placeholder="请输入" />
+      <el-form-item
+        label="X"
+        prop="locationX"
+        required
+        :rules="{ required: true, message: '请输入x轴坐标', trigger: 'change' }"
+      >
+        <el-input type="number" v-model="form.locationX" placeholder="请输入" :min="0" />
       </el-form-item>
-      <el-form-item label="Y" prop="locationY" required>
-        <el-input type="number" v-model="form.locationY" placeholder="请输入" />
+      <el-form-item
+        label="Y"
+        prop="locationY"
+        required
+        :rules="{ required: true, message: '请输入y轴坐标', trigger: 'change' }"
+      >
+        <el-input type="number" v-model="form.locationY" placeholder="请输入" :min="0" />
       </el-form-item>
       <el-form-item label="类型" prop="type" required>
         <el-select v-model="form.type" placeholder="请选择类型" @change="typeChange">
diff --git a/src/views/mapPage/realTimeMap/components-tool/map-scale-tool.vue b/src/views/mapPage/realTimeMap/components-tool/map-scale-tool.vue
index e76b9242..fbc02b3f 100644
--- a/src/views/mapPage/realTimeMap/components-tool/map-scale-tool.vue
+++ b/src/views/mapPage/realTimeMap/components-tool/map-scale-tool.vue
@@ -1,9 +1,8 @@
 <!-- 刻度尺 -->
 <template>
-  <div :style="wrapperStyle" class="vue-ruler-wrapper" onselectstart="return false;" ref="el">
+  <div class="vue-ruler-wrapper" onselectstart="return false;">
     <section>
       <div
-        ref="horizontalRuler"
         class="vue-ruler-h"
         @mousedown.stop="horizontalDragRuler"
         :style="{ width: width + 'px' }"
@@ -17,7 +16,6 @@
         >
       </div>
       <div
-        ref="verticalRuler"
         class="vue-ruler-v"
         @mousedown.stop="verticalDragRuler"
         :style="{ height: height + 'px' }"
@@ -30,21 +28,10 @@
           >{{ item.id }}</span
         >
       </div>
-      <div :style="{ top: verticalDottedTop + 'px' }" class="vue-ruler-ref-dot-h"></div>
-      <div :style="{ left: horizontalDottedLeft + 'px' }" class="vue-ruler-ref-dot-v"></div>
-      <div
-        v-for="item in lineList"
-        :title="item.title"
-        :style="getLineStyle(item)"
-        :key="item.id"
-        :class="`vue-ruler-ref-line-${item.type}`"
-        @mousedown="handleDragLine(item)"
-      ></div>
     </section>
-    <div ref="content" class="vue-ruler-content" :style="contentStyle">
+    <div class="vue-ruler-content">
       <slot></slot>
     </div>
-    <div v-show="isDrag" class="vue-ruler-content-mask"></div>
   </div>
 </template>
 <script setup>
@@ -53,40 +40,6 @@ import { computed, defineComponent, onBeforeUnmount, onMounted, ref } from 'vue'
 defineOptions({ name: 'V3RulerComponent' })
 
 const props = defineProps({
-  position: {
-    type: String,
-    default: 'relative',
-    validator: (val) => {
-      return ['absolute', 'fixed', 'relative', 'static', 'inherit'].indexOf(val) !== -1
-    }
-  },
-  // 规定元素的定位类型
-  isHotKey: {
-    type: Boolean,
-    default: true
-  },
-  // 热键开关
-  isScaleRevise: {
-    type: Boolean,
-    default: false
-  },
-  // 刻度修正(根据content进行刻度重置)
-  value: {
-    type: Array,
-    default: () => {
-      return [
-        { type: 'h', site: 50 },
-        { type: 'v', site: 180 }
-      ]
-    }
-  },
-  // 预置参考线
-  contentLayout: {
-    type: Object,
-    default: () => {
-      return { top: 0, left: 0 }
-    }
-  },
   //步长
   stepLength: {
     type: Number,
@@ -101,123 +54,11 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['input', 'update:visible'])
-
-/**
- * @description 绑定事件 on(element, event, handler)
- */
-const on = (function () {
-  return function (element, event, handler) {
-    if (element && event && handler) {
-      element.addEventListener(event, handler, false)
-    }
-  }
-})()
-
-/**
- * @description 解绑事件 off(element, event, handler)
- */
-const off = (function () {
-  return function (element, event, handler) {
-    if (element && event) {
-      element.removeEventListener(event, handler, false)
-    }
-  }
-})()
-const size = 17
 let left_top = 18 // 内容左上填充
-let windowWidth = ref(0) // 窗口宽度
-let windowHeight = ref(0) // 窗口高度
+
 let xScale = ref([{ id: 0 }]) // 水平刻度
 let yScale = ref([{ id: 0 }]) // 垂直刻度
-let topSpacing = 0 // 标尺与窗口上间距
-let leftSpacing = 0 //  标尺与窗口左间距
-let isDrag = ref(false)
-let dragFlag = '' // 拖动开始标记，可能值x(从水平标尺开始拖动);y(从垂直标尺开始拖动)
-let horizontalDottedLeft = ref(-999) // 水平虚线位置
-let verticalDottedTop = ref(-999) // 垂直虚线位置
-let rulerWidth = 0 // 垂直标尺的宽度
-let rulerHeight = 0 // 水平标尺的高度
-let dragLineId = '' // 被移动线的ID
-//ref
-const content = ref(null)
-const el = ref(null)
-const verticalRuler = ref(null)
-const horizontalRuler = ref(null)
-const wrapperStyle = computed(() => {
-  return {
-    width: windowWidth.value + 'px',
-    height: windowHeight.value + 'px',
-    position: props.position
-  }
-})
-const contentStyle = computed(() => {
-  return {
-    left: props.contentLayout.left + 'px',
-    top: props.contentLayout.top + 'px',
-    padding: left_top + 'px 0px 0px ' + left_top + 'px'
-  }
-})
-const lineList = computed(() => {
-  let hCount = 0
-  let vCount = 0
-  return props.value.map((item) => {
-    const isH = item.type === 'h'
-    return {
-      id: `${item.type}_${isH ? hCount++ : vCount++}`,
-      type: item.type,
-      title: item.site.toFixed(2) + 'px',
-      [isH ? 'top' : 'left']: item.site / (props.stepLength / 50) + size
-    }
-  })
-})
-onMounted(() => {
-  on(document, 'mousemove', dottedLineMove)
-  on(document, 'mouseup', dottedLineUp)
-  init()
-  on(window, 'resize', windowResize)
-})
-onBeforeUnmount(() => {
-  off(document, 'mousemove', dottedLineMove)
-  off(document, 'mouseup', dottedLineUp)
-  off(window, 'resize', windowResize)
-})
-const init = () => {
-  box()
-  scaleCalc()
-}
-const windowResize = () => {
-  xScale.value = [{ id: 0 }]
-  yScale.value = [{ id: 0 }]
-  init()
-}
-const getLineStyle = ({ type, top, left }) => {
-  return type === 'h' ? { top: top + 'px' } : { left: left + 'px' }
-}
-const handleDragLine = ({ type, id }) => {
-  return type === 'h' ? dragHorizontalLine(id) : dragVerticalLine(id)
-}
-//获取窗口宽与高
-const box = () => {
-  setSpacing()
-  if (props.isScaleRevise) {
-    // 根据内容部分进行刻度修正
-    const contentLeft = content.value.offsetLeft
-    const contentTop = content.value.offsetTop
-    getCalcRevise(xScale.value, contentLeft)
-    getCalcRevise(yScale.value, contentTop)
-  }
-  // windowWidth.value = document.documentElement.clientWidth - leftSpacing
-  // windowHeight.value = document.documentElement.clientHeight - topSpacing - 80
-  windowWidth.value = props.width + 18
-  windowHeight.value = props.height + 18
-  rulerWidth = verticalRuler.value.clientWidth
-  rulerHeight = horizontalRuler.value.clientHeight
-}
-const setSpacing = () => {
-  topSpacing = horizontalRuler.value.getBoundingClientRect().y //.offsetParent.offsetTop
-  leftSpacing = verticalRuler.value.getBoundingClientRect().x // .offsetParent.offsetLeft
-}
+
 // 计算刻度
 const scaleCalc = () => {
   getCalc(xScale.value, props.width)
@@ -232,127 +73,10 @@ const getCalc = (array, length) => {
     }
   }
 }
-// 获取矫正刻度方法
-const getCalcRevise = (array, length) => {
-  for (let i = 0; i < length; i += 1) {
-    if (i % props.stepLength === 0 && i + props.stepLength <= length) {
-      array.push({ id: i })
-    }
-  }
-}
-//生成一个参考线
-const newLine = (val) => {
-  isDrag.value = true
-  dragFlag = val
-}
-//虚线移动
-const dottedLineMove = ($event) => {
-  setSpacing()
-  switch (dragFlag) {
-    case 'x':
-      if (isDrag.value) {
-        verticalDottedTop.value = $event.pageY - topSpacing
-      }
-      break
-    case 'y':
-      if (isDrag.value) {
-        horizontalDottedLeft.value = $event.pageX - leftSpacing
-      }
-      break
-    case 'h':
-      if (isDrag.value) {
-        verticalDottedTop.value = $event.pageY - topSpacing
-      }
-      break
-    case 'v':
-      if (isDrag.value) {
-        horizontalDottedLeft.value = $event.pageX - leftSpacing
-      }
-      break
-    default:
-      break
-  }
-}
-//虚线松开
-const dottedLineUp = ($event) => {
-  setSpacing()
-  if (isDrag.value) {
-    isDrag.value = false
-    const cloneList = JSON.parse(JSON.stringify(props.value))
-    switch (dragFlag) {
-      case 'x':
-        cloneList.push({
-          type: 'h',
-          site: ($event.pageY - topSpacing - size) * (props.stepLength / 50)
-        })
-        emit('input', cloneList)
-        break
-      case 'y':
-        cloneList.push({
-          type: 'v',
-          site: ($event.pageX - leftSpacing - size) * (props.stepLength / 50)
-        })
-        emit('input', cloneList)
-        break
-      case 'h':
-        dragCalc(cloneList, $event.pageY, topSpacing, rulerHeight, 'h')
-        emit('input', cloneList)
-        break
-      case 'v':
-        dragCalc(cloneList, $event.pageX, leftSpacing, rulerWidth, 'v')
-        emit('input', cloneList)
-        break
-      default:
-        break
-    }
-    verticalDottedTop.value = horizontalDottedLeft.value = 0
-  }
-}
-const dragCalc = (list, page, spacing, ruler, type) => {
-  if (page - spacing < ruler) {
-    let Index
-    lineList.value.forEach((item, index) => {
-      if (item.id === dragLineId) {
-        Index = index
-      }
-    })
-    list.splice(Index, 1, {
-      type: type,
-      site: -600
-    })
-  } else {
-    let Index
-    lineList.value.forEach((item, index) => {
-      if (item.id === dragLineId) {
-        Index = index
-      }
-    })
-    list.splice(Index, 1, {
-      type: type,
-      site: (page - spacing - size) * (props.stepLength / 50)
-    })
-  }
-}
-//水平标尺按下鼠标
-const horizontalDragRuler = () => {
-  newLine('x')
-}
-//垂直标尺按下鼠标
-const verticalDragRuler = () => {
-  newLine('y')
-}
-// 水平线处按下鼠标
-const dragHorizontalLine = (id) => {
-  isDrag.value = true
-  dragFlag = 'h'
-  dragLineId = id
-}
-// 垂直线处按下鼠标
-const dragVerticalLine = (id) => {
-  isDrag.value = true
-  dragFlag = 'v'
-  dragLineId = id
-}
+
+onMounted(() => {
+  scaleCalc()
+})
 </script>
 <style lang="scss">
 .vue-ruler-wrapper {
@@ -363,11 +87,7 @@ const dragVerticalLine = (id) => {
 }
 
 .vue-ruler-h,
-.vue-ruler-v,
-.vue-ruler-ref-line-v,
-.vue-ruler-ref-line-h,
-.vue-ruler-ref-dot-h,
-.vue-ruler-ref-dot-v {
+.vue-ruler-v {
   position: absolute;
   left: 0;
   top: 0;
@@ -412,69 +132,10 @@ const dragVerticalLine = (id) => {
   word-wrap: break-word;
 }
 
-.vue-ruler-ref-line-v,
-.vue-ruler-ref-line-h,
-.vue-ruler-ref-dot-h,
-.vue-ruler-ref-dot-v {
-  z-index: 998;
-}
-
-.vue-ruler-ref-line-h {
-  width: 100%;
-  height: 3px;
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAABCAMAAADU3h9xAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFSv//AAAAH8VRuAAAAA5JREFUeNpiYIACgAADAAAJAAE0lmO3AAAAAElFTkSuQmCC)
-    repeat-x left center;
-  /*./image/line_h.png*/
-  cursor: n-resize;
-  /*url(./image/cur_move_h.cur), move*/
-}
-
-.vue-ruler-ref-line-v {
-  width: 3px;
-  height: 100%;
-  _height: 9999px;
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAMAAAAPxGVzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFSv//AAAAH8VRuAAAAA5JREFUeNpiYEAFAAEGAAAQAAGePof9AAAAAElFTkSuQmCC)
-    repeat-y center top;
-  /*./image/line_v.png*/
-  cursor: w-resize;
-  /*url(./image/cur_move_v.cur), move*/
-}
-
-.vue-ruler-ref-dot-h {
-  width: 100%;
-  height: 3px;
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAMAAABFaP0WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFf39/////F3PnHQAAAAJ0Uk5T/wDltzBKAAAAEElEQVR42mJgYGRgZAQIMAAADQAExkizYQAAAABJRU5ErkJggg==)
-    repeat-x left 1px;
-  /*./image/line_dot.png*/
-  cursor: n-resize;
-  /*url(./image/cur_move_h.cur), move*/
-  top: -10px;
-}
-
-.vue-ruler-ref-dot-v {
-  width: 3px;
-  height: 100%;
-  _height: 9999px;
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAMAAABFaP0WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFf39/////F3PnHQAAAAJ0Uk5T/wDltzBKAAAAEElEQVR42mJgYGRgZAQIMAAADQAExkizYQAAAABJRU5ErkJggg==)
-    repeat-y 1px top;
-  /*./image/line_dot.png*/
-  cursor: w-resize;
-  /*url(./image/cur_move_v.cur), move*/
-  left: -10px;
-}
-
 .vue-ruler-content {
   position: absolute;
   z-index: 997;
   width: 100%;
   height: 100%;
 }
-
-.vue-ruler-content-mask {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background: transparent;
-  z-index: 998;
-}
 </style>
diff --git a/src/views/mapPage/realTimeMap/editMap.vue b/src/views/mapPage/realTimeMap/editMap.vue
index 67bda0ab..65f41fcd 100644
--- a/src/views/mapPage/realTimeMap/editMap.vue
+++ b/src/views/mapPage/realTimeMap/editMap.vue
@@ -8,7 +8,7 @@
             :width="170"
             trigger="click"
             v-if="item.switchType === 'move' || item.switchType === 'revolve'"
-            :disabled="currentItemIndex === -1"
+            :disabled="state.currentItemIndex === -1"
           >
             <template #reference>
               <div
@@ -32,7 +32,7 @@
                 <el-input v-model="state.moveForm.locationX" placeholder="请输入" />
               </el-form-item>
               <el-form-item label="Y">
-                <el-input v-model="state.moveForm.y" placeholder="请输入" />
+                <el-input v-model="state.moveForm.locationY" placeholder="请输入" />
               </el-form-item>
               <div style="text-align: right">
                 <el-button
@@ -202,15 +202,13 @@
       </div>
     </div>
 
-    <div class="map-container" ref="mapContainer" :style="{ cursor: state.cursorStyle }">
-      <map-scale-tool
-        v-if="imgBgObj.height && imgBgObj.width"
-        @input="input"
-        :value="presetLine"
-        :step-length="50"
-        :height="imgBgObj.height"
-        :width="imgBgObj.width"
-      >
+    <div
+      class="map-container"
+      ref="mapContainer"
+      :style="{ cursor: state.cursorStyle }"
+      v-if="imgBgObj.width && imgBgObj.height"
+    >
+      <map-scale-tool :stepLength="50" :width="imgBgObj.width" :height="imgBgObj.height">
         <div
           class="map-bg"
           :style="{
@@ -236,13 +234,13 @@
             v-if="interfaceRefreshed"
           >
             <VueDragResizeRotate
-              v-for="(item, index) in allHistoryList[currentIndex]"
-              :key="item.locationX"
+              v-for="(item, index) in state.allMapPointInfo"
+              :key="index"
               :parent="true"
-              :x="Number(item.locationX) - Number(item.locationWide) / 2"
-              :y="Number(item.locationY) - Number(item.locationDeep) / 2"
-              :w="Number(item.locationWide)"
-              :h="Number(item.locationDeep)"
+              :x="Number(item.locationX) - Number(item.locationWidePx) / 2"
+              :y="Number(item.locationY) - Number(item.locationDeepPx) / 2"
+              :w="Number(item.locationWidePx)"
+              :h="Number(item.locationDeepPx)"
               :r="item.angle"
               @rotatestop="(degree) => rotateEnd(degree, item, index)"
               @dragstop="(x, y) => dragEnd(x, y, item, index)"
@@ -258,86 +256,93 @@
               <!-- 节点合集 -->
               <div @mousedown="startFromPoint(index, $event)">
                 <!-- 1 路径点 -->
-                <div
-                  v-if="item.type === 1 && item.layerSelectionShow"
-                  :style="{
-                    width: item.locationWide + 'px',
-                    height: item.locationDeep + 'px',
-                    backgroundColor: currentItemIndex === index ? '#f48924' : '#000',
-                    borderRadius: '50%',
-                    zIndex: 999
-                  }"
+                <el-tooltip
+                  class="box-item"
+                  effect="dark"
+                  :content="item.sortNum || '节点未保存'"
+                  placement="top"
                 >
-                </div>
-                <!-- 2 库位点 -->
-                <img
-                  v-if="item.type === 2 && item.layerSelectionShow"
-                  src="https://api.znkjfw.com/admin-api/infra/file/4/get/库位库存_png_179_1739326653035.png"
-                  alt=""
-                  :style="{
-                    width: item.locationWide + 'px',
-                    height: item.locationDeep + 'px',
-                    border: currentItemIndex === index ? '1px dashed #000' : 'none'
-                  }"
-                />
-                <!-- 3 设备点 -->
-                <img
-                  v-if="item.type === 3 && item.layerSelectionShow"
-                  :src="
-                    item.mapImageUrl ||
-                    'https://api.znkjfw.com/admin-api/infra/file/4/get/设备点_png_179_1739327151877.png'
-                  "
-                  alt=""
-                  :style="{
-                    width: item.locationWide + 'px',
-                    height: item.locationDeep + 'px',
-                    border: currentItemIndex === index ? '1px dashed #000' : 'none'
-                  }"
-                />
-                <!-- 4 停车点 -->
-                <img
-                  v-if="item.type === 4 && item.layerSelectionShow"
-                  src="https://api.znkjfw.com/admin-api/infra/file/4/get/停车场-01_png_179_1739326933020.png"
-                  alt=""
-                  :style="{
-                    width: item.locationWide + 'px',
-                    height: item.locationDeep + 'px',
-                    border: currentItemIndex === index ? '1px dashed #000' : 'none'
-                  }"
-                />
-                <!-- 5 区域变更点 -->
-                <img
-                  v-if="item.type === 5 && item.layerSelectionShow"
-                  src="https://api.znkjfw.com/admin-api/infra/file/4/get/区域_png_179_1739327151876.png"
-                  alt=""
-                  :style="{
-                    width: item.locationWidee + 'px',
-                    height: item.locationDeep + 'px',
-                    border: currentItemIndex === index ? '1px dashed #000' : 'none'
-                  }"
-                />
-                <!-- 6 等待点 -->
-                <img
-                  v-if="item.type === 6 && item.layerSelectionShow"
-                  src="https://api.znkjfw.com/admin-api/infra/file/4/get/等待点_png_179_1739326991439.png"
-                  alt=""
-                  :style="{
-                    width: item.locationWide + 'px',
-                    height: item.locationDeep + 'px',
-                    border: currentItemIndex === index ? '1px dashed #000' : 'none'
-                  }"
-                />
-                <div
-                  v-if="item.type === 7 && item.layerSelectionShow"
-                  :style="{
-                    color: item.fontColor,
-                    fontSize: item.fontSize + 'px',
-                    fontFamily: item.fontFamily,
-                    border: currentItemIndex === index ? '1px dashed #000' : 'none'
-                  }"
-                >
-                  {{ item.text }}
-                </div>
+                  <div
+                    v-if="item.type === 1 && item.layerSelectionShow"
+                    :style="{
+                      width: item.locationWidePx + 'px',
+                      height: item.locationDeepPx + 'px',
+                      backgroundColor: state.currentItemIndex === index ? '#f48924' : '#000',
+                      borderRadius: '50%',
+                      zIndex: 999
+                    }"
+                  >
+                  </div>
+                  <!-- 2 库位点 -->
+                  <img
+                    v-if="item.type === 2 && item.layerSelectionShow"
+                    src="https://api.znkjfw.com/admin-api/infra/file/4/get/库位库存_png_179_1739326653035.png"
+                    alt=""
+                    :style="{
+                      width: item.locationWidePx + 'px',
+                      height: item.locationDeepPx + 'px',
+                      border: state.currentItemIndex === index ? '1px dashed #000' : 'none'
+                    }"
+                  />
+                  <!-- 3 设备点 -->
+                  <img
+                    v-if="item.type === 3 && item.layerSelectionShow"
+                    :src="
+                      item.mapImageUrl ||
+                      'https://api.znkjfw.com/admin-api/infra/file/4/get/设备点_png_179_1739327151877.png'
+                    "
+                    alt=""
+                    :style="{
+                      width: item.locationWidePx + 'px',
+                      height: item.locationDeepPx + 'px',
+                      border: state.currentItemIndex === index ? '1px dashed #000' : 'none'
+                    }"
+                  />
+                  <!-- 4 停车点 -->
+                  <img
+                    v-if="item.type === 4 && item.layerSelectionShow"
+                    src="https://api.znkjfw.com/admin-api/infra/file/4/get/停车场-01_png_179_1739326933020.png"
+                    alt=""
+                    :style="{
+                      width: item.locationWidePx + 'px',
+                      height: item.locationDeepPx + 'px',
+                      border: state.currentItemIndex === index ? '1px dashed #000' : 'none'
+                    }"
+                  />
+                  <!-- 5 区域变更点 -->
+                  <img
+                    v-if="item.type === 5 && item.layerSelectionShow"
+                    src="https://api.znkjfw.com/admin-api/infra/file/4/get/区域_png_179_1739327151876.png"
+                    alt=""
+                    :style="{
+                      width: item.locationWidePx + 'px',
+                      height: item.locationDeepPx + 'px',
+                      border: state.currentItemIndex === index ? '1px dashed #000' : 'none'
+                    }"
+                  />
+                  <!-- 6 等待点 -->
+                  <img
+                    v-if="item.type === 6 && item.layerSelectionShow"
+                    src="https://api.znkjfw.com/admin-api/infra/file/4/get/等待点_png_179_1739326991439.png"
+                    alt=""
+                    :style="{
+                      width: item.locationWidePx + 'px',
+                      height: item.locationDeepPx + 'px',
+                      border: state.currentItemIndex === index ? '1px dashed #000' : 'none'
+                    }"
+                  />
+                  <div
+                    v-if="item.type === 7 && item.layerSelectionShow"
+                    :style="{
+                      color: item.fontColor,
+                      fontSize: item.fontSize + 'px',
+                      fontFamily: item.fontFamily,
+                      border: state.currentItemIndex === index ? '1px dashed #000' : 'none'
+                    }"
+                  >
+                    {{ item.text }}
+                  </div>
+                </el-tooltip>
               </div>
             </VueDragResizeRotate>
 
@@ -348,76 +353,81 @@
                 style="position: absolute; top: 0; left: 0; z-index: 9"
                 id="svgId"
               >
-                <template v-for="(curve, index) in state.mapRouteList" :key="index">
-                  <!-- 实时绘制当前直线 -->
-                  <line
-                    v-if="state.isDrawing && toolbarSwitchType === 'clickDrawRoute'"
-                    :x1="Number(state.startDrawPoint.locationX)"
-                    :y1="Number(state.startDrawPoint.locationY)"
-                    :x2="Number(state.currentDrawX)"
-                    :y2="Number(state.currentDrawY)"
-                    stroke="#00329F"
-                    stroke-width="5"
-                  />
-
-                  <!-- 直线 -->
-                  <line
-                    v-if="curve.method === 0"
-                    :x1="Number(curve.startPointX)"
-                    :y1="Number(curve.startPointY)"
-                    :x2="Number(curve.endPointX)"
-                    :y2="Number(curve.endPointY)"
-                    :stroke="curve.isSelected ? '#f48924' : '#00329F'"
-                    stroke-width="5"
-                    @click="handleChooseRoute(curve, index)"
-                    @dblclick="handleEditRoute(curve, index)"
-                  />
-
-                  <template v-else>
-                    <path
-                      :d="getCurvePath(curve)"
+                <!-- 实时绘制当前直线 -->
+                <line
+                  v-if="state.isDrawing && toolbarSwitchType === 'clickDrawRoute'"
+                  :x1="Number(state.startDrawPoint.locationX)"
+                  :y1="Number(state.startDrawPoint.locationY)"
+                  :x2="Number(state.currentDrawX)"
+                  :y2="Number(state.currentDrawY)"
+                  stroke="#00329F"
+                  stroke-width="5"
+                />
+                <template v-if="state.mapRouteList.length > 0">
+                  <template v-for="(curve, index) in state.mapRouteList" :key="index">
+                    <!-- 直线 -->
+                    <line
+                      v-if="curve.method === 0"
+                      :x1="Number(curve.startPointX)"
+                      :y1="Number(curve.startPointY)"
+                      :x2="Number(curve.endPointX)"
+                      :y2="Number(curve.endPointY)"
                       :stroke="curve.isSelected ? '#f48924' : '#00329F'"
                       stroke-width="5"
-                      fill="none"
                       @click="handleChooseRoute(curve, index)"
                       @dblclick="handleEditRoute(curve, index)"
                     />
-                    <!-- 第一条控制线 -->
-                    <line
-                      :x1="Number(curve.startPointX)"
-                      :y1="Number(curve.startPointY)"
-                      :x2="curve.beginControlX"
-                      :y2="curve.beginControlY"
-                      :stroke="curve.isSelected ? '#f48924' : '#00329F'"
-                      stroke-dasharray="4"
-                      stroke-width="2"
-                    />
-                    <!-- 第二条控制线 -->
-                    <line
-                      :x1="Number(curve.endPointX)"
-                      :y1="Number(curve.endPointY)"
-                      :x2="curve.endControlX"
-                      :y2="curve.endControlY"
-                      :stroke="curve.isSelected ? '#f48924' : '#00329F'"
-                      stroke-dasharray="4"
-                      stroke-width="2"
-                    />
-                    <circle
-                      id="startCircle"
-                      :cx="curve.beginControlX"
-                      :cy="curve.beginControlY"
-                      r="5"
-                      :fill="curve.isSelected ? '#f48924' : '#00329F'"
-                      @mousedown="startDrag(curve, index, 'start')"
-                    />
-                    <circle
-                      id="endCircle"
-                      :cx="curve.endControlX"
-                      :cy="curve.endControlY"
-                      r="5"
-                      :fill="curve.isSelected ? '#f48924' : '#00329F'"
-                      @mousedown="startDrag(curve, index, 'end')"
-                    />
+
+                    <template v-else>
+                      <path
+                        :d="getCurvePath(curve)"
+                        :stroke="curve.isSelected ? '#f48924' : '#00329F'"
+                        stroke-width="5"
+                        fill="none"
+                        @click="handleChooseRoute(curve, index)"
+                        @dblclick="handleEditRoute(curve, index)"
+                      />
+                      <!-- 第一条控制线 -->
+                      <line
+                        v-if="state.currentDragTarget.index == index"
+                        :x1="Number(curve.startPointX)"
+                        :y1="Number(curve.startPointY)"
+                        :x2="curve.beginControlX"
+                        :y2="curve.beginControlY"
+                        :stroke="curve.isSelected ? '#f48924' : '#00329F'"
+                        stroke-dasharray="4"
+                        stroke-width="2"
+                      />
+                      <!-- 第二条控制线 -->
+                      <line
+                        v-if="state.currentDragTarget.index == index"
+                        :x1="Number(curve.endPointX)"
+                        :y1="Number(curve.endPointY)"
+                        :x2="curve.endControlX"
+                        :y2="curve.endControlY"
+                        :stroke="curve.isSelected ? '#f48924' : '#00329F'"
+                        stroke-dasharray="4"
+                        stroke-width="2"
+                      />
+                      <circle
+                        v-if="state.currentDragTarget.index == index"
+                        id="startCircle"
+                        :cx="curve.beginControlX"
+                        :cy="curve.beginControlY"
+                        r="5"
+                        :fill="curve.isSelected ? '#f48924' : '#00329F'"
+                        @mousedown="startDrag(curve, index, 'start')"
+                      />
+                      <circle
+                        v-if="state.currentDragTarget.index == index"
+                        id="endCircle"
+                        :cx="curve.endControlX"
+                        :cy="curve.endControlY"
+                        r="5"
+                        :fill="curve.isSelected ? '#f48924' : '#00329F'"
+                        @mousedown="startDrag(curve, index, 'end')"
+                      />
+                    </template>
                   </template>
                 </template>
               </svg>
@@ -587,77 +597,68 @@ const inputBoxRef = ref() //文字输入框
 
 const message = useMessage() // 消息弹窗
 
-const allHistoryList = ref([]) //全部的历史记录
-const currentIndex = ref(0) //用于记录是哪条历史记录的
-const currentItemIndex = ref(-1) //用于记录是在编辑那个具体的节点、图标等
-const allMapPointInfo = ref([]) //所有的图标的列表
-
-const presetLine = ref([])
-const input = (list) => {
-  presetLine.value = list
-}
-
 // 缩放停止
 const interfaceRefreshed = ref(true)
 const resizeEnd = (locationX, locationY, w, h, item, index) => {
   interfaceRefreshed.value = false
   nextTick(() => {
-    let x = Number(locationX) + Number(item.locationWide) / 2
-    let y = Number(locationY) + Number(item.locationDeep) / 2
+    let x = Number(locationX) + Number(item.locationWidePx) / 2
+    let y = Number(locationY) + Number(item.locationDeepPx) / 2
 
-    allMapPointInfo.value[index].locationX = x
-    allMapPointInfo.value[index].locationY = y
-    allMapPointInfo.value[index].locationWide = w
-    allMapPointInfo.value[index].locationDeep = h
+    state.allMapPointInfo[index].locationX = x
+    state.allMapPointInfo[index].locationY = y
+    state.allMapPointInfo[index].locationWidePx = w
+    state.allMapPointInfo[index].locationDeepPx = h
     addEditHistory()
 
     state.mapRouteList.forEach((route) => {
       if (item.id === route.startingPointId) {
         route.startPointX = x
         route.startPointY = y
-        route.beginHigh = item.locationDeep ? Number(item.locationDeep) : 5
-        route.beginWidth = item.locationWide ? Number(item.locationWide) : 5
+        route.beginHigh = Number(item.locationDeepPx)
+        route.beginWidth = Number(item.locationWidePx)
         route.actualStartPointX = actualPoint.actualLocationX
         route.actualStartPointY = actualPoint.actualLocationY
       }
       if (item.id === route.endPointId) {
         route.endPointX = x
         route.endPointY = y
-        route.endHigh = item.locationDeep ? Number(item.locationDeep) : 5
-        route.endWidth = item.locationWide ? Number(item.locationWide) : 5
+        route.endHigh = Number(item.locationDeep)
+        route.endWidth = Number(item.locationDeep)
         route.actualEndPointX = actualPoint.actualLocationX
         route.actualEndPointY = actualPoint.actualLocationY
       }
     })
   })
 }
+
 // 拖拽停止
 const dragEnd = (locationX, locationY, item, index) => {
-  let x = Number(locationX) + Number(item.locationWide) / 2
-  let y = Number(locationY) + Number(item.locationDeep) / 2
+  let x = Number(locationX) + Number(item.locationWidePx) / 2
+  let y = Number(locationY) + Number(item.locationDeepPx) / 2
 
   if (x === item.locationX && y === item.locationY) return
   let actualPoint = disposeEventPoint(x, y)
-  allMapPointInfo.value[index].locationX = x
-  allMapPointInfo.value[index].locationY = y
-  allMapPointInfo.value[index].actualStartPointX = actualPoint.actualLocationX
-  allMapPointInfo.value[index].actualStartPointY = actualPoint.actualLocationY
+  state.allMapPointInfo[index].locationX = x
+  state.allMapPointInfo[index].locationY = y
+  state.allMapPointInfo[index].actualStartPointX = actualPoint.actualLocationX
+  state.allMapPointInfo[index].actualStartPointY = actualPoint.actualLocationY
   addEditHistory()
   //更改路线里的
   state.mapRouteList.forEach((route) => {
     if (item.id === route.startingPointId) {
       route.startPointX = x
       route.startPointY = y
-      route.beginHigh = item.locationDeep ? Number(item.locationDeep) : 5
-      route.beginWidth = item.locationWide ? Number(item.locationWide) : 5
+      route.beginHigh = Number(item.locationDeepPx)
+      route.beginWidth = Number(item.locationWidePx)
       route.actualStartPointX = actualPoint.actualLocationX
       route.actualStartPointY = actualPoint.actualLocationY
     }
     if (item.id === route.endPointId) {
       route.endPointX = x
       route.endPointY = y
-      route.endHigh = item.locationDeep ? Number(item.locationDeep) : 5
-      route.endWidth = item.locationWide ? Number(item.locationWide) : 5
+      route.endHigh = Number(item.locationDeepPx)
+      route.endWidth = Number(item.locationWidePx)
       route.actualEndPointX = actualPoint.actualLocationX
       route.actualEndPointY = actualPoint.actualLocationY
     }
@@ -665,26 +666,26 @@ const dragEnd = (locationX, locationY, item, index) => {
 }
 // 旋转
 const rotateEnd = (angle, item, index) => {
-  allMapPointInfo.value[index].angle = angle
+  state.allMapPointInfo[index].angle = angle
   addEditHistory()
 }
 
 //节点选中
 const editNodePropertiesRef = ref()
 const activatedHandle = (item, index) => {
-  currentItemIndex.value = index
+  state.currentItemIndex = index
 
   //让路线不选中
   state.selectedCurve = ''
 
-  if (state.currentDragTarget.index !== null) {
+  if (state.mapRouteList.length > 0 && state.currentDragTarget.index !== null) {
     state.mapRouteList[state.currentDragTarget.index].isSelected = false
     state.currentDragTarget = { index: null, type: null }
   }
 
   //节点编辑
   if (toolbarSwitchType.value === 'editNode') {
-    let list = allHistoryList.value[currentIndex.value].filter((item) => item.type === 3)
+    let list = state.allMapPointInfo.filter((item) => item.type === 3)
     editNodePropertiesRef.value.open(JSON.parse(JSON.stringify(item)), list)
   }
 }
@@ -694,31 +695,42 @@ const deactivatedHandle = () => {}
 //添加历史记录
 const addEditHistory = () => {
   //要判断是不是在最新的记录上修改 如果不是 要把currentIndex之后的记录都删掉 保持当前修改是最新的
-  if (currentIndex.value !== allHistoryList.value.length - 1) {
-    allHistoryList.value = allHistoryList.value.splice(0, currentIndex.value)
-    currentIndex.value = allHistoryList.value.length
-    allHistoryList.value.push(JSON.parse(JSON.stringify(allMapPointInfo.value)))
+  if (state.currentIndex !== state.allHistoryList.length - 1) {
+    state.allHistoryList = state.allHistoryList.splice(0, state.currentIndex)
+    state.currentIndex = state.allHistoryList.length
+    state.allHistoryList.push({
+      allMapPointInfo: JSON.parse(JSON.stringify(state.allMapPointInfo)),
+      mapRouteList: JSON.parse(JSON.stringify(state.mapRouteList))
+    })
   } else {
-    allHistoryList.value.push(JSON.parse(JSON.stringify(allMapPointInfo.value)))
-    currentIndex.value++
+    state.allHistoryList.push({
+      allMapPointInfo: JSON.parse(JSON.stringify(state.allMapPointInfo)),
+      mapRouteList: JSON.parse(JSON.stringify(state.mapRouteList))
+    })
+    state.currentIndex++
   }
   interfaceRefreshed.value = true
 }
 
 //上一步
 const backPreviousStep = () => {
-  if (currentIndex.value > 0) {
-    currentIndex.value--
-    allMapPointInfo.value = allHistoryList.value[currentIndex.value]
+  console.log(state.currentIndex)
+  console.log(state.allMapPointInfo)
+  console.log(state.allHistoryList)
+  if (state.currentIndex > 0) {
+    state.currentIndex--
+    state.allMapPointInfo = state.allHistoryList[state.currentIndex]?.allMapPointInfo || []
+    state.mapRouteList = state.allHistoryList[state.currentIndex]?.mapRouteList || []
   } else {
     message.warning('没了老铁')
   }
 }
 //下一步
 const backNextStep = () => {
-  if (currentIndex.value < allHistoryList.value.length - 1) {
-    currentIndex.value++
-    allMapPointInfo.value = allHistoryList.value[currentIndex.value]
+  if (state.currentIndex < state.allHistoryList.length - 1) {
+    state.currentIndex++
+    state.allMapPointInfo = state.allHistoryList[state.currentIndex]?.allMapPointInfo || []
+    state.mapRouteList = state.allHistoryList[state.currentIndex]?.mapRouteList || []
   } else {
     message.warning('没了老铁')
   }
@@ -733,15 +745,17 @@ const mapClick = (e) => {
 
   //绘制节点
   if (toolbarSwitchType.value === 'drawNodes') {
-    allMapPointInfo.value.push({
+    state.allMapPointInfo.push({
       positionMapId: imgBgObj.positionMapId, //地图的id
       layerSelectionShow: true,
       locationX: x,
       locationY: y,
       actualLocationX: actualLocationX,
       actualLocationY: actualLocationY,
-      locationDeep: 10,
-      locationWide: 10,
+      locationDeep: 50,
+      locationWide: 50,
+      locationDeepPx: 10,
+      locationWidePx: 10,
       angle: 0,
       draggable: true,
       resizable: true,
@@ -782,15 +796,15 @@ const textFormSuccess = (form) => {
 const handleInputEnd = () => {
   if (state.inputBoxValue) {
     state.showInputBox = false
-    allMapPointInfo.value.push({
+    state.allMapPointInfo.push({
       type: 7, //类型  7文字
       positionMapId: imgBgObj.positionMapId, //地图的id
       locationX: state.inputBoxStyle.locationX, //x
       locationY: state.inputBoxStyle.locationY, //y
       actualLocationX: state.inputBoxStyle.actualLocationX,
       actualLocationY: state.inputBoxStyle.actualLocationY,
-      locationDeep: '', //h
-      locationWide: '', //w
+      locationDeep: null, //h
+      locationWide: null, //w
       angle: 0, //旋转角度
       draggable: true, //是否可以拖动
       resizable: false, //是否可以调整大小
@@ -810,28 +824,30 @@ const handleInputEnd = () => {
 }
 //编辑节点成功
 const submitNodeSuccess = (form) => {
-  allMapPointInfo.value[currentItemIndex.value] = form
-  allHistoryList.value[currentIndex.value][currentItemIndex.value] = form
+  form.locationDeepPx = Number(form.locationDeep) / 100 / imgBgObj.resolution
+  form.locationWidePx = Number(form.locationWide) / 100 / imgBgObj.resolution
+  state.allMapPointInfo[state.currentItemIndex] = form
 
   //节点位置改变 通知路径里面的节点也改变
   state.mapRouteList.forEach((item) => {
     if (form.id === item.startingPointId) {
       item.startPointX = form.locationX
       item.startPointY = form.locationY
-      item.beginHigh = form.locationDeep ? Number(form.locationDeep) : 5
-      item.beginWidth = form.locationWide ? Number(form.locationWide) : 5
+      item.beginHigh = Number(form.locationDeepPx)
+      item.beginWidth = Number(form.locationWidePx)
       item.actualStartPointX = disposeEventPoint(form.locationX, form.locationY).actualLocationX
       item.actualStartPointY = disposeEventPoint(form.locationX, form.locationY).actualLocationY
     }
     if (form.id === item.endPointId) {
       item.endPointX = form.locationX
       item.endPointY = form.locationY
-      item.endHigh = form.locationDeep ? Number(form.locationDeep) : 5
-      item.endWidth = form.locationWide ? Number(form.locationWide) : 5
+      item.endHigh = Number(form.locationDeepPx)
+      item.endWidth = Number(form.locationWidePx)
       item.actualEndPointX = disposeEventPoint(form.locationX, form.locationY).actualLocationX
       item.actualEndPointY = disposeEventPoint(form.locationX, form.locationY).actualLocationY
     }
   })
+  addEditHistory()
 }
 
 //工具栏点击
@@ -1036,21 +1052,26 @@ const state = reactive({
   measureDistancesNum: 0, // 存储两点之间的距离
   imageChangeMultiple: 1, //图片放大缩小的倍数
   prohibitedOperation: false, //禁止操作 在框选测距等操作时，禁止所有拖动等操作
-  mapRouteList: [], //仓库点位地图连线
   currentDragTarget: {
     index: null,
     type: null
   }, //当前拖拽的目标（起点、终点、控制点）
   selectedCurve: '', // 当前选中的曲线
   startDrawPointIndex: -1, // 起始点的索引
-  startDrawPoint: null,
-  isDrawing: false,
-  currentDrawX: 0,
-  currentDrawY: 0
+  startDrawPoint: null, //绘制路线开始的点
+  isDrawing: false, //正在绘制
+  currentDrawX: 0, //正在绘制的x轴坐标
+  currentDrawY: 0, //正在绘制的y轴坐标
+  allHistoryList: [], //所有的历史记录 [{allMapPointInfo:[],mapRouteList:[]}]
+  allMapPointInfo: [], //当前页面上的所有节点的列表
+  mapRouteList: [], //当前页面上所有路线的列表
+  currentIndex: 0, //当前处在哪条历史记录
+  currentItemIndex: -1 //当前处在哪个工具
 })
-const toolbarClick = (item) => {
+
+const toolbarClick = async (item) => {
   let type = item.switchType
-  if (currentItemIndex.value === -1 && (type === 'move' || type === 'revolve' || type === 'copy')) {
+  if (state.currentItemIndex === -1 && (type === 'move' || type === 'revolve' || type === 'copy')) {
     message.warning('请先选择要操作的对象')
     return
   }
@@ -1058,7 +1079,7 @@ const toolbarClick = (item) => {
   if (
     type === 'delete' &&
     state.currentDragTarget.index === null &&
-    currentItemIndex.value === -1
+    state.currentItemIndex === -1
   ) {
     message.warning('请先选择要操作的对象')
     return
@@ -1121,11 +1142,12 @@ const toolbarClick = (item) => {
       break
     case 'save':
       //保存
+      await message.confirm('请确认是否保存？')
       saveMap()
       break
     case 'saveAs':
       //另存为 存为json文件 无法直接访问用户的文件系统 不能选择存在那个文件夹里面
-      const jsonString = JSON.stringify(allHistoryList.value[currentIndex.value], null, 2)
+      const jsonString = JSON.stringify(state.allHistoryList[state.currentIndex], null, 2)
       const blob = new Blob([jsonString], { type: 'application/json' })
       const url = URL.createObjectURL(blob)
 
@@ -1149,41 +1171,23 @@ const toolbarClick = (item) => {
       break
     case 'copy':
       //复制
-      let copyMapItem = allHistoryList.value[currentIndex.value][currentItemIndex.value]
-      state.copyMapItem = {
-        positionMapId: copyMapItem.positionMapId,
-        locationX: copyMapItem.locationX,
-        locationY: copyMapItem.locationY,
-        type: copyMapItem.type,
-        dataJson: copyMapItem.dataJson || '',
-        dataObj: copyMapItem.dataObj || {},
-        dataList: copyMapItem.dataList || [],
-        locationDeep: copyMapItem.locationDeep,
-        locationWide: copyMapItem.locationWide,
-        draggable: copyMapItem.draggable,
-        resizable: copyMapItem.resizable,
-        rotatable: copyMapItem.rotatable,
-        lockAspectRatio: copyMapItem.lockAspectRatio
-      }
-      message.success('复制成功')
+      replicationNode()
       break
     case 'paste':
       //粘贴
-      let copyObj = JSON.parse(JSON.stringify(state.copyMapItem))
-      copyObj.locationX = Number(copyObj.locationX) + 50
-      copyObj.locationY = Number(copyObj.locationY) + 50
-      allMapPointInfo.value.push(copyObj)
-      addEditHistory()
+      pasteNode()
       break
     case 'delete':
       //删除
-      if (currentItemIndex.value !== -1) {
-        allMapPointInfo.value.splice(currentItemIndex.value, 1)
-        addEditHistory()
+      if (state.currentItemIndex !== -1) {
+        state.allMapPointInfo.splice(state.currentItemIndex, 1)
+        state.currentItemIndex = -1
       }
       if (state.currentDragTarget.index !== null) {
         state.mapRouteList.splice(state.currentDragTarget.index, 1)
+        state.currentDragTarget.index = null
       }
+      addEditHistory()
       break
     case 'tools':
       //工具
@@ -1256,7 +1260,7 @@ const toolbarClick = (item) => {
     case 'larger':
       //放大
       if (state.imageChangeMultiple < 3) {
-        state.imageChangeMultiple *= 1.2
+        state.imageChangeMultiple += 0.1
       } else {
         message.warning('不能在放大了')
       }
@@ -1264,7 +1268,7 @@ const toolbarClick = (item) => {
     case 'smaller':
       //缩小
       if (state.imageChangeMultiple > 0.3) {
-        state.imageChangeMultiple *= 0.8
+        state.imageChangeMultiple -= 0.1
       } else {
         message.warning('不能在缩小了')
       }
@@ -1291,7 +1295,7 @@ const toolbarClick = (item) => {
       break
     case 'equipment':
       // 设备
-      let equipmentList = allHistoryList.value[currentIndex.value].filter((item) => {
+      let equipmentList = state.allMapPointInfo.filter((item) => {
         return item.type === 3
       })
       equipmentToolDialogRef.value.open(equipmentList)
@@ -1299,27 +1303,78 @@ const toolbarClick = (item) => {
   }
 }
 
+//复制
+const replicationNode = () => {
+  let copyMapItem = state.allMapPointInfo[state.currentItemIndex]
+  let locationX = Number(copyMapItem.locationX) + 20
+  let locationY = Number(copyMapItem.locationY) + 20
+  let actualPoint = disposeEventPoint(locationX, locationY)
+
+  state.copyMapItem = {
+    positionMapId: copyMapItem.positionMapId,
+    locationX: locationX,
+    locationY: locationY,
+    actualLocationX: actualPoint.actualLocationX,
+    actualLocationY: actualPoint.actualLocationY,
+    type: copyMapItem.type,
+    dataJson: copyMapItem.dataJson || '',
+    dataObj: copyMapItem.dataObj || {},
+    dataList: copyMapItem.dataList || [],
+    locationDeep: copyMapItem.locationDeep,
+    locationWide: copyMapItem.locationWide,
+    locationDeepPx: copyMapItem.locationDeepPx,
+    locationWidePx: copyMapItem.locationWidePx,
+    draggable: copyMapItem.draggable,
+    resizable: copyMapItem.resizable,
+    rotatable: copyMapItem.rotatable,
+    lockAspectRatio: copyMapItem.lockAspectRatio,
+    layerSelectionShow: copyMapItem.layerSelectionShow,
+    mapImageUrl: copyMapItem.mapImageUrl,
+    areaId: copyMapItem.areaId
+  }
+  message.success('复制成功')
+}
+//粘贴
+const pasteNode = () => {
+  let copyObj = JSON.parse(JSON.stringify(state.copyMapItem))
+  state.allMapPointInfo.push(copyObj)
+  message.success('粘贴成功')
+  addEditHistory()
+}
+
 //移动工具表单提交
 const moveFormSubmit = () => {
-  allHistoryList.value[currentIndex.value][currentItemIndex.value].locationX =
-    state.moveForm.locationX
-  allHistoryList.value[currentIndex.value][currentItemIndex.value].locationY =
-    state.moveForm.locationY
+  state.allMapPointInfo[state.currentItemIndex].locationX = Number(state.moveForm.locationX)
+  state.allMapPointInfo[state.currentItemIndex].locationY = Number(state.moveForm.locationY)
+  addEditHistory()
 }
 //旋转工具表单提交
 const rotationFormSubmit = () => {
-  allHistoryList.value[currentIndex.value][currentItemIndex.value].angle = state.rotationForm.angle
+  state.allMapPointInfo[state.currentItemIndex].angle = state.rotationForm.angle
+  addEditHistory()
 }
 
 //鼠标拖动绘制节点
 // 从点开始绘制
 const startFromPoint = (index, event) => {
-  let list = allHistoryList.value[currentIndex.value]
-  const point = list[index]
-  state.startDrawPoint = point //开始点
-  state.startDrawPointIndex = index
-  state.isDrawing = true
-  event.preventDefault() // 防止默认行为
+  if (toolbarSwitchType.value === 'clickDrawRoute') {
+    let list = state.allMapPointInfo
+    const point = list[index]
+    if (point.id) {
+      state.startDrawPoint = point //开始点
+      state.startDrawPointIndex = index
+      state.isDrawing = true
+      event.preventDefault() // 防止默认行为
+    } else {
+      message.warning('选择的节点未保存')
+      // 重置状态
+      state.startDrawPointIndex = -1 // 起始点的索引
+      state.startDrawPoint = null
+      state.isDrawing = false
+      state.currentDrawX = 0
+      state.currentDrawY = 0
+    }
+  }
 }
 //开始框选绘制
 const startDrawSelection = (event) => {
@@ -1397,8 +1452,21 @@ const endDrawSelection = (event) => {
       const endPointIndex = findClosestPoint(state.currentDrawX, state.currentDrawY)
 
       if (endPointIndex !== null && endPointIndex !== state.startDrawPointIndex) {
-        let list = allHistoryList.value[currentIndex.value]
+        let list = state.allMapPointInfo
         const endPoint = list[endPointIndex]
+
+        //先判断节点有没有保存
+        if (!endPoint.id) {
+          message.warning('选择的节点未保存')
+          // 重置状态
+          state.startDrawPointIndex = -1 // 起始点的索引
+          state.startDrawPoint = null
+          state.isDrawing = false
+          state.currentDrawX = 0
+          state.currentDrawY = 0
+          return
+        }
+
         const newLine = {
           startPointX: state.startDrawPoint.locationX,
           startPointY: state.startDrawPoint.locationY,
@@ -1450,11 +1518,12 @@ const endDrawSelection = (event) => {
             forwardSpeedLimit: 1.5, //正向限速
             reverseSpeedLimit: 0.4, //	反向限速
             toward: 0, //	车头朝向( 0:正正 1:正反 2:反正 3:反反)
-            beginWidth: state.startDrawPoint.locationWide, //起点宽
-            beginHigh: state.startDrawPoint.locationDeep, //	起点高
-            endWidth: endPoint.locationWide, //	终点宽
-            endHigh: endPoint.locationDeep //	终点高
+            beginWidth: state.startDrawPoint.locationWidePx, //起点宽
+            beginHigh: state.startDrawPoint.locationDeepPx, //	起点高
+            endWidth: endPoint.locationWidePx, //	终点宽
+            endHigh: endPoint.locationDeepPx //	终点高
           })
+          addEditHistory()
         }
       }
       // 重置状态
@@ -1473,7 +1542,7 @@ const endDrawSelection = (event) => {
 const findClosestPoint = (x, y) => {
   let minDistance = Infinity
   let closestIndex = null
-  let list = allHistoryList.value[currentIndex.value]
+  let list = state.allMapPointInfo
   list.forEach((point, index) => {
     const distance = Math.sqrt((point.locationX - x) ** 2 + (point.locationY - y) ** 2)
     if (distance < minDistance && distance < point.locationWide) {
@@ -1484,10 +1553,9 @@ const findClosestPoint = (x, y) => {
   })
   return closestIndex
 }
-
 //点击区域
 const clickDrawSelectionArea = () => {
-  let points = allHistoryList.value[currentIndex.value]
+  let points = state.allMapPointInfo
 
   state.drawSelectionPointList = []
   state.allDrawSelectionAreaBox.forEach((box) => {
@@ -1511,8 +1579,6 @@ const clickDrawSelectionArea = () => {
   // let routeList = state.drawSelectionPointList.filter((item) => item.type === 1)
   let routeList = state.drawSelectionPointList
 
-  console.log(routeList)
-
   let isHaveId = binLocation.every((item) => {
     item.id
   })
@@ -1593,13 +1659,14 @@ const clickDrawSelectionArea = () => {
       forwardSpeedLimit: 1.5, //正向限速
       reverseSpeedLimit: 0.4, //	反向限速
       toward: 0, //	车头朝向( 0:正正 1:正反 2:反正 3:反反)
-      beginWidth: routeList[0].locationWide, //起点宽
-      beginHigh: routeList[0].locationDeep, //	起点高
-      endWidth: routeList[1].locationWide, //	终点宽
-      endHigh: routeList[1].locationDeep //	终点高
+      beginWidth: routeList[0].locationWidePx, //起点宽
+      beginHigh: routeList[0].locationDeepPx, //	起点高
+      endWidth: routeList[1].locationWidePx, //	终点宽
+      endHigh: routeList[1].locationDeepPx //	终点高
     }
     state.selectedCurve = curve
     state.mapRouteList.push(curve)
+    addEditHistory()
   }
 }
 //计算是不是在同一条直线的
@@ -1680,7 +1747,9 @@ const endDrag = (event) => {
   curve.actualEndControlX = actualEndControl.actualLocationX
   curve.actualEndControlY = actualEndControl.actualLocationY
 
-  state.currentDragTarget = { index: null, type: null }
+  addEditHistory()
+
+  state.currentDragTarget.type = null
   window.removeEventListener('mousemove', handleDrag)
   window.removeEventListener('mouseup', endDrag)
 }
@@ -1710,7 +1779,7 @@ const handleChooseRoute = (item, index) => {
   state.selectedCurve = item
   state.currentDragTarget.index = index
   //让节点不选中
-  currentItemIndex.value = -1
+  state.currentItemIndex = -1
 }
 //编辑路线成功
 const editMapRouteDialogSubmit = (form) => {
@@ -1721,21 +1790,21 @@ const editMapRouteDialogSubmit = (form) => {
     if (form.startingPointId === item.startingPointId) {
       item.startPointX = form.startPointX
       item.startPointY = form.startPointY
-      item.beginHigh = form.beginHigh ? Number(form.beginHigh) : 5
-      item.beginWidth = form.beginWidth ? Number(form.beginWidth) : 5
+      item.beginHigh = Number(form.beginHigh)
+      item.beginWidth = Number(form.beginWidth)
       item.actualStartPointX = disposeEventPoint(form.startPointX, form.startPointY).actualLocationX
       item.actualStartPointY = disposeEventPoint(form.startPointX, form.startPointY).actualLocationY
     }
     if (form.endPointId === item.endPointId) {
       item.endPointX = form.endPointX
       item.endPointY = form.endPointY
-      item.endHigh = form.endHigh ? Number(form.endHigh) : 5
-      item.endWidth = form.endWidth ? Number(form.endWidth) : 5
+      item.endHigh = Number(form.endHigh)
+      item.endWidth = Number(form.endWidth)
       item.actualEndPointX = disposeEventPoint(form.endPointX, form.endPointY).actualLocationX
       item.actualEndPointY = disposeEventPoint(form.endPointX, form.endPointY).actualLocationY
     }
   })
-  allMapPointInfo.value.forEach((item) => {
+  state.allMapPointInfo.forEach((item) => {
     if (item.id === form.startingPointId) {
       item.locationX = form.startPointX
       item.locationY = form.startPointY
@@ -1749,7 +1818,8 @@ const editMapRouteDialogSubmit = (form) => {
       item.actualLocationY = disposeEventPoint(form.endPointX, form.endPointY).actualLocationX
     }
   })
-  allHistoryList.value[currentIndex.value] = JSON.parse(JSON.stringify(allMapPointInfo.value))
+  //增加一条历史记录
+  addEditHistory()
 }
 
 //测距相关
@@ -1855,9 +1925,9 @@ const getAllNodeList = async () => {
   let list = await MapApi.getPositionMapItemList({
     positionMapId: imgBgObj.positionMapId
   })
-  allMapPointInfo.value = []
-  allHistoryList.value = []
-  currentIndex.value = 0
+  state.allMapPointInfo = []
+  state.allHistoryList = []
+  state.currentIndex = 0
   list.forEach((item) => {
     item.layerSelectionShow = true //用于图层
     item.locationX = Number(item.locationX)
@@ -1866,8 +1936,8 @@ const getAllNodeList = async () => {
     if (item.type === 1 || item.type === 5 || item.type === 6) {
       item.dataObj = {}
       item.dataList = []
-      item.locationDeep = 10
-      item.locationWide = 10
+      item.locationDeep = 50
+      item.locationWide = 50
       item.draggable = false
       item.resizable = false
       item.rotatable = false
@@ -1875,8 +1945,8 @@ const getAllNodeList = async () => {
     } else if (item.type === 5 || item.type === 6) {
       item.dataObj = {}
       item.dataList = []
-      item.locationDeep = 30
-      item.locationWide = 30
+      item.locationDeep = 150
+      item.locationWide = 150
       item.draggable = true
       item.resizable = false
       item.rotatable = false
@@ -1922,13 +1992,24 @@ const getAllNodeList = async () => {
       item.rotatable = true
       item.lockAspectRatio = true
     }
-    allMapPointInfo.value.push(item)
+
+    //要将实际的cm改成px
+    if (item.locationWide && item.locationDeep) {
+      let pxObj = cmConversionPx(item.locationWide, item.locationDeep)
+      item.locationWidePx = pxObj.pWidth
+      item.locationDeepPx = pxObj.pHeight
+    }
+
+    state.allMapPointInfo.push(item)
   })
-  allHistoryList.value[0] = JSON.parse(JSON.stringify(allMapPointInfo.value))
 }
 //获取所有的路线
 const getAllMapRoute = async () => {
   state.mapRouteList = await MapApi.getPositionMapLineByPositionMapId(imgBgObj.positionMapId)
+  state.allHistoryList[0] = {
+    allMapPointInfo: JSON.parse(JSON.stringify(state.allMapPointInfo)),
+    mapRouteList: JSON.parse(JSON.stringify(state.mapRouteList))
+  }
 }
 //保存地图按钮
 const saveMap = async () => {
@@ -1954,7 +2035,7 @@ const saveMap = async () => {
 }
 //节点的保存
 const saveNodeList = async () => {
-  let list = allHistoryList.value[currentIndex.value]
+  let list = state.allMapPointInfo
   list.forEach((item) => {
     if (item.type === 7) {
       item.dataObj.positionMapId = imgBgObj.positionMapId
@@ -1976,7 +2057,7 @@ const saveMapRoute = async () => {
 }
 //筛选图层
 const layerSelectionSuccess = (typeList) => {
-  allHistoryList.value[currentIndex.value].forEach((item) => {
+  state.allMapPointInfo.forEach((item) => {
     // 如果 type 存在于第一个数组中，则将 layerSelectionShow 设置为 false
     if (typeList.includes(item.type)) {
       item.layerSelectionShow = false
@@ -2013,12 +2094,22 @@ const disposeEventPoint = (x, y) => {
   const actualLocationX = Number(imgBgObj.origin[0]) + Number(x) * Number(imgBgObj.resolution)
   const actualLocationY =
     Number(imgBgObj.origin[1]) + (Number(imgBgObj.height) - Number(y)) * Number(imgBgObj.resolution)
-
   return {
     actualLocationX,
     actualLocationY
   }
 }
+//将节点实际宽高cm转换成px
+const cmConversionPx = (cWidth, cHeight) => {
+  let pWidth = Number(cWidth) / imgBgObj.resolution / 100
+  let pHeight = Number(cHeight) / imgBgObj.resolution / 100
+
+  return {
+    pWidth,
+    pHeight
+  }
+}
+
 document.onmousedown = function (e) {
   //左击
   if (e.button == 2) {
@@ -2027,7 +2118,7 @@ document.onmousedown = function (e) {
       state.mapRouteList[state.currentDragTarget.index].isSelected = false
       state.currentDragTarget = { index: null, type: null }
     }
-    currentItemIndex.value = -1
+    state.currentItemIndex = -1
   }
 }
 // 阻止默认菜单弹出
@@ -2035,59 +2126,128 @@ window.document.oncontextmenu = function () {
   return false
 }
 
+//监听键盘事件
+const handleKeyDown = (event) => {
+  if (event.ctrlKey) {
+    // if (event.key === 'c') {
+    //   //复制
+    //   if (state.currentItemIndex === -1) {
+    //     message.warning('请先选择要操作的对象')
+    //     return
+    //   }
+    //   replicationNode()
+    // } else if (event.key === 'v') {
+    //   //粘贴
+    //   if (!state.copyMapItem) {
+    //     message.warning('请先复制对象')
+    //     return
+    //   }
+    //   pasteNode()
+    // } else if (event.key === 'z') {
+    //   //撤回
+    //   backPreviousStep()
+    // } else if (event.key === 'y') {
+    //   //重写
+    //   backNextStep()
+    // }
+  }
+}
+
 onMounted(() => {
   getMapList()
+  window.addEventListener('keydown', handleKeyDown)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeyDown)
 })
 </script>
 
 <style lang="scss" scoped>
 .edit-map-page {
-  margin-bottom: 20px;
-}
-
-.map-container {
-  position: relative;
-  width: 100%;
-  overflow: auto;
-  .map-bg {
-    background-size: contain;
-    background-repeat: no-repeat;
+  .map-container {
     position: relative;
-  }
-  .map-box-inner {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-}
+    width: 100%;
+    overflow: auto;
+    // height: 85vh;
+    height: calc(100vh - 140px);
 
-.top-tool {
-  margin-top: 5px;
-  margin-bottom: 3px;
-  .top-tool-list {
-    display: flex;
-    align-items: center;
-    text-align: center;
-    background-color: #fff;
-    padding: 0 12px;
-    height: 70px;
-    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 3px;
+    .map-bg {
+      background-size: contain;
+      background-repeat: no-repeat;
+      position: absolute;
+      top: 18px;
+      left: 18px;
 
-    .top-tool-item {
+      .map-box-inner {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+    }
+  }
+
+  .top-tool {
+    margin-top: 5px;
+    margin-bottom: 3px;
+    .top-tool-list {
       display: flex;
       align-items: center;
+      text-align: center;
+      background-color: #fff;
+      padding: 0 12px;
+      height: 70px;
+      box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 3px;
+
+      .top-tool-item {
+        display: flex;
+        align-items: center;
+
+        .tool-item {
+          cursor: pointer;
+          width: 50px;
+          height: 70px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+
+          .name {
+            cursor: pointer;
+            font-family:
+              PingFangSC,
+              PingFang SC;
+            font-weight: 400;
+            font-size: 14px;
+            color: #0d162a;
+            line-height: 20px;
+            text-align: center;
+            font-style: normal;
+            margin-top: 4px;
+          }
+        }
+        .line {
+          margin: 0 12px;
+          width: 1px;
+          height: 47px;
+          border: 1px solid #cccccc;
+        }
+      }
+    }
+
+    .right-tool-list {
+      position: absolute;
+      right: 0;
+      top: 114px;
+      background-color: #fff;
+      z-index: 999;
+      text-align: center;
+      box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
 
       .tool-item {
         cursor: pointer;
-        width: 50px;
-        height: 70px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-
+        padding: 10px;
         .name {
-          cursor: pointer;
           font-family:
             PingFangSC,
             PingFang SC;
@@ -2097,91 +2257,67 @@ onMounted(() => {
           line-height: 20px;
           text-align: center;
           font-style: normal;
-          margin-top: 4px;
         }
       }
-      .line {
-        margin: 0 12px;
-        width: 1px;
-        height: 47px;
-        border: 1px solid #cccccc;
-      }
     }
   }
 
-  .right-tool-list {
+  .input-box-class {
     position: absolute;
-    right: 0;
-    top: 114px;
-    background-color: #fff;
-    z-index: 999;
-    text-align: center;
-    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
+    border: 1px solid #00329f;
+    padding: 4px;
+    outline: none;
+  }
 
-    .tool-item {
-      cursor: pointer;
-      padding: 10px;
-      .name {
-        font-family:
-          PingFangSC,
-          PingFang SC;
-        font-weight: 400;
-        font-size: 14px;
-        color: #0d162a;
-        line-height: 20px;
-        text-align: center;
-        font-style: normal;
+  .selection-area-btn {
+    width: 80px;
+    margin-left: 4px;
+  }
+
+  .grid-show {
+    // background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px),
+    //   linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px);
+    // background-size:
+    //   20px 20px,
+    //   20px 20px;
+
+    width: 100%;
+    height: 100%;
+    background-image: repeating-linear-gradient(
+        to right,
+        rgba(0, 0, 0, 0.1),
+        rgba(0, 0, 0, 0.1) 1px,
+        transparent 1px,
+        transparent 50px
+      ),
+      repeating-linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0.1),
+        rgba(0, 0, 0, 0.1) 1px,
+        transparent 1px,
+        transparent 50px
+      );
+  }
+
+  .svg-div {
+    z-index: 99999;
+
+    svg {
+      cursor: crosshair;
+
+      path.selected {
+        stroke: blue;
       }
     }
   }
-}
 
-.input-box-class {
-  position: absolute;
-  border: 1px solid #00329f;
-  padding: 4px;
-  outline: none;
-}
+  .tool-active {
+    background: #ebf1ff;
+    border-bottom: 2px solid #1677ff;
+  }
 
-.selection-area-btn {
-  width: 80px;
-  margin-left: 4px;
-}
-
-.grid-show {
-  // background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px),
-  //   linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px);
-  // background-size:
-  //   20px 20px,
-  //   20px 20px;
-
-  width: 100%;
-  height: 100%;
-  background-image: repeating-linear-gradient(
-      to right,
-      rgba(0, 0, 0, 0.1),
-      rgba(0, 0, 0, 0.1) 1px,
-      transparent 1px,
-      transparent 50px
-    ),
-    repeating-linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0.1),
-      rgba(0, 0, 0, 0.1) 1px,
-      transparent 1px,
-      transparent 50px
-    );
-}
-
-.svg-div {
-  z-index: 99999;
-
-  svg {
-    cursor: crosshair;
-
-    path.selected {
-      stroke: blue;
-    }
+  .right-tool-active {
+    background: #ebf1ff !important;
   }
 }
 
@@ -2205,13 +2341,4 @@ onMounted(() => {
     border-bottom: 1px solid #e9e9e9;
   }
 }
-
-.tool-active {
-  background: #ebf1ff;
-  border-bottom: 2px solid #1677ff;
-}
-
-.right-tool-active {
-  background: #ebf1ff !important;
-}
 </style>
diff --git a/src/views/mapPage/realTimeMap/test.vue b/src/views/mapPage/realTimeMap/test.vue
index e7881d2d..3b3651d0 100644
--- a/src/views/mapPage/realTimeMap/test.vue
+++ b/src/views/mapPage/realTimeMap/test.vue
@@ -1,190 +1,127 @@
 <template>
-  <div>
-    <svg
-      ref="svgElement"
-      :width="width"
-      :height="height"
-      @mousedown="startDrawing"
-      @mousemove="drawLine"
-      @mouseup="stopDrawing"
-      @mouseleave="stopDrawing"
-    >
-      <!-- 渲染所有点 -->
-      <circle
-        v-for="(point, index) in points"
+  <div class="box">
+    <svg :width="boxWidth" :height="boxHeight">
+      <path
+        v-for="(curve, index) in curves"
         :key="index"
-        :cx="point.x"
-        :cy="point.y"
+        :d="getCurvePath(curve)"
+        :stroke="curve.isSelected ? 'red' : 'blue'"
+        stroke-width="2"
+        fill="none"
+        @mousedown="selectCurve(index)"
+      />
+      <circle
+        v-for="(curve, index) in curves"
+        :key="'start-' + index"
+        :cx="curve.startControlX"
+        :cy="curve.startControlY"
         r="5"
-        fill="red"
-        @mousedown="startFromPoint(index, $event)"
+        fill="green"
+        @mousedown="startDrag(index, 'start')"
       />
-
-      <!-- 渲染所有直线 -->
-      <path
-        v-for="(line, index) in lines"
-        :key="'line-' + index"
-        :d="`M ${line.startPointX} ${line.startPointY} L ${line.endPointX} ${line.endPointY}`"
-        stroke="black"
-        stroke-width="2"
-        fill="none"
-      />
-
-      <!-- 实时绘制当前直线 -->
-      <path
-        v-if="isDrawing"
-        :d="`M ${startX} ${startY} L ${currentX} ${currentY}`"
-        stroke="blue"
-        stroke-width="2"
-        fill="none"
+      <circle
+        v-for="(curve, index) in curves"
+        :key="'end-' + index"
+        :cx="curve.endControlX"
+        :cy="curve.endControlY"
+        r="5"
+        fill="green"
+        @mousedown="startDrag(index, 'end')"
       />
     </svg>
-
-    <!-- 显示直线数据 -->
-    <div>
-      <h3>直线数据：</h3>
-      <pre>{{ lines }}</pre>
-    </div>
   </div>
 </template>
 
-<script>
+<script setup>
 import { ref } from 'vue'
 
-export default {
-  setup() {
-    const svgElement = ref(null) // SVG 元素的引用
-    const width = 800 // SVG 宽度
-    const height = 600 // SVG 高度
+// 盒子的宽度和高度
+const boxWidth = ref(800)
+const boxHeight = ref(600)
 
-    // 点位数据
-    const points = ref([
-      { x: 10, y: 10 },
-      { x: 30, y: 100 },
-      { x: 40, y: 40 },
-      { x: 230, y: 400 },
-      { x: 750, y: 640 }
-    ])
+// 初始点位数据
+const curves = ref([
+  {
+    startX: 100,
+    startY: 100,
+    endX: 300,
+    endY: 100,
+    startControlX: 100,
+    startControlY: 100,
+    endControlX: 300,
+    endControlY: 100,
+    isSelected: false
+  },
+  {
+    startX: 200,
+    startY: 200,
+    endX: 400,
+    endY: 200,
+    startControlX: 200,
+    startControlY: 200,
+    endControlX: 400,
+    endControlY: 400,
+    isSelected: false
+  }
+])
 
-    // 直线数据
-    const lines = ref([])
+// 当前拖动的曲线索引和控制点类型
+const dragging = ref({
+  index: null,
+  type: null
+})
 
-    // 当前绘制的直线状态
-    const isDrawing = ref(false)
-    const startX = ref(0)
-    const startY = ref(0)
-    const currentX = ref(0)
-    const currentY = ref(0)
-    const startPointIndex = ref(null) // 起始点的索引
+// 获取曲线的路径字符串
+const getCurvePath = (curve) => {
+  return `M${curve.startX},${curve.startY} C${curve.startControlX},${curve.startControlY} ${curve.endControlX},${curve.endControlY} ${curve.endX},${curve.endY}`
+}
 
-    // 从点开始绘制
-    const startFromPoint = (index, event) => {
-      const point = points.value[index]
-      startX.value = point.x
-      startY.value = point.y
-      startPointIndex.value = index
-      isDrawing.value = true
-      event.preventDefault() // 防止默认行为
-    }
+// 选中曲线
+const selectCurve = (index) => {
+  curves.value.forEach((curve, i) => {
+    curve.isSelected = i === index
+  })
+  console.log('Selected curve:', curves.value[index])
+}
 
-    // 实时绘制
-    const drawLine = (event) => {
-      if (isDrawing.value) {
-        const rect = svgElement.value.getBoundingClientRect()
-        currentX.value = event.clientX - rect.left
-        currentY.value = event.clientY - rect.top
-      }
-    }
+// 开始拖动控制点
+const startDrag = (index, type) => {
+  dragging.value = { index, type }
+  window.addEventListener('mousemove', handleDrag)
+  window.addEventListener('mouseup', endDrag)
+}
 
-    // 结束绘制
-    const stopDrawing = () => {
-      if (isDrawing.value) {
-        // 找到最近的终点
-        const endPointIndex = findClosestPoint(currentX.value, currentY.value)
+// 处理拖动事件
+const handleDrag = (event) => {
+  if (dragging.value.index !== null) {
+    const curve = curves.value[dragging.value.index]
+    let newX = event.offsetX
+    let newY = event.offsetY
 
-        if (endPointIndex !== null && endPointIndex !== startPointIndex.value) {
-          const endPoint = points.value[endPointIndex]
-          const newLine = {
-            startPointX: startX.value,
-            startPointY: startY.value,
-            endPointX: endPoint.x,
-            endPointY: endPoint.y
-          }
+    // 确保控制点不超出盒子范围
+    newX = Math.max(0, Math.min(newX, boxWidth.value))
+    newY = Math.max(0, Math.min(newY, boxHeight.value))
 
-          // 检查是否已存在相同的直线
-          const isDuplicate = lines.value.some(
-            (line) =>
-              (line.startPointX === newLine.startPointX &&
-                line.startPointY === newLine.startPointY &&
-                line.endPointX === newLine.endPointX &&
-                line.endPointY === newLine.endPointY) ||
-              (line.startPointX === newLine.endPointX &&
-                line.startPointY === newLine.endPointY &&
-                line.endPointX === newLine.startPointX &&
-                line.endPointY === newLine.startPointY)
-          )
-
-          if (!isDuplicate) {
-            // 保存当前直线
-            lines.value.push(newLine)
-          }
-        }
-
-        // 重置状态
-        isDrawing.value = false
-        startX.value = 0
-        startY.value = 0
-        currentX.value = 0
-        currentY.value = 0
-        startPointIndex.value = null
-      }
-    }
-
-    // 找到最近的点
-    const findClosestPoint = (x, y) => {
-      let minDistance = Infinity
-      let closestIndex = null
-
-      points.value.forEach((point, index) => {
-        const distance = Math.sqrt((point.x - x) ** 2 + (point.y - y) ** 2)
-        if (distance < minDistance && distance < 10) {
-          // 10 是点的捕捉范围
-          minDistance = distance
-          closestIndex = index
-        }
-      })
-
-      return closestIndex
-    }
-
-    return {
-      svgElement,
-      width,
-      height,
-      points,
-      lines,
-      isDrawing,
-      startX,
-      startY,
-      currentX,
-      currentY,
-      startFromPoint,
-      drawLine,
-      stopDrawing
+    if (dragging.value.type === 'start') {
+      curve.startControlX = newX
+      curve.startControlY = newY
+    } else {
+      curve.endControlX = newX
+      curve.endControlY = newY
     }
   }
 }
+
+// 结束拖动
+const endDrag = () => {
+  dragging.value = { index: null, type: null }
+  window.removeEventListener('mousemove', handleDrag)
+  window.removeEventListener('mouseup', endDrag)
+}
 </script>
 
 <style scoped>
-svg {
-  border: 1px solid #ccc;
-  background-color: #f9f9f9;
-}
-
-pre {
-  background-color: #f5f5f5;
-  padding: 10px;
-  border-radius: 5px;
+.box {
+  border: 1px solid black;
 }
 </style>