Skip to content

E
electron-printer
Commit 54b08c25 by zhuzhequan
Options

代码整理，方法封装，提交时重新计算坐标宽高

parent 686120f5
Showing with 303 additions and 241 deletions
config/env.json
{ {
"apiApiHost":"https://factory.jomalls.com/api", "apiApiHost":"http://10.168.31.142:8060/api",
"fileApiUrl":"https://factory.jomalls.com/upload/factory", "fileApiUrl":"http://10.168.31.142:80/upload/factory",
"visionUrl":"https://console.jomalls.com" "visionUrl":"https://console.jomalls.com"
} }
package.json
{ {
"name": "JomallProductionAssistant", "name": "JomallProductionAssistant",
"productName": "JomallProductionAssistant", "productName": "JomallProductionAssistant",
"description": "", "description": "",
"version": "1.0.3", "version": "1.0.4",
"private": true, "private": true,
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "serve": "vue-cli-service serve",
"build": "vue-cli-service build", "build": "vue-cli-service build",
"lint": "vue-cli-service lint", "lint": "vue-cli-service lint",
"electron:build": "vue-cli-service electron:build", "electron:build": "vue-cli-service electron:build",
"electron:serve": "nodemon --watch src/server --exec vue-cli-service electron:serve", "electron:serve": "nodemon --watch src/server --exec vue-cli-service electron:serve",
"postinstall": "electron-builder install-app-deps", "postinstall": "electron-builder install-app-deps",
"postuninstall": "electron-builder install-app-deps", "postuninstall": "electron-builder install-app-deps",
"electron:generate-icons": "electron-icon-builder --input=./src/assets/logo.jpg --output=build --flatten" "electron:generate-icons": "electron-icon-builder --input=./src/assets/logo.jpg --output=build --flatten"
}, },
"main": "background.js", "main": "background.js",
"dependencies": { "dependencies": {
"@minogin/vue-drag-resize-rotate": "^1.0.5", "@minogin/vue-drag-resize-rotate": "^1.0.5",
"@vue/composition-api": "^0.3.4", "@vue/composition-api": "^0.3.4",
"axios": "^0.19.2", "axios": "^0.19.2",
"compressing": "^1.10.1", "compressing": "^1.10.1",
"core-js": "^3.6.4", "core-js": "^3.6.4",
"electron": "^6.1.1", "electron": "^6.1.1",
"electron-builder": "^24.13.3", "electron-builder": "^24.13.3",
"electron-icon-builder": "^2.0.1", "electron-icon-builder": "^2.0.1",
"electron-log": "^5.1.7", "electron-log": "^5.1.7",
"electron-store": "^4.0.0", "electron-store": "^4.0.0",
"electron-updater": "^6.2.1", "electron-updater": "^6.2.1",
"element-ui": "^2.13.0", "element-ui": "^2.13.0",
"express": "^4.17.1", "express": "^4.17.1",
"html2canvas": "^1.4.1", "html2canvas": "^1.4.1",
"lodash-id": "^0.14.0", "lodash-id": "^0.14.0",
"log4js": "^6.9.1", "log4js": "^6.9.1",
"moment": "^2.30.1", "moment": "^2.30.1",
"morgan": "^1.10.0", "morgan": "^1.10.0",
"multiparty": "^4.2.3", "multiparty": "^4.2.3",
"nodemon": "^3.1.4", "nodemon": "^3.1.4",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-draggable-resizable": "^3.0.0", "vue-draggable-resizable": "^3.0.0",
"vue-i18n": "^8.16.0", "vue-i18n": "^8.16.0",
"vue-moveable": "^2.0.0-beta.75", "vue-moveable": "^2.0.0-beta.75",
"vue-router": "^3.1.5", "vue-router": "^3.1.5",
"vuex": "^3.1.2" "vuex": "^3.1.2"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "^4.2.0", "@vue/cli-plugin-babel": "^4.2.0",
"@vue/cli-plugin-eslint": "^4.2.0", "@vue/cli-plugin-eslint": "^4.2.0",
"@vue/cli-plugin-router": "^4.2.0", "@vue/cli-plugin-router": "^4.2.0",
"@vue/cli-plugin-vuex": "^4.2.0", "@vue/cli-plugin-vuex": "^4.2.0",
"@vue/cli-service": "^4.2.0", "@vue/cli-service": "^4.2.0",
"@vue/eslint-config-prettier": "^6.0.0", "@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.0.3", "babel-eslint": "^10.0.3",
"eslint": "^6.7.2", "eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.1", "eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^6.1.2", "eslint-plugin-vue": "^6.1.2",
"less": "^3.5.0", "less": "^3.5.0",
"less-loader": "^7.3.0", "less-loader": "^7.3.0",
"prettier": "^1.19.1", "prettier": "^1.19.1",
"pug": "^2.0.4", "pug": "^2.0.4",
"pug-html-loader": "^1.1.5", "pug-html-loader": "^1.1.5",
"pug-plain-loader": "^1.0.0", "pug-plain-loader": "^1.0.0",
"vue-cli-plugin-electron-builder": "^1.4.6", "vue-cli-plugin-electron-builder": "^1.4.6",
"vue-template-compiler": "^2.6.11" "vue-template-compiler": "^2.6.11"
} }
} }
src/server/entity/function.js
...@@ -93,7 +93,7 @@ export default { ...@@ -93,7 +93,7 @@ export default {
const q = req.body; const q = req.body;
try { try {
let { data } = await axios.get( let { data } = await axios.get(
`${env}/factory/podJomallOrderProduct/getSubOrderBySubOrderNumber`, `${env}/factory/podJomallOrderProduct/getSubOrderByThirdSubOrderNumber`,
{ {
params: q, params: q,
headers: { "jwt-token": token } headers: { "jwt-token": token }
......
src/store/index.js
import Vue from "vue"; import Vue from "vue";
import Vuex from "vuex"; import Vuex from "vuex";
Vue.use(Vuex); Vue.use(Vuex);
const defaultSetting = { const defaultSetting = {
gridShow: 1, gridShow: 1,
language: "cn", language: "cn",
gridValue: 1, gridValue: 1,
autoPrint: false, autoPrint: false,
gridSpacing: "10mm" gridSpacing: "10mm"
}; };
export default new Vuex.Store({ export default new Vuex.Store({
state: { state: {
actionList: [], actionList: [],
imgList: [], imgList: [],
actionIndex: -1, actionIndex: -1,
systemSetting: { systemSetting: {
gridShow: 1, gridShow: 1,
gridValue: 1, gridValue: 1,
unit: "mm", unit: "mm",
language: "cn", language: "cn",
autoPrint: false, autoPrint: false,
gridSpacing: 10 gridSpacing: 10
} }
}, },
mutations: { mutations: {
setDefaultSetting(state) { setDefaultSetting(state) {
state.systemSetting = JSON.parse(JSON.stringify(defaultSetting)); state.systemSetting = JSON.parse(JSON.stringify(defaultSetting));
}, },
updateSystemSetting(state, f) { updateSystemSetting(state, f) {
state.systemSetting[f.field] = f.value; state.systemSetting[f.field] = f.value;
}, },
changeActionList(state, value) { changeActionList(state, value) {
state.actionList = value; state.actionList = value;
}, },
changeActionIndex(state, value) { changeActionIndex(state, value) {
state.actionIndex = value; state.actionIndex = value;
}, },
changeImgList(state, value) { changeImgList(state, value) {
state.imgList = value; state.imgList = value;
} }
}, },
getters: { getters: {
systemSetting(state) { systemSetting(state) {
return state.systemSetting; return state.systemSetting;
}, },
getActionList(state) { getActionList(state) {
return state.actionList; return state.actionList;
}, },
getActionIndex: (state) => state.actionIndex, getActionIndex: (state) => state.actionIndex,
imgList: (state) => state.imgList imgList: (state) => state.imgList
}, },
actions: {}, actions: {},
modules: {} modules: {}
}); });
src/utils/index.js
export function pxToUnit(px){
const setting = this.$dataStore.get("setting");
let unit = "mm";
if (setting) {
unit = setting.unit;
}
if (unit === "mm") {
px = Number((px * 0.84183).toFixed(1));
} else if (unit === "inch") {
px = Number((px * 0.84183) / 25.4).toFixed(1);
}
return px;
}
export function unitToPx(px){
const setting = this.$dataStore.get("setting");
let unit = "mm";
if (setting) {
unit = setting.unit;
}
if (unit === "mm") {
px = Number((px / 0.84183).toFixed(1));
} else if (unit === "inch") {
px = (Number((px / 0.84183) * 25.4).toFixed(1));
}
return px;
}
src/views/design/head/index.vue
...@@ -209,7 +209,7 @@ export default { ...@@ -209,7 +209,7 @@ export default {
const findByPodProductionNo = await this.$api.post( const findByPodProductionNo = await this.$api.post(
"/findByPodProductionNo", "/findByPodProductionNo",
{ {
factorySubOrderNumber: this.productionNo thirdSubOrderNumber: this.productionNo
} }
); );
this.detail = findByPodProductionNo.data; this.detail = findByPodProductionNo.data;
...@@ -217,7 +217,7 @@ export default { ...@@ -217,7 +217,7 @@ export default {
ipcRenderer.send("win-subScreen", findByPodProductionNo.data); ipcRenderer.send("win-subScreen", findByPodProductionNo.data);
// 根据生产单号查找 素材图片 下载到本地 然后返回本地地址去显示 // 根据生产单号查找 素材图片 下载到本地 然后返回本地地址去显示
let res = await this.$api.post("/downloadBySubOrderNumber", { let res = await this.$api.post("/downloadBySubOrderNumber", {
subOrderNumber: this.productionNo subOrderNumber: this.detail.factorySubOrderNumber
}); });
this.imgList = []; this.imgList = [];
res.data.forEach(el => { res.data.forEach(el => {
......
src/views/design/head/printDialog.vue
...@@ -5,6 +5,7 @@ import axios from "axios"; ...@@ -5,6 +5,7 @@ import axios from "axios";
import html2canvas from "html2canvas"; import html2canvas from "html2canvas";
import moment from "moment"; import moment from "moment";
import pkg from "../../../../package.json"; import pkg from "../../../../package.json";
import { pxToUnit } from "../../../utils/index";
export default { export default {
data() { data() {
return { return {
...@@ -136,6 +137,7 @@ export default { ...@@ -136,6 +137,7 @@ export default {
this.getPrinter(); this.getPrinter();
}, },
methods: { methods: {
pxToUnit,
delSetting() { delSetting() {
this.$confirm(`确定删除该预设？`, "提示", { this.$confirm(`确定删除该预设？`, "提示", {
confirmButtonText: "确定", confirmButtonText: "确定",
...@@ -223,7 +225,7 @@ export default { ...@@ -223,7 +225,7 @@ export default {
}, },
dataURLtoBlob(dataurl) { dataURLtoBlob(dataurl) {
var arr = dataurl.split(","); const arr = dataurl.split(",");
//注意base64的最后面中括号和引号是不转译的 //注意base64的最后面中括号和引号是不转译的
var _arr = arr[1].substring(0, arr[1].length - 2); var _arr = arr[1].substring(0, arr[1].length - 2);
var mime = arr[0].match(/:(.*?);/)[1], var mime = arr[0].match(/:(.*?);/)[1],
...@@ -280,6 +282,46 @@ export default { ...@@ -280,6 +282,46 @@ export default {
// document.querySelector(".down").setAttribute('href', canvas.toDataURL()); // document.querySelector(".down").setAttribute('href', canvas.toDataURL());
}); });
}, },
return_data() {
let dom_id = `${this.imgList[0].fileName}_0`;
const image = document.getElementById(dom_id);
const line = document.getElementById("line");
// 使用getBoundingClientRect获取更精确的位置信息
const imageRect = image.getBoundingClientRect();
const lineRect = line.getBoundingClientRect();
// 计算image相对于line的坐标位置
const relativeX = imageRect.left - lineRect.left;
const relativeY = imageRect.top - lineRect.top;
// 获取图片的宽高
let w = image.clientWidth; // 图片宽
let h = image.clientHeight; // 图片高
const x = relativeX;
const y = relativeY;
const r = this.imgList[0].r;
const x_mm = this.pxToUnit(x);
const y_mm = this.pxToUnit(y);
const w_mm = this.pxToUnit(w);
const h_mm = this.pxToUnit(h);
console.log({
x: Number((x_mm - 0.8).toFixed(1)),
y: Number((y_mm - 0.9).toFixed(1)),
w: Number((w_mm - 0.3).toFixed(1)),
h: Number((h_mm - 0.3).toFixed(1)),
r
});
// 返回计算结果
return {
x: Number(x_mm.toFixed(1)),
y: Number(y_mm.toFixed(1)),
w: Number((w_mm - 0.3).toFixed(1)),
h: Number((h_mm - 0.3).toFixed(1)),
r
};
},
async getPrintCmd() { async getPrintCmd() {
if (this.imgList.length === 0) if (this.imgList.length === 0)
return this.$message.warning("素材不能为空"); return this.$message.warning("素材不能为空");
...@@ -295,35 +337,24 @@ export default { ...@@ -295,35 +337,24 @@ export default {
return; return;
} }
let { x, y, r, w, h } = this.imgList[0]; let { x, y, w, h, r } = this.return_data();
y = Number(y) - Number(h) / 2;
x = Number(x) - Number(w) / 2;
let x_mm = Number((x * 0.84183).toFixed(1));
let w_mm = Number((w * 0.84183).toFixed(1));
let h_mm = Number((h * 0.84183).toFixed(1));
let y_mm = Number((y * 0.84183).toFixed(1));
console.log(x_mm, y_mm);
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 = ""; // 位置
let size = ""; // 图像大小 let size = ""; // 图像大小
if (Number(x_mm) < 0 || Number(y_mm) < 0) { console.log(x, y);
position = `"${this.singleStr( if (Number(x) < 0 || Number(y) < 0) {
Number(x_mm).toFixed(1) position = `"${this.singleStr(Number(x).toFixed(1))},${this.singleStr(
)},${this.singleStr(Number(y_mm).toFixed(1))}"`; Number(y).toFixed(1)
)}"`;
} else { } else {
position = `${this.singleStr(x_mm.toFixed(1))}${this.singleStr( position = `${this.singleStr(x.toFixed(1))}${this.singleStr(
y_mm.toFixed(1) y.toFixed(1)
)}`; )}`;
} }
size = `${this.singleStr(Number(w).toFixed(1))}${this.singleStr(
size = `${this.singleStr(Number(w_mm).toFixed(1))}${this.singleStr( Number(h).toFixed(1)
Number(h_mm).toFixed(1)
)}`; )}`;
const bigNum = "0031131"; // 图像放大倍数 -R
await this.sendCmd(imgFileName, size, position, r); await this.sendCmd(imgFileName, size, position, r);
}, },
async sendCmd(imgFileName, size, position, r) { async sendCmd(imgFileName, size, position, r) {
...@@ -332,7 +363,7 @@ export default { ...@@ -332,7 +363,7 @@ export default {
".png", ".png",
"" ""
)}.xml`}" -I "${"Input\\" + )}.xml`}" -I "${"Input\\" +
imgFileName}" -A "Output\\${imgFileName.replace( imgFileName}" -A "Output\\${imgFileName.replace(
".png", ".png",
"" ""
)}.arxp" -S ${size} -L ${position} -D ${r} -W ${whitePrint}`; )}.arxp" -S ${size} -L ${position} -D ${r} -W ${whitePrint}`;
...@@ -357,12 +388,12 @@ export default { ...@@ -357,12 +388,12 @@ export default {
async toWritePrintLog(send_api_data) { async toWritePrintLog(send_api_data) {
let head_setting = this.$dataStore.get("setting"); let head_setting = this.$dataStore.get("setting");
let position_before_px = this.$dataStore.get("position_before_px"); // 图片的位置信息 px let position_before_px = this.$dataStore.get("position_before_px"); // 图片的位置信息 px
let position_after_px = this.$dataStore.get("position_after_px");// 图片根据单位转换后的px let position_after_px = this.$dataStore.get("position_after_px"); // 图片根据单位转换后的px
let position_unit = this.$dataStore.get("position_unit"); // 图片根据单位转换后的px let position_unit = this.$dataStore.get("position_unit"); // 图片根据单位转换后的px
let print_time = moment(new Date()).format("YYYY-MM-DD HH:mm:ss"); // 打印的时间 let print_time = moment(new Date()).format("YYYY-MM-DD HH:mm:ss"); // 打印的时间
let production_no = this.$dataStore.get("production_no"); // 打印的单号 let production_no = this.$dataStore.get("production_no"); // 打印的单号
let print_setting = JSON.parse(JSON.stringify(this.printSetting)); // 打印的设置 let print_setting = JSON.parse(JSON.stringify(this.printSetting)); // 打印的设置
let version = this.pkg.version let version = this.pkg.version;
let data = { let data = {
head_setting, head_setting,
version, version,
...@@ -439,7 +470,7 @@ export default { ...@@ -439,7 +470,7 @@ export default {
:label="it.label" :label="it.label"
></el-option> ></el-option>
</el-select> </el-select>
<div style="margin-left: 15px;display: flex" class="save-btn"> <div style="margin-left: 15px; display: flex" class="save-btn">
<el-popover <el-popover
placement="bottom" placement="bottom"
width="200" width="200"
...@@ -451,7 +482,7 @@ export default { ...@@ -451,7 +482,7 @@ export default {
@click="openPopover" @click="openPopover"
slot="reference" slot="reference"
type="primary" type="primary"
>保存预设 >保存预设
</el-button> </el-button>
<div class="save-setting"> <div class="save-setting">
<el-input <el-input
...@@ -462,14 +493,14 @@ export default { ...@@ -462,14 +493,14 @@ export default {
></el-input> ></el-input>
<div class="save-footer"> <div class="save-footer">
<el-button size="medium" @click="showPopover = false" <el-button size="medium" @click="showPopover = false"
>取消 >取消
</el-button> </el-button>
<el-button <el-button
@click="saveSetting" @click="saveSetting"
:disabled="settingName === ''" :disabled="settingName === ''"
size="medium" size="medium"
type="primary" type="primary"
>保存 >保存
</el-button> </el-button>
</div> </div>
</div> </div>
...@@ -479,7 +510,7 @@ export default { ...@@ -479,7 +510,7 @@ export default {
:disabled="printSettingVal === 0" :disabled="printSettingVal === 0"
@click="delSetting" @click="delSetting"
type="danger" type="danger"
>删除 >删除
</el-button> </el-button>
</div> </div>
</div> </div>
...@@ -863,7 +894,7 @@ export default { ...@@ -863,7 +894,7 @@ export default {
</el-tooltip> </el-tooltip>
</div> </div>
<el-button size="small" @click="setDetailShow" <el-button size="small" @click="setDetailShow"
>{{ detailShow ? "关闭详细设置" : "打开详细设置" }}... >{{ detailShow ? "关闭详细设置" : "打开详细设置" }}...
</el-button> </el-button>
</div> </div>
</div> </div>
...@@ -892,7 +923,7 @@ export default { ...@@ -892,7 +923,7 @@ export default {
<div class="btn"> <div class="btn">
<el-input <el-input
size="small" size="small"
style="width: 100px;" style="width: 100px"
oninput="value=value.replace(/[^\-?\d]/g,'')" oninput="value=value.replace(/[^\-?\d]/g,'')"
v-model="printSetting.printNum" v-model="printSetting.printNum"
></el-input> ></el-input>
...@@ -903,8 +934,8 @@ export default { ...@@ -903,8 +934,8 @@ export default {
<el-button <el-button
@click="getPrintCmd" @click="getPrintCmd"
type="primary" type="primary"
style="width: 98%;height: 50px" style="width: 98%; height: 50px"
>打印 >打印
</el-button> </el-button>
</div> </div>
</div> </div>
...@@ -952,7 +983,7 @@ export default { ...@@ -952,7 +983,7 @@ export default {
font-size: 20px; font-size: 20px;
color: #409eff; color: #409eff;
position: relative; position: relative;
margin :15px 0; margin: 15px 0;
display: inline-block; display: inline-block;
left: -15px; left: -15px;
} }
...@@ -1028,7 +1059,6 @@ export default { ...@@ -1028,7 +1059,6 @@ export default {
display: flex; display: flex;
width: 430px; width: 430px;
flex-direction: column; flex-direction: column;
} }
} }
...@@ -1080,7 +1110,8 @@ export default { ...@@ -1080,7 +1110,8 @@ export default {
justify-content: center; justify-content: center;
} }
} }
::v-deep .el-form-item{
::v-deep .el-form-item {
margin-bottom: 9px; margin-bottom: 9px;
} }
</style> </style>
......
src/views/design/main/imgSetting.vue
<script> <script>
import { pxToUnit, unitToPx } from "@/utils";
export default { export default {
data() { data() {
return { return {
...@@ -26,10 +28,8 @@ export default { ...@@ -26,10 +28,8 @@ export default {
}, },
item: { item: {
type: Object, type: Object,
default: () => { default: () => {}
}
} }
}, },
watch: { watch: {
visible: { visible: {
...@@ -42,25 +42,20 @@ export default { ...@@ -42,25 +42,20 @@ export default {
handler() { handler() {
if (this.item) { if (this.item) {
let setting = this.$dataStore.get("setting"); let setting = this.$dataStore.get("setting");
this.item.y = (this.item.y - this.item.h / 2); this.item.y = this.item.y - this.item.h / 2;
this.item.x = (this.item.x - this.item.w / 2); this.item.x = this.item.x - this.item.w / 2;
this.$dataStore.set("position_before_px", JSON.parse(JSON.stringify(this.item))); this.$dataStore.set(
console.log( "position_before_px",
"setting", JSON.parse(JSON.stringify(this.item))
setting );
) console.log("setting", setting);
let x_mm, w_mm, h_mm, y_mm; let x_mm, w_mm, h_mm, y_mm;
if (setting.unit === "mm") { x_mm = this.pxToUnit(this.item.x);
x_mm = Number((this.item.x * 0.84183).toFixed(2)); w_mm = this.pxToUnit(this.item.w);
w_mm = Number((this.item.w * 0.84183).toFixed(2)); h_mm = this.pxToUnit(this.item.h);
h_mm = Number((this.item.h * 0.84183).toFixed(2)); y_mm = this.pxToUnit(this.item.y);
y_mm = Number((this.item.y * 0.84183).toFixed(2));
} else if (setting.unit === "inch") {
x_mm = Number((this.item.x * 0.84183) / 25.4).toFixed(2);
w_mm = Number((this.item.w * 0.84183) / 25.4).toFixed(2);
h_mm = Number((this.item.h * 0.84183) / 25.4).toFixed(2);
y_mm = Number((this.item.y * 0.84183) / 25.4).toFixed(2);
}
// return // return
this.form.x = x_mm; this.form.x = x_mm;
this.form.rate = this.item.rate; this.form.rate = this.item.rate;
...@@ -69,7 +64,10 @@ export default { ...@@ -69,7 +64,10 @@ export default {
this.form.h = h_mm; this.form.h = h_mm;
this.form.zIndex = this.item.zIndex; this.form.zIndex = this.item.zIndex;
this.form.r = this.item.r; this.form.r = this.item.r;
this.$dataStore.set(`position_after_px`, JSON.parse(JSON.stringify(this.form))); this.$dataStore.set(
`position_after_px`,
JSON.parse(JSON.stringify(this.form))
);
} }
}, },
immediate: true, immediate: true,
...@@ -77,8 +75,9 @@ export default { ...@@ -77,8 +75,9 @@ export default {
} }
}, },
methods: { methods: {
pxToUnit,
unitToPx,
formChange(t) { formChange(t) {
if (t && t === "w") { if (t && t === "w") {
this.form.h = this.form.w * this.form.rate; this.form.h = this.form.w * this.form.rate;
} }
...@@ -86,22 +85,13 @@ export default { ...@@ -86,22 +85,13 @@ export default {
this.form.w = this.form.h * this.form.rate; this.form.w = this.form.h * this.form.rate;
} }
let f = JSON.parse(JSON.stringify(this.form)); let f = JSON.parse(JSON.stringify(this.form));
f.y = (Number(f.y) + Number(f.h) / 2); f.y = Number(f.y) + Number(f.h) / 2;
f.x = (Number(f.x) + Number(f.w) / 2); f.x = Number(f.x) + Number(f.w) / 2;
f.x = this.unitToPx(f.x);
let setting = this.$dataStore.get("setting"); f.y = this.unitToPx(f.y);
if (setting.unit === "mm") { f.w = this.unitToPx(f.w);
f.x = Number((f.x / 0.84183).toFixed(2)); f.h = this.unitToPx(f.h);
f.y = Number((f.y / 0.84183).toFixed(2)); f.zIndex = Number(f.zIndex);
f.w = Number((f.w / 0.84183).toFixed(2));
f.h = Number((f.h / 0.84183).toFixed(2));
} else if (setting.unit === "inch") {
f.x = (Number((f.x / 0.84183) * 25.4).toFixed(2));
f.y = (Number((f.y / 0.84183) * 25.4).toFixed(2));
f.w = (Number((f.w / 0.84183) * 25.4).toFixed(2));
f.h = (Number((f.h / 0.84183) * 25.4).toFixed(2));
}
f.zIndex = Number((f.zIndex));
for (let k in f) { for (let k in f) {
f[k] = Number(f[k]); f[k] = Number(f[k]);
} }
...@@ -109,7 +99,6 @@ export default { ...@@ -109,7 +99,6 @@ export default {
this.$dataStore.set("position_unit", JSON.parse(JSON.stringify(f))); this.$dataStore.set("position_unit", JSON.parse(JSON.stringify(f)));
}, },
addValue(f) { addValue(f) {
if (!this.form[f]) this.$set(this.form, f, 0); if (!this.form[f]) this.$set(this.form, f, 0);
let nw = Number(this.form[f]) + 1; let nw = Number(this.form[f]) + 1;
this.$set(this.form, f, nw); this.$set(this.form, f, nw);
...@@ -138,12 +127,18 @@ export default { ...@@ -138,12 +127,18 @@ export default {
</script> </script>
<template> <template>
<div class="drawer" :style="{animation:`ltr-drawer-in .3s 1ms`}"> <div class="drawer" :style="{ animation: `ltr-drawer-in .3s 1ms` }">
<div class="title"> <div class="title">
图片编辑 图片编辑
</div> </div>
<div class="img-form"> <div class="img-form">
<el-form size="small" style="" :model="form" label-position="left" label-width="30px"> <el-form
size="small"
style=""
:model="form"
label-position="left"
label-width="30px"
>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="x：" prop="x"> <el-form-item label="x：" prop="x">
...@@ -193,7 +188,6 @@ export default { ...@@ -193,7 +188,6 @@ export default {
<el-form-item label="r："> <el-form-item label="r：">
<div class="form-content"> <div class="form-content">
<el-input maxlength="3" @blur="formChange" v-model="form.r"> <el-input maxlength="3" @blur="formChange" v-model="form.r">
</el-input> </el-input>
<div class="set-value"> <div class="set-value">
<i @click="addValue('r')" class="el-icon-arrow-up"></i> <i @click="addValue('r')" class="el-icon-arrow-up"></i>
...@@ -205,40 +199,61 @@ export default { ...@@ -205,40 +199,61 @@ export default {
<el-col :span="12"> <el-col :span="12">
<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 @click="reduceValue('zIndex')" class="el-icon-arrow-down"></i> <i
@click="reduceValue('zIndex')"
class="el-icon-arrow-down"
></i>
</div> </div>
</div> </div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<el-tooltip content="居中"> <el-tooltip content="居中">
<el-button @click="$emit('ev','center')" size="mini"> <el-button @click="$emit('ev', 'center')" size="mini">
<img style="width: 13px;height: 13px" src="@/static/icon/juzhong-01.png" alt=""> <img
style="width: 13px;height: 13px"
src="@/static/icon/juzhong-01.png"
alt=""
/>
</el-button> </el-button>
</el-tooltip> </el-tooltip>
<el-tooltip content="垂直居中"> <el-tooltip content="垂直居中">
<el-button @click="$emit('ev','y_center')" size="mini"> <el-button @click="$emit('ev', 'y_center')" size="mini">
<img style="width: 13px;height: 13px" src="@/static/icon/vertical.png" alt=""> <img
style="width: 13px;height: 13px"
src="@/static/icon/vertical.png"
alt=""
/>
</el-button> </el-button>
</el-tooltip> </el-tooltip>
<el-tooltip content="水平居中"> <el-tooltip content="水平居中">
<el-button @click="$emit('ev','x_center')" size="mini"> <el-button @click="$emit('ev', 'x_center')" size="mini">
<img style="width: 13px;height: 13px" src="@/static/icon/shuipingjuzhong.png" alt=""> <img
style="width: 13px;height: 13px"
src="@/static/icon/shuipingjuzhong.png"
alt=""
/>
</el-button> </el-button>
</el-tooltip> </el-tooltip>
<el-tooltip content="上移一层"> <el-tooltip content="上移一层">
<el-button @click="$emit('ev','add_index')" size="mini"> <el-button @click="$emit('ev', 'add_index')" size="mini">
<img style="width: 13px;height: 13px" src="@/static/icon/shangyi.png" alt=""> <img
style="width: 13px;height: 13px"
src="@/static/icon/shangyi.png"
alt=""
/>
</el-button> </el-button>
</el-tooltip> </el-tooltip>
<el-tooltip content="下移一层"> <el-tooltip content="下移一层">
<el-button @click="$emit('ev','reduce_index')" size="mini"> <el-button @click="$emit('ev', 'reduce_index')" size="mini">
<img style="width: 13px;height: 13px" src="@/static/icon/xiayi.png" alt=""> <img
style="width: 13px;height: 13px"
src="@/static/icon/xiayi.png"
alt=""
/>
</el-button> </el-button>
</el-tooltip> </el-tooltip>
</el-col> </el-col>
...@@ -247,7 +262,6 @@ export default { ...@@ -247,7 +262,6 @@ export default {
</div> </div>
<slot></slot> <slot></slot>
</div> </div>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
...@@ -294,7 +308,8 @@ export default { ...@@ -294,7 +308,8 @@ export default {
padding: 10px; padding: 10px;
z-index: 99; z-index: 99;
background: white; background: white;
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12); box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
left: 0; left: 0;
position: fixed; position: fixed;
border-right: 1px solid #ececec; border-right: 1px solid #ececec;
...@@ -334,5 +349,4 @@ export default { ...@@ -334,5 +349,4 @@ export default {
transform: translate(-100%); transform: translate(-100%);
} }
} }
</style> </style>
src/views/design/main/index.vue
...@@ -259,8 +259,8 @@ export default { ...@@ -259,8 +259,8 @@ export default {
}, },
selectImg(it, i) { selectImg(it, i) {
// 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;
// this.selectImgIndexList = Array.from(new Set(this.selectImgIndexList)) // this.selectImgIndexList = Array.from(new Set(this.selectImgIndexList))
this.getBackFile([it], file => { this.getBackFile([it], file => {
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList))); this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
...@@ -353,22 +353,13 @@ export default { ...@@ -353,22 +353,13 @@ export default {
}, },
resizeStop(data, item) { resizeStop(data, item) {
// if (this.selectIndex === -1) this.selectIndex = 0 // if (this.selectIndex === -1) this.selectIndex = 0
console.log("drag", this.selectIndex);
if (this.selectIndex < 0) return; if (this.selectIndex < 0) return;
this.$set(item, "y", data.y); this.$set(item, "y", data.y);
this.$set(item, "w", data.w); this.$set(item, "w", data.w);
this.$set(item, "h", data.h); this.$set(item, "h", data.h);
this.$set(item, "x", data.x); this.$set(item, "x", data.x);
// console.log(this.selectIndex,'resize',x, y, w, h) console.log("resizeStop", data);
// this.actionList.unshift({
// t: 'resize',
// x,
// y,
// w,
// h
// })
// this.$store.commit('changeActionList', this.actionList)
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList))); this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
}, },
resizing(index) {}, resizing(index) {},
...@@ -438,7 +429,6 @@ export default { ...@@ -438,7 +429,6 @@ export default {
console.log(files); console.log(files);
let that = this; let that = this;
let bw = document.getElementById("line").clientWidth; let bw = document.getElementById("line").clientWidth;
let bh = document.getElementById("line").clientHeight;
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].productionFile;
that.$nextTick(() => { that.$nextTick(() => {
...@@ -454,7 +444,7 @@ export default { ...@@ -454,7 +444,7 @@ export default {
x: w, x: w,
y: (bw * (2 / 3) * rate) / 2, y: (bw * (2 / 3) * rate) / 2,
h: bw * (2 / 3) * rate, h: bw * (2 / 3) * rate,
r: 0 r: 0,
}); });
that.selectIndex = that.imgList.length - 1; that.selectIndex = that.imgList.length - 1;
that.showImgSetting = true; that.showImgSetting = true;
...@@ -672,6 +662,7 @@ export default { ...@@ -672,6 +662,7 @@ export default {
<img <img
crossOrigin="anonymous" crossOrigin="anonymous"
:src="item.url" :src="item.url"
:id="item.fileName+'_'+index"
alt="" alt=""
class="sucaitu-img" class="sucaitu-img"
/> />
...@@ -729,7 +720,6 @@ export default { ...@@ -729,7 +720,6 @@ export default {
@change="formChange" @change="formChange"
:item="returnItem" :item="returnItem"
@close="close" @close="close"
> >
<div class="select-img" v-if="selectImgList.length"> <div class="select-img" v-if="selectImgList.length">
<div <div
......
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