资产结构测试3
parent
7e007403c9
commit
61b5b344eb
|
|
@ -1,149 +1,136 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-container>
|
<el-container style="height: 1000px">
|
||||||
|
<el-aside>
|
||||||
<el-aside>
|
<el-tree :data="assetStructureList"
|
||||||
<el-tree :data="assetStructureList"
|
:props="defaultProps"
|
||||||
:expand-on-click-node="false"
|
@node-click="handleNodeClick"></el-tree>
|
||||||
:load="expandTable"
|
</el-aside>
|
||||||
lazy
|
<el-main>
|
||||||
@node-click=""
|
<AssetsBasic :infoOpen="infoOpen" :fundDataNum="fundDataNum"></AssetsBasic>
|
||||||
:props="defaultProps">
|
<AssetsModel v-if="infoOpen" :info="tableInfoForm" :list="tableInfoList"></AssetsModel>
|
||||||
<!-- <div class="custom-tree-node" slot-scope="{ node, data }">-->
|
</el-main>
|
||||||
<!-- <div v-if="data.info.type !== null">{{ data.info.dataResourceName + '('+data.info.databaseName + '-' + data.info.dataSourcesSystemName+')' }}</div>-->
|
</el-container>
|
||||||
<!-- <div v-if="data.info.type === null">{{ data.tableName + '-'+data.tableRemark + '(' + data.dataNum+'条)' }}</div>-->
|
</div>
|
||||||
<!-- </div>-->
|
|
||||||
</el-tree>
|
|
||||||
</el-aside>
|
|
||||||
|
|
||||||
<el-main>
|
|
||||||
<h1>整体数据资产结构概述</h1>
|
|
||||||
|
|
||||||
</el-main>
|
|
||||||
</el-container>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
|
||||||
//例如：import 《组件名称》 from '《组件路径》,
|
import {getTableTree} from "@/api/etl/etl";
|
||||||
import {getTableTree} from "@/api/etl/etl";
|
import AssetsBasic from "@/views/etl/construction/AssetsBasic.vue";
|
||||||
import data from "@/views/system/dict/data.vue";
|
import AssetsModel from "@/views/etl/construction/AssetsModel.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
//import引入的组件需要注入到对象中才能使用"
|
name:'construction',
|
||||||
name:'construction',
|
components:{AssetsModel, AssetsBasic },
|
||||||
data() {
|
data() {
|
||||||
//这里存放数据"
|
return {
|
||||||
|
//结构标题
|
||||||
return {
|
title: null,
|
||||||
|
//查看详细资产结构
|
||||||
childrenList: [],
|
infoOpen: false,
|
||||||
assetStructureList: [],
|
//资产结构与数据结构载体
|
||||||
|
tableInfoForm:{},
|
||||||
|
//当前数据库列表
|
||||||
defaultProps: {
|
tableInfoList:[],
|
||||||
children: 'children',
|
//结构数据量
|
||||||
label: 'tableName'
|
fundDataNum:{
|
||||||
}
|
basicNum: null,
|
||||||
};
|
tableNum: null,
|
||||||
|
structureNum: null,
|
||||||
|
},
|
||||||
|
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() {
|
created() {
|
||||||
this.getList()
|
this.getList()
|
||||||
},
|
},
|
||||||
//生命周期 - 挂载完成（可以访问DOM元素）",
|
methods: {
|
||||||
mounted() {
|
//获取数据
|
||||||
},
|
getList(){
|
||||||
beforeCreate() {
|
this.fundDataNum ={
|
||||||
}, //生命周期 - 创建之前",
|
basicNum: 0,
|
||||||
beforeMount() {
|
tableNum: 0,
|
||||||
}, //生命周期 - 挂载之前",
|
structureNum: 0,
|
||||||
beforeUpdate() {
|
},
|
||||||
}, //生命周期 - 更新之前",
|
//树级结构内信息
|
||||||
updated() {
|
getTableTree().then(response => {
|
||||||
}, //生命周期 - 更新之后",
|
this.data = []
|
||||||
beforeDestroy() {
|
response.data.forEach(data => {
|
||||||
}, //生命周期 - 销毁之前",
|
//几个链接（资产接入）
|
||||||
destroyed() {
|
this.fundDataNum.basicNum+=1
|
||||||
}, //生命周期 - 销毁完成",
|
let child = [];
|
||||||
activated() {
|
let info = data.basicConfigInfo;
|
||||||
} //如果页面有keep-alive缓存功能，这个函数会触发",
|
data.children.forEach(tableInfo => {
|
||||||
};
|
//几张表（资产模型）
|
||||||
|
this.fundDataNum.tableNum +=1
|
||||||
|
//多少字段（资产结构）
|
||||||
|
this.fundDataNum.structureNum+=tableInfo.structureList.length
|
||||||
|
child.push({
|
||||||
|
'tableName':tableInfo.tableName,
|
||||||
|
'info':tableInfo
|
||||||
|
})
|
||||||
|
})
|
||||||
|
//子级存入
|
||||||
|
this.assetStructureList.push({
|
||||||
|
'info':info,
|
||||||
|
'tableName': info.dataResourceName+'('+info.databaseName+'-'+info.dataSourcesSystemName+')',
|
||||||
|
'children':child,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
console.log(this.assetStructureList)
|
||||||
|
},
|
||||||
|
//获取具体表相关数据
|
||||||
|
handleNodeClick(data) {
|
||||||
|
//获取assetStructureList中的对象，
|
||||||
|
let info = this.assetStructureList.find(assent =>
|
||||||
|
assent.info.id === data.info.id
|
||||||
|
)
|
||||||
|
this.infoOpen = true
|
||||||
|
//先将对象存入infoForm对象
|
||||||
|
this.tableInfoForm = data
|
||||||
|
//如果判断对象不存在，重新给form 和 list 赋值
|
||||||
|
if (info !== undefined){
|
||||||
|
this.tableInfoList = data.children
|
||||||
|
this.tableInfoForm = data.children[0]
|
||||||
|
}else {
|
||||||
|
info = this.assetStructureList.find(assent =>
|
||||||
|
assent.info.id === this.tableInfoForm.info.basicId
|
||||||
|
)
|
||||||
|
this.tableInfoList = info.children
|
||||||
|
}
|
||||||
|
// console.log('tableList')
|
||||||
|
// console.log(this.tableInfoList)
|
||||||
|
// console.log('tableForm')
|
||||||
|
// console.log(this.tableInfoForm)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style>
|
||||||
|
|
||||||
.el-aside{
|
.el-aside {
|
||||||
background-color: #ccb1ea;
|
background-color: #ffffff;
|
||||||
color: #f4516c;
|
color: #333;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 100%;
|
line-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-main{
|
.el-main {
|
||||||
background-color: #ccb1ea;
|
background-color: #E9EEF3;
|
||||||
color: #f4516c;
|
color: #333;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 100%;
|
line-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
body > .el-container {
|
body > .el-container {
|
||||||
margin-bottom: 40px;
|
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>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue