修复锁定站和开关布局绑定和解绑操作

src/views/mes/dv/segregationpoint/index.vue

@@ -48,6 +48,19 @@
           />
         </el-select>
       </el-form-item>
+      <el-form-item label="布局地图" prop="switchMapId">
+        <el-select
+          v-model="queryParams.switchMapId"
+          placeholder="请选择锁定站"
+        >
+          <el-option
+            v-for="dict in switchMapOptions"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
       <!-- <el-form-item label="状态" prop="calendarType">
         <el-select v-model="queryParams.calendarType" placeholder="状态">
           <el-option>正常</el-option>

src/views/mes/dv/switchmanagement/MapData.vue

@@ -159,7 +159,7 @@ export default {
           this.height = response.data.height
           this.x = response.data.x
           this.y = response.data.y
-          this.pointList = response.data.pointList
+          this.pointList = response.data.pointList|| []
 
           const data = {
             current: 1,
@@ -169,7 +169,7 @@ export default {
           console.log('调用getIsIsolationPointPage之前')
           getIsIsolationPointPage(data).then((res) => {
             const allPoints = res.data.records || [];  // 所有可绑定点
-            const placedPointIds = new Set(this.pointList.map(p => p.entityId)); // 已经有位置的点id
+            const placedPointIds = new Set((this.pointList || []).map(p => String(p.entityId)));
 
             // 过滤：只留下还没有指定位置的点
             const unplacedPoints = allPoints.filter(item => !placedPointIds.has(item.pointId));
@@ -260,8 +260,8 @@ export default {
             status: false,
             pointPicture: item.pointPicture,
             mapImg: null,
-            mapId: this.mapId,
-            mapType: this.mapType
+            mapId: this.form.mapId,
+            mapType: this.form.mapType
           }
         })
         this.orgRightPoints = res.data.records.map((item) => {
@@ -280,8 +280,8 @@ export default {
             status: false,
             pointPicture: item.pointPicture,
             mapImg: null,
-            mapId: this.mapId,
-            mapType: this.mapType
+            mapId: this.form.mapId,
+            mapType: this.form.mapType
           }
         })
       })
@@ -297,8 +297,13 @@ export default {
 
     close() {
       // this.$router.push('/mes/dv/lotoStation')
-      this.getInfo()
-      // this.initKonva()
+
+      setTimeout(()=>{
+        this.getInfo()
+        this.getIsIsolationPointPage()
+        this.initKonva()
+        this.addPointsToRightPointsBox()
+      },1000)
     },
     save() {
       this.$confirm('请确认是否保存修改内容', '提示', {
@@ -327,14 +332,17 @@ export default {
               })
             })
 
+
             let dataMap = {
-              bindingPoints: this.leftPoints.filter(p => this.bindingPointIds.includes(p.pointId)),
+              bindingPoints: this.bindingPoints,
               movePoints: this.movePoints,
-              unbindingPoints: this.rightPoints
+              unbindingPoints: this.unbindingPoints
             }
             console.log(dataMap, '先拿到数据看看再说')
             updateMapPointList(dataMap).then((res) => {
               console.log(res, '拿到的新绑定数据')
+              this.bindingPoints = []
+              this.unbindingPoints=[]
             })
             const data = {
               bindingPointIds: this.bindingPointIds,
@@ -347,7 +355,7 @@ export default {
               this.bindingPointIds = []
               this.unbindPointIds = []
             })
-            // this.close()
+            this.close()
           } else {
             this.$message({
               type: 'error',
@@ -543,30 +551,37 @@ export default {
           this.layer.add(group)
 
           group.on('dragend', () => {
+            const groupPos = group.getAbsolutePosition();
+
+            const rightBoxBounds = { x: 1100, y: 15, width: 200, height: 800 };
+            const cabinetBounds = { x: 0, y: 0, width: 1200, height: 860 };
 
-            const groupPos = group.getAbsolutePosition()
-            console.log(groupPos,'我在那里')
             const isInRightBox =
               groupPos.x >= rightBoxBounds.x &&
               groupPos.x <= rightBoxBounds.x + rightBoxBounds.width &&
               groupPos.y >= rightBoxBounds.y &&
-              groupPos.y <= rightBoxBounds.y + rightBoxBounds.height
+              groupPos.y <= rightBoxBounds.y + rightBoxBounds.height;
 
-            let pointData = positions.find(p => p.entityName === labelText)
-            let fromRight = false
+            const isInCabinet =
+              groupPos.x >= cabinetBounds.x &&
+              groupPos.x <= cabinetBounds.x + cabinetBounds.width &&
+              groupPos.y >= cabinetBounds.y &&
+              groupPos.y <= cabinetBounds.y + cabinetBounds.height;
 
-            // 如果拖动的点是从右侧来的
+            // 判断点的来源
+            let pointData = positions.find(p => p.entityName === labelText);
+            let fromRight = false;
             if (!pointData) {
-              const rightIndex = this.rightPoints.findIndex(p => p.entityName === labelText)
+              const rightIndex = this.rightPoints.findIndex(p => p.entityName === labelText);
               if (rightIndex !== -1) {
-                pointData = this.rightPoints.splice(rightIndex, 1)[0]
-                fromRight = true
+                pointData = this.rightPoints.splice(rightIndex, 1)[0];
+                fromRight = true;
               }
             }
-            if (!pointData) return
+            if (!pointData) return;
 
-            const newRow = Math.max(0, Math.min(Math.round(groupPos.x / 50), Math.floor(1200 / 50) - 1))
-            const newCol = Math.max(0, Math.min(Math.round(groupPos.y / 50), Math.floor(860 / 50) - 1))
+            const newRow = Math.max(0, Math.min(Math.round(groupPos.x / 50), Math.floor(1200 / 50) - 1));
+            const newCol = Math.max(0, Math.min(Math.round(groupPos.y / 50), Math.floor(860 / 50) - 1));
 
             const updatedPoint = {
               ...pointData,
@@ -574,62 +589,70 @@ export default {
               col: newCol,
               x: newRow,
               y: newCol,
-              mapId: this.form.mapId,
-              mapType: this.form.mapType
-            }
+              mapId: this.mapId,
+              mapType: this.mapType
+            };
+
+            // ====================== 数据处理 ======================
+            if (fromRight && isInCabinet) {
+              // 右侧盒子 → 左侧画布
+              this.rightPoints = this.rightPoints.filter(p => p.entityId !== updatedPoint.entityId);
+
+              // 加入 bindingPoints
+              if (!this.bindingPoints.some(p => p.entityId === updatedPoint.entityId)) {
+                this.bindingPoints.push(updatedPoint);
+              }
 
-            if (isInRightBox) {
-              console.log(fromRight,'我走这里')
-              // ✅ 无论是0,0点还是正常点，只要拖到右侧就是解绑
-              if (!this.rightPoints.some(p => p.entityName == updatedPoint.entityName)) {
-                this.rightPoints.push(updatedPoint)
+              // 加入 movePoints
+              const existIdx = this.movePoints.findIndex(p => p.pointId === updatedPoint.pointId);
+              if (existIdx !== -1) {
+                this.movePoints.splice(existIdx, 1, updatedPoint);
+              } else {
+                this.movePoints.push(updatedPoint);
               }
-              if (!this.unbindPointIds.includes(updatedPoint.entityId)) {
-                this.unbindPointIds.push(updatedPoint.entityId)
+
+              // 加入左侧画布
+              if (!this.leftPoints.some(p => p.entityName === updatedPoint.entityName)) {
+                this.leftPoints.push(updatedPoint);
+              }
+            } else if (!fromRight && isInRightBox) {
+              // 左侧画布 → 右侧盒子
+              this.leftPoints = this.leftPoints.filter(p => p.entityId !== updatedPoint.entityId);
+
+              // 加入 unbindingPoints
+              if (!this.unbindingPoints.some(p => p.entityId === updatedPoint.entityId)) {
+                this.unbindingPoints.push(updatedPoint);
               }
-              // 解绑了，就要从绑定中去掉
-              this.bindingPointIds = this.bindingPointIds.filter(id => id != updatedPoint.entityId)
-
-              const posIndex = positions.findIndex(p => p.entityName == updatedPoint.entityName)
-              if (posIndex !== -1) positions.splice(posIndex, 1)
-
-            } else {
-              if (fromRight) {
-                console.log(fromRight,'我走这里')
-                // ✅ 只有从右侧拖回画布，才算新增绑定
-                positions.push(updatedPoint)
-                if (!this.leftPoints.some(p => p.entityName === updatedPoint.entityName)) {
-                  this.leftPoints.push(updatedPoint)
-                }
-                if (!this.bindingPointIds.includes(updatedPoint.entityId)) {
-                  this.bindingPointIds.push(updatedPoint.entityId)
-                }
-                this.unbindPointIds = this.unbindPointIds.filter(id => id != updatedPoint.entityId)
+              if (!this.unbindPointIds.includes(updatedPoint.pointId)) this.unbindPointIds.push(updatedPoint.pointId);
+              // 加入右侧盒子
+              if (!this.rightPoints.some(p => p.entityName === updatedPoint.entityName)) {
+                this.rightPoints.push(updatedPoint);
+              }
+            } else if (isInCabinet) {
+              // 左侧画布内部移动
+              const existIdx = this.movePoints.findIndex(p => p.pointId === updatedPoint.pointId);
+              if (existIdx !== -1) {
+                this.movePoints.splice(existIdx, 1, updatedPoint);
               } else {
-                // ✅ 普通拖动（0,0点 或 已在画布上的点），只更新位置
-                const posIndex = positions.findIndex(p => p.entityName == updatedPoint.entityName)
-                if (posIndex != -1) positions[posIndex] = updatedPoint
+                this.movePoints.push(updatedPoint);
               }
             }
+            // 右侧盒子内部移动：不处理数据
 
-            // ✅ 无论如何都要记录 movePoints（方便保存）
-            const existIdx = this.movePoints.findIndex(p => p.pointId == updatedPoint.pointId)
-            if (existIdx !== -1) {
-              this.movePoints.splice(existIdx, 1, updatedPoint)
-            } else {
-              this.movePoints.push(updatedPoint)
+            // 更新 positions 数组
+            const posIndex = positions.findIndex(p => p.entityName === updatedPoint.entityName);
+            if (posIndex !== -1) {
+              positions[posIndex] = updatedPoint;
             }
 
-            // 同步 JSON
-            this.updatePointInJson(updatedPoint, groupPos)
+            this.updatePointInJson(updatedPoint, groupPos);
 
-            this.rightPoints = this.rightPoints.filter(Boolean)
-            this.leftPoints = this.leftPoints.filter(Boolean)
+            this.rightPoints = this.rightPoints.filter(Boolean);
+            this.leftPoints = this.leftPoints.filter(Boolean);
+
+            this.layer.draw();
+          });
 
-            this.layer.draw()
-            console.log('Updated positions:', positions)
-            console.log('MovePoints:', this.movePoints)
-          })
 
         }
       })
@@ -733,13 +756,13 @@ export default {
 
         group.on('dragend', () => {
           const groupPos = group.getAbsolutePosition();
+          const rightBoxBounds = { x: 1100, y: 15, width: 200, height: 800 };
           const isInRightBox =
             groupPos.x >= rightBoxBounds.x &&
             groupPos.x <= rightBoxBounds.x + rightBoxBounds.width &&
             groupPos.y >= rightBoxBounds.y &&
             groupPos.y <= rightBoxBounds.y + rightBoxBounds.height;
 
-          // 更新行列坐标
           const newRow = Math.max(0, Math.round(groupPos.x / 50));
           const newCol = Math.max(0, Math.round(groupPos.y / 50));
 
@@ -749,64 +772,67 @@ export default {
             col: newCol,
             x: newRow,
             y: newCol,
-            mapId: this.form.mapId,
+            mapId: this.mapId,
             mapType: this.mapType,
             entityId: point.pointId,
             entityName: point.pointName
           };
 
-          if (isInRightBox) {
-            // 👉 拖进右侧：解绑
-            if (!this.rightPoints.some(p => p.pointId === updatedPoint.pointId)) {
-              this.rightPoints.push(updatedPoint);
-            }
-            if (!this.unbindPointIds.includes(updatedPoint.pointId)) {
-              this.unbindPointIds.push(updatedPoint.pointId);
-            }
-            this.bindingPointIds = this.bindingPointIds.filter(id => id !== updatedPoint.pointId);
-            this.leftPoints = this.leftPoints.filter(p => p.pointId !== updatedPoint.pointId);
-          } else {
-            // 👉 拖在左侧画布
+          const fromRight = this.rightPoints.some(p => p.pointId === updatedPoint.pointId);
+          const fromLeft = this.leftPoints.some(p => p.pointId === updatedPoint.pointId);
+
+          // ===== 数据处理 =====
+          if (fromRight && !isInRightBox) {
+            // 右 → 左画布
+            this.rightPoints = this.rightPoints.filter(p => p.pointId !== updatedPoint.pointId);
+
             if (!this.leftPoints.some(p => p.pointId === updatedPoint.pointId)) {
               this.leftPoints.push(updatedPoint);
             }
-
-            // 只有从右侧拖回左侧时，才算 binding
-            if (this.rightPoints.some(p => p.pointId === updatedPoint.pointId)) {
-              if (!this.bindingPointIds.includes(updatedPoint.pointId)) {
-                this.bindingPointIds.push(updatedPoint.pointId);
-              }
-              this.unbindPointIds = this.unbindPointIds.filter(id => id !== updatedPoint.pointId);
-              this.rightPoints = this.rightPoints.filter(p => p.pointId !== updatedPoint.pointId);
+            if (!this.bindingPoints.some(p => p.pointId === updatedPoint.pointId)) {
+              this.bindingPoints.push(updatedPoint);
             }
 
-          }
+            const existIdx = this.movePoints.findIndex(p => p.pointId === updatedPoint.pointId);
+            if (existIdx !== -1) this.movePoints.splice(existIdx, 1, updatedPoint);
+            else this.movePoints.push(updatedPoint);
 
-          // ✅ 始终更新 movePoints（包括 0,0 拖动）
-          const existIdx = this.movePoints.findIndex(p => p.pointId === updatedPoint.pointId);
-          if (existIdx !== -1) {
-            this.movePoints.splice(existIdx, 1, updatedPoint);
-          } else {
-            this.movePoints.push(updatedPoint);
+          } else if (fromLeft && isInRightBox) {
+            // 左 → 右盒子
+            this.leftPoints = this.leftPoints.filter(p => p.pointId !== updatedPoint.pointId);
+
+            if (!this.rightPoints.some(p => p.pointId === updatedPoint.pointId)) {
+              this.rightPoints.push(updatedPoint);
+            }
+            if (!this.unbindingPoints.some(p => p.pointId === updatedPoint.pointId)) {
+              this.unbindingPoints.push(updatedPoint);
+            }
+            if (!this.unbindPointIds.some(p => p.pointId === updatedPoint.pointId)) {
+              this.unbindPointIds.push(updatedPoint.entityId);
+            }
+          } else if (fromLeft && !isInRightBox) {
+            // 左内部移动
+            const existIdx = this.movePoints.findIndex(p => p.pointId === updatedPoint.pointId);
+            if (existIdx !== -1) this.movePoints.splice(existIdx, 1, updatedPoint);
+            else this.movePoints.push(updatedPoint);
           }
+          // 右盒子内部移动：不操作
 
           // 更新 JSON
           let positions = JSON.parse(this.value || '[]');
           const posIndex = positions.findIndex(p => p.pointId === updatedPoint.pointId);
-          if (posIndex !== -1) {
-            positions[posIndex] = updatedPoint;
-          } else {
-            positions.push(updatedPoint);
-          }
+          if (posIndex !== -1) positions[posIndex] = updatedPoint;
+          else positions.push(updatedPoint);
           this.value = JSON.stringify(positions, null, 4);
 
           this.layer.draw();
 
-          console.log('Updated movePoints:', this.movePoints);
-          console.log('bindingPointIds:', this.bindingPointIds);
-          console.log('unbindPointIds:', this.unbindPointIds);
+          console.log('bindingPoints:', this.bindingPoints);
+          console.log('movePoints:', this.movePoints);
+          console.log('unbindingPoints:', this.unbindingPoints);
         });
 
+
         this.layer.draw();
       };
     },
@@ -853,8 +879,8 @@ export default {
         pointIcon: point.pointIcon,
         pointPicture: point.pointPicture,
         mapImg: point.mapImg,
-        mapId: this.form.mapId,
-        mapType: this.form.mapType,
+        mapId: this.mapId,
+        mapType: this.mapType,
         mapName: '你好5'
       }
 
@@ -880,260 +906,169 @@ export default {
     },
     // 解绑隔离点函数
     addPointsToRightPointsBox(rightPointsBox) {
-      if (this.rightPoints && this.rightPoints.length > 0) {
-        const boxWidth = rightPointsBox.width()
-        const boxHeight = rightPointsBox.height()
-        const boxX = rightPointsBox.x()
-        const boxY = rightPointsBox.y()
-        const padding = 10 // 每个隔离点之间的间距
-        const pointWidth = 50 // 每个隔离点的宽度
-        const pointHeight = 70 // 每个隔离点的高度（包括图片和文字）
-
-        let currentX = boxX + padding
-        let currentY = boxY + padding
-        const rightBoxBounds = {
-          x: 1100,
-          y: 15,
-          width: 200,
-          height: 800
-        }
-        const cabinetBounds = {
-          x: 330,
-          y: 10,
-          width: 500,
-          height: 790
-        }
+      if (!this.rightPoints || this.rightPoints.length === 0) return;
 
-        this.rightPoints.forEach((point) => {
-          // 创建一个组来组合红色边框、图片和文字
-          const group = new Konva.Group({
-            x: currentX,
-            y: currentY + 14,
-            draggable: true // 启用拖拽功能
-          })
+      const boxWidth = rightPointsBox.width();
+      const boxHeight = rightPointsBox.height();
+      const boxX = rightPointsBox.x();
+      const boxY = rightPointsBox.y();
+      const padding = 10;
+      const pointWidth = 50;
+      const pointHeight = 70;
 
-          // 创建红色边框
-          const borderRect = new Konva.Rect({
-            x: 0,
-            y: 0,
-            width: pointWidth,
-            height: pointHeight,
-            cornerRadius: 5,
-            stroke: 'red',
-            strokeWidth: 2,
-            fill: 'white'
-          })
-          group.add(borderRect)
-
-          // 创建图片
-          const image = new Image()
-          image.src = point.pointIcon
-          image.onload = () => {
-            const knovaImage = new Konva.Image({
-              x: 1, // 图片在组内的位置
-              y: 5, // 图片在组内的位置
-              image: image,
-              width: 50, // 图片宽度
-              height: 50 // 图片高度
-            })
-            group.add(knovaImage)
-
-            // 创建文字
-            const pointText = new Konva.Text({
-              x: 12, // 文字在组内的位置
-              y: 53, // 文字在组内的位置
-              text: point.pointName,
-              fontSize: 12,
-              fill: 'red'
-            })
-            group.add(pointText)
-
-            // 将组添加到图层
-            this.layer.add(group)
-            this.groups[point.pointName] = group // 用文字作为键存储
-
-            // 监听组的拖拽移动事件
-            group.on('dragmove', () => {
-              // 获取当前组的位置
-              const groupPos = group.getAbsolutePosition()
-              // 更新组的位置
-              group.x(groupPos.x)
-              group.y(groupPos.y)
-            })
+      let currentX = boxX + padding;
+      let currentY = boxY + padding;
 
-            // 监听组的拖拽结束事件
-            group.on('dragend', () => {
-              const gridX = 50 // 网格单元格宽度
-              const gridY = 50 // 网格单元格高度
-
-              // 计算最近的网格点位置
-              const snappedX = Math.round(group.x() / gridX) * gridX
-              const snappedY = Math.round(group.y() / gridY) * gridY
-
-              // 设置组到最近的网格点位置
-              group.x(snappedX)
-              group.y(snappedY)
-
-              // 计算网格坐标
-              const row = Math.floor(snappedY / gridY)
-              const col = Math.floor(snappedX / gridX)
-
-              // 更新点位数据
-              const updatedPointData = {
-                row: row,
-                col: col,
-                pointId: point.pointId,
-                entityId: point.entityId,
-                entityName: point.entityName,
-                pointName: point.pointName,
-                remark: point.remark,
-                prePointId: point.prePointId,
-                pointType: point.pointType,
-                pointTypeName: point.pointTypeName,
-                powerType: point.powerType,
-                powerTypeName: point.powerTypeName,
-                state: point.status,
-                pointIcon: point.pointIcon,
-                pointPicture: point.pointPicture,
-                mapImg: null,
-                mapId: point.mapId,
-                mapName: '你好6',
-                mapType: point.mapType
-              }
+      const rightBoxBounds = { x: 1100, y: 15, width: 200, height: 800 };
+      const cabinetBounds = { x: 330, y: 10, width: 500, height: 790 };
 
-              // 解析 this.value 为数组
-              let valueArray = []
-              try {
-                valueArray = JSON.parse(this.value)
-              } catch (e) {
-                console.error('Failed to parse value:', e)
-              }
+      this.rightPoints.forEach((point) => {
+        const initialLocation = 'right';
 
-              // 判断拖拽目标区域
-              if (
-                snappedX >= rightBoxBounds.x &&
-                snappedX <= rightBoxBounds.x + rightBoxBounds.width &&
-                snappedY >= rightBoxBounds.y &&
-                snappedY <= rightBoxBounds.y + rightBoxBounds.height
-              ) {
-                // 进入右侧盒子区域
-                console.log('进入右侧盒子区域')
-// 更新 point 对象的 col 和 row 值
-                point.row = col
-                point.col = row
-                point.x = col
-                point.y = row
-                // 如果之前已在右侧区域，需要移除值，并更新绑定点ID
-                const index = valueArray.findIndex(
-                  (item) => item.pointId === point.pointId
-                )
-                if (index !== -1) {
-                  valueArray.splice(index, 1) // 从 valueArray 中删除该点
-                }
-                this.value = JSON.stringify(valueArray, null, 4)
-
-                // 删除绑定点
-                this.bindingPointIds = this.bindingPointIds.filter(
-                  (id) => id !== point.pointId
-                )
-
-                // 将该点加入解绑点ID
-                this.unbindPointIds.push(point.pointId)
-
-                // 将点重新添加到 rightPoints
-                this.rightPoints.push(point)
-              }
-                //   这里的if判断是为了 移动在物资柜内部才做的操作 现在我只要离开右侧 就做这个操作
-                //    if (
-                //   snappedX >= cabinetBounds.x &&
-                //   snappedX <= cabinetBounds.x + cabinetBounds.width &&
-                //   snappedY >= cabinetBounds.y &&
-                //   snappedY <= cabinetBounds.y + cabinetBounds.height
-              // )
-              else if (snappedX < rightBoxBounds.x ||
-                snappedX > rightBoxBounds.x + rightBoxBounds.width ||
-                snappedY < rightBoxBounds.y ||
-                snappedY > rightBoxBounds.y + rightBoxBounds.height
-              ) {
-
-                // 进入物资柜区域
-                console.log('进入物资柜区域')
-                // 更新 point 对象的 col 和 row 值
-                point.row = col
-                point.col = row
-                point.x = col
-                point.y = row
-                // 检查点是否已经存在于 valueArray 中
-                const index = valueArray.findIndex(
-                  (item) => item.pointId === point.pointId
-                )
-                if (index === -1) {
-                  // 如果点位不存在，则新增
-                  valueArray.push(updatedPointData)
-                  this.value = JSON.stringify(valueArray, null, 4)
-                }
-
-                // 添加到绑定点ID数组
-                this.bindingPointIds.push(point.pointId)
-
-                // 从右侧盒子移除点
-                this.rightPoints = this.rightPoints.filter(
-                  (item) => item.pointId !== point.pointId
-                )
-                this.leftPoints.push(point)
-                console.log(point, '进入左侧区域进行隔离点绑定操作！')
-              } else {
-                // 未进入任何目标区域，保持原状态
-                console.log('未进入目标区域，保持原状态')
-                // 更新 point 对象的 col 和 row 值
-                point.row = col
-                point.col = row
-                point.x = col
-                point.y = row
-                // 如果点不在目标区域，从 valueArray 中移除
-                // this.value = JSON.stringify(
-                //   valueArray.filter((item) => item.pointId !== point.pointId),
-                //   null,
-                //   4
-                // );
-                // 检查点是否已经存在于 valueArray 中
-                const index = valueArray.findIndex(
-                  (item) => item.pointId === point.pointId
-                )
-                if (index === -1) {
-                  // 如果点位不存在，则新增
-                  valueArray.push(updatedPointData)
-                  this.value = JSON.stringify(valueArray, null, 4)
-                }
-
-                // 添加到绑定点ID数组
-                this.bindingPointIds.push(point.pointId)
-
-                // 从右侧盒子移除点
-                this.rightPoints = this.rightPoints.filter(
-                  (item) => item.pointId !== point.pointId
-                )
-                // 如果点不在目标区域，重新添加到 rightPoints
-                this.rightPoints.push(point)
-              }
+        const pointData = {
+          ...point,
+          entityId: point.entityId || point.pointId,
+          entityName: point.entityName || point.pointName,
+          mapId: point.mapId || this.mapId,
+          mapType: point.mapType || this.mapType
+        };
 
-              // 重新绘制图层
-              this.layer.draw()
-            })
+        const group = new Konva.Group({
+          x: currentX,
+          y: currentY + 14,
+          draggable: true
+        });
 
-            // 重新绘制图层
-            this.layer.draw()
-          }
+        // 红色边框
+        const borderRect = new Konva.Rect({
+          x: 0,
+          y: 0,
+          width: pointWidth,
+          height: pointHeight,
+          cornerRadius: 5,
+          stroke: 'red',
+          strokeWidth: 2,
+          fill: 'white'
+        });
+        group.add(borderRect);
 
-          // 更新下一个隔离点的位置
-          currentX += pointWidth + padding
-          if (currentX + pointWidth > boxX + boxWidth) {
-            currentX = boxX + padding
-            currentY += pointHeight + padding
-          }
-        })
-      }
+        // 图片
+        const image = new Image();
+        image.src = point.pointIcon;
+        image.onload = () => {
+          const knovaImage = new Konva.Image({
+            x: 1,
+            y: 5,
+            image: image,
+            width: 50,
+            height: 50
+          });
+          group.add(knovaImage);
+
+          // 文字
+          const pointText = new Konva.Text({
+            x: 12,
+            y: 53,
+            text: point.pointName,
+            fontSize: 12,
+            fill: 'red'
+          });
+          group.add(pointText);
+
+          this.layer.add(group);
+          this.groups[point.pointName] = group;
+
+          // 拖拽移动
+          group.on('dragmove', () => {
+            const pos = group.getAbsolutePosition();
+            group.x(pos.x);
+            group.y(pos.y);
+          });
+
+          // 拖拽结束
+          group.on('dragend', () => {
+            const gridX = 50;
+            const gridY = 50;
+
+            const snappedX = Math.round(group.x() / gridX) * gridX;
+            const snappedY = Math.round(group.y() / gridY) * gridY;
+            group.x(snappedX);
+            group.y(snappedY);
+
+            const row = Math.floor(snappedY / gridY);
+            const col = Math.floor(snappedX / gridX);
+
+            const updatedPoint = { ...pointData, row, col, x: col, y: row };
+
+            const inRightBox =
+              snappedX >= rightBoxBounds.x &&
+              snappedX <= rightBoxBounds.x + rightBoxBounds.width &&
+              snappedY >= rightBoxBounds.y &&
+              snappedY <= rightBoxBounds.y + rightBoxBounds.height;
+
+            const inCabinet =
+              snappedX >= cabinetBounds.x &&
+              snappedX <= cabinetBounds.x + cabinetBounds.width &&
+              snappedY >= cabinetBounds.y &&
+              snappedY <= cabinetBounds.y + cabinetBounds.height;
+
+            // ===== 数据处理 =====
+            if (initialLocation === 'right' && inCabinet) {
+              // 右 → 左
+              this.rightPoints = this.rightPoints.filter(p => p.pointId !== point.pointId);
+              if (!this.leftPoints.some(p => p.pointId === updatedPoint.pointId)) this.leftPoints.push(updatedPoint);
+              if (!this.bindingPoints.some(p => p.pointId === updatedPoint.pointId)) this.bindingPoints.push(updatedPoint);
+              if (!this.bindingPointIds) this.bindingPointIds = [];
+              if (!this.bindingPointIds.includes(updatedPoint.pointId)) this.bindingPointIds.push(updatedPoint.pointId);
+
+              const existIdx = this.movePoints.findIndex(p => p.pointId === updatedPoint.pointId);
+              if (existIdx !== -1) this.movePoints.splice(existIdx, 1, updatedPoint);
+              else this.movePoints.push(updatedPoint);
+
+            } else if (initialLocation === 'left' && inRightBox) {
+              // 左 → 右盒子
+              this.leftPoints = this.leftPoints.filter(p => p.pointId !== point.pointId);
+              if (!this.rightPoints.some(p => p.pointId === updatedPoint.pointId)) this.rightPoints.push(updatedPoint);
+              if (!this.unbindingPoints.some(p => p.pointId === updatedPoint.pointId)) this.unbindingPoints.push(updatedPoint);
+              if (!this.unbindPointIds) this.unbindPointIds = [];
+              if (!this.unbindPointIds.includes(updatedPoint.pointId)) this.unbindPointIds.push(updatedPoint.pointId);
+
+            } else if (initialLocation === 'left' && inCabinet) {
+              // 左内部移动
+              const existIdx = this.movePoints.findIndex(p => p.pointId === updatedPoint.pointId);
+              if (existIdx !== -1) this.movePoints.splice(existIdx, 1, updatedPoint);
+              else this.movePoints.push(updatedPoint);
+            }
+
+            // 更新 JSON
+            let valueArray = [];
+            try { valueArray = JSON.parse(this.value || '[]'); } catch (e) { valueArray = []; }
+            const valIdx = valueArray.findIndex(p => p.pointId === updatedPoint.pointId);
+            if (valIdx !== -1) valueArray[valIdx] = updatedPoint;
+            else valueArray.push(updatedPoint);
+            this.value = JSON.stringify(valueArray, null, 4);
+
+            this.layer.draw();
+
+            console.log('bindingPoints:', this.bindingPoints);
+            console.log('bindingPointIds:', this.bindingPointIds);
+            console.log('movePoints:', this.movePoints);
+            console.log('unbindingPoints:', this.unbindingPoints);
+            console.log('unbindPointIds:', this.unbindPointIds);
+          });
+
+          this.layer.draw();
+        };
+
+        // 更新下一个隔离点位置
+        currentX += pointWidth + padding;
+        if (currentX + pointWidth > boxX + boxWidth) {
+          currentX = boxX + padding;
+          currentY += pointHeight + padding;
+        }
+      });
     }
+
   }
 }
 </script>

src/views/mes/hw/type/index.vue

@@ -8,10 +8,10 @@
       v-show="showSearch"
       label-width="100px"
     >
-      <el-form-item label="硬件编号" prop="hardwareTypeCode">
+      <el-form-item label="硬件类型编号" prop="hardwareTypeCode">
         <el-input
           v-model="queryParams.hardwareTypeCode"
-          placeholder="请输入硬件编号"
+          placeholder="请输入硬件类型编号"
           clearable
           @keyup.enter.native="handleQuery"
         />
@@ -77,7 +77,7 @@
       :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
     >
       <el-table-column
-        label="硬件编号"
+        label="硬件类型编号"
         width="220"
         align="center"
         prop="hardwareTypeCode"

src/views/mes/job/jobm/NewMarsJob.vue

@@ -1243,6 +1243,15 @@ export default {
       const sysAttrKey = 'sys.map.permit'
       getIsSystemAttributeByKey(sysAttrKey).then((response) => {
         const sysAttrValue = response.data.sysAttrValue
+        const dataMap = {
+          pages: 1,
+          size: -1,
+          mapId: sysAttrValue
+        }
+        getIsMapPointPage(dataMap).then((res) => {
+          console.log(res, '作业票地图岗位位置信息接口')
+          this.jobconfigPoint = res.data
+        })
         // 这里获取全局配置地图参数里的作业票地图
         selectIsMapById(sysAttrValue).then((res) => {
           console.log(res, '作业票地图 图片数据')
@@ -1250,15 +1259,7 @@ export default {
         })
       })
 
-      const dataMap = {
-        pages: 1,
-        size: -1,
-        mapId: 1
-      }
-      getIsMapPointPage(dataMap).then((res) => {
-        console.log(res, '作业票地图岗位位置信息接口')
-        this.jobconfigPoint = res.data
-      })
+
     },
     // sop类型 el-radio
     handleSopchange(data) {

src/views/system/mappoint/index.vue

@@ -143,6 +143,12 @@
             </el-option>
           </el-select>
         </el-form-item>
+        <el-form-item v-if="form.mapType=='3'" label="实体" prop="entityId">
+          <el-select style="width: 280px" v-model="form.entityId" placeholder="实体">
+            <el-option v-for="item in this.spmOptions" :key="item.pointId" :label="item.pointName" :value="item.pointId">
+            </el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item label="横坐标" prop="x">
           <el-input v-model="form.x" placeholder="请输入横坐标"/>
         </el-form-item>