commit

2023-09-25 10:09:00 +08:00
parent 173f35042d
commit d9868d5cf0
37 changed files with 1618 additions and 1146 deletions
--- a/src/component/Detail/DesignDetail.vue
+++ b/src/component/Detail/DesignDetail.vue
@@ -4,7 +4,7 @@
        <a-modal class="design_detail_modal_component" 
            v-model:visible="designDetailShow" 
            :footer="null" 
-            width="80%"
+            width="65%"
            :maskClosable="false"
            :centered="true"
 			:closable="false"
@@ -27,18 +27,28 @@
 				
                <div class="detail_modal_body_img">
                    <!-- <img class="detial_img" :src="designItemDetail.designItemUrl"> -->
-					<div v-for="item,index in designItemDetail.clothes" :key="item">
-						<div class="clothes_item_img_block"  @click="clothesDetail(item,index)">
-							<img class="clothes_item_img" :src="item.path">
+
+					<div v-show="imgDesignImg" class="detail_modal_body">
+						<div class="detail_modal_item_back" v-for="item,index in frontBack.back" :style="item.style">
+							<img :src="item.imageUrl" alt="">
 						</div>
+						<!-- <img src="../../../public/123123132.png" alt=""> -->
+						<img class="detail_modal_model" :src="frontBack.body?.layersObject[0]?.imageUrl" alt="">
+						<div class="detail_modal_item_front" v-for="item,index in frontBack.front" :style="item.style" @click.stop="clothesDetail(item,index)">
+							<img :src="item.imageUrl" alt="">
+						</div>
+						<!-- <div class="detail_modal_item" v-for="item,index in designItemDetail.clothes" :style="'top:'+ item.layersObject[0]?.position[0]+'px;left:'+ item.layersObject[0]?.position[1]+'px;'" :key="item">
+							<div class="clothes_item_img_block"  @click="clothesDetail(item,index)">
+								<img v-for="v,i in item.layersObject" class="clothes_item_img" :src="v.imageUrl">
+							</div>
+						</div> -->
 					</div>
-                    <img v-show="imgDesignImg" class="detial_img" :src="designItemDetail.designItemUrl">
                    <img v-show="!imgDesignImg" class="detial_img" :src="designItemDetail.designItemUrl">
 					<div>
 						<!-- 全屏 --> 
 						<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail(2)"></i>
 						<!-- 编辑 -->
-						<i class="fi fi-rr-edit" @click="showDesignImgDetail(3)"></i>
+						<!-- <i class="fi fi-rr-edit" @click="showDesignImgDetail(3)"></i> -->
 						<!-- 层 -->
 						<i class="fi fi-rr-copy" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg"></i>
 					</div>
@@ -49,18 +59,18 @@
                            <div class="clothes_item_header">
 								<i class="fi fi-rs-comments"></i>
 								<div>Current Apparel</div>
-								<i class="fi fi-rr-edit"></i>
+								<i class="fi fi-rr-edit" @click.stop="openCurrent(1)"></i>
 							</div>
-							<img :src="currentItem.path" alt="" class="centent" @click="openCurrent(1)">
+							<img :src="designItemDetail?.clothes?.[currentIndex]?.layersObject[1]?.imageUrl" alt="" class="centent" @click="openCurrent(1)">
                        </div>
 						<div class="clothes_detail_item clothes_detail_item_print">
                            <div class="clothes_item_header">
 								<i class="fi fi-rs-comments"></i>
 								<div>Current Print</div>
-								<i class="fi fi-rr-edit"></i>
+								<i class="fi fi-rr-edit" @click.stop="openCurrent(2)"></i>
 							</div>
-							<div class="centent_div" v-if="currentItem?.printObject?.path && currentItem?.printObject?.path != 'none'" @click="openCurrent(2)">
-								<img src="" alt="">
+							<div class="centent_div" v-if="designItemDetail?.clothes?.[currentIndex]?.printObject?.path && designItemDetail?.clothes?.[currentIndex]?.printObject?.path != 'none'" @click="openCurrent(2)">
+								<img :src="designItemDetail?.clothes?.[currentIndex]?.printObject?.path" alt="">
 							</div>
 							<i v-else class="fi fi-rr-picture centent" @click="openCurrent(2)"></i>
                        </div>
@@ -68,19 +78,19 @@
                            <div class="clothes_item_header">
 								<i class="fi fi-rs-comments"></i>
 								<div>Current Print</div>
-								<i class="fi fi-rr-edit"></i>
+								<i class="fi fi-rr-edit" @click.stop="openCurrent(3)"></i>
 							</div>
-							<div class="img_block_item centent" @click="openCurrent(3)">
+							<div class="img_block_item centent" @click.stop="openCurrent(3)">
 								<div class="color_item">
-									<div class="color_content" :style="{background:`rgba(${currentItem.color?.r},${currentItem.color?.g},${currentItem.color?.b},${currentItem.color?.a?currentItem.color.a:1})`}"></div>
+									<div class="color_content" :style="{background:`rgba(${designItemDetail?.clothes?.[currentIndex].color?.r},${designItemDetail?.clothes?.[currentIndex].color?.g},${designItemDetail?.clothes?.[currentIndex].color?.b},${designItemDetail?.clothes?.[currentIndex].color?.a?designItemDetail?.clothes?.[currentIndex].color.a:1})`}"></div>
 									<div class="color_content_body">
-										<div class="color_des">{{currentItem.color?.tcx}}</div>
-										<div class="color_des">{{currentItem.color?.name}}</div>
+										<div class="color_des">{{designItemDetail?.clothes?.[currentIndex]?.color?.tcx}}</div>
+										<div class="color_des">{{designItemDetail?.clothes?.[currentIndex]?.color?.name}}</div>
 									</div>
 								</div>
 							</div>
                        </div>
-						<div class="clothes_detail_item subitOkPreviewBtn">
+						<div class="clothes_detail_item subitOkPreviewBtn" @click="submit">
                           Submit
                        </div>
                    </div>
@@ -130,7 +140,10 @@ export default defineComponent({
    },
    setup() {
        const store = useStore();
-        let designItemDetail :any = computed(()=>{
+        // let designItemDetail :any = computed(()=>{
+		// 	return store.state.DesignDetailModule.designItemDetail
+		// })
+		let designItemDetail :any = computed(()=>{
 			return store.state.DesignDetailModule.designItemDetail
 		})
        let parentData:any = ref({
@@ -144,35 +157,50 @@ export default defineComponent({
 			left:200+'px',
 			top:100+'px',
 		})
-		let currentItem:any = ref({})//点击上衣或者下衣
+		let currentIndex:any = ref(0)
 		let current:any = ref({})//点击上衣或者下衣
 		provide('current',current)
+		let frontBack:any = ref({})
        return{
            designItemDetail,
            store,
            parentData,
 			others,
-			currentItem,
+			currentIndex,
 			current,
+			frontBack,
        }
    },
    data(){
        return{
            loadingShow:false,//加载中
-            designDetailShow:true,
+            designDetailShow:false,
            designShowPrview:1, //展示图片预览步骤
            generateHighDesignImg:'',//点击generate按钮生成的高级设计图
 			imgDesignImg:true,
 			designOrder:false,
        }
    },
+	watch:{
+		designItemDetail:{
+			handler: function(newval) {
+				let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
+				this.current = JSON.parse(JSON.stringify(designItemDetail.clothes[this.currentIndex]))
+				this.setImgSize()
+			}
+		},
+		currentIndex:{
+			handler: function(newval) {
+			}
+		},
+	},
 	mounted(){
-		let url = Https.httpUrls.getDesignDetail + `?designItemId=33130&designPythonOutfitId=32929`
+		let url = Https.httpUrls.getDesignDetail + `?designItemId=33683&designPythonOutfitId=33445`
            this.loadingShow = true
            Https.axiosGet(url).then(
-                (rv: any) => {
+				async (rv: any) => {
                    this.store.commit('setDesignItemDetail',rv)
-					console.log(rv);
+					this.setImgSize()
                    this.generateHighDesignImg = rv.highDesignUrl
                    this.designShowPrview = 1
                    this.designDetailShow = true
@@ -194,7 +222,6 @@ export default defineComponent({
            if(this.designShowPrview == 1){
                this.designDetailShow = false
 				this.designOrder = false
-				this.currentItem = {}
 				let DesignDetailAlter:any = this.$refs.DesignDetailAlter
 				DesignDetailAlter.terminate()

@@ -204,27 +231,148 @@ export default defineComponent({
        },
 		
        showDesignDetailModal(data:any){
-            let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}`
+
+            let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}&designPythonOutfitId=${data.design.designOutfitId}`
            this.parentData = data
            this.loadingShow = true
            Https.axiosGet(url).then(
                (rv: any) => {
-                    this.store.commit('setDesignItemDetail',rv)
+					this.store.commit('setDesignItemDetail',rv)
+					this.setImgSize()
                    this.generateHighDesignImg = rv.highDesignUrl
                    this.designShowPrview = 1
                    this.designDetailShow = true
                    this.loadingShow = false
+
                }
            ).catch(rv=>{
                this.loadingShow = false
            })
        },
-
+		async setImgSize(){
+			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
+			let front:any = []
+			let back:any = []
+			let body:any
+			
+			designItemDetail.others.forEach((item:any) => {
+				if(item.type == 'Body'){
+					body = item
+				}
+			});
+		
+			let ratio:any = await this.setPostition(body.layersObject[0].imageUrl)
+			designItemDetail.clothes.forEach((v:any,index:number)=>{
+				let zIndex = 3
+				for (let i = v.layersObject.length-1; i >= 0; i--) {
+					v.layersObject[i].style = {
+						top:v.layersObject[i].position?.[0]*ratio+'px',
+						left:v.layersObject[i].position?.[1]*ratio+'px',
+						width:v.layersObject[i].imageSize?.[0]*ratio+'px',
+						height:v.layersObject[i].imageSize?.[1]*ratio+'px',
+						zIndex:zIndex-=1
+					}
+					
+					if(v.layersObject[i].imageCategory.indexOf("back") == -1){
+						front[index] = v.layersObject[i]
+					}else{
+						back[index] = v.layersObject[i]
+					}
+				}
+				
+				// v.layersObject.forEach((item:any)=>{
+				// 	item.style = {
+				// 		top:item.position?.[0]*ratio+'px',
+				// 		left:item.position?.[1]*ratio+'px',
+				// 		width:item.imageSize?.[0]*ratio+'px',
+				// 		height:item.imageSize?.[1]*ratio+'px',
+				// 		zIndex:zIndex+=1
+				// 	}
+				// 	console.log(zIndex);
+				// 	if(item.imageCategory == 'blouse_back'){
+				// 		back[index] = item
+				// 	}else{
+				// 		front[index] = item
+				// 	}
+				// })
+			})
+			
+			
+			this.frontBack = {
+				front:front,
+				back:back,
+				body:body,
+			}
+		},
+		submit(){
+			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
+			let clothes:any = []
+			designItemDetail.clothes.forEach((item:any) => {
+				let clothesItem = {
+					// color: `${item.color.r} ${item.color.g} ${item.color.b}`,
+					id:item.id,
+					path:item.path,
+					printObject:{
+						ifSingle:item.printObject.ifSingle,
+						path:item.printObject.path?item.printObject.path :'',
+						prints:item.printObject.prints?item.printObject.prints:[]
+					},
+					type:item.type,
+				}
+				clothes.push(clothesItem)
+			});
+			let data = {
+                designItemId:designItemDetail.designItemId,
+				// designItemId:designItemDetail.designItemId,
+				designSingleItemDTOList:clothes,
+				isPreview:false,
+				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+            }
+            this.loadingShow = true
+            Https.axiosPost(Https.httpUrls.designSingle, data).then(
+                (rv: any) => {
+                    this.loadingShow = false
+                    this.closeModal()
+					let designCollectionList = this.store.state.HomeStoreModule.designCollectionList
+					designCollectionList.forEach((item:any) => {
+						
+						if(item.designItemId == rv.designItemId){
+							item.designOutfitUrl = rv.designItemUrl
+						}
+					});
+					this.store.commit('setDesignCollectionList',designCollectionList)
+                }
+            ).catch(res=>{
+                this.loadingShow = false
+            });
+			
+		},
+		//按比设置单件衣服宽高位置
+		async setPostition(url:any){
+			let img:any = await loadImage(url)
+			let modal_body = <HTMLImageElement>document.getElementsByClassName('detail_modal_body')[0]
+			const num = modal_body?.offsetWidth / img.width;
+			function loadImage(url:any) {
+				return new Promise((resolve, reject) => {
+					
+					const img = new Image();
+					img.onload = () => {
+						resolve(img)
+					};
+					img.onerror = reject;
+					img.src = url;
+				});
+			}
+			return num
+		},
        //切换上一张或下一张图的详情
        changeDesignItem(type:string){
            let {design,index,collectionList} = this.parentData
            let newDesign = {}
            let newIndex = 0
+			this.designOrder = false
+			let DesignDetailAlter:any = this.$refs.DesignDetailAlter
+			DesignDetailAlter.terminate()
            if(type === 'last'){
                if(index>0){
                    newIndex = this.parentData.index - 1
@@ -250,11 +398,8 @@ export default defineComponent({
        //显示图片详情
        showDesignImgDetail(num:any){
 			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
-			console.log(designItemDetail);
-
 			this.designShowPrview = num
 			let setDesignItem:any = this.$refs.setDesignItem
-			console.log(setDesignItem);

 			if(this.designShowPrview == 3){
 				setDesignItem.init()
@@ -278,21 +423,32 @@ export default defineComponent({

        //元素替换
        clothesDetail(clothes:any, index:number){
-			if(this.currentItem?.id == clothes.id){
-				return
-			}
+			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
+			this.currentIndex = index
 			this.designOrder = true
-			this.current = JSON.parse(JSON.stringify(clothes))
-			this.currentItem = clothes
+			this.current = designItemDetail.clothes[this.currentIndex]
+			let data = {
+				designItemId:designItemDetail.designItemId,
+				// designItemId:designItemDetail.designItemId,
+				designSingleItemDTOList:[
+					{
+						color:`${this.current.color.r} ${this.current.color.g} ${this.current.color.b}`,
+						id:this.current.id,
+						path:this.current.path?this.current.path:'',
+						printObject:{
+							ifSingle:this.current.printObject.ifSingle,
+							path:this.current.printObject.path?this.current.printObject.path :'',
+							prints:[],
+						},
+						type:this.current.type,
+					}
+				],
+				isPreview:true,
+				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+			}
+			this.store.commit('setDesignPreviewData',data)
 			let DesignDetailAlter:any = this.$refs.DesignDetailAlter
 			DesignDetailAlter.changePlace()
-		
-            // let elementReplace:any = this.$refs.ElementReplace
-            // let data ={
-            //     clothes:clothes,
-            //     index:index,
-            // }
-            // elementReplace.showelementReplaceModal(data)
        },
        //重新设计
        redesignItem(){
@@ -409,11 +565,37 @@ export default defineComponent({
 			position: relative;

 			flex-direction: column;
-			>div{
-				height: 50%;
-				.clothes_item_img_block{
-					display: flex;
+				// height: 50%;
+			.detail_modal_body{
+				position: relative;
+				max-width: 245px;
+				
+				.detail_modal_item_front:last-child{ 
+					z-index: 1 !important;
 				}
+				>img{
+					width: 100%;
+				}
+				.detail_modal_model{
+					position: relative;
+					z-index: 1;
+				}
+				.detail_modal_item_front,.detail_modal_item_back{
+					cursor: pointer;
+					position: absolute;
+					img{
+						width: 100%;
+					}
+				}
+				.detail_modal_item_back{
+
+				}
+				.detail_modal_item_front{
+
+				}
+			}
+			.clothes_item_img_block{
+				display: flex;
 			}
            .detial_img{
                max-width: 100%;
@@ -453,7 +635,7 @@ export default defineComponent({
                .clothes_detail_item{
 					.centent_div{
 						display: flex;
-						justify-content: space-between;
+						justify-content: center;
 					}
 					.centent{
 						cursor: pointer;
@@ -478,6 +660,9 @@ export default defineComponent({
 						i{
 							font-size: 1.8rem;
 							display: block;
+							&.fi-rr-edit{
+								cursor: pointer;
+							}
 						}
                    }
 					img{
--- a/src/component/Detail/DesignDetailAlter.vue
+++ b/src/component/Detail/DesignDetailAlter.vue
@@ -214,6 +214,7 @@
 import { defineComponent,computed,ref, h ,nextTick ,inject,provide } from 'vue'
 import Draggable from 'vuedraggable'
 import { Https } from "@/tool/https";
+import GO from "@/tool/GO";
 import { useStore } from "vuex";
 import { LoadingOutlined } from '@ant-design/icons-vue';
 import { message,Upload} from 'ant-design-vue';
@@ -415,7 +416,6 @@ export default defineComponent({
 				},
 				hex:this.rgbaToHex([arr.r,arr.g,arr.b,arr.a?arr.a:1])
 			}
-			console.log(this.selectColor);

 			this.uploadList = []
 			if (num == 1) {
@@ -447,12 +447,11 @@ export default defineComponent({
                file.resData = res.data;
 				file.designType = res.data.designType
                file.category = this.current;
-				console.log(file);
                let fileList = this.uploadList.filter(
                    (v) => v.status === "done"
                );
                if (this.uploadList.length >= 8) {
-                    message.error("You can select up to 8 images");
+                    message.warning("You can select up to 8 images");
                } else {
                    // this.store.commit("setSketchboardFile", fileList);
 					this.uploadList = fileList
@@ -473,7 +472,7 @@ export default defineComponent({
                if (index > -1) {
                    this.uploadList.splice(index, 1);
                }
-                message.error(file.name + "upload failed");
+                message.warning(file.name + "upload failed");
            }
 			
        },
@@ -498,6 +497,7 @@ export default defineComponent({
 			this.select = false
 			DesignDetailEnd.colorList = [{},{},{},{},{},{},{},{}]
 			DesignDetailEnd.selectIndex = 0
+			DesignDetailEnd.sketchImg={}
 		},
 		// this.getLibraryList('Moodboard')
 		// this.getLibraryList('Printboard')
@@ -520,14 +520,19 @@ export default defineComponent({
        },
 		selectImgItem(imgData){
 			if(this.selectCode == 'Sketchboard'){
-				this.current.id_ = imgData.id
-				this.current.path = imgData.url
+				// 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{
-				console.log(imgData,this.current.printObject);
-				this.current.printObject.url = imgData.url
+				this.current.printObject.path = imgData.url
 				this.current.printObject.id = imgData.id
 			}

+
 			// imgData.type_ = this.type_
 			// this.store.commit("addGenerateMaterialFils", imgData);
        },
@@ -568,11 +573,11 @@ export default defineComponent({
 		beforeUpload(file){
            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
            if (!isJpgOrPng) {
-                message.error('You can only upload Image file!');
+                message.warning('You can only upload Image file!');
            }
            const isLt2M = file.size / 1024 / 1024 < 5;
            if (!isLt2M) {
-                message.error('Image must smaller than 5MB!');
+                message.warning('Image must smaller than 5MB!');
            }
            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
        },
@@ -655,7 +660,7 @@ export default defineComponent({
                    this.setColorboardList(colorList)
 					this.getColorBg = true
                }else{
-                    message.error("Can't find the TCX color")
+                    message.warning("Can't find the TCX color")
                }
            })
        },
@@ -714,15 +719,39 @@ export default defineComponent({
                file.status = 'done'
                this.colorFileList.push(file)

-                setTimeout(()=>{
+				setTimeout(async ()=>{
                    const colorThief = new ColorThief();
                    let colorImage = this.$refs.colorImage
                    let domImg = colorImage[0];
                    let color = colorThief.getColor(domImg)
 					let colorHex = this.rgbaToHex(color)
 					let selectColorList = [];
-					let selectColor = colorThief.getPalette(domImg,7)
-					selectColor = selectColor.join('&').split("&")
+					let selectColor = colorThief.getPalette(domImg,9)
+					//排序
+					let obj = {
+						max : 30,
+						min: 30,
+					}
+					let colorSort
+					await GO.setColor(selectColor,file.imgUrl,obj).then(
+						(rv) => {
+							if(rv){
+								colorSort = rv.ratio
+							}
+						}
+					)
+					colorSort.sort((a, b) => {
+						var a_num = a.ratio;
+						var b_num = b.ratio;
+						return b_num - a_num;
+					});
+					selectColor = []
+					colorSort.forEach(v=>{
+						selectColor.push(v.rgb)
+					})
+					
+					selectColor = selectColor.join('&')
+					selectColor = selectColor.split("&")
 					let colorLi = []
 					new Set(selectColor).forEach((item)=>{
 						colorLi.push(item.split(","))
@@ -788,10 +817,10 @@ export default defineComponent({
 				content: "";
 				display: block;
 				background: #000;
-				height: 3px;
+				height: .3rem;
 				left: 50%;
 				transform: translateX(-50%);
-				bottom: 6px;
+				bottom: .6rem;
 				width: 0px;
 				transition: 0.3s all;
 			}
@@ -887,8 +916,8 @@ export default defineComponent({
 				}
                .content_img_item_block{
                    // border: 0.1rem solid transparent;
-					width: 9rem;
-					height: 9rem;
+					width: 10rem;
+					height: 10rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
@@ -1142,7 +1171,7 @@ export default defineComponent({
 				margin: auto;
 				background: #f0eaee;

-				border-radius: 10px;
+				border-radius: 1rem;
 				overflow: hidden;
 				// box-shadow: 2px 2px 8px #000;
 				box-shadow: 2px 2px 8px rgba(0,0,0,.3);
@@ -1152,15 +1181,14 @@ export default defineComponent({
 					width: 18rem;
 					background: rgba(0,0,0,0);
 					padding-top: 1rem !important;
-					max-width: 170px;
 					padding: 0;
 					.vc-sketch{
 					}
 					.vc-sketch-saturation-wrap{
 						width: 16rem;
 						height: 16rem;
-						max-height: 170px;
-						max-width: 170px;
+						max-height: 17rem;
+						max-width: 17rem;
 						margin: auto;
 						padding-bottom: 0;
 					}
@@ -1196,7 +1224,7 @@ export default defineComponent({
 					
 					.vc-sketch-color-wrap{
 						background-image: url(@../../../../assets/images/homePage/dropper.png);
-						background-size: 15px;
+						background-size: 1.5rem;
 						background-repeat: no-repeat;
 						background-position: 50%;
 						cursor: pointer;
@@ -1210,10 +1238,10 @@ export default defineComponent({
 						margin: .5rem auto;
 						.vc-sketch-hue-wrap,.vc-sketch-alpha-wrap{
 							.vc-hue{
-								border-radius: 15px;
+								border-radius: 1.5rem;
 							}
 							.vc-alpha{
-								border-radius: 15px;
+								border-radius: 1.5rem;
 								overflow: hidden;
 							}
 						}
@@ -1275,7 +1303,7 @@ export default defineComponent({
 					align-items: center;
 					.color_right{
 						width: 11rem;
-						font-size: 12px;
+						font-size: 1,2rem;
 						color: #666666;
 						.color_rgb_block{
 							display: flex;
--- a/src/component/Detail/DesignDetailEnd.vue
+++ b/src/component/Detail/DesignDetailEnd.vue
@@ -1,7 +1,5 @@
 <template>
 	<div class="detail_modal_body_result">
-
-
 		<div v-show="type_ == 1 || type_ == 2" class="result_apparel_print">
 			<div class="upload_title result_apparel" v-show="type_ == 1">
 				<i class="color_edit fi fi-bs-comments"></i>
@@ -15,10 +13,10 @@
 					</div>
 					<div class="print_left">
 						<!-- <img :src="current.path" :title="current.type"> -->
-						<img  :src="current?.printObject?.url" v-if="current?.printObject?.url && current?.printObject?.url != 'none'">
+						<img  :src="current?.printObject?.path" v-if="current?.printObject?.path && current?.printObject?.path != 'none'">
 						<div  src="@/assets/images/homePage/null_img.png" v-else ></div>
 						<div
-							v-show="current?.printObject?.url && current?.printObject?.url != 'none'"
+							v-show="current?.printObject?.path && current?.printObject?.path != 'none'"
 							class="delete_file_block"
 							@click="deleteFile"
 						>
@@ -47,7 +45,7 @@
 								Single
 							</div>
 						</div>
-						<div class="habit_System_Designer">
+						<div v-show="!overallSingle" class="habit_System_Designer">
 							<a-slider id="system_silder"
 								v-model:value="systemDesignerPercentage"
 								@afterChange="systemDesigner"
@@ -59,8 +57,8 @@
 				</div>
 			</div>
 			<div class="result_apparel_print_img">
-				<img v-show="type_==1" class="result_appare_img" :src="current.path" :title="current.type">
-				<img v-show="type_==2" class="result_print_img" :src="current.path" :title="current.type" @click="setPrint">
+				<img v-show="type_==1" class="result_appare_img" :src="sketchImg?.id_?sketchImg?.path:current?.layersObject?.[1]?.imageUrl" :title="current?.type">
+				<img v-show="type_==2" class="result_print_img" :src="current?.layersObject?.[1]?.imageUrl" :title="current?.type" @click="setPrint">
 			
 			</div>
 		</div>
@@ -110,6 +108,7 @@ export default defineComponent({
        const store = useStore();
 		let type_ = ref(0);
        let current = inject('current')//父组件传过来的数据
+		let sketchImg = ref({})
 		//印花
 		let overallSingle = ref(false)
 		let systemDesignerPercentage = ref(0)
@@ -122,6 +121,7 @@ export default defineComponent({
        return{
 			store,
 			current,
+			sketchImg,
 			type_,
 			overallSingle,
 			systemDesignerPercentage,
@@ -141,15 +141,18 @@ export default defineComponent({
    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
 			this.systemDesignerPercentage = this.current.printObject.scale*100
-			console.log(this.current);
 		},
-		
-
 		//模型
+		setSketchImg(v){
+			this.sketchImg.id_ = v.id
+			this.sketchImg.path = v.url
+			console.log(this.sketchImg);
+		},
 		//印花
 		systemDesigner(num) {
 			this.current.printObject.scale = num
@@ -158,14 +161,14 @@ export default defineComponent({
 			this.current.printObject.ifSingle = this.overallSingle
 		},
 		formatter(value) {
-			return `${value}%`;
+			return `${value*3}%`;
 		},
 		setPrint(){
-			if(this.current.printObject.url && this.current?.printObject?.url != 'none'){
+			if(this.current.printObject.path && this.current?.printObject?.path != 'none'){
 				let DesignPrintOperation = this.$refs.DesignPrintOperation
 				DesignPrintOperation.init()
 			}else{
-                message.error('Please select print');
+                message.warning('Please select print');
 			}
 			
 		},
@@ -210,42 +213,44 @@ export default defineComponent({
 		setPreview(){
            let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
 			let index 
+			let data = this.store.state.DesignDetailModule.designPreviewData
 			designItemDetail.clothes.forEach((v,ind)=>{
 				if(v.id == this.current.id){
 					index = ind
 				}
 			})
-			console.log(this.current,designItemDetail);
 			if(this.type_ == 1){
-				designItemDetail.clothes[index].id = this.current.id_
-				designItemDetail.clothes[index].path = this.current.path
-				return
+				data.designSingleItemDTOList[0].id = this.sketchImg.id_? this.sketchImg.id_:this.current.id_
+				data.designSingleItemDTOList[0].path =this.sketchImg.path? this.sketchImg.path: this.current.path
 			}else if(this.type_ == 2){
 				this.setPrint()
 				return
 			}else if(this.type_ == 3){
 				let color = `${this.$parent.selectColor.rgba.r} ${this.$parent.selectColor.rgba.g} ${this.$parent.selectColor.rgba.b}`
-				designItemDetail.clothes[index].color = color
+				data.designSingleItemDTOList[0].color = color
 			}
-			let priority = designItemDetail.clothes.map((v)=>{
-                return v.type
-            })
-			let data = {
-                ...designItemDetail,
-                priority:priority,
-                timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-            }
+			// let priority = designItemDetail.clothes.map((v)=>{
+            //     return v.type
+            // })
+			data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
 			this.loadingShow = true
+			console.log(data,'data');
 			Https.axiosPost(Https.httpUrls.designSingle, data).then(
 				(rv) => {
-					// this.parentData.design.designItemUrl = rv.designItemUrl
-					// this.$emit('finishRedesign',this.parentData)
-					// this.closeModal()
-					let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
-					console.log(designItemDetail);
+					console.log(rv,'rv');
+					this.store.commit("setDesignPreviewData", data);
+					designItemDetail.clothes[index].color = rv.clothes[0].color
+					designItemDetail.clothes[index].printObject.path = rv.clothes[0].printObject.path
+					designItemDetail.clothes[index].layersObject = rv.clothes[0].layersObject
+					// rv.clothes[0].layersObject.forEach((v)=>{
+					// 	designItemDetail.clothes[index].layersObject[0].imageUrl = rv.clothes[0].layersObject[0].imageUrl
+					// 	designItemDetail.clothes[index].layersObject[0].maskUrl = rv.clothes[0].layersObject[0].maskUrl
+					// 	designItemDetail.clothes[index].layersObject[1].imageUrl = rv.clothes[0].layersObject[1].imageUrl
+					// 	designItemDetail.clothes[index].layersObject[1].maskUrl = rv.clothes[0].layersObject[1].maskUrl
+					// })
 					this.loadingShow = false
-					// this.closeModal()
-					console.log(rv);
+					this.store.commit("setDesignItemDetail", designItemDetail);
+					console.log(designItemDetail,rv);
 				}
 			).catch(res=>{
 				this.loadingShow = false
@@ -284,17 +289,18 @@ export default defineComponent({
 		.result_apparel_print_img{
 			position: relative;
 			flex: 1;
+			text-align: center;
 			img{
+				max-width: 100%;
+				max-height: 100%;
 				width: auto;
-				height: 100%;
+				height: auto;
 				max-height: 35rem;
 				margin-top: 2rem;
 			}
 			.result_print_img{
 				transform: scale(.85);
-				transform-origin: right top;
-				position: absolute;
-				right: 0;
+				transform-origin: center top;
 				cursor: pointer;
 			}
 		}
@@ -303,6 +309,7 @@ export default defineComponent({
 	.result_print{
 		display: flex;	
 		justify-content: space-between;
+		height: 14rem;
 		.print_left{
 			position: relative;
 			 img{
--- a/src/component/Detail/DesignPrintOperation.vue
+++ b/src/component/Detail/DesignPrintOperation.vue
@@ -4,11 +4,11 @@
            class="designOpenrtion_modal"
            v-model:visible="designOpenrtion"
            :footer="null"
-            width="80%"
+            width="65%"
            :maskClosable="false"
            :centered="true"
            :closable="false"
-            :mask="false"
+            :mask="true"
        >
            <div class="designOpenrtion_content">
 				<div class="design_title_text">
@@ -35,7 +35,7 @@
 								Single
 							</div>
 						</div>
-						<div class="habit_System_Designer">
+						<div v-show="!overallSingle" class="habit_System_Designer">
 							<a-slider id="system_silder"
 								v-model:value="systemDesignerPercentage"
 								@afterChange="systemDesigner"
@@ -43,16 +43,17 @@
 							>
 							</a-slider>
 						</div>
-						<div v-show="current.printObject.ifSingle" @click="random" class="button_second">Random</div>
-						<div v-show="current.printObject.ifSingle" class="print_input">
+						<div v-show="overallSingle" @click="random" class="button_second">Random</div>
+						<div v-show="overallSingle" class="print_input">
 							<input class="search_input" placeholder="Please input" 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="current.printObject.ifSingle" v-for="item,index in designOpenrtionList" :key="item" :class="{active:printStyleList[index].designOpenrtionBtn}">
-								<img :src="item.url" @click="setpitch(item,index)">
+							<div class="designOpenrtion_single" v-show="overallSingle" v-for="item,index in designOpenrtionList" :key="item" :class="{active:printStyleList[index].designOpenrtionBtn}">
+								<img :src="item.path" @click="setpitch(item,index)">
 							</div>
-							<div class="designOpenrtion_overall" v-show="!current.printObject.ifSingle">
-								<img :src="designOpenrtionList[0].url">
+							<div class="designOpenrtion_overall" v-show="!overallSingle">
+								<img :src="designOpenrtionList[0].path">
 							</div>
 						</div>
 						<div class="subitOkPreviewBtn" @click.stop="setPreview">preview</div>
@@ -60,7 +61,7 @@
 				</div>
 				<div class="designOpenrtion_centent" id="designOpenrtionCentent">
 					<div class="designOpenrtion_imgMask" :style="sketch">
-						<div class="designOpenrtion_print">
+						<div class="designOpenrtion_print" v-show="overallSingle">
 							<div 
 								v-for="item,index in designOpenrtionList" 
 								:key="item"
@@ -68,18 +69,24 @@
 								@mousedown.stop="itemMoveMousedown(index,$event)"
 								class="modal_imgItem" 
 								@click="setpitch(item,index)" ref="content" >
-								<img crossOrigin="anonymous" :src="item.url" :style="{transform:`rotateZ(${printStyleList[index].transform.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false"> 
+								<img crossOrigin="anonymous" :src="item.path" :style="{transform:`rotateZ(${printStyleList[index].transform.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false"> 
 							</div>
 						</div>
-						<img :src="current?.path" alt="" class="designOpenrtion_sketch">
+						<!-- <img v-if="overallSingle" :src="current?.layersObject?.[1]?.maskUrl" alt="" class="designOpenrtion_sketch"> -->
+						<img :src="current?.layersObject?.[1]?.imageUrl" alt="" class="designOpenrtion_sketch">
 						<div class="designOpenrtion_btn">
-							<ul v-for="item,index in printStyleList" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
+							<ul v-if="overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item.designOpenrtionBtn}" 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>
 							</ul>
+							<div v-show="!overallSingle"></div>
+							<ul v-if="!overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_Mouoverall" :style="'left:'+item.style.left+';top:'+item.style.top" @mousedown.stop="itemMoveMousedown(index,$event)">
+								<i class="fi fi-rr-arrows animtion1"></i>
+								<i class="fi fi-rr-arrows animtion2"></i>
+							</ul>
 						</div>
 					</div>
 				</div>
@@ -95,6 +102,7 @@
 import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "vue";
 import { LoadingOutlined } from "@ant-design/icons-vue";
 import { useStore } from "vuex";
+import { Https } from "@/tool/https";
 import { Modal,message } from 'ant-design-vue';
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 export default defineComponent({
@@ -231,7 +239,6 @@ export default defineComponent({
 				// 				timeSwitch = true
 				// 			}, 100);
 				// 			elParent.firstElementChild.style.transform = "scale("+ num + ") rotateZ("+ angle + "deg)"
-				// 			console.log(num);
 				// 		}
 				// 	});
 				// });
@@ -247,15 +254,18 @@ export default defineComponent({
 			this.designOpenrtionList.push(this.current.printObject)
 			this.overallSingle = DesignPrintOperationParent.overallSingle
 			this.systemDesignerPercentage = DesignPrintOperationParent.systemDesignerPercentage
-
 			let skecth = new Image
-			skecth.src = this.current.path
+			if(!this.overallSingle){
+				skecth.src = this.current.layersObject[1].imageUrl
+			}else{
+				skecth.src = this.current.layersObject[1].maskUrl
+			}
 			skecth.onload=()=>{
 				this.sketch.width = skecth.width/10+'rem'
 				this.sketch.height = skecth.height/10+'rem'
 			}
 			let print = new Image
-			print.src = this.current.printObject.url
+			print.src = this.current.printObject.path
 			print.onload=()=>{
 				this.print.width = print.width+'px'
 				this.print.height = print.height+'px'
@@ -264,26 +274,37 @@ export default defineComponent({
 			}
 		},
 		systemDesigner(num) {
-			this.current.printObject.scale = num
+			let DesignPrintOperationParent = this.$parent
+			DesignPrintOperationParent.systemDesignerPercentage = num
        },
-		setOveralSingle(){
-		},
 		formatter(value) {
-
-			return `${value}%`;
+			return `${value*3}%`;
 		},
 		
 		setOveralSingle(){
-			this.current.printObject.ifSingle = this.overallSingle
-			if (!this.current.printObject.ifSingle) {
+			let DesignPrintOperationParent = this.$parent
+			DesignPrintOperationParent.overallSingle = this.overallSingle
+			if (!this.overallSingle) {
 				this.printAmount = 1
 				this.setprintAmount()
 			}
+			let skecth = new Image
+			// if(!this.overallSingle){
+			// 	skecth.src = this.current.layersObject[1].imageUrl
+			// }else{
+			// 	skecth.src = this.current.layersObject[1].maskUrl
+			// }
+			skecth.src = this.current.layersObject[1].imageUrl
+			skecth.onload=()=>{
+				this.sketch.width = skecth.width/10+'rem'
+				this.sketch.height = skecth.height/10+'rem'
+			}
 		},
 		setpitch(item,index){
 			this.printStyleList.forEach((v)=>{
 				v.designOpenrtionBtn = false
 			})
+			this.imgDomIndex = index
 			this.printStyleList[index].designOpenrtionBtn = true
 			this.printStyleList[index].style.zIndex = this.printZIndex++
 		},
@@ -293,7 +314,11 @@ export default defineComponent({
 			this.printStyleList.forEach((v)=>{
 				v.designOpenrtionBtn = false
 			})
-			this.imgDom = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
+			if(!this.overallSingle){
+				this.imgDom = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_Mouoverall")[0]
+			}else{
+				this.imgDom = document.getElementsByClassName('designOpenrtion_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].designOpenrtionBtn = true
@@ -443,6 +468,14 @@ export default defineComponent({
 			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
+		},
 		random(){
 			this.printStyleList.forEach((v,index)=>{
 				this.refetchTemplate(index)
@@ -450,13 +483,17 @@ export default defineComponent({
 		},
        //随机重置图片顺序
        refetchTemplate(index) {
-			let scale = (Math.trunc(Math.random()*15)+1)*.1
+			// 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('designOpenrtion_sketch')[0]
-			console.log(sketch.offsetHeight);
-			let x = sketch.width-Number(this.print.width.replace(/px/g,''))
-			let y = sketch.height-Number(this.print.height.replace(/px/g,''))
+			let width = Math.trunc(Math.random()*(sketch.width-sketch.width/3))+1+sketch.width/3
+			let scale = width / this.print.width.replace(/px/g,'')
+			console.log(scale,width,this.print.width);
+			// 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-20
+			let y = sketch.height-20
 			this.printStyleList[index]={
 				centers:{
 					left:0,
@@ -478,6 +515,44 @@ export default defineComponent({
 				designOpenrtionBtn: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/
+			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*3/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]
+				}else{
+					scale = (arr[index].style.width.replace(/px/g,'')/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,
+				}
+				prints.push(obj)
+			})
+			return prints	
+		},
 		setPreview(){
 			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
 			let index 
@@ -490,27 +565,37 @@ export default defineComponent({
 			let priority = designItemDetail.clothes.map((v)=>{
                return v.type
            })
-			// let 
-			let data = {
-                ...designItemDetail,
-                priority:priority,
-                timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-            }
-			// this.loadingShow = true
-			// Https.axiosPost(Https.httpUrls.designSingle, data).then(
-			// 	(rv) => {
-			// 		// this.parentData.design.designItemUrl = rv.designItemUrl
-			// 		// this.$emit('finishRedesign',this.parentData)
-			// 		// this.closeModal()
-			// 		let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
-			// 		console.log(designItemDetail);
-			// 		this.loadingShow = false
-			// 		// this.closeModal()
-			// 		console.log(rv);
-			// 	}
-			// ).catch(res=>{
-			// 	this.loadingShow = false
-			// });
+			// let data = {
+            //     ...designItemDetail,
+            //     priority:priority,
+            //     timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+            // }
+			let data = this.store.state.DesignDetailModule.designPreviewData
+			data.designSingleItemDTOList[0].printObject={
+				ifSingle:this.overallSingle,
+				path:this.designOpenrtionList[0].path,
+				prints:this.computeZindex(),
+			}
+			data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
+			this.store.commit("setDesignPreviewData", data);
+			this.loadingShow = true
+			Https.axiosPost(Https.httpUrls.designSingle, data).then(
+				(rv) => {
+					// this.parentData.design.designItemUrl = rv.designItemUrl
+					// this.$emit('finishRedesign',this.parentData)
+					// this.closeModal()
+					designItemDetail.clothes[index].printObject.path = rv.clothes[0].printObject.path
+					designItemDetail.clothes[index].layersObject = rv.clothes[0].layersObject
+					designItemDetail.clothes[index].printObject.prints = this.computeZindex()
+					console.log(rv);
+					this.store.commit("setDesignItemDetail", designItemDetail);
+					this.loadingShow = false
+					this.designOpenrtion = false
+					// this.closeModal()
+				}
+			).catch(res=>{
+				this.loadingShow = false
+			});
 		},
 		clearModal(){
 			this.printAmount = 1//显示数量
@@ -561,7 +646,7 @@ export default defineComponent({

 <style lang="less">
 .designOpenrtion_modal {
-	max-width: 1440px;
+	// max-width: 1440px;
 	.ant-modal-body{
 		padding: 4rem 5rem 0rem!important;
 		// height: calc(65vh - 6.4rem);
@@ -660,8 +745,11 @@ export default defineComponent({
 				}
 				.print_input{
 					margin-top: 1rem;
+					width: 9.85rem;
+					display: flex;
 					.search_input{
-						width: 9.85rem;
+						width: 6.85rem;
+						margin-right: 1rem;
 						padding: 0 1.5rem;
 						border: 2px solid #000;
 						font-size: 1.2rem;
@@ -672,13 +760,19 @@ export default defineComponent({
 							color: #C2C2C2;
 						}
 					}
+					i{
+						width: 2rem;
+						cursor: pointer;
+						display: flex;
+						align-items: center;
+					}
 				}
 				.designOpenrtion_nav{
 					display: flex;
 					margin-top: 2rem;
 					flex-wrap: wrap;
 					width: 100%;
-					height: 10rem;
+					height: 12rem;
 					overflow-x: hidden;
 					justify-content: space-evenly;
 					&.designOpenrtion_nav::-webkit-scrollbar {
@@ -693,6 +787,7 @@ export default defineComponent({
 					}
 					.designOpenrtion_single{
 						width: 40%;
+						margin-bottom: 2rem;
 					}
 					img{
 						width: 100%;
@@ -751,6 +846,12 @@ export default defineComponent({
 			}
 			.designOpenrtion_btn{
 				z-index: 3;
+				>div{
+					width: 100%;
+					height: 100%;
+					border: 2px solid rgb(20, 188, 255);
+					position: absolute;
+				}
 				ul{
 					list-style: none;
 					// width: 100%;
@@ -765,7 +866,38 @@ export default defineComponent({
 					user-select:none;
 					opacity: 0;
 					margin: 0;
-					
+				
+					&.designOpenrtion_Mouoverall{
+						opacity: 1;
+						border: none;
+						width: 1.4rem;
+						height: 1.4rem;
+						i{
+							display: flex;
+							color: #14bcff;
+						}
+						.animtion1{
+							animation: anim 4s 2s linear infinite;
+							// animation-delay: .5;
+						}
+						.animtion2{
+							animation: anim 4s linear infinite;
+							position: absolute;
+							top: 0;
+							left: 0;
+						}
+						@keyframes anim{
+							0% {
+								opacity: 1;
+								transform: scale(1);
+							}
+							100% {
+								opacity: 0;
+								transform: scale(3);
+							}
+						}
+
+					}
 					li{
 						cursor: pointer;
 						// border-radius: 50%;
@@ -814,8 +946,8 @@ export default defineComponent({
 						position: absolute;
 						content: "";
 						background-color: #14bcff;
-						width: 2px;
-						height: 30px;
+						width: .2rem;
+						height: 3rem;
 						left: 50%;
 						bottom: 0;
 						transform: translateX(-50%);
@@ -824,7 +956,7 @@ export default defineComponent({
 						position: absolute;
 						content: "";
 						background-color: #14bcff;
-						top: calc(50% - 30px);
+						top: calc(50% - 3rem);
 						left: 50%;
 						transform: translate(-50%,-50%) ;
 						width: 1.5rem;
--- a/src/component/Detail/ElementReplace.vue
+++ b/src/component/Detail/ElementReplace.vue
@@ -313,11 +313,11 @@ export default defineComponent({
        beforeUpload(file:any){
            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
            if (!isJpgOrPng) {
-                message.error('You can only upload Image file!');
+                message.warning('You can only upload Image file!');
            }
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
-                message.error('Image must smaller than 5MB!');
+                message.warning('Image must smaller than 2MB!');
            }
            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
        },
--- a/src/component/Detail/habit.vue
+++ b/src/component/Detail/habit.vue
@@ -21,7 +21,7 @@
 				<div class="habit_model_show habit_workspace_show"  v-fade="openType.workspace">
 					<ul class="habit_model_list">
 						<li v-for="item,index in workspace.workspaceList">
-							<div @click.stop="setWorkspace(item.id)" v-show="!item.putName">{{ item.name }}</div>
+							<div @click.stop="setWorkspace(item.id)" v-show="!item.putName">{{ item.workSpaceName }}</div>
 							<input v-show="item.putName" type="text" v-model="workspaceItemName">
 							<i @click.stop="putName(index,'put')" v-show="!item.putName" class="fi fi-rr-edit"></i>
 							<i @click.stop="putName(index,'affirm')" v-show="item.putName" class="fi fi-br-check"></i>
@@ -36,36 +36,38 @@
 				</div>
            </div>
 			<div class="habit_Overal_Single">
-                <div
-                    class="habit_Overal_Single_text"
-                    :class="{ active: !workspaceItem.sexType }"
-                >
-                    男
-                </div>
-                <a-switch @change="setSex" v-model:checked="workspaceItem.sexType" />
-                <div
-                    class="habit_Overal_Single_text"
-                    :class="{ active: workspaceItem.sexType }"
-                >
-                    女
-                </div>
+				<a-dropdown @click.stop="setOpenType('sex')">
+                    <a-button>
+                        <UserOutlined />
+                        {{ workspaceItem.sex }}
+                        <DownOutlined />
+                    </a-button>
+                </a-dropdown>
+				<div class="habit_model_show habit_sex_show"  v-fade="openType.sex">
+					<ul class="habit_model_list">
+						<li v-for="item,index in sex">
+							<div @click.stop="setSex(item.value)">{{ item.label }}</div>
+						</li>
+					</ul>
+				</div>
            </div>
            <div class="habit_Overal_Single">
                <div
                    class="habit_Overal_Single_text"
                    :class="{ active: !workspaceItem.overallSingle }"
                >
-                    Overal
+				Overal
                </div>
-                <a-switch @change="setOverall" v-model:checked="workspaceItem.overallSingle" />
+                <a-switch @click="setOverallSingle" v-model:checked="workspaceItem.overallSingle" />
                <div
                    class="habit_Overal_Single_text"
                    :class="{ active: workspaceItem.overallSingle }"
                >
-                    Single
+				Single
+                    
                </div>
            </div>
-            <div class="habit_habit_singleton" v-show="!workspaceItem.overallSingle">
+            <div class="habit_habit_singleton" v-show="workspaceItem.overallSingle">
                <a-dropdown @click.stop="setOpenType('singleton')">
                    <a-button>
                        <UserOutlined />
@@ -110,36 +112,45 @@
 					<div class="model_current">
 					<div class="model_text">Current</div>
 					<div class="model_img">
-						<img src="" alt="">
+						<img :src="workspaceItem.mannequinUrl" alt="">
 					</div>
 				</div>
 				<div class="model_Designer">
 					<div class="model_text">
 						<div
 							class="habit_System_Seleves_text"
-							:class="{ active: systemSeleves }"
+							:class="{ active: !systemSeleves }"
 						>
 							System
 						</div>
-						<a-switch @change="setSystemSeleves" v-model:checked="systemSeleves" />
+						<a-switch v-model:checked="systemSeleves" />
 						<div
 							class="habit_System_Seleves_text"
-							:class="{ active: !systemSeleves }"
+							:class="{ active: systemSeleves }"
 						>
-							Seleves
+							User
 						</div>
 					</div>
-					<div class="model_img">
-						<div v-for="(item,index) in systemSeleves?workspaceItem.system:workspaceItem.seleves" :key="item.id">
-							<img :src="item.url" alt="">
+					<div class="model_img" v-show="systemSeleves">
+						<div v-mousewheel>
+							<div v-for="(item,index) in mannequins[0].modelList" :key="item.id">
+								<img :src="item.presignedUrl" alt="" @click="setMannequins(item,'Library')">
+							</div>
 						</div>
 					</div>
+					<div class="model_img" v-show="!systemSeleves">
+						<div v-mousewheel>
+							<div v-for="(item,index) in mannequins[1].modelList" :key="item.id">
+								<img :src="item.presignedUrl" alt="" @click="setMannequins(item,'System')">
+							</div>
+						</div>
+						
+					</div>
 				</div>
 				</div>
 				
 			</div>
        </div>
-		<!-- <ModelsModal ref="modelsModal" @sureSelectModel="sureSelectModel"></ModelsModal> -->
    </div>
 </template>
 <script lang="ts">
@@ -148,164 +159,90 @@ import { defineComponent, createVNode, ref,Ref} from "vue";
 import { UserOutlined, DownOutlined } from "@ant-design/icons-vue";
 import { Https } from "@/tool/https";
 import type { MenuProps } from "ant-design-vue";
-import ModelsModal from "@/component/LibraryPage/ModelsModal.vue";
 import { message,Upload} from 'ant-design-vue';
 export default defineComponent({
    components: {
        DownOutlined,
        UserOutlined,
-		ModelsModal,
    },
 	setup(){
 		let workspaceItem = ref({
 			id:1,
-			name:"工作台2",
+			id_:1,
+			workSpaceName:"工作台1",
 			putName:false,
 			systemDesignerPercentage:30,
-			position:'top',
-			sex:'male',
-			sexType:false,
+			position:'Outwear',
+			sex:'Female',
 			overallSingle:false,
-			current:{
-
-			},
-			system:[{
-				id:1,
-				url:"11111"
-			},
-			{
-				id:2,
-				url:"11111"
-			}],
-			seleves:[{
-				id:1,
-				url:"22"
-			},
-			{
-				id:2,
-				url:"222"
-			}],
+			mannequinUrl:'',
+			mannequinType:'',
+			mannequinId:'',
 		})
-		let systemSeleves= ref(true);
+		let mannequins:any = ref([{},{}])
+		let systemSeleves= ref(false);
 		let openType = ref({
 			workspace:false,
 			singleton:false,
 			habit:false,
 			model:false,
 			addWorkspace:false,
+			sex:false
 		})
-		let workspace = ref({
-			id:'2',
-			workspaceList:[
-				{
-					id:1,
-					name:"工作台2",
-					putName:false,
-					systemDesignerPercentage:24,
-					position:'top',
-					sex:'male',
-					current:{
-
-					},
-					system:[{
-
-					}],
-					seleves:[{
-
-					}],
-				},
-				{
-					id:2,
-					name:"工作台3",
-					putName:false,
-					systemDesignerPercentage:23,
-					position:'top',
-					sex:'male',
-					current:{
-
-					},
-					system:[{
-
-					}],
-					seleves:[{
-
-					}],
-				},
-				{
-					id:3,
-					name:"工作台1",
-					putName:false,
-					systemDesignerPercentage:100,
-					position:'top',
-					sex:'male',
-					current:{
-
-					},
-					system:[{
-
-					}],
-					seleves:[{
-
-					}],
-				},
-			],
+		let workspace:any = ref({
+			
 		});
 		let workspaceItemName = ref('')//设置单独name公共使用
 		let singleTypeList = ref([
-			{
-				value: "Outwear",
-				label: "Outwear",
-			},
-			{
-				value: "Blouse",
-				label: "Blouse",
-			},
-			{
-				value: "Dress",
-				label: "Dress",
-			},
-			{
-				value: "Trousers",
-				label: "Trousers",
-			},
-			{
-				value: "Skirt",
-				label: "Skirt",
-			},
+			
+		])
+		let sex = ref([
+			
 		])
 			
 	return{
 			systemSeleves,
+			mannequins,
 			openType,
 			workspace,
 			workspaceItem,
 			workspaceItemName,
-			singleTypeList
+			singleTypeList,
+			sex
 		}
    },
 	watch:{
 		'openType.habit':{
 			handler(newVal:any,oldVal:any){
-				console.log(newVal);
 				// this.store.state.Workspace.workspace
 				if(!newVal){
-					this.store.commit("setWoekspace", this.workspaceItem);
+					let data = this.workspaceItem
+					this.putWorkspace(data)
+					this.store.commit("setWorkspace", this.workspaceItem);
 				}
 			}
 		},
-		'workspaceItem.id':{
+		'workspaceItem.id_':{
 			handler(newVal:any,oldVal:any){
-				console.log(newVal);
 				// this.store.state.Workspace.workspace
 				// if(!newVal){
-				// 	this.store.commit("setWoekspace", this.workspaceItem);
+				// 	this.store.commit("setWorkspace", this.workspaceItem);
 				// }
-				this.workspace.workspaceList = this.workspace.workspaceList
+				this.workspace.workspaceList.forEach((v:any)=>{
+					if(v.id == this.workspaceItem.id_){
+						this.workspaceItem = v
+						this.workspaceItem.id_ = v.id
+					}
+					if(v.id == oldVal){
+						this.getDetail(newVal)
+						delete v.isLastIndex
+						this.putWorkspace(v)
+					}
+				})
 			}
 		},
 		workspaceItem:{
 			handler(newVal:any,oldVal:any){
-				console.log(123123);
 				// this.store.state.Workspace.workspace
 			}
 		}
@@ -317,10 +254,12 @@ export default defineComponent({
    },
    mounted() {
 		this.getworkspace()
+		this.getSexPosition()
+		this.store.commit("setWorkspace", this.workspaceItem);
 	},
 	directives:{
 		fade:{
-			mounted (el) {
+			mounted (el,binding) {
 				el.addEventListener('click',()=>{
 					
 				})
@@ -338,80 +277,167 @@ export default defineComponent({
 					}, 100);
 				}
 			}
+		},
+		mousewheel:{
+			mounted (el) {
+				let parent = el.parentNode
+				// el.style.width='100%'
+				// el.style.height='100%'
+				let num = 0
+				let width = el.offsetWidth
+				let parentWidth = parent.offsetWidth
+
+				el.addEventListener('mouseover',()=>{
+					width = el.offsetWidth
+					parentWidth = parent.offsetWidth
+				})
+				el.addEventListener('mousewheel',(e:MouseEvent)=>{
+
+					if(0>(e as WheelEvent).deltaY){
+						num+=15
+						if(num >= 0){
+							num = 0
+						}
+					}else{
+						num-=15
+						if(num<=parentWidth - width){
+							num = parentWidth - width
+						}
+						
+					}
+					
+					el.style.marginLeft = num+'px'
+				})
+			}
 		}
 	},
    methods: {
+		getSexPosition(){
+			Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'Sex'}}).then((rv: any) => {
+				if (rv) {
+					let arr:any = []
+					rv.forEach((item:any) => {
+						let obj = {
+							value:item.name,
+							label:item.name,
+						}
+						arr.push(obj)						
+					});
+					this.sex = arr
+				}
+			})
+			Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'Position'}}).then((rv: any) => {
+				if (rv) {
+					let arr:any = []
+					rv.forEach((item:any) => {
+						let obj = {
+							value:item.name,
+							label:item.name,
+						}
+						arr.push(obj)						
+					});
+					this.singleTypeList = arr
+				}
+			})
+		},
 		getworkspace(){
-			console.log(123);
-			
 			// Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:3}}).then((rv: any) => {
 			// 	if (rv) {
 			// 		console.log(rv,'workspace');
 			// 	}
 			// })
-			// let url = Https.httpUrls.workspaceList + `?page=0&size=10`
-            // Https.axiosGet(url).then(
-            //     (rv: any) => {
-            //         console.log(rv);
-            //     }
-            // ).catch(rv=>{
-            // })
 			let data = {
 				page:1,
 				size:10,
 			}
 			Https.axiosPost(Https.httpUrls.workspaceList,data).then((rv: any) => {
 				if (rv) {
-					console.log(rv,'workspace');
-					this.workspace.workspaceList = rv.page.content
-					this.workspace.workspaceList.forEach((rv:any)=>{
-						if(rv.sex == '男装'){
-							rv.sexType == true
+					rv.page.content.forEach((v:any) => {
+						v.id_ = v.id
+						if(v.position == "Overall"){
+							v.overallSingle = false
 						}else{
-							rv.sexType == false
+							v.overallSingle = true
 						}
-					})
+						v.putName = false
+						if(v.id == rv.id){
+							this.workspaceItem = v
+						}
+					});
+					this.workspace.id = rv.id
+					this.workspace.workspaceList = rv.page.content
+				}
+			})
+		},
+		getDetail(id:any){
+			Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:id}}).then((rv: any) => {
+				if (rv) {
+				}
+			})
+		},
+		getMannequins(){
+			Https.axiosGet(Https.httpUrls.getMannequins).then((rv: any) => {
+				if (rv) {
+					this.mannequins = rv
 				}
 			})
 			
 		},
-		setSex(){
-			if(this.workspaceItem.sexType){
-				this.workspaceItem.sex = 'female'
-			}else{
-				this.workspaceItem.sex = 'male'
-			}
+		putWorkspace(data:any){
+			Https.axiosPost(Https.httpUrls.workspacesaveOrUpdate,data).then((rv: any) => {
+				if (rv) {
+					this.getworkspace()
+				}
+			})
 		},
-		setOverall(){
-			if(this.workspaceItem.sexType){
-				this.workspaceItem.sex = 'female'
-			}else{
-				this.workspaceItem.sex = 'male'
+		deleteWorkspace(data:any){
+			Https.axiosDelete(Https.httpUrls.workspaceRemove,data).then((rv: any) => {
+				if (rv) {
+					this.getworkspace()
+				}
+			})
+		},
+		//
+		setOverallSingle(){
+			if(!this.workspaceItem.overallSingle){
+				this.workspaceItem.position = "Overall"
 			}
 		},
 		//修改名字
 		putName(index:number,v:string){
-			this.workspace.workspaceList.forEach(v => {
+			this.workspace.workspaceList.forEach((v:any )=> {
 				v.putName = false
 			});
 			if(v == 'put'){
-				this.workspaceItemName = this.workspace.workspaceList[index].name
+				this.workspaceItemName = this.workspace.workspaceList[index].workSpaceName
 				this.workspace.workspaceList[index].putName = true
 			}else if (v == 'delete'){
-				this.workspace.workspaceList.splice(index,1)
+				let data = [{
+					id:this.workspace.workspaceList[index].id,
+				}]
+				let id = this.workspace.workspaceList[index].id
+				this.deleteWorkspace(data)
+				
 			}else{
 				if(this.workspaceItemName == ''){
-					message.error('Please enter a workbench name');
+					message.warning('Please enter a workbench name');
 				}else{
 					if(index == -1){
-						this.workspace.workspaceList.push(this.workspaceItem)
-
-						this.workspaceItem.id = 2
-						this.workspaceItem.name = this.workspaceItemName
+						let data = {
+							workSpaceName:this.workspaceItemName,
+						}
+						this.putWorkspace(data)
 						this.openType.addWorkspace = false
 					}else{
-						console.log(this.workspaceItemName,this.workspaceItem);
-						this.workspace.workspaceList[index].name = this.workspaceItemName 
+						let data:any
+						this.workspace.workspaceList.forEach((item:any)=>{
+							if(this.workspace.workspaceList[index].id == item.id){
+								data = item
+							}
+						})
+						data.workSpaceName = this.workspaceItemName
+						this.putWorkspace(data)
+						this.workspace.workspaceList[index].workSpaceName = this.workspaceItemName 
 						this.workspace.workspaceList[index].putName = false
 					}
 				}
@@ -429,45 +455,57 @@ export default defineComponent({
 		//根据id设置当前参数
 		setWorkspace(num:number){
 			this.openType.addWorkspace = false
-			this.workspace.workspaceList.forEach(v => {
+			this.workspace.workspaceList.forEach((v:any) => {
 				v.putName = false
 			});
-			this.workspace.workspaceList.forEach((v:any)=>{
-				if(v.id == num){
-					this.workspaceItem = v
-				}
-			})
+			
+			this.workspaceItem.id_ = num
 			this.openType.workspace = false
 		},
 		//新建参数
 		newWorkspace(){
+			this.workspaceItemName = ''
 			this.openType.addWorkspace = true
 		},
+		setSex(v:any){
+			this.openType.sex = false
+			this.workspaceItem.sex = v
+		},
 		//设置single & overall
 		setSingle(v:string){
 			this.openType.singleton = false
 			this.workspaceItem.position = v
 		},
-		//切换系统还是自己的模特
-		setSystemSeleves(){
-		},
+		setMannequins(item:any,str:string){//设置模特
+			this.workspaceItem.mannequinId = item.id
+			this.workspaceItem.mannequinType = str
+			this.workspaceItem.mannequinUrl = item.url

+		},
 		setOpenType(v:string){
 			if(v == 'habit'){
 				this.openType.habit = !this.openType.habit
 			}else if(v == 'workspace'){
 				this.openType.singleton = false
-				this.workspace.workspaceList.forEach(v => {
-					v.putName = false
-				});
+				this.openType.sex = false
+				// this.workspace.workspaceList.forEach((v:any) => {
+				// 	v.putName = false
+				// });
 				this.openType.workspace = !this.openType.workspace
 			}else if(v == 'model'){
 				this.openType.singleton = false
 				this.openType.workspace = false
+				this.openType.sex = false
 				this.openType.model = !this.openType.model
+				this.getMannequins()
 			}else if(v == 'singleton'){
 				this.openType.singleton = !this.openType.singleton
 				this.openType.workspace = false
+				this.openType.sex = false
+			}else if(v == 'sex'){
+				this.openType.sex = !this.openType.sex
+				this.openType.workspace = false
+				this.openType.singleton = false
 			}
 			let mask = document.getElementsByClassName("habit_mask")[0]
 			mask.addEventListener("click", this.documentClick,true);
@@ -479,6 +517,7 @@ export default defineComponent({
 			this.openType.workspace = false
 			this.openType.model = false
 			this.openType.singleton = false
+			this.openType.sex = false
 		},
 		// //选择模特
 		// selectModels() {
@@ -580,6 +619,7 @@ export default defineComponent({
            align-items: center;
            justify-content: center;
            margin: 3rem 0;
+			position: relative;
            .habit_Overal_Single_text {
                font-weight: 600;
                color: rgba(0, 0, 0, 0.5);
@@ -592,6 +632,18 @@ export default defineComponent({
            :deep(.ant-switch) {
                margin: 0 1rem;
            }
+			.habit_sex_show{
+				width: 100%;
+				z-index: 1;
+				transform: translateY(10%);
+				top: 4rem;
+				height: 14rem;
+				overflow-x: hidden;
+				cursor: auto;
+				&.active{
+					transform: translateY(0%);
+				}
+			}
        }
        .habit_habit_singleton {
            margin-bottom: 3rem;
@@ -608,6 +660,7 @@ export default defineComponent({
 					transform: translateY(0%);
 				}
 			}
+			
        }
        .habit_System_Designer {
 			margin-top: 8rem;
@@ -646,7 +699,8 @@ export default defineComponent({
 			bottom: -.5rem;
 			transform: translateY(110%);
 			right: -.2rem;
-			width: 35rem;
+			width: 40rem;
+			// width: 35rem;
 			opacity: 0;
 			transition: all .3s;
 			display: none;
@@ -657,6 +711,9 @@ export default defineComponent({
 			.habit_btn{
 				display: flex;
 				justify-content: space-between;
+				.model_current{
+					margin-right: 3rem;
+				}
 			}
 			.habit_model_list{
 				margin: 0;
@@ -671,6 +728,9 @@ export default defineComponent({
 					>div{
 						cursor: pointer;
 						width: 80%;
+						white-space: nowrap;
+						text-overflow:ellipsis;
+						overflow:hidden;
 					}
 					&.newWorkspace{
 						text-align: center;
@@ -702,6 +762,8 @@ export default defineComponent({

 			}
 			.model_Designer{
+				flex: 1;
+				overflow: hidden;
 				.model_text{
 					display: flex;
 					:deep(.ant-switch) {
@@ -721,7 +783,19 @@ export default defineComponent({
 				}
 			}
 			.model_img{
+				display: flex;
+				>div{
 					display: flex;
+					
+				}
+				div{
+					width: auto;
+					margin-right: 1rem;
+				}
+				img{
+					width: 10rem;
+					cursor: pointer;
+				}
 			}
 		}
 		
--- a/src/component/Detail/setDesignItem.vue
+++ b/src/component/Detail/setDesignItem.vue
@@ -322,7 +322,7 @@ export default defineComponent({

 <style lang="less" scoped>
 .designOpenrtion_modal {
-	max-width: 1440px;
+	// max-width: 1440px;
 	.ant-modal-body{
 		padding: 4rem 5rem 0rem!important;
 		// height: calc(65vh - 6.4rem);