锁定站设置绑定与解绑隔离点问题修复

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

@@ -104,6 +104,7 @@ export default {
         console.log(response, '作业区域信息')
         this.form = response.data
       })
+      // 获取map-json
       getLotoMapInfo(lotoId, sopId, ticketId).then(response => {
         console.log(response, '作业区域预览接口调用')
         this.form.map = response.data
@@ -206,6 +207,7 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
+
         // 校验 this.value 是否为有效的 JSON
         if (this.isJson(this.value)) {
           const mapData = typeof this.value === 'string' ? this.value : JSON.stringify(this.value)
@@ -225,11 +227,13 @@ export default {
           const data = {
             bindingPointIds: this.bindingPointIds,
             lotoId: this.$route.query.lotoId,
-            unbindPointIds: this.rightPoints.map(item => {return item.pointId})
+            unbindPointIds: this.unbindPointIds
           }
           console.log(data,'解绑与绑定数据参数')
           unbundlePointPage(data).then((res)=>{
             console.log(res,'解绑接口返回值')
+            this.bindingPointIds=[]
+            this.unbindPointIds=[]
           });
         } else {
           this.$message({
@@ -449,7 +453,24 @@ export default {
             // 将组添加到图层
             this.layer.add(group)
             this.groups[point.pointName] = group // 用文字作为键存储
-
+            group.on('dragmove', () => {
+              // 获取当前组的位置
+              const groupPos = group.getAbsolutePosition();
+
+              // 计算拖拽的限制范围
+              const minX = leftBoxBounds.x; // 左侧列表的最左侧
+              const maxX = cabinetBounds.x + cabinetBounds.width - pointWidth; // 物资柜的最右侧
+              const minY = Math.min(leftBoxBounds.y, cabinetBounds.y); // 区域的最上方
+              const maxY = Math.max(leftBoxBounds.y + leftBoxBounds.height, cabinetBounds.y + cabinetBounds.height) - pointHeight; // 区域的最下方
+
+              // 限制组的位置
+              const boundedX = Math.max(minX, Math.min(groupPos.x, maxX));
+              const boundedY = Math.max(minY, Math.min(groupPos.y, maxY));
+
+              // 更新组的位置
+              group.x(boundedX);
+              group.y(boundedY);
+            });
             // 监听组的拖拽结束事件
             group.on('dragend', () => {
               const gridX = 50 // 网格单元格宽度
@@ -500,12 +521,15 @@ export default {
                 } catch (e) {
                   console.error('Failed to parse value:', e);
                 }
+
+
                 this.value = JSON.stringify(
                   valueArray.filter((item) => item.pointId !== point.pointId),
                   null,
                   4
                 );
 
+
                 // 添加到右侧盒子数据
                 this.leftPoints.push(pointData);
               } else if (
@@ -619,6 +643,29 @@ export default {
             // 将组添加到图层
             this.layer.add(group)
             this.groups[point.pointName] = group // 用文字作为键存储
+            group.on('dragmove', () => {
+              // 获取当前组的位置
+              const groupPos = group.getAbsolutePosition();
+
+              // 计算拖拽的限制范围
+              const minX = cabinetBounds.x; // 从物资柜最左侧开始
+              const maxX = rightBoxBounds.x + rightBoxBounds.width - pointWidth; // 到右侧列表最右侧结束
+
+              const minY = Math.min(rightBoxBounds.y, cabinetBounds.y); // 区域的最上方
+              const maxY = Math.max(
+                rightBoxBounds.y + rightBoxBounds.height,
+                cabinetBounds.y + cabinetBounds.height
+              ) - pointHeight; // 区域的最下方
+
+              // 限制组的位置
+              const boundedX = Math.max(minX, Math.min(groupPos.x, maxX));
+              const boundedY = Math.max(minY, Math.min(groupPos.y, maxY));
+
+              // 更新组的位置
+              group.x(boundedX);
+              group.y(boundedY);
+            });
+
 
             // 监听组的拖拽结束事件
             group.on('dragend', () => {
@@ -633,6 +680,7 @@ export default {
               group.x(snappedX)
               group.y(snappedY)
               console.log(group, '组移动')
+
               // 计算网格坐标
               const row = Math.floor(snappedY / gridY)
               const col = Math.floor(snappedX / gridX)
@@ -675,7 +723,6 @@ export default {
                   null,
                   4
                 );
-
                 // 添加到右侧盒子数据
                 this.rightPoints.push(pointData);
 
@@ -695,7 +742,8 @@ export default {
                 }
                 valueArray.push(pointData);
                 this.value = JSON.stringify(valueArray, null, 4);
-
+                // 把从右侧放进物资柜的数据更新到物资柜中
+                this.bindingPointIds.push(point.pointId);
                 // 从右侧盒子移除点
                 this.rightPoints = this.rightPoints.filter(
                   (item) => item.pointId !== point.pointId
@@ -720,6 +768,8 @@ export default {
         })
       }
     },
+
+
     renderGrid(imageSrc) {
       this.selectedStates = [] // 用数组来存储选中状态
       this.rects = []
@@ -819,7 +869,7 @@ export default {
             height: 800,
           }
           // 定义是否已经在物资柜中的状态
-    
+
           group.on('dragend', () => {
             // 获取拖拽的内容对应的点名称
             const labelText = group.findOne('Text').text()
@@ -858,21 +908,52 @@ export default {
               if (movedPoint) {
                 // 根据目标区域更新对应数组
                 if (isInRightBox) {
+                  // 只有在右侧列表中没有该点时才添加
                   if (!this.rightPoints.find(point => point.pointName === movedPoint.pointName)) {
                     this.rightPoints.push(movedPoint)
+                    this.unbindPointIds.push(movedPoint.pointId);//给接口传递需要解绑的数据Id
+                    let valueArray = [];
+                    const orgData=JSON.parse(this.value)
+                    const data=orgData.filter(item => item.pointName !== movedPoint.pointName);//为了筛选出被移除物资柜的数据并删除对应json
+                    valueArray.push(...data);
+                    this.value = JSON.stringify(valueArray, null, 4);
                   }
                 } else if (isInLeftBox) {
+                  // 只有在左侧列表中没有该点时才添加
                   if (!this.leftPoints.find(point => point.pointName === movedPoint.pointName)) {
                     this.leftPoints.push(movedPoint)
+                    let valueArray = [];
+                    const orgData=JSON.parse(this.value)
+                    const data=orgData.filter(item => item.pointName !== movedPoint.pointName);//为了筛选出被移除物资柜的数据并删除对应json
+                    valueArray.push(...data);
+                    this.value = JSON.stringify(valueArray, null, 4);
                   }
                 } else if (isInCabinet) {
-                  // 如果仍然在物资柜中，什么都不做，避免更新 this.value
-                  console.log('点仍在物资柜内，保持原状态')
-                  return
-                } else {
-                  // 如果不在任何区域内，可以选择将其移除或保留
-                  console.warn('Point moved to an undefined area:', movedPoint)
+                  // 如果在物资柜内，更新点位位置
+                  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);
                 }
+
+                // 更新 this.value 以反映最新的 positions 数组
+                // this.value = JSON.stringify(positions, null, 4)
               }
             } else {
               // 如果点不在 positions 中，可能是从右侧或左侧列表移动回来
@@ -883,21 +964,17 @@ export default {
                 // 从右侧列表移回物资柜
                 const movedPoint = this.rightPoints.splice(rightIndex, 1)[0]
                 positions.push(movedPoint)
+                // 更新 this.value
+                this.value = JSON.stringify(positions, null, 4)
               } else if (leftIndex !== -1) {
                 // 从左侧列表移回物资柜
                 const movedPoint = this.leftPoints.splice(leftIndex, 1)[0]
                 positions.push(movedPoint)
-              } else {
-                // console.warn('Drag operation failed: Point not found in any array.')
+                // 更新 this.value
+                this.value = JSON.stringify(positions, null, 4)
               }
             }
 
-            // 更新 this.value，只有当数据发生变化时才更新
-            console.log(isInCabinet,'isInCabinet位置')
-            if (!isInCabinet) {
-              this.value = JSON.stringify(positions, null, 4)
-            }
-
             // 清理 undefined 数据
             this.rightPoints = this.rightPoints.filter(Boolean)
             this.leftPoints = this.leftPoints.filter(Boolean)
@@ -908,10 +985,12 @@ export default {
             console.log('Left Points:', this.leftPoints)
           })
 
+
           this.layer.draw()
         }
       })
-    },
+    }
+
 
   }
 }