修改裁剪功能bug以及登录后网格消失问题

97e0fb09 · linjinhong · 08521d9f · 97e0fb09 · 97e0fb09 · 97e0fb09
Commit 97e0fb09 authored May 07, 2025 by linjinhong
Hide whitespace changes
Inline Side-by-side

Showing with 123 additions and 70 deletions

config/env.json
+3 -3

src/store/index.js
+14 -0

src/views/design/main/index.vue
+69 -57

src/views/login/index.vue
+37 -10

No files found.
--- a/config/env.json
+++ b/config/env.json
 {
-    "apiApiHost":"https://factory.jomalls.com/api",
+    "apiApiHost":"http://10.168.31.142:8060/api",
-    "fileApiUrl":"https://factory.jomalls.com/upload/factory",
+     "fileApiUrl":"http://10.168.31.142:80/upload/factory",
-    "visionUrl":"https://console.jomalls.com"
+     "visionUrl":"https://console.jomalls.com"
 }
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -26,6 +26,16 @@ export default new Vuex.Store({
      autoPrint: false,
      gridSpacing: 10,
    },
+    grid: [
+      {
+        label: "16×18",
+        value: 1,
+        row: 16,
+        col: 18,
+        h: 0,
+        w: 0,
+      },
+    ],
  },
  mutations: {
    setDefaultSetting(state) {
@@ -55,6 +65,10 @@ export default new Vuex.Store({
    setIsPreView(state, value) {
      state.isPreView = value;
    },
+    setGrid(state, { h, w }) {
+      state.grid[0].h = h;
+      state.grid[0].w = w;
+    },
  },
  getters: {
    systemSetting(state) {

--- a/src/views/design/main/index.vue
+++ b/src/views/design/main/index.vue
@@ -2,7 +2,7 @@
 import VueDragResizeRotate from "@minogin/vue-drag-resize-rotate";
 import PicScrollbarBox from "../../../components/PicScrollbarBox.vue";
 const { ipcRenderer } = require("electron");
-import { grid } from "../data";
+// import { grid } from "../data";
 import ImgSetting from "./imgSetting.vue";
 import bus from "@/bus";
 import PrintDialog from "@/views/design/head/printDialog.vue";
@@ -21,7 +21,7 @@ export default {
    PrintDialog,
    VueDragResizeRotate,
    ImgSetting,
-    PicScrollbarBox
+    PicScrollbarBox,
  },
  destroyed() {
    document.removeEventListener("keyup", this.keyup);
@@ -37,13 +37,14 @@ export default {
        proportion = 1.7;
      } else if (height > 900 && height <= 1000) {
        proportion = 1.5;
-        this.PreViewGrid.h;
      } else {
        proportion = 1;
      }
      this.$store.commit("setWHproportion", proportion);
-      this.grid[0].h = 540 * proportion;
+      this.$store.commit("setGrid", {
-      this.grid[0].w = 480 * proportion;
+        h: 540 * proportion,
+        w: 480 * proportion,
+      });
    });
  },
  computed: {
@@ -57,7 +58,7 @@ export default {
      return {
        w: this.grid[this.systemSetting.gridValue].w,
        v: this.grid[this.systemSetting.gridValue].value,
-        h: this.grid[this.systemSetting.gridValue].h
+        h: this.grid[this.systemSetting.gridValue].h,
      };
    },
    gridSpacing() {
@@ -67,7 +68,7 @@ export default {
      if (unit === "mm") {
        return {
          w: gridSpacing + "px",
-          h: gridSpacing + "px"
+          h: gridSpacing + "px",
        };
      } else if (unit === "inch") {
        let w = this.grid[this.systemSetting.gridValue].w;
@@ -77,7 +78,7 @@ export default {
        return {
          // w: gridSpacing * ((w - row + 1) / row) + "px",
          w: gridSpacing * (w / row) + "px",
-          h: gridSpacing * (h / col) + "px"
+          h: gridSpacing * (h / col) + "px",
        };
      }
      return { w: "480px", h: "540px" };
@@ -89,7 +90,7 @@ export default {
      if (unit === "mm") {
        return {
          w: gridSpacing + "px",
-          h: gridSpacing + "px"
+          h: gridSpacing + "px",
        };
      } else if (unit === "inch") {
        let w = 480;
@@ -98,7 +99,7 @@ export default {
        let h = 540;
        return {
          w: gridSpacing * (w / row) + "px",
-          h: gridSpacing * (h / col) + "px"
+          h: gridSpacing * (h / col) + "px",
        };
      }
      return { w: "480px", h: "540px" };
@@ -125,7 +126,7 @@ export default {
      return null;
    },
-    ...mapState(["desktopDevice", "productDetail", "WHproportion"])
+    ...mapState(["desktopDevice", "productDetail", "WHproportion", "grid"]),
  },
  data() {
    return {
@@ -143,7 +144,7 @@ export default {
        "hsva(120, 40, 94, 0.5)",
        "hsl(181, 100%, 37%)",
        "hsla(209, 100%, 56%, 0.73)",
-        "#c7158577"
+        "#c7158577",
      ],
      actionList: [],
      checkList: [],
@@ -157,14 +158,14 @@ export default {
      imgHeight: 0,
      selectImgList: [],
      bus: 0,
-      grid,
      PreViewGrid: {
        label: "16×18",
        value: 1,
        row: 16,
        col: 18,
        h: 540,
-        w: 480
+        w: 480,
      },
      showImgSetting: true,
      printDialogShow: true,
@@ -182,7 +183,7 @@ export default {
      imgHistoryIndex: 0,
      row: 8,
      img,
-      col: 7
+      col: 7,
    };
  },
  watch: {
@@ -201,7 +202,7 @@ export default {
                dom_i.style.zIndex === "" || !dom_i.style.zIndex
                  ? 0
                  : dom_i.style.zIndex;
-              dom[i].addEventListener("click", e => {
+              dom[i].addEventListener("click", (e) => {
                this.selectIndex = i;
                this.selectItem(i);
              });
@@ -211,7 +212,7 @@ export default {
        this.$store.commit("changeImgList", this.imgList);
      },
      deep: true,
-      immediate: true
+      immediate: true,
    },
    selectIndex() {
      if (this.selectIndex >= 0) {
@@ -238,7 +239,7 @@ export default {
    },
    changeCheckFn(value) {
      console.log("check", value);
-    }
+    },
  },
  methods: {
    changePrintDialogShow() {
@@ -260,11 +261,11 @@ export default {
        formData.append("file", files[i]);
        let { data } = await that.$api.post("/uploadImage", formData, {
          headers: {
-            "Content-Type": "application/x-www-form-urlencoded"
+            "Content-Type": "application/x-www-form-urlencoded",
-          }
+          },
        });
        that.selectImgIndex = 0;
-        that.addFile(data, file => {
+        that.addFile(data, (file) => {
          that.imgHistoryList.push(JSON.parse(JSON.stringify(that.imgList)));
        });
      }
@@ -364,12 +365,12 @@ export default {
      return mm1.width;
    },
    setDesignImg(title) {
-      let img = this.selectImgList.find(it => it.title === title);
+      let img = this.selectImgList.find((it) => it.title === title);
      if (img) {
        console.log(this.detail.designImageSize, "this.detail.size");
        this.getBackFile(
          { files: [img], size: this.detail.designImageSize },
-          file => {
+          (file) => {
            this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
          }
        );
@@ -381,7 +382,7 @@ export default {
      }
      // this.selectImgIndexList.push(i)
-      let item = this.imgList.find(img => img.fileName === it.fileName);
+      let item = this.imgList.find((img) => img.fileName === it.fileName);
      if (item) return;
      console.log(this.detail.designImageSize);
      let size = null;
@@ -392,10 +393,10 @@ export default {
      ) {
        size = {
          width: this.detail.mssWidth,
-          height: this.detail.mssHeight
+          height: this.detail.mssHeight,
        };
      }
-      this.getBackFile({ files: [it], size }, file => {
+      this.getBackFile({ files: [it], size }, (file) => {
        this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
      });
      // this.selectImgIndexList = Array.from(new Set(this.selectImgIndexList))
@@ -554,20 +555,21 @@ export default {
    },
    getComputedName(title) {
      let img = this.selectImgList.find(
-        it => it.title === title || it.title.includes(title)
+        (it) => it.title === title || it.title.includes(title)
      );
      return img?.designId;
    },
    getComputedTitle(title) {
      console.log(this.selectImgList, "this.selectImgList");
      let img = this.selectImgList.find(
-        it => it.title === title || it.title.includes(title)
+        (it) => it.title === title || it.title.includes(title)
      );
      return img?.productionFile;
    },
    getBackFile({ files, size }, callback) {
      let that = this;
      let bw = document.getElementById("line");
+      let bh = bw.clientHeight;
      bw = bw.clientWidth;
      this.isView = false;
      // bw = Number(bw.replsace("px", ""));
@@ -575,6 +577,8 @@ export default {
        files[i].url = files[i].productionFile || files[i].url;
        that.$nextTick(async () => {
          let w = bw / 2;
+          let h = bh / 2;
          let width_px, height_px, rate, x, y;
          if (size && !files[i].isCut) {
            width_px = that.WHproportion * mmToPx(size.width);
@@ -584,13 +588,20 @@ export default {
            rate = height_px / width_px;
          } else {
            let data = await that.getImageSize(files[i].url);
            rate = data.height / data.width;
-            width_px = bw * (2 / 3);
+            if (rate > 1) {
-            x = w;
+              height_px = bh * (9 / 10);
-            height_px = width_px * rate;
+              width_px = height_px / rate;
-            y = height_px / 2;
+              x = width_px / 2;
+              y = h;
+            } else {
+              width_px = bw * (2 / 3);
+              height_px = width_px * rate;
+              x = w;
+              y = height_px / 2;
+            }
          }
          that.imgList = [];
          that.imgList.push({
            url: files[i].url,
@@ -601,7 +612,7 @@ export default {
            x,
            y,
            h: height_px,
-            r: 0
+            r: 0,
          });
          that.selectIndex = that.imgList.length - 1;
          that.showImgSetting = true;
@@ -622,7 +633,7 @@ export default {
      let bw = document.getElementById("line").clientWidth;
      let bh = document.getElementById("line").clientHeight;
      that.$nextTick(() => {
-        that.getImageSize(file.url).then(data => {
+        that.getImageSize(file.url).then((data) => {
          let w = document.getElementById("line").clientWidth / 2;
          let rate = data.height / data.width;
          that.imgList = [];
@@ -635,7 +646,7 @@ export default {
            x: w,
            y: (bw * (2 / 3) * rate) / 2,
            h: bw * (2 / 3) * rate,
-            r: 0
+            r: 0,
          });
          console.log(570, that.imgList);
          that.selectIndex = that.imgList.length - 1;
@@ -661,7 +672,7 @@ export default {
        image.onload = function() {
          resolve({
            width: image.width,
-            height: image.height
+            height: image.height,
          });
        };
        image.onerror = function() {
@@ -731,21 +742,21 @@ export default {
      this.checkList = JSON.parse(JSON.stringify(this.selectImgList));
      try {
        const processQueue = await Promise.all(
-          this.checkList.map(async el => {
+          this.checkList.map(async (el) => {
            try {
              const outputDir = path.dirname(el.productionFile);
              const outputFileName = `${uuid.v4()}.png`;
              const outputPath = path.join(outputDir, outputFileName);
              const params = {
                inputPath: el.productionFile,
-                outputPath: outputPath
+                outputPath: outputPath,
              };
              const res = await this.$api.post("/processImage", params);
              fs.unlinkSync(el.productionFile);
              return {
                fileName: outputFileName,
                productionFile: res.msg[0]?.outputPath,
-                designId: el.designId
+                designId: el.designId,
              };
            } catch (error) {
              console.error(`处理失败: ${el.productionFile}`, error);
@@ -754,9 +765,9 @@ export default {
        );
        // 等待所有异步操作完成
-        await new Promise(resolve => setTimeout(resolve, 100));
+        await new Promise((resolve) => setTimeout(resolve, 100));
-        const newMap = new Map(processQueue.map(el => [el.designId, el]));
+        const newMap = new Map(processQueue.map((el) => [el.designId, el]));
-        this.selectImgList.forEach(el => {
+        this.selectImgList.forEach((el) => {
          if (newMap.has(el.designId)) {
            el.fileName = newMap.get(el.designId).fileName;
            el.url = newMap.get(el.designId).productionFile;
@@ -768,7 +779,7 @@ export default {
        if (this.imgList.length) {
          const fileNameExists = this.checkList.some(
-            el => el.fileName === this.imgList[0].fileName
+            (el) => el.fileName === this.imgList[0].fileName
          );
          if (fileNameExists) {
            this.imgList = [];
@@ -801,13 +812,13 @@ export default {
        this.isView = false;
      }
      this.$store.commit("setIsPreView", this.isView);
-    }
+    },
  },
  mounted() {
    this.imgHeight = window.screen.height + "px";
    this.systemSetting = this.$dataStore.get("setting");
-    bus.$on("busEmit", v => {
+    bus.$on("busEmit", (v) => {
      let { type, value, size } = v;
      switch (type) {
@@ -819,7 +830,7 @@ export default {
          this.indexChange(value);
          break;
        case "bg":
-          this.changeImageColor(value, res => {
+          this.changeImageColor(value, (res) => {
            this.img = res;
          });
          break;
@@ -849,7 +860,7 @@ export default {
            this.selectImgIndex = 0;
            this.getBackFile(
              { files: [value[0]], size: this.detail.designImageSize || null },
-              file => {
+              (file) => {
                this.imgHistoryList.push(
                  JSON.parse(JSON.stringify(this.imgList))
                );
@@ -872,7 +883,7 @@ export default {
  beforeDestroy() {
    // 销毁组件时移除事件监听器
    document.removeEventListener("click", this.handleClick);
-  }
+  },
 };
 </script>
@@ -1026,6 +1037,7 @@ export default {
            <template #mainContent>
              <div
                v-for="(img, i) in selectImgList"
+                :key="i"
                class="img-item"
                @click.stop.prevent="selectImg(img)"
              >
@@ -1084,7 +1096,7 @@ export default {
                  style="margin-left: 5px"
                  v-if="detail.podProductionNo"
                  :style="{
-                    color: detail.customizedQuantity > 1 ? 'red' : '#67C23A'
+                    color: detail.customizedQuantity > 1 ? 'red' : '#67C23A',
                  }"
                >
                  {{ detail.customizedQuantity > 1 ? "多" : "单" }}
@@ -1219,7 +1231,7 @@ export default {
                :class="{ 'no-border-grid': systemSetting.gridShow !== 1 }"
                :style="{
                  width: 480 + 'px',
-                  height: 540 + 'px'
+                  height: 540 + 'px',
                }"
                class="grid"
                style="border-style:dashed"
@@ -1261,9 +1273,9 @@ export default {
                  :draggable="true"
                  :resizable="true"
                  :rotatable="true"
-                  @dragstop="a => dragStop(a, item)"
+                  @dragstop="(a) => dragStop(a, item)"
-                  @resizestop="a => resizeStop(a, item)"
+                  @resizestop="(a) => resizeStop(a, item)"
-                  @rotatestop="a => rotating(a, item)"
+                  @rotatestop="(a) => rotating(a, item)"
                  :angle="item.r"
                >
                  <div
@@ -1296,7 +1308,7 @@ export default {
                :class="{ 'no-border-grid': systemSetting.gridShow !== 1 }"
                :style="{
                  width: gridWH.w + 'px',
-                  height: gridWH.h + 'px'
+                  height: gridWH.h + 'px',
                }"
                class="grid"
              >
@@ -1318,7 +1330,7 @@ export default {
          </div>
          <div
            class="print-tip"
-            :style="{left:isView?'':'22%'}"
+            :style="{ left: isView ? '' : '22%' }"
            v-if="
              detail &&
                detail.mssWidth &&
@@ -1326,7 +1338,7 @@ export default {
                selectImgList.length
            "
          >
-            <b style="color: green"  v-if="hasSize"
+            <b style="color: green" v-if="hasSize"
              >该生产单无需拖动设计，直接打印</b
            >
            <b style="color: red" v-else>该生产单需要拖动设计打印</b>

--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
 <script>
+const { ipcRenderer } = require("electron");
+import { mapState } from "vuex";
 export default {
  data() {
    return {
      rules: {
        factoryCode: [
-          { message: "请输入工厂编码", required: true, trigger: "blur" }
+          { message: "请输入工厂编码", required: true, trigger: "blur" },
        ],
        account: [{ message: "请输入账号", required: true, trigger: "blur" }],
-        password: [{ message: "请输入密码", required: true, trigger: "blur" }]
+        password: [{ message: "请输入密码", required: true, trigger: "blur" }],
      },
      userList: [],
      authorityVisible: false,
@@ -17,12 +20,33 @@ export default {
      form: {
        factoryCode: "",
        account: "",
-        password: ""
+        password: "",
-      }
+      },
    };
  },
+  computed: {
+    ...mapState(["grid"]),
+  },
  created() {
-    this.userList = this.$dataStore.get('userList') || []
+    this.userList = this.$dataStore.get("userList") || [];
+    ipcRenderer.on("window-size", (event, size) => {
+      const { width, height } = size;
+      console.log(`接收到窗口尺寸：${width}x${height}`);
+      let proportion;
+      if (height > 1000) {
+        proportion = 1.7;
+      } else if (height > 900 && height <= 1000) {
+        proportion = 1.5;
+      } else {
+        proportion = 1;
+      }
+      this.$store.commit("setWHproportion", proportion);
+      this.$store.commit("setGrid", {
+        h: 540 * proportion,
+        w: 480 * proportion,
+      });
+      console.log(this.grid);
+    });
  },
  mounted() {
    document.addEventListener("keyup", this.keyUp);
@@ -38,11 +62,14 @@ export default {
    },
    async login() {
-      this.$refs.formRef.validate(async valid => {
+      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          let f = JSON.parse(JSON.stringify(this.form));
          let { data } = await this.$api.post("/login", f);
-          this.$dataStore.set("user", { ...data.sysUser,...{token:data.token} });
+          this.$dataStore.set("user", {
+            ...data.sysUser,
+            ...{ token: data.token },
+          });
          console.log(this.$dataStore);
          if (this.remember) {
            let userList = this.$dataStore.get("userList");
@@ -50,7 +77,7 @@ export default {
            if (userList) {
              if (
                !userList.find(
-                  el =>
+                  (el) =>
                    el.account === f.account && el.factoryCode === f.factoryCode
                )
              ) {
@@ -70,8 +97,8 @@ export default {
      this.form.account = this.userList[v].account;
      this.form.factoryCode = this.userList[v].factoryCode;
      this.form.password = this.userList[v].password;
-    }
+    },
-  }
+  },
 };
 </script>