aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

push Develop

Browse Source
This commit is contained in:
X1627315083
2024-06-17 09:39:01 +08:00
parent c93483e36f
commit 363b880276
55 changed files with 5880 additions and 1359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

469
src/component/Detail/DesignPrintOperation.vue
View File

@@ -38,10 +38,21 @@
</div>
</div>
<div class="print_right show_print_right Guide_1_25" :class="[driver__.driver?'showEvents':'']">
<div class="designOpenrtion_nav">
<div class="designOpenrtion_single" v-for="item,index in designOpenrtionList" :key="item" v-show="(stateOverallSingle == 'overall' && item.level2Type == 'Pattern') || stateOverallSingle == 'single'">
<img :src="item.path" @click="setpitch(item,index)">
</div>
<div class="designOpenrtion_single" v-for="item,index in designList" :key="item" v-show="(stateOverallSingle == 'overall' && item.level2Type == 'Pattern') || stateOverallSingle == 'single'">
<img :src="item.path" @click="setpitch(item,index)">
</div>
<!-- <div class="designOpenrtion_overall" v-show="!overallSingle">
<img :src="designOpenrtionList[0].path">
</div> -->
</div>
<div v-show="!overallSingle" class="habit_System_Designer">
<div class="habit_System_Designer_text">{{ $t('DesignPrintOperation.Scale') }}</div>
<a-slider id="system_silder"
:min="1"
:min="20"
v-model:value="systemDesignerPercentage"
@afterChange="systemDesigner"
:tip-formatter="formatter"
@@ -49,18 +60,11 @@
</a-slider>
</div>
<div v-show="overallSingle" @click="random" class="button_second">{{ $t('DesignPrintOperation.Random') }}</div>
<div v-show="overallSingle" class="print_input">
<!-- <div v-show="overallSingle" class="print_input">
<input class="search_input" :placeholder="$t('DesignPrintOperation.inputContent')" type="Number" v-model="printAmount" @input="setprintAmount">
<i class="fi fi-rr-trash" @click="deletePrint"></i>
</div>
<div class="designOpenrtion_nav">
<div class="designOpenrtion_single" v-show="overallSingle" v-for="item,index in designOpenrtionList" :key="item" :class="{active:printStyleList[index]?.designOpenrtionBtn?printStyleList[index]?.designOpenrtionBtn:false}">
<img :src="item.path" @click="setpitch(item,index)">
</div>
<div class="designOpenrtion_overall" v-show="!overallSingle">
<img :src="designOpenrtionList[0].path">
</div>
</div>
</div> -->
<div class="subitOkPreviewBtn" @click.stop="setPreview">{{ $t('DesignPrintOperation.preview') }}</div>
<div class="subitOkPreviewBtn Guide_1_25_1" :class="[driver__.driver?'hideEvents':'']" @click.stop="setOK">OK</div>
</div>
@@ -69,32 +73,40 @@
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
<!-- <div class="designOpenrtion_imgMask" :style="sketch"> -->
<div class="designOpenrtion_imgMask">
<div class="designOpenrtion_print" v-show="overallSingle">
<div class="designOpenrtion_print">
<div
v-for="item,index in designOpenrtionList"
v-for="item,index in exhibitionOpenrtionList[stateOverallSingle]"
:key="item"
:style="[printStyleList?.[index]?.style]"
v-if="overallSingle"
:style="[printStyleList[stateOverallSingle]?.[index]?.style]"
@mousedown.stop="itemMoveMousedown(index,$event)"
class="modal_imgItem"
@click="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false">
ref="content"
>
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[stateOverallSingle][index]?.transform?.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false">
</div>
</div>
<!-- <img v-if="overallSingle" :src="current?.layersObject?.[1]?.maskUrl" alt="" class="designOpenrtion_sketch"> -->
<img :src="current?.path" alt="" class="designOpenrtion_sketch">
<img v-show="overallSingle" :src="current?.layersObject?.[1]?.maskUrl" alt="" class="designOpenrtion_sketch_mask">
<div class="designOpenrtion_btn">
<ul v-if="overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
<ul v-if="overallSingle" v-for="item,index in printStyleList[stateOverallSingle]" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',$event)"></li>
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',$event)"></li>
<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',$event)"></li>
<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',$event)"></li>
<li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li>
<li class="designOpenrtion_delete" @click.stop="deletePrint">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
</li>
</ul>
<div v-show="!overallSingle"></div>
<ul v-if="!overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtion_Mouoverall" :style="'left:'+item.style.left+';top:'+item.style.top" @mousedown.stop="itemMoveMousedown(index,$event)">
<ul v-if="!overallSingle && printStyleList[stateOverallSingle][0]" :class="{active:printStyleList[stateOverallSingle][0]?.designOpenrtionBtn}" class="designOpenrtion_Mouoverall" :style="'left:'+printStyleList[stateOverallSingle][0]?.style?.left+';top:'+printStyleList[stateOverallSingle][0]?.style?.top+';'" @mousedown.stop="itemMoveMousedown(0,$event)">
<i class="fi fi-rr-arrows animtion1"></i>
<i class="fi fi-rr-arrows animtion2"></i>
<li class="designOpenrtion_delete" @click="deletePrint">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
</li>
</ul>
</div>
</div>
@@ -121,19 +133,30 @@ import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { useI18n } from "vue-i18n";
import { remove } from "jszip";
export default defineComponent({
setup(prop) {
let designOpenrtion = ref(false);
let designOpenrtionList = ref([])
let designOpenrtionList = ref([])//新增的元素
let designList = ref([])//已经存在的元素
let setOkData = ref([])
let exhibitionOpenrtionList = ref({
single:[],
overall:[],
})//展示的元素
let current = inject('current')//父组件传过来的数据
let driver__ = inject('driver__')
let setRevocation = inject('setRevocation')//父组件传过来的数据
let overallSingle = ref(false)
let overallSingle = ref(true)
let stateOverallSingle = ref('single')
let systemDesignerPercentage = ref(0)
let printAmount = ref(1)//印花数量
let printZIndex = ref(2)//印花优先级
let printStyleList = ref([{
let printStyleList = ref({
single:[],
overall:[],
});
let currentPrintStyleList = ref({
centers:{
left:0,
top:0,
@@ -152,7 +175,7 @@ export default defineComponent({
rotateZ:0,
},
designOpenrtionBtn:false
}]);
});
let direction = ref('')
let imgDom = ref()
@@ -173,13 +196,17 @@ export default defineComponent({
return {
designOpenrtion,
designOpenrtionList,
designList,
setOkData,
exhibitionOpenrtionList,
overallSingle,
stateOverallSingle,
systemDesignerPercentage,
current,
driver__,
printAmount,
printZIndex,
printStyleList,
currentPrintStyleList,
direction,//判断点击的是li那个边
imgDom,
imgDomIndex,
@@ -211,8 +238,8 @@ export default defineComponent({
let num = 1
let x = 0
let y = 0
num = value.instance.printStyleList[value.instance.imgDomIndex].transform.scale
angle = value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ
num = value.instance.printStyleList[value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.scale
angle = value.instance.printStyleList[value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.rotateZ
// 添加鼠标按下事件监听器
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
@@ -236,7 +263,7 @@ export default defineComponent({
document.addEventListener('mousemove', mousemove);
// 添加鼠标松开事件监听器
let mouseup = () => {
value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ = angle
value.instance.printStyleList[value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.rotateZ = angle
mouse = false;
document.removeEventListener('mouseup',mouseup)
document.removeEventListener('mousemove',mousemove)
@@ -250,86 +277,110 @@ export default defineComponent({
methods: {
init(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
this.currentFullBodyView = designItemDetail.currentFullBodyView? designItemDetail.currentFullBodyView:designItemDetail.designItemUrl
this.currentFullBodyView = designItemDetail.currentFullBodyView?designItemDetail.currentFullBodyView:designItemDetail.designItemUrl
if(designItemDetail.others.length == 0){
this.body = true
}
let DesignPrintOperationParent = this.$parent
this.designOpenrtion = true
this.clearModal()
this.designOpenrtionList = []
this.designOpenrtionList.push(...this.current.printObject.prints)
this.overallSingle = DesignPrintOperationParent.overallSingle
this.systemDesignerPercentage = DesignPrintOperationParent.systemDesignerPercentage
this.overallSingle = this.current.printObject.ifSingle?true:false
this.ifListOver()
if(this.current.printObject.prints)this.exhibitionOpenrtionList[this.stateOverallSingle] = JSON.parse(JSON.stringify(this.current.printObject.prints))
if(this.$parent.exhibitionList.print)this.designOpenrtionList = JSON.parse(JSON.stringify(this.$parent.exhibitionList.print))
if(this.$parent.elementsList)this.designList = JSON.parse(JSON.stringify(this.$parent.printsList))
// this.overallSingle = this.current.ifSingle?false:this.current.ifSingle
let skecth = new Image
skecth.src = this.current.path
skecth.onload=()=>{
this.sketch.width = skecth.width/10+'rem'
this.sketch.height = skecth.height/10+'rem'
skecth.remove()
}
// this.sketch = {
// width:this.current.layersObject[1].imageSize[0]/10+'rem',
// height:this.current.layersObject[1].imageSize[1]/10+'rem'
// }
let print = new Image
print.src = this.current.printObject.prints[0].path
print.onload=()=>{
this.print.width = print.width+'px'
this.print.height = print.height+'px'
this.printStyleList[0].style.width = print.width+'px'
this.printStyleList[0].style.height = print.height+'px'
this.printStyleList[0].designOpenrtionBtn = false
nextTick().then(()=>{
if(this.designOpenrtionList[0].scale){
this.designOpenrtionList.forEach((item,index)=>{
this.setTemplate(item,index)
this.printAmount = this.printStyleList.length
if (!this.overallSingle) {
this.printAmount = 1
this.setprintAmount()
}
if(this.current.printObject.ifSingle != this.overallSingle){
this.refetchTemplate(0)
}
})
}else{
this.refetchTemplate(0)
}
if(this.exhibitionOpenrtionList[this.stateOverallSingle].length > 0){
this.exhibitionOpenrtionList[this.stateOverallSingle].forEach((item,index)=>{
this.setTemplate(item,index)
})
}else{
}
},
ifListOver(){
if(!this.overallSingle){
// this.designOpenrtionList = this.designOpenrtionList.filter((item)=>item.level2Type == "Pattern")
// this.designList = this.designList.filter((item)=>item.level2Type == "Pattern")
this.stateOverallSingle = 'overall'
}else{
this.stateOverallSingle = 'single'
}
},
setPrintWH(url){
let print = new Image
return new Promise((resolve, reject) => {
print.onload=()=>{
this.print.width = print.width+'px'
this.print.height = print.height+'px'
resolve()
print.remove()
}
print.src = url
})
},
systemDesigner(num) {
let DesignPrintOperationParent = this.$parent
DesignPrintOperationParent.systemDesignerPercentage = num
},
formatter(value) {
if(value<30)value = 30
return `${value*3}%`;
},
setOveralSingle(){
let DesignPrintOperationParent = this.$parent
DesignPrintOperationParent.overallSingle = this.overallSingle
if (!this.overallSingle) {
this.printAmount = 1
this.setprintAmount()
if(!this.overallSingle){
// this.refetchTemplate(0)
this.stateOverallSingle = 'overall'
}else{
this.stateOverallSingle = 'single'
}
this.random()
// this.random()
},
setpitch(item,index){
this.printStyleList.forEach((v)=>{
async setpitch(item,index){
await this.setPrintWH(item.path)
this.printStyleList[this.stateOverallSingle].forEach((v)=>{
v.designOpenrtionBtn = false
})
this.imgDomIndex = index
this.printStyleList[index].designOpenrtionBtn = true
this.printStyleList[index].style.zIndex = this.printZIndex++
if(!this.overallSingle){
this.printStyleList[this.stateOverallSingle][0] = JSON.parse(JSON.stringify(this.currentPrintStyleList))
this.refetchTemplate(0)
this.exhibitionOpenrtionList[this.stateOverallSingle][0] = {
angle:0,
designType:item.designType,
level2Type:item.level2Type,
minIOPath:item.minIOPath,
path:item.path,
priority:1,
scale:.3,
location:[0,0]
}
this.systemDesignerPercentage = 30
}else{
this.printStyleList[this.stateOverallSingle].push(JSON.parse(JSON.stringify(this.currentPrintStyleList)))
let currentIndex = this.printStyleList[this.stateOverallSingle].length-1
this.exhibitionOpenrtionList[this.stateOverallSingle].push({
angle:0,
designType:item.designType,
level2Type:item.level2Type,
minIOPath:item.minIOPath,
path:item.path,
priority:1,
scale:1,
location:[0,0]
})
this.refetchTemplate(currentIndex)
}
},
//设置移动
itemMoveMousedown(index,event){
if (event.target.tagName === 'IMG' || event.target.nodeName === 'IMG')return
this.imgDomIndex = index
this.printStyleList.forEach((v)=>{
this.printStyleList[this.stateOverallSingle].forEach((v)=>{
v.designOpenrtionBtn = false
})
if(!this.overallSingle){
@@ -339,17 +390,17 @@ export default defineComponent({
}
let scale = Number(this.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
let rotateZ = Number(this.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
this.printStyleList[index].designOpenrtionBtn = true
this.printStyleList[index].style.zIndex = this.printZIndex++
this.printStyleList[index].transform = {
this.printStyleList[this.stateOverallSingle][index].designOpenrtionBtn = true
this.printStyleList[this.stateOverallSingle][index].style.zIndex = this.printZIndex++
this.printStyleList[this.stateOverallSingle][index].transform = {
scale:scale,
rotateZ:rotateZ?rotateZ:0,
}
let imgDomWH = this.imgDom.getBoundingClientRect()
let left = Number(this.printStyleList[index].style.left.replace(/px/g,''))
let top = Number(this.printStyleList[index].style.top.replace(/px/g,''))
this.printStyleList[index].centers.left = imgDomWH.x+event.offsetX-left
this.printStyleList[index].centers.top = imgDomWH.y+event.offsetY-top
let left = Number(this.printStyleList[this.stateOverallSingle][index].style.left.replace(/px/g,''))
let top = Number(this.printStyleList[this.stateOverallSingle][index].style.top.replace(/px/g,''))
this.printStyleList[this.stateOverallSingle][index].centers.left = imgDomWH.x+event.offsetX-left
this.printStyleList[this.stateOverallSingle][index].centers.top = imgDomWH.y+event.offsetY-top
document.addEventListener("mouseup", this.mouseup);
document.addEventListener("mousemove", this.moveMousemove);
},
@@ -359,19 +410,19 @@ export default defineComponent({
this.imgDom = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
let scale = Number(this.imgDom.firstChild.style.transform?.split('scale(')[1]?.split(')')[0])
let rotateZ = Number(this.imgDom.firstChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
this.printStyleList[this.imgDomIndex].designOpenrtionBtn = true
this.printStyleList[this.imgDomIndex].transform = {
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].designOpenrtionBtn = true
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].transform = {
scale:scale,
rotateZ:rotateZ,
}
let imgDomWH = this.imgDom.getBoundingClientRect()
let li = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_btn_top")[0].offsetWidth/2
if(this.direction == 'right' || this.direction == 'bottom'){
this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
}else{
this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
}
document.addEventListener("mouseup", this.sizeMouseup);
@@ -382,22 +433,22 @@ export default defineComponent({
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_imgMask")[0]
parentNode = parentNode.getBoundingClientRect()
let x = (e.x - this.printStyleList[this.imgDomIndex].centers.left)+'px'
let y = ( e.y - this.printStyleList[this.imgDomIndex].centers.top)+'px'
this.printStyleList[this.imgDomIndex].style.left = x
this.printStyleList[this.imgDomIndex].style.top = y
let x = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)+'px'
let y = ( e.y - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)+'px'
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = x
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = y
if(!this.overallSingle){
if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
this.printStyleList[this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
}
if(x.replace(/px/g,'') <= 0){
this.printStyleList[this.imgDomIndex].style.left = 0+'px'
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 0+'px'
}
if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
this.printStyleList[this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
}
if(y.replace(/px/g,'') <= 0){
this.printStyleList[this.imgDomIndex].style.top = 0+'px'
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = 0+'px'
}
}
@@ -413,38 +464,38 @@ export default defineComponent({
let w,h
//判断移动四个边
if(this.direction == 'right'){
w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)
h = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
w = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)
h = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
width = w+'px'
height = w*num1+'px'
}else if(this.direction == 'top'){
this.printStyleList[this.imgDomIndex].style.top = 'auto'
// this.printStyleList[this.imgDomIndex].style.left = 'auto'
this.printStyleList[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
h = (this.printStyleList[this.imgDomIndex].centers.top - e.y)
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = 'auto'
// this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 'auto'
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
w = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
h = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top - e.y)
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'bottom'){
h = (e.y - this.printStyleList[this.imgDomIndex].centers.top)
h = (e.y - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'left'){
this.printStyleList[this.imgDomIndex].style.left = 'auto'
this.printStyleList[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
w = (this.printStyleList[this.imgDomIndex].centers.left - e.x)
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 'auto'
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
w = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left - e.x)
width = w+'px'
height = w*num1+'px'
}
//判断尺寸是否到边
this.printStyleList[this.imgDomIndex].style.width = width
this.printStyleList[this.imgDomIndex].style.height = height
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.width = width
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.height = height
},
//鼠标抬起
sizeMouseup(e){
this.printStyleList[this.imgDomIndex].style={
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style={
right:'auto',
left:this.imgDom.offsetLeft+'px',
bottom:'auto',
@@ -461,47 +512,12 @@ export default defineComponent({
document.removeEventListener("mouseup", this.mouseup);
document.removeEventListener("mousemove", this.moveMousemove);
},
setprintAmount(){
if(this.printAmount < 1){
this.printAmount = 1
return
}
if(this.printAmount > 20){
this.printAmount = 20
return
}
let printTiemNum
if(this.printAmount>this.printStyleList.length){
let num = this.printAmount - this.printStyleList.length
for (let index = 0; index < num; index++) {
this.printStyleList.push(JSON.parse(JSON.stringify(this.printStyleList[this.printStyleList.length-1])))
this.printStyleList[this.printStyleList.length-1].transform.rotateZ = 0
this.refetchTemplate(this.printStyleList.length-1)
this.designOpenrtionList.push(this.current.printObject.prints[this.current.printObject.prints.length-1])
}
}else{
let num = this.printStyleList.length - this.printAmount
this.designOpenrtionList.splice(this.printStyleList.length-num,num)
this.printStyleList.splice(this.printStyleList.length-num,num)
}
this.printStyleList.forEach((v)=>{
v.designOpenrtionBtn = false
})
this.printStyleList[this.printStyleList.length-1].designOpenrtionBtn = true
this.imgDomIndex = this.printStyleList.length-1
},
deletePrint(){
if(this.designOpenrtionList.length <= 1){
return
}
this.designOpenrtionList.splice(this.imgDomIndex,1)
this.printStyleList.splice(this.imgDomIndex,1)
this.printAmount = this.designOpenrtionList.length
this.exhibitionOpenrtionList[this.stateOverallSingle].splice(this.imgDomIndex,1)
this.printStyleList[this.stateOverallSingle].splice(this.imgDomIndex,1)
},
random(){
this.designOpenrtionList.forEach((v,index)=>{
this.exhibitionOpenrtionList[this.stateOverallSingle].forEach((v,index)=>{
this.refetchTemplate(index)
})
},
@@ -527,7 +543,7 @@ export default defineComponent({
x = sketch?.width - this.print.width.replace(/px/g,'')*scale/2
}
let y = sketch?.height-this.print.height.replace(/px/g,'')*scale
this.printStyleList[index]={
this.printStyleList[this.stateOverallSingle][index]={
centers:{
left:0,
top:0,
@@ -544,13 +560,14 @@ export default defineComponent({
transform:{
// scale:scale<.2?.2:scale,//0.2-3
// rotateZ:rotateZ1-rotateZ2,
rotateZ:this.printStyleList[index].transform.rotateZ?this.printStyleList[index].transform.rotateZ:0
rotateZ:this.printStyleList[this.stateOverallSingle][index].transform.rotateZ?this.printStyleList[this.stateOverallSingle][index].transform.rotateZ:0
},
designOpenrtionBtn:false
}
},
//设置图片
setTemplate(item,index) {
async setTemplate(item,index) {
await this.setPrintWH(item.path)
this.designOpenrtionList
let sketch = document.getElementsByClassName("designOpenrtion_modal")[0]?.getElementsByClassName('designOpenrtion_sketch')[0]
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
@@ -565,7 +582,7 @@ export default defineComponent({
if(sketch.offsetHeight < item.location[1]/sketchNum){
top = sketch.offsetHeight +'px'
}
this.printStyleList[index]={
this.printStyleList[this.stateOverallSingle][index]={
centers:{
left:0,
top:0,
@@ -587,7 +604,7 @@ export default defineComponent({
}
},
computeZindex(){
let arr = JSON.parse(JSON.stringify(this.printStyleList))
let arr = JSON.parse(JSON.stringify(this.printStyleList[this.stateOverallSingle]))
arr.sort((a, b) => {
var a_num = a["style"].zIndex;
var b_num = b["style"].zIndex;
@@ -600,38 +617,41 @@ export default defineComponent({
return this.computeSize(arr)//计算单件衣服初始大小到目前大小的缩放比
},
computeSize(arr){
// let num = this.sketch/
let sketch = document.getElementsByClassName("designOpenrtion_sketch")[0]
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
let prints = []
let scale
let location
arr.forEach((v,index)=>{
if(!this.overallSingle){
scale = this.systemDesignerPercentage/100
// location = [arr[index].style.left.replace(/px/g,'')*sketchNum+this.print.width.replace(/px/g,'')/2-7,arr[index].style.top.replace(/px/g,'')*sketchNum+this.print.height.replace(/px/g,'')/2-7]
location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
}else{
scale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
return new Promise(async (resolve, reject) => {
// let num = this.sketch/
let sketch = document.getElementsByClassName("designOpenrtion_sketch")[0]
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
let prints = []
let scale
let location
for (let index = 0; index < arr.length; index++) {
if(!this.overallSingle){
scale = this.systemDesignerPercentage/100
// location = [arr[index].style.left.replace(/px/g,'')*sketchNum+this.print.width.replace(/px/g,'')/2-7,arr[index].style.top.replace(/px/g,'')*sketchNum+this.print.height.replace(/px/g,'')/2-7]
location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
}else{
await this.setPrintWH(this.exhibitionOpenrtionList[this.stateOverallSingle][index].path)
scale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
}
let obj = {
angle : !this.overallSingle ? 0:arr[index].transform.rotateZ,
location : location,
priority:arr[index].style.zIndex,
scale: scale,
designType:this.exhibitionOpenrtionList[this.stateOverallSingle][index].designType,
level2Type:this.exhibitionOpenrtionList[this.stateOverallSingle][index].level2Type,
path:this.exhibitionOpenrtionList[this.stateOverallSingle][index].path,
minIOPath:this.exhibitionOpenrtionList[this.stateOverallSingle][index].minIOPath,
}
prints.push(obj)
}
let obj = {
angle : !this.overallSingle ? 0:arr[index].transform.rotateZ,
location : location,
priority:arr[index].style.zIndex,
scale: scale,
designType:this.designOpenrtionList[index].designType,
path:this.designOpenrtionList[index].path,
minIOPath:this.designOpenrtionList[index].minIOPath,
}
prints.push(obj)
resolve(prints)
})
return prints
},
setPreview(){
async setPreview(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let index
let scale = this.printStyleList[0].style.width.replace(/px/g,'')/this.print.width.replace(/px/g,'')
designItemDetail.clothes.forEach((v,ind)=>{
if(v.id == this.current.id){
index = ind
@@ -645,10 +665,13 @@ export default defineComponent({
// priority:priority,
// timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
// }
let data = this.store.state.DesignDetailModule.designPreviewData
let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
await this.computeZindex().then((rv)=>{
this.setOkData = rv
})
data.designSingleItemDTOList[index].printObject={
ifSingle:this.overallSingle,
prints:this.computeZindex(),
prints:this.setOkData,
}
data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
this.loadingShow = true
@@ -678,12 +701,12 @@ export default defineComponent({
index = ind
}
})
console.log(this.designItemDetailTS);
if(this.designItemDetailTS.rv){
designItemDetail.currentFullBodyView = this.designItemDetailTS.rv.currentFullBodyView
designItemDetail.clothes[index].printObject.ifSingle = this.overallSingle
designItemDetail.clothes[index].layersObject = this.designItemDetailTS.rv.clothes[index].layersObject
designItemDetail.clothes[index].printObject.prints = this.computeZindex()
designItemDetail.clothes[index].trims = this.designItemDetailTS.rv.clothes[index].trims
designItemDetail.clothes[index].printObject.prints = this.setOkData
designItemDetail.ifSubmit = true
designItemDetail.clothes.forEach((item,i)=>{
let a
@@ -706,31 +729,18 @@ export default defineComponent({
}
},
clearModal(){
this.printAmount = 1//显示数量
this.designOpenrtion = true//modal页面关闭
this.printZIndex = 2//点击图片z-index
this.imgDomIndex = 0//点击图片下标
this.designOpenrtionList = []
this.printStyleList.splice(1,this.printStyleList.length-1)
this.printStyleList[0] = {
centers:{
left:0,
top:0,
},
style:{
left:0+"px",
top:0+"px",
right:"auto",
bottom:"auto",
width:'auto',
height:'auto',
zIndex:1,
},
transform:{
scale:1,
rotateZ:0,
},
designOpenrtionBtn:false
this.designList = []
this.exhibitionOpenrtionList = {
single:[],
overall:[],
}
this.printStyleList = {
single:[],
overall:[],
}
},
closeModal(){
@@ -887,30 +897,6 @@ export default defineComponent({
height: calc(3rem*1.2);
line-height: calc(3rem*1.2);
}
.print_input{
margin-top: calc(1rem*1.2);
width: calc(9.85rem*1.2);
display: flex;
.search_input{
width: calc(6.85rem*1.2);
margin-right: calc(1rem*1.2);
padding: 0 calc(1.5rem*1.2);
border: 2px solid #000;
font-size: calc(1.2rem*1.2);
font-weight: 400;
height: calc(3rem*1.2);
border-radius: calc(1.5rem*1.2);
&::placeholder {
color: #C2C2C2;
}
}
i{
width: calc(2rem*1.2);
cursor: pointer;
display: flex;
align-items: center;
}
}
.designOpenrtion_nav{
display: flex;
margin-top: calc(2rem*1.2);
@@ -922,13 +908,6 @@ export default defineComponent({
&.designOpenrtion_nav::-webkit-scrollbar {
display: none;
}
.active{
img{
border: 2px solid;
border-radius: 2px;
box-sizing: border-box;
}
}
.designOpenrtion_single{
width: 40%;
margin-bottom: calc(2rem*1.2);
@@ -944,6 +923,7 @@ export default defineComponent({
&.show_print_right{
border: none;
padding: 0;
flex: 1;
height: auto;
}
}
@@ -1104,6 +1084,19 @@ export default defineComponent({
width: 0;
height: 0;
}
.designOpenrtion_delete{
position: absolute;
top: 0;
right: 0;
width: 4rem;
background: none;
transform: translate(100%, -100%);
height: 4rem;
img{
width: 100%;
height: 100%;
}
}
.designOpenrtion_rotote::after{
position: absolute;
content: "";