From 934a41f7b51e300106ac1dbdfe6cb522dd55c497 Mon Sep 17 00:00:00 2001
From: yyy <2605810609@qq.com>
Date: Fri, 21 Feb 2025 10:59:38 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E7=BC=96=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/map/map.ts                            |    2 +-
 src/layout/components/AppView.vue             |   21 +
 src/views/mapPage/example/editMap.vue         | 1672 -----------------
 .../mapPage/example/第一版编辑地图.vue | 1413 --------------
 .../itemAreaManagementDialog.vue              |    4 +-
 .../lineLibraryManagementDialog.vue           |    1 -
 .../components-tool/map-scale-tool.vue        |  464 +++++
 src/views/mapPage/realTimeMap/editMap.vue     |   43 +-
 8 files changed, 521 insertions(+), 3099 deletions(-)
 delete mode 100644 src/views/mapPage/example/editMap.vue
 delete mode 100644 src/views/mapPage/example/第一版编辑地图.vue
 create mode 100644 src/views/mapPage/realTimeMap/components-tool/map-scale-tool.vue

diff --git a/src/api/map/map.ts b/src/api/map/map.ts
index bc05dc78..5bfecac8 100644
--- a/src/api/map/map.ts
+++ b/src/api/map/map.ts
@@ -125,5 +125,5 @@ export const getWareHouseLanePage = async (params) => {
 }
 //删除仓库点位地图
 export const deleteWareLaneArea = async (id: number) => {
-  return await request.delete({ url: `/system/ware/house-area/delete?id=` + id })
+  return await request.delete({ url: `/system/ware/house-lane/delete?id=` + id })
 }
diff --git a/src/layout/components/AppView.vue b/src/layout/components/AppView.vue
index df720a11..b1f16aff 100644
--- a/src/layout/components/AppView.vue
+++ b/src/layout/components/AppView.vue
@@ -21,6 +21,8 @@ const getCaches = computed((): string[] => {
 
 const tagsView = computed(() => appStore.getTagsView)
 
+const { currentRoute } = useRouter() // 路由
+
 //region 无感刷新
 const routerAlive = ref(true)
 // 无感刷新，防止出现页面闪烁白屏
@@ -35,6 +37,25 @@ provide('reload', reload)
 
 <template>
   <section
+    v-if="currentRoute.name === 'editMapPageRealTimeMap'"
+    :class="[
+      'w-full bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)]',
+      {
+        '!min-h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))] pb-0':
+          footer
+      }
+    ]"
+  >
+    <router-view v-if="routerAlive">
+      <template #default="{ Component, route }">
+        <keep-alive :include="getCaches">
+          <component :is="Component" :key="route.fullPath" />
+        </keep-alive>
+      </template>
+    </router-view>
+  </section>
+  <section
+    v-else
     :class="[
       'p-[var(--app-content-padding)] w-full bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)]',
       {
diff --git a/src/views/mapPage/example/editMap.vue b/src/views/mapPage/example/editMap.vue
deleted file mode 100644
index 933286c9..00000000
--- a/src/views/mapPage/example/editMap.vue
+++ /dev/null
@@ -1,1672 +0,0 @@
-<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="80"
-          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'">
-            <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" color="#00329F" @click="moveFormSubmit">确认</el-button>
-            </div>
-          </el-form>
-          <!-- 旋转 -->
-          <el-form :model="state.rotationForm" v-if="item.switchType === 'revolve'">
-            <el-form-item label="角度">
-              <el-input v-model="state.rotationForm.angle" placeholder="请输入" />
-            </el-form-item>
-            <div style="text-align: right">
-              <el-button size="small" color="#00329F" @click="rotationFormSubmit">确认</el-button>
-            </div>
-          </el-form>
-          <!-- 字体 -->
-          <el-form :model="state.rotationForm" v-if="item.switchType === 'text'">
-            <el-form-item label="角度">
-              <el-input v-model="state.rotationForm.angle" placeholder="请输入" />
-            </el-form-item>
-            <div style="text-align: right">
-              <el-button size="small" color="#00329F" @click="rotationFormSubmit">确认</el-button>
-            </div>
-          </el-form>
-        </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>
-        <!-- 分隔线 -->
-        <div
-          class="line"
-          v-if="
-            item.switchType === 'saveAs' ||
-            item.switchType === 'delete' ||
-            item.switchType === 'grid' ||
-            (item.switchType === 'next' &&
-              (toolbarSwitchType === 'lineLibrary' ||
-                toolbarSwitchType === 'region' ||
-                toolbarSwitchType === 'drawRoute'))
-          "
-        ></div>
-        <el-button
-          v-if="
-            item.switchType === 'next' &&
-            (toolbarSwitchType === 'lineLibrary' ||
-              toolbarSwitchType === 'region' ||
-              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.stop="mapClick"
-        :class="state.isShowGrid ? 'grid-show' : ''"
-        :style="{
-          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="item.locationX"
-          :y="item.locationY"
-          :w="item.locationWide"
-          :h="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.stop="deactivatedHandle"
-          :draggable="item.draggable && !state.prohibitedOperation"
-          :resizable="item.resizable && !state.prohibitedOperation"
-          :rotatable="item.rotatable && !state.prohibitedOperation"
-          :lock-aspect-ratio="item.lockAspectRatio"
-          style="border: none"
-        >
-          <!-- 1 路径点 -->
-          <div
-            v-if="item.type === 1 && item.layerSelectionShow"
-            :style="{
-              width: item.locationWide + 'px',
-              height: item.locationDeep + 'px',
-              border: ' 1px dashed #000',
-              borderRadius: '50%',
-              backgroundColor: '#000'
-            }"
-          >
-          </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="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>
-        </VueDragResizeRotate>
-      </div>
-
-      <!-- 编辑路径 -->
-      <div v-if="imgBgObj.width && imgBgObj.height" class="svg-div">
-        <!-- SVG 画布 -->
-        <svg
-          ref="svgRef"
-          :width="imgBgObj.width"
-          :height="imgBgObj.height"
-          @mousedown="handleMouseDown"
-          @mousemove="handleMouseMove"
-          @mouseup="handleMouseUp"
-        >
-          <!-- 绘制所有曲线 -->
-          <path
-            v-for="(curve, index) in state.mapRouteList"
-            :key="index"
-            :d="getCurvePath(curve)"
-            stroke="#000"
-            fill="none"
-            stroke-width="3"
-            :class="{ selected: state.selectedCurve === curve }"
-            @click="handleEditRoute(curve)"
-          />
-          <!-- 绘制控制点和连线 -->
-          <!-- 第一条控制线 -->
-          <line
-            v-if="state.selectedCurve"
-            :x1="state.selectedCurve.startPointX"
-            :y1="state.selectedCurve.startPointY"
-            :x2="state.selectedCurve.beginControlX"
-            :y2="state.selectedCurve.beginControlY"
-            stroke="gray"
-            stroke-dasharray="3"
-          />
-          <!-- 第二条控制线 -->
-          <line
-            v-if="state.selectedCurve"
-            :x1="state.selectedCurve.endPointX"
-            :y1="state.selectedCurve.endPointY"
-            :x2="state.selectedCurve.endControlX"
-            :y2="state.selectedCurve.endControlY"
-            stroke="gray"
-            stroke-dasharray="3"
-          />
-          <!-- 绘制起点、终点和控制点 -->
-          <!-- 起点 -->
-          <circle
-            v-for="(curve, index) in state.mapRouteList"
-            :key="'start' + index"
-            :cx="curve.startPointX"
-            :cy="curve.startPointY"
-            r="5"
-            fill="red"
-          />
-          <!-- 终点 -->
-          <circle
-            v-for="(curve, index) in state.mapRouteList"
-            :key="'end' + index"
-            :cx="curve.endPointX"
-            :cy="curve.endPointY"
-            r="5"
-            fill="red"
-          />
-          <!-- 控制点1 -->
-          <circle
-            v-if="state.selectedCurve"
-            :cx="state.selectedCurve.beginControlX"
-            :cy="state.selectedCurve.beginControlY"
-            r="5"
-            fill="green"
-            @mousedown="startDrag($event, state.selectedCurve, 'control1')"
-          />
-          <!-- 控制点2 -->
-          <circle
-            v-if="state.selectedCurve"
-            :cx="state.selectedCurve.endControlX"
-            :cy="state.selectedCurve.endControlY"
-            r="5"
-            fill="green"
-            @mousedown="startDrag($event, state.selectedCurve, 'control2')"
-          />
-        </svg>
-
-        <!-- 显示控制点坐标 -->
-        <div class="points" v-if="state.selectedCurve">
-          <p
-            >起点: ({{ state.selectedCurve.startPointX }}, {{ state.selectedCurve.startPointY }})</p
-          >
-          <p
-            >控制点 1: ({{ state.selectedCurve.beginControlX }},
-            {{ state.selectedCurve.beginControlY }})</p
-          >
-          <p
-            >控制点 2: ({{ state.selectedCurve.endControlX }},
-            {{ state.selectedCurve.endControlY }})</p
-          >
-          <p>终点: ({{ state.selectedCurve.endPointX }}, {{ state.selectedCurve.endPointY }})</p>
-        </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"
-      />
-    </div>
-  </div>
-
-  <!-- 节点编辑 -->
-  <editNodeProperties
-    ref="editNodePropertiesRef"
-    :positionMapId="imgBgObj.positionMapId"
-    @submitNodeSuccess="submitNodeSuccess"
-  />
-  <!-- 文字输入弹窗 -->
-  <textFormToolDialog
-    ref="textFormToolDialogRef"
-    v-if="state.textFormToolShow"
-    :inputBoxStyle="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"
-  />
-</template>
-
-<script setup>
-import JSONBigInt from 'json-bigint'
-import { ref, defineComponent, reactive, nextTick, onMounted } from 'vue'
-import editNodeProperties from './components-tool/editNodeProperties.vue'
-import textFormToolDialog from './components-tool/textFormToolDialog.vue'
-import equipmentToolDialog from './components-tool/equipmentToolDialog.vue'
-import itemAreaSettingDialog from './components-tool/itemAreaSettingDialog.vue'
-import lineLibrarySettingDialog from './components-tool/lineLibrarySettingDialog.vue'
-import layerSelectionToolDialog from './components-tool/layerSelectionToolDialog.vue'
-
-import * as MapApi from '@/api/map/map'
-import cursorCollection from './cursorCollection'
-
-defineOptions({ name: 'editMapPageRealTimeMap' })
-
-const lineLibrarySettingDialogRef = ref() //线库设置
-const itemAreaSettingDialogRef = ref() //物料区域设置
-const equipmentToolDialogRef = ref() //设备弹窗
-const textFormToolDialogRef = ref() //文字输入弹窗
-const mapBackgroundRef = ref()
-const inputBoxRef = ref() //文字输入框
-
-const message = useMessage() // 消息弹窗
-const formLoading = ref(false)
-
-const allHistoryList = ref([]) //全部的历史记录
-const currentIndex = ref(0) //用于记录是哪条历史记录的
-const currentItemIndex = ref(-1) //用于记录是在编辑那个具体的节点、图标等
-const allMapPointInfo = ref([]) //所有的图标的列表
-
-// 缩放停止
-const interfaceRefreshed = ref(true)
-const resizeEnd = (x, y, w, h, item, index) => {
-  interfaceRefreshed.value = false
-  console.log('缩放', w, h)
-  nextTick(() => {
-    allMapPointInfo.value[index].locationX = x
-    allMapPointInfo.value[index].locationY = y
-    allMapPointInfo.value[index].locationWide = w
-    allMapPointInfo.value[index].locationDeep = h
-    addEditHistory()
-  })
-}
-// 拖拽停止
-const dragEnd = (x, y, item, index) => {
-  console.log('拖拽')
-  if (x === item.locationX && y === item.locationY) return
-  allMapPointInfo.value[index].locationX = x
-  allMapPointInfo.value[index].locationY = y
-  addEditHistory()
-}
-// 旋转
-const rotateEnd = (angle, item, index) => {
-  console.log('旋转')
-  allMapPointInfo.value[index].angle = angle
-  addEditHistory()
-}
-
-//选中
-const editNodePropertiesRef = ref()
-const activatedHandle = (item, index) => {
-  currentItemIndex.value = index
-
-  //节点编辑
-  if (toolbarSwitchType.value === 'editNode') {
-    editNodePropertiesRef.value.open(JSON.parse(JSON.stringify(item)))
-  }
-}
-//非选中
-const deactivatedHandle = () => {
-  console.log('取消选中')
-}
-
-//添加历史记录
-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)))
-  } else {
-    allHistoryList.value.push(JSON.parse(JSON.stringify(allMapPointInfo.value)))
-    currentIndex.value++
-  }
-  interfaceRefreshed.value = true
-  console.log(allHistoryList.value, 'allHistoryList')
-}
-
-//上一步
-const backPreviousStep = () => {
-  if (currentIndex.value > 0) {
-    currentIndex.value--
-    allMapPointInfo.value = allHistoryList.value[currentIndex.value]
-    console.log('撤销', allHistoryList.value[currentIndex.value])
-  } else {
-    message.warning('没了老铁')
-  }
-}
-//下一步
-const backNextStep = () => {
-  if (currentIndex.value < allHistoryList.value.length - 1) {
-    currentIndex.value++
-    allMapPointInfo.value = allHistoryList.value[currentIndex.value]
-    console.log('重做', allHistoryList.value[currentIndex.value])
-  } else {
-    message.warning('没了老铁')
-  }
-}
-
-//地图点击
-const mapClick = (e) => {
-  const x = disposeEventPoints(e).x
-  const y = disposeEventPoints(e).y
-  //绘制节点
-  if (toolbarSwitchType.value === 'drawNodes') {
-    allMapPointInfo.value.push({
-      positionMapId: imgBgObj.positionMapId, //地图的id
-      layerSelectionShow: true,
-      locationX: x,
-      locationY: y,
-      locationDeep: 10,
-      locationWide: 10,
-      angle: 0,
-      draggable: true,
-      resizable: false,
-      rotatable: false,
-      lockAspectRatio: false, //横纵比
-      img: '',
-      type: 1, //默认类型1 路径节点
-      dataList: [], //存库位的
-      dataObj: {} //存 设备点 停车点 文字
-    })
-    currentIndex.value++
-    allHistoryList.value.push(JSON.parse(JSON.stringify(allMapPointInfo.value)))
-  }
-  //文字输入
-  if (toolbarSwitchType.value === 'text') {
-    state.showInputBox = true
-    state.inputBoxStyle.locationX = x
-    state.inputBoxStyle.locationY = y
-
-    // 聚焦输入框
-    setTimeout(() => {
-      inputBoxRef.value.focus()
-    }, 0)
-  }
-  //测距
-  if (toolbarSwitchType.value === 'ranging') {
-    measureDistancesClick(e)
-  }
-}
-//输入文字样式改变
-const textFormSuccess = (form) => {
-  state.inputBoxStyle = {
-    fontSize: `${form.fontSize}`,
-    fontFamily: `${form.fontFamily}`,
-    fontColor: `${form.fontColor}`
-  }
-}
-//输入结束
-const handleInputEnd = () => {
-  if (state.inputBoxValue) {
-    state.showInputBox = false
-    allMapPointInfo.value.push({
-      type: 7, //类型  7文字
-      positionMapId: imgBgObj.positionMapId, //地图的id
-      locationX: state.inputBoxStyle.locationX, //x
-      locationY: state.inputBoxStyle.locationY, //y
-      locationDeep: '', //h
-      locationWide: '', //w
-      angle: 0, //旋转角度
-      draggable: true, //是否可以拖动
-      resizable: false, //是否可以调整大小
-      rotatable: false, //是否可以旋转
-      lockAspectRatio: true, //是否锁定比例
-      img: '', //图片
-      text: state.inputBoxValue, //文字内容
-      fontColor: state.inputBoxStyle.fontColor, //文字颜色
-      fontFamily: state.inputBoxStyle.fontFamily, //字体类型
-      fontSize: state.inputBoxStyle.fontSize,
-      dataObj: {}, //存 设备点 停车点 文字
-      layerSelectionShow: true
-    })
-    addEditHistory()
-    state.inputBoxValue = ''
-  }
-}
-//编辑节点成功
-const submitNodeSuccess = (item) => {
-  allMapPointInfo.value[currentItemIndex.value] = item
-  allHistoryList.value[currentIndex.value][currentItemIndex.value] = item
-}
-
-//工具栏点击
-const toolbarSwitchType = ref('')
-const state = reactive({
-  topToolList: [
-    {
-      switchType: 'open',
-      name: '打开',
-      icon: 'ep:folder-add',
-      isActive: false
-    },
-    {
-      switchType: 'save',
-      name: '保存',
-      icon: 'ep:folder-checked',
-      isActive: false
-    },
-    {
-      switchType: 'saveAs',
-      name: '另存为',
-      icon: 'ep:folder-opened',
-      isActive: false
-    },
-    {
-      switchType: 'choose',
-      name: '选择',
-      icon: 'ep:position',
-      isActive: false
-    },
-    {
-      switchType: 'move',
-      name: '移动',
-      icon: 'ep:rank',
-      isActive: false
-    },
-    {
-      switchType: 'revolve',
-      name: '旋转',
-      icon: 'ep:refresh-right',
-      isActive: false
-    },
-    {
-      switchType: 'copy',
-      name: '复制',
-      icon: 'ep:document',
-      isActive: false
-    },
-    {
-      switchType: 'paste',
-      name: '粘贴',
-      icon: 'ep:copy-document',
-      isActive: false
-    },
-    {
-      switchType: 'delete',
-      name: '删除',
-      icon: 'ep:delete',
-      isActive: false
-    },
-    {
-      switchType: 'tools',
-      name: '工具',
-      icon: 'ep:briefcase',
-      isActive: true
-    },
-    {
-      switchType: 'lineLibrary',
-      name: '线库',
-      icon: 'ep:message-box',
-      isActive: false
-    },
-    {
-      switchType: 'region',
-      name: '区域',
-      icon: 'ep:full-screen',
-      isActive: false
-    },
-    {
-      switchType: 'text',
-      name: '文字',
-      icon: 'ep:edit-pen',
-      isActive: false
-    },
-    {
-      switchType: 'equipment',
-      name: '设备',
-      icon: 'ep:video-camera-filled',
-      isActive: false
-    },
-    {
-      switchType: 'ranging',
-      name: '测距',
-      icon: 'ep:folder-add',
-      isActive: false
-    },
-    {
-      switchType: 'layer',
-      name: '图层',
-      icon: 'ep:copy-document',
-      isActive: false
-    },
-    {
-      switchType: 'marker',
-      name: '标记',
-      icon: 'ep:map-location',
-      isActive: false
-    },
-    {
-      switchType: 'grid',
-      name: '网格',
-      icon: 'ep:grid',
-      isActive: true
-    },
-    {
-      switchType: 'larger',
-      name: '放大',
-      icon: 'ep:zoom-in',
-      isActive: false
-    },
-    {
-      switchType: 'smaller',
-      name: '缩小',
-      icon: 'ep:zoom-out',
-      isActive: false
-    },
-    {
-      switchType: 'withdraw',
-      name: '撤回',
-      icon: 'ep:top-left',
-      isActive: false
-    },
-    {
-      switchType: 'next',
-      name: '重做',
-      icon: 'ep:top-right',
-      isActive: false
-    }
-  ],
-  rightToolList: [
-    {
-      switchType: 'drawNodes',
-      name: '绘制节点',
-      icon: 'ep:circle-plus-filled',
-      isActive: false
-    },
-    {
-      switchType: 'editNode',
-      name: '编辑节点',
-      icon: 'ep:circle-plus-filled',
-      isActive: false
-    },
-    {
-      switchType: 'drawRoute',
-      name: '绘制路线',
-      icon: 'ep:semi-select',
-      isActive: false
-    },
-    {
-      switchType: 'editRoute',
-      name: '编辑路线',
-      icon: 'ep:semi-select',
-      isActive: false
-    }
-  ],
-  isShowToolbar: true, //工具栏展示隐藏
-  isShowGrid: true, //网格展示隐藏
-  moveForm: {
-    locationX: '',
-    locationY: ''
-  }, //移动的表单
-  rotationForm: {
-    angle: ''
-  }, //旋转的表单
-  copyMapItem: '', //复制的值
-  cursorStyle: 'auto',
-  drawSelectionAreaShow: false, //绘制框选区域
-  allDrawSelectionAreaBox: [], // 所有框选区域
-  drawSelectionAreaBox: { x: 0, y: 0, width: 0, height: 0 }, //绘制区域的位置，长宽
-  drawSelectionStartPoint: { x: 0, y: 0 }, //开始绘制的点位
-  drawSelectionPointList: [], //绘制选中的list
-  textFormToolShow: false, //文字表单显示隐藏
-  showInputBox: false, //输入框显示隐藏
-  inputBoxStyle: {
-    fontFamily: 'SimSun',
-    fontSize: '14',
-    fontColor: '#000000',
-    locationX: 0,
-    locationY: 0
-  }, //输入框的样式
-  inputBoxValue: '', //输入的值
-  isShowLayer: false, //图层显示
-  measureDistancesPoints: [], // 存储点击的点位
-  measureDistancesNum: 0, // 存储两点之间的距离
-  imageChangeMultiple: 1, //图片放大缩小的倍数
-  prohibitedOperation: false, //禁止操作 在框选测距等操作时，禁止所有拖动等操作
-  mapRouteList: [], //仓库点位地图连线
-  isDragging: false, // 是否正在拖拽
-  currentDragTarget: '', //当前拖拽的目标（起点、终点、控制点）
-  selectedCurve: '' // 当前选中的曲线
-})
-const toolbarClick = (item) => {
-  let type = item.switchType
-  if (
-    currentItemIndex.value === -1 &&
-    (type === 'move' || type === 'revolve' || type === 'copy' || type === 'delete')
-  ) {
-    message.warning('请先选择要操作的对象')
-    return
-  }
-  //粘贴
-  if (type === 'paste' && !state.copyMapItem) {
-    message.warning('请先复制对象')
-    return
-  }
-
-  if (
-    (type === 'tools' || type === 'text' || type === 'layer' || type === 'grid') &&
-    toolbarSwitchType.value === type
-  ) {
-    toolbarSwitchType.value = ''
-  } else {
-    toolbarSwitchType.value = type
-  }
-
-  if (toolbarSwitchType.value !== 'text') {
-    state.cursorStyle = `auto`
-    state.textFormToolShow = false
-    state.showInputBox = false
-    state.inputBoxValue = ''
-  }
-
-  //工具切换 不适用框选的 要把框选的信息都删掉
-  if (toolbarSwitchType.value !== 'lineLibrary' && toolbarSwitchType.value !== 'region') {
-    state.drawSelectionAreaShow = false
-    state.allDrawSelectionAreaBox = []
-    state.drawSelectionPointList = []
-  }
-  //非测距
-  if (toolbarSwitchType.value !== 'ranging') {
-    state.measureDistancesPoints = [] // 清空存储点击的点位
-    state.measureDistancesNum = 0 // 清空存储两点之间的距离
-  }
-
-  //禁止操作 在框选测距等操作时，禁止所有拖动等操作
-  if (
-    toolbarSwitchType.value === 'ranging' ||
-    toolbarSwitchType.value === 'lineLibrary' ||
-    toolbarSwitchType.value === 'region'
-  ) {
-    state.prohibitedOperation = true
-  } else {
-    state.prohibitedOperation = false
-  }
-
-  switch (type) {
-    case 'open':
-      // 打开
-      break
-    case 'save':
-      //保存
-      saveMap()
-      break
-    case 'saveAs':
-      //另存为 存为json文件 无法直接访问用户的文件系统 不能选择存在那个文件夹里面
-      const jsonString = JSON.stringify(allHistoryList.value[currentIndex.value], null, 2)
-      const blob = new Blob([jsonString], { type: 'application/json' })
-      const url = URL.createObjectURL(blob)
-
-      const a = document.createElement('a')
-      a.href = url
-      a.download = 'mapJson.json'
-      document.body.appendChild(a)
-      a.click()
-      document.body.removeChild(a)
-      URL.revokeObjectURL(url)
-
-      message.success('下载成功')
-      break
-    case 'choose':
-      //选择
-      break
-    case 'move':
-      //移动
-      break
-    case 'revolve':
-      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('复制成功')
-      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()
-      break
-    case 'delete':
-      //删除
-      allMapPointInfo.value.splice(currentItemIndex.value, 1)
-      addEditHistory()
-      break
-    case 'tools':
-      //工具
-      if (toolbarSwitchType.value === 'tools') {
-        state.isShowToolbar = true
-        item.isActive = true
-      } else {
-        state.isShowToolbar = false
-        item.isActive = false
-      }
-      break
-    case 'lineLibrary':
-      // 线库
-      break
-    case 'region':
-      // 区域
-      break
-    case 'text':
-      //文字
-      if (toolbarSwitchType.value === 'text') {
-        state.textFormToolShow = true
-        state.cursorStyle = `url('${cursorCollection.input}'),auto`
-      } else {
-        state.cursorStyle = `auto`
-        state.textFormToolShow = false
-        state.showInputBox = false
-        state.inputBoxValue = ''
-      }
-      break
-    case 'ranging':
-      // 测距
-      break
-    case 'layer':
-      //图层
-      if (toolbarSwitchType.value === 'layer') {
-        state.isShowLayer = true
-        item.isActive = true
-      } else {
-        state.isShowLayer = false
-        item.isActive = false
-      }
-      break
-    case 'marker':
-      // 标记
-      break
-    case 'grid':
-      //网格
-      if (toolbarSwitchType.value === 'grid') {
-        state.isShowGrid = true
-        item.isActive = true
-      } else {
-        state.isShowGrid = false
-        item.isActive = false
-      }
-      break
-    case 'larger':
-      //放大
-      if (state.imageChangeMultiple < 3) {
-        state.imageChangeMultiple *= 1.2
-      } else {
-        message.warning('不能在放大了')
-      }
-      break
-    case 'smaller':
-      //缩小
-      if (state.imageChangeMultiple > 0.3) {
-        state.imageChangeMultiple *= 0.8
-      } else {
-        message.warning('不能在缩小了')
-      }
-      break
-    case 'withdraw':
-      //上一步
-      backPreviousStep()
-      break
-    case 'next':
-      //下一步
-      backNextStep()
-      break
-    case 'drawNodes':
-      //绘制节点
-      break
-    case 'editNode':
-      // 编辑节点
-      break
-    case 'drawRoute':
-      //绘制路线
-      break
-    case 'editRoute':
-      // 编辑路线
-      break
-    case 'equipment':
-      // 设备
-      equipmentToolDialogRef.value.open()
-      break
-  }
-}
-
-//移动工具表单提交
-const moveFormSubmit = () => {
-  allHistoryList.value[currentIndex.value][currentItemIndex.value].locationX =
-    state.moveForm.locationX
-  allHistoryList.value[currentIndex.value][currentItemIndex.value].locationY =
-    state.moveForm.locationY
-}
-//旋转工具表单提交
-const rotationFormSubmit = () => {
-  allHistoryList.value[currentIndex.value][currentItemIndex.value].angle = state.rotationForm.angle
-}
-
-//开始框选绘制
-const startDrawSelection = (event) => {
-  if (
-    toolbarSwitchType.value !== 'lineLibrary' &&
-    toolbarSwitchType.value !== 'region' &&
-    toolbarSwitchType.value !== 'drawRoute'
-  )
-    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 !== 'lineLibrary' &&
-    toolbarSwitchType.value !== 'region' &&
-    toolbarSwitchType.value !== 'drawRoute'
-  )
-    return
-  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)
-  }
-  // 阻止默认行为（避免选中图片或文本）
-  event.preventDefault()
-}
-//结束框选绘制
-const endDrawSelection = (event) => {
-  if (
-    toolbarSwitchType.value !== 'lineLibrary' &&
-    toolbarSwitchType.value !== 'region' &&
-    toolbarSwitchType.value !== 'drawRoute'
-  )
-    return
-  state.drawSelectionAreaShow = false
-  state.allDrawSelectionAreaBox.push({ ...state.drawSelectionAreaBox })
-  state.drawSelectionAreaBox = { x: 0, y: 0, width: 0, height: 0 }
-
-  // 阻止默认行为（避免选中图片或文本）
-  event.preventDefault()
-}
-//点击区域
-const clickDrawSelectionArea = () => {
-  let points = allHistoryList.value[currentIndex.value]
-
-  state.drawSelectionPointList = []
-  state.allDrawSelectionAreaBox.forEach((box) => {
-    points.forEach((point) => {
-      if (
-        point.locationX >= box.x &&
-        point.locationX <= box.x + box.width &&
-        point.locationY >= box.y &&
-        point.locationY <= box.y + box.height
-      ) {
-        state.drawSelectionPointList.push(point)
-      }
-    })
-  })
-
-  // 清空框选区域
-  state.allDrawSelectionAreaBox = []
-  //只要库位的
-  let binLocation = state.drawSelectionPointList.filter((item) => item.type === 2)
-  //只要路径点的
-  let routeList = state.drawSelectionPointList.filter((item) => item.type === 1)
-
-  if (toolbarSwitchType.value === 'lineLibrary') {
-    //线库
-    if (binLocation.length < 2) {
-      message.warning('至少选择两个库位')
-      return
-    }
-    if (!isStraightLine(binLocation)) {
-      message.warning('您选择的库位不在一条直线上')
-      return
-    }
-    lineLibrarySettingDialogRef.value.open(binLocation)
-  }
-  if (toolbarSwitchType.value === 'region') {
-    //区域
-    if (binLocation.length < 1) {
-      message.warning('至少选择两个库位')
-    } else {
-      itemAreaSettingDialogRef.value.open(binLocation)
-    }
-  }
-
-  if (toolbarSwitchType.value === 'drawRoute') {
-    //先判断是不是两个库位
-    if (routeList.length !== 2) {
-      message.warning('只能选择两个路径点')
-      return
-    }
-
-    let curve = {
-      startPointX: routeList[0].locationX + routeList[0].locationWide / 2, //开始点
-      startPointY: routeList[0].locationY + routeList[0].locationDeep / 2, //开始点
-      endPointX: routeList[1].locationX + routeList[1].locationWide / 2, //结束点
-      endPointY: routeList[1].locationY + routeList[1].locationWide / 2, //结束点
-      beginControlX: routeList[0].locationX + routeList[0].locationWide / 2 + 50, //开始控制点x轴
-      beginControlY: routeList[0].locationY + routeList[0].locationWide / 2 + 50, //开始控制点y轴
-      endControlX: routeList[1].locationX + routeList[1].locationWide / 2 - 50, //结束控制点x轴
-      endControlY: routeList[1].locationY + routeList[1].locationWide / 2 - 50, //结束控制点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' //	反向限速
-    }
-    state.selectedCurve = curve
-    state.mapRouteList.push(curve)
-    state.currentDragTarget = 'end'
-    state.isDragging = true
-  }
-}
-//计算是不是在同一条直线的
-const isStraightLine = (binLocation) => {
-  if (binLocation.length <= 2) {
-    return true // 两个点一定在一条直线上
-  }
-
-  const firstPoint = binLocation[0]
-  const secondPoint = binLocation[1]
-
-  // 检查是否垂直直线（所有 x 相同）
-  const isVertical = binLocation.every(
-    (point) => Number(point.locationX) === Number(firstPoint.locationX)
-  )
-  if (isVertical) {
-    return true
-  }
-
-  // 检查是否水平直线（所有 y 相同）
-  const isHorizontal = binLocation.every(
-    (point) => Number(point.locationY) === Number(firstPoint.locationY)
-  )
-  if (isHorizontal) {
-    return true
-  }
-
-  // 计算斜率
-  const slope =
-    Number(secondPoint.locationY) -
-    Number(firstPoint.locationY) / (Number(secondPoint.locationX) - Number(firstPoint.locationX))
-
-  // 检查所有点是否在同一条斜线上
-  return binLocation.every((point) => {
-    const currentSlope =
-      (Number(point.locationY) - Number(firstPoint.locationY)) /
-      (Number(point.locationX) - Number(firstPoint.locationX))
-    return Math.abs(currentSlope - slope) < Number.EPSILON // 处理浮点数精度问题
-  })
-}
-//三阶贝塞尔曲线
-// 开始拖拽
-const startDrag = (event, curve, target) => {
-  console.log(event, curve, target)
-  event.preventDefault()
-  state.isDragging = true
-  state.selectedCurve = curve
-  state.currentDragTarget = target
-}
-
-// 鼠标按下事件
-const handleMouseDown = (event) => {}
-
-// 鼠标移动事件
-const handleMouseMove = (event) => {
-  if (!state.isDragging || !state.selectedCurve) return
-
-  const mousePos = disposeEventPoints(event)
-
-  // 更新拖拽的目标点
-  if (state.currentDragTarget === 'start') {
-    state.selectedCurve.startPointX = mousePos.x
-    state.selectedCurve.startPointY = mousePos.y
-  } else if (state.currentDragTarget === 'end') {
-    state.selectedCurve.endPointX = mousePos.x
-    state.selectedCurve.endPointY = mousePos.y
-  } else if (state.currentDragTarget === 'control1') {
-    state.selectedCurve.beginControlX = mousePos.x
-    state.selectedCurve.beginControlY = mousePos.y
-  } else if (state.currentDragTarget === 'control2') {
-    state.selectedCurve.endControlX = mousePos.x
-    state.selectedCurve.endControlY = mousePos.y
-  }
-}
-
-// 鼠标松开事件
-const handleMouseUp = (event) => {
-  state.isDragging = false
-  state.currentDragTarget = null
-}
-// 获取曲线的路径
-const getCurvePath = (curve) => {
-  return `M ${curve.startPointX} ${curve.startPointY} C ${curve.beginControlX} ${curve.beginControlY}, ${curve.endControlX} ${curve.endControlY}, ${curve.endPointX} ${curve.endPointY}`
-}
-//编辑路线
-const handleEditRoute = (item) => {
-  console.log(item)
-}
-
-//测距相关
-// 计算两点之间的距离
-const calculateDistance = (point1, point2) => {
-  const dx = point2.x - point1.x
-  const dy = point2.y - point1.y
-  return Math.sqrt(dx * dx + dy * dy)
-}
-
-// 计算连线的角度
-const computedLineAngle = computed(() => {
-  if (state.measureDistancesPoints.length === 2) {
-    const dx = state.measureDistancesPoints[1].x - state.measureDistancesPoints[0].x
-    const dy = state.measureDistancesPoints[1].y - state.measureDistancesPoints[0].y
-    return Math.atan2(dy, dx) * (180 / Math.PI)
-  }
-  return 0
-})
-
-// 计算连线的长度
-const computedLineWidth = computed(() => {
-  if (state.measureDistancesPoints.length === 2) {
-    return calculateDistance(state.measureDistancesPoints[0], state.measureDistancesPoints[1])
-  }
-  return 0
-})
-
-// 处理点击事件
-const measureDistancesClick = (event) => {
-  // 获取点击点相对于整个页面的坐标
-
-  const x = disposeEventPoints(event).x
-  const y = disposeEventPoints(event).y
-
-  // 检查点击是否发生在背景区域内
-  if (state.measureDistancesPoints.length === 2) {
-    // 如果已经有两个点，清空信息
-    state.measureDistancesPoints = []
-    state.measureDistancesNum = null
-  } else {
-    // 记录点击的点位（相对于背景区域的坐标）
-    const offsetX = x
-    const offsetY = y
-    state.measureDistancesPoints.push({ x: offsetX, y: offsetY })
-    if (state.measureDistancesPoints.length === 2) {
-      // 计算两点之间的距离
-      state.measureDistancesNum = calculateDistance(
-        state.measureDistancesPoints[0],
-        state.measureDistancesPoints[1]
-      )
-    }
-  }
-}
-
-//获取扫描图  地图背景相关的信息
-const imgBgObj = reactive({
-  imgUrl: '',
-  positionMapId: '',
-  width: '',
-  height: '',
-  floor: '',
-  area: '',
-  resolution: 0.05,
-  // origin: [-54.4, -34.2]
-  origin: [-10.4, 9.1]
-})
-//接收参数
-const { query } = useRoute() // 查询参数
-//获取地图点位
-const getMapList = async () => {
-  if (query.mapId) {
-    imgBgObj.positionMapId = query.mapId
-    imgBgObj.floor = query.floor
-    imgBgObj.area = query.area
-    //调转换成png的接口
-    getMapData(imgBgObj)
-  }
-}
-//调转换成png的接口
-const getMapData = async (mapInfo) => {
-  let data = await MapApi.getPositionMapdDwnloadPngBase64({
-    floor: mapInfo.floor,
-    area: mapInfo.area
-  })
-  imgBgObj.imgUrl = data
-
-  //获取一下图片的宽高
-  const img = new Image()
-  img.src = imgBgObj.imgUrl
-  //加载图片成功
-  img.onload = () => {
-    imgBgObj.width = img.naturalWidth
-    imgBgObj.height = img.naturalHeight
-    console.log(img.naturalWidth, img.naturalHeight)
-    getAllNodeList()
-  }
-  //加载图片失败
-  img.onerror = () => {
-    console.error('图片加载失败')
-  }
-}
-//获取所有的点位 处理七种类型的
-const getAllNodeList = async () => {
-  let list = await MapApi.getPositionMapItemList({
-    positionMapId: imgBgObj.positionMapId
-  })
-  list.forEach((item) => {
-    item.layerSelectionShow = true //用于图层
-    item.locationX = Number(item.locationX)
-    item.locationY = Number(item.locationY)
-
-    if (item.type === 1 || item.type === 5 || item.type === 6) {
-      item.dataObj = {}
-      item.dataList = []
-      item.locationDeep = 10
-      item.locationWide = 10
-      item.draggable = false
-      item.resizable = false
-      item.rotatable = false
-      item.lockAspectRatio = true
-    } else if (item.type === 5 || item.type === 6) {
-      item.dataObj = {}
-      item.dataList = []
-      item.locationDeep = 30
-      item.locationWide = 30
-      item.draggable = true
-      item.resizable = false
-      item.rotatable = false
-      item.lockAspectRatio = true
-    } else if (item.type === 2) {
-      //库位点
-      item.dataList = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
-      item.locationDeep = item.dataList[0].locationDeep
-      item.locationWide = item.dataList[0].locationWide
-      item.draggable = true
-      item.resizable = true
-      item.rotatable = false
-      item.lockAspectRatio = true
-    } else if (item.type === 3 || item.type === 4) {
-      item.dataObj = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
-      item.dataList = []
-      item.locationDeep = item.dataObj.locationDeep
-      item.locationWide = item.dataObj.locationWide
-      item.draggable = true
-      item.resizable = true
-      item.rotatable = false
-      item.lockAspectRatio = true
-    } else if (item.type === 7) {
-      item.dataObj = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
-      item.text = item.dataObj.text
-      item.fontColor = item.dataObj.fontColor
-      item.fontFamily = item.dataObj.fontFamily
-      item.fontSize = item.dataObj.fontSize
-      item.angle = item.dataObj.angle
-      item.draggable = true
-      item.resizable = false
-      item.rotatable = true
-      item.lockAspectRatio = true
-    }
-    allMapPointInfo.value.push(item)
-  })
-  allHistoryList.value[0] = JSON.parse(JSON.stringify(allMapPointInfo.value))
-}
-
-//保存地图按钮
-const saveMap = async () => {
-  //节点的保存
-  await saveNodeList()
-  //路线的保存
-}
-//节点的保存
-const saveNodeList = async () => {
-  formLoading.value = true
-  let list = allHistoryList.value[currentIndex.value]
-
-  list.forEach((item) => {
-    if (item.type === 7) {
-      item.dataObj.positionMapId = imgBgObj.positionMapId
-      item.dataObj.text = item.text
-      item.dataObj.fontColor = item.fontColor
-      item.dataObj.fontType = item.fontType
-      item.dataObj.fontFamily = item.fontFamily
-      item.dataObj.rotatable = item.rotatable
-      item.dataObj.angle = item.angle
-      //dataJson数据
-      item.dataJson = JSON.stringify(item.dataObj)
-    }
-  })
-
-  try {
-    await MapApi.batchSaveOrEditOrDelMapItem(imgBgObj.positionMapId, list)
-    message.success('创建成功')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-//筛选图层
-const layerSelectionSuccess = (typeList) => {
-  allHistoryList.value[currentIndex.value].forEach((item) => {
-    // 如果 type 存在于第一个数组中，则将 layerSelectionShow 设置为 false
-    if (typeList.includes(item.type)) {
-      item.layerSelectionShow = false
-    } else {
-      item.layerSelectionShow = true
-    }
-  })
-}
-
-//处理数据
-const disposeEventPoints = (event) => {
-  const rect = mapBackgroundRef.value.getBoundingClientRect()
-  const scrollLeft = mapBackgroundRef.value.scrollLeft // 水平滚动条偏移量
-  const scrollTop = mapBackgroundRef.value.scrollTop // 垂直滚动条偏移量
-  const devicePixelRatio = window.devicePixelRatio || 1
-
-  // 计算页面坐标（考虑设备像素比和滚动条偏移量）
-  const x = (event.clientX - rect.left + scrollLeft) / state.imageChangeMultiple / devicePixelRatio
-  const y = (event.clientY - rect.top + scrollTop) / state.imageChangeMultiple / devicePixelRatio
-
-  // 转换为实际坐标
-  const actualLocationX = imgBgObj.origin[0] + x * imgBgObj.resolution
-  const actualLocationY = imgBgObj.origin[1] + (imgBgObj.height - y) * imgBgObj.resolution
-
-  return {
-    x,
-    y,
-    actualLocationX,
-    actualLocationY
-  }
-}
-
-onMounted(() => {
-  getMapList()
-})
-</script>
-
-<style lang="scss" scoped>
-.map-container {
-  position: relative;
-  width: 100%;
-  overflow: auto;
-  border: 1px solid #ccc;
-  // height: 80vh;
-  .map-bg {
-    background-size: contain;
-    background-repeat: no-repeat;
-    position: relative;
-  }
-  .map-box-inner {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-}
-
-.top-tool {
-  .top-tool-list {
-    display: flex;
-    align-items: center;
-    text-align: center;
-    background-color: #fff;
-    margin-top: -15px;
-    margin-left: -20px;
-    margin-right: -20px;
-    padding: 0 12px;
-    margin-bottom: 20px;
-    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
-    height: 70px;
-
-    .top-tool-item {
-      display: flex;
-      align-items: center;
-
-      .tool-item {
-        cursor: pointer;
-        width: 49px;
-        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;
-        }
-      }
-      .line {
-        margin: 0 12px;
-        width: 1px;
-        height: 47px;
-        border: 1px solid #cccccc;
-      }
-    }
-  }
-
-  .right-tool-list {
-    position: absolute;
-    right: 0;
-    top: 94px;
-    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;
-      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;
-      }
-    }
-  }
-
-  .tool-active {
-    background: #ebf1ff;
-    border-bottom: 2px solid #1677ff;
-  }
-
-  .right-tool-active {
-    background: #ebf1ff;
-  }
-}
-
-.input-box-class {
-  position: absolute;
-  border: 1px solid #00329f;
-  padding: 4px;
-  outline: none;
-}
-
-.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:
-    10px 10px,
-    10px 10px;
-}
-
-.svg-div {
-  z-index: 99999;
-
-  svg {
-    cursor: crosshair;
-
-    path.selected {
-      stroke: blue;
-    }
-  }
-}
-</style>
diff --git a/src/views/mapPage/example/第一版编辑地图.vue b/src/views/mapPage/example/第一版编辑地图.vue
deleted file mode 100644
index ce4f4f07..00000000
--- a/src/views/mapPage/example/第一版编辑地图.vue
+++ /dev/null
@@ -1,1413 +0,0 @@
-<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="80"
-          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'">
-            <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" color="#00329F" @click="moveFormSubmit">确认</el-button>
-            </div>
-          </el-form>
-          <!-- 旋转 -->
-          <el-form :model="state.rotationForm" v-if="item.switchType === 'revolve'">
-            <el-form-item label="角度">
-              <el-input v-model="state.rotationForm.angle" placeholder="请输入" />
-            </el-form-item>
-            <div style="text-align: right">
-              <el-button size="small" color="#00329F" @click="rotationFormSubmit">确认</el-button>
-            </div>
-          </el-form>
-          <!-- 字体 -->
-          <el-form :model="state.rotationForm" v-if="item.switchType === 'text'">
-            <el-form-item label="角度">
-              <el-input v-model="state.rotationForm.angle" placeholder="请输入" />
-            </el-form-item>
-            <div style="text-align: right">
-              <el-button size="small" color="#00329F" @click="rotationFormSubmit">确认</el-button>
-            </div>
-          </el-form>
-        </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>
-        <!-- 分隔线 -->
-        <div
-          class="line"
-          v-if="
-            item.switchType === 'saveAs' ||
-            item.switchType === 'delete' ||
-            item.switchType === 'grid' ||
-            (item.switchType === 'next' &&
-              (toolbarSwitchType === 'lineLibrary' || toolbarSwitchType === 'region'))
-          "
-        ></div>
-        <el-button
-          v-if="
-            item.switchType === 'next' &&
-            (toolbarSwitchType === 'lineLibrary' || toolbarSwitchType === 'region')
-          "
-          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-box" :style="{ cursor: state.cursorStyle }">
-    <div
-      class="map-box-inner"
-      @mousedown.stop="startDrawSelection"
-      @mousemove.stop="updateDrawSelection"
-      @mouseup.stop="endDrawSelection"
-    >
-      <img
-        :src="imgBgObj.imgUrl"
-        :style="{
-          width: Number(imgBgObj.width) * state.imageChangeMultiple + 'px',
-          height: Number(imgBgObj.height) * state.imageChangeMultiple + 'px'
-        }"
-        id="mapBg"
-      />
-      <div
-        ref="mapBackgroundRef"
-        class="map-box-inner-dot"
-        @click="mapClick"
-        :class="state.isShowGrid ? 'grid-show' : ''"
-        :style="{
-          width: Number(imgBgObj.width) * state.imageChangeMultiple + 'px',
-          height: Number(imgBgObj.height) * state.imageChangeMultiple + 'px'
-        }"
-        v-if="interfaceRefreshed"
-      >
-        <VueDragResizeRotate
-          v-for="(item, index) in allHistoryList[currentIndex]"
-          :key="item.locationX"
-          :parent="true"
-          :x="Number(item.locationX) * state.imageChangeMultiple"
-          :y="Number(item.locationY) * state.imageChangeMultiple"
-          :w="Number(item.locationWide) * state.imageChangeMultiple"
-          :h="Number(item.locationDeep) * state.imageChangeMultiple"
-          :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"
-          :resizable="item.resizable"
-          :rotatable="item.rotatable"
-          :lock-aspect-ratio="item.lockAspectRatio"
-          style="border: none"
-        >
-          <!-- 1 路径点 -->
-          <div
-            v-if="item.type === 1 && item.layerSelectionShow"
-            :style="{
-              width: Number(item.locationWide) * state.imageChangeMultiple + 'px',
-              height: Number(item.locationDeep) * state.imageChangeMultiple + 'px',
-              border: ' 1px dashed #000',
-              borderRadius: '50%',
-              backgroundColor: '#000'
-            }"
-          >
-          </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: Number(item.locationWide) * state.imageChangeMultiple + 'px',
-              height: Number(item.locationDeep) * state.imageChangeMultiple + 'px',
-              border: currentItemIndex === index ? '1px dashed #000' : 'none'
-            }"
-          />
-          <!-- 3 设备点 -->
-          <img
-            v-if="item.type === 3 && item.layerSelectionShow"
-            src="https://api.znkjfw.com/admin-api/infra/file/4/get/设备点_png_179_1739327151877.png"
-            alt=""
-            :style="{
-              width: Number(item.locationWide) * state.imageChangeMultiple + 'px',
-              height: Number(item.locationDeep) * state.imageChangeMultiple + '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: Number(item.locationWide) * state.imageChangeMultiple + 'px',
-              height: Number(item.locationDeep) * state.imageChangeMultiple + '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: Number(item.locationWide) * state.imageChangeMultiple + 'px',
-              height: Number(item.locationDeep) * state.imageChangeMultiple + '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: Number(item.locationWide) * state.imageChangeMultiple + 'px',
-              height: Number(item.locationDeep) * state.imageChangeMultiple + '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>
-        </VueDragResizeRotate>
-      </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"
-      />
-    </div>
-  </div>
-  <!-- 节点编辑 -->
-  <editNodeProperties
-    ref="editNodePropertiesRef"
-    :positionMapId="imgBgObj.positionMapId"
-    @submitNodeSuccess="submitNodeSuccess"
-  />
-  <!-- 文字输入弹窗 -->
-  <textFormToolDialog
-    ref="textFormToolDialogRef"
-    v-if="state.textFormToolShow"
-    :inputBoxStyle="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"
-  />
-</template>
-
-<script setup>
-import JSONBigInt from 'json-bigint'
-import { ref, defineComponent, reactive, nextTick, onMounted } from 'vue'
-import editNodeProperties from '../realTimeMap/components-tool/editNodeProperties.vue'
-import textFormToolDialog from '../realTimeMap/components-tool/textFormToolDialog.vue'
-import equipmentToolDialog from '../realTimeMap/components-tool/equipmentToolDialog.vue'
-import itemAreaSettingDialog from '../realTimeMap/components-tool/itemAreaSettingDialog.vue'
-import lineLibrarySettingDialog from '../realTimeMap/components-tool/lineLibrarySettingDialog.vue'
-import layerSelectionToolDialog from '../realTimeMap/components-tool/layerSelectionToolDialog.vue'
-
-import * as MapApi from '@/api/map/map'
-import cursorCollection from '../realTimeMap/cursorCollection'
-
-defineOptions({ name: 'editMapPageRealTimeMap' })
-
-const lineLibrarySettingDialogRef = ref() //线库设置
-const itemAreaSettingDialogRef = ref() //物料区域设置
-const equipmentToolDialogRef = ref() //设备弹窗
-const textFormToolDialogRef = ref() //文字输入弹窗
-const mapBackgroundRef = ref()
-const inputBoxRef = ref() //文字输入框
-
-const message = useMessage() // 消息弹窗
-const formLoading = ref(false)
-
-const allHistoryList = ref([]) //全部的历史记录
-const currentIndex = ref(0) //用于记录是哪条历史记录的
-const currentItemIndex = ref(-1) //用于记录是在编辑那个具体的节点、图标等
-const allMapPointInfo = ref([]) //所有的图标的列表
-
-// 缩放停止
-const interfaceRefreshed = ref(true)
-const resizeEnd = (x, y, w, h, item, index) => {
-  interfaceRefreshed.value = false
-  console.log('缩放', w, h)
-  nextTick(() => {
-    allMapPointInfo.value[index].locationX = x
-    allMapPointInfo.value[index].locationY = y
-    allMapPointInfo.value[index].locationWide = w
-    allMapPointInfo.value[index].locationDeep = h
-    addEditHistory()
-  })
-}
-// 拖拽停止
-const dragEnd = (x, y, item, index) => {
-  console.log('拖拽')
-  if (x === item.locationX && y === item.locationY) return
-  allMapPointInfo.value[index].locationX = x
-  allMapPointInfo.value[index].locationY = y
-  addEditHistory()
-}
-// 旋转
-const rotateEnd = (angle, item, index) => {
-  console.log('旋转')
-  allMapPointInfo.value[index].angle = angle
-  addEditHistory()
-}
-
-//选中
-const editNodePropertiesRef = ref()
-const activatedHandle = (item, index) => {
-  currentItemIndex.value = index
-
-  //节点编辑
-  if (toolbarSwitchType.value === 'editNode' && item.type !== 7) {
-    editNodePropertiesRef.value.open(JSON.parse(JSON.stringify(item)))
-  }
-}
-//非选中
-const deactivatedHandle = () => {
-  console.log('取消选中')
-}
-
-//添加历史记录
-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)))
-  } else {
-    allHistoryList.value.push(JSON.parse(JSON.stringify(allMapPointInfo.value)))
-    currentIndex.value++
-  }
-  interfaceRefreshed.value = true
-  console.log(allHistoryList.value, 'allHistoryList')
-}
-
-//上一步
-const backPreviousStep = () => {
-  if (currentIndex.value > 0) {
-    currentIndex.value--
-    allMapPointInfo.value = allHistoryList.value[currentIndex.value]
-    console.log('撤销', allHistoryList.value[currentIndex.value])
-  } else {
-    message.warning('没了老铁')
-  }
-}
-//下一步
-const backNextStep = () => {
-  if (currentIndex.value < allHistoryList.value.length - 1) {
-    currentIndex.value++
-    allMapPointInfo.value = allHistoryList.value[currentIndex.value]
-    console.log('重做', allHistoryList.value[currentIndex.value])
-  } else {
-    message.warning('没了老铁')
-  }
-}
-
-//地图点击
-const mapClick = (e) => {
-  //节点
-  if (toolbarSwitchType.value === 'drawNodes') {
-    //绘制节点
-    allMapPointInfo.value.push({
-      positionMapId: imgBgObj.positionMapId, //地图的id
-      layerSelectionShow: true,
-      locationX: e.offsetX,
-      locationY: e.offsetY,
-      locationDeep: 16,
-      locationWide: 16,
-      angle: 0,
-      draggable: false,
-      resizable: false,
-      rotatable: false,
-      lockAspectRatio: false, //横纵比
-      img: '',
-      type: 1, //默认类型1 路径节点
-      dataList: [], //存库位的
-      dataObj: {} //存 设备点 停车点 文字
-    })
-    currentIndex.value++
-    allHistoryList.value.push(JSON.parse(JSON.stringify(allMapPointInfo.value)))
-  }
-  //文字输入
-  if (toolbarSwitchType.value === 'text') {
-    state.showInputBox = true
-    state.inputBoxStyle.locationX = e.offsetX
-    state.inputBoxStyle.locationY = e.offsetY
-
-    // 聚焦输入框
-    setTimeout(() => {
-      inputBoxRef.value.focus()
-    }, 0)
-  }
-  //测距
-  if (toolbarSwitchType.value === 'ranging') {
-    measureDistancesClick(e)
-  }
-}
-//输入文字样式改变
-const textFormSuccess = (form) => {
-  state.inputBoxStyle = {
-    fontSize: `${form.fontSize}`,
-    fontFamily: `${form.fontFamily}`,
-    fontColor: `${form.fontColor}`
-  }
-}
-//输入结束
-const handleInputEnd = () => {
-  if (state.inputBoxValue) {
-    state.showInputBox = false
-    allMapPointInfo.value.push({
-      type: 7, //类型  7文字
-      positionMapId: imgBgObj.positionMapId, //地图的id
-      locationX: state.inputBoxStyle.locationX, //x
-      locationY: state.inputBoxStyle.locationY, //y
-      locationDeep: '', //h
-      locationWide: '', //w
-      angle: 0, //旋转角度
-      draggable: true, //是否可以拖动
-      resizable: false, //是否可以调整大小
-      rotatable: false, //是否可以旋转
-      lockAspectRatio: true, //是否锁定比例
-      img: '', //图片
-      text: state.inputBoxValue, //文字内容
-      fontColor: state.inputBoxStyle.fontColor, //文字颜色
-      fontFamily: state.inputBoxStyle.fontFamily, //字体类型
-      fontSize: state.inputBoxStyle.fontSize,
-      dataObj: {}, //存 设备点 停车点 文字
-      layerSelectionShow: true
-    })
-    addEditHistory()
-    state.inputBoxValue = ''
-  }
-}
-//编辑节点成功
-const submitNodeSuccess = (item) => {
-  allMapPointInfo.value[currentItemIndex.value] = item
-  allHistoryList.value[currentIndex.value][currentItemIndex.value] = item
-}
-
-//工具栏点击
-const toolbarSwitchType = ref('')
-const state = reactive({
-  topToolList: [
-    {
-      switchType: 'open',
-      name: '打开',
-      icon: 'ep:folder-add',
-      isActive: false
-    },
-    {
-      switchType: 'save',
-      name: '保存',
-      icon: 'ep:folder-checked',
-      isActive: false
-    },
-    {
-      switchType: 'saveAs',
-      name: '另存为',
-      icon: 'ep:folder-opened',
-      isActive: false
-    },
-    {
-      switchType: 'choose',
-      name: '选择',
-      icon: 'ep:position',
-      isActive: false
-    },
-    {
-      switchType: 'move',
-      name: '移动',
-      icon: 'ep:rank',
-      isActive: false
-    },
-    {
-      switchType: 'revolve',
-      name: '旋转',
-      icon: 'ep:refresh-right',
-      isActive: false
-    },
-    {
-      switchType: 'copy',
-      name: '复制',
-      icon: 'ep:document',
-      isActive: false
-    },
-    {
-      switchType: 'paste',
-      name: '粘贴',
-      icon: 'ep:copy-document',
-      isActive: false
-    },
-    {
-      switchType: 'delete',
-      name: '删除',
-      icon: 'ep:delete',
-      isActive: false
-    },
-    {
-      switchType: 'tools',
-      name: '工具',
-      icon: 'ep:briefcase',
-      isActive: true
-    },
-    {
-      switchType: 'lineLibrary',
-      name: '线库',
-      icon: 'ep:message-box',
-      isActive: false
-    },
-    {
-      switchType: 'region',
-      name: '区域',
-      icon: 'ep:full-screen',
-      isActive: false
-    },
-    {
-      switchType: 'text',
-      name: '文字',
-      icon: 'ep:edit-pen',
-      isActive: false
-    },
-    {
-      switchType: 'equipment',
-      name: '设备',
-      icon: 'ep:video-camera-filled',
-      isActive: false
-    },
-    {
-      switchType: 'ranging',
-      name: '测距',
-      icon: 'ep:folder-add',
-      isActive: false
-    },
-    {
-      switchType: 'layer',
-      name: '图层',
-      icon: 'ep:copy-document',
-      isActive: false
-    },
-    {
-      switchType: 'marker',
-      name: '标记',
-      icon: 'ep:map-location',
-      isActive: false
-    },
-    {
-      switchType: 'grid',
-      name: '网格',
-      icon: 'ep:grid',
-      isActive: true
-    },
-    {
-      switchType: 'larger',
-      name: '放大',
-      icon: 'ep:zoom-in',
-      isActive: false
-    },
-    {
-      switchType: 'smaller',
-      name: '缩小',
-      icon: 'ep:zoom-out',
-      isActive: false
-    },
-    {
-      switchType: 'withdraw',
-      name: '撤回',
-      icon: 'ep:top-left',
-      isActive: false
-    },
-    {
-      switchType: 'next',
-      name: '重做',
-      icon: 'ep:top-right',
-      isActive: false
-    }
-  ],
-  rightToolList: [
-    {
-      switchType: 'drawNodes',
-      name: '绘制节点',
-      icon: 'ep:circle-plus-filled',
-      isActive: false
-    },
-    {
-      switchType: 'editNode',
-      name: '编辑节点',
-      icon: 'ep:circle-plus-filled',
-      isActive: false
-    },
-    {
-      switchType: 'drawRoute',
-      name: '绘制路线',
-      icon: 'ep:semi-select',
-      isActive: false
-    },
-    {
-      switchType: 'editRoute',
-      name: '编辑路线',
-      icon: 'ep:semi-select',
-      isActive: false
-    }
-  ],
-  isShowToolbar: true, //工具栏展示隐藏
-  isShowGrid: true, //网格展示隐藏
-  moveForm: {
-    locationX: '',
-    locationY: ''
-  }, //移动的表单
-  rotationForm: {
-    angle: ''
-  }, //旋转的表单
-  copyMapItem: '', //复制的值
-  cursorStyle: 'auto',
-  drawSelectionAreaShow: false, //绘制框选区域
-  allDrawSelectionAreaBox: [], // 所有框选区域
-  drawSelectionAreaBox: { x: 0, y: 0, width: 0, height: 0 }, //绘制区域的位置，长宽
-  drawSelectionStartPoint: { x: 0, y: 0 }, //开始绘制的点位
-  drawSelectionPointList: [], //绘制选中的list
-  textFormToolShow: false, //文字表单显示隐藏
-  showInputBox: false, //输入框显示隐藏
-  inputBoxStyle: {
-    fontFamily: 'SimSun',
-    fontSize: '14',
-    fontColor: '#000000',
-    locationX: 0,
-    locationY: 0
-  }, //输入框的样式
-  inputBoxValue: '', //输入的值
-  isShowLayer: false, //图层显示
-  measureDistancesPoints: [], // 存储点击的点位
-  measureDistancesNum: 0, // 存储两点之间的距离
-  imageChangeMultiple: 1 //图片放大缩小的倍数
-})
-const toolbarClick = (item) => {
-  let type = item.switchType
-  if (
-    currentItemIndex.value === -1 &&
-    (type === 'move' || type === 'revolve' || type === 'copy' || type === 'delete')
-  ) {
-    message.warning('请先选择要操作的对象')
-    return
-  }
-  //粘贴
-  if (type === 'paste' && !state.copyMapItem) {
-    message.warning('请先复制对象')
-    return
-  }
-
-  if (
-    (type === 'tools' || type === 'text' || type === 'layer' || type === 'grid') &&
-    toolbarSwitchType.value === type
-  ) {
-    toolbarSwitchType.value = ''
-  } else {
-    toolbarSwitchType.value = type
-  }
-
-  if (toolbarSwitchType.value !== 'text') {
-    state.cursorStyle = `auto`
-    state.textFormToolShow = false
-    state.showInputBox = false
-    state.inputBoxValue = ''
-  }
-
-  //工具切换 不适用框选的 要把框选的信息都删掉
-  if (toolbarSwitchType.value !== 'lineLibrary' && toolbarSwitchType.value !== 'region') {
-    state.drawSelectionAreaShow = false
-    state.allDrawSelectionAreaBox = []
-    state.drawSelectionPointList = []
-  }
-  //非测距
-  if (toolbarSwitchType.value !== 'ranging') {
-    state.measureDistancesPoints = [] // 清空存储点击的点位
-    state.measureDistancesNum = 0 // 清空存储两点之间的距离
-  }
-
-  switch (type) {
-    case 'open':
-      // 打开
-      break
-    case 'save':
-      //保存
-      saveMap()
-      break
-    case 'saveAs':
-      //另存为 存为json文件 无法直接访问用户的文件系统 不能选择存在那个文件夹里面
-      const jsonString = JSON.stringify(allHistoryList.value[currentIndex.value], null, 2)
-      const blob = new Blob([jsonString], { type: 'application/json' })
-      const url = URL.createObjectURL(blob)
-
-      const a = document.createElement('a')
-      a.href = url
-      a.download = 'mapJson.json'
-      document.body.appendChild(a)
-      a.click()
-      document.body.removeChild(a)
-      URL.revokeObjectURL(url)
-
-      message.success('下载成功')
-      break
-    case 'choose':
-      //选择
-      break
-    case 'move':
-      //移动
-      break
-    case 'revolve':
-      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('复制成功')
-      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()
-      break
-    case 'delete':
-      //删除
-      allMapPointInfo.value.splice(currentItemIndex.value, 1)
-      addEditHistory()
-      break
-    case 'tools':
-      //工具
-      if (toolbarSwitchType.value === 'tools') {
-        state.isShowToolbar = true
-        item.isActive = true
-      } else {
-        state.isShowToolbar = false
-        item.isActive = false
-      }
-      break
-    case 'lineLibrary':
-      // 线库
-      break
-    case 'region':
-      // 区域
-      break
-    case 'text':
-      //文字
-      if (toolbarSwitchType.value === 'text') {
-        state.textFormToolShow = true
-        state.cursorStyle = `url('${cursorCollection.input}'),auto`
-      } else {
-        state.cursorStyle = `auto`
-        state.textFormToolShow = false
-        state.showInputBox = false
-        state.inputBoxValue = ''
-      }
-      break
-    case 'ranging':
-      // 测距
-      break
-    case 'layer':
-      //图层
-      if (toolbarSwitchType.value === 'layer') {
-        state.isShowLayer = true
-        item.isActive = true
-      } else {
-        state.isShowLayer = false
-        item.isActive = false
-      }
-      break
-    case 'marker':
-      // 标记
-      break
-    case 'grid':
-      //网格
-      if (toolbarSwitchType.value === 'grid') {
-        state.isShowGrid = true
-        item.isActive = true
-      } else {
-        state.isShowGrid = false
-        item.isActive = false
-      }
-      break
-    case 'larger':
-      //放大
-      if (imgBgObj.width < 10000) {
-        state.imageChangeMultiple *= 1.2
-      } else {
-        message.warning('不能在放大了')
-      }
-      break
-    case 'smaller':
-      //缩小
-      if (imgBgObj.width > 500) {
-        state.imageChangeMultiple *= 0.8
-      } else {
-        message.warning('不能在缩小了')
-      }
-      break
-    case 'withdraw':
-      //上一步
-      backPreviousStep()
-      break
-    case 'next':
-      //下一步
-      backNextStep()
-      break
-    case 'drawNodes':
-      //绘制节点
-      break
-    case 'editNode':
-      // 编辑节点
-      break
-    case 'drawRoute':
-      //绘制路线
-      break
-    case 'editRoute':
-      // 编辑路线
-      break
-    case 'equipment':
-      // 设备
-      equipmentToolDialogRef.value.open()
-      break
-  }
-}
-
-//移动工具表单提交
-const moveFormSubmit = () => {
-  allHistoryList.value[currentIndex.value][currentItemIndex.value].locationX =
-    state.moveForm.locationX
-  allHistoryList.value[currentIndex.value][currentItemIndex.value].locationY =
-    state.moveForm.locationY
-}
-//旋转工具表单提交
-const rotationFormSubmit = () => {
-  allHistoryList.value[currentIndex.value][currentItemIndex.value].angle = state.rotationForm.angle
-}
-
-//开始框选绘制
-const startDrawSelection = (event) => {
-  if (toolbarSwitchType.value !== 'lineLibrary' && toolbarSwitchType.value !== 'region') return
-
-  const backgroundRect = mapBackgroundRef.value.getBoundingClientRect()
-
-  const x = Number(event.clientX) - backgroundRect.left
-  const y = event.clientY - backgroundRect.top
-
-  // 确保点击在背景区域内
-  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 !== 'lineLibrary' && toolbarSwitchType.value !== 'region') return
-  if (state.drawSelectionAreaShow) {
-    const backgroundRect = mapBackgroundRef.value.getBoundingClientRect()
-    const x = event.clientX - backgroundRect.left
-    const y = event.clientY - backgroundRect.top
-
-    state.drawSelectionAreaBox.width = Number(x) - Number(state.drawSelectionStartPoint.x)
-    state.drawSelectionAreaBox.height = Number(y) - Number(state.drawSelectionStartPoint.y)
-  }
-  // 阻止默认行为（避免选中图片或文本）
-  event.preventDefault()
-}
-//结束框选绘制
-const endDrawSelection = () => {
-  if (toolbarSwitchType.value !== 'lineLibrary' && toolbarSwitchType.value !== 'region') return
-  state.drawSelectionAreaShow = false
-  state.allDrawSelectionAreaBox.push({ ...state.drawSelectionAreaBox })
-  state.drawSelectionAreaBox = { x: 0, y: 0, width: 0, height: 0 }
-}
-//点击区域
-const clickDrawSelectionArea = () => {
-  let points = allHistoryList.value[currentIndex.value]
-
-  state.drawSelectionPointList = []
-  state.allDrawSelectionAreaBox.forEach((box) => {
-    points.forEach((point) => {
-      if (
-        point.locationX >= box.x &&
-        point.locationX <= box.x + box.width &&
-        point.locationY >= box.y &&
-        point.locationY <= box.y + box.height
-      ) {
-        state.drawSelectionPointList.push(point)
-      }
-    })
-  })
-
-  console.log(state.drawSelectionPointList, '选中的')
-
-  // 清空框选区域
-  state.allDrawSelectionAreaBox = []
-  //只要库位的
-  let binLocation = state.drawSelectionPointList.filter((item) => item.type === 2)
-
-  if (toolbarSwitchType.value === 'lineLibrary') {
-    //线库
-    if (binLocation.length < 2) {
-      message.warning('至少选择两个库位')
-      return
-    }
-    if (!isStraightLine(binLocation)) {
-      message.warning('您选择的库位不在一条直线上')
-      return
-    }
-    lineLibrarySettingDialogRef.value.open(binLocation)
-  }
-  if (toolbarSwitchType.value === 'region') {
-    //区域
-    if (binLocation.length < 1) {
-      message.warning('至少选择两个库位')
-    } else {
-      itemAreaSettingDialogRef.value.open(binLocation)
-    }
-  }
-}
-//计算是不是在同一条直线的
-const isStraightLine = (binLocation) => {
-  if (binLocation.length <= 2) {
-    return true // 两个点一定在一条直线上
-  }
-
-  const firstPoint = binLocation[0]
-  const secondPoint = binLocation[1]
-
-  // 检查是否垂直直线（所有 x 相同）
-  const isVertical = binLocation.every(
-    (point) => Number(point.locationX) === Number(firstPoint.locationX)
-  )
-  if (isVertical) {
-    return true
-  }
-
-  // 检查是否水平直线（所有 y 相同）
-  const isHorizontal = binLocation.every(
-    (point) => Number(point.locationY) === Number(firstPoint.locationY)
-  )
-  if (isHorizontal) {
-    return true
-  }
-
-  // 计算斜率
-  const slope =
-    Number(secondPoint.locationY) -
-    Number(firstPoint.locationY) / (Number(secondPoint.locationX) - Number(firstPoint.locationX))
-
-  // 检查所有点是否在同一条斜线上
-  return binLocation.every((point) => {
-    const currentSlope =
-      (Number(point.locationY) - Number(firstPoint.locationY)) /
-      (Number(point.locationX) - Number(firstPoint.locationX))
-    return Math.abs(currentSlope - slope) < Number.EPSILON // 处理浮点数精度问题
-  })
-}
-
-//测距相关
-// 计算两点之间的距离
-const calculateDistance = (point1, point2) => {
-  const dx = point2.x - point1.x
-  const dy = point2.y - point1.y
-  return Math.sqrt(dx * dx + dy * dy)
-}
-
-// 计算连线的角度
-const computedLineAngle = computed(() => {
-  if (state.measureDistancesPoints.length === 2) {
-    const dx = state.measureDistancesPoints[1].x - state.measureDistancesPoints[0].x
-    const dy = state.measureDistancesPoints[1].y - state.measureDistancesPoints[0].y
-    return Math.atan2(dy, dx) * (180 / Math.PI)
-  }
-  return 0
-})
-
-// 计算连线的长度
-const computedLineWidth = computed(() => {
-  if (state.measureDistancesPoints.length === 2) {
-    return calculateDistance(state.measureDistancesPoints[0], state.measureDistancesPoints[1])
-  }
-  return 0
-})
-
-// 处理点击事件
-const measureDistancesClick = (event) => {
-  // 获取点击点相对于整个页面的坐标
-  const x = event.clientX
-  const y = event.clientY
-
-  // 检查点击是否发生在背景区域内
-  const backgroundRect = mapBackgroundRef.value.getBoundingClientRect()
-  if (
-    x >= backgroundRect.left &&
-    x <= backgroundRect.right &&
-    y >= backgroundRect.top &&
-    y <= backgroundRect.bottom
-  ) {
-    if (state.measureDistancesPoints.length === 2) {
-      // 如果已经有两个点，清空信息
-      state.measureDistancesPoints = []
-      state.measureDistancesNum = null
-    } else {
-      // 记录点击的点位（相对于背景区域的坐标）
-      const offsetX = x - backgroundRect.left
-      const offsetY = y - backgroundRect.top
-      state.measureDistancesPoints.push({ x: offsetX, y: offsetY })
-      if (state.measureDistancesPoints.length === 2) {
-        // 计算两点之间的距离
-        state.measureDistancesNum = calculateDistance(
-          state.measureDistancesPoints[0],
-          state.measureDistancesPoints[1]
-        )
-      }
-    }
-  }
-}
-
-//获取扫描图  地图背景相关的信息
-const imgBgObj = reactive({
-  imgUrl: '',
-  positionMapId: '',
-  width: '',
-  height: '',
-  floor: '',
-  area: ''
-})
-//接收参数
-const { query } = useRoute() // 查询参数
-//获取地图点位
-const getMapList = async () => {
-  if (query.mapId) {
-    imgBgObj.positionMapId = query.mapId
-    imgBgObj.floor = query.floor
-    imgBgObj.area = query.area
-    //调转换成png的接口
-    getMapData(imgBgObj)
-  }
-}
-//调转换成png的接口
-const getMapData = async (mapInfo) => {
-  let data = await MapApi.getPositionMapdDwnloadPngBase64({
-    floor: mapInfo.floor,
-    area: mapInfo.area
-  })
-  imgBgObj.imgUrl = data
-
-  //获取一下图片的宽高
-  const img = new Image()
-  img.src = imgBgObj.imgUrl
-  //加载图片成功
-  img.onload = () => {
-    imgBgObj.width = img.naturalWidth
-    imgBgObj.height = img.naturalHeight
-    getAllNodeList()
-  }
-  //加载图片失败
-  img.onerror = () => {
-    console.error('图片加载失败')
-  }
-}
-//获取所有的点位 处理七种类型的
-const getAllNodeList = async () => {
-  let list = await MapApi.getPositionMapItemList({
-    positionMapId: imgBgObj.positionMapId
-  })
-  list.forEach((item) => {
-    item.layerSelectionShow = true //用于图层
-    item.locationX = Number(item.locationX)
-    item.locationY = Number(item.locationY)
-
-    if (item.type === 1 || item.type === 5 || item.type === 6) {
-      item.dataObj = {}
-      item.dataList = []
-      item.locationDeep = 16
-      item.locationWide = 16
-      item.draggable = false
-      item.resizable = false
-      item.rotatable = false
-      item.lockAspectRatio = true
-    } else if (item.type === 2) {
-      //库位点
-      item.dataList = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
-      item.locationDeep = item.dataList[0].locationDeep
-      item.locationWide = item.dataList[0].locationWide
-      item.draggable = true
-      item.resizable = false
-      item.rotatable = false
-      item.lockAspectRatio = true
-    } else if (item.type === 3 || item.type === 4) {
-      item.dataObj = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
-      item.dataList = []
-      item.locationDeep = item.dataObj.locationDeep
-      item.locationWide = item.dataObj.locationWide
-      item.draggable = true
-      item.resizable = false
-      item.rotatable = false
-      item.lockAspectRatio = true
-    } else if (item.type === 7) {
-      item.dataObj = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
-      item.text = item.dataObj.text
-      item.fontColor = item.dataObj.fontColor
-      item.fontFamily = item.dataObj.fontFamily
-      item.fontSize = item.dataObj.fontSize
-      item.angle = item.dataObj.angle
-      item.draggable = true
-      item.resizable = false
-      item.rotatable = true
-      item.lockAspectRatio = true
-    }
-    allMapPointInfo.value.push(item)
-  })
-  allHistoryList.value[0] = JSON.parse(JSON.stringify(allMapPointInfo.value))
-}
-
-//保存地图按钮
-const saveMap = async () => {
-  //节点的保存
-  await saveNodeList()
-  //路线的保存
-}
-//节点的保存
-const saveNodeList = async () => {
-  formLoading.value = true
-  let list = allHistoryList.value[currentIndex.value]
-
-  list.forEach((item) => {
-    if (item.type === 7) {
-      item.dataObj.positionMapId = imgBgObj.positionMapId
-      item.dataObj.text = item.text
-      item.dataObj.fontColor = item.fontColor
-      item.dataObj.fontType = item.fontType
-      item.dataObj.fontFamily = item.fontFamily
-      item.dataObj.rotatable = item.rotatable
-      item.dataObj.angle = item.angle
-      //dataJson数据
-      item.dataJson = JSON.stringify(item.dataObj)
-    }
-  })
-
-  try {
-    await MapApi.batchSaveOrEditOrDelMapItem(imgBgObj.positionMapId, list)
-    message.success('创建成功')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-//筛选图层
-const layerSelectionSuccess = (typeList) => {
-  allHistoryList.value[currentIndex.value].forEach((item) => {
-    // 如果 type 存在于第一个数组中，则将 layerSelectionShow 设置为 false
-    if (typeList.includes(item.type)) {
-      item.layerSelectionShow = false
-    } else {
-      item.layerSelectionShow = true
-    }
-  })
-}
-
-onMounted(() => {
-  getMapList()
-})
-</script>
-
-<style lang="scss" scoped>
-.map-box {
-  width: 100%;
-  position: relative;
-
-  .map-box-inner {
-    position: relative;
-    width: 100%;
-
-    .map-box-inner-dot {
-      position: absolute;
-      top: 0;
-      left: 0;
-    }
-
-    .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;
-    }
-  }
-}
-
-.top-tool {
-  .top-tool-list {
-    display: flex;
-    align-items: center;
-    text-align: center;
-    background-color: #fff;
-    margin-top: -15px;
-    margin-left: -20px;
-    margin-right: -20px;
-    padding: 0 12px;
-    margin-bottom: 20px;
-    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
-    height: 70px;
-
-    .top-tool-item {
-      display: flex;
-      align-items: center;
-
-      .tool-item {
-        cursor: pointer;
-        width: 49px;
-        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;
-        }
-      }
-      .line {
-        margin: 0 12px;
-        width: 1px;
-        height: 47px;
-        border: 1px solid #cccccc;
-      }
-    }
-  }
-
-  .right-tool-list {
-    position: absolute;
-    right: 0;
-    top: 94px;
-    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;
-      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;
-      }
-    }
-  }
-
-  .tool-active {
-    background: #ebf1ff;
-    border-bottom: 2px solid #1677ff;
-  }
-
-  .right-tool-active {
-    background: #ebf1ff;
-  }
-}
-
-.input-box-class {
-  position: absolute;
-  border: 1px solid #00329f;
-  padding: 4px;
-  outline: none;
-}
-
-.selection-area-btn {
-  width: 80px;
-  margin-left: 4px;
-}
-</style>
diff --git a/src/views/mapPage/realTimeMap/components-tool/itemAreaManagementDialog.vue b/src/views/mapPage/realTimeMap/components-tool/itemAreaManagementDialog.vue
index fdfa98c4..590e2e25 100644
--- a/src/views/mapPage/realTimeMap/components-tool/itemAreaManagementDialog.vue
+++ b/src/views/mapPage/realTimeMap/components-tool/itemAreaManagementDialog.vue
@@ -13,8 +13,8 @@
     >
       <el-table-column type="index" width="50" align="center" />
       <el-table-column prop="areaName" label="库区名称" align="center" />
-      <el-table-column prop="areaMsg" label="库区说明" align="center" />
-      <el-table-column label="操作" align="center">
+      <el-table-column prop="skuInfo" label="库区说明" align="center" />
+      <el-table-column label="操作" align="center" width="100">
         <template #default="scope">
           <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">
             删除
diff --git a/src/views/mapPage/realTimeMap/components-tool/lineLibraryManagementDialog.vue b/src/views/mapPage/realTimeMap/components-tool/lineLibraryManagementDialog.vue
index 8fcf6fc9..e3809fc6 100644
--- a/src/views/mapPage/realTimeMap/components-tool/lineLibraryManagementDialog.vue
+++ b/src/views/mapPage/realTimeMap/components-tool/lineLibraryManagementDialog.vue
@@ -13,7 +13,6 @@
     >
       <el-table-column type="index" width="50" align="center" />
       <el-table-column prop="laneName" label="巷道名称" align="center" />
-      <el-table-column prop="laneMsg" label="巷道说明" align="center" />
       <el-table-column label="操作" align="center">
         <template #default="scope">
           <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">
diff --git a/src/views/mapPage/realTimeMap/components-tool/map-scale-tool.vue b/src/views/mapPage/realTimeMap/components-tool/map-scale-tool.vue
new file mode 100644
index 00000000..c2cc6eb6
--- /dev/null
+++ b/src/views/mapPage/realTimeMap/components-tool/map-scale-tool.vue
@@ -0,0 +1,464 @@
+<!-- 刻度尺 -->
+<template>
+  <div :style="wrapperStyle" class="vue-ruler-wrapper" onselectstart="return false;" ref="el">
+    <section>
+      <div ref="horizontalRuler" class="vue-ruler-h" @mousedown.stop="horizontalDragRuler">
+        <span
+          v-for="(item, index) in xScale"
+          :key="index"
+          :style="{ left: index * 50 + 2 + 'px' }"
+          class="n"
+          >{{ item.id }}</span
+        >
+      </div>
+      <div ref="verticalRuler" class="vue-ruler-v" @mousedown.stop="verticalDragRuler">
+        <span
+          v-for="(item, index) in yScale"
+          :key="index"
+          :style="{ top: index * 50 + 2 + 'px' }"
+          class="n"
+          >{{ 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">
+      <slot></slot>
+    </div>
+    <div v-show="isDrag" class="vue-ruler-content-mask"></div>
+  </div>
+</template>
+<script setup>
+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,
+    default: 100,
+    validator: (val) => val % 10 === 0
+  }
+})
+
+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)
+})
+//function
+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
+  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, windowWidth.value)
+  getCalc(yScale.value, windowHeight.value)
+}
+
+//获取刻度
+const getCalc = (array, length) => {
+  for (let i = 0; i < (length * props.stepLength) / 50; i += props.stepLength) {
+    if (i % props.stepLength === 0 && i != 0) {
+      array.push({ id: i })
+    }
+  }
+}
+// 获取矫正刻度方法
+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
+}
+</script>
+<style lang="scss">
+.vue-ruler-wrapper {
+  left: 0;
+  top: 0;
+  z-index: 9;
+  user-select: none;
+}
+
+.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 {
+  position: absolute;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+  z-index: 999;
+}
+
+.vue-ruler-h {
+  width: calc(100% - 18px);
+  background-color: #333;
+  height: 18px;
+  left: 18px;
+  opacity: 0.6;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAASCAMAAAAuTX21AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRFMzMzAAAA////BqjYlAAAACNJREFUeNpiYCAdMDKRCka1jGoBA2JZZGshiaCXFpIBQIABAAplBkCmQpujAAAAAElFTkSuQmCC)
+    repeat-x;
+}
+
+.vue-ruler-v {
+  width: 18px;
+  height: 85vh;
+  top: 18px;
+  opacity: 0.6;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAyCAMAAABmvHtTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRFMzMzAAAA////BqjYlAAAACBJREFUeNpiYGBEBwwMTGiAakI0NX7U9aOuHyGuBwgwAH6bBkAR6jkzAAAAAElFTkSuQmCC)
+    repeat-y;
+  /*./image/ruler_v.png*/
+}
+
+.vue-ruler-v .n,
+.vue-ruler-h .n {
+  position: absolute;
+  font:
+    10px/1 Arial,
+    sans-serif;
+  color: #333;
+  cursor: default;
+  top: 1px;
+}
+
+.vue-ruler-v .n {
+  width: 8px;
+  left: 3px;
+  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 779c11c1..ce1f501f 100644
--- a/src/views/mapPage/realTimeMap/editMap.vue
+++ b/src/views/mapPage/realTimeMap/editMap.vue
@@ -540,6 +540,7 @@ import lineLibrarySettingDialog from './components-tool/lineLibrarySettingDialog
 import layerSelectionToolDialog from './components-tool/layerSelectionToolDialog.vue'
 import itemAreaManagementDialog from './components-tool/itemAreaManagementDialog.vue'
 import lineLibraryManagementDialog from './components-tool/lineLibraryManagementDialog.vue'
+import mapScaleTool from './components-tool/map-scale-tool.vue'
 
 import * as MapApi from '@/api/map/map'
 import cursorCollection from './cursorCollection'
@@ -565,18 +566,43 @@ const allMapPointInfo = ref([]) //所有的图标的列表
 
 // 缩放停止
 const interfaceRefreshed = ref(true)
-const resizeEnd = (x, y, w, h, item, index) => {
+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
+
     allMapPointInfo.value[index].locationX = x
     allMapPointInfo.value[index].locationY = y
     allMapPointInfo.value[index].locationWide = w
     allMapPointInfo.value[index].locationDeep = 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.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.actualEndPointX = actualPoint.actualLocationX
+        route.actualEndPointY = actualPoint.actualLocationY
+      }
+    })
   })
 }
 // 拖拽停止
-const dragEnd = (x, y, item, index) => {
+const dragEnd = (locationX, locationY, item, index) => {
+  let x = Number(locationX) + Number(item.locationWide) / 2
+  let y = Number(locationY) + Number(item.locationDeep) / 2
+
   if (x === item.locationX && y === item.locationY) return
   let actualPoint = disposeEventPoint(x, y)
   allMapPointInfo.value[index].locationX = x
@@ -1848,6 +1874,7 @@ document.onmousedown = function (e) {
     currentItemIndex.value = -1
   }
 }
+
 // 阻止默认菜单弹出
 window.document.oncontextmenu = function () {
   return false
@@ -1863,8 +1890,7 @@ onMounted(() => {
   position: relative;
   width: 100%;
   overflow: auto;
-  border: 1px solid #ccc;
-  // height: 80vh;
+  // height: 85vh;
   .map-bg {
     background-size: contain;
     background-repeat: no-repeat;
@@ -1878,17 +1904,13 @@ onMounted(() => {
 }
 
 .top-tool {
+  margin-top: 5px;
   .top-tool-list {
     display: flex;
     align-items: center;
     text-align: center;
     background-color: #fff;
-    margin-top: -15px;
-    margin-left: -20px;
-    margin-right: -20px;
     padding: 0 12px;
-    margin-bottom: 20px;
-    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
     height: 70px;
 
     .top-tool-item {
@@ -1897,7 +1919,7 @@ onMounted(() => {
 
       .tool-item {
         cursor: pointer;
-        width: 49px;
+        width: 50px;
         height: 70px;
         display: flex;
         flex-direction: column;
@@ -1915,6 +1937,7 @@ onMounted(() => {
           line-height: 20px;
           text-align: center;
           font-style: normal;
+          margin-top: 4px;
         }
       }
       .line {