commit

src/views/HomeView.vue

@@ -1,9 +1,9 @@
 <template>
 	<div class="home_page">
+		<HeaderComponent></HeaderComponent>
 		<div class="page_content">
 			<!-- <img class="page_content_bg" src="@/assets/images/homePage/bg.png" /> -->
 			<div class="page_content_body">
-				<HeaderComponent></HeaderComponent>
 				<div class="home_page_body">
 					<div class="home_page_left">
 						<div class="home_page_left_content">
@@ -44,6 +44,7 @@
 						</div>
 					</div>
 					<div class="home_page_right">
+					
 						<div class="right_top">
 							<div class="right_top_left">
 								<div class="button_second" @click="designNewCollection()">
@@ -67,7 +68,9 @@
 							<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="(
+										<!-- <draggable 
+											group="people" > -->
+											<div class="content_img_block" v-for="(
 												design, index
 											) in designCollectionList" :key="design?.designItemId" @click="
 												designDetail(
@@ -87,6 +90,8 @@
 												)
 												"></div>
 										</div>
+										<!-- </draggable> -->
+										
 									</div>
 								</div>
 							</div>
@@ -102,8 +107,8 @@
 
 							<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="(
+									<div class="right_content_img_item" v-mousewheel id="right_content_img_block">
+										<!-- <div class="content_img_block" v-for="(
 												design, index
 											) in likeDesignCollectionList" :key="design?.id" @click="
 												designDetail(
@@ -123,6 +128,28 @@
 													index
 												)
 												"></div>
+										</div> -->
+										<div class="content_img_block" draggable
+											v-for="(design, index) in likeDesignCollectionList" :key="design.id"
+											@click="designDetail(
+													design,
+													index,
+													likeDesignCollectionList,
+													'like'
+												)"
+											@dragstart="dragstart($event, index)"
+											@dragover.prevent 
+											@drop="dragDrop($event, index)">
+											<div class="content_img_flex">
+												<img class="content_img" v-lazy="design.designOutfitUrl"
+													:key="design.designOutfitUrl" />
+											</div>
+											<div class="icon iconfont icon-jushoucanggift icon_like" @click.stop="
+												dislikeDesignCollection(
+													design,
+													index
+												)
+												"></div>
 										</div>
 									</div>
 								</div>
@@ -171,7 +198,9 @@ import { useStore } from "vuex";
 import { Https } from "@/tool/https";
 import { rgbToHsv, dataURLtoBlob } from "@/tool/util";
 import { LoadingOutlined } from "@ant-design/icons-vue";
+import draggable from 'vuedraggable'
 import JSZip from "jszip";
+import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
 const FileSaver = require("file-saver");
 
 export default defineComponent({
@@ -182,6 +211,7 @@ export default defineComponent({
 		DesignDetail,
 		ExportNewCoolection,
 		RobotAssist,
+		draggable
 	},
 	setup() {
 		const store = useStore();
@@ -208,6 +238,7 @@ export default defineComponent({
 			width:'',
 			height:'',
 		}
+		let userInfo:any = {}
 		return {
 			store,
 			likeDesignCollectionList,
@@ -217,6 +248,7 @@ export default defineComponent({
 			designId,
 			contentImgMax,
 			contentImg,
+			userInfo,
 		};
 	},
 	data() {
@@ -237,9 +269,13 @@ export default defineComponent({
 			startDesignType: "design", //设计类型 design 和 resdesign
 			disLikeLoading: false, //不喜欢防抖
 			likeLoading: false, //喜欢防抖
+			dragIdx:0,
+			designRandom:'',
 		};
 	},
 	mounted() {
+		let userInfo:any = getCookie("userInfo")
+        this.userInfo = JSON.parse(userInfo);
 		this.store.dispatch('get_clothingType')
 
 		// console.log(this.store.state.UserHabit);
@@ -277,12 +313,12 @@ export default defineComponent({
 					parentWidth = parent.offsetWidth
 				})
 				el.addEventListener('mousewheel',(e:MouseEvent)=>{
-					if(0>(e as WheelEvent).deltaY){
+					if(0>(e as WheelEvent).deltaY && width>parentWidth){
 						num+=15
 						if(num >= 0){
 							num = 0
 						}
-					}else{
+					}else if(0<(e as WheelEvent).deltaY && width>parentWidth){
 						num-=15
 						if(num<=parentWidth - width){
 							num = parentWidth - width
@@ -296,7 +332,22 @@ export default defineComponent({
 		}
 	},
 	methods: {
-		
+		addTeam (team:any) {
+		this.likeDesignCollectionList.push(team)
+		},
+	
+		dragstart (e:any, index:any) {
+		this.dragIdx = index
+		},
+		dragDrop (e:any, index:any) {
+		let _teams = this.likeDesignCollectionList  //将hotteams存起来
+		let _dragitem = _teams[this.dragIdx]  //将被拖拽的那条数据存起来
+		_teams.splice(this.dragIdx, 1)      //删除被拖拽的那条数据
+		_teams.splice(index, 0, _dragitem)  //将被拖拽的那条数据放到数组中指定的位置
+		},
+
+
+
 
 		formatter(value: number) {
 			return `${value}%`;
@@ -379,14 +430,10 @@ export default defineComponent({
 				return;
 			}
 			let data = this.getDesignData("");
-			console.log(data);
-			
 			Https.axiosPost(Https.httpUrls.designCollection, data)
 			
 				.then((rv: any) => {
 					if (rv) {
-						console.log(rv);
-						
 						this.store.commit(
 							"setDesignCollectionList",
 							rv.designCollectionItems
@@ -398,17 +445,17 @@ export default defineComponent({
 							rv.collectionId
 						);
 						this.store.commit("setDesignId", rv.designId);
-						this.showDesignMark = false;
 						this.designProgress = 0;
 						this.startDesignType = "design";
 					}
 				})
 				.catch((res) => {
 					this.showDesignMark = false;
-				});
-			this.getDesignProcess();
+				})
+				// setTimeout(() => {
+					this.getDesignProcess(this.designRandom);
+				// }, 1000);
 		},
-
 		//重新设计collection
 		resDesignCollection() {
 			let { colorBoards } =
@@ -428,7 +475,6 @@ export default defineComponent({
 							"setDesignCollectionList",
 							rv.designCollectionItems
 						);
-						this.showDesignMark = false;
 						(this.designProgress = 0),
 							(this.startDesignType = "resDesign");
 					}
@@ -436,7 +482,10 @@ export default defineComponent({
 				.catch((res) => {
 					this.showDesignMark = false;
 				});
-			this.getDesignProcess();
+				// setTimeout(() => {
+					this.getDesignProcess(this.designRandom);
+				// }, 1000);
+
 		},
  
 		getDesignData(designCollectionId: any) {
@@ -450,9 +499,8 @@ export default defineComponent({
 				marketingSketchFiles,
 				moodTemplateId,
 			} = this.store.state.UploadFilesModule.allBoardData;
-			// console.log(this.store.state.UploadFilesModule.allBoardData);
+			this.randomNum()
 			let workspace = this.store.state.Workspace.workspace
-			console.log(workspace);
 			let data: any = {
 				colorBoards: this.getColorBoard(colorBoards),
 				// marketingSketchs: this.getBoardId(marketingSketchFiles),
@@ -462,10 +510,13 @@ export default defineComponent({
 				switchCategory: !workspace.overallSingle ?"": workspace.position,
 				singleOverall: !workspace.overallSingle ? "overall" : "single",
 				systemScale: workspace.systemDesignerPercentage?workspace.systemDesignerPercentage*.01:.3,
-				templateId: 96,
-				// templateId: workspace.mannequinId?workspace.mannequinId:'',
+				// templateId: 3377,
+				templateId: workspace.mannequinId?workspace.mannequinId:'',
+				modelType:workspace.mannequinType,
+				modelSex:workspace.sex,
 				moodTemplateId: disposeMoodboard[0] ? String(disposeMoodboard[0].id) : null,
 				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+				processId:this.designRandom
 			};
 			if (designCollectionId) {
 				data.collectionId = designCollectionId;
@@ -476,22 +527,40 @@ export default defineComponent({
 		},
 
 		//deisgn的进度
-		getDesignProcess() {
-			Https.axiosPost(Https.httpUrls.countDesignProcess, {}).then(
-				(rv: any) => {
-					if (rv < 1 && this.showDesignMark) {
-						this.designProgress = rv * 100;
-						setTimeout(() => {
-							this.getDesignProcess();
-						}, 1000);
-					}
+		getDesignProcess(num:any) {
+			Https.axiosGet(Https.httpUrls.designProcess,{params:{processId:num}}).then((rv: any) => {
+				if (rv) {
+					
 				}
-			);
-		},
+				if (this.showDesignMark) {
+					this.designProgress = rv * 100;
+					if(rv == 100){
+						setTimeout(() => {
+							this.showDesignMark = false 
+							this.designProgress = 0
+						}, 500);
 
+					}
+					setTimeout(() => {
+						this.getDesignProcess(num);
+					}, 500);
+				}
+			})
+			// Https.axiosPost(Https.httpUrls.designProcess, {}).then(
+			// 	(rv: any) => {
+			// 		if (rv < 1 && this.showDesignMark) {
+			// 			this.designProgress = rv * 100;
+			// 			setTimeout(() => {
+			// 				this.getDesignProcess();
+			// 			}, 1000);
+			// 		}
+			// 	}
+			// );
+		},
+		randomNum(){
+			this.designRandom = String(Math.floor(Math.random() * 9000000000000000) + 1000000000000000)
+		},
 		getBoardId(boardData: any) {
-			console.log(boardData);
-			
 			let dataList = boardData.map((v: any) => {
 				let data: any = {
 					id: v.resData.id,
@@ -546,6 +615,7 @@ export default defineComponent({
 				designItemId: design.designItemId,
 				userGroupId: this.userGroupId,
 				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+				designPythonOutfitId:design.designOutfitId?design.designOutfitId:design.designPythonOutfitId
 			};
 			if (this.likeLoading) {
 				return;
@@ -576,6 +646,7 @@ export default defineComponent({
 		dislikeDesignCollection(design: any, index: any) {
 			let data = {
 				designId: design.designId || this.designId,
+				designPythonOutfitId:design.designOutfitId,
 				groupDetailId: design.groupDetailId,
 				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
 			};
@@ -621,25 +692,31 @@ export default defineComponent({
 		dealHistoryChooseData(data: any, type: any) {
 			let collectionData = {
 				moodboardFiles: this.dealViewChooseData(
-					data.collection.moodBoards
+					data.collection.moodBoards,"Moodboard"
 				),
 				printboardFiles: this.dealViewChooseData(
-					data.collection.printBoards
+					data.collection.printBoards,"Printboard"
 				),
 				generatePrintFiles: [],
 				colorBoards: this.dealViewChooseColor(
 					data.collection.colorBoards
 				),
-				skecthboardFiles: this.dealViewChooseData(
-					data.collection.sketchBoards
+				sketchboardFiles: this.dealViewChooseData(
+					data.collection.sketchBoards,"Sketchboard"
 				),
 				marketingSketchFiles: this.dealViewChooseData(
-					data.collection.marketingSketchs
+					data.collection.marketingSketchs,""
 				),
-				moodTemplateId: data.collection.moodTemplateId,
+				disposeMoodboard: data.collection.moodTemplateId?[{
+					id:data.collection.moodTemplateId,
+					imgUrl:data.collection.moodTemplateUrl,
+					resData:{
+						name:data.collection.moodTemplateName,
+					}
+				}]:[]
 			};
 			this.store.commit("setAllBoardDataChoose", collectionData);
-			this.designCollectionId = this.store.commit(
+			this.store.commit(
 				"setDesignCollectionId",
 				data.collection.collectionId
 			);
@@ -650,7 +727,7 @@ export default defineComponent({
 						let data = {
 							...v,
 							groupDetailId: v.id,
-							designItemUrl: v.url,
+							designItemUrl: v.designOutfitUrl,
 						};
 						return data;
 					}
@@ -663,16 +740,20 @@ export default defineComponent({
 		},
 
 		//统一处理选择组的渲染数据
-		dealViewChooseData(data: any) {
+		dealViewChooseData(data: any,str:string) {
 			if (!data) {
 				return [];
 			}
 			let filesList = data.map((v: any) => {
 				let newData: any = {
-					imgUrl: v.url,
+					imgUrl: v.url?v.url:v.designOutfitUrl,
 					id: v.id,
 					status: "done",
 					resData: v,
+					type_:{
+						type1:'material',
+						type2:v.level1Type
+					}
 				};
 				if (v.level1Type === "Sketchboard") {
 					newData.pin = v.isPin;
@@ -707,13 +788,17 @@ export default defineComponent({
 		},
 
 		//导出合成图
-		exportCanvas() {
+		async exportCanvas() {
 			let collectionReview: any = document.querySelector(
 				"#exportNewCoolection"
 			);
+			let rightContentImgBlock: any = document.querySelector(
+				"#right_content_img_block"
+			);
 			let a = document.createElement("a");
 			this.isShowMark = true;
-			html2canvas(collectionReview, { useCORS: true, scale: 3 }).then(
+			let img:any = []
+			await html2canvas(collectionReview, { useCORS: true, scale: 3 }).then(
 				(canvas) => {
 					let blob: any = dataURLtoBlob(
 						canvas.toDataURL("image/png")
@@ -721,21 +806,18 @@ export default defineComponent({
 					let allBoardData: any =
 						this.store.state.UploadFilesModule.allBoardData;
 					let index = 0;
-					let img = [
-						{
+					img.push({
 							imgUrl: URL.createObjectURL(blob),
 							name: "collection.png",
-						},
-					];
+						})
 					for (let key in allBoardData) {
 						if (key !== "colorBoards" && key !== "moodTemplateId") {
 							for (let item of allBoardData[key]) {
-								let nameTail = item.imgUrl.split(".").pop();
-								// console.log(nameTail, 666);
+								let nameTail = item?.imgUrl?.split(".").pop().split("?").shift();
 								let data = {
 									imgUrl: item.imgUrl,
 									name:
-										item.resData.name +
+										item?.resData?.name +
 										index +
 										"." +
 										nameTail,
@@ -745,12 +827,54 @@ export default defineComponent({
 							}
 						}
 					}
-					this.downImg(img);
 					// a.setAttribute('href', URL.createObjectURL(blob));
 					// a.setAttribute('download', `collection.png`);
 					// a.click();
 				}
 			);
+			await html2canvas(rightContentImgBlock, { useCORS: true, scale: 3 }).then(
+				(canvas) => {
+					let blob: any = dataURLtoBlob(
+						canvas.toDataURL("image/png")
+					);
+					let allBoardData: any =
+						this.store.state.UploadFilesModule.allBoardData;
+					let index = 0;
+					img.push({
+							imgUrl: URL.createObjectURL(blob),
+							name: "achievement.png",
+						},)
+					this.likeDesignCollectionList.forEach((item:any) => {
+						let data = {
+							imgUrl:item.designItemUrl,
+							name:item.pictureName
+						}
+						img.push(data)
+					});
+					// for (let key in allBoardData) {
+					// 	if (key !== "colorBoards" && key !== "moodTemplateId") {
+					// 		for (let item of allBoardData[key]) {
+					// 			// console.log(item, 666);
+
+					// 			let nameTail = item.imgUrl.split(".").pop().split("?").shift();
+								
+					// 			let data = {
+					// 				imgUrl: item.imgUrl,
+					// 				name:
+					// 					item?.resData?.name +
+					// 					index +
+					// 					"." +
+					// 					nameTail,
+					// 			};
+					// 			img.push(data);
+					// 			index++;
+					// 		}
+					// 	}
+					// }
+				}
+			);
+			this.downImg(img);
+			
 		},
 
 		//打开图片详情
@@ -760,8 +884,8 @@ export default defineComponent({
 			collectionList: any,
 			type: string
 		) {
-			
 			let designDetail: any = this.$refs.designDetail;
+			design.designOutfitId = design.designPythonOutfitId?design.designPythonOutfitId:design.designOutfitId
 			let data = {
 				design: design,
 				index: index,
@@ -821,7 +945,6 @@ export default defineComponent({
 					});
 				promises.push(promise);
 			}
-
 			Promise.all(promises)
 				.then(() => {
 					zip.generateAsync({ type: "blob" }).then((content: any) => {
@@ -843,6 +966,7 @@ export default defineComponent({
 	width: 100%;
 	height: 100%;
 	padding: 0 9rem;
+	overflow: hidden;
 	.page_content {
 		position: relative;
 		.page_content_body {
@@ -951,6 +1075,9 @@ export default defineComponent({
 					flex: 1;
 					height: 100%;
 					overflow: hidden;
+					display: flex;
+					flex-direction: column;
+					justify-content: space-between;
 					.right_top {
 						padding: 2rem 3.2rem 2rem 1.2rem;
 						display: flex;
@@ -997,7 +1124,6 @@ export default defineComponent({
 								}
 							}
 						}
-
 						.right_content_body {
 							padding: 0 1.8rem 0 1.2rem;
 							background: rgba(255, 255, 255, 0.2);
@@ -1015,13 +1141,15 @@ export default defineComponent({
 								>div{
 									display: flex;
 									padding: 0 2.8rem 0 0.9rem;
+									height: 100%;
+									align-items: center;
 								}
 								.content_img_block {
 									width: 20.1rem;
 									height: 37rem;
 									// height: 29.5rem;
 									margin-right: 3rem;
-									margin-bottom: 1rem;
+									// margin-bottom: 1rem;
 									display: inline-block;
 									position: relative;
 									vertical-align: top;