Skip to content

E
electron-printer
Commit 3409f5ee by zhuzhequan
Options

处理胡总提出的问题

parent be4f635b
Showing with 277 additions and 265 deletions
config/env.json
{ {
"apiApiHost":"https://factory.jomalls.com/api", "apiApiHost":"https://factory.jomalls.com/api",
"fileApiUrl":"https://factory.jomalls.com/upload/factory", "fileApiUrl":"https://factory.jomalls.com/upload/factory",
"visionUrl":"https://console.jomalls.com" "visionUrl":"https://console.jomalls.com"
} }
src/components/PicScrollbarBox.vue
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
>裁切</el-button >裁切</el-button
> --> > -->
</div> </div>
<el-scrollbar class="scrollbarBox"> <div class="scrollbarBox">
<slot v-if="$slots.mainContent" name="mainContent"></slot> <slot v-if="$slots.mainContent" name="mainContent"></slot>
<!-- <el-checkbox-group <!-- <el-checkbox-group
v-if="imglist.length" v-if="imglist.length"
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
</el-checkbox></el-checkbox-group </el-checkbox></el-checkbox-group
> --> > -->
<el-empty v-else :description="emptyTitle"></el-empty> <el-empty v-else :description="emptyTitle"></el-empty>
</el-scrollbar> </div>
</div> </div>
</template> </template>
<script> <script>
...@@ -63,6 +63,12 @@ export default { ...@@ -63,6 +63,12 @@ export default {
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.scrollbarBox{
overflow-x: auto;
overflow-y: hidden;
width: 100%;
white-space: nowrap;
}
.title { .title {
padding: 10px; padding: 10px;
font-size: 20px; font-size: 20px;
...@@ -70,9 +76,13 @@ export default { ...@@ -70,9 +76,13 @@ export default {
} }
.el-scrollbar { .el-scrollbar {
overflow-y: hidden; overflow-y: hidden;
:v-deep.el-scrollbar__wrap { //::v-deep .el-scrollbar__wrap {
margin-bottom: 0 !important; // margin-bottom: 0 !important;
} //}
//::v-deep .el-scrollbar__view {
// display: flex;
// flex-wrap: nowrap;
//}
} }
::v-deep.el-empty { ::v-deep.el-empty {
padding-top: 0; padding-top: 0;
......
src/views/design/head/index.vue
...@@ -17,10 +17,10 @@ export default { ...@@ -17,10 +17,10 @@ export default {
user: { user: {
default: { default: {
avatar: "", avatar: "",
factory: {}, factory: {}
}, },
type: Object, type: Object
}, }
}, },
data() { data() {
return { return {
...@@ -30,20 +30,20 @@ export default { ...@@ -30,20 +30,20 @@ export default {
cacheList: [ cacheList: [
{ {
label: "清除当前登录信息", label: "清除当前登录信息",
value: "token", value: "token"
}, },
{ {
label: "登录记录", label: "登录记录",
value: "userList", value: "userList"
}, },
{ {
label: "打印预设", label: "打印预设",
value: "print-setting", value: "print-setting"
}, },
{ {
label: "系统设置", label: "系统设置",
value: "setting", value: "setting"
}, }
], ],
selectGridIndex: 0, selectGridIndex: 0,
pkg, pkg,
...@@ -58,7 +58,7 @@ export default { ...@@ -58,7 +58,7 @@ export default {
unit: "mm", unit: "mm",
language: "cn", language: "cn",
autoPrint: false, autoPrint: false,
gridSpacing: 10, gridSpacing: 10
}, },
imgList: [], imgList: [],
detail: null, detail: null,
...@@ -77,15 +77,15 @@ export default { ...@@ -77,15 +77,15 @@ export default {
"hsva(120, 40, 94, 0.5)", "hsva(120, 40, 94, 0.5)",
"hsl(181, 100%, 37%)", "hsl(181, 100%, 37%)",
"hsla(209, 100%, 56%, 0.73)", "hsla(209, 100%, 56%, 0.73)",
"#c7158577", "#c7158577"
], ],
grid, grid
}; };
}, },
computed: { computed: {
actionList() { actionList() {
return this.$store.getters.getActionList; return this.$store.getters.getActionList;
}, }
}, },
mounted() { mounted() {
// console.log(pkg, "pkg"); // console.log(pkg, "pkg");
...@@ -106,12 +106,12 @@ export default { ...@@ -106,12 +106,12 @@ export default {
this.$dataStore.set("setting", this.setting); this.$dataStore.set("setting", this.setting);
bus.$emit("busEmit", { type: "updateSystemSetting" }); bus.$emit("busEmit", { type: "updateSystemSetting" });
}, },
deep: true, deep: true
}, }
}, },
methods: { methods: {
checkUpdate() { checkUpdate() {
this.$refs.updateDialog.checkUpdate().then((data) => { this.$refs.updateDialog.checkUpdate().then(data => {
if (data) { if (data) {
// 有新版本更新 // 有新版本更新
this.$refs.updateDialog.open(data); this.$refs.updateDialog.open(data);
...@@ -126,7 +126,7 @@ export default { ...@@ -126,7 +126,7 @@ export default {
this.$confirm("是否退出登录?", "提示", { this.$confirm("是否退出登录?", "提示", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning", type: "warning"
}) })
.then(() => { .then(() => {
this.$dataStore.delete("user"); this.$dataStore.delete("user");
...@@ -153,7 +153,7 @@ export default { ...@@ -153,7 +153,7 @@ export default {
this.$confirm(`确定生产完成？`, "提示", { this.$confirm(`确定生产完成？`, "提示", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning", type: "warning"
}).then(async () => { }).then(async () => {
await this.setData(this.detail); await this.setData(this.detail);
}); });
...@@ -165,15 +165,15 @@ export default { ...@@ -165,15 +165,15 @@ export default {
this.$confirm("是否确定清除?", "提示", { this.$confirm("是否确定清除?", "提示", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning", type: "warning"
}) })
.then(() => { .then(() => {
for (let k of this.checkList) { for (let k of this.checkList) {
if (k === "print-setting" || k === "deviceId") { if (k === "print-setting" || k === "deviceId") {
let list = Object.keys(this.$dataStore.store).filter((el) => let list = Object.keys(this.$dataStore.store).filter(el =>
el.includes(k) el.includes(k)
); );
list.forEach((el) => { list.forEach(el => {
this.$dataStore.delete(el); this.$dataStore.delete(el);
}); });
} else if (k === "token") { } else if (k === "token") {
...@@ -194,9 +194,9 @@ export default { ...@@ -194,9 +194,9 @@ export default {
try { try {
axios axios
.get(item?.src, { .get(item?.src, {
responseType: "blob", responseType: "blob"
}) })
.then((res) => { .then(res => {
var url = URL.createObjectURL(res.data); var url = URL.createObjectURL(res.data);
let img = new Image(); let img = new Image();
img.crossorigin = ""; img.crossorigin = "";
...@@ -215,7 +215,7 @@ export default { ...@@ -215,7 +215,7 @@ export default {
resolve(); resolve();
}; };
}) })
.catch((e) => { .catch(e => {
console.log(e); console.log(e);
reject(e); reject(e);
}); });
...@@ -235,7 +235,7 @@ export default { ...@@ -235,7 +235,7 @@ export default {
canvas.width = canvasItem.canvasWidth; canvas.width = canvasItem.canvasWidth;
canvas.height = canvasItem.canvasHeight; canvas.height = canvasItem.canvasHeight;
let objects = canvasItem.options.objects.filter( let objects = canvasItem.options.objects.filter(
(el) => el.type === "image" el => el.type === "image"
); );
let list = []; let list = [];
for (let i in objects) { for (let i in objects) {
...@@ -269,7 +269,7 @@ export default { ...@@ -269,7 +269,7 @@ export default {
return this.$message.warning("请扫描生产单号"); return this.$message.warning("请扫描生产单号");
let params = { let params = {
productionNo: this.detail.factorySubOrderNumber, productionNo: this.detail.factorySubOrderNumber,
imgList: this.imgList, imgList: this.imgList
}; };
let res = await this.$api.post("/downloadByDesignId", params); let res = await this.$api.post("/downloadByDesignId", params);
...@@ -291,12 +291,12 @@ export default { ...@@ -291,12 +291,12 @@ export default {
const findByPodProductionNo = await this.$api.post( const findByPodProductionNo = await this.$api.post(
"/findByPodProductionNo", "/findByPodProductionNo",
{ {
thirdSubOrderNumber: this.productionNo, thirdSubOrderNumber: this.productionNo
} }
); );
this.detail = findByPodProductionNo.data; this.detail = findByPodProductionNo.data;
let imageResList = []; let imageResList = [];
let designImagesCanvasJsonList = this.detail.drParam; let designImagesCanvasJsonList = this.detail.drParam;
if (designImagesCanvasJsonList) { if (designImagesCanvasJsonList) {
designImagesCanvasJsonList = JSON.parse(designImagesCanvasJsonList); designImagesCanvasJsonList = JSON.parse(designImagesCanvasJsonList);
let imageList = await this.canvasToImage(designImagesCanvasJsonList); let imageList = await this.canvasToImage(designImagesCanvasJsonList);
...@@ -312,27 +312,29 @@ export default { ...@@ -312,27 +312,29 @@ export default {
}); });
imageResList = Sres.data; imageResList = Sres.data;
this.imgList = []; this.imgList = [];
if (this.checked) {
imageResList = await this.cutImgFn(imageResList);
imageResList.forEach(el=>{
el.isCut = true
})
}
} }
this.$store.commit("setProductDetail", findByPodProductionNo.data); this.$store.commit("setProductDetail", findByPodProductionNo.data);
ipcRenderer.send("win-subScreen", findByPodProductionNo.data); ipcRenderer.send("win-subScreen", findByPodProductionNo.data);
if (imageResList && imageResList.length) { if (imageResList && imageResList.length) {
if (this.checked) {
this.$message.warning({
message: "该生产单为直接打印单不可裁切，已取消自动裁切选项",
duration: 3000, // 设置显示时间为 5000 毫秒（5 秒）
});
this.checked = false;
}
let obj = { let obj = {
type: "sendFile", type: "sendFile",
value: imageResList, value: imageResList
}; };
if (this.detail.mssWidth && this.detail.mssHeight) { if (
this.detail.mssWidth &&
this.detail.adjustable &&
this.detail.mssHeight
) {
obj.size = { obj.size = {
width: this.detail.mssWidth, width: this.detail.mssWidth,
height: this.detail.mssHeight, height: this.detail.mssHeight
}; };
} }
bus.$emit("busEmit", obj); bus.$emit("busEmit", obj);
...@@ -340,26 +342,29 @@ export default { ...@@ -340,26 +342,29 @@ export default {
// 根据生产单号查找 素材图片 下载到本地 然后返回本地地址去显示 // 根据生产单号查找 素材图片 下载到本地 然后返回本地地址去显示
let res = await this.$api.post("/downloadBySubOrderNumber", [ let res = await this.$api.post("/downloadBySubOrderNumber", [
this.detail.id, this.detail.id,
this.$store.state.desktopDevice, this.$store.state.desktopDevice
]); ]);
if (res.data.length === 0) if (res.data.length === 0)
return this.$message.warning("未找到素材图！"); return this.$message.warning("未找到素材图！");
this.imgList = []; this.imgList = [];
res.data.forEach((el) => { res.data.forEach(el => {
this.imgList = this.imgList.concat(el.list || []); this.imgList = this.imgList.concat(el.list || []);
}); });
let arr = []; let arr = [];
res.data.forEach((el) => { res.data.forEach(el => {
if (el.list) { if (el.list) {
el.list.forEach((it) => { el.list.forEach(it => {
arr.push(it); arr.push(it);
}); });
} }
}); });
res.data = arr.filter((el) => el.type !== 1); res.data = arr.filter(el => el.type !== 1);
let newImgList; let newImgList;
if (this.checked) { if (this.checked) {
newImgList = await this.cutImgFn(res.data); newImgList = await this.cutImgFn(res.data);
newImgList.forEach(el=>{
el.isCut = true
})
} else { } else {
newImgList = res.data; newImgList = res.data;
} }
...@@ -381,12 +386,16 @@ export default { ...@@ -381,12 +386,16 @@ export default {
console.log(260, res.data); console.log(260, res.data);
let obj = { let obj = {
type: "sendFile", type: "sendFile",
value: newImgList, value: newImgList
}; };
if (this.detail.mssWidth && this.detail.mssHeight) { if (
this.detail.mssWidth &&
this.detail.adjustable &&
this.detail.mssHeight
) {
obj.size = { obj.size = {
width: this.detail.mssWidth, width: this.detail.mssWidth,
height: this.detail.mssHeight, height: this.detail.mssHeight
}; };
} }
bus.$emit("busEmit", obj); bus.$emit("busEmit", obj);
...@@ -408,7 +417,7 @@ export default { ...@@ -408,7 +417,7 @@ export default {
const command = `start explorer /select, "${path}"`; const command = `start explorer /select, "${path}"`;
// 检查路径是否存在 // 检查路径是否存在
if (fs.existsSync(path)) { if (fs.existsSync(path)) {
exec(`cmd /c "${command}"`, (err) => { exec(`cmd /c "${command}"`, err => {
if (err) console.error("激活窗口失败:", err); if (err) console.error("激活窗口失败:", err);
}); });
} else { } else {
...@@ -436,7 +445,7 @@ export default { ...@@ -436,7 +445,7 @@ export default {
unit: "mm", unit: "mm",
language: "cn", language: "cn",
autoPrint: false, autoPrint: false,
gridSpacing: 10, gridSpacing: 10
}; };
this.$message.success("重置应用程序设置成功"); this.$message.success("重置应用程序设置成功");
}, },
...@@ -457,8 +466,8 @@ export default { ...@@ -457,8 +466,8 @@ export default {
formData.append("file", f); formData.append("file", f);
let { data } = await this.$api.post("/uploadImage", formData, { let { data } = await this.$api.post("/uploadImage", formData, {
headers: { headers: {
"Content-Type": "application/x-www-form-urlencoded", "Content-Type": "application/x-www-form-urlencoded"
}, }
}); });
bus.$emit("busEmit", { type: "uploadImage", value: data }); bus.$emit("busEmit", { type: "uploadImage", value: data });
return false; return false;
...@@ -468,7 +477,7 @@ export default { ...@@ -468,7 +477,7 @@ export default {
this.setting.gridValue = i; this.setting.gridValue = i;
this.$store.commit("updateSystemSetting", { this.$store.commit("updateSystemSetting", {
field: "gridValue", field: "gridValue",
value: this.grid[i], value: this.grid[i]
}); });
bus.$emit("busEmit", { type: "grid", value: this.grid[i] }); bus.$emit("busEmit", { type: "grid", value: this.grid[i] });
}, },
...@@ -484,21 +493,21 @@ export default { ...@@ -484,21 +493,21 @@ export default {
if (!arr.length) return; if (!arr.length) return;
try { try {
const processQueue = await Promise.all( const processQueue = await Promise.all(
arr.map(async (el) => { arr.map(async el => {
try { try {
const outputDir = path.dirname(el.productionFile); const outputDir = path.dirname(el.productionFile);
const outputFileName = `${uuid.v4()}.png`; const outputFileName = `${uuid.v4()}.png`;
const outputPath = path.join(outputDir, outputFileName); const outputPath = path.join(outputDir, outputFileName);
const params = { const params = {
inputPath: el.productionFile, inputPath: el.productionFile,
outputPath: outputPath, outputPath: outputPath
}; };
const res = await this.$api.post("/processImage", params); const res = await this.$api.post("/processImage", params);
fs.unlinkSync(el.productionFile); fs.unlinkSync(el.productionFile);
return { return {
fileName: outputFileName, fileName: outputFileName,
productionFile: res.msg[0]?.outputPath, productionFile: res.msg[0]?.outputPath,
designId: el.designId, designId: el.designId
}; };
} catch (error) { } catch (error) {
console.error(`处理失败: ${el.productionFile}`, error); console.error(`处理失败: ${el.productionFile}`, error);
...@@ -507,9 +516,9 @@ export default { ...@@ -507,9 +516,9 @@ export default {
); );
// 等待所有异步操作完成 // 等待所有异步操作完成
await new Promise((resolve) => setTimeout(resolve, 100)); await new Promise(resolve => setTimeout(resolve, 100));
const newMap = new Map(processQueue.map((el) => [el.designId, el])); const newMap = new Map(processQueue.map(el => [el.designId, el]));
processQueue.forEach((el) => { processQueue.forEach(el => {
if (newMap.has(el.designId)) { if (newMap.has(el.designId)) {
el.fileName = newMap.get(el.designId).fileName; el.fileName = newMap.get(el.designId).fileName;
el.productionFile = newMap.get(el.designId).productionFile; el.productionFile = newMap.get(el.designId).productionFile;
...@@ -521,8 +530,8 @@ export default { ...@@ -521,8 +530,8 @@ export default {
console.error("错误", error); console.error("错误", error);
return []; return [];
} }
}, }
}, }
}; };
</script> </script>
<style scoped> <style scoped>
...@@ -640,7 +649,7 @@ export default { ...@@ -640,7 +649,7 @@ export default {
> >
<el-form-item prop="setting" label="网格显示"> <el-form-item prop="setting" label="网格显示">
<el-select <el-select
@change="(e) => settingChange('gridShow', e)" @change="e => settingChange('gridShow', e)"
clearable clearable
v-model="setting.gridShow" v-model="setting.gridShow"
> >
...@@ -650,7 +659,7 @@ export default { ...@@ -650,7 +659,7 @@ export default {
</el-form-item> </el-form-item>
<el-form-item prop="gridSpacing" label="单位"> <el-form-item prop="gridSpacing" label="单位">
<el-select <el-select
@change="(e) => settingChange('unit', e)" @change="e => settingChange('unit', e)"
clearable clearable
v-model="setting.unit" v-model="setting.unit"
> >
...@@ -660,7 +669,7 @@ export default { ...@@ -660,7 +669,7 @@ export default {
</el-form-item> </el-form-item>
<el-form-item prop="gridSpacing" label="网格间隔"> <el-form-item prop="gridSpacing" label="网格间隔">
<el-select <el-select
@change="(e) => settingChange('gridSpacing', e)" @change="e => settingChange('gridSpacing', e)"
clearable clearable
v-model="setting.gridSpacing" v-model="setting.gridSpacing"
> >
...@@ -688,7 +697,7 @@ export default { ...@@ -688,7 +697,7 @@ export default {
</el-form-item> </el-form-item>
<el-form-item prop="language" label="语言设置"> <el-form-item prop="language" label="语言设置">
<el-select <el-select
@change="(e) => settingChange('language', e)" @change="e => settingChange('language', e)"
clearable clearable
v-model="setting.language" v-model="setting.language"
> >
......
src/views/design/head/printDialog.vue
...@@ -375,12 +375,12 @@ export default { ...@@ -375,12 +375,12 @@ export default {
w = this.numberToStr4(w); w = this.numberToStr4(w);
h = this.numberToStr4(h); h = this.numberToStr4(h);
console.log("print", w, h); console.log("print", w, h);
//
if (w > 4200 || h > 4700) { // if (w > 4200 || h > 4700) {
return this.$message.warning( // return this.$message.warning(
"打印图片素材宽度不能超过410mm,长度不能超过450mm" // "打印图片素材宽度不能超过410mm,长度不能超过450mm"
); // );
} // }
r = Number(r).toFixed(0); r = Number(r).toFixed(0);
const imgFileName = this.imgList[0].fileName; const imgFileName = this.imgList[0].fileName;
let position = ""; // 位置 let position = ""; // 位置
......
src/views/design/main/imgSetting.vue
...@@ -145,149 +145,147 @@ export default { ...@@ -145,149 +145,147 @@ export default {
</script> </script>
<template> <template>
<el-scrollbar class="scrollbarDrawer"> <div class="drawer">
<div class="drawer"> <div class="img-form">
<div class="img-form"> <div class="title">
<div class="title"> 图片编辑（单位：{{ $dataStore.get("setting").unit }}）
图片编辑（单位：{{ $dataStore.get("setting").unit }}） </div>
</div> <el-form
<el-form size="small"
size="small" :disabled="!(item && !isPreView)"
:disabled="!(item && !isPreView)" style=""
style="" :model="form"
:model="form" label-position="left"
label-position="left" label-width="30px"
label-width="30px" >
> <el-row :gutter="10">
<el-row :gutter="10"> <el-col :span="8">
<el-col :span="8"> <el-form-item label="x：" prop="x">
<el-form-item label="x：" prop="x"> <div class="form-content">
<div class="form-content"> <el-input @blur="formChange" v-model="form.x"></el-input>
<el-input @blur="formChange" v-model="form.x"></el-input> <div class="set-value">
<div class="set-value"> <i @click="addValue('x')" class="el-icon-arrow-up"></i>
<i @click="addValue('x')" class="el-icon-arrow-up"></i> <i @click="reduceValue('x')" class="el-icon-arrow-down"></i>
<i @click="reduceValue('x')" class="el-icon-arrow-down"></i>
</div>
</div> </div>
</el-form-item> </div>
</el-col> </el-form-item>
<el-col :span="8"> </el-col>
<el-form-item label="y："> <el-col :span="8">
<div class="form-content"> <el-form-item label="y：">
<el-input @blur="formChange" v-model="form.y"></el-input> <div class="form-content">
<div class="set-value"> <el-input @blur="formChange" v-model="form.y"></el-input>
<i @click="addValue('y')" class="el-icon-arrow-up"></i> <div class="set-value">
<i @click="reduceValue('y')" class="el-icon-arrow-down"></i> <i @click="addValue('y')" class="el-icon-arrow-up"></i>
</div> <i @click="reduceValue('y')" class="el-icon-arrow-down"></i>
</div> </div>
</el-form-item> </div>
</el-col> </el-form-item>
<el-col :span="8"> </el-col>
<el-form-item label="r："> <el-col :span="8">
<div class="form-content"> <el-form-item label="r：">
<el-input maxlength="3" @blur="formChange" v-model="form.r"> <div class="form-content">
</el-input> <el-input maxlength="3" @blur="formChange" v-model="form.r">
<div class="set-value"> </el-input>
<i @click="addValue('r')" class="el-icon-arrow-up"></i> <div class="set-value">
<i @click="reduceValue('r')" class="el-icon-arrow-down"></i> <i @click="addValue('r')" class="el-icon-arrow-up"></i>
</div> <i @click="reduceValue('r')" class="el-icon-arrow-down"></i>
</div> </div>
</el-form-item> </div>
</el-col> </el-form-item>
<el-col :span="8"> </el-col>
<el-form-item label="w："> <el-col :span="8">
<div class="form-content"> <el-form-item label="w：">
<el-input @blur="formChange('w')" v-model="form.w"></el-input> <div class="form-content">
<div class="set-value"> <el-input @blur="formChange('w')" v-model="form.w"></el-input>
<i @click="addValue('w')" class="el-icon-arrow-up"></i> <div class="set-value">
<i @click="reduceValue('w')" class="el-icon-arrow-down"></i> <i @click="addValue('w')" class="el-icon-arrow-up"></i>
</div> <i @click="reduceValue('w')" class="el-icon-arrow-down"></i>
</div> </div>
</el-form-item> </div>
</el-col> </el-form-item>
<el-col :span="8"> </el-col>
<el-form-item label="h："> <el-col :span="8">
<div class="form-content"> <el-form-item label="h：">
<el-input @blur="formChange('h')" v-model="form.h"></el-input> <div class="form-content">
<div class="set-value"> <el-input @blur="formChange('h')" v-model="form.h"></el-input>
<i @click="addValue('h')" class="el-icon-arrow-up"></i> <div class="set-value">
<i @click="reduceValue('h')" class="el-icon-arrow-down"></i> <i @click="addValue('h')" class="el-icon-arrow-up"></i>
</div> <i @click="reduceValue('h')" class="el-icon-arrow-down"></i>
</div> </div>
</el-form-item> </div>
</el-col> </el-form-item>
</el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="z："> <el-form-item label="z：">
<div class="form-content"> <div class="form-content">
<el-input @blur="formChange" v-model="form.zIndex"> <el-input @blur="formChange" v-model="form.zIndex">
</el-input> </el-input>
<div class="set-value"> <div class="set-value">
<i @click="addValue('zIndex')" class="el-icon-arrow-up"></i> <i @click="addValue('zIndex')" class="el-icon-arrow-up"></i>
<i <i
@click="reduceValue('zIndex')" @click="reduceValue('zIndex')"
class="el-icon-arrow-down" class="el-icon-arrow-down"
></i> ></i>
</div>
</div> </div>
</el-form-item> </div>
</el-col> </el-form-item>
<el-col </el-col>
:span="24" <el-col
style="display: flex;justify-content: space-between;padding:0 30px;" :span="24"
> style="display: flex;justify-content: space-between;padding:0 30px;"
<el-tooltip content="居中"> >
<el-button @click="$emit('ev', 'center')" class="btn"> <el-tooltip content="居中">
<img <el-button @click="$emit('ev', 'center')" class="btn">
style="width: 13px;height: 13px" <img
src="@/static/icon/juzhong-01.png" style="width: 13px;height: 13px"
alt="" src="@/static/icon/juzhong-01.png"
/> alt=""
</el-button> />
</el-tooltip> </el-button>
<el-tooltip content="垂直居中"> </el-tooltip>
<el-button @click="$emit('ev', 'y_center')" class="btn"> <el-tooltip content="垂直居中">
<img <el-button @click="$emit('ev', 'y_center')" class="btn">
style="width: 13px;height: 13px" <img
src="@/static/icon/vertical.png" style="width: 13px;height: 13px"
alt="" src="@/static/icon/vertical.png"
/> alt=""
</el-button> />
</el-tooltip> </el-button>
<el-tooltip content="水平居中"> </el-tooltip>
<el-button @click="$emit('ev', 'x_center')" class="btn"> <el-tooltip content="水平居中">
<img <el-button @click="$emit('ev', 'x_center')" class="btn">
style="width: 13px;height: 13px" <img
src="@/static/icon/shuipingjuzhong.png" style="width: 13px;height: 13px"
alt="" src="@/static/icon/shuipingjuzhong.png"
/> alt=""
</el-button> />
</el-tooltip> </el-button>
<el-tooltip content="上移一层"> </el-tooltip>
<el-button @click="$emit('ev', 'add_index')" class="btn"> <el-tooltip content="上移一层">
<img <el-button @click="$emit('ev', 'add_index')" class="btn">
style="width: 13px;height: 13px" <img
src="@/static/icon/shangyi.png" style="width: 13px;height: 13px"
alt="" src="@/static/icon/shangyi.png"
/> alt=""
</el-button> />
</el-tooltip> </el-button>
<el-tooltip content="下移一层"> </el-tooltip>
<el-button @click="$emit('ev', 'reduce_index')" class="btn"> <el-tooltip content="下移一层">
<img <el-button @click="$emit('ev', 'reduce_index')" class="btn">
style="width: 13px;height: 13px" <img
src="@/static/icon/xiayi.png" style="width: 13px;height: 13px"
alt="" src="@/static/icon/xiayi.png"
/> alt=""
</el-button> />
</el-tooltip> </el-button>
</el-col> </el-tooltip>
</el-row> </el-col>
</el-form> </el-row>
</div> </el-form>
<slot name="content"></slot>
</div> </div>
</el-scrollbar> <slot name="content"></slot>
</div>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
......
src/views/design/main/index.vue
...@@ -360,8 +360,9 @@ export default { ...@@ -360,8 +360,9 @@ export default {
}, },
selectImg(it, i) { selectImg(it, i) {
if (this.isView) { if (this.isView) {
return; this.isView = false
} }
// this.selectImgIndexList.push(i) // this.selectImgIndexList.push(i)
let item = this.imgList.find((img) => img.fileName === it.fileName); let item = this.imgList.find((img) => img.fileName === it.fileName);
if (item) return; if (item) return;
...@@ -373,10 +374,11 @@ export default { ...@@ -373,10 +374,11 @@ export default {
height: this.detail.mssHeight, height: this.detail.mssHeight,
}; };
} }
// this.selectImgIndexList = Array.from(new Set(this.selectImgIndexList)) this.getBackFile({files:[it],size:this.detail.adjustable}, (file) => {
this.getBackFile({ files: [it], size }, (file) => {
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList))); this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
}); })
// this.selectImgIndexList = Array.from(new Set(this.selectImgIndexList))
// this.getBackFile({ files: [it], size });
}, },
ev(type) { ev(type) {
if (this.selectIndex < 0 && this.imgList.length) { if (this.selectIndex < 0 && this.imgList.length) {
...@@ -546,14 +548,14 @@ export default { ...@@ -546,14 +548,14 @@ export default {
let that = this; let that = this;
let bw = document.getElementById("line"); let bw = document.getElementById("line");
bw = bw.clientWidth; bw = bw.clientWidth;
this.isView =false
// bw = Number(bw.replace("px", "")); // bw = Number(bw.replsace("px", ""));
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 width_px, height_px, rate, x, y; let width_px, height_px, rate, x, y;
if (size) { if (size && !files[i].isCut) {
width_px = that.WHproportion * mmToPx(size.width); width_px = that.WHproportion * mmToPx(size.width);
height_px = that.WHproportion * mmToPx(size.height); height_px = that.WHproportion * mmToPx(size.height);
x = w * that.WHproportion; x = w * that.WHproportion;
...@@ -564,8 +566,8 @@ export default { ...@@ -564,8 +566,8 @@ export default {
rate = data.height / data.width; rate = data.height / data.width;
width_px = bw * (2 / 3); width_px = bw * (2 / 3);
x = w; x = w;
y = height_px / 2;
height_px = width_px * rate; height_px = width_px * rate;
y = height_px / 2;
} }
that.imgList = []; that.imgList = [];
...@@ -585,6 +587,9 @@ export default { ...@@ -585,6 +587,9 @@ export default {
that.$nextTick(() => { that.$nextTick(() => {
that.ev("center"); that.ev("center");
}); });
setTimeout(()=>{
that.ev("center");
},10000)
if (i === files.length - 1) { if (i === files.length - 1) {
callback && callback(); callback && callback();
} }
...@@ -696,22 +701,13 @@ export default { ...@@ -696,22 +701,13 @@ export default {
// 图片导出为 png 格式 // 图片导出为 png 格式
let imgType = "png"; let imgType = "png";
let imgData = canvas.toDataURL(imgType); let imgData = canvas.toDataURL(imgType);
callback && callback(imgData); callback && callback(imgData);
}; };
return img; return img;
}, },
async cutImgFn() { async cutImgFn() {
if (!this.checkList?.length) return; this.checkList = JSON.parse(JSON.stringify(this.selectImgList))
if (this.detail.mssHeight && this.detail.mssWidth) {
return this.$confirm(`该生产单为直接打印单不可进行裁切！`, "提示", {
confirmButtonText: "确定",
showCancelButton: false,
type: "warning",
});
}
try { try {
const processQueue = await Promise.all( const processQueue = await Promise.all(
this.checkList.map(async (el) => { this.checkList.map(async (el) => {
...@@ -742,6 +738,8 @@ export default { ...@@ -742,6 +738,8 @@ export default {
this.selectImgList.forEach((el) => { this.selectImgList.forEach((el) => {
if (newMap.has(el.designId)) { if (newMap.has(el.designId)) {
el.fileName = newMap.get(el.designId).fileName; el.fileName = newMap.get(el.designId).fileName;
el.url = newMap.get(el.designId).productionFile;
el.isCut = true
el.productionFile = newMap.get(el.designId).productionFile; el.productionFile = newMap.get(el.designId).productionFile;
} }
}); });
...@@ -758,8 +756,7 @@ export default { ...@@ -758,8 +756,7 @@ export default {
} }
this.checkList = []; this.checkList = [];
this.getBackFile({files:[this.selectImgList[0]]})
this.selectImg(this.selectImgList[0]);
} catch (error) { } catch (error) {
console.error("错误", error); console.error("错误", error);
} }
...@@ -774,8 +771,8 @@ export default { ...@@ -774,8 +771,8 @@ export default {
// 确保点击的元素在包含 container 类名的元素内 // 确保点击的元素在包含 container 类名的元素内
if (currentElement.closest(".container")) { if (currentElement.closest(".container")) {
// 如果点击的元素不是 boxShaow，执行方法 // 如果点击的元素不是 boxShaow，执行方法
if (!currentElement.closest(".boxShaow") && !this.isView) { if (!currentElement.closest(".boxShaow")) {
this.isView = true; this.isView = !this.isView;
console.log(723, this.isView); console.log(723, this.isView);
} }
} }
...@@ -991,6 +988,7 @@ export default { ...@@ -991,6 +988,7 @@ export default {
> >
<img width="150px" :src="img.url" /> <img width="150px" :src="img.url" />
</div> </div>
</div> </div>
</template> </template>
</PicScrollbarBox> </PicScrollbarBox>
...@@ -1005,25 +1003,10 @@ export default { ...@@ -1005,25 +1003,10 @@ export default {
> >
</template> </template>
<template #mainContent> <template #mainContent>
<el-checkbox-group <div v-for="(img,i) in selectImgList" class="img-item" @click.stop.prevent="selectImg(img)">
v-if="selectImgList.length" <img :key="i" style="width:100%" :src="img.productionFile" />
v-model="checkList" <!-- <span>{{ img.designId }}</span> -->
style="display: flex;flex-wrap:nowrap;width: 100%;" </div>
>
<el-checkbox
v-for="img in selectImgList"
:key="img.designId"
:class="{
imgchecked: checkList.includes(img),
}"
:label="img"
>
<div class="img-item" @click.stop.prevent="selectImg(img)">
<img style="width:100%" :src="img.productionFile" />
<!-- <span>{{ img.designId }}</span> -->
</div>
</el-checkbox></el-checkbox-group
>
</template> </template>
</PicScrollbarBox> </PicScrollbarBox>
<!-- <div> <!-- <div>
...@@ -1161,7 +1144,7 @@ export default { ...@@ -1161,7 +1144,7 @@ export default {
class="main-bg" class="main-bg"
:style="{ 'background-color': !isView ? '#77797a' : '#fff' }" :style="{ 'background-color': !isView ? '#77797a' : '#fff' }"
> >
<div class="container"> <div class="container">
<div style="width: 100%;height: 100%; "> <div style="width: 100%;height: 100%; ">
<div v-if="isView" id="img"> <div v-if="isView" id="img">
<div <div
...@@ -1190,6 +1173,7 @@ export default { ...@@ -1190,6 +1173,7 @@ export default {
:angle="item.r / WHproportion" :angle="item.r / WHproportion"
style="pointer-events: auto;cursor: default" style="pointer-events: auto;cursor: default"
> >
<div <div
ref="sucaitu-img" ref="sucaitu-img"
:style="{ zIndex: item.zIndex }" :style="{ zIndex: item.zIndex }"
...@@ -1345,7 +1329,7 @@ export default { ...@@ -1345,7 +1329,7 @@ export default {
position: absolute; position: absolute;
bottom: 16px; bottom: 16px;
font-size: 24px; font-size: 24px;
left: 20%; left: 25%;
} }
.page-main { .page-main {
display: flex; display: flex;
...@@ -1369,7 +1353,6 @@ export default { ...@@ -1369,7 +1353,6 @@ export default {
// z-index: 2; // z-index: 2;
left: 5%; left: 5%;
top: 50%; top: 50%;
transform: translate(0, -50%); transform: translate(0, -50%);
background-color: #f0f2f6; background-color: #f0f2f6;
} }
...@@ -1426,6 +1409,7 @@ export default { ...@@ -1426,6 +1409,7 @@ export default {
justify-content: center; justify-content: center;
// width: auto; // width: auto;
position: absolute; position: absolute;
z-index: 2;
left: 5%; left: 5%;
img { img {
pointer-events: none; pointer-events: none;
...@@ -1509,15 +1493,21 @@ img { ...@@ -1509,15 +1493,21 @@ img {
.img-item { .img-item {
// height: 150px; // height: 150px;
width: 200px; width: 200px;
max-height: 200px;
overflow: hidden;
padding: 5px; padding: 5px;
display: flex; box-sizing: border-box;
background: #ececec;
display: inline-block;
cursor: pointer; cursor: pointer;
// margin-bottom: 20px; // margin-bottom: 20px;
border: 2px dashed transparent; margin-right: 5px;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box; box-sizing: border-box;
img{
width: 100%;
height: auto;
}
span { span {
font-size: 14px; font-size: 14px;
// margin: 5px 0; // margin: 5px 0;
...@@ -1623,7 +1613,7 @@ img { ...@@ -1623,7 +1613,7 @@ img {
display: flex; display: flex;
flex: 50%; flex: 50%;
font-size: 12px; font-size: 12px;
margin-bottom: 10px; margin-bottom: 6px;
.item-label { .item-label {
flex: 1; flex: 1;
text-align: right; text-align: right;
...@@ -1668,11 +1658,16 @@ img { ...@@ -1668,11 +1658,16 @@ img {
.active::before { .active::before {
display: none; display: none;
} }
::v-deep .drr:hover:before { //::v-deep .drr:hover:before {
outline: none; // outline: none;
} //}
} }
// ::v-deep.el-table thead { // ::v-deep.el-table thead {
// color: black; // color: black;
// } // }
.fixed-border{
position: fixed;
z-index: 69;
}
</style> </style>
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