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

Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite

Browse Source
This commit is contained in:
zhangyahui
2026-01-21 15:29:38 +08:00
parent f8f5b98854 39a65add7c
commit 542583efc6
15 changed files with 269 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/component/Canvas/CanvasEditor/commands/RedGreenCommands.js
View File

@@ -159,6 +159,8 @@ export class BatchInitializeRedGreenModeCommand extends Command {
absolutePositioned: true,
opacity: 0.01, // 设置为几乎透明
id: generateId("redGreenImageMask_"),
rx: 15,
ry: 15,
});
// this.canvas.add(this.redGreenImageMask);
this.canvas.clipPath = this.redGreenImageMask;

3
src/component/Canvas/CanvasEditor/components/HeaderMenu.vue
View File

@@ -22,6 +22,7 @@ const props = defineProps({
default: true, // 是否显示图层面板
},
isBackgroundChangeable: Boolean,
isChangeCanvasSize: Boolean,
});
const emit = defineEmits([
@@ -284,6 +285,7 @@ onMounted(() => {
<div class="setting-group">
<span class="setting-label">{{ $t("Canvas.width") }}</span>
<a-input-number
:disabled="!isChangeCanvasSize"
:value="canvasWidth?.toFixed(2)"
class="setting-input"
:min="1"
@@ -300,6 +302,7 @@ onMounted(() => {
<div class="setting-group">
<span class="setting-label">{{ $t("Canvas.height") }}</span>
<a-input-number
:disabled="!isChangeCanvasSize"
:value="canvasHeight?.toFixed(2)"
class="setting-input"
:min="1"

52
src/component/Canvas/CanvasEditor/index.vue
View File

@@ -75,6 +75,10 @@ const props = defineProps({
type: Object,
default: () => CanvasConfig, // 默认配置
},
isChangeCanvasSize: {
type: Boolean,
default: true, // 是否允许修改画布大小
},
showLayersPanel: {
type: Boolean,
default: true, // 是否显示图层面板
@@ -503,7 +507,7 @@ onMounted(async () => {
clearTimeout(trailingTimeout);
trailingTimeout = setTimeout(() => {
optimizeCanvasRendering(canvasManager.canvas, ()=> handleWindowResize());
}, 200);
}, 1000);
});
observer.observe(canvasContainerRef.value);
// 使用window的resize事件代替ResizeObserver
@@ -566,38 +570,38 @@ async function handleWindowResize() {
if(!canvasManager) return;
await updateCanvasSize();
// 确保显示的缩放信息是最新的
currentZoom.value = Math.round(canvasManager.canvas.getZoom() * 100);
setInitZoom();
await setInitZoom();
await new Promise(requestAnimationFrame);
await layerManager?.updateLayersObjectsInteractivity?.();
}
function setInitZoom(){
if (props.config.initZoom) {
async function setInitZoom(){
if (props.config.initZoom && !props.enabledRedGreenMode) {
const width = canvasManager.width;
const height = canvasManager.height;
const cwidth = props.config.width;
const cheight = props.config.height;
const cwidth = canvasWidth.value;
const cheight = canvasHeight.value;
let zoom = Math.min(1, width / cwidth, height / cheight);
if (zoom < 1) zoom -= 0.05;
setZoom(zoom); // 设置画布缩放
await setZoom(zoom); // 设置画布缩放
}else{
currentZoom.value = Math.round(canvasManager.canvas.getZoom() * 100);
}
}
function resetZoom() {
canvasManager.resetZoom();
}
function setZoom(zoom) {
setTimeout(() => {
if (!canvasManager) return;
const newZoom = Math.max(zoom, 0.1);
// 使用画布中心作为缩放点
const centerPoint = {
x: canvasManager.canvas.width / 2,
y: canvasManager.canvas.height / 2,
};
canvasManager.animateZoom(centerPoint, newZoom);
});
async function setZoom(zoom) {
await new Promise(requestAnimationFrame);
if (!canvasManager) return;
const newZoom = Math.max(zoom, 0.1);
// 使用画布中心作为缩放点
const centerPoint = {
x: canvasManager.canvas.width / 2,
y: canvasManager.canvas.height / 2,
};
canvasManager.animateZoom(centerPoint, newZoom);
}
function zoomIn() {
@@ -1034,6 +1038,11 @@ defineExpose({
width = 0,// 导出的图片宽度
height = 0, // 导出的图片高度
} = {}) => {
console.log('导出图片',{isContainFixed,
isContainFixedOther,
isPrintTrimsNoRepeat,
isPrintTrimsRepeat,
isContainNormalLayer})
var base64 = await canvasManager.exportImage({
isContainBg,
isContainFixed,
@@ -1047,6 +1056,7 @@ defineExpose({
expPicType,
isEnhanceImg,
});
console.log('导出图片完成',)
if(width > 0 && height > 0){
base64 = await resizeImage(base64, width, height);
}
@@ -1190,7 +1200,7 @@ defineExpose({
:brushSize="brushSize"
:enabledRedGreenMode="enabledRedGreenMode"
:showLayersPanel="showLayersPanel"
:isBackgroundChangeable="isBackgroundChangeable"
:isChangeCanvasSize="props.isChangeCanvasSize"
@update:canvasWidth="canvasWidth = $event"
@update:canvasHeight="canvasHeight = $event"
@update:canvasColor="canvasColor = $event"
@@ -1467,7 +1477,7 @@ defineExpose({
position: absolute;
}
.background-grid {
.canvas-container {
--offsetX: 50%;
--offsetY: 50%;
--size: 10px;

29
src/component/Canvas/CanvasEditor/managers/CanvasManager.js
View File

@@ -459,6 +459,14 @@ export class CanvasManager {
const fheight = fixedLayerObj.height * fixedLayerObj.scaleY
const bwidth = backgroundObject.width * backgroundObject.scaleX
const bheight = backgroundObject.height * backgroundObject.scaleY
console.log(fixedLayerObj.width,
fixedLayerObj.scaleX,
fixedLayerObj.height,
fixedLayerObj.scaleY,
backgroundObject.width,
backgroundObject.scaleX,
backgroundObject.height,
backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
if(Math.abs(fwidth/bwidth - fheight/bheight) < 0.1) return;
this.canvasWidth.value = fwidth
this.canvasHeight.value = fheight
@@ -1304,6 +1312,7 @@ export class CanvasManager {
canvasColor: this.canvasColor.value,
activeLayerId: this.layerManager?.activeLayerId?.value,
};
this.FixJsonIdLoss(data);
console.log("获取画布JSON数据...", data);
return JSON.stringify(data);
} catch (error) {
@@ -1311,7 +1320,6 @@ export class CanvasManager {
throw new Error("获取画布JSON失败");
}
}
loadJSON(json, calllBack) {
// 确保传入的json是字符串格式
@@ -1324,10 +1332,11 @@ export class CanvasManager {
try {
const parsedJson = JSON.parse(json);
console.log("加载画布JSON数据:", parsedJson);
this.FixJsonIdLoss(parsedJson);
this.canvasWidth.value = parsedJson.canvasWidth || this.width;
this.canvasHeight.value = parsedJson.canvasHeight || this.height;
this.canvasColor.value = parsedJson.canvasColor || this.backgroundColor;
// eslint-disable-next-line no-async-promise-executor
return new Promise(async (resolve, reject) => {
const tempLayers = parsedJson?.layers || [];
@@ -1441,6 +1450,22 @@ export class CanvasManager {
throw new Error("解析JSON失败，请检查输入格式: " + error.message);
}
}
/** 修复JSON数据中的ID丢失问题 */
FixJsonIdLoss(json){
const layers = json?.layers || [];
const objects = json?.canvas?.objects || [];
layers.forEach((layer) => {
if(!layer.fabricObjects?.length && !layer.fabricObject){
const obj = objects?.find((o) => o.layerId === layer.id);
if(!obj) return;
layer.fabricObjects = [{
id: obj.id,
type: obj.type,
}]
}
})
}
/**
* 创建其他图层：印花、颜色、元素...

7
src/component/Canvas/CanvasEditor/utils/imageHelper.js
View File

@@ -2208,8 +2208,13 @@ export const resizeImage = async (base64, width, height) => {
const canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
const scale = height / img.height;
const w = img.width * scale;
const h = img.height * scale;
const x = (width - w) / 2;
const y = 0;
const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
ctx.drawImage(img, x, y, w, h);
resolve(canvas.toDataURL());
};
img.onerror = reject;

2
src/component/Canvas/OverallCanvas/index.vue
View File

@@ -304,7 +304,7 @@
} else if (item.action === ACTIONS.DELETE) {
DeleteItemByToken(item.token);
} else if (item.action === ACTIONS.ADD) {
DeleteItemByToken(item.token);
DeleteItemByToken(item.data.token);
list.value.push(item.data);
await addObject(item.data);
}

113
src/component/Detail/DesignDetail.vue
View File

@@ -129,6 +129,7 @@ import { Modal,message } from 'ant-design-vue';
import {getUploadUrl,segmentImage,setGradual,rgbToHsv,rgbaToHex} from '@/tool/util'
import { useStore } from "vuex";
import { openGuide,driverObj__ } from "@/tool/guide";
import { KeyValueDB } from "@/tool/indexedDB";
import { useI18n } from 'vue-i18n'
export default defineComponent({
components:{
@@ -190,7 +191,7 @@ export default defineComponent({
watch(()=>detailData.selectDetail,async (newValue,oldValue)=>{
detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
if(newValue?.path)await getSketchSize()
if(newValue?.id && oldValue?.id && (newValue.id != oldValue.id)){
if(newValue?.id && (newValue?.id != oldValue?.id)){
store.commit('DesignDetail/changeCanvasKey')
}
// privewDetail(oldValue)
@@ -198,9 +199,9 @@ export default defineComponent({
provide('getCanvasIfEdit',detailData.getCanvasIfEdit)
provide('singleOveral',detailData.singleOveral)
provide('isEditPattern',detailData.isEditPattern)
const closeModal = ()=>{
sessionStorage.removeItem('oppositeRevocation')
sessionStorage.removeItem('revocation')
const closeModal = async ()=>{
await KeyValueDB.remove('oppositeRevocation')
await KeyValueDB.remove('revocation')
detailData.designDetailShow = false
emit('destroy')
}
@@ -214,10 +215,9 @@ export default defineComponent({
Https.axiosGet(url).then(
async (rv: any) => {
//清除画布JSON数据
sessionStorage.removeItem('canvasList');
sessionStorage.removeItem('revocation');
sessionStorage.removeItem('oppositeRevocation');
sessionStorage.setItem('key', 'value');
await KeyValueDB.remove('canvasList');
await KeyValueDB.remove('revocation');
await KeyValueDB.remove('oppositeRevocation');
store.commit('DesignDetail/setDesignDetail',rv)
rv.clothes.forEach((item:any)=>{
let a
@@ -272,24 +272,24 @@ export default defineComponent({
}
//撤回
const setRevocation = ()=>{//设置撤销
const setRevocation = async ()=>{//设置撤销
let itemDetail = JSON.parse(JSON.stringify(detailData.designDetail))
let revocation:any = JSON.parse((sessionStorage.getItem("revocation") as any))
let revocation:any = JSON.parse((await KeyValueDB.get("revocation") as any) || 'null')
if(!revocation)revocation = []
// let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
// let oppositeRevocation = JSON.parse((await KeyValueDB.get("oppositeRevocation") as any))
// if(revocation?.[0]?.designItemId != itemDetail.designItemId || revocation?.[0]?.designItemId == undefined){
// revocation = []
// }
revocation.push({designData:itemDetail,position:null})
detailData.revocationShow = revocation?.length
sessionStorage.setItem('revocation', JSON.stringify(revocation));
sessionStorage.setItem('oppositeRevocation',JSON.stringify([]));
await KeyValueDB.set('revocation', JSON.stringify(revocation));
await KeyValueDB.set('oppositeRevocation',JSON.stringify([]));
}
provide('setRevocation',setRevocation)
const revocation = ()=>{//撤回
let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
const revocation = async ()=>{//撤回
let oppositeRevocation = JSON.parse((await KeyValueDB.get("oppositeRevocation") as any) || 'null')
let revocation = JSON.parse((await KeyValueDB.get("revocation") as any) || 'null')
if(revocation.length <= 1)return
oppositeRevocation.push(revocation[revocation.length-1])
revocation.splice(revocation.length-1,1)
@@ -301,14 +301,14 @@ export default defineComponent({
store.commit('DesignDetail/setFrontBack',revocation[revocation.length-1].position)
}
store.commit('DesignDetail/setDesignColthes',detailData.selectDetail.id)
sessionStorage.setItem('oppositeRevocation', JSON.stringify(oppositeRevocation));
sessionStorage.setItem('revocation', JSON.stringify(revocation));
await KeyValueDB.set('oppositeRevocation', JSON.stringify(oppositeRevocation));
await KeyValueDB.set('revocation', JSON.stringify(revocation));
// clearSelect()
detailData.positionKey++
}
const oppositeRevocation = ()=>{//反撤回
let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
const oppositeRevocation = async ()=>{//反撤回
let oppositeRevocation = JSON.parse((await KeyValueDB.get("oppositeRevocation") as any) || 'null')
let revocation = JSON.parse((await KeyValueDB.get("revocation") as any) || 'null')
// if(!oppositeRevocation[oppositeRevocation.length-1].designData)return
if(oppositeRevocation.length < 1)return
if(oppositeRevocation[oppositeRevocation.length-1]?.designData){
@@ -321,8 +321,8 @@ export default defineComponent({
detailData.revocationShow = revocation.length
oppositeRevocation.splice(oppositeRevocation.length-1,1)
detailData.oppositeRevocationShow = oppositeRevocation.length
sessionStorage.setItem('oppositeRevocation', JSON.stringify(oppositeRevocation));
sessionStorage.setItem('revocation', JSON.stringify(revocation));
await KeyValueDB.set('oppositeRevocation', JSON.stringify(oppositeRevocation));
await KeyValueDB.set('revocation', JSON.stringify(revocation));
// this.clearSelect()
detailData.positionKey++
}
@@ -446,7 +446,6 @@ export default defineComponent({
let value = {
currentType : JSON.parse(JSON.stringify(detailData.currentDetailType)),
rv:rv,
fun:setRevocation
}
if(detailData?.designDetail?.newModel)detailData.designDetail.oldModel = JSON.parse(JSON.stringify(detailData.designDetail.newModel))
@@ -499,7 +498,7 @@ export default defineComponent({
Https.axiosPost(Https.httpUrls.designSingle, data).then(async (rv)=>{
saveCanvasJSONToSession()
// store.commit('DesignDetail/setPraeview',rv)
const sessionCanvasList = sessionStorage.getItem('canvasList');
const sessionCanvasList = await KeyValueDB.get('canvasList');
const canvasList = sessionCanvasList ? JSON.parse(sessionCanvasList) : []
for (let i = 0; i < canvasList.length; i++) {
const index = detailData.designDetail.clothes.findIndex(item => item.id === canvasList[i].id);
@@ -561,11 +560,10 @@ export default defineComponent({
segmentImage(detailData.selectDetail.maskUrl,partialDesign,size).then(async (rv)=>{
let front = detailData.frontBack.front[detailData.imgDomIndex]
let back = detailData.frontBack.back[detailData.imgDomIndex]
if(!front?.oldImageUrl)front.oldImageUrl = front.imageUrl
if(!front?.oldMaskUrl)front.oldMaskUrl = front.maskUrl
if(!back?.oldImageUrl)back.oldImageUrl = back.imageUrl
if(!front?.oldMaskUrl)store.commit('DesignDetail/updataDetailItem',{maskUrl:front.oldMaskUrl})
front.oldImageUrl = ''
front.oldMaskUrl = ''
back.oldImageUrl = ''
front.imageUrl = rv.targetFrontUrl
back.imageUrl = rv.targetBackUrl
store.commit('DesignDetail/canvasPreviewUpdata',{type:detailData.isEditPattern.value?'all':detailData.currentDetailType,callBack:setRevocation})
@@ -575,9 +573,9 @@ export default defineComponent({
img.src = detailData.selectDetail.path
})
}
const saveCanvasJSONToSession = ()=>{
const saveCanvasJSONToSession = async ()=>{
let canvasJSON = detailDom.canvasBox.getCanvasJSON()
const sessionCanvasList = sessionStorage.getItem('canvasList');
const sessionCanvasList = await KeyValueDB.get('canvasList');
const list = sessionCanvasList ? JSON.parse(sessionCanvasList) : []
let index = -1
list.forEach((item:any,i:number)=>{
@@ -590,7 +588,7 @@ export default defineComponent({
}else{
list[index].canvasJSON = canvasJSON
}
sessionStorage.setItem('canvasList', JSON.stringify(list));
await KeyValueDB.set('canvasList', JSON.stringify(list));
}
const detailEdit = async (str:any)=>{
if(str){
@@ -604,8 +602,10 @@ export default defineComponent({
// detailDom.canvasBox.editFront(str)
// }
detailDom.canvasBox.editFront(str)
let otherData = await updateOtherLayers('single')
await detailDom.canvasBox.updateOtherLayers(otherData)
if(str == 'canvasEditor'){
let otherData = await updateOtherLayers('single')
await detailDom.canvasBox.updateOtherLayers(otherData)
}
detailData.isEditPattern.value = str
}
}else{
@@ -725,12 +725,12 @@ export default defineComponent({
coverRevocation()
detailDom.detailLeft.sketchSysToLibrary()
}
const coverRevocation = ()=>{
const coverRevocation = async ()=>{
let itemDetail = JSON.parse(JSON.stringify(detailData.designDetail))
let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
let revocation = JSON.parse((await KeyValueDB.get("revocation") as any) || 'null')
revocation.splice(revocation.length-1,1,{designData:itemDetail,position:null})
sessionStorage.setItem('revocation', JSON.stringify(revocation));
sessionStorage.setItem('oppositeRevocation',JSON.stringify([]));
await KeyValueDB.set('revocation', JSON.stringify(revocation));
await KeyValueDB.set('oppositeRevocation',JSON.stringify([]));
}
const setSloganData = (data:any)=>{
detailData.selectDetail.sketchString = data
@@ -740,9 +740,9 @@ export default defineComponent({
}
onMounted(()=>{
})
onBeforeUnmount(()=>{
sessionStorage.removeItem('oppositeRevocation')
sessionStorage.removeItem('revocation')
onBeforeUnmount(async ()=>{
await KeyValueDB.remove('oppositeRevocation')
await KeyValueDB.remove('revocation')
store.commit('DesignDetail/clearDetailData')
})
@@ -775,36 +775,7 @@ export default defineComponent({
window.removeEventListener('beforeunload',beforeunload)
}
window.addEventListener('beforeunload',beforeunload)
// let url = Https.httpUrls.getDesignDetail + `?designItemId=34242&designPythonOutfitId=34004`
// this.loadingShow = true
// Https.axiosGet(url).then(
// async (rv: any) => {
// rv.clothes.forEach((item:any)=>{
// let a
// if(item.layersObject[0].imageCategory.indexOf("back") == -1){
// a = item.layersObject[0]
// item.layersObject[0] = item.layersObject[1]
// item.layersObject[1] = a
// }
// if(item.printObject.prints == null){
// item.printObject.prints = [{}]
// }
// })
// this.store.commit('setDesignItemDetail',rv)
// if(rv.others[0].printObject.path == null){
// this.body = false
// }else{
// this.body = true
// }
// this.setImgSize()
// this.generateHighDesignImg = rv.highDesignUrl
// this.designShowPrview = 1
// this.designDetailShow = true
// this.loadingShow = false
// }
// ).catch(rv=>{
// this.loadingShow = false
// })
},
})

46
src/component/Detail/canvas/index.vue
View File

@@ -18,7 +18,8 @@
:clothing-image-opts="{
imageMode:'contains',
}"
:hideCanvas="hideCanvas"
:isChangeCanvasSize="false"
:hideCanvas="hideCanvas || !isEditPattern"
ref="editCanvas">
</editCanvas>
<!-- <canvasContent ref="canvasContent"></canvasContent> -->
@@ -34,7 +35,7 @@
:clothing-image-opts="{
imageMode:'contains',
}"
:hideCanvas="hideCanvas"
:hideCanvas="hideCanvas || !isEditPattern"
ref="editCanvasBackFront">
</editCanvas>
</div>
@@ -117,7 +118,7 @@ export default defineComponent({
getCanvasIfEdit:inject('getCanvasIfEdit')as any,
canvasInstance:null as any,
canvasJSON:'',
hideCanvas: computed(()=>(store.state.Workspace.projectPath !== route.fullPath && props.isEditPattern)),
hideCanvas: computed(()=>(store.state.Workspace.projectPath !== route.fullPath)),
otherData:computed(()=>({
canvasId: store.state.DesignDetail.selectDetail.canvasId,
color: store.state.DesignDetail.selectDetail.color,
@@ -135,38 +136,20 @@ export default defineComponent({
const editFront = (str:any)=>{//编辑前后片
let canvasJSON = '' as any
if(detailData.currentView === 'canvasEditor'){
sessionStorage.setItem('sketchEdit',detailDom.editCanvas.getJSON())
canvasJSON = sessionStorage.getItem('frontBackEdit');
}else if(detailData.currentView === 'redGreenExample'){
sessionStorage.setItem('frontBackEdit',detailDom.editCanvasBackFront.getJSON())
canvasJSON = sessionStorage.getItem('sketchEdit');
}
// detailData.canvasLoad = false
detailData.currentView = str
if(canvasJSON){
// detailData.canvasLoad = true
if(detailData.currentView === 'redGreenExample'){
nextTick(()=>{
if(detailData.currentView === 'redGreenExample'){
detailDom.editCanvas.loadJSON(canvasJSON)
}else{
detailDom.editCanvasBackFront.loadJSON(canvasJSON)
}
setCanvas(detailData.selectDetail.path).then(()=>{
// detailData.canvasLoad = true
})
})
}else{
if(detailData.currentView === 'redGreenExample'){
nextTick(()=>{
setCanvas(detailData.selectDetail.path).then(()=>{
// detailData.canvasLoad = true
})
nextTick(()=>{
setCanvas(detailData.frontBack.front[detailData.imgDomIndex].maskUrl).then(()=>{
// detailData.canvasLoad = true
})
}else{
nextTick(()=>{
setCanvas(detailData.frontBack.front[detailData.imgDomIndex].maskUrl).then(()=>{
// detailData.canvasLoad = true
})
})
}
})
}
}
const updateOtherLayers = (obj:any)=>{
@@ -211,6 +194,7 @@ export default defineComponent({
// detailData.canvasConfig.height = domHeight
detailData.canvasConfig.width = img.width
detailData.canvasConfig.height = img.height
detailData.canvasConfig.initZoom = true
res('')
}
@@ -339,7 +323,6 @@ export default defineComponent({
const canvasLoadJsonSuccess = async ()=>{
let otherData = await props.updateOtherLayers()
await updateOtherLayers(otherData)
if(detailData.changeSketchUpdateFrontBack){
await detailData.changeSketchUpdateFrontBack()
detailData.changeSketchUpdateFrontBack = null
@@ -389,9 +372,6 @@ export default defineComponent({
if(front?.oldMaskUrl)front.maskUrl = front.oldMaskUrl
if(back?.oldImageUrl)back.imageUrl = back.oldImageUrl
if(front?.oldMaskUrl)store.commit('DesignDetail/updataDetailItem',{maskUrl:front.maskUrl})
sessionStorage.removeItem('frontBackEdit');
sessionStorage.removeItem('sketchEdit');
detailData.canvasLoad = false
// privewDetail()
})

1
src/component/Detail/detailLeft/sketch.vue
View File

@@ -79,7 +79,6 @@ export default defineComponent({
if(data?.imgUrl)data.url = data.imgUrl
let value = {
data,
id,
}
if(detailData.currentDetailType == 'sketch'){
detailData.selectDetail.sketchString = ''

74
src/component/Detail/detailRight/editPrintElement.vue
View File

@@ -53,7 +53,7 @@
</a-slider> -->
<a-popover
trigger="click"
placement="topRight"
placement="leftTop"
destroyTooltipOnHide
:title="t('Canvas.repeatSetting')"
>
@@ -252,7 +252,7 @@ export default defineComponent({
designType:data.designType,
ifSingle:editPrintElementData.stateOverallSingle == 'single',
level2Type:data.level2Type,
location,
location:editPrintElementData.stateOverallSingle == 'single'?location:[0,0],
minIOPath:data.minIOPath || data.originalUrl,
path:data.url,
priority:editPrintElementData.printZIndex,
@@ -276,7 +276,8 @@ export default defineComponent({
}else{
let x = Number(style.left.replace(/px/g,''))
let y = Number(style.top.replace(/px/g,''))
location = [(x*sketchWH[0]) ,(y*sketchWH[1])]
location = item.location
// location = [(x*sketchWH[0]) ,(y*sketchWH[1])]
scale = item.scale
// scale = [item.pattern.style.width/item.pattern.style.height,item.pattern.style.height/item.pattern.style.width]
// location = [item.pattern.style.left,item.pattern.style.top]
@@ -380,19 +381,21 @@ export default defineComponent({
}
if(item.ifSingle){
editPrintElementData.printStyleList[props.type].single.push(item)
}else{
}
if(!item.ifSingle){
item.token = Date.now().toString() + (editPrintElementData.printStyleList[props.type].overall.length + '')
// editPrintElementData.printStyleList[props.type].overall = []
editPrintElementData.printStyleList[props.type].overall.push(item)
setTimeout(()=>{
editPrintElementDom.pingpuRef.updataList([
{
action: ACTIONS.ADD,
data: item,
},
]);
})
if(editPrintElementData.stateOverallSingle == 'overall'){
setTimeout(()=>{
editPrintElementDom.pingpuRef.updataList([
{
action: ACTIONS.ADD,
data: item,
},
]);
})
}
}
}
const setPosition = ()=>{
@@ -423,10 +426,10 @@ export default defineComponent({
editPrintElementData.printStyleList[props.type].single = []
editPrintElementData.printStyleList[props.type].overall = []
arr.forEach((item:any)=>{
if(!item.ifSingle){
editPrintElementData.stateOverallSingle = 'overall',
state = false
}
// if(!item.ifSingle){
// editPrintElementData.stateOverallSingle = 'overall',
// state = false
// }
getItemPosition(item)
})
setItemPosition()
@@ -470,16 +473,21 @@ export default defineComponent({
setPosition()
},{immediate: true,})
watch(()=>editPrintElementData.stateOverallSingle,(newVal)=>{
let arr = editPrintElementData.printStyleList[props.type][newVal]
let arr:any = editPrintElementData.selectDetail.newDetail?.print || editPrintElementData.selectDetail.printObject.prints
if(props.type == 'element'){
arr = editPrintElementData.selectDetail.newDetail?.element || editPrintElementData.selectDetail.trims.prints
}
if(editPrintElementData.selectDetail.newDetail?.[editPrintElementData.currentDetailType]){
arr = editPrintElementData.selectDetail.newDetail[editPrintElementData.currentDetailType]
}
if(arr.length > 0){
editPrintElementData.imgDomIndex = 0
if(newVal == 'overall'){
editPrintElementData.printStyleList[props.type].single = []
editPrintElementData.printStyleList[props.type].overall = []
editPrintElementData.printStyleList[props.type][newVal] = []
// editPrintElementData.printStyleList[props.type].single = []
// editPrintElementData.printStyleList[props.type].overall = []
arr.forEach((item:any,index:number) => {
getItemPosition(item)
});
}
}else{
editPrintElementData.imgDomIndex = -1
}
@@ -900,8 +908,7 @@ export default defineComponent({
}
const inputFillOffset = (offset:any)=>{
let arr = editPrintElementData.printStyleList[props.type].overall
let location = [offset.left * offset.size[0] / 100,offset.top * offset.size[1] / 100]
arr[editPrintElementData.imgDomIndex].location = location
arr[editPrintElementData.imgDomIndex].location = [offset.left * offset.size[0] / 100,offset.top * offset.size[1] / 100]
editPrintElementDom.pingpuRef.updataList([
{
action: ACTIONS.UPDATE,
@@ -1111,9 +1118,8 @@ export default defineComponent({
.habit_System_Designer {
align-items: center;
display: flex;
justify-content: flex-end;
margin-top: 1.8rem;
margin-right: .8rem;
margin-left: .8rem;
.ant-slider-track,
.ant-slider-rail {
@@ -1207,20 +1213,22 @@ export default defineComponent({
// width: 100%;
// max-height: 70%;
width: max-content;
overflow-y: auto;
overflow-x: hidden;
&.active{
flex-direction: row;
}
&::-webkit-scrollbar {
display: none;
}
.designOpenrtion_imgMask{
width: auto;
height: auto;
width: 100%;
height: 100%;
min-width: 60%;
overflow-y: auto;
overflow-x: hidden;
// max-height: 80%;
position: relative;
&::-webkit-scrollbar {
display: none;
}
>img{
z-index: 2;
position: relative;

6
src/component/Detail/detailRight/overallSetting/RepeatSetting.vue
View File

@@ -17,7 +17,7 @@
:max="1000"
:step="1"
is-input
:tipFormatter="(v) => `${scale}%`"
:tipFormatter="(v) => `${scale.toFixed(0)}%`"
:value="scale"
@input="inputFillScale"
/>
@@ -121,8 +121,8 @@
]);
const inputFillScale = (e) => {
const scale = e / 100;
console.log(scale)
emit("inputFillScale", scale);
console.log(scale.toFixed(2))
emit("inputFillScale", scale.toFixed(2));
};
const inputOffset = async (e:any)=>{
emit('inputFillOffset', {...e,size: await sketchSize()})

1
src/component/Detail/model/modelNav.vue
View File

@@ -102,6 +102,7 @@ export default defineComponent({
}
}).then((rv)=>{
if(rv)store.commit('DesignDetail/setDesignColthes',item.id)
console.log(JSON.parse(JSON.stringify(item)),'==========')
})
}
const deleteDetailItem = (id:number)=>{

7
src/component/Detail/model/modelPosition.vue
View File

@@ -36,6 +36,7 @@ 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';
@@ -393,11 +394,11 @@ export default defineComponent({
initMoveableForSelected()
},{immediate: true,})
const setRevocation = ()=>{
const setRevocation = async ()=>{
let frontBack = JSON.parse(JSON.stringify(detailData.frontBack))
let revocation:any = JSON.parse((sessionStorage.getItem("revocation") as any))
let revocation:any = JSON.parse((await KeyValueDB.get("revocation") as any) || '[]')
revocation.push({designData:null,position:frontBack})
sessionStorage.setItem('revocation', JSON.stringify(revocation));
KeyValueDB.set('revocation', JSON.stringify(revocation));
}
const upDataDetail = async ()=>{
//同步到selectDetail数据中，

31
src/store/Detail/designDetail.ts
View File

@@ -175,12 +175,12 @@ const DesignDetail : Module<DesignDetail,RootState> = {
state.designDetail.clothes.forEach((item:any) => {
if(item.id == data){
state.selectDetail = item
state.frontBack.front.forEach((v:any,index:any)=>{
v.designOpenrtionBtn = false
if(v.id == data){
v.designOpenrtionBtn = true
}
})
// state.frontBack.front.forEach((v:any,index:any)=>{
// v.designOpenrtionBtn = false
// if(v.id == data){
// v.designOpenrtionBtn = true
// }
// })
}
});
},
@@ -315,6 +315,24 @@ const DesignDetail : Module<DesignDetail,RootState> = {
detailItem.offset = [0,0]
detailItem.transpose = item.transpose || [1,1]
detailItem.rotate = item.rotate || 0
function isJSONString(str) {
try {
JSON.parse(str);
return true; // 解析成功，是有效的JSON字符串
} catch (e) {
return false; // 解析失败，不是有效的JSON字符串
}
}
item.trims?.prints?.forEach((item:any) => {
if(isJSONString(item.object)){
item.object = JSON.parse(item.object)
}
});
item.printObject?.prints?.forEach((item:any) => {
if(isJSONString(item.object)){
item.object = JSON.parse(item.object)
}
});
detailItem.printObject = item.printObject
detailItem.trims = item.trims
detailItem.type = item.type
@@ -345,7 +363,6 @@ const DesignDetail : Module<DesignDetail,RootState> = {
uploadDetail(state.selectDetail)
}
}
if(value.fun)value.fun()
},

71
src/tool/indexedDB.js Normal file
View File

@@ -0,0 +1,71 @@
const KeyValueDB = {
dbName: 'kvStorage',
storeName: 'kvStore',
async init() {
return new Promise((resolve) => {
const request = indexedDB.open(this.dbName, 1);
request.onupgradeneeded = (e) => {
const db = e.target.result;
if (!db.objectStoreNames.contains(this.storeName)) {
db.createObjectStore(this.storeName);
}
};
request.onsuccess = () => resolve(request.result);
});
},
// 设置值（类似 localStorage.setItem）
async set(key, value) {
const db = await this.init();
return new Promise((resolve) => {
const tx = db.transaction(this.storeName, 'readwrite');
tx.objectStore(this.storeName).put(value, key);
tx.oncomplete = () => resolve();
});
},
// 获取值（类似 localStorage.getItem）
async get(key) {
const db = await this.init();
return new Promise((resolve) => {
const tx = db.transaction(this.storeName, 'readonly');
const request = tx.objectStore(this.storeName).get(key);
request.onsuccess = () => resolve(request.result);
});
},
// 删除值
async remove(key) {
const db = await this.init();
return new Promise((resolve) => {
const tx = db.transaction(this.storeName, 'readwrite');
tx.objectStore(this.storeName).delete(key);
tx.oncomplete = () => resolve();
});
},
// 清空所有
async clear() {
const db = await this.init();
return new Promise((resolve) => {
const tx = db.transaction(this.storeName, 'readwrite');
tx.objectStore(this.storeName).clear();
tx.oncomplete = () => resolve();
});
},
// 获取所有键
async keys() {
const db = await this.init();
return new Promise((resolve) => {
const tx = db.transaction(this.storeName, 'readonly');
const store = tx.objectStore(this.storeName);
const request = store.getAllKeys();
request.onsuccess = () => resolve(request.result);
});
}
};
export {KeyValueDB}