资产结构测试3

src/views/etl/construction/index.vue

@@ -1,149 +1,136 @@
 <template>
-  <div>
-    <el-container>
-
-      <el-aside>
-        <el-tree :data="assetStructureList"
-                 :expand-on-click-node="false"
-                 :load="expandTable"
-                 lazy
-                 @node-click=""
-                 :props="defaultProps">
-          <!--                  <div class="custom-tree-node" slot-scope="{ node, data }">-->
-          <!--                      <div v-if="data.info.type !== null">{{ data.info.dataResourceName + '('+data.info.databaseName + '-' + data.info.dataSourcesSystemName+')' }}</div>-->
-          <!--                      <div v-if="data.info.type === null">{{ data.tableName + '-'+data.tableRemark + '(' + data.dataNum+'条)' }}</div>-->
-          <!--                  </div>-->
-        </el-tree>
-      </el-aside>
-
-      <el-main>
-        <h1>整体数据资产结构概述</h1>
-
-      </el-main>
-    </el-container>
-  </div>
+    <div>
+        <el-container style="height: 1000px">
+            <el-aside>
+                <el-tree :data="assetStructureList"
+                         :props="defaultProps"
+                         @node-click="handleNodeClick"></el-tree>
+            </el-aside>
+            <el-main>
+                <AssetsBasic :infoOpen="infoOpen" :fundDataNum="fundDataNum"></AssetsBasic>
+                <AssetsModel v-if="infoOpen" :info="tableInfoForm" :list="tableInfoList"></AssetsModel>
+            </el-main>
+        </el-container>
+    </div>
 </template>
 
 <script>
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
-//例如：import 《组件名称》 from '《组件路径》,
- import {getTableTree} from "@/api/etl/etl";
-import data from "@/views/system/dict/data.vue";
+
+import {getTableTree} from "@/api/etl/etl";
+import AssetsBasic from "@/views/etl/construction/AssetsBasic.vue";
+import AssetsModel from "@/views/etl/construction/AssetsModel.vue";
 
 export default {
-    //import引入的组件需要注入到对象中才能使用"
-   name:'construction',
+    name:'construction',
+    components:{AssetsModel, AssetsBasic },
     data() {
-      //这里存放数据"
-
-      return {
-
-        childrenList: [],
-        assetStructureList: [],
-
-
-        defaultProps: {
-          children: 'children',
-          label: 'tableName'
-        }
-      };
+        return {
+            //结构标题
+            title: null,
+            //查看详细资产结构
+            infoOpen: false,
+            //资产结构与数据结构载体
+            tableInfoForm:{},
+            //当前数据库列表
+            tableInfoList:[],
+            //结构数据量
+            fundDataNum:{
+                basicNum: null,
+                tableNum: null,
+                structureNum: null,
+            },
+            childrenList: [],
+            assetStructureList: [],
+            defaultProps: {
+                children: 'children',
+                label: 'tableName'
+            },
+        };
     },
-
-
-    //计算属性 类似于data概念",
-    computed: {
-      data() {
-        return data
-      }
-    },
-    //监控data中的数据变化",
-    watch: {},
-    //方法集合",
-    methods: {
-
-     getList(){
-       getTableTree().then(response =>{
-         this.data = []
-         response.data.forEach(data => {
-           let info = data.basicConfigInfo
-           this.assetStructureList.push({
-             'info':info,
-             'table': info.dataResourceName+"("+info.dataSourcesSystemName+")",
-             'children':data.children
-           })
-         })
-         console.log(this.assetStructureList)
-       })
-     },
-
-
-      expandTable(node,resolve){
-       if (node.level === 0) return resolve(this.assetStructureList);
-       const {data} = node;
-       this.showAssets = data.type;
-       if (data.type === null){
-         return resolve([])
-       }
-
-       setTimeout(() => {
-         resolve(this.childrenList)
-       },500);
-      }
-
-    },
-    //生命周期 - 创建完成（可以访问当前this实例）",
     created() {
-     this.getList()
+        this.getList()
     },
-    //生命周期 - 挂载完成（可以访问DOM元素）",
-    mounted() {
-    },
-    beforeCreate() {
-    }, //生命周期 - 创建之前",
-    beforeMount() {
-    }, //生命周期 - 挂载之前",
-    beforeUpdate() {
-    }, //生命周期 - 更新之前",
-    updated() {
-    }, //生命周期 - 更新之后",
-    beforeDestroy() {
-    }, //生命周期 - 销毁之前",
-    destroyed() {
-    }, //生命周期 - 销毁完成",
-    activated() {
-    } //如果页面有keep-alive缓存功能，这个函数会触发",
-  };
+    methods: {
+        //获取数据
+        getList(){
+            this.fundDataNum ={
+                basicNum: 0,
+                tableNum: 0,
+                structureNum: 0,
+            },
+                //树级结构内信息
+                getTableTree().then(response => {
+                    this.data = []
+                    response.data.forEach(data => {
+                        //几个链接（资产接入）
+                        this.fundDataNum.basicNum+=1
+                        let child = [];
+                        let info = data.basicConfigInfo;
+                        data.children.forEach(tableInfo => {
+                            //几张表（资产模型）
+                            this.fundDataNum.tableNum +=1
+                            //多少字段（资产结构）
+                            this.fundDataNum.structureNum+=tableInfo.structureList.length
+                            child.push({
+                                'tableName':tableInfo.tableName,
+                                'info':tableInfo
+                            })
+                        })
+                        //子级存入
+                        this.assetStructureList.push({
+                            'info':info,
+                            'tableName': info.dataResourceName+'('+info.databaseName+'-'+info.dataSourcesSystemName+')',
+                            'children':child,
+                        })
+                    })
+                })
+            console.log(this.assetStructureList)
+        },
+        //获取具体表相关数据
+        handleNodeClick(data) {
+            //获取assetStructureList中的对象，
+            let info = this.assetStructureList.find(assent =>
+                assent.info.id === data.info.id
+            )
+            this.infoOpen = true
+            //先将对象存入infoForm对象
+            this.tableInfoForm = data
+            //如果判断对象不存在，重新给form 和 list 赋值
+            if (info !== undefined){
+                this.tableInfoList = data.children
+                this.tableInfoForm = data.children[0]
+            }else {
+                info = this.assetStructureList.find(assent =>
+                    assent.info.id === this.tableInfoForm.info.basicId
+                )
+                this.tableInfoList = info.children
+            }
+            // console.log('tableList')
+            // console.log(this.tableInfoList)
+            // console.log('tableForm')
+            // console.log(this.tableInfoForm)
+        },
+    }
+};
 </script>
-<style scoped>
+<style>
 
-.el-aside{
-  background-color: #ccb1ea;
-  color: #f4516c;
-  text-align: center;
-  line-height: 100%;
+.el-aside {
+    background-color: #ffffff;
+    color: #333;
+    text-align: center;
+    line-height: 100%;
 }
 
-.el-main{
-  background-color: #ccb1ea;
-  color: #f4516c;
-  text-align: center;
-  line-height: 100%;
+.el-main {
+    background-color: #E9EEF3;
+    color: #333;
+    text-align: center;
+    line-height: 100%;
 }
 
 body > .el-container {
-  margin-bottom: 40px;
+    margin-bottom: 40px;
 }
 
-.el-container:nth-child(5).el-aside,
-.el-container:nth-child(6).el-aside{
-  line-height: 260px;
-}
-
-.el-container:nth-child(7).el-aside{
-  line-height: 320px;
-}
-
-
-
-
 </style>