aida_front/src/component/toolsPage/index.vue

<template>
	<div class="tools">
		<div class="modelBox">
			<toProduct ref="toProduct" 
			:productimgMenu="{value:'ToProductImage',label:$t('ProductImg.ProductImage')}" 
				class="toProduct" 
				:isState="openType =='toProduct'" 
				v-if="openType == 'toProduct' || currentProjectPath.includes('toProduct')"
				v-show="openType == 'toProduct'"
			></toProduct>
			<toProduct ref="relight" 
				:productimgMenu="{value:'Relight',label:$t('ProductImg.Relight')}" 
				class="relight" 
				:isState="openType =='relight'"	
				v-if="openType == 'relight' || currentProjectPath.includes('relight')"
				v-show="openType == 'relight'"
			></toProduct>
			<poseTransfer v-if="openType == 'poseTransfer' || currentProjectPath.includes('poseTransfer')"
			v-show="openType == 'poseTransfer'" ref="poseTransfer"></poseTransfer>
			<deReconstruction v-if="openType == 'deReconstruction' || currentProjectPath.includes('deReconstruction')"
			v-show="openType == 'deReconstruction'" ref="deReconstruction"></deReconstruction>
			<patternMaking3D v-if="openType == 'patternMaking3D' || currentProjectPath.includes('patternMaking3D')"
			v-show="openType == 'patternMaking3D'" ref="patternMaking3D"></patternMaking3D>
			<canvasUpload v-if="openType == 'canvasUpload' || currentProjectPath.includes('canvasUpload')"
			v-show="openType == 'canvasUpload'" ref="canvasUpload" @canvasChangeGetJSON="canvasChangeGetJSON" :isSubmitCanvasJSON="true"></canvasUpload>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent,computed,inject,provide,nextTick,watch,toRefs, reactive} from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { downloadIamge,getMinioUrl } from "@/tool/util";
import { useI18n } from 'vue-i18n'
import { useRoute,useRouter } from 'vue-router';
import toProduct from '@/component/home/tools/toProduct/index.vue';
import poseTransfer from '@/component/home/tools/poseTransfer/index.vue';
import deReconstruction from '@/component/home/tools/deReconstruction/index.vue';
import patternMaking3D from '@/component/home/tools/patternMaking3D/index.vue';
import canvasUpload from "@/component/modules/generalMiniCanvas.vue";
import {navTypeList} from "@/tool/listData.js";

export default defineComponent({
	components:{
		toProduct,poseTransfer,deReconstruction,patternMaking3D,canvasUpload
	},
	props:{
	},
	emits:['toolsCreateProject'],
	setup(props,{emit}) {
		const store = useStore();
		const route = useRoute();
		const router = useRouter()
		const {t} = useI18n()
		const data = reactive({
			openType:'' as any,
			isShowMark:false,
			toolsList:{
				toProduct:'TO_PRODUCT_IMAGE',
				relight:'RELIGHT',
				poseTransfer:'POSE_TRANSFER',
				deReconstruction:'DE_RECONSTRUCTION',
				patternMaking3D:'THREE_D_PLATE_MAKING',
				canvasUpload:'CANVAS',
			} as any,
			ceditorConfig:{
				width: 800,
				height: 600,
				backgroundColor: "#f8f8f8",
			},
			currentProjectPath:computed(() => {
				return store.state.Workspace.projectPath
			})
		})
		const dataDom:any = reactive({
			toProduct:null as any,
			relight:null as any,
			poseTransfer:null as any,
			deReconstruction:null as any,
			patternMaking3D:null as any,
			canvasUpload:null as any,
		})
		let driver__:any = computed(()=>{
			return store.state.Guide.guide
		}) 
		provide('driver__',driver__) 
		const setIsShowMark = (boolean:boolean)=>{
			data.isShowMark = boolean
		}
		let settingGetHistory:any = inject('settingGetHistory')
		const open = (str:any)=>{
			nextTick(()=>{
				if(dataDom[str]?.openSetData){
					dataDom[str].openSetData()
				}
			})
		}
		watch(() => route.query,
			(query:any, oldQuery:any) => {
				if(oldQuery && query == oldQuery)return
				const key = Object.keys(query)?.[0]
				if(route.name == 'toolsPage' && key){
					data.openType = query[key]
					nextTick(()=>{
						open(query[key])
					})
				}
			},
			{ immediate: true } // 立即触发一次以处理初始参数
		);
		const createProbject = async ()=>{
			return await new Promise((resolve, reject) => {
				let tools = route.query.tools as any
				if(!tools){reject(false)}
				let toolsData:any = navTypeList(t).tools.list.find((item:any)=>item.value == route.query.tools)
				let value = {
					name:toolsData.label,
					process:data.toolsList[tools],
				}
				Https.axiosPost(Https.httpUrls.projectSaveOrUpdate,value).then((rv)=>{
					if(rv){
						store.commit('clearAllCollection')
						let value = {
							id:rv.id
						}
						store.commit('setProbject',value)
						// let model:any = {}
						// let position = []
						// if(data.selectObject.sex == "Female"){
						// // if(rv.workspaceVO.sex == "Female"){
						// 	model = {
						// 		id:rv.workspaceVO.mannequinFemaleId,
						// 		type:rv.workspaceVO.mannequinFemaleType,
						// 		url:rv.workspaceVO.femalePresignedUrl,
						// 	}
						// 	position = store.state.UserHabit.FemalePosition
						// }else{
						// 	model = {
						// 		id:rv.workspaceVO.mannequinMaleId,
						// 		type:rv.workspaceVO.mannequinMaleType,
						// 		url:rv.workspaceVO.malePresignedUrl,
						// 	}
						// 	position = store.state.UserHabit.MalePosition
						// }
						// // model.url = rv.workspaceVO.malePresignedUrl
						// data.selectObject.model = model
						// data.selectObject.positionList = position
						let routeName:any = route.name
						router.push(`${routeName}?${routeName}=${route.query[routeName]}&id=${rv.id}`)
						settingGetHistory()
						resolve(rv.id);	
					}
				})
			})

		}
		provide('setIsShowMark',setIsShowMark)
		provide('createProbject',createProbject)
		let time = null as any

		const canvasChangeGetJSON = async ({canvasJSON,submitDate})=>{
			clearTimeout(time)
			if(!store.state.Workspace.probjects.id)await createProbject()
			time = setTimeout(()=>{
				let canvasData = JSON.parse(canvasJSON)
				if(!canvasData)return
				canvasData.canvas.objects.forEach((objectsItem:any) => {
					if(objectsItem.type == 'image')objectsItem.minioUrl = getMinioUrl(objectsItem.src)
				});
				let blob = new Blob([JSON.stringify(canvasData)], { type: "application/json" });
				let formData = new FormData();
				formData.append("file", blob, "data.json");
				formData.append("module", "canvas");
				formData.append("projectId", store.state.Workspace.probjects.id)
				let config = {
					headers: { "Content-Type": "multipart/form-data", Accept: "*/*" },
				};
				Https.axiosPost(Https.httpUrls.exportSave, formData, config).then(
					(rv) => {
					}
				);
			},submitDate)
		}
		return{
			...toRefs(dataDom),
			...toRefs(data),
			createProbject,
			canvasChangeGetJSON,
		}
	},
	provide() {
		return {
		}
	},
})
</script>
<style lang="less" scoped>
	.tools{
		width: 100%;
		height: 100%;
		position: relative;
		.modelBox{
			width: 100%;
			height: 100%;
		}
	}
</style>