fix:添加备注方法注释

fe1e5ff2 · linjinhong · e34286ca · fe1e5ff2 · fe1e5ff2 · fe1e5ff2
Commit fe1e5ff2 authored Mar 30, 2026 by linjinhong
Hide whitespace changes
Inline Side-by-side

Showing with 74 additions and 94 deletions

src/server/entity/function.js
+1 -0

src/server/utils/setImage.js
+52 -16

src/utils/index.js
+6 -4

src/views/design/head/index.vue
+9 -61

src/views/design/main/index.vue
+6 -13

No files found.
--- a/src/server/entity/function.js
+++ b/src/server/entity/function.js
@@ -583,6 +583,7 @@ export default {
      res.json({ code: 500, msg: error });
    }
  },
  processTransparentBackground: async (req, res) => {
    env = getHostApi().apiApiHost;
    const token = req.headers["jwt-token"];

--- a/src/server/utils/setImage.js
+++ b/src/server/utils/setImage.js
@@ -417,9 +417,19 @@ function applyPadding(bounds, padding, imgWidth, imgHeight) {
  }
 }
+/**
+ * @async
+ * @function checkImageOutsideGrid
+ * @description 【核心业务方法】检测图片是否超出打印网格边界，并判断超出部分是否存在有效像素（非透明）
+ * 应用场景：印刷/打印场景，校验图片是否超出安全网格，避免裁切丢失内容
+ * @returns {Object} 检测结果
+ * @property {boolean} isImageBiggerThanGrid - 图片显示尺寸是否大于网格尺寸
+ * @property {boolean} hasOutsideValidPixel - 超出网格部分是否存在有效像素（非透明）
+ */
 async function checkImageOutsideGrid() {
  try {
-    // ===================== 第一步：获取 DOM 几何信息（核心！）=====================
+    // ===================== 第一步：获取DOM元素与页面几何尺寸 =====================
+    // 获取打印安全网格容器（id=line）
    const lineDom = document.getElementById("line");
    if (!lineDom) {
      console.log("未找到网格元素（id=line）");
@@ -429,7 +439,9 @@ async function checkImageOutsideGrid() {
      };
    }
+    // 获取网格元素的页面绝对坐标和尺寸
    const lineRect = lineDom.getBoundingClientRect();
+    // 格式化网格边界信息：左、上、右、下、宽、高
    const grid = {
      left: lineRect.left,
      top: lineRect.top,
@@ -439,6 +451,7 @@ async function checkImageOutsideGrid() {
      height: lineRect.height,
    };
+    // 网格无尺寸，直接返回默认结果
    if (grid.width === 0 || grid.height === 0) {
      return {
        isImageBiggerThanGrid: false,
@@ -446,6 +459,7 @@ async function checkImageOutsideGrid() {
      };
    }
+    // 获取图片展示容器（id=imgBox）
    const imgDom = document.getElementById("imgBox");
    if (!imgDom) {
      console.log("图片未加载完成或未找到imgBox元素");
@@ -455,16 +469,19 @@ async function checkImageOutsideGrid() {
      };
    }
-    // 确保图片加载完成
+    // 等待图片完全加载完成，保证尺寸获取准确
    await new Promise((resolve) => {
      if (imgDom.complete) resolve();
      else imgDom.onload = resolve;
    });
+    // 获取图片在页面上的显示坐标、尺寸
    const imgRect = imgDom.getBoundingClientRect();
+    // 获取图片原始分辨率（真实像素尺寸）
    const naturalWidth = imgDom.naturalWidth;
    const naturalHeight = imgDom.naturalHeight;
+    // 图片无原始尺寸，直接返回默认结果
    if (naturalWidth === 0 || naturalHeight === 0) {
      console.log("图片原始尺寸为0");
      return {
@@ -473,6 +490,7 @@ async function checkImageOutsideGrid() {
      };
    }
+    // 格式化图片完整信息：显示位置、显示尺寸、原始尺寸
    const imgDisplayInfo = {
      left: imgRect.left,
      top: imgRect.top,
@@ -482,12 +500,11 @@ async function checkImageOutsideGrid() {
      naturalHeight,
    };
-    // ===================== 【判断1】图片是否大于台版 =====================
+    // ===================== 【判断1】图片显示尺寸是否大于打印网格 =====================
    const isImageBiggerThanGrid =
      imgDisplayInfo.width > grid.width || imgDisplayInfo.height > grid.height;
-    // 如果图片不大于网格，直接返回
+    // 图片尺寸≤网格，无需进行像素越界检测，直接返回
    if (!isImageBiggerThanGrid) {
      console.log("图片尺寸小于/等于网格，无需检测越界");
      return {
@@ -496,38 +513,52 @@ async function checkImageOutsideGrid() {
      };
    }
-    // ===================== 第二步：Sharp 读取图片原始像素 =====================
+    // ===================== 第二步：处理图片路径，使用Sharp读取原始像素数据 =====================
    let imgSource = imgDom.src;
+    // 兼容处理本地file://协议的图片路径（Electron环境专用）
    if (imgSource.startsWith("file://")) {
      console.log(111);
+      // 解析本地文件路径
      imgSource = new URL(imgSource).pathname;
+      // Windows系统路径修正（去除开头多余的斜杠）
      if (process.platform === "win32") {
        imgSource = imgSource.slice(1);
      }
+      // 解码URI编码字符
      imgSource = decodeURIComponent(imgSource);
    }
    console.log("imgSource", imgSource);
+    // 使用Sharp库加载图片
    const sharpImg = sharp(imgSource);
+    // 获取图片元信息（宽高、通道数、格式等）
    const imgMetadata = await sharpImg.metadata();
+    // 将图片转为原始像素数据（Buffer），方便逐像素检测
    const { data: pixels } = await sharpImg
      .raw()
      .toBuffer({ resolveWithObject: true });
-    // ===================== 第三步：坐标映射 + 像素检测 =====================
+    // ===================== 第三步：坐标映射 + 逐像素检测越界有效像素 =====================
+    // 计算缩放比例：图片显示尺寸 / 原始尺寸（页面像素 → 原始像素映射）
    const scaleX = imgDisplayInfo.width / naturalWidth;
    const scaleY = imgDisplayInfo.height / naturalHeight;
+    // 标记：是否检测到超出网格的有效像素
    let hasOutsideValidPixel = false;
+    // 透明度阈值：Alpha值＞1 视为有效像素（非透明）
    const alphaThreshold = 1;
+    // 图片原始宽高
    const imgNaturalWidth = imgMetadata.width;
    const imgNaturalHeight = imgMetadata.height;
+    // 判断图片是否包含透明通道（PNG为4通道，JPG为3通道）
    const hasAlpha = imgMetadata.channels === 4;
+    // 双层循环：遍历图片所有原始像素
    for (let y = 0; y < imgNaturalHeight; y++) {
+      // 已检测到有效像素，直接终止循环，提升性能
      if (hasOutsideValidPixel) break;
      for (let x = 0; x < imgNaturalWidth; x++) {
+        // 计算当前原始像素 → 页面上的显示坐标
        const imgDisplayX = parseFloat(
          (imgDisplayInfo.left + x * scaleX).toFixed(2),
        );
@@ -535,28 +566,33 @@ async function checkImageOutsideGrid() {
          (imgDisplayInfo.top + y * scaleY).toFixed(2),
        );
+        // 坐标异常，跳过当前像素
        if (isNaN(imgDisplayX) || isNaN(imgDisplayY)) continue;
+        // 判断当前像素是否【超出打印网格边界】
        const isOutside =
          imgDisplayX < grid.left ||
          imgDisplayX > grid.right ||
          imgDisplayY < grid.top ||
          imgDisplayY > grid.bottom;
+        // 仅处理【超出网格】的像素
        if (isOutside) {
+          // 计算当前像素在原始Buffer数据中的索引位置
          const pixelIndex = (y * imgNaturalWidth + x) * imgMetadata.channels;
-          // 🔥 终极兼容逻辑
+          // 🔥 核心：判断超出部分是否为【有效像素】（非透明）
          let isValidPixel = false;
          if (hasAlpha) {
-            // PNG 有透明通道：判断透明度
+            // 图片有透明通道（PNG）：读取Alpha值，判断是否为非透明
            const alpha = pixels[pixelIndex + 3];
            isValidPixel = alpha > alphaThreshold;
          } else {
-            // JPG / 无透明通道：只要超出，一律视为有实色像素（纯白/彩色都算）
+            // 图片无透明通道（JPG）：所有超出像素都视为有效像素
            isValidPixel = true;
          }
+          // 检测到有效越界像素，标记并终止循环
          if (isValidPixel) {
            hasOutsideValidPixel = true;
            console.log(`✅ 检测到超出有效像素（坐标${x},${y}）`);
@@ -568,14 +604,14 @@ async function checkImageOutsideGrid() {
    console.log("检测结果：", hasOutsideValidPixel ? "超出网格" : "正常");
-    // ===================== ✅ 返回你要的两个参数 =====================
+    // ===================== 第四步：返回最终检测结果 =====================
    return {
-      isImageBiggerThanGrid, // 图片是否大于台版
+      isImageBiggerThanGrid, // 图片是否大于网格
-      hasOutsideValidPixel, // 超出部分是否有真实像素（非透明）
+      hasOutsideValidPixel, // 超出部分是否有真实有效像素
    };
  } catch (error) {
+    // 异常捕获：检测失败时，打印错误并返回默认结果，保证程序不崩溃
    console.error("检测失败：", error);
-    // 出错也返回固定结构
    return {
      isImageBiggerThanGrid: false,
      hasOutsideValidPixel: false,

--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -275,11 +275,13 @@ export function getImgTitle(imageResList) {
    });
 }
+/**
+ * 毫米(mm) 转换为 像素(px) 工具函数
+ * 换算标准：遵循打印/设计行业标准 1英寸 = 25.4mm，固定使用每一个网格42px的进行计算
+ * @param {number|string} mm - 待转换的毫米数值
+ * @returns {number} 转换后的像素值，保留1位小数
+ */
 export function newMmToPxFn(mm) {
  const px = (Number(mm) / 25.4) * 42;
  return Number(px.toFixed(1));
 }
-export function HLCMmToPxFn(mm) {
-  const px = (Number(mm) / 10) * 18;
-  return Number(px.toFixed(1));
-}
--- a/src/views/design/head/index.vue
+++ b/src/views/design/head/index.vue
 <script>
 import bus from "@/bus";
-// import PrintDialog from "./printDialog.vue";
-// import { getProductCnByFactorySubOrderNumberApi } from "../../../api/index.js";
 import { ipcRenderer } from "electron";
 import { copySingleImage } from "@/server/utils/index.js";
 const moment = require("moment");
@@ -143,7 +141,6 @@ export default {
    } else {
      this.$dataStore.set("setting", this.setting);
    }
-    // console.log(this.getDomainFromUrl(getHostApi().apiApiHost));
  },
  watch: {
    setting: {
@@ -161,9 +158,7 @@ export default {
      immediate: true,
      deep: true,
    },
-    desktopDevice(val) {
+    desktopDevice() {
-      console.log("desktopDevice", val);
      this.checked = false;
    },
    imgList: {
@@ -247,12 +242,6 @@ export default {
      const canCallApi =
        this.desktopDevice != 3 ||
        (data.saveImgList?.every((el) => el.power) ?? false);
-      console.log(
-        "data",
-        data.saveImgList?.every((el) => el.power),
-      );
-      console.log("canCallApi", canCallApi);
-      console.log("desktopDevice", this.desktopDevice);
      if (canCallApi) {
        console.log("生产完成");
@@ -263,9 +252,6 @@ export default {
        }
        console.log("本地数据removeFromOrderInfo：", getOrderInfoMap());
        //生产完成后在本地删除
-        // return;
-        // await completeDeliveryApi(params);
-        // await this.$api.post("/completeDelivery", params);
        await this.$api.post(
          pathMap["completeDelivery"][this.orderType],
          params,
@@ -324,9 +310,6 @@ export default {
              responseType: "blob",
            })
            .then((res) => {
-              // console.log("item", item);
-              const canvasWidth = 524.0493037260068;
-              const canvasHeight = 589.5;
              var url = URL.createObjectURL(res.data);
              let img = new Image();
              img.crossorigin = "";
@@ -343,27 +326,8 @@ export default {
                ctx.imageSmoothingQuality = "high";
                ctx.drawImage(img, ...item.drawImage);
                URL.revokeObjectURL(url);
-                const originWidth = img.width;
-                const originHeight = img.height;
+                resolve();
-                const [dx, dy, drawW] = item.drawImage;
-                const scale = drawW / originWidth;
-                // 2. 黄点在【原始高清图】上的裁切坐标
-                const cropArea = {
-                  left: Math.round(-dx / scale),
-                  top: Math.round(-dy / scale),
-                  width: Math.round(canvasWidth / scale),
-                  height: Math.round(canvasHeight / scale),
-                };
-                // 3. 黄点相对【整个原始素材】的比例（0~1，你要的最终结果）
-                const maskRatio = {
-                  left: Number((cropArea.left / originWidth).toFixed(4)),
-                  top: Number((cropArea.top / originHeight).toFixed(4)),
-                  width: Number((cropArea.width / originWidth).toFixed(4)),
-                  height: Number((cropArea.height / originHeight).toFixed(4)),
-                };
-                console.log(392, maskRatio);
-                resolve(maskRatio);
              };
            })
            .catch((e) => {
@@ -391,12 +355,7 @@ export default {
      // 遍历每个canvas配置项，串行处理（保持原逻辑，若想并行可改成Promise.all(canvasList.map(...))）
      for (const canvasConfig of canvasList) {
        // 解构赋值，简化后续取值，同时校验核心属性
-        const {
+        const { canvasWidth, canvasHeight, list: drawItems } = canvasConfig;
-          canvasWidth,
-          canvasHeight,
-          rect_info,
-          list: drawItems,
-        } = canvasConfig;
        if (!canvasWidth || !canvasHeight || !Array.isArray(drawItems)) {
          throw new Error(
            "canvas配置项必须包含canvasWidth/canvasHeight/list(数组)属性",
@@ -411,7 +370,7 @@ export default {
        // 批量执行绘制方法，收集异步绘制Promise（语义化变量名，替代原模糊的list）
        const drawPromises = drawItems.map((drawItem) =>
-          this.drawImage(canvas, drawItem, { rect_info }),
+          this.drawImage(canvas, drawItem),
        );
        // 等待当前canvas的所有绘制操作完成
        await Promise.all(drawPromises);
@@ -494,8 +453,7 @@ export default {
      }
      if (this.desktopDevice == 3) {
        designImagesCanvasJsonList = JSON.parse(designImagesCanvasJsonList);
-        console.log("designImagesCanvasJsonList", designImagesCanvasJsonList);
+        // 惠立彩 带黄点摸的订单直接展示错误弹窗
        if (!designImagesCanvasJsonList[0].images) {
          this.dialogVisible = true;
          return;
@@ -528,7 +486,6 @@ export default {
      } else if (bool) {
        //如果有本地数据 则直接获取本地数据同图片
        imageResList = this.detail?.saveImgList || [];
-        console.log("imageResList", imageResList);
      }
      if (this.checked) {
@@ -605,6 +562,7 @@ export default {
      }
      if (this.detail && !this.isAutoFinish && this.desktopDevice == 3) {
+        //惠立彩判断是否全部图片都已经打印完成
        const canCallApi =
          this.detail.saveImgList?.every((el) => el.power) ?? false;
        if (canCallApi) {
@@ -615,16 +573,13 @@ export default {
        }
      }
-      // if (this.desktopDevice == 3 && !this.isForcedProduction) {
-      // }
      //判断生产单号是否为空
      if (this.productionNo === "")
        return this.$message.warning("请录入生产单号");
      const today = moment(new Date()).format("YYYY-MM-DD");
-      //判断上一单未勾选是否跳过
+      //判断上一单未勾选添加当天日期是否跳过
      if (!this.isAutoFinish && today != getNowDate()) {
        this.$confirm("请注意自动完成上一单未勾选", "提示", {
          confirmButtonText: "跳过提示",
@@ -686,8 +641,6 @@ export default {
              apiRequestParams,
            ));
        } else {
-          console.log("path", pathMap["findByPodProductionNo"]);
          findByPodProductionNo = await this.$api.post(
            pathMap["findByPodProductionNo"][this.orderType],
            apiRequestParams,
@@ -730,12 +683,10 @@ export default {
      if (field.includes("CN")) {
        return "CN";
      }
      // 第二类：以"AAAF-USPSC"开头
      if (field.includes("US")) {
        return "US";
      }
      // 第三类：所有其他情况
      return "GC";
    },
@@ -834,7 +785,6 @@ export default {
    },
    async cutImgFn(arr) {
      if (!arr.length) return arr;
-      console.log(arr);
      try {
        const processQueue = await Promise.all(
@@ -864,15 +814,13 @@ export default {
        // 等待所有异步操作完成
        await new Promise((resolve) => setTimeout(resolve, 100));
        const newMap = new Map(processQueue.map((el) => [el.designId, el]));
-        // console.log("newMap", newMap);
        processQueue.forEach((el) => {
          if (newMap.has(el.designId)) {
            el.fileName = newMap.get(el.designId).fileName;
            el.productionFile = newMap.get(el.designId).productionFile;
          }
        });
-        // console.log("processQueue", processQueue);
        return processQueue;
      } catch (error) {
        console.error("错误", error);

--- a/src/views/design/main/index.vue
+++ b/src/views/design/main/index.vue
@@ -767,6 +767,7 @@ export default {
          let data = await that.getImageSize(files[i].url);
          const isCut = files[i].isCut;
          if (size && !isCut) {
+            //带黄点模判断是否是cp类，cp类按照newMmToPxFn方法重新计算宽高
            if (isCp) {
              width_px = newMmToPxFn(size.width);
              height_px = newMmToPxFn(size.height);
@@ -774,13 +775,11 @@ export default {
              width_px = mmToPx(size.width);
              height_px = mmToPx(size.height);
            }
            x = w;
            y = height_px / 2;
            rate = height_px / width_px;
-            // }
            if (this.newDesktopDevice == 3) {
+              //惠立彩 直接获取图片原始像素进行技术
              const scale = bh / data.height;
              width_px = data.width * scale;
              height_px = data.height * scale;
@@ -822,16 +821,20 @@ export default {
          isCp ? that.ev("x_center") : that.ev("cover");
          if (isCut) that.ev("cover");
          this.$nextTick(async () => {
+            //等图片铺上网格后判断是否超过网格
            const {
              isImageBiggerThanGrid,
              hasOutsideValidPixel,
            } = await checkImageOutsideGrid();
            if (isImageBiggerThanGrid && hasOutsideValidPixel) {
+              //图大于台版且超过台版有素材
              this.isOver = hasOutsideValidPixel;
            } else if (!isImageBiggerThanGrid) {
+              //图小于台版
              this.isOver = isImageBiggerThanGrid;
            } else if (isImageBiggerThanGrid && !hasOutsideValidPixel) {
+              //图大于台版且超过台版没有有素材
              this.isOver = hasOutsideValidPixel;
            }
          });
@@ -845,9 +848,6 @@ export default {
    addFile(file, callback) {
      let that = this;
      let bw = document.getElementById("line").clientWidth;
-      console.log("addFile");
-      // let bh = document.getElementById("line").clientHeight;
      that.$nextTick(() => {
        that.getImageSize(file.url).then((data) => {
          let w = document.getElementById("line").clientWidth / 2;
@@ -864,7 +864,6 @@ export default {
            h: bw * (2 / 3) * rate,
            r: 0,
          });
-          // console.log(570, that.imgList);
          that.selectIndex = that.imgList.length - 1;
          that.showImgSetting = true;
          callback && callback(file);
@@ -984,12 +983,10 @@ export default {
            }
          }),
        );
-        // console.log("processQueue", processQueue);
        // 等待所有异步操作完成
        await new Promise((resolve) => setTimeout(resolve, 100));
        const newMap = new Map(processQueue.map((el) => [el.designId, el]));
-        console.log("newMap", newMap);
        this.selectImgList.forEach((el) => {
          if (newMap.has(el.designId)) {
@@ -1009,16 +1006,12 @@ export default {
            this.selectIndex = -1;
          }
        }
-        console.log("this.selectImgList", this.selectImgList);
        this.checkList = [];
        this.getBackFile({ files: [this.selectImgList[0]] });
      } catch (error) {
        console.error("错误", error);
      }
    },
-    // startLoading,
-    // endLoading,
    handleClick(event) {
      // 获取点击的元素