fix
This commit is contained in:
X1627315083
234
src/component/HomePage/index/workflow/index.vue
Normal file
234
src/component/HomePage/index/workflow/index.vue
Normal file
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<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">
|
||||
{{ 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-show="!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>
|
||||
</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>
|
||||
.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: 2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
> .text{
|
||||
cursor: pointer;
|
||||
margin-left: auto;
|
||||
> i{
|
||||
font-size: 3rem;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .homeContent{
|
||||
// background: #91ff66;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user