修复地图初始化数据也从解析的接口拿map数据

src/components/separationPoint/index.vue

@@ -27,10 +27,10 @@ export default {
       selectedText: [], // 用于存储未选中的元素文本
       rects: [], //白色rect合集
       texts: [], //白色text合集
-      overlayBox:[],//覆盖盒子
-      checkTexts:[],//对号文字
+      bgrects:[],//白色底部
       redrects: [], //红色rect合集
       redtexts: [] //白色text合集
+
     }
   },
   watch: {
@@ -145,12 +145,14 @@ export default {
       this.selectedStates = {} // 用对象来存储选中状态，键为文字内容
       this.rects = {}
       this.texts = {}
+      this.bgrects={}
       this.redrects = {}
       this.redtexts = {}
 
       this.selectedText = []
 
       // const positions = JSON.parse(this.points.map);
+      console.log(this.getMapData,',apData')
       let positions;
 
       // 判断getMapData是否已为数组
@@ -266,34 +268,61 @@ export default {
               this.$emit('selection-changed', this.selectedText)
             })
           }
-
-          this.layer.add(knovaImage)
+          // 底部白色背景
+          const bgrect=new Konva.Rect({
+            x: x - 6,
+            y: y - 5,
+            width: 62,
+            height: 80,
+            cornerRadius: 5,
+            stroke: 'white',
+            strokeWidth: 2,
+            fill: 'white'
+          })
+          this.layer.add(bgrect)
+          this.bgrects[labelText] = bgrect // 用文字作为键存储
 
           // 普通矩形
           const rect = new Konva.Rect({
-            x: x - 3,
-            y: y + 55,
-            width: 60,
-            height: 25,
-            cornerRadius: 10,
+            x: x + 0,
+            y: y - 1,
+            width: 50,
+            height: 72,
+            cornerRadius: 5,
             stroke: 'red',
             strokeWidth: 2,
             fill: 'white'
           })
           this.layer.add(rect)
           this.rects[labelText] = rect // 用文字作为键存储
+          // 先加底部白色 再添加图片
+          this.layer.add(knovaImage)
 
-          // 普通文字
-          const text = new Konva.Text({
-            x: x + 12,
-            y: y + 60,
-            fontSize: 20,
-            text: labelText,
-            fontFamily: 'Calibri',
-            fill: 'red'
-          })
-          this.layer.add(text)
-          this.texts[labelText] = text // 用文字作为键存储
+          // // 普通矩形
+          // const rect = new Konva.Rect({
+          //   x: x ,
+          //   y: y + 45,
+          //   width: 50,
+          //   height: 25,
+          //   cornerRadius: 0,
+          //   stroke: 'red',
+          //   strokeWidth: 2,
+          //   fill: 'white'
+          // })
+          // this.layer.add(rect)
+          // this.rects[labelText] = rect // 用文字作为键存储
+          //
+          // // 普通文字
+          // const text = new Konva.Text({
+          //   x: x + 8,
+          //   y: y + 50,
+          //   fontSize: 20,
+          //   text: labelText,
+          //   fontFamily: 'Calibri',
+          //   fill: 'red'
+          // })
+          // this.layer.add(text)
+          // this.texts[labelText] = text // 用文字作为键存储
 
           // // 红色矩形（初始隐藏）
           // const redrect = new Konva.Rect({
@@ -323,11 +352,24 @@ export default {
           // this.layer.add(redtext)
           // this.redtexts[labelText] = redtext // 用文字作为键存储
 
+
+
+          // 普通文字
+          const text = new Konva.Text({
+            x: x + 8,
+            y: y + 50,
+            fontSize: 20,
+            text: labelText,
+            fontFamily: 'Calibri',
+            fill: 'red'
+          })
+          this.layer.add(text)
+          this.texts[labelText] = text // 用文字作为键存储
           // 覆盖层（表示选中状态）
           const redrect = new Konva.Rect({
-            x: x-5,
-            y: y,
-            width: 62,
+            x: x - 7,
+            y: y - 6,
+            width: 64.1,
             height: 82,
             cornerRadius: 5,
             fill: 'rgba(97, 97, 97, 0.5)', // 半透明灰色
@@ -353,6 +395,7 @@ export default {
           this.redtexts[labelText] = redtext; // 用文字作为键存储
           // 检查 this.getSelectSopPoints 是否包含当前点的 pointId
           if (pos.state) {
+            console.log('我走这里了-------')
             // 设置为选中状态
             this.selectedStates[labelText] = true
 

src/components/separationPoint/workshop.vue

@@ -43,7 +43,7 @@
 
 <script>
 import { listAllWorkshop } from '@/api/mes/md/workshop'
-import { getIsWorkareaList, getMapDataApi } from '@/api/mes/wa/workarea'
+import {  getMapDataApi } from '@/api/mes/wa/workarea'
 import { selectIsSopById } from '@/api/mes/sop/sopindex'
 import { mapActions, mapGetters } from 'vuex'
 import { listWorkarea } from '@/api/mes/wa/workarea'
@@ -134,7 +134,6 @@ export default {
           this.isDisabled=true;
           // 在这里处理 jobProps 变化后的逻辑
           if (newVal[0].workareaId) {
-
             this.workareaName = newVal[0].workareaId  //新工作区域所返回
             this.handleselectProductLine(newVal[0].workareaId,newVal[0].sopId);//获取已选隔离点的整个数据map
           }
@@ -324,10 +323,46 @@ export default {
 
       // 传递车间地图
       this.imgsrc = data.mapImg
-      if (this.$route.query.sopId === 'null' || this.$route.query.ticketId === 'null') {
-        this.setMapData(data.map)
-        console.log('设置了地图数据')
+      let workareaId=data.id
+      let sopId = ''
+      let ticketId = ''
+
+      if (this.$route.query.sopId !== 'null' && this.$route.query.sopId) {
+        sopId = this.$route.query.sopId
+      } else if (
+        this.$route.query.ticketId !== 'null' &&
+        this.$route.query.ticketId
+      ) {
+        ticketId = this.$route.query.ticketId // ticketId 存在时，data1 设置为空字符串
+      }
+
+      if (this.jobProps.length == 0) {
+        console.log(
+          this.jobProps,
+          '如果jobProps是空数组表示编辑情况下修改sop为空值需要重新拿到所有渲染隔离点'
+        )
+        ticketId = ''
+      }
+      if (this.form.sopId) {
+        sopId = this.form.sopId
       }
+      getMapDataApi(workareaId, sopId, ticketId)
+        .then((res) => {
+          console.log(res, '获取区域map的解析数据')
+          const mapdata = res.data
+          this.setMapData(mapdata)
+
+        })
+        .catch((error) => {
+          console.error('获取区域map数据失败', error)
+        })
+      // 这里本来用的是没解析的json字符串 为了避免日后还需要取隔离点修改json所以我直接调用解析后的json 如果是新建sop只传递workareaId就能拿到已经解析过的 初始化的全部数据而且是未被标记选中的
+      // if (this.$route.query.sopId === 'null' || this.$route.query.ticketId === 'null') {
+      //   this.setMapData(data.map)
+      //   console.log('设置了地图数据')
+      // }else {
+      //   this.setMapData(data.map)
+      // }
       this.workareaName = data.label
 
 

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

@@ -297,10 +297,10 @@
                           }}</span>
                         </template>
                       </el-table-column>
-                      <el-table-column prop="userRole" label="共锁人来源">
+                      <el-table-column prop="userType" label="共锁人来源">
                         <template slot-scope="scope">
                           <span>{{
-                            scope.row.userRole == "0" ? "内部" : "外部"
+                            scope.row.userType == "0" ? "内部" : "外部"
                           }}</span>
                         </template>
                       </el-table-column>
@@ -684,7 +684,7 @@ export default {
           ticketContent: response.data.ticketContent,
           spoint: response.data.pointDetailVOList,
           ticketUserDTOList: response.data.jobTicketUserList
-            .filter((item) => item.userType !== "0")
+            .filter((item) => item.userRole !== "jtlocker")
             .map((item) => ({
               userName: item.userName,
               userType: item.userType,
@@ -693,10 +693,10 @@ export default {
             })),
 
           locker: response.data.jobTicketUserList
-            .filter((item) => item.userType == "0")
+            .filter((item) => item.userRole == "jtlocker")
             .map((item) => item.userName)[0],
           coLocker: response.data.jobTicketUserList.map((item) => {
-            return item.userType !== "0" ? item.userName : null;
+            return item.userRole !== "jtlocker" ? item.userName : null;
           }),
           ticketStartTime: response.data.ticketStartTime,
           ticketEndTime: response.data.ticketEndTime,
@@ -707,7 +707,7 @@ export default {
           EditBool: true,
         };
         this.newticketUserDTOList=response.data.jobTicketUserList
-          .filter((item) => item.userType == "0")
+          .filter((item) => item.userRole == "jtlocker")
           .map((item) => ({
             userName: item.userName,
             userType: item.userType,
@@ -728,13 +728,14 @@ export default {
       getIsSopPage(query).then((res) => {
         console.log(res, "sop列表接口");
         // 插入一个默认的空选项
-        const defaultOption = {
-          sopId: null,
-          sopName: "不使用sop模板  ",
-        };
+        // const defaultOption = {
+        //   sopId: null,
+        //   sopName: "不使用sop模板  ",
+        // };
 
         // 将默认选项添加到结果的最前面
-        this.sopOptions = [defaultOption, ...res.data.records];
+        // this.sopOptions = [defaultOption, ...res.data.records];
+        this.sopOptions=[...res.data.records]
       });
     },
     // sop下拉change事件 可以传递sopOptions一整个对象过去
@@ -751,11 +752,11 @@ export default {
         selectIsSopById(value).then((response) => {
           console.log(response, 'sop-父组件')
           const value = response.data.ticketUserDTOList //找到上锁人  这里一定要先筛选locker再去给表格筛选 否则表格筛选之后直接不会有上锁人数据了
-            .filter(item => item.userType == '0')
+            .filter(item => item.userRole == "jtlocker")
             .map(item => item.userName);
           this.form.locker=value[0],//map返回的是数字 所以这样写
             // console.log(value,response.data.ticketUserDTOList,'form.locker')
-          this.form.ticketUserDTOList=response.data.ticketUserDTOList.filter((item)=>{return item.userType=='1'}) ;//过滤上锁人
+          this.form.ticketUserDTOList=response.data.ticketUserDTOList.filter((item)=>{return item.userRole !== "jtlocker"}) ;//过滤上锁人
           this.tableData = response.data.pointDetailVOList
           this.form.workareaId=response.data.workareaId
         })
@@ -1110,7 +1111,7 @@ export default {
             userName: user.label,
             userId: user.value,
             userType: 0,
-            userRole: '0'
+            userRole: 'jtlocker'
           })
 
           console.log(this.newticketUserDTOList, '用户')
@@ -1137,8 +1138,8 @@ export default {
           this.form.ticketUserDTOList.push({
             userName: user.label,
             userId: user.value,
-            userType: 1,
-            userRole: 0
+            userType: 0,
+            userRole: 'jtcolocker'
 
           })
           console.log(this.form.ticketUserDTOList, '用户')
@@ -1196,7 +1197,7 @@ export default {
             userName: item.userName,
             userId: 0,
             userType: 1,
-            userRole: 1
+            userRole: 'jtcolocker'
 
           })
         }

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

@@ -507,7 +507,7 @@ export default {
     handleLook(row) {
       // 设置为true表示作业票里查看不可以点击隔离点
       this.setSopLook(true);
-      this.$router.push(`/mes/job/jobm/LookJob?ticketId=${row.ticketId}`);
+      this.$router.push(`/mes/job/jobm/lookWork?ticketId=${row.ticketId}`);
     },
 
     /** 修改按钮操作 */

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

@@ -226,8 +226,8 @@
                   </el-table-column>
                   <el-table-column
                     prop="prePointId"
-                    label="前置节点"
-                    width="100"
+                    label="前置隔离点"
+                    width="90"
                   >
                     <template slot-scope="scope">
                       <el-select
@@ -331,13 +331,13 @@
                     </template>
                   </el-table-column>
                   <el-table-column
-                    prop="userRole"
+                    prop="userType"
                     label="共锁人来源"
                     width="100"
                   >
                     <template slot-scope="scope">
                       <span>{{
-                        scope.row.userRole == "0" ? "内部" : "外部"
+                        scope.row.userType == "0" ? "内部" : "外部"
                       }}</span>
                     </template>
                   </el-table-column>
@@ -746,7 +746,7 @@ export default {
           ticketContent: response.data.ticketContent,
           spoint: response.data.pointDetailVOList,
           ticketUserDTOList: response.data.jobTicketUserList
-            .filter((item) => item.userType !== "0")
+            .filter((item) => item.userRole !== "jtlocker")
             .map((item) => ({
               userName: item.userName,
               userType: item.userType,
@@ -755,10 +755,10 @@ export default {
             })),
 
           locker: response.data.jobTicketUserList
-            .filter((item) => item.userType == "0")
+            .filter((item) => item.userRole == "jtlocker")
             .map((item) => item.userName)[0],
           coLocker: response.data.jobTicketUserList.map((item) => {
-            return item.userType !== "0" ? item.userName : null;
+            return item.userRole !== "jtlocker" ? item.userName : null;
           }),
           ticketStartTime: response.data.ticketStartTime,
           ticketEndTime: response.data.ticketEndTime,
@@ -769,7 +769,7 @@ export default {
           EditBool: true,
         };
         (this.newticketUserDTOList = response.data.jobTicketUserList
-          .filter((item) => item.userType == "0")
+          .filter((item) => item.userRole == "jtlocker")
           .map((item) => ({
             userName: item.userName,
             userType: item.userType,
@@ -813,13 +813,13 @@ export default {
         selectIsSopById(value).then((response) => {
           console.log(response, "sop-父组件");
           const value = response.data.ticketUserDTOList //找到上锁人  这里一定要先筛选locker再去给表格筛选 否则表格筛选之后直接不会有上锁人数据了
-            .filter((item) => item.userType == "0")
+            .filter((item) => item.userRole == "jtlocker")
             .map((item) => item.userName);
           (this.form.locker = value[0]), //map返回的是数字 所以这样写
             // console.log(value,response.data.ticketUserDTOList,'form.locker')
             (this.form.ticketUserDTOList =
               response.data.ticketUserDTOList.filter((item) => {
-                return item.userType == "1";
+                return item.userRole == "jtlocker";
               })); //过滤上锁人
           this.tableData = response.data.pointDetailVOList;
           this.form.workareaId = response.data.workareaId;
@@ -1251,7 +1251,7 @@ export default {
             userName: user.label,
             userId: user.value,
             userType: 0,
-            userRole: "0",
+            userRole: "jtlocker",
           });
 
           console.log(this.newticketUserDTOList, "用户");
@@ -1278,8 +1278,8 @@ export default {
           this.form.ticketUserDTOList.push({
             userName: user.label,
             userId: user.value,
-            userType: 1,
-            userRole: 0,
+            userType: 0,
+            userRole: 'jtcolocker',
           });
           console.log(this.form.ticketUserDTOList, "用户");
         } else {
@@ -1338,7 +1338,7 @@ export default {
             userName: item.userName,
             userId: 0,
             userType: 1,
-            userRole: 1,
+            userRole: 'jtcolocker',
           });
         }
       });

src/views/mes/sop/sopm/NewSop.vue

@@ -480,8 +480,8 @@ export default {
           // {
           //   userId: '',
           //   userName: '',
-          //   userRole: '',//作业票角色 暂时不传递 内部人还是外部人
-          //   userType: ''//用户类型 上锁人或共锁人
+          //   userRole: '',//作业票角色 角色code jtlocker(上锁人) jtcolocker(共锁人)
+          //   userType: ''//用户类型 0是内部 1是外部
           // }
         ] //所选择的用户
       },
@@ -610,7 +610,7 @@ export default {
             sopId: response.data.sopId,
             spoint: response.data.pointDetailVOList,
             ticketUserDTOList: response.data.ticketUserDTOList
-              .filter((item) => item.userType !== "0")
+              .filter((item) => item.userRole !== "jtlocker")
               .map((item) => ({
                 userName: item.userName,
                 userType: item.userType,
@@ -619,15 +619,15 @@ export default {
               })),
 
             locker: response.data.ticketUserDTOList
-              .filter((item) => item.userType == "0")
+              .filter((item) => item.userRole == "jtlocker")
               .map((item) => item.userName)[0],
             coLocker: response.data.ticketUserDTOList.map((item) => {
-              return item.userType !== "0" ? item.userName : null;
+              return item.userRole !== "jtlocker" ? item.userName : null;
             }),
 
           };
           this.newticketUserDTOList=response.data.ticketUserDTOList
-            .filter((item) => item.userType == "0")
+            .filter((item) => item.userRole == "jtlocker")
             .map((item) => ({
               userName: item.userName,
               userType: item.userType,
@@ -954,7 +954,7 @@ export default {
             userName: user.label,
             userId: user.value,
             userType: 0,
-            userRole: '0'
+            userRole: 'jtlocker'
           })
 
           console.log(this.newticketUserDTOList, '上锁人用户')
@@ -981,8 +981,8 @@ export default {
           this.form.ticketUserDTOList.push({
             userName: user.label,
             userId: user.value,
-            userType: 1,
-            userRole: 0
+            userType: 0,
+            userRole: 'jtcolocker'
 
           })
           console.log(this.form.ticketUserDTOList, '共锁人用户')
@@ -1041,7 +1041,7 @@ export default {
             userName: item.userName,
             userId: 0,
             userType: 1,
-            userRole: 1
+            userRole: 'jtcolocker'
 
           })
         }

src/views/mes/sop/sopm/sopmLook.vue

@@ -228,7 +228,7 @@
                   </el-table-column>
                   <el-table-column
                     prop="prePointId"
-                    label="前置节点"
+                    label="前置隔离点"
                     width="100"
                   >
                     <template slot-scope="scope">
@@ -310,10 +310,10 @@
                       }}</span>
                     </template>
                   </el-table-column>
-                  <el-table-column prop="userRole" label="共锁人来源">
+                  <el-table-column prop="userType" label="共锁人来源">
                     <template slot-scope="scope">
                       <span>{{
-                        scope.row.userRole == "0" ? "内部" : "外部"
+                        scope.row.userType == "0" ? "内部" : "外部"
                       }}</span>
                     </template>
                   </el-table-column>
@@ -737,14 +737,14 @@ export default {
           }
 
           const value = response.data.ticketUserDTOList //找到上锁人  这里一定要先筛选locker再去给表格筛选 否则表格筛选之后直接不会有上锁人数据了
-            .filter((item) => item.userType == "0")
+            .filter((item) => item.userRole == "jtlocker")
             .map((item) => item.userName);
           console.log(value, "上锁人");
           (this.form.locker = value[0]), //map返回的是数字 所以这样写
             console.log(value, response.data.ticketUserDTOList, "form.locker");
           this.form.ticketUserDTOList = response.data.ticketUserDTOList.filter(
             (item) => {
-              return item.userType == "1";
+              return item.userRole !== "jtlocker"
             }
           ); //过滤上锁人
 
@@ -1150,7 +1150,7 @@ export default {
             userName: user.label,
             userId: user.value,
             userType: 0,
-            userRole: "0",
+            userRole: "jtlocker",
           });
 
           console.log(this.newticketUserDTOList, "用户");
@@ -1177,8 +1177,8 @@ export default {
           this.form.ticketUserDTOList.push({
             userName: user.label,
             userId: user.value,
-            userType: 1,
-            userRole: 0,
+            userType: 0,
+            userRole: 'jtcolocker',
           });
           console.log(this.form.ticketUserDTOList, "用户");
         } else {
@@ -1220,7 +1220,7 @@ export default {
             userName: item.userName,
             userId: 0,
             userType: 1,
-            userRole: 1,
+            userRole: 'jtcolocker',
           });
         }
       });
@@ -1352,6 +1352,7 @@ export default {
     }
   }
   .right {
+
     flex: 1;
     height: 100%;
     // background: #000;