资产结构测试3

src/views/etl/construction/index.vue

@@ -1,131 +1,130 @@
 <template>
     <div>
-    <el-container>
+        <el-container style="height: 1000px">
-
             <el-aside>
                 <el-tree :data="assetStructureList"
-                 :expand-on-click-node="false"
+                         :props="defaultProps"
-                 :load="expandTable"
+                         @node-click="handleNodeClick"></el-tree>
-                 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>
+                <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 {getTableTree} from "@/api/etl/etl";
+import AssetsBasic from "@/views/etl/construction/AssetsBasic.vue";
-import data from "@/views/system/dict/data.vue";
+import AssetsModel from "@/views/etl/construction/AssetsModel.vue";
 
 export default {
-    //import引入的组件需要注入到对象中才能使用"
     name:'construction',
+    components:{AssetsModel, AssetsBasic },
     data() {
-      //这里存放数据"
-
         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()
     },
-    //生命周期 - 挂载完成（可以访问DOM元素）",
+    methods: {
-    mounted() {
+        //获取数据
+        getList(){
+            this.fundDataNum ={
+                basicNum: 0,
+                tableNum: 0,
+                structureNum: 0,
             },
-    beforeCreate() {
+                //树级结构内信息
-    }, //生命周期 - 创建之前",
+                getTableTree().then(response => {
-    beforeMount() {
+                    this.data = []
-    }, //生命周期 - 挂载之前",
+                    response.data.forEach(data => {
-    beforeUpdate() {
+                        //几个链接（资产接入）
-    }, //生命周期 - 更新之前",
+                        this.fundDataNum.basicNum+=1
-    updated() {
+                        let child = [];
-    }, //生命周期 - 更新之后",
+                        let info = data.basicConfigInfo;
-    beforeDestroy() {
+                        data.children.forEach(tableInfo => {
-    }, //生命周期 - 销毁之前",
+                            //几张表（资产模型）
-    destroyed() {
+                            this.fundDataNum.tableNum +=1
-    }, //生命周期 - 销毁完成",
+                            //多少字段（资产结构）
-    activated() {
+                            this.fundDataNum.structureNum+=tableInfo.structureList.length
-    } //如果页面有keep-alive缓存功能，这个函数会触发",
+                            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{
+.el-aside {
-  background-color: #ccb1ea;
+    background-color: #ffffff;
-  color: #f4516c;
+    color: #333;
     text-align: center;
     line-height: 100%;
 }
 
-.el-main{
+.el-main {
-  background-color: #ccb1ea;
+    background-color: #E9EEF3;
-  color: #f4516c;
+    color: #333;
     text-align: center;
     line-height: 100%;
 }
@@ -134,16 +133,4 @@ body > .el-container {
     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>