aida_front/src/component/home/tools/poseTransfer/index.vue

<template>
	<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="content">
					<!-- <selectList @selectImgItem="selectImgItem" level1Type="Printboard" type="print"></selectList> -->
					<div class="selectImg">
						<div class="head">
							<div class="text">Choose design to transfer</div>
						</div>
						<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,index in fileList" @click="selectImgItem(item)">
								<div class="" v-if="item.status == 'uploading'" style="display: flex;align-items: center;">
									<a-spin size="large" />
								</div>
								<img v-show="item.status != 'uploading'" :src="item.imgUrl || item.url" alt="">	
								<div v-show="item.status != 'uploading'" class="btnBox">
									<div :class="{active:item.isChecked}">
										<i class="fi fi-br-check"></i>
									</div>
									<div @click.stop="setUploadDelete(item,index)">
										<i class="fi fi-rr-trash icon_delete"></i>
									</div>
								</div>
							</div>
							<div class="upload_item item">
								<div class="upload_file_item">
									<a-upload
										:action="getUploadUrl() + '/api/history/toProductImageElementUpload'"
										list-type="picture-card"
										:capture="null"
										:data="{
											...upload,
										}"
										:headers="{ Authorization: token }"
										:before-upload="beforeUpload"
										v-model:file-list="fileList"
										:multiple="true"
										accept=".jpg,.png,.jpeg,.bmp"
										@change="(file) => fileUploadChange(file)"
									>
										<div
											class="upload_tip_block"
										>
											<i class="fi fi-br-upload"></i>
											<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
										</div>
									</a-upload>
								</div>	
							</div>
						</div>
					</div>
					<div class="poses">
						<div class="head">
							<div class="text">Choose pose</div>
						</div>
						<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="generage_btn_box" style="margin-left: auto;">
				<!-- <div class="generage_btn started_btn" v-show="!isGenerate" @click="getgenerate">
					{{ $t('Generate.Generate') }}
				</div> -->
				<div class="generage_btn started_btn"  v-show="!isGenerate">
					<i class="fi fi-bs-magic-wand" style="background-color: #000; font-size: 2.3rem; flex: 1;margin: 0;" @click="getgenerate()"></i>
					<div class="icon iconfont icon-xiala" :class="{active:speedState}" @click.stop="openSpeed"></div>
					<div class="content" v-show="speedState">
						<div v-for="item in speedList" :key="item.value" :class="{active:item.value == speedData.value}" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div>
					</div>
				</div>
				<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="generage_btn started_btn">
					{{$t('Generate.Close')}}
				</div>
			</div>
		</div>
		<div class="likeBox">
			<div class="element">
				<div class="title"><i class="fi fi-rs-comments"></i><span>Selected Video</span></div>
				<div class="content">
					<generalDrag ref="generalDragLeft" :list="likeList" :isLike="true" :isVideo="true" @setBtn="likeSetBtn"></generalDrag>
				</div>
				<!-- <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"><i class="fi fi-rs-comments"></i><span>Generated Video</span></div>
				<div class="content">
					<generalDrag ref="generalDragRight" :list="noLikeList" :isVideo="true" @setBtn="noLikeSetBtn"></generalDrag>
				</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,inject,nextTick,watch,createVNode,toRefs, reactive, onMounted} from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { Upload,message,Modal } from 'ant-design-vue';
import { useI18n } from 'vue-i18n'
import generalDrag from '@/component/modules/generalDrag.vue';
import { getUploadUrl,isMoible,getMinioUrl } from "@/tool/util";
import { getCookie,setCookie } from "@/tool/cookie";
import  showViewVideo from "@/tool/mount";

// import selectList from '@/component/DetailCopy/module/selectList.vue';
export default defineComponent({
	components:{
		generalDrag,
		// selectList,
	},
	props:{
		
	},
	emits:[],
	setup(props,{emit}) {
		const {t} = useI18n()
		const store = useStore();
		const data:any = reactive({
			button:{
				left:false,
				right:false,
			},
			currentList:[],
			fileList:[],
			selectImg:{},
			token:getCookie('token'),
			upload:{
				projectId:computed(()=>store.state.Workspace.probjects.id)
			},
			waitList:[],
			likeList:computed(()=>store.state.HomeStoreModule.poseTransfer.likedList),
			noLikeList:computed(()=>store.state.HomeStoreModule.poseTransfer.list),
			isGenerate:false,//判断是否正在进行generate
			remGenerate:false,
			removeGenerate:false,
			generateTime:null as any,
			poseList:[],
			selectPose:null as any,
		})
		watch(()=>store.state.HomeStoreModule.uploadElement.length,(newVal,oldVal)=>{
			data.fileList = store.state.HomeStoreModule.uploadElement
		})
		watch(()=>store.state.HomeStoreModule.poseTransfer.list.length,(newVal,oldVal)=>{
			let list = store.state.HomeStoreModule.poseTransfer.list
			data.isGenerate = true
			data.remGenerate = true
			let taskIdList = list.filter((item:any)=>!item.id)
			if(taskIdList.length > 0)setGenerate(taskIdList[0].taskId)
		})
		let speed = reactive({
			speedList:[
				{
					title:'Generate high-quality content',
					label:'High',
					value:'',
				},{
					title:'Generate using Wanxiang',
					label:'WX',
					value:'wx',
				},
			],
			speedState:false,
			speedData:{
				title:'Generate high-quality content',
				label:'High',
				value:'',
			},
		})
		const setIsShowMark:any = inject('setIsShowMark')
		const createProbject:any = inject('createProbject')
		const dataDom = reactive({
			generalDragLeft:null as any,
			generalDragRight:null as any,
			scaleVideo:null as any,
		})
		const selectImgItem = (item:any,)=>{
			if(item.isChecked){
				item.isChecked = !item.isChecked
				return
			}
			data.selectImg = item
			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
			data.currentList = data.currentList?data.currentList:[]
			setIsShowMark(false)
			if(data.poseList.length == 0){
				getPoseList()		
			}
			// setCloudImg()
		}
		// const setCloudImg = ()=>{
		// 	let arr = store.state.UploadFilesModule.cloudList
		// 	let list = JSON.parse(JSON.stringify(arr.poseTransfer)) || []
		// 	list.forEach((item:any)=>{
		// 		item.url = item.firstFrameUrl	
		// 		data.noLikeList.unshift(item)
		// 	})
		// 	store.commit('clearCloudList','poseTransfer')
		// }
		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]
			setItemPosition()
		}
		const setItemPosition = ()=>{
			setTimeout(()=>{
				dataDom.generalDragLeft.setItemPosition()
				dataDom.generalDragRight.setItemPosition()
			},200)
		}
		const getgenerate = ()=>{
			if(!data.selectImg.minioUrl)return
			if(data.isGenerate)return

			data.isGenerate = true
			// data.remGenerateTime = setTimeout(()=>{
			// },10000)
			let value = {
				poseId:data.selectPose,
				projectId:store.state.Workspace.probjects.id,
				productImage:data.selectImg.minioUrl,
				modelName:speed.speedData.value,
			}
			Https.axiosPost(Https.httpUrls.poseTransform,value).then((rv)=>{
				data.remGenerate = true
				data.noLikeList.unshift({taskId:rv})
				setGenerate(rv)
			}).catch((res:any)=>{
				data.isGenerate = false
				clearInterval(data.remGenerateTime)
				data.remGenerate = false
			})
		}
		const setGenerate = (dataList:any)=>{
			let list:any = dataList
			data.waitList = list
			let dataNum = dataList.length
			let state = true
			data.generateTime = setInterval(()=>{
				if(!data.isGenerate || !data.remGenerate)return
				if(!state)return
				state = false
				Https.axiosPost(Https.httpUrls.poseTransformResult,{taskId:list}).then(
					(rv) => {
						rv=[rv]
						state = true
						if(data.isGenerate){//防止取消后有正在执行的获取状态
							// data.waitList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
							rv.forEach((element:any) => {
								if(element.status == 'Success'){
									element.url = element.firstFrameUrl
									let index = data.noLikeList.findIndex((obj:any) => obj.taskId === element.taskId);
									data.noLikeList[index] = element
									list = ''
									// if(list?.filter)list = list?.filter((item:any) => item !== element.taskId);
									store.dispatch('getCredits')
								}else if(element.status == 'Fail'){
									let index = data.noLikeList.findIndex((obj:any) => obj.taskId === element.taskId);
									data.noLikeList.splice(index,1)
									clearInterval(data.generateTime)
									clearInterval(data.remGenerateTime)
									data.remGenerate = false
									data.isGenerate = false
									store.dispatch('getCredits')
								}
							});
						}
					}
				).catch(res=>{
					let index = data.noLikeList.findIndex((obj:any) => obj.taskId === list);
					data.noLikeList.splice(index,1)
					clearInterval(data.generateTime)
					clearInterval(data.remGenerateTime)
					data.isGenerate = false
					data.remGenerate = false
				});
			},20000)
		}
		const removeGenerate = ()=>{
			//取消操作
			data.isGenerate = false
			data.remGenerate = false
			clearInterval(data.generateTime)
			if(data.waitList){
				// let str = data.waitList.map((obj:any) => obj.taskId).join(',');
				let value = {
					uniqueId:data.waitList,
					userId:store.state.UserHabit.userDetail.userId,
					timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
					type: 'PoseTransferation'
				}
				Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:value}).then(
					(rv) => {
						data.waitList = []
						data.noLikeList = data.noLikeList.filter((item:any)=>item.status == 'Success')
					}
				).catch(res=>{
				});
			}
		}
		let beforeUpload = async (file: any)=>{
            const isJpgOrPng =
                file.type === "image/jpeg" ||
                file.type === "image/png" ||
                file.type === "image/jpg" ||
                file.type === "image/bmp";
            if (!isJpgOrPng) {
                message.info(useI18n().t('MoodboardUpload.jsContent3'));
            }
            const isLt2M = file.size / 1024 / 1024 < 5;
            if (!isLt2M) {
                message.info(useI18n().t('MoodboardUpload.jsContent4'));
            }
			if(!data.upload.projectId){
				await createProbject()
			}
            return (isJpgOrPng && isLt2M && data.upload.projectId) || Upload.LIST_IGNORE;
        }
		const fileUploadChange = (value: any)=> {
            let file = value.file;
			let bor = true
            if (file.status === "done") {
                let res = JSON.parse(file.xhr.response);
				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'){
					// 	file.type = "ToProductImage"
					// }
					data.selectImg = res.data
					data.fileList.filter((v: any) => v.status === "done");
				}else{
					bor = false
				}
				// this.showFileList = productImgData.fileList
            } else if (file.status === "error") {
				bor = false
            }
        }
		const likeSetBtn = (id:any,str:string)=>{
			data.likeList.forEach((item:any,index:any)=>{
				if(item.id == id && id){
					if(str == 'zoom'){
						showViewVideo({url:item.videoUrl})
					}else if(str == 'like'){
						likeFile(item,'noLike',index)
					}
				}
			})
			
		}
		const noLikeSetBtn = (id:any,str:string)=>{
			if(str == 'delete'){
				data.noLikeList = data.noLikeList.filter((v:any) => v.id != id);
			}else{
				data.noLikeList.forEach((item:any,index:any)=>{
					if(item.id == id && id){
						if(str == 'zoom'){
							showViewVideo({url:item.videoUrl})
							
						}else if(str == 'like'){
							likeFile(item,'like',index)
						}
					}
				})
			}
			
		}
		let likeFile = (item:any,str:any,index:any) =>{
			let url
			let value = {
			}
			if(str == 'like'){
				value = {
					likeOrDislike:'like',
					transformedId:item.id,
					projectId:store.state.Workspace.probjects.id,
				}
			}else{
				value = {
					likeOrDislike:'dislike',
					transformedId:item.id,
					projectId:store.state.Workspace.probjects.id,
				}
			}
			Https.axiosPost(Https.httpUrls.poselikeOrDisike, {},{params:value}).then(
				(rv) => {
					if(str == 'like'){
						let value = {
							likedList:[item],
							str:'add',
							index:-1,
						}
						store.commit("setPoseTransfer", value);
						data.noLikeList.splice(index,1)
					}else{
						let value = {
							likedList:[item],
							str:'splice',
							index:index,
						}
						data.noLikeList.push(item)
						store.commit("setPoseTransfer", value);
						
					}
				}
			).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'})
		})
		const openSpeed = ()=>{
			speed.speedState = !speed.speedState
			if(speed.speedState){
				document.addEventListener('click',openSpeed)
			}else{
				document.removeEventListener('click',openSpeed)
			}
		}
		const setSpeed = (item:any)=>{
			speed.speedData = item
			speed.speedState = false
		}
		const setUploadDelete = (item:any,index:any)=>{
			let value = {
				id:item.id
			}
			Https.axiosPost(Https.httpUrls.toProductImageElementDelete,{},{params:value}).then((rv)=>{
				let storeData = {
					str:'delete',
					index,
				}
				store.commit('setUploadElement',storeData)
			})
		}
		return{
			...toRefs(speed),
			...toRefs(dataDom),
			...toRefs(data),
			openSetData,
			selectImgItem,
			setSize,
			setItemPosition,
			gifPlay,
			gifPause,
			getgenerate,
			getUploadUrl,
			beforeUpload,
			fileUploadChange,
			removeGenerate,
			likeSetBtn,
			noLikeSetBtn,
			selectPose,
			openSpeed,
			setSpeed,
			setUploadDelete,
		}
	},
	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 {
		}
	},
})
</script>
<style lang="less" scoped>
	.poseTransfer{
		width: 100%;
		height: 100%;
		position: relative;
		font-size: 2rem;
		font-weight: 900;
		display: flex;
		> .configuratioBox{
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-right: 3.8rem;
			width: 39rem;
			&.active{
				width: 0;
				overflow: hidden;
			}
			> .generate{
				margin-left: auto;
				> .started_btn{
					font-weight: 300;
				}
				.generage_btn{
					width: 10rem;
					position: relative;
				}
				.icon-xiala{
					margin-left: 1rem;
					transition: all .3s;
					cursor: pointer;
					&.active{
						transform: rotate(180deg);
					}
				}
				.content{
					position: absolute;
					top: 100%;
					width: 100%;
					left: 0rem;
					text-align: center;
					border-radius: calc(1rem* 1.2);
					overflow: hidden;
					z-index: 3;
					margin-top: .2rem;
					>div{
						background: #cccccc;
						line-height: 2;
						font-size: 1.8rem;
						cursor: pointer;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						&.active{
							background-color: #616161;
						}
					}
					>div:hover{
						background: #999999;
					}
				}
			}
		}
		> .configuratioBox > .configuratio{
			width: 100%;
			padding-bottom: 1rem;
			> .title{
				// font-size: 2.6rem;
			}
			> .content{
				// margin-top: 4rem;
				> .selectImg,> .poses{
					display: flex;
					flex-direction: column;
					> .imgBox{
						flex: 1;
						max-height: 45rem;
						margin-top: 2rem;
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						justify-content: space-between;
						width: 100%;
						overflow: hidden;
						overflow-x: auto;
						> .item{
							margin-right: 1rem;
							width: calc(100% / 2 - .5rem);
							cursor: pointer;
							overflow: hidden;
							display: flex;
							justify-content: center;
							flex-shrink: 0;
							height: 25rem;
							position: relative;
							// &.active{
							// 	border: 2px solid;
							// }
							:deep(.ant-checkbox-wrapper){
								position: absolute;
								top: 2rem;
								right: 2rem;
							}
							> .btnBox{
								position: absolute;
								right: 1rem;
								top: 1rem;
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: center;
								> div{
									width: 2rem;
									height: 2rem;
									display: flex;
									border: 1px solid;
									align-items: center;
									border-radius: .5rem;
									justify-content: center;
									cursor: pointer;
									margin-bottom: 1rem;
									> i{
										display: flex;
									}
									>.fi-br-check{
										color: #fff;
										display: none;
									}
									&.active{
										background: #000;
										> i{
											display: flex;
											color: #fff;
										}
									}
								}
							}
							> img{
								width: 100%;
								object-fit: contain;
							}
						}
						> .upload_item{
							border: none;
						}
					}
					> .head{
						color: #000;
						font-weight: 600;
						> .text{
							display: inline-block;
							font-size: 1.6rem;
						}
					}
				}
			
				> .poses{
					margin-top: 3rem;
				}
			}
		}
		> .likeBox ,> .noLikeBox{
			flex: 1;
			position: relative;
			> .element{
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				> .btnLeft,> .btnRight{
					position: absolute;
					width: 4rem;
					height: 7rem;
					background: #fff;
					border: 2px solid;
					border-right: none;
					border-radius: 2rem 0 0 2rem;
					top: 50%;
					transform: translate(-100%,-50%);
					left: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					z-index: 2;
					cursor: pointer;
					>span{
						transition: all .3s;
						transform: rotate(90deg);
						
					}
					&.active{
						>span{
							transform: rotate(270deg);

						}
					}
				}
				> .btnRight{
					left: calc(100% + 4rem) ;
					transform: translate(-100%,-50%) rotate(180deg);
				}
				> .content{
					flex: 1;
					padding: 1.7rem 2rem;
					border-radius: 3rem;
					background: #f7f8fa;
				}
				> .title{
					margin-bottom: 2rem;
					font-size: 1.6rem;
					font-weight: 900;
					> span{
						margin-left: 1rem;
					}
				}
			}
			
		}
		> .noLikeBox{
			padding-left: 2.3rem;
			&.active{
				flex: 0;
				overflow: hidden;
			}
		}
	}
</style>