地图预览与隔离点数据源接口切换

src/api/mes/wa/workarea.js

@@ -30,6 +30,13 @@ export function listAllWorkshop(){
     method: 'get'
   })
 }
+// 获取区域msp解析数据
+export function getMapData(query,query2,query3) {
+  return request({
+    url: `/iscs/workarea/selectIsWorkareaMapById?workareaId=${query}&sopId=${query2}&ticketId=${query3}`,
+    method: 'get',
+  })
+}
 
 //新增工作区域
 export function addWorkarea(query) {

src/components/separationPoint/index.vue

@@ -34,10 +34,12 @@ export default {
   mounted() {
     this.initKonva();
     console.log(this.points, "points");
+    console.log(this.getMapData,'Mapdata')
     console.log(
       this.getSelectSopPoints,
       this.getSopEdit,
       this.getSopLook,
+
       "getSopEdit - getSelectSopPoints"
     );
   },
@@ -46,6 +48,7 @@ export default {
       "getSelectSopPoints",
       "getSopEdit",
       "getSopLook",
+      "getMapData"
     ]),
   },
   methods: {
@@ -127,8 +130,9 @@ export default {
       this.redtexts = {};
       this.selectedText = [];
 
-      const positions = JSON.parse(this.points.map);
-      console.log(positions, "this.points");
+      // const positions = JSON.parse(this.points.map);
+      const positions=this.getMapData
+      console.log(positions, "positions");
 
       // 检查 this.getSelectSopPoints 是否有内容
       const isLocked = this.getSelectSopPoints.length > 0;
@@ -187,16 +191,23 @@ export default {
                     this.$route.query.sopId !== null ||
                     this.$route.query.ticketId !== null
                   ) {
-                    selectIsIsolationPointById(pos.pointId).then((res) => {
-                      this.selectedText.push({
-                        pointName: res.data.pointName,
-                        pointId: res.data.pointId,
-                        pointType: res.data.pointType,
-                        powerType: res.data.powerType,
-                      });
-                      console.log(this.selectedText, "$emit");
+                    this.selectedText.push({
+                          pointName: pos.pointName,
+                          pointId: pos.pointId,
+                          pointType: pos.pointTypeName,
+                          powerType: pos.powerTypeName,
+                    })
                       this.$emit("selection-changed", this.selectedText);
-                    });
+                    // selectIsIsolationPointById(pos.pointId).then((res) => {
+                    //   this.selectedText.push({
+                    //     pointName: res.data.pointName,
+                    //     pointId: res.data.pointId,
+                    //     pointType: res.data.pointType,
+                    //     powerType: res.data.powerType,
+                    //   });
+                    //   console.log(this.selectedText, "$emit");
+                    //   this.$emit("selection-changed", this.selectedText);
+                    // });
                   }
                 });
               } else {
@@ -282,7 +293,7 @@ export default {
           this.redtexts[labelText] = redtext; // 用文字作为键存储
 
           // 检查 this.getSelectSopPoints 是否包含当前点的 pointId
-          if (this.getSelectSopPoints.includes(pos.pointId.toString())) {
+          if (pos.state) {
             // 设置为选中状态
             this.selectedStates[labelText] = true;
             this.rects[labelText].visible(false);
@@ -297,44 +308,80 @@ export default {
               knovaImage.image(selectedImage); // 更新图像
               this.layer.draw(); // 更新图层
             };
-            // 将选中的 labelText 推入数组
-            this.$nextTick(() => {
-              getIsIsolationPointPage({ current: 1, size: 100 })
-                .then((res) => {
-                  const allPoints = res.data.records; // 假设返回的数据结构是 { records: [点数据] }
 
-                  // 根据 pos.pointId 查找对应的 pointType 和 powerType
-                  const pointInfo = allPoints.find(
-                    (point) => point.pointId == pos.pointId
-                  );
-
-                  if (pointInfo) {
-                    this.selectedText.push({
-                      pointName: labelText,
-                      pointId: pos.pointId,
-                      pointType: pointInfo.pointType,
-                      powerType: pointInfo.powerType,
-                    });
-                  } else {
-                    // 如果没有找到对应的点信息，可以处理这种情况
-                    console.warn(`未找到 pointId 为 ${pos.pointId} 的点信息`);
-                    this.selectedText.push({
-                      pointName: labelText,
-                      pointId: pos.pointId,
-                      pointType: "",
-                      powerType: "",
-                    });
-                  }
-                  // console.log(this.selectedText,'默认拿到的points')
-                  // 触发父组件的 selection-changed 事件
-                  this.$emit("selection-changed", this.selectedText);
-                })
-                .catch((error) => {
-                  console.error("获取隔离点信息失败", error);
-                });
+            // 将选中的 labelText 推入数组
+            this.selectedText.push({
+              pointName: pos.pointName,
+              pointId: pos.pointId,
+              pointType: pos.pointTypeName,
+              powerType: pos.powerTypeName,
             });
+          } else {
+            // 设置为未选中状态
+            this.selectedStates[labelText] = false;
+            this.rects[labelText].visible(true);
+            this.texts[labelText].visible(true);
+            this.redrects[labelText].visible(false);
+            this.redtexts[labelText].visible(false);
           }
 
+
+        // 触发父组件的 selection-changed 事件
+        this.$emit("selection-changed", this.selectedText);
+
+          // if (this.getSelectSopPoints.includes(pos.pointId.toString())) {
+          //   // 设置为选中状态
+          //   this.selectedStates[labelText] = true;
+          //   this.rects[labelText].visible(false);
+          //   this.texts[labelText].visible(false);
+          //   this.redrects[labelText].visible(true);
+          //   this.redtexts[labelText].visible(true);
+          //
+          //   // 切换图片为选中状态的图片
+          //   const selectedImage = new Image();
+          //   selectedImage.src = require("@/assets/images/localSetSelect.jpg"); // 选中的图片路径
+          //   selectedImage.onload = () => {
+          //     knovaImage.image(selectedImage); // 更新图像
+          //     this.layer.draw(); // 更新图层
+          //   };
+          //   // 将选中的 labelText 推入数组
+          //   this.$nextTick(() => {
+          //     getIsIsolationPointPage({ current: 1, size: 100 })
+          //       .then((res) => {
+          //         const allPoints = res.data.records; // 假设返回的数据结构是 { records: [点数据] }
+          //
+          //         // 根据 pos.pointId 查找对应的 pointType 和 powerType
+          //         const pointInfo = allPoints.find(
+          //           (point) => point.pointId == pos.pointId
+          //         );
+          //
+          //         if (pointInfo) {
+          //           this.selectedText.push({
+          //             pointName: labelText,
+          //             pointId: pos.pointId,
+          //             pointType: pointInfo.pointType,
+          //             powerType: pointInfo.powerType,
+          //           });
+          //         } else {
+          //           // 如果没有找到对应的点信息，可以处理这种情况
+          //           console.warn(`未找到 pointId 为 ${pos.pointId} 的点信息`);
+          //           this.selectedText.push({
+          //             pointName: labelText,
+          //             pointId: pos.pointId,
+          //             pointType: "",
+          //             powerType: "",
+          //           });
+          //         }
+          //         // console.log(this.selectedText,'默认拿到的points')
+          //         // 触发父组件的 selection-changed 事件
+          //         this.$emit("selection-changed", this.selectedText);
+          //       })
+          //       .catch((error) => {
+          //         console.error("获取隔离点信息失败", error);
+          //       });
+          //   });
+          // }
+
           this.layer.draw();
         };
       });

src/components/separationPoint/workshop.vue

@@ -68,28 +68,28 @@
     </div>
     <div class="leftbottom">
       <!-- <img src="../../assets/images/workshop.png" alt="" /> -->
-      <img :src="imgsrc" alt="" v-if="imgsrc" />
+      <img :src="imgsrc" alt="" v-if="imgsrc"/>
       <p v-else>—————— 请选择车间 ——————</p>
     </div>
   </div>
 </template>
 
 <script>
-import { listAllWorkshop } from "@/api/mes/md/workshop";
-import { getIsWorkareaList } from "@/api/mes/wa/workarea";
-import { selectIsSopById } from "@/api/mes/sop/sopindex";
-import { mapActions, mapGetters } from "vuex";
+import { listAllWorkshop } from '@/api/mes/md/workshop'
+import { getIsWorkareaList, getMapData } from '@/api/mes/wa/workarea'
+import { selectIsSopById } from '@/api/mes/sop/sopindex'
+import { mapActions, mapGetters } from 'vuex'
 
 export default {
   props: {
     sopProps: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
     jobProps: {
       type: Array,
-      default: () => [],
-    },
+      default: () => []
+    }
   },
   data() {
     return {
@@ -97,118 +97,123 @@ export default {
         checkAll: false,
         isIndeterminate: false,
         workShop: [],
-        producLine: "",
+        producLine: '',
+        sopId: ''
       },
       workShopOptions: [],
       producLineOptions: [],
-      imgsrc: "",
-    };
+      imgsrc: ''
+    }
   },
   watch: {
-    "form.workShop": {
+    'form.workShop': {
       handler(newVal) {
         if (newVal) {
-          this.imgsrc = localStorage.getItem("img");
+          this.imgsrc = localStorage.getItem('img')
         }
-      },
+      }
     },
     // 监听父组件传递的数据
     sopProps: {
       handler(newVal, oldVal) {
-        console.log("sopProps 发生变化", newVal);
-        this.form.workShop = newVal[0].workshopId;
-        this.form.producLine = newVal[0].workareaId;
+        console.log('sopProps 发生变化', newVal)
+        this.form.workShop = newVal[0].workshopId
+        this.form.producLine = newVal[0].workareaId
+
         // 确保 handleselect 完成后再调用 handleselectProductLine
         this.handleselect(newVal[0].workshopId)
           .then(() => {
-            this.handleselectProductLine(newVal[0].workareaId);
+            this.handleselectProductLine(newVal[0].workareaId)
           })
           .catch((error) => {
-            console.error("处理车间下拉失败", error);
-          });
+            console.error('处理车间下拉失败', error)
+          })
         // 这里是为了拿到sop模板里默认的隔离点选中的数据
         selectIsSopById(newVal[0].sopId).then((res) => {
-          console.log(res, "sop");
+          console.log(res, 'sop')
           const selectSopPoints = res.data.pointDetailVOList.map((item) => {
-            return item.pointId;
-          });
+            return item.pointId
+          })
           // 调用 Vuex action 来存储 selectSopPoints
-          this.setSelectSopPoints(selectSopPoints);
+          this.setSelectSopPoints(selectSopPoints)
 
-          this.setSopEdit(true);
-          console.log(selectSopPoints, "sop_selectePoints");
-        });
+          this.setSopEdit(true)
+          console.log(selectSopPoints, 'sop_selectePoints')
+        })
       },
-      immediate: true, // 立即执行一次，确保在组件初始化时也能捕获到 jobProps 的值
+      immediate: true // 立即执行一次，确保在组件初始化时也能捕获到 jobProps 的值
     },
     jobProps: {
       handler(newVal, oldVal) {
-        console.log("jobProps 发生变化", newVal);
+        console.log('jobProps 发生变化', newVal)
         // 在这里处理 jobProps 变化后的逻辑
-        this.form.workShop = newVal[0].workshopId;
-        this.form.producLine = newVal[0].workareaId;
+        this.form.workShop = newVal[0].workshopId
+        this.form.producLine = newVal[0].workareaId
+        this.form.sopId = newVal[0].sopId
+        console.log(this.form.sopId,'form.sopId jobProps')
         // 确保 handleselect 完成后再调用 handleselectProductLine
         this.handleselect(newVal[0].workshopId)
           .then(() => {
-            this.handleselectProductLine(newVal[0].workareaId);
+            this.handleselectProductLine(newVal[0].workareaId)
           })
           .catch((error) => {
-            console.error("处理车间下拉失败", error);
-          });
+            console.error('处理车间下拉失败', error)
+          })
 
         // 这里是为了拿到sop模板里默认的隔离点选中的数据a
         if (!newVal[0].EditBool) {
           selectIsSopById(newVal[0].sopId).then((res) => {
-            console.log(res, "sop");
+            console.log(res, 'sop')
             const selectSopPoints = res.data.pointDetailVOList.map((item) => {
-              return item.pointId;
-            });
+              return item.pointId
+            })
 
             // 调用 Vuex action 来存储 selectSopPoints
-            this.setSelectSopPoints(selectSopPoints);
-            this.setPointTableData(res.data);
+            this.setSelectSopPoints(selectSopPoints)
+            this.setPointTableData(res.data)
 
-            this.setSopEdit(false);
-            console.log(selectSopPoints, "sop_selectePoints");
-          });
+            this.setSopEdit(false)
+            console.log(selectSopPoints, 'sop_selectePoints')
+          })
         } else {
           const selectSopPoints = newVal[0].spoint.map((item) => {
-            return item.pointId;
-          });
-          this.setSelectSopPoints(selectSopPoints);
-          this.setPointTableData(newVal[0].spoint);
-          this.setSopEdit(true);
+            return item.pointId
+          })
+          this.setSelectSopPoints(selectSopPoints)
+          this.setPointTableData(newVal[0].spoint)
+          this.setSopEdit(true)
         }
       },
-      immediate: true, // 立即执行一次，确保在组件初始化时也能捕获到 jobProps 的值
-    },
+      immediate: true // 立即执行一次，确保在组件初始化时也能捕获到 jobProps 的值
+    }
   },
   mounted() {
-    this.getworkshopList();
+    this.getworkshopList()
   },
   computed: {
-    ...mapGetters("sopSelectPoints", ["getSopLook"]),
+    ...mapGetters('sopSelectPoints', ['getSopLook'])
   },
   methods: {
-    ...mapActions("sopSelectPoints", [
-      "setSelectSopPoints",
-      "setPointTableData",
-      "setSopEdit",
+    ...mapActions('sopSelectPoints', [
+      'setSelectSopPoints',
+      'setPointTableData',
+      'setSopEdit',
+      'setMapData'
     ]),
 
     // 获取车间列表
     getworkshopList() {
       listAllWorkshop().then((response) => {
-        console.log(response, "车间信息");
+        console.log(response, '车间信息')
         this.workShopOptions = response.data.map((item) => {
           return {
             label: item.workshopName,
             value: item.workshopId,
             key: item.workshopCode,
-            attr1: item.attr1,
-          };
-        });
-      });
+            attr1: item.attr1
+          }
+        })
+      })
     },
 
     // 单选车间下拉
@@ -221,45 +226,69 @@ export default {
                 label: item.workareaName,
                 value: item.workareaId,
                 key: item.workareaCode,
-                map: item.map,
-              };
-            });
+                map: item.map
+              }
+            })
 
             // 根据选择的车间更新 imgsrc
             const selectedWorkshop = this.workShopOptions.find(
               (item) => item.value === value
-            );
-            localStorage.setItem("img", selectedWorkshop.attr1);
+            )
+            localStorage.setItem('img', selectedWorkshop.attr1)
             if (selectedWorkshop) {
-              this.imgsrc = selectedWorkshop.attr1;
+              this.imgsrc = selectedWorkshop.attr1
             } else {
-              this.imgsrc = ""; // 如果没有找到，清空 imgsrc
+              this.imgsrc = '' // 如果没有找到，清空 imgsrc
             }
 
-            console.log(this.producLineOptions, "this.producLineOptions");
-            resolve(); // 异步操作成功后 resolve
+            console.log(this.producLineOptions, 'this.producLineOptions')
+            resolve() // 异步操作成功后 resolve
           })
           .catch((error) => {
-            console.error("获取生产线下拉列表失败", error);
-            reject(error); // 异步操作失败后 reject
-          });
-      });
+            console.error('获取生产线下拉列表失败', error)
+            reject(error) // 异步操作失败后 reject
+          })
+      })
     },
     // 生产线下拉
     handleselectProductLine(val) {
-      console.log(val, "生产线下拉");
+      console.log(val, '生产线下拉')
+      // 获取区域map解析数据
+      const data = val
+
+      let data1 = ''
+      let data2 = ''
+
+      if (this.$route.query.sopId !== 'null' && this.$route.query.sopId) {
+        data1 = this.$route.query.sopId
+      } else if (this.$route.query.ticketId !== 'null' && this.$route.query.ticketId) {
+        data2 = this.$route.query.ticketId // ticketId 存在时，data1 设置为空字符串
+      }
+console.log(this.form.sopId,'form.sopId')
+      if (this.form.sopId) {
+        data1 = this.form.sopId
+      }
+
+      getMapData(data, data1, data2).then((res) => {
+        console.log(res, '获取区域map的解析数据')
+        const mapdata = res.data
+        this.setMapData(mapdata)
+      }).catch((error) => {
+        console.error('获取区域map数据失败', error)
+      })
+
       //   利用组件逆传递 selectProductLine方法传递数据给兄弟组件
       const selectedOption = this.producLineOptions.filter((item) => {
-        return item.value == val;
-      });
+        return item.value == val
+      })
       const selectworkShop = this.workShopOptions.filter((item) => {
-        return item.value == this.form.workShop;
-      });
-      console.log(selectworkShop, selectedOption, "workshop-components");
+        return item.value == this.form.workShop
+      })
+      console.log(selectworkShop, selectedOption, 'workshop-components')
       // 触发自定义事件，传递 selectedOption[0] 数据给父组件
-      console.log(selectedOption, "selectedOption[0]", this.producLineOptions);
-      this.$emit("product-line-selected", selectedOption[0]);
-      this.$emit("work-shop-selected", selectworkShop[0]);
+      console.log(selectedOption, 'selectedOption[0]', this.producLineOptions)
+      this.$emit('product-line-selected', selectedOption[0])
+      this.$emit('work-shop-selected', selectworkShop[0])
     },
 
     // 多选车间下拉框选择事件
@@ -279,20 +308,21 @@ export default {
     // 全选事件
     handleCheckAllChange(val) {
       const data = this.workShopOptions.map((item) => {
-        return item.value;
-      });
-      this.form.workShop = val ? data : [];
-      this.isIndeterminate = false;
-    },
-  },
-};
+        return item.value
+      })
+      this.form.workShop = val ? data : []
+      this.isIndeterminate = false
+    }
+  }
+}
 </script>
 
-<style scoped lang='scss'>
+<style scoped lang="scss">
 .leftcon {
   width: 100%;
   height: 100%;
   background-size: 100% 100%;
+
   .lefttop {
     width: 100%;
     height: 60px;
@@ -302,10 +332,12 @@ export default {
     width: 1100px;
     height: 780px;
     margin: -16px 0 0 60px;
+
     img {
       width: 100%;
       height: 100%;
     }
+
     p {
       text-align: center;
       margin: 30% 0;

src/store/modules/sopSelectPoints.js

@@ -6,7 +6,7 @@ const state = {
   sopTitle: '',
   ticketTitle: '',
   sopLook: false,
-  
+  MapData:null,
 };
 
 const mutations = {
@@ -28,7 +28,9 @@ const mutations = {
   setSopLook(state, points) {
     state.sopLook = points;
   },
- 
+  setMapData(state, points) {
+    state.MapData = points;
+  }
 };
 
 const actions = {
@@ -50,7 +52,9 @@ const actions = {
   setSopLook({ commit }, points) {
     commit('setSopLook', points);
   },
-
+  setMapData({ commit }, points) {
+    commit('setMapData', points);
+  }
 };
 
 const getters = {
@@ -60,7 +64,7 @@ const getters = {
   getSopTitle: state => state.sopTitle,
   getTicketTitle: state => state.ticketTitle,
   getSopLook: state => state.sopLook,
-  
+  getMapData:state=>state.MapData
 };
 
 export default {

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

@@ -165,10 +165,11 @@
                       </el-table-column>
                       <el-table-column prop="pointType" label="隔离点类型">
                         <template slot-scope="scope">
-                          <dict-tag
-                            :options="dict.type.point_type"
-                            :value="scope.row.pointType"
-                          />
+                          {{scope.row.pointType}}
+<!--                          <dict-tag-->
+<!--                            :options="dict.type.point_type"-->
+<!--                            :value="scope.row.pointType"-->
+<!--                          />-->
                         </template>
                       </el-table-column>
                       <el-table-column
@@ -177,10 +178,11 @@
                         width="100"
                       >
                         <template slot-scope="scope">
-                          <dict-tag
-                            :options="dict.type.power_type"
-                            :value="scope.row.powerType"
-                          />
+                          {{scope.row.powerType}}
+<!--                          <dict-tag-->
+<!--                            :options="dict.type.power_type"-->
+<!--                            :value="scope.row.powerType"-->
+<!--                          />-->
                         </template>
                       </el-table-column>
                     </el-table>
@@ -253,7 +255,7 @@
                       />
                     </el-select>
                   </el-form-item>
-                  <!-- 
+                  <!--
                   <el-form-item label="共锁人" prop="coLocker">
                     <el-select
                       v-model="form.coLocker"
@@ -703,6 +705,7 @@ export default {
     },
     // sop下拉change事件
     handleSelectSOP(value) {
+
       this.jobProps = this.sopOptions.filter((item) => item.sopId == value);
       console.log(this.jobProps, "父组件jobProps");
     },

src/views/mes/md/workarea/MapData.vue

@@ -35,7 +35,7 @@
 
 <script>
 import Konva from "konva";
-import { getWorkareaInfo,updateWorkarea } from '@/api/mes/wa/workarea'
+import { getWorkareaInfo,updateWorkarea,getMapData } from '@/api/mes/wa/workarea'
 
 export default {
   name: "KonvaExample",
@@ -77,14 +77,19 @@ export default {
     },
     getWorkAreaInfo(){
       const workareaId=this.$route.query.workareaId;
-      getWorkareaInfo(workareaId).then(response => {
+      const sopId=''
+      const ticketId=''
+      getWorkareaInfo(workareaId).then((response) => {
+        console.log(response,'工作区域信息')
+        this.form=response.data
+      })
+      getMapData(workareaId,sopId,ticketId).then(response => {
         console.log(response,'工作区域预览接口调用');
-        this.form=response.data;
+        this.form.map=response.data;
 
-        if (response.data.map) {
+        if (response.data) {
           try {
-            let map = JSON.parse(response.data.map)
-            this.value = JSON.stringify(map, null, 4)
+            this.value = JSON.stringify(response.data, null, 4);
             this.orignData=this.value
           } catch (err) {}
         }
@@ -117,8 +122,13 @@ export default {
       }).then(() => {
         // 校验 this.value 是否为有效的 JSON
         if (this.isJson(this.value)) {
-          this.form.map = this.value;
-          updateWorkarea(this.form).then(response => {
+          const mapData = typeof this.value === 'string' ? this.value : JSON.stringify(this.value);
+          const formData = {
+            ...this.form,
+            map: mapData
+          };
+          console.log( formData,'map')
+          updateWorkarea(formData).then(response => {
             console.log(response, '修改车间区域地图');
             this.$router.push('/mes/md/workarea');
             this.$message({

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

@@ -147,10 +147,11 @@
                       </el-table-column>
                       <el-table-column prop="pointType" label="隔离点类型">
                         <template slot-scope="scope">
-                          <dict-tag
-                            :options="dict.type.point_type"
-                            :value="scope.row.pointType"
-                          />
+                          {{scope.row.pointType}}
+<!--                          <dict-tag-->
+<!--                            :options="dict.type.point_type"-->
+<!--                            :value="scope.row.pointType"-->
+<!--                          />-->
                         </template>
                       </el-table-column>
                       <el-table-column
@@ -159,10 +160,11 @@
                         width="100"
                       >
                         <template slot-scope="scope">
-                          <dict-tag
-                            :options="dict.type.power_type"
-                            :value="scope.row.powerType"
-                          />
+                          {{scope.row.powerType}}
+<!--                          <dict-tag-->
+<!--                            :options="dict.type.power_type"-->
+<!--                            :value="scope.row.powerType"-->
+<!--                          />-->
                         </template>
                       </el-table-column>
                     </el-table>