液化

src/component/HomePage/ExportModel.vue

@@ -179,7 +179,7 @@
 								<input type="file" @change="uploadImage">
 							</label>
 							<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
-						<i @click="setLiquefaction()">液化</i>
+						<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i>
 					</div>
 					<!-- <div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.tool}">
 						<div class="exportCanvasBox_left_tool_item">
@@ -506,7 +506,7 @@ export default defineComponent({
 					canvas.loadFromJSON(oldExportCanvas, () => {});
 					isShowMark.value = false
 				}else{
-					nextTick(async ()=>{
+					await nextTick(async ()=>{
 						for (const item of arr) {
 							for (const key in allBoardData.value) {
 								if (item == key) {
@@ -588,50 +588,16 @@ export default defineComponent({
 															} else {
 																position = sketchGroupingItem[sketchXyIndex.minIndex];
 															}
+														
 														}
-														setCanvasImage(img,key,position.x,position.y,allItem)//设置图片
-														position.height = img.height * scaleWH + margin;
-														if (key == "sketchboardFiles") {
-															if (sketchGroupingItem.length <3) {
-																sketchGroupingItem.push(JSON.parse(JSON.stringify(position)));
-															}
-															if (sketchGroupingItem.length >2) {
-																let sketchXyIndex = {
-																	maxIndex: 0,
-																	maxNum: 0,
-																	minNum: 999999,
-																	minIndex: 0,
-																};
-																sketchGroupingItem.forEach(
-																	(sketchItem,sketchIndex) => {
-																		if (sketchItem.y + sketchItem.height < sketchXyIndex.minNum) {
-																			sketchXyIndex.minNum = sketchItem.y + sketchItem.height
-																			sketchXyIndex.minIndex = sketchIndex;
-																		}
-																		if (sketchItem.y + sketchItem.height > sketchXyIndex.maxNum) {
-																			sketchXyIndex.maxNum = sketchItem.y + sketchItem.height
-																			sketchXyIndex.maxIndex = sketchIndex;
-																		}
-																	}
-																);
-																sketchGroupingItem[sketchXyIndex.minIndex].y = sketchXyIndex.minNum
-																// sketchGroupingItem[sketchXyIndex.maxIndex].y = sketchXyIndex.maxNum
-																if (allBoardData.value[key].length == allItemIndex + 1) {
-																	maxHeight = sketchXyIndex.maxNum
-																} else {
-																	position = sketchGroupingItem[sketchXyIndex.minIndex];
-																}
-															}
-														}
-														if(key == "sketchboardFiles" && sketchGroupingItem.length >2){
+													}
+													if(key == "sketchboardFiles" && sketchGroupingItem.length >2){
 														}else{
 															position.x += img.width * scaleWH + margin;
 														}
-														let str = `${img.width} + ${scaleWH}`
 														img.lock_rotation = true;
 														oldKey = key;
 														resolve()
-													}
 													canvas.add(img);
 													
 												},{ crossOrigin: "Anonymous" });
@@ -1984,43 +1950,31 @@ export default defineComponent({
 		}
 
 		//液化
+		//当前选择的液化对象
+		let liquefactionData = ref(null)
 		let liquefaction = ref(null)
 		let submitLiquefaction = (rv)=>{
-
+			const originalWidth = liquefactionData.width * liquefactionData.scaleX; // 保存原始宽度
+			const originalHeight = liquefactionData.height * liquefactionData.scaleY; // 保存原始高度
+			console.log(liquefactionData);
+			liquefactionData.setSrc(rv, function() {
+				liquefactionData.scaleToWidth(originalWidth);
+				liquefactionData.scaleToHeight(originalHeight);
+				delete liquefactionData.minioUrl
+				canvas.renderAll();
+				updateCanvasState()
+			});
 		}
 		let setLiquefaction = ()=>{
-			const selectedObject = canvas.getActiveObjects();
-			if (selectedObject.length > 0) {
-				// 创建一个新的画布用于生成图片
-				const tempCanvas = new fabric.Canvas();
-				tempCanvas.setDimensions({
-				width: selectedObject.width,
-				height: selectedObject.height,
-				});
-				let cloneCount = 0;
-				selectedObject.forEach((obj) => {
-                    obj.clone((clonedObject) => {
-                        tempCanvas.add(clonedObject);
-                        clonedObject.set({ left: obj.left, top: obj.top }); // 设置位置
-                        cloneCount++;
-
-                        // 当所有对象都克隆完成后生成图片
-                        if (cloneCount === selectedObject.length) {
-                            const dataURL = tempCanvas.toDataURL();
-							console.log(dataURL);
-                            console.log('Image URL:', dataURL);
-                            // 可以根据需要使用 dataURL，例如显示在 img 标签中
-                        }
-                    });
-                });
-
-				// 生成图片的地址
-				
+			const activeObjects = canvas.getActiveObjects(); // 获取选中的对象
+			if (activeObjects.length === 1 && activeObjects[0].type === 'image') {
+				liquefactionData = activeObjects[0]
+				liquefaction.value.init(activeObjects[0])
 			} else {
 				console.log('No object selected.');
+				message.info(useI18.t('exportModel.jsContent6'))
 				return null;
 			}
-			// liquefaction.value.init()
 		}
         onMounted(() => {
 			let arr = [

src/component/HomePage/Generate.vue

@@ -174,7 +174,7 @@
 				<a-spin size="large" />
 			</div>
         </div>
-		<scaleImage ref="scaleImage" :isCanvas="true" :workspace="workspace"></scaleImage>
+		<scaleImage ref="scaleImage" :isCanvas="type_.type2 == 'Sketchboard'" :workspace="workspace"></scaleImage>
 		<createSlogan ref="createSlogan" @setSloganData="setSloganData"></createSlogan>
     </div>
 </template>

src/component/HomePage/MoodboardUpload.vue

@@ -440,15 +440,16 @@ export default defineComponent({
 				// let layout:any = isMoible() ? this.$refs.layoutMobile : this.$refs.layout
 				let layout:any = this.$refs.layout
 				if(this.layoutList.length <= 0){
-					await this.layout()
+					// await this.layout()
+					let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
+					this.layoutList = arr
 				}
 				if(window.screen.width<1300){
 					layout.isMobile = true
 				}else{
 					layout.isMobile = false
 				}
-				// let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
-				// this.layoutList = arr
+				
 				layout.init()
 			}else{
 				message.info(this.t('MoodboardUpload.jsContent5'))
@@ -503,14 +504,12 @@ export default defineComponent({
 						class:this.moodb_className,
 					}
 					this.store.commit("setDisposeMoodboardPosition", obj);
-					let moodboardPosition = this.store.state.UploadFilesModule.moodboardPosition
 					domTurnImg(layoutCentent).then((rv)=>{
 						let file = rv
 						let param = new FormData(); 
 						param.append('inPin','0')
 						param.append('level1Type','Moodboard')
 						param.append('gender','')
-						param.append('moodboardPosition',JSON.stringify(moodboardPosition))
 						param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
 						param.append('file',file);
 						let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}

src/component/HomePage/layout.vue

@@ -29,11 +29,8 @@
 					</div>
 				</div>
 				<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent">
-					<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @mousedown="setpitch(item,index)"  @touchstart="setpitch(item,index)" ref="content" >
+					<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="item" @mousedown="setpitch(item,index)"  @touchstart="setpitch(item,index)" ref="content" >
 						<img crossOrigin="anonymous" :src="item.imgUrl" :style="{'transform':item.angle?`translate(-50%, -50%) scale(${item.zoom}) rotateZ(${item.angle}deg)`:`translate(-50%, -50%) scale(${item.zoom}) rotateZ(${item.angle}deg)`}"  draggable="false" :class="moodbClassName[index]" v-modelImg> 
-						<div>
-							
-						</div>
 						<ul v-show="item.setPitch" class="layout_btn" >
 							<li class="layout_btn_top" v-compile.stop="'top'"></li>
 							<li class="layout_btn_bottom" v-compile.stop="'bottom'"></li>
@@ -704,7 +701,7 @@ export default defineComponent({
 			this.layoutList = parentList
 			this.moodbList = this.moodb[parentList.length-1]
 			this.moodbClassName = this.styleObj?.class?this.styleObj?.class:[]
-			this.moodItemScale = this.layoutList[0].zoom*100
+			this.moodItemScale = (this.layoutList?.[0]?this.layoutList[0].zoom:1)*100
 
 			this.initDomStyle()
 			
@@ -750,14 +747,21 @@ export default defineComponent({
 		changeTemplateModal(){
 			this.layout = !this.layout
 		},
-		setIndex(arr:any){
-			const nums = arr.map((obj:any) => obj.num);
-			const sortedNums = [...nums].sort((a, b) => a - b);
-			GO.zIndex = sortedNums[sortedNums.length - 1] + 1
-			const numToNewValue = new Map();
-			sortedNums.forEach((num, index) => numToNewValue.set(num, index + 1));
-			arr.forEach((obj:any) => {
-				obj.num = numToNewValue.get(obj.num);
+		setIndex(styleArr:any){
+			let arr = JSON.parse(JSON.stringify(styleArr))
+			const nums = arr.map((obj:any,index:any) => {
+				obj.num = index
+				return {
+					num: obj.num,
+					zIndex: obj['z-index']?obj['z-index']:1
+				}
+			});
+			const sortedNums = nums.sort((a, b) => a.zIndex - b.zIndex);
+			
+			GO.zIndex = sortedNums.length + 1
+			// GO.zIndex = sortedNums[sortedNums.length - 1].zIndex + 1
+			sortedNums.forEach((item:any,index:any) => {
+				arr[item.num]['z-index'] = index + 1
 			});
 			return arr
 		},
@@ -788,6 +792,7 @@ export default defineComponent({
 		initStyle(dom:any,style:any){
 			if(!style)return
 			for (const [property, value] of Object.entries(style)) {
+				
 				dom.style.setProperty(property, value);
 			}
 		},
@@ -812,21 +817,19 @@ export default defineComponent({
         //提交模板
         submitTemplate() {
 			this.loadingShow = true
-			this.setIndex(this.styleObj.domStyle)//index统一排序设置值
+			this.styleObj.domStyle = this.setIndex(this.styleObj.domStyle)//index统一排序设置值
 			this.store.commit("setDisposeMoodboardPosition", this.styleObj);
 			this.layoutList.forEach((v:any)=>{
 				v.setPitch = false
 			})
 			nextTick().then(async ()=>{
 				let layoutCentent = document.getElementById('layoutCentent')
-				let moodboardPosition = this.store.state.UploadFilesModule.moodboardPosition
 				domTurnImg(layoutCentent).then((rv)=>{
 					let file =rv
 					let param = new FormData(); 
 					param.append('inPin','0')
 					param.append('gender','')
 					param.append('level1Type','Moodboard')
-					param.append('moodboardPosition',moodboardPosition)
 					param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
 					param.append('file',file);
 					let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}

src/component/HomePage/scaleImage.vue

@@ -130,13 +130,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, h, ref ,toRefs,computed,reactive, nextTick} from "vue";
+import { defineComponent, h, ref ,toRefs,createVNode,reactive, nextTick} from "vue";
 import { Https } from "@/tool/https";
+import { Modal } from "ant-design-vue";
 // import domTurnImg from '@/tool/domTurnImg'
 import { useStore } from "vuex";
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { downloadIamge } from "@/tool/util";
 import { getCookie,setCookie } from "@/tool/cookie";
-
+import { useI18n } from "vue-i18n";
 import generalMiniCanvas from "@/component/modules/generalMiniCanvas.vue";
 export default defineComponent({
 	components:{generalMiniCanvas},
@@ -313,8 +315,24 @@ export default defineComponent({
 					rv.category = scaleImageList.value[scaleImageIndex.value]?.category
 					rv.categoryValue = scaleImageList.value[scaleImageIndex.value]?.categoryValue
 					delete rv.url
-					scaleImageList.value.unshift(rv)
-					loadingShow.value = false
+					Modal.confirm({
+						title: useI18n().t('scaleImage.overlayOrNot'),
+						icon: createVNode(ExclamationCircleOutlined),
+						okText: 'Yes',
+						cancelText: 'No',
+						mask:false,
+						centered:true,
+						onOk() {
+							scaleImageList.value[scaleImageIndex.value] = rv
+							loadingShow.value = false
+							scaleImage.value = false
+						},
+						onCancel(){
+							scaleImageList.value.unshift(rv)
+							loadingShow.value = false
+							scaleImage.value = false
+						}
+					});
 				}
 			).catch(res=>{
 				loadingShow.value = false