commit

src/assets/style/style.css

@@ -15,7 +15,6 @@ li {
   padding: 0;
 }
 .page_content {
-  width: 1440px;
   max-width: 100%;
   height: 100%;
   margin: 0 auto;
@@ -175,6 +174,19 @@ li {
 .operate_file_block .select_img_type .category_list .category_item:hover {
   background: linear-gradient(-137deg, #eeefdb, #e7dbed);
 }
+.ant-modal-root .ant-modal-wrap .ant-modal-confirm-confirm .ant-modal-content .ant-modal-body .ant-modal-confirm-body-wrapper .ant-modal-confirm-btns .ant-btn:hover {
+  color: #39215b;
+  border-color: #39215b;
+}
+.ant-modal-root .ant-modal-wrap .ant-modal-confirm-confirm .ant-modal-content .ant-modal-body .ant-modal-confirm-body-wrapper .ant-modal-confirm-btns .ant-btn-primary {
+  background: #39215b;
+  border-color: #39215b;
+}
+.ant-modal-root .ant-modal-wrap .ant-modal-confirm-confirm .ant-modal-content .ant-modal-body .ant-modal-confirm-body-wrapper .ant-modal-confirm-btns .ant-btn-primary:hover {
+  color: #fff;
+  border-color: #543087;
+  background: #543087;
+}
 .pin_block {
   text-align: center;
   margin-top: 0.5rem;

src/assets/style/style.less

@@ -4,6 +4,7 @@ html,body,#app{
     padding: 0;
     height: 100%;
     font-family: 'Roboto', sans-serif;
+	// --antd-wave-shadow-color: #341e57;
 }
 input{
 	outline:none
@@ -13,7 +14,7 @@ ul,li{
 	padding: 0;
 }
 .page_content{
-    width: 1440px;
+    // width: 1440px;
     max-width: 100%;
     height: 100%;
     margin: 0 auto;
@@ -202,6 +203,34 @@ ul,li{
 		}
 	}
 }
+//提示框样式
+.ant-modal-root{
+	.ant-modal-wrap{
+		.ant-modal-confirm-confirm{
+			.ant-modal-content{
+				.ant-modal-body{
+					.ant-modal-confirm-body-wrapper{
+						.ant-modal-confirm-btns{
+							.ant-btn:hover{
+								color: #39215b;
+								border-color: #39215b;
+							}
+							.ant-btn-primary{
+								background: #39215b;
+								border-color: #39215b;
+							}
+							.ant-btn-primary:hover{
+								color: #fff;
+								border-color: #543087;
+								background: #543087;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
 .pin_block{
 	text-align: center;
 	margin-top:.5rem;

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 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 class="clothes_item_img" :src="item.path">
+								<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)">
+							<div class="centent_div" v-if="designItemDetail?.clothes?.[currentIndex]?.printObject?.path && designItemDetail?.clothes?.[currentIndex]?.printObject?.path != 'none'" @click="openCurrent(2)">
-								<img src="" alt="">
+								<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">{{designItemDetail?.clothes?.[currentIndex]?.color?.tcx}}</div>
-										<div class="color_des">{{currentItem.color?.name}}</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,6 +140,9 @@ export default defineComponent({
     },
     setup() {
         const store = useStore();
+        // let designItemDetail :any = computed(()=>{
+		// 	return store.state.DesignDetailModule.designItemDetail
+		// })
 		let designItemDetail :any = computed(()=>{
 			return store.state.DesignDetailModule.designItemDetail
 		})
@@ -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.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){
+			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
-				return
+			this.currentIndex = index
-			}
 			this.designOrder = true
-			this.current = JSON.parse(JSON.stringify(clothes))
+			this.current = designItemDetail.clothes[this.currentIndex]
-			this.currentItem = clothes
+			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,12 +565,38 @@ export default defineComponent({
 			position: relative;
 
 			flex-direction: column;
-			>div{
+				// height: 50%;
-				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%;
                 max-height: 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{

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.id_ = imgData.id
-				this.current.path = imgData.url
+				// 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.path = imgData.url
-				this.current.printObject.url = 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)
+					let selectColor = colorThief.getPalette(domImg,9)
-					selectColor = selectColor.join('&').split("&")
+					//排序
+					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;
+					width: 10rem;
-					height: 9rem;
+					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-height: 17rem;
-						max-width: 170px;
+						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;

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_==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.path" :title="current.type" @click="setPrint">
+				<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_
+				data.designSingleItemDTOList[0].id = this.sketchImg.id_? this.sketchImg.id_:this.current.id_
-				designItemDetail.clothes[index].path = this.current.path
+				data.designSingleItemDTOList[0].path =this.sketchImg.path? this.sketchImg.path: this.current.path
-				return
 			}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
+					console.log(rv,'rv');
-					// this.$emit('finishRedesign',this.parentData)
+					this.store.commit("setDesignPreviewData", data);
-					// this.closeModal()
+					designItemDetail.clothes[index].color = rv.clothes[0].color
-					let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
+					designItemDetail.clothes[index].printObject.path = rv.clothes[0].printObject.path
-					console.log(designItemDetail);
+					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()
+					this.store.commit("setDesignItemDetail", designItemDetail);
-					console.log(rv);
+					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;
+				transform-origin: center top;
-				position: absolute;
-				right: 0;
 				cursor: pointer;
 			}
 		}
@@ -303,6 +309,7 @@ export default defineComponent({
 	.result_print{
 		display: flex;	
 		justify-content: space-between;
+		height: 14rem;
 		.print_left{
 			position: relative;
 			 img{

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="overallSingle" @click="random" class="button_second">Random</div>
-						<div v-show="current.printObject.ifSingle" class="print_input">
+						<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}">
+							<div class="designOpenrtion_single" v-show="overallSingle" v-for="item,index in designOpenrtionList" :key="item" :class="{active:printStyleList[index].designOpenrtionBtn}">
-								<img :src="item.url" @click="setpitch(item,index)">
+								<img :src="item.path" @click="setpitch(item,index)">
 							</div>
-							<div class="designOpenrtion_overall" v-show="!current.printObject.ifSingle">
+							<div class="designOpenrtion_overall" v-show="!overallSingle">
-								<img :src="designOpenrtionList[0].url">
+								<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*3}%`;
-			return `${value}%`;
 		},
 		
 		setOveralSingle(){
-			this.current.printObject.ifSingle = this.overallSingle
+			let DesignPrintOperationParent = this.$parent
-			if (!this.current.printObject.ifSingle) {
+			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
 			})
+			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 width = Math.trunc(Math.random()*(sketch.width-sketch.width/3))+1+sketch.width/3
-			let x = sketch.width-Number(this.print.width.replace(/px/g,''))
+			let scale = width / this.print.width.replace(/px/g,'')
-			let y = sketch.height-Number(this.print.height.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,
@@ -477,6 +514,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))
@@ -490,27 +565,37 @@ export default defineComponent({
 			let priority = designItemDetail.clothes.map((v)=>{
                 return v.type
             })
-			// let 
+			// let data = {
-			let data = {
+            //     ...designItemDetail,
-                ...designItemDetail,
+            //     priority:priority,
-                priority:priority,
+            //     timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-                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=>{
+			let data = this.store.state.DesignDetailModule.designPreviewData
-			// 	this.loadingShow = false
+			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;
-					.search_input{
 					width: 9.85rem;
+					display: flex;
+					.search_input{
+						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%;
@@ -766,6 +867,37 @@ export default defineComponent({
 					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;
+						width: .2rem;
-						height: 30px;
+						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;

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;
         },

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,18 +36,19 @@
 				</div>
             </div>
 			<div class="habit_Overal_Single">
-                <div
+				<a-dropdown @click.stop="setOpenType('sex')">
-                    class="habit_Overal_Single_text"
+                    <a-button>
-                    :class="{ active: !workspaceItem.sexType }"
+                        <UserOutlined />
-                >
+                        {{ workspaceItem.sex }}
-                    男
+                        <DownOutlined />
-                </div>
+                    </a-button>
-                <a-switch @change="setSex" v-model:checked="workspaceItem.sexType" />
+                </a-dropdown>
-                <div
+				<div class="habit_model_show habit_sex_show"  v-fade="openType.sex">
-                    class="habit_Overal_Single_text"
+					<ul class="habit_model_list">
-                    :class="{ active: workspaceItem.sexType }"
+						<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">
@@ -57,15 +58,16 @@
                 >
 				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
+                    
                 </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 class="model_img" v-show="systemSeleves">
-						<div v-for="(item,index) in systemSeleves?workspaceItem.system:workspaceItem.seleves" :key="item.id">
+						<div v-mousewheel>
-							<img :src="item.url" alt="">
+							<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',
+			position:'Outwear',
-			sex:'male',
+			sex:'Female',
-			sexType:false,
 			overallSingle:false,
-			current:{
+			mannequinUrl:'',
-
+			mannequinType:'',
-			},
+			mannequinId:'',
-			system:[{
-				id:1,
-				url:"11111"
-			},
-			{
-				id:2,
-				url:"11111"
-			}],
-			seleves:[{
-				id:1,
-				url:"22"
-			},
-			{
-				id:2,
-				url:"222"
-			}],
 		})
-		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({
+		let workspace:any = 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 workspaceItemName = ref('')//设置单独name公共使用
 		let singleTypeList = ref([
-			{
+			
-				value: "Outwear",
+		])
-				label: "Outwear",
+		let sex = ref([
-			},
+			
-			{
-				value: "Blouse",
-				label: "Blouse",
-			},
-			{
-				value: "Dress",
-				label: "Dress",
-			},
-			{
-				value: "Trousers",
-				label: "Trousers",
-			},
-			{
-				value: "Skirt",
-				label: "Skirt",
-			},
 		])
 			
 	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,23 +277,74 @@ 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,
@@ -362,56 +352,92 @@ export default defineComponent({
 			}
 			Https.axiosPost(Https.httpUrls.workspaceList,data).then((rv: any) => {
 				if (rv) {
-					console.log(rv,'workspace');
+					rv.page.content.forEach((v:any) => {
-					this.workspace.workspaceList = rv.page.content
+						v.id_ = v.id
-					this.workspace.workspaceList.forEach((rv:any)=>{
+						if(v.position == "Overall"){
-						if(rv.sex == '男装'){
+							v.overallSingle = false
-							rv.sexType == true
 						}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(){
+		putWorkspace(data:any){
-			if(this.workspaceItem.sexType){
+			Https.axiosPost(Https.httpUrls.workspacesaveOrUpdate,data).then((rv: any) => {
-				this.workspaceItem.sex = 'female'
+				if (rv) {
-			}else{
+					this.getworkspace()
-				this.workspaceItem.sex = 'male'
 				}
+			})
 		},
-		setOverall(){
+		deleteWorkspace(data:any){
-			if(this.workspaceItem.sexType){
+			Https.axiosDelete(Https.httpUrls.workspaceRemove,data).then((rv: any) => {
-				this.workspaceItem.sex = 'female'
+				if (rv) {
-			}else{
+					this.getworkspace()
-				this.workspaceItem.sex = 'male'
+				}
+			})
+		},
+		//
+		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)
+						let data = {
-
+							workSpaceName:this.workspaceItemName,
-						this.workspaceItem.id = 2
+						}
-						this.workspaceItem.name = this.workspaceItemName
+						this.putWorkspace(data)
 						this.openType.addWorkspace = false
 					}else{
-						console.log(this.workspaceItemName,this.workspaceItem);
+						let data:any
-						this.workspace.workspaceList[index].name = this.workspaceItemName 
+						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.id_ = num
-					this.workspaceItem = v
-				}
-			})
 			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
 		},
-		//切换系统还是自己的模特
+		setMannequins(item:any,str:string){//设置模特
-		setSystemSeleves(){
+			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 => {
+				this.openType.sex = false
-					v.putName = 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) {
@@ -722,6 +784,18 @@ export default defineComponent({
 			}
 			.model_img{
 				display: flex;
+				>div{
+					display: flex;
+					
+				}
+				div{
+					width: auto;
+					margin-right: 1rem;
+				}
+				img{
+					width: 10rem;
+					cursor: pointer;
+				}
 			}
 		}
 		

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);

src/component/HomePage/ColorboardUpload.vue

@@ -11,7 +11,6 @@
 				</div>
 			</div>
 		</div>
-      
         <div class="colorboard_upload_right">
             <div class="upload_right_content">
                 <div class="right_content_line">
@@ -122,6 +121,7 @@
 <script>
 import { Chrome,Slider,Sketch,Material,Compact,Swatches,Photoshop } from '@ans1998/vue3-color'
 import { Https } from "@/tool/https";
+import GO from "@/tool/GO";
 import { defineComponent, h,ref } from 'vue'
 import { LoadingOutlined } from '@ant-design/icons-vue';
 import {getCookie} from '@/tool/cookie'
@@ -220,7 +220,7 @@ export default defineComponent({
 				// return `rgb(${r}, ${g}, ${b})`;
 				// box.style.backgroundColor = label.textContent = result.sRGBHex;
 			} catch (e) {
-				message.error("Your browser does not support it")
+				message.warning("Your browser does not support it")
 			}
 		})
 		// if ("EyeDropper" in window) {
@@ -242,11 +242,11 @@ export default defineComponent({
 			}
             this.selectIndex = index
             this.selectColor = color?.r + ''? {rgba:{r:color.r,g:color.g,b:color.b,a:color.a? color.a: 1},hex:hex} : {hex:''}
-            this.fileList = []
+            // this.fileList = []
             this.tcxColor = ''
             this.pantongName = ''
             this.pantongNameList = []
-			this.selectColorList= []
+			// this.selectColorList= []
 			this.reviewColor= {}
 			this.getColorBg = false
         },
@@ -268,7 +268,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")
                 }
             })
         },
@@ -298,17 +298,39 @@ export default defineComponent({
                 file.imgUrl = data_new
                 file.status = 'done'
                 this.fileList.push(file)
-
+                setTimeout(async ()=>{
-                setTimeout(()=>{
                     const colorThief = new ColorThief();
                     let colorImage = this.$refs.colorImage
                     let domImg = colorImage[0];
-                    let color = colorThief.getColor(domImg)
+                    // let color = colorThief.getColor(domImg)
-					let colorHex = this.rgbaToHex(color)
 					let selectColorList = [];
-					let selectColor = colorThief.getPalette(domImg,10)
+					let selectColor = colorThief.getPalette(domImg,9)
+					//排序
+					let obj = {
+						max : 5,
+						min: 5,
+					}
+					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 color = selectColor[0].split(',')
+					let colorHex = this.rgbaToHex(color)
 					let colorLi = []
 					new Set(selectColor).forEach((item)=>{
 						colorLi.push(item.split(","))
@@ -321,6 +343,8 @@ export default defineComponent({
 					});
 					this.selectColorList = selectColorList
                     this.getHsvColor(selectColorList)
+					console.log(color,selectColor);
+				
                     this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1},hex:colorHex}
                 },100)
             };
@@ -345,11 +369,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;
         },
@@ -654,15 +678,15 @@ export default defineComponent({
 						width: 18rem;
 						background: rgba(0,0,0,0);
 						padding-top: 1rem !important;
-						max-width: 170px;
+						max-width: 17rem;
 						padding: 0;
 						.vc-sketch{
 						}
 						.vc-sketch-saturation-wrap{
 							width: 16rem;
 							height: 16rem;
-							max-height: 170px;
+							max-height: 17rem;
-							max-width: 170px;
+							max-width: 17rem;
 							margin: auto;
 							padding-bottom: 0;
 						}
@@ -698,7 +722,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;
@@ -777,7 +801,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;

src/component/HomePage/Generate.vue

@@ -31,6 +31,13 @@
                     <span>Text-Image</span>
                 </label>
             </div>
+			<div v-if="type_.type2 == 'Printboard'" class="printModel">
+				<div @click="printModel.optype = !printModel.optype">{{ printModel.num }}</div>
+				<ul v-show="printModel.optype">
+					<li class="printModel_item" @click="setPrintModel(1)">1</li>
+					<li class="printModel_item" @click="setPrintModel(2)">2</li>
+				</ul>
+			</div>
         </div>
         <div v-else class="input_box">
             <input
@@ -150,13 +157,15 @@
                 <img v-lazy="item.imgUrl" alt="" />
 				<div
 					class="delete_like_file_block"
-					@click.stop="likeFile(item)"
 				>
-					<i v-if="item" class="fi fi-rr-heart"></i>
+					<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
-					<i v-else class="fi fi-sr-heart"></i>
+					<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
 				</div>
             </div>
         </div>
+		<div class="mark_loading" v-show="loadingShow">
+			<a-spin size="large" />
+		</div>
     </div>
 </template>
 <script lang="ts">
@@ -168,6 +177,7 @@ import { useStore } from "vuex";
 import GO from "@/tool/GO";
 import { getCookie } from "@/tool/cookie";
 import { getUploadUrl } from "@/tool/util";
+import { forEach } from "jszip";
 export default defineComponent({
     props: ["msg"],
     setup() {
@@ -200,26 +210,17 @@ export default defineComponent({
         let designType: any = ref(null);
         let store = useStore();
         let fileList: any = ref([
-            {
+          
-                imgUrl: "https://illlustrations.co/static/32913fde3ee589609d98f16c51fcffa6/ee604/day8-printer.png",
-                id_: 1,
-            },
-            {
-                imgUrl: "https://illlustrations.co/static/3edf742257c1d1460eb2e2f998a1df96/ee604/day4-polariod.png",
-                id_: 2,
-            },
-            {
-                imgUrl: "https://illlustrations.co/static/475732e63175f7dc3bf93c84af8b3d11/ee604/day6-open-vault.png",
-                id_: 3,
-            },
-            {
-                imgUrl: "https://illlustrations.co/static/ca430674ef56f1a3a91f705670fd8512/ee604/day17-walkie-talkie.png",
-                id_: 4,
-            },
         ]);
 		let sketchboardList:any = ref([])
 		let collectionElementid = ref()
 		let level2Type = ref('')
+		let printModel = ref({
+			num:1,
+			optype:false,
+		})
+
+		let loadingShow = ref(false)
         return {
             imgList,
             selectImgList,
@@ -239,6 +240,8 @@ export default defineComponent({
 			collectionElementid,
 			level2Type,
 			checkboxImage,
+			printModel,
+			loadingShow,
         };
     },
     data(prop) {
@@ -325,11 +328,11 @@ export default defineComponent({
                 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;
         },
@@ -348,27 +351,49 @@ export default defineComponent({
 					})
 				}
 			})
+        },
+		setPrintModel(num:any){
+			this.printModel = {
+				num : num,
+				optype:false,
+			}
 		},
 		getgenerate(){
+			if(!this.searchPictureName){
+				message.warning(
+						"Please enter content"
+					);
+				return
+			}
 			let data = {
-				generateType:'',
+				generateType:'text',
 				designType:'',
 				collectionElementId:'',
 				level1Type:this.upload.level1Type,
 				level2Type:'',
 				text:this.searchPictureName,
 				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-				version:1,//为1就是Print
+				version:this.printModel.num,//为1就是Print
 			}
+			this.loadingShow = true
 			Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then(
                 (rv) => {
-					// if(rv){
+					if(rv){
-						
+						this.fileList = []
-					// }
+						let arr
-					console.log(rv);
+						rv.generatedCollectionItems.forEach((v:any,index:number)=>{
+							arr = {
+								id:rv.generatedCollectionItems[index].generateItemId,
+								imgUrl:rv.generatedCollectionItems[index].generateItemUrl
+							}
+						this.fileList.push(arr)
+						this.loadingShow = false
 									
+						})
+					}
                 }
             ).catch(res=>{
+				this.loadingShow = false
             });
 		},
         fileUploadChange(data: any) {
@@ -386,7 +411,7 @@ export default defineComponent({
                 );
                 let arr = this.store.state.UploadFilesModule.sketchboard;
                 if (arr.length >= 8) {
-                    message.error("You can select up to 8 images");
+                    message.warning("You can select up to 8 images");
                 } else {
 					this.sketchboardList = fileList
                 }
@@ -454,7 +479,36 @@ export default defineComponent({
                 this.store.commit("setSketchboardFile", this.sketchboardList);
             }
         },
-		likeFile(item:any){
+		likeFile(item:any,str:string){
+
+			if(str == 'like'){
+				let data = {
+					generateDetailId:item.id,
+					level1Type:"Moodboard",
+					level2Type: '',
+					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+				}
+				Https.axiosPost(Https.httpUrls.generateLike, data).then(
+					(rv) => {
+						console.log(rv);
+						item.like = true
+						
+					}
+				).catch(res=>{
+				});
+			}else{
+				
+				let data = {
+					generateDetailId:item.id,
+					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+				}
+				Https.axiosGet(Https.httpUrls.generateDislike, {params:data}).then(
+					(rv) => {
+						item.like = false
+					}
+				).catch(res=>{
+				});
+			}
 			
 		},
         closeModal() {
@@ -503,12 +557,38 @@ export default defineComponent({
                     padding-left: 1.5rem;
                 }
                 span {
-                    font-size: 12px;
+                    font-size: 1.2rem;
                     font-weight: 500;
                 }
             }
         }
     }
+	.printModel{
+		>div{
+			width: 5rem;
+			display: flex;
+			justify-content: center;
+			border-radius: 1rem;
+			margin: 0;
+			border: 2px solid;
+            cursor: pointer;
+		}
+		ul{
+			position: absolute;
+			width: 5rem;
+			text-align: center;
+			margin-top: .3rem;
+			border-radius: 1rem;
+			overflow: hidden;
+			li{
+				background: rgba(0,0,0,.2);
+				cursor: pointer;
+				&.printModel_item:hover{
+					background: rgba(0,0,0,.4);
+				}
+			}
+		}
+	}
     .generage_input {
     }
     .generage_img {
@@ -570,6 +650,9 @@ export default defineComponent({
 					.delete_file_block{
 						pointer-events:none;
 					}
+					.operate_file_block{
+						pointer-events:none;
+					}
 					img {
 					}
 				}
@@ -716,7 +799,7 @@ export default defineComponent({
             box-sizing: border-box;
 
             .material_content_top_title {
-                font-size: 20px;
+                font-size: 2rem;
                 color: #030303;
             }
 

src/component/HomePage/Header.vue

@@ -2,10 +2,11 @@
     <div>
         <header class="header_component">
             <div class="header_right_content">
-                <div class="header_icon icon iconfont icon-touxiang3"></div>
+                <div class="header_user_icon"></div>
+                <!-- <div class="header_icon icon iconfont icon-touxiang3"></div> -->
                 <div class="header_user_content">
-                    <div class="username">{{ userInfo?.userName }}</div>
+                    <div class="username"><span>/</span> hello@{{ userInfo?.userName }}</div>
-                    <div
+                    <!-- <div
                         :class="[
                             'icon',
                             'iconfont',
@@ -13,7 +14,7 @@
                             isShowOperate ? 'icon_rotate' : '',
                         ]"
                         @click.stop="changeShowOperateContent()"
-                    ></div>
+                    ></div> -->
                     <nav class="select_block" v-show="isShowOperate">
                         <!-- <div class="select_item" @click="showBindEmailModal()">
                             <span class="icon iconfont icon-youxiang"></span><span class="select_item_des">bind email</span>
@@ -208,7 +209,7 @@ export default defineComponent({
 
         emailNextStepFun() {
             if (!isEmail(this.email)) {
-                message.error("The email format is incorrect");
+                message.warning("The email format is incorrect");
                 return;
             }
             let data = {
@@ -342,10 +343,11 @@ export default defineComponent({
     display: flex;
 	justify-content: space-between;
 	padding: 0 30px;
+	padding-left: 0;
     width: 100%;
     height: 7rem;
     background: rgba(255, 255, 255, 0.2);
-    border-bottom: 0.1rem solid rgba(3, 3, 3, 0.1);
+    // border-bottom: 0.1rem solid rgba(3, 3, 3, 0.1);
     position: relative;
     align-items: center;
 
@@ -379,9 +381,24 @@ export default defineComponent({
             color: #000;
             cursor: pointer;
             font-weight: 900;
-
+			&.nav_item::before {
+				position: absolute;
+				content: "";
+				display: block;
+				background: #000;
+				height: .3rem;
+				left: 50%;
+				transform: translateX(-50%);
+				bottom: .3rem;
+				width: 0px;
+				transition: 0.3s all;
+			}
 			&.select_nav {
-                background: #e6e6f6;
+				color: #000;
+				transform: scale(1.15);
+			}
+			&.select_nav::before {
+				width: 80%;
 			}
         }
     }
@@ -393,24 +410,37 @@ export default defineComponent({
 		left: 0;
         display: flex;
 		width: 33%;
+		height: 100%;
+		align-items: center;
+		overflow: hidden;
         .header_icon {
             font-size: 3.6rem;
             position: relative;
             top: 0.3rem;
         }
-
+		.header_user_icon{
+			height: 4rem;
+			width: 4rem;
+			background-color: #000;
+			border-radius: 50%;
+			transform: translateX(-40%)scale(1.3);
+		}
         .header_user_content {
-            margin-left: 1rem;
+            // margin-left: 2rem;
             display: flex;
             align-items: center;
             position: relative;
-            top: 1.2rem;
+            // top: 1.2rem;
             height: 3.7rem;
 
             .username {
-                font-size: 1.6rem;
+                font-size: 1.8rem;
                 color: #1a1a1a;
-                margin-right: 0.8rem;
+                margin: 0 0.8rem;
+				font-weight: 900;
+				span{
+					margin: .7rem;
+				}
             }
 
             .icon-xiala {

src/component/HomePage/MarketingSketchUpload.vue

@@ -122,11 +122,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;
         },
@@ -149,7 +149,7 @@ export default defineComponent({
                     status:'done',
                 }
                 if(this.fileList.length == 15){
-                    message.error('Maximum number of allowable file uploads has been exceeded')
+                    message.warning('Maximum number of allowable file uploads has been exceeded')
                     break
                 }
                 this.fileList.push(data)

src/component/HomePage/Material.vue

@@ -65,7 +65,9 @@
 							<a-checkbox v-model:checked="item.pin">PIN</a-checkbox>
 						</div>
 					</div>
-
+					<div v-show="total > imgList.length" class="material_content_list_loding">
+						<img src="@/assets/images/homePage/loading.gif" alt="">
+					</div>
                 </div>
                 <div class="no_data_block loading_block" v-show="isShowLoading">
                     <a-spin size="large"></a-spin>
@@ -88,29 +90,13 @@ export default defineComponent({
     setup(prop) {
         let myMaterialModalShow = ref(false)
         let imgList = ref([
-		{
-                imgUrl: "https://illlustrations.co/static/32913fde3ee589609d98f16c51fcffa6/ee604/day8-printer.png",
-                id_: 1,
-            },
-            {
-                imgUrl: "https://illlustrations.co/static/3edf742257c1d1460eb2e2f998a1df96/ee604/day4-polariod.png",
-                id_: 2,
-            },
-            {
-                imgUrl: "https://illlustrations.co/static/475732e63175f7dc3bf93c84af8b3d11/ee604/day6-open-vault.png",
-                id_: 3,
-            },
-            {
-                imgUrl: "https://illlustrations.co/static/ca430674ef56f1a3a91f705670fd8512/ee604/day17-walkie-talkie.png",
-                id_: 4,
-            },
 		])
 		let store = useStore()
         let isShowLoading:any = ref(false)
         let selectCode:any = ref('')
         let currentPage:any = ref(1)
         let searchPictureName = ref('')
-        let pageSize = ref(20)
+        let pageSize = ref(12)
         let total = ref(0)
         let searcMaterialhName:any = ref('') //搜索名字
         let designType:any = ref(null)
@@ -180,22 +166,28 @@ export default defineComponent({
             this.selectCode = code
             // this.myMaterialModalShow = true
 			if(this.imgList.length == 0){
-				this.getLibraryList()
 			}
+			this.getLibraryList()
+			let loding = document.getElementsByClassName("material_content_list_loding")[0]
+			const ob = new IntersectionObserver(callback,{
+				root:null,
+				threshold:.8
+			})
+			
+			let this_ = this
+			function callback(entries:any, observer:any) {
+			entries.forEach((entry:any) => {
+				if (entry.isIntersecting) {
+					this_.getLibraryList()
+				} else {
+				}
+			});
+			}
+			ob.observe(loding)
         },
         
         selectImgItem(imgData:any){
-            // this.selectImgListIds =  this.selectImgList.map((v:any)=>v.id)
-            // if(this.selectImgListIds.indexOf(imgData.id) === -1){
-            //     this.selectImgList.push(imgData)
-            //     this.selectImgListIds.push(imgData.id)
-            // }else{
-            //     let index = this.selectImgListIds.indexOf(imgData.id)
-            //     this.selectImgList.splice(index,1)
-            //     this.selectImgListIds.splice(index,1)
-            // }
 			imgData.type_ = this.type_
-
 			imgData.resData = JSON.parse(JSON.stringify(imgData))
 			this.store.commit("addGenerateMaterialFils", imgData);
         },
@@ -220,24 +212,42 @@ export default defineComponent({
                 // level2Type:this.designType,
                 page:this.currentPage,
                 pictureName:this.searchPictureName,
-                size:this.pageSize,
+                size:this.pageSize+this.imgList.length,
             }
             this.isShowLoading = true
             Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
                 (rv: any) => {
 					let aa:any = []
-					this.imgList = rv.content					
+					rv.content.forEach((item:any,index:any) => {
-					rv.content.forEach((item:any) => {
 						if(this.type_.type2 == 'Sketchboard'){
 							item.category = "Outwear";
 							item.categoryShow = false;
 						}
-						if(!item.id_){
+						// let arr
-							item.id_ = GO.id++
+						// if(this.type_.type2 == 'Sketchboard'){
+						// 	arr = this.store.state.UploadFilesModule.sketchMaterialFiles
+						// 	item.category = "Outwear";
+						// 	item.categoryShow = false;
+						// }else if(this.type_.type2 == 'Moodboard'){
+						// 	arr = this.store.state.UploadFilesModule.moodboardMaterialFiles
+						// }else if(this.type_.type2 == 'Printboard'){
+						// 	arr = this.store.state.UploadFilesModule.printMaterialFiles
+						// }
+						item.imgUrl = item.url
 						aa.push(item)
-						}else{
+						
-							aa.push(item)
+						// if(!item.id_){
-						}
+						// 	item.id_ = GO.id++
+						// 	aa.push(item)
+						// 	arr.forEach((v:any)=>{
+						// 		if(item.id == v.id){
+						// 			v.checked = false
+						// 		}
+						// 	})
+						// }else{
+						// 	aa.push(item)
+						// }
+
 					});
 					this.imgList = aa
                     this.total = rv.total
@@ -247,8 +257,6 @@ export default defineComponent({
                 this.isShowLoading = false
             });
         },
-
-       
         closeModal(){
             this.myMaterialModalShow = false
             this.searchPictureName = ''
@@ -385,7 +393,7 @@ export default defineComponent({
             box-sizing: border-box;
 
             .material_content_top_title{
-                font-size: 20px;
+                font-size: 2rem;
                 color: #030303;
             }
 
@@ -439,7 +447,8 @@ export default defineComponent({
 			height: 100%;
             overflow-y: auto;
             position: relative;
-			&.generate::-webkit-scrollbar{display: none;}
+			height: 30rem;
+			&.material_content_body::-webkit-scrollbar{display: none;}
 
             .content_img_item{
 				margin: 0 2rem 5rem 0;
@@ -484,7 +493,12 @@ export default defineComponent({
                     color: #030303;
                 }
             }
-
+			.material_content_list_loding{
+				text-align: center;
+				img{
+					height: 10rem;
+				}
+			}
             
         }
 

src/component/HomePage/MoodboardUpload.vue

@@ -56,7 +56,7 @@
                         </div>
                         <div
                             class="upload_file_item upload_component"
-                            v-show="moodboarList.length != 8"
+                            v-show="moodboarList.length < 8"
                         >
                             <a-upload
                                 :action="uploadUrl + '/api/element/upload'"
@@ -74,7 +74,7 @@
                             >
                                 <div
                                     class="upload_tip_block"
-                                    v-show=" moodboarList.length != 8"
+                                    v-show=" moodboarList.length < 8"
                                 >
                                     <i class="fi fi-br-upload"></i>
                                     <!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
@@ -169,8 +169,6 @@ export default defineComponent({
 		let layoutOpen = ref(false)
 		let loadingShow = ref(false)
 		let modalImg:any= computed(()=>{
-			console.log(store.state.UploadFilesModule.disposeMoodboard);
-			
 			return store.state.UploadFilesModule.disposeMoodboard
 		})
         return {
@@ -273,7 +271,7 @@ export default defineComponent({
                 );
 				let arr =  this.store.state.UploadFilesModule.moodboard
 				if(arr.length >= 8){
-					message.error('You can select up to 8 images')
+					message.warning('You can select up to 8 images')
 				}else{
 					this.store.commit("setMoodboardFile", fileList);
 				}
@@ -297,11 +295,11 @@ export default defineComponent({
                 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;
         },
@@ -323,7 +321,8 @@ export default defineComponent({
 				this.store.commit("setMoodboardFile", this.fileList);
 			}
 			if(this.store.state.UploadFilesModule.moodboard.length == 0){
-				this.store.commit("setDisposeMoodboard", {});
+				this.store.commit("clearMoodTemplateId");
+				this.layoutList = []
 			}
         },
         recollection() {
@@ -353,6 +352,7 @@ export default defineComponent({
 					setboard.moodboard.push(v)
 				}
 			})
+			
 			this.store.commit("setMoodboardGenerateFiles", setboard.generate);
 			this.store.commit("setMoodboardMaterialFiles", setboard.material);
 			this.store.commit("setMoodboardFile", setboard.moodboard);
@@ -366,7 +366,7 @@ export default defineComponent({
 				// layout.init('moodboard')
 				layout.init()
 			}else{
-				message.error('Please click Layout to sort randomlys')
+				message.warning('Please click Layout to sort randomlys')
 			}
 			
         },
@@ -460,10 +460,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;
                 }

src/component/HomePage/NewCollectionReview.vue

@@ -5,21 +5,28 @@
         <!-- <div class="img_block_item" v-if="allBoardData?.moodTemplateId">
             <MoodTemplate :fileList="allBoardData?.moodboardFiles" :moodTemplateId="allBoardData?.moodTemplateId"></MoodTemplate>
         </div> -->
-        <div class="img_block_item">
+        <div class="img_block_item" v-if="allBoardData?.disposeMoodboard?.length != 0 && allBoardData?.disposeMoodboard?.[0] != null">
-            <div class="lager_img_item lager_img_disposeMoodboard"  v-for="(mood) in allBoardData.disposeMoodboard" :key="mood">
+            <div  v-for="(mood) in allBoardData?.disposeMoodboard" :key="mood" v-show="mood?.imgUrl != ''" class="lager_img_item lager_img_disposeMoodboard" >
                 <div class="all_img_item_block">
-                    <img class="all_img_content cover_img" :src="mood.imgUrl" > 
+                    <img class="all_img_content cover_img" :src="mood?.imgUrl" > 
+                </div>
+            </div>
+        </div>
+		<div class="img_block_item" v-else>
+			<div  v-for="(mood) in allBoardData?.moodboardFiles" :key="mood" v-show="mood?.imgUrl != ''" class="lager_img_item lager_img_moodboard" >
+                <div class="all_img_item_block">
+                    <img class="all_img_content cover_img" :src="mood?.imgUrl" > 
                 </div>
             </div>
         </div>
 
         <div class="img_block_item">
-            <div class="small_img_item"  v-for="(print) in allBoardData.printboardFiles" :key="print">
+            <div class="small_img_item"  v-for="(print) in allBoardData?.printboardFiles" :key="print">
                 <div class="all_img_item_block">
-                    <img class="all_img_content cover_img" :src="print.imgUrl"> 
+                    <img class="all_img_content cover_img" :src="print?.imgUrl"> 
                 </div>
             </div>
-            <div class="small_img_item"  v-for="(generate) in allBoardData.generatePrintFiles" :key="generate">
+            <div class="small_img_item"  v-for="(generate) in allBoardData?.generatePrintFiles" :key="generate">
                 <div class="all_img_item_block">
                     <img class="all_img_content cover_img" :src="generate.imgUrl"> 
                 </div>
@@ -27,7 +34,7 @@
         </div>
 
         <div class="img_block_item">
-            <div class="color_item"  v-for="(color) in allBoardData.colorBoards" :key="color">
+            <div class="color_item"  v-for="(color) in allBoardData?.colorBoards" :key="color">
                 <div class="color_content" :style="{background:`rgb(${color?.rgbValue?.r},${color?.rgbValue?.g},${color?.rgbValue?.b},${color?.rgbValue?.a})`}"></div>
                 <div class="color_content_body">
                     <div class="color_des">{{color.tcx}}</div>
@@ -63,7 +70,6 @@ export default defineComponent({
     setup() {
         const store = useStore();
         let allBoardData:any = computed(()=>{
-			console.log(store.state.UploadFilesModule.allBoardData,"===============")
 			return store.state.UploadFilesModule.allBoardData})
         return {
             allBoardData,
@@ -75,10 +81,12 @@ export default defineComponent({
 </script>
 <style lang="less" scoped>
 .collection_review{
-    width: 40.8rem;
+    // width: 40.8rem;
+	width: 100%;
     background: #fff;
     position: relative;
 	
+
     .collection_review_mark{
         position: absolute;
         top: 0;
@@ -86,15 +94,14 @@ export default defineComponent({
         width: 100%;
         height: 100%;
         z-index: 2;
+		
     }
 
     .img_block_item{
         margin-bottom: 2rem;
-
         // &.color_block_item{
         //     padding: 0 0.5rem 0 0.3rem;
         // }
-
         .lager_img_item{
             display: inline-block;
             width: 20.4rem;
@@ -104,6 +111,11 @@ export default defineComponent({
 				width: 100%;
 				height: auto;
 			}
+			&.lager_img_moodboard{
+				height: 17rem;
+				img{
+				}
+			}
         }
 
         .sketch_img_item{
@@ -147,7 +159,7 @@ export default defineComponent({
                 font-weight: 500;
                 color: #000000;
                 margin-bottom: 0.5rem;
-                line-height: 1.3rem;
+                line-height: 1;
                 width: 100%;
                 overflow: hidden;
                 white-space: nowrap;

src/component/HomePage/PrintboardUpload.vue

@@ -51,9 +51,8 @@
                             </div>
                             
                         </div>
-                        <div class="upload_file_item upload_component" v-show="fileList.length < 15">
+                        <div class="upload_file_item upload_component" v-show="printboardList.length < 8">
                             <a-upload
-                                v-show="fileList.length < 15"
                                 :action="uploadUrl + '/api/element/upload'"
                                 list-type="picture-card"
                                 :before-upload="beforeUpload"
@@ -64,12 +63,13 @@
                                 v-model:file-list="fileList"
                                 :customRequest="function(){}"
                                 multiple
-                                :maxCount="15"
+                                :maxCount="8 - printboardList.length+fileList.length"
                                 accept=".jpg,.png,.jpeg,.bmp"
                                 @change="fileUploadChange"
                                 >
 								<div
                                     class="upload_tip_block"
+									v-show="printboardList.length < 8"
                                 >
                                     <i class="fi fi-br-upload"></i>
                                     <!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
@@ -108,10 +108,9 @@
 						<img :src="item.imgUrl" @click.stop="generageAdd(item)">
 						<div
 							class="delete_like_file_block"
-							@click.stop="likeFile(item)"
 						>
-							<i v-if="item" class="fi fi-rr-heart"></i>
+							<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
-							<i v-else class="fi fi-sr-heart"></i>
+							<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
 						</div>
 						<div class="pin_block">
 							<a-checkbox v-model:checked="item.pin">PIN</a-checkbox>
@@ -120,6 +119,9 @@
 				</div>
 			</div>
 		</div>
+		<div class="mark_loading" v-show="loadingShow">
+			<a-spin size="large" />
+		</div>
         <Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper>
     </div>
 </template>
@@ -150,23 +152,9 @@ export default defineComponent({
         let openClick: any = ref(1);
 		let generateCheckbox:any = ref()
 		let generateList:any = ref([
-		{
+		
-                imgUrl: "https://illlustrations.co/static/32913fde3ee589609d98f16c51fcffa6/ee604/day8-printer.png",
-                id_: 1,
-            },
-            {
-                imgUrl: "https://illlustrations.co/static/3edf742257c1d1460eb2e2f998a1df96/ee604/day4-polariod.png",
-                id_: 2,
-            },
-            {
-                imgUrl: "https://illlustrations.co/static/475732e63175f7dc3bf93c84af8b3d11/ee604/day6-open-vault.png",
-                id_: 3,
-            },
-            {
-                imgUrl: "https://illlustrations.co/static/ca430674ef56f1a3a91f705670fd8512/ee604/day17-walkie-talkie.png",
-                id_: 4,
-            },
 		])
+		let loadingShow = ref(false)
         return {
             fileList,
             printImgList,
@@ -174,6 +162,7 @@ export default defineComponent({
 			openClick,
 			generateCheckbox,
 			generateList,
+			loadingShow,
         }
     },
     computed:{
@@ -264,11 +253,11 @@ export default defineComponent({
         beforeUpload(file:any,fileList: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!');
             }
             if(isJpgOrPng && isLt2M){
                 this.currentFileNum = fileList.length
@@ -296,7 +285,32 @@ export default defineComponent({
 				this.store.commit("setPrintboardFile", this.fileList);
 			}
         },
-		likeFile(item:any){
+		likeFile(item:any,str:string){
+			if(str == 'like'){
+				let data = {
+					generateDetailId:item.id,
+					level1Type:"Printboard",
+					level2Type: '',
+					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+				}
+				Https.axiosPost(Https.httpUrls.generateLike, data).then(
+					(rv) => {
+						item.like = true
+					}
+				).catch(res=>{
+				});
+			}else{
+				let data = {
+					generateDetailId:item.id,
+					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+				}
+				Https.axiosGet(Https.httpUrls.generateDislike, {params:data}).then(
+					(rv) => {
+						item.like = false
+					}
+				).catch(res=>{
+				});
+			}
 
 		},
         randomRange(min:any, max:any, num:any) { // min最小值，max最大值 num排除的值
@@ -547,7 +561,7 @@ export default defineComponent({
                     status:'done',
                 }
                 if(this.fileList.length == 15){
-                    message.error('Maximum number of allowable file uploads has been exceeded')
+                    message.warning('Maximum number of allowable file uploads has been exceeded')
                     break
                 }
                 this.fileList.push(data)
@@ -559,7 +573,6 @@ export default defineComponent({
 			this.generateCheckbox = value
 		},
 		getgenerate(){
-			
 			let generage:any = this.$refs.Generate
 			let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name
 			let data = {
@@ -567,15 +580,15 @@ export default defineComponent({
 				designType:'',
 				collectionElementId:generage.collectionElementid,
 				level1Type:generage.upload.level1Type,
-				level2Type:generage.level2Type,
+				level2Type:'',
 				text:this.captionGeneration,
 				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-				version:1,//为1就是Print
+				version:2,//为1就是Print
 			}
 			if(generateType == 'image'||generateType == 'text-image'){
 				if(generage.collectionElementid){
 				}else{
-					message.error(
+					message.warning(
 						"Please select a picture"
 					);
 					return
@@ -584,23 +597,32 @@ export default defineComponent({
 				data.collectionElementId = ''
 				data.level2Type = ''
 				// this.beforeUpload(false)
-				// if(this.captionGeneration){
+				if(this.captionGeneration){
-				// }else{
+				}else{
-				// 	message.error(
+					message.warning(
-				// 		"Please enter content"
+						"Please enter content"
-				// 	);
+					);
-				// 	return
+					return
-				// }
 				}
+			}
+			this.loadingShow = true
 			Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then(
                 (rv) => {
-					// if(rv){
+					if(rv){
-						
+						this.generateList = []
-					// }
+						let arr
-					console.log(rv);
+						rv.generatedCollectionItems.forEach((v:any,index:number)=>{
-					
+							arr = {
+								id:rv.generatedCollectionItems[index].generateItemId,
+								imgUrl:rv.generatedCollectionItems[index].generateItemUrl
+							}
+						this.generateList.push(arr)
+						this.loadingShow = false
+						})
+					}
                 }
             ).catch(res=>{
+				this.loadingShow = false
             });
 		},
 		generageAdd(item:any){
@@ -658,10 +680,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;
                 }
@@ -728,7 +750,7 @@ export default defineComponent({
 						width: 6rem;
 						height: 6rem;
 						border: 0.3rem solid #ededed;
-						border-radius: 10px;
+						border-radius: 1rem;
 						margin: 0;
 					}
                 }

src/component/HomePage/RobotAssist.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="robot" @mouseover="robotmax">
+	<div class="robot" @mousemove="robotmax">
 		<div class="robot_top" ref="robotDom" v-fade="robotTop,'block'">
 			<div :class="[item.state == 1?'text_right':'text_left']" v-for="item in record" ref="robotChildDom">
 				<div class="robot_text">{{item.str}}</div>
@@ -45,18 +45,7 @@ export default defineComponent({
         let timeTop:any =  0;
         let timeInput:any =  0;
 		let record:any = ref([
-			{
+			
-				state:1,
-				str:"2222222 22222222 222"
-			},
-			{
-				state:2,
-				str:"2222 22222 22 2222 22"
-			},
-			{
-				state:1,
-				str:"222 22222 222 2222 222"
-			},
 		])
 		const userInfo:any =  {}
 		
@@ -131,24 +120,26 @@ export default defineComponent({
 		roborSend (){
 			this.clearTimer()
 			if(!this.chatCentent){
-                message.error("Please enter content");
+                message.warning("Please enter content");
 				return
 			}
 			this.record.push({
 				state:2,
 				str:this.chatCentent
 			})
+			this.textScroll()
 			let a = true
 			let data = {
 				"user_id" : this.userInfo.userId,
+				// "message" : this.chatCentent,
+				// // "message" : "Hello, can you tell me what holiday is on July 1st",
+				// "session_id":""
+				"session_id":"session_1",
 				"message" : this.chatCentent,
-				// "message" : "Hello, can you tell me what holiday is on July 1st",
-				"session_id":""
 			}
 			let interaction = {onDownloadProgress: (progressEvent:any) => {
 					this.clearTimer()
-					console.log(progressEvent.event.currentTarget.response);
+					// console.log(progressEvent.event.currentTarget.response);
-					
 				//   if(a){
 				// 	this.record.push({
 				// 		state:1,
@@ -160,23 +151,22 @@ export default defineComponent({
 				//   }
                 },
             }
-			// Https.axiosPost(Https.httpUrls.pythonChatStream, data).then(
+			Https.axiosPost(Https.httpUrls.chatStreamTest, data).then(
-			// // Https.axiosPost(Https.httpUrls.pythonChatStream, data,interaction).then(
+			// Https.axiosPost(Https.httpUrls.pythonChatStream, data,interaction).then(
-            //     (rv: any) => {
+                (rv) => {
-			// 		// a = true
+					if(rv){
-			// 		console.log(rv);
+						this.record.push({
-			// 		this.record.push({
+							state:1,
-			// 			state:1,
+							str:rv.output
-			// 			// str:rv.
+						})
-			// 		})
+						this.createTimer()
-			// 		this.createTimer()
-            //     }
-            // ).catch(res=>{
-			// 	this.createTimer()
-            // });
-			this.chatCentent = ""
 						this.textScroll()
-
+					}
+                }
+            ).catch(res=>{
+				// console.log(res,'res');
+            });
+			this.chatCentent = ""
 		},
 		//创建定时器
         createTimer() {

src/component/HomePage/SketchboardUpload.vue

@@ -111,7 +111,7 @@
                         </div>
                         <div
                             class="upload_file_item upload_component"
-                            v-show="fileList.length < 15"
+                            v-show="sketchboardList.length < 8"
                         >
                             <a-upload
                                 :action="uploadUrl + '/api/element/upload'"
@@ -123,12 +123,13 @@
                                 :headers="{ Authorization: token }"
                                 v-model:file-list="fileList"
                                 multiple
-                                :maxCount="15"
+                                :maxCount="8 - sketchboardList.length+fileList.length"
                                 accept=".jpg,.png,.jpeg,.bmp"
                                 @change="(file) => fileUploadChange(file)"
                             >
 								<div
                                     class="upload_tip_block"
+									v-show="sketchboardList.length < 8"
                                 >
                                     <i class="fi fi-br-upload"></i>
                                     <!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
@@ -223,10 +224,9 @@
 						</div>
 						<div
 							class="delete_like_file_block"
-							@click.stop="likeFile(item)"
 						>
-							<i v-if="item" class="fi fi-rr-heart"></i>
+							<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
-							<i v-else class="fi fi-sr-heart"></i>
+							<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
 						</div>
 						<div class="pin_block">
 							<a-checkbox v-model:checked="item.pin">PIN</a-checkbox>
@@ -235,6 +235,9 @@
 				</div>
 			</div>
 		</div>
+		<div class="mark_loading" v-show="loadingShow">
+			<a-spin size="large" />
+		</div>
 		<!-- <layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout> -->
        	
 		
@@ -257,29 +260,16 @@ export default defineComponent({
         let fileList: any = ref([]);
         let openClick: any = ref(1);
 		let generateList:any = ref([
-		{
+	
-                imgUrl: "https://illlustrations.co/static/32913fde3ee589609d98f16c51fcffa6/ee604/day8-printer.png",
-                id_: 1,
-            },
-            {
-                imgUrl: "https://illlustrations.co/static/3edf742257c1d1460eb2e2f998a1df96/ee604/day4-polariod.png",
-                id_: 2,
-            },
-            {
-                imgUrl: "https://illlustrations.co/static/475732e63175f7dc3bf93c84af8b3d11/ee604/day6-open-vault.png",
-                id_: 3,
-            },
-            {
-                imgUrl: "https://illlustrations.co/static/ca430674ef56f1a3a91f705670fd8512/ee604/day17-walkie-talkie.png",
-                id_: 4,
-            },
 		])
 		let generateCheckbox:any = ref()
+		let loadingShow = ref(false)
         return {
             fileList,
             openClick,
 			generateList,
-			generateCheckbox
+			generateCheckbox,
+			loadingShow
         };
     },
     data() {
@@ -399,11 +389,11 @@ export default defineComponent({
                 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;
         },
@@ -459,24 +449,34 @@ export default defineComponent({
 				this.store.commit("setSketchboardFile", this.fileList);
 			}
         },
-		likeFile(item:any){
+		likeFile(item:any,str:string){
-			console.log(item);
+			if(str == 'like'){
 				let data = {
 					generateDetailId:item.id,
 					level1Type:"Sketchboard",
 					level2Type: item.category,
 					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
 				}
-			// Https.axiosPost(Https.httpUrls.generateLike, data).then(
+				Https.axiosPost(Https.httpUrls.generateLike, data).then(
-            //     (rv) => {
+					(rv) => {
-			// 		// if(rv){
+						console.log(rv);
-						
+						item.like = true
-			// 		// }
+					}
-			// 		console.log(rv);
+				).catch(res=>{
-					
+				});
-            //     }
+			}else{
-            // ).catch(res=>{
+				let data = {
-            // });
+					generateDetailId:item.id,
+					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+				}
+				Https.axiosPost(Https.httpUrls.generateLike, data).then(
+					(rv) => {
+						console.log(rv);
+						item.like = false
+					}
+				).catch(res=>{
+				});
+			}
 		},
         recollection() {
             let arr = JSON.parse(
@@ -515,7 +515,7 @@ export default defineComponent({
                     categoryShow: false,
                 };
                 if (this.fileList.length == 15) {
-                    message.error(
+                    message.warning(
                         "Maximum number of allowable file uploads has been exceeded"
                     );
                     break;
@@ -528,6 +528,7 @@ export default defineComponent({
 		getgenerate(){
 			
 			let generage:any = this.$refs.Generate
+			
 			let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name
 			let data = {
 				generateType:generateType,
@@ -542,7 +543,7 @@ export default defineComponent({
 			if(generateType == 'image'||generateType == 'text-image'){
 				if(generage.collectionElementid){
 				}else{
-					message.error(
+					message.warning(
 						"Please select a picture"
 					);
 					return
@@ -553,21 +554,31 @@ export default defineComponent({
 				data.level2Type = ''
 				if(this.captionGeneration){
 				}else{
-					message.error(
+					message.warning(
 						"Please enter content"
 					);
 					return
 				}
 			}
+			this.loadingShow = true
 			Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then(
                 (rv) => {
-					// if(rv){
+					if(rv){
-						
+						this.generateList = []
-					// }
+						let arr
-					console.log(rv);
+						rv.generatedCollectionItems.forEach((v:any,index:number)=>{
-					
+							arr = {
+								id:rv.generatedCollectionItems[index].generateItemId,
+								imgUrl:rv.generatedCollectionItems[index].generateItemUrl,
+								category:generage.level2Type
+							}
+						this.generateList.push(arr)
+						this.loadingShow = false
+						})
+					}
                 }
             ).catch(res=>{
+				this.loadingShow = false
             });
 		},
 		generageAdd(item:any){
@@ -618,10 +629,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;
                 }
@@ -686,7 +697,7 @@ export default defineComponent({
                     width: 6rem;
                     height: 6rem;
                     border: 0.3rem solid #ededed;
-                    border-radius: 10px;
+                    border-radius: 1rem;
                     margin: 0;
                 }
 			.checked{

src/component/HomePage/Upload.vue

@@ -88,11 +88,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;
         },

src/component/HomePage/collectionModal.vue

@@ -3,7 +3,7 @@
          <a-modal class="modal_component collection_modal" 
             v-model:visible="showCollectionModal" 
             :footer="null" 
-            width="80%"
+            width="65%"
             :maskClosable="false"
             :centered="true"
 			:closable="false"
@@ -61,6 +61,7 @@ import MarketingSketchUpload from '@/component/HomePage/MarketingSketchUpload.vu
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { Modal,message } from 'ant-design-vue';
 import {useStore} from 'vuex'
+import GO from "@/tool/GO";
 export default defineComponent({
     components:{
         Generate,
@@ -79,6 +80,17 @@ export default defineComponent({
     },
     methods:{
         nextStep(){
+			if(this.collectionStep == 1){
+				let disposeMoodboard = this.store.state.UploadFilesModule.disposeMoodboard
+				let moodboard = this.store.state.UploadFilesModule.moodboard
+				if(moodboard.length > 1){
+					if (!disposeMoodboard || disposeMoodboard.length == 0) {
+						message.warning('You must select the image and then use the layout.')
+						return
+					}
+				}
+				
+			}
             this.collectionStep = this.collectionStep + 1
         },
 
@@ -113,6 +125,7 @@ export default defineComponent({
 				mask:false,
                 // centered:true,
                 onOk() {
+					GO.id = 0
                     _this.showCollectionModal = false
                     _this.store.commit('clearAllData')
                     _this.collectionStep = 1
@@ -123,10 +136,13 @@ export default defineComponent({
         //完成
         finishCollection(){
             let colorBoards = this.store.state.UploadFilesModule.colorBoards
+			
             if(!colorBoards  ||  colorBoards?.length < 1){
-                message.error('You must choose one or more colors for further process.')
+                message.warning('You must choose one or more colors for further process.')
                 return
             }
+			this.store.commit('clearAllId')
+			GO.id = 0
             this.showCollectionModal =false
             this.collectionStep = 1
             this.$emit('finishCollection')
@@ -155,6 +171,7 @@ export default defineComponent({
 			font-weight: 400;
 			color: rgba(0,0,0,.45);
 		}
+		
 	}
 	.collection_closeIcon{
 		top: 2rem;
@@ -245,7 +262,7 @@ export default defineComponent({
 <style lang="less">
 .collection_modal,.layout_modal{
 	// max-width: 1200px ;
-	max-width: 1150px ;
+	// max-width: 1150px ;
 	.ant-modal-content{
 		border-radius: 10px;
 		overflow: hidden;
@@ -258,6 +275,14 @@ export default defineComponent({
 			// height: calc(65vh - 6.4rem);
 			height: 65rem;
 		}
+		//进度完成字体颜色
+		
+		.ant-progress-circle.ant-progress-status-success .ant-progress-text{
+			color: #000;
+		}
+		.ant-progress-circle .ant-progress-text{
+			color:rgba(0, 0, 0, 0.55);
+		}
 	}
 }
 </style>

src/component/HomePage/layout.vue

@@ -4,7 +4,7 @@
             class="layout_modal"
             v-model:visible="layout"
             :footer="null"
-            width="80%"
+            width="65%"
             :maskClosable="false"
             :centered="true"
             :closable="false"
@@ -620,7 +620,7 @@ export default defineComponent({
     -ms-user-select: none;
     -khtml-user-select: none;
     user-select: none;
-	max-width: 1150px;
+	// max-width: 1150px;
     .ant-modal-body {
         padding: 0;
 		// height: calc(65vh - 6.4rem);

src/component/LibraryPage/ModelsModal.vue

@@ -1,386 +0,0 @@
-<template>
-    <div>
-        <a-modal class="models_modal" 
-            v-model:visible="modelsModalShow" 
-            :footer="null" 
-            width="80%"
-            :maskClosable="false"
-            :centered="true"
-        >
-            <div class="models_header">
-                <div class="models_title">Select Mannequin</div>
-                <div class="models_header_right">
-                    <div class="content_search_block">
-                        <input class="search_input" placeholder="Search by name" v-model="searchPictureName"  @keydown.enter="getLibraryList()">
-                        <div class="search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
-                    </div>
-
-                    <div class="icon iconfont icon-guanbi icon_close" @click="closeModal"></div>
-                </div>
-            </div>
-
-            <div class="models_content">
-
-                <div class="models_content_left">
-                    <div class="content_left_header">
-                        <div class="left_header_title">Current Mannequin</div>
-                        <div class="system_button" @click="setSystemModel()">Standard Mannequin</div>
-                    </div>
-                    <div class="content_left_perview">
-                        <img class="perview_img" :src="selectImg"/>
-                    </div>
-                    <div class="sure_button" @click="confimSure()">ok</div>
-                </div>
-                <div class="models_content_right">
-                    <div class="models_content_body scroll_style">
-                        <div class="content_img_item" v-for="(img) in imgList" :key="img.id" @click="selectImgItem(img)">
-                            <div :class="['content_img_item_block', selectImgListId == img.libraryModelPoint.templateId ? 'select_item_img' :'']">
-                                <img :src="img.url" class="content_img"/>
-                            </div>
-                            <div class="content_img_name">{{img.name}}</div>
-                        </div>
-                        <div class="no_data_block" v-show="!imgList.length && !isShowLoading">
-                            <img src="@/assets/images/homePage/null_img.png">
-                        </div>
-                        <div class="no_data_block" v-show="isShowLoading">
-                            <a-spin size="large"></a-spin>
-                        </div>
-                    </div>
-
-                    <div class="table_pagination">
-                        <a-pagination
-                            v-model:current="currentPage"
-                            v-model:pageSize="pageSize"
-                            :total="total"
-                            :showQuickJumper="true"
-                            :showSizeChanger="false"
-                            @change="changePage"
-                        />
-                    </div>
-                </div>
-                
-               
-            </div>
-        </a-modal>
-    </div>
-    
-</template>
-<script lang="ts">
-import { defineComponent, ref} from 'vue'
-import { Https } from "@/tool/https";
-import {useStore} from 'vuex'
-import { message } from 'ant-design-vue';
-const systemImg = require('../../assets/images/homePage/system_model.png')
-export default defineComponent({
-    setup() {
-        const store = useStore();
-        let searchPictureName = ref('')
-        let modelsModalShow = ref(false)
-        let currentPage:any = ref(1)
-        let pageSize = ref(12)
-        let total = ref(0)
-        let imgList:any = ref([])
-        let isShowLoading:any = ref(false)
-        let selectImgListId:any = ref('')
-        let selectImg:any = ref('')
-      
-        return{
-            store,
-            searchPictureName,
-            modelsModalShow,
-            currentPage,
-            pageSize,
-            total,
-            imgList,
-            isShowLoading,
-            selectImgListId,
-            selectImg
-        }
-    },
-    methods:{
-
-        init(code:any){
-          this.modelsModalShow = true
-          this.selectImg = this.store.state.HomeStoreModule.templateImgUrl || systemImg
-          this.selectImgListId = this.store.state.HomeStoreModule.templateId
-          this.getLibraryList()
-        },
-        
-        selectImgItem(imgData:any){
-           this.selectImgListId = imgData.libraryModelPoint.templateId
-           this.selectImg = imgData.url
-        },
-
-
-        //改变页码
-        changePage(current: number, pageSize: number){
-            this.currentPage = current
-            this.pageSize = pageSize
-            this.getLibraryList()
-        },
-
-        getLibraryList(){
-            let data = {
-                level1Type:'Models',
-                level2Type:'',
-                page:this.currentPage,
-                pictureName:this.searchPictureName,
-                size:this.pageSize,
-            }
-            this.isShowLoading = true
-            Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
-                (rv: any) => {
-                    this.imgList = rv.content
-                    this.total = rv.total
-                    this.isShowLoading = false
-                }
-            ).catch((res)=>{
-                this.isShowLoading = false
-            });
-        },
-
-      
-
-        closeModal(){
-            this.modelsModalShow = false
-            this.searchPictureName = ''
-            this.imgList = []
-            this.currentPage = 1
-            this.pageSize = 10
-            this.total = 0
-        },
-
-        setSystemModel(){
-            this.selectImg = systemImg
-            this.selectImgListId = ''
-        },
-
-        //确定选择model
-        confimSure(){
-            this.$emit('sureSelectModel',{id:this.selectImgListId,url:this.selectImg})
-            this.closeModal()
-        }
-    }
-})
-</script>
-<style lang="less">
-.models_modal{
-
-    .ant-modal-close{
-        width: 3.6rem;
-        height: 3.6rem;
-        position: absolute;
-        top: -1.8rem;
-        right: -1.8rem;
-    }
-
-    .ant-modal-header{
-        display: none;
-    }
-
-    .ant-modal-body{
-        background: #F2F3FB;
-        height: 80vh;
-        min-height: 72rem;
-        overflow-y: hidden;
-        padding: 0;
-    }
-
-    .models_header{
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        width: 100%;
-        height: 6.6rem;
-        background: #F7F7F7;
-        padding: 0 3.4rem 0 3rem;
-
-        .models_title{
-            font-size: 1.8rem;
-            color: #030303;
-            font-weight: 500;
-        }
-
-        .models_header_right{
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            .content_search_block{
-                margin-right: 5rem;
-                display: flex;
-
-                .search_input{
-                    width: 30rem;
-                    padding-left: 1.5rem;
-                    height: 4rem;
-                    line-height: 3.8rem;
-                    background: #FFFFFF;
-                    border: 0.1rem solid #F1F1F1;
-                    font-size: 1.6rem;
-                    font-weight: 400;
-
-                    &::placeholder {
-                        color: #C2C2C2;
-                    }
-                }
-
-                .search_icon_block{
-                    width: 6rem;
-                    height: 4rem;
-                    line-height: 4rem;
-                    text-align: center;
-                    background: #343579;
-                    cursor: pointer;
-
-                    .icon-sousuo{
-                        font-size: 2rem;
-                        color: #FFFFFF;
-                    }
-                }
-            }
-
-            .icon_close{
-                color: rgba(174, 178, 183, 1);
-                font-size: 2.4rem;
-                cursor: pointer;
-            }
-        }
-
-        
-    }
-
-    .models_content{
-        padding-right: 1.4rem;
-        height: calc(100% - 6.6rem);
-        position: relative;
-        display: flex;
-        justify-content: space-between;
-
-        .models_content_left{
-            width: 36.4rem;
-            height: 100%;
-            background: #FFFFFF;
-            flex-shrink: 0;
-
-            .content_left_header{
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                padding: 1.3rem 1rem 0.9rem 3rem;
-
-                .left_header_title{
-                    font-size: 1.6rem;
-                    color: #333333;
-                }
-
-                .system_button{
-                    padding: 0 1rem;
-                    height: 3.2rem;
-                    line-height: 3.2rem;
-                    background: #E6E6F6;
-                    font-size: 1.2rem;
-                    color: #343579;
-                    cursor: pointer;
-                }
-            }
-
-            .content_left_perview{
-                width: 100%;
-                height: calc(100% - 13.8rem);
-                padding: 1.9rem 3rem 0;
-                box-sizing: border-box;
-                margin-bottom: 1.3rem;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-
-                .perview_img{
-                    max-width: 100%;
-                    max-height: 100%;
-                }
-            }
-
-            .sure_button{
-                width: 9.8rem;
-                height: 3.6rem;
-                background: #343579;
-                font-size: 1.4rem;
-                color: #FFFFFF;
-                text-align: center;
-                line-height: 3.6rem;
-                margin: 0 auto;
-                cursor: pointer;
-            }
-        }
-
-        .models_content_right{
-            width: calc(100% - 37rem);
-            height: 100%;
-            background: #FFFFFF;
-            padding: 1.5rem 1rem 1rem 1rem;
-
-            .models_content_body{
-                width: 100%;
-                height: calc(100% - 6rem);
-                overflow-y: auto;
-
-                .content_img_item{
-                    display: inline-block;
-                    vertical-align: top;
-                    padding: 0 0.91rem;
-                    margin-bottom: 1rem;
-
-                    .content_img_item_block{
-                        border: 0.1rem solid #F5F5F5;;
-                        width: 16.5rem;
-                        height: 25.1rem;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        position: relative;
-                        cursor: pointer;
-
-                        &.select_item_img{
-                            border-color: #343579;
-                        }
-
-                        .content_img{
-                            max-width: 100%;
-                            max-height: 100%;
-                        }
-
-                    }
-                    .content_img_name{
-                        width: 16.5rem;
-                        height: 3.4rem;
-                        line-height: 3.4rem;
-                        white-space: nowrap;
-                        text-align: center;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        font-size: 1.4rem;
-                        color: #030303;
-                    }
-                }
-
-                .no_data_block{
-                    width: 100%;
-                    height: 100%;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                }   
-            }
-
-            .table_pagination{
-                width: 100%;
-                text-align: center;
-                margin-top: 2rem;
-            }
-        }
-
-        
-    }
-}
-</style>

src/store/Detail/designDetail.ts

@@ -3,12 +3,13 @@ import {RootState} from '../index'
 
 interface DesignDetail{
     designItemDetail:any,
-   
+	designPreviewData:any,
 }
 
 const DesignDetailModule : Module<DesignDetail,RootState> = {
     state:{
-        designItemDetail:{}
+        designItemDetail:{},
+		designPreviewData:{}
     },
     mutations:{
         setDesignItemDetail(state,files){
@@ -19,6 +20,9 @@ const DesignDetailModule : Module<DesignDetail,RootState> = {
         },
         setDesignItemOthers(state,data){
             state.designItemDetail.others[data.index] = data.others
+        },
+		setDesignPreviewData(state,files){
+            state.designPreviewData = files
         },
 		// setDesignItemOthers(state,data){
         //     state.designItemDetail.others[data.index] = data.others

src/store/index.ts

@@ -3,7 +3,7 @@ import UploadFilesModule from './uploadFile/uploadFile'
 import DesignDetailModule from './Detail/designDetail'
 import HomeStoreModule  from './homeStore/homeStore'
 import UserHabit  from './userHabit/userHabit'
-import Woekspace  from './workspace/workspace'
+import Workspace  from './workspace/workspace'
 export interface RootState{
 
 }
@@ -22,6 +22,6 @@ export default createStore<RootState>({
     DesignDetailModule,
     HomeStoreModule,
 	UserHabit,
-	Woekspace
+	Workspace
   }
 })

src/store/uploadFile/uploadFile.ts

@@ -62,9 +62,9 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
         },
 		addGenerateMaterialFils(state,data:any){
 			let file
-			let arr = state.moodboard
+			let arr
-			if(data.type_.type1 == 'generate'){
+			if(data.type_.type1 == 'generate'){//判断是generate||library
-				data.resData.designType = 'generate'
+				data.resData.designType = 'Generate'
 				if(data.type_.type2 == 'Moodboard'){
 					file = state.moodboardGenerateFiles
 				}else if(data.type_.type2 == 'Sketchboard'){
@@ -73,7 +73,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
 					file = state.printGenerateFiles
 				}
 			}else{
-				data.resData.designType = 'library'
+				data.resData.designType = 'Library'
 				if(data.type_.type2 == 'Moodboard'){
 					file = state.moodboardMaterialFiles
 				}else if(data.type_.type2 == 'Sketchboard'){
@@ -82,9 +82,16 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
 					file = state.printMaterialFiles
 				}
 			}
+			if(data.type_.type2 == 'Moodboard'){//判断选中图片数量
+				arr = state.moodboard
+			}else if(data.type_.type2 == 'Sketchboard'){
+				arr = state.sketchboard
+			}else{
+				arr = state.printboard
+			}
 			if(file.length == 0){
 				if(arr.length >= 8){
-					message.error('You can select up to 8 images')
+					message.warning('You can select up to 8 images')
 				}else{
 					data.checked = true
 					file.push(data)
@@ -92,21 +99,21 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
 			}else{
 				let str = true
 				for (let index = 0; index < file.length; index++) {
-					if(file[index].id_ == data.id_){
+					if(file[index].id == data.id){
-						// data.id_ = GO.id++
+						// data.id = GO.id++
 						str = false
 					}
 				}
 				if(str){
 					if(arr.length >= 8){
-						message.error('You can select up to 8 images')
+						message.warning('You can select up to 8 images')
 					}else{
 						data.checked = true
 						file.push(data)
 					}
 				}else{
 					data.checked = false
-					file = file.filter((v:any)=> v.id_ != data.id_)
+					file = file.filter((v:any)=> v.id != data.id)
 				}
 			}
 			if(data.type_.type1 == 'generate'){
@@ -194,6 +201,17 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
             state.moodTemplateId = ''
 			state.disposeMoodboard = []
         },
+		clearAllId(state){
+            state.moodboard.forEach((v:any) => {
+				delete v.id_
+			});
+			state.sketchboard.forEach((v:any) => {
+				delete v.id_
+			});
+			state.printboard.forEach((v:any) => {
+				delete v.id_
+			});
+		},
         setMoodTemplateId(state,moodTemplateId){
             state.moodTemplateId = moodTemplateId
         },

src/store/userHabit/userHabit.ts

@@ -19,8 +19,6 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
     mutations:{
         res_clothingType(state,data){
             state.clothingType = data
-			console.log(data);
-			
         },
     },
 

src/store/workspace/workspace.ts

@@ -6,12 +6,12 @@ interface DesignDetail{
    
 }
 
-const Woekspace : Module<DesignDetail,RootState> = {
+const Workspace : Module<DesignDetail,RootState> = {
     state:{
         workspace:{}
     },
     mutations:{
-        setWoekspace(state,files){
+        setWorkspace(state,files){
             state.workspace = files
         },
        
@@ -22,4 +22,4 @@ const Woekspace : Module<DesignDetail,RootState> = {
     }
 }
 
-export default Woekspace
+export default Workspace

src/tool/GO.ts

@@ -2,4 +2,55 @@ export default {
 	id : 1,
 	testUrl:'http://192.168.1.5:10086',
 	zIndex:2,
+	setColor:(rgba:any,url:string,obj:any) =>{
+		return new Promise(resolve =>{
+		 var min = obj?.min == undefined ? 5 : obj.min;
+		 var max = obj?.max == undefined ? 5 : obj.max;
+		 var img = new Image();
+		 img.src = url;
+		 img.onload = () => {
+			 const width = img.width;
+			 const height = img.height;
+			 const canvas = document.createElement("canvas");
+			 canvas.width = width
+			 canvas.height = height
+			 var ctx:any = canvas.getContext("2d");
+			 ctx.drawImage(img,0,0)
+			 var data = ctx.getImageData(0,0,width,height)
+			 var ratio = []
+			 for (let index = 0; index < rgba.length; index++) {
+				var num = 0;
+				for (let i = 0; i < data.data.length; i+=4) {
+					var r = data.data[i];
+					var g = data.data[i+1];
+					var b = data.data[i+2];
+					var a = data.data[i+3];
+					if(r - min < rgba[index][0] 
+						&& r + max > rgba[index][0]
+						&& g - min < rgba[index][1] 
+						&& g + max > rgba[index][1]
+						&& b - min < rgba[index][2]
+						&& b + max > rgba[index][2]
+						){
+							num++
+						}
+				}
+				let rgb = {
+					rgb:rgba[index],
+					ratio:parseInt(String((num/ (width * height) * 100).toFixed(6)))
+				}
+				ratio.push(rgb)
+				// console.log((num/ (width * height) * 100).toFixed(2));
+
+			 }
+			 
+			 resolve({
+				 width,
+				 height,
+				 ratio:ratio,
+			 })
+		 }
+		})
+	 
+	 },
 }

src/tool/color.js

@@ -0,0 +1,37 @@
+let setColor = (rgba,url) =>{
+   return new Promise(resolve =>{
+	var img = new Image();
+	img.src = url;
+	img.onload = () => {
+		const width = img.width;
+		const height = img.height;
+		const canvas = docuemnt.createElement("canvas");
+		canvas.width = width
+		canvas.height = height
+		var ctx = canvas.getContext("2d");
+		ctx.drawImage(img,0,0)
+		var data = ctx.getImageData(0,0,width,height)
+		var num = 0;
+		for (let i = 0; i < data.data.length; i+=4) {
+			var r = data.data[i];
+			var g = data.data[i+1];
+			var b = data.data[i+2];
+			var a = data.data[i+3];
+			if(r + min < rgba[0] 
+				&& r + max > rgba[0]
+				&& g + min < rgba[1] 
+				&& g + max > rgba[1]
+				&& b + min < rgba[2]
+				&& b + max > rgba[2]
+				&& a == rgba[3]){
+					num++
+				}
+		}
+		resolve({
+			width,height,num
+		})
+	}
+   })
+};
+
+export default setColor

src/tool/flexible.js

@@ -1,10 +1,10 @@
 let flexible = (designWidth, maxWidth) =>{
     var doc = document, win = window, docEl = doc.documentElement, remStyle = document.createElement("style"), tid;
-    designWidth = designWidth || 1440;
+    designWidth = designWidth || 1920;
-    maxWidth = maxWidth || 1440;
+    maxWidth = maxWidth || 2560;
     function refreshRem() {
         var width = docEl.getBoundingClientRect().width;
-        maxWidth = maxWidth || 1440;
+        maxWidth = maxWidth || 1920;
         width > maxWidth && (width = maxWidth);
         var rem = width * 10 / designWidth;
         remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';

src/tool/https.js

@@ -44,10 +44,10 @@ axios.interceptors.request.use((config) => {
 
 //返回状态判断(添加响应拦截器)
 axios.interceptors.response.use((res) =>{
+	console.log(res);
     if (res.data) {
-        if (res.data.errCode === 0) {
+        if (res.data.errCode === 0 || res.data.code === 200) {
             return Promise.resolve(res.data.data);
-            
         } else {
             message.error(res.data.errMsg)
             return Promise.reject(res.data);
@@ -72,9 +72,9 @@ export const Https = {
     httpUrls: {
         interfaceUrl: '',
         accountIsLogin:'/api/account/isLogin', //判断用户是否登录
-        accountLogin:'/api/account/login', //账号密码登录接口
+        accountLogin:`/api/account/login`, //账号密码登录接口
         preLogin:'/api/account/preLogin',//预先登入
-        accountSendEmail:'/api/account/sendEmail', //发送邮件
+        accountSendEmail:`/api/account/sendEmail`, //发送邮件
         accountResetPwd:'/api/account/resetPwd', //忘记密码修改
         accountLogout:'/api/account/logout',//登出
         accountBindEmail:'/api/account/bindEmail', //绑定邮箱
@@ -83,20 +83,20 @@ export const Https = {
         getRgbByTcx:'/api/element/getRgbByTcx', // 通过hsv值获取潘通信息
         getRgbByHsv:'/api/element/getRgbByHsv', //通过hsv值获取潘通信息
         designCollection:`${httpIp}/api/design/designCollection`, //设计 Conllection
-        reDesignCollection:'/api/design/reDesignCollection',//重新设计 Conllection
+        reDesignCollection:`${httpIp}/api/design/reDesignCollection`,//重新设计 Conllection
         countDesignProcess:'/api/design/countDesignProcess', //统计design进度
-        getRgbByHsvBatch:`${httpIp}/api/element/getRgbByHsvBatch`, //通过hsv值数组批量获取潘通信息
+        getRgbByHsvBatch:`/api/element/getRgbByHsvBatch`, //通过hsv值数组批量获取潘通信息
-        designLike:'/api/design/like', //Design Like
+        designLike:`${httpIp}/api/design/like`, //Design Like
-        designDislike: '/api/design/dislike', //Design Dislike
+        designDislike: `${httpIp}/api/design/dislike`, //Design Dislike
-        queryUserGroup:'/api/history/queryUserGroup', //History用户分页分组列表
+        queryUserGroup:`${httpIp}/api/history/queryUserGroup`, //History用户分页分组列表
-        deleteUserGroup:'/api/history/deleteUserGroup', //History删除用户分组
+        deleteUserGroup:`${httpIp}/api/history/deleteUserGroup`, //History删除用户分组
-        updateUserGroupName:'/api/history/updateUserGroupName', //History修改用户分组名
+        updateUserGroupName:`${httpIp}/api/history/updateUserGroupName`, //History修改用户分组名
-        historyChoose:'/api/history/choose', //History choose
+        historyChoose:`${httpIp}/api/history/choose`, //History choose
-        getDesignDetail:'/api/design/detail/getDetail',//查询design详情
+        getDesignDetail:`/api/design/detail/getDetail`,//查询design详情
         generateHighDesign:'/api/design/detail/generateHighDesign',//生成高级design图片
         getNextSysElement:'/api/design/detail/getNextSysElement',//切换系统的element
         detailPrintDot:'/api/design/detail/printDot',//print打点预览
-        designSingle:'/api/design/detail/designSingle',//单个design
+        designSingle:`/api/design/detail/designSingle`,//单个design
         queryLibraryPage:'/api/library/queryLibraryPage',//Library分页列表
         libraryUpload:'/api/library/upload', // Library文件上传
         batchUpdateLibraryName:'/api/library/batchUpdateLibraryName',//Library修改用户文件名
@@ -105,11 +105,19 @@ export const Https = {
         deleteHighDesign:'/api/design/detail/deleteHighDesign',//删除高级design图片
         saveOrEditTemplatePoint:'/api/library/saveOrEditTemplatePoint',//保存或者编辑template打点
         libraryModelsDot:'/api/library/modelsDot',//Models打点预览
-        pythonChatStream:'/api/python/chatStream',//机器人助力
+        // pythonChatStream:'/api/python/chatStream',//机器人助力
+        chatStreamTest:`${httpIp}/robot/chat_stream_test`,//机器人助力
         workspaceDetail:`${httpIp}/api/workspace/detail`,//用户习惯详情
+        workspaceenumValues:`${httpIp}/api/workspace/enumValues`,//getSex
+		
+        workspaceRemove:`${httpIp}/api/workspace/remove`,//删除用户习惯详情
+        workspacesaveOrUpdate:`${httpIp}/api/workspace/saveOrUpdate`,//修改用户习惯详情
+        getMannequins:`${httpIp}/api/workspace/getMannequins`,//模特
+		
 		workspaceList:`${httpIp}/api/workspace/list`,
         sketchAndPrintGenerate:'/api/generate/sketchAndPrint',//sketchGenerate生成图片
 		generateLike:'/api/generate/like',//喜欢ganerate图片
+		generateDislike:'/api/generate/dislike',//喜欢ganerate图片
         elementUpload:'/api/element/upload',//上传图片
 		
     },

src/views/HistoryPage.vue

@@ -223,7 +223,7 @@ export default defineComponent({
 .history_page {
     width: 100%;
     height: 100%;
-
+	padding: 0 9rem;
     .page_content {
         position: relative;
 

src/views/HomeView.vue

@@ -66,6 +66,7 @@
 
 							<div class="right_content_body">
 								<div class="right_content_img_block scroll_style">
+									<div class="right_content_img_item" v-mousewheel>
 										<div class="content_img_block" v-for="(
 												design, index
 											) in designCollectionList" :key="design?.designItemId" @click="
@@ -77,7 +78,7 @@
 												)
 												">
 											<div class="content_img_flex">
-											<img class="content_img" :src="design.designItemUrl" />
+												<img class="content_img" :src="design.designOutfitUrl" />
 											</div>
 											<div class="icon iconfont icon-jushoucang icon_like" @click.stop="
 												likeDesignCollection(
@@ -88,6 +89,7 @@
 										</div>
 									</div>
 								</div>
+							</div>
 
 							<div class="right_content_header">
 								<div class="content_header_left">
@@ -100,6 +102,7 @@
 
 							<div class="right_content_body">
 								<div class="right_content_img_block scroll_style">
+									<div class="right_content_img_item" v-mousewheel>
 										<div class="content_img_block" v-for="(
 												design, index
 											) in likeDesignCollectionList" :key="design?.id" @click="
@@ -111,8 +114,8 @@
 												)
 												">
 											<div class="content_img_flex">
-											<img class="content_img" v-lazy="design.designItemUrl"
+												<img class="content_img" v-lazy="design.designOutfitUrl"
-												:key="design.designItemUrl" />
+													:key="design.designOutfitUrl" />
 											</div>
 											<div class="icon iconfont icon-jushoucanggift icon_like" @click.stop="
 												dislikeDesignCollection(
@@ -127,11 +130,10 @@
 						</div>
 					</div>
 				</div>
-			<RobotAssist class="robot"></RobotAssist>
+			</div>
 		</div>
 		<CollectionModal ref="collectionModal" @finishCollection="finishCollection()"></CollectionModal>
 		<DesignDetail ref="designDetail" @finishRedesign="finishRedesign"></DesignDetail>
-		<ModelsModal ref="modelsModal" @sureSelectModel="sureSelectModel"></ModelsModal>
 		<ExportNewCoolection id="exportNewCoolection"></ExportNewCoolection>
 		<!-- 导出缩略图的蒙层 start-->
 		<div class="mark_loading" v-show="isShowMark">
@@ -142,14 +144,17 @@
 		<!-- design collection的进度蒙层  start-->
 		<div class="progress_mark" v-show="showDesignMark">
 			<div class="mark_content">
-				<a-progress type="circle" :percent="designProgress" :width="200" />
+				<a-progress type="circle" :percent="designProgress" strokeColor="#341e57" :width="200" />
 				<div>
 					<a-spin :indicator="indicator" />
 				</div>
 			</div>
 		</div>
 		<!-- design collection的进度蒙层  end-->
+		<RobotAssist></RobotAssist>
+
 	</div>
+
 </template>
 
 <script lang="ts">
@@ -158,7 +163,6 @@ import HeaderComponent from "@/component/HomePage/Header.vue";
 import CollectionModal from "@/component/HomePage/collectionModal.vue";
 import NewCollectionReview from "@/component/HomePage/NewCollectionReview.vue";
 import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
-import ModelsModal from "@/component/LibraryPage/ModelsModal.vue";
 import DesignDetail from "@/component/Detail/DesignDetail.vue";
 import RobotAssist from "@/component/HomePage/RobotAssist.vue";
 import html2canvas from "html2canvas";
@@ -176,7 +180,6 @@ export default defineComponent({
 		CollectionModal,
 		NewCollectionReview,
 		DesignDetail,
-		ModelsModal,
 		ExportNewCoolection,
 		RobotAssist,
 	},
@@ -188,9 +191,6 @@ export default defineComponent({
 		let designCollectionList: any = computed(() => {
 			return store.state.HomeStoreModule.designCollectionList;
 		});
-		let templateId: any = computed(() => {
-			return store.state.HomeStoreModule.templateId;
-		}); //模特id
 		let userGroupId: any = computed(() => {
 			return store.state.HomeStoreModule.userGroupId;
 		}); //模特id //当likeDesignCollectionList长度为0时清空，startdesign时清空
@@ -200,14 +200,23 @@ export default defineComponent({
 		let designId: any = computed(() => {
 			return store.state.HomeStoreModule.designId;
 		});
+		let contentImgMax = {
+			width:'',
+			height:'',
+		}
+		let contentImg = {
+			width:'',
+			height:'',
+		}
 		return {
 			store,
 			likeDesignCollectionList,
 			designCollectionList,
 			userGroupId,
-			templateId,
 			designCollectionId,
 			designId,
+			contentImgMax,
+			contentImg,
 		};
 	},
 	data() {
@@ -219,6 +228,7 @@ export default defineComponent({
 				style: {
 					fontSize: "4.8rem",
 					marginTop: "3rem",
+					color:"#341e57",
 				},
 				spin: true,
 			}),
@@ -252,6 +262,39 @@ export default defineComponent({
 			this.store.commit("clearAllData");
 		}
 	},
+	directives:{
+		mousewheel:{
+			mounted (el) {
+				let parent = el.parentNode
+				// el.style.width='100%'
+				// el.style.height='100%'
+				// console.log(el);
+				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: {
 		
 
@@ -330,7 +373,7 @@ export default defineComponent({
 			let { colorBoards } =
 				this.store.state.UploadFilesModule.allBoardData;
 			if (!colorBoards || colorBoards?.length < 1) {
-				message.error(
+				message.warning(
 					"You must choose one or more colors for further process."
 				);
 				return;
@@ -371,7 +414,7 @@ export default defineComponent({
 			let { colorBoards } =
 				this.store.state.UploadFilesModule.allBoardData;
 			if (!colorBoards || colorBoards?.length < 1) {
-				message.error(
+				message.warning(
 					"You must choose one or more colors for further process."
 				);
 				return;
@@ -409,18 +452,18 @@ export default defineComponent({
 			} = this.store.state.UploadFilesModule.allBoardData;
 			// console.log(this.store.state.UploadFilesModule.allBoardData);
 			let workspace = this.store.state.Workspace.workspace
+			console.log(workspace);
 			let data: any = {
 				colorBoards: this.getColorBoard(colorBoards),
 				// marketingSketchs: this.getBoardId(marketingSketchFiles),
 				moodBoards: this.getBoardId(moodboardFiles),
 				printBoards: this.getPrintId(printboardFiles),
-				// printBoards: this.getPrintId(new_printboardFiles),
 				sketchBoards: this.getSkecthBoard(sketchboardFiles),
-				
+				switchCategory: !workspace.overallSingle ?"": workspace.position,
-				switchCategory: workspace.soverallSingle ? workspace.position : "",
+				singleOverall: !workspace.overallSingle ? "overall" : "single",
-				singleOverall: workspace.soverallSingle ? "single" : "overall",
+				systemScale: workspace.systemDesignerPercentage?workspace.systemDesignerPercentage*.01:.3,
-				systemScale: workspace.systemDesignerPercentage,
+				templateId: 96,
-				templateId: this.templateId,
+				// templateId: workspace.mannequinId?workspace.mannequinId:'',
 				moodTemplateId: disposeMoodboard[0] ? String(disposeMoodboard[0].id) : null,
 				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
 			};
@@ -744,17 +787,6 @@ export default defineComponent({
 			}
 		},
 	
-		//选择模特
-		selectModels() {
-			let modelsModal: any = this.$refs.modelsModal;
-			modelsModal.init();
-		},
-
-		//确定选择模特
-		sureSelectModel(event: any) {
-			this.store.commit("setTemplateData", event);
-		},
-
 		//通过url 转为blob格式的数据
 		getImgArrayBuffer(url: any) {
 			return new Promise((resolve, reject) => {
@@ -799,7 +831,7 @@ export default defineComponent({
 					});
 				})
 				.catch((res) => {
-					_this.message.error("Failed to export the file");
+					_this.message.warning("Failed to export the file");
 					this.isShowMark = false;
 				});
 		},
@@ -810,7 +842,7 @@ export default defineComponent({
 .home_page {
 	width: 100%;
 	height: 100%;
-
+	padding: 0 9rem;
 	.page_content {
 		position: relative;
 		.page_content_body {
@@ -824,13 +856,14 @@ export default defineComponent({
 				width: 100%;
 				height: calc(100% - 7rem);
 				display: flex;
-				padding-left: 0.7rem;
+				// padding-left: 0.7rem;
 				box-sizing: border-box;
 
 				.home_page_left {
-					width: 44.4rem;
+					// width: 44.4rem;
+					width: 55rem;
 					height: 100%;
-					padding: 2.3rem 0.7rem 1.7rem 1.3rem;
+					padding: 2rem 0 0 0;
 					background: rgba(255, 255, 255, 0.2);
 
 					.home_page_left_content {
@@ -888,7 +921,7 @@ export default defineComponent({
 							height: 100%;
 
 							.left_info_top {
-								padding: 0 0 1.3rem 2rem;
+								padding: 0 0 1.3rem 0;
 								display: flex;
 
 								.button_margin {
@@ -901,6 +934,9 @@ export default defineComponent({
 								height: calc(100% - 6.9rem);
 								overflow-y: auto;
 								background: #ffffff;
+								&.left_info_content::-webkit-scrollbar {
+									display: none;
+								}
 
 								.left_info_content_body {
 									width: 100%;
@@ -911,9 +947,10 @@ export default defineComponent({
 				}
 
 				.home_page_right {
-					width: calc(100% - 44.4rem);
+					// width: calc(100% - 44.4rem);
+					flex: 1;
 					height: 100%;
-
+					overflow: hidden;
 					.right_top {
 						padding: 2rem 3.2rem 2rem 1.2rem;
 						display: flex;
@@ -967,21 +1004,28 @@ export default defineComponent({
 							height: calc(50% - 5.5rem);
 
 							.right_content_img_block {
-								padding: 0.6rem 2.8rem 0.6rem 0.9rem;
 								overflow-y: auto;
 								background: #f6f6fa;
 								border-radius: 1rem;
 								height: 100%;
-
+								display: flex;
+								width: auto;
+								overflow: hidden;
+								align-items: center;
+								>div{
+									display: flex;
+									padding: 0 2.8rem 0 0.9rem;
+								}
 								.content_img_block {
 									width: 20.1rem;
-									height: 29.5rem;
+									height: 37rem;
+									// height: 29.5rem;
 									margin-right: 3rem;
 									margin-bottom: 1rem;
 									display: inline-block;
 									position: relative;
 									vertical-align: top;
-
+									flex-shrink: 0;
 									&:hover .icon_like {
 										display: block;
 									}
@@ -1057,6 +1101,12 @@ export default defineComponent({
 
 	.ant-modal-mask{
 		background: linear-gradient(45deg, #eee4f3, #f3f4e6);
+		border-radius: 1rem;
+		overflow: hidden;
+		height: calc(100% - 7rem);
+		bottom: 0;
+		top: auto;
+		margin: 0 9rem;
 	}
 	.ant-modal-centered{
 	top: 7rem;

src/views/LibraryPage.vue

@@ -400,11 +400,11 @@ export default defineComponent({
         beforeUpload(file:any,fileList: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!');
             }
             this.currentUploadFileNum = fileList.length
             return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
@@ -480,7 +480,7 @@ export default defineComponent({
 .library_page {
     width: 100%;
     height: 100%;
-
+	padding: 0 9rem;
     .page_content {
         position: relative;
 

src/views/LoginPage.vue

@@ -139,9 +139,9 @@
 				</div>
                 
                 <!-- 邮箱登录 end -->
-				<!-- <div class="login_content_right">
+				<div class="login_content_right">
 					<img src="https://www.aida.com.hk/download/aida_V2_images/image/login-right-image.jpg" alt="">
-				</div> -->
+				</div>
             </div>
 
             <!-- 忘记密码 start -->
@@ -292,7 +292,7 @@ export default defineComponent({
         //邮箱登录的下一步
         emailNextStepFun() {
             if (!isEmail(this.email)) {
-                message.error("The email format is incorrect");
+                message.warning("The email format is incorrect");
                 return;
             }
             let data = {
@@ -325,7 +325,7 @@ export default defineComponent({
         //忘记密码的下一步
         forgetPasswordNextStepFun() {
             if (!isEmail(this.forgetPasswordEmail)) {
-                message.error("The email format is incorrect");
+                message.warning("The email format is incorrect");
                 return;
             }
             let data = {
@@ -373,22 +373,22 @@ export default defineComponent({
 				return;
 			}else{
 				if (!this.username || !this.password || !this.email) {
-                message.error("Please enter your password");
+                message.warning("Please enter your password");
                 return;
             }
 			//输入邮箱
 			if (!this.email) {
-                message.error("Please enter your email address");
+                message.warning("Please enter your email address");
                 return;
             }
 			//判断邮箱格式是否正确
 			if (!isEmail(this.email)) {
-                message.error("The email format is incorrect");
+                message.warning("The email format is incorrect");
                 return;
             }
 			//判断是否同意隐私政策
 			if (!this.checked) {
-                message.error("Agree to all terms, privacy fees and policies");
+                message.warning("Agree to all terms, privacy fees and policies");
                 return;
             }
             let data = {
@@ -519,7 +519,7 @@ export default defineComponent({
             left: 50%;
             transform: translate(-50%,-50%);
             // width: 60rem;
-			width: 120rem;
+			width: 150rem;
             background: #FFFFFF;
             // box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
             border-radius: 1rem;
@@ -530,7 +530,7 @@ export default defineComponent({
 			align-items: center;
 
 			.login_content_left{
-				width: 45%;
+				width: 40%;
 				.login_form_email{
 					position: absolute;
 					left: 0;

vue.config.js

@@ -23,6 +23,20 @@ module.exports = defineConfig({
 		'/api':{
 			target:'http://192.168.1.9:5567',
 			changeOrigin:true,
+		},
+		'/robot':{
+			target:'http://18.167.251.121:9991',
+			changeOrigin:true,
+			pathRewrite:{
+			'^/robot': 'api', // api替换成api
+			}
+		},
+		'xuPei':{
+			target:'http://192.168.1.10:5567',
+			changeOrigin:true,
+			pathRewrite:{
+			'^/xuPei': 'api', // api替换成api
+			}
 		}
     },
   },