diff --git a/.env.local b/.env.local
index a3752946..c22b406f 100644
--- a/.env.local
+++ b/.env.local
@@ -4,7 +4,7 @@ NODE_ENV=development
 VITE_DEV=true
 
 # 请求路径
-VITE_BASE_URL='http://192.168.0.74:48080'
+VITE_BASE_URL='http://192.168.0.172:48080'
 # VITE_BASE_URL='http://192.168.0.189:48080'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
diff --git a/src/views/mapPage/realTimeMap/components-tool/editNodeProperties.vue b/src/views/mapPage/realTimeMap/components-tool/editNodeProperties.vue
index c99936d2..16d96d21 100644
--- a/src/views/mapPage/realTimeMap/components-tool/editNodeProperties.vue
+++ b/src/views/mapPage/realTimeMap/components-tool/editNodeProperties.vue
@@ -229,10 +229,10 @@ const open = (item, list) => {
   console.log(item)
   form.value = item
   form.value.layersNumber = item.dataList.length || ''
-  form.value.deviceId = item.deviceId || item.dataObj.id || ''
+  form.value.deviceId = item?.deviceId || item?.dataObj?.id || ''
   form.value.positionMapId = props.positionMapId
   equipmentList.value = list
-  if (item.dataObj.deviceType) {
+  if (item?.dataObj?.deviceType) {
     deviceInfo.value.deviceType = item.dataObj.deviceType || ''
     getDeviceList()
   } else {
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 c2cc6eb6..e76b9242 100644
--- a/src/views/mapPage/realTimeMap/components-tool/map-scale-tool.vue
+++ b/src/views/mapPage/realTimeMap/components-tool/map-scale-tool.vue
@@ -2,7 +2,12 @@
 <template>
   <div :style="wrapperStyle" class="vue-ruler-wrapper" onselectstart="return false;" ref="el">
     <section>
-      <div ref="horizontalRuler" class="vue-ruler-h" @mousedown.stop="horizontalDragRuler">
+      <div
+        ref="horizontalRuler"
+        class="vue-ruler-h"
+        @mousedown.stop="horizontalDragRuler"
+        :style="{ width: width + 'px' }"
+      >
         <span
           v-for="(item, index) in xScale"
           :key="index"
@@ -11,7 +16,12 @@
           >{{ item.id }}</span
         >
       </div>
-      <div ref="verticalRuler" class="vue-ruler-v" @mousedown.stop="verticalDragRuler">
+      <div
+        ref="verticalRuler"
+        class="vue-ruler-v"
+        @mousedown.stop="verticalDragRuler"
+        :style="{ height: height + 'px' }"
+      >
         <span
           v-for="(item, index) in yScale"
           :key="index"
@@ -82,6 +92,12 @@ const props = defineProps({
     type: Number,
     default: 100,
     validator: (val) => val % 10 === 0
+  },
+  width: {
+    type: Number
+  },
+  height: {
+    type: Number
   }
 })
 
@@ -166,12 +182,10 @@ onBeforeUnmount(() => {
   off(document, 'mouseup', dottedLineUp)
   off(window, 'resize', windowResize)
 })
-//function
 const init = () => {
   box()
   scaleCalc()
 }
-
 const windowResize = () => {
   xScale.value = [{ id: 0 }]
   yScale.value = [{ id: 0 }]
@@ -193,8 +207,10 @@ const box = () => {
     getCalcRevise(xScale.value, contentLeft)
     getCalcRevise(yScale.value, contentTop)
   }
-  windowWidth.value = document.documentElement.clientWidth - leftSpacing
-  windowHeight.value = document.documentElement.clientHeight - topSpacing - 80
+  // 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
 }
@@ -204,8 +220,8 @@ const setSpacing = () => {
 }
 // 计算刻度
 const scaleCalc = () => {
-  getCalc(xScale.value, windowWidth.value)
-  getCalc(yScale.value, windowHeight.value)
+  getCalc(xScale.value, props.width)
+  getCalc(yScale.value, props.height)
 }
 
 //获取刻度
@@ -360,7 +376,7 @@ const dragVerticalLine = (id) => {
 }
 
 .vue-ruler-h {
-  width: calc(100% - 18px);
+  // width: calc(100% - 18px);
   background-color: #333;
   height: 18px;
   left: 18px;
@@ -371,7 +387,7 @@ const dragVerticalLine = (id) => {
 
 .vue-ruler-v {
   width: 18px;
-  height: 85vh;
+  // height: 85vh;
   top: 18px;
   opacity: 0.6;
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAyCAMAAABmvHtTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRFMzMzAAAA////BqjYlAAAACBJREFUeNpiYGBEBwwMTGiAakI0NX7U9aOuHyGuBwgwAH6bBkAR6jkzAAAAAElFTkSuQmCC)
diff --git a/src/views/mapPage/realTimeMap/editMap.vue b/src/views/mapPage/realTimeMap/editMap.vue
index ce1f501f..67bda0ab 100644
--- a/src/views/mapPage/realTimeMap/editMap.vue
+++ b/src/views/mapPage/realTimeMap/editMap.vue
@@ -1,146 +1,191 @@
 <template>
-  <div class="top-tool">
-    <div class="top-tool-list">
-      <div v-for="item in state.topToolList" :key="item.switchType" class="top-tool-item">
-        <el-popover
-          placement="bottom"
-          :width="170"
-          trigger="click"
-          v-if="item.switchType === 'move' || item.switchType === 'revolve'"
-          :disabled="currentItemIndex === -1"
-        >
-          <template #reference>
-            <div
-              class="tool-item"
-              :class="
-                toolbarSwitchType === item.switchType
-                  ? 'tool-active'
-                  : item.isActive
-                    ? 'right-tool-active'
-                    : ''
-              "
-              @click="toolbarClick(item)"
-            >
-              <Icon :icon="item.icon" :size="24" />
-              <div class="name"> {{ item.name }} </div>
-            </div>
-          </template>
-          <!-- 位置 -->
-          <el-form :model="state.moveForm" v-if="item.switchType === 'move'" class="mt-2">
-            <el-form-item label="X">
-              <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-form-item>
-            <div style="text-align: right">
-              <el-button
-                size="small"
-                style="width: 64px; height: 30px; background: #00329f"
-                color="#00329F"
-                @click="moveFormSubmit"
-                >确认</el-button
+  <div class="edit-map-page">
+    <div class="top-tool">
+      <div class="top-tool-list">
+        <div v-for="item in state.topToolList" :key="item.switchType" class="top-tool-item">
+          <el-popover
+            placement="bottom"
+            :width="170"
+            trigger="click"
+            v-if="item.switchType === 'move' || item.switchType === 'revolve'"
+            :disabled="currentItemIndex === -1"
+          >
+            <template #reference>
+              <div
+                class="tool-item"
+                :class="
+                  toolbarSwitchType === item.switchType
+                    ? 'tool-active'
+                    : item.isActive
+                      ? 'right-tool-active'
+                      : ''
+                "
+                @click="toolbarClick(item)"
+              >
+                <Icon :icon="item.icon" :size="24" />
+                <div class="name"> {{ item.name }} </div>
+              </div>
+            </template>
+            <!-- 位置 -->
+            <el-form :model="state.moveForm" v-if="item.switchType === 'move'" class="mt-2">
+              <el-form-item label="X">
+                <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-form-item>
+              <div style="text-align: right">
+                <el-button
+                  size="small"
+                  style="width: 64px; height: 30px; background: #00329f"
+                  color="#00329F"
+                  @click="moveFormSubmit"
+                  >确认</el-button
+                >
+              </div>
+            </el-form>
+            <!-- 旋转 -->
+            <el-form :model="state.rotationForm" v-if="item.switchType === 'revolve'" class="mt-2">
+              <el-form-item label="角度">
+                <el-input v-model="state.rotationForm.angle" placeholder="请输入" />
+              </el-form-item>
+              <div style="text-align: right">
+                <el-button
+                  size="small"
+                  style="width: 64px; height: 30px; background: #00329f"
+                  color="#00329F"
+                  @click="rotationFormSubmit"
+                  >确认</el-button
+                >
+              </div>
+            </el-form>
+          </el-popover>
+          <!-- 线库 -->
+          <el-popover
+            placement="bottom"
+            trigger="click"
+            v-else-if="item.switchType === 'lineLibrary'"
+            :popper-style="{ padding: '0px' }"
+          >
+            <template #reference>
+              <div
+                class="tool-item"
+                :class="
+                  toolbarSwitchType === 'lineLibrary' ||
+                  toolbarSwitchType === 'createLineLibrary' ||
+                  toolbarSwitchType === 'lineLibraryManage'
+                    ? 'tool-active'
+                    : item.isActive
+                      ? 'right-tool-active'
+                      : ''
+                "
+                @click="toolbarClick(item)"
+              >
+                <Icon :icon="item.icon" :size="24" />
+                <div class="name"> {{ item.name }} </div>
+              </div>
+            </template>
+            <div v-if="item.switchType === 'lineLibrary'" class="drop-down-menu">
+              <div
+                class="drop-down-menu-item"
+                :class="toolbarSwitchType === 'createLineLibrary' ? 'right-tool-active' : ''"
+                @click="toolbarClick({ switchType: 'createLineLibrary' })"
+                >生成线库</div
+              >
+              <div
+                class="drop-down-menu-item"
+                :class="toolbarSwitchType === 'lineLibraryManage' ? 'right-tool-active' : ''"
+                @click="toolbarClick({ switchType: 'lineLibraryManage' })"
+                >线库管理</div
               >
             </div>
-          </el-form>
-          <!-- 旋转 -->
-          <el-form :model="state.rotationForm" v-if="item.switchType === 'revolve'" class="mt-2">
-            <el-form-item label="角度">
-              <el-input v-model="state.rotationForm.angle" placeholder="请输入" />
-            </el-form-item>
-            <div style="text-align: right">
-              <el-button
-                size="small"
-                style="width: 64px; height: 30px; background: #00329f"
-                color="#00329F"
-                @click="rotationFormSubmit"
-                >确认</el-button
+          </el-popover>
+          <!-- 区域  -->
+          <el-popover
+            placement="bottom"
+            trigger="click"
+            v-else-if="item.switchType === 'region'"
+            :popper-style="{ padding: '0px' }"
+          >
+            <template #reference>
+              <div
+                class="tool-item"
+                :class="
+                  toolbarSwitchType === 'region' ||
+                  toolbarSwitchType === 'createRegion' ||
+                  toolbarSwitchType === 'regionManage'
+                    ? 'tool-active'
+                    : item.isActive
+                      ? 'right-tool-active'
+                      : ''
+                "
+                @click="toolbarClick(item)"
+              >
+                <Icon :icon="item.icon" :size="24" />
+                <div class="name"> {{ item.name }} </div>
+              </div>
+            </template>
+            <div v-if="item.switchType === 'region'" class="drop-down-menu">
+              <div
+                class="drop-down-menu-item"
+                :class="toolbarSwitchType === 'createRegion' ? 'right-tool-active' : ''"
+                @click="toolbarClick({ switchType: 'createRegion' })"
+                >生成物料区域</div
+              >
+              <div
+                class="drop-down-menu-item"
+                :class="toolbarSwitchType === 'regionManage' ? 'right-tool-active' : ''"
+                @click="toolbarClick({ switchType: 'regionManage' })"
+                >物料区域管理</div
               >
             </div>
-          </el-form>
-        </el-popover>
-        <!-- 线库 -->
-        <el-popover
-          placement="bottom"
-          trigger="click"
-          v-else-if="item.switchType === 'lineLibrary'"
-          :popper-style="{ padding: '0px' }"
-        >
-          <template #reference>
-            <div
-              class="tool-item"
-              :class="
-                toolbarSwitchType === 'lineLibrary' ||
-                toolbarSwitchType === 'createLineLibrary' ||
-                toolbarSwitchType === 'lineLibraryManage'
-                  ? 'tool-active'
-                  : item.isActive
-                    ? 'right-tool-active'
-                    : ''
-              "
-              @click="toolbarClick(item)"
-            >
-              <Icon :icon="item.icon" :size="24" />
-              <div class="name"> {{ item.name }} </div>
-            </div>
-          </template>
-          <div v-if="item.switchType === 'lineLibrary'" class="drop-down-menu">
-            <div
-              class="drop-down-menu-item"
-              :class="toolbarSwitchType === 'createLineLibrary' ? 'right-tool-active' : ''"
-              @click="toolbarClick({ switchType: 'createLineLibrary' })"
-              >生成线库</div
-            >
-            <div
-              class="drop-down-menu-item"
-              :class="toolbarSwitchType === 'lineLibraryManage' ? 'right-tool-active' : ''"
-              @click="toolbarClick({ switchType: 'lineLibraryManage' })"
-              >线库管理</div
-            >
+          </el-popover>
+          <div
+            v-else
+            class="tool-item"
+            :class="
+              toolbarSwitchType === item.switchType
+                ? 'tool-active'
+                : item.isActive
+                  ? 'right-tool-active'
+                  : ''
+            "
+            @click="toolbarClick(item)"
+          >
+            <Icon :icon="item.icon" :size="24" />
+            <div class="name"> {{ item.name }} </div>
           </div>
-        </el-popover>
-        <!-- 区域  -->
-        <el-popover
-          placement="bottom"
-          trigger="click"
-          v-else-if="item.switchType === 'region'"
-          :popper-style="{ padding: '0px' }"
-        >
-          <template #reference>
-            <div
-              class="tool-item"
-              :class="
-                toolbarSwitchType === 'region' ||
+          <!-- 分隔线 -->
+          <div
+            class="line"
+            v-if="
+              item.switchType === 'saveAs' ||
+              item.switchType === 'delete' ||
+              item.switchType === 'grid' ||
+              (item.switchType === 'next' &&
+                (toolbarSwitchType === 'createLineLibrary' ||
+                  toolbarSwitchType === 'createRegion' ||
+                  toolbarSwitchType === 'drawRoute'))
+            "
+          ></div>
+          <el-button
+            v-if="
+              item.switchType === 'next' &&
+              (toolbarSwitchType === 'createLineLibrary' ||
                 toolbarSwitchType === 'createRegion' ||
-                toolbarSwitchType === 'regionManage'
-                  ? 'tool-active'
-                  : item.isActive
-                    ? 'right-tool-active'
-                    : ''
-              "
-              @click="toolbarClick(item)"
-            >
-              <Icon :icon="item.icon" :size="24" />
-              <div class="name"> {{ item.name }} </div>
-            </div>
-          </template>
-          <div v-if="item.switchType === 'region'" class="drop-down-menu">
-            <div
-              class="drop-down-menu-item"
-              :class="toolbarSwitchType === 'createRegion' ? 'right-tool-active' : ''"
-              @click="toolbarClick({ switchType: 'createRegion' })"
-              >生成物料区域</div
-            >
-            <div
-              class="drop-down-menu-item"
-              :class="toolbarSwitchType === 'regionManage' ? 'right-tool-active' : ''"
-              @click="toolbarClick({ switchType: 'regionManage' })"
-              >物料区域管理</div
-            >
-          </div>
-        </el-popover>
+                toolbarSwitchType === 'drawRoute')
+            "
+            type="danger"
+            class="selection-area-btn"
+            @click="clickDrawSelectionArea"
+            >确定</el-button
+          >
+        </div>
+      </div>
+      <div class="right-tool-list" v-if="state.isShowToolbar">
         <div
-          v-else
+          v-for="item in state.rightToolList"
+          :key="item.switchType"
           class="tool-item"
           :class="
             toolbarSwitchType === item.switchType
@@ -154,377 +199,360 @@
           <Icon :icon="item.icon" :size="24" />
           <div class="name"> {{ item.name }} </div>
         </div>
-        <!-- 分隔线 -->
-        <div
-          class="line"
-          v-if="
-            item.switchType === 'saveAs' ||
-            item.switchType === 'delete' ||
-            item.switchType === 'grid' ||
-            (item.switchType === 'next' &&
-              (toolbarSwitchType === 'createLineLibrary' ||
-                toolbarSwitchType === 'createRegion' ||
-                toolbarSwitchType === 'drawRoute'))
-          "
-        ></div>
-        <el-button
-          v-if="
-            item.switchType === 'next' &&
-            (toolbarSwitchType === 'createLineLibrary' ||
-              toolbarSwitchType === 'createRegion' ||
-              toolbarSwitchType === 'drawRoute')
-          "
-          type="danger"
-          class="selection-area-btn"
-          @click="clickDrawSelectionArea"
-          >确定</el-button
-        >
       </div>
     </div>
-    <div class="right-tool-list" v-if="state.isShowToolbar">
-      <div
-        v-for="item in state.rightToolList"
-        :key="item.switchType"
-        class="tool-item"
-        :class="
-          toolbarSwitchType === item.switchType
-            ? 'tool-active'
-            : item.isActive
-              ? 'right-tool-active'
-              : ''
-        "
-        @click="toolbarClick(item)"
-      >
-        <Icon :icon="item.icon" :size="24" />
-        <div class="name"> {{ item.name }} </div>
-      </div>
-    </div>
-  </div>
 
-  <div class="map-container" ref="mapContainer" :style="{ cursor: state.cursorStyle }">
-    <div
-      class="map-bg"
-      :style="{
-        backgroundImage: `url(${imgBgObj.imgUrl})`,
-        transform: `scale(${state.imageChangeMultiple})`,
-        transformOrigin: '0 0',
-        width: `${imgBgObj.width}px`,
-        height: `${imgBgObj.height}px`
-      }"
-      @mousedown="startDrawSelection"
-      @mousemove="updateDrawSelection"
-      @mouseup="endDrawSelection"
-    >
-      <div
-        ref="mapBackgroundRef"
-        class="map-box-inner"
-        @click="mapClick"
-        :class="state.isShowGrid ? 'grid-show' : ''"
-        :style="{
-          width: imgBgObj.width + 'px',
-          height: imgBgObj.height + 'px'
-        }"
-        v-if="interfaceRefreshed"
+    <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"
       >
-        <VueDragResizeRotate
-          v-for="(item, index) in allHistoryList[currentIndex]"
-          :key="item.locationX"
-          :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)"
-          :r="item.angle"
-          @rotatestop="(degree) => rotateEnd(degree, item, index)"
-          @dragstop="(x, y) => dragEnd(x, y, item, index)"
-          @resizestop="(x, y, width, height) => resizeEnd(x, y, width, height, item, index)"
-          @activated="() => activatedHandle(item, index)"
-          @deactivated="deactivatedHandle"
-          :draggable="item.draggable && !state.prohibitedOperation"
-          :resizable="item.resizable && !state.prohibitedOperation"
-          :rotatable="item.rotatable && !state.prohibitedOperation"
-          :lock-aspect-ratio="item.lockAspectRatio"
-          style="border: none; z-index: 999"
+        <div
+          class="map-bg"
+          :style="{
+            backgroundImage: `url(${imgBgObj.imgUrl})`,
+            transform: `scale(${state.imageChangeMultiple})`,
+            transformOrigin: '0 0',
+            width: `${imgBgObj.width}px`,
+            height: `${imgBgObj.height}px`
+          }"
+          @mousedown="startDrawSelection"
+          @mousemove="updateDrawSelection"
+          @mouseup="endDrawSelection"
         >
-          <!-- 1 路径点 -->
           <div
-            v-if="item.type === 1 && item.layerSelectionShow"
+            ref="mapBackgroundRef"
+            class="map-box-inner"
+            @click="mapClick"
+            :class="state.isShowGrid ? 'grid-show' : ''"
             :style="{
-              width: item.locationWide + 'px',
-              height: item.locationDeep + 'px',
-              backgroundColor: currentItemIndex === index ? '#f48924' : '#000',
-              borderRadius: '50%',
+              width: imgBgObj.width + 'px',
+              height: imgBgObj.height + 'px'
+            }"
+            v-if="interfaceRefreshed"
+          >
+            <VueDragResizeRotate
+              v-for="(item, index) in allHistoryList[currentIndex]"
+              :key="item.locationX"
+              :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)"
+              :r="item.angle"
+              @rotatestop="(degree) => rotateEnd(degree, item, index)"
+              @dragstop="(x, y) => dragEnd(x, y, item, index)"
+              @resizestop="(x, y, width, height) => resizeEnd(x, y, width, height, item, index)"
+              @activated="() => activatedHandle(item, index)"
+              @deactivated="deactivatedHandle"
+              :draggable="!state.prohibitedOperation && item.draggable"
+              :resizable="!state.prohibitedOperation && item.resizable"
+              :rotatable="!state.prohibitedOperation && item.rotatable"
+              :lock-aspect-ratio="item.lockAspectRatio"
+              style="border: none; z-index: 999"
+            >
+              <!-- 节点合集 -->
+              <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
+                  }"
+                >
+                </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>
+            </VueDragResizeRotate>
+
+            <div v-if="imgBgObj.width && imgBgObj.height">
+              <svg
+                :width="imgBgObj.width"
+                :height="imgBgObj.height"
+                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)"
+                      :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>
+                </template>
+              </svg>
+            </div>
+          </div>
+
+          <!-- 框选区域 -->
+          <div
+            v-for="(box, index) in state.allDrawSelectionAreaBox"
+            :key="index"
+            :style="{
+              position: 'absolute',
+              left: `${box.x}px`,
+              top: `${box.y}px`,
+              width: `${box.width}px`,
+              height: `${box.height}px`,
+              border: '2px dashed #007bff',
+              backgroundColor: 'rgba(0, 123, 255, 0.1)',
               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.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>
+          <!-- 当前框选区域 -->
           <div
-            v-if="item.type === 7 && item.layerSelectionShow"
+            v-if="state.drawSelectionAreaShow"
             :style="{
-              color: item.fontColor,
-              fontSize: item.fontSize + 'px',
-              fontFamily: item.fontFamily,
-              border: currentItemIndex === index ? '1px dashed #000' : 'none'
+              position: 'absolute',
+              left: `${state.drawSelectionAreaBox.x}px`,
+              top: `${state.drawSelectionAreaBox.y}px`,
+              width: `${state.drawSelectionAreaBox.width}px`,
+              height: `${state.drawSelectionAreaBox.height}px`,
+              border: '2px dashed #007bff',
+              backgroundColor: 'rgba(0, 123, 255, 0.1)',
+              zIndex: 9999
             }"
-          >
-            {{ item.text }}
-          </div>
-        </VueDragResizeRotate>
+          ></div>
 
-        <div v-if="imgBgObj.width && imgBgObj.height">
-          <svg
-            :width="imgBgObj.width"
-            :height="imgBgObj.height"
-            style="position: absolute; top: 0; left: 0; z-index: 9"
-          >
-            <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"
-                @click="handleChooseRoute(curve, index)"
-                @dblclick="handleEditRoute(curve, index)"
-              />
+          <!-- 测距 绘制点和连线 -->
+          <template v-if="state.measureDistancesPoints.length > 0">
+            <div
+              v-for="(point, index) in state.measureDistancesPoints"
+              :key="index"
+              :style="{
+                position: 'absolute',
+                left: `${point.x}px`,
+                top: `${point.y}px`,
+                width: '10px',
+                height: '10px',
+                backgroundColor: '#00329F',
+                borderRadius: '50%'
+              }"
+            ></div>
+            <div
+              v-if="state.measureDistancesPoints.length === 2"
+              :style="{
+                position: 'absolute',
+                left: `${state.measureDistancesPoints[0].x + 5}px`,
+                top: `${state.measureDistancesPoints[0].y + 5}px`,
+                width: `${computedLineWidth}px`,
+                height: '2px',
+                backgroundColor: '#00329F',
+                transform: `rotate(${computedLineAngle}deg)`,
+                transformOrigin: '0 0',
+                textAlign: 'center'
+              }"
+            >
+              距离：{{ state.measureDistancesNum.toFixed(2) }}</div
+            >
+          </template>
 
-              <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
-                  :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
-                  :cx="curve.beginControlX"
-                  :cy="curve.beginControlY"
-                  r="5"
-                  :fill="curve.isSelected ? '#f48924' : '#00329F'"
-                  @mousedown="startDrag(curve, index, 'start')"
-                />
-                <circle
-                  :cx="curve.endControlX"
-                  :cy="curve.endControlY"
-                  r="5"
-                  :fill="curve.isSelected ? '#f48924' : '#00329F'"
-                  @mousedown="startDrag(curve, index, 'end')"
-                />
-              </template>
-            </template>
-          </svg>
+          <!-- 文字输入区域 -->
+          <input
+            v-if="state.showInputBox"
+            ref="inputBoxRef"
+            v-model="state.inputBoxValue"
+            @keyup.enter="handleInputEnd"
+            @blur="handleInputEnd"
+            :style="{
+              fontSize: state.inputBoxStyle.fontSize + 'px',
+              fontFamily: state.inputBoxStyle.fontFamily,
+              color: state.inputBoxStyle.fontColor,
+              left: state.inputBoxStyle.locationX + 'px',
+              top: state.inputBoxStyle.locationY + 'px'
+            }"
+            :maxlength="30"
+            class="input-box-class"
+          />
         </div>
-      </div>
-
-      <!-- 框选区域 -->
-      <div
-        v-for="(box, index) in state.allDrawSelectionAreaBox"
-        :key="index"
-        :style="{
-          position: 'absolute',
-          left: `${box.x}px`,
-          top: `${box.y}px`,
-          width: `${box.width}px`,
-          height: `${box.height}px`,
-          border: '2px dashed #007bff',
-          backgroundColor: 'rgba(0, 123, 255, 0.1)',
-          zIndex: 999
-        }"
-      ></div>
-      <!-- 当前框选区域 -->
-      <div
-        v-if="state.drawSelectionAreaShow"
-        :style="{
-          position: 'absolute',
-          left: `${state.drawSelectionAreaBox.x}px`,
-          top: `${state.drawSelectionAreaBox.y}px`,
-          width: `${state.drawSelectionAreaBox.width}px`,
-          height: `${state.drawSelectionAreaBox.height}px`,
-          border: '2px dashed #007bff',
-          backgroundColor: 'rgba(0, 123, 255, 0.1)',
-          zIndex: 9999
-        }"
-      ></div>
-
-      <!-- 测距 绘制点和连线 -->
-      <template v-if="state.measureDistancesPoints.length > 0">
-        <div
-          v-for="(point, index) in state.measureDistancesPoints"
-          :key="index"
-          :style="{
-            position: 'absolute',
-            left: `${point.x}px`,
-            top: `${point.y}px`,
-            width: '10px',
-            height: '10px',
-            backgroundColor: '#00329F',
-            borderRadius: '50%'
-          }"
-        ></div>
-        <div
-          v-if="state.measureDistancesPoints.length === 2"
-          :style="{
-            position: 'absolute',
-            left: `${state.measureDistancesPoints[0].x + 5}px`,
-            top: `${state.measureDistancesPoints[0].y + 5}px`,
-            width: `${computedLineWidth}px`,
-            height: '2px',
-            backgroundColor: '#00329F',
-            transform: `rotate(${computedLineAngle}deg)`,
-            transformOrigin: '0 0',
-            textAlign: 'center'
-          }"
-        >
-          距离：{{ state.measureDistancesNum.toFixed(2) }}</div
-        >
-      </template>
-
-      <!-- 文字输入区域 -->
-      <input
-        v-if="state.showInputBox"
-        ref="inputBoxRef"
-        v-model="state.inputBoxValue"
-        @keyup.enter="handleInputEnd"
-        @blur="handleInputEnd"
-        :style="{
-          fontSize: state.inputBoxStyle.fontSize + 'px',
-          fontFamily: state.inputBoxStyle.fontFamily,
-          color: state.inputBoxStyle.fontColor,
-          left: state.inputBoxStyle.locationX + 'px',
-          top: state.inputBoxStyle.locationY + 'px'
-        }"
-        :maxlength="30"
-        class="input-box-class"
-      />
+      </map-scale-tool>
     </div>
-  </div>
 
-  <!-- 节点编辑 -->
-  <editNodeProperties
-    ref="editNodePropertiesRef"
-    :positionMapId="imgBgObj.positionMapId"
-    @submitNodeSuccess="submitNodeSuccess"
-  />
-  <!-- 文字输入弹窗 -->
-  <textFormToolDialog
-    ref="textFormToolDialogRef"
-    v-if="state.textFormToolShow"
-    :inputBoxStyle="state.inputBoxStyle"
-    @textFormSuccess="textFormSuccess"
-  />
-  <!-- 图层选择 -->
-  <layerSelectionToolDialog
-    v-if="state.isShowLayer"
-    ref="layerSelectionToolDialogRef"
-    @layerSelectionSuccess="layerSelectionSuccess"
-  />
-  <!-- 设备弹窗选择 -->
-  <equipmentToolDialog ref="equipmentToolDialogRef" :positionMapId="imgBgObj.positionMapId" />
-  <!-- 区域选择 -->
-  <itemAreaSettingDialog ref="itemAreaSettingDialogRef" :positionMapId="imgBgObj.positionMapId" />
-  <!-- 线库设置 -->
-  <lineLibrarySettingDialog
-    ref="lineLibrarySettingDialogRef"
-    :positionMapId="imgBgObj.positionMapId"
-  />
-  <!-- 编辑地图路线 -->
-  <editMapRouteDialog
-    ref="editMapRouteDialogRef"
-    @editMapRouteDialogSubmit="editMapRouteDialogSubmit"
-    :imgBgObj="imgBgObj"
-  />
-  <!-- 线库管理 -->
-  <lineLibraryManagementDialog
-    ref="lineLibraryManagementDialogRef"
-    :positionMapId="imgBgObj.positionMapId"
-  />
-  <!-- 区域管理 -->
-  <itemAreaManagementDialog
-    ref="itemAreaManagementDialogRef"
-    :positionMapId="imgBgObj.positionMapId"
-  />
+    <!-- 节点编辑 -->
+    <editNodeProperties
+      ref="editNodePropertiesRef"
+      :positionMapId="imgBgObj.positionMapId"
+      @submitNodeSuccess="submitNodeSuccess"
+    />
+    <!-- 文字输入弹窗 -->
+    <textFormToolDialog
+      ref="textFormToolDialogRef"
+      v-if="state.textFormToolShow"
+      :inputBoxStyle="state.inputBoxStyle"
+      @textFormSuccess="textFormSuccess"
+    />
+    <!-- 图层选择 -->
+    <layerSelectionToolDialog
+      v-if="state.isShowLayer"
+      ref="layerSelectionToolDialogRef"
+      @layerSelectionSuccess="layerSelectionSuccess"
+    />
+    <!-- 设备弹窗选择 -->
+    <equipmentToolDialog ref="equipmentToolDialogRef" :positionMapId="imgBgObj.positionMapId" />
+    <!-- 区域选择 -->
+    <itemAreaSettingDialog ref="itemAreaSettingDialogRef" :positionMapId="imgBgObj.positionMapId" />
+    <!-- 线库设置 -->
+    <lineLibrarySettingDialog
+      ref="lineLibrarySettingDialogRef"
+      :positionMapId="imgBgObj.positionMapId"
+    />
+    <!-- 编辑地图路线 -->
+    <editMapRouteDialog
+      ref="editMapRouteDialogRef"
+      @editMapRouteDialogSubmit="editMapRouteDialogSubmit"
+      :imgBgObj="imgBgObj"
+    />
+    <!-- 线库管理 -->
+    <lineLibraryManagementDialog
+      ref="lineLibraryManagementDialogRef"
+      :positionMapId="imgBgObj.positionMapId"
+    />
+    <!-- 区域管理 -->
+    <itemAreaManagementDialog
+      ref="itemAreaManagementDialogRef"
+      :positionMapId="imgBgObj.positionMapId"
+    />
+  </div>
 </template>
 
 <script setup>
@@ -564,6 +592,11 @@ 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) => {
@@ -952,11 +985,17 @@ const state = reactive({
       isActive: false
     },
     {
-      switchType: 'drawRoute',
+      switchType: 'clickDrawRoute',
       name: '绘制路线',
       icon: 'ep:semi-select',
       isActive: false
     },
+    {
+      switchType: 'drawRoute',
+      name: '框选绘制',
+      icon: 'ep:semi-select',
+      isActive: false
+    },
     {
       switchType: 'editRoute',
       name: '编辑路线',
@@ -1003,7 +1042,11 @@ const state = reactive({
     type: null
   }, //当前拖拽的目标（起点、终点、控制点）
   selectedCurve: '', // 当前选中的曲线
-  svgZIndex: 9999
+  startDrawPointIndex: -1, // 起始点的索引
+  startDrawPoint: null,
+  isDrawing: false,
+  currentDrawX: 0,
+  currentDrawY: 0
 })
 const toolbarClick = (item) => {
   let type = item.switchType
@@ -1060,7 +1103,10 @@ const toolbarClick = (item) => {
 
   //禁止操作 在框选测距等操作时，禁止所有拖动等操作
   if (
-    toolbarSwitchType.value === 'ranging' ||
+    toolbarSwitchType.value === 'drawNodes' ||
+    toolbarSwitchType.value === 'editNode' ||
+    toolbarSwitchType.value === 'clickDrawRoute' ||
+    toolbarSwitchType.value === 'drawRoute' ||
     toolbarSwitchType.value === 'createLineLibrary' ||
     toolbarSwitchType.value === 'createRegion'
   ) {
@@ -1265,63 +1311,180 @@ const rotationFormSubmit = () => {
   allHistoryList.value[currentIndex.value][currentItemIndex.value].angle = state.rotationForm.angle
 }
 
+//鼠标拖动绘制节点
+// 从点开始绘制
+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() // 防止默认行为
+}
 //开始框选绘制
 const startDrawSelection = (event) => {
   if (
-    toolbarSwitchType.value !== 'createLineLibrary' &&
-    toolbarSwitchType.value !== 'createRegion' &&
-    toolbarSwitchType.value !== 'drawRoute'
-  )
+    toolbarSwitchType.value === 'createLineLibrary' ||
+    toolbarSwitchType.value === 'createRegion' ||
+    toolbarSwitchType.value === 'drawRoute'
+  ) {
+    const backgroundRect = mapBackgroundRef.value.getBoundingClientRect()
+
+    const x = disposeEventPoints(event).x
+    const y = disposeEventPoints(event).y
+
+    // 确保点击在背景区域内
+    if (x >= 0 && x <= backgroundRect.width && y >= 0 && y <= backgroundRect.height) {
+      state.drawSelectionAreaShow = true
+      state.drawSelectionStartPoint = { x: x, y: y }
+      state.drawSelectionAreaBox = { x: x, y: y, width: 0, height: 0 }
+    }
+
+    event.preventDefault() // 阻止默认行为（避免选中图片或文本）
     return
-
-  const backgroundRect = mapBackgroundRef.value.getBoundingClientRect()
-
-  const x = disposeEventPoints(event).x
-  const y = disposeEventPoints(event).y
-
-  // 确保点击在背景区域内
-  if (x >= 0 && x <= backgroundRect.width && y >= 0 && y <= backgroundRect.height) {
-    state.drawSelectionAreaShow = true
-    state.drawSelectionStartPoint = { x: x, y: y }
-    state.drawSelectionAreaBox = { x: x, y: y, width: 0, height: 0 }
   }
-
-  // 阻止默认行为（避免选中图片或文本）
-  event.preventDefault()
 }
 // 更新框选区域
 const updateDrawSelection = (event) => {
   if (
-    toolbarSwitchType.value !== 'createLineLibrary' &&
-    toolbarSwitchType.value !== 'createRegion' &&
-    toolbarSwitchType.value !== 'drawRoute'
-  )
-    return
-  if (state.drawSelectionAreaShow) {
-    const x = disposeEventPoints(event).x
-    const y = disposeEventPoints(event).y
+    toolbarSwitchType.value === 'createLineLibrary' ||
+    toolbarSwitchType.value === 'createRegion' ||
+    toolbarSwitchType.value === 'drawRoute'
+  ) {
+    if (state.drawSelectionAreaShow) {
+      const x = disposeEventPoints(event).x
+      const y = disposeEventPoints(event).y
 
-    state.drawSelectionAreaBox.width = Number(x) - Number(state.drawSelectionStartPoint.x)
-    state.drawSelectionAreaBox.height = Number(y) - Number(state.drawSelectionStartPoint.y)
+      state.drawSelectionAreaBox = {
+        x: Math.min(state.drawSelectionStartPoint.x, x),
+        y: Math.min(state.drawSelectionStartPoint.y, y),
+        width: Math.abs(Number(x) - Number(state.drawSelectionStartPoint.x)),
+        height: Math.abs(Number(y) - Number(state.drawSelectionStartPoint.y))
+      }
+    }
+    event.preventDefault() // 阻止默认行为（避免选中图片或文本）
+    return
   }
-  // 阻止默认行为（避免选中图片或文本）
-  event.preventDefault()
+  if (toolbarSwitchType.value === 'clickDrawRoute') {
+    // 实时绘制
+    if (state.isDrawing) {
+      const x = disposeEventPoints(event).x
+      const y = disposeEventPoints(event).y
+
+      state.currentDrawX = x
+      state.currentDrawY = y
+    }
+  }
+  event.preventDefault() // 阻止默认行为（避免选中图片或文本）
+  return
 }
 //结束框选绘制
 const endDrawSelection = (event) => {
   if (
-    toolbarSwitchType.value !== 'createLineLibrary' &&
-    toolbarSwitchType.value !== 'createRegion' &&
-    toolbarSwitchType.value !== 'drawRoute'
-  )
+    toolbarSwitchType.value === 'createLineLibrary' ||
+    toolbarSwitchType.value === 'createRegion' ||
+    toolbarSwitchType.value === 'drawRoute'
+  ) {
+    state.drawSelectionAreaShow = false
+    state.allDrawSelectionAreaBox.push({ ...state.drawSelectionAreaBox })
+    state.drawSelectionAreaBox = { x: 0, y: 0, width: 0, height: 0 }
+    event.preventDefault() // 阻止默认行为（避免选中图片或文本）
     return
-  state.drawSelectionAreaShow = false
-  state.allDrawSelectionAreaBox.push({ ...state.drawSelectionAreaBox })
-  state.drawSelectionAreaBox = { x: 0, y: 0, width: 0, height: 0 }
+  }
+  if (toolbarSwitchType.value === 'clickDrawRoute') {
+    if (state.isDrawing) {
+      // 找到最近的终点
+      const endPointIndex = findClosestPoint(state.currentDrawX, state.currentDrawY)
 
-  // 阻止默认行为（避免选中图片或文本）
-  event.preventDefault()
+      if (endPointIndex !== null && endPointIndex !== state.startDrawPointIndex) {
+        let list = allHistoryList.value[currentIndex.value]
+        const endPoint = list[endPointIndex]
+        const newLine = {
+          startPointX: state.startDrawPoint.locationX,
+          startPointY: state.startDrawPoint.locationY,
+          endPointX: endPoint.locationX,
+          endPointY: endPoint.locationY
+        }
+        // 检查是否已存在相同的直线
+        const isDuplicate = state.mapRouteList.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) {
+          message.warning('此路线已存在')
+        } else {
+          // 保存当前直线
+          state.mapRouteList.push({
+            isSelected: false, //是否选中
+            startingPointId: state.startDrawPoint.id,
+            endPointId: endPoint.id,
+            startPointX: state.startDrawPoint.locationX, //开始点
+            startPointY: state.startDrawPoint.locationY, //开始点
+            endPointX: endPoint.locationX, //结束点
+            endPointY: endPoint.locationY, //结束点
+            actualStartPointX: state.startDrawPoint.actualLocationX, //实际开始点位x轴
+            actualStartPointY: state.startDrawPoint.actualLocationY, //实际开始点位y轴
+            actualEndPointX: endPoint.actualLocationX, //实际结束点位x轴
+            actualEndPointY: endPoint.actualLocationY, //实际结束点位y轴
+            actualBeginControlX: '', //实际开始控制点x轴
+            actualBeginControlY: '', //实际开始控制点y轴
+            actualEndControlX: '', //实际结束控制点x轴
+            actualEndControlY: '', //实际结束控制点y轴
+            beginControlX: 0, //开始控制点x轴
+            beginControlY: 0, //开始控制点y轴
+            endControlX: 0, //结束控制点x轴
+            endControlY: 0, //结束控制点y轴
+            expansionZoneFront: 0, //膨胀区域前
+            expansionZoneAfter: 0, //膨胀区域后
+            expansionZoneLeft: 0, //	膨胀区域左
+            expansionZoneRight: 0, //膨胀区域右
+            method: 0, //行走方法 0.直线 1.上左曲线2.上右曲线3.下左曲线 4.下右曲线
+            direction: 2, //方向 1.单向 2.双向,
+            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 //	终点高
+          })
+        }
+      }
+      // 重置状态
+      state.startDrawPointIndex = -1 // 起始点的索引
+      state.startDrawPoint = null
+      state.isDrawing = false
+      state.currentDrawX = 0
+      state.currentDrawY = 0
+    }
+
+    event.preventDefault() // 阻止默认行为（避免选中图片或文本）
+    return
+  }
 }
+// 找到最近的点
+const findClosestPoint = (x, y) => {
+  let minDistance = Infinity
+  let closestIndex = null
+  let list = allHistoryList.value[currentIndex.value]
+  list.forEach((point, index) => {
+    const distance = Math.sqrt((point.locationX - x) ** 2 + (point.locationY - y) ** 2)
+    if (distance < minDistance && distance < point.locationWide) {
+      // 10 是点的捕捉范围
+      minDistance = distance
+      closestIndex = index
+    }
+  })
+  return closestIndex
+}
+
 //点击区域
 const clickDrawSelectionArea = () => {
   let points = allHistoryList.value[currentIndex.value]
@@ -1348,6 +1511,8 @@ 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
   })
@@ -1484,11 +1649,16 @@ const startDrag = (item, index, type) => {
 }
 // 处理拖动事件
 const handleDrag = (event) => {
-  const x = disposeEventPoints(event).x
-  const y = disposeEventPoints(event).y
+  let x = disposeEventPoints(event).x
+  let y = disposeEventPoints(event).y
 
   if (state.currentDragTarget.index !== null) {
     const curve = state.mapRouteList[state.currentDragTarget.index]
+
+    // 确保控制点不超出盒子范围
+    x = Math.max(0, Math.min(x, imgBgObj.width))
+    y = Math.max(0, Math.min(y, imgBgObj.height))
+
     if (state.currentDragTarget.type === 'start') {
       curve.beginControlX = x
       curve.beginControlY = y
@@ -1499,27 +1669,16 @@ const handleDrag = (event) => {
   }
 }
 // 结束拖动
-const endDrag = () => {
-  let actualBeginControl = disposeEventPoint(
-    state.mapRouteList[state.currentDragTarget.index].beginControlX,
-    state.mapRouteList[state.currentDragTarget.index].beginControlY
-  )
-  let actualEndControl = disposeEventPoint(
-    state.mapRouteList[state.currentDragTarget.index].endControlX,
-    state.mapRouteList[state.currentDragTarget.index].endControlY
-  )
+const endDrag = (event) => {
+  const curve = state.mapRouteList[state.currentDragTarget.index]
+  let actualBeginControl = disposeEventPoint(curve.beginControlX, curve.beginControlY)
+  let actualEndControl = disposeEventPoint(curve.endControlX, curve.endControlY)
 
-  state.mapRouteList[state.currentDragTarget.index].actualBeginControlX =
-    actualBeginControl.actualLocationX
-  state.mapRouteList[state.currentDragTarget.index].actualBeginControlY =
-    actualBeginControl.actualLocationY
+  curve.actualBeginControlX = actualBeginControl.actualLocationX
+  curve.actualBeginControlY = actualBeginControl.actualLocationY
 
-  state.mapRouteList[state.currentDragTarget.index].actualEndControlX =
-    actualEndControl.actualLocationX
-  state.mapRouteList[state.currentDragTarget.index].actualEndControlY =
-    actualEndControl.actualLocationY
-
-  console.log(state.mapRouteList[state.currentDragTarget.index])
+  curve.actualEndControlX = actualEndControl.actualLocationX
+  curve.actualEndControlY = actualEndControl.actualLocationY
 
   state.currentDragTarget = { index: null, type: null }
   window.removeEventListener('mousemove', handleDrag)
@@ -1545,7 +1704,6 @@ const handleEditRoute = (item, index) => {
 }
 //单击 选中
 const handleChooseRoute = (item, index) => {
-  console.log(item)
   state.mapRouteList.forEach((curve, i) => {
     curve.isSelected = i === index
   })
@@ -1646,7 +1804,6 @@ const measureDistancesClick = (event) => {
     }
   }
 }
-
 //获取扫描图  地图背景相关的信息
 const imgBgObj = reactive({
   imgUrl: '',
@@ -1699,6 +1856,8 @@ const getAllNodeList = async () => {
     positionMapId: imgBgObj.positionMapId
   })
   allMapPointInfo.value = []
+  allHistoryList.value = []
+  currentIndex.value = 0
   list.forEach((item) => {
     item.layerSelectionShow = true //用于图层
     item.locationX = Number(item.locationX)
@@ -1771,7 +1930,6 @@ const getAllNodeList = async () => {
 const getAllMapRoute = async () => {
   state.mapRouteList = await MapApi.getPositionMapLineByPositionMapId(imgBgObj.positionMapId)
 }
-
 //保存地图按钮
 const saveMap = async () => {
   const loading = ElLoading.service({
@@ -1816,7 +1974,6 @@ const saveNodeList = async () => {
 const saveMapRoute = async () => {
   await MapApi.createOrEditOrDelPositionMapLine(imgBgObj.positionMapId, state.mapRouteList)
 }
-
 //筛选图层
 const layerSelectionSuccess = (typeList) => {
   allHistoryList.value[currentIndex.value].forEach((item) => {
@@ -1828,13 +1985,13 @@ const layerSelectionSuccess = (typeList) => {
     }
   })
 }
-
 //处理数据
 const disposeEventPoints = (event) => {
   const rect = mapBackgroundRef.value.getBoundingClientRect()
   const scrollLeft = mapBackgroundRef.value.scrollLeft // 水平滚动条偏移量
   const scrollTop = mapBackgroundRef.value.scrollTop // 垂直滚动条偏移量
-  const devicePixelRatio = window.devicePixelRatio || 1
+  // const devicePixelRatio = window.devicePixelRatio || 1 //浏览器缩放
+  const devicePixelRatio = 1
 
   // 计算页面坐标（考虑设备像素比和滚动条偏移量）
   const x = (event.clientX - rect.left + scrollLeft) / state.imageChangeMultiple / devicePixelRatio
@@ -1862,7 +2019,6 @@ const disposeEventPoint = (x, y) => {
     actualLocationY
   }
 }
-
 document.onmousedown = function (e) {
   //左击
   if (e.button == 2) {
@@ -1874,7 +2030,6 @@ document.onmousedown = function (e) {
     currentItemIndex.value = -1
   }
 }
-
 // 阻止默认菜单弹出
 window.document.oncontextmenu = function () {
   return false
@@ -1886,11 +2041,14 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+.edit-map-page {
+  margin-bottom: 20px;
+}
+
 .map-container {
   position: relative;
   width: 100%;
   overflow: auto;
-  // height: 85vh;
   .map-bg {
     background-size: contain;
     background-repeat: no-repeat;
@@ -1905,6 +2063,7 @@ onMounted(() => {
 
 .top-tool {
   margin-top: 5px;
+  margin-bottom: 3px;
   .top-tool-list {
     display: flex;
     align-items: center;
@@ -1912,6 +2071,7 @@ onMounted(() => {
     background-color: #fff;
     padding: 0 12px;
     height: 70px;
+    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 3px;
 
     .top-tool-item {
       display: flex;
@@ -1952,7 +2112,7 @@ onMounted(() => {
   .right-tool-list {
     position: absolute;
     right: 0;
-    top: 94px;
+    top: 114px;
     background-color: #fff;
     z-index: 999;
     text-align: center;
@@ -1989,11 +2149,28 @@ onMounted(() => {
 }
 
 .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:
-    10px 10px,
-    10px 10px;
+  // 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 {
diff --git a/src/views/mapPage/realTimeMap/test.vue b/src/views/mapPage/realTimeMap/test.vue
index 04f44d6c..e7881d2d 100644
--- a/src/views/mapPage/realTimeMap/test.vue
+++ b/src/views/mapPage/realTimeMap/test.vue
@@ -1,110 +1,190 @@
 <template>
   <div>
-    <svg width="800" height="600">
-      <path
-        v-for="(curve, index) in curves"
+    <svg
+      ref="svgElement"
+      :width="width"
+      :height="height"
+      @mousedown="startDrawing"
+      @mousemove="drawLine"
+      @mouseup="stopDrawing"
+      @mouseleave="stopDrawing"
+    >
+      <!-- 渲染所有点 -->
+      <circle
+        v-for="(point, index) in points"
         :key="index"
-        :d="getCurvePath(curve)"
-        :stroke="curve.isSelected ? 'red' : 'blue'"
+        :cx="point.x"
+        :cy="point.y"
+        r="5"
+        fill="red"
+        @mousedown="startFromPoint(index, $event)"
+      />
+
+      <!-- 渲染所有直线 -->
+      <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"
-        @mousedown="selectCurve(index)"
       />
-      <circle
-        v-for="(curve, index) in curves"
-        :key="'start-' + index"
-        :cx="curve.beginControlX"
-        :cy="curve.beginControlY"
-        r="5"
-        fill="green"
-        @mousedown="startDrag(index, 'start')"
-      />
-      <circle
-        v-for="(curve, index) in curves"
-        :key="'end-' + index"
-        :cx="curve.endControlX"
-        :cy="curve.endControlY"
-        r="5"
-        fill="green"
-        @mousedown="startDrag(index, 'end')"
+
+      <!-- 实时绘制当前直线 -->
+      <path
+        v-if="isDrawing"
+        :d="`M ${startX} ${startY} L ${currentX} ${currentY}`"
+        stroke="blue"
+        stroke-width="2"
+        fill="none"
       />
     </svg>
+
+    <!-- 显示直线数据 -->
+    <div>
+      <h3>直线数据：</h3>
+      <pre>{{ lines }}</pre>
+    </div>
   </div>
 </template>
 
-<script setup>
+<script>
 import { ref } from 'vue'
 
-// 初始点位数据
-const curves = ref([
-  {
-    startPointX: 100,
-    startPointY: 100,
-    endPointX: 300,
-    endPointY: 100,
-    beginControlX: 100,
-    beginControlY: 100,
-    endControlX: 300,
-    endControlY: 100,
-    isSelected: false
-  },
-  {
-    startPointX: 200,
-    startPointY: 200,
-    endPointX: 400,
-    endPointY: 200,
-    beginControlX: 200,
-    beginControlY: 200,
-    endControlX: 400,
-    endControlY: 200,
-    isSelected: false
-  }
-])
+export default {
+  setup() {
+    const svgElement = ref(null) // SVG 元素的引用
+    const width = 800 // SVG 宽度
+    const height = 600 // SVG 高度
 
-// 当前拖动的曲线索引和控制点类型
-const dragging = ref({
-  index: null,
-  type: null
-})
+    // 点位数据
+    const points = ref([
+      { x: 10, y: 10 },
+      { x: 30, y: 100 },
+      { x: 40, y: 40 },
+      { x: 230, y: 400 },
+      { x: 750, y: 640 }
+    ])
 
-// 获取曲线的路径字符串
-const getCurvePath = (curve) => {
-  return `M${curve.startPointX},${curve.startPointY} C${curve.beginControlX},${curve.beginControlY} ${curve.endControlX},${curve.endControlY} ${curve.endPointX},${curve.endPointY}`
-}
+    // 直线数据
+    const lines = ref([])
 
-// 选中曲线
-const selectCurve = (index) => {
-  curves.value.forEach((curve, i) => {
-    curve.isSelected = i === index
-  })
-  console.log('Selected curve:', curves.value[index])
-}
+    // 当前绘制的直线状态
+    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 startDrag = (index, type) => {
-  dragging.value = { index, type }
-  window.addEventListener('mousemove', handleDrag)
-  window.addEventListener('mouseup', endDrag)
-}
+    // 从点开始绘制
+    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 handleDrag = (event) => {
-  if (dragging.value.index !== null) {
-    const curve = curves.value[dragging.value.index]
-    if (dragging.value.type === 'start') {
-      curve.beginControlX = event.offsetX
-      curve.beginControlY = event.offsetY
-    } else {
-      curve.endControlX = event.offsetX
-      curve.endControlY = event.offsetY
+    // 实时绘制
+    const drawLine = (event) => {
+      if (isDrawing.value) {
+        const rect = svgElement.value.getBoundingClientRect()
+        currentX.value = event.clientX - rect.left
+        currentY.value = event.clientY - rect.top
+      }
+    }
+
+    // 结束绘制
+    const stopDrawing = () => {
+      if (isDrawing.value) {
+        // 找到最近的终点
+        const endPointIndex = findClosestPoint(currentX.value, currentY.value)
+
+        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
+          }
+
+          // 检查是否已存在相同的直线
+          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
     }
   }
 }
-
-// 结束拖动
-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;
+}
+</style>