121 lines
3.5 KiB
Vue
121 lines
3.5 KiB
Vue
<template>
|
||
<el-container :style="{height: mainHeight + 'px'}">
|
||
<el-aside>
|
||
<el-tree :data="assetStructureList"
|
||
:expand-on-click-node="false"
|
||
:load="expandTable"
|
||
lazy
|
||
@node-click="showAssetsFun"
|
||
:props="defaultProps">
|
||
<div class="custom-tree-node" slot-scope="{ node, data }">
|
||
<div v-if="data.type === 'dataSource'">{{ data.name + '('+data.databaseName + '-' + data.systemName+')' }}</div>
|
||
<div v-if="data.type === 'dataTable'">{{ data.tableName + '-'+data.asas + '(' + data.dataTotal+'条)' }}</div>
|
||
</div>
|
||
</el-tree>
|
||
</el-aside>
|
||
<el-container>
|
||
<el-main>
|
||
<OverallAssets v-if="showAssets == null"/>
|
||
<OverallAssets v-if="showAssets == 'dataSource'" />
|
||
<overall-specific-assets v-if="showAssets === 'dataSource'" :title="title" :overall-name="overallName"/>
|
||
<overall-asset-structure v-if="showAssets === 'dataTable'" :table-params="tableParams" :stats="stats" />
|
||
</el-main>
|
||
</el-container>
|
||
</el-container>
|
||
</template>
|
||
<script>
|
||
|
||
import OverallSpecificAssets from "@/views/assets/table/dashboard/OverallSpecificAssets.vue";
|
||
import OverallAssetStructure from "@/views/assets/table/dashboard/OverallAssetStructure.vue";
|
||
import OverallAssets from "@/views/assets/table/dashboard/OverallAssets.vue";
|
||
import { selectFrimary } from "@/api/system/accredit";
|
||
|
||
export default {
|
||
components: { OverallAssetStructure, OverallSpecificAssets, OverallAssets },
|
||
data() {
|
||
return {
|
||
mainHeight: window.innerHeight - 85,
|
||
defaultProps: {
|
||
children: 'childrenList',
|
||
label: 'name'
|
||
},
|
||
assetStructureList: [],
|
||
childrenList: [],
|
||
showAssets: null,
|
||
tableParams: null,
|
||
stats: null,
|
||
title: null,
|
||
total: null,
|
||
overallName: []
|
||
}
|
||
},
|
||
methods: {
|
||
expandTable( node, resolve){
|
||
if (node.level === 0) return resolve(this.assetStructureList);
|
||
const {data} = node;
|
||
this.showAssets = data.type;
|
||
if (data.type === 'dataTable') {
|
||
return resolve([])
|
||
}
|
||
setTimeout(() => {
|
||
resolve(data.tableLists)
|
||
}, 500);
|
||
},
|
||
showAssetsFun(data) {
|
||
this.title = data.name + '(' + data.databaseName + '-' + data.systemName + ')'
|
||
this.showAssets = data.type;
|
||
this.stats = data
|
||
if (data.type === 'dataSource') {
|
||
this.overallName = data.tableLists
|
||
}
|
||
if (data.type === 'dataTable'){
|
||
this.tableParams = {
|
||
tableName: data.tableName,
|
||
databaseName: data.databaseName
|
||
}
|
||
}
|
||
},
|
||
init() {
|
||
selectFrimary().then(res => {
|
||
this.assetStructureList = res.data
|
||
})
|
||
}
|
||
},
|
||
// 生命周期 - 创建完成（可以访问当前this实例）",
|
||
created() {
|
||
this.init()
|
||
},
|
||
// 生命周期 - 挂载完成（可以访问DOM元素）",
|
||
mounted() {
|
||
},
|
||
beforeCreate() {
|
||
}, // 生命周期 - 创建之前",
|
||
beforeMount() {
|
||
}, // 生命周期 - 挂载之前",
|
||
beforeUpdate() {
|
||
}, // 生命周期 - 更新之前",
|
||
updated() {
|
||
}, // 生命周期 - 更新之后",
|
||
beforeDestroy() {
|
||
}, // 生命周期 - 销毁之前",
|
||
destroyed() {
|
||
}, // 生命周期 - 销毁完成",
|
||
activated() {
|
||
} // 如果页面有keep-alive缓存功能，这个函数会触发",
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.el-aside {
|
||
margin: 0;
|
||
padding: 0;
|
||
width: 400px;
|
||
background-color: white;
|
||
}
|
||
.el-main {
|
||
background-color: #f1f1f1;
|
||
}
|
||
.custom-tree-node{
|
||
height: 30px;
|
||
}
|
||
</style>
|