From b2d31a2f5e8603860a83b2823e987cdd2eae5ff7 Mon Sep 17 00:00:00 2001
From: yyy <2605810609@qq.com>
Date: Fri, 28 Mar 2025 16:50:23 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=9C=B0=E5=9B=BE=20?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9=E4=BF=A1=E6=81=AF=E5=B1=95=E7=A4=BA=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mapPage/realTimeMap/editMap copy.vue      | 3134 +++++++++++++++++
 src/views/mapPage/realTimeMap/editMap.vue     |   36 +-
 2 files changed, 3164 insertions(+), 6 deletions(-)
 create mode 100644 src/views/mapPage/realTimeMap/editMap copy.vue

diff --git a/src/views/mapPage/realTimeMap/editMap copy.vue b/src/views/mapPage/realTimeMap/editMap copy.vue
new file mode 100644
index 00000000..a91c44f2
--- /dev/null
+++ b/src/views/mapPage/realTimeMap/editMap copy.vue	
@@ -0,0 +1,3134 @@
+<template>
+  <div class="edit-map-page" @wheel="handleWheel">
+    <div class="top-tool">
+      <div class="top-tool-list">
+        <div v-for="item in state.topToolList" :key="item.switchType" class="top-tool-item">
+          <el-popover
+            placement="bottom"
+            :width="170"
+            trigger="click"
+            v-if="item.switchType === 'move' || item.switchType === 'revolve'"
+            :disabled="state.currentItemIndex === -1"
+          >
+            <template #reference>
+              <div
+                class="tool-item"
+                :class="
+                  toolbarSwitchType === item.switchType
+                    ? 'tool-active'
+                    : item.isActive
+                      ? 'right-tool-active'
+                      : ''
+                "
+                @click="toolbarClick(item)"
+              >
+                <Icon :icon="item.icon" :size="24" />
+                <div class="name"> {{ item.name }} </div>
+              </div>
+            </template>
+            <!-- 位置 -->
+            <el-form :model="state.moveForm" v-if="item.switchType === 'move'" class="mt-2">
+              <el-form-item label="X">
+                <el-input-number
+                  v-model="state.moveForm.locationX"
+                  :min="0"
+                  :max="imgBgObj.width"
+                  controls-position="right"
+                />
+              </el-form-item>
+              <el-form-item label="Y">
+                <el-input-number
+                  v-model="state.moveForm.locationY"
+                  :min="0"
+                  :max="imgBgObj.height"
+                  controls-position="right"
+                />
+              </el-form-item>
+              <div style="text-align: right">
+                <el-button
+                  size="small"
+                  style="width: 64px; height: 30px; background: #00329f"
+                  color="#00329F"
+                  @click="moveFormSubmit()"
+                  >确认</el-button
+                >
+              </div>
+            </el-form>
+            <!-- 旋转 -->
+            <el-form :model="state.rotationForm" v-if="item.switchType === 'revolve'" class="mt-2">
+              <el-form-item label="角度">
+                <el-input-number
+                  v-model="state.rotationForm.angle"
+                  :min="0"
+                  :max="360"
+                  controls-position="right"
+                />
+              </el-form-item>
+              <div style="text-align: right">
+                <el-button
+                  size="small"
+                  style="width: 64px; height: 30px; background: #00329f"
+                  color="#00329F"
+                  @click="rotationFormSubmit"
+                  >确认</el-button
+                >
+              </div>
+            </el-form>
+          </el-popover>
+          <!-- 线库 -->
+          <el-popover
+            placement="bottom"
+            trigger="click"
+            v-else-if="item.switchType === 'lineLibrary'"
+            :popper-style="{ padding: '0px' }"
+          >
+            <template #reference>
+              <div
+                class="tool-item"
+                :class="
+                  toolbarSwitchType === 'lineLibrary' ||
+                  toolbarSwitchType === 'createLineLibrary' ||
+                  toolbarSwitchType === 'lineLibraryManage'
+                    ? 'tool-active'
+                    : item.isActive
+                      ? 'right-tool-active'
+                      : ''
+                "
+                @click="toolbarClick(item)"
+              >
+                <Icon :icon="item.icon" :size="24" />
+                <div class="name"> {{ item.name }} </div>
+              </div>
+            </template>
+            <div v-if="item.switchType === 'lineLibrary'" class="drop-down-menu">
+              <div
+                class="drop-down-menu-item"
+                :class="toolbarSwitchType === 'createLineLibrary' ? 'right-tool-active' : ''"
+                @click="toolbarClick({ switchType: 'createLineLibrary' })"
+                >生成线库</div
+              >
+              <div
+                class="drop-down-menu-item"
+                :class="toolbarSwitchType === 'lineLibraryManage' ? 'right-tool-active' : ''"
+                @click="toolbarClick({ switchType: 'lineLibraryManage' })"
+                >线库管理</div
+              >
+            </div>
+          </el-popover>
+          <!-- 区域  -->
+          <el-popover
+            placement="bottom"
+            trigger="click"
+            v-else-if="item.switchType === 'region'"
+            :popper-style="{ padding: '0px' }"
+          >
+            <template #reference>
+              <div
+                class="tool-item"
+                :class="
+                  toolbarSwitchType === 'region' ||
+                  toolbarSwitchType === 'createRegion' ||
+                  toolbarSwitchType === 'regionManage'
+                    ? 'tool-active'
+                    : item.isActive
+                      ? 'right-tool-active'
+                      : ''
+                "
+                @click="toolbarClick(item)"
+              >
+                <Icon :icon="item.icon" :size="24" />
+                <div class="name"> {{ item.name }} </div>
+              </div>
+            </template>
+            <div v-if="item.switchType === 'region'" class="drop-down-menu">
+              <div
+                class="drop-down-menu-item"
+                :class="toolbarSwitchType === 'createRegion' ? 'right-tool-active' : ''"
+                @click="toolbarClick({ switchType: 'createRegion' })"
+                >生成物料区域</div
+              >
+              <div
+                class="drop-down-menu-item"
+                :class="toolbarSwitchType === 'regionManage' ? 'right-tool-active' : ''"
+                @click="toolbarClick({ switchType: 'regionManage' })"
+                >物料区域管理</div
+              >
+            </div>
+          </el-popover>
+          <!-- 标记 -->
+          <el-popover
+            placement="bottom"
+            trigger="click"
+            v-else-if="item.switchType === 'marker'"
+            width="220"
+            :visible="state.popoverVisible"
+          >
+            <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.markForm" class="mt-2" label-width="68">
+              <el-form-item label="标记车辆">
+                <el-select
+                  v-model="state.markForm.macAddress"
+                  placeholder="请选择"
+                  @change="macAddressChange"
+                >
+                  <el-option
+                    v-for="item in state.mapMarkCarList"
+                    :key="item.id"
+                    :label="item.robotNo"
+                    :value="item.macAddress"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="标记属性" v-if="state.markForm.markProperty">
+                <el-input v-model="state.markForm.markProperty" style="width: 240px" disabled />
+              </el-form-item>
+              <el-form-item label="原节点" v-if="state.markForm.originalNode">
+                <el-input v-model="state.markForm.originalNode" style="width: 240px" disabled />
+              </el-form-item>
+              <div style="text-align: right">
+                <el-button
+                  size="small"
+                  style="width: 64px; height: 30px; background: #efefef"
+                  @click="markFormCancel()"
+                  >取消</el-button
+                >
+                <el-button
+                  size="small"
+                  style="width: 64px; height: 30px; background: #00329f"
+                  color="#00329F"
+                  @click="markFormSubmit()"
+                  >确认</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 === 'save' ||
+              item.switchType === 'delete' ||
+              item.switchType === 'grid' ||
+              (item.switchType === 'next' &&
+                (toolbarSwitchType === 'createLineLibrary' ||
+                  toolbarSwitchType === 'createRegion' ||
+                  toolbarSwitchType === 'drawRoute' ||
+                  toolbarSwitchType === 'generateLine'))
+            "
+          ></div>
+          <el-button
+            v-if="
+              item.switchType === 'next' &&
+              (toolbarSwitchType === 'createLineLibrary' ||
+                toolbarSwitchType === 'createRegion' ||
+                toolbarSwitchType === 'drawRoute' ||
+                toolbarSwitchType === 'generateLine')
+            "
+            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 }"
+      v-if="imgBgObj.width && imgBgObj.height"
+    >
+      <!-- <map-scale-tool :stepLength="50" :width="imgBgObj.width" :height="imgBgObj.height"> -->
+      <div
+        class="map-bg"
+        :style="{
+          backgroundImage: `url(${imgBgObj.imgUrl})`,
+          transform: `scale(${state.imageChangeMultiple})`,
+          transformOrigin: '0 0',
+          width: `${imgBgObj.width}px`,
+          height: `${imgBgObj.height}px`
+        }"
+        @mousedown="startDrawSelection"
+        @mousemove="updateDrawSelection"
+        @mouseup="endDrawSelection"
+      >
+        <div
+          ref="mapBackgroundRef"
+          class="map-box-inner"
+          @click="mapClick"
+          :class="state.isShowGrid ? 'grid-show' : ''"
+          :style="{
+            width: imgBgObj.width + 'px',
+            height: imgBgObj.height + 'px'
+          }"
+          v-if="interfaceRefreshed"
+        >
+          <VueDragResizeRotate
+            v-for="(item, index) in state.allMapPointInfo"
+            :key="index + Number(item.locationX)"
+            :parent="true"
+            :x="Number(item.locationX) - Number(item.locationWidePx) / 2"
+            :y="Number(item.locationY) - Number(item.locationDeepPx) / 2"
+            :w="Number(item.locationWidePx)"
+            :h="Number(item.locationDeepPx)"
+            :r="item.angle"
+            @rotatestop="(degree) => rotateEnd(degree, item, index)"
+            @dragstop="(x, y) => dragEnd(x, y, item, index)"
+            @resizestop="(x, y, width, height) => resizeEnd(x, y, width, height, item, index)"
+            @activated="() => activatedHandle(item, index)"
+            @deactivated="deactivatedHandle"
+            :draggable="!state.prohibitedOperation && item.draggable"
+            :resizable="!state.prohibitedOperation && item.resizable"
+            :rotatable="!state.prohibitedOperation && item.rotatable"
+            :lock-aspect-ratio="item.lockAspectRatio"
+            :scaleRatio="state.imageChangeMultiple"
+            style="border: none; z-index: 999"
+          >
+            <!-- 节点合集 -->
+            <div
+              @mousedown="startFromPoint(index, $event)"
+              :style="{ width: item.locationWidePx + 'px', height: item.locationDeepPx + 'px' }"
+            >
+              <!-- 1 路径点 -->
+              <el-tooltip
+                effect="dark"
+                :content="item.sortNum || '节点未保存'"
+                placement="top"
+                trigger="click"
+              >
+                <div
+                  v-if="item.type === 1 && item.layerSelectionShow"
+                  :style="{
+                    width: item.locationWidePx + 'px',
+                    height: item.locationDeepPx + 'px',
+                    backgroundColor: state.currentItemIndex === index ? '#f48924' : '#000',
+                    borderRadius: '50%',
+                    zIndex: 999
+                  }"
+                >
+                </div>
+                <!-- 2 库位点 -->
+                <img
+                  v-if="item.type === 2 && item.layerSelectionShow"
+                  src="https://api.znkjfw.com/admin-api/infra/file/4/get/库位库存_png_179_1739326653035.png"
+                  alt=""
+                  :style="binLocationStyle(item, index)"
+                />
+                <!-- 3 设备点 -->
+                <img
+                  v-if="item.type === 3 && item.layerSelectionShow"
+                  :src="
+                    item.mapImageUrl ||
+                    'https://api.znkjfw.com/admin-api/infra/file/4/get/设备点_png_179_1739327151877.png'
+                  "
+                  alt=""
+                  :style="nodeStyle(item, index)"
+                />
+                <!-- 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="nodeStyle(item, index)"
+                />
+                <!-- 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="nodeStyle(item, index)"
+                />
+                <!-- 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="nodeStyle(item, index)"
+                />
+              </el-tooltip>
+            </div>
+            <div
+              class="node-text"
+              v-if="item.type === 7 && item.layerSelectionShow"
+              :style="{
+                position: 'absolute',
+                color: item.fontColor,
+                fontSize: item.fontSize + 'px',
+                fontFamily: item.fontFamily,
+                border: state.currentItemIndex === index ? '1px dashed #000' : 'none'
+              }"
+            >
+              {{ item.text }}
+            </div>
+          </VueDragResizeRotate>
+
+          <div v-if="imgBgObj.width && imgBgObj.height">
+            <svg
+              :width="imgBgObj.width"
+              :height="imgBgObj.height"
+              style="position: absolute; top: 0; left: 0; z-index: 9"
+              id="svgId"
+            >
+              <!-- 实时绘制当前直线 -->
+              <line
+                v-if="state.isDrawing && toolbarSwitchType === 'clickDrawRoute'"
+                :x1="Number(state.startDrawPoint.locationX)"
+                :y1="Number(state.startDrawPoint.locationY)"
+                :x2="Number(state.currentDrawX)"
+                :y2="Number(state.currentDrawY)"
+                stroke="#00329F"
+                stroke-width="3"
+              />
+              <template v-if="state.mapRouteList.length > 0">
+                <template v-for="(curve, index) in state.mapRouteList" :key="index">
+                  <!-- 定义箭头 -->
+                  <defs>
+                    <marker
+                      id="forward-arrow"
+                      viewBox="0 0 10 10"
+                      refX="10"
+                      refY="5"
+                      orient="auto"
+                      markerWidth="2"
+                      markerHeight="2"
+                    >
+                      <path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
+                    </marker>
+                    <!-- 反向箭头 -->
+                    <marker
+                      id="backward-arrow"
+                      viewBox="0 0 10 10"
+                      refX="0"
+                      refY="5"
+                      orient="auto"
+                      markerWidth="2"
+                      markerHeight="2"
+                    >
+                      <path d="M 10 0 L 0 5 L 10 10 z" fill="black" />
+                    </marker>
+                  </defs>
+
+                  <!-- 直线 -->
+                  <template v-if="curve.method === 0">
+                    <line
+                      :x1="Number(curve.startPointX)"
+                      :y1="Number(curve.startPointY)"
+                      :x2="Number(curve.endPointX)"
+                      :y2="Number(curve.endPointY)"
+                      :stroke="curve.isSelected ? '#f48924' : '#00329F'"
+                      stroke-width="3"
+                      @click="handleChooseRoute(curve, index)"
+                      @dblclick="handleEditRoute(curve, index)"
+                    />
+                    <text
+                      :x="(Number(curve.startPointX) + Number(curve.endPointX)) / 2"
+                      :y="(Number(curve.startPointY) + Number(curve.endPointY) - 18) / 2"
+                      font-size="11"
+                      text-anchor="middle"
+                      fill="black"
+                      v-if="curve.isSelected"
+                    >
+                      {{ calculateRouteLength(curve, 'line') }}米
+                    </text>
+                    <path
+                      v-if="curve.isSelected"
+                      :d="getLineMidArrowPath(curve)"
+                      stroke="none"
+                      fill="black"
+                      stroke-width="3"
+                      :marker-start="curve.direction === 2 ? 'url(#backward-arrow)' : ''"
+                      :marker-end="
+                        curve.direction === 2 ? 'url(#forward-arrow)' : 'url(#forward-arrow)'
+                      "
+                    />
+                  </template>
+
+                  <template v-else>
+                    <path
+                      id="curvePath"
+                      :d="getCurvePath(curve)"
+                      :stroke="curve.isSelected ? '#f48924' : '#00329F'"
+                      stroke-width="3"
+                      fill="none"
+                      @click="handleChooseRoute(curve, index)"
+                      @dblclick="handleEditRoute(curve, index)"
+                    />
+                    <text
+                      :x="computedCurveTextX(curve)"
+                      :y="computedCurveTextY(curve)"
+                      font-size="11"
+                      text-anchor="middle"
+                      fill="black"
+                      v-if="curve.isSelected"
+                    >
+                      {{ calculateRouteLength(curve, 'curve') }}米
+                    </text>
+
+                    <path
+                      v-if="curve.isSelected"
+                      :d="getBezierMidArrowPath(curve)"
+                      stroke="none"
+                      fill="black"
+                      stroke-width="3"
+                      :marker-start="curve.direction === 2 ? 'url(#backward-arrow)' : ''"
+                      :marker-end="
+                        curve.direction === 2 ? 'url(#forward-arrow)' : 'url(#forward-arrow)'
+                      "
+                    />
+
+                    <!-- 第一条控制线 -->
+                    <line
+                      v-if="state.currentDragTarget.index == index"
+                      :x1="Number(curve.startPointX)"
+                      :y1="Number(curve.startPointY)"
+                      :x2="curve.beginControlX"
+                      :y2="curve.beginControlY"
+                      :stroke="curve.isSelected ? '#f48924' : '#00329F'"
+                      stroke-dasharray="4"
+                      stroke-width="2"
+                    />
+                    <!-- 第二条控制线 -->
+                    <line
+                      v-if="state.currentDragTarget.index == index"
+                      :x1="Number(curve.endPointX)"
+                      :y1="Number(curve.endPointY)"
+                      :x2="curve.endControlX"
+                      :y2="curve.endControlY"
+                      :stroke="curve.isSelected ? '#f48924' : '#00329F'"
+                      stroke-dasharray="4"
+                      stroke-width="2"
+                    />
+                    <circle
+                      v-if="state.currentDragTarget.index == index"
+                      id="startCircle"
+                      :cx="curve.beginControlX"
+                      :cy="curve.beginControlY"
+                      r="5"
+                      :fill="curve.isSelected ? '#f48924' : '#00329F'"
+                      @mousedown="startDrag(curve, index, 'start')"
+                    />
+                    <circle
+                      v-if="state.currentDragTarget.index == index"
+                      id="endCircle"
+                      :cx="curve.endControlX"
+                      :cy="curve.endControlY"
+                      r="5"
+                      :fill="curve.isSelected ? '#f48924' : '#00329F'"
+                      @mousedown="startDrag(curve, index, 'end')"
+                    />
+                  </template>
+                </template>
+              </template>
+            </svg>
+          </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-if="state.measureDistancesPoints.length === 2" :style="rangingLineStyle"></div>
+          <!-- 显示距离信息 -->
+          <div v-if="state.measureDistancesNum !== null" :style="rangingTextStyle">
+            {{ state.measureDistancesNum.toFixed(2) }}米
+          </div>
+          <!-- 测距的点 -->
+          <div
+            v-for="(point, index) in state.measureDistancesPoints"
+            :key="index"
+            :style="getRangingPointStyle(point)"
+          ></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>
+      <!-- </map-scale-tool> -->
+    </div>
+
+    <!-- 节点编辑 -->
+    <editNodeProperties
+      v-if="imgBgObj.positionMapId"
+      ref="editNodePropertiesRef"
+      :positionMapId="imgBgObj.positionMapId"
+      :imgBgObj="imgBgObj"
+      @submitNodeSuccess="submitNodeSuccess"
+      @addEventListener="addEventListener"
+    />
+    <!-- 文字输入弹窗 -->
+    <textFormToolDialog
+      ref="textFormToolDialogRef"
+      v-if="state.textFormToolShow"
+      :inputBoxStyle="state.inputBoxStyle"
+      @textFormSuccess="textFormSuccess"
+    />
+    <!-- 图层选择 -->
+    <layerSelectionToolDialog
+      v-if="state.isShowLayer"
+      ref="layerSelectionToolDialogRef"
+      @layerSelectionSuccess="layerSelectionSuccess"
+    />
+    <!-- 设备弹窗选择 -->
+    <equipmentToolDialog
+      ref="equipmentToolDialogRef"
+      :positionMapId="imgBgObj.positionMapId"
+      @addEventListener="addEventListener"
+    />
+    <!-- 区域选择 -->
+    <itemAreaSettingDialog
+      ref="itemAreaSettingDialogRef"
+      :positionMapId="imgBgObj.positionMapId"
+      @addEventListener="addEventListener"
+      @itemAreaSettingSubmitSuccess="itemAreaSettingSubmitSuccess"
+    />
+    <!-- 线库设置 -->
+    <lineLibrarySettingDialog
+      ref="lineLibrarySettingDialogRef"
+      :positionMapId="imgBgObj.positionMapId"
+      @addEventListener="addEventListener"
+      @submitLineLibraryFormSuccess="submitLineLibraryFormSuccess"
+    />
+    <!-- 编辑地图路线 -->
+    <editMapRouteDialog
+      v-if="imgBgObj.positionMapId"
+      ref="editMapRouteDialogRef"
+      @editMapRouteDialogSubmit="editMapRouteDialogSubmit"
+      @addEventListener="addEventListener"
+      :imgBgObj="imgBgObj"
+    />
+    <!-- 线库管理 -->
+    <lineLibraryManagementDialog
+      ref="lineLibraryManagementDialogRef"
+      :positionMapId="imgBgObj.positionMapId"
+      @addEventListener="addEventListener"
+      @lineLibraryManagementDelete="lineLibraryManagementDelete"
+      @lineLibraryManagementEdit="lineLibraryManagementEdit"
+    />
+    <!-- 区域管理 -->
+    <itemAreaManagementDialog
+      ref="itemAreaManagementDialogRef"
+      :positionMapId="imgBgObj.positionMapId"
+      @addEventListener="addEventListener"
+      @itemAreaManagementDelete="itemAreaManagementDelete"
+      @itemAreaManagementEdit="itemAreaManagementEdit"
+    />
+    <!-- 生成直线 选择开始点和结束点 -->
+    <GenerateStraightLinesDialog
+      ref="GenerateStraightLinesDialogRef"
+      @GenerateStraightLinesSubmit="GenerateStraightLinesSubmit"
+    />
+  </div>
+</template>
+
+<script setup>
+import JSONBigInt from 'json-bigint'
+import { ElLoading } from 'element-plus'
+import { ref, defineComponent, reactive, nextTick, onMounted } from 'vue'
+import editMapRouteDialog from './components-tool/editMapRouteDialog.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 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'
+
+defineOptions({ name: 'editMapPageRealTimeMap' })
+
+const GenerateStraightLinesDialogRef = ref() //生成直线的
+const lineLibraryManagementDialogRef = ref() //线库管理
+const itemAreaManagementDialogRef = ref() //区域管理
+const lineLibrarySettingDialogRef = ref() //线库设置
+const itemAreaSettingDialogRef = ref() //物料区域设置
+const equipmentToolDialogRef = ref() //设备弹窗
+const textFormToolDialogRef = ref() //文字输入弹窗
+const editMapRouteDialogRef = ref() //编辑地图路线的弹窗
+const mapBackgroundRef = ref()
+const inputBoxRef = ref() //文字输入框
+
+const message = useMessage() // 消息弹窗
+
+//其他节点的样式
+const nodeStyle = (item, index) => {
+  return {
+    verticalAlign: 'top',
+    width: item.locationWidePx + 'px',
+    height: item.locationDeepPx + 'px',
+    border: state.currentItemIndex === index ? '1px dashed #000' : 'none'
+  }
+}
+//库位的样式
+const binLocationStyle = (item, index) => {
+  return {
+    verticalAlign: 'top',
+    width: item.locationWidePx + 'px',
+    height: item.locationDeepPx + 'px',
+    border:
+      state.currentItemIndex === index
+        ? '1px dashed #000'
+        : state.noLocationNumberList.includes(index)
+          ? '1px dashed red'
+          : 'none'
+  }
+}
+
+// 缩放停止
+const interfaceRefreshed = ref(true)
+const resizeEnd = (locationX, locationY, w, h, item, index) => {
+  interfaceRefreshed.value = false
+  nextTick(() => {
+    let x = Number(locationX) + Number(item.locationWidePx) / 2
+    let y = Number(locationY) + Number(item.locationDeepPx) / 2
+    let width = Number(w) * imgBgObj.resolution * 100 //实际的宽高cm
+    let height = Number(h) * imgBgObj.resolution * 100
+
+    let actualPoint = disposeEventPoint(x, y)
+
+    state.allMapPointInfo[index].locationX = x
+    state.allMapPointInfo[index].locationY = y
+    state.allMapPointInfo[index].locationWide = width
+    state.allMapPointInfo[index].locationDeep = height
+    state.allMapPointInfo[index].locationWidePx = w
+    state.allMapPointInfo[index].locationDeepPx = h
+    state.allMapPointInfo[index].actualLocationX = actualPoint.actualLocationX
+    state.allMapPointInfo[index].actualLocationY = actualPoint.actualLocationY
+    //更改路线里的
+    state.mapRouteList.forEach((route) => {
+      if (item.id === route.startingPointId) {
+        route.startPointX = x
+        route.startPointY = y
+        route.beginHigh = Number(item.locationDeepPx)
+        route.beginWidth = Number(item.locationWidePx)
+        route.actualStartPointX = actualPoint.actualLocationX
+        route.actualStartPointY = actualPoint.actualLocationY
+      }
+      if (item.id === route.endPointId) {
+        route.endPointX = x
+        route.endPointY = y
+        route.endHigh = Number(item.locationDeepPx)
+        route.endWidth = Number(item.locationWidePx)
+        route.actualEndPointX = actualPoint.actualLocationX
+        route.actualEndPointY = actualPoint.actualLocationY
+      }
+    })
+    addEditHistory()
+  })
+}
+
+// 拖拽停止
+const dragEnd = (locationX, locationY, item, index) => {
+  let x = Number(locationX) + Number(item.locationWidePx) / 2
+  let y = Number(locationY) + Number(item.locationDeepPx) / 2
+
+  if (x === item.locationX && y === item.locationY) return
+  let actualPoint = disposeEventPoint(x, y)
+  state.allMapPointInfo[index].locationX = x
+  state.allMapPointInfo[index].locationY = y
+  state.allMapPointInfo[index].actualLocationX = actualPoint.actualLocationX
+  state.allMapPointInfo[index].actualLocationY = actualPoint.actualLocationY
+  //更改路线里的
+  state.mapRouteList.forEach((route) => {
+    if (item.id === route.startingPointId) {
+      route.startPointX = x
+      route.startPointY = y
+      route.beginHigh = Number(item.locationDeepPx)
+      route.beginWidth = Number(item.locationWidePx)
+      route.actualStartPointX = actualPoint.actualLocationX
+      route.actualStartPointY = actualPoint.actualLocationY
+    }
+    if (item.id === route.endPointId) {
+      route.endPointX = x
+      route.endPointY = y
+      route.endHigh = Number(item.locationDeepPx)
+      route.endWidth = Number(item.locationWidePx)
+      route.actualEndPointX = actualPoint.actualLocationX
+      route.actualEndPointY = actualPoint.actualLocationY
+    }
+  })
+  addEditHistory()
+}
+// 旋转
+const rotateEnd = (angle, item, index) => {
+  state.allMapPointInfo[index].angle = angle
+  addEditHistory()
+}
+
+//节点选中
+const editNodePropertiesRef = ref()
+const activatedHandle = (item, index) => {
+  state.currentItemIndex = index
+
+  //让路线不选中
+  state.selectedCurve = ''
+
+  if (state.mapRouteList.length > 0 && state.currentDragTarget.index !== null) {
+    state.mapRouteList[state.currentDragTarget.index].isSelected = false
+    state.currentDragTarget = { index: null, type: null }
+  }
+
+  //节点编辑
+  if (toolbarSwitchType.value === 'editNode' && item.type !== 7) {
+    let list = state.allMapPointInfo.filter((item) => item.type === 3)
+    removeEventListener() //移除监听
+    editNodePropertiesRef.value.open(JSON.parse(JSON.stringify(item)), list)
+  }
+}
+//非选中
+const deactivatedHandle = () => {}
+
+//添加历史记录
+const addEditHistory = () => {
+  //要判断是不是在最新的记录上修改 如果不是 要把currentIndex之后的记录都删掉 保持当前修改是最新的
+  if (state.currentIndex < state.allHistoryList.length - 1) {
+    state.allHistoryList.splice(state.currentIndex + 1)
+  }
+  state.allHistoryList.push({
+    allMapPointInfo: JSON.parse(JSON.stringify(state.allMapPointInfo)),
+    mapRouteList: JSON.parse(JSON.stringify(state.mapRouteList))
+  })
+  state.currentIndex = state.allHistoryList.length - 1
+  interfaceRefreshed.value = true
+}
+
+//上一步
+const backPreviousStep = () => {
+  if (state.currentIndex > 0) {
+    state.currentIndex--
+    state.allMapPointInfo.splice(
+      0,
+      state.allMapPointInfo.length,
+      ...JSON.parse(JSON.stringify(state.allHistoryList[state.currentIndex]?.allMapPointInfo))
+    )
+    state.mapRouteList.splice(
+      0,
+      state.mapRouteList.length,
+      ...JSON.parse(JSON.stringify(state.allHistoryList[state.currentIndex]?.mapRouteList))
+    )
+  } else {
+    message.warning('没了老铁')
+  }
+}
+//下一步
+const backNextStep = () => {
+  if (state.currentIndex < state.allHistoryList.length - 1) {
+    state.currentIndex++
+    state.allMapPointInfo.splice(
+      0,
+      state.allMapPointInfo.length,
+      ...JSON.parse(JSON.stringify(state.allHistoryList[state.currentIndex]?.allMapPointInfo))
+    )
+    state.mapRouteList.splice(
+      0,
+      state.mapRouteList.length,
+      ...JSON.parse(JSON.stringify(state.allHistoryList[state.currentIndex]?.mapRouteList))
+    )
+  } else {
+    message.warning('没了老铁')
+  }
+}
+
+//地图点击
+const mapClick = (e) => {
+  const x = disposeEventPoints(e).x
+  const y = disposeEventPoints(e).y
+  const actualLocationX = disposeEventPoints(e).actualLocationX
+  const actualLocationY = disposeEventPoints(e).actualLocationY
+
+  //新增节点
+  if (toolbarSwitchType.value === 'drawNodes') {
+    state.allMapPointInfo.push({
+      positionMapId: imgBgObj.positionMapId, //地图的id
+      layerSelectionShow: true,
+      locationX: x,
+      locationY: y,
+      actualLocationX: actualLocationX,
+      actualLocationY: actualLocationY,
+      locationDeep: 40,
+      locationWide: 40,
+      locationDeepPx: 8,
+      locationWidePx: 8,
+      angle: 0,
+      draggable: true,
+      resizable: true,
+      rotatable: false,
+      lockAspectRatio: false, //横纵比
+      mapImageUrl: '',
+      locationYaw: 0, //弧度
+      type: 1, //默认类型1 路径节点
+      dataList: [], //存库位的
+      dataObj: {} //存 设备点 停车点 文字
+    })
+    addEditHistory()
+  }
+  //文字输入
+  if (toolbarSwitchType.value === 'text') {
+    state.showInputBox = true
+    state.inputBoxStyle.locationX = x
+    state.inputBoxStyle.locationY = y
+    state.inputBoxStyle.actualLocationX = actualLocationX
+    state.inputBoxStyle.actualLocationY = actualLocationY
+
+    // 聚焦输入框
+    setTimeout(() => {
+      inputBoxRef.value.focus()
+    }, 0)
+  }
+  //测距
+  if (toolbarSwitchType.value === 'ranging') {
+    measureDistancesClick(e)
+  }
+}
+//输入文字样式改变
+const textFormSuccess = (form) => {
+  state.inputBoxStyle.fontSize = `${form.fontSize}`
+  state.inputBoxStyle.fontFamily = `${form.fontFamily}`
+  state.inputBoxStyle.fontColor = `${form.fontColor}`
+}
+//输入结束
+const handleInputEnd = () => {
+  if (state.inputBoxValue) {
+    state.showInputBox = false
+    state.allMapPointInfo.push({
+      type: 7, //类型  7文字
+      positionMapId: imgBgObj.positionMapId, //地图的id
+      locationX: state.inputBoxStyle.locationX, //x
+      locationY: state.inputBoxStyle.locationY, //y
+      actualLocationX: state.inputBoxStyle.actualLocationX,
+      actualLocationY: state.inputBoxStyle.actualLocationY,
+      locationDeep: null, //h
+      locationWide: null, //w
+      angle: 0, //旋转角度
+      draggable: true, //是否可以拖动
+      resizable: false, //是否可以调整大小
+      rotatable: true, //是否可以旋转
+      lockAspectRatio: true, //是否锁定比例
+      mapImageUrl: '', //图片
+      text: state.inputBoxValue, //文字内容
+      fontColor: state.inputBoxStyle.fontColor, //文字颜色
+      fontFamily: state.inputBoxStyle.fontFamily, //字体类型
+      fontSize: state.inputBoxStyle.fontSize,
+      dataObj: {}, //存 设备点 停车点 文字
+      layerSelectionShow: true,
+      locationDeep: 20,
+      locationWide: 20,
+      locationDeepPx: 4,
+      locationWidePx: 4
+    })
+    addEditHistory()
+    state.inputBoxValue = ''
+  }
+}
+//编辑节点成功
+const submitNodeSuccess = (form) => {
+  form.locationDeepPx = Number(form.locationDeep) / 100 / imgBgObj.resolution
+  form.locationWidePx = Number(form.locationWide) / 100 / imgBgObj.resolution
+  state.allMapPointInfo[state.currentItemIndex] = form
+
+  //节点位置改变 通知路径里面的节点也改变
+  state.mapRouteList.forEach((item) => {
+    if (form.id === item.startingPointId) {
+      item.startPointX = form.locationX
+      item.startPointY = form.locationY
+      item.beginHigh = Number(form.locationDeepPx)
+      item.beginWidth = Number(form.locationWidePx)
+      item.actualStartPointX = disposeEventPoint(form.locationX, form.locationY).actualLocationX
+      item.actualStartPointY = disposeEventPoint(form.locationX, form.locationY).actualLocationY
+    }
+    if (form.id === item.endPointId) {
+      item.endPointX = form.locationX
+      item.endPointY = form.locationY
+      item.endHigh = Number(form.locationDeepPx)
+      item.endWidth = Number(form.locationWidePx)
+      item.actualEndPointX = disposeEventPoint(form.locationX, form.locationY).actualLocationX
+      item.actualEndPointY = disposeEventPoint(form.locationX, form.locationY).actualLocationY
+    }
+  })
+  addEditHistory()
+
+  //存在库位未填写排序号的问题
+  state.noLocationNumberList = state.allMapPointInfo.reduce((invalidIndexes, item, index) => {
+    if (item.type === 2 && !item.locationNumber) {
+      invalidIndexes.push(index) // 如果不满足条件，记录索引
+    }
+    return invalidIndexes
+  }, [])
+}
+
+//工具栏点击
+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: false
+    },
+    {
+      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: false
+    },
+    {
+      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: 'clickDrawRoute',
+      name: '新增路线',
+      icon: 'ep:semi-select',
+      isActive: false
+    },
+    // {
+    //   switchType: 'drawRoute',
+    //   name: '框选绘制',
+    //   icon: 'ep:semi-select',
+    //   isActive: false
+    // },
+    {
+      switchType: 'editRoute',
+      name: '编辑路线',
+      icon: 'ep:semi-select',
+      isActive: false
+    },
+    {
+      switchType: 'generateLine',
+      name: '生成直线',
+      icon: 'ep:finished',
+      isActive: false
+    }
+  ],
+  isShowToolbar: false, //工具栏展示隐藏
+  isShowGrid: false, //网格展示隐藏
+  moveForm: {
+    locationX: 0,
+    locationY: 0
+  }, //移动的表单
+  rotationForm: {
+    angle: 0
+  }, //旋转的表单
+  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,
+    actualLocationX: 0,
+    actualLocationY: 0
+  }, //输入框的样式
+  inputBoxValue: '', //输入的值
+  isShowLayer: false, //图层显示
+  measureDistancesPoints: [], // 存储点击的点位
+  measureDistancesNum: 0, // 存储两点之间的距离
+  imageChangeMultiple: 1, //图片放大缩小的倍数
+  prohibitedOperation: false, //禁止操作 在框选测距等操作时，禁止所有拖动等操作
+  currentDragTarget: {
+    index: null,
+    type: null
+  }, //当前拖拽的目标（起点、终点、控制点）
+  selectedCurve: '', // 当前选中的曲线
+  startDrawPointIndex: -1, // 起始点的索引
+  startDrawPoint: null, //新增路线开始的点
+  isDrawing: false, //正在绘制
+  currentDrawX: 0, //正在绘制的x轴坐标
+  currentDrawY: 0, //正在绘制的y轴坐标
+  allHistoryList: [], //所有的历史记录 [{allMapPointInfo:[],mapRouteList:[]}]
+  allMapPointInfo: [], //当前页面上的所有节点的列表
+  mapRouteList: [], //当前页面上所有路线的列表
+  currentIndex: 0, //当前处在哪条历史记录
+  currentItemIndex: -1, //当前处在哪个工具
+  markForm: {
+    macAddress: '', //	mac地址
+    markProperty: '', //标记属性
+    originalNode: '', //原节点
+    robotNo: '' //车辆编号
+  }, //标记的表单
+  mapMarkCarList: [], //标记的车辆列表
+  popoverVisible: false, //标记弹窗
+  noLocationNumberList: [] //没有排序的库位index
+})
+
+const toolbarClick = async (item) => {
+  let type = item.switchType
+  if (state.currentItemIndex === -1 && (type === 'move' || type === 'revolve' || type === 'copy')) {
+    message.warning('请先选择要操作的对象')
+    return
+  }
+
+  if (
+    type === 'delete' &&
+    state.currentDragTarget.index === null &&
+    state.currentItemIndex === -1
+  ) {
+    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 === 'generateLine' ||
+    toolbarSwitchType.value === 'createLineLibrary' ||
+    toolbarSwitchType.value === 'createRegion'
+  ) {
+    state.cursorStyle = 'crosshair'
+  } else {
+    state.cursorStyle = `auto`
+  }
+
+  //工具切换 不适用框选的 要把框选的信息都删掉
+  if (
+    toolbarSwitchType.value !== 'createLineLibrary' &&
+    toolbarSwitchType.value !== 'createRegion'
+  ) {
+    state.drawSelectionAreaShow = false
+    state.allDrawSelectionAreaBox = []
+    state.drawSelectionPointList = []
+  }
+  //非测距
+  if (toolbarSwitchType.value !== 'ranging') {
+    state.measureDistancesPoints = [] // 清空存储点击的点位
+    state.measureDistancesNum = 0 // 清空存储两点之间的距离
+  }
+
+  //禁止操作 在框选测距等操作时，禁止所有拖动等操作
+  if (
+    toolbarSwitchType.value === 'drawNodes' ||
+    toolbarSwitchType.value === 'editNode' ||
+    toolbarSwitchType.value === 'clickDrawRoute' ||
+    toolbarSwitchType.value === 'drawRoute' ||
+    toolbarSwitchType.value === 'createLineLibrary' ||
+    toolbarSwitchType.value === 'createRegion'
+  ) {
+    state.prohibitedOperation = true
+  } else {
+    state.prohibitedOperation = false
+  }
+
+  switch (type) {
+    case 'open':
+      // 打开
+      break
+    case 'save':
+      //保存
+      await message.confirm('请确认是否保存？')
+      saveMap()
+      break
+    case 'saveAs':
+      //另存为 存为json文件 无法直接访问用户的文件系统 不能选择存在那个文件夹里面
+      const jsonString = JSON.stringify(state.allHistoryList[state.currentIndex], 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':
+      //移动
+      console.log(state.allMapPointInfo[state.currentItemIndex])
+      state.moveForm.locationX = Number(state.allMapPointInfo[state.currentItemIndex].locationX)
+      state.moveForm.locationY = Number(state.allMapPointInfo[state.currentItemIndex].locationY)
+      break
+    case 'revolve':
+      state.rotationForm.angle = Number(state.allMapPointInfo[state.currentItemIndex]?.angle) || 0
+      break
+    case 'copy':
+      //复制
+      replicationNode()
+      break
+    case 'paste':
+      //粘贴
+      pasteNode()
+      break
+    case 'delete':
+      //删除
+      if (state.currentItemIndex !== -1) {
+        let deleteId = state.allMapPointInfo[state.currentItemIndex].id
+        // 点删除之后 跟点相关的路线都要删除
+        state.mapRouteList = state.mapRouteList.filter(
+          (item) => item.startingPointId !== deleteId && item.endPointId !== deleteId
+        )
+        state.allMapPointInfo.splice(state.currentItemIndex, 1)
+        //恢复index
+        state.currentItemIndex = -1
+      }
+      if (state.currentDragTarget.index !== null) {
+        state.mapRouteList.splice(state.currentDragTarget.index, 1)
+        state.currentDragTarget.index = null
+      }
+      addEditHistory()
+      setTimeout(() => {
+        toolbarSwitchType.value = ''
+      }, 200)
+      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 'createLineLibrary':
+      // 生成线库
+      break
+    case 'createRegion':
+      // 生成区域
+      break
+    case 'lineLibraryManage':
+      // 线库管理
+      removeEventListener() //移除监听
+      lineLibraryManagementDialogRef.value.open()
+      break
+    case 'regionManage':
+      removeEventListener() //移除监听
+      itemAreaManagementDialogRef.value.open()
+      // 区域管理
+      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':
+      // 标记
+      mapMark()
+      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 < 4) {
+        state.imageChangeMultiple += 0.2
+      } else {
+        message.warning('不能在放大了')
+      }
+      break
+    case 'smaller':
+      //缩小
+      if (state.imageChangeMultiple > 0.2) {
+        state.imageChangeMultiple -= 0.2
+      } 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':
+      // 设备
+      let equipmentList = state.allMapPointInfo.filter((item) => {
+        return item.type === 3
+      })
+      removeEventListener() //移除监听
+      equipmentToolDialogRef.value.open(equipmentList)
+      break
+    case 'generateLine':
+      // 生成直线
+      break
+  }
+}
+
+//复制
+const replicationNode = () => {
+  let copyMapItem = state.allMapPointInfo[state.currentItemIndex]
+
+  if (copyMapItem.type === 3) {
+    message.warning('设备不能复制！')
+    return
+  }
+
+  let locationX = Number(copyMapItem.locationX) + 20
+  let locationY = Number(copyMapItem.locationY) + 20
+  let actualPoint = disposeEventPoint(locationX, locationY)
+  if (copyMapItem.dataList.length > 0) {
+    copyMapItem.dataList.forEach((item) => {
+      delete item.id
+      delete item.locationNo
+      delete item.mapItemId
+    })
+    copyMapItem.dataJson = JSON.stringify(copyMapItem.dataList)
+  }
+
+  if (copyMapItem.dataObj && JSON.stringify(copyMapItem.dataObj) !== '{}') {
+    delete copyMapItem.dataObj.id
+    delete copyMapItem.dataObj.positionMapItemId
+    copyMapItem.dataJson = JSON.stringify(copyMapItem.dataObj)
+  }
+  state.copyMapItem = {
+    positionMapId: copyMapItem.positionMapId,
+    locationX: locationX,
+    locationY: locationY,
+    actualLocationX: actualPoint.actualLocationX,
+    actualLocationY: actualPoint.actualLocationY,
+    type: copyMapItem.type,
+    dataJson: copyMapItem.dataJson || '',
+    dataObj: copyMapItem.dataObj || {},
+    dataList: copyMapItem.dataList || [],
+    locationDeep: copyMapItem.locationDeep,
+    locationWide: copyMapItem.locationWide,
+    locationDeepPx: copyMapItem.locationDeepPx,
+    locationWidePx: copyMapItem.locationWidePx,
+    draggable: copyMapItem.draggable,
+    resizable: copyMapItem.resizable,
+    rotatable: copyMapItem.rotatable,
+    lockAspectRatio: copyMapItem.lockAspectRatio,
+    layerSelectionShow: copyMapItem.layerSelectionShow,
+    mapImageUrl: copyMapItem.mapImageUrl,
+    locationYaw: copyMapItem.locationYaw,
+    areaId: null,
+    locationNumber: null
+  }
+  message.success('复制成功')
+}
+//粘贴
+const pasteNode = () => {
+  let copyObj = JSON.parse(JSON.stringify(state.copyMapItem))
+  state.allMapPointInfo.push(copyObj)
+  message.success('粘贴成功')
+  addEditHistory()
+}
+//移动工具表单提交
+const moveFormSubmit = async () => {
+  state.allMapPointInfo[state.currentItemIndex].locationX = Number(state.moveForm.locationX)
+  state.allMapPointInfo[state.currentItemIndex].locationY = Number(state.moveForm.locationY)
+  addEditHistory()
+}
+//旋转工具表单提交
+const rotationFormSubmit = () => {
+  state.allMapPointInfo[state.currentItemIndex].angle = state.rotationForm.angle
+  addEditHistory()
+}
+
+//标记
+const mapMark = async () => {
+  state.mapMarkCarList = await MapApi.getListByMapId(imgBgObj.positionMapId)
+
+  if (state.currentItemIndex != -1) {
+    let item = state.allMapPointInfo[state.currentItemIndex]
+    state.markForm.originalNode = `[${item.locationX},${item.locationY}]`
+    if (item.type == 1) {
+      state.markForm.markProperty = '路径点'
+    } else if (item.type == 2) {
+      state.markForm.markProperty = '库位点'
+    } else if (item.type == 3) {
+      state.markForm.markProperty = '设备点'
+    } else if (item.type == 4) {
+      state.markForm.markProperty = '停车点'
+    } else if (item.type == 5) {
+      state.markForm.markProperty = '区域变更点'
+    } else if (item.type == 6) {
+      state.markForm.markProperty = '等待点'
+    }
+  } else {
+    state.markForm.markProperty = ''
+    state.markForm.originalNode = ''
+  }
+  state.popoverVisible = true
+}
+//标记提交
+const macAddressChange = (e) => {
+  const targetItem = state.mapMarkCarList.find((item) => item.macAddress === e)
+  if (targetItem) {
+    state.markForm.robotNo = targetItem.robotNo
+  }
+}
+//取消标记
+const markFormCancel = () => {
+  state.popoverVisible = false
+  state.markForm.markProperty = ''
+  state.markForm.originalNode = ''
+  state.markForm.macAddress = ''
+  state.markForm.robotNo = ''
+}
+//确认标记
+const markFormSubmit = async () => {
+  if (!state.markForm.macAddress) {
+    message.warning('请选择车辆')
+    return
+  }
+  let res = await MapApi.getAGVPointInformation(state.markForm.macAddress)
+  if (res) {
+    let content = JSON.parse(res.content)
+    let point = JSON.parse(content[state.markForm.robotNo]) //标记传过来的数据
+    let pointPx = convertActualToBrowser(point.x, point.y)
+    let actualPoint = disposeEventPoint(pointPx.x, pointPx.y)
+
+    if (state.currentItemIndex !== -1) {
+      state.allMapPointInfo[state.currentItemIndex].locationX = pointPx.x
+      state.allMapPointInfo[state.currentItemIndex].locationY = pointPx.y
+      state.allMapPointInfo[state.currentItemIndex].actualLocationX = actualPoint.actualLocationX
+      state.allMapPointInfo[state.currentItemIndex].actualLocationY = actualPoint.actualLocationY
+
+      //更改路线里的
+      let item = state.allMapPointInfo[state.currentItemIndex]
+      state.mapRouteList.forEach((route) => {
+        if (item.id === route.startingPointId) {
+          route.startPointX = pointPx.x
+          route.startPointY = pointPx.y
+          route.beginHigh = Number(item.locationDeepPx)
+          route.beginWidth = Number(item.locationWidePx)
+          route.actualStartPointX = actualPoint.actualLocationX
+          route.actualStartPointY = actualPoint.actualLocationY
+        }
+        if (item.id === route.endPointId) {
+          route.endPointX = pointPx.x
+          route.endPointY = pointPx.y
+          route.endHigh = Number(item.locationDeepPx)
+          route.endWidth = Number(item.locationWidePx)
+          route.actualEndPointX = actualPoint.actualLocationX
+          route.actualEndPointY = actualPoint.actualLocationY
+        }
+      })
+
+      addEditHistory()
+    } else {
+      //新增一个节点
+      state.allMapPointInfo.push({
+        positionMapId: imgBgObj.positionMapId, //地图的id
+        layerSelectionShow: true,
+        locationX: pointPx.x,
+        locationY: pointPx.y,
+        actualLocationX: actualPoint.actualLocationX,
+        actualLocationY: actualPoint.actualLocationY,
+        locationDeep: 40,
+        locationWide: 40,
+        locationDeepPx: 8,
+        locationWidePx: 8,
+        angle: 0,
+        draggable: true,
+        resizable: true,
+        rotatable: false,
+        lockAspectRatio: false, //横纵比
+        mapImageUrl: '',
+        type: 1, //默认类型1 路径节点
+        dataList: [], //存库位的
+        dataObj: {}, //存 设备点 停车点 文字
+        locationYaw: 0 //弧度
+      })
+      addEditHistory()
+    }
+  } else {
+    message.warning('未采集到该AGV点位信息')
+  }
+  state.popoverVisible = false
+}
+
+//鼠标拖动绘制节点
+// 从点开始绘制
+const startFromPoint = (index, event) => {
+  if (toolbarSwitchType.value === 'clickDrawRoute') {
+    let list = state.allMapPointInfo
+    const point = list[index]
+    if (point.id) {
+      state.startDrawPoint = point //开始点
+      state.startDrawPointIndex = index
+      state.isDrawing = true
+      event.preventDefault() // 防止默认行为
+    } else {
+      message.warning('选择的节点未保存')
+      // 重置状态
+      state.startDrawPointIndex = -1 // 起始点的索引
+      state.startDrawPoint = null
+      state.isDrawing = false
+      state.currentDrawX = 0
+      state.currentDrawY = 0
+    }
+  }
+}
+//开始框选绘制
+const startDrawSelection = (event) => {
+  if (
+    toolbarSwitchType.value === 'createLineLibrary' ||
+    toolbarSwitchType.value === 'createRegion' ||
+    toolbarSwitchType.value === 'drawRoute' ||
+    toolbarSwitchType.value == 'generateLine'
+  ) {
+    const backgroundRect = mapBackgroundRef.value.getBoundingClientRect()
+
+    const x = disposeEventPoints(event).x
+    const y = disposeEventPoints(event).y
+
+    // 确保点击在背景区域内
+    if (x >= 0 && x <= backgroundRect.width && y >= 0 && y <= backgroundRect.height) {
+      state.drawSelectionAreaShow = true
+      state.drawSelectionStartPoint = { x: x, y: y }
+      state.drawSelectionAreaBox = { x: x, y: y, width: 0, height: 0 }
+    }
+    event.preventDefault() // 阻止默认行为（避免选中图片或文本）
+  }
+}
+// 更新框选区域
+const updateDrawSelection = (event) => {
+  if (
+    toolbarSwitchType.value === 'createLineLibrary' ||
+    toolbarSwitchType.value === 'createRegion' ||
+    toolbarSwitchType.value === 'drawRoute' ||
+    toolbarSwitchType.value === 'generateLine'
+  ) {
+    if (state.drawSelectionAreaShow) {
+      const x = disposeEventPoints(event).x
+      const y = disposeEventPoints(event).y
+
+      state.drawSelectionAreaBox = {
+        x: Math.min(state.drawSelectionStartPoint.x, x),
+        y: Math.min(state.drawSelectionStartPoint.y, y),
+        width: Math.abs(Number(x) - Number(state.drawSelectionStartPoint.x)),
+        height: Math.abs(Number(y) - Number(state.drawSelectionStartPoint.y))
+      }
+    }
+    event.preventDefault() // 阻止默认行为（避免选中图片或文本）
+  }
+  if (toolbarSwitchType.value === 'clickDrawRoute') {
+    // 实时绘制
+    if (state.isDrawing) {
+      const x = disposeEventPoints(event).x
+      const y = disposeEventPoints(event).y
+
+      state.currentDrawX = x
+      state.currentDrawY = y
+    }
+    event.preventDefault() // 阻止默认行为（避免选中图片或文本）
+  }
+}
+//结束框选绘制
+const endDrawSelection = (event) => {
+  if (
+    toolbarSwitchType.value === 'createLineLibrary' ||
+    toolbarSwitchType.value === 'createRegion' ||
+    toolbarSwitchType.value === 'drawRoute' ||
+    toolbarSwitchType.value === 'generateLine'
+  ) {
+    state.drawSelectionAreaShow = false
+    state.allDrawSelectionAreaBox.push({ ...state.drawSelectionAreaBox })
+    state.drawSelectionAreaBox = { x: 0, y: 0, width: 0, height: 0 }
+    event.preventDefault() // 阻止默认行为（避免选中图片或文本）
+    return
+  }
+  if (toolbarSwitchType.value === 'clickDrawRoute') {
+    if (state.isDrawing) {
+      // 找到最近的终点
+      const endPointIndex = findClosestPoint(state.currentDrawX, state.currentDrawY)
+
+      if (endPointIndex !== null && endPointIndex !== state.startDrawPointIndex) {
+        let list = state.allMapPointInfo
+        const endPoint = list[endPointIndex]
+
+        //先判断节点有没有保存
+        if (!endPoint.id) {
+          message.warning('选择的节点未保存')
+          // 重置状态
+          state.startDrawPointIndex = -1 // 起始点的索引
+          state.startDrawPoint = null
+          state.isDrawing = false
+          state.currentDrawX = 0
+          state.currentDrawY = 0
+          return
+        }
+
+        const newLine = {
+          startPointX: state.startDrawPoint.locationX,
+          startPointY: state.startDrawPoint.locationY,
+          endPointX: endPoint.locationX,
+          endPointY: endPoint.locationY
+        }
+        // 检查是否已存在相同的直线
+        const isDuplicate = state.mapRouteList.some(
+          (line) =>
+            (line.startPointX === newLine.startPointX &&
+              line.startPointY === newLine.startPointY &&
+              line.endPointX === newLine.endPointX &&
+              line.endPointY === newLine.endPointY) ||
+            (line.startPointX === newLine.endPointX &&
+              line.startPointY === newLine.endPointY &&
+              line.endPointX === newLine.startPointX &&
+              line.endPointY === newLine.startPointY)
+        )
+        if (isDuplicate) {
+          message.warning('此路线已存在')
+        } else {
+          // 保存当前直线
+          state.mapRouteList.push({
+            isSelected: false, //是否选中
+            startingPointId: state.startDrawPoint.id,
+            endPointId: endPoint.id,
+            startPointX: state.startDrawPoint.locationX, //开始点
+            startPointY: state.startDrawPoint.locationY, //开始点
+            endPointX: endPoint.locationX, //结束点
+            endPointY: endPoint.locationY, //结束点
+            actualStartPointX: state.startDrawPoint.actualLocationX, //实际开始点位x轴
+            actualStartPointY: state.startDrawPoint.actualLocationY, //实际开始点位y轴
+            actualEndPointX: endPoint.actualLocationX, //实际结束点位x轴
+            actualEndPointY: endPoint.actualLocationY, //实际结束点位y轴
+            actualBeginControlX: '', //实际开始控制点x轴
+            actualBeginControlY: '', //实际开始控制点y轴
+            actualEndControlX: '', //实际结束控制点x轴
+            actualEndControlY: '', //实际结束控制点y轴
+            beginControlX: 0, //开始控制点x轴
+            beginControlY: 0, //开始控制点y轴
+            endControlX: 0, //结束控制点x轴
+            endControlY: 0, //结束控制点y轴
+            expansionZoneFront: 0, //膨胀区域前
+            expansionZoneAfter: 0, //膨胀区域后
+            expansionZoneLeft: 0, //	膨胀区域左
+            expansionZoneRight: 0, //膨胀区域右
+            method: 0, //行走方法 0.直线 1.上左曲线2.上右曲线3.下左曲线 4.下右曲线
+            direction: 2, //方向 1.单向 2.双向,
+            forwardSpeedLimit: 1.5, //正向限速
+            reverseSpeedLimit: 0.4, //	反向限速
+            toward: 0, //	车头朝向( 0:正正 1:正反 2:反正 3:反反)
+            beginWidth: state.startDrawPoint.locationWidePx, //起点宽
+            beginHigh: state.startDrawPoint.locationDeepPx, //	起点高
+            endWidth: endPoint.locationWidePx, //	终点宽
+            endHigh: endPoint.locationDeepPx //	终点高
+          })
+          addEditHistory()
+        }
+      }
+      // 重置状态
+      state.startDrawPointIndex = -1 // 起始点的索引
+      state.startDrawPoint = null
+      state.isDrawing = false
+      state.currentDrawX = 0
+      state.currentDrawY = 0
+    }
+    event.preventDefault() // 阻止默认行为（避免选中图片或文本）
+    return
+  }
+}
+// 找到最近的点
+const findClosestPoint = (x, y) => {
+  let minDistance = Infinity
+  let closestIndex = null
+  let list = state.allMapPointInfo
+  list.forEach((point, index) => {
+    const distance = Math.sqrt((point.locationX - x) ** 2 + (point.locationY - y) ** 2)
+    if (distance < minDistance && distance < point.locationWide) {
+      // 10 是点的捕捉范围
+      minDistance = distance
+      closestIndex = index
+    }
+  })
+  return closestIndex
+}
+//点击区域
+const clickDrawSelectionArea = () => {
+  let points = state.allMapPointInfo
+
+  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)
+  let routeList = state.drawSelectionPointList
+
+  let isHaveId = binLocation.every((item) => {
+    item.id
+  })
+
+  //线库
+  if (toolbarSwitchType.value === 'createLineLibrary') {
+    //线库
+    if (binLocation.length < 2) {
+      message.warning('至少选择两个库位')
+      return
+    }
+    // if (!isStraightLine(binLocation)) {
+    //   message.warning('您选择的库位不在一条直线上')
+    //   return
+    // }
+    let isHaveId = binLocation.every((item) => {
+      return item.id
+    })
+    if (!isHaveId) {
+      message.warning('您选择的库位存在未保存的')
+      return
+    }
+    removeEventListener() //移除监听
+    lineLibrarySettingDialogRef.value.open(binLocation)
+  }
+  //区域
+  if (toolbarSwitchType.value === 'createRegion') {
+    if (binLocation.length < 1) {
+      message.warning('至少选择两个库位')
+      return
+    }
+    let isHaveId = binLocation.every((item) => {
+      return item.id
+    })
+    if (!isHaveId) {
+      message.warning('您选择的库位存在未保存的')
+      return
+    }
+    removeEventListener() //移除监听
+    itemAreaSettingDialogRef.value.open(binLocation)
+  }
+  //绘制直线
+  if (toolbarSwitchType.value === 'drawRoute') {
+    if (routeList.length !== 2) {
+      message.warning('只能选择两个路径点')
+      return
+    }
+    let isHaveId = routeList.every((item) => {
+      return item.id
+    })
+    if (!isHaveId) {
+      message.warning('您选择的路径点存在未保存的')
+      return
+    }
+    let curve = {
+      isSelected: false, //是否选中
+      startingPointId: routeList[0].id,
+      endPointId: routeList[1].id,
+      startPointX: routeList[0].locationX, //开始点
+      startPointY: routeList[0].locationY, //开始点
+      endPointX: routeList[1].locationX, //结束点
+      endPointY: routeList[1].locationY, //结束点
+      actualStartPointX: routeList[0].actualLocationX, //实际开始点位x轴
+      actualStartPointY: routeList[0].actualLocationY, //实际开始点位y轴
+      actualEndPointX: routeList[1].actualLocationX, //实际结束点位x轴
+      actualEndPointY: routeList[1].actualLocationY, //实际结束点位y轴
+      actualBeginControlX: '', //实际开始控制点x轴
+      actualBeginControlY: '', //实际开始控制点y轴
+      actualEndControlX: '', //实际结束控制点x轴
+      actualEndControlY: '', //实际结束控制点y轴
+      beginControlX: 0, //开始控制点x轴
+      beginControlY: 0, //开始控制点y轴
+      endControlX: 0, //结束控制点x轴
+      endControlY: 0, //结束控制点y轴
+      expansionZoneFront: 0, //膨胀区域前
+      expansionZoneAfter: 0, //膨胀区域后
+      expansionZoneLeft: 0, //	膨胀区域左
+      expansionZoneRight: 0, //膨胀区域右
+      method: 0, //行走方法 0.直线 1.上左曲线2.上右曲线3.下左曲线 4.下右曲线
+      direction: 2, //方向 1.单向 2.双向,
+      forwardSpeedLimit: 1.5, //正向限速
+      reverseSpeedLimit: 0.4, //	反向限速
+      toward: 0, //	车头朝向( 0:正正 1:正反 2:反正 3:反反)
+      beginWidth: routeList[0].locationWidePx, //起点宽
+      beginHigh: routeList[0].locationDeepPx, //	起点高
+      endWidth: routeList[1].locationWidePx, //	终点宽
+      endHigh: routeList[1].locationDeepPx //	终点高
+    }
+    state.selectedCurve = curve
+    state.mapRouteList.push(curve)
+    addEditHistory()
+  }
+  //生成直线
+  if (toolbarSwitchType.value === 'generateLine') {
+    if (routeList.length < 3) {
+      message.warning('至少框选三个点')
+      return
+    }
+    let isHaveId = routeList.every((item) => {
+      return item.id
+    })
+    if (!isHaveId) {
+      message.warning('您选择的路径点存在未保存的')
+      return
+    }
+    GenerateStraightLinesDialogRef.value.open(routeList)
+  }
+}
+//生成直线 选择完成开始点和结束点
+const GenerateStraightLinesSubmit = (pointList, form) => {
+  const list = mapPointsToLine(pointList, form.startPointId, form.endPointId)
+  const idNameMap = {}
+  list.forEach((item) => {
+    idNameMap[item.id] = item
+  })
+  // 遍历第二个数组，更新 name
+  state.allMapPointInfo.forEach((item) => {
+    if (idNameMap[item.id]) {
+      let actualPoint = disposeEventPoint(
+        idNameMap[item.id].locationX,
+        idNameMap[item.id].locationY
+      )
+      item.locationX = idNameMap[item.id].locationX
+      item.locationY = idNameMap[item.id].locationY
+      item.actualLocationX = actualPoint.actualLocationX
+      item.actualLocationY = actualPoint.actualLocationY
+    }
+  })
+  state.mapRouteList.forEach((item) => {
+    if (idNameMap[item.startingPointId]) {
+      let actualPoint = disposeEventPoint(
+        idNameMap[item.startingPointId].locationX,
+        idNameMap[item.startingPointId].locationY
+      )
+      item.startPointX = idNameMap[item.startingPointId].locationX
+      item.startPointY = idNameMap[item.startingPointId].locationY
+      item.actualStartPointX = actualPoint.actualLocationX
+      item.actualStartPointY = actualPoint.actualLocationY
+    }
+    if (idNameMap[item.endPointId]) {
+      let actualPoint = disposeEventPoint(
+        idNameMap[item.endPointId].locationX,
+        idNameMap[item.endPointId].locationY
+      )
+      item.endPointX = idNameMap[item.endPointId].locationX
+      item.endPointY = idNameMap[item.endPointId].locationY
+      item.actualEndPointX = actualPoint.actualLocationX
+      item.actualEndPointY = actualPoint.actualLocationY
+    }
+  })
+  addEditHistory()
+}
+
+//将一个数组中的点位 按照第一个和最后一个排成一条直线
+const mapPointsToLine = (points, startPointId, endPointId) => {
+  const startPoint = points.find((point) => point.id === startPointId)
+  const endPoint = points.find((point) => point.id === endPointId)
+
+  if (!startPoint || !endPoint) {
+    message.warning('选择的点位有误')
+    return
+  }
+
+  const dx = startPoint.locationX - endPoint.locationX
+  const dy = startPoint.locationY - endPoint.locationY
+
+  // 处理垂直直线的情况
+  if (dx === 0) {
+    return points.map((point) => {
+      if (point === endPoint || point === startPoint) {
+        return point
+      }
+      return {
+        ...point,
+        locationX: endPoint.locationX
+      }
+    })
+  }
+
+  const slope = dy / dx
+  const intercept = endPoint.locationY - slope * endPoint.locationX
+
+  return points.map((point) => {
+    if (point === endPoint || point === startPoint) {
+      return point
+    }
+    const newY = slope * point.locationX + intercept
+    return {
+      ...point,
+      locationY: newY
+    }
+  })
+}
+
+//计算是不是在同一条直线的
+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 = (item, index, type) => {
+  state.currentDragTarget = { index, type }
+  window.addEventListener('mousemove', handleDrag)
+  window.addEventListener('mouseup', endDrag)
+}
+// 处理拖动事件
+const handleDrag = (event) => {
+  let x = disposeEventPoints(event).x
+  let y = disposeEventPoints(event).y
+
+  if (state.currentDragTarget.index !== null) {
+    const curve = state.mapRouteList[state.currentDragTarget.index]
+
+    // 确保控制点不超出盒子范围
+    x = Math.max(0, Math.min(x, imgBgObj.width))
+    y = Math.max(0, Math.min(y, imgBgObj.height))
+
+    if (state.currentDragTarget.type === 'start') {
+      curve.beginControlX = x
+      curve.beginControlY = y
+    } else {
+      curve.endControlX = x
+      curve.endControlY = y
+    }
+  }
+}
+// 结束拖动
+const endDrag = (event) => {
+  const curve = state.mapRouteList[state.currentDragTarget.index]
+  let actualBeginControl = disposeEventPoint(curve.beginControlX, curve.beginControlY)
+  let actualEndControl = disposeEventPoint(curve.endControlX, curve.endControlY)
+
+  curve.actualBeginControlX = actualBeginControl.actualLocationX
+  curve.actualBeginControlY = actualBeginControl.actualLocationY
+
+  curve.actualEndControlX = actualEndControl.actualLocationX
+  curve.actualEndControlY = actualEndControl.actualLocationY
+
+  addEditHistory()
+
+  state.currentDragTarget.type = null
+  window.removeEventListener('mousemove', handleDrag)
+  window.removeEventListener('mouseup', endDrag)
+}
+// 获取曲线的路径
+const getCurvePath = (curve) => {
+  let startPointX = Number(curve.startPointX)
+  let startPointY = Number(curve.startPointY)
+  let endPointX = Number(curve.endPointX)
+  let endPointY = Number(curve.endPointY)
+  let path = `M ${startPointX} ${startPointY} C ${curve.beginControlX} ${curve.beginControlY}, ${curve.endControlX} ${curve.endControlY}, ${endPointX} ${endPointY}`
+
+  curve.curvePath = path
+  return path
+}
+//编辑路线 双击
+const handleEditRoute = (item, index) => {
+  state.mapRouteList.forEach((curve, i) => {
+    curve.isSelected = i === index
+  })
+  state.currentDragTarget.index = index
+  state.selectedCurve = item
+  removeEventListener() //移除监听
+  editMapRouteDialogRef.value.open(JSON.parse(JSON.stringify(item)))
+}
+//单击 选中
+const handleChooseRoute = (item, index) => {
+  state.mapRouteList.forEach((curve, i) => {
+    curve.isSelected = i === index
+  })
+  state.selectedCurve = item
+  state.currentDragTarget.index = index
+  //让节点不选中
+  state.currentItemIndex = -1
+}
+//编辑路线成功
+const editMapRouteDialogSubmit = (form) => {
+  state.mapRouteList[state.currentDragTarget.index] = form
+
+  //路线位置改变 通知路径里面的节点也改变
+  state.mapRouteList.forEach((item) => {
+    if (form.startingPointId === item.startingPointId) {
+      item.startPointX = form.startPointX
+      item.startPointY = form.startPointY
+      item.beginHigh = Number(form.beginHigh)
+      item.beginWidth = Number(form.beginWidth)
+      item.actualStartPointX = disposeEventPoint(form.startPointX, form.startPointY).actualLocationX
+      item.actualStartPointY = disposeEventPoint(form.startPointX, form.startPointY).actualLocationY
+    }
+    if (form.endPointId === item.endPointId) {
+      item.endPointX = form.endPointX
+      item.endPointY = form.endPointY
+      item.endHigh = Number(form.endHigh)
+      item.endWidth = Number(form.endWidth)
+      item.actualEndPointX = disposeEventPoint(form.endPointX, form.endPointY).actualLocationX
+      item.actualEndPointY = disposeEventPoint(form.endPointX, form.endPointY).actualLocationY
+    }
+  })
+  state.allMapPointInfo.forEach((item) => {
+    if (item.id === form.startingPointId) {
+      item.locationX = form.startPointX
+      item.locationY = form.startPointY
+      item.actualLocationX = disposeEventPoint(form.startPointX, form.startPointY).actualLocationX
+      item.actualLocationY = disposeEventPoint(form.startPointX, form.startPointY).actualLocationY
+    }
+    if (item.id === form.endPointId) {
+      item.locationX = form.endPointX
+      item.locationY = form.endPointY
+      item.actualLocationX = disposeEventPoint(form.endPointX, form.endPointY).actualLocationX
+      item.actualLocationY = disposeEventPoint(form.endPointX, form.endPointY).actualLocationX
+    }
+  })
+  //增加一条历史记录
+  addEditHistory() //重新监听键盘事件
+}
+//测距相关
+// 计算连线的样式
+const rangingLineStyle = computed(() => {
+  if (state.measureDistancesPoints.length === 2) {
+    const [point1, point2] = state.measureDistancesPoints
+    const length = Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2))
+    const angle = (Math.atan2(point2.y - point1.y, point2.x - point1.x) * 180) / Math.PI
+    return {
+      position: 'absolute',
+      left: `${point1.x}px`,
+      top: `${point1.y}px`,
+      width: `${length}px`,
+      height: '2px',
+      backgroundColor: 'red',
+      transform: `rotate(${angle}deg)`,
+      transformOrigin: '0 0'
+    }
+  }
+  return {}
+})
+
+// 计算距离信息的样式（显示在连线中间，并根据角度调整文字方向）
+const rangingTextStyle = computed(() => {
+  if (state.measureDistancesPoints.length === 2) {
+    const [point1, point2] = state.measureDistancesPoints
+    const midX = (point1.x + point2.x) / 2
+    const midY = (point1.y + point2.y) / 2
+    const angle = (Math.atan2(point2.y - point1.y, point2.x - point1.x) * 180) / Math.PI
+
+    // 调整文字方向，使其始终易于阅读
+    let textRotation = 0
+    if (angle > 90 || angle < -90) {
+      textRotation = angle + 180 // 翻转文字方向
+    } else {
+      textRotation = angle
+    }
+
+    return {
+      position: 'absolute',
+      left: `${midX}px`,
+      top: `${midY}px`,
+      transform: `translate(-50%, -50%) rotate(${textRotation}deg)`,
+      backgroundColor: 'rgba(255, 255, 255, 0.8)',
+      padding: '2px',
+      borderRadius: '4px',
+      fontSize: '12px',
+      color: 'black',
+      whiteSpace: 'nowrap', // 防止文字换行
+      pointerEvents: 'none' // 防止文字遮挡点击事件
+    }
+  }
+  return {}
+})
+
+// 计算点的样式
+const getRangingPointStyle = (point) => ({
+  position: 'absolute',
+  left: `${point.x - 4}px`,
+  top: `${point.y - 4}px`,
+  width: '8px',
+  height: '8px',
+  backgroundColor: 'blue',
+  borderRadius: '50%'
+})
+
+//计算路线的距离
+const calculateRouteLength = (item, type) => {
+  const {
+    startPointX,
+    startPointY,
+    endPointX,
+    endPointY,
+    beginControlX,
+    beginControlY,
+    endControlX,
+    endControlY
+  } = item
+
+  if (type == 'line') {
+    const dx = startPointX - endPointX
+    const dy = startPointY - endPointY
+    const length = Math.sqrt(dx * dx + dy * dy) * Number(imgBgObj.resolution)
+    return length.toFixed(2)
+  } else {
+    const steps = 100 // 离散化的步数，步数越多越精确
+    let length = 0
+    let prevPoint = null
+
+    for (let i = 0; i <= steps; i++) {
+      const t = i / steps
+      // 三阶贝塞尔曲线公式
+      const x =
+        (1 - t) ** 3 * startPointX +
+        3 * t * (1 - t) ** 2 * beginControlX +
+        3 * t ** 2 * (1 - t) * endControlX +
+        t ** 3 * endPointX
+      const y =
+        (1 - t) ** 3 * startPointY +
+        3 * t * (1 - t) ** 2 * beginControlY +
+        3 * t ** 2 * (1 - t) * endControlY +
+        t ** 3 * endPointY
+      const currentPoint = [x, y]
+
+      if (prevPoint) {
+        const dx = currentPoint[0] - prevPoint[0]
+        const dy = currentPoint[1] - prevPoint[1]
+        length += Math.sqrt(dx * dx + dy * dy)
+      }
+      prevPoint = currentPoint
+    }
+    length = (length * Number(imgBgObj.resolution)).toFixed(2)
+    return length
+  }
+}
+
+// 处理点击事件
+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) {
+      // 计算两点之间的距离
+      const [point1, point2] = state.measureDistancesPoints
+      let distancesNum = Math.sqrt(
+        Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2)
+      )
+      state.measureDistancesNum = distancesNum * Number(imgBgObj.resolution)
+    }
+  }
+}
+//获取扫描图  地图背景相关的信息
+const imgBgObj = reactive({
+  imgUrl: '',
+  positionMapId: '',
+  width: '',
+  height: '',
+  floor: '',
+  area: '',
+  resolution: 0,
+  origin: null
+})
+//接收参数
+const { query } = useRoute() // 查询参数
+//获取地图点位
+const getMapList = async () => {
+  if (!query.mapId) return
+  let res = await MapApi.getPositionMap(query.mapId)
+  let yamlJson = JSON.parse(res.yamlJson)
+  imgBgObj.positionMapId = res.id
+  imgBgObj.floor = res.floor
+  imgBgObj.area = res.area
+  imgBgObj.width = yamlJson.width
+  imgBgObj.height = yamlJson.height
+  imgBgObj.origin = yamlJson.origin
+  imgBgObj.resolution = yamlJson.resolution
+  // 调转换成png的接口
+  getMapData(imgBgObj)
+}
+//调转换成png的接口
+const getMapData = async (mapInfo) => {
+  let data = await MapApi.getPositionMapdDwnloadPngBase64({
+    floor: mapInfo.floor,
+    area: mapInfo.area
+  })
+  imgBgObj.imgUrl = data
+
+  //获取节点 路径等信息
+  await getAllNodeList()
+  await getAllMapRoute()
+}
+//获取所有的点位 处理七种类型的
+const getAllNodeList = async () => {
+  let list = await MapApi.getPositionMapItemList({
+    positionMapId: imgBgObj.positionMapId
+  })
+  state.allMapPointInfo = []
+  state.currentIndex = 0
+  list.forEach((item) => {
+    item.layerSelectionShow = true //用于图层
+    item.locationX = Number(item.locationX)
+    item.locationY = Number(item.locationY)
+
+    if (item.type === 1) {
+      item.dataObj = {}
+      item.dataList = []
+      item.locationDeep = 40
+      item.locationWide = 40
+      item.draggable = true
+      item.resizable = false
+      item.rotatable = false
+      item.lockAspectRatio = true
+    } else if (item.type === 5 || item.type === 6) {
+      item.dataObj = {}
+      item.dataList = []
+      item.locationDeep = 150
+      item.locationWide = 150
+      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.dataObj = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
+      item.dataList = []
+      item.locationDeep = item.dataObj.locationDeep
+      item.locationWide = item.dataObj.locationWide
+      item.deviceId = item.dataObj.id
+      item.deviceNo = item.dataObj.deviceNo
+      item.mapImageUrl = item.dataObj.mapImageUrl
+      item.draggable = true
+      item.resizable = true
+      item.rotatable = false
+      item.lockAspectRatio = true
+    } else if (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
+      item.locationDeep = 20
+      item.locationWide = 20
+    }
+
+    //要将实际的cm改成px
+    if (item.locationWide && item.locationDeep) {
+      let pxObj = cmConversionPx(item.locationWide, item.locationDeep)
+      item.locationWidePx = pxObj.pWidth
+      item.locationDeepPx = pxObj.pHeight
+    }
+
+    state.allMapPointInfo.push(item)
+  })
+}
+//获取所有的路线
+const getAllMapRoute = async () => {
+  state.mapRouteList = await MapApi.getPositionMapLineByPositionMapId(imgBgObj.positionMapId)
+  state.allHistoryList = []
+  state.allHistoryList[0] = {
+    allMapPointInfo: JSON.parse(JSON.stringify(state.allMapPointInfo)),
+    mapRouteList: JSON.parse(JSON.stringify(state.mapRouteList))
+  }
+}
+//保存地图按钮
+const saveMap = async () => {
+  //判断是否存在库位未填写排序号
+  state.noLocationNumberList = state.allMapPointInfo.reduce((invalidIndexes, item, index) => {
+    if (item.type === 2 && !item.locationNumber) {
+      invalidIndexes.push(index) // 如果不满足条件，记录索引
+    }
+    return invalidIndexes
+  }, [])
+
+  if (state.noLocationNumberList.length !== 0) {
+    state.currentItemIndex = -1
+    message.error('存在库位未填写排序号')
+    return
+  }
+
+  const loading = ElLoading.service({
+    lock: true,
+    text: '保存中',
+    background: 'rgba(255, 255, 255, 0.7)'
+  })
+  try {
+    //节点的保存
+    await saveNodeList()
+    //路线的保存
+    await saveMapRoute()
+    //获取新的数据
+    await getAllNodeList()
+    await getAllMapRoute()
+    //关闭loading
+    loading.close()
+    message.success('保存成功')
+  } catch (error) {
+    loading.close()
+  }
+}
+//节点的保存
+const saveNodeList = async () => {
+  let list = state.allMapPointInfo
+
+  list.forEach((item) => {
+    if (item.type === 2) {
+      // 库位点 类型为数组
+      item.dataList.forEach((node) => {
+        node.locationDeep = item.locationDeep
+        node.locationWide = item.locationWide
+      })
+      item.dataJson = JSON.stringify(item.dataList)
+    } else if (item.type === 3 || item.type === 4) {
+      //设备类型
+      item.dataObj.locationWide = item.locationWide
+      item.dataObj.locationDeep = item.locationDeep
+      item.dataJson = JSON.stringify(item.dataObj)
+    } else 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.fontSize = item.fontSize
+      item.dataObj.rotatable = item.rotatable
+      item.dataObj.angle = item.angle
+      //dataJson数据
+      item.dataJson = JSON.stringify(item.dataObj)
+    }
+  })
+  await MapApi.batchSaveOrEditOrDelMapItem(imgBgObj.positionMapId, list)
+}
+//路线的保存
+const saveMapRoute = async () => {
+  await MapApi.createOrEditOrDelPositionMapLine(imgBgObj.positionMapId, state.mapRouteList)
+}
+//线库新增 要在库位新增线库信息
+const submitLineLibraryFormSuccess = (obj) => {
+  state.allMapPointInfo.forEach((item) => {
+    if (obj.mapItemIds.includes(item.id)) {
+      item.laneId = obj.id
+      item.dataList.forEach((node) => {
+        node.laneName = obj.laneName
+        node.laneId = obj.id
+      })
+    }
+  })
+}
+//区域新增 要在库位新增区域信息
+const itemAreaSettingSubmitSuccess = (obj) => {
+  state.allMapPointInfo.forEach((item) => {
+    if (obj.mapItemIds.includes(item.id)) {
+      item.areaId = obj.id
+      item.dataList.forEach((node) => {
+        node.areaName = obj.areaName
+        node.areaId = obj.id
+      })
+    }
+  })
+}
+//线库删除 要在库位中删除线库信息
+const lineLibraryManagementDelete = (mapItemIds) => {
+  state.allMapPointInfo.forEach((item) => {
+    if (mapItemIds.includes(item.id)) {
+      item.laneId = undefined
+      item.dataList.forEach((node) => {
+        ;``
+        node.laneName = undefined
+        node.laneId = undefined
+      })
+    }
+  })
+}
+//区域删除 要在库位删除区域信息
+const itemAreaManagementDelete = (mapItemIds) => {
+  state.allMapPointInfo.forEach((item) => {
+    if (mapItemIds.includes(item.id)) {
+      item.areaId = undefined
+      item.dataList.forEach((node) => {
+        node.areaName = undefined
+        node.areaId = undefined
+      })
+    }
+  })
+}
+//线库编辑 要在库位中编辑线库信息
+const lineLibraryManagementEdit = (obj) => {
+  console.log(obj)
+  state.allMapPointInfo.forEach((item) => {
+    if (obj.mapItemIds.includes(item.id)) {
+      item.laneId = obj.id
+      item.dataList.forEach((node) => {
+        node.laneName = obj.laneName
+        node.laneId = obj.id
+      })
+    }
+  })
+}
+//区域编辑 要在库位编辑区域信息
+const itemAreaManagementEdit = (obj) => {
+  console.log(obj)
+  state.allMapPointInfo.forEach((item) => {
+    if (obj.mapItemIds.includes(item.id)) {
+      item.areaId = obj.id
+      item.dataList.forEach((node) => {
+        node.areaName = obj.areaName
+        node.areaId = obj.id
+      })
+    }
+  })
+}
+
+//筛选图层
+const layerSelectionSuccess = (typeList) => {
+  state.allMapPointInfo.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 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
+  }
+}
+//实际坐标 传入x y轴坐标
+const disposeEventPoint = (x, y) => {
+  const actualLocationX = Number(imgBgObj.origin[0]) + Number(x) * Number(imgBgObj.resolution)
+  const actualLocationY =
+    Number(imgBgObj.origin[1]) + (Number(imgBgObj.height) - Number(y)) * Number(imgBgObj.resolution)
+  return {
+    actualLocationX,
+    actualLocationY
+  }
+}
+// 传入实际现场的数据，转换成浏览器坐标的数据
+const convertActualToBrowser = (pointX, pointY) => {
+  const y1 = Number(imgBgObj.origin[1]) + Number(imgBgObj.height) * Number(imgBgObj.resolution)
+  let x = Math.max(Number(pointX) - Number(imgBgObj.origin[0]), 0)
+  let y = Math.max(y1 - Number(pointY), 0)
+
+  return {
+    x,
+    y
+  }
+}
+//将节点实际宽高cm转换成px
+const cmConversionPx = (cWidth, cHeight) => {
+  let pWidth = Number(cWidth) / imgBgObj.resolution / 100
+  let pHeight = Number(cHeight) / imgBgObj.resolution / 100
+
+  return {
+    pWidth,
+    pHeight
+  }
+}
+// 计算直线中间箭头的路径
+const getLineMidArrowPath = (item) => {
+  const midX = (Number(item.startPointX) + Number(item.endPointX)) / 2
+  const midY = (Number(item.startPointY) + Number(item.endPointY)) / 2
+
+  let dx = item.endPointX - item.startPointX
+  let dy = item.endPointY - item.startPointY
+  let length = Math.sqrt(dx * dx + dy * dy)
+
+  if (length === 0) {
+    return `M ${midX} ${midY} L ${midX} ${midY}`
+  }
+
+  const unitDx = dx / length
+  const unitDy = dy / length
+
+  const arrowLength = 1
+  const startXArrow = midX - unitDx * arrowLength
+  const startYArrow = midY - unitDy * arrowLength
+  const endXArrow = midX
+  const endYArrow = midY
+
+  return `M ${startXArrow} ${startYArrow} L ${endXArrow} ${endYArrow}`
+}
+// 计算贝塞尔曲线中间箭头的路径（简单近似）
+const getBezierMidArrowPath = (item) => {
+  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+  path.setAttribute('d', item.curvePath)
+  const length = path.getTotalLength()
+  const midPoint = path.getPointAtLength(length / 2)
+  const prevPoint = path.getPointAtLength(length / 2 - 1)
+  return `M ${prevPoint.x} ${prevPoint.y} L ${midPoint.x} ${midPoint.y}`
+}
+// 计算贝塞尔曲线中间文字的 x 坐标
+const computedCurveTextX = (item) => {
+  return (
+    (Number(item.startPointX) +
+      Number(item.beginControlX) +
+      Number(item.endControlX) +
+      Number(item.endPointX)) /
+    4
+  )
+}
+// 计算贝塞尔曲线中间文字的 y 坐标
+const computedCurveTextY = (item) => {
+  return (
+    (Number(item.startPointY) +
+      Number(item.beginControlY) +
+      Number(item.endControlY) +
+      Number(item.endPointY)) /
+    4
+  )
+}
+document.onmousedown = function (e) {
+  //左击
+  if (e.button == 2) {
+    state.selectedCurve = ''
+    if (state.currentDragTarget.index !== null) {
+      state.mapRouteList[state.currentDragTarget.index].isSelected = false
+      state.currentDragTarget = { index: null, type: null }
+    }
+    state.currentItemIndex = -1
+  }
+}
+// 阻止默认菜单弹出
+window.document.oncontextmenu = function () {
+  return false
+}
+//监听键盘事件
+const handleKeyDown = (event) => {
+  if (event.ctrlKey) {
+    if (event.key === 'c') {
+      //复制
+      if (state.currentItemIndex === -1) {
+        message.warning('请先选择要操作的对象')
+        return
+      }
+      replicationNode()
+    } else if (event.key === 'v') {
+      //粘贴
+      if (!state.copyMapItem) {
+        message.warning('请先复制对象')
+        return
+      }
+      pasteNode()
+    } else if (event.key === 'z') {
+      //撤回
+      backPreviousStep()
+    } else if (event.key === 'y') {
+      //重写
+      backNextStep()
+    }
+  }
+}
+
+//鼠标滚轮
+const handleWheel = (event) => {
+  // 判断 Ctrl 键是否被按下
+  if (event.ctrlKey) {
+    // 阻止默认的滚动行为
+    event.preventDefault()
+
+    // 根据滚轮滚动方向调整缩放比例
+    if (event.deltaY < 0) {
+      // 向上滚动，放大
+      //放大
+      if (state.imageChangeMultiple < 4) {
+        state.imageChangeMultiple += 0.2
+      } else {
+        message.warning('不能在放大了')
+      }
+    } else {
+      //缩小
+      if (state.imageChangeMultiple > 0.2) {
+        state.imageChangeMultiple -= 0.2
+      } else {
+        message.warning('不能在缩小了')
+      }
+    }
+  }
+}
+
+const addEventListener = () => {
+  window.addEventListener('keydown', handleKeyDown)
+}
+const removeEventListener = () => {
+  window.removeEventListener('keydown', handleKeyDown)
+}
+
+const router = useRouter()
+onBeforeRouteLeave((to, from) => {
+  if (to.path == '/mapPage/realTimeMap' && to.query.mapId != imgBgObj.positionMapId) {
+    router.replace({
+      name: 'MapPageRealTimeMap',
+      query: {
+        mapId: imgBgObj.positionMapId
+      }
+    })
+  }
+})
+
+onMounted(() => {
+  getMapList()
+  window.addEventListener('keydown', handleKeyDown)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeyDown)
+})
+</script>
+
+<style lang="scss" scoped>
+.edit-map-page {
+  .map-container {
+    position: relative;
+    width: 100%;
+    overflow: auto;
+    // height: 85vh;
+    height: calc(100vh - 140px);
+
+    .map-bg {
+      background-size: contain;
+      background-repeat: no-repeat;
+      position: absolute;
+      // top: 18px;
+      // left: 18px;
+      top: 0;
+      left: 0;
+
+      .map-box-inner {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+    }
+  }
+
+  .top-tool {
+    margin-top: 5px;
+    margin-bottom: 3px;
+    .top-tool-list {
+      display: flex;
+      align-items: center;
+      text-align: center;
+      background-color: #fff;
+      padding: 0 12px;
+      height: 70px;
+      box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 3px;
+
+      .top-tool-item {
+        display: flex;
+        align-items: center;
+
+        .tool-item {
+          cursor: pointer;
+          width: 50px;
+          height: 70px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+
+          .name {
+            cursor: pointer;
+            font-family:
+              PingFangSC,
+              PingFang SC;
+            font-weight: 400;
+            font-size: 14px;
+            color: #0d162a;
+            line-height: 20px;
+            text-align: center;
+            font-style: normal;
+            margin-top: 4px;
+          }
+        }
+        .line {
+          margin: 0 12px;
+          width: 1px;
+          height: 47px;
+          border: 1px solid #cccccc;
+        }
+      }
+    }
+
+    .right-tool-list {
+      position: absolute;
+      right: 0;
+      top: 114px;
+      background-color: #fff;
+      z-index: 999;
+      text-align: center;
+      box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
+
+      .tool-item {
+        cursor: pointer;
+        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;
+        }
+      }
+    }
+  }
+
+  .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:
+    //   20px 20px,
+    //   20px 20px;
+
+    background-image: repeating-linear-gradient(
+        to right,
+        rgba(0, 0, 0, 0.1),
+        rgba(0, 0, 0, 0.1) 1px,
+        transparent 1px,
+        transparent 50px
+      ),
+      repeating-linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0.1),
+        rgba(0, 0, 0, 0.1) 1px,
+        transparent 1px,
+        transparent 50px
+      );
+  }
+
+  .svg-div {
+    z-index: 99999;
+
+    svg {
+      cursor: crosshair;
+
+      path.selected {
+        stroke: blue;
+      }
+    }
+  }
+
+  .node-text {
+    white-space: nowrap; /* 防止文字自动换行 */
+  }
+}
+
+.tool-active {
+  background: #ebf1ff;
+  border-bottom: 2px solid #1677ff;
+}
+
+.right-tool-active {
+  background: #ebf1ff !important;
+}
+
+.drop-down-menu {
+  .drop-down-menu-item {
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    padding: 11px 0;
+    font-family:
+      PingFangSC,
+      PingFang SC;
+    font-weight: 400;
+    font-size: 14px;
+    color: #0d162a;
+    line-height: 20px;
+    text-align: left;
+    font-style: normal;
+    border-bottom: 1px solid #e9e9e9;
+  }
+}
+</style>
diff --git a/src/views/mapPage/realTimeMap/editMap.vue b/src/views/mapPage/realTimeMap/editMap.vue
index a91c44f2..5db94672 100644
--- a/src/views/mapPage/realTimeMap/editMap.vue
+++ b/src/views/mapPage/realTimeMap/editMap.vue
@@ -340,12 +340,27 @@
               :style="{ width: item.locationWidePx + 'px', height: item.locationDeepPx + 'px' }"
             >
               <!-- 1 路径点 -->
-              <el-tooltip
-                effect="dark"
-                :content="item.sortNum || '节点未保存'"
-                placement="top"
-                trigger="click"
-              >
+              <el-tooltip effect="dark" placement="top" trigger="click">
+                <template #content>
+                  <div v-if="item.type === 2">
+                    <div>序号：{{ item.sortNum || '节点未保存' }}</div>
+                    <div class="item-tooltip-name" v-if="item.laneId && item.laneName">
+                      所属线库：{{ item.laneName }}
+                    </div>
+                    <div class="item-tooltip-name" v-if="item.areaId && item.areaName">
+                      所属线库：{{ item.areaName }}
+                    </div>
+                  </div>
+                  <div v-else-if="item.type === 3">
+                    <div>序号：{{ item.sortNum || '节点未保存' }}</div>
+                    <div class="item-tooltip-name" v-if="item.deviceNo">
+                      设备编号：{{ item.deviceNo }}
+                    </div>
+                  </div>
+                  <div v-else>
+                    <div>序号：{{ item.sortNum || '节点未保存' }}</div>
+                  </div>
+                </template>
                 <div
                   v-if="item.type === 1 && item.layerSelectionShow"
                   :style="{
@@ -2525,6 +2540,8 @@ const getAllNodeList = async () => {
       item.dataList = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
       item.locationDeep = item.dataList[0].locationDeep
       item.locationWide = item.dataList[0].locationWide
+      item.areaName = item.dataList[0].areaName || undefined
+      item.laneName = item.dataList[0].laneName || undefined
       item.draggable = true
       item.resizable = true
       item.rotatable = false
@@ -2950,6 +2967,13 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
+.item-tooltip-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 200px;
+}
+
 .edit-map-page {
   .map-container {
     position: relative;