Skip to content

E
electron-printer
Commit 34c277f4 by zhuzhequan
Options

添加铺满功能

parent 5cfdd1a6
Showing with 98 additions and 31 deletions
src/views/design/head/index.vue
......@@ -323,7 +323,10 @@ export default {
this.detail = findByPodProductionNo.data;
// console.log("detail111111", findByPodProductionNo);
let imageResList = [];
let designImagesCanvasJsonList = this.detail.drParam;
let designImagesCanvasJsonList = this.detail.drParam
this.detail.adjustable = true
this.detail.mssWidth = 400
this.detail.mssHeight = 450
if (designImagesCanvasJsonList) {
designImagesCanvasJsonList = JSON.parse(designImagesCanvasJsonList);
let imageList = await this.canvasToImage(designImagesCanvasJsonList);
......
src/views/design/main/imgSetting.vue
......@@ -240,6 +240,15 @@ export default {
:span="24"
style="display: flex;justify-content: space-between;padding:0 30px;"
>
<el-tooltip content="铺满">
<el-button @click="$emit('ev', 'cover')" class="btn">
<img
style="width: 13px;height: 13px"
src="@/static/icon/pm.png"
alt=""
/>
</el-button>
</el-tooltip>
<el-tooltip content="居中">
<el-button @click="$emit('ev', 'center')" class="btn">
<img
......
src/views/design/main/index.vue
<script>
import VueDragResizeRotate from "@minogin/vue-drag-resize-rotate";
import PicScrollbarBox from "../../../components/PicScrollbarBox.vue";
const { ipcRenderer } = require("electron");
// import { fabric } from "fabric";
......@@ -15,6 +16,7 @@ const uuid = require("uuid");
import { startLoading, endLoading } from "@/utils/axios.js";
import { mapState } from "vuex";
const img = require("../../../assets/bg_tshirt_shadow.png");
export default {
......@@ -22,7 +24,7 @@ export default {
PrintDialog,
VueDragResizeRotate,
ImgSetting,
PicScrollbarBox,
PicScrollbarBox
},
props: { factoryType: { type: String, default: "CN" } },
destroyed() {
......@@ -64,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() {
......@@ -74,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;
......@@ -84,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" };
......@@ -96,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;
......@@ -105,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" };
......@@ -138,8 +140,8 @@ export default {
"WHproportion",
"grid",
"windowWH",
"countryList",
]),
"countryList"
])
},
data() {
return {
......@@ -157,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: [],
......@@ -192,7 +194,7 @@ export default {
col: 7,
oldImgStyle: "",
drrDom: null,
imgDom: null,
imgDom: null
};
},
watch: {
......@@ -220,7 +222,7 @@ export default {
this.$store.commit("changeImgList", this.imgList);
},
deep: true,
immediate: true,
immediate: true
},
selectIndex() {
if (this.selectIndex >= 0) {
......@@ -264,7 +266,7 @@ export default {
this.imgDom = "";
}
},
immediate: true,
immediate: true
},
systemSetting: {
handler() {
......@@ -272,8 +274,8 @@ export default {
this.$refs.imgSetting?.getCurrentItem(this.imgList[this.selectIndex]);
}
},
deep: true,
},
deep: true
}
},
methods: {
// 重构为可手动触发的方法
......@@ -297,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, () => {
......@@ -430,7 +432,7 @@ export default {
) {
size = {
width: this.detail.mssWidth,
height: this.detail.mssHeight,
height: this.detail.mssHeight
};
}
this.getBackFile({ files: [it], size }, () => {
......@@ -460,6 +462,26 @@ export default {
}
switch (type) {
case "cover":
if (this.imgList[this.selectIndex].w > this.imgList[this.selectIndex].h) {
// 宽度铺满，高度自适应
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 = 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);
}
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":
this.$set(this.imgList[this.selectIndex], "x", Number(w));
this.$set(this.imgList[this.selectIndex], "y", Number(h));
......@@ -535,7 +557,8 @@ export default {
}
this.getCutArea();
},
resizing() {},
resizing() {
},
rotating(data, item) {
this.$set(item, "r", data.angle);
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
......@@ -657,7 +680,7 @@ export default {
x,
y,
h: height_px,
r: 0,
r: 0
});
that.selectIndex = that.imgList.length - 1;
that.showImgSetting = true;
......@@ -691,7 +714,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;
......@@ -717,7 +740,7 @@ export default {
image.onload = function() {
resolve({
width: image.width,
height: image.height,
height: image.height
});
};
image.onerror = function() {
......@@ -796,14 +819,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);
......@@ -865,7 +888,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 = [];
......@@ -992,7 +1015,7 @@ export default {
} catch (error) {
console.log(error);
}
},
}
},
mounted() {
this.imgHeight = window.screen.height + "px";
......@@ -1068,7 +1091,7 @@ export default {
beforeDestroy() {
// 销毁组件时移除事件监听器
document.removeEventListener("click", this.handleClick);
},
}
};
</script>
......@@ -1110,7 +1133,8 @@ export default {
v-if="selectImgList.length"
style="margin: 5px;"
@click="downloadImg"
>下载原素材</el-button
>下载原素材
</el-button
>
<el-button
type="primary"
......@@ -1118,7 +1142,8 @@ export default {
v-if="selectImgList.length"
style="margin: 5px;"
@click="cutImgFn"
>裁切</el-button
>裁切
</el-button
>
</div>
</template>
......@@ -1453,7 +1478,7 @@ export default {
"
>
<b style="color: green" v-if="hasSize"
>该生产单无需拖动设计，直接打印</b
>该生产单无需拖动设计，直接打印</b
>
<b style="color: red" v-else>该生产单需要拖动设计打印</b>
</div>
......@@ -1490,6 +1515,7 @@ export default {
font-size: 24px;
left: 25%;
}
.page-main {
display: flex;
flex: 1;
......@@ -1571,6 +1597,7 @@ export default {
position: absolute;
z-index: 2;
left: 5%;
img {
pointer-events: none;
width: auto;
......@@ -1600,9 +1627,11 @@ export default {
width: 100%;
height: 100%;
}
.element {
// position: relative;
}
// #imgBox {
// img {
// transition: clip-path 0.1s ease-in;
......@@ -1656,11 +1685,13 @@ img {
box-sizing: border-box;
border-color: #409eff !important;
}
.showImg {
max-height: 194px !important;
text-align: center;
width: auto !important;
}
.img-item {
// height: 150px;
width: 180px;
......@@ -1675,10 +1706,12 @@ img {
margin-right: 5px;
box-sizing: border-box;
img {
width: 100%;
height: auto;
}
span {
font-size: 14px;
// margin: 5px 0;
......@@ -1708,6 +1741,7 @@ img {
height: 100%;
// border-top: 1px solid #ececec;
margin-bottom: 25px;
::v-deep .el-checkbox {
height: 100%;
width: 100%;
......@@ -1721,6 +1755,7 @@ img {
top: 5px;
left: 5px;
}
.el-checkbox__label {
width: 100%;
padding: 0;
......@@ -1755,54 +1790,66 @@ img {
.handle-rot::after {
display: none;
}
.information-content {
border: 1px solid #ececec;
border-top: none;
width: 100%;
.main {
margin: 5px;
border: 1px solid #ececec;
height: 100%;
.effectPic {
.img {
width: 100%;
}
}
}
.pic-title {
text-align: center;
}
}
.product-information {
border: 1px solid #ececec;
border-top: none;
.title {
padding: 5px 10px;
}
.div-content {
padding: 0 10px;
display: flex;
flex-wrap: wrap;
.div-item {
display: flex;
flex: 50%;
font-size: 12px;
margin-bottom: 5px;
.item-label {
flex: 1;
text-align: right;
}
.item-value {
flex: 36%;
}
}
}
}
.title {
padding: 5px 10px;
font-size: 20px;
font-weight: 700;
}
.border-row {
border-top: 1px solid #ececec;
// border-bottom: 1px solid #ececec;
......@@ -1811,36 +1858,44 @@ img {
height: 100%;
// align-items: center;
}
.full-width {
width: 100%;
}
.text-center {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.border-col {
border-left: 1px solid #ececec;
border-right: 1px solid #ececec;
}
.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 {
position: absolute;
left: -57px;
}
}
.vieWsucaitu {
.active::before {
display: none;
}
//::v-deep .drr:hover:before {
// outline: none;
//}
}
// ::v-deep.el-table thead {
// color: black;
// }
......
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