Skip to content

E
electron-printer
Commit 6d7e3d33 by linjinhong
Options

feat:添加惠立彩图片判断

parent 6df3273f
Showing with 320 additions and 252 deletions
config/env.json
{
"apiApiHost": "https://factory.jomalls.com/api",
"fileApiUrl": "https://factory.jomalls.com/upload/factory",
"visionUrl": "https://console.jomalls.com",
"configPath": "D:\\work\\electron-printer\\config\\env.json"
}
{"apiApiHost":"http://172.16.19.100:8060/api","fileApiUrl":"http://172.16.19.100:8060/upload/factory","visionUrl":"http://console.jomalls.com","configPath":"D:\\work\\electron-printer\\config\\env.json"}
\ No newline at end of file
src/api/index.js
const { getHostApi } = require("@/server/utils/store");
import { Loading } from "element-ui";
const { pathMap } = require("@/config/index.js");
import { downloadImage, downloadOtherImage } from "@/server/utils";
import axios from "../utils/axios";
......@@ -77,14 +78,6 @@ const downloadDesignImagesBaseApi = (urlPath, params) => {
return axios.post(urlPath, requestData, { baseURL: env, skipLoading: true });
};
// 接口路径映射表（集中管理，便于维护）
const API_PATH_MAP = {
CN: "factory/podJomallOrderProductCn/downloadDesignImages",
US: "factory/podJomallOrderProductUs/downloadDesignImages",
GC: "factory/podJomallOrder/downloadByProduction",
USHLC: "factory/podJomallOrderProductUs/downloadCompatibleDesignImages",
CNHLC: "factory/podJomallOrderProductCn/downloadCompatibleDesignImages",
};
/**
* 根据子订单号下载素材
......@@ -103,7 +96,7 @@ export async function downloadBySubOrderNumberApi(params) {
}
// 4. 发送请求获取下载链接
const { data, message } = await downloadDesignImagesBaseApi(
API_PATH_MAP[targetType],
pathMap["downloadBySubOrderNumber"][targetType],
params,
);
// 建议明确获取响应data（根据实际axios响应结构调整）
......@@ -141,51 +134,6 @@ export async function downloadBySubOrderNumberApi(params) {
}
}
/**
* 渲染进程调用主进程下载方法（Electron 6.x 兼容）
* @param {number} device - 设备类型 2/3
* @param {array} files - 下载文件列表
* @returns {Promise} 下载结果
*/
// function callMainProcessDownload(device, files) {
// // 生成唯一 requestId，用于匹配请求和响应（避免多请求冲突）
// const requestId = `download_${Date.now()}_${Math.random()
// .toString(36)
// .substr(2, 9)}`;
// return new Promise((resolve, reject) => {
// // 1. 监听主进程的响应（一次性监听，避免内存泄漏）
// const responseHandler = (event, result) => {
// // 只处理当前 requestId 的响应
// if (result.requestId !== requestId) return;
// // 移除监听（关键：避免重复监听）
// ipcRenderer.removeListener("download-image-response", responseHandler);
// // 处理结果
// if (result.success) {
// resolve(result);
// } else {
// reject(new Error(result.message));
// }
// };
// ipcRenderer.on("download-image-response", responseHandler);
// // 2. 向主进程发送下载请求
// ipcRenderer.send("download-image-request", {
// requestId,
// device,
// files,
// });
// // 3. 超时处理（避免一直等待）
// setTimeout(() => {
// ipcRenderer.removeListener("download-image-response", responseHandler);
// reject(new Error("调用主进程下载方法超时"));
// }, 120000); // 2分钟超时
// });
// }
// ===================== 订单完成相关 =====================
/**
* 通用完成订单接口
......
src/background.js
......@@ -243,8 +243,8 @@ async function createWindow() {
}
try {
let configObj = JSON.parse(data);
configObj.apiApiHost = `https://${newDomain}/api`;
configObj.fileApiUrl = `https://${newDomain}/upload/factory`;
configObj.apiApiHost = `http://${newDomain}/api`;
configObj.fileApiUrl = `http://${newDomain}/upload/factory`;
configObj.configPath = configPath;
const newData = JSON.stringify(configObj); // 使用2个空格缩进
......
src/config/index.js
......@@ -16,6 +16,10 @@ export const pathMap = {
US: "factory/podJomallOrderProductUs/completeDelivery",
GC: "factory/podJomallOrderProduct/completeDelivery",
},
processTransparentBackground: {
CN: "api/factory/podJomallOrderProductCn/processTransparentBackground",
US: "api/factory/podJomallOrderProductUs/processTransparentBackground",
},
};
export function autoRegisterRouter(router, funcKey, handler) {
......
src/server/entity/function.js
......@@ -9,6 +9,7 @@ const {
cropImageTransparentEdges,
cropTransparentEdges,
processImages,
cropToPrintArea,
} = require("../utils/setImage");
import axios from "axios";
import { returnLogFilePath } from "../utils/log";
......@@ -28,6 +29,9 @@ const {
getHostApi,
getDesktopDevice,
} = require("@/server/utils/store");
const { pathMap } = require("@/config/index.js");
//获取当前驱动版本
function getCurrentVersion() {
const version = getVersion();
......@@ -143,18 +147,14 @@ export default {
const params = req.body;
const token = req.headers["jwt-token"];
const urlMap = {
CN: "factory/podJomallOrderProductCn/downloadDesignImages",
US: "factory/podJomallOrderProductUs/downloadDesignImages",
GC: "factory/podJomallOrder/downloadByProduction",
USHLC: "factory/podJomallOrderProductUs/downloadCompatibleDesignImages",
CNHLC: "factory/podJomallOrderProductCn/downloadCompatibleDesignImages",
};
const downloadBySubOrderNumber = pathMap["downloadBySubOrderNumber"];
try {
let url = urlMap[params.orderType];
let url = downloadBySubOrderNumber[params.orderType];
if (params.device == 3) {
url = params.orderType == "CN" ? urlMap["CNHLC"] : urlMap["USHLC"];
url =
params.orderType == "CN"
? downloadBySubOrderNumber["CNHLC"]
: downloadBySubOrderNumber["USHLC"];
}
const { data } = await axios.post(`${env}/${url}`, [...params.ids], {
headers: { "jwt-token": token },
......@@ -480,6 +480,17 @@ export default {
res.json({ code: 500, msg: err.message });
}
},
//输入图片路径或目录
cropToPrintAreaApi: async (req, res) => {
const { inputPath, outputPath, data: params } = req.body;
try {
const data = await cropToPrintArea(inputPath, outputPath, params);
res.json({ code: 200, msg: data });
} catch (err) {
res.json({ code: 500, msg: err.message });
}
},
//删除图片
cleanDirectorySync: async (req, res) => {
const desktopDevice = getCurrentDesktopDevice();
......@@ -573,4 +584,23 @@ export default {
res.json({ code: 500, msg: error });
}
},
processTransparentBackground: async (req, res) => {
env = getHostApi().apiApiHost;
const token = req.headers["jwt-token"];
const params = req.body;
const processTransparentBackground =
pathMap["processTransparentBackground"];
let url = processTransparentBackground[params.orderType];
let postData = { url: "", subOrderNumber: "" };
try {
let { data } = await axios.post(`${env}/${url}`, postData, {
headers: { "jwt-token": token },
});
res.send(data);
} catch (err) {
console.log(err);
res.json({ code: 500, msg: err });
}
},
};
src/server/routes/index.js
......@@ -39,6 +39,8 @@ router.post("/imageTransparentEdges", fn.imageTransparentEdges);
router.post("/imageListTransparentEdges", fn.imageListTransparentEdges);
// 处理图片并输出结果
router.post("/processImage", fn.processImage);
// 处理图片并输出结果
router.post("/cropToPrintArea", fn.cropToPrintAreaApi);
// 删除图片
router.post("/cleanDirectorySync", fn.cleanDirectorySync);
......@@ -56,4 +58,10 @@ router.post("/copySingleImageFn", fn.copySingleImageFn);
// 根据生产单号查询详情
autoRegisterRouter(router, "findByPodProductionNo", fn.findByPodProductionNo);
autoRegisterRouter(
router,
"processTransparentBackground",
fn.processTransparentBackground,
);
export { router as default };
src/server/utils/setImage.js
......@@ -422,112 +422,187 @@ function applyPadding(bounds, padding, imgWidth, imgHeight) {
async function checkImageOutsideGrid() {
try {
// ===================== 第一步：获取 DOM 几何信息（核心！）=====================
// 1. 网格 DOM 信息（位置+尺寸，基于视口的绝对位置）
const lineDom = document.getElementById("line");
if (!lineDom) throw new Error("未找到网格元素（id=line）");
const lineRect = lineDom.getBoundingClientRect(); // 网格的位置+尺寸
if (!lineDom) {
console.log("未找到网格元素（id=line）");
return false;
}
const lineRect = lineDom.getBoundingClientRect();
const grid = {
left: lineRect.left, // 网格左边界（视口坐标）
top: lineRect.top, // 网格上边界（视口坐标）
right: lineRect.right, // 网格右边界
bottom: lineRect.bottom, // 网格下边界
width: lineRect.width, // 网格宽度
height: lineRect.height, // 网格高度
left: lineRect.left,
top: lineRect.top,
right: lineRect.right,
bottom: lineRect.bottom,
width: lineRect.width,
height: lineRect.height,
};
if (grid.width === 0 || grid.height === 0)
throw new Error("网格尺寸为0，请确认网格已渲染");
if (grid.width === 0 || grid.height === 0) return false;
// 2. 图片 DOM 信息（位置+尺寸+原始尺寸）
const imgDom = document.getElementById("imgBox");
if (!imgDom || !imgDom.complete)
throw new Error("图片未加载完成或未找到imgBox元素");
const imgRect = imgDom.getBoundingClientRect(); // 图片的位置+尺寸（视口坐标）
if (!imgDom) {
console.log("图片未加载完成或未找到imgBox元素");
return false;
}
// ✅ 修复 1：确保图片加载完成（最关键！）
await new Promise((resolve) => {
if (imgDom.complete) resolve();
else imgDom.onload = resolve;
});
const imgRect = imgDom.getBoundingClientRect();
// ✅ 修复 2：正确获取图片原始尺寸（必须等 onload 之后）
const naturalWidth = imgDom.naturalWidth;
const naturalHeight = imgDom.naturalHeight;
if (naturalWidth === 0 || naturalHeight === 0) {
console.log("图片原始尺寸为0");
return false;
}
const imgDisplayInfo = {
left: imgRect.left, // 图片左边界（视口坐标）
top: imgRect.top, // 图片上边界（视口坐标）
width: imgRect.width, // 图片显示宽度（页面渲染尺寸）
height: imgRect.height, // 图片显示高度（页面渲染尺寸）
naturalWidth: imgDom.naturalWidth, // 图片原始宽度
naturalHeight: imgDom.naturalHeight, // 图片原始高度
left: imgRect.left,
top: imgRect.top,
width: imgRect.width,
height: imgRect.height,
naturalWidth,
naturalHeight,
};
if (imgDisplayInfo.width === 0 || imgDisplayInfo.height === 0)
throw new Error("图片显示尺寸为0");
const isImageBiggerThanGrid =
imgDisplayInfo.width > grid.width || imgDisplayInfo.height > grid.height;
// 如果图片不大于网格，直接返回false，不执行sharp和像素检测
if (!isImageBiggerThanGrid) {
console.log("图片尺寸小于/等于网格，无需检测越界");
return false;
}
// ===================== 第二步：Sharp 读取图片原始像素 =====================
// 1. 处理图片 URL（Electron 中兼容本地/远程图片）
let imgSource = imgDom.src;
// 本地图片：转换为绝对路径（sharp 支持本地路径）
if (imgSource.startsWith("file://")) {
imgSource = new URL(imgSource).pathname;
// Windows 路径兼容
if (process.platform === "win32") {
imgSource = imgSource.slice(1); // 去掉开头的 /
imgSource = imgSource.slice(1);
}
}
// 2. Sharp 读取图片并获取原始像素（RGBA 格式）
const sharpImg = sharp(imgSource);
const imgMetadata = await sharpImg.metadata(); // 获取图片元信息
const imgMetadata = await sharpImg.metadata();
const { data: pixels } = await sharpImg
.raw() // 转为原始像素 Buffer（RGBA，每个像素4字节）
.toBuffer({ resolveWithObject: true }); // 返回像素 Buffer + 信息
.raw()
.toBuffer({ resolveWithObject: true });
// ===================== 第三步：坐标映射 + 像素检测 =====================
// 1. 计算缩放比例：原始像素 → 页面显示坐标
const scaleX = imgDisplayInfo.width / imgDisplayInfo.naturalWidth; // 水平缩放比
const scaleY = imgDisplayInfo.height / imgDisplayInfo.naturalHeight; // 垂直缩放比
const scaleX = imgDisplayInfo.width / naturalWidth;
const scaleY = imgDisplayInfo.height / naturalHeight;
// 2. 遍历像素检测（步长=1，测试阶段；正式可改为2/4优化性能）
let hasOutsideValidPixel = false;
const alphaThreshold = 1; // 有效像素阈值（Alpha > 1 即为有效）
const alphaThreshold = 1;
const imgNaturalWidth = imgMetadata.width;
const imgNaturalHeight = imgMetadata.height;
for (let y = 0; y < imgNaturalHeight; y++) {
if (hasOutsideValidPixel) break; // 找到有效像素后终止遍历
if (hasOutsideValidPixel) break;
for (let x = 0; x < imgNaturalWidth; x++) {
// a. 原始像素 → 页面显示坐标（图片在视口中的绝对位置）
const imgDisplayX = imgDisplayInfo.left + x * scaleX;
const imgDisplayY = imgDisplayInfo.top + y * scaleY;
// b. 判断当前像素是否超出网格边界
// ✅ 修复 3：防止 NaN 导致误判
if (isNaN(imgDisplayX) || isNaN(imgDisplayY)) continue;
const isOutside =
imgDisplayX < grid.left || // 超出网格左边界
imgDisplayX > grid.right || // 超出网格右边界
imgDisplayY < grid.top || // 超出网格上边界
imgDisplayY > grid.bottom; // 超出网格下边界
imgDisplayX < grid.left ||
imgDisplayX > grid.right ||
imgDisplayY < grid.top ||
imgDisplayY > grid.bottom;
if (isOutside) {
// c. 获取当前像素的 Alpha 值（RGBA 的第4个字节）
const pixelIndex = (y * imgNaturalWidth + x) * 4;
const alpha = pixels[pixelIndex + 3]; // Alpha 通道（0-255）
// d. 检测有效像素
const alpha = pixels[pixelIndex + 3];
if (alpha > alphaThreshold) {
hasOutsideValidPixel = true;
console.log(
`找到超出网格的有效像素：原始坐标(${x},${y}) → 页面坐标(${imgDisplayX.toFixed(
2,
)},${imgDisplayY.toFixed(2)}) → Alpha=${alpha}`,
);
break; // 终止内层循环
console.log(`找到超出网格的有效像素：(${x},${y})`);
break;
}
}
}
}
// ===================== 第四步：返回结果 =====================
console.log(
"检测结果：",
hasOutsideValidPixel ? "超出网格有有效像素" : "超出网格无有效像素",
);
console.log("检测结果：", hasOutsideValidPixel ? "超出网格" : "正常");
return hasOutsideValidPixel;
} catch (error) {
console.error("图片超出网格检测失败：", error);
alert(`检测失败：${error.message}`);
console.error("检测失败：", error);
return false;
}
}
const FIXED_MASK_RATIO = {
left: 0.341,
top: 0.308,
width: 0.443,
height: 0.443,
};
async function cropToPrintArea(inputPath, outputPath, data) {
if (!data) return false;
const { canvasWidth, canvasHeight, rect_info } = data;
// 正确比例（你裁剪必须用这个）
let RATIO = { ...FIXED_MASK_RATIO };
if (rect_info) {
RATIO = {
left: rect_info.leftDistance / canvasWidth,
top: rect_info.topDistance / canvasHeight,
width: rect_info.rectWidth / canvasWidth,
height: rect_info.rectHeight / canvasHeight,
};
}
try {
// 1. 获取图片宽高
const meta = await sharp(inputPath).metadata();
const width = meta.width;
const height = meta.height;
// 2. 计算裁剪区域
const cropLeft = Math.round(width * RATIO.left);
const cropTop = Math.round(height * RATIO.top);
const cropWidth = Math.round(width * RATIO.width);
const cropHeight = Math.round(height * RATIO.height);
// 3. 执行裁剪
await sharp(inputPath)
.extract({
left: cropLeft,
top: cropTop,
width: cropWidth,
height: cropHeight,
})
.toFile(outputPath);
// 4. ✅ 返回你要的结构
const results = [
{
file: path.basename(inputPath),
...{
status: "cropped",
outputPath: outputPath,
originalSize: { width, height },
newSize: { width: cropWidth, height: cropHeight },
cropArea: {
x: cropLeft,
y: cropTop,
width: cropWidth,
height: cropHeight,
},
},
},
];
fs.unlinkSync(inputPath);
return results;
} catch (error) {
throw new Error("图片裁剪失败: " + error.message);
}
}
// 分区边界检测实现
......@@ -537,4 +612,5 @@ module.exports = {
processImages,
cropImage,
checkImageOutsideGrid,
cropToPrintArea,
};
src/utils/index.js
......@@ -244,7 +244,7 @@ export function extractValue(str) {
if (str.includes("_B_")) return "B";
}
export function mmToPxFn(mm) {
export function newMmToPxFn(mm) {
const px = (Number(mm) / 25.4) * 42;
return Number(px.toFixed(1));
}
src/views/design/head/index.vue
......@@ -72,6 +72,7 @@ export default {
pkg,
actionIndex: -1,
isAutoFinish: false,
isForcedProduction: false,
cacheVisible: false,
showPrintDialog: false,
productionNo: "",
......@@ -105,6 +106,7 @@ export default {
"#c7158577",
],
faceType: "A",
dialogVisible: false,
};
},
computed: {
......@@ -398,33 +400,7 @@ export default {
// async函数本身返回Promise，直接return即可，无需手动resolve
return imageList;
},
// async canvasToImage(canvasList) {
// return new Promise(async (resolve, reject) => {
// let imageList = [];
// try {
// for (let canvasItem of canvasList) {
// const canvas = document.createElement("canvas");
// canvas.className = "createCanvas";
// canvas.width = canvasItem.canvasWidth;
// canvas.height = canvasItem.canvasHeight;
// let list = [];
// for (let listItem of canvasItem.list) {
// list.push(this.drawImage(canvas, listItem));
// }
// await Promise.all(list);
// let base = canvas.toDataURL("image/png", 1);
// // console.log("base", base);
// canvas.remove();
// imageList.push(base);
// }
// resolve(imageList);
// } catch (e) {
// // console.log(e);
// reject(e);
// }
// });
// },
base64ToFile(base64, fileName) {
let arr = base64.split(",");
let bstr = atob(arr[1]);
......@@ -448,7 +424,14 @@ export default {
async hasDesignImagesCanvasJsonList(designImagesCanvasJsonList, bool) {
let imageResList = [];
designImagesCanvasJsonList = JSON.parse(designImagesCanvasJsonList);
const isCustom = !designImagesCanvasJsonList[0].images || false;
const {
canvasWidth,
canvasHeight,
rect_info,
} = designImagesCanvasJsonList;
const params = { canvasWidth, canvasHeight, rect_info };
//当adjustable有值时 直接赋值宽高
// if (
// !this.checked &&
......@@ -517,7 +500,8 @@ export default {
imageResList = this.detail?.saveImgList || [];
console.log("imageResList", imageResList);
}
if (isCustom && this.desktopDevice !== 3)
imageResList = await this.cutImgFn(imageResList, true, params);
if (this.checked) {
imageResList = await this.cutImgFn(imageResList);
imageResList.forEach((el) => {
......@@ -574,6 +558,7 @@ export default {
let obj = {
type: "sendFile",
value: [...newImgList],
productMark: this.detail.productMark,
};
if (
......@@ -631,6 +616,10 @@ export default {
});
}
}
// if (this.desktopDevice == 3 && !this.isForcedProduction) {
// }
//判断生产单号是否为空
if (this.productionNo === "")
return this.$message.warning("请录入生产单号");
......@@ -845,7 +834,7 @@ export default {
this.$store.commit("setGrid");
this.command(0);
},
async cutImgFn(arr) {
async cutImgFn(arr, type, data) {
if (!arr.length) return arr;
console.log(arr);
......@@ -859,8 +848,11 @@ export default {
const params = {
inputPath: el.productionFile,
outputPath: outputPath,
data,
};
const res = await this.$api.post("/processImage", params);
let res;
if (!type) res = await this.$api.post("/processImage", params);
else res = await this.$api.post("/cropToPrintArea", params);
return {
fileName: outputFileName,
......@@ -1117,13 +1109,6 @@ export default {
</div>
</div>
<div class="center-input">
<!-- <el-button
@click="clearArray"
size="medium"
style="margin-right: 10px"
type="primary"
>清空本地数据
</el-button> -->
<el-input
@keyup.enter.native="getDataInfo"
style="width: 40%;"
......@@ -1151,6 +1136,11 @@ export default {
<div style="margin-left: 10px;">
<el-checkbox v-model="isAutoFinish">自动完成上一单</el-checkbox>
</div>
<div style="margin-left: 10px;" v-if="desktopDevice == 3">
<el-checkbox v-model="isForcedProduction" style="color: red;"
>自动强制生产</el-checkbox
>
</div>
<div style="margin-left: 10px;" v-show="desktopDevice != 3">
<el-checkbox v-model="checked">自动裁切</el-checkbox>
</div>
......@@ -1208,6 +1198,23 @@ export default {
<el-button @click="clearCache" type="primary">清除</el-button>
</template>
</el-dialog>
<el-dialog
title="警告：无法直接生产"
:visible.sync="dialogVisible"
width="30%"
>
<div>
素材效果已经超出台版范围，无法直接打印。请更换打印设
备，或者进行强制生产
</div>
<div>注:“自动强制生产”会让每次生产都强制生产</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button>强制生产</el-button>
<el-button type="primary">自动强制生产</el-button>
</span>
</el-dialog>
</div>
</template>
......
src/views/design/main/index.vue
......@@ -4,7 +4,7 @@ const { ipcRenderer } = require("electron");
import ImgSetting from "./imgSetting.vue";
import bus from "@/bus";
import PrintDialog from "@/views/design/head/printDialog.vue";
import { mmToPx, mmToPxFn, extractValue } from "@/utils";
import { mmToPx, newMmToPxFn, extractValue } from "@/utils";
const { checkImageOutsideGrid } = require("../../../server/utils/setImage");
const { pathMap } = require("@/config/index.js");
......@@ -145,6 +145,7 @@ export default {
return JSON.parse(JSON.stringify(this.imgList[this.selectIndex]));
}
this.showImgSetting = false;
return null;
},
......@@ -180,7 +181,7 @@ export default {
actionList: [],
checkList: [],
oldImgList: [],
hasSize: false,
parentWidth: 0,
backColor: "#77797a",
gridBg: "#ffffff",
......@@ -224,36 +225,38 @@ export default {
expandStatus: {},
detectResult: null, // 检测结果
imgNaturalSize: { width: 0, height: 0 }, // 图片原始尺寸
productMark: "",
isMove: false,
isOver: false,
};
},
watch: {
imgList: {
async handler(newValue) {
// console.log(223, newValue);
// console.log(223, this.returnItem);
const image = document.getElementById("imgBox");
if (newValue.length && image) {
// this.$nextTick(() => {
// let dom = document.getElementsByClassName("drr");
// console.log(228, dom);
// this.imgList.forEach((el, i) => {
// let dom_i = document.getElementsByClassName("drr")[i];
// dom_i.style.zIndex =
// dom_i.style.zIndex === "" || !dom_i.style.zIndex
// ? 0
// : dom_i.style.zIndex;
// dom[i].addEventListener("click", () => {
// if (this.newDesktopDevice == 3) {
// return;
// }
// this.selectIndex = i;
// this.selectItem(i);
// });
// });
// });
}
async handler() {
this.isMove = false;
// const image = document.getElementById("imgBox");
// console.log(234, image);
// if (newValue.length && image) {
// this.$nextTick(() => {
// let dom = document.getElementsByClassName("drr");
// console.log(228, dom);
// this.imgList.forEach((el, i) => {
// let dom_i = document.getElementsByClassName("drr")[i];
// dom_i.style.zIndex =
// dom_i.style.zIndex === "" || !dom_i.style.zIndex
// ? 0
// : dom_i.style.zIndex;
// dom[i].addEventListener("click", () => {
// if (this.newDesktopDevice == 3) {
// return;
// }
// this.selectIndex = i;
// this.selectItem(i);
// });
// });
// });
this.$store.commit("changeImgList", this.imgList);
},
deep: true,
......@@ -270,7 +273,7 @@ export default {
this.showImgSetting = false;
}
},
desktopDevice(newValue) {
desktopDevice() {
this.newDesktopDevice = getDesktopDevice();
this.detail = {};
......@@ -665,6 +668,7 @@ export default {
this.showImgSetting = false;
},
dragStop(data, item) {
this.isMove = true;
console.log("dragStop");
this.$set(item, "y", data.y);
this.$set(item, "x", data.x);
......@@ -672,6 +676,7 @@ export default {
this.getCutArea();
},
resizeStop(data, item) {
this.isMove = true;
console.log("resizeStop");
if (this.selectIndex < 0 && this.imgList.length) this.selectIndex = 0;
......@@ -688,6 +693,7 @@ export default {
},
resizing() {},
rotating(data, item) {
this.isMove = true;
this.$set(item, "r", data.angle);
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
},
......@@ -766,8 +772,8 @@ export default {
return img?.productionFile;
},
getBackFile({ files, size }, callback) {
console.log(333333333);
console.log("productMark", this.detail);
const isCp = this.productMark == "custom_part" ? true : false;
let that = this;
let bw = document.getElementById("line");
let bh = bw.clientHeight;
......@@ -793,8 +799,14 @@ export default {
y = h;
rate = height_px / width_px;
} else {
width_px = mmToPxFn(size.width);
height_px = mmToPxFn(size.height);
if (isCp) {
width_px = newMmToPxFn(size.width);
height_px = newMmToPxFn(size.height);
} else {
width_px = mmToPx(size.width);
height_px = mmToPx(size.height);
}
x = w;
y = height_px / 2;
rate = height_px / width_px;
......@@ -835,14 +847,11 @@ export default {
that.selectIndex = that.imgList.length - 1;
that.showImgSetting = true;
if (this.newDesktopDevice != 3) {
that.ev("x_center");
// if (size && !files[i].isCut) {
// console.log(7898, this.detail);
// this.detail.isCustom ? that.ev("center") : that.ev("cover");
// } else {
// that.ev("x_center");
// }
// that.ev("cover");
isCp ? that.ev("x_center") : that.ev("cover");
this.$nextTick(async () => {
this.isOver = await checkImageOutsideGrid();
});
}
if (i === files.length - 1) {
callback && callback();
......@@ -1267,10 +1276,7 @@ export default {
// 自动保留 Value 内部的所有 key，美化缩进
return JSON.stringify(data, null, 2);
},
async checkOutsidePixel() {
const bool = await checkImageOutsideGrid();
console.log(bool);
},
onImageLoad(e) {
this.imgNaturalSize.width = e.target.naturalWidth;
this.imgNaturalSize.height = e.target.naturalHeight;
......@@ -1280,10 +1286,9 @@ export default {
mounted() {
this.imgHeight = window.screen.height + "px";
this.systemSetting = this.$dataStore.get("setting");
// console.log(1297, this.newDesktopDevice);
bus.$on("busEmit", (v) => {
let { type, value, size } = v;
let { type, value, size, productMark } = v;
switch (type) {
case "completeMessage":
......@@ -1309,21 +1314,7 @@ export default {
height: this.detail.mssHeight,
};
}
console.log(1296, this.detail);
// if (this.selectImgIndex != -1 && this.selectImgList.length) {
// this.getBackFile(
// {
// files: [this.selectImgList[this.selectImgIndex]],
// size: this.detail.designImageSize || null,
// },
// () => {
// this.imgHistoryList.push(
// JSON.parse(JSON.stringify(this.imgList)),
// );
// },
// );
// }
break;
case "index":
this.indexChange(value);
......@@ -1343,12 +1334,12 @@ export default {
});
break;
case "sendFile":
this.hasSize = !!size;
this.detail.designImageSize = size;
this.imgList = [];
this.selectImgList = [];
this.selectIndex = -1;
this.productMark = productMark;
if (value.length > 0) {
this.selectImgList = value;
......@@ -1830,29 +1821,37 @@ export default {
class="print-tip"
:style="{ left: isView ? '' : '22%' }"
v-if="
detail &&
detail.mssWidth &&
detail.mssHeight &&
detail?.custom_part == 'custom_part' &&
selectImgList.length &&
isOver &&
!isMove &&
!selectImgList.some((el) => el.isCut)
"
>
<b style="color:green">该单无需拖动设计，直接打印</b>
</div>
<div
class="print-tip"
:style="{ left: isView ? '' : '22%' }"
v-if="
detail?.custom_part == 'custom_part' &&
selectImgList.length &&
newDesktopDevice == 3
!isOver
"
>
<b
:style="{
color: selectImgList.some((el) => el.isCut) ? 'red' : 'green',
}"
v-if="hasSize"
>{{
selectImgList.some((el) => el.isCut)
? "该生产单被裁切需拖动设计打印"
: "该生产单无需拖动设计，直接打印"
}}</b
<b style="color:red"
>素材效果已经超出台版范围，请更换更大台版或和客户协调沟通</b
>
</div>
<div
class="print-tip"
:style="{ left: isView ? '' : '22%' }"
v-if="newDesktopDevice == 3 && !isOver"
>
<b style="color:red"
>该生产单素材已经被强制调整适配台版大小，请关注</b
>
<b style="color: red" v-else>该生产单需要拖动设计打印</b>
</div>
<!-- <div class="print-tip" v-else>
<b style="color: red">该生产单需要拖动设计打印</b>
</div> -->
</div>
<img
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment