Skip to content

E
electron-printer
Commit e654a4f1 by linjinhong
Options

fix:修改逻辑

parent 6dfcf308
Showing with 101 additions and 191 deletions
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 "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"
}
src/config/index.js
...@@ -17,8 +17,8 @@ export const pathMap = { ...@@ -17,8 +17,8 @@ export const pathMap = {
GC: "factory/podJomallOrderProduct/completeDelivery", GC: "factory/podJomallOrderProduct/completeDelivery",
}, },
processTransparentBackground: { processTransparentBackground: {
CN: "api/factory/podJomallOrderProductCn/processTransparentBackground", CN: "factory/podJomallOrderProductCn/processTransparentBackground",
US: "api/factory/podJomallOrderProductUs/processTransparentBackground", US: "factory/podJomallOrderProductUs/processTransparentBackground",
}, },
}; };
......
src/server/entity/function.js
...@@ -9,7 +9,6 @@ const { ...@@ -9,7 +9,6 @@ const {
cropImageTransparentEdges, cropImageTransparentEdges,
cropTransparentEdges, cropTransparentEdges,
processImages, processImages,
cropToPrintArea,
} = require("../utils/setImage"); } = require("../utils/setImage");
import axios from "axios"; import axios from "axios";
import { returnLogFilePath } from "../utils/log"; import { returnLogFilePath } from "../utils/log";
...@@ -165,7 +164,6 @@ export default { ...@@ -165,7 +164,6 @@ export default {
if (data.code !== 200) { if (data.code !== 200) {
return res.json(data); return res.json(data);
} }
console.log("downloadBySubOrderNumber", data);
// 转义中文 // 转义中文
if (data.message) { if (data.message) {
...@@ -175,7 +173,6 @@ export default { ...@@ -175,7 +173,6 @@ export default {
let files = data.data || [data.message]; let files = data.data || [data.message];
files = files.map((el) => ({ url: `${fileEnv}${el}` })); files = files.map((el) => ({ url: `${fileEnv}${el}` }));
console.log(175, files);
const downloadFunc = const downloadFunc =
params.device === 2 ? downloadOtherImage : downloadImage; params.device === 2 ? downloadOtherImage : downloadImage;
...@@ -483,17 +480,7 @@ export default { ...@@ -483,17 +480,7 @@ export default {
res.json({ code: 500, msg: err.message }); 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) => { cleanDirectorySync: async (req, res) => {
const desktopDevice = getCurrentDesktopDevice(); const desktopDevice = getCurrentDesktopDevice();
...@@ -590,17 +577,30 @@ export default { ...@@ -590,17 +577,30 @@ export default {
processTransparentBackground: async (req, res) => { processTransparentBackground: async (req, res) => {
env = getHostApi().apiApiHost; env = getHostApi().apiApiHost;
const token = req.headers["jwt-token"]; const token = req.headers["jwt-token"];
const params = req.body; const { imgUrl, subOrderNumber, orderType } = req.body;
const processTransparentBackground = const processTransparentBackground =
pathMap["processTransparentBackground"]; pathMap["processTransparentBackground"];
let url = processTransparentBackground[params.orderType]; let url = processTransparentBackground[orderType];
let postData = { url: "", subOrderNumber: "" }; let postData = { url: imgUrl, subOrderNumber };
try { try {
let { data } = await axios.post(`${env}/${url}`, postData, { let { data } = await axios.get(`${env}/${url}`, {
params: postData,
headers: { "jwt-token": token }, headers: { "jwt-token": token },
}); });
res.send(data); console.log("processTransparentBackground", data);
if (data.message) {
data.message = encodeURIComponent(data.message);
}
let files = data.data || [data.message];
files = files.map((el) => ({ url: `${fileEnv}${el}` }));
console.log("processTransparentBackground,files", files);
const result = await downloadImage(files);
res.json({ code: 200, data: result });
} catch (err) { } catch (err) {
console.log(err); console.log(err);
res.json({ code: 500, msg: err }); res.json({ code: 500, msg: err });
......
src/server/routes/index.js
...@@ -39,8 +39,7 @@ router.post("/imageTransparentEdges", fn.imageTransparentEdges); ...@@ -39,8 +39,7 @@ router.post("/imageTransparentEdges", fn.imageTransparentEdges);
router.post("/imageListTransparentEdges", fn.imageListTransparentEdges); router.post("/imageListTransparentEdges", fn.imageListTransparentEdges);
// 处理图片并输出结果 // 处理图片并输出结果
router.post("/processImage", fn.processImage); router.post("/processImage", fn.processImage);
// 处理图片并输出结果
router.post("/cropToPrintArea", fn.cropToPrintAreaApi);
// 删除图片 // 删除图片
router.post("/cleanDirectorySync", fn.cleanDirectorySync); router.post("/cleanDirectorySync", fn.cleanDirectorySync);
......
src/server/utils/setImage.js
...@@ -562,93 +562,10 @@ async function checkImageOutsideGrid() { ...@@ -562,93 +562,10 @@ async function checkImageOutsideGrid() {
} }
} }
const FIXED_MASK_RATIO = {
left: 0.341,
top: 0.308,
width: 0.443,
height: 0.443,
};
async function cropToPrintArea(inputPath, outputPath, data) {
let RATIO;
if (!data) return false;
// -------- 你原来的解构（我修正 drawImage 来源）--------
const { canvasWidth, canvasHeight, rect_info, drawImage } = data;
const [dx, dy, imgRenderW, imgRenderH] = drawImage;
// -------- 【关键】你原来的逻辑：有 rect_info 就覆盖比例 --------
if (rect_info) {
RATIO = {
left: rect_info.leftDistance / canvasWidth, // ✅ 转成比例
top: rect_info.topDistance / canvasHeight, // ✅ 转成比例
width: rect_info.rectWidth / canvasWidth, // ✅ 比例
height: rect_info.rectHeight / canvasHeight, // ✅ 比例
};
}
console.log("✅ 正确比例：", RATIO);
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);
// 安全边界
const safeLeft = Math.max(0, cropLeft);
const safeTop = Math.max(0, cropTop);
const safeWidth = Math.min(cropWidth, width - safeLeft);
const safeHeight = Math.min(cropHeight, height - safeTop);
// 3. 执行裁剪（你原来的逻辑不变）
await sharp(inputPath)
.extract({
left: safeLeft,
top: safeTop,
width: safeWidth,
height: safeHeight,
})
.toFile(outputPath);
// 4. 返回你要的结构（完全不变）
const results = [
{
file: path.basename(inputPath),
status: "cropped",
outputPath: outputPath,
originalSize: { width, height },
newSize: { width: safeWidth, height: safeHeight },
cropArea: {
x: safeLeft,
y: safeTop,
width: safeWidth,
height: safeHeight,
},
},
];
fs.unlinkSync(inputPath);
return results;
} catch (error) {
throw new Error("图片裁剪失败: " + error.message);
}
}
// 分区边界检测实现
module.exports = { module.exports = {
cropTransparentEdges, cropTransparentEdges,
cropImageTransparentEdges, cropImageTransparentEdges,
processImages, processImages,
cropImage, cropImage,
checkImageOutsideGrid, checkImageOutsideGrid,
cropToPrintArea,
}; };
src/server/utils/store.js
...@@ -197,6 +197,10 @@ module.exports = { ...@@ -197,6 +197,10 @@ module.exports = {
store.set("desktoBoard", version); store.set("desktoBoard", version);
}, },
getBoard: () => store.get("desktoBoard") || 3, getBoard: () => store.get("desktoBoard") || 3,
setIsOver: (value) => {
store.set("isOver", value);
},
getIsOver: () => store.get("isOver") || false,
setLocation: (version, locationKey) => { setLocation: (version, locationKey) => {
if (!locationKey) return; if (!locationKey) return;
......
src/utils/index.js
...@@ -244,6 +244,37 @@ export function extractValue(str) { ...@@ -244,6 +244,37 @@ export function extractValue(str) {
if (str.includes("_B_")) return "B"; if (str.includes("_B_")) return "B";
} }
export function getImgTitle(imageResList) {
return imageResList
.map((el, index) => {
el.designId = el.designId || index;
el.title = extractValue(el.designId);
return el;
})
.sort((a, b) => {
const titleA = a.title;
const titleB = b.title;
// 检查是否为空值（null、undefined、空字符串）
const isEmptyA = titleA === null || titleA === undefined || titleA === "";
const isEmptyB = titleB === null || titleB === undefined || titleB === "";
// 处理空值情况（空值排在最后）
if (isEmptyA && isEmptyB) return 0; // 两个都为空，保持原顺序
if (isEmptyA) return 1; // A为空，B不为空，A排在后面
if (isEmptyB) return -1; // B为空，A不为空，B排在后面
// 处理非空值比较（不区分大小写）
const valueA = typeof titleA === "string" ? titleA.toUpperCase() : titleA;
const valueB = typeof titleB === "string" ? titleB.toUpperCase() : titleB;
// 升序比较（A-Z）
if (valueA < valueB) return -1;
if (valueA > valueB) return 1;
return 0;
});
}
export function newMmToPxFn(mm) { export function newMmToPxFn(mm) {
const px = (Number(mm) / 25.4) * 42; const px = (Number(mm) / 25.4) * 42;
return Number(px.toFixed(1)); return Number(px.toFixed(1));
......
src/views/design/main/index.vue
...@@ -229,13 +229,12 @@ export default { ...@@ -229,13 +229,12 @@ export default {
isMove: false, isMove: false,
isOver: false, isOver: false,
dialogVisible: false, dialogVisible: false,
isForcedProduction: false,
}; };
}, },
watch: { watch: {
imgList: { imgList: {
async handler() { async handler() {
this.isMove = false;
this.$store.commit("changeImgList", this.imgList); this.$store.commit("changeImgList", this.imgList);
}, },
deep: true, deep: true,
...@@ -375,14 +374,6 @@ export default { ...@@ -375,14 +374,6 @@ export default {
}, },
immediate: true, immediate: true,
}, },
// isOver: {
// handler(newValue) {
// this.dialogVisible = true;
// // if (newValue && this.newDesktopDevice == 3) {
// // this.dialogVisible = true;
// // }
// },
// },
}, },
methods: { methods: {
// 重构为可手动触发的方法 // 重构为可手动触发的方法
...@@ -655,17 +646,12 @@ export default { ...@@ -655,17 +646,12 @@ export default {
this.showImgSetting = false; this.showImgSetting = false;
}, },
dragStop(data, item) { dragStop(data, item) {
this.isMove = true;
console.log("dragStop");
this.$set(item, "y", data.y); this.$set(item, "y", data.y);
this.$set(item, "x", data.x); this.$set(item, "x", data.x);
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList))); this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
this.getCutArea(); this.getCutArea();
}, },
resizeStop(data, item) { resizeStop(data, item) {
this.isMove = true;
console.log("resizeStop");
if (this.selectIndex < 0 && this.imgList.length) this.selectIndex = 0; if (this.selectIndex < 0 && this.imgList.length) this.selectIndex = 0;
this.$set(item, "y", data.y); this.$set(item, "y", data.y);
this.$set(item, "w", data.w); this.$set(item, "w", data.w);
...@@ -680,13 +666,10 @@ export default { ...@@ -680,13 +666,10 @@ export default {
}, },
resizing() {}, resizing() {},
rotating(data, item) { rotating(data, item) {
this.isMove = true;
this.$set(item, "r", data.angle); this.$set(item, "r", data.angle);
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList))); this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
}, },
outsideClick(e) { outsideClick(e) {
console.log(e);
if ( if (
!( !(
e.target.className.includes("drr") || e.target.className.includes("drr") ||
...@@ -758,34 +741,24 @@ export default { ...@@ -758,34 +741,24 @@ export default {
); );
return img?.productionFile; return img?.productionFile;
}, },
getBackFile({ files, size }, callback, urlList) { getBackFile({ files, size }, callback, imgType) {
console.log("productMark", this.detail);
const isCp = this.productMark == "custom_part" ? true : false; const isCp = this.productMark == "custom_part" ? true : false;
let that = this; let that = this;
let bw = document.getElementById("line"); let bw = document.getElementById("line");
let bh = bw.clientHeight; let bh = bw.clientHeight;
bw = bw.clientWidth; bw = bw.clientWidth;
this.isView = false; this.isView = false;
// bw = Number(bw.replsace("px", "")); this.isMove = false;
for (let i = 0; i < files.length; i++) { for (let i = 0; i < files.length; i++) {
files[i].url = files[i]?.productionFile || files[i].url; files[i].url = files[i]?.productionFile || files[i].url;
that.$nextTick(async () => { that.$nextTick(async () => {
let w = bw / 2; let w = bw / 2;
// let h = bh / 2; let h = bh / 2;
let width_px, height_px, rate, x, y; let width_px, height_px, rate, x, y;
let data = await that.getImageSize(files[i].url); let data = await that.getImageSize(files[i].url);
const isCut = files[i].isCut;
if (size && !files[i].isCut) { if (size && !isCut) {
console.log("size", size);
console.log("data", data);
// if (this.newDesktopDevice == 3) {
// const scale = bh / data.height;
// width_px = data.width * scale;
// height_px = data.height * scale;
// x = (bw - data.w) / 2;
// y = h;
// rate = height_px / width_px;
// } else {
if (isCp) { if (isCp) {
width_px = width_px =
this.newDesktopDevice == 3 this.newDesktopDevice == 3
...@@ -804,10 +777,17 @@ export default { ...@@ -804,10 +777,17 @@ export default {
y = height_px / 2; y = height_px / 2;
rate = height_px / width_px; rate = height_px / width_px;
// } // }
if (this.newDesktopDevice == 3 && imgType) {
const scale = bh / data.height;
width_px = data.width * scale;
height_px = data.height * scale;
x = (bw - data.w) / 2;
y = h;
rate = height_px / width_px;
}
} else { } else {
rate = data.height / data.width; rate = data.height / data.width;
console.log("data", data);
console.log("rate", rate);
if (rate > 1) { if (rate > 1) {
height_px = bh * (7.5 / 10); height_px = bh * (7.5 / 10);
...@@ -834,40 +814,28 @@ export default { ...@@ -834,40 +814,28 @@ export default {
h: height_px, h: height_px,
r: 0, r: 0,
}); });
console.log(that.imgList);
that.selectIndex = that.imgList.length - 1; that.selectIndex = that.imgList.length - 1;
that.showImgSetting = true; that.showImgSetting = true;
// if (this.newDesktopDevice != 3) {
// that.ev("cover"); isCp
isCp ? that.ev("x_center") : that.ev("cover"); ? imgType == true
// } ? that.ev("cover")
: that.ev("x_center")
: that.ev("cover");
if (isCut) that.ev("cover");
this.$nextTick(async () => { this.$nextTick(async () => {
const { const {
isImageBiggerThanGrid, isImageBiggerThanGrid,
hasOutsideValidPixel, hasOutsideValidPixel,
} = await checkImageOutsideGrid(); } = await checkImageOutsideGrid();
this.isOver = hasOutsideValidPixel;
console.log("urlList", urlList);
console.log("orderType", this.orderType);
if (urlList.length == 1) {
if (isImageBiggerThanGrid && !hasOutsideValidPixel) {
let res = await this.$api.post(
pathMap["processTransparentBackground"][this.orderType],
{
url: urlList[0],
subOrderNumber: this.detail.factorySubOrderNumber,
orderType: this.orderType,
},
);
console.log("processTransparentBackground", res);
}
}
// if (this.isOver) this.$dataStore.set("isOver", this.isOver); if (isImageBiggerThanGrid && hasOutsideValidPixel) {
this.isOver = hasOutsideValidPixel;
} else if (!isImageBiggerThanGrid) {
this.isOver = isImageBiggerThanGrid;
}
}); });
if (i === files.length - 1) { if (i === files.length - 1) {
callback && callback(); callback && callback();
} }
...@@ -993,13 +961,10 @@ export default { ...@@ -993,13 +961,10 @@ export default {
} }
this.checkList = JSON.parse(JSON.stringify(this.selectImgList)); this.checkList = JSON.parse(JSON.stringify(this.selectImgList));
try { try {
// console.log("checkList", this.checkList);
const processQueue = await Promise.all( const processQueue = await Promise.all(
this.checkList.map(async (el) => { this.checkList.map(async (el) => {
try { try {
const outputDir = path.dirname(el.productionFile); const outputDir = path.dirname(el.productionFile);
// console.log(outputDir);
const outputFileName = `${uuid.v4()}.png`; const outputFileName = `${uuid.v4()}.png`;
const outputPath = path.join(outputDir, outputFileName); const outputPath = path.join(outputDir, outputFileName);
...@@ -1123,7 +1088,7 @@ export default { ...@@ -1123,7 +1088,7 @@ export default {
this.getCutArea(); this.getCutArea();
}, },
getCutArea() { getCutArea() {
// 语法：inset(<top> <right> <bottom> <left>) this.isMove = true;
if (!this.drrDom) return; if (!this.drrDom) return;
let gradient = "none"; let gradient = "none";
...@@ -1312,7 +1277,7 @@ export default { ...@@ -1312,7 +1277,7 @@ export default {
this.systemSetting = this.$dataStore.get("setting"); this.systemSetting = this.$dataStore.get("setting");
bus.$on("busEmit", (v) => { bus.$on("busEmit", (v) => {
let { type, value, size, productMark, urls } = v; let { type, value, size, productMark, urls, imgeType } = v;
switch (type) { switch (type) {
case "completeMessage": case "completeMessage":
...@@ -1363,7 +1328,7 @@ export default { ...@@ -1363,7 +1328,7 @@ export default {
this.imgList = []; this.imgList = [];
this.selectImgList = []; this.selectImgList = [];
this.selectIndex = -1; this.selectIndex = -1;
this.productMark = productMark; this.productMark = productMark || this.productMark;
if (value.length > 0) { if (value.length > 0) {
this.selectImgList = value; this.selectImgList = value;
...@@ -1379,9 +1344,9 @@ export default { ...@@ -1379,9 +1344,9 @@ export default {
this.selectImgIndex = 0; this.selectImgIndex = 0;
} }
console.log("designImageSize", this.detail.designImageSize);
if (this.selectImgIndex != -1) { if (this.selectImgIndex != -1) {
console.log("urls", urls);
this.getBackFile( this.getBackFile(
{ {
files: [value[this.selectImgIndex]], files: [value[this.selectImgIndex]],
...@@ -1393,6 +1358,7 @@ export default { ...@@ -1393,6 +1358,7 @@ export default {
); );
}, },
urls, urls,
imgeType,
); );
} }
} }
...@@ -1801,16 +1767,7 @@ export default { ...@@ -1801,16 +1767,7 @@ export default {
></div> ></div>
</div> </div>
</vue-drag-resize-rotate> </vue-drag-resize-rotate>
<!-- <div style="position: relative;">
<button @click="checkOutsidePixel" class="detect-btn">
检测超出区域是否有像素
</button>
<div class="result" v-if="detectResult !== null">
检测结果：{{ detectResult ? "有" : "无" }}
</div>
</div> -->
<!-- 隐藏的Canvas（用于像素检测） -->
<canvas ref="pixelCanvas" style="display: none"></canvas> <canvas ref="pixelCanvas" style="display: none"></canvas>
</div> </div>
...@@ -1846,7 +1803,7 @@ export default { ...@@ -1846,7 +1803,7 @@ export default {
class="print-tip" class="print-tip"
:style="{ left: isView ? '' : '22%' }" :style="{ left: isView ? '' : '22%' }"
v-if=" v-if="
detail?.custom_part == 'custom_part' && productMark == 'custom_part' &&
selectImgList.length && selectImgList.length &&
!isOver && !isOver &&
!isMove && !isMove &&
...@@ -1857,11 +1814,9 @@ export default { ...@@ -1857,11 +1814,9 @@ export default {
</div> </div>
<div <div
class="print-tip" class="print-tip"
:style="{ left: isView ? '' : '22%' }" :style="{ left: isView ? '' : '6%' }"
v-if=" v-if="
detail?.custom_part == 'custom_part' && productMark == 'custom_part' && selectImgList.length && isOver
selectImgList.length &&
isOver
" "
> >
<b style="color:red" <b style="color:red"
...@@ -1996,7 +1951,7 @@ export default { ...@@ -1996,7 +1951,7 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.print-tip { .print-tip {
position: absolute; position: absolute;
bottom: 16px; bottom: 60px;
font-size: 24px; font-size: 24px;
left: 25%; left: 25%;
} }
......
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