Skip to content

E
electron-printer
Commit 0834896a by 朱哲铨
Options

添加less

parent 165fd6cb
Showing with 508 additions and 555 deletions
package-lock.json
{ {
"name": "vue-exectron-express-lowdb", "name": "JomallProductionAssistant",
"version": "0.1.0", "version": "0.1.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
...@@ -9248,6 +9248,13 @@ ...@@ -9248,6 +9248,13 @@
} }
} }
}, },
"image-size": {
"version": "0.5.5",
"resolved": "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz",
"integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
"dev": true,
"optional": true
},
"immediate": { "immediate": {
"version": "3.0.6", "version": "3.0.6",
"resolved": "https://registry.npmmirror.com/immediate/-/immediate-3.0.6.tgz", "resolved": "https://registry.npmmirror.com/immediate/-/immediate-3.0.6.tgz",
...@@ -10182,6 +10189,12 @@ ...@@ -10182,6 +10189,12 @@
"graceful-fs": "^4.1.9" "graceful-fs": "^4.1.9"
} }
}, },
"klona": {
"version": "2.0.6",
"resolved": "https://registry.npmmirror.com/klona/-/klona-2.0.6.tgz",
"integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
"dev": true
},
"latest-version": { "latest-version": {
"version": "5.1.0", "version": "5.1.0",
"resolved": "https://registry.npmmirror.com/latest-version/-/latest-version-5.1.0.tgz", "resolved": "https://registry.npmmirror.com/latest-version/-/latest-version-5.1.0.tgz",
...@@ -10239,6 +10252,46 @@ ...@@ -10239,6 +10252,46 @@
"invert-kv": "^1.0.0" "invert-kv": "^1.0.0"
} }
}, },
"less": {
"version": "3.5.0",
"resolved": "https://registry.npmmirror.com/less/-/less-3.5.0.tgz",
"integrity": "sha512-fLbJGxtoCV2FTDGeXlUXXUZ8sgMej2c5u8om8inOZt5M3tzXqF/aS7W0txWhCN6iA6qPtPGGzj0sp/vd8ztl6Q==",
"dev": true,
"requires": {
"errno": "^0.1.1",
"graceful-fs": "^4.1.2",
"image-size": "~0.5.0",
"mime": "^1.4.1",
"mkdirp": "^0.5.0",
"promise": "^7.1.1",
"request": "^2.83.0",
"source-map": "~0.6.0"
}
},
"less-loader": {
"version": "7.3.0",
"resolved": "https://registry.npmmirror.com/less-loader/-/less-loader-7.3.0.tgz",
"integrity": "sha512-Mi8915g7NMaLlgi77mgTTQvK022xKRQBIVDSyfl3ErTuBhmZBQab0mjeJjNNqGbdR+qrfTleKXqbGI4uEFavxg==",
"dev": true,
"requires": {
"klona": "^2.0.4",
"loader-utils": "^2.0.0",
"schema-utils": "^3.0.0"
},
"dependencies": {
"schema-utils": {
"version": "3.3.0",
"resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-3.3.0.tgz",
"integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
"dev": true,
"requires": {
"@types/json-schema": "^7.0.8",
"ajv": "^6.12.5",
"ajv-keywords": "^3.5.2"
}
}
}
},
"leven": { "leven": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmmirror.com/leven/-/leven-2.1.0.tgz", "resolved": "https://registry.npmmirror.com/leven/-/leven-2.1.0.tgz",
......
package.json
...@@ -58,6 +58,8 @@ ...@@ -58,6 +58,8 @@
"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-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",
......
src/router/index.js
...@@ -20,14 +20,7 @@ const routes = [ ...@@ -20,14 +20,7 @@ const routes = [
}, },
component: resolve => require(["../views/design/index.vue"], resolve) component: resolve => require(["../views/design/index.vue"], resolve)
}, },
{
path: "/design-copy",
name: "design",
meta: {
title: "设计页面"
},
component: resolve => require(["../views/design/copy.vue"], resolve)
},
{ {
path: "/design-detail", path: "/design-detail",
name: "design", name: "design",
...@@ -48,7 +41,6 @@ const router = new VueRouter({ ...@@ -48,7 +41,6 @@ const router = new VueRouter({
routes routes
}); });
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
let user = Vue.prototype.$dataStore.get("user"); let user = Vue.prototype.$dataStore.get("user");
if (to.path.includes("design-detail")) { if (to.path.includes("design-detail")) {
return next(); return next();
...@@ -67,7 +59,6 @@ router.beforeEach((to, from, next) => { ...@@ -67,7 +59,6 @@ router.beforeEach((to, from, next) => {
} else { } else {
return next("/"); return next("/");
} }
} }
}); });
export default router; export default router;
src/views/design/copy.vue deleted 100644 → 0
<script>
import VueDragResizeRotate from "@minogin/vue-drag-resize-rotate";
export default {
components: {VueDragResizeRotate},
data() {
return {
selectIndex:0,
imgList:[
{
x:0,
url:'https://pic2.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg',
y:0,
zIndex:1,
h:100,
w:100,
r:0
},
{
x:0,
url:'https://ts1.cn.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0',
y:0,
zIndex:2,
h:100,
w:100,
r:0
}
]
}
},
methods:{
resizing(x, y, w, h) {
this.$set(this.imgList[this.selectIndex], 'w', w)
this.$set(this.imgList[this.selectIndex], 'h', h)
this.$set(this.imgList[this.selectIndex], 'x', x)
this.$set(this.imgList[this.selectIndex], 'y', y)
},
onDragDebounce(data,item){
console.log(data,item)
this.imgList[this.selectIndex].x = left
this.imgList[this.selectIndex].y = top
},
},
mounted() {
}
}
</script>
<template>
<div class="page">
<vue-drag-resize-rotate
:w="item.w"
class-name="my-drag-resize-rotate"
:prevent-deactivation="true"
:h="item.h"
:parent="true"
:x="item.x"
:z="item.zIndex"
:isActive="index===selectIndex"
:aspectRatio="true"
:active="index===selectIndex"
:y="item.y"
v-for="(item,index) in imgList"
:key="index"
:draggable="true"
:resizable="true"
:rotatable="true"
@dragstop="(a)=>onDragDebounce(a,item)"
@resizing="resizing"
:angle="item.r"
>
<div ref="sucaitu-img" @click="selectItem(index)"
:class="{'active': index === selectIndex}"
class="sucaitu-img img element">
<img :src="item.url" alt="" class="sucaitu-img">
<i v-if="index===selectIndex" class=" close el-icon-close"></i>
<div v-if="index===selectIndex" class="control-point control-rotator"></div>
</div>
</vue-drag-resize-rotate>
</div>
</template>
<style scoped>
.sucaitu-img{
width: 100%;
height: 100%;
}
.sucaitu-img img{
width: 100%;
height: 100%;
}
.page {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
</style>
\ No newline at end of file
src/views/design/detail/index.vue
...@@ -570,43 +570,54 @@ export default { ...@@ -570,43 +570,54 @@ export default {
</template> </template>
<style scoped> <style lang="less" scoped>
::v-deep .el-dialog__body { ::v-deep {
.el-dialog__body {
box-sizing: border-box; box-sizing: border-box;
flex: 1; flex: 1;
flex-shrink: 0; flex-shrink: 0;
overflow: hidden; overflow: hidden;
} }
.el-dialog {
::v-deep .el-dialog {
display: flex; display: flex;
height: calc(100% - 50px); height: calc(100% - 50px);
margin-top: 50px; margin-top: 50px;
flex-direction: column; flex-direction: column;
}
.el-carousel__container {
height: 100%;
}
.el-form-item__label {
font-weight: bold;
color: white;
}
.el-dialog__title {
font-weight: bold;
font-size: 37px;
color: black;
position: relative;
left: 47%;
top: 13px;
}
} }
.sure-btn { .sure-btn {
position: absolute; position: absolute;
right: 62px; right: 62px;
top: 14px; top: 14px;
} }
.detail-div { .detail-div {
display: flex; display: flex;
height: 100%; height: 100%;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
} .detail-images {
.scroll-list {
.detail-div .detail-images .scroll-list {
background: #ececec; background: #ececec;
display: flex; display: flex;
height: 100px; height: 100px;
width: 100%; width: 100%;
padding: 5px; padding: 5px;
} .scroll-content {
.detail-div .detail-images .scroll-list .scroll-content {
margin-left: 10px; margin-left: 10px;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
...@@ -614,121 +625,94 @@ export default { ...@@ -614,121 +625,94 @@ export default {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
flex-shrink: 0; flex-shrink: 0;
} .scroll-item {
.detail-div .detail-images .scroll-list .scroll-content .scroll-item {
height: 100%; height: 100%;
min-width: 100px; min-width: 100px;
background: white; background: white;
width: 80px; width: 80px;
margin-right: 5px; margin-right: 5px;
} }
}
.detail-div .detail-images .scroll-list .img-title { .img-title {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
background: white; background: white;
padding: 10px; padding: 10px;
} b {
.detail-div .detail-images .scroll-list .img-title b {
text-align: center; text-align: center;
color: black; color: black;
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
margin-bottom: 15px; margin-bottom: 15px;
} }
.id {
.detail-div .detail-images .scroll-list .img-title .id {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 3px 5px; padding: 3px 5px;
background: #ececec; background: #ececec;
justify-content: center; justify-content: center;
} img {
.detail-div .detail-images .scroll-list .img-title .id img {
width: 15px; width: 15px;
margin-right: 8px; margin-right: 8px;
} }
}
.detail-div .detail-content { }
}
}
.detail-content {
display: flex; display: flex;
width: 100%; width: 100%;
flex: 1; flex: 1;
margin-bottom: 10px; margin-bottom: 10px;
flex-shrink: 0; flex-shrink: 0;
justify-content: space-between; justify-content: space-between;
} }
.right {
.detail-div .right {
width: 710px; width: 710px;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} .btn {
.detail-div .right .btn {
margin: 20px 0; margin: 20px 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 50px; height: 50px;
width: 100%; width: 100%;
} }
.div-text {
.detail-div .right .btn .btn-sure, .detail-div .right .btn .btn-down { .div-content {
width: 100%;
position: relative;
}
.detail-div .right .btn .btn-sure .check, .detail-div .right .btn .btn-down .check {
position: absolute;
width: 144px;
height: 100%;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
right: 0;
top: 1px;
}
.detail-div .right .div-text .div-content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
padding: 15px 10px; padding: 15px 10px;
box-sizing: border-box; box-sizing: border-box;
} position: relative;
border: 1px solid #ececec;
.detail-div .right .div-text .div-content .div-item { .div-item {
width: 50%; width: 50%;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 15px; font-size: 15px;
display: flex; display: flex;
align-items: center; align-items: center;
} p {
.detail-div .right .div-text .div-content .div-item p {
font-weight: 400; font-weight: 400;
color: black; color: black;
} }
span {
.detail-div .right .div-text .div-content .div-item span {
display: inline-block; display: inline-block;
text-align: right; text-align: right;
width: 100px; width: 100px;
} &::after {
.detail-div .right .div-text .div-content .div-item span::after {
content: ':'; content: ':';
margin: 0 3px; margin: 0 3px;
} }
}
.detail-div .right .div-text b { }
}
b {
position: relative; position: relative;
background: white; background: white;
top: 9px; top: 9px;
...@@ -737,20 +721,15 @@ export default { ...@@ -737,20 +721,15 @@ export default {
font-size: 18px; font-size: 18px;
color: black; color: black;
z-index: 3; z-index: 3;
} }
}
.detail-div .right .div-text .div-content { .input {
position: relative;
border: 1px solid #ececec;
}
.detail-div .right .input {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 30px 0; margin: 30px 0;
} }
}
.detail-div .left { .left {
flex: 1; flex: 1;
flex-shrink: 0; flex-shrink: 0;
margin-right: 20px; margin-right: 20px;
...@@ -758,85 +737,78 @@ export default { ...@@ -758,85 +737,78 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} .left-image {
.detail-div .left .left-image {
display: flex; display: flex;
height: 100%; height: 100%;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
} img {
.detail-div .left .left-image img {
height: auto; height: auto;
width: 100%; width: 100%;
max-height: 90%; max-height: 90%;
} }
b {
.detail-div .left .left-image b {
color: black; color: black;
font-size: 18px; font-size: 18px;
margin-bottom: 15px; margin-bottom: 15px;
} }
}
.detail-div .left .left-images { .left-images {
display: flex; display: flex;
width: 95%; width: 95%;
height: 100%; height: 100%;
flex-direction: column; flex-direction: column;
} b {
.detail-div .left .left-images b {
color: black; color: black;
text-align: center; text-align: center;
margin-bottom: 15px; margin-bottom: 15px;
}
}
}
} }
.detail-div .right .btn .btn-sure, .detail-div .right .btn .btn-down {
::v-deep .el-carousel__container { width: 100%;
height: 100%;
}
::v-deep .el-form-item__label {
font-weight: bold;
color: white;
}
::v-deep .el-dialog__title {
font-weight: bold;
font-size: 37px;
color: black;
position: relative; position: relative;
left: 47%;
top: 13px;
} }
.detail-div .right .btn .btn-sure .check, .detail-div .right .btn .btn-down .check {
position: absolute;
width: 144px;
height: 100%;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
right: 0;
top: 1px;
}
.btn { .btn {
position: relative; position: relative;
} .check {
::v-deep {
.el-checkbox__inner {
.btn .check ::v-deep .el-checkbox__inner {
background-color: transparent !important; background-color: transparent !important;
border-color: white !important; border-color: white !important;
width: 12px; width: 12px;
height: 12px; height: 12px;
} &::after {
.btn .check ::v-deep .el-checkbox__inner::after {
left: 3px; left: 3px;
} }
}
.btn .check ::v-deep .el-checkbox__label { .el-checkbox__label {
padding-left: 5px; padding-left: 5px;
font-size: 12px; font-size: 12px;
color: white !important; color: white !important;
}
}
}
} }
.page{ .page {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
p{ p {
margin: 0 ; margin: 0;
} }
</style> </style>
src/views/design/head/index.vue
...@@ -177,18 +177,14 @@ export default { ...@@ -177,18 +177,14 @@ export default {
} }
if (this.productionNo === "") return this.$message.warning("请录入生产单号"); if (this.productionNo === "") return this.$message.warning("请录入生产单号");
try { try {
//查找生产单号信息传给第二个显示器
const findByPodProductionNo = await this.$api.post("/findByPodProductionNo", { const findByPodProductionNo = await this.$api.post("/findByPodProductionNo", {
podProductionNo: this.productionNo, podProductionNo: this.productionNo,
status: "IN_PRODUCTION" status: "IN_PRODUCTION"
}); });
this.detail = findByPodProductionNo.data; this.detail = findByPodProductionNo.data;
ipcRenderer.send("win-subScreen", findByPodProductionNo.data); ipcRenderer.send("win-subScreen", findByPodProductionNo.data);
// 根据生产单号查找 素材图片 下载到本地 然后返回本地地址去显示
} catch (err) {
this.productionNo = "";
this.$refs.searchRef.focus();
}
try {
let res = await this.$api.post("/getPodProductionInfo", { productionNo: this.productionNo }); let res = await this.$api.post("/getPodProductionInfo", { productionNo: this.productionNo });
if (res.data.length === 0) return this.$message.warning("未找到素材图！"); if (res.data.length === 0) return this.$message.warning("未找到素材图！");
let arr = []; let arr = [];
...@@ -199,38 +195,22 @@ export default { ...@@ -199,38 +195,22 @@ export default {
arr.push({ arr.push({
...it, ...it,
...{ ...{
designId:el.designId designId: el.designId
} }
}); });
}); });
} }
}); });
console.log(arr,'arr'); console.log(arr, "arr");
res.data = arr.filter(el=>el.type!==1); res.data = arr.filter(el => el.type !== 1);
// for (let i = 0; i < res.data.length; i++) {
// this.$api.post("/getPngImg", { fileName: res.data[i].fileName }, {
// headers: {
// "responseType": "blob"
// }
// }).then(r => {
//
// res.data[i].file = new File([r], res.data[i].fileName, { type: "image/png" });
// if (i === res.data.length - 1) {
// this.imgList = res.data;
//
// }
// });
// }
bus.$emit("busEmit", { type: "sendFile", value: res.data }); bus.$emit("busEmit", { type: "sendFile", value: res.data });
this.productionNo = ""; this.productionNo = "";
this.$refs.searchRef.focus(); this.$refs.searchRef.focus();
} catch (err) { } catch (err) {
bus.$emit("busEmit", { type: "sendFile", value: [] });
this.productionNo = ""; this.productionNo = "";
this.$refs.searchRef.focus(); this.$refs.searchRef.focus();
} }
}, },
changeActionIndex(t) { changeActionIndex(t) {
let index = this.actionIndex; let index = this.actionIndex;
...@@ -436,7 +416,7 @@ export default { ...@@ -436,7 +416,7 @@ export default {
<el-dropdown @command="dropdownCommand"> <el-dropdown @command="dropdownCommand">
<b style="cursor:pointer;">{{ user.employeeName }}</b> <b style="cursor:pointer;">{{ user.employeeName }}</b>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<!-- <el-dropdown-item command="clear">清除缓存</el-dropdown-item>--> <!-- <el-dropdown-item command="clear">清除缓存</el-dropdown-item>-->
<el-dropdown-item command="company">切换系统</el-dropdown-item> <el-dropdown-item command="company">切换系统</el-dropdown-item>
<el-dropdown-item command="logout">退出登录</el-dropdown-item> <el-dropdown-item command="logout">退出登录</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
...@@ -448,42 +428,42 @@ export default { ...@@ -448,42 +428,42 @@ export default {
</div> </div>
</template> </template>
<style scoped> <style lang="less" scoped>
.right-user { .right-user {
display: flex; display: flex;
align-items: center; align-items: center;
b {
}
.right-user b {
margin: 0 10px; margin: 0 10px;
display: inline-block; display: inline-block;
color: black; color: black;
font-size: 15px; font-size: 15px;
font-weight: bold; font-weight: bold;
} }
.right-user p { p {
margin: 0 10px; margin: 0 10px;
font-weight: bold; font-weight: bold;
display: inline-block; display: inline-block;
font-size: 15px; font-size: 15px;
color: #e6a23c; color: #e6a23c;
}
} }
.setting-form .el-form { .setting-form {
.el-form {
padding: 10px; padding: 10px;
box-sizing: border-box; box-sizing: border-box;
} }
.form-block:nth-last-of-type(1) {
border-bottom: 1px solid #ececec;
} }
.form-block { .form-block {
padding: 15px 0; padding: 15px 0;
border-top: 1px solid #ececec; border-top: 1px solid #ececec;
&:nth-last-of-type(1) {
border-bottom: 1px solid #ececec;
}
} }
.block-item { .block-item {
...@@ -493,11 +473,9 @@ export default { ...@@ -493,11 +473,9 @@ export default {
font-size: 14px; font-size: 14px;
padding: 10px 10px; padding: 10px 10px;
} &:hover {
.block-item:hover {
background-color: #ececec; background-color: #ececec;
}
} }
.center-input { .center-input {
...@@ -508,7 +486,6 @@ export default { ...@@ -508,7 +486,6 @@ export default {
flex-shrink: 0; flex-shrink: 0;
overflow: hidden; overflow: hidden;
padding-left: 100px; padding-left: 100px;
} }
.sure-btn { .sure-btn {
...@@ -517,11 +494,15 @@ export default { ...@@ -517,11 +494,15 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
}
.sure-btn ::v-deep .el-button span { ::v-deep {
.el-button {
span {
position: relative; position: relative;
left: -40px; left: -40px;
}
}
}
} }
.check { .check {
...@@ -533,4 +514,5 @@ export default { ...@@ -533,4 +514,5 @@ export default {
z-index: 2; z-index: 2;
color: white; color: white;
} }
</style> </style>
\ No newline at end of file
src/views/design/head/printDialog.vue
...@@ -30,7 +30,6 @@ export default { ...@@ -30,7 +30,6 @@ export default {
{ {
label: "仅黑色油墨" label: "仅黑色油墨"
} }
], ],
detailShow: false, detailShow: false,
showPopover: false, showPopover: false,
...@@ -80,7 +79,7 @@ export default { ...@@ -80,7 +79,7 @@ export default {
}, },
mounted() { mounted() {
this.$dataStore.set("default-print-setting", this.printSetting); this.$dataStore.set("default-print-setting", this.printSetting);
this.getPrintSettingList(()=>{ this.getPrintSettingList(() => {
let select = this.$dataStore.get("print-setting-select"); let select = this.$dataStore.get("print-setting-select");
console.log(this.$dataStore, "select"); console.log(this.$dataStore, "select");
if (select) { if (select) {
...@@ -104,11 +103,10 @@ export default { ...@@ -104,11 +103,10 @@ export default {
); );
} }
}); });
}, },
computed: { computed: {
inkNum() { inkNum() {
return 200 + (Number(this.printSetting.byHighlight) * 50) - 50; return 200 + Number(this.printSetting.byHighlight) * 50 - 50;
}, },
defaultTime() { defaultTime() {
if ([6, 7].includes(Number(this.printSetting.byHighlight))) { if ([6, 7].includes(Number(this.printSetting.byHighlight))) {
...@@ -127,21 +125,17 @@ export default { ...@@ -127,21 +125,17 @@ export default {
}, },
created() { created() {
this.getPrinter(); this.getPrinter();
}, },
methods: { methods: {
delSetting() { delSetting() {
this.$confirm( this.$confirm(`确定删除该预设？`, "提示", {
`确定删除该预设？`,
"提示",
{
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning" type: "warning"
} }).then(() => {
).then(() => { this.$dataStore.delete(
this.$dataStore.delete(this.printSettingList[this.printSettingVal].label + "-print-setting"); this.printSettingList[this.printSettingVal].label + "-print-setting"
);
this.getPrintSettingList(); this.getPrintSettingList();
this.printSettingVal = 0; this.printSettingVal = 0;
}); });
...@@ -162,7 +156,9 @@ export default { ...@@ -162,7 +156,9 @@ export default {
printSettingChange(v) { printSettingChange(v) {
let label = this.printSettingList[v].label; let label = this.printSettingList[v].label;
this.$dataStore.set("print-setting-select", label); this.$dataStore.set("print-setting-select", label);
this.printSetting = JSON.parse(JSON.stringify(this.printSettingList[v].value)); this.printSetting = JSON.parse(
JSON.stringify(this.printSettingList[v].value)
);
}, },
saveSetting() { saveSetting() {
if (this.settingName.trim() === "") { if (this.settingName.trim() === "") {
...@@ -171,7 +167,10 @@ export default { ...@@ -171,7 +167,10 @@ export default {
if (this.printSettingList.find(el => el.label === this.settingName)) { if (this.printSettingList.find(el => el.label === this.settingName)) {
return this.$message.warning("预设名称不能重复"); return this.$message.warning("预设名称不能重复");
} }
this.$dataStore.set(`${this.settingName}-print-setting`, this.printSetting); this.$dataStore.set(
`${this.settingName}-print-setting`,
this.printSetting
);
this.showPopover = false; this.showPopover = false;
this.printSettingVal = this.printSettingList.length; this.printSettingVal = this.printSettingList.length;
this.getPrintSettingList(); this.getPrintSettingList();
...@@ -193,7 +192,10 @@ export default { ...@@ -193,7 +192,10 @@ export default {
str = "000" + str; str = "000" + str;
} }
} else { } else {
str = str.toString().replace(".", "").replace("-", ""); str = str
.toString()
.replace(".", "")
.replace("-", "");
if (str.length >= 4) { if (str.length >= 4) {
str = str.slice(0, 5); str = str.slice(0, 5);
} else if (str.length === 3) { } else if (str.length === 3) {
...@@ -228,9 +230,8 @@ export default { ...@@ -228,9 +230,8 @@ export default {
}, },
moreImageCmd(arr) { moreImageCmd(arr) {
var canvas1 = document.createElement("canvas"); var canvas1 = document.createElement("canvas");
let _canvas = document.getElementsByClassName("sucaitu")[0];//目标块 let _canvas = document.getElementsByClassName("sucaitu")[0]; //目标块
var bodyW = parseInt(window.getComputedStyle(_canvas).width); var bodyW = parseInt(window.getComputedStyle(_canvas).width);
var bodyH = parseInt(window.getComputedStyle(_canvas).height); var bodyH = parseInt(window.getComputedStyle(_canvas).height);
canvas1.width = bodyW; canvas1.width = bodyW;
...@@ -249,7 +250,6 @@ export default { ...@@ -249,7 +250,6 @@ export default {
useCORS: true, useCORS: true,
allowTaint: true allowTaint: true
}).then(async function(canvas) { }).then(async function(canvas) {
let dataURL = canvas.toDataURL("image/png"); let dataURL = canvas.toDataURL("image/png");
let pageBlob = that.dataURLtoBlob(dataURL); let pageBlob = that.dataURLtoBlob(dataURL);
let params = new FormData(); let params = new FormData();
...@@ -263,14 +263,17 @@ export default { ...@@ -263,14 +263,17 @@ export default {
}); });
let w_mm = Number((canvas1.width * 0.84183).toFixed(1)); let w_mm = Number((canvas1.width * 0.84183).toFixed(1));
let h_mm = Number((canvas1.height * 0.84183).toFixed(1)); let h_mm = Number((canvas1.height * 0.84183).toFixed(1));
let size = `${that.singleStr(Number(w_mm).toFixed(1))}${that.singleStr(Number(h_mm).toFixed(1))}`; let size = `${that.singleStr(Number(w_mm).toFixed(1))}${that.singleStr(
Number(h_mm).toFixed(1)
)}`;
await that.sendCmd(data.fileName, size, "00000000", 0); await that.sendCmd(data.fileName, size, "00000000", 0);
//canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载 //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
// document.querySelector(".down").setAttribute('href', canvas.toDataURL()); // document.querySelector(".down").setAttribute('href', canvas.toDataURL());
}); });
}, },
async getPrintCmd() { async getPrintCmd() {
if (this.imgList.length === 0) return this.$message.warning("素材不能为空"); if (this.imgList.length === 0)
return this.$message.warning("素材不能为空");
console.log(this.imgList[0]); console.log(this.imgList[0]);
if (this.imgList.length > 1) { if (this.imgList.length > 1) {
let dom = document.getElementsByClassName("drr"); let dom = document.getElementsByClassName("drr");
...@@ -285,8 +288,8 @@ export default { ...@@ -285,8 +288,8 @@ export default {
return; return;
} }
let { x, y, r, w, h } = this.imgList[0]; let { x, y, r, w, h } = this.imgList[0];
y = (Number(y) - Number(h) / 2); y = Number(y) - Number(h) / 2;
x = (Number(x) - Number(w) / 2); x = Number(x) - Number(w) / 2;
let x_mm = Number((x * 0.84183).toFixed(1)); let x_mm = Number((x * 0.84183).toFixed(1));
let w_mm = Number((w * 0.84183).toFixed(1)); let w_mm = Number((w * 0.84183).toFixed(1));
let h_mm = Number((h * 0.84183).toFixed(1)); let h_mm = Number((h * 0.84183).toFixed(1));
...@@ -298,13 +301,18 @@ export default { ...@@ -298,13 +301,18 @@ export default {
let position = ""; // 位置 let position = ""; // 位置
let size = ""; // 图像大小 let size = ""; // 图像大小
if (Number(x_mm) < 0 || Number(y_mm) < 0) { if (Number(x_mm) < 0 || Number(y_mm) < 0) {
position = `"${this.singleStr(Number(x_mm).toFixed(1))},${this.singleStr(Number(y_mm).toFixed(1))}"`; position = `"${this.singleStr(
Number(x_mm).toFixed(1)
)},${this.singleStr(Number(y_mm).toFixed(1))}"`;
} else { } else {
position = `${this.singleStr(x_mm.toFixed(1))}${this.singleStr(y_mm.toFixed(1))}`; position = `${this.singleStr(x_mm.toFixed(1))}${this.singleStr(
y_mm.toFixed(1)
)}`;
} }
size = `${this.singleStr(Number(w_mm).toFixed(1))}${this.singleStr(Number(h_mm).toFixed(1))}`; size = `${this.singleStr(Number(w_mm).toFixed(1))}${this.singleStr(
Number(h_mm).toFixed(1)
)}`;
const bigNum = "0031131"; // 图像放大倍数 -R const bigNum = "0031131"; // 图像放大倍数 -R
...@@ -312,8 +320,18 @@ export default { ...@@ -312,8 +320,18 @@ export default {
}, },
async sendCmd(imgFileName, size, position, r) { async sendCmd(imgFileName, size, position, r) {
const whitePrint = [1, 2].includes(this.printSetting.byInk) ? 1 : 0; // 白色打印 const whitePrint = [1, 2].includes(this.printSetting.byInk) ? 1 : 0; // 白色打印
let cmd = `GTXproCMD.exe print -X "${`Profile\\${imgFileName.replace(".png", "")}.xml`}" -I "${"Input\\" + imgFileName}" -A "Output\\${imgFileName.replace(".png", "")}.arxp" -S ${size} -L ${position} -D ${r} -W ${whitePrint}`; let cmd = `GTXproCMD.exe print -X "${`Profile\\${imgFileName.replace(
let print_cmd = `GTXproCMD.exe send -A "Output\\${imgFileName.replace(".png", "")}.arxp" -P "${this.printer}`; ".png",
""
)}.xml`}" -I "${"Input\\" +
imgFileName}" -A "Output\\${imgFileName.replace(
".png",
""
)}.arxp" -S ${size} -L ${position} -D ${r} -W ${whitePrint}`;
let print_cmd = `GTXproCMD.exe send -A "Output\\${imgFileName.replace(
".png",
""
)}.arxp" -P "${this.printer}`;
let data = { let data = {
...this.printSetting, ...this.printSetting,
...{ ...{
...@@ -346,39 +364,87 @@ export default { ...@@ -346,39 +364,87 @@ export default {
<template> <template>
<div class="print-div"> <div class="print-div">
<el-form label-width="170px" label-position="left" size="mini" :model="printSetting"> <el-form
label-width="170px"
label-position="left"
size="mini"
:model="printSetting"
>
<el-form-item label-width="55px" label="打印机"> <el-form-item label-width="55px" label="打印机">
<div class="flex-row"> <div class="flex-row">
<el-select v-model="printer" clearable> <el-select v-model="printer" clearable>
<el-option v-for="(it,i) in printerList" :key="i" :label="it.name" :value="it.name"></el-option> <el-option
v-for="(it, i) in printerList"
:key="i"
:label="it.name"
:value="it.name"
></el-option>
</el-select> </el-select>
<el-button title="刷新" @click="getPrinter" style="margin-left: 10px" icon="el-icon-refresh"></el-button> <el-button
title="刷新"
@click="getPrinter"
style="margin-left: 10px"
icon="el-icon-refresh"
></el-button>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label-width="50px" label="预设"> <el-form-item label-width="50px" label="预设">
<div class="flex-row"> <div class="flex-row">
<el-select @change="printSettingChange" filterable v-model="printSettingVal" clearable> <el-select
<el-option v-for="(it,i) in printSettingList" :key="i" :value="i" :label="it.label"></el-option> @change="printSettingChange"
filterable
v-model="printSettingVal"
clearable
>
<el-option
v-for="(it, i) in printSettingList"
:key="i"
:value="i"
:label="it.label"
></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"
v-model="showPopover" v-model="showPopover"
trigger="manual"> trigger="manual"
<el-button style="margin-right: 10px" @click="openPopover" slot="reference" type="primary">保存预设 >
<el-button
style="margin-right: 10px"
@click="openPopover"
slot="reference"
type="primary"
>保存预设
</el-button> </el-button>
<div class="save-setting"> <div class="save-setting">
<el-input size="large" maxlength="10" v-model="settingName" placeholder="预设名称："></el-input> <el-input
size="large"
maxlength="10"
v-model="settingName"
placeholder="预设名称："
></el-input>
<div class="save-footer"> <div class="save-footer">
<el-button size="medium" @click="showPopover=false">取消</el-button> <el-button size="medium" @click="showPopover = false"
<el-button @click="saveSetting" :disabled="settingName===''" size="medium" type="primary">保存 >取消</el-button
>
<el-button
@click="saveSetting"
:disabled="settingName === ''"
size="medium"
type="primary"
>保存
</el-button> </el-button>
</div> </div>
</div> </div>
</el-popover> </el-popover>
<el-button :disabled="printSettingVal===0" @click="delSetting" type="danger">删除</el-button> <el-button
:disabled="printSettingVal === 0"
@click="delSetting"
type="danger"
>删除</el-button
>
</div> </div>
</div> </div>
</el-form-item> </el-form-item>
...@@ -392,7 +458,12 @@ export default { ...@@ -392,7 +458,12 @@ export default {
</template> </template>
<el-form-item label="油墨选择"> <el-form-item label="油墨选择">
<el-select v-model="printSetting.byInk" clearable> <el-select v-model="printSetting.byInk" clearable>
<el-option :label="it.label" :value="i" :key="i" v-for="(it,i) in printInkList"></el-option> <el-option
:label="it.label"
:value="i"
:key="i"
v-for="(it, i) in printInkList"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-tooltip> </el-tooltip>
...@@ -400,7 +471,7 @@ export default { ...@@ -400,7 +471,7 @@ export default {
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['bEcoMode'] || ''"></div> <div v-html="fieldDescription['bEcoMode'] || ''"></div>
</template> </template>
<el-form-item v-if="printSetting.byInk===2" label="模式"> <el-form-item v-if="printSetting.byInk === 2" label="模式">
<el-select v-model="printSetting.bEcoMode" clearable> <el-select v-model="printSetting.bEcoMode" clearable>
<el-option label="通常" :value="false"></el-option> <el-option label="通常" :value="false"></el-option>
<el-option label="白色油墨削减" :value="true"></el-option> <el-option label="白色油墨削减" :value="true"></el-option>
...@@ -412,9 +483,8 @@ export default { ...@@ -412,9 +483,8 @@ export default {
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['bMaterialBlack'] || ''"></div> <div v-html="fieldDescription['bMaterialBlack'] || ''"></div>
</template> </template>
<div v-if="printSetting.byInk===2"> <div v-if="printSetting.byInk === 2">
<el-form-item <el-form-item label="利用底材的黑色">
label="利用底材的黑色">
<el-switch v-model="printSetting.bMaterialBlack"></el-switch> <el-switch v-model="printSetting.bMaterialBlack"></el-switch>
</el-form-item> </el-form-item>
</div> </div>
...@@ -424,18 +494,17 @@ export default { ...@@ -424,18 +494,17 @@ export default {
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['bMultiple'] || ''"></div> <div v-html="fieldDescription['bMultiple'] || ''"></div>
</template> </template>
<div v-if="printSetting.byInk!==1" <div v-if="printSetting.byInk !== 1">
> <el-form-item label="彩色的复合路径打印">
<el-form-item
label="彩色的复合路径打印">
<el-switch v-model="printSetting.bMultiple"></el-switch> <el-switch v-model="printSetting.bMultiple"></el-switch>
</el-form-item> </el-form-item>
</div> </div>
</el-tooltip> </el-tooltip>
</div> </div>
<div class="left-block-item" v-if="[0,3].includes(printSetting.byInk)"> <div
class="left-block-item"
v-if="[0, 3].includes(printSetting.byInk)"
>
<b class="setting-title">彩色油墨设置</b> <b class="setting-title">彩色油墨设置</b>
<el-tooltip placement="left" popper-class="my-popper"> <el-tooltip placement="left" popper-class="my-popper">
<template slot="content"> <template slot="content">
...@@ -444,7 +513,12 @@ export default { ...@@ -444,7 +513,12 @@ export default {
<div> <div>
<el-form-item label="油墨量"> <el-form-item label="油墨量">
<div class="flex-row"> <div class="flex-row">
<el-slider :step="1" :min="1" :max="10" v-model="printSetting.byInkVolume"></el-slider> <el-slider
:step="1"
:min="1"
:max="10"
v-model="printSetting.byInkVolume"
></el-slider>
<span>{{ printSetting.byInkVolume }}</span> <span>{{ printSetting.byInkVolume }}</span>
</div> </div>
</el-form-item> </el-form-item>
...@@ -457,15 +531,22 @@ export default { ...@@ -457,15 +531,22 @@ export default {
<div> <div>
<el-form-item label="2次打印"> <el-form-item label="2次打印">
<div class="flex-row"> <div class="flex-row">
<el-slider :step="1" :min="0" :max="3" v-model="printSetting.byDoublePrint"></el-slider> <el-slider
:step="1"
:min="0"
:max="3"
v-model="printSetting.byDoublePrint"
></el-slider>
<span>{{ printSetting.byDoublePrint }}</span> <span>{{ printSetting.byDoublePrint }}</span>
</div> </div>
</el-form-item> </el-form-item>
</div> </div>
</el-tooltip> </el-tooltip>
</div> </div>
<div class="left-block-item" v-if="[1,2].includes(printSetting.byInk)"> <div
class="left-block-item"
v-if="[1, 2].includes(printSetting.byInk)"
>
<b class="setting-title">白色油墨设置</b> <b class="setting-title">白色油墨设置</b>
<el-tooltip placement="left" popper-class="my-popper"> <el-tooltip placement="left" popper-class="my-popper">
<template slot="content"> <template slot="content">
...@@ -474,7 +555,12 @@ export default { ...@@ -474,7 +555,12 @@ export default {
<div> <div>
<el-form-item label="高光"> <el-form-item label="高光">
<div class="flex-row"> <div class="flex-row">
<el-slider :step="1" :min="1" :max="9" v-model="printSetting.byHighlight"></el-slider> <el-slider
:step="1"
:min="1"
:max="9"
v-model="printSetting.byHighlight"
></el-slider>
<span>{{ printSetting.byHighlight }}</span> <span>{{ printSetting.byHighlight }}</span>
</div> </div>
</el-form-item> </el-form-item>
...@@ -487,7 +573,12 @@ export default { ...@@ -487,7 +573,12 @@ export default {
<div> <div>
<el-form-item label="遮光"> <el-form-item label="遮光">
<div class="flex-row"> <div class="flex-row">
<el-slider :step="1" :min="1" :max="5" v-model="printSetting.byMask"></el-slider> <el-slider
:step="1"
:min="1"
:max="5"
v-model="printSetting.byMask"
></el-slider>
<span>{{ printSetting.byMask }}</span> <span>{{ printSetting.byMask }}</span>
</div> </div>
</el-form-item> </el-form-item>
...@@ -499,8 +590,7 @@ export default { ...@@ -499,8 +590,7 @@ export default {
<div v-html="fieldDescription['bFastMode'] || ''"></div> <div v-html="fieldDescription['bFastMode'] || ''"></div>
</template> </template>
<div v-if="[2].includes(printSetting.byInk)"> <div v-if="[2].includes(printSetting.byInk)">
<el-form-item <el-form-item label="白色高速打印">
label="白色高速打印">
<el-switch v-model="printSetting.bFastMode"></el-switch> <el-switch v-model="printSetting.bFastMode"></el-switch>
</el-form-item> </el-form-item>
</div> </div>
...@@ -510,8 +600,7 @@ export default { ...@@ -510,8 +600,7 @@ export default {
<div v-html="fieldDescription['bDivide'] || ''"></div> <div v-html="fieldDescription['bDivide'] || ''"></div>
</template> </template>
<div> <div>
<el-form-item <el-form-item label="白色分次打印">
label="白色分次打印">
<el-switch v-model="printSetting.bDivide"></el-switch> <el-switch v-model="printSetting.bDivide"></el-switch>
</el-form-item> </el-form-item>
</div> </div>
...@@ -520,10 +609,8 @@ export default { ...@@ -520,10 +609,8 @@ export default {
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['bPause'] || ''"></div> <div v-html="fieldDescription['bPause'] || ''"></div>
</template> </template>
<div v-if="[2].includes(printSetting.byInk)" <div v-if="[2].includes(printSetting.byInk)">
> <el-form-item label="白色/彩色个别打印">
<el-form-item
label="白色/彩色个别打印">
<el-switch v-model="printSetting.bPause"></el-switch> <el-switch v-model="printSetting.bPause"></el-switch>
</el-form-item> </el-form-item>
</div> </div>
...@@ -542,12 +629,15 @@ export default { ...@@ -542,12 +629,15 @@ export default {
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['byChoke'] || ''"></div> <div v-html="fieldDescription['byChoke'] || ''"></div>
</template> </template>
<div v-if="[2].includes(printSetting.byInk)" <div v-if="[2].includes(printSetting.byInk)">
> <el-form-item label="白色油墨的削减范围">
<el-form-item
label="白色油墨的削减范围">
<div class="flex-row"> <div class="flex-row">
<el-slider :step="1" :min="0" :max="10" v-model="printSetting.byChoke"></el-slider> <el-slider
:step="1"
:min="0"
:max="10"
v-model="printSetting.byChoke"
></el-slider>
<span>{{ printSetting.byChoke }}</span> <span>{{ printSetting.byChoke }}</span>
</div> </div>
</el-form-item> </el-form-item>
...@@ -557,25 +647,26 @@ export default { ...@@ -557,25 +647,26 @@ export default {
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['byMinWhite'] || ''"></div> <div v-html="fieldDescription['byMinWhite'] || ''"></div>
</template> </template>
<div v-if="[2].includes(printSetting.byInk)" <div v-if="[2].includes(printSetting.byInk)">
> <el-form-item label="最小白色油墨量">
<el-form-item
label="最小白色油墨量">
<div class="flex-column"> <div class="flex-column">
<el-select v-model="printSetting.minWhiteInkType"> <el-select v-model="printSetting.minWhiteInkType">
<el-option label="通常" :value="0"></el-option> <el-option label="通常" :value="0"></el-option>
<el-option label="特殊" :value="1"></el-option> <el-option label="特殊" :value="1"></el-option>
</el-select> </el-select>
<div class="slider flex-row"> <div class="slider flex-row">
<el-slider :step="1" :min="1" :max="printSetting.minWhiteInkType===1?6:3" <el-slider
v-model="printSetting.byMinWhite"></el-slider> :step="1"
:min="1"
:max="printSetting.minWhiteInkType === 1 ? 6 : 3"
v-model="printSetting.byMinWhite"
></el-slider>
<span>{{ printSetting.byMinWhite }}</span> <span>{{ printSetting.byMinWhite }}</span>
</div> </div>
</div> </div>
</el-form-item> </el-form-item>
</div> </div>
</el-tooltip> </el-tooltip>
</div> </div>
<div v-show="detailShow" class="left-block-item"> <div v-show="detailShow" class="left-block-item">
<b class="setting-title">画质设置</b> <b class="setting-title">画质设置</b>
...@@ -586,7 +677,12 @@ export default { ...@@ -586,7 +677,12 @@ export default {
<div> <div>
<el-form-item label="饱和度"> <el-form-item label="饱和度">
<div class="flex-row"> <div class="flex-row">
<el-slider :step="1" :min="0" :max="40" v-model="printSetting.bySaturation"></el-slider> <el-slider
:step="1"
:min="0"
:max="40"
v-model="printSetting.bySaturation"
></el-slider>
<span>{{ printSetting.bySaturation }}</span> <span>{{ printSetting.bySaturation }}</span>
</div> </div>
</el-form-item> </el-form-item>
...@@ -599,7 +695,12 @@ export default { ...@@ -599,7 +695,12 @@ export default {
<div> <div>
<el-form-item label="亮度"> <el-form-item label="亮度">
<div class="flex-row"> <div class="flex-row">
<el-slider :step="1" :min="0" :max="40" v-model="printSetting.byBrightness"></el-slider> <el-slider
:step="1"
:min="0"
:max="40"
v-model="printSetting.byBrightness"
></el-slider>
<span>{{ printSetting.byBrightness }}</span> <span>{{ printSetting.byBrightness }}</span>
</div> </div>
</el-form-item> </el-form-item>
...@@ -612,7 +713,12 @@ export default { ...@@ -612,7 +713,12 @@ export default {
<div> <div>
<el-form-item label="对比度"> <el-form-item label="对比度">
<div class="flex-row"> <div class="flex-row">
<el-slider :step="1" :min="0" :max="40" v-model="printSetting.byContrast"></el-slider> <el-slider
:step="1"
:min="0"
:max="40"
v-model="printSetting.byContrast"
></el-slider>
<span>{{ printSetting.byContrast }}</span> <span>{{ printSetting.byContrast }}</span>
</div> </div>
</el-form-item> </el-form-item>
...@@ -623,27 +729,31 @@ export default { ...@@ -623,27 +729,31 @@ export default {
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['bUniPrint'] || ''"></div> <div v-html="fieldDescription['bUniPrint'] || ''"></div>
</template> </template>
<div v-if="[1].includes(printSetting.byInk)" <div v-if="[1].includes(printSetting.byInk)">
> <el-form-item label="单向打印">
<el-form-item
label="单向打印">
<el-switch v-model="printSetting.bUniPrint"></el-switch> <el-switch v-model="printSetting.bUniPrint"></el-switch>
</el-form-item> </el-form-item>
</div> </div>
</el-tooltip> </el-tooltip>
</div> </div>
<div v-if="detailShow && ![1].includes(printSetting.byInk)" class="left-block-item"> <div
v-if="detailShow && ![1].includes(printSetting.byInk)"
class="left-block-item"
>
<b class="setting-title">彩色平衡</b> <b class="setting-title">彩色平衡</b>
<el-tooltip placement="left" popper-class="my-popper"> <el-tooltip placement="left" popper-class="my-popper">
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['iCyanBalance'] || ''"></div> <div v-html="fieldDescription['iCyanBalance'] || ''"></div>
</template> </template>
<div v-if=" ![3].includes(printSetting.byInk)" <div v-if="![3].includes(printSetting.byInk)">
>
<el-form-item label="青色"> <el-form-item label="青色">
<div class="flex-row"> <div class="flex-row">
<el-slider :step="1" :min="-5" :max="5" v-model="printSetting.iCyanBalance"></el-slider> <el-slider
:step="1"
:min="-5"
:max="5"
v-model="printSetting.iCyanBalance"
></el-slider>
<span>{{ printSetting.iCyanBalance }}</span> <span>{{ printSetting.iCyanBalance }}</span>
</div> </div>
</el-form-item> </el-form-item>
...@@ -653,11 +763,15 @@ export default { ...@@ -653,11 +763,15 @@ export default {
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['iMagentaBalance'] || ''"></div> <div v-html="fieldDescription['iMagentaBalance'] || ''"></div>
</template> </template>
<div v-if=" ![3].includes(printSetting.byInk)" <div v-if="![3].includes(printSetting.byInk)">
>
<el-form-item label="红色"> <el-form-item label="红色">
<div class="flex-row"> <div class="flex-row">
<el-slider :step="1" :min="-5" :max="5" v-model="printSetting.iMagentaBalance"></el-slider> <el-slider
:step="1"
:min="-5"
:max="5"
v-model="printSetting.iMagentaBalance"
></el-slider>
<span>{{ printSetting.iMagentaBalance }}</span> <span>{{ printSetting.iMagentaBalance }}</span>
</div> </div>
</el-form-item> </el-form-item>
...@@ -667,11 +781,15 @@ export default { ...@@ -667,11 +781,15 @@ export default {
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['iYellowBalance'] || ''"></div> <div v-html="fieldDescription['iYellowBalance'] || ''"></div>
</template> </template>
<div v-if=" ![3].includes(printSetting.byInk)" <div v-if="![3].includes(printSetting.byInk)">
>
<el-form-item label="黄色"> <el-form-item label="黄色">
<div class="flex-row"> <div class="flex-row">
<el-slider :step="1" :min="-5" :max="5" v-model="printSetting.iYellowBalance"></el-slider> <el-slider
:step="1"
:min="-5"
:max="5"
v-model="printSetting.iYellowBalance"
></el-slider>
<span>{{ printSetting.iYellowBalance }}</span> <span>{{ printSetting.iYellowBalance }}</span>
</div> </div>
</el-form-item> </el-form-item>
...@@ -684,7 +802,12 @@ export default { ...@@ -684,7 +802,12 @@ export default {
<div> <div>
<el-form-item label="黑色"> <el-form-item label="黑色">
<div class="flex-row"> <div class="flex-row">
<el-slider :step="1" :min="-5" :max="5" v-model="printSetting.iBlackBalance"></el-slider> <el-slider
:step="1"
:min="-5"
:max="5"
v-model="printSetting.iBlackBalance"
></el-slider>
<span>{{ printSetting.iBlackBalance }}</span> <span>{{ printSetting.iBlackBalance }}</span>
</div> </div>
</el-form-item> </el-form-item>
...@@ -695,20 +818,16 @@ export default { ...@@ -695,20 +818,16 @@ export default {
<div v-html="fieldDescription['bUniPrint'] || ''"></div> <div v-html="fieldDescription['bUniPrint'] || ''"></div>
</template> </template>
<div> <div>
<el-form-item <el-form-item label="单向打印">
label="单向打印">
<el-switch v-model="printSetting.bUniPrint"></el-switch> <el-switch v-model="printSetting.bUniPrint"></el-switch>
</el-form-item> </el-form-item>
</div> </div>
</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>
</el-form> </el-form>
<div class="bottom-info flex-row"> <div class="bottom-info flex-row">
...@@ -731,42 +850,42 @@ export default { ...@@ -731,42 +850,42 @@ export default {
<b>{{ inkNum }}%</b> <b>{{ inkNum }}%</b>
</div> </div>
</el-tooltip> </el-tooltip>
</div> </div>
<div class="btn"> <div class="btn">
<el-input size="small" style="width: 100px;" oninput="value=value.replace(/[^\-?\d]/g,'')" <el-input
v-model="printSetting.printNum"></el-input> size="small"
style="width: 100px;"
oninput="value=value.replace(/[^\-?\d]/g,'')"
v-model="printSetting.printNum"
></el-input>
<span>张</span> <span>张</span>
</div> </div>
</div> </div>
<el-button @click="getPrintCmd" type="primary" style="width: 100%;height: 50px">打印</el-button> <el-button
@click="getPrintCmd"
type="primary"
style="width: 100%;height: 50px"
>打印</el-button
>
</div> </div>
</template> </template>
<style scoped> <style lang="less" scoped>
.flex-row { .flex-row {
display: flex; display: flex;
align-items: center; align-items: center;
}
.flex-row {
display: flex; display: flex;
align-items: center; align-items: center;
} span {
.flex-row span {
margin-left: 10px; margin-left: 10px;
} }
.el-slider {
.flex-row .el-slider {
flex: 1; flex: 1;
flex-shrink: 0; flex-shrink: 0;
margin: 0 10px; margin: 0 10px;
}
} }
.el-form { .el-form {
height: 84%; height: 84%;
display: flex; display: flex;
...@@ -774,51 +893,45 @@ export default { ...@@ -774,51 +893,45 @@ export default {
padding-top: 15px; padding-top: 15px;
border-top: 1px solid #ececec; border-top: 1px solid #ececec;
} }
.detail-setting { .detail-setting {
border-top: 2px solid transparent; border-top: 2px solid transparent;
display: flex; display: flex;
background-color: #ececec; background-color: #ececec;
align-items: flex-start; align-items: flex-start;
flex: 1; flex: 1;
flex-shrink: 0; flex-shrink: 0;
overflow: auto; overflow: auto;
} }
.left-block-item {
.left-block-item .setting-title { .setting-title {
font-weight: bold; font-weight: bold;
font-size: 20px; font-size: 20px;
color: #409EFF; color: #409eff;
position: relative; position: relative;
margin-bottom: 30px; margin-bottom: 30px;
margin-top: 30px; margin-top: 30px;
display: inline-block; display: inline-block;
left: -15px; left: -15px;
}
} }
.setting-right { .setting-right {
box-sizing: border-box; box-sizing: border-box;
padding: 20px; padding: 20px;
width: 50%; width: 50%;
height: 100%; height: 100%;
color: #333; color: #333;
} }
.setting-left { .setting-left {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 15px 30px; padding: 15px 30px;
background-color: white; background-color: white;
} }
.fixed-top { .fixed-top {
position: absolute; position: absolute;
word-break: break-all; word-break: break-all;
max-width: 44%; max-width: 44%;
} }
.bottom-info { .bottom-info {
padding: 15px 0; padding: 15px 0;
margin-top: 20px; margin-top: 20px;
...@@ -826,30 +939,25 @@ export default { ...@@ -826,30 +939,25 @@ export default {
justify-content: space-between; justify-content: space-between;
border-top: 1px solid #ececec; border-top: 1px solid #ececec;
} }
.info { .info {
width: 62%; width: 62%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.info-item {
.info-item span { span {
margin-right: 5px; margin-right: 5px;
}
} }
.save-setting { .save-setting {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.save-footer { .save-footer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 15px; margin-top: 15px;
} }
.print-div { .print-div {
background: #ececec; background: #ececec;
border-left: 1px solid gray; border-left: 1px solid gray;
......
src/views/design/main/imgSetting.vue
...@@ -249,30 +249,25 @@ export default { ...@@ -249,30 +249,25 @@ export default {
</template> </template>
<style scoped> <style lang="less" scoped>
.img-form { .img-form {
padding: 10px; padding: 10px;
} }
::v-deep {
::v-deep .el-drawer__header { .el-drawer__header {
border-bottom: 1px solid #ececec; border-bottom: 1px solid #ececec;
padding-bottom: 10px; padding-bottom: 10px;
margin-bottom: 20px; margin-bottom: 20px;
}
} }
.form-content { .form-content {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.set-value { .set-value {
height: 100%; height: 100%;
margin-left: 6px; margin-left: 6px;
i {
}
.set-value i {
width: 20px; width: 20px;
height: 12px; height: 12px;
display: block; display: block;
...@@ -280,15 +275,28 @@ export default { ...@@ -280,15 +275,28 @@ export default {
line-height: 12px; line-height: 12px;
cursor: pointer; cursor: pointer;
border: 1px solid transparent; border: 1px solid transparent;
} &:hover {
.set-value i:hover {
border-color: #ececec; border-color: #ececec;
}
}
} }
.drawer {
.drawer .title { width: 300px;
bottom: 0;
top: 50px;
padding: 10px;
z-index: 99;
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);
left: 0;
position: fixed;
border-right: 1px solid #ececec;
height: calc(100vh - 50px);
//animation: ltr-drawer-in .3s 1ms;
.title {
padding-bottom: 10px; padding-bottom: 10px;
border-bottom: 1px solid #ececec; border-bottom: 1px solid #ececec;
}
} }
@keyframes ltr-drawer-in { @keyframes ltr-drawer-in {
...@@ -318,18 +326,4 @@ export default { ...@@ -318,18 +326,4 @@ export default {
} }
} }
.drawer {
width: 300px;
bottom: 0;
top: 50px;
padding: 10px;
z-index: 99;
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);
left: 0;
position: fixed;
border-right: 1px solid #ececec;
height: calc(100vh - 50px);
//animation: ltr-drawer-in .3s 1ms;
}
</style> </style>
\ No newline at end of file
src/views/design/main/index.vue
...@@ -672,64 +672,57 @@ export default { ...@@ -672,64 +672,57 @@ export default {
</div> </div>
</template> </template>
<style scoped> <style lang="less" scoped>
.page-main { .page-main {
flex: 1; flex: 1;
flex-shrink: 0; flex-shrink: 0;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
} }
.main-bg { .main-bg {
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
#line { #line {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
} }
.grid { .grid {
border: 1px solid gray; border: 1px solid gray;
overflow: hidden; overflow: hidden;
.grid-row {
.grid-col {
display: inline-block;
border: 1px solid gray;
border-right: none;
border-bottom: none;
}
}
} }
.grid-row { .grid-row {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
height: 10px; height: 10px;
line-height: 10px; line-height: 10px;
white-space: nowrap; white-space: nowrap;
} &:nth-of-type(1) {
.grid-col {
.grid-row:nth-of-type(1) .grid-col {
border-top: none !important; border-top: none !important;
} }
}
.grid-row:nth-last-of-type(1) .grid-col { &:nth-last-of-type(1) {
border-bottom: none !important;; .grid-col {
} border-bottom: none !important;
}
.grid-row .grid-col:nth-of-type(1) { }
.grid-col {
&:nth-of-type(1) {
border-left: none !important; border-left: none !important;
}
} }
.grid .grid-row .grid-col {
display: inline-block;
border: 1px solid gray;
border-right: none;
border-bottom: none;
} }
#img { #img {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
...@@ -739,8 +732,12 @@ export default { ...@@ -739,8 +732,12 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: auto; width: auto;
img {
pointer-events: none;
width: auto;
height: 100%;
}
} }
.container { .container {
display: flex; display: flex;
width: 100%; width: 100%;
...@@ -749,7 +746,6 @@ export default { ...@@ -749,7 +746,6 @@ export default {
align-items: center; align-items: center;
position: relative; position: relative;
} }
.sucaitu { .sucaitu {
position: absolute; position: absolute;
z-index: 0; z-index: 0;
...@@ -758,20 +754,11 @@ export default { ...@@ -758,20 +754,11 @@ export default {
//justify-content: center; //justify-content: center;
//align-items: center; //align-items: center;
height: 100%; height: 100%;
img {
}
.sucaitu img {
width: 100%; width: 100%;
height: 100%; height: 100%;
}
} .close {
.select-img {
border-color: #409eff;
}
.sucaitu .close {
position: absolute; position: absolute;
top: -11px; top: -11px;
right: -12px; right: -12px;
...@@ -785,65 +772,40 @@ export default { ...@@ -785,65 +772,40 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.img {
.sucaitu .img {
height: fit-content; height: fit-content;
width: 100%; width: 100%;
height: 100%; height: 100%;
cursor: move; cursor: move;
border: 1px dashed transparent; border: 1px dashed transparent;
}
} }
.select-img {
#img img { border-color: #409eff;
pointer-events: none; width: 120px;
width: auto; z-index: 5;
height: 100%; overflow: auto;
background-color: gray;
height: calc(100% - 72px);
padding: 10px;
position: fixed;
box-sizing: border-box;
left: 0;
bottom: 0;
border-right: 1px solid #ececec;
} }
img { img {
-webkit-user-drag: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; user-select: none;
}
img {
-webkit-user-drag: none;
-moz-user-drag: none;
-ms-user-drag: none;
user-drag: none; user-drag: none;
} }
::v-deep .active, .active { ::v-deep .active, .active {
border-color: #66b1ff !important; border-color: #66b1ff !important;
} }
.select-img-index { .select-img-index {
box-sizing: border-box; box-sizing: border-box;
border-color: #409EFF !important; border-color: #409eff !important;
} }
.img-item span {
margin: 5px 0;
color: white;
}
.img-item { .img-item {
padding: 5px; padding: 5px;
display: flex; display: flex;
...@@ -853,25 +815,15 @@ img { ...@@ -853,25 +815,15 @@ img {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
span {
margin: 5px 0;
color: white;
}
} }
.select-img {
width: 120px;
z-index: 5;
overflow: auto;
background-color: gray;
height: calc(100% - 72px);
padding: 10px;
position: fixed;
box-sizing: border-box;
left: 0;
bottom: 0;
border-right: 1px solid #ececec;
}
.sucaitu-img { .sucaitu-img {
position: relative; position: relative;
} }
</style> </style>
<style> <style>
.el-upload { .el-upload {
......
src/views/login/index.vue
...@@ -238,7 +238,7 @@ export default { ...@@ -238,7 +238,7 @@ export default {
</div> </div>
</template> </template>
<style scoped> <style lang="less" scoped>
.check { .check {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
......
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