隔离点与车间切换保持内容被填充

src/components/ImageUpload/index.vue

@@ -94,7 +94,8 @@ export default {
           this.fileList = list.map(item => {
             if (typeof item === "string") {
               if (item.indexOf(this.baseUrl) === -1) {
-                  item = { name: this.baseUrl + item, url: this.baseUrl + item };
+                  // item = { name: this.baseUrl + item, url: this.baseUrl + item };
+                item={name: item, url: item}
               } else {
                   item = { name: item, url: item };
               }

src/components/separationPoint/index.vue

@@ -3,20 +3,20 @@
 </template>
 
 <script>
-import Konva from "konva";
+import Konva from 'konva'
 import {
   selectIsIsolationPointById,
-  getIsIsolationPointPage,
-} from "@/api/mes/spm/segregationPoint";
-import { mapGetters } from "vuex";
+  getIsIsolationPointPage
+} from '@/api/mes/spm/segregationPoint'
+import { mapGetters } from 'vuex'
 
 export default {
-  name: "KonvaExample",
+  name: 'KonvaExample',
   props: {
     points: {
       type: Object,
-      default: null,
-    },
+      default: null
+    }
   },
   data() {
     return {
@@ -27,29 +27,36 @@ export default {
       rects: [], //白色rect合集
       texts: [], //白色text合集
       redrects: [], //红色rect合集
-      redtexts: [], //白色text合集
-    };
+      redtexts: [] //白色text合集
+    }
+  },
+  watch: {
+    'getMapData': {
+      handler(newval) {
+        if (newval) {
+          this.initKonva()
+        }
+      }
+    }
   },
-
   mounted() {
-    this.initKonva();
-    console.log(this.points, "points");
-    console.log(this.getMapData,'Mapdata')
+    this.initKonva()
+    console.log(this.points, 'points')
+    console.log(this.getMapData, 'Mapdata')
     console.log(
       this.getSelectSopPoints,
       this.getSopEdit,
       this.getSopLook,
-
-      "getSopEdit - getSelectSopPoints"
-    );
+      'getSopEdit - getSelectSopPoints'
+    )
   },
   computed: {
-    ...mapGetters("sopSelectPoints", [
-      "getSelectSopPoints",
-      "getSopEdit",
-      "getSopLook",
-      "getMapData"
-    ]),
+    ...mapGetters('sopSelectPoints', [
+      'getSelectSopPoints',
+      'getSopEdit',
+      'getSopLook',
+      'getMapData'
+    ])
   },
   methods: {
     initKonva() {
@@ -57,15 +64,15 @@ export default {
       this.stage = new Konva.Stage({
         container: this.$refs.container, // 容器元素
         width: 1270,
-        height: 830,
-      });
+        height: 830
+      })
 
       // 创建图层
-      this.layer = new Konva.Layer();
+      this.layer = new Konva.Layer()
 
       // 创建底图
-      const bgImage = new Image();
-      bgImage.src = require("@/assets/images/table.png");
+      const bgImage = new Image()
+      bgImage.src = require('@/assets/images/table.png')
       bgImage.onload = () => {
         const knovaImage = new Konva.Image({
           x: 330,
@@ -73,40 +80,40 @@ export default {
           image: bgImage,
           width: 500,
           height: 790,
-          draggable: false,
-        });
-        this.layer.add(knovaImage);
-        this.layer.draw();
-      };
+          draggable: false
+        })
+        this.layer.add(knovaImage)
+        this.layer.draw()
+      }
 
       // 绘制无限网格
-      this.drawGrid(50, 50, "#e0e0e0"); // 每个单元格50x50，浅灰色网格
+      this.drawGrid(50, 50, '#e0e0e0') // 每个单元格50x50，浅灰色网格
 
       // 渲染数据
-      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 = 1270;
-      const height = 830;
+      const width = 1270
+      const height = 830
 
       // 绘制竖线
       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)
       }
 
       // 绘制横线
@@ -114,47 +121,47 @@ 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)
       }
 
-      this.layer.draw();
+      this.layer.draw()
     },
 
     renderGrid(imageSrc) {
-      this.selectedStates = {}; // 用对象来存储选中状态，键为文字内容
-      this.rects = {};
-      this.texts = {};
-      this.redrects = {};
-      this.redtexts = {};
-      this.selectedText = [];
+      this.selectedStates = {} // 用对象来存储选中状态，键为文字内容
+      this.rects = {}
+      this.texts = {}
+      this.redrects = {}
+      this.redtexts = {}
+      this.selectedText = []
 
       // const positions = JSON.parse(this.points.map);
-      const positions=this.getMapData
-      console.log(positions, "positions");
+      const positions = this.getMapData
+      console.log(positions, 'positions')
 
       // 检查 this.getSelectSopPoints 是否有内容
-      const isLocked = this.getSelectSopPoints.length > 0;
+      const isLocked = this.getSelectSopPoints.length > 0
 
       // 添加或移除全局点击事件监听器 this.getSopEdit这是vuex里判断是否可以选择隔离点的操作
 
       if (isLocked && this.getSopEdit == true) {
-        this.layer.on("click", (e) => {
-          e.cancelBubble = true; // 阻止事件冒泡
+        this.layer.on('click', (e) => {
+          e.cancelBubble = true // 阻止事件冒泡
           // e.stopPropagation(); // 阻止事件传播
-        });
+        })
       } else {
-        this.layer.off("click"); // 移除全局点击事件监听器
+        this.layer.off('click') // 移除全局点击事件监听器
       }
 
       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.src = imageSrc;
         point.onload = () => {
           const knovaImage = new Konva.Image({
@@ -163,27 +170,27 @@ export default {
             image: point,
             width: 50,
             height: 50,
-            draggable: false,
-          });
+            draggable: false
+          })
           // 添加点击事件，仅当 getSopEdit 为 true 时才允许点击a
           if (this.getSopEdit == true && this.getSopLook == false) {
-            knovaImage.on("click", () => {
+            knovaImage.on('click', () => {
               // 切换选中状态，基于文本内容
-              this.selectedStates[labelText] = !this.selectedStates[labelText];
+              this.selectedStates[labelText] = !this.selectedStates[labelText]
 
               if (this.selectedStates[labelText]) {
                 // 选中状态，显示红色矩形和文字，切换为选中的图片
-                this.rects[labelText].visible(false);
-                this.texts[labelText].visible(false);
-                this.redrects[labelText].visible(true);
-                this.redtexts[labelText].visible(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");
+                const selectedImage = new Image()
+                selectedImage.src = require('@/assets/images/localSetSelect.jpg')
                 selectedImage.onload = () => {
-                  knovaImage.image(selectedImage); // 更新图像
-                  this.layer.draw(); // 更新图层
-                };
+                  knovaImage.image(selectedImage) // 更新图像
+                  this.layer.draw() // 更新图层
+                }
 
                 // 获取隔离点信息，并将选中的 labelText 推入数组
 
@@ -193,12 +200,12 @@ export default {
                     this.$route.query.ticketId !== null
                   ) {
                     this.selectedText.push({
-                          pointName: pos.pointName,
-                          pointId: pos.pointId,
-                          pointType: pos.pointTypeName,
-                          powerType: pos.powerTypeName,
+                      pointName: pos.pointName,
+                      pointId: pos.pointId,
+                      pointType: pos.pointTypeName,
+                      powerType: pos.powerTypeName
                     })
-                      this.$emit("selection-changed", this.selectedText);
+                    this.$emit('selection-changed', this.selectedText)
                     // selectIsIsolationPointById(pos.pointId).then((res) => {
                     //   this.selectedText.push({
                     //     pointName: res.data.pointName,
@@ -210,35 +217,35 @@ export default {
                     //   this.$emit("selection-changed", this.selectedText);
                     // });
                   }
-                });
+                })
               } else {
                 // 取消选中状态，恢复普通矩形和文字，切换为未选中的图片
-                this.rects[labelText].visible(true);
-                this.texts[labelText].visible(true);
-                this.redrects[labelText].visible(false);
-                this.redtexts[labelText].visible(false);
+                this.rects[labelText].visible(true)
+                this.texts[labelText].visible(true)
+                this.redrects[labelText].visible(false)
+                this.redtexts[labelText].visible(false)
 
-                const normalImage = new Image();
-                normalImage.src=pos.pointIcon
+                const normalImage = new Image()
+                normalImage.src = pos.pointIcon
                 // normalImage.src = imageSrc; // 未选中的默认图片路径
                 normalImage.onload = () => {
-                  knovaImage.image(normalImage); // 更新图像
-                  this.layer.draw(); // 更新图层
-                };
+                  knovaImage.image(normalImage) // 更新图像
+                  this.layer.draw() // 更新图层
+                }
 
                 // 从选中数组中移除该项
                 this.selectedText = this.selectedText.filter(
                   (item) => item.pointName !== labelText
-                );
+                )
               }
 
               // 确保图层重新渲染
-              this.layer.draw();
-              this.$emit("selection-changed", this.selectedText);
-            });
+              this.layer.draw()
+              this.$emit('selection-changed', this.selectedText)
+            })
           }
 
-          this.layer.add(knovaImage);
+          this.layer.add(knovaImage)
 
           // 普通矩形
           const rect = new Konva.Rect({
@@ -247,12 +254,12 @@ export default {
             width: 60,
             height: 25,
             cornerRadius: 10,
-            stroke: "red",
+            stroke: 'red',
             strokeWidth: 2,
-            fill: "white",
-          });
-          this.layer.add(rect);
-          this.rects[labelText] = rect; // 用文字作为键存储
+            fill: 'white'
+          })
+          this.layer.add(rect)
+          this.rects[labelText] = rect // 用文字作为键存储
 
           // 普通文字
           const text = new Konva.Text({
@@ -260,11 +267,11 @@ export default {
             y: y + 60,
             fontSize: 20,
             text: labelText,
-            fontFamily: "Calibri",
-            fill: "red",
-          });
-          this.layer.add(text);
-          this.texts[labelText] = text; // 用文字作为键存储
+            fontFamily: 'Calibri',
+            fill: 'red'
+          })
+          this.layer.add(text)
+          this.texts[labelText] = text // 用文字作为键存储
 
           // 红色矩形（初始隐藏）
           const redrect = new Konva.Rect({
@@ -273,13 +280,13 @@ export default {
             width: 60,
             height: 25,
             cornerRadius: 10,
-            stroke: "red",
+            stroke: 'red',
             strokeWidth: 2,
-            fill: "red",
-            visible: false,
-          });
-          this.layer.add(redrect);
-          this.redrects[labelText] = redrect; // 用文字作为键存储
+            fill: 'red',
+            visible: false
+          })
+          this.layer.add(redrect)
+          this.redrects[labelText] = redrect // 用文字作为键存储
 
           // 红色文字（初始隐藏）
           const redtext = new Konva.Text({
@@ -287,49 +294,48 @@ export default {
             y: y + 60,
             fontSize: 20,
             text: labelText,
-            fontFamily: "Calibri",
-            fill: "white",
-            visible: false,
-          });
-          this.layer.add(redtext);
-          this.redtexts[labelText] = redtext; // 用文字作为键存储
+            fontFamily: 'Calibri',
+            fill: 'white',
+            visible: false
+          })
+          this.layer.add(redtext)
+          this.redtexts[labelText] = redtext // 用文字作为键存储
 
           // 检查 this.getSelectSopPoints 是否包含当前点的 pointId
           if (pos.state) {
             // 设置为选中状态
-            this.selectedStates[labelText] = true;
-            this.rects[labelText].visible(false);
-            this.texts[labelText].visible(false);
-            this.redrects[labelText].visible(true);
-            this.redtexts[labelText].visible(true);
+            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"); // 选中的图片路径
+            const selectedImage = new Image()
+            selectedImage.src = require('@/assets/images/localSetSelect.jpg') // 选中的图片路径
             selectedImage.onload = () => {
-              knovaImage.image(selectedImage); // 更新图像
-              this.layer.draw(); // 更新图层
-            };
+              knovaImage.image(selectedImage) // 更新图像
+              this.layer.draw() // 更新图层
+            }
 
             // 将选中的 labelText 推入数组
             this.selectedText.push({
               pointName: pos.pointName,
               pointId: pos.pointId,
               pointType: pos.pointTypeName,
-              powerType: pos.powerTypeName,
-            });
+              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);
+            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);
+          // 触发父组件的 selection-changed 事件
+          this.$emit('selection-changed', this.selectedText)
 
           // if (this.getSelectSopPoints.includes(pos.pointId.toString())) {
           //   // 设置为选中状态
@@ -384,14 +390,14 @@ export default {
           //   });
           // }
 
-          this.layer.draw();
-        };
-      });
-    },
+          this.layer.draw()
+        }
+      })
+    }
 
     //     methods结束
-  },
-};
+  }
+}
 </script>
 
 <style scoped lang="scss">

src/components/separationPoint/workshop.vue

@@ -103,6 +103,7 @@ export default {
       workShopOptions: [],
       producLineOptions: [],
       imgsrc: "",
+
     };
   },
   watch: {
@@ -112,6 +113,7 @@ export default {
           this.imgsrc = localStorage.getItem("img");
         }
       },
+
     },
     // 监听父组件传递的数据
     sopProps: {
@@ -188,6 +190,7 @@ export default {
     },
   },
   mounted() {
+
     this.getworkshopList();
   },
   computed: {
@@ -235,6 +238,7 @@ export default {
               (item) => item.value === value
             );
             localStorage.setItem("img", selectedWorkshop.attr1);
+
             if (selectedWorkshop) {
               this.imgsrc = selectedWorkshop.attr1;
             } else {
@@ -248,12 +252,13 @@ export default {
             console.error("获取生产线下拉列表失败", error);
             reject(error); // 异步操作失败后 reject
           });
-        this.form.producLine = "";
+
       });
     },
     // 生产线下拉
     handleselectProductLine(val) {
       console.log(val, "生产线下拉");
+
       // 获取区域map解析数据
       const data = val;
 
@@ -290,6 +295,8 @@ export default {
       const selectworkShop = this.workShopOptions.filter((item) => {
         return item.value == this.form.workShop;
       });
+      // 这里两个赋值是为了方式页面切换数据丢失
+
       console.log(selectworkShop, selectedOption, "workshop-components");
       // 触发自定义事件，传递 selectedOption[0] 数据给父组件
       console.log(selectedOption, "selectedOption[0]", this.producLineOptions);

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

@@ -4,17 +4,21 @@
     <div class="left">
       <!--        左边第一个是隔离点组件-->
       <!--        第二个是车间组件-->
+
       <SeparationPoint
-        v-if="this.activeName == 'second'"
+        v-show="this.activeName == 'second'"
         @selection-changed="handleSelectPoint"
         :points="points"
       ></SeparationPoint>
-      <WorkShop
-        v-if="this.activeName == 'first' || this.activeName == 'third'"
-        @product-line-selected="handleProductLineSelected"
-        @work-shop-selected="handleWorkshopSelected"
-        :jobProps="jobProps"
-      ></WorkShop>
+      <keep-alive>
+        <WorkShop
+          v-show="this.activeName == 'first' || this.activeName == 'third'"
+          @product-line-selected="handleProductLineSelected"
+          @work-shop-selected="handleWorkshopSelected"
+          :jobProps="jobProps"
+        ></WorkShop>
+      </keep-alive>
+
     </div>
     <div class="right">
       <div class="right_top">
@@ -549,6 +553,7 @@ export default {
       },
       deep: true,
     },
+
   },
   computed: {
     ...mapGetters("sopSelectPoints", [
@@ -952,6 +957,8 @@ export default {
           if (res.code === 200) {
             // this.$router.go(-1);
             this.$router.push("/job/jobm");
+            localStorage.removeItem('workshopId')
+            localStorage.removeItem('workareaId')
           } else {
             console.error("编辑工单失败", res);
           }

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

@@ -2,21 +2,26 @@
   <div class="newOperations">
     <!--    newOperations盒子开始-->
     <div class="left">
-      <keep-alive>
+
         <!-- 车间 -->
+      <keep-alive>
         <SopLeft
-          v-if="this.activeName == 'first'"
+          v-show="this.activeName == 'first'"
           @product-line-selected="handleProductLineSelected"
           @work-shop-selected="handleWorkshopSelected"
           :sopProps="sopProps"
-        />
-        <!-- 隔离点 -->
+        ></SopLeft>
+      </keep-alive>
+        <!-- 隔离点 style="position: relative;z-index:0"-->
+
         <IsolationLeftVue
-          v-else
+          v-show="this.activeName == 'second'"
           :points="points"
           @selection-changed="handleSelectPoint"
-        />
-      </keep-alive>
+        ></IsolationLeftVue>
+
+
+
     </div>
     <div class="right">
       <div class="right_top">