150 lines
3.5 KiB
Vue
150 lines
3.5 KiB
Vue
<template>
|
||
<div>
|
||
<el-container>
|
||
|
||
<el-aside>
|
||
<el-tree :data="assetStructureList"
|
||
:expand-on-click-node="false"
|
||
:load="expandTable"
|
||
lazy
|
||
@node-click=""
|
||
:props="defaultProps">
|
||
<!-- <div class="custom-tree-node" slot-scope="{ node, data }">-->
|
||
<!-- <div v-if="data.info.type !== null">{{ data.info.dataResourceName + '('+data.info.databaseName + '-' + data.info.dataSourcesSystemName+')' }}</div>-->
|
||
<!-- <div v-if="data.info.type === null">{{ data.tableName + '-'+data.tableRemark + '(' + data.dataNum+'条)' }}</div>-->
|
||
<!-- </div>-->
|
||
</el-tree>
|
||
</el-aside>
|
||
|
||
<el-main>
|
||
<h1>整体数据资产结构概述</h1>
|
||
|
||
</el-main>
|
||
</el-container>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
||
//例如：import 《组件名称》 from '《组件路径》,
|
||
import {getTableTree} from "@/api/etl/etl";
|
||
import data from "@/views/system/dict/data.vue";
|
||
|
||
export default {
|
||
//import引入的组件需要注入到对象中才能使用"
|
||
name:'construction',
|
||
data() {
|
||
//这里存放数据"
|
||
|
||
return {
|
||
|
||
childrenList: [],
|
||
assetStructureList: [],
|
||
|
||
|
||
defaultProps: {
|
||
children: 'children',
|
||
label: 'tableName'
|
||
}
|
||
};
|
||
},
|
||
|
||
|
||
//计算属性 类似于data概念",
|
||
computed: {
|
||
data() {
|
||
return data
|
||
}
|
||
},
|
||
//监控data中的数据变化",
|
||
watch: {},
|
||
//方法集合",
|
||
methods: {
|
||
|
||
getList(){
|
||
getTableTree().then(response =>{
|
||
this.data = []
|
||
response.data.forEach(data => {
|
||
let info = data.basicConfigInfo
|
||
this.assetStructureList.push({
|
||
'info':info,
|
||
'table': info.dataResourceName+"("+info.dataSourcesSystemName+")",
|
||
'children':data.children
|
||
})
|
||
})
|
||
console.log(this.assetStructureList)
|
||
})
|
||
},
|
||
|
||
|
||
expandTable(node,resolve){
|
||
if (node.level === 0) return resolve(this.assetStructureList);
|
||
const {data} = node;
|
||
this.showAssets = data.type;
|
||
if (data.type === null){
|
||
return resolve([])
|
||
}
|
||
|
||
setTimeout(() => {
|
||
resolve(this.childrenList)
|
||
},500);
|
||
}
|
||
|
||
},
|
||
//生命周期 - 创建完成（可以访问当前this实例）",
|
||
created() {
|
||
this.getList()
|
||
},
|
||
//生命周期 - 挂载完成（可以访问DOM元素）",
|
||
mounted() {
|
||
},
|
||
beforeCreate() {
|
||
}, //生命周期 - 创建之前",
|
||
beforeMount() {
|
||
}, //生命周期 - 挂载之前",
|
||
beforeUpdate() {
|
||
}, //生命周期 - 更新之前",
|
||
updated() {
|
||
}, //生命周期 - 更新之后",
|
||
beforeDestroy() {
|
||
}, //生命周期 - 销毁之前",
|
||
destroyed() {
|
||
}, //生命周期 - 销毁完成",
|
||
activated() {
|
||
} //如果页面有keep-alive缓存功能，这个函数会触发",
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
|
||
.el-aside{
|
||
background-color: #ccb1ea;
|
||
color: #f4516c;
|
||
text-align: center;
|
||
line-height: 100%;
|
||
}
|
||
|
||
.el-main{
|
||
background-color: #ccb1ea;
|
||
color: #f4516c;
|
||
text-align: center;
|
||
line-height: 100%;
|
||
}
|
||
|
||
body > .el-container {
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.el-container:nth-child(5).el-aside,
|
||
.el-container:nth-child(6).el-aside{
|
||
line-height: 260px;
|
||
}
|
||
|
||
.el-container:nth-child(7).el-aside{
|
||
line-height: 320px;
|
||
}
|
||
|
||
|
||
|
||
|
||
</style>
|