Merge branch 'dev_vite' of http://18.167.251.121:10003/aidlab/aida_front into dev_vite
This commit is contained in:
@@ -336,16 +336,17 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
|
if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
|
||||||
if(detailDom.canvasBox && (detailData.currentDetailType != 'sketch' || detailData.isEditPattern.value == 'canvasEditor')){
|
if(detailDom.canvasBox && (detailData.currentDetailType != 'sketch' || detailData.isEditPattern.value == 'canvasEditor')){
|
||||||
let otherData = await updateOtherLayers(detailData.isEditPattern.value == 'canvasEditor'?'all':'single')
|
if(detailData.isEditPattern.value !== 'editSketch'){
|
||||||
await detailDom.canvasBox.updateOtherLayers(otherData)
|
let otherData = await updateOtherLayers(detailData.isEditPattern.value == 'canvasEditor'?'all':'single')
|
||||||
|
await detailDom.canvasBox.updateOtherLayers(otherData)
|
||||||
|
}
|
||||||
await detailDom.canvasBox.privewDetail()
|
await detailDom.canvasBox.privewDetail()
|
||||||
await uploadElement()
|
await uploadElement()
|
||||||
}
|
}
|
||||||
for(let i = 0;i<list.length;i++){
|
for(let i = 0;i<list.length;i++){
|
||||||
detailData.selectDetail
|
detailData.selectDetail
|
||||||
let {scale,offset,priority,transpose,rotate,maskUrl,maskMinioUrl} = await (detailDom.model as any).getSubmitData(list[i])
|
let {scale,offset,priority,transpose,rotate,maskUrl,maskMinioUrl} = await (detailDom.model as any).getSubmitData(list[i])
|
||||||
let gradient = null
|
let newData = list[i]?.newDetail
|
||||||
let newData = list[i]?.newDetail?.[detailData.currentDetailType]
|
|
||||||
// newData[0].location=[
|
// newData[0].location=[
|
||||||
// -233.13985,
|
// -233.13985,
|
||||||
// 406.90964
|
// 406.90964
|
||||||
@@ -355,12 +356,18 @@ export default defineComponent({
|
|||||||
// 0.35822305
|
// 0.35822305
|
||||||
// ]
|
// ]
|
||||||
let isCurrent = list[i].id == detailData?.selectDetail?.id
|
let isCurrent = list[i].id == detailData?.selectDetail?.id
|
||||||
let color = ((detailData.currentDetailType == 'color' && isCurrent) || detailData.isEditPattern.value == 'canvasEditor')?
|
let color = ''
|
||||||
(newData?.rgba?.r?`${newData.rgba.r} ${newData.rgba.g} ${newData.rgba.b}`:''):
|
let gradient = null
|
||||||
(list[i].color?.rgba?.r?
|
if((detailData.currentDetailType == 'color' || detailData.isEditPattern.value == 'canvasEditor') && isCurrent){
|
||||||
`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`:
|
color = `${newData?.color.rgba.r} ${newData?.color.rgba.g} ${newData?.color.rgba.b}`
|
||||||
'')
|
if(newData?.color.gradient){
|
||||||
if(detailData.currentDetailType == 'sketch' && newData){
|
gradient = newData?.color.gradient
|
||||||
|
}
|
||||||
|
}else if(isCurrent){
|
||||||
|
color = list[i].color?.rgba?.r?`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`:''
|
||||||
|
gradient = list[i].gradient
|
||||||
|
}
|
||||||
|
if(detailData.currentDetailType == 'sketch' && newData?.sketch){
|
||||||
color = detailData.designDetail.clothes?.[0]?.color?.rgba?.r?`${detailData.designDetail.clothes?.[0].color.rgba.r} ${detailData.designDetail.clothes[0].color.rgba.g} ${detailData.designDetail.clothes[0].color.rgba.b}`:''
|
color = detailData.designDetail.clothes?.[0]?.color?.rgba?.r?`${detailData.designDetail.clothes?.[0].color.rgba.r} ${detailData.designDetail.clothes[0].color.rgba.g} ${detailData.designDetail.clothes[0].color.rgba.b}`:''
|
||||||
detailData.selectDetail.maskUrl = ''
|
detailData.selectDetail.maskUrl = ''
|
||||||
detailData.selectDetail.maskMinioUrl = ''
|
detailData.selectDetail.maskMinioUrl = ''
|
||||||
@@ -372,14 +379,13 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
console.log(newData,'========')
|
|
||||||
if(newData)console.log(JSON.parse(JSON.stringify(newData)))
|
|
||||||
let data:any = {
|
let data:any = {
|
||||||
changed:false,
|
changed:false,
|
||||||
color,
|
color,
|
||||||
designType:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.designType:list[i].designType,
|
gradient,
|
||||||
id:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.id:list[i].id,
|
designType:(newData?.sketch && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData?.sketch.designType:list[i].designType,
|
||||||
maskMinioUrl:((newData && detailData.currentDetailType == 'sketch') || list[i].sketchString)?'':list[i]?.maskMinioUrl,
|
id:(newData?.sketch && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData?.sketch.id:list[i].id,
|
||||||
|
maskMinioUrl:((newData?.sketch && detailData.currentDetailType == 'sketch') || list[i].sketchString)?'':list[i]?.maskMinioUrl,
|
||||||
// maskUrl:'',
|
// maskUrl:'',
|
||||||
maskUrl:list[i]?.maskUrl || '',
|
maskUrl:list[i]?.maskUrl || '',
|
||||||
// offset:[
|
// offset:[
|
||||||
@@ -391,23 +397,18 @@ export default defineComponent({
|
|||||||
rotate,
|
rotate,
|
||||||
partialDesign:list[i].partialDesign,
|
partialDesign:list[i].partialDesign,
|
||||||
// partialDesign:detailData.isEditPattern.value?list[i].partialDesign:{},
|
// partialDesign:detailData.isEditPattern.value?list[i].partialDesign:{},
|
||||||
path:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.minIOPath:list[i].minIOPath,
|
path:(newData?.sketch && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData?.sketch.minIOPath:list[i].minIOPath,
|
||||||
printObject:((newData && detailData.currentDetailType == 'print' && isCurrent) || detailData.isEditPattern.value == 'canvasEditor')?{prints:newData}:list[i].printObject?list[i].printObject:{prints:[]},
|
printObject:((newData?.print?.length>0 && (detailData.currentDetailType == 'print' || detailData.isEditPattern.value == 'canvasEditor')) && isCurrent)?{prints:newData.print}:list[i].printObject?list[i].printObject:{prints:[]},
|
||||||
priority,
|
priority,
|
||||||
// scale:[
|
// scale:[
|
||||||
// 0.5,
|
// 0.5,
|
||||||
// 0.35822305
|
// 0.35822305
|
||||||
// ],
|
// ],
|
||||||
scale:[scale[0]?scale[0]:1,scale[1]?scale[1]:1],
|
scale:[scale[0]?scale[0]:1,scale[1]?scale[1]:1],
|
||||||
type:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.level2Type || newData.categoryValue:list[i].type,
|
type:(newData?.sketch && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData?.sketch.level2Type || newData?.sketch.categoryValue:list[i].type,
|
||||||
sketchString:list[i].sketchString?list[i].sketchString:'',
|
sketchString:list[i].sketchString?list[i].sketchString:'',
|
||||||
trims:((newData && detailData.currentDetailType == 'element' && isCurrent) || detailData.isEditPattern.value == 'canvasEditor')?{prints:newData}:list[i].trims?.prints?list[i].trims:{prints:[]},
|
trims:((newData?.element?.length>0 && (detailData.currentDetailType == 'element' || detailData.isEditPattern.value == 'canvasEditor')) && isCurrent)?{prints:newData.element}:list[i].trims?.prints?list[i].trims:{prints:[]},
|
||||||
accessory:(newData && detailData.currentDetailType == 'accessory' && isCurrent && !detailData.isEditPattern.value)?{prints:newData}:list[i].trims?.prints?list[i].trims:{prints:[]},
|
|
||||||
}
|
}
|
||||||
console.log(JSON.parse(JSON.stringify(data)))
|
|
||||||
// if(!data.partialDesign.partialDesignMinioPath){
|
|
||||||
// data.partialDesign.partialDesignMinioPath = data.path
|
|
||||||
// }
|
|
||||||
printObjectToJSON(data.printObject.prints)
|
printObjectToJSON(data.printObject.prints)
|
||||||
printObjectToJSON(data.trims.prints)
|
printObjectToJSON(data.trims.prints)
|
||||||
if((detailData.isEditPattern.value && list[i].color?.gradient) || (!detailData.isEditPattern.value && (list[i].newDetail?.color?.gradient || list[i].color?.gradient))){
|
if((detailData.isEditPattern.value && list[i].color?.gradient) || (!detailData.isEditPattern.value && (list[i].newDetail?.color?.gradient || list[i].color?.gradient))){
|
||||||
@@ -456,6 +457,7 @@ export default defineComponent({
|
|||||||
let el:any = document.querySelector('.molepositon .perview_img')
|
let el:any = document.querySelector('.molepositon .perview_img')
|
||||||
let scale = 0
|
let scale = 0
|
||||||
await new Promise<void>(async (resolve, reject) => {
|
await new Promise<void>(async (resolve, reject) => {
|
||||||
|
if(!detailData.frontBack.body.path)resolve(true)
|
||||||
const img = new Image();
|
const img = new Image();
|
||||||
img.src = detailData.frontBack.body.path;
|
img.src = detailData.frontBack.body.path;
|
||||||
img.onload = () => {
|
img.onload = () => {
|
||||||
@@ -531,7 +533,7 @@ export default defineComponent({
|
|||||||
detailData.loadingShow = true
|
detailData.loadingShow = true
|
||||||
if((detailData.currentDetailType == 'models' && !detailData.isEditPattern.value) || (detailData.currentDetailType == 'sketch' && !detailData.isEditPattern.value) || detailData.isEditPattern.value == 'editSketch'){
|
if((detailData.currentDetailType == 'models' && !detailData.isEditPattern.value) || (detailData.currentDetailType == 'sketch' && !detailData.isEditPattern.value) || detailData.isEditPattern.value == 'editSketch'){
|
||||||
await getSubmitData('preview')
|
await getSubmitData('preview')
|
||||||
if(detailData.currentDetailType == 'models' && !detailData.isEditPattern.value)return
|
if(detailData.currentDetailType == 'models')return detailData.loadingShow = false
|
||||||
await getSketchSize()
|
await getSketchSize()
|
||||||
detailDom.canvasBox.changeSketchUpdateFrontBack = async ()=>{
|
detailDom.canvasBox.changeSketchUpdateFrontBack = async ()=>{
|
||||||
await detailDom.canvasBox.privewDetail()
|
await detailDom.canvasBox.privewDetail()
|
||||||
@@ -548,8 +550,8 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
await detailDom.canvasBox.privewDetail()
|
await detailDom.canvasBox.privewDetail()
|
||||||
await upDateFrontBackSketch()
|
await upDateFrontBackSketch()
|
||||||
saveCanvasJSONToSession()
|
|
||||||
await uploadSelectDetail()
|
await uploadSelectDetail()
|
||||||
|
saveCanvasJSONToSession()
|
||||||
detailData.loadingShow = false
|
detailData.loadingShow = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -639,12 +641,13 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
const updateOtherLayers = async (str:any='all',type:any='noFirst')=>{//更新到画布图层
|
const updateOtherLayers = async (str:any='all',type:any='noFirst')=>{//更新到画布图层
|
||||||
let otherData:any = {}
|
let otherData:any = {}
|
||||||
if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
|
console.log('detailData.selectDetail.newDetail',detailData.selectDetail)
|
||||||
if(str == 'all'){
|
if(str == 'all'){
|
||||||
|
await uploadSelectDetail()
|
||||||
otherData = {
|
otherData = {
|
||||||
color: type == 'first'? detailData.selectDetail.color:detailData.selectDetail.newDetail?.color,
|
color: detailData.selectDetail.color,
|
||||||
printObject: type == 'first'? detailData.selectDetail.printObject || null:{prints:detailData.selectDetail.newDetail?.print},
|
printObject: detailData.selectDetail.printObject || null,
|
||||||
trims: type == 'first'? detailData.selectDetail.trims || null:{prints:detailData.selectDetail.newDetail?.element},
|
trims: detailData.selectDetail.trims || null,
|
||||||
}
|
}
|
||||||
}else if(str == 'single'){
|
}else if(str == 'single'){
|
||||||
otherData = {
|
otherData = {
|
||||||
@@ -665,6 +668,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
if(detailData.currentDetailType == 'print'){
|
if(detailData.currentDetailType == 'print'){
|
||||||
|
if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
|
||||||
otherData.printObject = {prints:detailData.selectDetail.newDetail?.print || []}
|
otherData.printObject = {prints:detailData.selectDetail.newDetail?.print || []}
|
||||||
}
|
}
|
||||||
if(detailData.currentDetailType == 'element'){
|
if(detailData.currentDetailType == 'element'){
|
||||||
@@ -687,11 +691,15 @@ export default defineComponent({
|
|||||||
str:'print'
|
str:'print'
|
||||||
}
|
}
|
||||||
store.commit('DesignDetail/setNewDetail',printValue)
|
store.commit('DesignDetail/setNewDetail',printValue)
|
||||||
if(allInfo.color?.color?.rgba){
|
if(allInfo.color?.color?.rgba || allInfo.color?.color?.gradient){
|
||||||
let canvasColor = allInfo.color.color;
|
|
||||||
let colorData:any = await getColorName(allInfo.color.color?.rgba)
|
|
||||||
let value:any = {
|
let value:any = {
|
||||||
data:{
|
str:'color',
|
||||||
|
data:{},
|
||||||
|
}
|
||||||
|
let canvasColor = allInfo.color.color;
|
||||||
|
if(allInfo.color?.color?.rgba){
|
||||||
|
let colorData:any = await getColorName(allInfo.color.color?.rgba)
|
||||||
|
value.data = {
|
||||||
hsv:{
|
hsv:{
|
||||||
h:colorData.h,
|
h:colorData.h,
|
||||||
s:colorData.s,
|
s:colorData.s,
|
||||||
@@ -701,8 +709,7 @@ export default defineComponent({
|
|||||||
tcx:colorData.tcx,
|
tcx:colorData.tcx,
|
||||||
rgba:canvasColor.rgba,
|
rgba:canvasColor.rgba,
|
||||||
hex:rgbaToHex([canvasColor.rgba.r,canvasColor.rgba.g,canvasColor.rgba.b]),
|
hex:rgbaToHex([canvasColor.rgba.r,canvasColor.rgba.g,canvasColor.rgba.b]),
|
||||||
},
|
}
|
||||||
str:'color'
|
|
||||||
}
|
}
|
||||||
if(canvasColor.gradient){
|
if(canvasColor.gradient){
|
||||||
value.data.gradient = canvasColor.gradient
|
value.data.gradient = canvasColor.gradient
|
||||||
@@ -725,19 +732,21 @@ export default defineComponent({
|
|||||||
// await detailDom.canvasBox.saveCanvas()
|
// await detailDom.canvasBox.saveCanvas()
|
||||||
const allInfo = await (detailDom.canvasBox as any).getCanvasElement()
|
const allInfo = await (detailDom.canvasBox as any).getCanvasElement()
|
||||||
let color:any = {}
|
let color:any = {}
|
||||||
if(allInfo.color?.color?.rgba){
|
if(allInfo.color?.color?.rgba || allInfo.color?.color?.gradient){
|
||||||
let canvasColor = allInfo.color.color;
|
let canvasColor = allInfo.color.color;
|
||||||
let colorData:any = await getColorName(allInfo.color.color?.rgba)
|
if(canvasColor?.rgba?.r){
|
||||||
color = {
|
let colorData:any = await getColorName(allInfo.color.color?.rgba)
|
||||||
hsv:{
|
color = {
|
||||||
h:colorData.h,
|
hsv:{
|
||||||
s:colorData.s,
|
h:colorData.h,
|
||||||
v:colorData.v,
|
s:colorData.s,
|
||||||
},
|
v:colorData.v,
|
||||||
name:colorData.name,
|
},
|
||||||
tcx:colorData.tcx,
|
name:colorData.name,
|
||||||
rgba:canvasColor.rgba,
|
tcx:colorData.tcx,
|
||||||
hex:rgbaToHex([canvasColor.rgba.r,canvasColor.rgba.g,canvasColor.rgba.b]),
|
rgba:canvasColor.rgba,
|
||||||
|
hex:rgbaToHex([canvasColor.rgba.r,canvasColor.rgba.g,canvasColor.rgba.b]),
|
||||||
|
}
|
||||||
}
|
}
|
||||||
if(canvasColor.gradient){
|
if(canvasColor.gradient){
|
||||||
color.gradient = canvasColor.gradient
|
color.gradient = canvasColor.gradient
|
||||||
@@ -746,7 +755,7 @@ export default defineComponent({
|
|||||||
detailData.detailLeftColorKey++
|
detailData.detailLeftColorKey++
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if(detailData.isEditPattern.value !== 'canvasEditor'){
|
if(detailData.isEditPattern.value == 'canvasEditor'){
|
||||||
delete detailData.selectDetail.newDetail
|
delete detailData.selectDetail.newDetail
|
||||||
detailData.selectDetail.trims.prints = allInfo.trims || []
|
detailData.selectDetail.trims.prints = allInfo.trims || []
|
||||||
detailData.selectDetail.printObject.prints = allInfo.prints || []
|
detailData.selectDetail.printObject.prints = allInfo.prints || []
|
||||||
|
|||||||
@@ -140,10 +140,10 @@ export default defineComponent({
|
|||||||
let color = colorData.allBoardData.colorBoards?.[index]
|
let color = colorData.allBoardData.colorBoards?.[index]
|
||||||
if(!color?.rgba && color?.rgbValue)color.rgba = color.rgbValue
|
if(!color?.rgba && color?.rgbValue)color.rgba = color.rgbValue
|
||||||
if(
|
if(
|
||||||
colorData.allBoardData.colorBoards?.[index] &&
|
(colorData.allBoardData.colorBoards?.[index] &&
|
||||||
colorData.selectDetail.color.rgba?.r == color?.rgba?.r &&
|
colorData.selectDetail.color.rgba?.r == color?.rgba?.r &&
|
||||||
colorData.selectDetail.color.rgba?.g == color?.rgba?.g &&
|
colorData.selectDetail.color.rgba?.g == color?.rgba?.g &&
|
||||||
colorData.selectDetail.color.rgba?.b == color?.rgba?.b ||
|
colorData.selectDetail.color.rgba?.b == color?.rgba?.b) ||
|
||||||
(JSON.stringify(colorData.selectDetail.color.gradient) == JSON.stringify(color?.gradient) && colorData.selectDetail.color.gradient)
|
(JSON.stringify(colorData.selectDetail.color.gradient) == JSON.stringify(color?.gradient) && colorData.selectDetail.color.gradient)
|
||||||
){
|
){
|
||||||
console.log(123)
|
console.log(123)
|
||||||
|
|||||||
@@ -314,6 +314,7 @@ export default defineComponent({
|
|||||||
str:props.type,
|
str:props.type,
|
||||||
id:id,
|
id:id,
|
||||||
}
|
}
|
||||||
|
console.log('data',value)
|
||||||
store.commit('DesignDetail/setNewDetail',value)
|
store.commit('DesignDetail/setNewDetail',value)
|
||||||
}
|
}
|
||||||
const sort = (list:any)=>{
|
const sort = (list:any)=>{
|
||||||
@@ -473,6 +474,7 @@ export default defineComponent({
|
|||||||
setPosition()
|
setPosition()
|
||||||
},{immediate: true,})
|
},{immediate: true,})
|
||||||
watch(()=>editPrintElementData.stateOverallSingle,(newVal)=>{
|
watch(()=>editPrintElementData.stateOverallSingle,(newVal)=>{
|
||||||
|
previewDetailPrintData()
|
||||||
let arr:any = editPrintElementData.selectDetail.newDetail?.print || editPrintElementData.selectDetail.printObject.prints
|
let arr:any = editPrintElementData.selectDetail.newDetail?.print || editPrintElementData.selectDetail.printObject.prints
|
||||||
if(props.type == 'element'){
|
if(props.type == 'element'){
|
||||||
arr = editPrintElementData.selectDetail.newDetail?.element || editPrintElementData.selectDetail.trims.prints
|
arr = editPrintElementData.selectDetail.newDetail?.element || editPrintElementData.selectDetail.trims.prints
|
||||||
@@ -482,9 +484,8 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
if(arr.length > 0){
|
if(arr.length > 0){
|
||||||
editPrintElementData.imgDomIndex = 0
|
editPrintElementData.imgDomIndex = 0
|
||||||
editPrintElementData.printStyleList[props.type][newVal] = []
|
editPrintElementData.printStyleList[props.type].single = []
|
||||||
// editPrintElementData.printStyleList[props.type].single = []
|
editPrintElementData.printStyleList[props.type].overall = []
|
||||||
// editPrintElementData.printStyleList[props.type].overall = []
|
|
||||||
arr.forEach((item:any,index:number) => {
|
arr.forEach((item:any,index:number) => {
|
||||||
getItemPosition(item)
|
getItemPosition(item)
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="repeat-setting">
|
<div class="repeat-setting" v-if="!mask">
|
||||||
{{ }}
|
|
||||||
<div class="repeat-setting-item">
|
<div class="repeat-setting-item">
|
||||||
<span class="label">{{ t("Canvas.angle") }}</span>
|
<span class="label">{{ t("Canvas.angle") }}</span>
|
||||||
<angle-tool
|
<angle-tool
|
||||||
@@ -87,6 +86,13 @@
|
|||||||
// return props.object?.scale/10;
|
// return props.object?.scale/10;
|
||||||
return props.object?.scale[0] * 100;
|
return props.object?.scale[0] * 100;
|
||||||
});
|
});
|
||||||
|
const scalePrint = computed(() => {
|
||||||
|
let index = sketchWH.value[0] > sketchWH.value[1]?0:1;
|
||||||
|
return sketchWH.value[index] / printWH.value[index] * scale.value / 5;
|
||||||
|
});
|
||||||
|
const printWH = ref([0,0])
|
||||||
|
const sketchWH = ref([0,0])
|
||||||
|
const mask = ref(false)
|
||||||
const offset = ref([0,0])
|
const offset = ref([0,0])
|
||||||
const sketchSize:any = async ()=>{
|
const sketchSize:any = async ()=>{
|
||||||
let img = new Image();
|
let img = new Image();
|
||||||
@@ -102,10 +108,27 @@
|
|||||||
});
|
});
|
||||||
return size
|
return size
|
||||||
}
|
}
|
||||||
|
const printSize:any = async ()=>{
|
||||||
|
let img = new Image();
|
||||||
|
let size = [0,0];
|
||||||
|
img.src = props.sketchPath;
|
||||||
|
console.log(props.sketchPath)
|
||||||
|
await new Promise((resolve, reject) => {
|
||||||
|
img.onload = () => {
|
||||||
|
size = [img.width, img.height]
|
||||||
|
resolve([img.width, img.height]);
|
||||||
|
}
|
||||||
|
img.onerror = reject;
|
||||||
|
});
|
||||||
|
return size
|
||||||
|
}
|
||||||
watch (() => props.object.path || props.object.location, async () => {
|
watch (() => props.object.path || props.object.location, async () => {
|
||||||
let size = await sketchSize();
|
mask.value = true
|
||||||
offset.value[0] = props.object.location[0] / size[0] * 100;
|
sketchWH.value = await sketchSize();
|
||||||
offset.value[1] = props.object.location[1] / size[1] * 100;
|
printWH.value = await printSize();
|
||||||
|
offset.value[0] = props.object.location[0] / sketchWH.value[0] * 100;
|
||||||
|
offset.value[1] = props.object.location[1] / sketchWH.value[1] * 100;
|
||||||
|
mask.value = false
|
||||||
},{immediate: true})
|
},{immediate: true})
|
||||||
const gapX = computed(() => props.object.object?.gapX || 0);
|
const gapX = computed(() => props.object.object?.gapX || 0);
|
||||||
const gapY = computed(() => props.object.object?.gapY || 0);
|
const gapY = computed(() => props.object.object?.gapY || 0);
|
||||||
@@ -121,7 +144,6 @@
|
|||||||
]);
|
]);
|
||||||
const inputFillScale = (e) => {
|
const inputFillScale = (e) => {
|
||||||
const scale = e / 100;
|
const scale = e / 100;
|
||||||
console.log(scale.toFixed(2))
|
|
||||||
emit("inputFillScale", scale.toFixed(2));
|
emit("inputFillScale", scale.toFixed(2));
|
||||||
};
|
};
|
||||||
const inputOffset = async (e:any)=>{
|
const inputOffset = async (e:any)=>{
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
@click="selectDetailItem(item,index)">
|
@click="selectDetailItem(item,index)">
|
||||||
<div class="iconList">
|
<div class="iconList">
|
||||||
<i class="fi fi-rr-add" :class="{ active:item.scope == 'sys'}" @click.stop="sketchSystemToLibrary(item)"></i>
|
<i class="fi fi-rr-add" :class="{ active:item.scope == 'sys'}" @click.stop="sketchSystemToLibrary(item)"></i>
|
||||||
<i class="fi fi-rr-trash" @click.stop="deleteDetailItem(item?.id)"></i>
|
<i v-if="probjects?.httpType !== 'SINGLE_DESIGN'" class="fi fi-rr-trash" @click.stop="deleteDetailItem(item?.id)"></i>
|
||||||
</div>
|
</div>
|
||||||
<img :src="item.path" alt="">
|
<img :src="item.path" alt="">
|
||||||
<div class="type">{{ getTypeLang(item.type) }}</div>
|
<div class="type">{{ getTypeLang(item.type) }}</div>
|
||||||
@@ -41,6 +41,7 @@ export default defineComponent({
|
|||||||
const store = useStore();
|
const store = useStore();
|
||||||
const {t} = useI18n()
|
const {t} = useI18n()
|
||||||
const detailData = reactive({
|
const detailData = reactive({
|
||||||
|
probjects:computed(()=>store.state.Workspace.probjects),
|
||||||
selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
|
selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
|
||||||
frontBack_:computed(()=>store.state.DesignDetail.frontBack),
|
frontBack_:computed(()=>store.state.DesignDetail.frontBack),
|
||||||
designDetail:computed(()=>store.state.DesignDetail.designDetail),
|
designDetail:computed(()=>store.state.DesignDetail.designDetail),
|
||||||
|
|||||||
705
src/component/Detail/model/modelPosition copy.vue
Normal file
705
src/component/Detail/model/modelPosition copy.vue
Normal file
@@ -0,0 +1,705 @@
|
|||||||
|
<template>
|
||||||
|
<div class="molepositon" :class="{active:!imgDesignImg}">
|
||||||
|
<div class="designOpenrtion_imgMask" v-if="frontBack?.body?.path" :style="frontBack?.body?.style">
|
||||||
|
<div class="designOpenrtion_print" v-for="item,index in frontBack.back" :style="frontBack.front[index].style">
|
||||||
|
<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
|
||||||
|
</div>
|
||||||
|
<img class="perview_img" @load="setPrintSize()" ref="detailBody" :key="designDetail.designItemId" :src="frontBack?.body?.path" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'">
|
||||||
|
<!-- <div class="detail_modal_item_front" ref="target" v-for="item,index in frontBack.front" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="item.style">
|
||||||
|
<img :src="item.imageUrl" alt="">
|
||||||
|
</div> -->
|
||||||
|
<div class="detail_modal_item_front" :ref="el => { setElementRef(el, index) }" v-for="item,index in frontBack.front" :class="{'active':item.id == selectDetail?.id}" :style="item.style">
|
||||||
|
<img :src="item.imageUrl" alt="">
|
||||||
|
</div>
|
||||||
|
<div ref="moveableContainer" class="moveableContainer"></div>
|
||||||
|
</div>
|
||||||
|
<div class="designOpenrtion_imgMask" v-if="!frontBack?.body?.path">
|
||||||
|
<div class="designOpenrtion_print">
|
||||||
|
<img v-if="frontBack.back?.[0].imageUrl" :src="frontBack.back?.[0].imageUrl" style="object-fit: cover;" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="detail_modal_item_front" style="position: relative;">
|
||||||
|
<img :src="frontBack.front?.[0].imageUrl || selectDetail?.path" style="object-fit: cover;" alt="">
|
||||||
|
</div>
|
||||||
|
<!-- <img @load="setSelectSketch()" :src="designDetail?.currentFullBodyView || selectDetail?.undividedLayer" style="object-fit: cover;" alt=""> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="molepositon imgDesignImg" :class="{active:imgDesignImg}">
|
||||||
|
<div class="designOpenrtion_imgMask" style="width: 100%;height: 100%;">
|
||||||
|
<div class="detail_modal_item_front">
|
||||||
|
<img
|
||||||
|
style="object-fit: cover;"
|
||||||
|
:style="observerWH.width == '0px'?{width:observerWH.width+'px',height:observerWH.height+'px'}:{'object-fit': 'contain'}"
|
||||||
|
:src="designDetail.designItemUrl" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent,computed,inject,watch,nextTick,createVNode,toRefs, reactive, onUnmounted} from 'vue'
|
||||||
|
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||||
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||||
|
import { Https } from "@/tool/https";
|
||||||
|
import { useStore } from "vuex";
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import { getMousePosition } from "@/tool/mdEvent";
|
||||||
|
import { KeyValueDB } from "@/tool/indexedDB";
|
||||||
|
import Vue3Moveable from 'vue3-moveable';
|
||||||
|
import Moveable from 'moveable';
|
||||||
|
import { parse } from 'vue/compiler-sfc';
|
||||||
|
import { scale } from 'echarts/types/src/scale/helper.js';
|
||||||
|
export default defineComponent({
|
||||||
|
components:{
|
||||||
|
},
|
||||||
|
props:{
|
||||||
|
imgDesignImg:{
|
||||||
|
default:false,
|
||||||
|
type:Boolean,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits:['addSketch'],
|
||||||
|
setup(props,{emit}) {
|
||||||
|
const {t} = useI18n()
|
||||||
|
const store = useStore();
|
||||||
|
const detailData = reactive({
|
||||||
|
frontBack:computed(()=>store.state.DesignDetail.frontBack),
|
||||||
|
designDetail:computed(()=>store.state.DesignDetail.designDetail),
|
||||||
|
selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
|
||||||
|
isEditPattern:inject('isEditPattern') as any,
|
||||||
|
singleOveral:inject('singleOveral') as any,
|
||||||
|
detailBody:null as any,
|
||||||
|
observer:null as any,
|
||||||
|
observerWH:{
|
||||||
|
width:0,
|
||||||
|
height:0,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
const selectItem = reactive({
|
||||||
|
selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
|
||||||
|
imgDomIndex:-1,
|
||||||
|
printZIndex:store.state.DesignDetail.printZIndex,
|
||||||
|
imgDom:null as any,
|
||||||
|
direction:'',
|
||||||
|
})
|
||||||
|
|
||||||
|
watch(()=>detailData.frontBack?.body?.path,(newVal)=>{
|
||||||
|
setPrintSize()
|
||||||
|
})
|
||||||
|
const setPrintSize = ()=>{
|
||||||
|
nextTick(()=>{
|
||||||
|
let sacle = 0
|
||||||
|
const img = new Image();
|
||||||
|
let dom = document.querySelector('.molepositon .perview_img') as any
|
||||||
|
if(!detailData.frontBack?.body?.path || !dom)return
|
||||||
|
img.onload = () => {
|
||||||
|
//监听模特图片宽度设置整体图片宽度
|
||||||
|
if (detailData.observer) {
|
||||||
|
detailData.observer.disconnect()
|
||||||
|
}
|
||||||
|
detailData.observerWH.width = dom.width
|
||||||
|
detailData.observerWH.height = dom.height
|
||||||
|
detailData.observer = new ResizeObserver((entries) => {
|
||||||
|
if(entries[0].contentRect.width == 0)return
|
||||||
|
detailData.observerWH.width = Math.floor(entries[0].contentRect.width)
|
||||||
|
detailData.observerWH.height = Math.floor(entries[0].contentRect.height)
|
||||||
|
})
|
||||||
|
detailData.observer.observe(dom)
|
||||||
|
|
||||||
|
|
||||||
|
if(detailData.designDetail.clothes.length == 0){
|
||||||
|
store.commit('DesignDetail/addDesignColthes')
|
||||||
|
emit('addSketch')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if(!detailData.selectDetail?.id){
|
||||||
|
let item = detailData.designDetail.clothes.reduce((max, current) => {
|
||||||
|
return current.priority > max.priority ? current : max;
|
||||||
|
});
|
||||||
|
store.commit('DesignDetail/setDesignColthes',item.id)
|
||||||
|
}
|
||||||
|
// resolve(img)
|
||||||
|
sacle = dom.parentNode.offsetWidth / img.width
|
||||||
|
detailData.frontBack.front.forEach((item:any,index:number) => {
|
||||||
|
for (const key in item.style) {
|
||||||
|
if(key == 'zIndex')return
|
||||||
|
let value = item.style[key]
|
||||||
|
if(typeof value !== 'number'){
|
||||||
|
value = value.replace('px','')
|
||||||
|
item.style[key] = value
|
||||||
|
}else{
|
||||||
|
item.style[key] = value*sacle+'px'
|
||||||
|
}
|
||||||
|
// item.style[key] = value*sacle+'px'
|
||||||
|
}
|
||||||
|
for (const key in detailData.frontBack.back[index].style) {
|
||||||
|
if(key == 'zIndex')return
|
||||||
|
if(key == 'transform')return
|
||||||
|
let value = detailData.frontBack.back[index].style[key]
|
||||||
|
if(typeof value !== 'number'){
|
||||||
|
value = value.replace('px','')
|
||||||
|
detailData.frontBack.back[index].style[key] = value
|
||||||
|
}else{
|
||||||
|
detailData.frontBack.back[index].style[key] = value*sacle+'px'
|
||||||
|
}
|
||||||
|
// detailData.frontBack.back[index].style[key] = value*sacle+'px'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
setTimeout(() => {
|
||||||
|
initMoveableForSelected()
|
||||||
|
},500);
|
||||||
|
};
|
||||||
|
img.src = detailData.frontBack?.body?.path;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const getDetailListDom = reactive({
|
||||||
|
libraryList:null as any,
|
||||||
|
moveableContainer:null as any,//控件层
|
||||||
|
})
|
||||||
|
|
||||||
|
const elementRefs = ref([]) as any;
|
||||||
|
const moveableInstance = ref(null) as any;
|
||||||
|
const setElementRef = (el, index) => {
|
||||||
|
elementRefs.value[index] = el;
|
||||||
|
};
|
||||||
|
const updateRect = ()=>{
|
||||||
|
setTimeout(() => {
|
||||||
|
if(moveableInstance.value)moveableInstance.value.updateRect()
|
||||||
|
}, 200);
|
||||||
|
}
|
||||||
|
const initMoveableForSelected = () => {
|
||||||
|
// 销毁旧的实例
|
||||||
|
if(selectItem.imgDomIndex == -1)return
|
||||||
|
if (moveableInstance.value) {
|
||||||
|
moveableInstance.value.destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
const selectedEl = elementRefs.value[selectItem.imgDomIndex];
|
||||||
|
if (!selectedEl) return;
|
||||||
|
if(!selectedEl.style.left)return
|
||||||
|
moveableInstance.value = new Moveable(getDetailListDom.moveableContainer, {
|
||||||
|
target: selectedEl,
|
||||||
|
draggable: true,
|
||||||
|
scalable: true,
|
||||||
|
rotatable: true,
|
||||||
|
keepRatio: false, // 等比缩放
|
||||||
|
snappable: true,
|
||||||
|
snapThreshold: 5,
|
||||||
|
edge: false,
|
||||||
|
});
|
||||||
|
let startPosition = {//记录初始位置
|
||||||
|
left: 0,
|
||||||
|
top: 0,
|
||||||
|
}
|
||||||
|
moveableInstance.value.on('scaleStart', ({ target, direction }) => {
|
||||||
|
const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
|
||||||
|
if (!frontStyle.mirror){
|
||||||
|
let scaleX = frontStyle.style.transform.match(/scaleX\(([-\d.]+)\)/);
|
||||||
|
let scaleY = frontStyle.style.transform.match(/scaleY\(([-\d.]+)\)/);
|
||||||
|
frontStyle.mirror = { x: scaleX[1] == '-1' ? true : false, y: scaleY[1] == '-1' ? true : false };
|
||||||
|
}
|
||||||
|
});
|
||||||
|
moveableInstance.value.on('rotateStart', ({ target, direction }) => {
|
||||||
|
const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
|
||||||
|
if (!frontStyle.mirror){
|
||||||
|
let scaleX = frontStyle.style.transform.match(/scaleX\(([-\d.]+)\)/);
|
||||||
|
let scaleY = frontStyle.style.transform.match(/scaleY\(([-\d.]+)\)/);
|
||||||
|
frontStyle.mirror = { x: scaleX[1] == '-1' ? true : false, y: scaleY[1] == '-1' ? true : false };
|
||||||
|
}
|
||||||
|
});
|
||||||
|
moveableInstance.value.on('dragStart', ({ target, clientX, clientY }) => {
|
||||||
|
startPosition = {
|
||||||
|
left:parseFloat(selectedEl.style.left.replace('px','')) || 0,
|
||||||
|
top:parseFloat(selectedEl.style.top.replace('px','')) || 0,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// 拖拽
|
||||||
|
moveableInstance.value.on('drag', ({ target, beforeTranslate }) => {
|
||||||
|
let x = startPosition.left + beforeTranslate[0]
|
||||||
|
let y = startPosition.top + beforeTranslate[1]
|
||||||
|
detailData.frontBack.front[selectItem.imgDomIndex].style.left = x + 'px'
|
||||||
|
detailData.frontBack.front[selectItem.imgDomIndex].style.top = y + 'px'
|
||||||
|
});
|
||||||
|
const updateElementTransform = (element, rotateDeg = null) => {
|
||||||
|
|
||||||
|
const currentTransform = element.style?.transform || '';
|
||||||
|
// 1. 提取当前的所有rotate
|
||||||
|
const currentRotates = (currentTransform.match(/rotate[XYZ]?\([^)]+\)/g) || []);
|
||||||
|
// 2. 获取除镜像和rotate外的其他所有变换
|
||||||
|
let otherTransforms = currentTransform
|
||||||
|
.replace(/scaleX\(-1\)|scaleY\(-1\)/g, '') // 移除镜像
|
||||||
|
.replace(/rotate[XYZ]?\([^)]+\)/g, '') // 移除rotate
|
||||||
|
.replace(/\s+/g, ' ')
|
||||||
|
.trim();
|
||||||
|
// 3. 构建新transform
|
||||||
|
const transforms = [];
|
||||||
|
// 镜像部分
|
||||||
|
if (element.mirror.x) transforms.push('scaleX(-1)');
|
||||||
|
if (element.mirror.y) transforms.push('scaleY(-1)');
|
||||||
|
if (otherTransforms) transforms.push(otherTransforms);
|
||||||
|
if (rotateDeg !== null) {
|
||||||
|
transforms.push(`rotate(${rotateDeg}deg)`);
|
||||||
|
} else if (currentRotates.length > 0) {
|
||||||
|
transforms.push(...currentRotates);
|
||||||
|
}
|
||||||
|
element.style.transform = transforms.join(' ').trim();
|
||||||
|
};
|
||||||
|
|
||||||
|
moveableInstance.value.on('scale', ({ target, delta, direction }) => {
|
||||||
|
const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
|
||||||
|
if (!frontStyle.mirror) frontStyle.mirror = { x: false, y: false };
|
||||||
|
|
||||||
|
const width = parseFloat(frontStyle.style.width);
|
||||||
|
const height = parseFloat(frontStyle.style.height);
|
||||||
|
let left = parseFloat(frontStyle.style.left) || 0;
|
||||||
|
let top = parseFloat(frontStyle.style.top) || 0;
|
||||||
|
let rotation = 0;
|
||||||
|
// 获取原始比例
|
||||||
|
const originalRatio = width / height;
|
||||||
|
if (frontStyle.style.transform) {
|
||||||
|
const transform = frontStyle.style.transform;
|
||||||
|
const match = transform.match(/rotate\(([-\d.]+)deg\)/);
|
||||||
|
if (match) {
|
||||||
|
rotation = parseFloat(match[1]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 根据旋转角度重新计算控制点的方向
|
||||||
|
function getAdjustedCorner(originalCorner, rotationAngle) {
|
||||||
|
const angleRad = rotationAngle * (Math.PI / 180);
|
||||||
|
const cosA = Math.cos(angleRad);
|
||||||
|
const sinA = Math.sin(angleRad);
|
||||||
|
const newX = originalCorner.x * cosA - originalCorner.y * sinA;
|
||||||
|
const newY = originalCorner.x * sinA + originalCorner.y * cosA;
|
||||||
|
const threshold = 0.5;
|
||||||
|
return {
|
||||||
|
x: Math.abs(newX) > threshold ? (newX > 0 ? 1 : -1) : 0,
|
||||||
|
y: Math.abs(newY) > threshold ? (newY > 0 ? 1 : -1) : 0
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (rotation !== 0) {
|
||||||
|
direction = getAdjustedCorner({x: direction[0], y: direction[1]}, rotation);
|
||||||
|
direction = [direction.x, direction.y];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断是否是对角线方向(需要等比缩放)
|
||||||
|
const isDiagonal = Math.abs(direction[0]) === 1 && Math.abs(direction[1]) === 1;
|
||||||
|
|
||||||
|
// 处理轴缩放,包含镜像翻转逻辑
|
||||||
|
const processAxis = (axis, val, deltaVal, dir, originalPosition, originalSize, keepRatio = false, otherAxisResult = null) => {
|
||||||
|
let newVal = val * deltaVal;
|
||||||
|
const mirrorKey = axis === 'width' ? 'x' : 'y';
|
||||||
|
const isWidth = axis === 'width';
|
||||||
|
|
||||||
|
// 检查是否需要镜像翻转(当值小于等于0时)
|
||||||
|
if (newVal <= 0) {
|
||||||
|
frontStyle.mirror[mirrorKey] = !frontStyle.mirror[mirrorKey];
|
||||||
|
newVal = Math.abs(newVal);
|
||||||
|
|
||||||
|
updateElementTransform(frontStyle);
|
||||||
|
|
||||||
|
// 镜像翻转后,位置需要根据原始锚点调整
|
||||||
|
if (dir === -1) {
|
||||||
|
// 从左上/右上缩放时,位置保持不变
|
||||||
|
return {
|
||||||
|
newVal,
|
||||||
|
adjustPos: originalPosition,
|
||||||
|
shouldFlip: true
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
// 从左下/右下缩放时,位置需要调整
|
||||||
|
const newPosition = originalPosition + (originalSize - newVal) * (frontStyle.mirror[mirrorKey] ? -1 : 1);
|
||||||
|
return {
|
||||||
|
newVal,
|
||||||
|
adjustPos: newPosition,
|
||||||
|
shouldFlip: true
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const shouldMove = (!frontStyle.mirror[mirrorKey] && dir === -1) ||
|
||||||
|
(frontStyle.mirror[mirrorKey] && dir === 1);
|
||||||
|
if (keepRatio && otherAxisResult) {
|
||||||
|
newVal = isWidth ?
|
||||||
|
otherAxisResult.newVal * originalRatio :
|
||||||
|
otherAxisResult.newVal / originalRatio;
|
||||||
|
}
|
||||||
|
let adjustPos;
|
||||||
|
if (shouldMove) {
|
||||||
|
adjustPos = originalPosition - (newVal - originalSize);
|
||||||
|
} else {
|
||||||
|
adjustPos = originalPosition;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
newVal,
|
||||||
|
adjustPos,
|
||||||
|
shouldFlip: false
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// 自由缩放
|
||||||
|
const widthResult = processAxis('width', width, delta[0], direction[0], left, width);
|
||||||
|
const heightResult = processAxis('height', height, delta[1], direction[1], top, height);
|
||||||
|
|
||||||
|
frontStyle.style.left = widthResult.adjustPos + 'px';
|
||||||
|
frontStyle.style.top = heightResult.adjustPos + 'px';
|
||||||
|
frontStyle.style.width = widthResult.newVal + 'px';
|
||||||
|
frontStyle.style.height = heightResult.newVal + 'px';
|
||||||
|
// }
|
||||||
|
});
|
||||||
|
|
||||||
|
// 旋转
|
||||||
|
moveableInstance.value.on('rotate', ({ target, beforeRotate }) => {
|
||||||
|
let frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
|
||||||
|
// 确保镜像状态存在
|
||||||
|
if (!frontStyle.mirror) frontStyle.mirror = { x: false, y: false };
|
||||||
|
|
||||||
|
const { x: isMirroredX, y: isMirroredY } = frontStyle.mirror;
|
||||||
|
|
||||||
|
// 计算实际旋转角度
|
||||||
|
let actualRotate = beforeRotate;
|
||||||
|
|
||||||
|
// 关键逻辑:当镜像状态不同时(一个true一个false),旋转方向反转
|
||||||
|
if (isMirroredX !== isMirroredY) {
|
||||||
|
actualRotate = -beforeRotate;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 确保角度在 0-360 度范围内
|
||||||
|
actualRotate = actualRotate % 360;
|
||||||
|
|
||||||
|
// 如果角度为负数,转换为正数
|
||||||
|
if (actualRotate < 0) {
|
||||||
|
actualRotate += 360;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 确保角度在 [0, 360) 范围内
|
||||||
|
actualRotate = ((actualRotate % 360) + 360) % 360;
|
||||||
|
|
||||||
|
updateElementTransform(frontStyle, actualRotate.toFixed(2));
|
||||||
|
});
|
||||||
|
// 调整大小
|
||||||
|
moveableInstance.value.on('resize', ({ target, width, height }) => {
|
||||||
|
// console.log(width, height)
|
||||||
|
// detailData.frontBack.front[selectItem.imgDomIndex].style.width = width
|
||||||
|
// detailData.frontBack.front[selectItem.imgDomIndex].style.height = height
|
||||||
|
});
|
||||||
|
moveableInstance.value.on('dragEnd', ({ target, clientX, clientY }) => {
|
||||||
|
startPosition = {
|
||||||
|
left:0,
|
||||||
|
top:0,
|
||||||
|
}
|
||||||
|
upDataDetail()
|
||||||
|
});
|
||||||
|
moveableInstance.value.on('scaleEnd', () => {
|
||||||
|
upDataDetail()
|
||||||
|
});
|
||||||
|
moveableInstance.value.on('rotateEnd', () => {
|
||||||
|
upDataDetail()
|
||||||
|
});
|
||||||
|
};
|
||||||
|
watch(()=>selectItem.selectDetail,(newValue,oldValue)=>{
|
||||||
|
if(!newValue && newValue?.id == oldValue?.id)return
|
||||||
|
selectItem.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
|
||||||
|
initMoveableForSelected()
|
||||||
|
},{immediate: true,})
|
||||||
|
|
||||||
|
const setRevocation = async ()=>{
|
||||||
|
let frontBack = JSON.parse(JSON.stringify(detailData.frontBack))
|
||||||
|
let revocation:any = JSON.parse((await KeyValueDB.get("revocation") as any) || '[]')
|
||||||
|
revocation.push({designData:null,position:frontBack})
|
||||||
|
KeyValueDB.set('revocation', JSON.stringify(revocation));
|
||||||
|
}
|
||||||
|
const upDataDetail = async ()=>{
|
||||||
|
//同步到selectDetail数据中,
|
||||||
|
// getDetailListData.designDetail
|
||||||
|
let {scale,offset,priority,transpose,rotate,position,imageSize} = await getSubmitData(selectItem.selectDetail)
|
||||||
|
selectItem.selectDetail.layersObject[0].scale = scale
|
||||||
|
selectItem.selectDetail.layersObject[1].scale = scale
|
||||||
|
selectItem.selectDetail.layersObject[0].offset = offset
|
||||||
|
selectItem.selectDetail.layersObject[1].offset = offset
|
||||||
|
selectItem.selectDetail.layersObject[0].priority = priority
|
||||||
|
selectItem.selectDetail.layersObject[1].priority = priority
|
||||||
|
selectItem.selectDetail.layersObject[0].rotate = rotate
|
||||||
|
selectItem.selectDetail.layersObject[1].rotate = rotate
|
||||||
|
selectItem.selectDetail.layersObject[0].transpose = transpose
|
||||||
|
selectItem.selectDetail.layersObject[1].transpose = transpose
|
||||||
|
selectItem.selectDetail.layersObject[0].position = position
|
||||||
|
selectItem.selectDetail.layersObject[1].position = position
|
||||||
|
selectItem.selectDetail.layersObject[0].imageSize = imageSize
|
||||||
|
selectItem.selectDetail.layersObject[1].imageSize = imageSize
|
||||||
|
setRevocation()
|
||||||
|
}
|
||||||
|
const sort = (arr:any)=>{
|
||||||
|
arr.sort((a:any, b:any) => {
|
||||||
|
var a_num = a.style.zIndex;
|
||||||
|
var b_num = b.style.zIndex;
|
||||||
|
return a_num - b_num;
|
||||||
|
});
|
||||||
|
return arr
|
||||||
|
}
|
||||||
|
const getSubmitData = async (value:any)=>{
|
||||||
|
let parentNode = document.getElementsByClassName('molepositon')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
|
||||||
|
if(!detailData.frontBack?.body?.layersObject?.[0]?.imageSize){
|
||||||
|
return{
|
||||||
|
scale:value.layersObject[0].scale,
|
||||||
|
offset:value.layersObject[0].offset,
|
||||||
|
priority:value.layersObject[0].priority,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let ratio = detailData.frontBack.body.layersObject[0].imageSize[0]/parentNode.width
|
||||||
|
|
||||||
|
let scale = 0
|
||||||
|
let dom:any = document.querySelector('.molepositon .perview_img')
|
||||||
|
const img = new Image();
|
||||||
|
img.src = detailData.frontBack?.body?.path;
|
||||||
|
await new Promise<void>((resolve, reject) => {
|
||||||
|
img.onload = () => {
|
||||||
|
scale = dom.parentNode.offsetWidth / img.width
|
||||||
|
resolve()
|
||||||
|
};
|
||||||
|
})
|
||||||
|
// let arr:any = sort(detailData.frontBack.front)
|
||||||
|
let arr:any = sort(JSON.parse(JSON.stringify(detailData.frontBack.front)))
|
||||||
|
let num = 10
|
||||||
|
arr.forEach((item:any)=>{
|
||||||
|
item.priority = num++
|
||||||
|
})
|
||||||
|
let data:any = {
|
||||||
|
scale:null,
|
||||||
|
offset:null,
|
||||||
|
priority:'',
|
||||||
|
maskUrl:'',
|
||||||
|
maskMinioUrl:'',
|
||||||
|
position:null,
|
||||||
|
imageSize:null,
|
||||||
|
}
|
||||||
|
let state = false
|
||||||
|
for (let index = 0; index < arr.length; index++) {
|
||||||
|
if(value.id == arr[index].id){
|
||||||
|
state = true
|
||||||
|
let y = ((arr[index]?.style?.top.replace(/px/g,'')*ratio).toFixed(0) as any - arr[index]?.position[0])
|
||||||
|
let x = ((arr[index]?.style?.left.replace(/px/g,'')*ratio).toFixed(0) as any - arr[index]?.position[1])
|
||||||
|
let positionX = Number((arr[index]?.style?.left.replace(/px/g,'')/scale)).toFixed(2)
|
||||||
|
let positionY = Number((arr[index]?.style?.top.replace(/px/g,'')/scale)).toFixed(2)
|
||||||
|
let imageSizeW = Number((arr[index]?.style?.width.replace(/px/g,'')/scale)).toFixed(2)
|
||||||
|
let imageSizeH = Number((arr[index]?.style?.height.replace(/px/g,'')/scale)).toFixed(2)
|
||||||
|
|
||||||
|
let scaleWidth = arr[index]?.imageSize?Number(((arr[index]?.style?.width.replace(/px/g,'')*ratio)/(arr[index]?.imageSize[0]/arr[index].scale[0])).toFixed(2)):1
|
||||||
|
let scaleHeight = arr[index]?.imageSize?Number(((arr[index]?.style?.height.replace(/px/g,'')*ratio)/(arr[index]?.imageSize[1]/arr[index].scale[1])).toFixed(2)):1
|
||||||
|
// let widthScale = (arr[index].style.width.replace(/px/g,'')/arr[index].style.height.replace(/px/g,'')).toFixed(2)
|
||||||
|
|
||||||
|
let transformStr = arr[index]?.style?.transform
|
||||||
|
let scaleX = transformStr.match(/scaleX\(([-\d.]+)\)/)
|
||||||
|
let scaleY = transformStr.match(/scaleY\(([-\d.]+)\)/)
|
||||||
|
let rotate = transformStr.match(/rotate\(([-\d.]+)deg\)/);
|
||||||
|
data.transpose = [parseFloat(scaleX?.[1] || 1),parseFloat(scaleY?.[1] || 1)]
|
||||||
|
data.rotate = parseFloat(rotate?.[1] || 0)
|
||||||
|
data.scale = [scaleWidth,scaleHeight]
|
||||||
|
let top = y == 0 ? value.layersObject[0].offset[1]:y+value.layersObject[0].offset[1]
|
||||||
|
let left = x == 0 ? value.layersObject[0].offset[0]:x+value.layersObject[0].offset[0]
|
||||||
|
data.offset = [left?left:0,top?top:0]
|
||||||
|
data.position = [positionY,positionX]
|
||||||
|
data.imageSize = [imageSizeW,imageSizeH]
|
||||||
|
// data.offset = [left?left:0,top?top:0]
|
||||||
|
data.maskUrl = arr[index].maskUrl
|
||||||
|
data.maskMinioUrl = arr[index].maskMinioUrl
|
||||||
|
// data.priority = arr[index].style.zIndex
|
||||||
|
data.priority = arr[index].priority
|
||||||
|
arr[index].similarity = true
|
||||||
|
// item.offset = [(arr[index]?.style?.left.replace(/px/g,'')*ratio).toFixed(0),(i?.style?.top.replace(/px/g,'')*ratio).toFixed(0)]
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(!state){
|
||||||
|
data.scale = [1,1]
|
||||||
|
data.offset = [0,0]
|
||||||
|
data.priority = 10+arr.length
|
||||||
|
}
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
const deleteNav = ()=>{
|
||||||
|
|
||||||
|
}
|
||||||
|
const updataPosition = ()=>{
|
||||||
|
let url = detailData.frontBack?.body?.path
|
||||||
|
let sacle = 0
|
||||||
|
const img = new Image();
|
||||||
|
img.onload = () => {
|
||||||
|
let dom:any = document.querySelector('.molepositon .perview_img')
|
||||||
|
// resolve(img)
|
||||||
|
sacle = dom.parentNode.offsetWidth / img.width
|
||||||
|
detailData.frontBack.front.forEach((item:any,index:number) => {
|
||||||
|
for (const key in item.style) {
|
||||||
|
if(key == 'zIndex')return
|
||||||
|
if(key == 'transform')return
|
||||||
|
item.style[key] = item.style[key]*sacle+'px'
|
||||||
|
}
|
||||||
|
for (const key in detailData.frontBack.back[index].style) {
|
||||||
|
if(key == 'zIndex')return
|
||||||
|
if(key == 'transform')return
|
||||||
|
detailData.frontBack.back[index].style[key] = detailData.frontBack.back[index].style[key]*sacle+'px'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
img.src = url;
|
||||||
|
}
|
||||||
|
onUnmounted(()=>{
|
||||||
|
if (detailData.observer) {
|
||||||
|
detailData.observer.disconnect()
|
||||||
|
}
|
||||||
|
if (moveableInstance.value) {
|
||||||
|
moveableInstance.value.destroy();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return{
|
||||||
|
...toRefs(detailData),
|
||||||
|
...toRefs(selectItem),
|
||||||
|
...toRefs(getDetailListDom),
|
||||||
|
setElementRef,
|
||||||
|
|
||||||
|
setPrintSize,
|
||||||
|
deleteNav,
|
||||||
|
getSubmitData,
|
||||||
|
getMousePosition,
|
||||||
|
updataPosition,
|
||||||
|
updateRect,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
directives:{
|
||||||
|
detailBody:{
|
||||||
|
mounted (el,data:any) {
|
||||||
|
let sacle = 0
|
||||||
|
const img = new Image();
|
||||||
|
img.onload = () => {
|
||||||
|
// resolve(img)
|
||||||
|
sacle = el.parentNode.offsetWidth / img.width
|
||||||
|
data.instance.frontBack.front.forEach((item:any,index:number) => {
|
||||||
|
for (const key in item.style) {
|
||||||
|
if(key == 'zIndex')return
|
||||||
|
item.style[key] = item.style[key]*sacle+'px'
|
||||||
|
}
|
||||||
|
for (const key in data.instance.frontBack.back[index].style) {
|
||||||
|
if(key == 'zIndex')return
|
||||||
|
data.instance.frontBack.back[index].style[key] = data.instance.frontBack.back[index].style[key]*sacle+'px'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
img.src = data.value;
|
||||||
|
},
|
||||||
|
updated (el,data:any) {
|
||||||
|
let sacle = 0
|
||||||
|
const img = new Image();
|
||||||
|
img.onload = () => {
|
||||||
|
// resolve(img)
|
||||||
|
sacle = el.parentNode.offsetWidth / img.width
|
||||||
|
data.instance.frontBack.front.forEach((item:any,index:number) => {
|
||||||
|
for (const key in item.style) {
|
||||||
|
if(key == 'zIndex')return
|
||||||
|
item.style[key] = item.style[key].replace(/px/g,'')*sacle+'px'
|
||||||
|
}
|
||||||
|
for (const key in data.instance.frontBack.back[index].style) {
|
||||||
|
if(key == 'zIndex')return
|
||||||
|
data.instance.frontBack.back[index].style[key] = data.instance.frontBack.back[index].style[key].replace(/px/g,'')*sacle+'px'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
img.src = data.value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
provide() {
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.molepositon{
|
||||||
|
// width: 30rem;
|
||||||
|
// width: calc(66 * .470rem);
|
||||||
|
width: calc(66 * .457rem);
|
||||||
|
height: 66rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
// margin: auto 0;
|
||||||
|
// padding-top: 3rem;
|
||||||
|
position: relative;
|
||||||
|
display: none;
|
||||||
|
&.active{
|
||||||
|
display: flex;
|
||||||
|
z-index: 2;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
&.imgDesignImg{
|
||||||
|
> .designOpenrtion_imgMask{
|
||||||
|
.detail_modal_item_front{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
img{
|
||||||
|
// height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.moveableContainer{
|
||||||
|
:deep(.moveable-origin){
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
:deep(.moveable-control){
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
:deep(.moveable-rotation-control){
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> .designOpenrtion_imgMask{
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
position: relative;
|
||||||
|
// height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
>img{
|
||||||
|
z-index: 2;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
// height: 100%;
|
||||||
|
// object-fit: contain;
|
||||||
|
}
|
||||||
|
>div{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail_modal_item_front,.designOpenrtion_print{
|
||||||
|
z-index: 2;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
&.active{
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
// height: ;
|
||||||
|
height: 100%;
|
||||||
|
float: left;
|
||||||
|
user-select:none;
|
||||||
|
-webkit-user-drag: none;
|
||||||
|
}
|
||||||
|
.modal_imgItem{
|
||||||
|
position: absolute;
|
||||||
|
overflow: hidden;
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.designOpenrtion_print{
|
||||||
|
z-index: 1 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -27,8 +27,9 @@
|
|||||||
<div class="designOpenrtion_imgMask" style="width: 100%;height: 100%;">
|
<div class="designOpenrtion_imgMask" style="width: 100%;height: 100%;">
|
||||||
<div class="detail_modal_item_front">
|
<div class="detail_modal_item_front">
|
||||||
<img
|
<img
|
||||||
:style="{width:observerWH.width+'px',height:observerWH.height+'px'}"
|
style="object-fit: cover;"
|
||||||
:src="designDetail.designItemUrl" alt="" style="object-fit: cover;">
|
:style="observerWH.width == '0px'?{width:observerWH.width+'px',height:observerWH.height+'px'}:{width:'auto',height:'auto','object-fit': 'contain'}"
|
||||||
|
:src="designDetail.designItemUrl" alt="">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -532,7 +532,7 @@ function isTimeRangePassed(timeRange) {
|
|||||||
router.beforeEach((to: any, from, next) => {
|
router.beforeEach((to: any, from, next) => {
|
||||||
store.commit("set_view_loading", true);
|
store.commit("set_view_loading", true);
|
||||||
//系统维护时间
|
//系统维护时间
|
||||||
const time = '2025-12-19T21:00:00 - 2025-12-19T22:00:00';
|
const time = '2026-01-23T21:00:00 - 2026-01-23T22:00:00';
|
||||||
if (isTimeRangePassed(time) == 'in_progress') {
|
if (isTimeRangePassed(time) == 'in_progress') {
|
||||||
// 系统维护
|
// 系统维护
|
||||||
const toName = to.name === 'upgrade';
|
const toName = to.name === 'upgrade';
|
||||||
|
|||||||
@@ -11,12 +11,18 @@
|
|||||||
<!-- <div class="upgrade-content-textab">The AiDA system cannot be accessed temporarily due to system server maintenance. We apologize for any inconvenience this may cause and thank you for your understanding.</div> -->
|
<!-- <div class="upgrade-content-textab">The AiDA system cannot be accessed temporarily due to system server maintenance. We apologize for any inconvenience this may cause and thank you for your understanding.</div> -->
|
||||||
<!-- <div class="upgrade-content-textab">Due to the system server upgrade, we will start the upgrade from 9:30 am Hong Kong time on the weekend of October 20th until October 21st. During this time,<br> the AiDA system will be temporarily inaccessible. We apologize for any inconvenience this may cause and thank you for your understanding.</div> -->
|
<!-- <div class="upgrade-content-textab">Due to the system server upgrade, we will start the upgrade from 9:30 am Hong Kong time on the weekend of October 20th until October 21st. During this time,<br> the AiDA system will be temporarily inaccessible. We apologize for any inconvenience this may cause and thank you for your understanding.</div> -->
|
||||||
<!-- 有截至时间 -->
|
<!-- 有截至时间 -->
|
||||||
<div class="upgrade-content-textab">Due to system server upgrades, maintenance will be carried out from 21:00 to 22:00 on December 19.<br>The AiDA system will be temporarily unavailable during this period. We sincerely apologize for any inconvenience caused and thank you for your understanding.</div>
|
<div class="upgrade-content-textab">
|
||||||
|
Due to system server upgrades, maintenance will be carried out from 21:00 to 22:00 on January 19, 2026 (today).
|
||||||
|
<br>
|
||||||
|
The AiDA system will be temporarily unavailable during this period. We sincerely apologize for any inconvenience caused and thank you for your understanding.</div>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<!-- <div class="upgrade-content-textab">由于系统服务器维护,AiDA系统暂时无法访问。对于由此造成的任何不便,我们深表歉意,并感谢您的理解</div> -->
|
<!-- <div class="upgrade-content-textab">由于系统服务器维护,AiDA系统暂时无法访问。对于由此造成的任何不便,我们深表歉意,并感谢您的理解</div> -->
|
||||||
<div class="upgrade-content-textab">由于系统服务器升级,我们将于12月19日21:00 至12月19日22:00进行升级。<br>在此期间,AiDA系统将暂时无法访问。给您带来的不便,我们深表歉意,并感谢您的理解</div>
|
<div class="upgrade-content-textab">
|
||||||
|
由于系统服务器升级,我们将于1月23日21:00 至1月23日22:00进行升级。
|
||||||
|
<br>
|
||||||
|
在此期间,AiDA系统将暂时无法访问。给您带来的不便,我们深表歉意,并感谢您的理解</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user