aida_front/src/component/home/batchGeneration/index.vue

<template>
	<div class="uploading">
		<div class="title">
			<div class="list">
				<div
					class="titleItem active"
				>
					<span class="detailText">All</span>
				</div>
			</div>
			<div class="searchObject generalModel_state">
				<div class="generalModel_state_item smail">
					<span>Project :</span>
					<a-select
						v-model:value="projectData"
						show-search
						allowClear
                        size="large"
						:show-arrow="false"
						 :default-active-first-option="false"
						:not-found-content="null"
						:filter-option="false"
						style="width: 16rem"
						:fieldNames="{ label: 'name', value: 'value'}"
						placeholder="Please select"
						:options="objectList"
						@search="getHistoryProjectList"
						@change="handleChange"
					>
					<template #option="{ value: val, label, icon,updateTime }">
						<span :title="updateTime.replace('T', ' ')">{{ label }}</span>
					</template>
					</a-select>
				</div>
			</div>
			<div class="createCloud">
				<div class="gallery_btn" @click="createClound">Create</div>
			</div>
		</div>
		<div class="contentList">
			<div class="title">
				<div class="titleItem" v-for="item in cloudTiltleList" :key="item.value">
					{{ item.name }}
				</div>
			</div>
			<div class="content">
				<tr v-for="(row, index) in contentList" :key="index">
					<td v-for="header in cloudTiltleList" :key="header.value">
						<span v-show="header.value != 'operation'">
							{{header?.fun?header.fun(row[header.value]) : row[header.value]}}
						</span>
						<span style="color: #007EE5; cursor: pointer;" v-show="header.value == 'operation'" @click="detailIamge(row)">
							Review
						</span>
					</td>
				</tr>
			</div>
			<a-pagination style="text-align: center;" v-model:current="currentPage" :total="total" show-less-items />
		</div>
		<createCloud ref="createCloud" :cloudList="generateList.seriesDesign" @getContentList="submitGetContentList"></createCloud>
	</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,onMounted,nextTick,createVNode,toRefs, reactive, onBeforeUnmount} from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import createCloud from "./createCloud.vue";
import { da } from 'element-plus/es/locale';
import { useRouter,useRoute } from 'vue-router'
export default defineComponent({
	components:{
		createCloud,
	},
	emits:['retrieve'],
	setup(props,{emit}) {
		const store = useStore();
		const route = useRoute()
		const data = reactive({
			pageType:'list',
			pageSize:10,
			currentPage:1,
			total:0,
			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
			projectData:null as any,//批量id
			createData:null as any,
			generateList:{
				seriesDesign:[
				{
						label:'Series design',
						// value:'SERIES_DESIGN',
						consumption:0,
						value:'SERIES_DESIGN',
					},{
						label:'Single design',
						// value:'SINGLE_DESIGN',
						consumption:0,
						value:'SINGLE_DESIGN',
					},{
						label:'To Product Image',
						// value:'toProductImage',
						consumption:5,
						value:'TO_PRODUCT_IMAGE',
					},{
						label:'Relight',
						// value:'relight',
						consumption:5,
						value:'RELIGHT',
					},{
						label:'Transfer Pose',
						// value:'poseTransfer',
						consumption:10,
						value:'POSE_TRANSFER',
					},
				],
				singleProductDesign:[
					{
						label:'Design',
						value:'design',
						consumption:0,
					},{
						label:'To Product Image',
						value:'toProductImage',
						consumption:5,
					},
				],
				// printDesign:[
				// 	{
				// 		label:'1',
				// 		value:100,
				// 	}
				// ],
				productDrawingDesign:[
					{
						label:'To Product Image',
						value:'toProductImage',
						consumption:5,
					},{
						label:'Relight',
						value:'relight',
						consumption:5,
					},{
						label:'Transfer Pose',
						value:'poseTransfer',
						consumption:10,
					},
				],
				// printingDesign3D:[
				// 	{
				// 		label:'1',
				// 		value:100,
				// 	}
				// ],
				// sketchDesign:[]
			},
			cloudTiltleList:[
				{
					name:'Task type',
					value:'buildType',
					fun:(value:any)=>{
						let str = ''
						if(value == 'design')str = 'Design'
						if(value == 'toProductImage')str = 'To Product Image'
						if(value == 'relight')str = 'Relight'
						if(value == 'poseTransfer')str = 'Transfer Pose'
						return str
					}
				},{
					name:'Quantity generated',
					value:'nums',
				},{
					name:'Creation time',
					value:'updateTime',
					fun:(value:any)=>{
						if(!value)return
						return value.split('T')[0] + ' ' + value.split('T')[1].split('.')[0] 
					}
				},{
					name:'Start time',
					value:'updateTime',
					fun:(value:any)=>{
						//没开始内容为 - 
						if(!value)return
						return value.split('T')[0] + ' ' + value.split('T')[1].split('.')[0] 
					}
				},{
					name:'End time',
					value:'updateTime',
					fun:(value:any)=>{
						if(!value)return
						return value.split('T')[0] + ' ' + value.split('T')[1].split('.')[0] 
					}
				},{
					name:'Status',
					value:'process',
					fun:(value:any)=>{
						if(value == '100.00%'){
							return 'Completed'
						}else{
							return value
						}
					}
				},{
					name:'Operation',
					value:'operation',
				},
			]  as any,
			contentList:[
			]  as any,
			objectList:[],
			isGetContentList:false as any,
		})
		const dataDom = reactive({
			createCloud,
		})
		const createClound = ()=>{
			data.isGetContentList = false
			let obj = {}
			if(data.createData){
				data.generateList.seriesDesign.forEach((item:any)=>{
					if((item.value == data.createData.process)){
						obj = item
					}
				})
			}
			
			dataDom.createCloud.init(data.createData,obj)
		}
		const detailIamge = (item:any)=>{
			//去除里面的T2025-04-17T13:45:43
			if(item.process == '100.00%' || item.status == 1){
				let value = {
					taskId:item.taskId,
					page:1,
					size:10,
					buildType:item.buildType,
				}
				Https.axiosPost(Https.httpUrls.getDesignCloudResult,value).then((rv)=>{
					console.log(rv)
					if(rv.design && rv.design.length > 0){
						store.commit('addDesignCollectionList',rv.design)
						emit('retrieve','design')
					}else if(rv.toProductImage && rv.toProductImage.length > 0){
						store.commit('setCloudList',{str:'toProduct',list:rv.toProductImage})
						emit('retrieve','toProduct')	
					}else if(rv.relight && rv.relight.length > 0){
						store.commit('setCloudList',{str:'relight',list:rv.relight})
						emit('retrieve','relight')	
					}else if(rv.poseTransfer && rv.poseTransfer.length > 0){
						store.commit('setCloudList',{str:'poseTransfer',list:rv.poseTransfer})
						emit('retrieve','poseTransfer')	
					}
					data.isGetContentList = false
				})
			}
		}
		const getContentList = ()=>{
			if(data.isGetContentList){
				let value = {
					page:data.currentPage,
					size:data.pageSize,
					projectId: data.projectData.id,
				}
				Https.axiosPost(Https.httpUrls.cloudPage,value).then((rv)=>{
					data.contentList = rv.content
					data.total = rv.total
					let arr = rv.content
					let result = arr.some((item:any) => (item.process !== '100.00%' && item.status !== 1));
					if(!result)data.isGetContentList = false
					setTimeout(()=>{
						getContentList()
					},1500)
				})
			}
		}
		let getHistoryTime = null as any
		const getHistoryProjectList = (event:any)=>{
			clearTimeout(getHistoryTime)
			if(!event){
				data.objectList = []
				return
			}
			getHistoryTime = setTimeout(()=>{
				let value = {
					projectName:event,
					page:1,
					size:9999,
					asc:0,
					process:'',
				}
				Https.axiosPost(Https.httpUrls.historyProject,value).then((rv)=>{
					rv.content.forEach((item:any)=>{
						item.value = item.id
						item.label = item.name
					})
					data.objectList = rv.content
				})
			},1000)
		}
		const submitGetContentList = ()=>{
			data.isGetContentList = true
			getContentList()
		}
		const handleChange = (event:any,value:any)=>{
			data.createData = value
		}
		onBeforeUnmount(()=>{
			data.isGetContentList = false
		})
		onMounted(()=>{
			data.isGetContentList = true
			if(route.query?.id){
				data.projectData.value = route.query?.id
				data.projectData.label = route.query?.name
			}
			// if(route.query?.type == 'creation')dataDom.createCloud.init(data.projectData)
		})
		return{
			...toRefs(dataDom),
			...toRefs(data),
			createClound,
			detailIamge,
			getContentList,
			submitGetContentList,
			handleChange,
			getHistoryProjectList,
		}
	},
	provide() {
		return {
		}
	},
})
</script>
<style lang="less" scoped>
	.uploading{
		width: 100%;
		height: 100%;
		position: relative;
		padding-top: 3rem;
		display: flex;
		flex-direction: column;
		> .title{
			width: 100%;
			display: flex;
			> .list{
				display: flex;
				margin-bottom: 2.5rem;
				> .titleItem:last-child{
					margin-right: 0;
				}
				> .titleItem{
					position: relative;
					cursor: pointer;
					margin-right: 6.5rem;
				}
				> .titleItem::before {
						position: absolute;
						content: "";
						display: block;
						background: #000;
						height: calc(.4rem*1.2);
						left: 50%;
						transform: translateX(-50%);
						bottom: -.5rem;
						width: 0px;
						transition: 0.3s all;
					}
				> .active {
					color: #000;
					font-weight: 600;
				}
				> .active::before {
					width: 100%;
				}
			}	
			> .createCloud{
			}
			> .searchObject{
				margin-left: auto;
				
			}
		}
		> .contentList{
			flex: 1;
			overflow: hidden;
			padding-top: 2.5rem;
			display: flex;
			flex-direction: column;
			> .content tr , > .title{
				display: flex;
				justify-content: space-between;
				padding: 0 1.2rem;
			}
			> .title{
				background: #F7F7F7;
				> .titleItem{
					line-height: 4.6rem;
					font-size: 2rem;
					color: #666666;
					width: calc(100% / 4);
					text-align: center;
				}
			}
			.content{
				flex: 1;
				overflow: hidden;
				> tr{
					> td{
						text-align: center;
						width: calc(100% / 4);
						line-height: 4.6rem;
						font-size: 2.2rem;
					}
				}
			}
		}
	}
</style>