From 1c8ea3b7e47c8112538957eb8fcf9128ef53195a Mon Sep 17 00:00:00 2001
From: yyy <2605810609@qq.com>
Date: Sat, 22 Feb 2025 17:41:46 +0800
Subject: [PATCH] =?UTF-8?q?ctrl+c=20ctrl+v=E7=AD=89=E9=94=AE=E7=9B=98?=
 =?UTF-8?q?=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components-tool/editMapRouteDialog.vue    |  16 +-
 .../components-tool/map-scale-tool.vue        |   2 +-
 src/views/mapPage/realTimeMap/editMap.vue     | 692 ++++++++++--------
 3 files changed, 393 insertions(+), 317 deletions(-)

diff --git a/src/views/mapPage/realTimeMap/components-tool/editMapRouteDialog.vue b/src/views/mapPage/realTimeMap/components-tool/editMapRouteDialog.vue
index 164df097..56e4843d 100644
--- a/src/views/mapPage/realTimeMap/components-tool/editMapRouteDialog.vue
+++ b/src/views/mapPage/realTimeMap/components-tool/editMapRouteDialog.vue
@@ -127,18 +127,16 @@
       <el-row :gutter="24">
         <el-col :span="12">
           <el-form-item label="正向限速" prop="forwardSpeedLimit" required>
-            <el-input
-              v-model="form.forwardSpeedLimit"
-              type="number"
-              placeholder="请输入正向限速"
-            /> </el-form-item
-        ></el-col>
+            <el-slider v-model="form.forwardSpeedLimit" :min="0" :max="10" :step="0.1" />
+          </el-form-item>
+        </el-col>
         <el-col :span="12">
           <el-form-item label="反向限速" prop="reverseSpeedLimit" required>
-            <el-input
+            <el-slider
               v-model="form.reverseSpeedLimit"
-              type="number"
-              placeholder="请输入反向限速"
+              :min="0"
+              :max="10"
+              :step="0.1"
             /> </el-form-item
         ></el-col>
       </el-row>
diff --git a/src/views/mapPage/realTimeMap/components-tool/map-scale-tool.vue b/src/views/mapPage/realTimeMap/components-tool/map-scale-tool.vue
index e76b9242..6194cd12 100644
--- a/src/views/mapPage/realTimeMap/components-tool/map-scale-tool.vue
+++ b/src/views/mapPage/realTimeMap/components-tool/map-scale-tool.vue
@@ -334,7 +334,7 @@ const dragCalc = (list, page, spacing, ruler, type) => {
   }
 }
 //水平标尺按下鼠标
-const horizontalDragRuler = () => {
+const horizontalDragRuler = (e) => {
   newLine('x')
 }
 //垂直标尺按下鼠标
diff --git a/src/views/mapPage/realTimeMap/editMap.vue b/src/views/mapPage/realTimeMap/editMap.vue
index 67bda0ab..7c997f02 100644
--- a/src/views/mapPage/realTimeMap/editMap.vue
+++ b/src/views/mapPage/realTimeMap/editMap.vue
@@ -8,7 +8,7 @@
             :width="170"
             trigger="click"
             v-if="item.switchType === 'move' || item.switchType === 'revolve'"
-            :disabled="currentItemIndex === -1"
+            :disabled="state.currentItemIndex === -1"
           >
             <template #reference>
               <div
@@ -32,7 +32,7 @@
                 <el-input v-model="state.moveForm.locationX" placeholder="请输入" />
               </el-form-item>
               <el-form-item label="Y">
-                <el-input v-model="state.moveForm.y" placeholder="请输入" />
+                <el-input v-model="state.moveForm.locationY" placeholder="请输入" />
               </el-form-item>
               <div style="text-align: right">
                 <el-button
@@ -203,163 +203,155 @@
     </div>
 
     <div class="map-container" ref="mapContainer" :style="{ cursor: state.cursorStyle }">
-      <map-scale-tool
-        v-if="imgBgObj.height && imgBgObj.width"
-        @input="input"
-        :value="presetLine"
-        :step-length="50"
-        :height="imgBgObj.height"
-        :width="imgBgObj.width"
+      <div
+        class="map-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
-          class="map-bg"
+          ref="mapBackgroundRef"
+          class="map-box-inner"
+          @click="mapClick"
+          :class="state.isShowGrid ? 'grid-show' : ''"
           :style="{
-            backgroundImage: `url(${imgBgObj.imgUrl})`,
-            transform: `scale(${state.imageChangeMultiple})`,
-            transformOrigin: '0 0',
-            width: `${imgBgObj.width}px`,
-            height: `${imgBgObj.height}px`
+            width: imgBgObj.width + 'px',
+            height: imgBgObj.height + 'px'
           }"
-          @mousedown="startDrawSelection"
-          @mousemove="updateDrawSelection"
-          @mouseup="endDrawSelection"
+          v-if="interfaceRefreshed"
         >
-          <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="item.locationX"
+            :parent="true"
+            :x="Number(item.locationX) - Number(item.locationWide) / 2"
+            :y="Number(item.locationY) - Number(item.locationDeep) / 2"
+            :w="Number(item.locationWide)"
+            :h="Number(item.locationDeep)"
+            :r="item.angle"
+            @rotatestop="(degree) => rotateEnd(degree, item, index)"
+            @dragstop="(x, y) => dragEnd(x, y, item, index)"
+            @resizestop="(x, y, width, height) => resizeEnd(x, y, width, height, item, index)"
+            @activated="() => activatedHandle(item, index)"
+            @deactivated="deactivatedHandle"
+            :draggable="!state.prohibitedOperation && item.draggable"
+            :resizable="!state.prohibitedOperation && item.resizable"
+            :rotatable="!state.prohibitedOperation && item.rotatable"
+            :lock-aspect-ratio="item.lockAspectRatio"
+            style="border: none; z-index: 999"
           >
-            <VueDragResizeRotate
-              v-for="(item, index) in allHistoryList[currentIndex]"
-              :key="item.locationX"
-              :parent="true"
-              :x="Number(item.locationX) - Number(item.locationWide) / 2"
-              :y="Number(item.locationY) - Number(item.locationDeep) / 2"
-              :w="Number(item.locationWide)"
-              :h="Number(item.locationDeep)"
-              :r="item.angle"
-              @rotatestop="(degree) => rotateEnd(degree, item, index)"
-              @dragstop="(x, y) => dragEnd(x, y, item, index)"
-              @resizestop="(x, y, width, height) => resizeEnd(x, y, width, height, item, index)"
-              @activated="() => activatedHandle(item, index)"
-              @deactivated="deactivatedHandle"
-              :draggable="!state.prohibitedOperation && item.draggable"
-              :resizable="!state.prohibitedOperation && item.resizable"
-              :rotatable="!state.prohibitedOperation && item.rotatable"
-              :lock-aspect-ratio="item.lockAspectRatio"
-              style="border: none; z-index: 999"
-            >
-              <!-- 节点合集 -->
-              <div @mousedown="startFromPoint(index, $event)">
-                <!-- 1 路径点 -->
-                <div
-                  v-if="item.type === 1 && item.layerSelectionShow"
-                  :style="{
-                    width: item.locationWide + 'px',
-                    height: item.locationDeep + 'px',
-                    backgroundColor: currentItemIndex === index ? '#f48924' : '#000',
-                    borderRadius: '50%',
-                    zIndex: 999
-                  }"
-                >
-                </div>
-                <!-- 2 库位点 -->
-                <img
-                  v-if="item.type === 2 && item.layerSelectionShow"
-                  src="https://api.znkjfw.com/admin-api/infra/file/4/get/库位库存_png_179_1739326653035.png"
-                  alt=""
-                  :style="{
-                    width: item.locationWide + 'px',
-                    height: item.locationDeep + 'px',
-                    border: currentItemIndex === index ? '1px dashed #000' : 'none'
-                  }"
-                />
-                <!-- 3 设备点 -->
-                <img
-                  v-if="item.type === 3 && item.layerSelectionShow"
-                  :src="
-                    item.mapImageUrl ||
-                    'https://api.znkjfw.com/admin-api/infra/file/4/get/设备点_png_179_1739327151877.png'
-                  "
-                  alt=""
-                  :style="{
-                    width: item.locationWide + 'px',
-                    height: item.locationDeep + 'px',
-                    border: currentItemIndex === index ? '1px dashed #000' : 'none'
-                  }"
-                />
-                <!-- 4 停车点 -->
-                <img
-                  v-if="item.type === 4 && item.layerSelectionShow"
-                  src="https://api.znkjfw.com/admin-api/infra/file/4/get/停车场-01_png_179_1739326933020.png"
-                  alt=""
-                  :style="{
-                    width: item.locationWide + 'px',
-                    height: item.locationDeep + 'px',
-                    border: currentItemIndex === index ? '1px dashed #000' : 'none'
-                  }"
-                />
-                <!-- 5 区域变更点 -->
-                <img
-                  v-if="item.type === 5 && item.layerSelectionShow"
-                  src="https://api.znkjfw.com/admin-api/infra/file/4/get/区域_png_179_1739327151876.png"
-                  alt=""
-                  :style="{
-                    width: item.locationWidee + 'px',
-                    height: item.locationDeep + 'px',
-                    border: currentItemIndex === index ? '1px dashed #000' : 'none'
-                  }"
-                />
-                <!-- 6 等待点 -->
-                <img
-                  v-if="item.type === 6 && item.layerSelectionShow"
-                  src="https://api.znkjfw.com/admin-api/infra/file/4/get/等待点_png_179_1739326991439.png"
-                  alt=""
-                  :style="{
-                    width: item.locationWide + 'px',
-                    height: item.locationDeep + 'px',
-                    border: currentItemIndex === index ? '1px dashed #000' : 'none'
-                  }"
-                />
-                <div
-                  v-if="item.type === 7 && item.layerSelectionShow"
-                  :style="{
-                    color: item.fontColor,
-                    fontSize: item.fontSize + 'px',
-                    fontFamily: item.fontFamily,
-                    border: currentItemIndex === index ? '1px dashed #000' : 'none'
-                  }"
-                >
-                  {{ item.text }}
-                </div>
-              </div>
-            </VueDragResizeRotate>
-
-            <div v-if="imgBgObj.width && imgBgObj.height">
-              <svg
-                :width="imgBgObj.width"
-                :height="imgBgObj.height"
-                style="position: absolute; top: 0; left: 0; z-index: 9"
-                id="svgId"
+            <!-- 节点合集 -->
+            <div @mousedown="startFromPoint(index, $event)">
+              <!-- 1 路径点 -->
+              <div
+                v-if="item.type === 1 && item.layerSelectionShow"
+                :style="{
+                  width: item.locationWide + 'px',
+                  height: item.locationDeep + 'px',
+                  backgroundColor: state.currentItemIndex === index ? '#f48924' : '#000',
+                  borderRadius: '50%',
+                  zIndex: 999
+                }"
               >
-                <template v-for="(curve, index) in state.mapRouteList" :key="index">
-                  <!-- 实时绘制当前直线 -->
-                  <line
-                    v-if="state.isDrawing && toolbarSwitchType === 'clickDrawRoute'"
-                    :x1="Number(state.startDrawPoint.locationX)"
-                    :y1="Number(state.startDrawPoint.locationY)"
-                    :x2="Number(state.currentDrawX)"
-                    :y2="Number(state.currentDrawY)"
-                    stroke="#00329F"
-                    stroke-width="5"
-                  />
+              </div>
+              <!-- 2 库位点 -->
+              <img
+                v-if="item.type === 2 && item.layerSelectionShow"
+                src="https://api.znkjfw.com/admin-api/infra/file/4/get/库位库存_png_179_1739326653035.png"
+                alt=""
+                :style="{
+                  width: item.locationWide + 'px',
+                  height: item.locationDeep + 'px',
+                  border: state.currentItemIndex === index ? '1px dashed #000' : 'none'
+                }"
+              />
+              <!-- 3 设备点 -->
+              <img
+                v-if="item.type === 3 && item.layerSelectionShow"
+                :src="
+                  item.mapImageUrl ||
+                  'https://api.znkjfw.com/admin-api/infra/file/4/get/设备点_png_179_1739327151877.png'
+                "
+                alt=""
+                :style="{
+                  width: item.locationWide + 'px',
+                  height: item.locationDeep + 'px',
+                  border: state.currentItemIndex === index ? '1px dashed #000' : 'none'
+                }"
+              />
+              <!-- 4 停车点 -->
+              <img
+                v-if="item.type === 4 && item.layerSelectionShow"
+                src="https://api.znkjfw.com/admin-api/infra/file/4/get/停车场-01_png_179_1739326933020.png"
+                alt=""
+                :style="{
+                  width: item.locationWide + 'px',
+                  height: item.locationDeep + 'px',
+                  border: state.currentItemIndex === index ? '1px dashed #000' : 'none'
+                }"
+              />
+              <!-- 5 区域变更点 -->
+              <img
+                v-if="item.type === 5 && item.layerSelectionShow"
+                src="https://api.znkjfw.com/admin-api/infra/file/4/get/区域_png_179_1739327151876.png"
+                alt=""
+                :style="{
+                  width: item.locationWidee + 'px',
+                  height: item.locationDeep + 'px',
+                  border: state.currentItemIndex === index ? '1px dashed #000' : 'none'
+                }"
+              />
+              <!-- 6 等待点 -->
+              <img
+                v-if="item.type === 6 && item.layerSelectionShow"
+                src="https://api.znkjfw.com/admin-api/infra/file/4/get/等待点_png_179_1739326991439.png"
+                alt=""
+                :style="{
+                  width: item.locationWide + 'px',
+                  height: item.locationDeep + 'px',
+                  border: state.currentItemIndex === index ? '1px dashed #000' : 'none'
+                }"
+              />
+              <div
+                v-if="item.type === 7 && item.layerSelectionShow"
+                :style="{
+                  color: item.fontColor,
+                  fontSize: item.fontSize + 'px',
+                  fontFamily: item.fontFamily,
+                  border: state.currentItemIndex === index ? '1px dashed #000' : 'none'
+                }"
+              >
+                {{ item.text }}
+              </div>
+            </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="5"
+              />
+              <template v-if="state.mapRouteList.length > 0">
+                <template v-for="(curve, index) in state.mapRouteList" :key="index">
                   <!-- 直线 -->
                   <line
                     v-if="curve.method === 0"
@@ -384,6 +376,7 @@
                     />
                     <!-- 第一条控制线 -->
                     <line
+                      v-if="state.currentDragTarget.index == index"
                       :x1="Number(curve.startPointX)"
                       :y1="Number(curve.startPointY)"
                       :x2="curve.beginControlX"
@@ -394,6 +387,7 @@
                     />
                     <!-- 第二条控制线 -->
                     <line
+                      v-if="state.currentDragTarget.index == index"
                       :x1="Number(curve.endPointX)"
                       :y1="Number(curve.endPointY)"
                       :x2="curve.endControlX"
@@ -403,6 +397,7 @@
                       stroke-width="2"
                     />
                     <circle
+                      v-if="state.currentDragTarget.index == index"
                       id="startCircle"
                       :cx="curve.beginControlX"
                       :cy="curve.beginControlY"
@@ -411,6 +406,7 @@
                       @mousedown="startDrag(curve, index, 'start')"
                     />
                     <circle
+                      v-if="state.currentDragTarget.index == index"
                       id="endCircle"
                       :cx="curve.endControlX"
                       :cy="curve.endControlY"
@@ -420,92 +416,92 @@
                     />
                   </template>
                 </template>
-              </svg>
-            </div>
+              </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-for="(box, index) in state.allDrawSelectionAreaBox"
+            v-for="(point, index) in state.measureDistancesPoints"
             :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
+              left: `${point.x}px`,
+              top: `${point.y}px`,
+              width: '10px',
+              height: '10px',
+              backgroundColor: '#00329F',
+              borderRadius: '50%'
             }"
           ></div>
-          <!-- 当前框选区域 -->
           <div
-            v-if="state.drawSelectionAreaShow"
+            v-if="state.measureDistancesPoints.length === 2"
             :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
+              left: `${state.measureDistancesPoints[0].x + 5}px`,
+              top: `${state.measureDistancesPoints[0].y + 5}px`,
+              width: `${computedLineWidth}px`,
+              height: '2px',
+              backgroundColor: '#00329F',
+              transform: `rotate(${computedLineAngle}deg)`,
+              transformOrigin: '0 0',
+              textAlign: 'center'
             }"
-          ></div>
+          >
+            距离：{{ state.measureDistancesNum.toFixed(2) }}</div
+          >
+        </template>
 
-          <!-- 测距 绘制点和连线 -->
-          <template v-if="state.measureDistancesPoints.length > 0">
-            <div
-              v-for="(point, index) in state.measureDistancesPoints"
-              :key="index"
-              :style="{
-                position: 'absolute',
-                left: `${point.x}px`,
-                top: `${point.y}px`,
-                width: '10px',
-                height: '10px',
-                backgroundColor: '#00329F',
-                borderRadius: '50%'
-              }"
-            ></div>
-            <div
-              v-if="state.measureDistancesPoints.length === 2"
-              :style="{
-                position: 'absolute',
-                left: `${state.measureDistancesPoints[0].x + 5}px`,
-                top: `${state.measureDistancesPoints[0].y + 5}px`,
-                width: `${computedLineWidth}px`,
-                height: '2px',
-                backgroundColor: '#00329F',
-                transform: `rotate(${computedLineAngle}deg)`,
-                transformOrigin: '0 0',
-                textAlign: 'center'
-              }"
-            >
-              距离：{{ state.measureDistancesNum.toFixed(2) }}</div
-            >
-          </template>
-
-          <!-- 文字输入区域 -->
-          <input
-            v-if="state.showInputBox"
-            ref="inputBoxRef"
-            v-model="state.inputBoxValue"
-            @keyup.enter="handleInputEnd"
-            @blur="handleInputEnd"
-            :style="{
-              fontSize: state.inputBoxStyle.fontSize + 'px',
-              fontFamily: state.inputBoxStyle.fontFamily,
-              color: state.inputBoxStyle.fontColor,
-              left: state.inputBoxStyle.locationX + 'px',
-              top: state.inputBoxStyle.locationY + 'px'
-            }"
-            :maxlength="30"
-            class="input-box-class"
-          />
-        </div>
-      </map-scale-tool>
+        <!-- 文字输入区域 -->
+        <input
+          v-if="state.showInputBox"
+          ref="inputBoxRef"
+          v-model="state.inputBoxValue"
+          @keyup.enter="handleInputEnd"
+          @blur="handleInputEnd"
+          :style="{
+            fontSize: state.inputBoxStyle.fontSize + 'px',
+            fontFamily: state.inputBoxStyle.fontFamily,
+            color: state.inputBoxStyle.fontColor,
+            left: state.inputBoxStyle.locationX + 'px',
+            top: state.inputBoxStyle.locationY + 'px'
+          }"
+          :maxlength="30"
+          class="input-box-class"
+        />
+      </div>
     </div>
 
     <!-- 节点编辑 -->
@@ -587,16 +583,6 @@ const inputBoxRef = ref() //文字输入框
 
 const message = useMessage() // 消息弹窗
 
-const allHistoryList = ref([]) //全部的历史记录
-const currentIndex = ref(0) //用于记录是哪条历史记录的
-const currentItemIndex = ref(-1) //用于记录是在编辑那个具体的节点、图标等
-const allMapPointInfo = ref([]) //所有的图标的列表
-
-const presetLine = ref([])
-const input = (list) => {
-  presetLine.value = list
-}
-
 // 缩放停止
 const interfaceRefreshed = ref(true)
 const resizeEnd = (locationX, locationY, w, h, item, index) => {
@@ -605,10 +591,10 @@ const resizeEnd = (locationX, locationY, w, h, item, index) => {
     let x = Number(locationX) + Number(item.locationWide) / 2
     let y = Number(locationY) + Number(item.locationDeep) / 2
 
-    allMapPointInfo.value[index].locationX = x
-    allMapPointInfo.value[index].locationY = y
-    allMapPointInfo.value[index].locationWide = w
-    allMapPointInfo.value[index].locationDeep = h
+    state.allMapPointInfo[index].locationX = x
+    state.allMapPointInfo[index].locationY = y
+    state.allMapPointInfo[index].locationWide = w
+    state.allMapPointInfo[index].locationDeep = h
     addEditHistory()
 
     state.mapRouteList.forEach((route) => {
@@ -631,6 +617,7 @@ const resizeEnd = (locationX, locationY, w, h, item, index) => {
     })
   })
 }
+
 // 拖拽停止
 const dragEnd = (locationX, locationY, item, index) => {
   let x = Number(locationX) + Number(item.locationWide) / 2
@@ -638,10 +625,10 @@ const dragEnd = (locationX, locationY, item, index) => {
 
   if (x === item.locationX && y === item.locationY) return
   let actualPoint = disposeEventPoint(x, y)
-  allMapPointInfo.value[index].locationX = x
-  allMapPointInfo.value[index].locationY = y
-  allMapPointInfo.value[index].actualStartPointX = actualPoint.actualLocationX
-  allMapPointInfo.value[index].actualStartPointY = actualPoint.actualLocationY
+  state.allMapPointInfo[index].locationX = x
+  state.allMapPointInfo[index].locationY = y
+  state.allMapPointInfo[index].actualStartPointX = actualPoint.actualLocationX
+  state.allMapPointInfo[index].actualStartPointY = actualPoint.actualLocationY
   addEditHistory()
   //更改路线里的
   state.mapRouteList.forEach((route) => {
@@ -665,26 +652,26 @@ const dragEnd = (locationX, locationY, item, index) => {
 }
 // 旋转
 const rotateEnd = (angle, item, index) => {
-  allMapPointInfo.value[index].angle = angle
+  state.allMapPointInfo[index].angle = angle
   addEditHistory()
 }
 
 //节点选中
 const editNodePropertiesRef = ref()
 const activatedHandle = (item, index) => {
-  currentItemIndex.value = index
+  state.currentItemIndex = index
 
   //让路线不选中
   state.selectedCurve = ''
 
-  if (state.currentDragTarget.index !== null) {
+  if (state.mapRouteList.length > 0 && state.currentDragTarget.index !== null) {
     state.mapRouteList[state.currentDragTarget.index].isSelected = false
     state.currentDragTarget = { index: null, type: null }
   }
 
   //节点编辑
   if (toolbarSwitchType.value === 'editNode') {
-    let list = allHistoryList.value[currentIndex.value].filter((item) => item.type === 3)
+    let list = state.allMapPointInfo.filter((item) => item.type === 3)
     editNodePropertiesRef.value.open(JSON.parse(JSON.stringify(item)), list)
   }
 }
@@ -694,31 +681,42 @@ const deactivatedHandle = () => {}
 //添加历史记录
 const addEditHistory = () => {
   //要判断是不是在最新的记录上修改 如果不是 要把currentIndex之后的记录都删掉 保持当前修改是最新的
-  if (currentIndex.value !== allHistoryList.value.length - 1) {
-    allHistoryList.value = allHistoryList.value.splice(0, currentIndex.value)
-    currentIndex.value = allHistoryList.value.length
-    allHistoryList.value.push(JSON.parse(JSON.stringify(allMapPointInfo.value)))
+  if (state.currentIndex !== state.allHistoryList.length - 1) {
+    state.allHistoryList = state.allHistoryList.splice(0, state.currentIndex)
+    state.currentIndex = state.allHistoryList.length
+    state.allHistoryList.push({
+      allMapPointInfo: JSON.parse(JSON.stringify(state.allMapPointInfo)),
+      mapRouteList: JSON.parse(JSON.stringify(state.mapRouteList))
+    })
   } else {
-    allHistoryList.value.push(JSON.parse(JSON.stringify(allMapPointInfo.value)))
-    currentIndex.value++
+    state.allHistoryList.push({
+      allMapPointInfo: JSON.parse(JSON.stringify(state.allMapPointInfo)),
+      mapRouteList: JSON.parse(JSON.stringify(state.mapRouteList))
+    })
+    state.currentIndex++
   }
   interfaceRefreshed.value = true
 }
 
 //上一步
 const backPreviousStep = () => {
-  if (currentIndex.value > 0) {
-    currentIndex.value--
-    allMapPointInfo.value = allHistoryList.value[currentIndex.value]
+  console.log(state.currentIndex)
+  console.log(state.allMapPointInfo)
+  console.log(state.allHistoryList)
+  if (state.currentIndex > 0) {
+    state.currentIndex--
+    state.allMapPointInfo = state.allHistoryList[state.currentIndex]?.allMapPointInfo || []
+    state.mapRouteList = state.allHistoryList[state.currentIndex]?.mapRouteList || []
   } else {
     message.warning('没了老铁')
   }
 }
 //下一步
 const backNextStep = () => {
-  if (currentIndex.value < allHistoryList.value.length - 1) {
-    currentIndex.value++
-    allMapPointInfo.value = allHistoryList.value[currentIndex.value]
+  if (state.currentIndex < state.allHistoryList.length - 1) {
+    state.currentIndex++
+    state.allMapPointInfo = state.allHistoryList[state.currentIndex]?.allMapPointInfo || []
+    state.mapRouteList = state.allHistoryList[state.currentIndex]?.mapRouteList || []
   } else {
     message.warning('没了老铁')
   }
@@ -733,7 +731,7 @@ const mapClick = (e) => {
 
   //绘制节点
   if (toolbarSwitchType.value === 'drawNodes') {
-    allMapPointInfo.value.push({
+    state.allMapPointInfo.push({
       positionMapId: imgBgObj.positionMapId, //地图的id
       layerSelectionShow: true,
       locationX: x,
@@ -782,7 +780,7 @@ const textFormSuccess = (form) => {
 const handleInputEnd = () => {
   if (state.inputBoxValue) {
     state.showInputBox = false
-    allMapPointInfo.value.push({
+    state.allMapPointInfo.push({
       type: 7, //类型  7文字
       positionMapId: imgBgObj.positionMapId, //地图的id
       locationX: state.inputBoxStyle.locationX, //x
@@ -810,9 +808,7 @@ const handleInputEnd = () => {
 }
 //编辑节点成功
 const submitNodeSuccess = (form) => {
-  allMapPointInfo.value[currentItemIndex.value] = form
-  allHistoryList.value[currentIndex.value][currentItemIndex.value] = form
-
+  state.allMapPointInfo[state.currentItemIndex] = form
   //节点位置改变 通知路径里面的节点也改变
   state.mapRouteList.forEach((item) => {
     if (form.id === item.startingPointId) {
@@ -832,6 +828,7 @@ const submitNodeSuccess = (form) => {
       item.actualEndPointY = disposeEventPoint(form.locationX, form.locationY).actualLocationY
     }
   })
+  addEditHistory()
 }
 
 //工具栏点击
@@ -1036,21 +1033,26 @@ const state = reactive({
   measureDistancesNum: 0, // 存储两点之间的距离
   imageChangeMultiple: 1, //图片放大缩小的倍数
   prohibitedOperation: false, //禁止操作 在框选测距等操作时，禁止所有拖动等操作
-  mapRouteList: [], //仓库点位地图连线
   currentDragTarget: {
     index: null,
     type: null
   }, //当前拖拽的目标（起点、终点、控制点）
   selectedCurve: '', // 当前选中的曲线
   startDrawPointIndex: -1, // 起始点的索引
-  startDrawPoint: null,
-  isDrawing: false,
-  currentDrawX: 0,
-  currentDrawY: 0
+  startDrawPoint: null, //绘制路线开始的点
+  isDrawing: false, //正在绘制
+  currentDrawX: 0, //正在绘制的x轴坐标
+  currentDrawY: 0, //正在绘制的y轴坐标
+  allHistoryList: [], //所有的历史记录 [{allMapPointInfo:[],mapRouteList:[]}]
+  allMapPointInfo: [], //当前页面上的所有节点的列表
+  mapRouteList: [], //当前页面上所有路线的列表
+  currentIndex: 0, //当前处在哪条历史记录
+  currentItemIndex: -1 //当前处在哪个工具
 })
+
 const toolbarClick = (item) => {
   let type = item.switchType
-  if (currentItemIndex.value === -1 && (type === 'move' || type === 'revolve' || type === 'copy')) {
+  if (state.currentItemIndex === -1 && (type === 'move' || type === 'revolve' || type === 'copy')) {
     message.warning('请先选择要操作的对象')
     return
   }
@@ -1058,7 +1060,7 @@ const toolbarClick = (item) => {
   if (
     type === 'delete' &&
     state.currentDragTarget.index === null &&
-    currentItemIndex.value === -1
+    state.currentItemIndex === -1
   ) {
     message.warning('请先选择要操作的对象')
     return
@@ -1125,7 +1127,7 @@ const toolbarClick = (item) => {
       break
     case 'saveAs':
       //另存为 存为json文件 无法直接访问用户的文件系统 不能选择存在那个文件夹里面
-      const jsonString = JSON.stringify(allHistoryList.value[currentIndex.value], null, 2)
+      const jsonString = JSON.stringify(state.allHistoryList[state.currentIndex], null, 2)
       const blob = new Blob([jsonString], { type: 'application/json' })
       const url = URL.createObjectURL(blob)
 
@@ -1149,7 +1151,7 @@ const toolbarClick = (item) => {
       break
     case 'copy':
       //复制
-      let copyMapItem = allHistoryList.value[currentIndex.value][currentItemIndex.value]
+      let copyMapItem = state.allMapPointInfo[state.currentItemIndex]
       state.copyMapItem = {
         positionMapId: copyMapItem.positionMapId,
         locationX: copyMapItem.locationX,
@@ -1172,18 +1174,20 @@ const toolbarClick = (item) => {
       let copyObj = JSON.parse(JSON.stringify(state.copyMapItem))
       copyObj.locationX = Number(copyObj.locationX) + 50
       copyObj.locationY = Number(copyObj.locationY) + 50
-      allMapPointInfo.value.push(copyObj)
+      state.allMapPointInfo.push(copyObj)
       addEditHistory()
       break
     case 'delete':
       //删除
-      if (currentItemIndex.value !== -1) {
-        allMapPointInfo.value.splice(currentItemIndex.value, 1)
-        addEditHistory()
+      if (state.currentItemIndex !== -1) {
+        state.allMapPointInfo.splice(state.currentItemIndex, 1)
+        state.currentItemIndex = -1
       }
       if (state.currentDragTarget.index !== null) {
         state.mapRouteList.splice(state.currentDragTarget.index, 1)
+        state.currentDragTarget.index = null
       }
+      addEditHistory()
       break
     case 'tools':
       //工具
@@ -1256,7 +1260,7 @@ const toolbarClick = (item) => {
     case 'larger':
       //放大
       if (state.imageChangeMultiple < 3) {
-        state.imageChangeMultiple *= 1.2
+        state.imageChangeMultiple += 0.1
       } else {
         message.warning('不能在放大了')
       }
@@ -1264,7 +1268,7 @@ const toolbarClick = (item) => {
     case 'smaller':
       //缩小
       if (state.imageChangeMultiple > 0.3) {
-        state.imageChangeMultiple *= 0.8
+        state.imageChangeMultiple -= 0.1
       } else {
         message.warning('不能在缩小了')
       }
@@ -1291,7 +1295,7 @@ const toolbarClick = (item) => {
       break
     case 'equipment':
       // 设备
-      let equipmentList = allHistoryList.value[currentIndex.value].filter((item) => {
+      let equipmentList = state.allMapPointInfo.filter((item) => {
         return item.type === 3
       })
       equipmentToolDialogRef.value.open(equipmentList)
@@ -1301,25 +1305,35 @@ const toolbarClick = (item) => {
 
 //移动工具表单提交
 const moveFormSubmit = () => {
-  allHistoryList.value[currentIndex.value][currentItemIndex.value].locationX =
-    state.moveForm.locationX
-  allHistoryList.value[currentIndex.value][currentItemIndex.value].locationY =
-    state.moveForm.locationY
+  state.allMapPointInfo[state.currentItemIndex].locationX = Number(state.moveForm.locationX)
+  state.allMapPointInfo[state.currentItemIndex].locationY = Number(state.moveForm.locationY)
+  addEditHistory()
 }
 //旋转工具表单提交
 const rotationFormSubmit = () => {
-  allHistoryList.value[currentIndex.value][currentItemIndex.value].angle = state.rotationForm.angle
+  state.allMapPointInfo[state.currentItemIndex].angle = state.rotationForm.angle
+  addEditHistory()
 }
 
 //鼠标拖动绘制节点
 // 从点开始绘制
 const startFromPoint = (index, event) => {
-  let list = allHistoryList.value[currentIndex.value]
+  let list = state.allMapPointInfo
   const point = list[index]
-  state.startDrawPoint = point //开始点
-  state.startDrawPointIndex = index
-  state.isDrawing = true
-  event.preventDefault() // 防止默认行为
+  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) => {
@@ -1396,8 +1410,19 @@ const endDrawSelection = (event) => {
       // 找到最近的终点
       const endPointIndex = findClosestPoint(state.currentDrawX, state.currentDrawY)
 
+      if (!endPointIndex.id) {
+        message.warning('选择的节点未保存')
+        // 重置状态
+        state.startDrawPointIndex = -1 // 起始点的索引
+        state.startDrawPoint = null
+        state.isDrawing = false
+        state.currentDrawX = 0
+        state.currentDrawY = 0
+        return
+      }
+
       if (endPointIndex !== null && endPointIndex !== state.startDrawPointIndex) {
-        let list = allHistoryList.value[currentIndex.value]
+        let list = state.allMapPointInfo
         const endPoint = list[endPointIndex]
         const newLine = {
           startPointX: state.startDrawPoint.locationX,
@@ -1455,6 +1480,7 @@ const endDrawSelection = (event) => {
             endWidth: endPoint.locationWide, //	终点宽
             endHigh: endPoint.locationDeep //	终点高
           })
+          addEditHistory()
         }
       }
       // 重置状态
@@ -1473,7 +1499,7 @@ const endDrawSelection = (event) => {
 const findClosestPoint = (x, y) => {
   let minDistance = Infinity
   let closestIndex = null
-  let list = allHistoryList.value[currentIndex.value]
+  let list = state.allMapPointInfo
   list.forEach((point, index) => {
     const distance = Math.sqrt((point.locationX - x) ** 2 + (point.locationY - y) ** 2)
     if (distance < minDistance && distance < point.locationWide) {
@@ -1484,10 +1510,9 @@ const findClosestPoint = (x, y) => {
   })
   return closestIndex
 }
-
 //点击区域
 const clickDrawSelectionArea = () => {
-  let points = allHistoryList.value[currentIndex.value]
+  let points = state.allMapPointInfo
 
   state.drawSelectionPointList = []
   state.allDrawSelectionAreaBox.forEach((box) => {
@@ -1511,8 +1536,6 @@ const clickDrawSelectionArea = () => {
   // let routeList = state.drawSelectionPointList.filter((item) => item.type === 1)
   let routeList = state.drawSelectionPointList
 
-  console.log(routeList)
-
   let isHaveId = binLocation.every((item) => {
     item.id
   })
@@ -1600,6 +1623,7 @@ const clickDrawSelectionArea = () => {
     }
     state.selectedCurve = curve
     state.mapRouteList.push(curve)
+    addEditHistory()
   }
 }
 //计算是不是在同一条直线的
@@ -1680,6 +1704,8 @@ const endDrag = (event) => {
   curve.actualEndControlX = actualEndControl.actualLocationX
   curve.actualEndControlY = actualEndControl.actualLocationY
 
+  addEditHistory()
+
   state.currentDragTarget = { index: null, type: null }
   window.removeEventListener('mousemove', handleDrag)
   window.removeEventListener('mouseup', endDrag)
@@ -1710,7 +1736,7 @@ const handleChooseRoute = (item, index) => {
   state.selectedCurve = item
   state.currentDragTarget.index = index
   //让节点不选中
-  currentItemIndex.value = -1
+  state.currentItemIndex = -1
 }
 //编辑路线成功
 const editMapRouteDialogSubmit = (form) => {
@@ -1735,7 +1761,7 @@ const editMapRouteDialogSubmit = (form) => {
       item.actualEndPointY = disposeEventPoint(form.endPointX, form.endPointY).actualLocationY
     }
   })
-  allMapPointInfo.value.forEach((item) => {
+  state.allMapPointInfo.forEach((item) => {
     if (item.id === form.startingPointId) {
       item.locationX = form.startPointX
       item.locationY = form.startPointY
@@ -1749,7 +1775,8 @@ const editMapRouteDialogSubmit = (form) => {
       item.actualLocationY = disposeEventPoint(form.endPointX, form.endPointY).actualLocationX
     }
   })
-  allHistoryList.value[currentIndex.value] = JSON.parse(JSON.stringify(allMapPointInfo.value))
+  //增加一条历史记录
+  addEditHistory()
 }
 
 //测距相关
@@ -1855,9 +1882,9 @@ const getAllNodeList = async () => {
   let list = await MapApi.getPositionMapItemList({
     positionMapId: imgBgObj.positionMapId
   })
-  allMapPointInfo.value = []
-  allHistoryList.value = []
-  currentIndex.value = 0
+  state.allMapPointInfo = []
+  state.allHistoryList = []
+  state.currentIndex = 0
   list.forEach((item) => {
     item.layerSelectionShow = true //用于图层
     item.locationX = Number(item.locationX)
@@ -1922,13 +1949,16 @@ const getAllNodeList = async () => {
       item.rotatable = true
       item.lockAspectRatio = true
     }
-    allMapPointInfo.value.push(item)
+    state.allMapPointInfo.push(item)
   })
-  allHistoryList.value[0] = JSON.parse(JSON.stringify(allMapPointInfo.value))
 }
 //获取所有的路线
 const getAllMapRoute = async () => {
   state.mapRouteList = await MapApi.getPositionMapLineByPositionMapId(imgBgObj.positionMapId)
+  state.allHistoryList[0] = {
+    allMapPointInfo: JSON.parse(JSON.stringify(state.allMapPointInfo)),
+    mapRouteList: JSON.parse(JSON.stringify(state.mapRouteList))
+  }
 }
 //保存地图按钮
 const saveMap = async () => {
@@ -1954,7 +1984,7 @@ const saveMap = async () => {
 }
 //节点的保存
 const saveNodeList = async () => {
-  let list = allHistoryList.value[currentIndex.value]
+  let list = state.allMapPointInfo
   list.forEach((item) => {
     if (item.type === 7) {
       item.dataObj.positionMapId = imgBgObj.positionMapId
@@ -1976,7 +2006,7 @@ const saveMapRoute = async () => {
 }
 //筛选图层
 const layerSelectionSuccess = (typeList) => {
-  allHistoryList.value[currentIndex.value].forEach((item) => {
+  state.allMapPointInfo.forEach((item) => {
     // 如果 type 存在于第一个数组中，则将 layerSelectionShow 设置为 false
     if (typeList.includes(item.type)) {
       item.layerSelectionShow = false
@@ -2013,7 +2043,6 @@ 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
@@ -2027,7 +2056,7 @@ document.onmousedown = function (e) {
       state.mapRouteList[state.currentDragTarget.index].isSelected = false
       state.currentDragTarget = { index: null, type: null }
     }
-    currentItemIndex.value = -1
+    state.currentItemIndex = -1
   }
 }
 // 阻止默认菜单弹出
@@ -2035,8 +2064,57 @@ window.document.oncontextmenu = function () {
   return false
 }
 
+//监听键盘事件
+const handleKeyDown = (event) => {
+  if (event.ctrlKey) {
+    if (event.key === 'c') {
+      if (state.currentItemIndex === -1) {
+        message.warning('请先选择要操作的对象')
+        return
+      }
+      let copyMapItem = state.allMapPointInfo[state.currentItemIndex]
+      state.copyMapItem = {
+        positionMapId: copyMapItem.positionMapId,
+        locationX: copyMapItem.locationX,
+        locationY: copyMapItem.locationY,
+        type: copyMapItem.type,
+        dataJson: copyMapItem.dataJson || '',
+        dataObj: copyMapItem.dataObj || {},
+        dataList: copyMapItem.dataList || [],
+        locationDeep: copyMapItem.locationDeep,
+        locationWide: copyMapItem.locationWide,
+        draggable: copyMapItem.draggable,
+        resizable: copyMapItem.resizable,
+        rotatable: copyMapItem.rotatable,
+        lockAspectRatio: copyMapItem.lockAspectRatio
+      }
+      message.success('复制成功')
+    } else if (event.key === 'v') {
+      //粘贴
+      if (!state.copyMapItem) {
+        message.warning('请先复制对象')
+        return
+      }
+      //粘贴
+      let copyObj = JSON.parse(JSON.stringify(state.copyMapItem))
+      copyObj.locationX = Number(copyObj.locationX) + 50
+      copyObj.locationY = Number(copyObj.locationY) + 50
+      state.allMapPointInfo.push(copyObj)
+      addEditHistory()
+    } else if (event.key === 'z') {
+      //撤回
+      backPreviousStep()
+    }
+  }
+}
+
 onMounted(() => {
   getMapList()
+  window.addEventListener('keydown', handleKeyDown)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeyDown)
 })
 </script>