资产结构

src/store/modules/permission.js

@@ -221,7 +221,19 @@ let routeResponse = {
           "component": "dataAssets/dataAccess/index",
           "meta": {
             "title": "数据接入",
-            "icon": "online",
+            "icon": "component",
+            "noCache": false,
+            "link": null
+          }
+        },
+        {
+          "name": "AssetStructure",
+          "path": "asset-structure",
+          "hidden": false,
+          "component": "dataAssets/assetStructure/index",
+          "meta": {
+            "title": "资产结构",
+            "icon": "tree-table",
             "noCache": false,
             "link": null
           }

src/views/dataAssets/assetStructure/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <el-container :style="{height: mainHeight + 'px'}">
+    <el-aside>
+      <el-tree :data="assetStructureList"
+               :load="expandTable"
+               lazy
+               :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>Main</el-main>
+    </el-container>
+  </el-container>
+</template>
+<script>
+export default {
+  name: 'assetStructure',
+  data() {
+    return {
+      mainHeight: window.innerHeight - 85,
+      defaultProps: {
+        children: 'childrenList',
+        label: 'name'
+      },
+      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: []
+        }
+      ]
+    }
+  },
+  methods: {
+    expandTable( node, resolve){
+      if (node.level === 0) {
+        return resolve(this.assetStructureList);
+      }
+      if (node.level > 1) return resolve([]);
+
+      setTimeout(() => {
+        const data = this.childrenList;
+
+        resolve(data);
+      }, 500);
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.el-aside {
+  margin: 0;
+  padding: 0;
+  width: 400px;
+  background-color: white;
+}
+.el-main {
+  background-color: #E9EEF3;
+}
+</style>