粘贴不显示问题

src/views/mapPage/realTimeMap/editMap.vue

@@ -229,7 +229,7 @@
         >
           <VueDragResizeRotate
             v-for="(item, index) in state.allMapPointInfo"
-            :key="item.locationX"
+            :key="index"
             :parent="true"
             :x="Number(item.locationX) - Number(item.locationWide) / 2"
             :y="Number(item.locationY) - Number(item.locationDeep) / 2"
@@ -1151,31 +1151,11 @@ const toolbarClick = (item) => {
       break
     case 'copy':
       //复制
-      let copyMapItem = state.allMapPointInfo[state.currentItemIndex]
+      replicationNode()
-      state.copyMapItem = {
-        positionMapId: copyMapItem.positionMapId,
-        locationX: copyMapItem.locationX,
-        locationY: copyMapItem.locationY,
-        type: copyMapItem.type,
-        dataJson: copyMapItem.dataJson || '',
-        dataObj: copyMapItem.dataObj || {},
-        dataList: copyMapItem.dataList || [],
-        locationDeep: copyMapItem.locationDeep,
-        locationWide: copyMapItem.locationWide,
-        draggable: copyMapItem.draggable,
-        resizable: copyMapItem.resizable,
-        rotatable: copyMapItem.rotatable,
-        lockAspectRatio: copyMapItem.lockAspectRatio
-      }
-      message.success('复制成功')
       break
     case 'paste':
       //粘贴
-      let copyObj = JSON.parse(JSON.stringify(state.copyMapItem))
+      pasteNode()
-      copyObj.locationX = Number(copyObj.locationX) + 50
-      copyObj.locationY = Number(copyObj.locationY) + 50
-      state.allMapPointInfo.push(copyObj)
-      addEditHistory()
       break
     case 'delete':
       //删除
@@ -1303,6 +1283,43 @@ const toolbarClick = (item) => {
   }
 }
 
+//复制
+const replicationNode = () => {
+  let copyMapItem = state.allMapPointInfo[state.currentItemIndex]
+  let locationX = Number(copyMapItem.locationX) + 20
+  let locationY = Number(copyMapItem.locationY) + 20
+  let actualPoint = disposeEventPoint(locationX, locationY)
+
+  state.copyMapItem = {
+    positionMapId: copyMapItem.positionMapId,
+    locationX: locationX,
+    locationY: locationY,
+    actualLocationX: actualPoint.actualLocationX,
+    actualLocationY: actualPoint.actualLocationY,
+    type: copyMapItem.type,
+    dataJson: copyMapItem.dataJson || '',
+    dataObj: copyMapItem.dataObj || {},
+    dataList: copyMapItem.dataList || [],
+    locationDeep: copyMapItem.locationDeep,
+    locationWide: copyMapItem.locationWide,
+    draggable: copyMapItem.draggable,
+    resizable: copyMapItem.resizable,
+    rotatable: copyMapItem.rotatable,
+    lockAspectRatio: copyMapItem.lockAspectRatio,
+    layerSelectionShow: copyMapItem.layerSelectionShow,
+    mapImageUrl: copyMapItem.mapImageUrl,
+    areaId: copyMapItem.areaId
+  }
+  message.success('复制成功')
+}
+//粘贴
+const pasteNode = () => {
+  let copyObj = JSON.parse(JSON.stringify(state.copyMapItem))
+  state.allMapPointInfo.push(copyObj)
+  message.success('粘贴成功')
+  addEditHistory()
+}
+
 //移动工具表单提交
 const moveFormSubmit = () => {
   state.allMapPointInfo[state.currentItemIndex].locationX = Number(state.moveForm.locationX)
@@ -1318,21 +1335,23 @@ const rotationFormSubmit = () => {
 //鼠标拖动绘制节点
 // 从点开始绘制
 const startFromPoint = (index, event) => {
-  let list = state.allMapPointInfo
+  if (toolbarSwitchType.value === 'clickDrawRoute') {
-  const point = list[index]
+    let list = state.allMapPointInfo
-  if (point.id) {
+    const point = list[index]
-    state.startDrawPoint = point //开始点
+    if (point.id) {
-    state.startDrawPointIndex = index
+      state.startDrawPoint = point //开始点
-    state.isDrawing = true
+      state.startDrawPointIndex = index
-    event.preventDefault() // 防止默认行为
+      state.isDrawing = true
-  } else {
+      event.preventDefault() // 防止默认行为
-    message.warning('选择的节点未保存')
+    } else {
-    // 重置状态
+      message.warning('选择的节点未保存')
-    state.startDrawPointIndex = -1 // 起始点的索引
+      // 重置状态
-    state.startDrawPoint = null
+      state.startDrawPointIndex = -1 // 起始点的索引
-    state.isDrawing = false
+      state.startDrawPoint = null
-    state.currentDrawX = 0
+      state.isDrawing = false
-    state.currentDrawY = 0
+      state.currentDrawX = 0
+      state.currentDrawY = 0
+    }
   }
 }
 //开始框选绘制
@@ -1410,20 +1429,21 @@ 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 = 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,
@@ -2068,42 +2088,25 @@ window.document.oncontextmenu = function () {
 const handleKeyDown = (event) => {
   if (event.ctrlKey) {
     if (event.key === 'c') {
+      //复制
       if (state.currentItemIndex === -1) {
         message.warning('请先选择要操作的对象')
         return
       }
-      let copyMapItem = state.allMapPointInfo[state.currentItemIndex]
+      replicationNode()
-      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
       }
-      //粘贴
+      pasteNode()
-      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()
+    } else if (event.key === 'y') {
+      //重写
+      backNextStep()
     }
   }
 }
@@ -2120,52 +2123,86 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 .edit-map-page {
-  margin-bottom: 20px;
+  .map-container {
-}
-
-.map-container {
-  position: relative;
-  width: 100%;
-  overflow: auto;
-  .map-bg {
-    background-size: contain;
-    background-repeat: no-repeat;
     position: relative;
-  }
+    width: 100%;
-  .map-box-inner {
+    overflow: auto;
-    position: absolute;
+    // height: 85vh;
-    top: 0;
+    height: calc(100vh - 140px);
-    left: 0;
-  }
-}
 
-.top-tool {
+    .map-bg {
-  margin-top: 5px;
+      background-size: contain;
-  margin-bottom: 3px;
+      background-repeat: no-repeat;
-  .top-tool-list {
+      position: relative;
-    display: flex;
+    }
-    align-items: center;
+    .map-box-inner {
-    text-align: center;
+      position: absolute;
-    background-color: #fff;
+      top: 0;
-    padding: 0 12px;
+      left: 0;
-    height: 70px;
+    }
-    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 3px;
+  }
 
-    .top-tool-item {
+  .top-tool {
+    margin-top: 5px;
+    margin-bottom: 3px;
+    .top-tool-list {
       display: flex;
       align-items: center;
+      text-align: center;
+      background-color: #fff;
+      padding: 0 12px;
+      height: 70px;
+      box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 3px;
+
+      .top-tool-item {
+        display: flex;
+        align-items: center;
+
+        .tool-item {
+          cursor: pointer;
+          width: 50px;
+          height: 70px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+
+          .name {
+            cursor: pointer;
+            font-family:
+              PingFangSC,
+              PingFang SC;
+            font-weight: 400;
+            font-size: 14px;
+            color: #0d162a;
+            line-height: 20px;
+            text-align: center;
+            font-style: normal;
+            margin-top: 4px;
+          }
+        }
+        .line {
+          margin: 0 12px;
+          width: 1px;
+          height: 47px;
+          border: 1px solid #cccccc;
+        }
+      }
+    }
+
+    .right-tool-list {
+      position: absolute;
+      right: 0;
+      top: 114px;
+      background-color: #fff;
+      z-index: 999;
+      text-align: center;
+      box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
 
       .tool-item {
         cursor: pointer;
-        width: 50px;
+        padding: 10px;
-        height: 70px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-
         .name {
-          cursor: pointer;
           font-family:
             PingFangSC,
             PingFang SC;
@@ -2175,121 +2212,88 @@ onUnmounted(() => {
           line-height: 20px;
           text-align: center;
           font-style: normal;
-          margin-top: 4px;
         }
       }
-      .line {
-        margin: 0 12px;
-        width: 1px;
-        height: 47px;
-        border: 1px solid #cccccc;
-      }
     }
   }
 
-  .right-tool-list {
+  .input-box-class {
     position: absolute;
-    right: 0;
+    border: 1px solid #00329f;
-    top: 114px;
+    padding: 4px;
-    background-color: #fff;
+    outline: none;
-    z-index: 999;
+  }
-    text-align: center;
-    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
 
-    .tool-item {
+  .selection-area-btn {
-      cursor: pointer;
+    width: 80px;
-      padding: 10px;
+    margin-left: 4px;
-      .name {
+  }
-        font-family:
+
-          PingFangSC,
+  .grid-show {
-          PingFang SC;
+    // background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px),
-        font-weight: 400;
+    //   linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px);
-        font-size: 14px;
+    // background-size:
-        color: #0d162a;
+    //   20px 20px,
-        line-height: 20px;
+    //   20px 20px;
-        text-align: center;
+
-        font-style: normal;
+    width: 100%;
+    height: 100%;
+    background-image: repeating-linear-gradient(
+        to right,
+        rgba(0, 0, 0, 0.1),
+        rgba(0, 0, 0, 0.1) 1px,
+        transparent 1px,
+        transparent 50px
+      ),
+      repeating-linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0.1),
+        rgba(0, 0, 0, 0.1) 1px,
+        transparent 1px,
+        transparent 50px
+      );
+  }
+
+  .svg-div {
+    z-index: 99999;
+
+    svg {
+      cursor: crosshair;
+
+      path.selected {
+        stroke: blue;
       }
     }
   }
-}
 
-.input-box-class {
+  .drop-down-menu {
-  position: absolute;
+    .drop-down-menu-item {
-  border: 1px solid #00329f;
+      cursor: pointer;
-  padding: 4px;
+      display: flex;
-  outline: none;
+      flex-direction: column;
-}
+      align-items: center;
-
+      width: 100%;
-.selection-area-btn {
+      padding: 11px 0;
-  width: 80px;
+      font-family:
-  margin-left: 4px;
+        PingFangSC,
-}
+        PingFang SC;
-
+      font-weight: 400;
-.grid-show {
+      font-size: 14px;
-  // background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px),
+      color: #0d162a;
-  //   linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px);
+      line-height: 20px;
-  // background-size:
+      text-align: left;
-  //   20px 20px,
+      font-style: normal;
-  //   20px 20px;
+      border-bottom: 1px solid #e9e9e9;
-
-  width: 100%;
-  height: 100%;
-  background-image: repeating-linear-gradient(
-      to right,
-      rgba(0, 0, 0, 0.1),
-      rgba(0, 0, 0, 0.1) 1px,
-      transparent 1px,
-      transparent 50px
-    ),
-    repeating-linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0.1),
-      rgba(0, 0, 0, 0.1) 1px,
-      transparent 1px,
-      transparent 50px
-    );
-}
-
-.svg-div {
-  z-index: 99999;
-
-  svg {
-    cursor: crosshair;
-
-    path.selected {
-      stroke: blue;
     }
   }
-}
 
-.drop-down-menu {
+  .tool-active {
-  .drop-down-menu-item {
+    background: #ebf1ff;
-    cursor: pointer;
+    border-bottom: 2px solid #1677ff;
-    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;
   }
-}
 
-.tool-active {
+  .right-tool-active {
-  background: #ebf1ff;
+    background: #ebf1ff !important;
-  border-bottom: 2px solid #1677ff;
+  }
-}
-
-.right-tool-active {
-  background: #ebf1ff !important;
 }
 </style>