Merge branch 'dev_vite' of http://18.167.251.121:10003/aidlab/aida_front into dev_vite

This commit is contained in:
李志鹏
2026-01-23 15:24:42 +08:00
9 changed files with 811 additions and 66 deletions

View File

@@ -336,16 +336,17 @@ export default defineComponent({
})
if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
if(detailDom.canvasBox && (detailData.currentDetailType != 'sketch' || detailData.isEditPattern.value == 'canvasEditor')){
let otherData = await updateOtherLayers(detailData.isEditPattern.value == 'canvasEditor'?'all':'single')
await detailDom.canvasBox.updateOtherLayers(otherData)
if(detailData.isEditPattern.value !== 'editSketch'){
let otherData = await updateOtherLayers(detailData.isEditPattern.value == 'canvasEditor'?'all':'single')
await detailDom.canvasBox.updateOtherLayers(otherData)
}
await detailDom.canvasBox.privewDetail()
await uploadElement()
}
for(let i = 0;i<list.length;i++){
detailData.selectDetail
let {scale,offset,priority,transpose,rotate,maskUrl,maskMinioUrl} = await (detailDom.model as any).getSubmitData(list[i])
let gradient = null
let newData = list[i]?.newDetail?.[detailData.currentDetailType]
let newData = list[i]?.newDetail
// newData[0].location=[
// -233.13985,
// 406.90964
@@ -355,12 +356,18 @@ export default defineComponent({
// 0.35822305
// ]
let isCurrent = list[i].id == detailData?.selectDetail?.id
let color = ((detailData.currentDetailType == 'color' && isCurrent) || detailData.isEditPattern.value == 'canvasEditor')?
(newData?.rgba?.r?`${newData.rgba.r} ${newData.rgba.g} ${newData.rgba.b}`:''):
(list[i].color?.rgba?.r?
`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`:
'')
if(detailData.currentDetailType == 'sketch' && newData){
let color = ''
let gradient = null
if((detailData.currentDetailType == 'color' || detailData.isEditPattern.value == 'canvasEditor') && isCurrent){
color = `${newData?.color.rgba.r} ${newData?.color.rgba.g} ${newData?.color.rgba.b}`
if(newData?.color.gradient){
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}`:''
detailData.selectDetail.maskUrl = ''
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 = {
changed:false,
color,
designType:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.designType:list[i].designType,
id:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.id:list[i].id,
maskMinioUrl:((newData && detailData.currentDetailType == 'sketch') || list[i].sketchString)?'':list[i]?.maskMinioUrl,
gradient,
designType:(newData?.sketch && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData?.sketch.designType:list[i].designType,
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:list[i]?.maskUrl || '',
// offset:[
@@ -391,23 +397,18 @@ export default defineComponent({
rotate,
partialDesign:list[i].partialDesign,
// partialDesign:detailData.isEditPattern.value?list[i].partialDesign:{},
path:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.minIOPath:list[i].minIOPath,
printObject:((newData && detailData.currentDetailType == 'print' && isCurrent) || detailData.isEditPattern.value == 'canvasEditor')?{prints:newData}:list[i].printObject?list[i].printObject:{prints:[]},
path:(newData?.sketch && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData?.sketch.minIOPath:list[i].minIOPath,
printObject:((newData?.print?.length>0 && (detailData.currentDetailType == 'print' || detailData.isEditPattern.value == 'canvasEditor')) && isCurrent)?{prints:newData.print}:list[i].printObject?list[i].printObject:{prints:[]},
priority,
// scale:[
// 0.5,
// 0.35822305
// ],
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:'',
trims:((newData && detailData.currentDetailType == 'element' && isCurrent) || detailData.isEditPattern.value == 'canvasEditor')?{prints:newData}: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:[]},
trims:((newData?.element?.length>0 && (detailData.currentDetailType == 'element' || detailData.isEditPattern.value == 'canvasEditor')) && isCurrent)?{prints:newData.element}: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.trims.prints)
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 scale = 0
await new Promise<void>(async (resolve, reject) => {
if(!detailData.frontBack.body.path)resolve(true)
const img = new Image();
img.src = detailData.frontBack.body.path;
img.onload = () => {
@@ -531,7 +533,7 @@ export default defineComponent({
detailData.loadingShow = true
if((detailData.currentDetailType == 'models' && !detailData.isEditPattern.value) || (detailData.currentDetailType == 'sketch' && !detailData.isEditPattern.value) || detailData.isEditPattern.value == 'editSketch'){
await getSubmitData('preview')
if(detailData.currentDetailType == 'models' && !detailData.isEditPattern.value)return
if(detailData.currentDetailType == 'models')return detailData.loadingShow = false
await getSketchSize()
detailDom.canvasBox.changeSketchUpdateFrontBack = async ()=>{
await detailDom.canvasBox.privewDetail()
@@ -548,8 +550,8 @@ export default defineComponent({
}
await detailDom.canvasBox.privewDetail()
await upDateFrontBackSketch()
saveCanvasJSONToSession()
await uploadSelectDetail()
saveCanvasJSONToSession()
detailData.loadingShow = false
}
}
@@ -639,12 +641,13 @@ export default defineComponent({
}
const updateOtherLayers = async (str:any='all',type:any='noFirst')=>{//更新到画布图层
let otherData:any = {}
if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
console.log('detailData.selectDetail.newDetail',detailData.selectDetail)
if(str == 'all'){
await uploadSelectDetail()
otherData = {
color: type == 'first'? detailData.selectDetail.color:detailData.selectDetail.newDetail?.color,
printObject: type == 'first'? detailData.selectDetail.printObject || null:{prints:detailData.selectDetail.newDetail?.print},
trims: type == 'first'? detailData.selectDetail.trims || null:{prints:detailData.selectDetail.newDetail?.element},
color: detailData.selectDetail.color,
printObject: detailData.selectDetail.printObject || null,
trims: detailData.selectDetail.trims || null,
}
}else if(str == 'single'){
otherData = {
@@ -665,6 +668,7 @@ export default defineComponent({
}
}
if(detailData.currentDetailType == 'print'){
if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
otherData.printObject = {prints:detailData.selectDetail.newDetail?.print || []}
}
if(detailData.currentDetailType == 'element'){
@@ -687,11 +691,15 @@ export default defineComponent({
str:'print'
}
store.commit('DesignDetail/setNewDetail',printValue)
if(allInfo.color?.color?.rgba){
let canvasColor = allInfo.color.color;
let colorData:any = await getColorName(allInfo.color.color?.rgba)
if(allInfo.color?.color?.rgba || allInfo.color?.color?.gradient){
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:{
h:colorData.h,
s:colorData.s,
@@ -701,8 +709,7 @@ export default defineComponent({
tcx:colorData.tcx,
rgba:canvasColor.rgba,
hex:rgbaToHex([canvasColor.rgba.r,canvasColor.rgba.g,canvasColor.rgba.b]),
},
str:'color'
}
}
if(canvasColor.gradient){
value.data.gradient = canvasColor.gradient
@@ -725,19 +732,21 @@ export default defineComponent({
// await detailDom.canvasBox.saveCanvas()
const allInfo = await (detailDom.canvasBox as any).getCanvasElement()
let color:any = {}
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)
color = {
hsv:{
h:colorData.h,
s:colorData.s,
v:colorData.v,
},
name:colorData.name,
tcx:colorData.tcx,
rgba:canvasColor.rgba,
hex:rgbaToHex([canvasColor.rgba.r,canvasColor.rgba.g,canvasColor.rgba.b]),
if(canvasColor?.rgba?.r){
let colorData:any = await getColorName(allInfo.color.color?.rgba)
color = {
hsv:{
h:colorData.h,
s:colorData.s,
v:colorData.v,
},
name:colorData.name,
tcx:colorData.tcx,
rgba:canvasColor.rgba,
hex:rgbaToHex([canvasColor.rgba.r,canvasColor.rgba.g,canvasColor.rgba.b]),
}
}
if(canvasColor.gradient){
color.gradient = canvasColor.gradient
@@ -746,7 +755,7 @@ export default defineComponent({
detailData.detailLeftColorKey++
}
}
if(detailData.isEditPattern.value !== 'canvasEditor'){
if(detailData.isEditPattern.value == 'canvasEditor'){
delete detailData.selectDetail.newDetail
detailData.selectDetail.trims.prints = allInfo.trims || []
detailData.selectDetail.printObject.prints = allInfo.prints || []

View File

@@ -140,10 +140,10 @@ export default defineComponent({
let color = colorData.allBoardData.colorBoards?.[index]
if(!color?.rgba && color?.rgbValue)color.rgba = color.rgbValue
if(
colorData.allBoardData.colorBoards?.[index] &&
(colorData.allBoardData.colorBoards?.[index] &&
colorData.selectDetail.color.rgba?.r == color?.rgba?.r &&
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)
){
console.log(123)

View File

@@ -314,6 +314,7 @@ export default defineComponent({
str:props.type,
id:id,
}
console.log('data',value)
store.commit('DesignDetail/setNewDetail',value)
}
const sort = (list:any)=>{
@@ -473,6 +474,7 @@ export default defineComponent({
setPosition()
},{immediate: true,})
watch(()=>editPrintElementData.stateOverallSingle,(newVal)=>{
previewDetailPrintData()
let arr:any = editPrintElementData.selectDetail.newDetail?.print || editPrintElementData.selectDetail.printObject.prints
if(props.type == 'element'){
arr = editPrintElementData.selectDetail.newDetail?.element || editPrintElementData.selectDetail.trims.prints
@@ -482,9 +484,8 @@ export default defineComponent({
}
if(arr.length > 0){
editPrintElementData.imgDomIndex = 0
editPrintElementData.printStyleList[props.type][newVal] = []
// editPrintElementData.printStyleList[props.type].single = []
// editPrintElementData.printStyleList[props.type].overall = []
editPrintElementData.printStyleList[props.type].single = []
editPrintElementData.printStyleList[props.type].overall = []
arr.forEach((item:any,index:number) => {
getItemPosition(item)
});

View File

@@ -1,6 +1,5 @@
<template>
<div class="repeat-setting">
{{ }}
<div class="repeat-setting" v-if="!mask">
<div class="repeat-setting-item">
<span class="label">{{ t("Canvas.angle") }}</span>
<angle-tool
@@ -87,6 +86,13 @@
// return props.object?.scale/10;
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 sketchSize:any = async ()=>{
let img = new Image();
@@ -102,10 +108,27 @@
});
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 () => {
let size = await sketchSize();
offset.value[0] = props.object.location[0] / size[0] * 100;
offset.value[1] = props.object.location[1] / size[1] * 100;
mask.value = true
sketchWH.value = await sketchSize();
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})
const gapX = computed(() => props.object.object?.gapX || 0);
const gapY = computed(() => props.object.object?.gapY || 0);
@@ -121,7 +144,6 @@
]);
const inputFillScale = (e) => {
const scale = e / 100;
console.log(scale.toFixed(2))
emit("inputFillScale", scale.toFixed(2));
};
const inputOffset = async (e:any)=>{

View File

@@ -9,7 +9,7 @@
@click="selectDetailItem(item,index)">
<div class="iconList">
<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>
<img :src="item.path" alt="">
<div class="type">{{ getTypeLang(item.type) }}</div>
@@ -41,6 +41,7 @@ export default defineComponent({
const store = useStore();
const {t} = useI18n()
const detailData = reactive({
probjects:computed(()=>store.state.Workspace.probjects),
selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
frontBack_:computed(()=>store.state.DesignDetail.frontBack),
designDetail:computed(()=>store.state.DesignDetail.designDetail),

View 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>

View File

@@ -27,8 +27,9 @@
<div class="designOpenrtion_imgMask" style="width: 100%;height: 100%;">
<div class="detail_modal_item_front">
<img
:style="{width:observerWH.width+'px',height:observerWH.height+'px'}"
:src="designDetail.designItemUrl" alt="" style="object-fit: cover;">
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>

View File

@@ -532,7 +532,7 @@ function isTimeRangePassed(timeRange) {
router.beforeEach((to: any, from, next) => {
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') {
// 系统维护
const toName = to.name === 'upgrade';

View File

@@ -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">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>
<!-- <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>
</template>