fix

src/component/HomePage/index/workflow/content/index.vue

@@ -0,0 +1,244 @@
+<template>
+	<div class="contentBox">
+		<seriesDesign v-if="selectObject.id && workflowType == 'seriesDesign'" ref="seriesDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></seriesDesign>
+		<singleProductDesign v-if="selectObject.id && workflowType == 'singleProductDesign'" ref="singleProductDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></singleProductDesign>
+		<sketchDesign v-if="selectObject.id && workflowType == 'sketchDesign'" ref="sketchDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></sketchDesign>
+		<productDrawingDesign v-if="selectObject.id && workflowType == 'productDrawingDesign'" ref="productDrawingDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></productDrawingDesign>
+		<printingDesign3D v-if="selectObject.id && workflowType == 'printingDesign3D'" ref="printingDesign3D" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></printingDesign3D>
+		<printDesign v-if="selectObject.id && workflowType == 'printDesign'" ref="printDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></printDesign>
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,inject,watch,nextTick,provide,toRefs, reactive} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import seriesDesign from './seriesDesign.vue'
+import printDesign from './printDesign.vue'
+import singleProductDesign from './singleProductDesign.vue'
+import sketchDesign from './sketchDesign.vue'
+import productDrawingDesign from './productDrawingDesign.vue'
+import printingDesign3D from './printingDesign3D.vue'
+import { rgbToHsv, dataURLtoBlob } from "@/tool/util";
+
+import { gsap, TweenMax } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+export default defineComponent({
+    components:{
+		seriesDesign,printDesign,singleProductDesign,sketchDesign,productDrawingDesign,printingDesign3D
+    },
+	props:{
+		selectKey_:String,
+		workflowType:String,
+		httpWorkflowType:String,
+	},
+    setup(props,{emit}) {
+        const store = useStore();
+		const data = reactive({
+			navListData:computed(()=>store.state.Workspace.projectList),
+			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
+			userDetail:computed(()=>{
+				return store.state.UserHabit.userDetail
+			}),
+		})
+		const dataDom:any = reactive({
+			seriesDesign:null as any,
+			singleProductDesign:null as any,
+			printDesign:null as any,
+			sketchDesign:null as any,
+			productDrawingDesign:null as any,
+			printingDesign3D:null as any,
+		})
+		//处理design数据
+		const setDesignData = (str:any)=>{
+			if(str == 'workspace')return
+			return new Promise(async (resolve,reject)=>{
+				if(str == "colorBoard")await setColor()
+				// if(str == "sketchBoard")await setSketch()
+				let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard']
+				let value = {
+				    type:str,
+					objectName:data.selectObject.type,
+				}
+				if(allBoardData.indexOf(str) != -1){
+					await store.dispatch('setAllBoardData',value)
+				}else{
+					let value = {
+						type:str,
+						objectName:data.selectObject.type,
+					}
+					store.dispatch('setModularData',value)
+				}
+				saveProject(str)
+				resolve('')
+			})
+		}
+		const saveCanvas = (value:any,str:any)=>{
+			let json = dataDom[data.selectObject.type][str].getCanvasData()
+			let blob = new Blob([JSON.stringify(json)], { type: "application/json" });
+			let formData = new FormData();
+			// let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
+			formData.append("file", blob, "data.json");
+			formData.append('module', str);
+			formData.append('projectId', value.projectId);
+			let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
+			Https.axiosPost(Https.httpUrls.exportSave, formData,config).then((rv)=>{
+				// message.success(t('exportModel.jsContent7'))
+            })
+		}
+		const saveProject = (str:any)=>{
+			let value:any = {
+				projectId:data.selectObject.id,
+			}
+			if(str == 'deReconstruction' || str == 'canvas'){
+				saveCanvas(value,str)
+				return
+			}
+			store.dispatch('getProjectData',str).then((data)=>{
+				if(!data[str])return
+				value[str] = data[str]
+				
+				Https.axiosPost(Https.httpUrls.saveModuleContent, value).then((rv)=>{
+					if(rv.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
+				})
+			})
+		}
+		const setSketch = ()=>{
+
+		}
+		const setColor = ()=>{
+			return new Promise((resolve,reject)=>{
+			    let colorBoards = store.state.UploadFilesModule.colorBoards;
+				if(colorBoards.length == 0)return resolve('')
+				let data: any = [];
+				for (let v of colorBoards) {
+					let color: any = [v.rgbValue.r, v.rgbValue.g, v.rgbValue.b];
+					let hsv = rgbToHsv(color);
+					v.hsv = hsv[0] + hsv[1] + hsv[2];
+					data.push({
+						h: hsv[0],
+						s: hsv[1],
+						v: hsv[2],
+					});
+				}
+				Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data)
+					.then((rv: any) => {
+						if (rv) {
+							rv.forEach((ele: any, index: number) => {
+								colorBoards[index].id = ele.id;
+								colorBoards[index].tcx = ele.tcx;
+								colorBoards[index].name = ele.name;
+							});
+							store.commit("setColorboardList", colorBoards);
+							resolve('');
+						}
+					})
+					.catch((res) => {
+						reject();
+					});
+			})
+		}
+		const setModule = (value:any)=>{//选中设置数据
+			// setStoreData(value)//设置数据或者清除数据
+			if(dataDom[data.selectObject.type]?.open)dataDom[data.selectObject.type].open(value.str,value.button)
+		}
+		const setStoreData = async (data:any)=>{
+			let {value,select} = data
+			let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard']
+		    if (select) {
+				await setDesignData(value)
+				if(allBoardData.indexOf(value) != -1){
+					store.commit('setAllBoardData',value)
+				}else{
+					let data = {
+						data:'',
+						type:value
+					}
+					store.commit('setModularData',data)
+				}
+			}else{
+				if(allBoardData.indexOf(value) != -1){
+					store.commit('clearAllBoardData',value)
+				}else{
+					let data = {
+						data:null,
+						type:value
+					}
+					store.commit('setModularData',data)
+				}
+			}
+			
+		}
+		const unfold = ()=>{
+			dataDom[data.selectObject.type].unfold()
+		}
+		watch(()=>props.selectKey_,async (newVal,oldVal)=>{
+			if((!!newVal && !!oldVal) || (!newVal && !!oldVal)){
+				setDesignData(oldVal)
+			}
+			// if(newVal == '' && oldVal != ''){
+			// 	//选择数据
+			// 	if(data.navListData.value[index]?.select){
+			// 		setDesignData(oldVal)
+			// 	}
+			// }
+		})
+        return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			setModule,
+			unfold,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+	.contentBox{
+		display: flex;
+		width: 100%;
+		height: 100%;
+		> .contentBox{
+			position: relative;
+			flex: 1;
+			overflow: hidden;
+			> .content,
+			>.homeContent{
+				width: 100%;
+				height: 100%;
+				padding: 4rem;
+				// padding: 3rem;
+			}
+			> .content{
+				position: absolute;
+				top: 0;
+				left: 0;
+				transform: scale(0);
+				background: #ff6666;
+				display: flex;
+				flex-direction: column;
+				> *{
+					width: 100%;
+					height: 100%;
+					overflow: hidden;
+				}
+				> .back{
+					width: auto;
+					height: auto;
+					cursor: pointer;
+				}
+			}
+			> .homeContent{
+				// background: #91ff66;
+				position: absolute;
+			}
+		}
+	}
+</style>

src/component/HomePage/index/workflow/content/printDesign.vue

@@ -0,0 +1,214 @@
+<template>
+	<div class="seriesDesign">
+		<workspace ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
+		<PrintboardUpload ref="printBoard" class="printBoard" :isState="selectKey_ =='printBoard'" v-show="selectKey_ == 'printBoard'"></PrintboardUpload>
+		<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,watch,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import workspace from '../../workflow/workspace.vue'
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import PrintboardUpload from '../../model/collection/PrintboardUpload.vue'
+import canvasUpload from "@/component/Canvas/index.vue";
+
+import { gsap, TweenMax } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+export default defineComponent({
+    components:{ 
+		PrintboardUpload,canvasUpload,workspace
+    },
+	props:{
+		selectKey_:{
+			type:String,
+			default:''
+		},
+		workflowType:String,
+		httpWorkflowType:String,
+	},
+    setup(props,{emit}) {
+        const store = useStore();
+		let driver__:any = computed(()=>{
+			return store.state.Guide.guide
+		}) 
+		provide('driver__',driver__) 
+		//['moodBoard','printBoard','colorBoard','sketchBoard','mannequin','toProduct]
+		const data = reactive({
+			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
+		})
+		const dataDom:any = reactive({
+			printBoard:null as any,
+			canvas:null as any,
+		})
+		const open = (str:any)=>{
+			nextTick(()=>{
+				if(dataDom[str]?.openSetData){
+					dataDom[str].openSetData()
+				}
+			})
+		}
+		const setitemData = (arr:any)=>{
+			return new Promise((resolve,reject)=>{
+			    nextTick(()=>{
+					arr.forEach((rv:any)=>{
+						let arr = ['design','patternMaking3D'] 						
+						if(arr.indexOf(rv) > -1 || !dataDom[rv])return
+						dataDom[rv].openSetData()
+					})
+					resolve('')
+				})
+			})
+		}
+		const unfold = ()=>{
+			if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
+		}
+		const getCollection = ()=>{
+			let value:any = {
+				 "id":data.selectObject.id,
+				"moduleList":["printBoard", ]
+			}
+			Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
+				historyChooseData(rv)
+				let allBoardData = ['printBoard']
+				let canvasData = ['canvas']
+				for (let index = 0; index < canvasData.length; index++) {
+					const item = canvasData[index];
+					await getCanvasData(item)
+				}
+				await setitemData(allBoardData)
+				allBoardData.forEach((item)=>{
+					let value = {
+						type:item,
+						objectName:data.selectObject.type,
+					}
+					let arr  = ['sketchBoard','moodBoard','printBoard','colorBoard']
+					if(arr.indexOf(item) != -1){
+						store.dispatch('setAllBoardData',value)
+					}else{
+						store.dispatch('setModularData',value)
+					}
+				})
+
+			})
+		}
+		const getCanvasData = (str:any)=>{
+			return new Promise((resolve, reject) => {
+				let value = {
+					module:str,
+					projectId:data.selectObject.id,
+				}
+				Https.axiosPost(Https.httpUrls.exportSearch, value)
+				.then((rv) => {
+					store.commit("setCanvasData", {type:str,file:rv});
+					resolve('')
+				})
+				.catch((rv) => {
+					resolve(null)
+				});
+			})
+		}
+		const historyChooseData = (data:any)=>{
+			let collectionData = {
+				printboardFiles: dealViewChooseData(
+					data.printBoard,"Printboard"
+				),
+				generatePrintFiles: [],
+			};
+			store.commit("setAllBoardDataChoose", collectionData);
+		}
+		//统一处理选择组的渲染数据
+		const dealViewChooseData = (data: any,str:string)=> {
+			if (!data) {
+				return [];
+			}
+			let filesList = data.map((v: any) => {
+				let newData: any = {
+					imgUrl: v.url?v.url:v.designOutfitUrl,
+					id: v.id,
+					status: "done",
+					resData: v,
+					type_:{
+						type1:'material',
+						type2:v.level1Type
+					}
+				};
+				if (v.level1Type === "Sketchboard") {
+					newData.pin = v.isPin;
+					newData.categoryValue = v.level2Type;
+					newData.level2Type = v.level2Type;
+				}
+				if (v.level1Type === "Printboard") {
+					newData.pin = v.isPin;
+					newData.level2Type = v.level2Type;
+					newData.categoryValue = v.level2Type;
+				}
+				return newData;
+			});
+			return filesList;
+		}
+		onMounted(()=>{
+			nextTick(()=>{
+				getCollection()
+			})
+		})
+        return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			open,
+			unfold,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+	.seriesDesign{
+		display: flex;
+		width: 100%;
+		height: 100%;
+		> .contentBox{
+			position: relative;
+			flex: 1;
+			overflow: hidden;
+			> .content,
+			>.homeContent{
+				width: 100%;
+				height: 100%;
+				padding: 4rem;
+				// padding: 3rem;
+			}
+			> .content{
+				position: absolute;
+				top: 0;
+				left: 0;
+				transform: scale(0);
+				background: #ff6666;
+				display: flex;
+				flex-direction: column;
+				> *{
+					width: 100%;
+					height: 100%;
+					overflow: hidden;
+				}
+				> .back{
+					width: auto;
+					height: auto;
+					cursor: pointer;
+				}
+			}
+			> .homeContent{
+				// background: #91ff66;
+				position: absolute;
+			}
+		}
+	}
+</style>

src/component/HomePage/index/workflow/content/printingDesign3D.vue

@@ -0,0 +1,156 @@
+<template>
+	<div class="seriesDesign">
+		<workspace ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
+		<patternMaking3D ref="patternMaking3D" class="patternMaking3D" :isState="selectKey_ =='patternMaking3D'" v-show="selectKey_ == 'patternMaking3D'"></patternMaking3D>
+		<!-- <canvasUpload></canvasUpload> -->
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,watch,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import patternMaking3D from '../../model/patternMaking3D/index.vue'
+import canvasUpload from "@/component/Canvas/test.vue";
+import workspace from '../../workflow/workspace.vue'
+
+import { gsap, TweenMax } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+export default defineComponent({
+    components:{ 
+		patternMaking3D,canvasUpload,workspace
+    },
+	props:{
+		selectKey_:{
+			type:String,
+			default:''
+		},
+		workflowType:String,
+		httpWorkflowType:String,
+	},
+    setup(props,{emit}) {
+        const store = useStore();
+		let driver__:any = computed(()=>{
+			return store.state.Guide.guide
+		}) 
+		provide('driver__',driver__) 
+		//['moodBoard','printBoard','colorBoard','sketchBoard','mannequin','toProduct]
+		const data = reactive({
+			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
+		})
+		const dataDom:any = reactive({
+			patternMaking3D:null as any,
+		})
+		const open = (str:any)=>{
+			nextTick(()=>{
+				if(dataDom[str]?.openSetData){
+					dataDom[str].openSetData()
+				}
+			})
+		}
+		const setitemData = (arr:any)=>{
+			return new Promise((resolve,reject)=>{
+			    nextTick(()=>{
+					arr.forEach((rv:any)=>{
+						let arr = ['design','patternMaking3D']
+						if(arr.indexOf(rv) > -1 || !dataDom[rv])return
+						dataDom[rv].openSetData()
+					})
+					resolve('')
+				})
+			})
+		}
+		const unfold = ()=>{
+			if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
+		}
+		const getCollection = ()=>{
+			let value:any = {
+				 "id":data.selectObject.id,
+				"moduleList":["patternMaking3D", ]
+			}
+			Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
+				historyChooseData(rv)
+				let allBoardData = ['patternMaking3D']
+				await setitemData(allBoardData)
+				allBoardData.forEach((item)=>{
+					let value = {
+						type:item,
+						objectName:data.selectObject.type,
+					}
+					let arr  = ['sketchBoard','moodBoard','printBoard','colorBoard']
+					if(arr.indexOf(item) != -1){
+						store.dispatch('setAllBoardData',value)
+					}else{
+						store.dispatch('setModularData',value)
+					}
+				})
+
+			})
+		}
+		const historyChooseData = (value:any)=>{
+			store.commit('setPatternMaking3D',value.threeDSimpleId)
+		}
+		onMounted(()=>{
+			nextTick(()=>{
+				getCollection()
+			})
+		})
+        return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			open,
+			unfold,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+	.seriesDesign{
+		display: flex;
+		width: 100%;
+		height: 100%;
+		> .contentBox{
+			position: relative;
+			flex: 1;
+			overflow: hidden;
+			> .content,
+			>.homeContent{
+				width: 100%;
+				height: 100%;
+				padding: 4rem;
+				// padding: 3rem;
+			}
+			> .content{
+				position: absolute;
+				top: 0;
+				left: 0;
+				transform: scale(0);
+				background: #ff6666;
+				display: flex;
+				flex-direction: column;
+				> *{
+					width: 100%;
+					height: 100%;
+					overflow: hidden;
+				}
+				> .back{
+					width: auto;
+					height: auto;
+					cursor: pointer;
+				}
+			}
+			> .homeContent{
+				// background: #91ff66;
+				position: absolute;
+			}
+		}
+	}
+</style>

src/component/HomePage/index/workflow/content/productDrawingDesign.vue

@@ -0,0 +1,213 @@
+<template>
+	<div class="seriesDesign">
+		<workspace ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
+		<toProduct ref="toProduct" 
+			:productimgMenu="{value:'ToProductImage',label:$t('ProductImg.ProductImage')}" 
+			class="toProduct" 
+		 	:isState="selectKey_ =='toProduct'" 
+			v-show="selectKey_ == 'toProduct'"
+		></toProduct>
+		<toProduct ref="relight" 
+			:productimgMenu="{value:'Relight',label:$t('ProductImg.Relight')}" 
+			class="relight" 
+			:isState="selectKey_ =='relight'"	
+			v-show="selectKey_ == 'relight'"
+		></toProduct>
+		<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
+		<poseTransfer ref="poseTransfer" class="poseTransfer" :isState="selectKey_ =='poseTransfer'" v-show="selectKey_ == 'poseTransfer'"></poseTransfer>
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,watch,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import workspace from '../../workflow/workspace.vue'
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import toProduct from '../../model/toProduct/index.vue'
+import poseTransfer from '../../model/poseTransfer/index.vue'
+import canvasUpload from "@/component/Canvas/index.vue";
+
+import { gsap, TweenMax } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+export default defineComponent({
+    components:{ 
+		workspace,toProduct,canvasUpload,poseTransfer
+    },
+	props:{
+		selectKey_:{
+			type:String,
+			default:''
+		},
+		workflowType:String,
+		httpWorkflowType:String,
+	},
+    setup(props,{emit}) {
+        const store = useStore();
+		let driver__:any = computed(()=>{
+			return store.state.Guide.guide
+		}) 
+		provide('driver__',driver__) 
+		//['moodBoard','printBoard','colorBoard','sketchBoard','mannequin','toProduct]
+		const data = reactive({
+			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
+		})
+		const dataDom:any = reactive({
+			toProduct:null as any,  
+			relight:null as any,
+			poseTransfer:null as any,
+			canvas:null as any,
+		})
+		const open = (str:any)=>{
+			console.log(str)
+			nextTick(()=>{
+				if(dataDom[str]?.openSetData){
+					dataDom[str].openSetData()
+				}
+			})
+		}
+		const setitemData = (arr:any)=>{
+			return new Promise((resolve,reject)=>{
+			    nextTick(()=>{
+					arr.forEach((rv:any)=>{
+						let arr = ['design','patternMaking3D'] 						
+						if(arr.indexOf(rv) > -1 || !dataDom[rv])return
+						dataDom[rv].openSetData()
+					})
+					resolve('')
+				})
+			})
+		}
+		const unfold = ()=>{
+			if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
+		}
+		const getCollection = ()=>{
+			let value:any = {
+				 "id":data.selectObject.id,
+				"moduleList":['toProduct','relight','poseTransfer']
+			}
+			Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
+				historyChooseData(rv)//设置历史数据
+				let allBoardData = ['toProduct','relight','poseTransfer']
+				let canvasData = ['canvas']
+				for (let index = 0; index < canvasData.length; index++) {
+					const item = canvasData[index];
+					await getCanvasData(item)
+				}
+				await setitemData(allBoardData)
+				//还有一个canvas
+				allBoardData.forEach((item)=>{
+					let value = {
+						type:item,
+						objectName:data.selectObject.type,
+					}
+					store.dispatch('setModularData',value)
+				})
+
+			})
+		}
+		const getCanvasData = (str:any)=>{
+			return new Promise((resolve, reject) => {
+				let value = {
+					module:str,
+					projectId:data.selectObject.id,
+				}
+				Https.axiosPost(Https.httpUrls.exportSearch, value)
+				.then((rv) => {
+					store.commit("setCanvasData", {type:str,file:rv});
+					resolve('')
+				})
+				.catch((rv) => {
+					resolve(null)
+				});
+			})
+		}
+		const historyChooseData = (data:any)=>{
+			if(data.toProduct){
+				let value = {
+					list: data.toProduct,
+					str:'add',
+					index:-1,
+				}
+				store.commit("setToProductImage", value);
+			}
+			if(data.relight){
+				let value = {
+					list: data.relight,
+					str:'add',
+					index:-1,
+				}
+				store.commit("setRelightList", value);
+			}
+			if(data.poseTransfer){
+				let value = {
+					list: data.poseTransfer,
+					str:'add',
+					index:-1,
+				}
+				store.commit("setPoseTransfer", value);
+			}
+		}
+		onMounted(()=>{
+			nextTick(()=>{
+				getCollection()
+			})
+		})
+        return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			open,
+			unfold,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+	.seriesDesign{
+		display: flex;
+		width: 100%;
+		height: 100%;
+		> .contentBox{
+			position: relative;
+			flex: 1;
+			overflow: hidden;
+			> .content,
+			>.homeContent{
+				width: 100%;
+				height: 100%;
+				padding: 4rem;
+				// padding: 3rem;
+			}
+			> .content{
+				position: absolute;
+				top: 0;
+				left: 0;
+				transform: scale(0);
+				background: #ff6666;
+				display: flex;
+				flex-direction: column;
+				> *{
+					width: 100%;
+					height: 100%;
+					overflow: hidden;
+				}
+				> .back{
+					width: auto;
+					height: auto;
+					cursor: pointer;
+				}
+			}
+			> .homeContent{
+				// background: #91ff66;
+				position: absolute;
+			}
+		}
+	}
+</style>

src/component/HomePage/index/workflow/content/seriesDesign.vue

@@ -0,0 +1,334 @@
+<template>
+	<div class="seriesDesign">
+		<workspace ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
+		<design ref="design" class="design" :isState="selectKey_ =='design'" v-show="selectKey_ == 'design'"></design>
+		<MoodboardUpload ref="moodBoard" class="moodBoard" :isState="selectKey_ =='moodBoard'" v-show="selectKey_ == 'moodBoard'"></MoodboardUpload>
+		<PrintboardUpload ref="printBoard" class="printBoard" :isState="selectKey_ =='printBoard'" v-show="selectKey_ == 'printBoard'"></PrintboardUpload>
+		<ColorboardUpload ref="colorBoard" class="colorBoard" :isState="selectKey_ =='colorBoard'" v-show="selectKey_ == 'colorBoard'"></ColorboardUpload>
+		<SketchboardUpload ref="sketchBoard" class="sketchBoard" :isState="selectKey_ =='sketchBoard'" v-show="selectKey_ == 'sketchBoard'"></SketchboardUpload>
+		<mannequin ref="mannequin" class="mannequin" :isState="selectKey_ =='mannequin'" v-show="selectKey_ == 'mannequin'"></mannequin>
+		<toProduct ref="toProduct" 
+			:productimgMenu="{value:'ToProductImage',label:$t('ProductImg.ProductImage')}" 
+			class="toProduct" 
+		 	:isState="selectKey_ =='toProduct'" 
+			v-show="selectKey_ == 'toProduct'"
+		></toProduct>
+		<toProduct ref="relight" 
+			:productimgMenu="{value:'Relight',label:$t('ProductImg.Relight')}" 
+			class="relight" 
+			:isState="selectKey_ =='relight'"	
+			v-show="selectKey_ == 'relight'"
+		></toProduct>
+		<poseTransfer ref="poseTransfer" class="poseTransfer" :isState="selectKey_ =='poseTransfer'" v-show="selectKey_ == 'poseTransfer'"></poseTransfer>
+		<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,watch,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import workspace from '../../workflow/workspace.vue'
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import design from '../../model/design/index.vue'
+import MoodboardUpload from '../../model/collection/MoodboardUpload.vue'
+import PrintboardUpload from '../../model/collection/PrintboardUpload.vue'
+import ColorboardUpload from '../../model/collection/ColorboardUpload.vue'
+import SketchboardUpload from '../../model/collection/SketchboardUpload.vue'
+import mannequin from '../../model/mannequin/index.vue'
+import toProduct from '../../model/toProduct/index.vue'
+import poseTransfer from '../../model/poseTransfer/index.vue'
+import canvasUpload from "@/component/Canvas/index.vue";
+
+import { gsap, TweenMax } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+export default defineComponent({
+    components:{ 
+		workspace,design,MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,mannequin,toProduct,canvasUpload,poseTransfer
+    },
+	props:{
+		selectKey_:{
+			type:String,
+			default:''
+		},
+		workflowType:String,
+		httpWorkflowType:String,
+	},
+    setup(props,{emit}) {
+        const store = useStore();
+		let driver__:any = computed(()=>{
+			return store.state.Guide.guide
+		}) 
+		provide('driver__',driver__) 
+		//['moodBoard','printBoard','colorBoard','sketchBoard','mannequin','toProduct]
+		const data = reactive({
+			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
+		})
+		const dataDom:any = reactive({
+			moodBoard:null as any,
+			printBoard:null as any,
+			colorBoard:null as any,
+			sketchBoard:null as any,
+			mannequin:null as any,
+			toProduct:null as any,  
+			design:null as any,
+			relight:null as any,
+			poseTransfer:null as any,
+			canvas:null as any,
+		})
+		const open = (str:any,button:any)=>{
+			nextTick(()=>{
+				if(dataDom[str]?.openSetData){
+					dataDom[str].openSetData(button)
+				}
+			})
+		}
+		const setitemData = (arr:any)=>{
+			return new Promise((resolve,reject)=>{
+			    nextTick(()=>{
+					arr.forEach((rv:any)=>{
+						let arr = ['design','patternMaking3D'] 						
+						if(arr.indexOf(rv) > -1 || !dataDom[rv])return
+						dataDom[rv].openSetData()
+					})
+					resolve('')
+				})
+			})
+		}
+		const unfold = ()=>{
+			if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
+		}
+		const getCollection = ()=>{
+			let value:any = {
+				 "id":data.selectObject.id,
+				"moduleList":["moodBoard", "printBoard", "colorBoard", "sketchBoard",'design','toProduct','relight','poseTransfer']
+			}
+			Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
+				historyChooseData(rv)//设置历史数据
+				let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard','design','toProduct','relight','poseTransfer']
+				let canvasData = ['canvas']
+				for (let index = 0; index < canvasData.length; index++) {
+					const item = canvasData[index];
+					await getCanvasData(item)
+				}
+				await setitemData(allBoardData)
+				//还有一个canvas
+				if(rv.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
+				allBoardData.forEach((item)=>{
+					let value = {
+						type:item,
+						objectName:data.selectObject.type,
+					}
+					let arr  = ['sketchBoard','moodBoard','printBoard','colorBoard']
+					if(arr.indexOf(item) != -1){
+						store.dispatch('setAllBoardData',value)
+					}else{
+						store.dispatch('setModularData',value)
+					}
+				})
+
+			})
+		}
+		const getCanvasData = (str:any)=>{
+			return new Promise((resolve, reject) => {
+				let value = {
+					module:str,
+					projectId:data.selectObject.id,
+				}
+				Https.axiosPost(Https.httpUrls.exportSearch, value)
+				.then((rv) => {
+					store.commit("setCanvasData", {type:str,file:rv});
+					resolve('')
+				})
+				.catch((rv) => {
+					resolve(null)
+				});
+			})
+		}
+		const historyChooseData = (data:any)=>{
+			let collectionData = {
+				disposeMoodboard: data.moodBoard?.moodTemplateId?[{
+					id:data.moodBoard.moodTemplateId,
+					imgUrl:data.moodBoard.moodTemplateUrl,
+					resData:{
+						name:data.moodBoard.moodTemplateName,
+					}
+				}]:[],
+				moodboardPosition:data.moodBoard?.moodboardPosition?JSON.parse(data.moodBoard.moodboardPosition):{},
+				moodboardFiles: dealViewChooseData(
+					data.moodBoard?.moodBoards,"Moodboard"
+				),
+				printboardFiles: dealViewChooseData(
+					data.printBoard,"Printboard"
+				),
+				generatePrintFiles: [],
+				colorBoards: dealViewChooseColor(
+					data.colorBoard
+				),
+				sketchboardFiles: dealViewChooseData(
+					data.sketchBoard,"Sketchboard"
+				),
+			};
+			if(data.moodBoard?.moodTemplateId)store.commit("setMoodTemplateId", data.moodBoard.moodTemplateId);
+			store.commit("setAllBoardDataChoose", collectionData);
+			// store.commit('clearShowSketchboard')
+			store.commit("setShowSketchboard", data.sketchBoards);
+			let likeDesignCollectionList:any = []
+			if(data.design?.userLikeDetails){
+				data.design?.userLikeDetails.map(
+				(v: any) => {
+					let data = {
+						...v, 
+						groupDetailId: v.id,
+						designItemUrl: v.designOutfitUrl,
+						designItemId: v.designItemId,
+					};
+					return data;
+				}
+			); 
+			}
+			store.commit("setLikeDesignCollectionList",data.design.userLikeDetails);
+			store.commit("setUserGroupId", data.design.userGroupId);
+			console.log(data.toProduct)
+			if(data.toProduct){
+				let value = {
+					list: data.toProduct,
+					str:'add',
+					index:-1,
+				}
+				store.commit("setToProductImage", value);
+			}
+			if(data.relight){
+				let value = {
+					list: data.relight,
+					str:'add',
+					index:-1,
+				}
+				store.commit("setRelightList", value);
+			}
+			if(data.poseTransfer){
+				let value = {
+					list: data.poseTransfer,
+					str:'add',
+					index:-1,
+				}
+				store.commit("setPoseTransfer", value);
+			}
+		}
+		//统一处理选择组的渲染数据
+		const dealViewChooseData = (data: any,str:string)=> {
+			if (!data) {
+				return [];
+			}
+			let filesList = data.map((v: any) => {
+				let newData: any = {
+					imgUrl: v.url?v.url:v.designOutfitUrl,
+					id: v.id,
+					status: "done",
+					resData: v,
+					type_:{
+						type1:'material',
+						type2:v.level1Type
+					}
+				};
+				if (v.level1Type === "Sketchboard") {
+					newData.pin = v.isPin;
+					newData.categoryValue = v.level2Type;
+					newData.level2Type = v.level2Type;
+				}
+				if (v.level1Type === "Printboard") {
+					newData.pin = v.isPin;
+					newData.level2Type = v.level2Type;
+					newData.categoryValue = v.level2Type;
+				}
+				return newData;
+			});
+			return filesList;
+		}
+		//统一处理选择组的渲染数据
+		const dealViewChooseColor = (data: any)=>{
+			let colorList = data.map((v: any) => {
+				let rgbValue = v.rgbValue.split(" ");
+				let newData: any = {
+					id: v.id,
+					name: v.name,
+					tcx: v.tcx || "",
+					rgbValue: {
+						r: rgbValue[0],
+						g: rgbValue[1],
+						b: rgbValue[2],
+						a: 1,
+					},
+				};
+				if(v.gradient){
+					newData.gradient = v.gradient;
+				}else{
+					delete newData.gradient;
+				}
+				return newData;
+			});
+			return colorList;
+		}
+		onMounted(()=>{
+			nextTick(()=>{
+				getCollection()
+			})
+		})
+        return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			open,
+			unfold,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+	.seriesDesign{
+		display: flex;
+		width: 100%;
+		height: 100%;
+		> .contentBox{
+			position: relative;
+			flex: 1;
+			overflow: hidden;
+			> .content,
+			>.homeContent{
+				width: 100%;
+				height: 100%;
+				padding: 4rem;
+				// padding: 3rem;
+			}
+			> .content{
+				position: absolute;
+				top: 0;
+				left: 0;
+				transform: scale(0);
+				background: #ff6666;
+				display: flex;
+				flex-direction: column;
+				> *{
+					width: 100%;
+					height: 100%;
+					overflow: hidden;
+				}
+				> .back{
+					width: auto;
+					height: auto;
+					cursor: pointer;
+				}
+			}
+			> .homeContent{
+				// background: #91ff66;
+				position: absolute;
+			}
+		}
+	}
+</style>

src/component/HomePage/index/workflow/content/singleProductDesign.vue

@@ -0,0 +1,319 @@
+<template>
+	<div class="seriesDesign">
+		<workspace ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
+		<design ref="design" class="design" :isState="selectKey_ =='design'" v-show="selectKey_ == 'design'"></design>
+		<MoodboardUpload ref="moodBoard" class="moodBoard" :isState="selectKey_ =='moodBoard'" v-show="selectKey_ == 'moodBoard'"></MoodboardUpload>
+		<PrintboardUpload ref="printBoard" class="printBoard" :isState="selectKey_ =='printBoard'" v-show="selectKey_ == 'printBoard'"></PrintboardUpload>
+		<ColorboardUpload ref="colorBoard" class="colorBoard" :isState="selectKey_ =='colorBoard'" v-show="selectKey_ == 'colorBoard'"></ColorboardUpload>
+		<SketchboardUpload ref="sketchBoard" class="sketchBoard" :isState="selectKey_ =='sketchBoard'" v-show="selectKey_ == 'sketchBoard'"></SketchboardUpload>
+		<toProduct ref="toProduct" 
+			:productimgMenu="{value:'ToProductImage',label:$t('ProductImg.ProductImage')}" 
+			class="toProduct" 
+		 	:isState="selectKey_ =='toProduct'" 
+			v-show="selectKey_ == 'toProduct'"
+		></toProduct>
+		<toProduct ref="relight" 
+			:productimgMenu="{value:'Relight',label:$t('ProductImg.Relight')}" 
+			class="relight" 
+			:isState="selectKey_ =='relight'"	
+			v-show="selectKey_ == 'relight'"
+		></toProduct>
+		<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,watch,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import workspace from '../../workflow/workspace.vue'
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import design from '../../model/design/index.vue'
+import MoodboardUpload from '../../model/collection/MoodboardUpload.vue'
+import PrintboardUpload from '../../model/collection/PrintboardUpload.vue'
+import ColorboardUpload from '../../model/collection/ColorboardUpload.vue'
+import SketchboardUpload from '../../model/collection/SketchboardUpload.vue'
+import toProduct from '../../model/toProduct/index.vue'
+import canvasUpload from "@/component/Canvas/index.vue";
+
+import { gsap, TweenMax } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+export default defineComponent({
+    components:{ 
+		workspace,design,MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,toProduct,canvasUpload,
+    },
+	props:{
+		selectKey_:{
+			type:String,
+			default:''
+		},
+		workflowType:String,
+		httpWorkflowType:String,
+	},
+    setup(props,{emit}) {
+        const store = useStore();
+		let driver__:any = computed(()=>{
+			return store.state.Guide.guide
+		}) 
+		provide('driver__',driver__) 
+		const data = reactive({
+			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
+		})
+		const dataDom:any = reactive({
+			moodBoard:null as any,
+			printBoard:null as any,
+			colorBoard:null as any,
+			sketchBoard:null as any,
+			toProduct:null as any,  
+			design:null as any,
+			relight:null as any,
+			canvas:null as any,
+		})
+		const open = (str:any)=>{
+			nextTick(()=>{
+				if(dataDom[str]?.openSetData){
+					dataDom[str].openSetData()
+				}
+			})
+		}
+		const setitemData = (arr:any)=>{
+			return new Promise((resolve,reject)=>{
+			    nextTick(()=>{
+					arr.forEach((rv:any)=>{
+						let arr = ['design','patternMaking3D'] 						
+						if(arr.indexOf(rv) > -1 || !dataDom[rv])return
+						dataDom[rv].openSetData()
+					})
+					resolve('')
+				})
+			})
+		}
+		const unfold = ()=>{
+			if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
+		}
+		const getCollection = ()=>{
+			let value:any = {
+				 "id":data.selectObject.id,
+				"moduleList":["moodBoard", "printBoard", "colorBoard", "sketchBoard",'design','toProduct','relight']
+			}
+			Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
+				historyChooseData(rv)
+				let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard','design','toProduct','relight']
+				let canvasData = ['canvas']
+				for (let index = 0; index < canvasData.length; index++) {
+					const item = canvasData[index];
+					await getCanvasData(item)
+				}
+				await setitemData(allBoardData)
+				//还有一个canvas
+				if(rv.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
+				allBoardData.forEach((item)=>{
+					let value = {
+						type:item,
+						objectName:data.selectObject.type,
+					}
+					let arr  = ['sketchBoard','moodBoard','printBoard','colorBoard']
+					if(arr.indexOf(item) != -1){
+						store.dispatch('setAllBoardData',value)
+					}else{
+						store.dispatch('setModularData',value)
+					}
+				})
+
+			})
+		}
+		const getCanvasData = (str:any)=>{
+			return new Promise((resolve, reject) => {
+				let value = {
+					module:str,
+					projectId:data.selectObject.id,
+				}
+				Https.axiosPost(Https.httpUrls.exportSearch, value)
+				.then((rv) => {
+					store.commit("setCanvasData", {type:str,file:rv});
+					resolve('')
+				})
+				.catch((rv) => {
+					resolve(null)
+				});
+			})
+		}
+		const historyChooseData = (data:any)=>{
+			let collectionData = {
+				disposeMoodboard: data.moodBoard?.moodTemplateId?[{
+					id:data.moodBoard.moodTemplateId,
+					imgUrl:data.moodBoard.moodTemplateUrl,
+					resData:{
+						name:data.moodBoard.moodTemplateName,
+					}
+				}]:[],
+				moodboardPosition:data.moodBoard?.moodboardPosition?JSON.parse(data.moodBoard.moodboardPosition):{},
+				moodboardFiles: dealViewChooseData(
+					data.moodBoard?.moodBoards,"Moodboard"
+				),
+				printboardFiles: dealViewChooseData(
+					data.printBoard,"Printboard"
+				),
+				generatePrintFiles: [],
+				colorBoards: dealViewChooseColor(
+					data.colorBoard
+				),
+				sketchboardFiles: dealViewChooseData(
+					data.sketchBoard,"Sketchboard"
+				),
+			};
+			if(data.moodBoard?.moodTemplateId)store.commit("setMoodTemplateId", data.moodBoard.moodTemplateId);
+			store.commit("setAllBoardDataChoose", collectionData);
+			// store.commit('clearShowSketchboard')
+			store.commit("setShowSketchboard", data.sketchBoards);
+			let likeDesignCollectionList:any = []
+			if(data.design?.userLikeDetails){
+				data.design?.userLikeDetails.map(
+				(v: any) => {
+					let data = {
+						...v, 
+						groupDetailId: v.id,
+						designItemUrl: v.designOutfitUrl,
+						designItemId: v.designItemId,
+					};
+					return data;
+				}
+			); 
+			}
+			store.commit("setLikeDesignCollectionList",data.design.userLikeDetails);
+			store.commit("setUserGroupId", data.design.userGroupId);
+			if(data.toProduct){
+				let value = {
+					list: data.toProduct,
+					str:'add',
+					index:-1,
+				}
+				store.commit("setToProductImage", value);
+			}
+			if(data.relight){
+				let value = {
+					list: data.relight,
+					str:'add',
+					index:-1,
+				}
+				store.commit("setRelightList", value);
+			}
+
+		}
+		//统一处理选择组的渲染数据
+		const dealViewChooseData = (data: any,str:string)=> {
+			if (!data) {
+				return [];
+			}
+			let filesList = data.map((v: any) => {
+				let newData: any = {
+					imgUrl: v.url?v.url:v.designOutfitUrl,
+					id: v.id,
+					status: "done",
+					resData: v,
+					type_:{
+						type1:'material',
+						type2:v.level1Type
+					}
+				};
+				if (v.level1Type === "Sketchboard") {
+					newData.pin = v.isPin;
+					newData.categoryValue = v.level2Type;
+					newData.level2Type = v.level2Type;
+				}
+				if (v.level1Type === "Printboard") {
+					newData.pin = v.isPin;
+					newData.level2Type = v.level2Type;
+					newData.categoryValue = v.level2Type;
+				}
+				return newData;
+			});
+			return filesList;
+		}
+		//统一处理选择组的渲染数据
+		const dealViewChooseColor = (data: any)=>{
+			let colorList = data.map((v: any) => {
+				let rgbValue = v.rgbValue.split(" ");
+				let newData: any = {
+					id: v.id,
+					name: v.name,
+					tcx: v.tcx || "",
+					rgbValue: {
+						r: rgbValue[0],
+						g: rgbValue[1],
+						b: rgbValue[2],
+						a: 1,
+					},
+				};
+				if(v.gradient){
+					newData.gradient = v.gradient;
+				}else{
+					delete newData.gradient;
+				}
+				return newData;
+			});
+			return colorList;
+		}
+		onMounted(()=>{
+			nextTick(()=>{
+				getCollection()
+			})
+		})
+        return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			open,
+			unfold,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+	.seriesDesign{
+		display: flex;
+		width: 100%;
+		height: 100%;
+		> .contentBox{
+			position: relative;
+			flex: 1;
+			overflow: hidden;
+			> .content,
+			>.homeContent{
+				width: 100%;
+				height: 100%;
+				padding: 4rem;
+				// padding: 3rem;
+			}
+			> .content{
+				position: absolute;
+				top: 0;
+				left: 0;
+				transform: scale(0);
+				background: #ff6666;
+				display: flex;
+				flex-direction: column;
+				> *{
+					width: 100%;
+					height: 100%;
+					overflow: hidden;
+				}
+				> .back{
+					width: auto;
+					height: auto;
+					cursor: pointer;
+				}
+			}
+			> .homeContent{
+				// background: #91ff66;
+				position: absolute;
+			}
+		}
+	}
+</style>

src/component/HomePage/index/workflow/content/sketchDesign.vue

@@ -0,0 +1,223 @@
+<template>
+	<div class="seriesDesign">
+		<workspace ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
+		<SketchboardUpload ref="sketchBoard" class="sketchBoard" :isState="selectKey_ =='sketchBoard'" v-show="selectKey_ == 'sketchBoard'"></SketchboardUpload>
+		<deReconstruction ref="deReconstruction" class="deReconstruction" :isState="selectKey_ =='deReconstruction'" v-show="selectKey_ == 'deReconstruction'"></deReconstruction>
+		<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,watch,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import workspace from '../../workflow/workspace.vue'
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import SketchboardUpload from '../../model/collection/SketchboardUpload.vue'
+import deReconstruction from '../../model/deReconstruction/index.vue'
+import canvasUpload from "@/component/Canvas/index.vue";
+
+import { gsap, TweenMax } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+export default defineComponent({
+    components:{ 
+		workspace,SketchboardUpload,deReconstruction,canvasUpload
+    },
+	props:{
+		selectKey_:{
+			type:String,
+			default:''
+		},
+		workflowType:String,
+		httpWorkflowType:String,
+	},
+    setup(props,{emit}) {
+        const store = useStore();
+		let driver__:any = computed(()=>{
+			return store.state.Guide.guide
+		}) 
+		provide('driver__',driver__) 
+		//['moodBoard','printBoard','colorBoard','sketchBoard','mannequin','toProduct]
+		const data = reactive({
+			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
+		})
+		const dataDom:any = reactive({
+			sketchBoard:null as any,
+			deReconstruction:null as any,
+			canvas:null as any,
+		})
+		const open = (str:any)=>{
+			nextTick(()=>{
+				if(dataDom[str]?.openSetData){
+					dataDom[str].openSetData(str)
+				}
+			})
+		}
+		const setitemData = (arr:any)=>{
+			return new Promise((resolve,reject)=>{
+			    nextTick(()=>{
+					arr.forEach((rv:any)=>{
+						if(rv == 'design' || rv == 'deReconstruction' || rv == 'canvas' || !dataDom[rv])return
+						dataDom[rv].openSetData()
+					})
+					resolve('')
+				})
+			})
+		}
+		const unfold = ()=>{
+			if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
+		}
+		const getCollection = ()=>{
+			let value:any = {
+				 "id":data.selectObject.id,
+				"moduleList":["sketchBoard",'deReconstruction']
+			}
+			Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
+				historyChooseData(rv)
+				let allBoardData = ['sketchBoard','deReconstruction']
+				let canvasData = ['deReconstruction','canvas']
+				for (let index = 0; index < canvasData.length; index++) {
+					const item = canvasData[index];
+					await getCanvasData(item)
+				}
+				await setitemData(allBoardData)
+				//还有一个canvas
+				if(rv.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
+				allBoardData.forEach((item)=>{
+					let value = {
+						type:item,
+						objectName:data.selectObject.type,
+					}
+					let arr  = ['sketchBoard','moodBoard','printBoard','colorBoard']
+					if(arr.indexOf(item) != -1){
+						store.dispatch('setAllBoardData',value)
+					}else{
+						store.dispatch('setModularData',value)
+					}
+				})
+
+			})
+		}
+		const getCanvasData = (str:any)=>{
+			return new Promise((resolve, reject) => {
+				let value = {
+					module:str,
+					projectId:data.selectObject.id,
+				}
+				Https.axiosPost(Https.httpUrls.exportSearch, value)
+				.then((rv) => {
+					store.commit("setCanvasData", {type:str,file:rv});
+					resolve('')
+				})
+				.catch((rv) => {
+					resolve(null)
+				});
+			})
+		}
+		const historyChooseData = (data:any)=>{
+			let collectionData = {
+				sketchboardFiles: dealViewChooseData(
+					data.sketchBoard,"Sketchboard"
+				),
+			};
+			store.commit("setAllBoardDataChoose", collectionData);
+			if(data.deReconstruction){
+				data.deReconstruction.url = data.deReconstruction.collageSketchUrl
+				data.deReconstruction.isLike = data.deReconstruction.liked
+				let value = {
+					list: [data.deReconstruction],
+					str:'add',
+					index:-1,
+				}
+				store.commit("setDeReconstruction", value);
+			}
+		} 
+		//统一处理选择组的渲染数据
+		const dealViewChooseData = (data: any,str:string)=> {
+			if (!data) {
+				return [];
+			}
+			let filesList = data.map((v: any) => {
+				let newData: any = {
+					imgUrl: v.url?v.url:v.designOutfitUrl,
+					id: v.id,
+					status: "done",
+					resData: v,
+					type_:{
+						type1:'material',
+						type2:v.level1Type
+					}
+				};
+				if (v.level1Type === "Sketchboard") {
+					newData.pin = v.isPin;
+					newData.categoryValue = v.level2Type;
+					newData.level2Type = v.level2Type;
+				}
+				return newData;
+			});
+			return filesList;
+		}
+		
+		onMounted(()=>{
+			nextTick(()=>{
+				getCollection()
+			})
+		})
+        return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			open,
+			unfold,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+	.seriesDesign{
+		display: flex;
+		width: 100%;
+		height: 100%;
+		> .contentBox{
+			position: relative;
+			flex: 1;
+			overflow: hidden;
+			> .content,
+			>.homeContent{
+				width: 100%;
+				height: 100%;
+				padding: 4rem;
+				// padding: 3rem;
+			}
+			> .content{
+				position: absolute;
+				top: 0;
+				left: 0;
+				transform: scale(0);
+				background: #ff6666;
+				display: flex;
+				flex-direction: column;
+				> *{
+					width: 100%;
+					height: 100%;
+					overflow: hidden;
+				}
+				> .back{
+					width: auto;
+					height: auto;
+					cursor: pointer;
+				}
+			}
+			> .homeContent{
+				// background: #91ff66;
+				position: absolute;
+			}
+		}
+	}
+</style>