aida_front/src/component/HomePage/index/model/cloudUploading/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="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[workflowType]" @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';
export default defineComponent({
	components:{
		createCloud,
	},
	props:{
		workflowType:{
		    type:String,
			default:'' as any,
			required:true	
		}
	},
	emits:['retrieve'],
	setup(props,{emit}) {
		const store = useStore();
		const data = reactive({
			pageType:'list',
			pageSize:10,
			currentPage:1,
			total:0,
			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
			generateList:{
				seriesDesign:[
					{
						label:'Design',
						value:'design',
						consumption:0,
					},{
						label:'To Product Image',
						value:'toProductImage',
						consumption:5,
					},{
						label:'Relight',
						value:'relight',
						consumption:5,
					},{
						label:'Transfer Pose',
						value:'poseTransfer',
						consumption:10,
					},
				],
				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,
			isGetContentList:false as any,
		})
		const dataDom = reactive({
			createCloud,
		})
		const createClound = ()=>{
			data.isGetContentList = false
			dataDom.createCloud.init()
		}
		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.selectObject.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)
				})
			}
		}
		const submitGetContentList = ()=>{
			data.isGetContentList = true
			getContentList()
		}
		onBeforeUnmount(()=>{
			data.isGetContentList = false
		})
		onMounted(()=>{
			data.isGetContentList = true
			getContentList()
		})
		return{
			...toRefs(dataDom),
			...toRefs(data),
			createClound,
			detailIamge,
			getContentList,
			submitGetContentList,
		}
	},
	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{
				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>