修改sop模块右侧内容布局显示

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

@@ -0,0 +1,188 @@
+<template>
+  <div id="container" ref="container"></div>
+</template>
+
+<script>
+import Konva from "konva";
+
+export default {
+  name: "KonvaExample",
+  data() {
+    return {
+      stage: null,
+      layer: null,
+      isSelected: true, //判断是否选中隔离点
+      selectedStates: {}, // 存储每个图片的选中状态
+    };
+  },
+  mounted() {
+    this.initKonva();
+  },
+  methods: {
+    initKonva() {
+      // 创建舞台
+      this.stage = new Konva.Stage({
+        container: this.$refs.container, // 容器元素
+        width: 1250,
+        height:800,
+        fill: "black",
+      });
+
+      // 创建图层
+      this.layer = new Konva.Layer();
+
+      // 创建底图
+      const bgImage = new Image();
+      bgImage.src = require("@/assets/images/table.png");
+      bgImage.onload = () => {
+        const KnovaImage = new Konva.Image({
+          x: 350,
+          y: 10,
+          image: bgImage,
+          width: 500,
+          height: 800,
+          draggable: false,
+        });
+        this.layer.add(KnovaImage);
+
+        this.layer.draw();
+      };
+      // 调用函数
+      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.on("wheel", (e) => {
+        e.evt.preventDefault();
+
+        const scaleBy = 1.05; // 缩放因子
+        const oldScale = this.stage.scaleX(); // 获取当前缩放比例
+        const pointer = this.stage.getPointerPosition(); // 获取鼠标位置
+
+        const mousePointTo = {
+          x: (pointer.x - this.stage.x()) / oldScale,
+          y: (pointer.y - this.stage.y()) / oldScale,
+        };
+
+        // 根据滚轮滚动的方向决定缩放
+        const newScale =
+          e.evt.deltaY > 0 ? oldScale / scaleBy : oldScale * scaleBy;
+
+        this.stage.scale({ x: newScale, y: newScale });
+
+        const newPos = {
+          x: pointer.x - mousePointTo.x * newScale,
+          y: pointer.y - mousePointTo.y * newScale,
+        };
+        this.stage.position(newPos);
+        this.stage.batchDraw();
+      });
+
+      this.stage.on(
+        "mousedown",
+        function () {
+          this.stage.container().style.cursor = "move";
+        }.bind(this)
+      );
+
+      this.stage.on(
+        "mouseup",
+        function () {
+          this.stage.container().style.cursor = "default";
+        }.bind(this)
+      );
+      this.stage.draggable(true);
+    },
+    renderGrid(
+      imageSrc,
+      rows,
+      cols,
+      startX,
+      startY,
+      xOffset,
+      yOffset,
+      imageWidth,
+      imageHeight,
+      rectWidth,
+      rectHeight
+    ) {
+      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 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", () => {
+              console.log(this.isSelected, "isSelected");
+              if (this.isSelected) {
+                point.src = require("@/assets/images/localSetSelect.jpg"); // 替换成选中的图片
+              } else {
+                point.src = imageSrc; // 恢复成原来的图片
+              }
+              this.isSelected = !this.isSelected; // 切换状态
+              knovaImage.image(point); // 更新图片
+              this.layer.draw(); // 重绘图层
+            });
+            this.layer.add(knovaImage);
+
+            // 创建矩形框
+            const rect = new Konva.Rect({
+              x: x - 3,
+              y: y + imageHeight + 10, // 矩形在图片下方
+              width: rectWidth,
+              height: rectHeight,
+              cornerRadius: 10,
+              stroke: "red",
+              strokeWidth: 2,
+              fill: "white",
+            });
+            this.layer.add(rect);
+
+            // 创建文本
+            const text = new Konva.Text({
+              x: x + 12, // 调整文本在矩形内的位置
+              y: y + imageHeight + 15, // 在矩形内部居中显示
+              fontSize: 20,
+              text: `E-${index}`,
+              fontFamily: "Calibri",
+              fill: "red",
+            });
+            this.layer.add(text);
+
+            // 渲染图层
+            this.layer.draw();
+          };
+        }
+      }
+    },
+
+    //     methods结束
+  },
+};
+</script>
+
+<style scoped lang="scss">
+#container {
+  width: 100%;
+  height: 100%;
+  //   background: #000;
+}
+</style>

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

@@ -4,7 +4,7 @@
     <div class="left">
       <!-- <h1>我是左边</h1> -->
       <SopLeft v-if="this.activeName == 'first'" />
-      <p v-else>隔离点</p>
+      <IsolationLeftVue v-else />
     </div>
     <div class="right">
       <div class="right_top">
@@ -51,7 +51,6 @@
                       />
                     </el-select>
                   </el-form-item>
-
                   <el-form-item label="作业内容" prop="workContent">
                     <el-input
                       type="textarea"
@@ -59,6 +58,33 @@
                       :row="6"
                     ></el-input>
                   </el-form-item>
+                  <div class="text item">
+                    <p>已选隔离点</p>
+                    <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-form-item label="" prop="" style="margin-top: 23%">
                     <el-button
                       style="float: right; height: 30px; line-height: 10px"
@@ -86,22 +112,33 @@
                       style="width: 100%"
                     />
                   </el-form-item>
-                  <el-form-item label="已选隔离点" prop="spoint">
-                    <el-select
-                      v-model="form.spoint"
-                      placeholder="已选隔离点"
-                      clearable
+                  <div class="text item">
+                    <p>已选隔离点</p>
+                    <el-table
+                      :data="tableData"
+                      stripe
+                      height="250"
                       style="width: 100%"
                     >
-                      <el-option
-                        v-for="dict in this.hardwareTypeOption"
-                        :key="dict.value"
-                        :label="dict.label"
-                        :value="dict.value"
-                      />
-                    </el-select>
-                  </el-form-item>
-
+                      <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-form-item label="" prop="" style="margin-top: 45%">
                     <el-button
                       style="float: right; height: 30px; line-height: 10px"
@@ -127,31 +164,6 @@
           </div>
         </el-card>
       </div>
-      <div class="right_bottom">
-        <el-card class="box-card1">
-          <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> -->
-          <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>
     </div>
     <!--    newOperations盒子结束-->
   </div>
@@ -159,23 +171,25 @@
 
 
 <script>
+import IsolationLeftVue from "./IsolationLeft.vue";
 import SopLeft from "./SopLeft.vue";
 export default {
   name: "addView",
   components: {
     SopLeft,
+    IsolationLeftVue,
   },
   data() {
     return {
       activeName: "first",
-      
+
       form: {
         sopName: "",
         sopId: "",
         SOPType: "",
         workshopName: "", //车间名称
         workline: "", //产线
-        spoint: "", //已选隔离点
+        spoint: [], //已选隔离点
       },
       pickerOptions: {
         shortcuts: [
@@ -209,7 +223,7 @@ export default {
         { label: "维修", value: 2 },
         { label: "保养", value: 3 },
       ],
-      // 已选隔离点
+      // 右侧底部已选隔离点
       tableData: [
         {
           id: 1,
@@ -230,6 +244,19 @@ export default {
           type: "电能",
         },
       ],
+      // 右侧中间选择隔离点中已选隔离点
+      spointOptions: [
+        { 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 },
+        { label: "E-8", value: 8 },
+        { label: "E-9", value: 9 },
+        { label: "E-10", value: 10 },
+      ],
     };
   },
   methods: {
@@ -238,13 +265,35 @@ export default {
     },
     preStep() {
       this.activeName = "first";
-     
     },
     nextStep() {
       this.activeName = "second";
-    
+
       console.log("我点击了下一步");
     },
+
+    // 选择隔离点中间已选隔离点
+    // 下拉框选择事件
+    handleSelect(value) {
+      console.log(value, "value");
+      const checkedCount = value.length;
+      this.checkAll = checkedCount === this.spointOptions.length;
+      this.isIndeterminate =
+        checkedCount > 0 && checkedCount < this.spointOptions.length;
+      const data = value.map((item) => {
+        return item;
+      });
+      this.form.spoint = value.length > 0 ? data : [];
+      console.log(this.form.spoint, " form.spoint");
+    },
+    // 全选事件
+    handleCheckAllChange(val) {
+      const data = this.spointOptions.map((item) => {
+        return item.value;
+      });
+      this.form.spoint = val ? data : [];
+      this.isIndeterminate = false;
+    },
   },
 };
 </script>
@@ -280,6 +329,11 @@ export default {
 
 .item {
   margin-bottom: 18px;
+  p {
+    font-size: 18px;
+    font-weight: bolder;
+    font-family: SourceHanSansSC-bold;
+  }
 }
 
 .clearfix:before,
@@ -295,13 +349,9 @@ export default {
 .box-card {
   // width: 390px;
   width: 95%;
-  height: 530px;
-}
-.box-card1 {
-  // width: 390px;
-  width: 95%;
-  height: 280px;
+  height: 800px;
 }
+
 ::v-deeep .el-tabs--top .el-tabs__item.is-top:nth-child(2),
 .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
 .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),