feat(): 数据展示
DongZeLiang
parent
bac8cfba2d
commit
a9318a0e27
|
|
@ -249,6 +249,18 @@ let routeResponse = {
|
|||
"noCache": false,
|
||||
"link": null
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "AssetShow",
|
||||
"path": "asset-show",
|
||||
"hidden": false,
|
||||
"component": "dataAssets/assetShow/index",
|
||||
"meta": {
|
||||
"title": "资产展示",
|
||||
"icon": "swagger",
|
||||
"noCache": false,
|
||||
"link": null
|
||||
}
|
||||
}
|
||||
],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,156 @@
|
|||
<template>
|
||||
<el-container :style="{height: mainHeight + 'px'}">
|
||||
<el-aside>
|
||||
<el-tree :data="assetStructureList"
|
||||
:load="expandTable"
|
||||
:expand-on-click-node="false"
|
||||
lazy
|
||||
@node-click="(data) => showAuth=data.type"
|
||||
: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>
|
||||
</el-tree>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<el-main>
|
||||
<el-card>
|
||||
<div slot="header" class="clearfix">
|
||||
<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="是否核心">
|
||||
<el-tag size="small">是</el-tag>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card" style="margin-top: 20px">
|
||||
<div slot="header" class="clearfix">
|
||||
<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-descriptions-item label="Type">
|
||||
<el-tag size="small">{{asset.type}}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="Value">{{asset.value}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-card>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "AssetShow",
|
||||
data() {
|
||||
return {
|
||||
mainHeight: window.innerHeight - 85,
|
||||
defaultProps: {
|
||||
children: 'childrenList',
|
||||
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"},
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
expandTable( node, resolve){
|
||||
if (node.level === 0) return resolve(this.assetStructureList);
|
||||
const {data} = node;
|
||||
if (data.type === 'dataTable') {
|
||||
return resolve([])
|
||||
}
|
||||
setTimeout(() => {
|
||||
resolve(this.childrenList)
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-aside {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 400px;
|
||||
background-color: white;
|
||||
}
|
||||
.el-main {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
.custom-tree-node{
|
||||
height: 30px;
|
||||
}
|
||||
.el-descriptions-row>th{
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue