feat(): 数据资产展示

src/api/data/structure.js

@@ -32,3 +32,13 @@ export function findByAssetStructureTableIdlist(assetStructureTableId) {
     method: 'get'
   })
 }
+
+
+
+// 查询数据源信息详细
+export function tableDetailsValue(id) {
+  return request({
+    url: '/data/details/tableDetailsValue/' + id,
+    method: 'post'
+  })
+}

src/views/data/accredit/index.vue

@@ -65,7 +65,6 @@ export default {
             item.type = "dataSource"
           }
         )
-
       })
     },
     expandTable( node, resolve){

src/views/data/show/index.vue

@@ -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 === 'dataSource'">
-          <div v-if="data.type === 'dataTable'">{{ data.name + '-'+data.as + '(' + data.dataTotal+'条)' }}</div>
+            {{ 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="表名称">{{tableName}}</el-descriptions-item>
-            <el-descriptions-item label="表备注">用户表</el-descriptions-item>
+            <el-descriptions-item label="表备注">{{tableNameAnnotation}}</el-descriptions-item>
-            <el-descriptions-item label="数据量">12536</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-col :span="6" v-for="asset in assetTableDetailsList" style="margin-top: 20px">
-              <el-descriptions :title="asset.key" direction="vertical" border :column="1">
+              <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: [
+      assetStructureList: [],
-        {
+      childrenList: [],
-          name: "测试1",
+      // 表名称
-          systemName: "云计算系统",
+      tableName: null,
-          databaseName: "yunjisuan",
+      tableNameAnnotation: null,
-          type: "dataSource"
+      tableDataCount: null,
-        },
+      assetTableDetailsList: [],
-        {
+      dataSourceValueMap: null
-          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() {
+    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
+        }
+      }
     }
   }
 }