新增作业票隔离点逆向传值修改

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

@@ -4,8 +4,8 @@
       <div class="left" >
 <!--        左边第一个是隔离点组件-->
 <!--        第二个是车间组件-->
-        <SeparationPoint v-if="activeName=='second'"></SeparationPoint>
-        <WorkShop v-if="activeName=='first'"></WorkShop>
+        <SeparationPoint v-if="this.activeName=='second'" @selection-changed="handleSelectPoint"></SeparationPoint>
+        <WorkShop v-if="this.activeName=='first'||this.activeName=='third'"></WorkShop>
       </div>
       <div class="right">
         <div class="right_top">
@@ -69,7 +69,7 @@
                      <el-input type="textarea" v-model="form.workContent" :row="3"></el-input>
                     </el-form-item>
                     <el-form-item label="" prop="">
-                      <el-button style="float: right;height: 30px;line-height: 10px" type="primary" @click="nextStep">下一步</el-button>
+                      <el-button style="float: right;height: 30px;line-height: 10px" type="primary" @click="nextStep('second')">下一步</el-button>
                     </el-form-item>
                   </el-form>
                 </el-tab-pane>
@@ -97,10 +97,10 @@
                         placeholder="已选隔离点"
                         clearable
                         style="width: 100%"
-
+                        multiple
                       >
                         <el-option
-                          v-for="dict in this.hardwareTypeOption"
+                          v-for="dict in this.selectPoint"
                           :key="dict.value"
                           :label="dict.label"
                           :value="dict.value"
@@ -109,16 +109,14 @@
                     </el-form-item>
 
                     <el-form-item label="" prop="" style="margin-top: 45%">
-                      <el-button style="float: right;height: 30px;line-height: 10px" type="primary" @click="nextStep">下一步</el-button>
-                      <el-button plain style="float: right;height: 30px;line-height: 10px;margin-right: 19%" type="primary" @click="nextStep">下一步</el-button>
-
+                      <el-button style="float: right;height: 30px;line-height: 10px"  type="primary" @click="nextStep('third')">下一步</el-button>
+                      <el-button plain style="float: right;height: 30px;line-height: 10px;margin-right: 19%" type="primary" @click="previousStep('first')">上一步</el-button>
                     </el-form-item>
                   </el-form>
                 </el-tab-pane>
                 <el-tab-pane label="人员选择" name="third">
                   <!--                  人员选择-->
                   <el-form ref="form" :model="form"  label-width="70px">
-
                     <el-form-item label="上锁人" prop="locker">
                       <el-select
                         v-model="form.locker"
@@ -174,7 +172,7 @@
                       </el-date-picker>
                     </el-form-item>
                     <el-form-item label="" prop="" style="margin-top: 12%">
-                      <el-button style="float: right;height: 30px;line-height: 10px" type="primary" @click="nextStep">完 成</el-button>
+                      <el-button style="float: right;height: 30px;line-height: 10px" type="primary" @click="confirm">完 成</el-button>
                     </el-form-item>
                   </el-form>
                 </el-tab-pane>
@@ -188,8 +186,23 @@
             <div slot="header" class="clearfix">
               <span style="font-size: 18px">已选隔离点</span>
             </div>
-            <div v-for="o in 4" :key="o" class="text item">
-              {{'列表内容 ' + o }}
+<!--            <div v-for="o in 4" :key="o" class="text item">-->
+<!--              {{'列表内容 ' + o }}-->
+<!--            </div>-->
+            <div class="text item">
+              <el-table :data="tableData" stripe height="250" style="width: 100%" >
+                <el-table-column prop="id" label="序号" width="60">
+                </el-table-column>
+                <el-table-column prop="point" label="已选隔离点">
+                  <template slot-scope="scope">
+                    <span style="color: #2a87ff">{{ scope.row.point }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="isolation" label="隔离方式">
+                </el-table-column>
+                <el-table-column prop="type" label="危险能量类型" width="100">
+                </el-table-column>
+              </el-table>
             </div>
           </el-card>
         </div>
@@ -227,6 +240,57 @@ export default {
         endTime:'',//结束时间
       },
       hardwareTypeOption:null,
+      selectPoint:[
+        {
+          label:'E-1',
+          value:1
+        },
+        {
+          label:'E-2',
+          value:2
+        },
+        {
+          label:'E-3',
+          value:3
+        },
+        {
+          label:'E-4',
+          value:4
+        },
+        {
+          label:'E-5',
+          value:5
+        },
+        {
+          label:'E-6',
+          value:6
+        },
+        {
+          label:'E-7',
+          value:7
+        }
+      ],
+      // 已选隔离点
+      tableData: [
+        {
+          id: 1,
+          point: "E-1",
+          isolation: "挂锁",
+          type: "电能",
+        },
+        {
+          id: 2,
+          point: "E-2",
+          isolation: "挂锁",
+          type: "电能",
+        },
+        {
+          id: 3,
+          point: "E-3",
+          isolation: "挂锁",
+          type: "电能",
+        },
+      ],
       pickerOptions: {
         shortcuts: [{
           text: '今天',
@@ -252,13 +316,40 @@ export default {
     }
 
   },
+
   methods:{
     handleClick(tab, event) {
       console.log(tab, event);
     },
-    nextStep(){
+    previousStep(val) {
+      this.activeName=val
+    },
+    nextStep(val){
+      console.log(val,'nextStep')
+      this.activeName=val
       console.log('我点击了下一步')
+    },
+    confirm(){
+      console.log('确认')
+    },
+    // 子组件逆向传递选中的隔离点
+    handleSelectPoint(points){
+        console.log(points, '逆向传递选中的隔离点');
+        points.forEach(point => {
+          // 确保当前传递的点不重复添加
+          if (!this.selectPoint.some(existingPoint => existingPoint.value === point.value)) {
+            this.selectPoint.push({
+              label: point.label,  // 显示的名称
+              value: point.value,  // 对应的值
+            });
+          }
+        });
+
+        // 更新 form.spoint 为最新选中的隔离点数组
+        this.form.spoint = points.map(point => point.value);
+
     }
+
   }
 }
 </script>
@@ -274,14 +365,14 @@ export default {
   display: flex;
   .left{
     width: 75%;
-    height: 800px;
+    height: 830px;
     background: #eee;
     margin-right: 10px;
   }
   .right{
     flex: 1;
     .right_top{
-      height: 490px;
+      height: 550px;
     }
     .right_bottom{
 
@@ -308,12 +399,14 @@ export default {
 }
 
 .box-card {
-  width: 390px;
-  height: 470px;
+  // width: 390px;
+  width: 95%;
+  height: 530px;
 }
 .box-card1 {
-  width: 390px;
-  height: 310px;
+  // width: 390px;
+  width: 95%;
+  height: 280px;
 }
 //右侧卡片样式结束
 </style>

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

@@ -11,8 +11,8 @@ export default {
     return {
       stage: null,
       layer: null,
-      isSelected:true,//判断是否选中隔离点
-      selectedStates: {} // 存储每个图片的选中状态
+      selectedStates: [], // 用于存储每个元素的选中状态
+      selectedText: [] // 用于存储未选中的元素文本
     }
   },
   mounted() {
@@ -24,7 +24,7 @@ export default {
       this.stage = new Konva.Stage({
         container: this.$refs.container, // 容器元素
         width: 1250,
-        height: 770,
+        height: 830,
         fill: 'black'
       })
 
@@ -40,7 +40,7 @@ export default {
           y: 10,
           image: bgImage,
           width: 500,
-          height: 770,
+          height: 790,
           draggable: false
         })
         this.layer.add(KnovaImage)
@@ -90,68 +90,93 @@ export default {
       }.bind(this))
       this.stage.draggable(true)
     },
-    renderGrid( imageSrc, rows, cols, startX, startY, xOffset, yOffset, imageWidth, imageHeight, rectWidth, rectHeight) {
+    renderGrid(imageSrc, rows, cols, startX, startY, xOffset, yOffset, imageWidth, imageHeight, rectWidth, rectHeight) {
+      // 初始化状态数组
+      this.selectedStates = new Array(rows * cols).fill(false);
+
       for (let row = 0; row < rows; row++) {
         for (let col = 0; col < cols; col++) {
-          const x = startX + col * xOffset // 每个图片的 x 轴位置
-          const y = startY + row * yOffset // 每个图片的 y 轴位置
-          const index = row * cols + col + 1 // 唯一标识的编号
+          const x = startX + col * xOffset;
+          const y = startY + row * yOffset;
+          const index = row * cols + col;
 
-          const point = new Image()
-          point.src = imageSrc
+          const point = new Image();
+          point.src = imageSrc;
           point.onload = () => {
-            // 创建图片
             const knovaImage = new Konva.Image({
               x: x,
               y: y,
               image: point,
               width: imageWidth,
               height: imageHeight,
-              draggable: false
-            })
-            // 状态变量用于追踪当前图片
-            // 点击事件
-            knovaImage.on('click', () => {
+              draggable: false,
+            });
 
-              console.log(this.isSelected,'isSelected')
-              if (this.isSelected) {
-                point.src = require('@/assets/images/localSetSelect.jpg'); // 替换成选中的图片
+            knovaImage.on('click', () => {
+              // 切换选中状态
+              this.selectedStates[index] = !this.selectedStates[index];
+
+              // 更新 selectedText 数组
+              if (this.selectedStates[index]) {
+                // 元素被选中，替换成选中的图片
+                point.src = require('@/assets/images/localSetSelect.jpg');
+
+                // 检查是否已经在 selectedText 数组中
+                if (!this.selectedText.some(item => item.value === index + 1)) {
+                  // 元素被选中，添加到 selectedText 数组
+                  this.selectedText.push({
+                    label: `E-${index + 1}`,
+                    value: index + 1
+                  });
+                }
               } else {
-                point.src = imageSrc; // 恢复成原来的图片
+                // 元素未选中，恢复原图片
+                point.src = imageSrc;
+
+                // 元素未选中，从 selectedText 数组中移除
+                const textIndex = this.selectedText.findIndex(item => item.value === index + 1);
+                if (textIndex !== -1) {
+                  this.selectedText.splice(textIndex, 1); // 如果元素在 selectedText 中，移除它
+                }
               }
-              this.isSelected = !this.isSelected; // 切换状态
+
               knovaImage.image(point); // 更新图片
               this.layer.draw(); // 重绘图层
+
+              // console.log(this.selectedText, '子组件选中的隔离点');
+
+              // 传递选中的元素文本到父组件
+              this.$emit('selection-changed', this.selectedText);
             });
-            this.layer.add(knovaImage)
 
-            // 创建矩形框
+
+
+            this.layer.add(knovaImage);
+
             const rect = new Konva.Rect({
               x: x - 3,
-              y: y + imageHeight + 10, // 矩形在图片下方
+              y: y + imageHeight + 10,
               width: rectWidth,
               height: rectHeight,
               cornerRadius: 10,
               stroke: 'red',
               strokeWidth: 2,
-              fill: 'white'
-            })
-            this.layer.add(rect)
+              fill: 'white',
+            });
+            this.layer.add(rect);
 
-            // 创建文本
             const text = new Konva.Text({
-              x: x + 12, // 调整文本在矩形内的位置
-              y: y + imageHeight + 15, // 在矩形内部居中显示
+              x: x + 12,
+              y: y + imageHeight + 15,
               fontSize: 20,
-              text: `E-${index}`,
+              text: `E-${index + 1}`,
               fontFamily: 'Calibri',
-              fill: 'red'
-            })
-            this.layer.add(text)
+              fill: 'red',
+            });
+            this.layer.add(text);
 
-            // 渲染图层
-            this.layer.draw()
-          }
+            this.layer.draw();
+          };
         }
       }
     }

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

@@ -1,15 +1,110 @@
 <template>
-
+  <div class="leftcon">
+    <el-form ref="form" :model="form" label-width="100px" :inline="true">
+      <el-form-item label="车间">
+        <el-select
+          v-model="form.workShop"
+          v-bind="$attrs"
+          multiple
+          style="width: 100%"
+          placeholder="请选择线路"
+          @change="handleSelect"
+        >
+          <div style="padding: 0 20px; line-height: 34px">
+            <el-checkbox
+              v-model="checkAll"
+              :indeterminate="isIndeterminate"
+              @change="handleCheckAllChange"
+            >全选</el-checkbox
+            >
+          </div>
+          <el-checkbox-group v-model="form.workShop">
+            <el-option
+              v-for="item in this.workShopOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+              <el-checkbox style="pointer-events: none" :label="item.value">
+                {{ item.label }}
+              </el-checkbox>
+            </el-option>
+          </el-checkbox-group>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="生产线">
+        <el-select v-model="form.producLine" placeholder="请选择生产线">
+          <el-option
+            v-for="item in this.producLineOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 
 <script>
-import Konva from 'konva';
 export default {
-  name: 'workshop'
-}
+  data() {
+    return {
+      form: {
+        checkAll: false,
+        isIndeterminate: false,
+        workShop: [],
+        producLine: "",
+      },
+      workShopOptions: [
+        { label: "士力架包装车间1号", value: "1" },
+        { label: "士力架包装车间2号", value: "2" },
+        { label: "士力架包装车间3号", value: "3" },
+        { label: "士力架包装车间4号", value: "4" },
+      ],
+      producLineOptions: [
+        { label: "打包线1", value: "1" },
+        { label: "打包线2", value: "2" },
+        { label: "打包线3", value: "3" },
+        { label: "打包线4", value: "4" },
+      ],
+    };
+  },
+  methods: {
+    // 下拉框选择事件
+    handleSelect(value) {
+      console.log(value, "value");
+      const checkedCount = value.length;
+      this.checkAll = checkedCount === this.workShopOptions.length;
+      this.isIndeterminate =
+        checkedCount > 0 && checkedCount < this.workShopOptions.length;
+      const data = value.map((item) => {
+        return item;
+      });
+      this.form.workShop = value.length > 0 ? data : [];
+      console.log(this.form.workShop, " form.workShop");
+    },
+    // 全选事件
+    handleCheckAllChange(val) {
+      const data = this.workShopOptions.map((item) => {
+        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-color: rgba(229, 229, 229, 1);
+  background: url("../../../../assets/images/sopbgimg.png") no-repeat;
+  background-size: 100% 100%;
+  //   box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
+  padding: 3% 4%;
+}
 </style>

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

@@ -168,7 +168,7 @@ export default {
   data() {
     return {
       activeName: "first",
-      
+
       form: {
         sopName: "",
         sopId: "",
@@ -238,11 +238,11 @@ export default {
     },
     preStep() {
       this.activeName = "first";
-     
+
     },
     nextStep() {
       this.activeName = "second";
-    
+
       console.log("我点击了下一步");
     },
   },