|
|
@ -19,7 +19,7 @@ |
|
|
<div class="btns-toolbar btns-toolbar-left"> |
|
|
<div class="btns-toolbar btns-toolbar-left"> |
|
|
<div class="btns btns-top"> |
|
|
<div class="btns btns-top"> |
|
|
<template v-for="panel in getWidgetBySide('left')"> |
|
|
<template v-for="panel in getWidgetBySide('left')"> |
|
|
<div class="item" :class="{selected:sectionLeftTitle===panel.name}" @click="btnLeftMe(panel)" |
|
|
<div class="item" :class="{selected:sectionLeftName===panel.name}" @click="btnLeftMe(panel)" |
|
|
:title="panel.title"> |
|
|
:title="panel.title"> |
|
|
<component :is="panel.icon" /> |
|
|
<component :is="panel.icon" /> |
|
|
</div> |
|
|
</div> |
|
|
@ -27,17 +27,19 @@ |
|
|
</div> |
|
|
</div> |
|
|
<div class="btns btns-bottom"> |
|
|
<div class="btns btns-bottom"> |
|
|
<template v-for="panel in getWidgetBySide('bottom')"> |
|
|
<template v-for="panel in getWidgetBySide('bottom')"> |
|
|
<div class="item" :class="{selected:sectionBottomTitle===panel.name}" @click="btnBottomMe(panel)" |
|
|
<div class="item" :class="{selected:sectionBottomName===panel.name}" @click="btnBottomMe(panel)" |
|
|
:title="panel.title"> |
|
|
:title="panel.title"> |
|
|
<component :is="panel.icon" /> |
|
|
<component :is="panel.icon" /> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<Split class="section" :direction="'vertical'" style="flex-shrink: 0;flex-grow:1;" ref="mainSplit"> |
|
|
<Split class="section" :direction="'vertical'" style="flex-shrink: 0;flex-grow:1;" ref="mainSplit" |
|
|
|
|
|
@onDragEnd="bottomDragEnd"> |
|
|
<SplitArea class="section-top" :size="hideBottom ? 100 : (100 - bottomSize)" :min-size="50" |
|
|
<SplitArea class="section-top" :size="hideBottom ? 100 : (100 - bottomSize)" :min-size="50" |
|
|
:class="{'hidden-split':hideBottom}"> |
|
|
:class="{'hidden-split':hideBottom}"> |
|
|
<Split class="section" :direction="'horizontal'" style="flex-shrink: 0;flex-grow:1;" ref="centerSplit"> |
|
|
<Split class="section" :direction="'horizontal'" style="flex-shrink: 0;flex-grow:1;" ref="centerSplit" |
|
|
|
|
|
@onDragEnd="centerDragEnd"> |
|
|
<SplitArea v-show="!hideLeft" class="section-left" :class="{'hidden-split':hideLeft}" |
|
|
<SplitArea v-show="!hideLeft" class="section-left" :class="{'hidden-split':hideLeft}" |
|
|
:size="hideLeft ? 0 : sectionLeftSize"> |
|
|
:size="hideLeft ? 0 : sectionLeftSize"> |
|
|
<div class="section-item-wrap"> |
|
|
<div class="section-item-wrap"> |
|
|
@ -58,14 +60,14 @@ |
|
|
</div> |
|
|
</div> |
|
|
</SplitArea> |
|
|
</SplitArea> |
|
|
<SplitArea class="section-center" :class="{'hidden-split':hideRight}" :size="calcCenterSize"> |
|
|
<SplitArea class="section-center" :class="{'hidden-split':hideRight}" :size="calcCenterSize"> |
|
|
<el-tabs type="card" class="section-tabs"> |
|
|
<el-tabs type="card" class="section-tabs" v-model="centerActiveName" @tab-click="handleCenterTabClick"> |
|
|
<el-tab-pane label="模型属性" lazy> |
|
|
<el-tab-pane label="2D视图" name="ModelEditor" lazy> |
|
|
<el-empty description="暂无数据" /> |
|
|
|
|
|
</el-tab-pane> |
|
|
|
|
|
<el-tab-pane label="3D编辑器" name="ModelEditor" lazy> |
|
|
|
|
|
<ModelEditor /> |
|
|
<ModelEditor /> |
|
|
</el-tab-pane> |
|
|
</el-tab-pane> |
|
|
<el-tab-pane label="基础资料" lazy> |
|
|
<el-tab-pane label="模型属性" name="ModelFile" lazy> |
|
|
|
|
|
<el-empty description="暂无数据" /> |
|
|
|
|
|
</el-tab-pane> |
|
|
|
|
|
<el-tab-pane label="基础资料" name="ModelDataSet" lazy> |
|
|
<el-empty description="暂无数据" /> |
|
|
<el-empty description="暂无数据" /> |
|
|
</el-tab-pane> |
|
|
</el-tab-pane> |
|
|
</el-tabs> |
|
|
</el-tabs> |
|
|
@ -145,37 +147,37 @@ export default { |
|
|
return { |
|
|
return { |
|
|
Logo, |
|
|
Logo, |
|
|
calcRootMenu: getRootMenu(), |
|
|
calcRootMenu: getRootMenu(), |
|
|
activeIndex: '', |
|
|
|
|
|
bottomSize: 30, |
|
|
bottomSize: 30, |
|
|
hideBottom: true, |
|
|
hideBottom: true, |
|
|
hideLeft: false, |
|
|
hideLeft: false, |
|
|
hideRight: false, |
|
|
hideRight: false, |
|
|
sectionLeftSize: 20, |
|
|
sectionLeftSize: 20, |
|
|
sectionRightSize: 20, |
|
|
sectionRightSize: 20, |
|
|
sectionLeftTitle: 'modeltree', |
|
|
sectionLeftName: 'modeltree', |
|
|
sectionRightTitle: 'property', |
|
|
sectionRightName: 'property', |
|
|
sectionBottomTitle: '', |
|
|
sectionBottomName: '', |
|
|
sectionLeftSearch: '' |
|
|
sectionLeftSearch: '', |
|
|
|
|
|
centerActiveName: 'ModelEditor' |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
computed: { |
|
|
computed: { |
|
|
calcLeftPanel() { |
|
|
calcLeftPanel() { |
|
|
if (!this.sectionLeftTitle || this.hideLeft) { |
|
|
if (!this.sectionLeftName || this.hideLeft) { |
|
|
return undefined |
|
|
return undefined |
|
|
} |
|
|
} |
|
|
return getWidgetByName(this.sectionLeftTitle) |
|
|
return getWidgetByName(this.sectionLeftName) |
|
|
}, |
|
|
}, |
|
|
calcRightPanel() { |
|
|
calcRightPanel() { |
|
|
if (!this.sectionRightTitle || this.hideRight) { |
|
|
if (!this.sectionRightName || this.hideRight) { |
|
|
return undefined |
|
|
return undefined |
|
|
} |
|
|
} |
|
|
return getWidgetByName(this.sectionRightTitle) |
|
|
return getWidgetByName(this.sectionRightName) |
|
|
}, |
|
|
}, |
|
|
calcBottomPanel() { |
|
|
calcBottomPanel() { |
|
|
if (!this.sectionBottomTitle || this.hideBottom) { |
|
|
if (!this.sectionBottomName || this.hideBottom) { |
|
|
return undefined |
|
|
return undefined |
|
|
} |
|
|
} |
|
|
return getWidgetByName(this.sectionBottomTitle) |
|
|
return getWidgetByName(this.sectionBottomName) |
|
|
}, |
|
|
}, |
|
|
calcCenterSize() { |
|
|
calcCenterSize() { |
|
|
if (this.hideLeft && this.hideRight) { |
|
|
if (this.hideLeft && this.hideRight) { |
|
|
@ -206,6 +208,18 @@ export default { |
|
|
methods: { |
|
|
methods: { |
|
|
renderIcon, |
|
|
renderIcon, |
|
|
getWidgetBySide, |
|
|
getWidgetBySide, |
|
|
|
|
|
handleCenterTabClick(tab) { |
|
|
|
|
|
if (tab?.name) { |
|
|
|
|
|
this.centerActiveName = tab.name |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
centerDragEnd(sizes) { |
|
|
|
|
|
this.sectionLeftSize = sizes[0] |
|
|
|
|
|
this.sectionRightSize = sizes[2] |
|
|
|
|
|
}, |
|
|
|
|
|
bottomDragEnd(sizes) { |
|
|
|
|
|
this.bottomSize = sizes[1] |
|
|
|
|
|
}, |
|
|
recalcCenterSize() { |
|
|
recalcCenterSize() { |
|
|
if (this.hideLeft && this.hideRight) { |
|
|
if (this.hideLeft && this.hideRight) { |
|
|
this.$refs.centerSplit.refreshSize([0, 100, 0]) |
|
|
this.$refs.centerSplit.refreshSize([0, 100, 0]) |
|
|
@ -227,45 +241,45 @@ export default { |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
btnLeftMe(panel) { |
|
|
btnLeftMe(panel) { |
|
|
if (this.sectionLeftTitle === panel.name) { |
|
|
if (this.sectionLeftName === panel.name) { |
|
|
this.hideLeft = true |
|
|
this.hideLeft = true |
|
|
this.sectionLeftTitle = '' |
|
|
this.sectionLeftName = '' |
|
|
|
|
|
|
|
|
} else { |
|
|
} else { |
|
|
this.hideLeft = false |
|
|
this.hideLeft = false |
|
|
this.sectionLeftTitle = panel.name |
|
|
this.sectionLeftName = panel.name |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
btnRightMe(panel) { |
|
|
btnRightMe(panel) { |
|
|
if (this.sectionRightTitle === panel.name) { |
|
|
if (this.sectionRightName === panel.name) { |
|
|
this.hideRight = true |
|
|
this.hideRight = true |
|
|
this.sectionRightTitle = '' |
|
|
this.sectionRightName = '' |
|
|
|
|
|
|
|
|
} else { |
|
|
} else { |
|
|
this.hideRight = false |
|
|
this.hideRight = false |
|
|
this.sectionRightTitle = panel.name |
|
|
this.sectionRightName = panel.name |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
btnBottomMe(panel) { |
|
|
btnBottomMe(panel) { |
|
|
if (this.sectionBottomTitle === panel.name) { |
|
|
if (this.sectionBottomName === panel.name) { |
|
|
this.hideBottom = true |
|
|
this.hideBottom = true |
|
|
this.sectionBottomTitle = '' |
|
|
this.sectionBottomName = '' |
|
|
|
|
|
|
|
|
} else { |
|
|
} else { |
|
|
this.hideBottom = false |
|
|
this.hideBottom = false |
|
|
this.sectionBottomTitle = panel.name |
|
|
this.sectionBottomName = panel.name |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
closeMe(btn) { |
|
|
closeMe(btn) { |
|
|
if (btn === 'hideLeft') { |
|
|
if (btn === 'hideLeft') { |
|
|
this.hideLeft = true |
|
|
this.hideLeft = true |
|
|
this.sectionLeftTitle = '' |
|
|
this.sectionLeftName = '' |
|
|
} else if (btn === 'hideRight') { |
|
|
} else if (btn === 'hideRight') { |
|
|
this.hideRight = true |
|
|
this.hideRight = true |
|
|
this.sectionRightTitle = '' |
|
|
this.sectionRightName = '' |
|
|
} else if (btn === 'hideBottom') { |
|
|
} else if (btn === 'hideBottom') { |
|
|
this.hideBottom = true |
|
|
this.hideBottom = true |
|
|
this.sectionBottomTitle = '' |
|
|
this.sectionBottomName = '' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
