隔离点组件传递车间数据

src/components/separationPoint/index.vue

@@ -4,9 +4,16 @@
 
 <script>
 import Konva from "konva";
+import {mapGetters} from 'vuex'
 
 export default {
   name: "KonvaExample",
+  props: {
+    points: {
+      type: Object,
+      default: null
+    }
+  },
   data() {
     return {
       stage: null,
@@ -19,6 +26,8 @@ export default {
       redtexts:[],//白色text合集
     };
   },
+
+
   mounted() {
     this.initKonva();
   },
@@ -100,27 +109,31 @@ export default {
       this.redtexts = {};
       this.selectedText = [];
 
-      const positions = [
-        { row: 2, col: 9 }, // E-1
-        { row: 2, col: 11 }, // E-2
-        { row: 2, col: 13 }, // E-3
-        { row: 4, col: 9 }, // E-4
-        { row: 4, col: 11 }, // E-5
-        { row: 4, col: 13 }, // E-6
-        { row: 6, col: 9 }, // E-7
-        { row: 6, col: 11 }, // E-8
-        { row: 6, col: 13 }, // E-9
-        { row: 8, col: 9 }, // E-10
-        { row: 8, col: 11 }, // E-11
-        { row: 8, col: 13 }, // E-12
-        { row: 10, col: 9 }, // E-13
-        { row: 10, col: 11 }, // E-14
-        { row: 10, col: 13 }, // E-15
-        { row: 12, col: 9 }, // E-16
-        { row: 12, col: 11 }, // E-17
-        { row: 12, col: 13 }, // E-18
-      ];
-
+      const positions=JSON.parse(this.points.map)
+      console.log(positions,'this.points')
+      // const positions = [
+      //   { row: 2, col: 9 },
+      //   { row: 2, col: 11 },
+      //   { row: 2, col: 13 },
+      //   { row: 4, col: 9 },
+      //   { row: 4, col: 11 },
+      //   { row: 4, col: 13 },
+      //   { row: 6, col: 9 },
+      //   { row: 6, col: 11 },
+      //   { row: 6, col: 13 },
+      //   { row: 8, col: 9 },
+      //   { row: 8, col: 11 },
+      //   { row: 8, col: 13 },
+      //   { row: 10, col: 9 },
+      //   { row: 10, col: 11 },
+      //   { row: 10, col: 13 },
+      //   { row: 12, col: 9 },
+      //   { row: 12, col: 11 },
+      //   { row: 12, col: 13 },
+      // ];
+      // const positionsJson = JSON.stringify(positions);
+
+      // console.log(positionsJson,'json');
       positions.forEach((pos, index) => {
         const x = pos.col * 50; // 每个单元格宽度为50
         const y = pos.row * 50; // 每个单元格高度为50

src/components/separationPoint/workshop.vue

@@ -42,7 +42,7 @@
 <!--        </el-select>-->
       </el-form-item>
       <el-form-item label="生产线">
-        <el-select v-model="form.producLine" placeholder="请选择生产线">
+        <el-select v-model="form.producLine" placeholder="请选择生产线" @change="handleselectProductLine">
           <el-option
             v-for="item in this.producLineOptions"
             :key="item.value"
@@ -59,6 +59,8 @@
 <script>
 import { listAllWorkshop } from '@/api/mes/md/workshop'
 import {getIsWorkareaList} from "@/api/mes/wa/workarea"
+import {mapActions} from 'vuex'
+
 export default {
   data() {
     return {
@@ -75,13 +77,11 @@ export default {
         { label: "士力架包装车间4号", value: "4" },
       ],
       producLineOptions: [
-        { label: "打包线1", value: "1" },
-        { label: "打包线2", value: "2" },
-        { label: "打包线3", value: "3" },
-        { label: "打包线4", value: "4" },
+
       ],
     };
   },
+
   mounted() {
     this.getworkshopList()
   },
@@ -98,6 +98,7 @@ export default {
         });
       })
     },
+
     // 单选车间下拉
     handleselect(value){
       getIsWorkareaList(value).then(response => {
@@ -105,11 +106,25 @@ export default {
           return {
             label:item.workareaName,
             value:item.workareaId,
-            key:item.workareaCode
+            key:item.workareaCode,
+            map:item.map
           }
         })
+
+
+      })
+    },
+    // 生产线下拉
+    handleselectProductLine(val){
+      console.log(val,'生产线下拉')
+      //   利用vuex selectProductLine方法传递数据给兄弟组件
+      const selectedOption=this.producLineOptions.filter((item)=>{
+        return item.value === val
       })
+      // 触发自定义事件，传递 selectedOption[0] 数据给父组件
+      this.$emit('product-line-selected', selectedOption[0]);
     },
+
     // 多选车间下拉框选择事件
     // handleSelect(value) {
     //   console.log(value, "value");

src/store/index.js

@@ -15,7 +15,8 @@ const store = new Vuex.Store({
     user,
     tagsView,
     permission,
-    settings
+    settings,
+
   },
   getters
 })

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

@@ -7,9 +7,11 @@
       <SeparationPoint
         v-if="this.activeName == 'second'"
         @selection-changed="handleSelectPoint"
+        :points="points"
       ></SeparationPoint>
       <WorkShop
         v-if="this.activeName == 'first' || this.activeName == 'third'"
+        @product-line-selected="handleProductLineSelected"
       ></WorkShop>
     </div>
     <div class="right">
@@ -304,9 +306,11 @@ import SeparationPoint from "@/components/separationPoint/index.vue";
 import WorkShop from "@/components/separationPoint/workshop.vue";
 import {listJobTicket,getJobTicketInfo,addJobTicket,updateJobTicket,deleteIsJobTicket,getworkareaList} from "@/api/mes/job/job"
 import {listAllWorkshop} from "@/api/mes/md/workshop"
+import IsolationLeftVue from '@/components/separationPoint/index.vue'
 export default {
   name: "addView",
   components: {
+    IsolationLeftVue,
     SeparationPoint,
     WorkShop,
   },
@@ -368,7 +372,7 @@ export default {
       // 弹框中显示的form表单内容
       insideMumber: false,
       outsideMumber: false,
-
+      points:null,//逆向传递拿到隔离点的数据
     };
   },
   mounted() {
@@ -418,7 +422,12 @@ export default {
       // 更新 form.spoint 为最新选中的隔离点数组
       this.form.spoint = points.map((point) => point.value);
     },
-
+    //   车间子组件逆向传递隔离点数量和布局
+    
+    handleProductLineSelected(selectedOption) {
+      console.log(selectedOption, '父组件接收到的 selectedOption');
+      this.points = selectedOption;
+    },
     // 添加内部人员
     addInside() {
       this.open = true;

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

@@ -3,8 +3,8 @@
     <!--    newOperations盒子开始-->
     <div class="left">
       <!-- <h1>我是左边</h1> -->
-      <SopLeft v-if="this.activeName == 'first'" />
-      <IsolationLeftVue v-else @selection-changed="handleSelectPoint" />
+      <SopLeft v-if="this.activeName == 'first'"  @product-line-selected="handleProductLineSelected"/>
+      <IsolationLeftVue v-else :points="points"  @selection-changed="handleSelectPoint" />
     </div>
     <div class="right">
       <div class="right_top">
@@ -199,11 +199,12 @@ export default {
       ],
       // 右侧底部已选隔离点
       tableData: [],
+      points:null,//车间逆向传递拿到的隔离点数据
     };
   },
   methods: {
     handleClick(tab, event) {
-      console.log(tab, event);
+      // console.log(tab, event);
     },
     preStep() {
       this.activeName = "first";
@@ -213,7 +214,6 @@ export default {
       console.log("我点击了下一步");
     },
     // 子组件逆向传递选中的隔离点
-    // 子组件逆向传递选中的隔离点
     handleSelectPoint(points) {
       console.log(points, "逆向传递选中的隔离点");
 
@@ -243,7 +243,11 @@ export default {
       // 更新 form.spoint 为最新选中的隔离点数组
       this.form.spoint = points.map((point) => point.value);
     },
-
+    // 车间你逆向传递拿到的隔离点数据
+    handleProductLineSelected(selectedOption) {
+      console.log(selectedOption, '父组件接收到的 selectedOption');
+      this.points = selectedOption;
+    },
     //   methods结束
   },
 };