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'"
			></toProduct>
			<toProduct ref="relight" 
				:productimgMenu="{value:'Relight',label:$t('ProductImg.Relight')}" 
				class="relight" 
				:isState="openType =='relight'"	
				v-if="openType == 'relight'"
			></toProduct>
			<poseTransfer v-if="openType == 'poseTransfer'" ref="poseTransfer"></poseTransfer>
			<deReconstruction v-if="openType == 'deReconstruction'" ref="deReconstruction"></deReconstruction>
			<patternMaking3D v-if="openType == 'patternMaking3D'" ref="patternMaking3D"></patternMaking3D>
			<canvasUpload v-if="openType == 'canvasUpload'" ref="canvasUpload"></canvasUpload>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,watch,toRefs, reactive} from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import { useRoute } 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/Canvas/index.vue";

export default defineComponent({
	components:{
		toProduct,poseTransfer,deReconstruction,patternMaking3D,canvasUpload
	},
	props:{
	},
	emits:[],
	setup(props,{emit}) {
		const store = useStore();
		const route = useRoute();
		const data = reactive({
			openType:'' as any,
			isShowMark:false,
		})
		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
		}
		const open = (str:any)=>{
			nextTick(()=>{
				if(dataDom[str]?.openSetData){
					dataDom[str].openSetData()
				}
			})
		}
		provide('setIsShowMark',setIsShowMark)
		watch(() => route.query,
			(query, oldQuery) => {
				if(oldQuery && query?.tools == oldQuery?.tools)return
				let str = query.tools
				nextTick(()=>{
					console.log(str)
					data.openType = str
					open(str)
				})
			},
			{ immediate: true } // 立即触发一次以处理初始参数
			);
		return{
			...toRefs(dataDom),
			...toRefs(data),
		}
	},
	provide() {
		return {
		}
	},
})
</script>
<style lang="less" scoped>
	.tools{
		width: 100%;
		height: 100%;
		position: relative;
		.modelBox{
			width: 100%;
			height: 100%;
		}
	}
</style>