push Develop

src/component/Detail/DesignDetail.vue

@@ -79,6 +79,7 @@
 								<i class="fi fi-rs-comments"></i>
 								<div>{{ $t('DesignDetail.CurrentApparel') }}</div>
 								<i class="fi fi-rr-edit" @click.stop="openCurrent(1)"></i>
+								<i v-show="current?.id" class="fi fi-rs-pencil-paintbrush" @click.stop="addDetail"></i>
 							</div>
 							<div class="centent_div" v-if="current?.id" @click="openCurrent(1)">
 								<img :src="current?.path" alt="" class="" @click="openCurrent(1)">
@@ -93,12 +94,14 @@
 								<i class="fi fi-rr-edit" @click.stop="openCurrent(2)"></i>
 							</div>
 							<div class="Guide_1_20 clothes_item_icon" :class="[driver__.driver?'showEvents':'']">
-								<div class="centent_div" v-if="current?.printObject?.prints?.[0]?.path" @click="openCurrent(2)">
+								<div class="centent_div centent_print" v-if="current?.printObject?.prints?.[0]?.path && current?.printObject?.prints.length > 1" @click="openCurrent(2)">
+									<img v-for="item in current?.printObject?.prints" :key="item.id" :src="item.path" alt="">
+								</div>
+								<div v-else-if="current?.printObject?.prints?.[0]?.path && current?.printObject?.prints.length == 1" class="centent_div">
 									<img :src="current?.printObject?.prints[0]?.path" alt="">
 								</div>
 								<i v-else class="fi fi-rr-picture centent" @click="openCurrent(2)"></i>
 							</div>
-							
                         </div>
 						<div class="clothes_detail_item clothes_detail_item_color" :class="[current?.id?'':'hideCursor']">
                             <div class="clothes_item_header">
@@ -117,7 +120,19 @@
 								</div>
 							</div>
                         </div>
-						
+						<div class="clothes_detail_item clothes_detail_item_elements" :class="[current?.id?'':'hideCursor']">
+                            <div class="clothes_item_header">
+								<i class="fi fi-rs-comments"></i>
+								<div>Current Elements</div>
+								<i class="fi fi-rr-edit" @click.stop="openCurrent(4)"></i>
+							</div>
+							<div class="Guide_1_20 clothes_item_icon" :class="[driver__.driver?'showEvents':'']">
+								<!-- <div class="centent_div" v-if="current?.printObject?.prints?.[0]?.path" @click="openCurrent(2)">
+									<img :src="current?.printObject?.prints[0]?.path" alt="">
+								</div> -->
+								<i class="fi fi-rr-picture centent" @click="openCurrent(4)"></i>
+							</div>
+                        </div>
                     </div>
                 </div>
 				<DesignDetailAlter ref="DesignDetailAlter"></DesignDetailAlter>
@@ -139,6 +154,7 @@
                 </div>
 
             </div>
+			<addDetails ref="addDetails" @setSloganData="setSloganData"></addDetails>
         </a-modal>
          <div class="mark_loading" v-show="loadingShow">
             <a-spin size="large" />
@@ -163,6 +179,7 @@ import { openGuide,driverObj__ } from "@/tool/guide";
 import GO from '@/tool/GO';
 import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
 import { useI18n } from 'vue-i18n'
+import addDetails from '@/component/Detail/addDetails.vue'
 export default defineComponent({
     components:{
         Draggable,
@@ -170,6 +187,7 @@ export default defineComponent({
 		setDesignItem,
 		magnifyingGlass,
 		setDesignItemMobile,
+		addDetails,
     },
     setup() {
         const store = useStore();
@@ -212,6 +230,11 @@ export default defineComponent({
 		provide('body',body)
 		let moible:any = isMoible()
 		provide('moible',moible)
+		let exhibitionList = ref({
+			print:[],
+			elements:[],
+		})
+		provide('exhibitionList',exhibitionList)
 		let {t} = useI18n()
 		//创建单件衣服
 		let setClothes:any = ref()
@@ -239,6 +262,7 @@ export default defineComponent({
 			revocationShow,
 			driver__,
 			moible,
+			exhibitionList,
 			t,
 			setClothes,
 			deleteShow,
@@ -324,7 +348,21 @@ export default defineComponent({
 			handler: function(newval) {
 				// this.removeRevocation()
 			}
-		}
+		},
+		'current.printObject.prints':{
+			handler(newVal,oldVal){
+				if(newVal && newVal.length > 0){
+					this.exhibitionList.print = this.setExhibitionList(newVal)
+				}
+			}
+		},
+		'current.trims.prints':{
+			handler(newVal,oldVal){
+				if(newVal && newVal.length > 0){
+					this.exhibitionList.elements = this.setExhibitionList(newVal)
+				}
+			}
+		},
 	},
 	provide() {
 		return {
@@ -387,7 +425,10 @@ export default defineComponent({
 				}
 			}
         },
-	
+		addDetail(){
+			let addDetails:any = this.$refs.addDetails
+			addDetails.init(this.current,this.currentIndex)
+		},
         closeModal(submit:any){
             if(this.designShowPrview == 1){
 				if(this.ifSubmit && submit == ''){
@@ -423,7 +464,19 @@ export default defineComponent({
 				// this.designItemDetailUrl = {}
             }
         },
-		
+		//切换当前展示的是印花还是elements
+		setExhibitionList(arr:any){
+			const seen = new Map();
+			return arr.filter((obj:any, index:any, self:any) => {
+				const key = obj.minIOPath; // 替换成你想要去重的属性名
+				if (seen.has(key)) {
+					return false;
+				} else {
+					seen.set(key, true);
+					return true;
+				}
+			});
+		},
         showDesignDetailModal(data:any,str:string){
 			this.moible = isMoible()
 			this.designItemId = data.design.designItemId
@@ -443,7 +496,7 @@ export default defineComponent({
 							item.layersObject[1] = a
 						}
 						if(item.printObject.prints == null){
-							item.printObject.prints = [{}]
+							item.printObject.prints = []
 						}else{
 							item.printObject.prints.forEach((element:any) => {
 								if(!element.designType){
@@ -674,6 +727,8 @@ export default defineComponent({
 					id:item.id,
 					path:item.minIOPath,
 					gradient:{},
+					trims:item.trims,
+					sketchString:item.sketchString,
 					changed:item.changed?item.changed:false,
 					designType:item.designType?item.designType:"Library",
 					offset:item.layersObject?.[1]?.offset == null?[0,0]:item.layersObject[1].offset,
@@ -711,6 +766,7 @@ export default defineComponent({
 				gender:workspace?.sex,
 				designSingleItemDTOList:clothes,
 				isPreview:false,
+				sketchString:'',
 				ifSubmit:designItemDetail.isPreview,
 				processId:String(this.userInfo?.userId),
 				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
@@ -772,6 +828,7 @@ export default defineComponent({
 					img.onload = () => {
 						imgWidth = img.width
 						resolve(img)
+						img.remove()
 					};
 					img.onerror = reject;
 					img.src = url;
@@ -852,38 +909,46 @@ export default defineComponent({
 			}else{
 				this.deleteShow = false
 				
-				let designItemDetail = JSON.parse(JSON.stringify(this.designItemDetail))
-				
 				let data:any = this.setSubmitItem('preview',true)
 				if(!this.deleteItemShow){
 					return	
 				}
-				this.loadingShow = true
-				Https.axiosPost(Https.httpUrls.designSingle, data).then(
-					(rv) => {
-						this.designItemDetail.currentFullBodyView = rv.currentFullBodyView
-						this.designItemDetail.ifSubmit = true
-						this.loadingShow = false
-						// if(this.designItemDetail.clothes[this.designItemDetail.clothes.legnth-1] && !this.designItemDetail.clothes[this.designItemDetail.clothes.legnth-1].id){
-						// 	this.designItemDetail.clothes.split(this.designItemDetail.clothes.legnth-1,1)
-						// }
-						if(data.designSingleItemDTOList[data.designSingleItemDTOList.legnth-1] && !data.designSingleItemDTOList[data.designSingleItemDTOList.legnth-1].id){
-							data.designSingleItemDTOList.split(data.designSingleItemDTOList.legnth-1,1)
-						}
-						this.store.commit("setDesignItemDetail", designItemDetail);
-						console.log(123);
-						this.store.commit("setDesignPreviewData", data);
-						this.setRevocation(designItemDetail,data)
-						this.deleteItemShow = false
-					}
-				).catch(res=>{
-					this.loadingShow = false
-				});
+				this.setDesignSingle(data)
 			}
 			let DesignDetailAlter:any = this.$refs.DesignDetailAlter
 			DesignDetailAlter.changePlace()
 			DesignDetailAlter.terminate()
 		},
+		setDesignSingle(data:any){
+			this.loadingShow = true
+			let designItemDetail = JSON.parse(JSON.stringify(this.designItemDetail))
+			Https.axiosPost(Https.httpUrls.designSingle, data).then(
+				(rv) => {
+					// this.current.minIOPath = rv.clothes[this.currentIndex].minIOPath
+					designItemDetail.clothes[this.currentIndex].minIOPath = rv.clothes[this.currentIndex].minIOPath
+					this.current.path = rv.clothes[this.currentIndex].minIOPath
+					designItemDetail.clothes[this.currentIndex].path = rv.clothes[this.currentIndex].path
+					designItemDetail.clothes[this.currentIndex].sketchString = ''
+					data.designSingleItemDTOList[this.currentIndex].sketchString =''
+					data.designSingleItemDTOList[this.currentIndex].path =rv.clothes[this.currentIndex].minIOPath
+					designItemDetail.currentFullBodyView = rv.currentFullBodyView
+					designItemDetail.ifSubmit = true
+					this.loadingShow = false
+					// if(this.designItemDetail.clothes[this.designItemDetail.clothes.legnth-1] && !this.designItemDetail.clothes[this.designItemDetail.clothes.legnth-1].id){
+					// 	this.designItemDetail.clothes.split(this.designItemDetail.clothes.legnth-1,1)
+					// }
+					if(data.designSingleItemDTOList[data.designSingleItemDTOList.legnth-1] && !data.designSingleItemDTOList[data.designSingleItemDTOList.legnth-1].id){
+						data.designSingleItemDTOList.split(data.designSingleItemDTOList.legnth-1,1)
+					}
+					this.store.commit("setDesignItemDetail", designItemDetail);
+					this.store.commit("setDesignPreviewData", data);
+					this.setRevocation(designItemDetail,data)
+					this.deleteItemShow = false
+				}
+			).catch(res=>{
+				this.loadingShow = false
+			});
+		},
 		setDelete(num:number){
 			this.designItemDetail.clothes.splice(num,1)
 			this.deleteItemShow = true
@@ -942,12 +1007,16 @@ export default defineComponent({
 				"color": color,
 				gradient:gradient,
 				priority:10,
+				trims:{
+					"ifSingle": null,
+					"prints":null,
+				},
 				"printObject": {
 					"ifSingle": null,
 					"prints": [
-						{}
 					]
 				},
+				sketchString:'',
 				"layersObject": [
 				]
 			}
@@ -1001,17 +1070,19 @@ export default defineComponent({
 					}
 				});
 			}
+			this.current.sketchString = ''
 			this.currentIndex = this.currentIndex>0?this.currentIndex:0
 			data.designSingleItemDTOList[this.currentIndex] = {
 				color:`${this.current.color.r} ${this.current.color.g} ${this.current.color.b}`,
-
 				id:this.current.id?this.current.id:'',
 				changed:this.current.changed?this.current.changed:false,
 				designType:this.current.designType?this.current.designType:'Library',
 				path:this.current.minIOPath?this.current.minIOPath:'',
 				offset:this.current.layersObject?.[1]?.offset?this.current.layersObject[1].offset:[0,0],
 				priority:this.current.priority,
+				trims:this.current.trims,
 				scale:this.current.layersObject?.[1]?.scale?this.current.layersObject[1].scale:[1,1],
+				sketchString:'',
 				printObject:{
 					ifSingle:this.current?.printObject?.ifSingle == null ? false : this.current?.printObject?.ifSingle,
 					// prints:this.current?.printObject[0]?.path == null ? [] : [{
@@ -1031,12 +1102,21 @@ export default defineComponent({
 			this.store.commit('setDesignPreviewData',data)
 			let DesignDetailAlter:any = this.$refs.DesignDetailAlter
 			DesignDetailAlter.changePlace()
+
 			if(this.driver__.driver){
 				nextTick().then(()=>{
 					driverObj__.moveNext();
 				})
 			}
         },
+		setSloganData(data:any){
+			this.current.sketchString = data
+			
+			// let designData:any = this.setSubmitItem('preview',true)
+			let designData = this.store.state.DesignDetailModule.designPreviewData
+			designData.designSingleItemDTOList[this.currentIndex].sketchString = data
+			this.setDesignSingle(designData)
+		}
         //重新设计
         // redesignItem(){
         //     let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
@@ -1356,20 +1436,34 @@ export default defineComponent({
 				display: flex;
 				flex-direction: column;
 				overflow: hidden;
+				overflow-y: auto;
 				.hideCursor{
 					*{
 						cursor: not-allowed !important;
 					}
 				}
+				&.detail_modal_right_top::-webkit-scrollbar{display: none;}
                 .clothes_detail_item{
 					// margin-bottom: 5rem*1.2);
 					position: relative;
-					flex: 1;
+					height: 20rem;
+					// flex: 1;
+					flex-shrink: 0;
 					.centent_div{
 						display: flex;
 						cursor: pointer;
 						justify-content: center;
 					}
+					.centent_print{
+						flex-wrap: wrap;
+						justify-content: space-between;
+						align-content: space-between;
+						img{
+							width: 30%;
+							height: 30%;
+							margin-bottom: 1rem;
+						}
+					}
 					.centent{
 						cursor: pointer;
 
@@ -1386,11 +1480,18 @@ export default defineComponent({
                         font-size: var(--aida-fsize1-8);
                         color: #000000;
 						justify-content: space-between;
+						position: relative;
                         .icon-dangqianweizhi{
                             font-size: calc(1.8rem*1.2);
                             color: #000000;
                             margin-right: calc(1rem*1.2);
                         }
+						.fi-rs-pencil-paintbrush{
+							position: absolute;
+							right: 0;
+							top: 4rem;
+							cursor: pointer;
+						}
 						i{
 							font-size: var(--aida-fsize1-8);
 							display: flex;
@@ -1442,7 +1543,8 @@ export default defineComponent({
 						}
 					}
 					&.clothes_detail_item_print,
-					&.clothes_detail_item_apparel{
+					&.clothes_detail_item_apparel,
+					&.clothes_detail_item_elements{
 						.fi-rr-picture{
 							display: flex;
 							align-items: center;

src/component/Detail/DesignDetailAlter.vue

@@ -1,24 +1,40 @@
 <template>
 	<div class="detail_modal_body_select">
-		<div v-show="(type_ == 1 || type_ == 2) && select == true">
+		<div v-show="(type_ == 1 || type_ == 2 || type_ == 4) && select == true">
 			<div class="detail_uploadLibrary">
 				<div class="switch_type_list">
-				<div
-					@click.stop="open(1)"
-					class="switch_type_item"
-					:class="[openClick == 1 ? 'select_swtich' : '']"
-				>
-					<span>{{ $t('DesignDetailAlter.Upload') }}</span>
+					<div
+						@click.stop="open(1)"
+						class="switch_type_item"
+						:class="[openClick == 1 ? 'select_swtich' : '',]"
+						:style="{cursor:type_==4?'no-drop':''}"
+					>
+						<span>{{ $t('DesignDetailAlter.Upload') }}</span>
+					</div>
+					<div
+						@click.stop="open(2)"
+						class="switch_type_item Guide_1_21"
+						:class="[openClick == 2 ? 'select_swtich' : '',driver__.driver?'showEvents':'']"
+					>
+						<span>{{ $t('DesignDetailAlter.Library') }}</span>
+					</div>
 				</div>
-				<div
-					@click.stop="open(2)"
-					class="switch_type_item Guide_1_21"
-					:class="[openClick == 2 ? 'select_swtich' : '',driver__.driver?'showEvents':'']"
-				>
-					<span>{{ $t('DesignDetailAlter.Library') }}</span>
-				</div>
-			</div>
 				<div v-show="openClick == 2" class="detail_Library">
+					<div class="select_block">
+						<a-select
+							v-model:value="designType"
+							:options="designTypeList"
+							@change="handleChange"
+							:fieldNames="{ label: 'name', value: 'value' }"
+						>
+							<template #suffixIcon
+								><span
+									class="icon iconfont icon-xiala"
+									style="color: #343579"
+								></span
+							></template>
+						</a-select>
+					</div>
 					<div class="content_search_block">
 						<input class="search_input" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName"  @keydown.enter="getLibraryList()">
 						<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
@@ -47,51 +63,7 @@
 									v-show="file?.status === 'done'"
 								>
 									<img :src="file?.url" class="upload_img" />
-									<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="sketchCatecoryList" :generateList="uploadList" :item="file" ></sketchCategory>
-
-									<!-- <div class="operate_file_block" v-show="selectCode == 'Sketchboard'">
-										<div class="select_img_type">
-											<div
-												class="select_category"
-												@click.stop="showFileCategory(file)"
-											>
-												{{ file.level2Type }}
-												<div
-												v-if="!body"
-													:class="[
-														'icon',
-														'iconfont',
-														'icon-xiala',
-														file.categoryShow
-															? 'icon_rotate'
-															: '',
-													]"
-												>
-												</div>
-											</div>
-											<div
-												v-if="!body"
-												class="category_list"
-												v-show="file.categoryShow"
-											>
-												<div
-													:class="[
-														'category_item',
-														file.level2Type == cate.value
-															? 'select_category_item'
-															: '',
-													]"
-													v-for="(
-														cate, index
-													) in disignTypeList"
-													:key="index"
-													@click.stop="selectFileCategory(file, cate)"
-												>
-													{{ cate.value }}
-												</div>
-											</div>
-										</div>
-									</div> -->
+									<sketchCategory v-if="selectCode == 'Sketchboard' || selectCode == 'Printboard'" :disignTypeList="sketchCatecoryList" :generateList="uploadList" :item="file" ></sketchCategory>
 									<div
 										class="delete_file_block"
 										@click.stop="deleteFile(index)"
@@ -138,7 +110,7 @@
                     <div class="content_img_item" v-for="(file) in clothesList" :key="file.id"  :class="{active:selectCode !== 'Moodboard'}">
                         <div class="content_img_item_block" :class="{active:file?.checked}">
                             <img :class="[ selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
-							<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="sketchCatecoryList" :generateList="clothesList" :item="file" ></sketchCategory>
+							<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="designTypeList" :generateList="clothesList" :item="file" :isSpread="selectCode == 'DesignElements'" :isSetSketchCategory="true" @upTypeSucced='handleChange'></sketchCategory>
                         </div>
                     </div>
 					<div v-show="total > clothesList.length" class="material_content_list_loding" v-observe>
@@ -288,7 +260,7 @@ import { useStore } from "vuex";
 import { LoadingOutlined } from '@ant-design/icons-vue';
 import { message,Upload} from 'ant-design-vue';
 import { Sketch, Chrome} from '@ans1998/vue3-color'
-import {getUploadUrl,rgbToHsv} from '@/tool/util'
+import {getUploadUrl,rgbToHsv,isMoible} from '@/tool/util'
 import DesignDetailEnd from './DesignDetailEnd.vue';
 import { getCookie } from "@/tool/cookie";
 import { openGuide,driverObj__ } from "@/tool/guide";
@@ -321,6 +293,11 @@ export default defineComponent({
 		let apparelList = ref([])
 		let printList = ref([])
 		let selectCode = ref('Sketchboard')
+		let designTypeList = ref([])
+		let printCatecoryList = computed(()=>{
+			return store.state.UserHabit.printType
+		})
+		let designType = ref('')
 		//颜色
 		let selectColor = ref({
 			rgba:{},
@@ -331,6 +308,9 @@ export default defineComponent({
 		let sketchCatecoryList = computed(()=>{
 			return store.state.Workspace.workspacePosition
 		})
+		let designElementsType = computed(()=>{
+			return store.state.UserHabit.designElementsType;
+		})
 		let colorList = ref([{},{},{},{},{},{},{},{},{}])
 		let selectIndex = ref(0)
 		let gradient = ref({
@@ -359,6 +339,7 @@ export default defineComponent({
 		})
 		provide('colorList',colorList)
 		provide('selectIndex',selectIndex)
+		provide('designTypeList',designTypeList)
 		let {t} = useI18n()
         return{
             store,
@@ -375,6 +356,10 @@ export default defineComponent({
 			printList,
 			selectCode,
 
+			designTypeList,
+			printCatecoryList,
+			designType,
+
 			type_,
 			select,
 			selectColor,
@@ -383,6 +368,7 @@ export default defineComponent({
 			driver__,
 			body,
 			sketchCatecoryList,
+			designElementsType,
 			colorList,
 			selectIndex,
 			gradient,
@@ -595,12 +581,22 @@ export default defineComponent({
 				this.selectCode = 'Sketchboard'
 				this.upload.level1Type = 'Sketchboard'
 				this.uploadList = this.apparelList
+				this.designTypeList = this.sketchCatecoryList
+				this.designType = this.designTypeList[0].value
 			}else if (num == 2){
 				this.selectCode = 'Printboard'
 				this.upload.level1Type = 'Printboard'
 				this.uploadList = this.printList
+				this.designTypeList = this.printCatecoryList
+				this.designType = this.designTypeList[0].value
+			}else if (num == 4){
+				this.selectCode = 'DesignElements'
+				this.upload.level1Type = 'DesignElements'
+				this.designTypeList = this.designElementsType
+				this.designType = this.designTypeList[0]?.value
+				this.openClick = 2
 			}
-			if(num == 1 || num == 2){
+			if(num == 1 || num == 2 || num == 4){
 				this.clothesList = []
 				this.getLibraryList()
 			}
@@ -650,6 +646,7 @@ export default defineComponent({
 						(v) => v.status === "done"
 					);
 					this.uploadList = fileList
+					this.selectImgItem(this.uploadList[this.uploadList.length-1])
 					// this.store.commit("clearMoodTemplateId");
 					if(this.selectCode == 'Sketchboard'){
 						this.apparelList = this.uploadList
@@ -706,6 +703,7 @@ export default defineComponent({
 			// DesignDetailEnd.colorList = [{}]
 			DesignDetailEnd.sketchImg={}
 			this.terminate()
+			DesignDetailEnd.clearModal()
 		},
 		// this.getLibraryList('Moodboard')
 		// this.getLibraryList('Printboard')
@@ -721,39 +719,57 @@ export default defineComponent({
             });
 		},
 		selectImgItem(imgData){
+			let DesignDetailEnd = this.$refs.DesignDetailEnd
+			imgData.categoryValue = imgData.level2TypeEnum.value
+			imgData.category = imgData.level2TypeEnum.name
 			if(this.selectCode == 'Sketchboard'){
 				// this.current.id_ = imgData.id
 				// this.current.path = imgData.url
-				let DesignDetailEnd = this.$refs.DesignDetailEnd
 				DesignDetailEnd.setSketchImg(imgData)
 				// DesignDetailEnd.sketchImg.id_ = imgData.id
 				// DesignDetailEnd.sketchImg.path = imgData.url
-			}else{
-				this.current.printObject.path = imgData?.url
-				this.current.printObject.id = imgData?.id
-				this.current.printObject.designType = imgData?.designType
-				this.current.printObject.minIOPath = imgData.minIOPath
-				this.current.printObject.prints = [{
-					minIOPath:imgData.minIOPath,
-					path:imgData?.url,
-					designType: imgData?.designType
-				}]
-				if(this.driver__.driver){
-					nextTick().then(()=>{
-						driverObj__.moveNext();
-					})
-				}
+			}else if(this.selectCode == 'Printboard'){
+				// this.current.printObject.path = imgData?.url
+				// this.current.printObject.id = imgData?.id
+				// this.current.printObject.designType = imgData?.designType
+				// this.current.printObject.minIOPath = imgData.minIOPath
+				// this.current.printObject.prints = [{
+				// 	minIOPath:imgData.minIOPath,
+				// 	path:imgData?.url,
+				// 	designType: imgData?.designType
+				// }]
+				// if(this.driver__.driver){
+				// 	nextTick().then(()=>{
+				// 		driverObj__.moveNext();
+				// 	})
+				// }
+				imgData.path = imgData.url
+				DesignDetailEnd.printsList.push(imgData)
 
 				// console.log(this.current.printObject,imgData); 
+			}else if(this.selectCode == 'DesignElements'){
+				imgData.path = imgData.url
+				DesignDetailEnd.elementsList.push(imgData)
 			}
         },
+		handleChange(){
+			this.currentPage = 1
+			this.clothesList = []
+            this.getLibraryList('')
+		},
 		//请求我的印花&&模型
 		getLibraryList(){
-			let type = this.body?this.current.type:''
+			let level2Type = ''
+			if(this.selectCode == 'Sketchboard' || this.selectCode == 'Printboard' || this.selectCode == 'DesignElements'){
+				level2Type = this.designType
+			}
+			let type = this.body?this.current.type:level2Type
 			let workspace = this.store.state.Workspace.workspace
             let data = {
+                // level1Type:'Printboard',
                 level1Type:this.selectCode,
-                level2Type:this.selectCode == 'Sketchboard'?type:'',
+                // level2Type:'Pattern',
+                level2Type:type,
 				modelSex:workspace?.sex,
                 page:this.currentPage,
                 pictureName:this.searchPictureName,
@@ -783,6 +799,7 @@ export default defineComponent({
 
 		//衣服
 		open(num) {
+			if(num == 1 && this.type_ ==4)return
             this.openClick = num;
 			if(num ==2 ){
 				this.getLibraryList()
@@ -805,7 +822,7 @@ export default defineComponent({
             if (!isJpgOrPng) {
                 message.info(this.t('DesignDetailAlter.jsContent4'));
             }
-            const isLt2M = file.size / 1024 / 1024 < 3;
+            const isLt2M = file.size / 1024 / 1024 < 5;
             if (!isLt2M) {
                 message.info(this.t('DesignDetailAlter.jsContent5'));
             }
@@ -905,7 +922,7 @@ export default defineComponent({
 			let hex = this.rgbaToHex(rgba)
             this.selectColor = {rgba:gradientRgba,hex:hex} //顔色选择器默认颜色
 			// isMoible()  true为移动端
-			let gradientWidth = document.querySelector('.colorboard_upload_modal .color_setting_operate_bg').clientWidth
+			let gradientWidth = document.querySelector('.detail_modal_body_select .color_setting_operate_bg').clientWidth
 			let position = {
 				x:moible?event.touches[0].screenX:event?.x,
 				left:event.target.style.left?event.target.style.left.split('%')[0]:0
@@ -1098,6 +1115,7 @@ export default defineComponent({
 						this.selectColorList = selectColorList
 						// this.getHsvColor(selectColorList)
 						this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1},hex:colorHex}
+						img.remove()
 					};
                     
 				
@@ -1136,6 +1154,19 @@ export default defineComponent({
 	
 	}
 	.detail_Library{
+		.select_block{
+			border: calc(0.1rem* 1.2) solid #F1F1F1;
+			// margin-right: calc(2.3rem*1.2);
+			height: 4rem;
+			width: calc(20rem*1.2);
+			margin-bottom: 1rem;
+			.ant-select{
+				width: 90%;
+			}
+			.ant-select:not(.ant-select-customize-input) .ant-select-selector{
+				width: 100%;
+			}
+		}
 		.content_search_block{
                 display: flex;
 				margin-bottom: calc(1rem*1.2);
@@ -1150,7 +1181,7 @@ export default defineComponent({
                     // font-size: 1.6rem*1.2);
 					font-size: calc(1.2rem*1.2);
                     font-weight: 400;
-					height: calc(3rem*1.2);
+					height: 4rem;
 
                     &::placeholder {
                         color: #C2C2C2;

src/component/Detail/DesignDetailEnd.vue

@@ -1,70 +1,49 @@
 <template>
 	<div class="detail_modal_body_result">
-		<div v-show="type_ == 1 || type_ == 2" class="result_apparel_print">
+		<div v-show="type_ == 1" class="result_apparel_print">
 			<div class="upload_title result_apparel" v-show="type_ == 1">
 				<i class="color_edit fi fi-bs-comments"></i>
 				<span>{{ $t('DesignDetailEnd.NewApparel') }}</span>
 			</div>
-			<div v-show="type_ == 2" class="result_print">
-				<div>
-					<div class="upload_title">
-						<i class="color_edit fi fi-bs-comments"></i>
-						<span>{{ $t('DesignDetailEnd.NewPrint') }}</span>
-					</div>
-					<div class="print_left">
-						<!-- <img :src="current.path" :title="current.type"> -->
-						<img  :src="current?.printObject?.prints?.[0]?.path" v-if="current?.printObject?.prints?.[0]?.path">
-						<div  src="@/assets/images/homePage/null_img.png" v-else ></div>
-						<div
-							v-show="current?.printObject?.prints?.[0]?.path"
-							class="delete_file_block"
-							@click="deleteFile"
-						>
-							<span class="icon iconfont icon-shanchu"></span>
-						</div>
-					</div>
-				</div>
-				<div>
-					<div class="upload_title">
-						<i class="color_edit fi fi-bs-comments"></i>
-						<span>{{ $t('DesignDetailEnd.Placement') }}</span>
-					</div>
-					<div class="print_right">
-						<div class="habit_Overal_Single">
-							<div
-								class="habit_Overal_Single_text"
-								:class="{ active: !overallSingle }"
-							>
-								{{ $t('DesignDetailEnd.Overall') }}
-							</div>
-							<a-switch @click="setOveralSingle" v-model:checked="overallSingle" />
-							<div
-								class="habit_Overal_Single_text"
-								:class="{ active: overallSingle }"
-							>
-								{{ $t('DesignDetailEnd.Single') }}
-							</div>
-						</div>
-						<!-- <div v-show="!overallSingle" class="habit_System_Designer">
-							<a-slider id="system_silder"
-								v-model:value="systemDesignerPercentage"
-								@afterChange="systemDesigner"
-								:tip-formatter="formatter"
-							>
-							</a-slider>
-						</div> -->
-					</div>
-				</div>
-			</div>
+			
 			<div class="result_apparel_print_img">
 				<img v-show="type_==1" class="result_appare_img" :src="sketchImg?.path?sketchImg?.path:current?.path" :title="current?.type">
-				<!-- <img v-show="type_==2" class="result_print_img" :src="current?.path" :title="current?.type" @click="setPrint"> -->
-				<div v-show="type_==2" class="result_print_img" @click="setPrint" :title="current?.type">
+				<!-- <div v-show="type_==2" class="result_print_img" @click="setPrint" :title="current?.type">
 					<img v-for="item in current?.layersObject" :src="item.imageUrl" alt="">
-				</div>
+				</div> -->
 			
 			</div>
 		</div>
+		<div v-show="type_ == 2" class="result_apparel_elements">
+			<div class="upload_title result_apparel">
+				<i class="color_edit fi fi-bs-comments"></i>
+				<span>{{ $t('DesignDetailEnd.NewPrint') }}</span>
+			</div>
+			<div class="modal_img">
+				<div class="modal_img_item" v-for="item,index in exhibitionList.print" :key="item" >
+				<!-- <div class="modal_img_item" v-for="item,index in current.printObject.prints" :key="item" > -->
+					<img v-lazy="item.path" alt="">
+					<sketchCategory :disignTypeList="designTypeList" :generateList="exhibitionList.print" :item="item" :isSpread="true" :isSetSketchCategory="true"></sketchCategory>
+
+					<div
+						class="delete_file_block"
+						@click="deleteSelectptints(item,index)"
+					>
+						<span class="icon iconfont icon-shanchu"></span>
+					</div>
+				</div>
+				<div class="modal_img_item" v-for="item,index in printsList" :key="item" >
+					<img v-lazy="item.path" alt="">
+					<sketchCategory :disignTypeList="designTypeList" :generateList="printsList" :item="item" :isSpread="true" :isSetSketchCategory="true"></sketchCategory>
+					<div
+						class="delete_file_block"
+						@click="deleteptints(item,index)"
+					>
+						<span class="icon iconfont icon-shanchu"></span>
+					</div>
+				</div>
+			</div>
+		</div>
 		<div v-show="type_ == 3">
 			<div class="result_color upload_title">
 				<i class="color_edit fi fi-bs-comments"></i>
@@ -84,11 +63,43 @@
 				</div>
 			</div>
 		</div>
+		<div v-show="type_ == 4" class="result_apparel_elements">
+			<div class="upload_title result_apparel">
+				<i class="color_edit fi fi-bs-comments"></i>
+				<span>New Elements</span>
+			</div>
+			<div class="modal_img">
+				
+				<!-- <div class="modal_img_item" v-for="item,index in current.trims.prints" :key="item" > -->
+				<div class="modal_img_item" v-for="item,index in exhibitionList.elements" :key="item" >
+					<img v-lazy="item.path" alt="">
+					<div
+						class="delete_file_block"
+						@click="deleteSelectElements(item,index)"
+					>
+						<span class="icon iconfont icon-shanchu"></span>
+					</div>
+				</div>
+				<div class="modal_img_item" v-for="item,index in elementsList" :key="item" >
+					<img v-lazy="item.url" alt="">
+					<div
+						class="delete_file_block"
+						@click="deleteElements(item,index)"
+					>
+						<span class="icon iconfont icon-shanchu"></span>
+					</div>
+				</div>
+			</div>
+		</div>
 		<div v-show="type_ == 1 || type_ == 3" @click.stop="setPreview" class="subitOkPreviewBtn" :class="[ !sketchImg?.id?!current?.id?'active':'':'' ]">{{ $t('DesignDetailEnd.preview') }}</div>
-		<div v-if="type_ == 2 && current?.printObject?.prints?.[0]?.path != null" @click.stop="setPrint" class="subitOkPreviewBtn Guide_1_23">{{ $t('DesignDetailEnd.Layout') }}</div>
-		<div v-else-if="type_ == 2 && designItemDetail?.clothes?.[currentIndex]?.printObject?.prints?.[0]?.path != null && current?.printObject?.prints?.[0]?.path == null" @click.stop="setPreview" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.preview') }}</div>
+		<div v-if="type_ == 2 && (current?.printObject?.prints?.length != 0 || printsList.length != 0)" @click.stop="setPrint" class="subitOkPreviewBtn Guide_1_23">{{ $t('DesignDetailEnd.Layout') }}</div>
+		<!-- <div v-else-if="type_ == 2 && designItemDetail?.clothes?.[currentIndex]?.printObject?.prints?.[0]?.path != null && current?.printObject?.prints?.[0]?.path == null" @click.stop="setPreview" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.preview') }}</div> -->
+		<div v-if="type_ == 4" @click.stop="setElemets" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.Layout') }}</div>
+		
 	<DesignPrintOperation v-if="!moible" ref="DesignPrintOperation"></DesignPrintOperation>
 	<DesignPrintOperationMobile v-else ref="DesignPrintOperationMobile"></DesignPrintOperationMobile>
+	<DesignElementsOperation v-if="!moible" ref="DesignElementsOperation"></DesignElementsOperation>
+	<DesignPrintMobile v-else ref="DesignPrintMobile"></DesignPrintMobile>
 	</div>
 	<div class="mark_loading" v-show="loadingShow">
 		<a-spin size="large" />
@@ -102,15 +113,19 @@ import { useStore } from "vuex";
 import { Sketch} from '@ans1998/vue3-color'
 import DesignPrintOperation from './DesignPrintOperation.vue';
 import DesignPrintOperationMobile from './DesignPrintOperationMobile.vue';
+import DesignElementsOperation from './DesignElements.vue';
+import DesignPrintMobile from './DesignElementsMobile.vue';
 import { message,Upload} from 'ant-design-vue';
 import { openGuide,driverObj__ } from "@/tool/guide";
 import {isMoible,setGradual} from '@/tool/util'
 import { useI18n } from 'vue-i18n';
+import sketchCategory from "@/component/HomePage/sketchCategory.vue";
 
 export default defineComponent({
     props: ["msg"],
     components:{
-        Draggable,Sketch,DesignPrintOperation,DesignPrintOperationMobile
+        Draggable,Sketch,DesignPrintOperation,DesignPrintOperationMobile,
+		DesignElementsOperation,DesignPrintMobile,sketchCategory
     },
     setup(prop) {
         const store = useStore();
@@ -122,10 +137,9 @@ export default defineComponent({
         let moible = inject('moible')//父组件传过来的数据
         let designItemDetail = inject('designItemDetail')//父组件传过来的数据
         let currentIndex = inject('currentIndex')//父组件传过来的数据
+        let designTypeList = inject('designTypeList')//父组件传过来的数据
 		let previewShow = ref(false)
 		//印花
-		let overallSingle = ref(false)
-		let systemDesignerPercentage = ref(30)
 
 		//颜色
 		// let colorList = ref([{}])
@@ -135,7 +149,12 @@ export default defineComponent({
 		//加载中
 		let loadingShow = ref(false)
 
+		let exhibitionList = inject('exhibitionList')
 		let {t} = useI18n()
+		let printsList = ref([])
+		let elementsList = ref([
+		
+		])
         return{
 			store,
 			current,
@@ -145,14 +164,16 @@ export default defineComponent({
 			moible,
 			designItemDetail,
 			currentIndex,
+			designTypeList,
 			previewShow,
 			type_,
-			overallSingle,
-			systemDesignerPercentage,
 			colorList,
 			selectIndex,
 			loadingShow,
+			exhibitionList,
 			t,
+			printsList,
+			elementsList,
         }
     },
     data(){
@@ -182,14 +203,40 @@ export default defineComponent({
 			}
 		}
 	},
+	watch: {
+		'exhibitionList.print':{
+			handler(newVal,oldVal){
+				this.printsList = this.printsList.filter(objA => {
+					return !newVal.some(objB => objB.minIOPath === objA.minIOPath);
+				});
+				this.setExhibitionType('print')
+			}
+		},
+		'exhibitionList.elements':{
+			handler(newVal,oldVal){
+				this.elementsList = this.elementsList.filter(objA => {
+					return !newVal.some(objB => objB.minIOPath === objA.minIOPath);
+				});
+				this.setExhibitionType('elements')
+			}
+		}
+	},
     methods:{
+		
 		//点击判断
 		init(num){
 			// this.current = JSON.parse(JSON.stringify(this.currentItem))
 			this.type_ = num
 			this.colorList[this.selectIndex] = this.$parent.selectColor
-			this.overallSingle = this.current?.printObject?.ifSingle == null?false:this.current?.printObject?.ifSingle
-			this.systemDesignerPercentage = this.current?.printObject?.ifSingle?this.current?.printObject?.prints[0].scale?this.current?.printObject?.prints[0].scale*100:100:100
+			if(num == 2){
+				this.setExhibitionType('print')
+			}else if(num == 4){
+				this.setExhibitionType('elements')
+			}
+		},
+		clearModal(){
+			this.elementsList = []
+			this.printsList = []
 		},
 		//模型
 		setSketchImg(v){
@@ -201,17 +248,22 @@ export default defineComponent({
 			this.sketchImg.designType = v.designType
 		},
 		//印花
-		systemDesigner(num) {
-			this.current.printObject.scale = num
-        },
-		setOveralSingle(){
-			this.current.printObject.ifSingle = this.overallSingle
-		},
-		formatter(value) {
-			return `${value*3}%`;
+		setExhibitionType(str){
+			this.exhibitionList[str].forEach((item,index)=>{
+				if(!item.categoryValue){
+					this.designTypeList.forEach((typeItem)=>{
+						if(item.level2Type == typeItem.value){
+							item.categoryValue = typeItem.name
+							item.category = typeItem.value
+						}
+
+					})
+				}
+			})
 		},
+		
 		setPrint(){
-			if(this.current?.printObject?.prints?.[0]?.path){
+			// if(this.current?.printObject?.prints?.[0]?.path){
 				let DesignPrintOperation = isMoible() ? this.$refs.DesignPrintOperationMobile : this.$refs.DesignPrintOperation
 				DesignPrintOperation.init()
 				if(this.driver__.driver){
@@ -219,9 +271,9 @@ export default defineComponent({
 						driverObj__.moveNext();
 					})
 				}
-			}else{
-                message.info(this.t('DesignDetailEnd.jsContent1'));
-			}
+			// }else{
+            //     message.info(this.t('DesignDetailEnd.jsContent1'));
+			// }
 			
 		},
 		deleteFile(){
@@ -286,6 +338,23 @@ export default defineComponent({
 			// arr[index].id = this.sketchImg.id_? this.sketchImg.id_:this.current.id
 			return arr
 		},
+		deleteptints(item,index){
+			this.printsList.splice(index,1)
+		},
+		deleteSelectptints(item,index){
+			this.exhibitionList.print.splice(index,1)
+		},
+		deleteElements(item,index){
+			this.elementsList.splice(index,1)
+		},
+		deleteSelectElements(item,index){
+			this.exhibitionList.elements.splice(index,1)
+		},
+		setElemets(){
+			if(this.current.trims.prints && this.current.trims.prints.length == 0 && this.elementsList.length == 0)return message.info('请选择至少一张element')
+			let DesignElementsOperation = isMoible() ? this.$refs.DesignPrintMobile : this.$refs.DesignElementsOperation
+			DesignElementsOperation.init()
+		},
 		//提交
 		setPreview(){
             let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
@@ -329,6 +398,8 @@ export default defineComponent({
 				}
 				let color = `${this.colorList[this.selectIndex].rgba.r} ${this.colorList[this.selectIndex].rgba.g} ${this.colorList[this.selectIndex].rgba.b}`
 				data.designSingleItemDTOList[index].color = color
+			}else if(this.type_ == 4){
+			    data.designSingleItemDTOList[index].trims = this.current.trims
 			}
 			if(this.colorList[this.selectIndex].gradient){
 				let gradient = this.colorList[this.selectIndex].gradient
@@ -353,6 +424,7 @@ export default defineComponent({
 									delete designItemDetail.clothes[index].gradient
 								}
 								designItemDetail.clothes[index].designType = item.designType
+								designItemDetail.clothes[index].trims = item.trims
 								designItemDetail.clothes[index].layersObject = item.layersObject
 								designItemDetail.clothes[index].minIOPath = item.minIOPath
 								designItemDetail.clothes[index].path = item.path
@@ -544,6 +616,7 @@ export default defineComponent({
 		display: flex;
 		flex-wrap: wrap;
 		padding-left: calc(2rem*1.2);
+		align-content: flex-start;
 		&.modal_img::-webkit-scrollbar {
 			display: none;
 		}
@@ -590,6 +663,48 @@ export default defineComponent({
 			
 		}
 	}
+	//elements
+	.result_apparel_elements{
+		height: 85%;
+		// height: 100%;
+		.modal_img{
+			height: calc(100%);
+			overflow-y: auto;
+		}
+		.modal_img_item{
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			position: relative;
+			height: auto;
+			border: none;
+			img{
+				width: 100%;
+				object-fit: cover;
+			}
+			.delete_file_block{
+				display: none;
+				width: calc(3.2rem*1.2);
+				height: calc(3.2rem*1.2);
+				background: rgba(0,0,0,0.6);
+				border-radius: calc(0.4rem*1.2);
+				position: absolute;
+				top: calc(0.9rem*1.2);
+				right: calc(0.9rem*1.2);
+				text-align: center;
+				line-height: calc(3.2rem*1.2);
+				left: auto;
+				cursor: pointer;
+				.icon-shanchu{
+					font-size: calc(1.6rem*1.2);
+					color: #fff;
+				}
+			}
+			&:hover .delete_file_block{
+				display: block;
+			}
+		}
+	}
 	.subitOkPreviewBtn{
 		bottom: calc(4rem*1.2);
 		position: absolute;

src/component/Detail/DesignElements.vue

@@ -0,0 +1,922 @@
+<template>
+  <div>
+	<a-modal
+            class="designElements_modal"
+            v-model:visible="designElements"
+            :footer="null"
+            width="78%"
+            :maskClosable="false"
+            :centered="true"
+            :closable="false"
+			:keyboard="false"
+            :mask="true"
+        >
+            <div class="designElements_content">
+				<div class="design_title_text">
+					<div>{{ $t('DesignPrintOperation.Placement') }}</div>
+				</div>
+				<div class="design_closeIcon" @click.stop="closeModal()">
+					<i class="fi fi-rr-cross-small"></i>
+				</div>
+				<div class="designElements_open">
+					<!--  -->
+					<div class="print_right">
+						<div class="print_right show_print_right ">
+							<div @click="random" class="button_second">{{ $t('DesignPrintOperation.Random') }}</div>
+							<div class="designElements_nav">
+								<div class="designElements_single" v-for="item,index in designElementsList" :key="item">
+									<img :src="item.path" @click="setpitch(item,index)">
+								</div>
+								<div class="designElements_single" v-for="item,index in designSelectElementsList" :key="item">
+									<img :src="item.path" @click="setpitch(item,index)">
+								</div>
+							</div>
+							<div class="subitOkPreviewBtn" @click.stop="setPreview">{{ $t('DesignPrintOperation.preview') }}</div>
+							<div class="subitOkPreviewBtn  _1"  @click.stop="setOK">OK</div>
+						</div>
+					</div>
+				</div>
+				<div class="designElements_centent" id="designElementsCentent">
+					<div class="designElements_imgMask">
+						<div class="designElements_print">
+							<div 
+								v-for="item,index in exhibitionElementsList" 
+								:key="item"
+								:style="[printStyleList?.[index]?.style]" 
+								@mousedown.stop="itemMoveMousedown(index,$event)"
+								class="modal_imgItem" 
+								ref="content" >
+								<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designElements_imgItme" draggable="false"> 
+							</div>
+						</div>
+						<img :src="current?.path" alt="" class="designElements_sketch">
+						<div class="designElements_btn">
+							<ul v-for="item,index in printStyleList" :key="item" :class="{active:item?.designElementsBtn?item?.designElementsBtn:false}" class="designElements_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
+								<li class="designElements_btn_top" @mousedown.stop="itemSizeMousedown('top',$event)"></li>
+								<li class="designElements_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',$event)"></li>
+								<li class="designElements_btn_left" @mousedown.stop="itemSizeMousedown('left',$event)"></li>
+								<li class="designElements_btn_right" @mousedown.stop="itemSizeMousedown('right',$event)"></li>
+								<li class="designElements_rotote" v-rotote.stop="[index,item.transform]"></li>
+								<li class="designElements_delete" @click="deletePrint">
+									<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
+								</li>
+							</ul>
+							<div></div>
+						</div>
+					</div>
+				</div>
+				<div class="designElements_right">
+					<div class="designElements_entirety_img">
+						<img :src="currentFullBodyView" alt="">
+					</div>
+				</div>
+            </div>
+			<div class="mark_loading" v-show="loadingShow">
+				<a-spin size="large" />
+        </div>
+        </a-modal>
+  </div>
+</template>
+
+<script >
+import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "vue";
+// import { LoadingOutlined } from "@ant-design/icons-vue";
+import { useStore } from "vuex";
+import { openGuide,driverObj__ } from "@/tool/guide";
+import { Https } from "@/tool/https";
+import { Modal,message } from 'ant-design-vue';
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { useI18n } from "vue-i18n";
+export default defineComponent({
+	
+    setup(prop) {
+        let designElements = ref(false);
+		let designSelectElementsList = ref([])//新增的元素
+		let designElementsList = ref([])//已经存在的元素
+		let exhibitionElementsList = ref([])//展示的元素
+		let setOkData = ref([])
+		let current = inject('current')//父组件传过来的数据
+		let driver__ = inject('driver__')
+        let setRevocation = inject('setRevocation')//父组件传过来的数据
+		let printZIndex = ref(2)//印花优先级
+        let printStyleList = ref([]);
+		let currentPrintStyleList = {
+			centers:{
+				left:0,
+				top:0,
+			},
+			style:{
+				left:0+"px",
+				top:0+"px",
+				right:"auto",
+				bottom:"auto",
+				width:'auto',
+				height:'auto',
+				zIndex:1,
+			},
+			transform:{
+				scale:1,
+				rotateZ:0,
+			},
+			designElementsBtn:false
+		}
+		let direction = ref('')
+		let imgDom = ref()
+		let imgDomIndex = ref(0)
+		let print = ref({
+			width:'',
+			height:''
+		})
+		let sketch = ref({
+			width:'',
+			height:''
+		})
+		let loadingShow = ref(false)
+		let currentFullBodyView = ref('')
+		let designItemDetailTS = ref({})
+		let body = ref(false)
+		let {t} = useI18n()
+        return {
+            designElements,
+			designSelectElementsList,
+			designElementsList,
+			exhibitionElementsList,
+			setOkData,
+			current,
+			driver__,
+			printZIndex,
+            printStyleList,
+			currentPrintStyleList,
+			direction,//判断点击的是li那个边
+			imgDom,
+			imgDomIndex,
+			print,
+			sketch,
+			loadingShow,
+			setRevocation,
+			t,
+			currentFullBodyView,
+			designItemDetailTS,
+			body,
+        };
+    },
+    data() {
+        return {
+            store: useStore(),
+        };
+    },
+
+	directives:{
+		//操作旋转
+		rotote:{
+			mounted(el,value){
+				
+				el.addEventListener('mousedown', (e) => {
+				let elParent = document.getElementsByClassName('designElements_modal')[0].getElementsByClassName('modal_imgItem')[value.instance.imgDomIndex]
+				let mouse = true;
+				let angle  = 0
+				let num = 1
+				let x = 0
+				let y = 0
+				num = value.instance.printStyleList[value.instance.imgDomIndex].transform.scale
+				angle = value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ
+				// 添加鼠标按下事件监听器
+				el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
+				// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
+				// let rotateZ = Number(elParent.firstElementChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
+					e.stopPropagation()
+					mouse = true;
+					var info = el.getBoundingClientRect();
+					let eX = info.x + info.width / 2;
+					let eY = info.y + info.height / 2;
+					let mousemove = (e) => {
+						if (mouse) {
+							let X = eX 
+							let Y = eY
+							let x = e.clientX - X
+							let y = Y - e.clientY
+							angle = Math.atan2(x,y)*(180 / Math.PI)
+							elParent.firstElementChild.style.transform = "rotateZ("+ angle + "deg)"
+							el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
+						}
+					}
+					document.addEventListener('mousemove', mousemove);
+					// 添加鼠标松开事件监听器
+					let mouseup = () => {
+						value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ = angle
+						mouse = false;
+						document.removeEventListener('mouseup',mouseup)
+						document.removeEventListener('mousemove',mousemove)
+					}
+					document.addEventListener('mouseup', mouseup);
+				});
+			}
+
+			},
+	},
+    methods: {
+		init(){
+			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
+			this.currentFullBodyView = designItemDetail.currentFullBodyView? designItemDetail.currentFullBodyView:designItemDetail.designItemUrl
+			if(designItemDetail.others.length == 0){
+				this.body = true
+			}
+			this.designElements = true
+			this.clearModal()
+			if(this.current.trims.prints)this.exhibitionElementsList = JSON.parse(JSON.stringify(this.current.trims.prints))
+			if(this.$parent.exhibitionList.elements)this.designSelectElementsList = JSON.parse(JSON.stringify(this.$parent.exhibitionList.elements))
+			if(this.$parent.elementsList)this.designElementsList = JSON.parse(JSON.stringify(this.$parent.elementsList))
+			let skecth = new Image
+			skecth.src = this.current.path
+			skecth.onload=()=>{
+				this.sketch.width = skecth.width/10+'rem'
+				this.sketch.height = skecth.height/10+'rem'
+				skecth.remove()
+			}
+			if(this.exhibitionElementsList.length > 0){
+				this.exhibitionElementsList.forEach((item,index)=>{
+					this.setTemplate(item,index)
+				})
+			}else{
+			}
+		},
+		random(){
+			if(this.printStyleList.length == 0)return
+			this.printStyleList.forEach((v,index)=>{
+				this.refetchTemplate(index)
+			})
+		},
+		setPrintWH(url){
+			let print = new Image
+			return new Promise((resolve, reject) => {
+				print.onload=()=>{
+					this.print.width = print.width+'px'
+					this.print.height = print.height+'px'
+					resolve()
+					print.remove()
+				}
+				print.src = url
+			})
+		},
+		async setpitch(item,index){
+			await this.setPrintWH(item.path)
+			this.printStyleList.forEach((v)=>{
+				v.designElementsBtn = false
+			})
+			this.currentPrintStyleList.url = item.url
+			this.printStyleList.push(JSON.parse(JSON.stringify(this.currentPrintStyleList)))
+			let currentIndex = this.printStyleList.length-1
+			this.exhibitionElementsList.push({
+				angle:0,
+				designType:item.designType,
+				minIOPath:item.minIOPath,
+				path:item.path,
+				priority:1,
+				scale:1,
+				location:[0,0]
+			})
+			this.refetchTemplate(currentIndex)
+		
+			
+		},
+		//设置移动
+		itemMoveMousedown(index,event){
+			if (event.target.tagName === 'IMG' || event.target.nodeName === 'IMG')return
+			this.imgDomIndex = index
+			this.printStyleList.forEach((v)=>{
+				v.designElementsBtn = false
+			})
+			this.imgDom = document.getElementsByClassName('designElements_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
+			let scale = Number(this.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
+			let rotateZ = Number(this.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
+			this.printStyleList[index].designElementsBtn = true
+			this.printStyleList[index].style.zIndex = this.printZIndex++
+			this.printStyleList[index].transform = {
+				scale:scale,
+				rotateZ:rotateZ?rotateZ:0,
+			}
+			let imgDomWH = this.imgDom.getBoundingClientRect()
+			let left = Number(this.printStyleList[index].style.left.replace(/px/g,''))
+			let top = Number(this.printStyleList[index].style.top.replace(/px/g,''))
+			this.printStyleList[index].centers.left = imgDomWH.x+event.offsetX-left
+			this.printStyleList[index].centers.top = imgDomWH.y+event.offsetY-top
+			document.addEventListener("mouseup", this.mouseup);
+			document.addEventListener("mousemove", this.moveMousemove);
+		},
+		//设置尺寸
+		itemSizeMousedown(direction,event){
+			this.direction = direction
+			this.imgDom = document.getElementsByClassName('designElements_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
+			let scale = Number(this.imgDom.firstChild.style.transform?.split('scale(')[1]?.split(')')[0])
+			let rotateZ = Number(this.imgDom.firstChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
+			this.printStyleList[this.imgDomIndex].designElementsBtn = true
+			this.printStyleList[this.imgDomIndex].transform = {
+				scale:scale,
+				rotateZ:rotateZ,
+			}
+			let imgDomWH = this.imgDom.getBoundingClientRect()
+			let li = document.getElementsByClassName('designElements_modal')[0].getElementsByClassName("designElements_btn_top")[0].offsetWidth/2
+			if(this.direction == 'right' || this.direction == 'bottom'){
+				this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
+				this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
+			}else{
+				this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
+				this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
+			}
+			
+			document.addEventListener("mouseup", this.sizeMouseup);
+			document.addEventListener("mousemove", this.sizeMousemove);
+		},
+		//鼠标移动
+		moveMousemove(e) {
+			let imgDomWH = this.imgDom.getBoundingClientRect()
+			let parentNode = document.getElementsByClassName('designElements_modal')[0].getElementsByClassName("designElements_imgMask")[0]
+			parentNode = parentNode.getBoundingClientRect()
+			let x = (e.x - this.printStyleList[this.imgDomIndex].centers.left)+'px'
+			let y = ( e.y - this.printStyleList[this.imgDomIndex].centers.top)+'px'
+			this.printStyleList[this.imgDomIndex].style.left = x
+			this.printStyleList[this.imgDomIndex].style.top = y
+			
+		
+		},
+
+		sizeMousemove(e) {
+			let imgDomWH = this.imgDom.getBoundingClientRect()
+			let parentNode =this.imgDom.parentNode
+			let width = imgDomWH.width
+			let height = imgDomWH.height
+			let num = width/height
+			let num1 = height/width
+			let w,h
+			//判断移动四个边
+			if(this.direction == 'right'){
+				w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)
+				h = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
+				width = w+'px'
+				height = w*num1+'px'
+			}else if(this.direction == 'top'){
+				this.printStyleList[this.imgDomIndex].style.top = 'auto'
+				// this.printStyleList[this.imgDomIndex].style.left = 'auto'
+				this.printStyleList[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
+				w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
+				h = (this.printStyleList[this.imgDomIndex].centers.top - e.y)
+				
+				height = h+'px'
+				width = h*num+'px'
+			}else if(this.direction == 'bottom'){
+				h = (e.y - this.printStyleList[this.imgDomIndex].centers.top)
+				height = h+'px'
+				width = h*num+'px'
+			}else if(this.direction == 'left'){
+				this.printStyleList[this.imgDomIndex].style.left = 'auto'
+				this.printStyleList[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
+				w = (this.printStyleList[this.imgDomIndex].centers.left - e.x)
+				width = w+'px'
+				height = w*num1+'px'
+			}
+			//判断尺寸是否到边
+			this.printStyleList[this.imgDomIndex].style.width = width
+			this.printStyleList[this.imgDomIndex].style.height = height
+
+		},
+		//鼠标抬起
+		sizeMouseup(e){
+			this.printStyleList[this.imgDomIndex].style={
+				right:'auto',
+				left:this.imgDom.offsetLeft+'px',
+				bottom:'auto',
+				top:this.imgDom.offsetTop+'px',
+				height:this.imgDom.offsetHeight+'px',
+				width:this.imgDom.offsetWidth+'px',
+				zIndex:this.printZIndex
+			}
+			document.removeEventListener("mouseup", this.sizeMouseup);
+			document.removeEventListener("mousemove", this.sizeMousemove);
+		},
+		mouseup(e) {
+
+			document.removeEventListener("mouseup", this.mouseup);
+			document.removeEventListener("mousemove", this.moveMousemove);
+		},
+		deletePrint(){
+			this.exhibitionElementsList.splice(this.imgDomIndex,1)
+			this.printStyleList.splice(this.imgDomIndex,1)
+		},
+		
+        //随机重置图片顺序
+        refetchTemplate(index) {
+			// let scale = (Math.trunc(Math.random()*15)+1)*.1
+			let rotateZ1 = Math.trunc(Math.random()*360)+1
+			let rotateZ2 = Math.trunc(Math.random()*360)+1
+			let sketch = document.getElementsByClassName("designElements_modal")[0]?.getElementsByClassName('designElements_sketch')[0]
+			let width
+			let scale
+			if(sketch.width<sketch.height){
+				width = Math.trunc(Math.random()*(sketch?.width-sketch?.width/2))+sketch?.width/4
+				scale = width / this.print.width.replace(/px/g,'')
+			}else{
+				width = Math.trunc(Math.random()*(sketch?.height-sketch?.height/2))+sketch?.height/4
+				scale = width / this.print.height.replace(/px/g,'')
+			}
+			// let x = sketch.width-Number(this.print.width.replace(/px/g,''))
+			// let y = sketch.height-Number(this.print.height.replace(/px/g,''))
+			let x = sketch?.width - this.print.width.replace(/px/g,'')*scale 
+			let y = sketch?.height-this.print.height.replace(/px/g,'')*scale
+			this.printStyleList[index].style = {
+				left:Math.trunc(Math.random()*x)+1+"px",
+				top:Math.trunc(Math.random()*y)+1+"px",
+				right:"auto",
+				bottom:"auto",
+				width:this.print.width.replace(/px/g,'')*scale+'px',
+				height:this.print.height.replace(/px/g,'')*scale+'px',
+				zIndex:this.printZIndex++
+			}
+			this.printStyleList[index].transform = {
+				rotateZ:this.printStyleList[index].transform.rotateZ?this.printStyleList[index].transform.rotateZ:0
+			}
+        },
+		//设置图片
+       async setTemplate(item,index) {
+			await this.setPrintWH(item.path)
+			this.designSelectElementsList
+			let sketch = document.getElementsByClassName("designElements_modal")[0]?.getElementsByClassName('designElements_sketch')[0]
+			let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
+			let scale
+			scale = (this.print.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
+			let zIndex = 1
+			let left = item.location[0]/sketchNum+'px'
+			let top = item.location[1]/sketchNum+'px'
+			if(sketch.offsetWidth < item.location[0]/sketchNum){
+				left = sketch.offsetWidth +'px'
+			}
+			if(sketch.offsetHeight < item.location[1]/sketchNum){
+				top = sketch.offsetHeight +'px'
+			}
+			this.printStyleList[index]={
+				centers:{
+					left:0,
+					top:0,
+				},
+				style:{
+					left:left,
+					top:top,
+					right:"auto",
+					bottom:"auto",
+					width:this.print.width.replace(/px/g,'')/sketchNum*item.scale+'px',
+					height:this.print.height.replace(/px/g,'')/sketchNum*item.scale+'px',
+					zIndex:zIndex++
+				},
+				transform:{
+					// scale:scale<.2?.2:scale,//0.2-3
+					rotateZ:item.angle,
+				},
+				designElementsBtn:false
+			}
+        },
+		computeZindex(){
+			let arr = JSON.parse(JSON.stringify(this.printStyleList))
+			arr.sort((a, b) => {
+				var a_num = a["style"].zIndex;
+				var b_num = b["style"].zIndex;
+				return a_num - b_num;
+			});
+			let num = 1
+			arr.forEach((v)=>{
+				v.style.zIndex = num++
+			})
+			return this.computeSize(arr)//计算单件衣服初始大小到目前大小的缩放比
+		},
+		computeSize(arr){
+			// let num = this.sketch/
+			return new Promise(async (resolve, reject) => {
+				let sketch = document.getElementsByClassName("designElements_sketch")[0]
+				let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
+				let prints = []
+				let scale
+				let location
+				for (let index = 0; index < arr.length; index++) {
+					await this.setPrintWH(this.exhibitionElementsList[index].path)
+					scale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
+					location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
+					let obj = {
+						angle : arr[index].transform.rotateZ,
+						location : location,
+						priority:arr[index].style.zIndex,
+						scale: scale,
+						designType:this.exhibitionElementsList[index].designType,
+						path:this.exhibitionElementsList[index].path,
+						minIOPath:this.exhibitionElementsList[index].minIOPath,
+					}
+					prints.push(obj)
+				}
+				resolve(prints)
+			})
+		},
+		async setPreview(){
+			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
+			let index 
+			designItemDetail.clothes.forEach((v,ind)=>{
+				if(v.id == this.current.id){
+					index = ind
+				}
+			})
+			// let data = {
+            //     ...designItemDetail,
+            //     priority:priority,
+            //     timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+            // }
+			await this.computeZindex().then((rv)=>{
+				this.setOkData = rv
+			})
+			let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
+			data.designSingleItemDTOList[index].trims.prints = this.setOkData
+			data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
+			this.loadingShow = true
+			Https.axiosPost(Https.httpUrls.designSingle, data).then(
+				(rv) => {
+					// designItemDetail.clothes[index].printObject.path = rv.clothes[0].printObject.path
+					this.currentFullBodyView = rv.currentFullBodyView
+					this.designItemDetailTS.rv = rv
+					this.designItemDetailTS.data = data
+					this.loadingShow = false
+					// this.designElements = false
+					if(this.driver__.driver){
+						nextTick().then(()=>{
+							driverObj__.moveNext();
+						})
+					}
+				}
+			).catch(res=>{
+				this.loadingShow = false
+			});
+		},
+		setOK(){
+			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
+			let index 
+			designItemDetail.clothes.forEach((v,ind)=>{
+				if(v.id == this.current.id){
+					index = ind
+				}
+			})
+			if(this.designItemDetailTS.rv){
+				designItemDetail.currentFullBodyView = this.designItemDetailTS.rv.currentFullBodyView
+				designItemDetail.clothes[index].layersObject = this.designItemDetailTS.rv.clothes[index].layersObject
+				designItemDetail.clothes[index].printObject = this.designItemDetailTS.rv.clothes[index].printObject
+				designItemDetail.clothes[index].trims.prints = this.setOkData
+				designItemDetail.ifSubmit = true
+				designItemDetail.clothes.forEach((item,i)=>{
+					let a
+					if(item.layersObject[0].imageCategory.indexOf("back") == -1){
+						a = item.layersObject[0]
+						item.layersObject[0] = item.layersObject[1]
+						item.layersObject[1] = a
+					}
+					item.layersObject[0].id = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[0]?.id
+					item.layersObject[1].id = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[1]?.id
+				})
+				this.store.commit("setDesignItemDetail", designItemDetail);
+				this.store.commit("setDesignPreviewData", this.designItemDetailTS.data);
+				this.setRevocation(designItemDetail,this.designItemDetailTS.data)
+				this.designItemDetailTS = {}
+			}
+			this.$parent.elementsList = JSON.parse(JSON.stringify(this.designElementsList))
+
+			this.designElements = false
+			if(this.driver__.driver){
+				driverObj__.moveNext();
+			}
+		},
+		clearModal(){
+			this.designElements = true//modal页面关闭
+			this.printZIndex = 2//点击图片z-index
+			this.imgDomIndex = 0//点击图片下标
+			this.designSelectElementsList = []
+			this.printStyleList = []
+			this.designElementsList = []
+			this.exhibitionElementsList = []
+		},
+		closeModal(){
+            let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
+			let _this = this
+            Modal.confirm({
+                title: this.t('DesignPrintOperation.jsContent1'),
+                icon: createVNode(ExclamationCircleOutlined),
+                okText: 'Yes',
+                cancelText: 'No',
+				mask:false,
+                centered:true,
+                onOk() {
+					_this.designElements=false
+                }
+            });
+		},
+    },
+});
+</script>
+
+<style lang="less">
+.designElements_modal {
+	// max-width: 1440px;
+	.mark_loading{
+		position: absolute;
+	}
+	.ant-modal-body{
+		padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important;
+		// height: calc(65vh - 6.4rem*1.2));
+		height: calc(65rem*1.2);
+		display: flex;
+		overflow-y: hidden;
+		flex-direction: column;
+	}
+	.ant-modal-content{
+		border-radius: calc(1rem*1.2);
+		overflow: hidden;
+	}
+
+    .designElements_content {
+        // background: #f2f3fb;
+        // padding-bottom: 2.9rem*1.2);
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+        .designElements_header {
+            position: relative;
+            height: calc(6.6rem*1.2);
+            width: 100%;
+            background: #F7F7F7;
+
+            .placement_modal_title{
+                position: absolute;
+                height: 100%;
+                line-height: calc(6.6rem*1.2);
+                left: calc(3.7rem*1.2);
+                top: 0;
+                font-size: calc(1.8rem*1.2);
+                color: #030303;
+            }
+        }
+
+		.designElements_right{
+			height: calc(50rem*1.2);
+			position: absolute;
+			right: calc(2rem*1.2);
+			left: auto;
+			top: 50%;
+			transform: translateY(-50%);
+			max-height: calc(50rem*1.2);
+			max-width: calc(30rem*1.2);
+			.designElements_entirety_img{
+				height: 100%;
+				img{
+					max-width: 100%;
+					max-height: 100%;
+					object-fit: contain;
+					position: relative;
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%,-50%);
+				}
+			}
+		}
+		.designElements_open{
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+			.print_right{
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				border: 2px solid;
+				padding: calc(2rem*1.2) 0;
+				width: calc(16rem*1.2);
+				border-radius: calc(1rem*1.2);
+				height: calc(40rem*1.2);
+				.button_second{
+					margin: calc(1rem*1.2) 0;
+					width: calc(10rem*1.2);
+					text-align: center;
+					position: initial;
+					transform: none;
+					height: calc(3rem*1.2);
+					line-height: calc(3rem*1.2);
+				}
+				.designElements_nav{
+					display: flex;
+					margin-top: calc(2rem*1.2);
+					flex-wrap: wrap;
+					width: 100%;
+					height: calc(22rem*1.2);
+					overflow-x: hidden;
+					justify-content: space-evenly;
+					align-content: flex-start;
+					&.designElements_nav::-webkit-scrollbar {
+						display: none;
+					}
+					.active{
+						img{
+							border: 2px solid;
+							border-radius: 2px;
+							box-sizing: border-box;
+						}
+					}
+					.designElements_single{
+						width: 40%;
+						margin-bottom: calc(2rem*1.2);
+					}
+					img{
+						width: 100%;
+						cursor: pointer;
+					}
+				}
+				&.show_print_right{
+					border: none;
+					padding: 0;
+					height: 100%;
+				}
+			}
+		}
+		.designElements_centent{
+			margin: 0 auto;
+			overflow: hidden;
+			justify-content: space-between;
+			position: relative;
+			user-select:none;
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%,-50%);
+			display: flex;
+			&.active{
+				flex-direction: row;
+			}
+			.designElements_imgMask{
+				width: auto;
+				height: auto;
+				position: relative;
+				>img{
+					z-index: 2;
+					position: relative;
+					// max-width: 100%;
+					// max-height: 100%;
+					// width: 100%;
+					// height: 50rem*1.2);
+					max-height: calc(50rem*1.2);
+					min-height: calc(30rem*1.2);
+					width: auto;
+					max-width: calc(60rem*1.2);
+				}
+				.designElements_sketch_mask{
+					z-index: 3;
+					position: absolute;
+					inset: 0;
+					width: 100%;
+				}
+				>div{
+					position: absolute;
+					width: 100%;
+					height: 100%;
+					top: 0;
+				}
+			}
+			.designElements_print{
+				z-index: 3;
+				.modal_imgItem{
+					position: absolute;
+					overflow: hidden;
+					top: 0;
+					img{
+						width: 100%;
+						height: 100%;
+						float: left;
+						user-select:none;
+						-webkit-user-drag: none;
+					}
+				}
+			}
+			.designElements_btn{
+				z-index: 3;
+				>div{
+					width: 100%;
+					height: 100%;
+					border: 2px solid rgb(20, 188, 255);
+					position: absolute;
+				}
+				ul{
+					list-style: none;
+					// width: 100%;
+					// height: 100%;
+					position: absolute;
+					top: 0;
+					left: 0;
+					box-sizing: border-box;
+					border: 2px solid rgb(20, 188, 255);
+					padding: 0;
+					-webkit-user-drag: none;
+					user-select:none;
+					opacity: 0;
+					margin: 0;
+				
+					&.designElements_Mouoverall{
+						opacity: 1;
+						border: none;
+						width: calc(1.4rem*1.2);
+						height: calc(1.4rem*1.2);
+						i{
+							display: flex;
+							color: #14bcff;
+						}
+
+					}
+					li{
+						cursor: pointer;
+						// border-radius: 50%;
+						width: calc(1rem*1.2);
+						height: calc(1rem*1.2);
+						background-color: rgb(20, 188, 255);
+						position: absolute;
+						pointer-events: none;
+					}
+					&.active{
+						opacity: 1;
+						li{
+							pointer-events: auto;
+						}
+					}
+					.designElements_btn_top,.designElements_btn_bottom{
+						left: 50%;
+						transform: translate(-50%,-50%) ;
+						cursor: n-resize;
+					}
+					.designElements_btn_top{
+						top: 0;
+					}
+					.designElements_btn_bottom{
+						top: 100%;
+					}
+					.designElements_btn_left,.designElements_btn_right{
+						top: 50%;
+						transform: translate(-50%,-50%) ;
+						cursor: e-resize;
+					}
+					.designElements_btn_left{
+						left: 0;
+					}
+					.designElements_btn_right{
+						left: 100%;
+					}
+					.designElements_rotote{
+						top: 50%;
+						left: 50%;
+						transform: translate(-50%,-50%);
+						width: 0;
+						height: 0;
+					}
+					.designElements_delete{
+						position: absolute;
+						top: 0;
+						right: 0;
+						width: 4rem;
+						background: none;
+						transform: translate(100%, -100%);
+						height: 4rem;
+						img{
+							width: 100%;
+							height: 100%;
+						}
+					}
+					.designElements_rotote::after{
+						position: absolute;
+						content: "";
+						background-color: #14bcff;
+						width: calc(.2rem*1.2);
+						height: calc(3rem*1.2);
+						left: 50%;
+						bottom: 0;
+						transform: translateX(-50%);
+					}
+					.designElements_rotote::before{
+						position: absolute;
+						content: "";
+						background-color: #14bcff;
+						top: calc(50% - 3rem*1.2);
+						left: 50%;
+						transform: translate(-50%,-50%) ;
+						width: calc(1.5rem*1.2);
+						height: calc(1.5rem*1.2);
+						border-radius: 50%;
+					}
+				}
+			}
+			
+		}
+		.subitOkPreviewBtn{
+			z-index: 2;
+			margin: calc(1rem*1.2) 0;
+			width: calc(10rem*1.2);
+			text-align: center;
+			position: initial;
+			transform: none;
+		}
+    }
+}
+</style>

src/component/Detail/DesignElementsMobile.vue

@@ -0,0 +1,924 @@
+<template>
+  <div>
+	<a-modal
+            class="designElementsMobile_modal"
+            v-model:visible="designElements"
+            :footer="null"
+            width="78%"
+            :maskClosable="false"
+            :centered="true"
+            :closable="false"
+			:keyboard="false"
+            :mask="true"
+        >
+            <div class="designElementsMobile_content">
+				<div class="design_title_text">
+					<div>{{ $t('DesignPrintOperation.Placement') }}</div>
+				</div>
+				<div class="design_closeIcon" @click.stop="closeModal()">
+					<i class="fi fi-rr-cross-small"></i>
+				</div>
+				<div class="designElementsMobile_open">
+					<!--  -->
+					<div class="print_right">
+						<div class="print_right show_print_right ">
+							<div @click="random" class="button_second">{{ $t('DesignPrintOperation.Random') }}</div>
+							<div class="designElementsMobile_nav">
+								<div class="designElementsMobile_single" v-for="item,index in designElementsList" :key="item">
+									<img :src="item.path" @click="setpitch(item,index)">
+								</div>
+								<div class="designElementsMobile_single" v-for="item,index in designSelectElementsList" :key="item">
+									<img :src="item.path" @click="setpitch(item,index)">
+								</div>
+							</div>
+							<div class="subitOkPreviewBtn" @click.stop="setPreview">{{ $t('DesignPrintOperation.preview') }}</div>
+							<div class="subitOkPreviewBtn  _1"  @click.stop="setOK">OK</div>
+						</div>
+					</div>
+				</div>
+				<div class="designElementsMobile_centent" id="designElementsCentent">
+					<div class="designElementsMobile_imgMask">
+						<div class="designElementsMobile_print">
+							<div 
+								v-for="item,index in exhibitionElementsList" 
+								:key="item"
+								:style="[printStyleList?.[index]?.style]" 
+								@touchstart.stop="itemMoveMousedown(index,$event)"
+								class="modal_imgItem" 
+								ref="content" >
+								<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designElementsMobile_imgItme" draggable="false"> 
+							</div>
+						</div>
+						<img :src="current?.path" alt="" class="designElementsMobile_sketch">
+						<div class="designElementsMobile_btn">
+							<ul v-for="item,index in printStyleList" :key="item" :class="{active:item?.designElementsBtn?item?.designElementsBtn:false}" class="designElementsMobile_Mousingle" :style="item.style" @touchstart.stop="itemMoveMousedown(index,$event)">
+								<li class="designElementsMobile_btn_top" @touchstart.stop="itemSizeMousedown('top',$event)"></li>
+								<li class="designElementsMobile_btn_bottom" @touchstart.stop="itemSizeMousedown('bottom',$event)"></li>
+								<li class="designElementsMobile_btn_left" @touchstart.stop="itemSizeMousedown('left',$event)"></li>
+								<li class="designElementsMobile_btn_right" @touchstart.stop="itemSizeMousedown('right',$event)"></li>
+								<li class="designElementsMobile_rotote" v-rotote.stop="[index,item.transform]"></li>
+								<li class="designElementsMobile_delete" @click="deletePrint">
+									<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
+								</li>
+							</ul>
+							<div></div>
+						</div>
+					</div>
+				</div>
+				<div class="designElementsMobile_right">
+					<div class="designElementsMobile_entirety_img">
+						<img :src="currentFullBodyView" alt="">
+					</div>
+				</div>
+            </div>
+			<div class="mark_loading" v-show="loadingShow">
+				<a-spin size="large" />
+        </div>
+        </a-modal>
+  </div>
+</template>
+
+<script >
+import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "vue";
+// import { LoadingOutlined } from "@ant-design/icons-vue";
+import { useStore } from "vuex";
+import { openGuide,driverObj__ } from "@/tool/guide";
+import { Https } from "@/tool/https";
+import { Modal,message } from 'ant-design-vue';
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { useI18n } from "vue-i18n";
+export default defineComponent({
+	
+    setup(prop) {
+        let designElements = ref(false);
+		let designSelectElementsList = ref([])//新增的元素
+		let designElementsList = ref([])//已经存在的元素
+		let exhibitionElementsList = ref([])//展示的元素
+		let setOkData = ref([])
+		let current = inject('current')//父组件传过来的数据
+		let driver__ = inject('driver__')
+        let setRevocation = inject('setRevocation')//父组件传过来的数据
+		let printZIndex = ref(2)//印花优先级
+        let printStyleList = ref([]);
+		let currentPrintStyleList = {
+			centers:{
+				left:0,
+				top:0,
+			},
+			style:{
+				left:0+"px",
+				top:0+"px",
+				right:"auto",
+				bottom:"auto",
+				width:'auto',
+				height:'auto',
+				zIndex:1,
+			},
+			transform:{
+				scale:1,
+				rotateZ:0,
+			},
+			designElementsBtn:false
+		}
+		let direction = ref('')
+		let imgDom = ref()
+		let imgDomIndex = ref(0)
+		let print = ref({
+			width:'',
+			height:''
+		})
+		let sketch = ref({
+			width:'',
+			height:''
+		})
+		let loadingShow = ref(false)
+		let currentFullBodyView = ref('')
+		let designItemDetailTS = ref({})
+		let body = ref(false)
+		let {t} = useI18n()
+        return {
+            designElements,
+			designSelectElementsList,
+			designElementsList,
+			exhibitionElementsList,
+			setOkData,
+			current,
+			driver__,
+			printZIndex,
+            printStyleList,
+			currentPrintStyleList,
+			direction,//判断点击的是li那个边
+			imgDom,
+			imgDomIndex,
+			print,
+			sketch,
+			loadingShow,
+			setRevocation,
+			t,
+			currentFullBodyView,
+			designItemDetailTS,
+			body,
+        };
+    },
+    data() {
+        return {
+            store: useStore(),
+        };
+    },
+
+	directives:{
+		//操作旋转
+		rotote:{
+			mounted(el,value){
+				
+				el.addEventListener('touchstart', (e) => {
+				let elParent = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName('modal_imgItem')[value.instance.imgDomIndex]
+				let mouse = true;
+				let angle  = 0
+				let num = 1
+				let x = 0
+				let y = 0
+				num = value.instance.printStyleList[value.instance.imgDomIndex].transform.scale
+				angle = value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ
+				// 添加鼠标按下事件监听器
+				el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
+				// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
+				// let rotateZ = Number(elParent.firstElementChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
+					e.stopPropagation()
+					mouse = true;
+					var info = el.getBoundingClientRect();
+					let eX = info.x + info.width / 2;
+					let eY = info.y + info.height / 2;
+					let touchmove = (e) => {
+						if (mouse) {
+							let X = eX 
+							let Y = eY
+							let x = e.targetTouches[0].clientX - X
+							let y = Y - e.targetTouches[0].clientY
+							angle = Math.atan2(x,y)*(180 / Math.PI)
+							elParent.firstElementChild.style.transform = "rotateZ("+ angle + "deg)"
+							el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
+						}
+					}
+					document.addEventListener('touchmove', touchmove,{passive:true});
+					// 添加鼠标松开事件监听器
+					let touchend = () => {
+						value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ = angle
+						mouse = false;
+						document.removeEventListener('touchend',touchend)
+						document.removeEventListener('touchmove',touchmove)
+					}
+					document.addEventListener('touchend', touchend);
+				});
+			}
+
+			},
+	},
+    methods: {
+		init(){
+			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
+			this.currentFullBodyView = designItemDetail.currentFullBodyView? designItemDetail.currentFullBodyView:designItemDetail.designItemUrl
+			if(designItemDetail.others.length == 0){
+				this.body = true
+			}
+			this.designElements = true
+			this.clearModal()
+			if(this.current.trims.prints)this.exhibitionElementsList = JSON.parse(JSON.stringify(this.current.trims.prints))
+			if(this.$parent.exhibitionList.elements)this.designSelectElementsList = JSON.parse(JSON.stringify(this.$parent.exhibitionList.elements))
+			if(this.$parent.elementsList)this.designElementsList = JSON.parse(JSON.stringify(this.$parent.elementsList))
+			let skecth = new Image
+			skecth.src = this.current.path
+			skecth.onload=()=>{
+				this.sketch.width = skecth.width/10+'rem'
+				this.sketch.height = skecth.height/10+'rem'
+				skecth.remove()
+			}
+			if(this.exhibitionElementsList.length > 0){
+				this.exhibitionElementsList.forEach((item,index)=>{
+					this.setTemplate(item,index)
+				})
+			}else{
+			}
+		},
+		random(){
+			if(this.printStyleList.length == 0)return
+			this.printStyleList.forEach((v,index)=>{
+				this.refetchTemplate(index)
+			})
+		},
+		setPrintWH(url){
+			let print = new Image
+			return new Promise((resolve, reject) => {
+				print.onload=()=>{
+					this.print.width = print.width+'px'
+					this.print.height = print.height+'px'
+					resolve()
+					print.remove()
+				}
+				print.src = url
+			})
+		},
+		async setpitch(item,index){
+			await this.setPrintWH(item.path)
+			this.printStyleList.forEach((v)=>{
+				v.designElementsBtn = false
+			})
+			this.currentPrintStyleList.url = item.url
+			this.printStyleList.push(JSON.parse(JSON.stringify(this.currentPrintStyleList)))
+			let currentIndex = this.printStyleList.length-1
+			this.exhibitionElementsList.push({
+				angle:0,
+				designType:item.designType,
+				minIOPath:item.minIOPath,
+				path:item.path,
+				priority:1,
+				scale:1,
+				location:[0,0]
+			})
+			this.refetchTemplate(currentIndex)
+		},
+		//设置移动
+		itemMoveMousedown(index,event){
+			this.imgDomIndex = index
+			this.printStyleList.forEach((v)=>{
+				v.designElementsBtn = false
+			})
+			this.imgDom = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
+			let scale = Number(this.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
+			let rotateZ = Number(this.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
+			this.printStyleList[index].designElementsBtn = true
+			this.printStyleList[index].style.zIndex = this.printZIndex++
+			this.printStyleList[index].transform = {
+				scale:scale,
+				rotateZ:rotateZ?rotateZ:0,
+			}
+			let imgDomWH = this.imgDom.getBoundingClientRect()
+			let left = Number(this.printStyleList[index].style.left.replace(/px/g,''))
+			let top = Number(this.printStyleList[index].style.top.replace(/px/g,''))
+			this.printStyleList[index].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-left
+			this.printStyleList[index].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-top
+			document.addEventListener("touchend", this.touchend);
+			document.addEventListener("touchmove", this.moveMousemove);
+		},
+		//设置尺寸
+		itemSizeMousedown(direction,event){
+			this.direction = direction
+			this.imgDom = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
+			let scale = Number(this.imgDom.style.transform?.split('scale(')[1]?.split(')')[0])
+			let rotateZ = Number(this.imgDom.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
+			this.printStyleList[this.imgDomIndex].designElementsBtn = true
+			this.printStyleList[this.imgDomIndex].transform = {
+				scale:scale,
+				rotateZ:rotateZ,
+			}
+			let imgDomWH = this.imgDom.getBoundingClientRect()
+			let li = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName("designElementsMobile_btn_top")[0].offsetWidth/2
+			if(this.direction == 'right' || this.direction == 'bottom'){
+				this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-li
+				this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-li
+			}else{
+				this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left+imgDomWH.width-li
+				this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top+imgDomWH.height-li
+				this.printStyleList[this.imgDomIndex].centers.right = this.imgDom.parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft
+				this.printStyleList[this.imgDomIndex].centers.bottom = this.imgDom.parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop
+			}
+			document.addEventListener("touchend", this.sizeMouseup);
+			document.addEventListener("touchmove", this.sizeMousemove);
+		},
+		//鼠标移动
+		moveMousemove(e) {
+			let imgDomWH = this.imgDom.getBoundingClientRect()
+			let parentNode = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName("designElementsMobile_imgMask")[0]
+			parentNode = parentNode.getBoundingClientRect()
+			let x = ( e.changedTouches[0].pageX - this.printStyleList[this.imgDomIndex].centers.left)+'px'
+			let y = (  e.changedTouches[0].pageY - this.printStyleList[this.imgDomIndex].centers.top)+'px'
+			this.printStyleList[this.imgDomIndex].style.left = x
+			this.printStyleList[this.imgDomIndex].style.top = y
+			
+		
+		},
+
+		sizeMousemove(e) {
+			let imgDomWH = this.imgDom.getBoundingClientRect()
+			let parentNode =this.imgDom.parentNode
+			let width = imgDomWH.width
+			let height = imgDomWH.height
+			let num = width/height
+			let num1 = height/width
+			let w,h
+			//判断移动四个边
+			if(this.direction == 'right'){
+				w = ( e.changedTouches[0].pageX -imgDomWH.left)
+				h = ( e.changedTouches[0].pageX - imgDomWH.left)*num
+				width = w+'px'
+				height = w*num1+'px'
+			}else if(this.direction == 'top'){
+				this.printStyleList[this.imgDomIndex].style.top = 'auto'
+				// this.printStyleList[this.imgDomIndex].style.left = 'auto'
+				// this.printStyleList[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
+				this.printStyleList[this.imgDomIndex].style.bottom = this.printStyleList[this.imgDomIndex].centers.bottom+'px'
+				w = ( e.changedTouches[0].pageX - this.printStyleList[this.imgDomIndex].centers.left)*num
+				h = (this.printStyleList[this.imgDomIndex].centers.top -  e.changedTouches[0].pageY)
+				
+				height = h+'px'
+				width = h*num+'px'
+			}else if(this.direction == 'bottom'){
+				h = ( e.changedTouches[0].pageY - imgDomWH.top)
+				height = h+'px'
+				width = h*num+'px'
+			}else if(this.direction == 'left'){
+				this.printStyleList[this.imgDomIndex].style.left = 'auto'
+				this.printStyleList[this.imgDomIndex].style.right = this.printStyleList[this.imgDomIndex].centers.right+'px'
+				w = (this.printStyleList[this.imgDomIndex].centers.left -  e.changedTouches[0].pageX)
+				width = w+'px'
+				height = w*num1+'px'
+			}
+			//判断尺寸是否到边
+			this.printStyleList[this.imgDomIndex].style.width = width
+			this.printStyleList[this.imgDomIndex].style.height = height
+		},
+		//鼠标抬起
+		sizeMouseup(e){
+			this.printStyleList[this.imgDomIndex].style={
+				right:'auto',
+				left:this.imgDom.offsetLeft+'px',
+				bottom:'auto',
+				top:this.imgDom.offsetTop+'px',
+				height:this.imgDom.offsetHeight+'px',
+				width:this.imgDom.offsetWidth+'px',
+				zIndex:this.printZIndex
+			}
+			document.removeEventListener("touchend", this.sizeMouseup);
+			document.removeEventListener("touchmove", this.sizeMousemove);
+		},
+		touchend(e) {
+
+			document.removeEventListener("touchend", this.touchend);
+			document.removeEventListener("touchmove", this.moveMousemove);
+		},
+
+
+		
+		deletePrint(){
+			this.exhibitionElementsList.splice(this.imgDomIndex,1)
+			this.printStyleList.splice(this.imgDomIndex,1)
+		},
+		
+        //随机重置图片顺序
+        refetchTemplate(index) {
+			// let scale = (Math.trunc(Math.random()*15)+1)*.1
+			let rotateZ1 = Math.trunc(Math.random()*360)+1
+			let rotateZ2 = Math.trunc(Math.random()*360)+1
+			let sketch = document.getElementsByClassName("designElementsMobile_modal")[0]?.getElementsByClassName('designElementsMobile_sketch')[0]
+			let width
+			let scale
+			if(sketch.width<sketch.height){
+				width = Math.trunc(Math.random()*(sketch?.width-sketch?.width/2))+sketch?.width/4
+				scale = width / this.print.width.replace(/px/g,'')
+			}else{
+				width = Math.trunc(Math.random()*(sketch?.height-sketch?.height/2))+sketch?.height/4
+				scale = width / this.print.height.replace(/px/g,'')
+			}
+			// let x = sketch.width-Number(this.print.width.replace(/px/g,''))
+			// let y = sketch.height-Number(this.print.height.replace(/px/g,''))
+			let x = sketch?.width - this.print.width.replace(/px/g,'')*scale 
+			let y = sketch?.height-this.print.height.replace(/px/g,'')*scale
+			this.printStyleList[index].style = {
+				left:Math.trunc(Math.random()*x)+1+"px",
+				top:Math.trunc(Math.random()*y)+1+"px",
+				right:"auto",
+				bottom:"auto",
+				width:this.print.width.replace(/px/g,'')*scale+'px',
+				height:this.print.height.replace(/px/g,'')*scale+'px',
+				zIndex:this.printZIndex++
+			}
+			this.printStyleList[index].transform = {
+				rotateZ:this.printStyleList[index].transform.rotateZ?this.printStyleList[index].transform.rotateZ:0
+			}
+        },
+		//设置图片
+		async setTemplate(item,index) {
+			await this.setPrintWH(item.path)
+			this.designElementsList
+			let sketch = document.getElementsByClassName("designElementsMobile_modal")[0]?.getElementsByClassName('designElementsMobile_sketch')[0]
+			let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
+			let scale
+			scale = (this.print.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
+			let zIndex = 1
+			let left = item.location[0]/sketchNum+'px'
+			let top = item.location[1]/sketchNum+'px'
+			if(sketch.offsetWidth < item.location[0]/sketchNum){
+				left = sketch.offsetWidth +'px'
+			}
+			if(sketch.offsetHeight < item.location[1]/sketchNum){
+				top = sketch.offsetHeight +'px'
+			}
+			this.printStyleList[index]={
+				centers:{
+					left:0,
+					top:0,
+				},
+				style:{
+					left:left,
+					top:top,
+					right:"auto",
+					bottom:"auto",
+					width:this.print.width.replace(/px/g,'')/sketchNum*item.scale+'px',
+					height:this.print.height.replace(/px/g,'')/sketchNum*item.scale+'px',
+					zIndex:zIndex++
+				},
+				transform:{
+					// scale:scale<.2?.2:scale,//0.2-3
+					rotateZ:item.angle,
+				},
+				designElementsBtn:false
+			}
+        },
+		computeZindex(){
+			let arr = JSON.parse(JSON.stringify(this.printStyleList))
+			arr.sort((a, b) => {
+				var a_num = a["style"].zIndex;
+				var b_num = b["style"].zIndex;
+				return a_num - b_num;
+			});
+			let num = 1
+			arr.forEach((v)=>{
+				v.style.zIndex = num++
+			})
+			return this.computeSize(arr)//计算单件衣服初始大小到目前大小的缩放比
+		},
+		async computeSize(arr){
+			// let num = this.sketch/
+			return new Promise(async (resolve, reject) => {
+				let sketch = document.getElementsByClassName("designElementsMobile_sketch")[0]
+				let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
+				let prints = []
+				let scale
+				let location
+				for (let index = 0; index < arr.length; index++) {
+					await this.setPrintWH(this.exhibitionElementsList[index].path)
+					scale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
+					location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
+					let obj = {
+						angle : arr[index].transform.rotateZ,
+						location : location,
+						priority:arr[index].style.zIndex,
+						scale: scale,
+						designType:this.exhibitionElementsList[index].designType,
+						path:this.exhibitionElementsList[index].path,
+						minIOPath:this.exhibitionElementsList[index].minIOPath,
+					}
+					prints.push(obj)
+				}
+				resolve(prints)
+			})
+		},
+		async setPreview(){
+			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
+			let index 
+			designItemDetail.clothes.forEach((v,ind)=>{
+				if(v.id == this.current.id){
+					index = ind
+				}
+			})
+			let priority = designItemDetail.clothes.map((v)=>{
+                return v.type
+            })
+			// let data = {
+            //     ...designItemDetail,
+            //     priority:priority,
+            //     timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+            // }
+			let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
+			await this.computeZindex().then((rv)=>{
+				this.setOkData = rv
+			})
+			data.designSingleItemDTOList[index].trims.prints = this.setOkData
+			data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
+			this.loadingShow = true
+			Https.axiosPost(Https.httpUrls.designSingle, data).then(
+				(rv) => {
+					// designItemDetail.clothes[index].printObject.path = rv.clothes[0].printObject.path
+					this.currentFullBodyView = rv.currentFullBodyView
+					this.designItemDetailTS.rv = rv
+					this.designItemDetailTS.data = data
+					this.loadingShow = false
+					// this.designElements = false
+					if(this.driver__.driver){
+						nextTick().then(()=>{
+							driverObj__.moveNext();
+						})
+					}
+				}
+			).catch(res=>{
+				this.loadingShow = false
+			});
+		},
+		setOK(){
+			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
+			let index 
+			designItemDetail.clothes.forEach((v,ind)=>{
+				if(v.id == this.current.id){
+					index = ind
+				}
+			})
+			if(this.designItemDetailTS.rv){
+				designItemDetail.currentFullBodyView = this.designItemDetailTS.rv.currentFullBodyView
+				designItemDetail.clothes[index].layersObject = this.designItemDetailTS.rv.clothes[index].layersObject
+				designItemDetail.clothes[index].printObject = this.designItemDetailTS.rv.clothes[index].printObject
+				designItemDetail.clothes[index].trims.prints = this.setOkData
+				designItemDetail.ifSubmit = true
+				designItemDetail.clothes.forEach((item,i)=>{
+					let a
+					if(item.layersObject[0].imageCategory.indexOf("back") == -1){
+						a = item.layersObject[0]
+						item.layersObject[0] = item.layersObject[1]
+						item.layersObject[1] = a
+					}
+					item.layersObject[0].id = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[0]?.id
+					item.layersObject[1].id = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[1]?.id
+				})
+				this.store.commit("setDesignItemDetail", designItemDetail);
+				this.store.commit("setDesignPreviewData", this.designItemDetailTS.data);
+				this.setRevocation(designItemDetail,this.designItemDetailTS.data)
+				this.designItemDetailTS = {}
+			}
+			this.designElements = false
+			if(this.driver__.driver){
+				driverObj__.moveNext();
+			}
+		},
+		clearModal(){
+			this.designElements = true//modal页面关闭
+			this.printZIndex = 2//点击图片z-index
+			this.imgDomIndex = 0//点击图片下标
+			this.designSelectElementsList = []
+			this.printStyleList = []
+			this.designElementsList = []
+			this.exhibitionElementsList = []
+		},
+		closeModal(){
+            let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
+			let _this = this
+            Modal.confirm({
+                title: this.t('DesignPrintOperation.jsContent1'),
+                icon: createVNode(ExclamationCircleOutlined),
+                okText: 'Yes',
+                cancelText: 'No',
+				mask:false,
+                centered:true,
+                onOk() {
+					_this.designElements=false
+                }
+            });
+		},
+    },
+});
+</script>
+
+<style lang="less">
+.designElementsMobile_modal {
+	// max-width: 1440px;
+	.mark_loading{
+		position: absolute;
+	}
+	.ant-modal-body{
+		padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important;
+		// height: calc(65vh - 6.4rem*1.2));
+		height: calc(65rem*1.2);
+		display: flex;
+		overflow-y: hidden;
+		flex-direction: column;
+	}
+	.ant-modal-content{
+		border-radius: calc(1rem*1.2);
+		overflow: hidden;
+	}
+
+    .designElementsMobile_content {
+        // background: #f2f3fb;
+        // padding-bottom: 2.9rem*1.2);
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+        .designElementsMobile_header {
+            position: relative;
+            height: calc(6.6rem*1.2);
+            width: 100%;
+            background: #F7F7F7;
+
+            .placement_modal_title{
+                position: absolute;
+                height: 100%;
+                line-height: calc(6.6rem*1.2);
+                left: calc(3.7rem*1.2);
+                top: 0;
+                font-size: calc(1.8rem*1.2);
+                color: #030303;
+            }
+        }
+
+		.designElementsMobile_right{
+			height: calc(50rem*1.2);
+			position: absolute;
+			right: calc(2rem*1.2);
+			left: auto;
+			top: 50%;
+			transform: translateY(-50%);
+			max-height: calc(50rem*1.2);
+			max-width: calc(30rem*1.2);
+			.designElementsMobile_entirety_img{
+				height: 100%;
+				img{
+					max-width: 100%;
+					max-height: 100%;
+					object-fit: contain;
+					position: relative;
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%,-50%);
+				}
+			}
+		}
+		.designElementsMobile_open{
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+			.print_right{
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				border: 2px solid;
+				padding: calc(2rem*1.2) 0;
+				width: calc(16rem*1.2);
+				border-radius: calc(1rem*1.2);
+				height: calc(40rem*1.2);
+				.button_second{
+					margin: calc(1rem*1.2) 0;
+					width: calc(10rem*1.2);
+					text-align: center;
+					position: initial;
+					transform: none;
+					height: calc(3rem*1.2);
+					line-height: calc(3rem*1.2);
+				}
+				.designElementsMobile_nav{
+					display: flex;
+					margin-top: calc(2rem*1.2);
+					flex-wrap: wrap;
+					width: 100%;
+					height: calc(22rem*1.2);
+					overflow-x: hidden;
+					justify-content: space-evenly;
+					align-content: flex-start;
+					&.designElementsMobile_nav::-webkit-scrollbar {
+						display: none;
+					}
+					.active{
+						img{
+							border: 2px solid;
+							border-radius: 2px;
+							box-sizing: border-box;
+						}
+					}
+					.designElementsMobile_single{
+						width: 40%;
+						margin-bottom: calc(2rem*1.2);
+					}
+					img{
+						width: 100%;
+						cursor: pointer;
+					}
+				}
+				&.show_print_right{
+					border: none;
+					padding: 0;
+					height: 100%;
+				}
+			}
+		}
+		.designElementsMobile_centent{
+			margin: 0 auto;
+			overflow: hidden;
+			justify-content: space-between;
+			position: relative;
+			user-select:none;
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%,-50%);
+			display: flex;
+			&.active{
+				flex-direction: row;
+			}
+			.designElementsMobile_imgMask{
+				width: auto;
+				height: auto;
+				position: relative;
+				>img{
+					z-index: 2;
+					position: relative;
+					// max-width: 100%;
+					// max-height: 100%;
+					// width: 100%;
+					// height: 50rem*1.2);
+					max-height: calc(50rem*1.2);
+					min-height: calc(30rem*1.2);
+					width: auto;
+					max-width: calc(60rem*1.2);
+				}
+				.designElementsMobile_sketch_mask{
+					z-index: 3;
+					position: absolute;
+					inset: 0;
+					width: 100%;
+				}
+				>div{
+					position: absolute;
+					width: 100%;
+					height: 100%;
+					top: 0;
+				}
+			}
+			.designElementsMobile_print{
+				z-index: 3;
+				.modal_imgItem{
+					position: absolute;
+					overflow: hidden;
+					top: 0;
+					img{
+						width: 100%;
+						height: 100%;
+						float: left;
+						user-select:none;
+						-webkit-user-drag: none;
+					}
+				}
+			}
+			.designElementsMobile_btn{
+				z-index: 3;
+				>div{
+					width: 100%;
+					height: 100%;
+					border: 2px solid rgb(20, 188, 255);
+					position: absolute;
+				}
+				ul{
+					list-style: none;
+					// width: 100%;
+					// height: 100%;
+					position: absolute;
+					top: 0;
+					left: 0;
+					box-sizing: border-box;
+					border: 2px solid rgb(20, 188, 255);
+					padding: 0;
+					-webkit-user-drag: none;
+					user-select:none;
+					opacity: 0;
+					margin: 0;
+				
+					&.designElementsMobile_Mouoverall{
+						opacity: 1;
+						border: none;
+						width: calc(1.4rem*1.2);
+						height: calc(1.4rem*1.2);
+						i{
+							display: flex;
+							color: #14bcff;
+						}
+
+					}
+					li{
+						cursor: pointer;
+						// border-radius: 50%;
+						width: calc(1rem*1.2);
+						height: calc(1rem*1.2);
+						background-color: rgb(20, 188, 255);
+						position: absolute;
+						pointer-events: none;
+					}
+					&.active{
+						opacity: 1;
+						li{
+							pointer-events: auto;
+						}
+					}
+					.designElementsMobile_btn_top,.designElementsMobile_btn_bottom{
+						left: 50%;
+						transform: translate(-50%,-50%) ;
+						cursor: n-resize;
+					}
+					.designElementsMobile_btn_top{
+						top: 0;
+					}
+					.designElementsMobile_btn_bottom{
+						top: 100%;
+					}
+					.designElementsMobile_btn_left,.designElementsMobile_btn_right{
+						top: 50%;
+						transform: translate(-50%,-50%) ;
+						cursor: e-resize;
+					}
+					.designElementsMobile_btn_left{
+						left: 0;
+					}
+					.designElementsMobile_btn_right{
+						left: 100%;
+					}
+					.designElementsMobile_rotote{
+						top: 50%;
+						left: 50%;
+						transform: translate(-50%,-50%);
+						width: 0;
+						height: 0;
+					}
+					.designElementsMobile_delete{
+						position: absolute;
+						top: 0;
+						right: 0;
+						width: 4rem;
+						background: none;
+						transform: translate(100%, -100%);
+						height: 4rem;
+						img{
+							width: 100%;
+							height: 100%;
+						}
+					}
+					.designElementsMobile_rotote::after{
+						position: absolute;
+						content: "";
+						background-color: #14bcff;
+						width: calc(.2rem*1.2);
+						height: calc(3rem*1.2);
+						left: 50%;
+						bottom: 0;
+						transform: translateX(-50%);
+					}
+					.designElementsMobile_rotote::before{
+						position: absolute;
+						content: "";
+						background-color: #14bcff;
+						top: calc(50% - 3rem*1.2);
+						left: 50%;
+						transform: translate(-50%,-50%) ;
+						width: calc(1.5rem*1.2);
+						height: calc(1.5rem*1.2);
+						border-radius: 50%;
+					}
+				}
+			}
+			
+		}
+		.subitOkPreviewBtn{
+			z-index: 2;
+			margin: calc(1rem*1.2) 0;
+			width: calc(10rem*1.2);
+			text-align: center;
+			position: initial;
+			transform: none;
+		}
+    }
+}
+</style>

src/component/Detail/DesignPrintOperation.vue

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

src/component/Detail/DesignPrintOperationMobile.vue

@@ -49,17 +49,23 @@
 								</a-slider>
 							</div>
 							<div v-show="overallSingle" @click="random" class="button_second">{{ $t('DesignPrintOperation.Random') }}</div>
-							<div v-show="overallSingle" class="print_input">
+							<!-- <div v-show="overallSingle" class="print_input">
 								<input class="search_input" :placeholder="$t('DesignPrintOperation.inputContent')" type="Number" v-model="printAmount" @input="setprintAmount">
 								<i class="fi fi-rr-trash" @click="deletePrint"></i>
-							</div>
+							</div> -->
 							<div class="designOpenrtionMobile_nav">
-								<div class="designOpenrtionMobile_single" v-show="overallSingle" v-for="item,index in designOpenrtionList" :key="item" :class="{active:printStyleList[index]?.designOpenrtionBtn?printStyleList[index]?.designOpenrtionBtn:false}">
+								<!-- <div class="designOpenrtionMobile_single" v-show="overallSingle" v-for="item,index in designOpenrtionList" :key="item" :class="{active:printStyleList[index]?.designOpenrtionBtn?printStyleList[index]?.designOpenrtionBtn:false}">
+									<img :src="item.path" @click="setpitch(item,index)">
+								</div> -->
+								<div class="designOpenrtionMobile_single" v-for="item,index in designOpenrtionList" :key="item" v-show="(stateOverallSingle == 'overall' && item.level2Type == 'Pattern') || stateOverallSingle == 'single'">
 									<img :src="item.path" @click="setpitch(item,index)">
 								</div>
-								<div class="designOpenrtionMobile_overall" v-show="!overallSingle">
-									<img :src="designOpenrtionList[0].path">
+								<div class="designOpenrtionMobile_single" v-for="item,index in designList" :key="item" v-show="(stateOverallSingle == 'overall' && item.level2Type == 'Pattern') || stateOverallSingle == 'single'">
+									<img :src="item.path" @click="setpitch(item,index)">
 								</div>
+								<!-- <div class="designOpenrtionMobile_overall" v-show="!overallSingle">
+									<img :src="designOpenrtionList[0].path">
+								</div> -->
 							</div>
 							<div class="subitOkPreviewBtn" @click.stop="setPreview">{{ $t('DesignPrintOperation.preview') }}</div>
 							<div class="subitOkPreviewBtn Guide_1_25_1" :class="[driver__.driver?'hideEvents':'']" @click.stop="setOK">OK</div>
@@ -69,14 +75,15 @@
 				<div class="designOpenrtionMobile_centent" id="designOpenrtionCentent">
 					<!-- <div class="designOpenrtionMobile_imgMask" :style="sketch"> -->
 					<div class="designOpenrtionMobile_imgMask">
-						<div class="designOpenrtionMobile_print" v-show="overallSingle">
+						<div class="designOpenrtionMobile_print">
 							<div 
-								v-for="item,index in designOpenrtionList" 
+								v-for="item,index in exhibitionOpenrtionList[stateOverallSingle]" 
 								:key="item"
-								:style="[printStyleList?.[index]?.style]" 
+								v-if="overallSingle"
+								:style="[printStyleList[stateOverallSingle]?.[index]?.style]" 
 								@touchstart.stop="itemMoveMousedown(index,$event)"
 								class="modal_imgItem" 
-								@click="setpitch(item,index)" ref="content" >
+								ref="content" >
 								<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designOpenrtionMobile_imgItme" draggable="false"> 
 							</div>
 						</div>
@@ -84,17 +91,23 @@
 						<img :src="current?.path" alt="" class="designOpenrtionMobile_sketch">
 						<img v-show="overallSingle" :src="current?.layersObject?.[1]?.maskUrl" alt="" class="designOpenrtionMobile_sketch_mask">
 						<div class="designOpenrtionMobile_btn">
-							<ul v-if="overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtionMobile_Mousingle" :style="item.style" @touchstart.stop="itemMoveMousedown(index,$event)">
+							<ul v-if="overallSingle" v-for="item,index in printStyleList[stateOverallSingle]" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtionMobile_Mousingle" :style="item.style" @touchstart.stop="itemMoveMousedown(index,$event)">
 								<li class="designOpenrtionMobile_btn_top" @touchstart.stop="itemSizeMousedown('top',$event)"></li>
 								<li class="designOpenrtionMobile_btn_bottom" @touchstart.stop="itemSizeMousedown('bottom',$event)"></li>
 								<li class="designOpenrtionMobile_btn_left" @touchstart.stop="itemSizeMousedown('left',$event)"></li>
 								<li class="designOpenrtionMobile_btn_right" @touchstart.stop="itemSizeMousedown('right',$event)"></li>
 								<li class="designOpenrtionMobile_rotote" v-rotote.stop="[index,item.transform]"></li>
+								<li class="designOpenrtionMobile__delete" @click="deletePrint">
+									<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
+								</li>
 							</ul>
 							<div v-show="!overallSingle"></div>
-							<ul v-if="!overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtionMobile_Mouoverall" :style="'left:'+item.style.left+';top:'+item.style.top" @touchstart.stop="itemMoveMousedown(index,$event)">
+							<ul v-if="!overallSingle && printStyleList[stateOverallSingle][0]" :class="{active:printStyleList[stateOverallSingle][0]?.designOpenrtionBtn}" class="designOpenrtionMobile_Mouoverall" :style="'left:'+printStyleList[stateOverallSingle][0]?.style?.left+';top:'+printStyleList[stateOverallSingle][0]?.style?.top+';'" @touchstart.stop="itemMoveMousedown(0,$event)">
 								<i class="fi fi-rr-arrows animtion1"></i>
 								<i class="fi fi-rr-arrows animtion2"></i>
+								<li class="designOpenrtionMobile__delete" @click="deletePrint">
+									<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
+								</li>
 							</ul>
 						</div>
 					</div>
@@ -125,15 +138,25 @@ export default defineComponent({
 	
     setup(prop) {
         let designOpenrtion = ref(false);
-		let designOpenrtionList = ref([])
+		let designOpenrtionList = ref([])//新增的元素
+		let designList = ref([])//已经存在的元素
+		let setOkData = ref([])
+		let exhibitionOpenrtionList = ref({
+			single:[],
+			overall:[],
+		})//展示的元素
 		let driver__ = inject('driver__')
 		let current = inject('current')//父组件传过来的数据
         let setRevocation = inject('setRevocation')//父组件传过来的数据
 		let overallSingle = ref(false)
+		let stateOverallSingle = ref('single')
 		let systemDesignerPercentage = ref(0)
-		let printAmount = ref(1)//印花数量
 		let printZIndex = ref(2)//印花优先级
-        let printStyleList = ref([{
+		let printStyleList = ref({
+			single:[],
+			overall:[],
+		});
+        let currentPrintStyleList = ref({
 			centers:{
 				left:0,
 				top:0,
@@ -152,7 +175,7 @@ export default defineComponent({
 				rotateZ:0,
 			},
 			designOpenrtionBtn:false
-		}]);
+		});
 		
 		let direction = ref('')
 		let imgDom = ref()
@@ -174,11 +197,15 @@ export default defineComponent({
             designOpenrtion,
 			designOpenrtionList,
 			overallSingle,
+			stateOverallSingle,
+			designList,
+			setOkData,
+			exhibitionOpenrtionList,
 			systemDesignerPercentage,
 			current,
-			printAmount,
 			printZIndex,
             printStyleList,
+			currentPrintStyleList,
 			direction,//判断点击的是li那个边
 			imgDom,
 			imgDomIndex,
@@ -211,8 +238,8 @@ export default defineComponent({
 				let num = 1
 				let x = 0
 				let y = 0
-				num = value.instance.printStyleList[value.instance.imgDomIndex].transform.scale
-				angle = value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ
+				num = value.instance.printStyleList[num = value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.scale
+				angle = value.instance.printStyleList[num = value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.rotateZ
 				// 添加鼠标按下事件监听器
 				el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
 				// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
@@ -236,7 +263,7 @@ export default defineComponent({
 					document.addEventListener('touchmove', touchmove,{passive:true});
 					// 添加鼠标松开事件监听器
 					let touchend = () => {
-						value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ = angle
+						value.instance.printStyleList[num = value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.rotateZ = angle
 						mouse = false;
 						document.removeEventListener('touchend',touchend)
 						document.removeEventListener('touchmove',touchmove)
@@ -254,52 +281,48 @@ export default defineComponent({
 			if(designItemDetail.others.length == 0){
 				this.body = true
 			}
-			let DesignPrintOperationParent = this.$parent
 			this.designOpenrtion = true
 			this.clearModal()
-			this.designOpenrtionList = []
-			this.designOpenrtionList.push(...this.current.printObject.prints)
-			this.overallSingle = DesignPrintOperationParent.overallSingle
-			this.systemDesignerPercentage = DesignPrintOperationParent.systemDesignerPercentage
+			this.overallSingle = this.current.printObject.ifSingle?true:false
+			this.ifListOver()
+			if(this.current.printObject.prints)this.exhibitionOpenrtionList[this.stateOverallSingle] = JSON.parse(JSON.stringify(this.current.printObject.prints))
+			if(this.$parent.exhibitionList.print)this.designOpenrtionList = JSON.parse(JSON.stringify(this.$parent.exhibitionList.print))
+			if(this.$parent.elementsList)this.designList = JSON.parse(JSON.stringify(this.$parent.printsList))
+			// this.overallSingle = this.current.ifSingle?false:this.current.ifSingle
 			let skecth = new Image
 			skecth.src = this.current.path
 			skecth.onload=()=>{
 				this.sketch.width = skecth.width/10+'rem'
 				this.sketch.height = skecth.height/10+'rem'
+				skecth.remove()
 			}
-			// this.sketch = {
-			// 	width:this.current.layersObject[1].imageSize[0]/10+'rem',
-			// 	height:this.current.layersObject[1].imageSize[1]/10+'rem'
-			// }
-			let print = new Image
-			print.src = this.current.printObject.prints[0].path
-			print.onload=()=>{
-				this.print.width = print.width+'px'
-				this.print.height = print.height+'px'
-				this.printStyleList[0].style.width = print.width+'px'
-				this.printStyleList[0].style.height = print.height+'px'
-				this.printStyleList[0].designOpenrtionBtn = false
-				nextTick().then(()=>{
-					if(this.designOpenrtionList[0].scale){
-						this.designOpenrtionList.forEach((item,index)=>{
-							this.setTemplate(item,index)
-							this.printAmount = this.printStyleList.length
-							if (!this.overallSingle) {
-								this.printAmount = 1
-								this.setprintAmount()
-							}
-							if(this.current.printObject.ifSingle != this.overallSingle){
-								this.refetchTemplate(0)
-							}
-
-						})
-					}else{
-						this.refetchTemplate(0)
-					}
+			if(this.exhibitionOpenrtionList[this.stateOverallSingle].length > 0){
+				this.exhibitionOpenrtionList[this.stateOverallSingle].forEach((item,index)=>{
+					this.setTemplate(item,index)
 				})
-				
+			}else{
 			}
-			
+		},
+		ifListOver(){
+			if(!this.overallSingle){
+				// this.designOpenrtionList = this.designOpenrtionList.filter((item)=>item.level2Type == "Pattern")
+				// this.designList = this.designList.filter((item)=>item.level2Type == "Pattern")
+				this.stateOverallSingle = 'overall'
+			}else{
+				this.stateOverallSingle = 'single'
+			}
+		},
+		setPrintWH(url){
+			let print = new Image
+			return new Promise((resolve, reject) => {
+				print.onload=()=>{
+					this.print.width = print.width+'px'
+					this.print.height = print.height+'px'
+					resolve()
+					print.remove()
+				}
+				print.src = url
+			})
 		},
 		systemDesigner(num) {
 			let DesignPrintOperationParent = this.$parent
@@ -310,27 +333,53 @@ export default defineComponent({
 		},
 		
 		setOveralSingle(){
-			let DesignPrintOperationParent = this.$parent
-			DesignPrintOperationParent.overallSingle = this.overallSingle
-			if (!this.overallSingle) {
-				this.printAmount = 1
-				this.setprintAmount()
+			if(!this.overallSingle){
+				// this.refetchTemplate(0)
+				this.stateOverallSingle = 'overall'
 			}else{
-				this.random()
+				this.stateOverallSingle = 'single'
 			}
+			// this.random()
 		},
-		setpitch(item,index){
-			this.printStyleList.forEach((v)=>{
+		async setpitch(item,index){
+			await this.setPrintWH(item.path)
+			this.printStyleList[this.stateOverallSingle].forEach((v)=>{
 				v.designOpenrtionBtn = false
 			})
-			this.imgDomIndex = index
-			this.printStyleList[index].designOpenrtionBtn = true
-			this.printStyleList[index].style.zIndex = this.printZIndex++
+			if(!this.overallSingle){
+				this.printStyleList[this.stateOverallSingle][0] = JSON.parse(JSON.stringify(this.currentPrintStyleList))
+				this.exhibitionOpenrtionList[this.stateOverallSingle][0] = {
+					angle:0,
+					designType:item.designType,
+					level2Type:item.level2Type,
+					minIOPath:item.minIOPath,
+					path:item.path,
+					priority:1,
+					scale:.3,
+					location:[0,0]
+				}
+				this.refetchTemplate(0)
+				this.systemDesignerPercentage = 30
+			}else{
+				this.printStyleList[this.stateOverallSingle].push(JSON.parse(JSON.stringify(this.currentPrintStyleList)))
+				let currentIndex = this.printStyleList[this.stateOverallSingle].length-1
+				this.exhibitionOpenrtionList[this.stateOverallSingle].push({
+					angle:0,
+					designType:item.designType,
+					level2Type:item.level2Type,
+					minIOPath:item.minIOPath,
+					path:item.path,
+					priority:1,
+					scale:1,
+					location:[0,0]
+				})
+				this.refetchTemplate(currentIndex)
+			}
 		},
 		//设置移动
 		itemMoveMousedown(index,event){
 			this.imgDomIndex = index
-			this.printStyleList.forEach((v)=>{
+			this.printStyleList[this.stateOverallSingle].forEach((v)=>{
 				v.designOpenrtionBtn = false
 			})
 			if(!this.overallSingle){
@@ -340,17 +389,17 @@ export default defineComponent({
 			}
 			let scale = Number(this.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
 			let rotateZ = Number(this.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
-			this.printStyleList[index].designOpenrtionBtn = true
-			this.printStyleList[index].style.zIndex = this.printZIndex++
-			this.printStyleList[index].transform = {
+			this.printStyleList[this.stateOverallSingle][index].designOpenrtionBtn = true
+			this.printStyleList[this.stateOverallSingle][index].style.zIndex = this.printZIndex++
+			this.printStyleList[this.stateOverallSingle][index].transform = {
 				scale:scale,
 				rotateZ:rotateZ?rotateZ:0,
 			}
 			let imgDomWH = this.imgDom.getBoundingClientRect()
-			let left = Number(this.printStyleList[index].style.left.replace(/px/g,''))
-			let top = Number(this.printStyleList[index].style.top.replace(/px/g,''))
-			this.printStyleList[index].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-left
-			this.printStyleList[index].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-top
+			let left = Number(this.printStyleList[this.stateOverallSingle][index].style.left.replace(/px/g,''))
+			let top = Number(this.printStyleList[this.stateOverallSingle][index].style.top.replace(/px/g,''))
+			this.printStyleList[this.stateOverallSingle][index].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-left
+			this.printStyleList[this.stateOverallSingle][index].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-top
 			document.addEventListener("touchend", this.touchend);
 			document.addEventListener("touchmove", this.moveMousemove);
 		},
@@ -358,23 +407,23 @@ export default defineComponent({
 		itemSizeMousedown(direction,event){
 			this.direction = direction
 			this.imgDom = document.getElementsByClassName('designOpenrtionMobile_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
-			let scale = Number(this.imgDom.firstChild.style.transform?.split('scale(')[1]?.split(')')[0])
-			let rotateZ = Number(this.imgDom.firstChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
-			this.printStyleList[this.imgDomIndex].designOpenrtionBtn = true
-			this.printStyleList[this.imgDomIndex].transform = {
+			let scale = Number(this.imgDom.style.transform?.split('scale(')[1]?.split(')')[0])
+			let rotateZ = Number(this.imgDom.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
+			this.printStyleList[this.stateOverallSingle][this.imgDomIndex].designOpenrtionBtn = true
+			this.printStyleList[this.stateOverallSingle][this.imgDomIndex].transform = {
 				scale:scale,
 				rotateZ:rotateZ,
 			}
 			let imgDomWH = this.imgDom.getBoundingClientRect()
 			let li = document.getElementsByClassName('designOpenrtionMobile_modal')[0].getElementsByClassName("designOpenrtionMobile_btn_top")[0].offsetWidth/2
 			if(this.direction == 'right' || this.direction == 'bottom'){
-				this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-li
-				this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-li
+				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-li
+				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-li
 			}else{
-				this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left+imgDomWH.width-li
-				this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top+imgDomWH.height-li
-				this.printStyleList[this.imgDomIndex].centers.right = this.imgDom.parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft
-				this.printStyleList[this.imgDomIndex].centers.bottom = this.imgDom.parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop
+				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left+imgDomWH.width-li
+				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top+imgDomWH.height-li
+				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.right = this.imgDom.parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft
+				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.bottom = this.imgDom.parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop
 			}
 			
 			document.addEventListener("touchend", this.sizeMouseup);
@@ -385,22 +434,22 @@ export default defineComponent({
 			let imgDomWH = this.imgDom.getBoundingClientRect()
 			let parentNode = document.getElementsByClassName('designOpenrtionMobile_modal')[0].getElementsByClassName("designOpenrtionMobile_imgMask")[0]
 			parentNode = parentNode.getBoundingClientRect()
-			let x = ( e.changedTouches[0].pageX - this.printStyleList[this.imgDomIndex].centers.left)+'px'
-			let y = (  e.changedTouches[0].pageY - this.printStyleList[this.imgDomIndex].centers.top)+'px'
-			this.printStyleList[this.imgDomIndex].style.left = x
-			this.printStyleList[this.imgDomIndex].style.top = y
+			let x = ( e.changedTouches[0].pageX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)+'px'
+			let y = (  e.changedTouches[0].pageY - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)+'px'
+			this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = x
+			this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = y
 			if(!this.overallSingle){
 				if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
-					this.printStyleList[this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
+					this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
 				}
 				if(x.replace(/px/g,'') <= 0){
-					this.printStyleList[this.imgDomIndex].style.left = 0+'px'
+					this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 0+'px'
 				}
 				if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
-					this.printStyleList[this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
+					this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
 				}
 				if(y.replace(/px/g,'') <= 0){
-					this.printStyleList[this.imgDomIndex].style.top = 0+'px'
+					this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = 0+'px'
 				}
 			}
 		
@@ -421,12 +470,12 @@ export default defineComponent({
 				width = w+'px'
 				height = w*num1+'px'
 			}else if(this.direction == 'top'){
-				this.printStyleList[this.imgDomIndex].style.top = 'auto'
-				// this.printStyleList[this.imgDomIndex].style.left = 'auto'
-				// this.printStyleList[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
-				this.printStyleList[this.imgDomIndex].style.bottom = this.printStyleList[this.imgDomIndex].centers.bottom+'px'
-				w = ( e.changedTouches[0].pageX - this.printStyleList[this.imgDomIndex].centers.left)*num
-				h = (this.printStyleList[this.imgDomIndex].centers.top -  e.changedTouches[0].pageY)
+				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = 'auto'
+				// this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 'auto'
+				// this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
+				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.bottom = this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.bottom+'px'
+				w = ( e.changedTouches[0].pageX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
+				h = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top -  e.changedTouches[0].pageY)
 				
 				height = h+'px'
 				width = h*num+'px'
@@ -435,19 +484,19 @@ export default defineComponent({
 				height = h+'px'
 				width = h*num+'px'
 			}else if(this.direction == 'left'){
-				this.printStyleList[this.imgDomIndex].style.left = 'auto'
-				this.printStyleList[this.imgDomIndex].style.right = this.printStyleList[this.imgDomIndex].centers.right+'px'
-				w = (this.printStyleList[this.imgDomIndex].centers.left -  e.changedTouches[0].pageX)
+				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 'auto'
+				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.right = this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.right+'px'
+				w = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left -  e.changedTouches[0].pageX)
 				width = w+'px'
 				height = w*num1+'px'
 			}
 			//判断尺寸是否到边
-			this.printStyleList[this.imgDomIndex].style.width = width
-			this.printStyleList[this.imgDomIndex].style.height = height
+			this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.width = width
+			this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.height = height
 		},
 		//鼠标抬起
 		sizeMouseup(e){
-			this.printStyleList[this.imgDomIndex].style={
+			this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style={
 				right:'auto',
 				left:this.imgDom.offsetLeft+'px',
 				bottom:'auto',
@@ -464,47 +513,12 @@ export default defineComponent({
 			document.removeEventListener("touchend", this.touchend);
 			document.removeEventListener("touchmove", this.moveMousemove);
 		},
-
-
-		setprintAmount(){
-			if(this.printAmount < 1){
-				this.printAmount  = 1
-				return
-			}
-			if(this.printAmount > 20){
-				this.printAmount  = 20
-				return
-			}
-			let printTiemNum
-			if(this.printAmount>this.printStyleList.length){
-				let num = this.printAmount - this.printStyleList.length
-				for (let index = 0; index < num; index++) {
-					this.printStyleList.push(JSON.parse(JSON.stringify(this.printStyleList[this.printStyleList.length-1])))
-					this.printStyleList[this.printStyleList.length-1].transform.rotateZ = 0
-					this.refetchTemplate(this.printStyleList.length-1)
-					this.designOpenrtionList.push(this.current.printObject.prints[this.current.printObject.prints.length-1])
-				}
-			}else{
-				let num = this.printStyleList.length - this.printAmount
-				this.designOpenrtionList.splice(this.printStyleList.length-num,num)
-				this.printStyleList.splice(this.printStyleList.length-num,num)
-			}
-			this.printStyleList.forEach((v)=>{
-				v.designOpenrtionBtn = false
-			})
-			this.printStyleList[this.printStyleList.length-1].designOpenrtionBtn = true
-			this.imgDomIndex = this.printStyleList.length-1
-		},
 		deletePrint(){
-			if(this.designOpenrtionList.length <= 1){
-				return
-			}
-			this.designOpenrtionList.splice(this.imgDomIndex,1)
-			this.printStyleList.splice(this.imgDomIndex,1)
-			this.printAmount = this.designOpenrtionList.length
+			this.exhibitionOpenrtionList[this.stateOverallSingle].splice(this.imgDomIndex,1)
+			this.printStyleList[this.stateOverallSingle].splice(this.imgDomIndex,1)
 		},
 		random(){
-			this.designOpenrtionList.forEach((v,index)=>{
+			this.exhibitionOpenrtionList[this.stateOverallSingle].forEach((v,index)=>{
 				this.refetchTemplate(index)
 			})
 		},
@@ -530,7 +544,7 @@ export default defineComponent({
 				x = sketch?.width - this.print.width.replace(/px/g,'')*scale/2
 			}
 			let y = sketch?.height-this.print.height.replace(/px/g,'')*scale
-			this.printStyleList[index]={
+			this.printStyleList[this.stateOverallSingle][index]={
 				centers:{
 					left:0,
 					top:0,
@@ -547,7 +561,7 @@ export default defineComponent({
 				transform:{
 					// scale:scale<.2?.2:scale,//0.2-3
 					// rotateZ:rotateZ1-rotateZ2,
-					rotateZ:this.printStyleList[index].transform.rotateZ?this.printStyleList[index].transform.rotateZ:0
+					rotateZ:this.printStyleList[this.stateOverallSingle][index].transform.rotateZ?this.printStyleList[this.stateOverallSingle][index].transform.rotateZ:0
 				},
 				designOpenrtionBtn:false
 			}
@@ -568,7 +582,7 @@ export default defineComponent({
 			if(sketch.offsetHeight < item.location[1]/sketchNum){
 				top = sketch.offsetHeight +'px'
 			}
-			this.printStyleList[index]={
+			this.printStyleList[this.stateOverallSingle][index]={
 				centers:{
 					left:0,
 					top:0,
@@ -590,7 +604,7 @@ export default defineComponent({
 			}
         },
 		computeZindex(){
-			let arr = JSON.parse(JSON.stringify(this.printStyleList))
+			let arr = JSON.parse(JSON.stringify(this.printStyleList[this.stateOverallSingle]))
 			arr.sort((a, b) => {
 				var a_num = a["style"].zIndex;
 				var b_num = b["style"].zIndex;
@@ -604,37 +618,40 @@ export default defineComponent({
 		},
 		computeSize(arr){
 			// let num = this.sketch/
-			let sketch = document.getElementsByClassName("designOpenrtionMobile_sketch")[0]
-			let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
-			let prints = []
-			let scale
-			let location
-			arr.forEach((v,index)=>{
-				if(!this.overallSingle){
-					scale = this.systemDesignerPercentage/100
-					// location = [arr[index].style.left.replace(/px/g,'')*sketchNum+this.print.width.replace(/px/g,'')/2-7,arr[index].style.top.replace(/px/g,'')*sketchNum+this.print.height.replace(/px/g,'')/2-7]
-					location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
-				}else{
-					scale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
-					location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
+			return new Promise(async (resolve, reject) => {
+				let sketch = document.getElementsByClassName("designOpenrtionMobile_sketch")[0]
+				let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
+				let scale
+				let prints = []
+				let location
+				for (let index = 0; index < arr.length; index++) {
+					if(!this.overallSingle){
+						scale = this.systemDesignerPercentage/100
+						// location = [arr[index].style.left.replace(/px/g,'')*sketchNum+this.print.width.replace(/px/g,'')/2-7,arr[index].style.top.replace(/px/g,'')*sketchNum+this.print.height.replace(/px/g,'')/2-7]
+						location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
+					}else{
+						await this.setPrintWH(this.exhibitionOpenrtionList[this.stateOverallSingle][index].path)
+						scale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
+						location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
+					}
+					let obj = {
+						angle : !this.overallSingle ? 0:arr[index].transform.rotateZ,
+						location : location,
+						priority:arr[index].style.zIndex,
+						scale: scale,
+						designType:this.exhibitionOpenrtionList[this.stateOverallSingle][index].designType,
+						level2Type:this.exhibitionOpenrtionList[this.stateOverallSingle][index].level2Type,
+						path:this.exhibitionOpenrtionList[this.stateOverallSingle][index].path,
+						minIOPath:this.exhibitionOpenrtionList[this.stateOverallSingle][index].minIOPath,
+					}
+					prints.push(obj)
 				}
-				let obj = {
-					angle : !this.overallSingle ? 0:arr[index].transform.rotateZ,
-					location : location,
-					priority:arr[index].style.zIndex,
-					scale: scale,
-					designType:this.designOpenrtionList[index].designType,
-					path:this.designOpenrtionList[index].path,
-					minIOPath:this.designOpenrtionList[index].minIOPath,
-				}
-				prints.push(obj)
+				resolve(prints)
 			})
-			return prints	
 		},
-		setPreview(){
+		async setPreview(){
 			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
 			let index 
-			let scale = this.printStyleList[0].style.width.replace(/px/g,'')/this.print.width.replace(/px/g,'')
 			designItemDetail.clothes.forEach((v,ind)=>{
 				if(v.id == this.current.id){
 					index = ind
@@ -649,9 +666,12 @@ export default defineComponent({
             //     timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
             // }
 			let data = this.store.state.DesignDetailModule.designPreviewData
+			await this.computeZindex().then((rv)=>{
+				this.setOkData = rv
+			})
 			data.designSingleItemDTOList[index].printObject={
 				ifSingle:this.overallSingle,
-				prints:this.computeZindex(),
+				prints:this.setOkData,
 			}
 			data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
 			this.loadingShow = true
@@ -686,7 +706,9 @@ export default defineComponent({
 				designItemDetail.currentFullBodyView = this.designItemDetailTS.rv.currentFullBodyView
 				designItemDetail.clothes[index].printObject.ifSingle = this.overallSingle
 				designItemDetail.clothes[index].layersObject = this.designItemDetailTS.rv.clothes[index].layersObject
-				designItemDetail.clothes[index].printObject.prints = this.computeZindex()
+				designItemDetail.clothes[index].trims = this.designItemDetailTS.rv.clothes[index].trims
+				designItemDetail.clothes[index].printObject.prints = this.setOkData
+				// designItemDetail.clothes[index].printObject.prints = this.computeZindex()
 				designItemDetail.ifSubmit = true
 				designItemDetail.clothes.forEach((item,i)=>{
 					let a
@@ -708,31 +730,18 @@ export default defineComponent({
 			}
 		},
 		clearModal(){
-			this.printAmount = 1//显示数量
 			this.designOpenrtion = true//modal页面关闭
 			this.printZIndex = 2//点击图片z-index
 			this.imgDomIndex = 0//点击图片下标
 			this.designOpenrtionList = []
-			this.printStyleList.splice(1,this.printStyleList.length-1)
-			this.printStyleList[0] = {
-				centers:{
-					left:0,
-					top:0,
-				},
-				style:{
-					left:0+"px",
-					top:0+"px",
-					right:"auto",
-					bottom:"auto",
-					width:'auto',
-					height:'auto',
-					zIndex:1,
-				},
-				transform:{
-					scale:1,
-					rotateZ:0,
-				},
-				designOpenrtionBtn:false
+			this.designList = []
+			this.exhibitionOpenrtionList = {
+				single:[],
+				overall:[],
+			}
+			this.printStyleList = {
+				single:[],
+				overall:[],
 			}
 		},
 		closeModal(){
@@ -1111,6 +1120,19 @@ export default defineComponent({
 						width: 0;
 						height: 0;
 					}
+					.designOpenrtionMobile__delete{
+						position: absolute;
+						top: 0;
+						right: 0;
+						width: 4rem;
+						background: none;
+						transform: translate(100%, -100%);
+						height: 4rem;
+						img{
+							width: 100%;
+							height: 100%;
+						}
+					}
 					.designOpenrtionMobile_rotote::after{
 						position: absolute;
 						content: "";

src/component/Detail/addDetails.vue

@@ -0,0 +1,437 @@
+<template>
+    <a-modal
+        class="addDetails_modal generalModel"
+        v-model:visible="showPayOrder"
+        :footer="null"
+        width="50%"
+        :maskClosable="false"
+        :centered="true"
+        :closable="false"
+        wrapClassName="#app"
+        :keyboard="false"
+    >
+		<div class="generalModel_btn">
+			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+				<i class="fi fi-rr-cross-small"></i>
+			</div>
+		</div>
+		
+		<div class="addDetails_center">
+			<div class="modal_title_text">
+				<div>Add Details</div>
+				<div class="modal_title_text_intro"></div>
+			</div>
+			<div class="exportCanvasBox_center">
+				<div class="addDetails_center_btn addDetails_center_item" :class="{spread:spreadState}">
+					<!-- <div @click="setOperation('')" class="addDetails_center_btn_item">
+						<div>新增</div>
+					</div> -->
+					<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
+					<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
+					<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i>
+					<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
+					<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
+					<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth">
+					<div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div>
+				</div>
+			</div>
+			<div class="exportCanvasBox_submit" @click="setSubmit">
+				<div class="started_btn">
+					submit
+				</div>
+			</div>
+			
+		</div>
+		<div></div>
+    </a-modal>
+	<div class="mark_loading" v-show="loadingShow">
+		<a-spin size="large" />
+	</div>
+</template>
+<script>
+import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
+import { Https } from "@/tool/https";
+import { formatTime } from "@/tool/util";
+import { setCookie, getCookie } from "@/tool/cookie";
+import { Modal, message } from "ant-design-vue";
+import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
+import allOrder from "@/component/Pay/allOrder.vue";
+import creditsDetail from "@/component/Pay/creditsDetail.vue";
+import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
+import { useI18n } from "vue-i18n";
+export default defineComponent({
+    components: {
+		creditsDetail,
+		allOrder,
+    },
+	emits: ['setSloganData'],
+    setup(props,{emit}) {
+        let presentState = ref('paypal');
+        let showPayOrder = ref(false);
+        let loadingShow = ref(false);
+        let { t } = useI18n();
+        let canvas = reactive({});
+		let scale = 2;
+		let ratio = [1,1]
+		let exportWH = 512
+		let canvasBtn = reactive({
+			canvasState:'move',
+			canvasPencilWidth:4,
+			spreadState:false,
+		})
+		let canvasWH = ref(0);
+		onMounted(()=>{
+		})
+		let exportUrl = ''
+		let reverseCanvasState = ref([])//存放canvas操作
+		let normalCanvasState = ref([])//存放canvas操作
+		let canvasState = ref()//存放canvas操作
+		let init = (data,index)=>{
+			normalCanvasState.value = []
+			reverseCanvasState.value = []
+            showPayOrder.value = true;
+			loadingShow.value = true
+			scale = 2;
+			ratio = [1,1]
+			exportWH = 512
+			nextTick(()=>{
+				let canvasBox = document.querySelector(".addDetails_modal .exportCanvasBox_center");
+				let height = canvasBox.offsetHeight;
+				canvasBox.style.width = height+'px'
+				canvasWH.value = height
+				var canvasDom = document.createElement("canvas");
+				let oldCanvasDom = canvasBox.querySelector('.canvas-container')
+				if(oldCanvasDom)oldCanvasDom.remove()
+				canvasBox.appendChild(canvasDom);
+				let img = new Image();
+
+				img.onload = function(){
+					let wScale = 1
+					let hScale = 1
+					if(img.width>img.height){
+						hScale = img.height/img.width
+						exportWH = img.width
+					}else{
+						wScale = img.width/img.height
+						exportWH = img.height
+					}
+					ratio = [wScale,hScale]
+					canvas = new fabric.Canvas(canvasDom, {
+						backgroundColor: "#FFF",
+						width: canvasWH.value * wScale,
+						height: canvasWH.value * hScale,
+						isDrawingMode: false, // 开启绘图模式
+					});
+					scale = img.height/canvas.height
+					
+					JSchangeType(canvas,'init')
+					// 鼠标抬起事件
+					canvas.on('mouse:up', function(event) {
+						if(canvasBtn.canvasState != 'move'){
+							updateCanvasState()
+						}
+					});
+					fabric.Object.prototype.cornerSize = 10
+					fabric.Object.prototype.transparentCorners = false 
+					exportUrl = data.path
+					fabric.Image.fromURL(data.path, function(img) {
+						// 设置背景图对象的宽度和高度与 canvas 相同
+						img.scaleToWidth(canvas.width);
+						img.scaleToHeight(canvas.height);
+						
+						// 将背景图添加到 canvas 的底层
+						canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
+						if(!fabric.Object.prototype.controls.deleteControl){
+							JSSetRemoveImage(deleteObj)
+						}else{
+							fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
+						}
+						updateCanvasState()
+
+						// img.selectable = false
+						// canvas.add(img)
+					},{ crossOrigin: "Anonymous" });
+					
+				    loadingShow.value = false
+					setOperation('pencil')
+					img.remove()
+				}
+				img.src = data.path
+				
+			})
+        }
+		let clearCanvas = ()=>{
+		    canvasBtn.canvasState = 'move'
+		    canvasBtn.spreadState = false
+		}
+		let rgba = 'rgba(0, 0, 0, 1)'
+		let brushIndicator = new fabric.Circle({
+			radius:(canvasBtn.canvasPencilWidth/2),
+			fill: '#fff',
+			stroke: '#000',
+			strokeWidth: 1,
+			originX: 'center',
+			originY: 'center',
+			visible :true,
+			left: -100,
+			top: -100,
+			erasable: false,
+		});
+		let setOperation = (str)=>{
+			canvasBtn.canvasState = str
+			if(str == 'move'){
+				setMove()
+				if(canvas.contains(brushIndicator))canvas.remove(brushIndicator)
+			}else if(str == 'pencil'){
+				setPencil()
+				if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
+				
+			}else if(str == 'eraser'){
+				setEraser()
+				if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
+			}
+		}
+		let setMove = ()=>{
+			canvas.isDrawingMode = false
+			canvas.forEachObject((obj) =>obj.selectable = true);
+		}
+		let setPencil = ()=>{
+			canvas.isDrawingMode = true//开启绘画模式
+			canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
+			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth);
+			canvas.freeDrawingBrush.color = rgba
+			brushIndicator.set('fill',rgba)
+			canvas.freeDrawingBrush.isEraser = false
+		}
+		let setEraser = ()=>{
+			canvas.isDrawingMode = true
+			let eraser = new fabric.EraserBrush(canvas)
+            canvas.freeDrawingBrush = eraser
+			brushIndicator.set({fill: '#fff'});
+			canvas.requestRenderAll();
+			canvas.freeDrawingBrush.isEraser = true
+			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth);
+		}
+		let deleteObj = ()=> {
+			// if(!canvas.getActiveObjects()){
+			// 	return
+			// }
+			let target = canvas.getActiveObjects()
+			target.forEach((item)=>{
+				canvas.fxRemove(item, {
+					onComplete(){
+					canvas.discardActiveObject(); // 丢弃当前选中的对象
+					canvas.renderAll(); // 重新渲染 Canvas
+					}
+				})
+				canvas.FX_DURATION = 300
+			})
+		}
+		let setTimeOutWidth
+		let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
+			clearTimeout(setTimeOutWidth)
+			setTimeOutWidth = setTimeout(()=>{
+				canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth)
+			},300)
+		}
+		let updateCanvasState = () =>{
+				const canvasAsJson = JSON.stringify(canvas.toJSON());
+				normalCanvasState.value.push(canvasAsJson);
+		}
+		//撤回
+		let historyState = (str)=> {
+			if(str == 'reverse' && reverseCanvasState.value.length > 0){//反撤回
+				let obj = reverseCanvasState.value.pop()
+				// canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
+				canvasState.value = obj 
+				normalCanvasState.value.push(obj);
+			}else if(str == '' && normalCanvasState.value.length > 1){
+				let obj = normalCanvasState.value.pop()
+				canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
+				reverseCanvasState.value.push(obj);
+			}else{
+				return
+			}
+			canvas.loadFromJSON(canvasState.value, () => {});
+		}
+		let setSubmit = ()=>{
+			var allObjects = canvas.getObjects();
+			if(allObjects.length == 0){
+				return
+			}
+			var canvasDom = document.createElement("canvas");
+			let exportCanvas = new fabric.Canvas(canvasDom, {
+				backgroundColor: "rgba(255, 255, 255,1)",
+				width: exportWH * ratio[0],
+				height: exportWH * ratio[1],
+				isDrawingMode: false, // 开启绘图模式
+			});
+			canvas.backgroundImage.clone((back)=>{
+				back.set({
+					scaleX:1,
+					scaleY:1,
+					left:back.left*scale,
+					top:back.top*scale ,
+				})
+				exportCanvas.backgroundImage = back
+				allObjects.forEach((item,index)=>{
+					// let obj = fabric.util.object.clone(item);
+					if(item.type == 'circle')return
+					let obj 
+					item.clone((cloned)=>{
+						obj = cloned
+					})
+					obj.set(
+						{
+							scaleX:(item.scaleX?item.scaleX:1)*scale,
+							scaleY:(item.scaleY?item.scaleY:1)*scale,
+							left:item.left*scale,
+							top:item.top*scale,
+						}
+					)
+					exportCanvas.add(obj)
+					if(allObjects.length-1 == index){
+						let data = exportCanvas.toDataURL('jpg')
+						showPayOrder.value = false;
+						clearCanvas()
+						emit('setSloganData',data)
+					}
+				})
+				
+			})
+				
+			
+		}
+		
+        return {
+            presentState,
+            showPayOrder,
+			loadingShow,
+            t,
+			...toRefs(canvasBtn),
+			init,
+			setOperation,
+			setPencilWidth,
+			historyState,
+			setSubmit,
+        };
+    },
+    data() {
+        return {
+        };
+    },
+    mounted() {},
+    methods: {
+       
+		
+		cancelDsign(){
+			this.showPayOrder = false
+		}
+    },
+});
+</script>
+<style lang="less">
+.addDetails_modal {
+    .closeIcon {
+        z-index: 2;
+    }
+	.addDetails_center{
+		position: relative;
+		// width: calc(512px / 2);
+		// width: 256px;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		// height: calc(512px / 2);
+		margin: 0 auto;
+		.addDetails_center_item{
+			// position: relative;
+			background: #fff;
+			position: absolute;
+			
+			display: flex;
+			border: 0.2rem solid #c4c4c4;
+			width: 25rem;
+			border-radius: 4px; /* 设置圆角半径 */
+			flex-wrap: wrap;
+			.addDetails_center_btn_item{
+				display: flex;
+				align-items: center;
+				padding: 1rem 0;
+			}
+		}
+		.exportCanvasBox_center{
+			height: 100%;
+			flex: 1;
+			position: relative;
+			margin: 0 auto;
+			overflow: hidden;
+			background: #e6e6e6;
+			// overflow: scroll;
+			.addDetails_center_btn{
+				z-index: 2;
+				left: 50%;
+				transform: translate(-50%,-135%);
+				transition: all .3s;
+				padding: 1rem 1.5rem;
+				// position: relative;
+				input{
+					width: 100%;
+					margin-top: 1rem;
+				}
+				.icon-xiala{
+					position: absolute;	
+					width: 2rem;
+					bottom: 0;
+					transform: translate(-50%, 90%);
+					left: 50%;
+					width: 6rem;
+					background: #fff;
+					text-align: center;
+					cursor: pointer;
+					&.icon-xiala::before{
+						transition: all .3s;
+					}
+					&.btnRotate::before{
+						transform: rotate(180deg);
+						display: block;
+					}
+				}
+				i{
+					font-size: 2.5rem;
+					cursor: pointer;
+					width: 4rem;
+					height: 4rem;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					&.active{
+						border: 1px solid;
+						border-radius: .4rem;
+					}
+				}
+				&.spread{
+					transform: translate(-50%,0);
+				}
+			}
+			.canvas-container{
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%,-50%);
+			}
+		}
+		.exportCanvasBox_center:hover{
+			.addDetails_center_btn{
+				transform: translate(-50%,-101%);
+				&.spread{
+					transform: translate(-50%,0);
+				}
+			}
+		}
+	}
+	.exportCanvasBox_submit{
+		margin-top: 2.4rem;
+		text-align: center;
+	}
+}
+</style>

src/component/Detail/habit.vue

@@ -105,11 +105,11 @@
                 <div class="habit_System_Designer_text_max">
                     <div class="habit_System_Designer_text">
 						
-						{{ $t('Habit.System') }}<span>({{systemDesigner.system}}%)</span>
+						{{ $t('Habit.System') }}<span>({{systemDesigner.designer}}%)</span>
 					</div>
                     <div class="habit_System_Designer_text">
 					
-						{{ $t('Habit.Designer') }}<span>({{systemDesigner.designer}}%)</span>
+						{{ $t('Habit.Designer') }}<span>({{systemDesigner.system}}%)</span>
 					</div>
                 </div>
             </div>
@@ -811,17 +811,18 @@ export default defineComponent({
 		// },
 		setWorkspaceStyle(data: any){
 			this.workspaceItem.styleId = data
-			this.putWorkspace(this.workspaceItem,'')
+			this.putWorkspace(this.workspaceItem,this.workspaceItem.id)
 		},
 		setStyle(){
-			this.openType.habit = false
+			// this.openType.habit = false
 			let habitSetStyle:any = this.$refs.habitSetStyle;
-			habitSetStyle.habitSetStyleMask = true
+			// habitSetStyle.habitSetStyleMask = true
 			// habitSetStyle.styleList = this.styleList
-			habitSetStyle.init();
+			habitSetStyle.init(this.workspaceItem);
 		},
 		setParentData(){
-			this.openType.habit = true
+			// this.openType.habit = true
+			// this.getDetail(this.workspaceItem.id)
 		},
     },
 });

src/component/Detail/habitSetStyle.vue

@@ -10,6 +10,7 @@
 		:mask="habitSetStyleMask"
 		:keyboard="false"
 		:destroyOnClose="true"
+		:zIndex="1050"
 	>
 	<div class="generalModel_btn">
 		<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
@@ -23,7 +24,7 @@
 		</div>
 		<div class="habitSetStyle_content_bottom">
 			<div class="content_bottom_item" v-for="item in styleList">
-				<div class="content_bottom_item_border" :class="{active:item.id == selectStyleId}" @click="setItemSelect(item)">
+				<div class="content_bottom_item_border" :class="{active:item.name == selectStyle.name}" @click="setItemSelect(item)">
 					{{ item.name}}
 				</div>
 			</div>
@@ -56,7 +57,11 @@ setup(props,{emit}) {
 	let habitSetStyleMask:any = ref(false)//弹窗遮罩
 	let habitSetStyleData:any = reactive({
 		styleList:[],
-		selectStyleId:'',
+		selectStyle:{
+			name:'',
+			id:'',
+		},
+		selectStyleName:'',
 		isShowMark:false,
 	})
 	let getStyleList = ()=>{
@@ -75,11 +80,13 @@ setup(props,{emit}) {
 			habitSetStyleData.isShowMark = false
 		});
 	}
-	let init = ()=>{
+	let init = (data:any)=>{
 		habitSetStyle.value = true
 		if(habitSetStyleData.styleList.length == 0){
 			getStyleList()
 		}
+		habitSetStyleData.selectStyle.id = data.styleId 
+		habitSetStyleData.selectStyle.name = data.styleName 
 		// habitSetStyleData.selectStyleId = 'feng2'
 	}
 	let setCover = (item:any)=>{
@@ -90,7 +97,7 @@ setup(props,{emit}) {
 	let cleardata = ()=>{
 		habitSetStyle.value = false
 		habitSetStyleData.isShowMark = false
-		setParentData()
+		// setParentData()
 	
 	}
 	let setParentData = ()=>{
@@ -101,11 +108,11 @@ setup(props,{emit}) {
 		cleardata()
 	}
 	let setOk= ()=>{
-		emit('setWorkspaceStyle',habitSetStyleData.selectStyleId)
+		emit('setWorkspaceStyle',habitSetStyleData.selectStyle.id)
 		cleardata()
 	}
 	let setItemSelect = (item:any)=>{
-		habitSetStyleData.selectStyleId = item.id
+		habitSetStyleData.selectStyle = item
 	}
 	return {
 		habitSetStyle,
@@ -161,6 +168,12 @@ methods: {
 
 <style lang="less">
 .habitSetStyle_modal {
+	&.generalModel{
+		.ant-modal-body {
+			height: calc(55rem*1.2);
+		}
+	}
+	
 	.habitSetStyle_content{
 		display: flex;
 		flex-direction: column;

src/component/Detail/setDesignItem.vue

@@ -210,6 +210,7 @@ export default defineComponent({
 					const img = new Image();
 					img.onload = () => {
 						resolve(img)
+						img.remove()
 					};
 					img.onerror = reject;
 					img.src = url;

src/component/Detail/setDesignItemMobile.vue

@@ -206,6 +206,7 @@ export default defineComponent({
 					const img = new Image();
 					img.onload = () => {
 						resolve(img)
+						img.remove()
 					};
 					img.onerror = reject;
 					img.src = url;

src/component/HomePage/ColorboardUpload.vue

@@ -486,6 +486,7 @@ export default defineComponent({
 								driverObj__.moveNext()
 							}
 						})
+						img.remove()
 					};
                    
                 },100)
@@ -519,7 +520,7 @@ export default defineComponent({
             if (!isJpgOrPng) {
                 message.info(this.t('ColorboardUpload.jsContent3'));
             }
-            const isLt2M = file.size / 1024 / 1024 < 3;
+            const isLt2M = file.size / 1024 / 1024 < 5;
             if (!isLt2M) {
                 message.info(this.t('ColorboardUpload.jsContent4'));
             }

src/component/HomePage/ExportModel.vue

@@ -42,7 +42,7 @@
                     >
 					</div>
 				</div>
-                <div class="exportCanvasBox_img exportCanvasBox_left_item" :class="{'closeNav' :closeNav.nav}">
+                <div class="exportCanvasBox_img exportCanvasBox_left_item" :class="{'closeNav':closeNav.nav}">
                     <div
                         class="exportCanvasBox_allItem"
                         v-for="(item,key) in allBoardData"
@@ -54,23 +54,26 @@
                         <div v-if="item[0] && key == 'colorBoards'" class="exportCanvasBox_intro">Color</div>
                         <div v-if="item[0] && key == 'sketchboardFiles'" class="exportCanvasBox_intro">Sketch</div>
                         <div v-if="item[0] && key == 'likeDesignCollectionList'" class="exportCanvasBox_intro">Selected Design</div>
-						<div class="exportCanvasBox_item_color" v-if="key == 'colorBoards'"  v-for="colorItem in item" :class="{active:colorItem.checked}" draggable="true" @dragstart="onDragstart(key,colorItem)" @click="isMoible?setDragstart(key,colorItem):''">
-							<img src="" alt="">
-							<div class="exportCanvasBox_item_BGcolor" :style="{'background-color': 'rgb('+colorItem.rgbValue.r+','+colorItem.rgbValue.g+','+colorItem.rgbValue.b+')'}"></div>
-							<div>{{colorItem.tcx}}</div>
-							<div>{{colorItem.name}}</div>
+                        <div v-if="item[0] && key == 'likePorductImg'" class="exportCanvasBox_intro">Selected Product</div>
+						<div class="exportCanvasBox_item_color" v-if="key == 'colorBoards'"  v-for="colorItem in item" :class="{active:colorItem.upScaleChecked}" draggable="true" @dragstart="onDragstart(key,colorItem)" @click="isMoible?setDragstart(key,colorItem):''">
+							<div class="color_content" v-if="colorItem.gradient" :style="{height:'10rem','background-image':colorItem?.gradient?`linear-gradient(${colorItem?.gradient.angle}deg,${setGradient(colorItem?.gradient)}`:'none'}"></div>
+							<div v-if="!colorItem.gradient">
+								<div class="exportCanvasBox_item_BGcolor" :style="{'background-color': 'rgb('+colorItem.rgbValue.r+','+colorItem.rgbValue.g+','+colorItem.rgbValue.b+')'}"></div>
+								<div>{{colorItem.tcx}}</div>
+								<div>{{colorItem.name}}</div>
+							</div>
+							
 						</div>
 
                         <div
                             class="exportCanvasBox_item"
                             v-for="imgItem in item"
-							:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'',imgItem?.checked?'active':'']"
+							:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'',imgItem?.upScaleChecked?'active':'']"
 							draggable
 							@dragstart="onDragstart(key,imgItem)"
 							@click="isMoible?setDragstart(key,imgItem):''"
                         >
 							<div class="exportCanvasBox_img">
-								<!-- <div v-if="key == 'likeDesignCollectionList'">{{ imgItem.designOutfitUrl }}</div> -->
 								<img :src="key == 'likeDesignCollectionList'?imgItem?.designOutfitUrl:imgItem?.imgUrl" alt="" />
 							</div>
                         </div>
@@ -192,6 +195,8 @@
 					</div>
 					<div class="exportCanvasBox_left_btn">
 						<div class="subitOkPreviewBtn" :class="{active:allBoardData.printboardFiles.length<=0}" :title="allBoardData.printboardFiles.length<=0?$t('exportModel.jsContent2'):''" @click="setHDExport">{{ $t('exportModel.HDExport') }}</div>
+						<div class="subitOkPreviewBtn" @click="setSubmit">Save</div>
+						<div class="subitOkPreviewBtn" @click="setShare">Share</div>
 						<div class="subitOkPreviewBtn Guide_1_32" @click="setExport">{{ $t('exportModel.Export') }}</div>
 					</div>
 				</div>
@@ -273,6 +278,7 @@
 				<div class="generalModelOperate_btn_ok" :class="[credits < (allExportSR.filter(item=> item.checked ).length*5)?'active':'']" @click="setExportSR">OK</div>
 			</div>
 		</a-modal>
+		<publish ref="publish"></publish>
     </a-modal>
 </template>
 <script>
@@ -289,14 +295,16 @@ import { message, Modal } from "ant-design-vue";
 import domTurnImg from '@/tool/domTurnImg'
 import { openGuide,driverObj__ } from "@/tool/guide";
 const FileSaver = require("file-saver");
-import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JScanvasMouseMove,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
+import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JScanvasMouseMove,JScreateCheck,JSSetTexture,JSSetRemoveImage } from "@/tool/canvasDrawing";
 import { useI18n } from "vue-i18n";
-import {isMoible} from '@/tool/util'
+import {isMoible,calculateGradientCoordinate,base64ToFile} from '@/tool/util'
+import publish from "@/component/WorksPage/publish.vue";
 
 export default defineComponent({
     components: {
         scaleImage,
         ExportNewCoolection,
+		publish,
     },
     props: ["msg", "sketchCatecoryList"],
     setup(props,{emit}) {
@@ -314,6 +322,7 @@ export default defineComponent({
             height: 100,
         });
 		
+		let publish = ref()
 		// canvasWH.value.width = [window.innerWidth/2.4]
 		// canvasWH.value.width = canvasWH.value.width.map(num => Math.round(num / 100) * 100)[0];
         let credits = computed(() => {
@@ -326,7 +335,7 @@ export default defineComponent({
         let likeDesignCollectionList = computed(() => {
             return store.state.HomeStoreModule.likeDesignCollectionList;
         });
-        let isShowMark = false;
+        let isShowMark = ref(false);
         // let allImage = Object.assign(allBoardData.value,{likeDesignCollectionList:likeDesignCollectionList.value})
 		let position = {
 			//设置每个图形位置的初始值
@@ -343,15 +352,19 @@ export default defineComponent({
 		let reverseCanvasState = ref([])//存放canvas操作
 		let normalCanvasState = ref([])//存放canvas操作
 		let isLoadCanvas = false//撤回或者反撤回false为撤回
-        let init = () => {
+		let userlikeGroupId = 0
+		let beenPublished = 0
+        let init = (productData) => {
+			beenPublished = productData.beenPublished
+			userlikeGroupId = productData.userlikeGroupId
 			canvasWH.value.height = 100
 			normalCanvasState.value = []
 			reverseCanvasState.value = []
             showUpgradePlan.value = true;
 			allBoardData.value.likeDesignCollectionList =
                     likeDesignCollectionList;
+			allBoardData.value[productData.key] = productData.imgList;
             nextTick().then(async () => {
-				
 				let exportCanvasBoxCanvas = document.querySelector('.exportCanvasBox_center')
 				canvasWH.value.width = exportCanvasBoxCanvas.offsetWidth - 10
                 
@@ -369,7 +382,12 @@ export default defineComponent({
                 });
 				brushIndicator = clearBrushIndicator()
 				canvasOnDrop()//开启鼠标到画布事件
-				setRemoveImage()//设置元素删除
+				if(!fabric.Object.prototype.controls.deleteControl){//设置元素删除
+					JSSetRemoveImage(deleteObject)
+				}else{
+					fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObject
+				}
+				// setRemoveImage()//设置元素删除
 				canvas.on("object:modified", ()=>{
 					updateCanvasState()
 				});
@@ -411,117 +429,138 @@ export default defineComponent({
                     "colorBoards",
                     "sketchboardFiles",
                     "likeDesignCollectionList",
+					productData.key,
                 ];
                 let oldKey = "";
                 let margin = 20; //每个图形边距
 				let maxHeight = 0
 				let sketchXy = {x:0,y:0}
+				let data = {
+					userLikeGroupId:userlikeGroupId
+				}
+				isShowMark.value = true
+				let oldExportCanvas = await new Promise((resolve, reject) => {
+					Https.axiosPost(Https.httpUrls.exportSearch, data)
+					.then((rv) => {
+						resolve(rv)
+						isShowMark.value = false
+					})
+					.catch((rv) => {
+						resolve(null)
+						isShowMark.value = false
+					});
+				})
+				
                 // arr.forEach((item,index)=>{
-                for (const item of arr) {
-                    for (const key in allBoardData.value) {
-                        if (item == key) {
-                            //循环渲染顺序
-							let imgWidth = setImageWidth(key); //这是设置画布等宽
-                            let sketchGroupingItem = [];
-							if (
-                                item == "moodboardFiles" &&
-                                !disposeMoodboardShow
-                            ) {
-                                continue;
-                            }
-                            for (const [allItemIndex, allItem,] of allBoardData.value[key].entries()) {
-                                await new Promise((resolve, reject) => {
-									if(!allItem){
-										resolve()
-									}
-									maxHeight = position.y + position.height>maxHeight?position.y +position.height:maxHeight
-                                    if (key == "colorBoards") {
-										let rect = setGroup(allItem)
-										if (position.x + rect.width > canvasWH.value.width || oldKey != key) {
-											position.x = 0;
-											position.y = maxHeight;
+                if(oldExportCanvas){
+					canvasWH.value.height = oldExportCanvas.canvasHeight
+					canvas.setHeight(canvasWH.value.height);
+					canvas.loadFromJSON(oldExportCanvas, () => {});
+				}else{
+					for (const item of arr) {
+						for (const key in allBoardData.value) {
+							if (item == key) {
+								//循环渲染顺序
+								let imgWidth = setImageWidth(key); //这是设置画布等宽
+								let sketchGroupingItem = [];
+								if (
+									item == "moodboardFiles" &&
+									!disposeMoodboardShow
+								) {
+									continue;
+								}
+								for (const [allItemIndex, allItem,] of allBoardData.value[key].entries()) {
+									await new Promise((resolve, reject) => {
+										if(!allItem){
+											resolve()
 										}
-										let group = setCanvasColor(position.y,position.x,rect)
-                                        oldKey = key;
-                                        position.x += rect.width + margin;
-                                        position.height = group.height + margin;
-                                        resolve();
-                                    } else {
-                                        let itemCanvasImg = allItem.imgUrl;
-                                        if (key == "likeDesignCollectionList") {
-                                            itemCanvasImg =
-                                                allItem.designOutfitUrl;
-                                        }
-                                        fabric.Image.fromURL(itemCanvasImg,(img) => {
-											let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
-											if(key == "sketchboardFiles"){
-												if(allItemIndex == 0){
-													position.x = 0;
-													position.y = maxHeight;
-												}
-											}else{
-												if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
-													position.x = 0;
-													position.y = maxHeight;
-												}
+										maxHeight = position.y + position.height>maxHeight?position.y +position.height:maxHeight
+										if (key == "colorBoards") {
+											let rect = setGroup(allItem)
+											if (position.x + rect.width > canvasWH.value.width || oldKey != key) {
+												position.x = 0;
+												position.y = maxHeight;
 											}
-											console.log(allItem,key);
-											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) {
-																// console.log(sketchItem.x,sketchItem.y);
-																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];
+											let group = setCanvasColor(position.y,position.x,rect)
+											oldKey = key;
+											position.x += rect.width + margin;
+											position.height = group.height + margin;
+											resolve();
+										} else {
+											let itemCanvasImg = allItem.imgUrl;
+											if (key == "likeDesignCollectionList") {
+												itemCanvasImg =
+													allItem.designOutfitUrl;
+											}
+											fabric.Image.fromURL(itemCanvasImg,(img) => {
+												let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
+												if(key == "sketchboardFiles"){
+													if(allItemIndex == 0){
+														position.x = 0;
+														position.y = maxHeight;
+													}
+												}else{
+													if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
+														position.x = 0;
+														position.y = maxHeight;
 													}
 												}
-											}
-											if(key == "sketchboardFiles" && sketchGroupingItem.length >2){
-											}else{
-												position.x += img.width * scaleWH + margin;
-											}
-											img.lock_rotation = true;
-											canvas.add(img);
-											oldKey = key;
-											// setTimeout(() => {
-												resolve()
-											// }, 1000);
-										},{ crossOrigin: "Anonymous" });
-                                    }
-                                });
-                            }
-                        }
-                    }
-					if(position.y+position.height>canvasWH.value.height){
-						canvasWH.value.height =  Math.floor(position.y+position.height)
-						canvas.setHeight(canvasWH.value.height);
+												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){
+												}else{
+													position.x += img.width * scaleWH + margin;
+												}
+												img.lock_rotation = true;
+												canvas.add(img);
+												oldKey = key;
+												// setTimeout(() => {
+													resolve()
+												// }, 1000);
+											},{ crossOrigin: "Anonymous" });
+										}
+									});
+								}
+							}
+						}
+						if(position.y+position.height>canvasWH.value.height){
+							canvasWH.value.height =  Math.floor(position.y+position.height)
+							canvas.setHeight(canvasWH.value.height);
+						}
 					}
-                }
+				}
 				updateCanvasState('')//加载完成后记录一下
 				if(driver__.value.driver){
 					driverObj__.moveNext()
@@ -554,34 +593,7 @@ export default defineComponent({
 				// canvas.renderAll(); // 重新渲染 Canvas
 				updateCanvasState('remove')
 			}
-		let setRemoveImage = ()=>{
-			
-			const deleteIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC"
-			// 创建删除图片元素
-			let deleteImg = document.createElement('img')
-			deleteImg.src = deleteIcon
-			function renderIcon(icon) {
-				return function (ctx, left, top, styleOverride, fabricObject) {
-					var size = this.cornerSize;
-					ctx.save();
-					ctx.translate(left, top);
-					ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
-					ctx.drawImage(icon, -size/3, -size/3, size/1.5, size/1.5);
-					ctx.restore();
-				}
-			}
-			// 删除按钮控件
-			fabric.Object.prototype.controls.deleteControl = new fabric.Control({
-				x: 0.5,
-				y: -0.5,
-				offsetY: -16,
-				offsetX: 16,
-				cursorStyle: 'pointer',
-				mouseUpHandler: deleteObject,
-				render: renderIcon(deleteImg),
-				cornerSize: 24
-			})
-		}
+		
 		
 		let setImageWidth = (key)=>{
 			let imgWidth = canvasWH.value.width; //这是设置画布等宽
@@ -594,7 +606,9 @@ export default defineComponent({
 				//如果是mood 需要判断用户是否点击layout
 				disposeMoodboardShow = false;
 			}
-			
+			if(key == 'upImgFiles'){
+				imgWidth = canvasWH.value.width / 4;
+			}
 			if (key == "printboardFiles") {
 				imgWidth = canvasWH.value.width / 8;
 			}
@@ -604,7 +618,7 @@ export default defineComponent({
 						(sketchGrouping - 1) * 20) /
 					sketchGrouping;
 			}
-			if (key == "likeDesignCollectionList") {
+			if (key == "likeDesignCollectionList" || key == 'likePorductImg') {
 				imgWidth =
 					(canvasWH.value.width -
 						(likeDesign - 1) * 20) /
@@ -614,23 +628,24 @@ export default defineComponent({
 		}
 		let setCanvasImage = (img,key,left,top,data)=>{
 			// data
-			console.log(data);
 			let imgId = 0
-			let designType = ''//表示收藏或者generate
-			let level1Type = ''//表示sketch或者print
-			if(key == 'disposeMoodboard'){
-				imgId = data.id
-
-			}else if(key == 'moodboardFiles'){
-				
-			}else if(key == 'sketchboardFiles'){
-
-			}else if(key == 'printboardFiles'){
-				
-			}else if(key == 'likeDesignCollectionList'){
-				
+			let minioUrl = ''//表示收藏或者generate
+			if(key == 'likeDesignCollectionList'){
+				imgId = data.designOutfitId
+				minioUrl = data.url
 			}else if(key == 'upImgFiles'){
-				
+				imgId = data
+				minioUrl = data.url
+			}else if(key == 'likePorductImg'){
+				imgId = data.id
+			}else if(key == 'disposeMoodboard'){
+				let url = data.imgUrl.split('?')[0]
+				var match = url.match(/:(\d+)\/(.*)/);
+				minioUrl = match[2]
+				console.log(match[2]);
+				// data.imgUrl
+			}else{
+				minioUrl = data.minIOPath?data.minIOPath:data.resData.minIOPath
 			}
 			// let id = 
 			let proportion = img.height / img.width; //计算图形宽高比例
@@ -641,6 +656,8 @@ export default defineComponent({
 				// height: canvasWH.value.height/img.height,
 				left,
 				top,
+				imgId,
+				minioUrl,
 				scaleX:
 					imgWidth / img.width,
 				scaleY:(img.width * proportion * scaleWH) / img.height,
@@ -684,6 +701,10 @@ export default defineComponent({
                         if (key == "likeDesignCollectionList") {
                             data.imgUrl = item.designOutfitUrl;
                             data.name = "result" + index + "." + data.imgUrl.split(".").pop().split("?").shift();;
+                        }
+						if (key == "likePorductImg") {
+                            data.imgUrl = item.designOutfitUrl;
+                            data.name = "porduct" + index + "." + data.imgUrl.split(".").pop().split("?").shift();;
                         }
                         img.push(data);
                         index++;
@@ -746,17 +767,18 @@ export default defineComponent({
                     zip.generateAsync({ type: "blob" }).then((content) => {
                         // 生成二进制流
                         FileSaver.saveAs(content, "DesignFiles"); // 利用file-saver保存文件  自定义文件名
-                        isShowMark = false;
+                        isShowMark.value = false;
                     });
 					if(driver__.value.driver){
 						driverObj__.moveNext()
 					}
+					setSubmit()//导出的时候保存
 					initAligningGuidelines(canvas,true)
 
                 })
                 .catch((res) => {
                     // message.warning(t('HomeView.jsContent3'));
-                    isShowMark = false;
+                    isShowMark.value = false;
 					initAligningGuidelines(canvas,true)
                 });
         };
@@ -781,7 +803,7 @@ export default defineComponent({
 					operation.value = 'fill'
 				},
 				// onCancel(){
-				// 	_this.isShowMark = false
+				// 	_this.isShowMark.value = false
 				// 	resolve(false)
 				// }
 			});
@@ -842,11 +864,11 @@ export default defineComponent({
 		let present = {}
 		let setDragstart = (type,imgItem)=>{
 			currentType.value.type = type
-			present.checked = false
+			present.upScaleChecked = false
 			present = {}
-			if(imgItem.checked){
+			if(imgItem.upScaleChecked){
 			}else{
-				imgItem.checked = true
+				imgItem.upScaleChecked = true
 				present = imgItem
 			}
 			currentType.value.data = imgItem
@@ -881,34 +903,82 @@ export default defineComponent({
 			})
 		}
 		let setGroup = (data)=>{
-			var text = new fabric.Text(data.tcx,{
-				left: 0,
-				top: 60,
-				fontSize: 14,
-				fontFamily: "Arial",
-				textAlign: "left",
-				fill: "black",
-			});
-			let text1 = new fabric.Text(data.name,{
-				left: 0,
-				top: 80,
-				width: 20,
-				fontSize: 14,
-				fontFamily: "Arial",
-				textAlign: "left",
-			});
-			let width = 110 > text1.width ? 110 : text1.width;
-			var color = new fabric.Rect({
-				width: width,
-				height: 60,
-				textAlign: "left",
-				fill: `rgb(${data.rgbValue.r},${data.rgbValue.g},${data.rgbValue.b})`,
-			});
-			let rect = {text,text1,color,width}
+			let rect
+			if(data.gradient){
+				let colorStops = []
+				data.gradient.gradientList.forEach(item=>{
+				    let obj = {
+						offset:item.left.split('%')[0]/100,
+						color:`rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`
+					}
+					colorStops.push(obj)
+				})
+				let { x0, y0, x1, y1 } = calculateGradientCoordinate(100,120,data.gradient.angle)
+				let linear = new fabric.Gradient({
+					type: 'linear', // 线性渐变
+					// coords: { x1: 0, y1: 0, x2: 200, y2: 0 }, // 渐变方向
+					coords: { x1:x0, y1:y0, x2:x1, y2:y1 }, // 渐变方向
+					colorStops: colorStops,
+				})
+				var color = new fabric.Rect({
+					top:0,
+					left:0,
+					width: 110,
+					height: 130,
+					textAlign: "left",
+					fill: linear // 设置渐变填充
+					// fill: `rgb(${data.rgbValue.r},${data.rgbValue.g},${data.rgbValue.b})`,
+				});
+				var text = new fabric.Text('',{
+					left: 0,
+					top: 0,
+					fontSize: 0,
+					fontFamily: "Arial",
+					textAlign: "left",
+					fill: "black",
+				});
+				let text1 = new fabric.Text('',{
+					left: 0,
+					top: 0,
+					width: 20,
+					fontSize: 0,
+					fontFamily: "Arial",
+					textAlign: "left",
+				});
+				rect = {text,text1,color,width:110}
+			}else{
+				var text = new fabric.Text(data.tcx,{
+					left: 0,
+					top: 60,
+					fontSize: 14,
+					fontFamily: "Arial",
+					textAlign: "left",
+					fill: "black",
+				});
+				let text1 = new fabric.Text(data.name,{
+					left: 0,
+					top: 80,
+					width: 20,
+					fontSize: 14,
+					fontFamily: "Arial",
+					textAlign: "left",
+				});
+				let width = 110 > text1.width ? 110 : text1.width;
+				var color = new fabric.Rect({
+					width: width,
+					height: 60,
+					textAlign: "left",
+					fill: `rgb(${data.rgbValue.r},${data.rgbValue.g},${data.rgbValue.b})`,
+				});
+				rect = {text,text1,color,width}
+			}
+			
+
 			return rect
 		}
 		let setCanvasColor = (top,left,rect)=>{
-			var group = new fabric.Group([rect.color, rect.text, rect.text1],{
+			let group
+			group = new fabric.Group([rect.color,rect.text,rect.text1],{
 				left,
 				top,
 				width: rect.width,
@@ -922,12 +992,13 @@ export default defineComponent({
 		// 创建矩形
 		let createImage = async (top, left,key)=> {
 			let itemCanvasImg = currentType.value.data.imgUrl
+			let data = JSON.parse(JSON.stringify(currentType.value.data))
 			if(key == 'likeDesignCollectionList'){
 				itemCanvasImg = currentType.value.data.designOutfitUrl;
 			}
 			await new Promise((resolve,reject)=>{
 				fabric.Image.fromURL(itemCanvasImg,(img) => {
-					setCanvasImage(img,key,left,top)//设置图片
+					setCanvasImage(img,key,left,top,data)//设置图片
 					canvas.add(img);
 					resolve()
 				},{ crossOrigin: "Anonymous" });
@@ -937,10 +1008,6 @@ export default defineComponent({
 		//设置画布监听修改添加事件，用来做撤回功能
 		let updateCanvasState = (str) =>{
 				const canvasAsJson = JSON.stringify(canvas.toJSON());
-				console.log(canvas.toJSON());
-				var json = canvas.toJSON(['aaaID']);
-				const d = canvas.toObject(['myFabricType1', 'myFabricType2'])
-				console.log(json,d);
 				if(str == 'loadingCompleted'){
 					// reverseCanvasState.value.push(canvasAsJson);
 				}
@@ -1030,7 +1097,6 @@ export default defineComponent({
   // 检查是否鼠标离开了画布
 //   if (x < 0 || x > canvas.width || y < 0 || y > canvas.height) {
 //     // 执行你的操作
-//     console.log('鼠标离开了画布');
 //   }
 			// if(!x || !y){
 			// 	document.removeEventListener('keydown',canvasKeyDown);
@@ -1152,10 +1218,16 @@ export default defineComponent({
 			if (file) {
 				const reader = new FileReader();
 				reader.onload = (e) => {
-					fabric.Image.fromURL(e.target.result,(img) => {
-						setCanvasImage(img,"upImgFiles",0,canvas.wrapperEl.parentNode.scrollTop,e.target.result)
-						canvas.add(img);
-					},{ crossOrigin: "Anonymous" })
+					let file = base64ToFile(e.target.result,'upload')
+					let formData = new FormData();
+					formData.append("file", file);
+					let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
+					Https.axiosPost(Https.httpUrls.canvasElementUpload, formData,config).then((rv)=>{
+						fabric.Image.fromURL(rv.minioUrl,(img) => {
+							setCanvasImage(img,"upImgFiles",0,canvas.wrapperEl.parentNode.scrollTop,rv)
+							canvas.add(img);
+						},{ crossOrigin: "Anonymous" })
+					})
 					input.value = ''
 				};
 				reader.readAsDataURL(file);
@@ -1413,8 +1485,8 @@ export default defineComponent({
 		let setCanvasDown = (event)=>{
 			// brushIndicator.set({fill: '#FFF',strokeWidth:0});
 			//设置移动端按下添加元素
-			if(isMoible && present.checked){
-				present.checked = false
+			if(isMoible && present.upScaleChecked){
+				present.upScaleChecked = false
 				present = {}
 				let pointerVpt = canvas.restorePointerVpt(event.pointer)
 				switch (currentType.value.type) {
@@ -1597,7 +1669,7 @@ export default defineComponent({
 			// 			});
 			// 		},
 			// 		// onCancel(){
-			// 		// 	_this.isShowMark = false
+			// 		// 	_this.isShowMark.value = false
 			// 		// 	resolve(false)
 			// 		// }
 			// 	});
@@ -1656,6 +1728,7 @@ export default defineComponent({
 							if(img.width*scaleSR.value>2048 || img.height*scaleSR.value>2048){
 								arr.push(index)
 							}
+							img.remove()
 							resolve(img)
 						}
 						img.src = item.imgUrl
@@ -1688,9 +1761,47 @@ export default defineComponent({
 			});
 			
 		}
+		
 		let toSvg = ()=>{
 			// console.log(canvas.toSvg());
 		}
+		let setShare = ()=>{
+			initAligningGuidelines(canvas,false)
+			let publishModal = publish.value
+			publishModal.publishMask = true
+			var imageDataURL = canvas.toDataURL({
+                format: "jpeg", // 导出格式为 PNG
+                quality: 1, // 图片质量为 1（最高质量）
+            });
+			let data = {
+				"imgUrl":imageDataURL,
+				userlikeGroupId:userlikeGroupId,
+				beenPublished
+			}
+			publishModal.init(data)
+		}
+		let setSubmit = ()=>{
+			let data = setCanvasContent()
+			data.canvasHeight = canvasWH.value.height
+			let blob = new Blob([JSON.stringify(data)], { type: "application/json" });
+			let formData = new FormData();
+			formData.append("file", blob, "data.json");
+			formData.append('userLikeGroupId', userlikeGroupId);
+			let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
+            Https.axiosPost(Https.httpUrls.exportSave, formData,config).then((rv)=>{
+				message.success('save successfully')
+            })
+		}
+		let setCanvasContent = ()=>{
+			var json = canvas.toJSON(['imgId','minioUrl']);
+			// console.log(JSON.stringify(json));
+			json.objects.forEach(item=>{
+				if(item.type == 'image'){
+					delete item.src
+				}
+			})
+			return json
+		}
         onMounted(() => {});
         return {
 			toSvg,
@@ -1698,6 +1809,7 @@ export default defineComponent({
 			toSvg,
             showUpgradePlan,//当前弹窗是否打开
             canvasWH,//画布初始宽高
+			publish,//发布作品广场
 			credits,//积分 用来判断HD导出积分是否够用
             init,//首页点击导出后初始化
             setExport,//导出所有内容
@@ -1740,6 +1852,8 @@ export default defineComponent({
 			selectAllImg,//控制全选
 			selectImg,//选中单个图片
 			setExportSR,//设置SR导出
+			setShare,
+			setSubmit,
         };
     },
     data(prop) {
@@ -1747,6 +1861,26 @@ export default defineComponent({
 			isMoible:isMoible()
 		};
     },
+	computed: {
+		setGradient(){
+			return (gradient)=>{
+				let gradientStr = ''
+				gradient.gradientList.sort((a, b) => {
+					let aArr = a.left.split('%')[0]
+					let bArr = b.left.split('%')[0]
+					return aArr - bArr;
+				});
+				gradient.gradientList.forEach((item,index)=>{
+					let str = ','
+					if(gradient.gradientList.length == index+1)str = ''
+					gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}` 
+
+				})
+				return `${gradientStr}`
+			}
+			
+		}
+	},
     watch: {
         'canvasWH.height':{
         	handler(newVal,oldVal){
@@ -1766,7 +1900,6 @@ export default defineComponent({
 				
 
 				let mousedown = (event)=>{//按下
-					// console.log(event.target.getBoundingClientRect());
 					let position = {
 						y:event.touches[0].screenY,
 						top : scrollBox.style.marginTop?scrollBox.style.marginTop.split('px')[0]*1:0
@@ -1777,7 +1910,6 @@ export default defineComponent({
 						let offsetTop = position.top+e.touches[0].screenY - position.y
 						offsetTop = offsetTop <= 0? 0 : offsetTop
 						offsetTop = height+offsetTop >= canvasBox.offsetHeight? canvasBox.offsetHeight - height : offsetTop
-						console.log();
 						scrollBox.style.marginTop = offsetTop+'px'
 						canvasBox.scroll({
 							top: offsetTop*scale, // 纵向滚动距离
@@ -1897,14 +2029,24 @@ export default defineComponent({
 					display: flex;
 					justify-content: space-between;
 					padding-top: 2rem;
+					flex-wrap: wrap;
 					.subitOkPreviewBtn{
 						position: initial;
 						transform: none;
+						margin-bottom: 2rem;
+						width: 40%;
+						text-align: center;
 						&.active{
 							opacity: .7;
 							cursor: not-allowed;
 						}
 					}
+					.subitOkPreviewBtn:nth-child(2n){
+						margin-left: 1rem;
+					}
+					.subitOkPreviewBtn:nth-child(3),.subitOkPreviewBtn:nth-child(4){
+						margin-bottom: 0;
+					}
 					
 				}
 			}

src/component/HomePage/ExportNewCoolection.vue

@@ -169,6 +169,7 @@ export default defineComponent({
 									sketch2.num = 1
 									sketch3.num = 2
 									resolve()
+									image.remove()
 								})
 							}
 							

src/component/HomePage/Generate.vue

@@ -39,6 +39,9 @@
 							</div>
 						</div>
 					</div>
+					<a-popover title="Seed">
+						<input class="search_seed" v-show="scene?.value == 'Logo'" @input="ifSeedValue" v-model="searchPictureSeed" type="Number" placeholder='Seed' min="0">
+					</a-popover>
 					<input
 						class="search_input"
 						@input="ifMaximumLength"
@@ -139,7 +142,7 @@
                 :class="[item.status != 'Success'?'hideEvents':'',item?.checked?'active':'']"
             >
 				<img v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
-				<sketchCategory v-if="type_.type2 == 'Sketchboard'" :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="item" :driver__="driver__.driver" :driverClass="{class1: 'Guide_1_13',class2:'Guide_1_13_1'}"></sketchCategory>
+				<sketchCategory v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" :isSpread="type_.type2 == 'Printboard'" :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="item" :driver__="driver__.driver" :driverClass="{class1: 'Guide_1_13',class2:'Guide_1_13_1'}"></sketchCategory>
 				<div
 					class="delete_like_file_block left1"
 					:class="[driver__.driver?'hideEvents':'',]"
@@ -212,6 +215,7 @@ export default defineComponent({
 			label:useI18n().t('Generate.Model1')
 		})
         let searchPictureName = ref("");
+        let searchPictureSeed:any = ref(0);
         let store = useStore();
         let fileList: any = ref([
           
@@ -233,9 +237,9 @@ export default defineComponent({
 		let generateProceedList = ref([])
 		let remGenerate:any = ref(false)
 		let remGenerateTime:any = ref()
-		let scene:any = props.scene
         return {
             searchPictureName,
+			searchPictureSeed,
             store,
             fileList,
 			sketchboardList,
@@ -243,7 +247,6 @@ export default defineComponent({
 			printModel,
 			printModelList,
 			isGenerate,
-			scene,
 
 			// printBoards,
 			// moodboarList,
@@ -373,7 +376,7 @@ export default defineComponent({
             if (!isJpgOrPng) {
                 message.info(this.t('Generate.jsContent1'));
             }
-            const isLt2M = file.size / 1024 / 1024 < 2;
+            const isLt2M = file.size / 1024 / 1024 < 5;
             if (!isLt2M) {
                 message.info(this.t('Generate.jsContent2'));
             }
@@ -383,6 +386,7 @@ export default defineComponent({
 			this.printModel = value
 		},
 		getgenerate(){
+			if(this.isGenerate)return
 			clearInterval(this.remGenerateTime)
 			if(this.searchPictureName){
 				let arr = this.searchPictureName.split(/\s+/).length
@@ -415,7 +419,6 @@ export default defineComponent({
 			}
 			if(this.upload.level1Type == "Sketchboard"){
 				
-				console.log(this.sketchboardList);
 			}else if(this.upload.level1Type == "Printboard"){
 				level2Type = this.scene?.value
 			}
@@ -426,14 +429,18 @@ export default defineComponent({
 				level1Type:this.upload.level1Type,
 				level2Type:level2Type,
 				text:this.searchPictureName,
+				seed:this.searchPictureSeed,
 				userId:this?.userInfo?.userId,
 				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
 				version:1,//为1就是Print
 				isTestUser:this.driver__.driver?false:this.isTest,
 				gender:this.workspace.sexEnum.name,
-				base64:base64,
+				sloganBase64:base64,
 			}
 			this.isGenerate = true
+			this.remGenerateTime = setTimeout(()=>{
+				this.remGenerate = true
+			},10000)
 			Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
                 (rv) => {
 					if(data.isTestUser){
@@ -456,17 +463,21 @@ export default defineComponent({
                 }
             ).catch(res=>{
 				this.isGenerate = false
+				clearInterval(this.remGenerateTime)
+				this.remGenerate = false
             });
 		},
 		setGenerate(dataList:any){
-			this.remGenerateTime = setTimeout(()=>{
-				this.remGenerate = true
-			},10000)
+			
 			let data = dataList
 			let dataNum = dataList.length
+			let state = true
 			this.generateTime = setInterval(()=>{
+				if(!state)return
+				state = false
 				Https.axiosPost(Https.httpUrls.generateResult, data).then(
 					(rv) => {
+						state = true
 						if(this.isGenerate){//防止取消后有正在执行的获取状态
 							this.generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
 							rv.forEach((element:any) => {
@@ -475,12 +486,14 @@ export default defineComponent({
 									element.id_ = GO.id++
 									this.fileList.unshift(element)
 									data = data.filter((item:any) => item !== element.taskId);
-									this.sketchCatecoryList.forEach((itemCategory:any) => {
-										if(itemCategory.value == element.category){
-											element.categoryValue = itemCategory?.name
-											element.category = itemCategory?.value
-										}
-									});
+									element.categoryValue = this.scene?.name
+									element.category = this.scene?.value
+									// this.sketchCatecoryList.forEach((itemCategory:any) => {
+									// 	if(itemCategory.value == element.category){
+									// 		element.categoryValue = itemCategory?.name
+									// 		element.category = itemCategory?.value
+									// 	}
+									// });
 								}
 							});
 							if((data.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==data.length)){
@@ -533,6 +546,11 @@ export default defineComponent({
 			}
 			this.searchPictureName += str + value
 		},
+		ifSeedValue(e:any){
+			if(this.searchPictureSeed == ''){
+				this.searchPictureSeed = 0
+			}
+		},
 		ifMaximumLength(){
 			clearTimeout(this.inputTime)
 			let inputBox = document.getElementsByClassName('generate')[0].getElementsByClassName('input_box')[0]
@@ -635,8 +653,6 @@ export default defineComponent({
         },
 		likeFile(item:any,str:string){
 			if(str == 'like'){
-				console.log();
-				
 				let level2Type = ''
 				if(this.upload.level1Type == "Sketchboard"){
 					level2Type = item.category
@@ -724,7 +740,7 @@ export default defineComponent({
         top: 0;
         background: #fff;
         padding-bottom: calc(2rem*1.2);
-        z-index: 2;
+        z-index: 3;
     }
     .generate_checkbox {
     }

src/component/HomePage/MarketingSketchUpload.vue

@@ -129,7 +129,7 @@ export default defineComponent({
             if (!isJpgOrPng) {
                 message.warning(this.t('MarketingSketchUpload.jsContent2'));
             }
-            const isLt2M = file.size / 1024 / 1024 < 2;
+            const isLt2M = file.size / 1024 / 1024 < 5;
             if (!isLt2M) {
                 message.warning(this.t('MarketingSketchUpload.jsContent3'));
             }

src/component/HomePage/Material.vue

@@ -8,6 +8,25 @@
             :centered="true"
         > -->
             <div class="my_material_header">
+				<div class="my_material_header_left" v-if="selectCode != 'Moodboard'">
+					<div class="select_block">
+						<a-select
+							ref="select"
+							v-model:value="disignType"
+							:options="disignTypeList"
+							@change="handleChange"
+							:fieldNames="{ label: 'name', value: 'value' }"
+						>
+							<template #suffixIcon
+								><span
+									class="icon iconfont icon-xiala"
+									style="color: #343579"
+								></span
+							></template>
+						</a-select>
+					</div>
+					
+				</div>
                 <div class="my_material_header_right">
                     <div class="content_search_block">
                         <input class="search_input" :placeholder="$t('Material.inputContent1')" v-model="searchPictureName"  @keydown.enter="getLibraryList('')">
@@ -21,8 +40,8 @@
                 <div class="material_content_body scroll_style">
 					<div v-for="item,index in imgList" :key="item" class="content_img_item" :class="[ item?.checked ? 'active':''  , selectCode == 'Moodboard' ? 'moodb':''  ]" >
 						<img :src="item?.imgUrl" @click.stop="selectImgItem(item)">
-						<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="disignTypeList" :generateList="imgList" :item="item" :isSetSketchCategory="true"></sketchCategory>
-						<printCategory v-if="selectCode == 'Printboard'" :disignTypeList="disignTypeList" :generateList="imgList" :item="item" :isSetSketchCategory="true"></printCategory>
+						<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="disignTypeList" :generateList="imgList" :item="item" :isSetSketchCategory="true" @upTypeSucced='upTypeSucced'></sketchCategory>
+						<!-- <printCategory v-if="selectCode == 'Printboard'" :disignTypeList="disignTypeList" :generateList="imgList" :item="item" :isSetSketchCategory="true"></printCategory> -->
 						<!-- <div v-if="selectCode == 'Sketchboard' || selectCode == 'Printboard'" class="pin_block">
 							<a-checkbox v-model:checked="item.pin">{{ $t('Material.PIN') }}</a-checkbox>
 						</div> -->
@@ -67,7 +86,6 @@ export default defineComponent({
         let pageSize = ref(12)
         let total = ref(0)
         let searcMaterialhName:any = ref('') //搜索名字
-        let designType:any = ref(null)
         // let disignTypeList:any = ref([
 		let driver__:any = inject('driver__')
 				
@@ -77,6 +95,11 @@ export default defineComponent({
 		let {t} = useI18n()
 		let usGenerateList = ref([])
 	
+		
+		let disignType = ref({
+			name:'',
+			value:''
+		})
         return{
             myMaterialModalShow,
             imgList,
@@ -88,12 +111,12 @@ export default defineComponent({
             pageSize,
             total,
             searcMaterialhName,
-            designType,
             // disignTypeList,
 			workspace,
 			t,
 			driver__,
 			usGenerateList,
+			disignType,
         }
     },
 	data (prop) {
@@ -229,6 +252,9 @@ export default defineComponent({
 			this.currentPage = 1
 			this.pageSize = 12
 			this.imgList = []
+			if(code != 'Moodboard'){
+				this.disignType = this.disignTypeList[0].value
+			}
 			this.getLibraryList('')
 			
         },
@@ -251,6 +277,10 @@ export default defineComponent({
 		},
         selectImgItem(imgData:any){
 			let parent:any = this.$parent
+			if(this.selectCode != 'Moodboard'){
+				imgData.categoryValue = imgData.level2TypeEnum.value
+				imgData.category = imgData.level2TypeEnum.name
+			}
 			if(parent.isUseGenerate){
 				this.setUseGenerate([])
 				imgData.checked = true
@@ -258,8 +288,12 @@ export default defineComponent({
 					imgId : imgData.id,
 					imgUr: imgData.imgUrl,
 					level2Type:imgData.level2Type,
+					categoryValue:imgData.categoryValue,
+					category:imgData.category,
 					designType:'library'
 				}
+				console.log(obj);
+				
 				// parent.useGenerate.designType = 'collection'
 				this.$emit('setLibrary',obj)
 			}else{
@@ -283,6 +317,14 @@ export default defineComponent({
 			}
 			
         },
+		handleChange(){
+			this.currentPage = 1
+			this.imgList = []
+            this.getLibraryList('')
+		},
+		upTypeSucced(){
+			this.handleChange()
+		},
         //选择所有的图片
         async getLibraryList(str:any){
 			let workspace = JSON.parse(JSON.stringify(this.store.state.Workspace.workspace))
@@ -297,7 +339,7 @@ export default defineComponent({
 			}
             let data = {
                 level1Type:this.selectCode,
-                // level2Type:this.designType,
+                level2Type: this.selectCode == 'Moodboard'?'':this.disignType,
 				modelSex:workspace?.sex,
                 page: this.currentPage,
                 // page:this.currentPage,
@@ -396,6 +438,16 @@ export default defineComponent({
 		position: sticky;
 		top: 0;
 		z-index: 2;
+		.my_material_header_left{
+			.select_block{
+				border: calc(0.1rem* 1.2) solid #F1F1F1;
+				margin-right: calc(2.3rem*1.2);
+				height: 4rem;
+				.ant-select-selector{
+					height: 90%;
+				}
+			}
+		}
         .my_material_header_right{
             display: flex;
             justify-content: space-between;
@@ -415,7 +467,7 @@ export default defineComponent({
                     // font-size: 1.6rem*1.2);
 					font-size: calc(1.2rem*1.2);
                     font-weight: 400;
-					height: calc(3rem*1.2);
+					height: 4rem;
 
                     &::placeholder {
                         color: #C2C2C2;
@@ -466,7 +518,7 @@ export default defineComponent({
                 font-size: calc(2rem*1.2);
                 color: #030303;
             }
-
+			
             .material_content_top_right{
                 display: flex;
                 align-items: center;

src/component/HomePage/MoodboardUpload.vue

@@ -365,7 +365,7 @@ export default defineComponent({
             if (!isJpgOrPng) {
                 message.info(this.t('MoodboardUpload.jsContent3'));
             }
-            const isLt2M = file.size / 1024 / 1024 < 2;
+            const isLt2M = file.size / 1024 / 1024 < 5;
             if (!isLt2M) {
                 message.info(this.t('MoodboardUpload.jsContent4'));
             }

src/component/HomePage/NewCollectionReview.vue

@@ -182,6 +182,7 @@ export default defineComponent({
 								sketchH[index]+=image.height * (300/image.width)
 								nextTick().then(()=>{
 									resolve()
+									image.remove()
 								})
 							}
 						})

src/component/HomePage/PrintboardUpload.vue

@@ -30,7 +30,7 @@
 						<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
 							<div @click.stop="openPrintModel">{{ scene.name }}	<i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></div>
 							<ul v-show="openMenu">
-								<li v-for="item,index in sceneList" class="printModel_item" @click.stop="setSceneList(item)">{{ item.name }}</li>
+								<li v-for="item,index in printCatecoryList" class="printModel_item" @click.stop="setSceneList(item)">{{ item.name }}</li>
 							</ul>
 						</div>
                     </div>
@@ -46,6 +46,8 @@
                                 </div>
                                 <div class="upload_file_item_content"  v-show="file?.status === 'done'">
                                     <img  v-lazy="file.imgUrl" class="upload_img" :key="file.imgUrl">
+									<sketchCategory :disignTypeList="printCatecoryList" :generateList="fileList" :isSetSketchCategory="true" :item="file" ></sketchCategory>
+
                                     <div class="delete_like_file_block" @click.stop="deleteFile(file)">
 										<span
 											class="icon iconfont icon-shanchu"
@@ -98,7 +100,7 @@
 				@confirmSelect="confirmSelect"
 				:disignTypeList="printCatecoryList"
 				></Material>
-			<Generate v-show="openClick == 3" ref="Generate" :scene="scene" msg="Printboard"></Generate>
+			<Generate v-show="openClick == 3" ref="Generate" :scene="scene" :sketchCatecoryList="printCatecoryList" msg="Printboard"></Generate>
         </div>
 		<div class="modal_right">
 			<div class="modal_layout">
@@ -119,6 +121,8 @@
 				<div class="modal_img">
 					<div v-for="item,index in printboardList" :key="item" class="modal_imgItem Guide_1_2_9" :class="[driver__.driver?'showEvents':'']" >
 						<img v-lazy="item.imgUrl">
+						<sketchCategory :disignTypeList="printCatecoryList" :generateList="printboardList" :isSpread="true" :item="item" ></sketchCategory>
+
 						<!-- <div
 							class="delete_like_file_block left1"
 							:class="[driver__.driver?'hideEvents':'']"
@@ -160,6 +164,7 @@ import { useI18n } from 'vue-i18n';
 import { openGuide,driverObj__ } from "@/tool/guide";
 import scaleImage from "@/component/HomePage/scaleImage.vue";
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import sketchCategory from "@/component/HomePage/sketchCategory.vue";
 import axios from 'axios'
 import generalMenu from "@/component/HomePage/generalMenu.vue";
 import { overflow } from 'html2canvas/dist/types/css/property-descriptors/overflow';
@@ -171,6 +176,7 @@ export default defineComponent({
 		Generate,
 		scaleImage,
 		generalMenu,
+		sketchCategory,
     },
     setup(){
         let store:any =useStore()
@@ -300,6 +306,7 @@ export default defineComponent({
 				material.init('Printboard')
 			}
 			if(num == 3){
+				this.scene = this.printCatecoryList[0]
 				nextTick().then(()=>{
 					if(this.driver__.driver){
 						driverObj__.moveNext()
@@ -355,7 +362,7 @@ export default defineComponent({
             if (!isJpgOrPng) {
                 message.info(this.t('PrintboardUpload.jsContent1'));
             }
-            const isLt2M = file.size / 1024 / 1024 < 2;
+            const isLt2M = file.size / 1024 / 1024 < 5;
             if (!isLt2M) {
                 message.info(this.t('PrintboardUpload.jsContent2'));
             }
@@ -430,8 +437,10 @@ export default defineComponent({
                                 file.imgUrl = rv.url
                                 file.pin = false
                                 file.id = rv.id
+								file.category = this.printCatecoryList[0].value
+								file.categoryValue = this.printCatecoryList[0].name
                                 file.resData = rv
-
+								
                             }
                         }
                         let fileList = this.fileList.filter((v:any)=> v.status === 'done')
@@ -503,6 +512,8 @@ export default defineComponent({
                             file.imgUrl = rv.url
                             file.id = rv.id
                             file.resData = rv
+							file.category = this.printCatecoryList[0].value
+							file.categoryValue = this.printCatecoryList[0].name
                         }
                     }
                     let fileList = this.fileList.filter((v:any)=> v.status === 'done')
@@ -549,6 +560,13 @@ export default defineComponent({
 				moodboard:[] as any,
 			}
 			arr.forEach((v:any)=>{
+				v.pin = v.pin == 1?true:false
+				this.printCatecoryList.forEach((item:any) => {
+					if(v.level2Type == item.value){
+						v.category=item.value
+						v.categoryValue=item.name
+					}
+				});
 				if(v.type_.type1 == 'generate'){
 					setboard.generate.push(v)
 				}else if(v.type_.type1 == 'material'){
@@ -592,10 +610,8 @@ export default defineComponent({
 		setSceneList(data:any){
 			if(this.scene.value === data.value) return
 			this.scene = data
-			console.log(data);
 			let generate:any = this.$refs.Generate
 			generate.sketchboardList = []
-			generate.scene = data
 			this.openMenu = false
 		},
 		openPrintModel(){

src/component/HomePage/SketchboardUpload.vue

@@ -138,7 +138,7 @@
 				<div class="modal_img">
 					<div v-for="item,index in sketchboardList" :key="item" class="modal_imgItem Guide_1_2_9" :class="[driver__.driver?'showEvents':'']" >
 						<img v-lazy="item.imgUrl">
-						<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="sketchboardList" :item="item" :driver__="driver__.driver"></sketchCategory>
+						<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="sketchboardList" :isSpread="true" :item="item" :driver__="driver__.driver"></sketchCategory>
 
 						<!-- <div
 							class="delete_like_file_block left1"
@@ -154,7 +154,7 @@
 							<span class="icon iconfont icon-shanchu operate_icon"></span>
 						</div>
 						<div class="pin_block">
-							<a-checkbox v-model:checked="item.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
+							<a-checkbox v-model="item.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
 						</div>
 					</div>
 				</div>
@@ -432,7 +432,7 @@ export default defineComponent({
             if (!isJpgOrPng) {
                 message.info(this.t('SketchboardUpload.jsContent2'));
             }
-            const isLt2M = file.size / 1024 / 1024 < 2;
+            const isLt2M = file.size / 1024 / 1024 < 5;
             if (!isLt2M) {
                 message.info(this.t('SketchboardUpload.jsContent3'));
             }
@@ -482,6 +482,13 @@ export default defineComponent({
 				moodboard:[] as any,
 			}
 			arr.forEach((v:any)=>{
+				v.pin = v.pin == 1?true:false
+				this.sketchCatecoryList.forEach((item:any) => {
+					if(v.level2Type == item.value){
+						v.category=item.value
+						v.categoryValue=item.name
+					}
+				});
 				if(v.type_.type1 == 'generate'){
 					setboard.generate.push(v)
 				}else if(v.type_.type1 == 'material'){

src/component/HomePage/Upload.vue

@@ -93,7 +93,7 @@ export default defineComponent({
             if (!isJpgOrPng) {
                 message.info(this.t('Upload.jsContent1'));
             }
-            const isLt2M = file.size / 1024 / 1024 < 2;
+            const isLt2M = file.size / 1024 / 1024 < 5;
             if (!isLt2M) {
                 message.info(this.t('Upload.jsContent2'));
             }

src/component/HomePage/collectionModal.vue

@@ -136,8 +136,6 @@ export default defineComponent({
     methods:{
         nextStep(){
 			let colorBoards = this.store.state.UploadFilesModule.colorBoards
-			console.log(colorBoards);
-			
 			if(this.collectionStep == 1){
 				let disposeMoodboard = this.store.state.UploadFilesModule.disposeMoodboard
 				let moodboard = this.store.state.UploadFilesModule.moodboard

src/component/HomePage/createSlogan.vue

@@ -86,7 +86,9 @@ import { Modal, message } from "ant-design-vue";
 import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
 import allOrder from "@/component/Pay/allOrder.vue";
 import creditsDetail from "@/component/Pay/creditsDetail.vue";
+import { JSSetRemoveImage } from "@/tool/canvasDrawing";
 import { useI18n } from "vue-i18n";
+
 export default defineComponent({
     components: {
 		creditsDetail,
@@ -146,8 +148,8 @@ export default defineComponent({
 				canvasWH.value = height
 				scale = exportWH/canvasWH.value
 				var canvasDom = document.createElement("canvas");
-				let oldCanvasDom = canvasBox.querySelector('canvas')
-				if(oldCanvasDom)canvasBox.removeChild(oldCanvasDom); // 清空原有内容
+				let oldCanvasDom = canvasBox.querySelector('.canvas-container')
+				if(oldCanvasDom)oldCanvasDom.remove()
 				canvasBox.appendChild(canvasDom);
 				canvas = new fabric.Canvas(canvasDom, {
 					backgroundColor: "#e6e6e6",
@@ -157,6 +159,11 @@ export default defineComponent({
 				});
 				canvas.on('object:moving',canvasMoving)
 				setTextFun('请输入一段话吧~')
+				if(!fabric.Object.prototype.controls.deleteControl){
+					JSSetRemoveImage(deleteObj)
+				}else{
+					fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
+				}
 				// setRemoveImage()
 				fabric.Object.prototype.cornerSize = 10
 				fabric.Object.prototype.transparentCorners = false 
@@ -181,6 +188,21 @@ export default defineComponent({
 				textBtnShow.value = false
 			}
 		}
+		let deleteObj = ()=> {
+			if(!canvas.getActiveObjects()){
+				return
+			}
+			let target = canvas.getActiveObjects()
+			target.forEach((item)=>{
+				canvas.fxRemove(item, {
+					onComplete(){
+					canvas.discardActiveObject(); // 丢弃当前选中的对象
+					canvas.renderAll(); // 重新渲染 Canvas
+					}
+				})
+				canvas.FX_DURATION = 300
+			})
+		}
 		let messageShow = false
 		let canvasMoving = (options)=>{
 			let obj = options.target

src/component/HomePage/printCategory.vue

@@ -54,6 +54,7 @@
  import { openGuide,driverObj__ } from "@/tool/guide";
  export default defineComponent({
 	 name:'filterComponent',
+	 emits:['upTypeSucced'],
 	 props:{
 		 disignTypeList:{
 			 type:Object
@@ -77,7 +78,7 @@
 			 default:{class1:'',class2:''},
 		 }
 	 },
-	 setup(props:any){
+	 setup(props:any,{emit}){
 		 let showFileCategory = (file:any)=> {
 			 file.categoryShow = true;
 			 nextTick().then(()=>{
@@ -114,11 +115,12 @@
 				 libraryId:[item.id],
 				 level2Type:item.category,
 			 }
-			//  Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
-			// 	 (rv: any) => {
-			// 	 }
-			//  ).catch((res)=>{
-			//  });
+			 Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
+				 (rv: any) => {
+					emit('upTypeSucced')
+				 }
+			 ).catch((res)=>{
+			 });
 		 }
 		 return {
 			 showFileCategory,

src/component/HomePage/productImg.vue

@@ -26,10 +26,10 @@
 					<div class="productImg_content_item_title">Select Collection</div>
 					<div class="productImg_content_item_imgBox generalScroll" v-mousewheel>
 						<div class="content_item_imgBox_itemImg" v-for="item in likeDesignCollectionList" :key="item.id" >
-							<img v-lazy="item.designOutfitUrl" alt="">
+							<img @click="setGenerate(item)" v-lazy="item.designOutfitUrl" alt="" :class="{active:item.isChecked}">
 						</div>
 					</div>
-					<div class="productImg_content_item_title">Up Load</div>
+					<div class="productImg_content_item_title">Upload</div>
 					<div class="productImg_content_item_imgBox generalScroll upload_item" v-mousewheel>
                         <div class="upload_file_item" v-for="(file, index) in fileList" :key="file">
                             <div class="upload_file_item_content" v-show="file?.status === 'uploading'" >
@@ -41,17 +41,18 @@
                             <div
                                 class="upload_file_item_content content_item_imgBox_itemImg"
                                 v-show="file?.status === 'done'"
+
                             >
-                                <img :src="file?.imgUrl" class="upload_img" />
-								<div class="content_item_imgBox_itemImg_delete" @click="deleteFile(index)">
+                                <img @click="setGenerate(file)" :src="file?.imgUrl" class="upload_img" :class="{active:file?.isChecked}"/>
+								<!-- <div class="content_item_imgBox_itemImg_delete" @click="deleteFile(index)">
 									<i class="fi fi-rr-trash"></i>
-								</div>
+								</div> -->
                             </div>
                         </div>
                         <div class="upload_file_item upload_component ">
 						<!-- :action="uploadUrl + '/api/history/toProductImageElementUpload'" -->
                             <a-upload
-                                :action="uploadUrl + '/api/element/upload'"
+                                :action="uploadUrl + '/api/history/toProductImageElementUpload'"
                                 list-type="picture-card"
 								:capture="null"
                                 :data="{
@@ -76,29 +77,62 @@
                         </div>
                     </div>
 					<div class="productImg_content_item_title">Magic Tools</div>
-
-
+					<div class="input_border productImg_content_item_generate">
+						<div class="input_box">
+							<div class="input_box_btnBox">
+								<input
+									class="search_input"
+									:placeholder="$t('Generate.inputContent1')"
+									v-model="searchName"
+									@keydown.enter="getPrductimg()"
+								/>
+								<i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="()=>isTextarea = !isTextarea"></i>
+								<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="()=>isTextarea = !isTextarea"></i>
+							</div>
+							<textarea 
+								v-show="isTextarea"
+								class="search_textarea "  
+								@keydown.enter="getPrductimg()"
+								v-model="searchName"
+							></textarea>
+							<div v-show="!isProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
+								{{ $t('Generate.Generate') }}
+							</div>
+							<div v-show="isProductimg && !remProductimg" class="generage_btn started_btn" @click="getPrductimg">
+								<i class="fi fi-br-loading"></i>
+							</div>
+							<div v-show="remProductimg" @click="removeProductimg" class="generage_btn started_btn">
+								{{$t('Generate.Close')}}
+							</div>
+						</div>
+					</div>
 				</div>
 				<div class="productImg_right">
 					<div class="productImg_content_item_title">Selected Product</div>
 					<div class="productImg_right_item_box generalScroll" v-mousewheel>
 						<div class="productImg_right_item" v-for="item,index in generateList" :key="item">
-							<img v-lazy="item.url" alt="">
+							<img :src="item.url" alt="">
 							<div class="productImg_right_item_like">
 								<i class="fi fi-rr-heart" @click.stop="likeFile(item,'like',index)"></i>
 							</div>
+							<div class="productImg_right_item_scale">
+								<i class="fi fi-bs-expand-arrows-alt" @click.stop="setScaleImage(generateList,index)"></i>
+							</div>
 						</div>
 					</div>
 					<div class="productImg_content_item_title productImg_right_titleBtn">
 						Selected Product
-						<div class="button_second">Export</div>
+						<div class="button_second" @click="setExport">Export</div>
 					</div>
 					<div class="productImg_right_item_box generalScroll" v-mousewheel>
 						<div class="productImg_right_item" v-for="item,index in likeList" :key="item">
-							<img v-lazy="item.url" alt="">
+							<img :src="item.url" alt="">
 							<div class="productImg_right_item_like">
 								<i class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike',index)"></i>
 							</div>
+							<div class="productImg_right_item_scale">
+								<i class="fi fi-bs-expand-arrows-alt" @click.stop="setScaleImage(likeList,index)"></i>
+							</div>
 						</div>
 					</div>
 				</div>
@@ -108,6 +142,7 @@
 			<a-spin size="large" />
 		</div>
 		<ExportModel ref="ExportModel" @setTask="setTask"></ExportModel>
+		<scaleImage ref="scaleImage"></scaleImage>
 	</a-modal>
 </template>
 
@@ -125,74 +160,59 @@ import { downloadIamge } from "@/tool/util";
 import { useI18n } from "vue-i18n";
 import ExportModel from "@/component/HomePage/ExportModel.vue";
 import { useStore } from "vuex";
+import scaleImage from "@/component/HomePage/scaleImage.vue";
+
 export default defineComponent({
 	components:{
 		ExportModel,
+		scaleImage,
 	},
     setup(props,{emit}) {
 		const store = useStore();
 		const {t} = useI18n()
+		const upload:any = ref({})
         let productImg: any = ref(false);//弹窗
 		let productImgMask:any = ref(false)//弹窗遮罩
 		let productImgData:any = reactive({
 			isShowMark:false,
+			beenPublished:0,
 			fileList:[],
+			searchName:'',
+			isTextarea:false,//是否展开
+			remProductimg:false,//是否出现取消按钮
+			isProductimg:false,//开始生成
+			selectProductimgList:[],
 			generateList:[
-				{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:2,
-				}
+				
 			],
 			likeList:[
-				{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},
+				
 			],
 		})
+		let ExportModel = ref()
 		let likeDesignCollectionList: any = computed(() => {
 			return store.state.HomeStoreModule.likeDesignCollectionList;
 		});
-		let init = ()=>{
+		let userlikeGroupId = 0
+		let init = (userGroupId:any,beenPublished:any)=>{
 			productImg.value = true
-			console.log(likeDesignCollectionList);
-			
+			productImgData.beenPublished = beenPublished
+			upload.value = {
+				userlikeGroupId:userGroupId
+			}
+			userlikeGroupId = userGroupId
+			getLikeProductImage(userGroupId)
+		}
+		let getLikeProductImage = (userGroupId:any)=>{
+			let data = {
+				userLikeGroupId:userGroupId
+			}
+			Https.axiosPost(Https.httpUrls.productImageLikeList, data).then(
+				(rv) => {
+					productImgData.likeList.push(...rv)
+				}
+			).catch(res=>{
+			});
 		}
 		let cancelDsign = ()=>{
 			Modal.confirm({
@@ -219,11 +239,9 @@ export default defineComponent({
                 let res = JSON.parse(file.xhr.response);
 				if(res.errCode == 0){
 					file.imgUrl = res.data.url;
-					// file.type_ = {
-					// 	type1:'upload',
-					// 	type2:'Moodboard'
-					// };
 					file.id = res.data.id
+					file.isChecked = true
+					file.type = 'ProductElement'
 					productImgData.fileList.filter((v: any) => v.status === "done");
 				}else{
 					bor = false
@@ -242,7 +260,7 @@ export default defineComponent({
             if (!isJpgOrPng) {
                 message.info(useI18n().t('MoodboardUpload.jsContent3'));
             }
-            const isLt2M = file.size / 1024 / 1024 < 2;
+            const isLt2M = file.size / 1024 / 1024 < 5;
             if (!isLt2M) {
                 message.info(useI18n().t('MoodboardUpload.jsContent4'));
             }
@@ -251,35 +269,191 @@ export default defineComponent({
 		let deleteFile = (index:any)=>{
 			productImgData.fileList.splice(index,1)
 		}
+		let setGenerate = (item:any)=>{
+			item.isChecked = !item.isChecked
+			// productImgData.selectProductimgList
+		}
 		let likeFile = (item:any,str:any,index:any) =>{
-			if(str == 'like'){
-			    productImgData.likeList.push(item)
-			    productImgData.generateList.splice(index,1)
-				
-			}else{
-			    productImgData.generateList.push(item)
-			    productImgData.likeList.splice(index,1)
+			let url
+			let data = {
+				toProductImageResultId:[item.id]
 			}
+			if(str == 'like'){
+				url = Https.httpUrls.productImageLike
+			}else{
+				url = Https.httpUrls.productImageUnLike
+			}
+			Https.axiosPost(url, data).then(
+				(rv) => {
+					if(str == 'like'){
+						productImgData.likeList.push(item)
+						productImgData.generateList.splice(index,1)
+					}else{
+						productImgData.generateList.push(item)
+						productImgData.likeList.splice(index,1)
+					}
+					
+				}
+			).catch(res=>{
+			});
 		}
 		let setExport = ()=>{
-		    // let exportModel:any = this.$refs.ExportModel
-			// exportModel.init()
+			let data = {
+				key:'likePorductImg',
+				imgList:productImgData.likeList,
+				userlikeGroupId,
+				beenPublished:productImgData.beenPublished
+			}
+		    let exportModel:any = ExportModel.value
+			exportModel.init(data)
 		}
+		let remPrductimgTime:any = null
+		let prductimgTime:any = null
+		let getPrductimg = ()=>{
+			if(productImgData.isProductimg) return
+			clearInterval(remPrductimgTime)
+			let selectArr:any = []
+			let obj = {
+				"createTime": "",
+				"elementId": 0,
+				"elementType": "",
+				"id": 0,
+				"isLike": 0,
+				"taskId": "",
+				"toProductImageRecordId": 0,
+				"url": ""
+			}
+			productImgData.fileList.forEach((item:any)=>{
+				if(item.isChecked){
+					obj.elementId = item.id
+					obj.elementType = item.type
+					selectArr.push(JSON.parse(JSON.stringify(obj)))
+				}
+			})
+			likeDesignCollectionList.value.forEach((item:any)=>{
+				if(item.isChecked){
+					obj.elementId = item.designOutfitId
+					obj.elementType = 'DesignOutfit'
+					selectArr.push(JSON.parse(JSON.stringify(obj)))
+				}
+			})
+			if(selectArr.length == 0) {
+				message.info('Please select at least one picture')
+				return
+			}
+			let data:any ={
+				prompt:productImgData.searchName,
+				toProductImageVOList:selectArr,
+				userLikeGroupId:upload.value.userlikeGroupId,
+			}
+			productImgData.isProductimg = true
+			remPrductimgTime = setTimeout(()=>{
+				productImgData.remProductimg = true
+			},10000)
+			Https.axiosPost(Https.httpUrls.toProduct, data).then(
+                (rv) => {
+					let arr:any = []
+					rv.forEach((item:any)=>{
+					  arr.push(item.taskId)  
+					})
+					setPrductimg(arr)
+                }
+            ).catch(res=>{
+				productImgData.isProductimg = false
+				clearInterval(remPrductimgTime)
+				productImgData.remProductimg= false
+            });
+		}
+		let generateProceedList:any = []
+		let setPrductimg = (dataList:any)=>{
+			
+			let data = dataList
+			let dataNum = dataList.length
+			let state = true
+			prductimgTime = setInterval(()=>{
+				if(!state)return
+				state = false
+				Https.axiosPost(Https.httpUrls.toProductImageResult, data).then(
+					(rv) => {
+						state = true
+						if(productImgData.isProductimg){//防止取消后有正在执行的获取状态
+							// generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
+							rv.forEach((element:any) => {
+								if(element.status == 'Success'){
+									element.imgUrl = element.url
+									productImgData.generateList.unshift(element)
+								}
+								data = data.filter((item:any) => item !== element.taskId);
+							});
+							generateProceedList = data
+							if((data.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==data.length)){
+								// if(rv.filter((item:any)=>item.status == 'Invalid').length ==dataNum){
+								// }
+								clearInterval(prductimgTime)
+								clearInterval(remPrductimgTime)
+								productImgData.remProductimg = false
+								productImgData.isProductimg = false
+							}
+						}
+					}
+				).catch(res=>{
+					clearInterval(prductimgTime)
+					clearInterval(remPrductimgTime)
+					productImgData.isProductimg = false
+					productImgData.remProductimg= false
+				});
+			},1000)
+		}
+		let removeProductimg = ()=>{
+			productImgData.isProductimg = false
+			productImgData.remProductimg= false
+			clearInterval(prductimgTime)
+			let userInfo:any = getCookie("userInfo")
+			if(generateProceedList){
+				// let str = generateProceedList.map((obj:any) => obj.taskId).join(',');
+				let str = generateProceedList.join(',')
+				console.log(str,generateProceedList);
+				let data = {uniqueId:str,userId:JSON.parse(userInfo).userId,timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone}
+				Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
+					(rv) => {
+						generateProceedList = []
+					}
+				).catch(res=>{
+				});
+			}
+		}
+		let scaleImage = ref()
+		let setScaleImage = (arr:any,index:any)=>{
+			arr.forEach((item:any)=>{
+			  item.imgUrl = item.url  
+			})
+			scaleImage.value.init(arr,index)
+			scaleImage.value.isLike = false
+		}
+		//超分
 		let setTask = (data:any)=>{
 			emit('setTask',data)
 		}
+		
         return {
+			upload,
             productImg,
 			productImgMask,
 			...toRefs(productImgData),
 			likeDesignCollectionList,
+			ExportModel,
 			init,
 			cancelDsign,
 			fileUploadChange,
 			beforeUpload,
 			deleteFile,
+			setGenerate,
 			likeFile,
 			setExport,
+			getPrductimg,
+			removeProductimg,
+			scaleImage,
+			setScaleImage,
 			setTask,
         };
     },
@@ -309,12 +483,7 @@ export default defineComponent({
             // moodTemplateId: "", //模板id
 			token: "",
             uploadUrl: "",
-			upload: {
-                isPin: 0,
-				gender:'',
-                level1Type: "Moodboard",
-                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-            },
+			
         };
     },
     mounted() {
@@ -370,13 +539,7 @@ export default defineComponent({
 		.upload_item{
 
 		}
-		.upload_file_item{
-			display: flex;
-			margin-right: 1rem;
-			&.upload_file_item:last-child{
-				margin-right: 0rem;
-			}
-		}
+		
 		.productImg_content_item_title{
 			font-weight: 600;
 			font-size: 1.8rem;
@@ -398,7 +561,12 @@ export default defineComponent({
 				height: 12rem;
 				img{
 					width: 100%;
+					cursor: pointer;
 					object-fit: contain;
+					&.active{
+						opacity: .5;
+						transform: scale(.9);
+					}
 				}
 				&.content_item_imgBox_itemImg:hover{
 					.content_item_imgBox_itemImg_delete{
@@ -435,6 +603,16 @@ export default defineComponent({
 		}
 		.productImg_left{
 			width: 25%;
+			.upload_file_item{
+				display: flex;
+				margin-right: 1rem;
+				width: auto;
+				border: none;
+				margin-bottom: 0;
+				&.upload_file_item:last-child{
+					margin-right: 0rem;
+				}
+			}
 			// width: 45%;
 			.productImg_content_item_imgBox{
 				.content_item_imgBox_itemImg{
@@ -442,6 +620,9 @@ export default defineComponent({
 					flex-shrink: 0;
 				}
 			}
+			.productImg_content_item_generate{
+				--width:60%;
+			}
 		}
 		.productImg_right{
 			width: 75%;
@@ -465,7 +646,7 @@ export default defineComponent({
 						height: 100%;
 					}
 					
-					.productImg_right_item_like{
+					.productImg_right_item_like,.productImg_right_item_scale{
 						display: none;
 						position: absolute;
 						top: 1rem;
@@ -475,9 +656,12 @@ export default defineComponent({
 							color: red;
 						}
 					}
+					.productImg_right_item_scale{
+						top: 4rem;
+					}
 				}
 				.productImg_right_item:hover{
-					.productImg_right_item_like{
+					.productImg_right_item_like,.productImg_right_item_scale{
 						display: block;
 					}	
 				}

src/component/HomePage/scaleImage.vue

@@ -21,7 +21,7 @@
 		</div>
 		<div class="scaleImage_content">
 			<img :src="scaleImageList[scaleImageIndex]?.imgUrl">
-			<div class="img_operate_block">
+			<div class="img_operate_block" v-if="isLike">
 				<i v-if="!scaleImageList[scaleImageIndex]?.like" class="fi fi-rr-heart operate_icon" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'like')"></i>
 				<i v-else class="fi fi-sr-heart operate_icon" :adminLike="!!scaleImageList[scaleImageIndex]?.like" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'noLike')"></i>
 			</div>
@@ -76,7 +76,7 @@ export default defineComponent({
 		])
 		let scaleImageMask:any = ref(false)
 		let scaleImageIndex:any = ref(0)
-
+		let isLike:any = ref(true)
 		let robotAssits:any = ref(0)
         return {
             scaleImage,
@@ -86,7 +86,7 @@ export default defineComponent({
 			scaleImageList,
 			scaleImageMask,
 			scaleImageIndex,
-
+			isLike,
 			robotAssits,
         };
     },

src/component/HomePage/sketchCategory.vue

@@ -8,6 +8,7 @@
 			>
 				{{ item.categoryValue }}
 				<div
+					v-show="!isSpread"
 					:class="[
 						'icon',
 						'iconfont',
@@ -22,6 +23,7 @@
 				class="category_list"
 				:class="driverClass.class2"
 				v-show="item.categoryShow"
+				v-if="!isSpread"
 			>
 				<div
 					:class="[
@@ -49,14 +51,16 @@
 </template>
 
 <script lang="ts">
-import { defineComponent,ref ,nextTick} from "vue";  
+import { defineComponent,ref ,nextTick, computed,watch} from "vue";  
 import { Https } from "@/tool/https";
 import { openGuide,driverObj__ } from "@/tool/guide";
 export default defineComponent({
     name:'filterComponent',
+	emits:['upTypeSucced'],
     props:{
         disignTypeList:{
-            type:Object
+            type:Object,
+			default:{}
         },
         item:{
             type:Object
@@ -68,6 +72,10 @@ export default defineComponent({
 			type:Boolean,
 			default:false,
 		},
+		isSpread:{
+			type:Boolean,
+			default:false,
+		},
 		driver__:{
 			type:Boolean,
 			default:false,
@@ -77,8 +85,10 @@ export default defineComponent({
 			default:{class1:'',class2:''},
 		}
     },
-    setup(props:any){
+    setup(props:any,{emit}){
+		let data = ''
 		let showFileCategory = (file:any)=> {
+			if(props.isSpread)return
             file.categoryShow = true;
 			nextTick().then(()=>{
 				if(props.driver__){
@@ -110,12 +120,14 @@ export default defineComponent({
 			
         }
 		let setSketchLibrary = (item:any)=>{
+			
 			let data = {
 				libraryId:[item.id],
 				level2Type:item.category,
 			}
 			Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
                 (rv: any) => {
+					emit('upTypeSucced')
                 }
             ).catch((res)=>{
             });

src/component/LibraryPage/ModelPlacementMobile.vue

@@ -250,8 +250,6 @@ export default defineComponent({
 			
             setTimeout(()=>{
 				nextTick().then(()=>{
-					let image:any = new Image()
-					image.src = this.option.img
 					let imgbox:any = this.$refs.imgbox
 					let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
 					let imgBoxSizeBG = imgbox.getElementsByClassName('cropper-view-box')[0]

src/component/WorksPage/Falls.vue

@@ -11,7 +11,7 @@
 			<!-- 图片 -->
 			<div class="falls_item_img">
 				<img
-					v-lazy="item.designPythonOutfitUrl"
+					v-lazy="item.canvasUrl"
 					@click="setItemDetail(item)"
 					:style="{
 						height: item.style.imgHeihgt + 'px',
@@ -26,30 +26,31 @@
 				</div>
 				<div class="falls_item_content">
 					<div class="falls_item_user">
-						<img src="http://121.40.53.210:3000/falls/5.png" alt="">
+						<!-- <img src="http://121.40.53.210:3000/falls/5.png" alt=""> -->
 						<div class="falls_item_user_detail">
-							<div>{{item.name}}</div>
+							<div>{{item.portfolioName}}</div>
 							<span>地区</span>
 						</div>
 					</div>
 					<div class="falls_item_detail">
-						<div>
+						<!-- <div>
 							<svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" :style="{color:'#9e9ea7',fill: 'currentColor'}">
 								<path d="M10.7408 2C13.0889 2 14.6667 4.235 14.6667 6.32C14.6667 10.5425 8.11856 14 8.00004 14C7.88152 14 1.33337 10.5425 1.33337 6.32C1.33337 4.235 2.91115 2 5.2593 2C6.60745 2 7.48893 2.6825 8.00004 3.2825C8.51115 2.6825 9.39263 2 10.7408 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
 							</svg>
 							<span>321</span>
-						</div>
-						<div>
+						</div> -->
+						<label @click="portfolioLike(item)">
 							<i v-if="true" class="fi fi-sr-thumbs-up" style="color:rgba(158, 158, 167);"></i>
 							<i v-else class="fi fi-rr-social-network"></i>
-							<span>321</span>
-						</div>
+							<span>{{item.likeNum}}</span>
+						</label>
 						<div>
-							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
+							<!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
 								<path d="M8 3C4.36992 3 1.98789 6.21774 1.18763 7.49059C1.09079 7.64462 1.04237 7.72163 1.01527 7.84042C0.99491 7.92964 0.99491 8.07036 1.01527 8.15958C1.04237 8.27837 1.09079 8.35539 1.18763 8.50941C1.98789 9.78226 4.36992 13 8 13C11.6301 13 14.0121 9.78226 14.8124 8.50941L14.8124 8.50939C14.9092 8.35538 14.9576 8.27837 14.9847 8.15958C15.0051 8.07036 15.0051 7.92964 14.9847 7.84042C14.9576 7.72163 14.9092 7.64462 14.8124 7.4906L14.8124 7.49059C14.0121 6.21774 11.6301 3 8 3Z" fill="currentColor"></path>
 								<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" fill="white"></path>
-							</svg>
-							<span>321</span>
+							</svg> -->
+							<i class="fi fi-sr-eye"></i>
+							<span>{{item.likeNum}}</span>
 						</div>
 					</div>
 				</div>
@@ -142,6 +143,17 @@ export default defineComponent({
 		},
 		// 挂载方法
 		methods: {
+			clearData(){
+				this.width = 300
+				this.num_x = 1
+				this.gap_x = 0
+				this.gap_y = 0
+				this.poss = []
+				this.loading = false
+				this.computedHeight = 0
+				this.list = []
+				this.resize()
+			},
 			push(arr) {
 				this.wait_list = this.wait_list.concat(arr);
 				if (!this.loading) {
@@ -156,7 +168,7 @@ export default defineComponent({
 					return;
 				}
 				
-				let url = this.wait_list[0].designPythonOutfitUrl;
+				let url = this.wait_list[0].canvasUrl;
 				let data = this.wait_list[0]
 				let img = document.createElement("img");
 				img.src = url;
@@ -181,7 +193,7 @@ export default defineComponent({
 					let imgHeight = height - this.computedHeight
 					this.poss[idx] = top + height;
 					let obj = {
-						designPythonOutfitUrl:url,
+						canvasUrl:url,
 						style: { width, height, top, left, imgHeight },
 						...data
 					};
@@ -234,6 +246,9 @@ export default defineComponent({
 			},
 			setItemDetail(data){
 				this.$emit('getImgScale',data)
+			},
+			portfolioLike(data){
+				this.$emit('setPortfolioLike',data)
 			}
 		},
 })
@@ -321,10 +336,21 @@ export default defineComponent({
 						display: flex;
 						width: 40%;
 						justify-content: space-between;
-						>div{
+						>label{
+							// cursor: pointer;
+						}
+						>label,>div{
+							display: flex;
+							align-items: center;
+							i{
+								font-size: 2rem;
+							}
 							svg,i{
-								width: 10px;
-								height: 10px;
+								color: #9e9ea7;
+								display: flex;
+								// width: 10px;
+								// height: 10px;
+								margin-right: .5rem;
 							}
 							span{
 								margin-left: 3px;

src/component/WorksPage/newScaleImage.vue

@@ -23,32 +23,37 @@
 			<div class="newScaleImage_left">
 				<div class="newScaleImage_content_right">
 					<div class="newScaleImage_content_right_img">
-						<img :src="scaleImageList[scaleImageIndex]?.designPythonOutfitUrl">
+						<div>
+							<img :src="scaleImageList[scaleImageIndex]">
+							<!-- <img :src="scaleImageData?.canvasUrl"> -->
+						</div>
 					</div>
-					<div class="nav_centent" v-mousewheel="{allLength:scaleImageList.length}" :style="{'margin-top':scaleImageMarginTop}">
-						<img class="nav_centent_img" v-for="item,index in scaleImageList" @click="setScaleImageIndex(index)" :class="{active2:index == scaleImageIndex, active3:index == scaleImageIndex+1, active1:index == scaleImageIndex-1}" :title="scaleImageIndex" :src="item?.designPythonOutfitUrl" :key="item.id">
+					<div class="nav_centent" v-mousewheel="{allLength:scaleImageData.length}" :style="{'margin-top':scaleImageMarginTop}">
+						<img class="nav_centent_img" v-for="item,index in scaleImageList" @click="setScaleImageIndex(index)" :class="{active2:index == scaleImageIndex, active3:index == scaleImageIndex+1, active1:index == scaleImageIndex-1}" :src="item" :key="item.id">
 					</div>
 				</div>
 			</div>
 			<div class="newScaleImage_right">
 				<div class="newScaleImage_right_content">
 					<div class="newScaleImage_right_content_type">
-						<div class="generate_item_title_left scaleImage_chunk_title">type：{{ scaleImageList[scaleImageIndex]?.portfolioType=='History'? 'collection' : 'generate' }}</div>
+						<div class="generate_item_title_left scaleImage_chunk_title">type：{{ scaleImageData?.portfolioType=='History'? 'collection' : 'generate' }}</div>
 					</div>
 					<div v-if="true" class="newScaleImage_right_content_collection">
-						<!-- <div class="scaleImage_chunk_item content_left_collection_detail">
-							<div class="scaleImage_chunk_title">设计模式:</div>
+						<div class="scaleImage_chunk_item content_left_collection_detail">
+							<!-- <div class="scaleImage_chunk_title">设计模式:</div>
 							<div class="scaleImage_chunk_title_intro">
 								Overall
-							</div>
-						</div> -->
+							</div> -->
+							<div class="scaleImage_chunk_title">{{scaleImageData.portfolioName}}</div>
+							<div class="scaleImage_chunk_title_intro">{{scaleImageData.portfolioDes}}</div>
+						</div>
 						<div class="scaleImage_chunk_item content_left_collection_content">
 							<div class="scaleImage_chunk_title">Finished Products</div>
 							<div class="content_left_collection_content_list">
 								<img v-for="item in scaleImageData?.designPythonOutfitList" v-lazy="item.designUrl">
 							</div>
 						</div>
-						<div class="started_btn" @click="setChoose">二创</div>
+						<div class="started_btn" @click="setChoose" :title="scaleImageData.openSource == 0?'发布者不允许二次创作~':''" :class="{active:scaleImageData.openSource == 0}">二创</div>
 					</div>
 					<div v-else class="newScaleImage_right_content_generate">
 						<div class="scaleImage_chunk_item content_left_generate_item">
@@ -74,7 +79,7 @@
 					<div class="scaleImage_chunk_item">
 						<div class="detail_right_user detail_left_right_item">
 							<div class="detail_right_user_head">
-								<img v-lazy="scaleImageList[scaleImageIndex]?.imgUrl">
+								<!-- <img v-lazy="scaleImageData?.imgUrl"> -->
 							</div>
 							<div class="detail_right_user_content">
 								<div class="scaleImage_chunk_title">名字</div>
@@ -83,41 +88,42 @@
 							</div>
 						</div>
 						<div class="detail_right_work_detail detail_left_right_item">
-							<div class="scaleImage_chunk_title">{{ scaleImageData.portfolioName }}</div>
-							<div class="scaleImage_chunk_title_intro">{{ scaleImageData.portfolioDes }}</div>
+							<!-- <div class="scaleImage_chunk_title">{{ scaleImageData?.portfolioName }}</div> -->
+							<!-- <div class="scaleImage_chunk_title_intro">{{ scaleImageData?.portfolioDes }}</div> -->
 						</div>
 						<div class="detail_right_date detail_left_right_item">
 							<div class="detail_right_date_setUp">
 								<div>创建时间</div>
-								<span>{{ scaleImageList[scaleImageIndex].createDate }}</span>
+								<span>{{ scaleImageData.createDate }}</span>
 							</div>
 							<div class="detail_right_date_upData">
 								<div>更新时间</div>
-								<span>{{ scaleImageList[scaleImageIndex].updateDate }}</span>
+								<span>{{ scaleImageData.updateDate }}</span>
 							</div>
 						</div>
 						<div class="detail_right_look_operation detail_left_right_item">
-							<div class="detail_left_right_item_click">
+							<!-- <div class="detail_left_right_item_click">
 								<svg :adminLike="!!true" xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" :style="{color:'#9e9ea7',fill: 'currentColor'}">
 									<path d="M10.7408 2C13.0889 2 14.6667 4.235 14.6667 6.32C14.6667 10.5425 8.11856 14 8.00004 14C7.88152 14 1.33337 10.5425 1.33337 6.32C1.33337 4.235 2.91115 2 5.2593 2C6.60745 2 7.48893 2.6825 8.00004 3.2825C8.51115 2.6825 9.39263 2 10.7408 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
 								</svg>
 								<span>321</span>
-							</div>
-							<div class="detail_left_right_item_click">
-								<i v-if="true" :adminLike="!!true" class="fi fi-sr-thumbs-up" style="color: rgba(158, 158, 167);"></i>
+							</div> -->
+							<div class="detail_left_right_item_click" @click="setPortfolioLike">
+								<i v-if="scaleImageData?.isLike == 1" :adminLike="!!true" class="fi fi-sr-thumbs-up" style="color: rgba(158, 158, 167);"></i>
 								<i v-else class="fi fi-rr-social-network"></i>
-								<span>321</span>
+								<span>{{scaleImageData.likeNum}}</span>
 							</div>
 							<div>
-								<svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
+								<!-- <svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
 									<path d="M8 3C4.36992 3 1.98789 6.21774 1.18763 7.49059C1.09079 7.64462 1.04237 7.72163 1.01527 7.84042C0.99491 7.92964 0.99491 8.07036 1.01527 8.15958C1.04237 8.27837 1.09079 8.35539 1.18763 8.50941C1.98789 9.78226 4.36992 13 8 13C11.6301 13 14.0121 9.78226 14.8124 8.50941L14.8124 8.50939C14.9092 8.35538 14.9576 8.27837 14.9847 8.15958C15.0051 8.07036 15.0051 7.92964 14.9847 7.84042C14.9576 7.72163 14.9092 7.64462 14.8124 7.4906L14.8124 7.49059C14.0121 6.21774 11.6301 3 8 3Z" fill="currentColor"></path>
 									<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" fill="white"></path>
-								</svg>
-								<span>321</span>
+								</svg> -->
+								<i class="fi fi-sr-eye"></i>
+								<span>{{scaleImageData.likeNum}}</span>
 							</div>
 							<div>
 								<i class="fi fi-rr-comment-alt-dots"></i>
-								<span>321</span>
+								<span>{{scaleImageData.likeNum}}</span>
 							</div>
 						</div>
 						<div class="detail_right_auther detail_left_right_item">
@@ -144,41 +150,50 @@
 				</div>
 				<div class="newScaleImage_right_comment scaleImage_chunk_item">
 					<div class="scaleImage_chunk_title">Comment</div>
-					<div v-if="false" class="newScaleImage_right_comment_null">
+					<div v-if="commentList.length === 0" class="newScaleImage_right_comment_null">
 						<div class="scaleImage_chunk_title">No Comments</div>
 						<div class="scaleImage_chunk_title">You can be the first!</div>
 					</div>
 					<div v-else class="newScaleImage_right_comment_content">
-						<div class="detail_left_content_item">
-							<div class="detail_left_content_item_img">
-								<img v-lazy="scaleImageList[scaleImageIndex]?.imgUrl">
-							</div>
+						<div class="detail_left_content_item" v-for="item in commentList" :key="item.id">
+							<!-- <div class="detail_left_content_item_img">
+								<img v-lazy="scaleImageData?.imgUrl">
+							</div> -->
 							<div class="detail_left_content_item_content">
-								<div class="scaleImage_chunk_title">名字</div>
-								<div class="scaleImage_chunk_title_intro">个性签名</div>
-								<div class="scaleImage_chunk_title_comment" :class="[true?'active':'']">这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论</div>
+								<div class="scaleImage_chunk_title_intro">{{ item?.userName }}</div>
+								<!-- <div class="scaleImage_chunk_title_intro">个性签名</div> -->
+								<div class="scaleImage_chunk_title" :class="[item.unfold?'':'active']">{{ item.comment }}</div>
+								<div class="scaleImage_chunk_title_intro" style="font-size: 1.2rem;" v>{{ item.createTimes }}</div>
 								<div class="detail_left_content_item_btn">
-									<div class="left_content_item_reply">回复</div>									
-									<div class="left_content_item_thumbs">
+									<div class="left_content_item_reply" @click.stop="setCommentReply(item,'parent')">
+										<i class="fi fi-rr-comment-alt-dots"></i>
+										回复
+									</div>									
+									<!-- <div class="left_content_item_thumbs">
 										<i class="fi fi-sr-thumbs-up" :adminSix="!!true" style="color: rgb(158, 158, 167);"></i>
 										<span>123</span>
-									</div>									
-									<div v-show="true" class="left_content_item_unfold">展开</div>
+									</div>									 -->
+									<div v-show="true" class="left_content_item_unfold" @click="()=>item.unfold = !item.unfold">展开</div>
 								</div>
-								<div class="detail_left_content_item_replyContent">
+								<div class="detail_left_content_item_replyContent" v-for="children in item.childCommentVOList" :key="children.id">
 									<div class="detail_left_content_item_img">
-										<img v-lazy="scaleImageList[scaleImageIndex]?.imgUrl">
+										<!-- <img v-lazy="scaleImageData?.imgUrl"> -->
 									</div>
 									<div class="detail_left_content_item_content">
-										<div class="scaleImage_chunk_title">名字</div>
-										<div class="scaleImage_chunk_title_intro">个性签名</div>
-										<div class="scaleImage_chunk_title_comment" :class="[true?'active':'']"><span class="scaleImage_chunk_title">@名字</span>这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论</div>
+										<div class="scaleImage_chunk_title">{{ children?.userName }}<span v-if="children?.replyTo" class="replyIcon"></span>{{ children?.replyTo }}</div>
+										<!-- <div class="scaleImage_chunk_title_intro">个性签名</div> -->
+										<div class="scaleImage_chunk_title" :class="[item.unfold?'':'active']">{{ children.comment }}</div>
+										<div class="scaleImage_chunk_title_intro" style="font-size: 1.2rem;" v>{{ children.createTimes }}</div>
+
 										<div class="detail_left_content_item_btn">
-											<div class="left_content_item_reply">回复</div>									
-											<div class="left_content_item_thumbs">
+											<div class="left_content_item_reply" @click.stop="setCommentReply(children,'son')">
+												<i class="fi fi-rr-comment-alt-dots"></i>
+												回复
+											</div>									
+											<!-- <div class="left_content_item_thumbs">
 												<i class="fi fi-sr-thumbs-up" :adminSix="!!true" style="color: rgb(158, 158, 167);"></i>
 												<span>123</span>
-											</div>									
+											</div>									 -->
 											<div v-show="false" class="left_content_item_unfold">展开</div>
 										</div>
 									</div>
@@ -186,9 +201,9 @@
 							</div>
 						</div>
 					</div>
-					<div class="newScaleImage_right_comment_setComment">
-						<input type="text" placeholder="回复Wxd的评论">
-						<div class="detail_left_setComment_btn">
+					<div class="newScaleImage_right_comment_setComment" @click.stop="">
+						<input type="text" ref="commentInputFocus" v-model="commentText" :placeholder="commentInput">
+						<div class="detail_left_setComment_btn" @click="setComment">
 							<i class="fi fi-ss-paper-plane-top"></i>
 						</div>
 					</div>
@@ -200,12 +215,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent,watch,getCurrentInstance, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
+import { defineComponent,watch,getCurrentInstance, h, ref ,toRefs,computed,reactive,triggerRef, nextTick, onMounted} from "vue";
 import { Https } from "@/tool/https";
 // import { getCookie } from "@/tool/cookie";
 // import domTurnImg from '@/tool/domTurnImg'
 import { useRouter } from 'vue-router'
-import { downloadIamge } from "@/tool/util";
+import { downloadIamge,setPubDate } from "@/tool/util";
 
 export default defineComponent({
     setup() {
@@ -217,10 +232,24 @@ export default defineComponent({
 			generateValue:'123123',
 			loadingShow:false,
 			scaleImageMarginTop:0,
+			commentReply:{
+				leve1Id:null,
+				leve2Id:null,
+				name:'',
+			},
 			scaleImageList:[],
 			scaleImageIndex:0,//当前图片索引
 			scaleImageData:{},//当前图片内容
+			getCommentData:{
+				portfolioId:0,
+				page:1,
+				size:10
+			},
+			commentText:'',
+			commentInput:'',//评论框提示词
+			commentList:[],
 		})
+		let commentInputFocus:any = ref()
 		let textarea: any = ref(null)
 		let setCopy = ()=>{
 			textarea.value.select()
@@ -228,18 +257,17 @@ export default defineComponent({
 		}
 		let init = (item:any)=>{
 			scaleImage.value = true
-			// imgData.scaleImageList = list
-			// imgData.scaleImageIndex = index
 			// let data = list[index]
-
-			getDetail(item.id)
-
+			getDetail(item,'')
+			document.addEventListener('click',removeCommentReply)
 			// let scaleImageList = this.store.state.UploadFilesModule.moodboard
 		}
 		let cancelDsign = ()=>{
 			scaleImage.value = false
 			imgData.scaleImageIndex = 0
 			imgData.scaleImageData = {}
+			imgData.commentText = ''
+			document.removeEventListener('click',removeCommentReply)
 		}
 		let download = ()=>{
 			downloadIamge(imgData.scaleImageList[imgData.scaleImageIndex].imgUrl)
@@ -257,25 +285,109 @@ export default defineComponent({
 		// 	let parent:any = this.$parent
 		// 	parent.likeFile(item,str)
 		// },
-		let getDetail = (value:any)=>{
+		let getDeatilData = {}
+		let getDetail = (value:any,str:string)=>{
+			imgData.loadingShow = true
 			let data = value
-		    // Https.axiosPost(Https.httpUrls.getPorfolioDetail,data).then(
-			// 	(rv: any) => {
-			// 			imgData.scaleImageData = rv
-			// 			console.log(imgData.scaleImageData);
-			// 		}
-			// 	).catch((res)=>{
-			// 	}
-			// )
+			getDeatilData = value
+		    Https.axiosPost(Https.httpUrls.getPorfolioDetail,data).then(
+				(rv: any) => {
+					imgData.loadingShow = false
+					imgData.scaleImageData = rv
+					let canvasUrl = [rv.canvasUrl]
+					var findUrl = rv.designPythonOutfitList.map((obj:any) => obj.designUrl);
+					imgData.scaleImageList = canvasUrl.concat(findUrl);
+					imgData.scaleImageIndex = 0
+					imgData.getCommentData.portfolioId = rv.id
+					if(str == 'zan'){
+
+					}else{
+						getCommentPage()
+					}
+				}).catch((res)=>{
+					imgData.loadingShow = false
+				}
+			)
 		}
+		
 		let setChoose = () =>{
-        	router.push({name:'homePage',params: {id:imgData.scaleImageList[imgData.scaleImageIndex].userLikeGroupSourceId,type:'Works'}})
+			if(imgData.scaleImageData.openSource == 0)return
+        	router.push({name:'homePage',params: {id:imgData.scaleImageData.userLikeGroupSourceId,type:'Works'}})
+		}
+		let setCommentReply = (value:any,str:any)=>{
+				imgData.commentReply.leve1Id = value.id
+				imgData.commentReply.leve2Id = null
+			if(str == 'son'){
+				imgData.commentReply.leve1Id = value.parentLevel1Id
+				imgData.commentReply.leve2Id = value.id
+			}
+			imgData.commentReply.name = value.userName
+			imgData.commentInput = `回复${imgData.commentReply.name}的评论`
+			commentInputFocus.value.focus()
+		}
+		let removeCommentReply = ()=>{
+			imgData.commentReply.leve1Id = null
+			imgData.commentReply.leve2Id = null
+			imgData.commentReply.name = ''
+			imgData.commentInput = '请输入评论内容'
+		}
+		let setComment = ()=>{
+			let data = {
+				"accountId": 0,
+				"comment": imgData.commentText,
+				"createTime": "",
+				"id": '',
+				"isDeleted": 0,
+				"parentLevel1Id": imgData.commentReply.leve1Id,
+				"parentLevel2Id": imgData.commentReply.leve2Id,
+				"portfolioId": imgData.scaleImageData.id,
+			}
+			Https.axiosPost(Https.httpUrls.portfolioComment, data)
+			.then((rv) => {
+				imgData.commentText = ''
+				getCommentPage()
+			})
+			.catch((rv) => {
+			});
+		}
+		let getCommentPage = ()=>{
+			let data = imgData.getCommentData
+			Https.axiosPost(Https.httpUrls.portfolioCommentPage,data).then(
+				(rv: any) => {
+					imgData.commentList = rv.content
+					imgData.commentList.forEach((item:any)=>{
+						item.createTimes = setPubDate(item.createTime)
+						if (item.childCommentVOList) {
+							item.childCommentVOList.forEach((obj:any)=>{
+								obj.createTimes = setPubDate(obj.createTime)
+							})
+						}
+					})
+				}
+				).catch((res)=>{
+				}
+			)
+		}
+		let setPortfolioLike = ()=>{
+			
+			let data = {id:imgData.scaleImageData.id}
+			let url 
+			if(imgData.scaleImageData.isLike == 1){
+				url = Https.httpUrls.portfolioNoLike
+			}else{
+				url = Https.httpUrls.portfolioLike
+			}
+			Https.axiosGet(url, {params:data})
+			.then((rv) => {
+				getDetail(getDeatilData,'zan')
+			})
+			.catch((rv) => {
+			});
 		}
 		watch(()=>imgData.scaleImageIndex,
 			(newVal,oldVal)=>{
 				let dom:any = document.querySelector('.newScaleImage_left .nav_centent')
 				if(!dom) return
-				getDetail(imgData.scaleImageList[newVal])
 				let contentItemHeight = Number(getComputedStyle(dom).getPropertyValue('--snap-size').split('rem')[0]);
 				imgData.scaleImageMarginTop = `${contentItemHeight*-(newVal) - contentItemHeight/2}rem`
 			}
@@ -284,6 +396,7 @@ export default defineComponent({
             scaleImage,
 			scaleImageMask,
 			...toRefs(imgData),
+			commentInputFocus,
 			textarea,
 			setCopy,
 			init,
@@ -292,6 +405,9 @@ export default defineComponent({
 			setScaleImageIndex,
 			LikeFile,
 			setChoose,
+			setCommentReply,
+			setComment,
+			setPortfolioLike,
         };
     },
 	directives:{
@@ -329,6 +445,7 @@ export default defineComponent({
 				
 			}
 		},
+
 	},
     data() {
         return {
@@ -339,26 +456,6 @@ export default defineComponent({
     mounted() {
     },
     methods: {
-		// init(list:any,index:any,dialogueIndex:any){
-			
-		// },
-		// cancelDsign(){
-		// 	this.scaleImage = false
-		// 	// this.scaleImageList = []
-		// 	// this.scaleImageIndex = 0
-		// },
-		// download(){
-		// 	// downloadIamge(this.scaleImageList[this.scaleImageIndex].imgUrl)
-		// },
-		// setScaleImageIndex(index:any){
-		// 	// this.scaleImageIndex = index
-		// 	// console.log(this.scaleImageIndex);
-			
-		// },
-		// LikeFile(item:any,str:string){
-		// 	let parent:any = this.$parent
-		// 	parent.likeFile(item,str)
-		// },
     },
 });
 </script>
@@ -427,39 +524,54 @@ export default defineComponent({
 			width: 100%;
 			flex-wrap: wrap;
 			justify-content: space-between;
-			height: var(--content-height);
+			// height: var(--content-height);
+			height: 100%;
 			position: relative;
 			overflow: hidden;
+			overflow-y: auto;
+
 			.newScaleImage_content_right_img{
 				height: 100%;
-				width: auto;
-				width: 60%;
-				overflow-x: auto;
+				width: 70%;
+				margin-left: auto;
+				// width: 100%;
 				display: flex;
-				justify-content: center;
-				img{
-					width: auto;
-					max-width: 100%;
-					height: 100%;
-					object-fit: contain;
-					margin-right: 2rem;
-				}
-				img:last-child{
-				    margin-right: 0;
+				// justify-content: center;
+				justify-content: right;
+				overflow-y: auto;
+				&.newScaleImage_content_right_img::-webkit-scrollbar{display: none;}
+				>div{
+					width: 100%;
+					height: auto;
+					img{
+						// width: auto;
+						max-width: 100%;
+						height: 100%;
+						// height: 100%;
+						object-fit: contain;
+						width: 100%;
+						margin-right: 2rem;
+					}
+					img:last-child{
+						margin-right: 0;
+					}
 				}
+				
 			}
 			--count: 50;
 			--snap-size: 10rem;
 			--offset: 2;
 			.nav_centent{
-				width: auto;
+				// width: auto;
 				display: flex;
 				flex-direction: column;
 				position: absolute;
 				right: 0;
 				padding-top: calc(var(--content-height) / 2);
-				padding-left: 10rem;
+				// padding-left: 10rem;
 				transition: all .2s;
+				left: 0;
+				width: 30%;
 			}
 			.nav_centent_img{
 				max-width: calc(var(--snap-size) - 2rem);
@@ -481,17 +593,17 @@ export default defineComponent({
 				transition: all .1s;
 				&.active1{
 					// border: 4px solid rgb(148, 230, 255);
-					transform: scale(1.4) translateX(-30%);
+					transform: scale(1.4) translateX(30%);
 					z-index: 2;
 				}
 				&.active2{
 					// border: 4px solid rgb(216, 255, 172);
-					transform: scale(1.6) translateX(-60%);
+					transform: scale(1.6) translateX(60%);
 					z-index: 3;
 				}
 				&.active3{
 					// border: 4px solid rgb(148, 233, 183);
-					transform: scale(1.4) translateX(-30%);
+					transform: scale(1.4) translateX(30%);
 					z-index: 2;
 				}
 			}
@@ -527,12 +639,16 @@ export default defineComponent({
 				// }
 				.started_btn{
 					margin-bottom: var(--margin);
+					&.active{
+						cursor: no-drop;
+					}
 				}
 				.content_left_collection_detail{
 					height: calc(8rem + var(--padding) * 2);
 					display: flex;
-					align-items: center;
-					justify-content: flex-start;
+					flex-direction: column;
+					align-items: flex-start;
+					justify-content: center;
 					.scaleImage_chunk_title{
 						margin-right: 1rem;
 					}
@@ -611,6 +727,9 @@ export default defineComponent({
 			}
 			.detail_left_right_item_click{
 				cursor: pointer;
+				i{
+					color: #9e9ea7;
+				}
 			}
 			.detail_left_right_item:last-child{
 				margin-bottom: 0;
@@ -654,6 +773,16 @@ export default defineComponent({
 						flex: 1;
 						margin-left: 1rem;
 						width: calc(100% - 6rem - 1rem);
+						.replyIcon{
+							width: 0;
+							height: 0;
+							vertical-align: middle;
+							border: .5rem solid transparent;
+							border-left: 1rem solid #000;
+							border-right: none;
+							display: inline-block;
+							margin: 0 1rem;
+						}
 						>div{
 							margin-top: .4rem;
 							>span{
@@ -666,6 +795,7 @@ export default defineComponent({
 						.detail_left_content_item_btn{
 							display: flex;
 							align-items: center;
+							margin-top: 1rem;
 							.left_content_item_reply,.left_content_item_thumbs,.left_content_item_unfold{
 								cursor: pointer;
 							}
@@ -711,6 +841,7 @@ export default defineComponent({
 					border: .2rem solid var(--border-color);
 				}
 				.detail_left_setComment_btn{
+					cursor: pointer;
 					width: 4rem;
 					height: 4rem;
 					background: rgba(57, 33, 91);

src/component/WorksPage/publish.vue

@@ -29,35 +29,51 @@
 							<img v-lazy="selectDate.url" alt="">
 						</div>
 					</div>
-					<div class="publidh_left_thubnai publidh_content_item">
-						<div class="publidh_content_item_title">Select Cover Picture</div>
-						<div class="publidh_left_thubnail_list publish_content_item">
-							<img v-for="item in getPublishDate.groupDetails" :class="{selectActive:item.designOutfitId === subPublishDate.coverId}" v-lazy="item.url" @click="setCover(item)" alt="">
-						</div>
-					</div>
 				</div>
 				<div class="publidh_right">
 					<div class="publidh_right_name publidh_content_item">
-						<div class="publidh_content_item_title">Name</div>
+						<div class="publidh_content_item_title">Collection Title</div>
 						<input type="text" v-model="subPublishDate.portfolioName">
 					</div>
 					<div class="publidh_right_name publidh_content_item">
 						<div class="publidh_content_item_title">Description</div>
 						<textarea ref="textarea" v-model="subPublishDate.portfolioDes"></textarea>
 					</div>
+					<div class="publidh_right_detail publidh_content_item">
+						<div class="publidh_content_item_title">Permissions</div>
+						<!-- <div>
+							<a-checkbox @change="setPermissions" v-model:checked="setPermissionsAll">All.</a-checkbox>
+						</div> -->
+						<!-- <div>
+							<a-checkbox @change="setPermissionsItem()" v-model:checked="selectPermissions.isAllowLikes">Whether to allow likes.</a-checkbox>
+						</div> -->
+						<!-- <div>
+							<a-checkbox @change="setPermissionsItem()" v-model:checked="selectPermissions.isAllowComment">Allow comments or not.</a-checkbox>
+						</div>
+						<div>
+							<a-checkbox @change="setPermissionsItem()" v-model:checked="selectPermissions.isDisplayArea">Show locale or not.</a-checkbox>
+						</div> -->
+						<div>
+							<a-checkbox @change="setPermissionsItem()" v-model:checked="selectPermissions.isSecondaryCreation">Whether to allow other users to perform secondary creation.</a-checkbox>
+						</div>
+					</div>
 					<!-- <div class="publidh_right_name publidh_content_item">
 						<div class="publidh_content_item_title">Thumbnail preview</div>
 						<input type="text">
 					</div> -->
 					<div class="publidh_content_item publidh_right_zhuyi">
-						<div class="publidh_content_item_intro">
-							<span class="icon iconfont icon-zhuyi"></span>This will publish your work to the square for all users to see.
-						</div>
+						<!-- <div class="publidh_content_item_intro">
+							<label >
+								<span class="icon iconfont icon-zhuyi"></span>
+								<div>
+									This will publish your work to the square for all users to see.
+								</div>
+							</label>
+						</div> -->
 					</div>
 					<div class="publidh_right_btn">
-						<div class="started_btn" @click="setClose">Close</div>
-						<div class="started_btn">Save as draft</div>
-						<div class="started_btn" @click="setPublish">Publish</div>
+						<div class="started_btn" @click="cancelDsign">Close</div>
+						<div class="started_btn" @click="setPublish">{{beenPublished == 0?'Publish':'Updata Publish'}}</div>
 					</div>
 				</div>
 			</div>
@@ -76,26 +92,31 @@ import { getCookie,setCookie } from "@/tool/cookie";
 // import domTurnImg from '@/tool/domTurnImg'
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { Modal,message } from 'ant-design-vue';
-import { downloadIamge } from "@/tool/util";
+import { downloadIamge,base64ToFile } from "@/tool/util";
 
 export default defineComponent({
     setup() {
         let publish: any = ref(false);//弹窗
 		let publishMask:any = ref(false)//弹窗遮罩
 		let publishData:any = reactive({
-			publishName:'123123',
+			publishName:'',
 			loadingShow:false,
 			publishMarginTop:0,
+			beenPublished:0,//history回来时候表示是否已经发布0为没发布
 			publishList:[],
 			publishIndex:0,//当前图片索引
 			isShowMark:false,
+			setPermissionsAll:true,
 			selectDate:{
 				url:'',
 			},
-			getPublishDate:{
-			},
 			subPublishDate:{
 			},
+			selectPermissions:{
+				isAllowComment:true,
+				isDisplayArea:true,
+				isSecondaryCreation:true,
+			}
 		})
 		// let textarea: any = ref(null)
 		// let setCopy = ()=>{
@@ -103,56 +124,51 @@ export default defineComponent({
 		// 	document.execCommand("copy");
 		// }
 		let init = (data:any)=>{
+			publishData.beenPublished = data.beenPublished
 			let userInfo:any = getCookie("userInfo")
-			console.log(data);
-			publishData.getPublishDate = data
+			// console.log(data);
 			publish.value = true
-			publishData.selectDate.url = data.groupDetails[0].url
+			publishData.selectDate.url = data.imgUrl
 			publishData.subPublishDate = {
-				userLikeGroupId : data.id,
-				coverId : data.groupDetails[0].designOutfitId,
+				userLikeGroupId : data.userlikeGroupId,
+				// userLikeGroupId : data.id,
+				coverId : '',
+				// coverId : data.groupDetails[0].designOutfitId,
 				accountId : JSON.parse(userInfo).userId,
 				createDate:'',
 				idDeleted:'',
 				id:'',
 				portfolioDes:'',
-				portfolioName:data.name,
+				portfolioName:'',
 				portfolioType:'History',
 				status:'',
 				updateDate:'',
 				collectionId:'',
+				// isAllowLikes:true,
 			}
-			// publishData.publishList = list
-			// publishData.publishIndex = index
-			// let publishList = this.store.state.UploadFilesModule.moodboard
 		}
-		// let download = ()=>{
-		// 	downloadIamge(publishData.publishList[publishData.publishIndex].imgUrl)
-		// }
-		// let setScaleImageIndex = (index:any)=>{
-		// 	publishData.publishIndex = index
-		// }
-		// let LikeFile = (item:any,str:string)=>{
-		// 	const currentInstance = getCurrentInstance();
-		// 	let parent:any = currentInstance?.parent
-		// 	console.log(parent);
-			
-		// 	parent.likeFile(item,str)
-		// }
-	
-		// LikeFile(item:any,str:string){
-		// 	let parent:any = this.$parent
-		// 	parent.likeFile(item,str)
-		// },
 		let setCover = (item:any)=>{
 		    publishData.subPublishDate.coverId = item.designOutfitId
 			publishData.selectDate.url = item.url
 
 		}
+		let setPermissionsItem = ()=>{
+			// publishData.selectPermissions.isAllowLikes && 
+			if(publishData.selectPermissions.isAllowComment && publishData.selectPermissions.isDisplayArea && publishData.selectPermissions.isSecondaryCreation){
+				publishData.setPermissionsAll = true
+			}else{
+				publishData.setPermissionsAll = false
+			}
+		}
+		let setPermissions = ()=>{
+			// publishData.selectPermissions.isAllowLikes = publishData.setPermissionsAll;
+			publishData.selectPermissions.isAllowComment = publishData.setPermissionsAll
+			publishData.selectPermissions.isDisplayArea = publishData.setPermissionsAll
+			publishData.selectPermissions.isSecondaryCreation = publishData.setPermissionsAll
+		}
 		let cleardata = ()=>{
 		    publish.value = false
 			publishData.isShowMark = false
-			publishData.getPublishDate = {}
 			publishData.subPublishDate = {}
 		}
 		let cancelDsign = ()=>{
@@ -169,7 +185,12 @@ export default defineComponent({
             });
 		}
 		let setPublish= ()=>{
-			let _this = this
+			if(!publishData.subPublishDate.portfolioName){
+				return message.info('Please enter the name of your work')
+			}
+			// if(!publishData.subPublishDate.portfolioDes){
+			// 	return message.info('Please enter a description')
+			// }
 			Modal.confirm({
                 title: 'This will publish your work to the square for all users to see. Please confirm whether to publish?',
                 icon: createVNode(ExclamationCircleOutlined),
@@ -183,13 +204,24 @@ export default defineComponent({
             });
 		}
 		let subPublish = ()=>{
-			let data = publishData.subPublishDate
+			
+			let param = new FormData(); 
+			// let fill = dataURLtoFile(publishData.selectDate.url,'collection')
+			// let aa = new File([fill], 'collection' + ".jpg");
+
+			let file = base64ToFile(publishData.selectDate.url,'collection')
+			param.append('file',file)
+			publishData.subPublishDate.openSource = publishData.selectPermissions.isSecondaryCreation?1:0
+			param.append('data',JSON.stringify(publishData.subPublishDate))
+			let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
+			// let data = publishData.subPublishDate
 			publishData.isShowMark = true
-			Https.axiosPost(Https.httpUrls.publish, data)
+			Https.axiosPost(Https.httpUrls.publish, param,config)
                 .then((rv) => {
 					console.log(rv);
 					cleardata()
 					publishData.isShowMark = false
+					message.success('Release success! You can find it in my work')
                 })
                 .catch((rv) => {
 					publishData.isShowMark = false
@@ -204,6 +236,8 @@ export default defineComponent({
 			// textarea,
 			// setCopy,
 			init,
+			setPermissionsItem,
+			setPermissions,
 			// download,
 			// setScaleImageIndex,
 			// LikeFile,
@@ -221,26 +255,6 @@ export default defineComponent({
     mounted() {
     },
     methods: {
-		// init(list:any,index:any,dialogueIndex:any){
-			
-		// },
-		// cancelDsign(){
-		// 	this.publish = false
-		// 	// this.publishList = []
-		// 	// this.publishIndex = 0
-		// },
-		// download(){
-		// 	// downloadIamge(this.publishList[this.publishIndex].imgUrl)
-		// },
-		// setScaleImageIndex(index:any){
-		// 	// this.publishIndex = index
-		// 	// console.log(this.publishIndex);
-			
-		// },
-		// LikeFile(item:any,str:string){
-		// 	let parent:any = this.$parent
-		// 	parent.likeFile(item,str)
-		// },
     },
 });
 </script>
@@ -262,6 +276,7 @@ export default defineComponent({
 		display: flex;
 		justify-content: space-between;
 		flex: 1;
+		height: calc(100% - 10rem);
 		.publidh_left,.publidh_right{
 			display: flex;
 			flex-direction: column;
@@ -306,14 +321,18 @@ export default defineComponent({
 		}
 		.publidh_left{
 			width: 45%;
-			
+			.publidh_content_item{
+				height: 100%;
+			}
 			.publish_content_shrink{
 				width: 100%;
+				height: calc(100% - 4rem);
 				img{
 					width: 100%;
-					height: 100%;
 					object-fit: contain;
-					max-height: 30rem;
+					// object-fit: cover;
+					// max-height: 30rem;
+					max-height: 100%;
 				}
 			}
 			.publidh_left_thubnai{
@@ -349,6 +368,13 @@ export default defineComponent({
 					margin-right: 1rem;
 				}
 			}
+			.publidh_right_detail{
+				display: flex;
+				flex-direction: column;
+				label{
+					display: flex;
+				}
+			}
 		}
 	
 	}