243 lines
5.5 KiB
Vue
243 lines
5.5 KiB
Vue
<template>
|
|
<div class="menu-box">
|
|
<home-header></home-header>
|
|
<div id="container" class="content-menu">
|
|
<div class="rela">
|
|
<div class="left">
|
|
<div
|
|
class="first-title-text"
|
|
v-for="(data, i) in titleList"
|
|
:key="i"
|
|
@click="changeName(data)"
|
|
:style="{ color: data.name === titleData.name ? '#0058e1' : '' }"
|
|
>
|
|
<div class="img" :class="data.className"></div>
|
|
{{ data.name }}
|
|
</div>
|
|
<abilityDocTree
|
|
:dataList="treeArray"
|
|
@treeClick="treeClick"
|
|
:clickData="clickData"
|
|
></abilityDocTree>
|
|
</div>
|
|
<div class="right">
|
|
<div
|
|
class="new-menu-box"
|
|
style="height: 100%"
|
|
v-if="titleData.name === '新手指引'"
|
|
>
|
|
<!-- 新手指引 -->
|
|
<a-empty description="新手指引" />
|
|
</div>
|
|
<div v-else style="height: 100%">
|
|
<iframe
|
|
name="iframeName"
|
|
width="1000"
|
|
height="100%"
|
|
id="iframeId"
|
|
:frameborder="0"
|
|
:src="clickData.doc"
|
|
></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import HomeHeader from '@/views/home/components/header'
|
|
import abilityDocTree from './components/abilityDocTree'
|
|
import { ref, reactive, onMounted, nextTick, watch } from 'vue'
|
|
import { Empty, message } from 'ant-design-vue'
|
|
import { getDevelopDocTree } from '@/api/home'
|
|
import flatten from '@turf/flatten'
|
|
|
|
const titleList = ref([
|
|
{
|
|
name: '新手指引',
|
|
className: 'newGuide',
|
|
},
|
|
{
|
|
name: '技术文档',
|
|
className: 'doc',
|
|
},
|
|
])
|
|
const titleData = ref(titleList.value[0])
|
|
const clickData = ref({})
|
|
const treeArray = ref([])
|
|
const treeArrayCopy = ref([])
|
|
let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库']
|
|
|
|
const treeClick = (item) => {
|
|
clickData.value = item
|
|
console.log('clickData------------>', item)
|
|
titleData.value = titleList.value[1]
|
|
}
|
|
|
|
const getTreeData = () => {
|
|
getDevelopDocTree({})
|
|
.then((res) => {
|
|
console.log('res------文档树------>', res)
|
|
if (res.data.code !== 0) {
|
|
return message.error(res.data.msg)
|
|
}
|
|
treeArray.value = res.data.data || []
|
|
treeArrayCopy.value = JSON.parse(JSON.stringify(treeArray.value))
|
|
})
|
|
.catch((err) => {
|
|
message.error(err)
|
|
})
|
|
}
|
|
|
|
const changeName = (item) => {
|
|
titleData.value = item
|
|
if (item.name == '新手指引') {
|
|
clickData.value = {}
|
|
}
|
|
if (item.name == '技术文档') {
|
|
if (!clickData.value.title) {
|
|
clickData.value = {}
|
|
treeArray.value = []
|
|
treeArrayCopy.value.map((val, i) => {
|
|
let obj = Object.assign({}, val, {
|
|
title: val.title,
|
|
show:
|
|
(i === 0 && val.children && val.children.length > 0) ||
|
|
typeList.includes(val.title)
|
|
? true
|
|
: false,
|
|
children: [],
|
|
})
|
|
formData(val.children, obj)
|
|
treeArray.value.push(obj)
|
|
})
|
|
getFirstData(treeArrayCopy.value[0] || {})
|
|
}
|
|
}
|
|
}
|
|
|
|
const formData = (children = [], dataItem) => {
|
|
children.map((item, index) => {
|
|
let _obj = Object.assign({}, item, {
|
|
title: item.title,
|
|
show:
|
|
(index === 0 && item.children && item.children.length > 0) ||
|
|
typeList.includes(item.title)
|
|
? true
|
|
: false,
|
|
children: [],
|
|
})
|
|
if (item.children && item.children.length > 0) {
|
|
formData(item.children, _obj)
|
|
}
|
|
dataItem.children.push(_obj)
|
|
})
|
|
}
|
|
|
|
const getFirstData = (firstObj = {}) => {
|
|
if (firstObj && firstObj.children && firstObj.children.length > 0) {
|
|
getFirstData(firstObj.children[0])
|
|
} else {
|
|
clickData.value = firstObj
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
getTreeData()
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.menu-box {
|
|
// overflow: hidden;
|
|
height: 100%;
|
|
}
|
|
|
|
.first-title-text {
|
|
cursor: pointer;
|
|
font-size: 18px;
|
|
color: #333;
|
|
padding-bottom: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&:hover {
|
|
color: #0058e1;
|
|
}
|
|
}
|
|
|
|
.content-menu {
|
|
width: 1240px;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
margin: 0 auto;
|
|
margin-top: 74px;
|
|
box-sizing: border-box;
|
|
position: fixed;
|
|
left: 50%;
|
|
bottom: 0;
|
|
transform: translateX(-50%);
|
|
top: 0.6rem;
|
|
top: 0;
|
|
}
|
|
|
|
.left {
|
|
width: 240px;
|
|
padding: 20px;
|
|
height: 600px;
|
|
margin-right: 20px;
|
|
background: rgba(244, 245, 248, 0.8);
|
|
overflow-y: scroll;
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 0;
|
|
}
|
|
|
|
.right {
|
|
width: 870px;
|
|
height: calc(100% - 20px);
|
|
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 260px;
|
|
}
|
|
|
|
.sidebar {
|
|
right: 0 !important;
|
|
}
|
|
|
|
.content {
|
|
right: 16rem !important;
|
|
left: 0 !important;
|
|
}
|
|
|
|
.img {
|
|
height: 20px;
|
|
width: 20px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.doc {
|
|
background: url('~@/assets/capabilityCloud/doc.png') no-repeat;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.newGuide {
|
|
background: url('~@/assets/capabilityCloud/newGuide.png') no-repeat;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.new-menu-box {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.rela {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
</style>
|