fix

2025-04-09 14:09:19 +08:00
parent b6e5f05f06
commit 37f1b36e54
76 changed files with 1969 additions and 970 deletions
--- a/src/component/HomePage/index/model/poseTransfer/index.vue
+++ b/src/component/HomePage/index/model/poseTransfer/index.vue
@@ -2,19 +2,21 @@
 	<div class="poseTransfer">
 		<div class="configuratioBox" :class="{active:button.left}">
 			<div class="configuratio">
-				<div class="title">Give pose for them to select</div>
+				<!-- <div class="title">Give pose for them to select</div> -->
 				<div class="content">
 					<!-- <selectList @selectImgItem="selectImgItem" level1Type="Printboard" type="print"></selectList> -->
 					<div class="selectImg">
 						<div class="head">
-							<div class="text">Current</div>
+							<div class="text">Choose design to transfer</div>
 						</div>
-						<div class="imgBox">
+						<div class="imgBox" v-mousewheel>
 							<div class="item" :class="{active:item.id == selectImg.id}" v-for="item in currentList" @click="selectImgItem(item)">
 								<img :src="item.imgUrl || item.url" alt="">	
+								<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
 							</div>
 							<div class="item" :class="{active:item.id == selectImg.id}" v-for="item in fileList" @click="selectImgItem(item)">
 								<img :src="item.imgUrl || item.url" alt="">	
+								<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
 							</div>
 							<div class="upload_item item">
 								<div class="upload_file_item">
@@ -46,45 +48,50 @@
 					</div>
 					<div class="poses">
 						<div class="head">
-							<div class="text">Target poses</div>
+							<div class="text">Choose pose</div>
 						</div>
-						<div class="imgBox">
-							<div class="item" v-for="item in currentList">
-								<img :src="item.imgUrl" alt="">	
+						<div class="imgBox" v-mousewheel>
+							<div class="item" v-for="item in poseList" @click="selectPose(item)">
+								<img :src="item.firstFrame" 
+									alt=""
+									@mouseenter.stop="gifPlay($event,item)"
+									@mouseleave.stop="gifPause($event,item)" 
+								>	
+								<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
 							</div>
 						</div>
 					</div>
 				</div>	
 			</div>
-			<div class="generate">
-				<div class="gallery_btn" v-show="!isGenerate" @click="getgenerate">
+			<div class="generate input_border">
+				<div class="generage_btn started_btn" v-show="!isGenerate" @click="getgenerate">
 					{{ $t('Generate.Generate') }}
 				</div>
-				<div v-show="isGenerate && !remGenerate" class="gallery_btn">
+				<div v-show="isGenerate && !remGenerate" class="generage_btn started_btn">
 					<i class="fi fi-br-loading"></i>
 				</div>
-				<div v-show="remGenerate" @click="removeGenerate" class="gallery_btn">
+				<div v-show="remGenerate" @click="removeGenerate" class="generage_btn started_btn">
 					{{$t('Generate.Close')}}
 				</div>
 			</div>
 		</div>
 		<div class="likeBox">
 			<div class="element">
-				<div class="title">Selected Product</div>
+				<div class="title"><i class="fi fi-rs-comments"></i><span>Selected Video</span></div>
 				<div class="content">
 					<generalDrag ref="generalDragLeft" v-if="isState" :list="likeList" :isVideo="true" @setBtn="likeSetBtn"></generalDrag>
 				</div>
-				<div class="btnLeft" @click="setSize('left')">
-					<span class="icon iconfont icon-xiala" :class="{'active':button.left}"></span>
-				</div>
-				<div class="btnRight" @click="setSize('right')">
-					<span class="icon iconfont icon-xiala" :class="{'active':button.right}"></span>
+				<!-- <div class="btnLeft" @click="setSize('left')" :class="{'active':button.left}">
+					<span class="icon iconfont icon-xiala"></span>
+				</div> -->
+				<div class="btnRight" @click="setSize('right')" :class="{'active':button.right}">
+					<span class="icon iconfont icon-xiala"></span>
 				</div>
 			</div>
 		</div>
 		<div class="noLikeBox" :class="{active:button.right}">
 			<div class="element">
-				<div class="title">Generate Product</div>
+				<div class="title"><i class="fi fi-rs-comments"></i><span>Generated Video</span></div>
 				<div class="content">
 					<generalDrag ref="generalDragRight" v-if="isState" :list="noLikeList" :isVideo="true" @setBtn="noLikeSetBtn"></generalDrag>
 				</div>
@@ -134,10 +141,13 @@ export default defineComponent({
 			},
 			waitList:[],
 			likeList:computed(()=>store.state.HomeStoreModule.poseTransfer),
-			noLikeList:[{id:1},{id:2},{id:3},{id:4},{id:5},{id:6},],
+			noLikeList:[],
 			isGenerate:false,//判断是否正在进行generate
 			remGenerate:false,
 			removeGenerate:false,
+			generateTime:null as any,
+			poseList:[],
+			selectPose:null as any,
 		})
 		const setIsShowMark:any = inject('setIsShowMark')
 		const dataDom = reactive({
@@ -145,14 +155,33 @@ export default defineComponent({
 			generalDragRight:null as any,
 			scaleVideo:null as any,
 		})
-		const selectImgItem = (item:any)=>{
+		const selectImgItem = (item:any,)=>{
 			data.selectImg = item
-			data.selectImg.minioUrl = getMinioUrl(item.url)
+			data.fileList.forEach((listItem:any)=>listItem.isChecked = false)
+			data.currentList.forEach((listItem:any)=>listItem.isChecked = false)
+			item.isChecked = true
+			if(item.url || item.imgUrl)data.selectImg.minioUrl = getMinioUrl(item.url || item.imgUrl)
 		}
 		const openSetData = ()=>{
 			// dataDom.generalDrag.openSetData()
 			data.currentList = store.state.UploadFilesModule.modularData.toProduct
 			setIsShowMark(false)
+			if(data.poseList.length == 0){
+				getPoseList()		
+			}
+		}
+		const gifPlay = (e:any,item:any)=>{
+			e.target.src = item.gif//使用gif图片
+		}
+		const gifPause = (e:any,item:any)=>{
+			e.target.src = item.firstFrame//静态图片
+		}
+		const getPoseList = ()=>{
+			Https.axiosGet(Https.httpUrls.getAllPose).then((rv)=>{
+				rv[0].isChecked = true
+				data.selectPose = rv[0]?.id || 1
+				data.poseList = rv
+			})	
 		}
 		const setSize = (str:any)=>{
 			data.button[str] = !data.button[str]
@@ -173,7 +202,7 @@ export default defineComponent({
 				data.remGenerate = true
 			},10000)
 			let value = {
-				poseId:1,
+				poseId:data.selectPose,
 				projectId:store.state.Workspace.probjects.id,
 				productImage:data.selectImg.minioUrl,
 			}
@@ -187,11 +216,11 @@ export default defineComponent({
 			})
 		}
 		const setGenerate = (dataList:any)=>{
-			let list = dataList
+			let list:any = dataList
 			let dataNum = dataList.length
 			let state = true
 			data.generateTime = setInterval(()=>{
-				if(!data.isGenerate || data.remGenerate)return
+				if(!data.isGenerate || !data.remGenerate)return
 				if(!state)return
 				state = false
 				Https.axiosGet(Https.httpUrls.poseTransformResult,{params:{taskId:list}}).then(
@@ -205,11 +234,15 @@ export default defineComponent({
 									element.url = element.firstFrameUrl
 									let index = data.noLikeList.findIndex((obj:any) => obj.taskId === element.taskId);
 									data.noLikeList[index] = element
-									list = list.filter((item:any) => item !== element.taskId);
+									console.log(list)
+									list = ''
+									// if(list?.filter)list = list?.filter((item:any) => item !== element.taskId);
+								}else if(element.status == 'Fail'){
+									
 								}
 							});
 							data.waitList = list
-							if((list.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==list.length)){
+							if((!list)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==list.length)){
 								if(rv.filter((item:any)=>item.status == 'Invalid').length ==dataNum){
 									message.info(t('Generate.effectPoor'));
 								}else{
@@ -224,6 +257,7 @@ export default defineComponent({
 						}
 					}
 				).catch(res=>{
+					data.noLikeList = data.noLikeList.filter((item:any)=>item.taskId != list)
 					clearInterval(data.generateTime)
 					clearInterval(data.remGenerateTime)
 					data.isGenerate = false
@@ -276,6 +310,8 @@ export default defineComponent({
 				if(res.errCode == 0){
 					file.imgUrl = res.data.url;
 					file.id = res.data.id
+					data.fileList.forEach((listItem:any)=>listItem.isChecked = false)
+					data.currentList.forEach((listItem:any)=>listItem.isChecked = false)
 					file.isChecked = true
 					file.type = 'ProductElement'
 					// if(props.productimgMenu.value == 'Relight'){
@@ -308,6 +344,7 @@ export default defineComponent({
 				if(item.id == id){
 					if(str == 'zoom'){
 						showViewVideo({url:item.videoUrl})
+						
 					}else if(str == 'like'){
 						likeFile(item,'like',index)
 					}
@@ -353,8 +390,13 @@ export default defineComponent({
 			).catch(res=>{
 			});
 		}
+		const selectPose = (item:any)=>{
+			item.isChecked = true
+			data.selectPose = item?.id || 1
+			data.poseList.forEach((listItem:any)=>listItem.isChecked = false)
+		}
 		onMounted(()=>{
-
+			// showViewVideo({url:'https://www.minio.aida.com.hk:12025/api/v1/download-shared-object/aHR0cHM6Ly93d3cubWluaW8uYWlkYS5jb20uaGs6MTIwMjQvYWlkYS11c2Vycy84OS9wb3NlX3RyYW5zZm9ybV92aWRlby8xMjMtODkubXA0P1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9N0tOVDdNWlNLWkRXM1RVOEJZVlklMkYyMDI1MDQwOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTA0MDhUMDUxOTM1WiZYLUFtei1FeHBpcmVzPTQzMTk5JlgtQW16LVNlY3VyaXR5LVRva2VuPWV5SmhiR2NpT2lKSVV6VXhNaUlzSW5SNWNDSTZJa3BYVkNKOS5leUpoWTJObGMzTkxaWGtpT2lJM1MwNVVOMDFhVTB0YVJGY3pWRlU0UWxsV1dTSXNJbVY0Y0NJNk1UYzBOREV4T0RneE9Td2ljR0Z5Wlc1MElqb2lZV1J0YVc0aWZRLmY0Z3RoTU1BeC1GUnM3eGhWNFdjTUFCUW5lU19BVkIxUDlYbnJQbEFNWUFsVnJwY3RpYXgtU2cyY2FkZHZ0a0VCOU1NbWxGeUlIbU90aGhUWDlqN2lnJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZ2ZXJzaW9uSWQ9bnVsbCZYLUFtei1TaWduYXR1cmU9Yjg5YmQ4ZDg5M2I4ZjBjYmYxZDI3NDFjZmY0NGRiZGNmYWM2NmU0ZGM2OGIwYzQzZDA2OGI4YjYzZjE5YjhhOA'})
 		})
 		return{
 			...toRefs(dataDom),
@@ -363,6 +405,8 @@ export default defineComponent({
 			selectImgItem,
 			setSize,
 			setItemPosition,
+			gifPlay,
+			gifPause,
 			getgenerate,
 			getUploadUrl,
 			beforeUpload,
@@ -370,8 +414,24 @@ export default defineComponent({
 			removeGenerate,
 			likeSetBtn,
 			noLikeSetBtn,
+			selectPose,
 		}
 	},
+	directives:{
+		mousewheel:{
+			mounted (el) {
+				el.addEventListener('wheel',(e:WheelEvent)=>{
+					let num = 0
+					if(e.deltaY > 0){
+						num = 25
+					}else{
+						num = -25
+					}
+					el.scrollBy(num, 0);
+				},{ passive: true })
+			}
+		},
+	},
 	provide() {
 		return {
 		}
@@ -390,22 +450,27 @@ export default defineComponent({
 			display: flex;
 			flex-direction: column;
 			align-items: center;
+			padding-right: 3.8rem;
 			&.active{
 				width: 0;
 				overflow: hidden;
 			}
 			> .generate{
-				margin-top: auto;
+				margin-left: auto;
+				> .started_btn{
+					font-weight: 300;
+				}
 			}
 		}
 		> .configuratioBox > .configuratio{
-			padding-right: 3.8rem;
 			width: 31.8rem;
+			padding-bottom: 1rem;
 			> .title{
 				// font-size: 2.6rem;
 			}
 			> .content{
-				margin-top: 4rem;
+				// margin-top: 4rem;
+				margin-top: 1.8rem;
 				> .selectImg,> .poses{
 					display: flex;
 					flex-direction: column;
@@ -414,24 +479,29 @@ export default defineComponent({
 						max-height: 45rem;
 						margin-top: 2rem;
 						display: flex;
-						flex-wrap: wrap;
+						flex-direction: row;
+						flex-wrap: nowrap;
 						justify-content: space-between;
 						width: 100%;
 						overflow: hidden;
-						overflow-y: auto;
+						overflow-x: auto;
 						> .item{
+							margin-right: 1rem;
 							width: calc(100% / 2 - .5rem);
-							margin-bottom: 1rem;
 							cursor: pointer;
-							border-radius: 2rem;
-							border: 2px solid #8e8e8e;
 							overflow: hidden;
 							display: flex;
 							justify-content: center;
 							flex-shrink: 0;
 							height: 25rem;
-							&.active{
-								border: 2px solid;
+							position: relative;
+							// &.active{
+							// 	border: 2px solid;
+							// }
+							:deep(.ant-checkbox-wrapper){
+								position: absolute;
+								top: 2rem;
+								right: 2rem;
 							}
 							> img{
 								width: 100%;
@@ -447,29 +517,11 @@ export default defineComponent({
 						font-weight: 600;
 						> .text{
 							display: inline-block;
+							font-size: 1.6rem;
 						}
 					}
 				}
-				> .selectImg{
-					> .head{
-						> .text{
-							position: relative;
-							&::before {
-								position: absolute;
-								content: "";
-								display: block;
-								background: #000;
-								height: calc(.4rem*1.2);
-								left: 50%;
-								transform: translateX(-50%);
-								bottom: -.5rem;
-								width: 0px;
-								width: 100%;
-								transition: 0.3s all;
-							}
-						}
-					}
-				}
+			
 				> .poses{
 					margin-top: 3rem;
 				}
@@ -504,8 +556,12 @@ export default defineComponent({
 					>span{
 						transition: all .3s;
 						transform: rotate(90deg);
-						&.active{
+						
+					}
+					&.active{
+						>span{
 							transform: rotate(270deg);
+
 						}
 					}
 				}
@@ -521,6 +577,11 @@ export default defineComponent({
 				}
 				> .title{
 					margin-bottom: 2rem;
+					font-size: 1.6rem;
+					font-weight: 900;
+					> span{
+						margin-left: 1rem;
+					}
 				}
 			}