Skip to content

E
electron-printer
Commit 62524fd1 by linjinhong
Options

修改效果图和素材图样式

parent 4ebb7b1e
Showing with 221 additions and 40 deletions
src/components/PicScrollbarBox.vue 0 → 100644
<template>
<div>
<div style="display: flex;justify-content: space-between;">
<div class="title">
{{ boxTitle }}
</div>
<slot name="titleRight"></slot>
<!-- <el-button
type="primary"
size="small"
style="margin: 10px;"
@click="cutImgFn"
>裁切</el-button
> -->
</div>
<el-scrollbar class="scrollbarBox">
<slot v-if="$slots.mainContent" name="mainContent"></slot>
<!-- <el-checkbox-group
v-if="imglist.length"
v-model="checkList"
style="display: flex;flex-wrap:nowrap"
>
<el-checkbox
v-for="img in imglist"
:key="img.designId"
:class="{
imgchecked: checkList.includes(img),
}"
:label="img"
>
<div class="img-item" @click.stop.prevent="selectImg(img)">
<img style="width: 140px" :src="img.productionFile" />
<span>{{ img.designId }}</span>
</div>
</el-checkbox></el-checkbox-group
> -->
<el-empty v-else :description="emptyTitle"></el-empty>
</el-scrollbar>
</div>
</template>
<script>
export default {
name: "PicScrollbarBox",
props: {
boxTitle: {
type: String,
default: null,
},
emptyTitle: {
type: String,
default: null,
},
imglist: {
type: String,
default: null,
},
},
data() {
return {};
},
methods: {},
mounted() {},
};
</script>
<style lang="less" scoped>
.title {
padding: 10px;
font-size: 20px;
font-weight: 700;
}
.el-scrollbar {
overflow-y: hidden;
:v-deep.el-scrollbar__wrap {
margin-bottom: 0 !important;
}
}
.el-empty {
padding-top: 0;
padding-bottom: 25px;
}
</style>
src/views/design/head/index.vue
......@@ -296,8 +296,8 @@ export default {
);
this.detail = findByPodProductionNo.data;
let imageResList = [];
let designImagesCanvasJsonList =
'[{"options":{"rect_info":{"rectWidth":278,"rectHeight":311,"leftDistance":164,"topDistance":134},"title":"正","json":{"version":"5.4.0","objects":[{"type":"rect","version":"5.4.0","originX":"left","originY":"top","left":239.6414188934889,"top":100.125,"width":536.7171622130222,"height":603.75,"fill":"rgba(255,255,255,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"rx":0,"ry":0,"mediaType":"bg","objectCaching":true},{"type":"image","version":"5.4.0","originX":"left","originY":"top","left":386.625,"top":236.62500000000006,"width":319,"height":345,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":0.464984939759036,"scaleY":0.464984939759036,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"cropX":0,"cropY":0,"origWidth":319,"origHeight":345,"originImgUrl":"https://jomalls.oss-cn-hangzhou.aliyuncs.com/local/design/2504/17/wdtq66-hzu9vgr-m9kyp1uk.png","mediaType":"material","filters":[],"src":"https://jomalls.oss-cn-hangzhou.aliyuncs.com/local/design/2504/17/wdtq66-hzu9vgr-m9kyp1uk.png","objectCaching":true,"crossOrigin":"anonymous"},{"type":"image","version":"5.4.0","originX":"left","originY":"top","left":368.9238341968912,"top":378.725,"width":2584,"height":1544,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":0.1080310880829015,"scaleY":0.1080310880829015,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"cropX":0,"cropY":0,"origWidth":2584,"origHeight":1544,"originImgUrl":"https://jomalls-test.oss-cn-hangzhou.aliyuncs.com/local/design/2503/06/v3b1yw-m4y92pr-m7wt14fi.png","mediaType":"material","filters":[],"src":"https://jomalls-test.oss-cn-hangzhou.aliyuncs.com/local/design/2503/06/v3b1yw-m4y92pr-m7wt14fi.png","objectCaching":true,"crossOrigin":"anonymous"}],"id":"canvas_6378","width":1017,"height":805,"oldCutWidth":536.7171622130222,"oldCutHeight":603.75,"origWidth":2362,"origHeight":2657,"objectCaching":false},"objects":[{"type":"rect","version":"5.4.0","originX":"left","originY":"top","left":239.6414188934889,"top":100.125,"width":536.7171622130222,"height":603.75,"fill":"rgba(255,255,255,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"rx":0,"ry":0,"mediaType":"bg","objectCaching":true},{"type":"image","version":"5.4.0","originX":"left","originY":"top","left":386.625,"top":236.62500000000006,"width":319,"height":345,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":0.464984939759036,"scaleY":0.464984939759036,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"cropX":0,"cropY":0,"origWidth":319,"origHeight":345,"originImgUrl":"https://jomalls.oss-cn-hangzhou.aliyuncs.com/local/design/2504/17/wdtq66-hzu9vgr-m9kyp1uk.png","mediaType":"material","filters":[],"src":"https://jomalls.oss-cn-hangzhou.aliyuncs.com/local/design/2504/17/wdtq66-hzu9vgr-m9kyp1uk.png","objectCaching":true,"crossOrigin":"anonymous"},{"type":"image","version":"5.4.0","originX":"left","originY":"top","left":368.9238341968912,"top":378.725,"width":2584,"height":1544,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":0.1080310880829015,"scaleY":0.1080310880829015,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"cropX":0,"cropY":0,"origWidth":2584,"origHeight":1544,"originImgUrl":"https://jomalls-test.oss-cn-hangzhou.aliyuncs.com/local/design/2503/06/v3b1yw-m4y92pr-m7wt14fi.png","mediaType":"material","filters":[],"src":"https://jomalls-test.oss-cn-hangzhou.aliyuncs.com/local/design/2503/06/v3b1yw-m4y92pr-m7wt14fi.png","objectCaching":true,"crossOrigin":"anonymous"}]},"canvasWidth":536.7171622130222,"canvasHeight":603.75,"list":[{"rate":1.930637274147562,"drawImage":[30.88054319999026,3.8612745482952335,286.371804860521,309.71245353253846],"y":2.000000000000057,"x":15.995000000000005,"src":"https://jomalls.oss-cn-hangzhou.aliyuncs.com/local/design/2504/17/wdtq66-hzu9vgr-m9kyp1uk.png","img_width":148.33019578313247,"img_height":160.41980421686742},{"rate":1.930637274147562,"drawImage":[-3.2939872953577103,278.2048312046637,538.941896564164,322.0302973278132],"y":144.10000000000002,"x":-1.7061658031087745,"src":"https://jomalls-test.oss-cn-hangzhou.aliyuncs.com/local/design/2503/06/v3b1yw-m4y92pr-m7wt14fi.png","img_width":279.1523316062175,"img_height":166.79999999999993}]},{"options":{"rect_info":{"rectWidth":278,"rectHeight":311,"leftDistance":164,"topDistance":134},"title":"反","json":{"version":"5.4.0","objects":[{"type":"rect","version":"5.4.0","originX":"left","originY":"top","left":239.6414188934889,"top":100.125,"width":536.7171622130222,"height":603.75,"fill":"rgba(255,255,255,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"rx":0,"ry":0,"mediaType":"bg","objectCaching":true},{"type":"image","version":"5.4.0","originX":"left","originY":"top","left":370.625,"top":292.82500000000005,"width":612,"height":408,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":0.4466176470588235,"scaleY":0.4466176470588235,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"cropX":0,"cropY":0,"origWidth":612,"origHeight":408,"originImgUrl":"https://jomalls.oss-cn-hangzhou.aliyuncs.com/local/design/2504/18/1x7lat8-3xppur-m9mk4w2u.jpg","mediaType":"material","filters":[],"src":"https://jomalls.oss-cn-hangzhou.aliyuncs.com/local/design/2504/18/1x7lat8-3xppur-m9mk4w2u.jpg","objectCaching":true,"crossOrigin":"anonymous"}],"id":"canvas_6379","width":1017,"height":805,"oldCutWidth":536.7171622130222,"oldCutHeight":603.75,"origWidth":2362,"origHeight":2657,"objectCaching":false},"objects":[{"type":"rect","version":"5.4.0","originX":"left","originY":"top","left":239.6414188934889,"top":100.125,"width":536.7171622130222,"height":603.75,"fill":"rgba(255,255,255,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"rx":0,"ry":0,"mediaType":"bg","objectCaching":true},{"type":"image","version":"5.4.0","originX":"left","originY":"top","left":370.625,"top":292.82500000000005,"width":612,"height":408,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":0.4466176470588235,"scaleY":0.4466176470588235,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"cropX":0,"cropY":0,"origWidth":612,"origHeight":408,"originImgUrl":"https://jomalls.oss-cn-hangzhou.aliyuncs.com/local/design/2504/18/1x7lat8-3xppur-m9mk4w2u.jpg","mediaType":"material","filters":[],"src":"https://jomalls.oss-cn-hangzhou.aliyuncs.com/local/design/2504/18/1x7lat8-3xppur-m9mk4w2u.jpg","objectCaching":true,"crossOrigin":"anonymous"}]},"canvasWidth":536.7171622130222,"canvasHeight":603.75,"list":[{"rate":1.930637274147562,"drawImage":[-0.00965318637072903,112.3630893553882,527.7010861427531,351.80072409516873],"y":58.200000000000045,"x":-0.0049999999999954525,"src":"https://jomalls.oss-cn-hangzhou.aliyuncs.com/local/design/2504/18/1x7lat8-3xppur-m9mk4w2u.jpg","img_width":273.33,"img_height":182.22}]}]';
let designImagesCanvasJsonList = null;
// '[{"options":{"rect_info":{"rectWidth":278,"rectHeight":311,"leftDistance":164,"topDistance":134},"title":"正","json":{"version":"5.4.0","objects":[{"type":"rect","version":"5.4.0","originX":"left","originY":"top","left":239.6414188934889,"top":100.125,"width":536.7171622130222,"height":603.75,"fill":"rgba(255,255,255,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"rx":0,"ry":0,"mediaType":"bg","objectCaching":true},{"type":"image","version":"5.4.0","originX":"left","originY":"top","left":386.625,"top":236.62500000000006,"width":319,"height":345,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":0.464984939759036,"scaleY":0.464984939759036,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"cropX":0,"cropY":0,"origWidth":319,"origHeight":345,"originImgUrl":"https://jomalls.oss-cn-hangzhou.aliyuncs.com/local/design/2504/17/wdtq66-hzu9vgr-m9kyp1uk.png","mediaType":"material","filters":[],"src":"https://jomalls.oss-cn-hangzhou.aliyuncs.com/local/design/2504/17/wdtq66-hzu9vgr-m9kyp1uk.png","objectCaching":true,"crossOrigin":"anonymous"},{"type":"image","version":"5.4.0","originX":"left","originY":"top","left":368.9238341968912,"top":378.725,"width":2584,"height":1544,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":0.1080310880829015,"scaleY":0.1080310880829015,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"cropX":0,"cropY":0,"origWidth":2584,"origHeight":1544,"originImgUrl":"https://jomalls-test.oss-cn-hangzhou.aliyuncs.com/local/design/2503/06/v3b1yw-m4y92pr-m7wt14fi.png","mediaType":"material","filters":[],"src":"https://jomalls-test.oss-cn-hangzhou.aliyuncs.com/local/design/2503/06/v3b1yw-m4y92pr-m7wt14fi.png","objectCaching":true,"crossOrigin":"anonymous"}],"id":"canvas_6378","width":1017,"height":805,"oldCutWidth":536.7171622130222,"oldCutHeight":603.75,"origWidth":2362,"origHeight":2657,"objectCaching":false},"objects":[{"type":"rect","version":"5.4.0","originX":"left","originY":"top","left":239.6414188934889,"top":100.125,"width":536.7171622130222,"height":603.75,"fill":"rgba(255,255,255,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"rx":0,"ry":0,"mediaType":"bg","objectCaching":true},{"type":"image","version":"5.4.0","originX":"left","originY":"top","left":386.625,"top":236.62500000000006,"width":319,"height":345,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":0.464984939759036,"scaleY":0.464984939759036,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"cropX":0,"cropY":0,"origWidth":319,"origHeight":345,"originImgUrl":"https://jomalls.oss-cn-hangzhou.aliyuncs.com/local/design/2504/17/wdtq66-hzu9vgr-m9kyp1uk.png","mediaType":"material","filters":[],"src":"https://jomalls.oss-cn-hangzhou.aliyuncs.com/local/design/2504/17/wdtq66-hzu9vgr-m9kyp1uk.png","objectCaching":true,"crossOrigin":"anonymous"},{"type":"image","version":"5.4.0","originX":"left","originY":"top","left":368.9238341968912,"top":378.725,"width":2584,"height":1544,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":0.1080310880829015,"scaleY":0.1080310880829015,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"cropX":0,"cropY":0,"origWidth":2584,"origHeight":1544,"originImgUrl":"https://jomalls-test.oss-cn-hangzhou.aliyuncs.com/local/design/2503/06/v3b1yw-m4y92pr-m7wt14fi.png","mediaType":"material","filters":[],"src":"https://jomalls-test.oss-cn-hangzhou.aliyuncs.com/local/design/2503/06/v3b1yw-m4y92pr-m7wt14fi.png","objectCaching":true,"crossOrigin":"anonymous"}]},"canvasWidth":536.7171622130222,"canvasHeight":603.75,"list":[{"rate":1.930637274147562,"drawImage":[30.88054319999026,3.8612745482952335,286.371804860521,309.71245353253846],"y":2.000000000000057,"x":15.995000000000005,"src":"https://jomalls.oss-cn-hangzhou.aliyuncs.com/local/design/2504/17/wdtq66-hzu9vgr-m9kyp1uk.png","img_width":148.33019578313247,"img_height":160.41980421686742},{"rate":1.930637274147562,"drawImage":[-3.2939872953577103,278.2048312046637,538.941896564164,322.0302973278132],"y":144.10000000000002,"x":-1.7061658031087745,"src":"https://jomalls-test.oss-cn-hangzhou.aliyuncs.com/local/design/2503/06/v3b1yw-m4y92pr-m7wt14fi.png","img_width":279.1523316062175,"img_height":166.79999999999993}]},{"options":{"rect_info":{"rectWidth":278,"rectHeight":311,"leftDistance":164,"topDistance":134},"title":"反","json":{"version":"5.4.0","objects":[{"type":"rect","version":"5.4.0","originX":"left","originY":"top","left":239.6414188934889,"top":100.125,"width":536.7171622130222,"height":603.75,"fill":"rgba(255,255,255,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"rx":0,"ry":0,"mediaType":"bg","objectCaching":true},{"type":"image","version":"5.4.0","originX":"left","originY":"top","left":370.625,"top":292.82500000000005,"width":612,"height":408,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":0.4466176470588235,"scaleY":0.4466176470588235,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"cropX":0,"cropY":0,"origWidth":612,"origHeight":408,"originImgUrl":"https://jomalls.oss-cn-hangzhou.aliyuncs.com/local/design/2504/18/1x7lat8-3xppur-m9mk4w2u.jpg","mediaType":"material","filters":[],"src":"https://jomalls.oss-cn-hangzhou.aliyuncs.com/local/design/2504/18/1x7lat8-3xppur-m9mk4w2u.jpg","objectCaching":true,"crossOrigin":"anonymous"}],"id":"canvas_6379","width":1017,"height":805,"oldCutWidth":536.7171622130222,"oldCutHeight":603.75,"origWidth":2362,"origHeight":2657,"objectCaching":false},"objects":[{"type":"rect","version":"5.4.0","originX":"left","originY":"top","left":239.6414188934889,"top":100.125,"width":536.7171622130222,"height":603.75,"fill":"rgba(255,255,255,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"rx":0,"ry":0,"mediaType":"bg","objectCaching":true},{"type":"image","version":"5.4.0","originX":"left","originY":"top","left":370.625,"top":292.82500000000005,"width":612,"height":408,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":0.4466176470588235,"scaleY":0.4466176470588235,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"cropX":0,"cropY":0,"origWidth":612,"origHeight":408,"originImgUrl":"https://jomalls.oss-cn-hangzhou.aliyuncs.com/local/design/2504/18/1x7lat8-3xppur-m9mk4w2u.jpg","mediaType":"material","filters":[],"src":"https://jomalls.oss-cn-hangzhou.aliyuncs.com/local/design/2504/18/1x7lat8-3xppur-m9mk4w2u.jpg","objectCaching":true,"crossOrigin":"anonymous"}]},"canvasWidth":536.7171622130222,"canvasHeight":603.75,"list":[{"rate":1.930637274147562,"drawImage":[-0.00965318637072903,112.3630893553882,527.7010861427531,351.80072409516873],"y":58.200000000000045,"x":-0.0049999999999954525,"src":"https://jomalls.oss-cn-hangzhou.aliyuncs.com/local/design/2504/18/1x7lat8-3xppur-m9mk4w2u.jpg","img_width":273.33,"img_height":182.22}]}]';
if (designImagesCanvasJsonList) {
designImagesCanvasJsonList = JSON.parse(designImagesCanvasJsonList);
console.log(designImagesCanvasJsonList, "designImagesCanvasJsonList");
......
src/views/design/main/index.vue
<script>
import VueDragResizeRotate from "@minogin/vue-drag-resize-rotate";
import PicScrollbarBox from "../../../components/PicScrollbarBox.vue";
const { ipcRenderer } = require("electron");
import { grid } from "../data";
import ImgSetting from "./imgSetting.vue";
......@@ -21,6 +21,7 @@ export default {
PrintDialog,
VueDragResizeRotate,
ImgSetting,
PicScrollbarBox,
},
destroyed() {
document.removeEventListener("keyup", this.keyup);
......@@ -214,26 +215,31 @@ export default {
},
productDetail(newValue) {
this.detail = { ...newValue };
if (typeof this.detail.imageAry == "string") {
this.detail.imageAry = JSON.parse(this.detail.imageAry).filter(
(el) => el.title
);
const groupedData = this.detail.imageAry.reduce((acc, obj) => {
const titleKey = obj.title;
if (!acc[titleKey]) {
acc[titleKey] = {
title: titleKey,
viewImgList: [obj],
sourceImgList: [],
};
} else {
acc[titleKey].viewImgList.push(obj);
}
return acc;
}, {});
this.detail.imageAry = Object.values(groupedData);
console.log("imageAry", this.detail.imageAry);
}
this.$nextTick(() => {
if (typeof this.detail.imageAry == "string") {
this.detail.imageAry = JSON.parse(this.detail.imageAry).filter(
(el) => el.title
);
// const groupedData = this.detail.imageAry.reduce((acc, obj) => {
// const titleKey = obj.title;
// if (!acc[titleKey]) {
// acc[titleKey] = {
// title: titleKey,
// viewImgList: [obj],
// sourceImgList: [],
// };
// } else {
// acc[titleKey].viewImgList.push(obj);
// }
// return acc;
// }, {});
// this.detail.imageAry = [
// ...this.detail.imageAry,
// ...this.detail.imageAry,
// ];
console.log("imageAry", this.detail.imageAry);
}
});
},
changeCheckFn(value) {
console.log("check", value);
......@@ -813,6 +819,8 @@ export default {
this.selectIndex = -1;
if (value.length > 0) {
this.selectImgList = value;
console.log(816, this.selectImgList);
this.selectImgIndex = 0;
this.getBackFile(
{ files: [value[0]], size: this.detail.designImageSize || null },
......@@ -853,22 +861,13 @@ export default {
>
<template #content>
<div class="information-content">
<div
<!-- <div
style="display: flex;justify-content: space-between;flex-wrap: nowrap;"
>
<div class="title" style="flex: 1;">
素材信息
</div>
<div>
<el-button
type="primary"
size="small"
style="margin: 10px;"
@click="cutImgFn"
>裁切</el-button
>
效果图
</div>
</div>
</div> -->
<!-- <el-row class="main">
<el-col :span="6">
......@@ -941,8 +940,18 @@ export default {
</el-col>
</el-row>
</el-row> -->
<el-table border :data="detail.imageAry">
<el-table-column label="打印区域" prop="title"></el-table-column>
<!-- <el-table
style="margin: 5px;width: auto;"
border
:data="detail.imageAry"
:header-cell-style="{ 'text-align': 'center' }"
>
<el-table-column
label="打印区域"
prop="title"
align="center"
width="100px"
></el-table-column>
<el-table-column label="效果图" prop="title">
<template slot-scope="{ row }">
<img class="full-width" :src="row.url" alt="" />
......@@ -961,7 +970,92 @@ export default {
<span>{{ getComputedName(row.title) }}</span>
</template>
</el-table-column>
</el-table>
</el-table> -->
<PicScrollbarBox
boxTitle="效果图"
emptyTitle="效果图为空"
style="border-bottom: 1px solid #ececec;"
>
<template #mainContent v-if="detail.imageAry?.length">
<div style="display: flex;flex-wrap: nowrap;width: 100%;">
<div
v-for="(img, index) in detail.imageAry"
:key="index"
class="img-item"
>
<img width="200px" :src="img.url" />
</div>
</div>
</template>
</PicScrollbarBox>
<PicScrollbarBox boxTitle="素材图" emptyTitle="素材图为空">
<template #titleRight>
<el-button
type="primary"
size="small"
style="margin: 10px;"
@click="cutImgFn"
>裁切</el-button
>
</template>
<template #mainContent>
<el-checkbox-group
v-if="selectImgList.length"
v-model="checkList"
style="display: flex;flex-wrap:nowrap"
>
<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 :src="img.productionFile" style="width: 100%;" />
<span>{{ img.designId }}</span>
</div>
</el-checkbox></el-checkbox-group
>
</template>
</PicScrollbarBox>
<!-- <div>
<div style="display: flex;justify-content: space-between;">
<div class="title">
素材图
</div>
<el-button
type="primary"
size="small"
style="margin: 10px;"
@click="cutImgFn"
>裁切</el-button
>
</div>
<el-scrollbar class="scrollbarBox">
<el-checkbox-group
v-if="selectImgList.length"
v-model="checkList"
style="display: flex;flex-wrap:nowrap"
>
<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: 140px" :src="img.productionFile" />
<span>{{ img.designId }}</span>
</div>
</el-checkbox></el-checkbox-group
>
<el-empty v-else description="没有素材"></el-empty>
</el-scrollbar>
</div> -->
</div>
<div class="product-information">
<div class="title">
......@@ -1417,7 +1511,7 @@ img {
width: 100%;
color: black;
display: inline-block; /* 使 span 成为块级元素，这样可以设置宽度 */
max-width: 270px; /* 限制宽度 */
// max-width: 270px; /* 限制宽度 */
word-wrap: break-word; /* 或者使用 overflow-wrap: break-word; */
white-space: normal; /* 确保正常换行 */
text-align: center;
......@@ -1438,12 +1532,15 @@ img {
.el-checkbox-group {
height: 100%;
// border-top: 1px solid #ececec;
margin-bottom: 25px;
::v-deep .el-checkbox {
height: 100%;
width: 100%;
margin: 0;
box-sizing: border-box;
border: 1px solid #ececec;
margin: 5px;
// margin-bottom: 5px;
.el-checkbox__input {
position: absolute;
......@@ -1561,4 +1658,7 @@ img {
outline: none;
}
}
// ::v-deep.el-table thead {
// color: black;
// }
</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