添加压板尺寸图片兼容

src/views/design/main/index.vue

 <script>
 <script>
 import VueDragResizeRotate from "@minogin/vue-drag-resize-rotate";
 import VueDragResizeRotate from "@minogin/vue-drag-resize-rotate";
-import PicScrollbarBox from "../../../components/PicScrollbarBox.vue";
+// import PicScrollbarBox from "../../../components/PicScrollbarBox.vue";
 
 
 const { ipcRenderer } = require("electron");
 const { ipcRenderer } = require("electron");
 // import { fabric } from "fabric";
 // import { fabric } from "fabric";
@@ -24,7 +24,6 @@ export default {
     PrintDialog,
     PrintDialog,
     VueDragResizeRotate,
     VueDragResizeRotate,
     ImgSetting,
     ImgSetting,
-    PicScrollbarBox,
   },
   },
   props: { factoryType: { type: String, default: "CN" } },
   props: { factoryType: { type: String, default: "CN" } },
   destroyed() {
   destroyed() {
@@ -193,12 +192,14 @@ export default {
       isView: false,
       isView: false,
       imgHistoryList: [[]],
       imgHistoryList: [[]],
       imgHistoryIndex: 0,
       imgHistoryIndex: 0,
-      row: 8,
+      row: 7,
       img,
       img,
-      col: 7,
+      col: 8,
       oldImgStyle: "",
       oldImgStyle: "",
       drrDom: null,
       drrDom: null,
       imgDom: null,
       imgDom: null,
+      leftPosition: "22%",
+      topPosition: "52%",
     };
     };
   },
   },
   watch: {
   watch: {
@@ -262,8 +263,28 @@ export default {
       }
       }
       console.log(249, this.detail.imageAry);
       console.log(249, this.detail.imageAry);
     },
     },
-    changeCheckFn(value) {
-      console.log("check", value);
+    col: {
+      handler(newValue) {
+        const positionMap = {
+          8: { left: "36%", top: "36%" },
+          12: { left: "32%", top: "43%" },
+          16: { left: "26%", top: "49%" },
+          18: { left: "22%", top: "52%" },
+          21: { left: "22%", top: "56%" },
+        };
+
+        // 查找对应的位置设置
+        const position = positionMap[newValue];
+        if (position) {
+          this.leftPosition = position.left;
+          this.topPosition = position.top;
+        }
+
+        if (this.imgList?.length) {
+          this.getBackFile({ files: this.imgList });
+        }
+      },
+      immediate: true,
     },
     },
 
 
     isView: {
     isView: {
@@ -681,7 +702,7 @@ export default {
             console.log(679, rate);
             console.log(679, rate);
 
 
             if (rate > 1) {
             if (rate > 1) {
-              height_px = bh * (8 / 10);
+              height_px = bh * (7.5 / 10);
               // width_px = height_px / rate > bw ? bw : height_px / rate;
               // width_px = height_px / rate > bw ? bw : height_px / rate;
               width_px = height_px / rate;
               width_px = height_px / rate;
               x = width_px / 2;
               x = width_px / 2;
@@ -1052,6 +1073,17 @@ export default {
         console.log(error);
         console.log(error);
       }
       }
     },
     },
+    getWHproportion(data) {
+      if (this.gridWH.col == 8) {
+        return data + 1.8;
+      } else if (this.gridWH.col == 12) {
+        return data + 1;
+      } else if (this.gridWH.col == 21) {
+        return 1.4;
+      } else {
+        return data;
+      }
+    },
   },
   },
   mounted() {
   mounted() {
     this.imgHeight = window.screen.height + "px";
     this.imgHeight = window.screen.height + "px";
@@ -1385,22 +1417,23 @@ export default {
           <div v-if="isView" id="img">
           <div v-if="isView" id="img">
             <div
             <div
               id="line"
               id="line"
-              style="left: 22%;top: 52%;background-color: transparent;overflow: hidden"
+              style="background-color: transparent;overflow: hidden"
+              :style="{ left: leftPosition, top: topPosition }"
             >
             >
               <div
               <div
                 class="sucaitu vieWsucaitu"
                 class="sucaitu vieWsucaitu"
                 :style="{ width: '100%', height: '100%' }"
                 :style="{ width: '100%', height: '100%' }"
               >
               >
                 <vue-drag-resize-rotate
                 <vue-drag-resize-rotate
-                  :w="item.w / WHproportion"
+                  :w="item.w / getWHproportion(WHproportion)"
                   class-name="my-drag-resize-rotate"
                   class-name="my-drag-resize-rotate"
                   :prevent-deactivation="false"
                   :prevent-deactivation="false"
-                  :h="item.h / WHproportion"
-                  :x="item.x / WHproportion"
-                  :z="item.zIndex / WHproportion"
+                  :h="item.h / getWHproportion(WHproportion)"
+                  :x="item.x / getWHproportion(WHproportion)"
+                  :z="item.zIndex / getWHproportion(WHproportion)"
                   :aspectRatio="false"
                   :aspectRatio="false"
                   :isActive="false"
                   :isActive="false"
-                  :y="item.y / WHproportion"
+                  :y="item.y / getWHproportion(WHproportion)"
                   v-for="(item, index) in imgList"
                   v-for="(item, index) in imgList"
                   :key="index"
                   :key="index"
                   :draggable="false"
                   :draggable="false"