锁定站解绑还未修复，提交部分修改内容如人员回显与设备工艺问题

src/api/mes/lotoStation/lotoStation.js

@@ -8,7 +8,14 @@ export function listLoto(query) {
     params: query
   })
 }
-
+// 解绑的数据集合
+export function unbundlePointPage(data) {
+  return request({
+    url: '/iscs/station/updatePointsBindingLoto',
+    method: 'post',
+    data: data
+  })
+}
 
 // 查询电柜详细
 export function getLotoInfo(deptId) {

src/api/mes/spm/segregationPoint.js

@@ -61,4 +61,4 @@ export function getIsWorkareaList(query) {
 
     })
 
-}
+}

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

@@ -5,25 +5,28 @@
       <el-card class="box-card">
         <div slot="header" class="clearfix">
           <span style="font-size: 18px">地图预览</span>
-          <span
-            style="
-                float: right;
-                padding: 1px 0;
-                font-size: 22px;
-                cursor: pointer;
-              "
-            type="text"
-            @click="goBack"
-          >×</span
-          >
+
         </div>
         <div style="height: 100%;padding-bottom:10px">
-          <el-input v-model="value" type="textarea" :rows="34" ></el-input>
+          <el-input v-model="value" type="textarea" :rows="34"></el-input>
         </div>
         <div class="bottombtn" style="width:100%;height: 35px;padding: 10px 0 0">
-          <el-button v-no-more-click @click="save" type="primary" icon="el-icon-edit" style="float: right; height: 33px; line-height: 2px">保存</el-button>
-          <el-button v-no-more-click @click="reset" type="primary" icon="el-icon-refresh"  style="float: right; height: 33px; line-height: 2px;margin: 0 10px">重置</el-button>
-          <el-button v-no-more-click @click="view" type="primary" icon="el-icon-view" style="float: right; height: 33px; line-height: 2px">预览</el-button>
+          <el-button v-no-more-click @click="close" type="primary" icon="el-icon-close"
+                     style="float: right; height: 33px; line-height: 2px"
+          >关闭
+          </el-button>
+          <el-button v-no-more-click @click="save" type="primary" icon="el-icon-edit"
+                     style="float: right; height: 33px; line-height: 2px;margin: 0 5px"
+          >保存
+          </el-button>
+          <el-button v-no-more-click @click="reset" type="primary" icon="el-icon-refresh"
+                     style="float: right; height: 33px; line-height: 2px;margin: 0 5px"
+          >重置
+          </el-button>
+          <el-button v-no-more-click @click="view" type="primary" icon="el-icon-view"
+                     style="float: right; height: 33px; line-height: 2px"
+          >预览
+          </el-button>
         </div>
       </el-card>
 
@@ -33,13 +36,12 @@
 </template>
 
 <script>
-import Konva from "konva";
-import {getLotoMapInfo,getLotoInfo,updateLoto} from '@/api/mes/lotoStation/lotoStation'
+import Konva from 'konva'
+import { getLotoMapInfo, getLotoInfo, updateLoto, unbundlePointPage } from '@/api/mes/lotoStation/lotoStation'
 import { getIsIsolationPointPage } from '@/api/mes/spm/segregationPoint'
 
-
 export default {
-  name: "KonvaExample",
+  name: 'KonvaExample',
   data() {
     return {
       stage: null,
@@ -50,82 +52,113 @@ export default {
       texts: [], // 白色text合集
       redrects: [], // 红色rect合集
       redtexts: [], // 白色text合集
-      value:'',
-      form:{},//拿到单个数据
-      originData:null,//原始数据
-      filterData:null,//用来过滤掉已经渲染出来的隔离点
-      allPoints:[],
-      groups:[],//组移动数据
-    };
+      value: '',
+      form: {},//拿到单个数据
+      originData: null,//原始数据
+      filterData: null,//用来过滤掉已经渲染出来的隔离点
+      leftPoints: [],//绑定的但未指定位置的集合
+      rightPoints: [],//解绑的数据集合
+      groups: [],//组移动数据
+      bindingPointIds:[],//存放从未绑定中放入物资柜的数据 id集合
+      unbindPointIds:[],//解绑的数据接口参数 id集合
+    }
   },
-  watch:{
-    '$route.query.lotoId':{
-      handler(newValue){
-        if(newValue){
-          this.getLoToInfo()
-          this.initKonva();
+  watch: {
+    '$route.query.lotoId': {
+      handler(newValue) {
+        if (newValue) {
+          this.initKonva()
           this.getIsIsolationPointPage()
+          this.addPointsToLeftPointsBox()
+          this.addPointsToRightPointsBox()
         }
       }
     }
   },
   beforeRouteEnter(to, from, next) {
-    next(vm=>{
+    next(vm => {
       vm.getLoToInfo()
       vm.initKonva()
       vm.getIsIsolationPointPage()
+      vm.addPointsToLeftPointsBox()
+      vm.addPointsToRightPointsBox()
     })
   },
   mounted() {
-    this.$nextTick(()=>{
-      this.getLoToInfo()
-      this.getIsIsolationPointPage()
-      this.initKonva();
-    })
-    console.log(this.$route.query.lotoId,'lotoId');
+    // this.$nextTick(()=>{
+    //   this.getLoToInfo()
+    //   this.initKonva();
+    //   this.getIsIsolationPointPage()
+    //   this.addPointsToAllPointsBox()
+    //   this.addPointsToCabinetBox()
+    // })
+    console.log(this.$route.query.lotoId, 'lotoId')
   },
   methods: {
-    goBack(){
-      this.$router.push('/hw/information/lotoStation');
-    },
-    getLoToInfo(){
-      const lotoId=this.$route.query.lotoId;
-      const sopId=''
-      const ticketId=''
+
+    getLoToInfo() {
+      const lotoId = this.$route.query.lotoId
+      const sopId = ''
+      const ticketId = ''
       getLotoInfo(lotoId).then((response) => {
-        console.log(response,'作业区域信息')
-        this.form=response.data
+        console.log(response, '作业区域信息')
+        this.form = response.data
       })
-      getLotoMapInfo(lotoId,sopId,ticketId).then(response => {
-        console.log(response,'作业区域预览接口调用');
-        this.form.map=response.data;
-        this.filterData=response.data
+      getLotoMapInfo(lotoId, sopId, ticketId).then(response => {
+        console.log(response, '作业区域预览接口调用')
+        this.form.map = response.data
+        this.filterData = response.data
         if (response.data) {
           try {
-            this.value = JSON.stringify(response.data, null, 4);
-            this.originData=this.value
-          } catch (err) {}
+            this.value = JSON.stringify(response.data, null, 4)
+            this.originData = this.value
+          } catch (err) {
+          }
         }
-        this.initKonva();
+        this.initKonva()
       })
     },
     // 获取所有隔离点
-    getIsIsolationPointPage(){
-      const data={
+    getIsIsolationPointPage() {
+      const data = {
         current: 1,
         size: -1,
+        lotoId: this.$route.query.lotoId
       }
-      getIsIsolationPointPage(data).then(res=>{
-        console.log(res,'所有隔离点')
+      getIsIsolationPointPage(data).then(res => {
+        console.log(res, '对应电柜所有隔离点')
         // 过滤掉 originData 中已经存在的数据
-        const data1 = res.data.records;
-        const data2 = this.filterData;
+        const data1 = res.data.records
+        const data2 = this.filterData
         const filteredData = data1.filter(item1 =>
-          !data2.some(item2 => item1.pointId === item2.pointId) // 比较 pointId 是否存在于 data2 中
-        );
-        // console.log(data1,data2,filteredData,'过滤之后的隔离点')
+          !data2.some(item2 => item1.pointId == item2.pointId) // 比较 pointId 是否存在于 data2 中
+        )
+        this.leftPoints = filteredData.map(item => {
+          return {
+            pointId: item.pointId,
+            pointName: item.pointName,
+            remark: item.remark,
+            prePointId: item.prePointId,
+            pointType: item.pointType,
+            pointTypeName: item.pointTypeName,
+            powerType: item.powerType,
+            powerTypeName: item.powerTypeName,
+            pointIcon: item.pointIcon,
+            status: false,
+            pointPicture: item.pointPicture,
+            mapImg: null
+          }
+        })
 
-        this.allPoints = filteredData.map(item => {
+      })
+      //   拿到解绑的隔离点数据
+      const data1 = {
+        current: 1,
+        size: -1,
+        lotoId: 0
+      }
+      getIsIsolationPointPage(data1).then(res => {
+        this.rightPoints = res.data.records.map(item => {
           return {
             pointId: item.pointId,
             pointName: item.pointName,
@@ -139,30 +172,34 @@ export default {
             status: false,
             pointPicture: item.pointPicture,
             mapImg: null
-          };
-        });
+          }
+        })
 
       })
     },
     // 重置
-    reset(){
-      this.value = this.originData;
-      this.initKonva(); // 重新初始化 Konva
+    reset() {
+      this.value = this.originData
+      this.initKonva() // 重新初始化 Konva
     },
     // 预览
-    view(){
-      if(this.isJson(this.value)){
-        this.form.map=this.value
-        this.initKonva();
+    view() {
+      if (this.isJson(this.value)) {
+        this.form.map = this.value
+        this.initKonva()
         this.getIsIsolationPointPage()
-
-      }else {
+        this.addPointsToLeftPointsBox()
+        this.addPointsToRightPointsBox()
+      } else {
         this.$message({
           type: 'error',
           message: '地图数据格式不正确，请输入有效的 JSON 格式!'
-        });
+        })
       }
     },
+    close() {
+      this.$router.push('/mes/dv/lotoStation')
+    },
     save() {
       this.$confirm('请确认是否保存修改内容', '提示', {
         confirmButtonText: '确定',
@@ -171,38 +208,47 @@ export default {
       }).then(() => {
         // 校验 this.value 是否为有效的 JSON
         if (this.isJson(this.value)) {
-          const mapData = typeof this.value === 'string' ? this.value : JSON.stringify(this.value);
+          const mapData = typeof this.value === 'string' ? this.value : JSON.stringify(this.value)
           const formData = {
             ...this.form,
             map: mapData
-          };
-          console.log( formData,'map')
+          }
+          console.log(formData, 'map')
           updateLoto(formData).then(response => {
-            console.log(response, '修改车间区域地图');
-            this.$router.push('/mes/dv/lotoStation');
+            console.log(response, '修改车间区域地图')
             this.$message({
               type: 'success',
               message: '保存成功!'
-            });
+            })
+          })
+
+          const data = {
+            bindingPointIds: this.bindingPointIds,
+            lotoId: this.$route.query.lotoId,
+            unbindPointIds: this.rightPoints.map(item => {return item.pointId})
+          }
+          console.log(data,'解绑与绑定数据参数')
+          unbundlePointPage(data).then((res)=>{
+            console.log(res,'解绑接口返回值')
           });
         } else {
           this.$message({
             type: 'error',
             message: '地图数据格式不正确，请输入有效的 JSON 格式!'
-          });
+          })
         }
       }).catch(() => {
         // 取消操作
-      });
+      })
     },
 
     // 校验字符串是否为有效的 JSON
     isJson(str) {
       try {
-        JSON.parse(str);
-        return true;
+        JSON.parse(str)
+        return true
       } catch (e) {
-        return false;
+        return false
       }
     },
     initKonva() {
@@ -210,16 +256,16 @@ export default {
       this.stage = new Konva.Stage({
         container: this.$refs.container, // 容器元素
         width: 1200,
-        height: 860,
-      });
+        height: 860
+      })
 
       // 创建图层
-      this.layer = new Konva.Layer();
-// 绘制隔离点等其他内容
-      this.drawGrid(50, 50, "#e0e0e0"); // 每个单元格50x50，浅灰色网格
-      // 创建底图
-      const bgImage = new Image();
-      bgImage.src = require("@/assets/images/table.png");
+      this.layer = new Konva.Layer()
+      // 绘制隔离点等其他内容
+      this.drawGrid(50, 50, '#e0e0e0') // 每个单元格50x50，浅灰色网格
+      // 创建物资柜底图
+      const bgImage = new Image()
+      bgImage.src = require('@/assets/images/table.png')
       bgImage.onload = () => {
         // 创建背景图并添加到图层
         const knovaImage = new Konva.Image({
@@ -228,53 +274,80 @@ export default {
           image: bgImage,
           width: 500,
           height: 790,
-          draggable: false,
-        });
-        this.layer.add(knovaImage);
+          draggable: false
+        })
+        this.layer.add(knovaImage)
 
         // 创建所有隔离点父盒子 放置于网格线上
-        const allPointsBox = new Konva.Rect({
-          x: 1000,
-          y: 10,
+        const rightPointsBox = new Konva.Rect({
+          x: 990,
+          y: 15,
           width: 200,
           height: 800,
           cornerRadius: 5,
           stroke: 'black',
           strokeWidth: 2,
-          fill: 'white',
-        });
-        this.layer.add(allPointsBox);
-
+          fill: 'white'
+        })
+        const rightnoLoto = new Konva.Text({
+          x: 1000, // 调整位置以适应网格
+          y: 20, // 调整位置以适应网格
+          text: '未绑定锁定站的隔离点数据',
+          fontSize: 15,
+          fill: 'black'
+        })
+        const leftPointsBox = new Konva.Rect({
+          x: 50,
+          y: 15,
+          width: 200,
+          height: 800,
+          cornerRadius: 5,
+          stroke: 'black',
+          strokeWidth: 2,
+          fill: 'white'
+        })
+        const leftLoto = new Konva.Text({
+          x: 60, // 调整位置以适应网格
+          y: 20, // 调整位置以适应网格
+          text: '绑定锁定站的隔离点数据',
+          fontSize: 15,
+          fill: 'black'
+        })
+
+        this.layer.add(leftPointsBox)
+        this.layer.add(leftLoto)
+        this.layer.add(rightPointsBox)
+        this.layer.add(rightnoLoto)
         // 调用函数将隔离点添加到 allPointsBox
-        this.addPointsToAllPointsBox(allPointsBox);
-
+        this.addPointsToLeftPointsBox(leftPointsBox)
+        // 将隔离点添加到 rightPointsBox
+        this.addPointsToRightPointsBox(rightPointsBox)
         // 渲染数据
-        const imageSrc = require("@/assets/images/localSetIcon.jpg"); // 图片路径
-        this.renderGrid(imageSrc, 6, 3, 450, 100, 120, 100, 50, 50, 60, 25);
+        const imageSrc = require('@/assets/images/localSetIcon.jpg') // 图片路径
+        this.renderGrid(imageSrc, 6, 3, 450, 100, 120, 100, 50, 50, 60, 25)
 
         // 将图层添加到舞台
-        this.stage.add(this.layer);
-        this.layer.draw();
-      };
+        this.stage.add(this.layer)
+        this.layer.draw()
+      }
 
       // 禁止舞台拖拽
-      this.stage.draggable(false);
+      this.stage.draggable(false)
     },
 
-
     // 绘制无限网格
     drawGrid(cellWidth, cellHeight, gridColor) {
-      const width = 1200;
-      const height = 860;
+      const width = 1200
+      const height = 860
 
       // 绘制竖线
       for (let i = 0; i <= width; i += cellWidth) {
         const verticalLine = new Konva.Line({
           points: [i, 0, i, height],
           stroke: gridColor,
-          strokeWidth: 1,
-        });
-        this.layer.add(verticalLine);
+          strokeWidth: 1
+        })
+        this.layer.add(verticalLine)
       }
 
       // 绘制横线
@@ -282,9 +355,9 @@ export default {
         const horizontalLine = new Konva.Line({
           points: [0, j, width, j],
           stroke: gridColor,
-          strokeWidth: 1,
-        });
-        this.layer.add(horizontalLine);
+          strokeWidth: 1
+        })
+        this.layer.add(horizontalLine)
       }
 
       // 添加网格坐标文本
@@ -301,29 +374,29 @@ export default {
       //   }
       // }
 
-      this.layer.draw();
+      this.layer.draw()
     },
-    // 绘制所有隔离点列表
-    addPointsToAllPointsBox(allPointsBox) {
-      if (this.allPoints && this.allPoints.length > 0) {
-        const boxWidth = allPointsBox.width();
-        const boxHeight = allPointsBox.height();
-        const boxX = allPointsBox.x();
-        const boxY = allPointsBox.y();
-        const padding = 10; // 每个隔离点之间的间距
-        const pointWidth = 50; // 每个隔离点的宽度
-        const pointHeight = 70; // 每个隔离点的高度（包括图片和文字）
-
-        let currentX = boxX + padding;
-        let currentY = boxY + padding;
-
-        this.allPoints.forEach((point, index) => {
+    // 绘制未指定坐标隔离点列表
+    addPointsToLeftPointsBox(leftPointsBox) {
+      if (this.leftPoints && this.leftPoints.length > 0) {
+        const boxWidth = leftPointsBox.width()
+        const boxHeight = leftPointsBox.height()
+        const boxX = leftPointsBox.x()
+        const boxY = leftPointsBox.y()
+        const padding = 10 // 每个隔离点之间的间距
+        const pointWidth = 50 // 每个隔离点的宽度
+        const pointHeight = 70 // 每个隔离点的高度（包括图片和文字）
+
+        let currentX = boxX + padding
+        let currentY = boxY + padding
+
+        this.leftPoints.forEach((point, index) => {
           // 创建一个组来组合红色边框、图片和文字
           const group = new Konva.Group({
             x: currentX,
-            y: currentY,
+            y: currentY + 14,
             draggable: true // 启用拖拽功能
-          });
+          })
 
           // 创建红色边框
           const borderRect = new Konva.Rect({
@@ -335,12 +408,139 @@ export default {
             stroke: 'red',
             strokeWidth: 2,
             fill: 'white'
-          });
-          group.add(borderRect);
+          })
+          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('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)
+              console.log(group, '组移动')
+              // 计算网格坐标
+              const row = Math.floor(snappedY / gridY)
+              const col = Math.floor(snappedX / gridX)
+
+              // 生成 JSON 数据
+              const pointData = {
+                row: row,
+                col: col,
+                pointId: point.pointId,
+                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
+              }
+
+              // 将字符串转换为数组
+              let valueArray = []
+              try {
+                valueArray = JSON.parse(this.value)
+              } catch (e) {
+                console.error('Failed to parse value:', e)
+              }
+              // 添加新数据到数组
+              valueArray.push(pointData)
+              console.log(valueArray)
+              // 将数组转换回字符串
+              this.value = JSON.stringify(valueArray, null, 4)
+
+              // 重新绘制图层
+              this.layer.draw()
+            })
+
+            // 重新绘制图层
+            this.layer.draw()
+          }
+
+          // 更新下一个隔离点的位置
+          currentX += pointWidth + padding
+          if (currentX + pointWidth > boxX + boxWidth) {
+            currentX = boxX + padding
+            currentY += pointHeight + padding
+          }
+        })
+      }
+    },
+    // 绘制解绑隔离点列表
+    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
+
+        this.rightPoints.forEach((point, index) => {
+          // 创建一个组来组合红色边框、图片和文字
+          const group = new Konva.Group({
+            x: currentX,
+            y: currentY + 14,
+            draggable: true // 启用拖拽功能
+          })
+
+          // 创建红色边框
+          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;
+          const image = new Image()
+          image.src = point.pointIcon
           image.onload = () => {
             const knovaImage = new Konva.Image({
               x: 1, // 图片在组内的位置
@@ -348,8 +548,8 @@ export default {
               image: image,
               width: 50, // 图片宽度
               height: 50 // 图片高度
-            });
-            group.add(knovaImage);
+            })
+            group.add(knovaImage)
 
             // 创建文字
             const pointText = new Konva.Text({
@@ -358,29 +558,29 @@ export default {
               text: point.pointName,
               fontSize: 12,
               fill: 'red'
-            });
-            group.add(pointText);
+            })
+            group.add(pointText)
 
             // 将组添加到图层
-            this.layer.add(group);
-            this.groups[point.pointName] = group; // 用文字作为键存储
+            this.layer.add(group)
+            this.groups[point.pointName] = group // 用文字作为键存储
 
             // 监听组的拖拽结束事件
             group.on('dragend', () => {
-              const gridX = 50; // 网格单元格宽度
-              const gridY = 50; // 网格单元格高度
+              const gridX = 50 // 网格单元格宽度
+              const gridY = 50 // 网格单元格高度
 
               // 计算最近的网格点位置
-              const snappedX = Math.round(group.x() / gridX) * gridX;
-              const snappedY = Math.round(group.y() / gridY) * gridY;
+              const snappedX = Math.round(group.x() / gridX) * gridX
+              const snappedY = Math.round(group.y() / gridY) * gridY
 
               // 设置组到最近的网格点位置
-              group.x(snappedX);
-              group.y(snappedY);
-              console.log(group,'组移动');
+              group.x(snappedX)
+              group.y(snappedY)
+              console.log(group, '组移动')
               // 计算网格坐标
-              const row = Math.floor(snappedY / gridY);
-              const col = Math.floor(snappedX / gridX);
+              const row = Math.floor(snappedY / gridY)
+              const col = Math.floor(snappedX / gridX)
 
               // 生成 JSON 数据
               const pointData = {
@@ -398,64 +598,64 @@ export default {
                 pointIcon: point.pointIcon,
                 pointPicture: point.pointPicture,
                 mapImg: null
-              };
+              }
 
               // 将字符串转换为数组
-              let valueArray = [];
+              let valueArray = []
               try {
-                valueArray = JSON.parse(this.value);
+                valueArray = JSON.parse(this.value)
               } catch (e) {
-                console.error("Failed to parse value:", e);
+                console.error('Failed to parse value:', e)
               }
               // 添加新数据到数组
-              valueArray.push(pointData);
-              console.log(valueArray);
+              valueArray.push(pointData)
+              console.log(valueArray)
               // 将数组转换回字符串
-              this.value = JSON.stringify(valueArray, null, 4);
+              this.value = JSON.stringify(valueArray, null, 4)
 
               // 重新绘制图层
-              this.layer.draw();
-            });
+              this.layer.draw()
+            })
 
             // 重新绘制图层
-            this.layer.draw();
-          };
+            this.layer.draw()
+          }
 
           // 更新下一个隔离点的位置
-          currentX += pointWidth + padding;
+          currentX += pointWidth + padding
           if (currentX + pointWidth > boxX + boxWidth) {
-            currentX = boxX + padding;
-            currentY += pointHeight + padding;
+            currentX = boxX + padding
+            currentY += pointHeight + padding
           }
-        });
+        })
       }
     },
     renderGrid(imageSrc) {
-      this.selectedStates = []; // 用数组来存储选中状态
-      this.rects = [];
-      this.texts = [];
-      this.bgrects = {};
-      this.redrects = [];
-      this.redtexts = [];
-      this.selectedText = [];
+      this.selectedStates = [] // 用数组来存储选中状态
+      this.rects = []
+      this.texts = []
+      this.bgrects = {}
+      this.redrects = []
+      this.redtexts = []
+      this.selectedText = []
 
-      const positions = JSON.parse(this.value);
+      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 x = pos.col * 50 // 每个单元格宽度为50
+        const y = pos.row * 50 // 每个单元格高度为50
+        const labelText = pos.pointName // 对应的文字
 
-        const point = new Image();
-        point.src = pos.pointIcon;
+        const point = new Image()
+        point.src = pos.pointIcon
 
         point.onload = () => {
           // 创建一个新的Group来包含整个隔离点
           const group = new Konva.Group({
             x: x,
             y: y,
-            draggable: true, // 设置为可拖拽
-          });
+            draggable: true // 设置为可拖拽
+          })
 
           // 底部白色背景
           const bgrect = new Konva.Rect({
@@ -466,8 +666,8 @@ export default {
             cornerRadius: 5,
             stroke: 'white',
             strokeWidth: 2,
-            fill: 'white',
-          });
+            fill: 'white'
+          })
 
           // 普通矩形
           const rect = new Konva.Rect({
@@ -478,8 +678,8 @@ export default {
             cornerRadius: 5,
             stroke: 'red',
             strokeWidth: 2,
-            fill: 'white',
-          });
+            fill: 'white'
+          })
 
           // 图片
           const knovaImage = new Konva.Image({
@@ -487,8 +687,8 @@ export default {
             y: 0,
             image: point,
             width: 50,
-            height: 50,
-          });
+            height: 50
+          })
 
           // 文字
           const text = new Konva.Text({
@@ -497,45 +697,114 @@ export default {
             fontSize: 17,
             text: labelText,
             fontFamily: 'Calibri',
-            fill: 'red',
-          });
+            fill: 'red'
+          })
 
           // 将所有元素添加到group中
-          group.add(bgrect);
-          group.add(rect);
-          group.add(knovaImage);
-          group.add(text);
+          group.add(bgrect)
+          group.add(rect)
+          group.add(knovaImage)
+          group.add(text)
 
           // 将group添加到layer
-          this.layer.add(group);
-
-          // 监听拖拽结束事件
+          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 // 物资柜的高度
+          }
+          const allPoints = {
+            x: 50, // 左侧列表的 x 坐标
+            y: 15,  // 左侧列表的 y 坐标
+            width: 200,
+            height: 800,
+          }
           group.on('dragend', () => {
             // 获取拖拽的内容对应的点名称
-            const labelText = group.findOne('Text').text();
+            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
+
+            // 如果仍在物资柜中，则不做任何操作
+            if (isInCabinet) {
+              console.log(`${labelText} 点仍在物资柜中`)
+              return
+            }
+
+            // 检查是否在右侧盒子范围内
+            const isInRightBox =
+              groupPos.x >= rightBoxBounds.x &&
+              groupPos.x <= rightBoxBounds.x + rightBoxBounds.width &&
+              groupPos.y >= rightBoxBounds.y &&
+              groupPos.y <= rightBoxBounds.y + rightBoxBounds.height
+
+            // 检查是否在左侧所有点的区域内
+            const isInLeftBox =
+              groupPos.x >= allPoints.x &&
+              groupPos.x <= allPoints.x + allPoints.width &&
+              groupPos.y >= allPoints.y &&
+              groupPos.y <= allPoints.y + allPoints.height
+
+            // 查找并删除对应的点数据
+            const indexToRemove = positions.findIndex(item => item.pointName === labelText)
 
-            // 从 positions 中删除对应的内容
-            const indexToRemove = positions.findIndex(item => item.pointName === labelText);
             if (indexToRemove !== -1) {
-              positions.splice(indexToRemove, 1);
+              // 从 positions 中移除并获取移动的点
+              const movedPoint = positions.splice(indexToRemove, 1)[0]
+
+              if (movedPoint) {
+                // 根据目标区域更新对应数组
+                if (isInRightBox) {
+                  if (!this.rightPoints.find(point => point.pointName === movedPoint.pointName)) {
+                    this.rightPoints.push(movedPoint)
+                  }
+                } else if (isInLeftBox) {
+                  if (!this.leftPoints.find(point => point.pointName === movedPoint.pointName)) {
+                    this.leftPoints.push(movedPoint)
+                  }
+                }
+              }
+            } else {
+              console.warn('Drag operation failed: Point not found in positions array.')
             }
 
-            // 更新 this.value，删除对应的数据
-            this.value = JSON.stringify(positions, null, 4);
+            // 更新 this.value
+            this.value = JSON.stringify(positions, null, 4)
 
-            // 在控制台查看结果
-            console.log('Updated positions:', positions);
-          });
-
-          this.layer.draw();
-        };
-      });
-    }
+            // 清理 undefined 数据
+            this.rightPoints = this.rightPoints.filter(Boolean)
+            this.leftPoints = this.leftPoints.filter(Boolean)
 
+            // 打印调试信息
+            console.log('Updated positions:', positions)
+            console.log('Right Points:', this.rightPoints)
+            console.log('Left Points:', this.leftPoints)
+          })
 
+          this.layer.draw()
+        }
+      })
+    }
 
-  },
-};
+  }
+}
 </script>
 
 <style scoped lang="scss">
@@ -543,12 +812,14 @@ export default {
   width: 100%;
   height: 100%;
 }
-.mapdata{
+
+.mapdata {
   width: 100%;
   height: 100%;
   display: flex;
 }
-.left{
+
+.left {
   flex: 1;
   display: flex;
   flex-direction: column;

src/views/mes/material/lockers/index.vue

@@ -43,7 +43,7 @@
     // 图标水平居中，动态计算偏移
     left: `${deptXLGCenter.left - (TicketListPage.length * 35 + (TicketListPage.length - 1) * 5) / 2 + index * 40}px`,
   }"
-          :src="require('@/assets/images/table_map2.png')"
+          :src="require('@/assets/images/table_map2.jpg')"
           alt=""
           @click="handleCabinetClick(cabinet)"
         />
@@ -62,7 +62,7 @@
     // 图标水平居中，动态计算偏移
     left: `${deptCCOCenter.left - (COCOTicketListPage.length * 35 + (COCOTicketListPage.length - 1) * 5) / 2 + index * 40}px`,
   }"
-          :src="require('@/assets/images/table_map2.png')"
+          :src="require('@/assets/images/table_map2.jpg')"
           alt=""
           @click="handleCabinetClick(cabinet)"
         />
@@ -497,7 +497,6 @@ export default {
         this.materialsList = response.data.records
         console.log(response,'所有物资柜')
         this.TicketListPage=response.data.records.filter((item) => {return item.workstationId=='8'})
-
         this.COCOTicketListPage=response.data.records.filter((item) => {return item.workstationId=='7'})
         this.total = response.data.total
         this.machinerytypeList = this.handleTree(

src/views/system/user/index.vue

@@ -810,22 +810,29 @@ export default {
         this.roleOptions = response.roles;
         this.form.postIds = response.postIds;
         this.form.roleIds = response.roleIds;
+        if(response.unitIds){
+          this.form.unitIds=response.unitIds;
+        }
+
         // 岗位回显
-        let workstationNames = [];
-        response.workstationIds.forEach(id => {
-          const foundItem = this.orignMarsWorkstation.find(item => item.workstationId == id);
-          console.log(foundItem, 'foundItem');
-          if (foundItem) {
-            workstationNames.push(foundItem.workstationName);
-            console.log(workstationNames);
-          }
-        });
-        // console.log(workstationNames);
-        this.form.workstationIds=workstationNames
-        this.$nextTick(() => {
-          this.$refs.treeRef.setCheckedKeys(response.workstationIds, true);
-        });
-        this.form.unitIds=response.unitIds;
+        if(response.workstationIds){
+          let workstationNames = [];
+          response.workstationIds.forEach(id => {
+            const foundItem = this.orignMarsWorkstation.find(item => item.workstationId == id);
+            console.log(foundItem, 'foundItem');
+            if (foundItem) {
+              workstationNames.push(foundItem.workstationName);
+              console.log(workstationNames);
+            }
+          });
+
+          this.form.workstationIds=workstationNames
+          this.$nextTick(() => {
+            this.$refs.treeRef.setCheckedKeys(response.workstationIds, true);
+          });
+        }
+
+
         this.title = "修改用户";
         this.form.password = "";
       });