feat(): 数据资产展示
parent
07d9557bbc
commit
2baf2d4c6c
|
|
@ -32,3 +32,13 @@ export function findByAssetStructureTableIdlist(assetStructureTableId) {
|
|||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 查询数据源信息详细
|
||||
export function tableDetailsValue(id) {
|
||||
return request({
|
||||
url: '/data/details/tableDetailsValue/' + id,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,7 +65,6 @@ export default {
|
|||
item.type = "dataSource"
|
||||
}
|
||||
)
|
||||
|
||||
})
|
||||
},
|
||||
expandTable( node, resolve){
|
||||
|
|
|
|||
|
|
@ -3,13 +3,16 @@
|
|||
<el-aside>
|
||||
<el-tree :data="assetStructureList"
|
||||
:load="expandTable"
|
||||
:expand-on-click-node="false"
|
||||
lazy
|
||||
@node-click="(data) => showAuth=data.type"
|
||||
@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.name + '-'+data.as + '(' + data.dataTotal+'条)' }}</div>
|
||||
<div v-if="data.type === 'dataSource'">
|
||||
{{ data.dataSourceName + '(' + data.dataSourceDatabaseName + '-' + data.dataSourceSystemName + ')' }}
|
||||
</div>
|
||||
<div v-if="data.type === 'dataTable'">
|
||||
{{ data.tableName + '-' + data.tableNameAnnotation + '(' + data.tableDataCount + '条)' }}
|
||||
</div>
|
||||
</div>
|
||||
</el-tree>
|
||||
</el-aside>
|
||||
|
|
@ -20,9 +23,9 @@
|
|||
<span>资产模型基本信息</span>
|
||||
</div>
|
||||
<el-descriptions border :column="2">
|
||||
<el-descriptions-item label="表名称">sys_user</el-descriptions-item>
|
||||
<el-descriptions-item label="表备注">用户表</el-descriptions-item>
|
||||
<el-descriptions-item label="数据量">12536</el-descriptions-item>
|
||||
<el-descriptions-item label="表名称">{{tableName}}</el-descriptions-item>
|
||||
<el-descriptions-item label="表备注">{{tableNameAnnotation}}</el-descriptions-item>
|
||||
<el-descriptions-item label="数据量">{{tableDataCount}}</el-descriptions-item>
|
||||
<el-descriptions-item label="是否核心">
|
||||
<el-tag size="small">是</el-tag>
|
||||
</el-descriptions-item>
|
||||
|
|
@ -34,12 +37,12 @@
|
|||
<span>模型数据</span>
|
||||
</div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6" v-for="asset in assetShowList" style="margin-top: 20px">
|
||||
<el-descriptions :title="asset.key" direction="vertical" border :column="1">
|
||||
<el-col :span="6" v-for="asset in assetTableDetailsList" style="margin-top: 20px">
|
||||
<el-descriptions :title="tableNameAnnotation+'.'+tableName+'.'+asset.name" direction="vertical" border :column="1">
|
||||
<el-descriptions-item label="Type">
|
||||
<el-tag size="small">{{asset.type}}</el-tag>
|
||||
<el-tag size="small">{{asset.mappingType}}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="Value">{{asset.value}}</el-descriptions-item>
|
||||
<el-descriptions-item label="Value" v-for="(value , key) in dataSourceValueMap" v-if="key === asset.name">{{value}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -52,8 +55,16 @@
|
|||
|
||||
<script>
|
||||
|
||||
import {listAssetStructure, selectAssetSouructureTableList, tableDetailsValue} from "@/api/data/structure";
|
||||
import data from "@/views/system/dict/data.vue";
|
||||
|
||||
export default {
|
||||
name: "AssetShow",
|
||||
computed: {
|
||||
data() {
|
||||
return data
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mainHeight: window.innerHeight - 85,
|
||||
|
|
@ -62,67 +73,31 @@ export default {
|
|||
label: 'name'
|
||||
},
|
||||
showAuth: null,
|
||||
assetStructureList: [
|
||||
{
|
||||
name: "测试1",
|
||||
systemName: "云计算系统",
|
||||
databaseName: "yunjisuan",
|
||||
type: "dataSource"
|
||||
},
|
||||
{
|
||||
name: "测试2",
|
||||
systemName: "网站系统",
|
||||
databaseName: "wangzhan",
|
||||
type: "dataSource"
|
||||
},
|
||||
{
|
||||
name: "测试3",
|
||||
systemName: "物联网系统",
|
||||
databaseName: "wulianwang",
|
||||
type: "dataSource"
|
||||
},
|
||||
{
|
||||
name: "测试4",
|
||||
systemName: "传媒系统",
|
||||
databaseName: "chuanmei",
|
||||
type: "dataSource"
|
||||
},
|
||||
],
|
||||
childrenList: [
|
||||
{
|
||||
name: "sys_user",
|
||||
as: "用户表",
|
||||
dataTotal: 635847,
|
||||
type: "dataTable",
|
||||
childrenList: []
|
||||
},
|
||||
{
|
||||
name: "sys_dept",
|
||||
as: "部门表",
|
||||
dataTotal: 362548,
|
||||
type: "dataTable",
|
||||
childrenList: []
|
||||
},
|
||||
{
|
||||
name: "sys_notice",
|
||||
as: "通知公告",
|
||||
dataTotal: 6347,
|
||||
type: "dataTable",
|
||||
childrenList: []
|
||||
}
|
||||
],
|
||||
assetShowList: [
|
||||
{key: "测试.sys_user.id", type: "String", value: 1},
|
||||
{key: "测试.sys_user.name", type: "String", value: "张三"},
|
||||
{key: "测试.sys_user.age", type: "Integer", value: 18},
|
||||
{key: "测试.sys_user.email", type: "String", value: "123@136.com"},
|
||||
{key: "测试.sys_user.sex", type: "String", value: "Y"},
|
||||
]
|
||||
assetStructureList: [],
|
||||
childrenList: [],
|
||||
// 表名称
|
||||
tableName: null,
|
||||
tableNameAnnotation: null,
|
||||
tableDataCount: null,
|
||||
assetTableDetailsList: [],
|
||||
dataSourceValueMap: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.listAssetStructure();
|
||||
},
|
||||
methods: {
|
||||
// 查询数据资产列表
|
||||
listAssetStructure() {
|
||||
listAssetStructure().then(response => {
|
||||
this.assetStructureList = response.data.assetStructureList
|
||||
this.assetStructureList.forEach(
|
||||
item => {
|
||||
item.type = "dataSource"
|
||||
}
|
||||
)
|
||||
})
|
||||
},
|
||||
expandTable( node, resolve){
|
||||
if (node.level === 0) return resolve(this.assetStructureList);
|
||||
const {data} = node;
|
||||
|
|
@ -132,6 +107,41 @@ export default {
|
|||
setTimeout(() => {
|
||||
resolve(this.childrenList)
|
||||
}, 500);
|
||||
},
|
||||
showAssetsFun(data) {
|
||||
this.showAuth = data.type;
|
||||
if (data.type === 'dataSource') {
|
||||
// 异步调用 selectAssetSourctureTableList API 函数，传入当前节点的 id 作为参数
|
||||
selectAssetSouructureTableList(data.id).then((response) => {
|
||||
// 打印 API 返回的响应数据
|
||||
|
||||
// 将 API 返回的 data 属性赋值给 this.childrenList
|
||||
this.childrenList = response.data.tableDetailsRespList;
|
||||
|
||||
// 遍历 this.childrenList，为每个元素添加 type 属性，值为 "dataTable"
|
||||
this.childrenList.forEach((item) => {
|
||||
item.type = "dataTable";
|
||||
});
|
||||
});
|
||||
}
|
||||
if (data.type === "dataTable") {
|
||||
this.tableName = data.tableName;
|
||||
this.tableNameAnnotation = data.tableNameAnnotation;
|
||||
this.tableDataCount = data.tableDataCount
|
||||
this.childrenList.forEach(item => {
|
||||
if (item.tableName === this.tableName){
|
||||
this.assetTableDetailsList = item.assetTableDetailsList
|
||||
}
|
||||
return
|
||||
})
|
||||
tableDetailsValue(data.id).then(response => {
|
||||
this.dataSourceValueMap = response.data
|
||||
})
|
||||
this.tableParams = {
|
||||
tableName: data.name,
|
||||
tableAsName: data.as
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue