Commit fe4127ef by linjinhong

修改铺满问题

parent 34c277f4
......@@ -2,7 +2,7 @@
"name": "JomallProductionAssistant",
"productName": "JomallProductionAssistant",
"description": "",
"version": "1.0.12",
"version": "1.0.13",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
......
......@@ -24,7 +24,7 @@ export default {
PrintDialog,
VueDragResizeRotate,
ImgSetting,
PicScrollbarBox
PicScrollbarBox,
},
props: { factoryType: { type: String, default: "CN" } },
destroyed() {
......@@ -66,7 +66,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() {
......@@ -76,7 +76,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;
......@@ -86,7 +86,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" };
......@@ -98,7 +98,7 @@ export default {
if (unit === "mm") {
return {
w: gridSpacing + "px",
h: gridSpacing + "px"
h: gridSpacing + "px",
};
} else if (unit === "inch") {
let w = 480;
......@@ -107,7 +107,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" };
......@@ -140,8 +140,8 @@ export default {
"WHproportion",
"grid",
"windowWH",
"countryList"
])
"countryList",
]),
},
data() {
return {
......@@ -159,7 +159,7 @@ export default {
"hsva(120, 40, 94, 0.5)",
"hsl(181, 100%, 37%)",
"hsla(209, 100%, 56%, 0.73)",
"#c7158577"
"#c7158577",
],
actionList: [],
checkList: [],
......@@ -194,7 +194,7 @@ export default {
col: 7,
oldImgStyle: "",
drrDom: null,
imgDom: null
imgDom: null,
};
},
watch: {
......@@ -222,7 +222,7 @@ export default {
this.$store.commit("changeImgList", this.imgList);
},
deep: true,
immediate: true
immediate: true,
},
selectIndex() {
if (this.selectIndex >= 0) {
......@@ -266,7 +266,7 @@ export default {
this.imgDom = "";
}
},
immediate: true
immediate: true,
},
systemSetting: {
handler() {
......@@ -274,8 +274,8 @@ export default {
this.$refs.imgSetting?.getCurrentItem(this.imgList[this.selectIndex]);
}
},
deep: true
}
deep: true,
},
},
methods: {
// 重构为可手动触发的方法
......@@ -299,8 +299,8 @@ 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, () => {
......@@ -432,7 +432,7 @@ export default {
) {
size = {
width: this.detail.mssWidth,
height: this.detail.mssHeight
height: this.detail.mssHeight,
};
}
this.getBackFile({ files: [it], size }, () => {
......@@ -460,26 +460,33 @@ export default {
z_index =
dom.style.zIndex === "" || !dom.style.zIndex ? 0 : dom.style.zIndex;
}
let gw = Number(this.gridWH.w);
let gh = Number(this.gridWH.h);
let imgW = this.imgList[this.selectIndex].w;
let imgH = this.imgList[this.selectIndex].h;
// 计算容器和图片的宽高比
const containerRatio = gw / gh;
const imageRatio = imgW / imgH;
switch (type) {
case "cover":
if (this.imgList[this.selectIndex].w > this.imgList[this.selectIndex].h) {
if (imageRatio >= containerRatio) {
// 宽度铺满,高度自适应
let r = Number(this.gridWH.w) / this.imgList[this.selectIndex].w
this.$set(this.imgList[this.selectIndex], "w", Number(this.gridWH.w));
this.$set(this.imgList[this.selectIndex], "h", this.imgList[this.selectIndex].h * r);
}else if(this.imgList[this.selectIndex].w < this.imgList[this.selectIndex].h) {
let r = gw / imgW;
this.$set(this.imgList[this.selectIndex], "w", gw);
this.$set(this.imgList[this.selectIndex], "h", imgH * r);
} else {
// // 高度铺满,宽度自适应
let r = Number(this.gridWH.h) / this.imgList[this.selectIndex].h
this.$set(this.imgList[this.selectIndex], "h", Number(this.gridWH.h));
this.$set(this.imgList[this.selectIndex], "w", this.imgList[this.selectIndex].w * r);
}else{
let r = Number(this.gridWH.w) / this.imgList[this.selectIndex].w
this.$set(this.imgList[this.selectIndex], "w", Number(this.gridWH.w));
this.$set(this.imgList[this.selectIndex], "h", this.imgList[this.selectIndex].h * r);
let r = gh / imgH;
console.log("比例", r);
this.$set(this.imgList[this.selectIndex], "h", gh);
this.$set(this.imgList[this.selectIndex], "w", imgW * r);
}
this.$set(this.imgList[this.selectIndex], "x", Number(w));
this.$set(this.imgList[this.selectIndex], "y", Number(h));
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
break;
case "center":
......@@ -557,8 +564,7 @@ export default {
}
this.getCutArea();
},
resizing() {
},
resizing() {},
rotating(data, item) {
this.$set(item, "r", data.angle);
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
......@@ -680,7 +686,7 @@ export default {
x,
y,
h: height_px,
r: 0
r: 0,
});
that.selectIndex = that.imgList.length - 1;
that.showImgSetting = true;
......@@ -714,7 +720,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;
......@@ -740,7 +746,7 @@ export default {
image.onload = function() {
resolve({
width: image.width,
height: image.height
height: image.height,
});
};
image.onerror = function() {
......@@ -819,14 +825,14 @@ export default {
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);
......@@ -888,7 +894,7 @@ export default {
let res = await this.$api.post("/downloadBySubOrderNumber", {
ids: [this.detail.id],
device: this.$store.state.desktopDevice,
type: this.factoryType
type: this.factoryType,
});
if (res.data.length === 0) return this.$message.warning("未找到素材图!");
let imgList = [];
......@@ -1015,7 +1021,7 @@ export default {
} catch (error) {
console.log(error);
}
}
},
},
mounted() {
this.imgHeight = window.screen.height + "px";
......@@ -1091,7 +1097,7 @@ export default {
beforeDestroy() {
// 销毁组件时移除事件监听器
document.removeEventListener("click", this.handleClick);
}
},
};
</script>
......@@ -1133,18 +1139,16 @@ export default {
v-if="selectImgList.length"
style="margin: 5px;"
@click="downloadImg"
>下载原素材
</el-button
>
>下载原素材
</el-button>
<el-button
type="primary"
size="small"
v-if="selectImgList.length"
style="margin: 5px;"
@click="cutImgFn"
>裁切
</el-button
>
>裁切
</el-button>
</div>
</template>
<template #mainContent>
......@@ -1478,7 +1482,7 @@ export default {
"
>
<b style="color: green" v-if="hasSize"
>该生产单无需拖动设计,直接打印</b
>该生产单无需拖动设计,直接打印</b
>
<b style="color: red" v-else>该生产单需要拖动设计打印</b>
</div>
......@@ -1877,7 +1881,7 @@ img {
.boxShaow {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 0, 0, 0.14),
0 0 20px rgba(0, 0, 0, 0.12);
0 0 20px rgba(0, 0, 0, 0.12);
position: relative;
.left-bg-color {
......
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