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

<template>
	<div class="workflowBox">
		<div class="workflow" v-show="isUpdataPorject || selectObject.id">
			<navList @setSelectKey="setSelectKey" @unfold="unfold" @goHome="goHome" :navListData="navListData" :selectKey="selectKey"></navList>
			<div class="contentBox" :style="[{overflow:selectKey == 'canvas'?'hidden':''}]">
				<div class="homeContent" ref="parent">
					<navListBox 
						@setSelectKey=setSelectKey 
						:navListData="navListData" 
						:selectKey="selectKey" 
						:workflowType="workflowType" 
						v-model:isShowMark="isShowMark"
					></navListBox>
				</div>
				<div class="content">
					<div class="back">
						<div class="title">
							<i :class="[navListData?.find((item:any) => item.value === selectKey_)?.icon]"></i>
							{{ navListData?.find((item:any) => item.value === selectKey_)?.name }}
						</div>
						<div class="text" @click="setBack()"><i class="fi fi-bs-down-left-and-up-right-to-center"></i></div>
					</div>
					<content ref="content" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></content>
				</div>
			</div>
		</div>
		<div v-if="!isUpdataPorject && !selectObject.id" class="workflow">
			<workspace :workflowType="workflowType" @setProject="setProject" :httpWorkflowType="httpWorkflowType"></workspace>
		</div>
		<div class="mark_loading" v-show="isShowMark">
			<a-spin size="large" />
		</div>
	</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 content from './content/index.vue'
import workspace from './workspace.vue'
import navList from './nav.vue'
import navListBox from './navBox.vue'


import { gsap, TweenMax } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export default defineComponent({
    components:{
		content,navList,navListBox,workspace
    },
	//props
	props:{
		workflowType:{
			type:String,

		},
		httpWorkflowType:{
			type:String,
			default:''
		}
    },
	emits:['goHome'],
    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),//选择的项目
			selectKey:'',
			selectKey_:'',
			isShowMark:false,
			isUpdataPorject:false as any,
			adminData:{
				position:'',
				dom:null as any,
				parentDom:null as any,
			},
			navListData:computed(()=>{
				return store.state.Workspace.projectList
			}),
		})
		const setIsShowMark = (boolean:boolean)=>{
			data.isShowMark = boolean
		}
		provide('setIsShowMark',setIsShowMark)
		const dataTime = reactive({
			selectTime:null as any,
		})
		const dataDom = reactive({
			parent:null as any,
			content:null as any
		})		
		const setBack = ()=>{
			data.selectKey = ''
			updataPage()
		}
		const setProject = (value:any)=>{
			// data.isUpdataPorject = data
			if(value == 'set'){
				data.isUpdataPorject = true
			}else{
				data.isUpdataPorject = false
			}
		}
		const setSelectKey = async (value:any)=>{
			let {str,dom,position} = value
			data.adminData.dom = dom
			data.adminData.parentDom = value?.parentDom
			data.adminData.position = position
			data.selectKey = str
			updataPage()
			if(value.str)dataDom.content.setModule(value)
		}
		const updataPage = ()=>{
			let {dom,position} = data.adminData
			let contentDom:any = document.querySelectorAll('.workflow .content')[0]
			clearTimeout(dataTime.selectTime)
			let {top,left,width,height} = dom.getBoundingClientRect()
			let parentPosition = dataDom.parent.getBoundingClientRect()
			let parentTop = parentPosition?.top
			let parentLeft = parentPosition?.left
			if(data.selectKey_ && data.selectKey == ''){
				// let index = data.navListData.findIndex((item:any) => item.value === data.selectKey_);
				let y = top - parentTop + height / 2
				let x = left - parentLeft + width / 2
				if(position == 'nav'){
					x = 0
					y = dom.offsetTop + dom.offsetHeight / 2
				}
				contentDom.style.transformOrigin = `${x}px ${y}px`
				gsap.to(contentDom,.5, {scale:0,opacity:1,ease: "power2.inOut"},);
				dataTime.selectTime = setTimeout(() => {
					data.selectKey_ = data.selectKey
				}, 500);
			}else{
				data.selectKey_ = data.selectKey
				nextTick(()=>{
					// let index = data.navListData.findIndex((item:any) => item.value === str);
					let y = top - parentTop + height / 2
					let x = left - parentLeft + width / 2
					if(position == 'nav'){
						x = 0
						y = dom.offsetTop + dom.offsetHeight / 2
					}
					// dataDom.content.open({selectKey:data.selectKey_,workflowType:props.workflowType})
					contentDom.style.transformOrigin = `${x}px ${y}px`
					gsap.to(contentDom,.5, {scale:1,opacity:1,ease: "power2.inOut"},);
				})
			}
		}
		const goHome = ()=>{
			emit("goHome");
		}
		const unfold = ()=>{
			dataDom.content.unfold()
		}
        return{
			...toRefs(dataDom),
			...toRefs(data),
			setBack,
			setProject,
			setSelectKey,
			unfold,
			goHome,
        }
    },

	provide() {
		return {
		}
	},
		
})
</script>
<style lang="less" scoped>
	.workflowBox{
		display: flex;
		width: 100%;
		height: 100%;
		> .workflow{
			display: flex;
			width: 100%;
			height: 100%;
			> .contentBox{
				position: relative;
				flex: 1;
				overflow: hidden;
				> .content,
				>.homeContent{
					width: 100%;
					height: 100%;
					padding: 4rem;
					padding-top: 3rem;
					// padding: 3rem;
				}
				> .content{
					position: absolute;
					top: 0;
					left: 0;
					transform: scale(0);
					// background: #ff6666;
					background: #fff;
					display: flex;
					flex-direction: column;
					> *{
						width: 100%;
						height: 100%;
					}
					> .back{
						width: auto;
						height: auto;
						display: flex;
						padding-bottom: 1rem;
						> .title{
							font-size: 2.5rem;
							font-weight: 600;
							display: flex;
							align-items: center;
							> i{
								font-size: 2rem;
								display: flex;
								margin-right: 1rem;
							}
						}
						> .text{
							cursor: pointer;
							margin-left: auto;
							> i{
								font-size: 3rem;
								display: flex;
							}
						}
					}
				}
				> .homeContent{
					// background: #91ff66;
					position: absolute;
				}
			}
		}
	}
</style>