锁定站移出移入数据丢失问题

src/views/mes/hw/lotoStation/MapData.vue

@@ -11,14 +11,14 @@
         </div>
         <div
           class="bottombtn"
-          style="width: 100%; height: 35px; padding: 10px 0 0"
+          style="width: 100%; height: 35px; padding: 10px 0 0;"
         >
           <el-button
             v-no-more-click
             @click="close"
             type="primary"
             icon="el-icon-close"
-            style="float: right; height: 33px; line-height: 2px"
+            style="float: right; height: 33px; line-height: 2px;margin: 0 10px"
           >关闭
           </el-button>
           <el-button
@@ -26,7 +26,7 @@
             @click="save"
             type="primary"
             icon="el-icon-check"
-            style="float: right; height: 33px; line-height: 2px; margin: 0 5px"
+            style="float: right; height: 33px; line-height: 2px; margin: 0 10px"
           >保存
           </el-button>
           <el-button
@@ -84,9 +84,10 @@ export default {
       groups: [], //组移动数据
       bindingPointIds: [], //存放从未绑定中放入物资柜的数据 id集合
       unbindPointIds: [], //解绑的数据接口参数 id集合
-
+      isSave:false
     }
   },
+
   created() {
     this.getIsIsolationPointPage()
   },
@@ -308,7 +309,7 @@ export default {
       // 创建舞台
       this.stage = new Konva.Stage({
         container: this.$refs.container, // 容器元素
-        width: 1200,
+        width: 1250,
         height: 860
       })
 
@@ -411,8 +412,6 @@ export default {
       this.layer.draw()
     },
 
-
-
     renderGrid(imageSrc) {
       this.selectedStates = [] // 用数组来存储选中状态
       this.rects = []
@@ -506,8 +505,6 @@ export default {
             height: 790 // 物资柜的高度
           }
 
-          // 定义是否已经在物资柜中的状态
-
           group.on('dragend', () => {
             // 获取拖拽的内容对应的点名称
             const labelText = group.findOne('Text').text()
@@ -616,15 +613,67 @@ export default {
                 (item) => item.pointName === labelText
               )
 
-              if (rightIndex !== -1 && !isInRightBox && !isInCabinet) {
-                // 从右侧拖拽到物资柜外
+              if (rightIndex !== -1) {
+                // 从右侧拖拽到物资柜外或物资柜内
                 const movedPoint = this.rightPoints.splice(rightIndex, 1)[0]
-                if (
-                  !this.leftPoints.find(
-                    (point) => point.pointName === movedPoint.pointName
-                  )
-                ) {
-                  this.leftPoints.push(movedPoint)
+
+                // 如果点不在右侧列表中且不在物资柜中，更新位置
+                if (!isInRightBox && !isInCabinet) {
+                  // 更新位置为新的列和行
+                  const newCol = Math.round(groupPos.x / 50) // 四舍五入到最近的列
+                  const newRow = Math.round(groupPos.y / 50) // 四舍五入到最近的行
+
+                  // 限制列和行的范围，防止超出网格边界
+                  const maxCols = Math.floor(1200 / 50) - 1 // 最大列索引
+                  const maxRows = Math.floor(860 / 50) - 1 // 最大行索引
+
+                  const boundedCol = Math.max(0, Math.min(newCol, maxCols)) // 限制列范围
+                  const boundedRow = Math.max(0, Math.min(newRow, maxRows)) // 限制行范围
+
+                  // 更新点位数据
+                  const updatedPosition = {
+                    ...movedPoint,
+                    col: boundedCol,
+                    row: boundedRow
+                  }
+
+                  // 更新 positions 数组中的点位
+                  positions.push(updatedPosition)
+                  this.value = JSON.stringify(positions, null, 4)
+                }
+
+                // 如果点从右侧拖拽到物资柜内
+                if (isInCabinet) {
+                  // 更新位置为新的列和行
+                  const newCol = Math.round(groupPos.x / 50) // 四舍五入到最近的列
+                  const newRow = Math.round(groupPos.y / 50) // 四舍五入到最近的行
+
+                  // 限制列和行的范围，防止超出网格边界
+                  const maxCols = Math.floor(1200 / 50) - 1 // 最大列索引
+                  const maxRows = Math.floor(860 / 50) - 1 // 最大行索引
+
+                  const boundedCol = Math.max(0, Math.min(newCol, maxCols)) // 限制列范围
+                  const boundedRow = Math.max(0, Math.min(newRow, maxRows)) // 限制行范围
+
+                  // 更新点位数据
+                  const updatedPosition = {
+                    ...movedPoint,
+                    col: boundedCol,
+                    row: boundedRow
+                  }
+
+                  // 更新 positions 数组中的点位
+                  positions.push(updatedPosition)
+                  this.value = JSON.stringify(positions, null, 4)
+
+                  // 确保点位没有被重复添加到 leftPoints 中
+                  if (
+                    !this.leftPoints.find(
+                      (point) => point.pointName === movedPoint.pointName
+                    )
+                  ) {
+                    this.leftPoints.push(movedPoint)
+                  }
                 }
               }
             }
@@ -635,12 +684,243 @@ export default {
             // 打印调试信息
             console.log('Updated positions:', positions)
             console.log('Right Points:', this.rightPoints)
-          })
+            console.log('Left Points:', this.leftPoints)
 
-          this.layer.draw()
+            // 重新绘制图层
+            this.layer.draw()
+          })
         }
       })
     },
+
+    // renderGrid(imageSrc) {
+    //   this.selectedStates = [] // 用数组来存储选中状态
+    //   this.rects = []
+    //   this.texts = []
+    //   this.bgrects = {}
+    //   this.redrects = []
+    //   this.redtexts = []
+    //   this.selectedText = []
+    //
+    //   const positions = JSON.parse(this.value)
+    //
+    //   positions.forEach((pos, index) => {
+    //     const x = pos.col * 50 // 每个单元格宽度为50
+    //     const y = pos.row * 50 // 每个单元格高度为50
+    //     const labelText = pos.pointName // 对应的文字
+    //
+    //     const point = new Image()
+    //     point.src = pos.pointIcon
+    //
+    //     point.onload = () => {
+    //       // 创建一个新的Group来包含整个隔离点
+    //       const group = new Konva.Group({
+    //         x: x,
+    //         y: y,
+    //         draggable: true // 设置为可拖拽
+    //       })
+    //
+    //       // 底部白色背景
+    //       const bgrect = new Konva.Rect({
+    //         x: -6,
+    //         y: -5,
+    //         width: 62,
+    //         height: 80,
+    //         cornerRadius: 5,
+    //         stroke: 'white',
+    //         strokeWidth: 2,
+    //         fill: 'white'
+    //       })
+    //
+    //       // 普通矩形
+    //       const rect = new Konva.Rect({
+    //         x: 0,
+    //         y: -1,
+    //         width: 50,
+    //         height: 72,
+    //         cornerRadius: 5,
+    //         stroke: 'red',
+    //         strokeWidth: 2,
+    //         fill: 'white'
+    //       })
+    //
+    //       // 图片
+    //       const knovaImage = new Konva.Image({
+    //         x: 0,
+    //         y: 0,
+    //         image: point,
+    //         width: 50,
+    //         height: 50
+    //       })
+    //
+    //       // 文字
+    //       const text = new Konva.Text({
+    //         x: 8,
+    //         y: 50,
+    //         fontSize: 17,
+    //         text: labelText,
+    //         fontFamily: 'Calibri',
+    //         fill: 'red'
+    //       })
+    //
+    //       // 将所有元素添加到group中
+    //       group.add(bgrect)
+    //       group.add(rect)
+    //       group.add(knovaImage)
+    //       group.add(text)
+    //
+    //       // 将group添加到layer
+    //       this.layer.add(group)
+    //       // 定义右侧盒子的范围
+    //       const rightBoxBounds = {
+    //         x: 990,
+    //         y: 15,
+    //         width: 200,
+    //         height: 800
+    //       }
+    //       // 定义物资柜的范围
+    //       const cabinetBounds = {
+    //         x: 330, // 物资柜的 x 坐标
+    //         y: 10, // 物资柜的 y 坐标
+    //         width: 500, // 物资柜的宽度
+    //         height: 790 // 物资柜的高度
+    //       }
+    //
+    //       // 定义是否已经在物资柜中的状态
+    //
+    //       group.on('dragend', () => {
+    //         // 获取拖拽的内容对应的点名称
+    //         const labelText = group.findOne('Text').text()
+    //
+    //         // 获取 group 的位置
+    //         const groupPos = group.getAbsolutePosition()
+    //
+    //         // 检查是否仍在物资柜范围内
+    //         const isInCabinet =
+    //           groupPos.x >= cabinetBounds.x &&
+    //           groupPos.x <= cabinetBounds.x + cabinetBounds.width &&
+    //           groupPos.y >= cabinetBounds.y &&
+    //           groupPos.y <= cabinetBounds.y + cabinetBounds.height
+    //
+    //         // 检查是否在右侧盒子范围内
+    //         const isInRightBox =
+    //           groupPos.x >= rightBoxBounds.x &&
+    //           groupPos.x <= rightBoxBounds.x + rightBoxBounds.width &&
+    //           groupPos.y >= rightBoxBounds.y &&
+    //           groupPos.y <= rightBoxBounds.y + rightBoxBounds.height
+    //
+    //         // 查找并删除对应的点数据
+    //         const indexToRemove = positions.findIndex(
+    //           (item) => item.pointName === labelText
+    //         )
+    //
+    //         if (indexToRemove !== -1) {
+    //           // 从 positions 中移除并获取移动的点
+    //           const movedPoint = positions.splice(indexToRemove, 1)[0]
+    //
+    //           if (movedPoint) {
+    //             // 如果点位在物资柜外但不在右侧列表中，进行位置更新
+    //             if (!isInCabinet && !isInRightBox) {
+    //               // 更新位置为新的列和行
+    //               const newCol = Math.round(groupPos.x / 50) // 四舍五入到最近的列
+    //               const newRow = Math.round(groupPos.y / 50) // 四舍五入到最近的行
+    //
+    //               // 限制列和行的范围，防止超出网格边界
+    //               const maxCols = Math.floor(1200 / 50) - 1 // 最大列索引
+    //               const maxRows = Math.floor(860 / 50) - 1 // 最大行索引
+    //
+    //               const boundedCol = Math.max(0, Math.min(newCol, maxCols)) // 限制列范围
+    //               const boundedRow = Math.max(0, Math.min(newRow, maxRows)) // 限制行范围
+    //
+    //               // 更新点位数据
+    //               const updatedPosition = {
+    //                 ...movedPoint,
+    //                 col: boundedCol,
+    //                 row: boundedRow
+    //               }
+    //
+    //               // 更新 positions 数组中的点位
+    //               positions[indexToRemove] = updatedPosition
+    //               this.value = JSON.stringify(positions, null, 4)
+    //             }
+    //
+    //             // 如果从物资柜外移动到右侧列表
+    //             else if (isInRightBox) {
+    //               // 确保点位没有被重复添加到 rightPoints 中
+    //               if (
+    //                 !this.rightPoints.find(
+    //                   (point) => point.pointName === movedPoint.pointName
+    //                 )
+    //               ) {
+    //                 // 从 positions 中删除该点
+    //                 const updatedPositions = positions.filter(
+    //                   (item) => item.pointName !== movedPoint.pointName
+    //                 )
+    //                 this.value = JSON.stringify(updatedPositions, null, 4)
+    //
+    //                 // 将 movedPoint 添加到 rightPoints 数组
+    //                 this.rightPoints.push(movedPoint)
+    //
+    //                 // 将 pointId 添加到 unbindPointIds 数组
+    //                 this.unbindPointIds.push(movedPoint.pointId)
+    //               }
+    //             }
+    //             // 如果是从物资柜内拿出来并移到柜外但不进入右侧列表
+    //             else if (isInCabinet && !isInRightBox) {
+    //               // 更新位置并保存
+    //               const newCol = Math.round(groupPos.x / 50) // 四舍五入到最近的列
+    //               const newRow = Math.round(groupPos.y / 50) // 四舍五入到最近的行
+    //
+    //               // 限制列和行的范围，防止超出网格边界
+    //               const maxCols = Math.floor(1200 / 50) - 1 // 最大列索引
+    //               const maxRows = Math.floor(860 / 50) - 1 // 最大行索引
+    //
+    //               const boundedCol = Math.max(0, Math.min(newCol, maxCols)) // 限制列范围
+    //               const boundedRow = Math.max(0, Math.min(newRow, maxRows)) // 限制行范围
+    //
+    //               // 更新点位数据
+    //               const updatedPosition = {
+    //                 ...movedPoint,
+    //                 col: boundedCol,
+    //                 row: boundedRow
+    //               }
+    //
+    //               // 更新 positions 数组中的点位
+    //               positions[indexToRemove] = updatedPosition
+    //               this.value = JSON.stringify(positions, null, 4)
+    //             }
+    //           }
+    //         } else {
+    //           // 如果点不在 positions 中，可能是从右侧列表移动回来
+    //           const rightIndex = this.rightPoints.findIndex(
+    //             (item) => item.pointName === labelText
+    //           )
+    //
+    //           if (rightIndex !== -1 && !isInRightBox && !isInCabinet) {
+    //             // 从右侧拖拽到物资柜外
+    //             const movedPoint = this.rightPoints.splice(rightIndex, 1)[0]
+    //             if (
+    //               !this.leftPoints.find(
+    //                 (point) => point.pointName === movedPoint.pointName
+    //               )
+    //             ) {
+    //               this.leftPoints.push(movedPoint)
+    //             }
+    //           }
+    //         }
+    //
+    //         // 清理 undefined 数据
+    //         this.rightPoints = this.rightPoints.filter(Boolean)
+    //
+    //         // 打印调试信息
+    //         console.log('Updated positions:', positions)
+    //         console.log('Right Points:', this.rightPoints)
+    //       })
+    //
+    //       this.layer.draw()
+    //     }
+    //   })
+    // },
     // 左侧的列表
     addPointsToLeftPointsBox(filterData) {
       // 获取接口返回的 leftPoints 数据
@@ -1075,5 +1355,7 @@ export default {
   flex: 1;
   display: flex;
   flex-direction: column;
+  justify-content: flex-end;
+  margin-bottom: 20px;
 }
 </style>