技术文档-联系我们、使用手册、提供服务
This commit is contained in:
gaoyuanwei
parent
11362c536d
commit
77c5cba599
Binary file not shown.
|
After Width: | Height: | Size: 514 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -1,125 +1,157 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="menu-box">
|
<div class="menu-box">
|
||||||
<div class="content-box">
|
<div class="content-box">
|
||||||
<!-- 提供服务 -->
|
<!-- 提供服务 -->
|
||||||
<div class="img-bg service-box">
|
<div class="img-bg service-box">
|
||||||
<div class="title" style="margin-bottom: 20px">
|
<div class="title" style="margin-bottom: 20px">
|
||||||
<div class="text text-white">提供服务</div>
|
<div class="text text-white">提供服务</div>
|
||||||
<div class="line line-white"></div>
|
<div class="line line-white"></div>
|
||||||
</div>
|
|
||||||
<div class="list-box">
|
|
||||||
<div class="list-item" v-for="(item, i) in seviceList" :key="i">
|
|
||||||
<div class="item-name">{{ item.name }}</div>
|
|
||||||
<div class="name-box">
|
|
||||||
<div class="item-v" v-for="(v, j) in item.list" :key="j">{{ v }}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- imgList -->
|
|
||||||
<div class="img-box" v-for="(item, i) in imgList" :key="i">
|
|
||||||
<div class="title">
|
|
||||||
<div class="text">{{ item.name }}</div>
|
|
||||||
<div class="line"></div>
|
|
||||||
</div>
|
|
||||||
<div class="img-bg" :class="item.className" :style="{ 'background-image': `url(${item.bgImg || ''})` }">
|
|
||||||
</div>
|
|
||||||
<div v-if="item.btnText" class="btn">{{ item.btnText }} >></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="list-box">
|
||||||
|
<div class="list-item" v-for="(item, i) in seviceList" :key="i">
|
||||||
|
<div class="item-name">
|
||||||
|
<img :src="item.img" />
|
||||||
|
{{ item.name }}
|
||||||
|
</div>
|
||||||
|
<div class="name-box">
|
||||||
|
<div class="item-v" v-for="(v, j) in item.list" :key="j">
|
||||||
|
{{ v }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- imgList -->
|
||||||
|
<div class="img-box" v-for="(item, i) in imgList" :key="i">
|
||||||
|
<div class="title">
|
||||||
|
<div class="text">{{ item.name }}</div>
|
||||||
|
<div class="line"></div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="img-bg"
|
||||||
|
:class="item.className"
|
||||||
|
:style="{ 'background-image': `url(${item.bgImg || ''})` }"
|
||||||
|
></div>
|
||||||
|
<div v-if="item.btnText" class="btn">{{ item.btnText }} >></div>
|
||||||
|
</div>
|
||||||
|
<!-- 联系我们 -->
|
||||||
|
<div class="img-bg callus-box">
|
||||||
|
<div class="title" style="margin-bottom: 20px">
|
||||||
|
<div class="text text-white">联系我们</div>
|
||||||
|
<div class="line line-white"></div>
|
||||||
|
</div>
|
||||||
|
<div class="list-box">
|
||||||
|
<p>
|
||||||
|
办公电话：
|
||||||
|
<span>0530-0000000</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
手机号：
|
||||||
|
<span>0530-0000000</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import HomeHeader from '@/views/home/components/header'
|
import HomeHeader from '@/views/home/components/header'
|
||||||
import HomeFooter from '@/views/newHome/components/Footer'
|
import HomeFooter from '@/views/newHome/components/Footer'
|
||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted } from 'vue'
|
||||||
|
|
||||||
const seviceList = ref(
|
const seviceList = ref([
|
||||||
[
|
{
|
||||||
{
|
name: '组件服务',
|
||||||
name: '组件服务',
|
img: require('@/assets/menu/service-component.png'),
|
||||||
list: ['智能算法', '图层服务', '开发组件', '业务组件'],
|
list: ['智能算法', '图层服务', '开发组件', '业务组件'],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '应用资源',
|
name: '应用资源',
|
||||||
list: ['办公系统', '业务系统', '门户网站', '大屏看板', '小程序', '公众号'],
|
img: require('@/assets/menu/service-application.png'),
|
||||||
},
|
list: [
|
||||||
{
|
'办公系统',
|
||||||
name: '组件服务',
|
'业务系统',
|
||||||
list: ['视频资源', '云资源', '感知资源'],
|
'门户网站',
|
||||||
},
|
'大屏看板',
|
||||||
{
|
'小程序',
|
||||||
name: '组件服务',
|
'公众号',
|
||||||
list: ['政务信息资源'],
|
],
|
||||||
},
|
},
|
||||||
]
|
{
|
||||||
)
|
name: '基础设施',
|
||||||
|
img: require('@/assets/menu/service-infrastructure.png'),
|
||||||
|
|
||||||
const imgList = ref([
|
list: ['视频资源', '云资源', '感知资源'],
|
||||||
{
|
|
||||||
name: '能力上架',
|
|
||||||
bgImg: require('../../../assets/menu/shelves.png'),
|
|
||||||
btnText: '立即上架',
|
|
||||||
className: 'shelves-img'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '能力申请',
|
name: '数据资源',
|
||||||
bgImg: require('../../../assets/menu/apply.png'),
|
img: require('@/assets/menu/service-data.png'),
|
||||||
btnText: '立即申请',
|
|
||||||
className: 'apply-img'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '需求发布',
|
|
||||||
bgImg: require('../../../assets/menu/demand.png'),
|
|
||||||
btnText: '立即发布',
|
|
||||||
className: 'demand-img'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '资源下架',
|
|
||||||
bgImg: require('../../../assets/menu/down.png'),
|
|
||||||
btnText: '立即下架',
|
|
||||||
className: 'down-img'
|
|
||||||
},
|
|
||||||
])
|
|
||||||
|
|
||||||
|
list: ['政务信息资源'],
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const imgList = ref([
|
||||||
|
{
|
||||||
|
name: '能力上架',
|
||||||
|
bgImg: require('../../../assets/menu/shelves.png'),
|
||||||
|
btnText: '立即上架',
|
||||||
|
className: 'shelves-img',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '能力申请',
|
||||||
|
bgImg: require('../../../assets/menu/apply.png'),
|
||||||
|
btnText: '立即申请',
|
||||||
|
className: 'apply-img',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '需求发布',
|
||||||
|
bgImg: require('../../../assets/menu/demand.png'),
|
||||||
|
btnText: '立即发布',
|
||||||
|
className: 'demand-img',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '资源下架',
|
||||||
|
bgImg: require('../../../assets/menu/down.png'),
|
||||||
|
btnText: '立即下架',
|
||||||
|
className: 'down-img',
|
||||||
|
},
|
||||||
|
])
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.menu-box {
|
.menu-box {
|
||||||
width: 1920px;
|
width: 1920px;
|
||||||
padding-bottom: 40px;
|
// padding-bottom: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
padding: 20px 0;
|
padding: 20px 0;
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.line {
|
.line {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 3px;
|
height: 3px;
|
||||||
background: #0058e1;
|
background: #0058e1;
|
||||||
margin: 0 auto
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.line-white {
|
.line-white {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-white {
|
.text-white {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
.btn {
|
||||||
|
|
||||||
.btn {
|
|
||||||
width: 150px;
|
width: 150px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
|
|
@ -132,103 +164,123 @@ const imgList = ref([
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: #e5eefc;
|
background: #e5eefc;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.img-box {
|
||||||
.img-box {
|
|
||||||
margin-bottom: 50px;
|
margin-bottom: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.service-box {
|
.service-box {
|
||||||
width: 1920px;
|
width: 1920px;
|
||||||
height: 613px;
|
height: 613px;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
background-image: url('../../../assets/menu/service.png');
|
background-image: url('../../../assets/menu/service.png');
|
||||||
|
|
||||||
.list-box {
|
.list-box {
|
||||||
width: 1560px;
|
width: 1560px;
|
||||||
height: 350px;
|
height: 350px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.callus-box {
|
||||||
|
width: 1920px;
|
||||||
|
height: 214px;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-image: url('../../../assets/menu/callus.png');
|
||||||
|
.list-box {
|
||||||
|
width: 1560px;
|
||||||
|
// height: 350px;
|
||||||
|
margin: 0 auto;
|
||||||
|
p {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: bold;
|
||||||
|
span {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
p:nth-child(1) {
|
||||||
|
margin-right: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.img-bg {
|
.img-bg {
|
||||||
width: 1920px;
|
width: 1920px;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.process-img {
|
.process-img {
|
||||||
height: 855px;
|
height: 855px;
|
||||||
background-image: url('../../../assets/menu/process.png');
|
background-image: url('../../../assets/menu/process.png');
|
||||||
}
|
}
|
||||||
|
|
||||||
.shelves-img {
|
.shelves-img {
|
||||||
height: 497px;
|
height: 497px;
|
||||||
width: 1107px;
|
width: 1107px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
background-image: url('../../../assets/menu/shelves.png');
|
background-image: url('../../../assets/menu/shelves.png');
|
||||||
}
|
}
|
||||||
|
|
||||||
.apply-img {
|
.apply-img {
|
||||||
height: 752px;
|
height: 752px;
|
||||||
background-image: url('../../../assets/menu/apply.png');
|
background-image: url('../../../assets/menu/apply.png');
|
||||||
}
|
}
|
||||||
|
|
||||||
.demand-img {
|
.demand-img {
|
||||||
height: 525px;
|
height: 525px;
|
||||||
width: 1300px;
|
width: 1300px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
background-image: url('../../../assets/menu/demand.png');
|
background-image: url('../../../assets/menu/demand.png');
|
||||||
}
|
}
|
||||||
|
|
||||||
.down-img {
|
.down-img {
|
||||||
height: 544px;
|
height: 544px;
|
||||||
background-image: url('../../../assets/menu/down.png');
|
background-image: url('../../../assets/menu/down.png');
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-box {
|
.list-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
.list-item {
|
.list-item {
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
width: 310px;
|
width: 310px;
|
||||||
height: 330px;
|
height: 330px;
|
||||||
background: rgba(23, 85, 177, 0.43);
|
background: rgba(23, 85, 177, 0.43);
|
||||||
border: 1px solid #74a9f8;
|
border: 1px solid #74a9f8;
|
||||||
border-radius: 2px;
|
border-radius: 10px;
|
||||||
margin: 0 10px;
|
margin: 0 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
.item-name {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20px;
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px 0 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
.item-name {
|
.name-box {
|
||||||
color: #fff;
|
display: flex;
|
||||||
font-size: 20px;
|
align-items: center;
|
||||||
text-align: center;
|
justify-content: flex-start;
|
||||||
padding: 20px 0 10px 0;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.name-box {
|
.item-v {
|
||||||
display: flex;
|
min-width: 100px;
|
||||||
align-items: center;
|
color: #fff;
|
||||||
justify-content: flex-start;
|
font-size: 20px;
|
||||||
flex-wrap: wrap;
|
text-align: center;
|
||||||
}
|
padding: 10px;
|
||||||
|
// border: 1px solid rgba(255, 255, 255, 0.4);
|
||||||
.item-v {
|
// border-radius: 6px;
|
||||||
min-width: 100px;
|
// background: rgba(255, 255, 255, 0.2);
|
||||||
color: #fff;
|
margin: 0 16px 20px 16px;
|
||||||
font-size: 20px;
|
}
|
||||||
text-align: center;
|
|
||||||
padding: 10px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
||||||
border-radius: 6px;
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
margin: 0 16px 20px 16px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -4,227 +4,264 @@
|
||||||
<div class="menu-box">
|
<div class="menu-box">
|
||||||
<div id="container" class="content-menu">
|
<div id="container" class="content-menu">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="first-title-text" v-for="(data, i) in titleList" :key="i" @click="changeName(data)"
|
<div
|
||||||
:style="{ color: data.name === titleData.name ? '#0058e1' : '' }">
|
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>
|
<div class="img" :class="data.className"></div>
|
||||||
{{ data.name }}
|
{{ data.name }}
|
||||||
</div>
|
</div>
|
||||||
<abilityDocTree :dataList="treeArray" @treeClick="treeClick" :clickData="clickData"></abilityDocTree>
|
<abilityDocTree
|
||||||
|
:dataList="treeArray"
|
||||||
|
@treeClick="treeClick"
|
||||||
|
:clickData="clickData"
|
||||||
|
></abilityDocTree>
|
||||||
</div>
|
</div>
|
||||||
<!-- 技术文档 -->
|
<!-- 技术文档 -->
|
||||||
<div class="right" v-if="titleData.name !== '新手指引'">
|
<div class="right" v-if="titleData.name !== '新手指引'">
|
||||||
<div style="height: 100%">
|
<div style="height: 100%">
|
||||||
<iframe name="iframeName" width="1300" height="100%" id="iframeId" :frameborder="0"
|
<iframe
|
||||||
:src="doc_base_url + clickData.doc"></iframe>
|
name="iframeName"
|
||||||
|
width="1300"
|
||||||
|
height="100%"
|
||||||
|
id="iframeId"
|
||||||
|
:frameborder="0"
|
||||||
|
:src="doc_base_url + clickData.doc"
|
||||||
|
></iframe>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 使用手册 -->
|
||||||
|
<div class="manual"><p>使用手册</p></div>
|
||||||
</div>
|
</div>
|
||||||
<menuBook v-if="titleData.name === '新手指引'"></menuBook>
|
<menuBook v-if="titleData.name === '新手指引'"></menuBook>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- <home-footer></home-footer> -->
|
<home-footer></home-footer>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import HomeHeader from '@/views/home/components/header'
|
import HomeHeader from '@/views/home/components/header'
|
||||||
import abilityDocTree from './components/abilityDocTree'
|
import abilityDocTree from './components/abilityDocTree'
|
||||||
import menuBook from './components/menuBook'
|
import menuBook from './components/menuBook'
|
||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted } from 'vue'
|
||||||
import { message } from 'ant-design-vue'
|
import { message } from 'ant-design-vue'
|
||||||
import { getDevelopDocTree } from '@/api/home'
|
import { getDevelopDocTree } from '@/api/home'
|
||||||
import HomeFooter from '@/views/newHome/components/Footer'
|
import HomeFooter from '@/views/newHome/components/Footer'
|
||||||
// import flatten from '@turf/flatten'
|
// import flatten from '@turf/flatten'
|
||||||
|
|
||||||
const titleList = ref([
|
const titleList = ref([
|
||||||
{
|
{
|
||||||
name: '新手指引',
|
name: '新手指引',
|
||||||
className: 'newGuide',
|
className: 'newGuide',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '技术文档',
|
name: '技术文档',
|
||||||
className: 'doc',
|
className: 'doc',
|
||||||
},
|
},
|
||||||
])
|
])
|
||||||
const titleData = ref(titleList.value[0])
|
const titleData = ref(titleList.value[0])
|
||||||
const clickData = ref({})
|
const clickData = ref({})
|
||||||
const treeArray = ref([])
|
const treeArray = ref([])
|
||||||
const treeArrayCopy = ref([])
|
const treeArrayCopy = ref([])
|
||||||
let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库']
|
let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库']
|
||||||
let doc_base_url = ref(window.SITE_CONFIG['frontUrl'])
|
let doc_base_url = ref(window.SITE_CONFIG['frontUrl'])
|
||||||
|
|
||||||
const treeClick = (item) => {
|
const treeClick = (item) => {
|
||||||
clickData.value = item
|
clickData.value = item
|
||||||
console.log('clickData------------>', item)
|
console.log('clickData------------>', item)
|
||||||
titleData.value = titleList.value[1]
|
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) {
|
const getTreeData = () => {
|
||||||
clickData.value = {}
|
getDevelopDocTree({})
|
||||||
treeArray.value = []
|
.then((res) => {
|
||||||
treeArrayCopy.value.map((val, i) => {
|
console.log('res------文档树------>', res)
|
||||||
let obj = Object.assign({}, val, {
|
if (res.data.code !== 0) {
|
||||||
title: val.title,
|
return message.error(res.data.msg)
|
||||||
show:
|
}
|
||||||
(i === 0 && val.children && val.children.length > 0) ||
|
treeArray.value = res.data.data || []
|
||||||
typeList.includes(val.title)
|
treeArrayCopy.value = JSON.parse(JSON.stringify(treeArray.value))
|
||||||
? true
|
|
||||||
: false,
|
|
||||||
children: [],
|
|
||||||
})
|
|
||||||
formData(val.children, obj)
|
|
||||||
treeArray.value.push(obj)
|
|
||||||
})
|
})
|
||||||
getFirstData(treeArrayCopy.value[0] || {})
|
.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) => {
|
const formData = (children = [], dataItem) => {
|
||||||
children.map((item, index) => {
|
children.map((item, index) => {
|
||||||
let _obj = Object.assign({}, item, {
|
let _obj = Object.assign({}, item, {
|
||||||
title: item.title,
|
title: item.title,
|
||||||
show:
|
show:
|
||||||
(index === 0 && item.children && item.children.length > 0) ||
|
(index === 0 && item.children && item.children.length > 0) ||
|
||||||
typeList.includes(item.title)
|
typeList.includes(item.title)
|
||||||
? true
|
? true
|
||||||
: false,
|
: false,
|
||||||
children: [],
|
children: [],
|
||||||
|
})
|
||||||
|
if (item.children && item.children.length > 0) {
|
||||||
|
formData(item.children, _obj)
|
||||||
|
}
|
||||||
|
dataItem.children.push(_obj)
|
||||||
})
|
})
|
||||||
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(() => {
|
const getFirstData = (firstObj = {}) => {
|
||||||
getTreeData()
|
if (firstObj && firstObj.children && firstObj.children.length > 0) {
|
||||||
})
|
getFirstData(firstObj.children[0])
|
||||||
|
} else {
|
||||||
|
clickData.value = firstObj
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getTreeData()
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.menu-box {
|
.menu-box {
|
||||||
// overflow: hidden;
|
// overflow: hidden;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
|
||||||
|
|
||||||
.first-title-text {
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 18px;
|
|
||||||
color: #333;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #0058e1;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.menu-container {
|
.first-title-text {
|
||||||
width: 100%;
|
cursor: pointer;
|
||||||
padding-top: 0.74rem;
|
font-size: 18px;
|
||||||
}
|
color: #333;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
.content-menu {
|
&:hover {
|
||||||
width: 1800px;
|
color: #0058e1;
|
||||||
display: flex;
|
}
|
||||||
justify-content: flex-start;
|
}
|
||||||
margin: 0 auto;
|
|
||||||
box-sizing: border-box;
|
|
||||||
// position: fixed;
|
|
||||||
// left: 50%;
|
|
||||||
// bottom: 0;
|
|
||||||
// transform: translateX(-50%);
|
|
||||||
// top: 0.6rem;
|
|
||||||
// top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left {
|
.menu-container {
|
||||||
width: 200px;
|
width: 100%;
|
||||||
padding: 20px;
|
padding-top: 0.74rem;
|
||||||
margin-right: 20px;
|
}
|
||||||
background: rgba(244, 245, 248, 1);
|
|
||||||
overflow-y: scroll;
|
|
||||||
position: fixed;
|
|
||||||
top: 200px;
|
|
||||||
left: 90px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
.content-menu {
|
||||||
width: 1300px;
|
width: 1800px;
|
||||||
height: calc(100% - 20px);
|
display: flex;
|
||||||
position: absolute;
|
justify-content: flex-start;
|
||||||
top: 10px;
|
margin: 0 auto;
|
||||||
left: 300px;
|
box-sizing: border-box;
|
||||||
min-height: 600px;
|
// position: fixed;
|
||||||
}
|
// left: 50%;
|
||||||
|
// bottom: 0;
|
||||||
|
// transform: translateX(-50%);
|
||||||
|
// top: 0.6rem;
|
||||||
|
// top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar {
|
.left {
|
||||||
right: 0 !important;
|
z-index: 10;
|
||||||
}
|
width: 200px;
|
||||||
|
padding: 20px;
|
||||||
|
margin-right: 20px;
|
||||||
|
background: rgba(244, 245, 248, 1);
|
||||||
|
overflow-y: scroll;
|
||||||
|
position: fixed;
|
||||||
|
top: 200px;
|
||||||
|
left: 90px;
|
||||||
|
}
|
||||||
|
|
||||||
.content {
|
.right {
|
||||||
right: 16rem !important;
|
width: 1300px;
|
||||||
left: 0 !important;
|
height: calc(100% - 20px);
|
||||||
}
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 300px;
|
||||||
|
min-height: 600px;
|
||||||
|
}
|
||||||
|
.manual {
|
||||||
|
z-index: 10;
|
||||||
|
width: 74px;
|
||||||
|
height: 136px;
|
||||||
|
position: fixed;
|
||||||
|
top: 200px;
|
||||||
|
right: 200px;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-image: url('../../assets/menu/manual.png');
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: unset !important;
|
||||||
|
p {
|
||||||
|
color: #005be1;
|
||||||
|
font-size: 20px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.img {
|
.sidebar {
|
||||||
height: 20px;
|
right: 0 !important;
|
||||||
width: 20px;
|
}
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.doc {
|
.content {
|
||||||
background: url('~@/assets/capabilityCloud/doc.png') no-repeat;
|
right: 16rem !important;
|
||||||
background-size: 100%;
|
left: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.newGuide {
|
.img {
|
||||||
background: url('~@/assets/capabilityCloud/newGuide.png') no-repeat;
|
height: 20px;
|
||||||
background-size: 100%;
|
width: 20px;
|
||||||
}
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
.new-menu-box {
|
.doc {
|
||||||
height: 100%;
|
background: url('~@/assets/capabilityCloud/doc.png') no-repeat;
|
||||||
display: flex;
|
background-size: 100%;
|
||||||
align-items: center;
|
}
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rela {
|
.newGuide {
|
||||||
width: 100%;
|
background: url('~@/assets/capabilityCloud/newGuide.png') no-repeat;
|
||||||
height: 100%;
|
background-size: 100%;
|
||||||
position: relative;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
.new-menu-box {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rela {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue