feat(): 资产模型基本信息

src/views/data/structure/dashlboard/OverallAssetStructure.vue

@@ -5,9 +5,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>
@@ -18,30 +18,30 @@
         <span>资产模型详细信息</span>
       </div>
       <el-table
-        :data="tableData"
+        :data="assetTableDetailsList"
         style="width: 100%;">
         <el-table-column prop="name" label="名称" />
-        <el-table-column prop="comment" label="注释" />
+        <el-table-column prop="annotation" label="注释" />
-        <el-table-column prop="isPrimaryKey" label="是否主键" >
+        <el-table-column prop="primaryOrNot" label="是否主键" >
           <template slot-scope="scope">
-            <el-tag size="small" :type="scope.row.isPrimaryKey === 'Y' ? 'success' : ''">
+            <el-tag size="small" :type="scope.row.primaryOrNot === 'Y' ? 'success' : 'danger'">
-              {{scope.row.isPrimaryKey}}
+              {{scope.row.primaryOrNot}}
             </el-tag>
           </template>
         </el-table-column>
         <el-table-column prop="type" label="类型" />
         <el-table-column prop="mappingType" label="映射类型" />
         <el-table-column prop="length" label="长度" />
-        <el-table-column prop="decimalPlaces" label="小数位" />
+        <el-table-column prop="decimalPoint" label="小数位" />
-        <el-table-column prop="isNull" label="是否为空"  >
+        <el-table-column prop="nullOrNot" label="是否为空"  >
           <template slot-scope="scope">
-            <el-tag size="small" :type="scope.row.isNull === 'Y' ? 'success' : 'danger'">
+            <el-tag size="small" :type="scope.row.nullOrNot === 'Y' ? 'success' : 'danger'" >
-              {{scope.row.isNull}}
+              {{scope.row.nullOrNot}}
             </el-tag>
           </template>
         </el-table-column>
         <el-table-column prop="defaultValue" label="默认值" />
-        <el-table-column prop="isDict" label="是否字典" >
+        <el-table-column prop="yesNoDictionary" label="是否字典" >
           <template slot-scope="scope">
             <el-tag v-if="scope.row.isDict === 'Y'" size="small" type="success">
               {{scope.row.isDict}}
@@ -173,6 +173,12 @@
 </template>
 <script>
 export default {
+  props: {
+    tableName: null,
+    tableNameAnnotation: null,
+    tableDataCount: null,
+    assetTableDetailsList: []
+  },
   name: 'OverallAssetStructure',
   data() {
     return {

src/views/data/structure/dashlboard/OverallSpecificAssets.vue

@@ -1,7 +1,7 @@
 <template>
   <el-row :gutter="40" class="panel-group">
     <div class="title-header">
-      {{title}} - 资产结构概述
+      {{ title }} - 资产结构概述
     </div>
     <el-col :sm="12" :xs="12" class="card-panel-col">
       <div class="card-panel" @click="handleSetLineChartData('messages')">
@@ -12,7 +12,8 @@
           <div class="card-panel-text">
             资产模型
           </div>
-          <count-to :duration="3000" :end-val="structureTableDataCount.tableCount" :start-val="0" class="card-panel-num"/>
+          <count-to :duration="3000" :end-val="structureTableDataCount.tableCount" :start-val="0"
+                    class="card-panel-num"/>
         </div>
       </div>
     </el-col>
@@ -25,7 +26,8 @@
           <div class="card-panel-text">
             数据模型
           </div>
-          <count-to :duration="3200" :end-val="structureTableDataCount.tableDataCount" :start-val="0" class="card-panel-num"/>
+          <count-to :duration="3200" :end-val="structureTableDataCount.tableDataCount" :start-val="0"
+                    class="card-panel-num"/>
         </div>
       </div>
     </el-col>
@@ -41,23 +43,42 @@
             content="这个字典是数据资产项目当中的字典内容，而不是本项目当中的字典内容。主要作用为数据清洗过程中数据字典映射作用">
             <i class="el-icon-question" slot="reference"></i>
           </el-popover>
+          <el-popover
+            placement="right"
+            width="400"
+            trigger="click">
+            <el-row :gutter="20">
+              <el-col :span="18">
+                <el-input v-model="dictAddName"></el-input>
+              </el-col>
+              <el-col :span="6">
+                <el-button @click="addDict">确定</el-button>
+              </el-col>
+            </el-row>
+            <el-button style="float: right; padding: 3px 0" type="text" slot="reference">新增字典</el-button>
+          </el-popover>
         </div>
         <el-row :gutter="20">
           <el-col v-for="(val,key) in dictMap" :md="8" :sm="24" :xs="12">
             <el-card class="box-card" style="height: 300px">
               <div slot="header" class="clearfix">
-                <span>{{key}}</span>
+                <span>{{ key }}</span>
+                <el-button style="float: right; padding: 3px 0"
+                           type="text"
+                           @click="val.push({ label: null, val: null, isEdit: true })"
+                >新增
+                </el-button>
               </div>
               <el-table :data="val" style="width: 100%" height="280px">
-                <el-table-column prop="label" label="标签" width="180">
+                <el-table-column prop="label" label="标签">
                   <template slot-scope="scope">
-                    <span v-if="!scope.row.isEdit">{{scope.row.label}}</span>
+                    <span v-if="!scope.row.isEdit">{{ scope.row.label }}</span>
                     <el-input v-if="scope.row.isEdit" v-model="scope.row.label" size="mini"></el-input>
                   </template>
                 </el-table-column>
-                <el-table-column prop="val" label="值" width="180">
+                <el-table-column prop="val" label="值">
                   <template slot-scope="scope">
-                    <span v-if="!scope.row.isEdit">{{scope.row.val}}</span>
+                    <span v-if="!scope.row.isEdit">{{ scope.row.val }}</span>
                     <el-input v-if="scope.row.isEdit" v-model="scope.row.val" size="mini"></el-input>
                   </template>
                 </el-table-column>
@@ -69,14 +90,16 @@
                       type="text"
                       icon="el-icon-edit"
                       @click="scope.row.isEdit = true"
-                    >修改</el-button>
+                    >修改
+                    </el-button>
                     <el-button
                       v-if="scope.row.isEdit"
-                      @click="scope.row.isEdit = false"
+                      @click="editConfirm(scope.row)"
                       size="mini"
                       type="text"
                       icon="el-icon-finished"
-                    >确定</el-button>
+                    >确定
+                    </el-button>
                   </template>
                 </el-table-column>
               </el-table>
@@ -87,9 +110,13 @@
 
     </el-col>
     <el-col :span="24" style="margin-top: 20px">
-      <el-tabs v-model="activeName" type="border-card" >
+      <el-tabs v-model="activeName" type="border-card">
-        <el-tab-pane v-for="item in structureTableDataCount.childrenList" :label="item.tableName + '(' + item.tableNameAnnotation + ')'" :name="item.tableName">
+        <el-tab-pane v-for="(item,index) in structureTableDataCount.childrenList"
-          <overall-asset-structure/>
+                     :label="item.tableName + '(' + item.tableNameAnnotation + ')'" :name="index"
+                     @tab-click="checkTableName">
+          <overall-asset-structure :assetTableDetailsList="item.assetTableDetailsList" :tableName="item.tableName"
+                                   :tableNameAnnotation="item.tableNameAnnotation"
+                                   :tableDataCount="item.tableDataCount"/>
         </el-tab-pane>
       </el-tabs>
     </el-col>
@@ -102,97 +129,37 @@ import CountTo from 'vue-count-to'
 import OverallAssetStructure from "@/views/data/structure/dashlboard/OverallAssetStructure.vue";
 
 export default {
+  created() {
+    this.init();
+  },
   props: {
     title: {
       type: String,
       default: "-"
     },
     structureTableDataCount: {
-      tableCount: null ,
+      tableCount: null,
-      tableDataCount: null ,
+      tableDataCount: null,
-      childrenList:[]
+      childrenList: []
     }
   },
   data() {
     return {
-      activeName: 'first',
+      activeName: 0,
+      dictAddName: null,
       dictMap: {
         "性别(system_sex)": [
-          { label: '男', val: '1', isEdit: false },
+          {label: '男', val: '1', isEdit: false},
-          { label: '女', val: '2', isEdit: false },
+          {label: '女', val: '2', isEdit: false},
-          { label: '未知', val: '0', isEdit: false },
+          {label: '未知', val: '0', isEdit: false},
         ],
         "开关(system_y_n)": [
-          { label: '是', val: '1', isEdit: false },
+          {label: '是', val: '1', isEdit: false},
-          { label: '否', val: '0', isEdit: false }
+          {label: '否', val: '0', isEdit: false}
         ],
       },
-      tableData: [{
+      tableList: [],
-        id: 1,
+      tableParams: null
-        name: "id",
-        comment: "主键",
-        isPrimaryKey: "Y",
-        type: "bigint",
-        mappingType: "Long",
-        length: "-",
-        decimalPlaces: "-",
-        isNull: "N",
-        defaultValue: "-",
-        isDict: "N",
-        dictKey: "-",
-      }, {
-        id: 2,
-        name: "name",
-        comment: "姓名",
-        isPrimaryKey: "N",
-        type: "varchar",
-        mappingType: "String",
-        length: "64",
-        decimalPlaces: "-",
-        isNull: "N",
-        defaultValue: "-",
-        isDict: "N",
-        dictKey: "-",
-      }, {
-        id: 3,
-        name: "sex",
-        comment: "性别",
-        isPrimaryKey: "N",
-        type: "char",
-        mappingType: "String",
-        length: "1",
-        decimalPlaces: "-",
-        isNull: "N",
-        defaultValue: "-",
-        isDict: "Y",
-        dictKey: "system_sex",
-      }, {
-        id: 4,
-        name: "price",
-        comment: "金额",
-        isPrimaryKey: "N",
-        type: "double",
-        mappingType: "BigDecimal",
-        length: "10",
-        decimalPlaces: "2",
-        isNull: "N",
-        defaultValue: "0.00",
-        isDict: "N",
-        dictKey: "-",
-      }, {
-        id: 5,
-        name: "create_time",
-        comment: "创建时间",
-        isPrimaryKey: "N",
-        type: "datetime",
-        mappingType: "Date",
-        length: "-",
-        decimalPlaces: "-",
-        isNull: "Y",
-        defaultValue: "-",
-        isDict: "N",
-        dictKey: "-",
-      }, ]
     }
   },
   components: {
@@ -202,6 +169,14 @@ export default {
   methods: {
     handleSetLineChartData(type) {
       this.$emit('handleSetLineChartData', type)
+    },
+    addDict() {
+      if (!this.dictAddName) {
+        this.$message.error('数据字典，不可为空');
+        return;
+      }
+      this.dictMap[this.dictAddName] = []
+      this.dictAddName = null
     }
   }
 }
@@ -315,7 +290,8 @@ export default {
     }
   }
 }
-.title-header{
+
+.title-header {
   text-align: center;
   width: 100%;
   font-size: 46px;

src/views/data/structure/index.vue

@@ -1,6 +1,6 @@
 <template>
   <el-container :style="{height: mainHeight + 'px'}">
-    <el-aside  style="width: 400px">
+    <el-aside style="width: 400px">
       <el-tree :data="assetStructureList"
                :load="expandTable"
                lazy
@@ -19,7 +19,8 @@
     <el-container>
       <el-main>
         <OverallAssets v-if="showAssets == null" :assetStructureDataCount="assetStructureDataCount"/>
-        <overall-specific-assets v-if="showAssets === 'dataSource'" :title="title" :structureTableDataCount="structureTableDataCount"/>
+        <overall-specific-assets v-if="showAssets === 'dataSource'" :title="title"
+                                 :structureTableDataCount="structureTableDataCount"/>
       </el-main>
     </el-container>
   </el-container>
@@ -49,14 +50,14 @@ export default {
       // 数据接入数量
       assetStructureDataCount: {
         dataCount: null,
-        assetStructureTableCount: null ,
+        assetStructureTableCount: null,
-        assetStructureTableDataCount: null ,
+        assetStructureTableDataCount: null,
       },
       // 数据接入数量
       structureTableDataCount: {
-        tableCount: null ,
+        tableCount: null,
-        tableDataCount: null ,
+        tableDataCount: null,
-        childrenList:[]
+        childrenList: [],
       }
 
     }
@@ -97,26 +98,7 @@ export default {
 
       // 从节点信息对象中解构出 data 属性
       const {data} = node;
-      // 如果当前节点的数据类型为 "dataTable"，返回空数组，不加载任何子节点
+/*
-      if (data.type === 'dataTable') {
-        return resolve([]);
-      }
-
-      // 如果当前节点级别大于 1，返回空数组，不加载任何子节点
-      if (node.level > 1) return resolve([]);
-
-      // 使用 setTimeout 延迟 500ms 执行以下代码块
-      setTimeout(() => {
-        // 定义一个局部变量 data，赋值为 this.childrenList
-        const data = this.childrenList;
-
-        // 调用 resolve 函数，传递 data 作为子节点数据
-        resolve(data);
-      }, 500);
-    },
-    showAssetsFun(data){
-      this.title = data.dataSourceName + '('+data.dataSourceDatabaseName + '-' + data.dataSourceSystemName+')'
-      this.showAssets = data.type;
       // 异步调用 selectAssetSouructureTableList API 函数，传入当前节点的 id 作为参数
       selectAssetSouructureTableList(data.id).then((response) => {
         // 打印 API 返回的响应数据
@@ -134,12 +116,49 @@ export default {
         this.structureTableDataCount.tableDataCount = response.data.tableDataCount
         this.structureTableDataCount.childrenList = this.childrenList
 
-
-        console.log(this.structureTableDataCount)
-
         // 调用 resolve 函数，传递处理后的 this.childrenList 作为子节点数据
         resolve(this.childrenList);
-      });
+      });*/
+
+      // 如果当前节点的数据类型为 "dataTable"，返回空数组，不加载任何子节点
+      if (data.type === 'dataTable') {
+        return resolve([]);
+      }
+
+      // 如果当前节点级别大于 1，返回空数组，不加载任何子节点
+      if (node.level > 1) return resolve([]);
+
+      // 使用 setTimeout 延迟 500ms 执行以下代码块
+      setTimeout(() => {
+        // 定义一个局部变量 data，赋值为 this.childrenList
+        const data = this.childrenList;
+
+        // 调用 resolve 函数，传递 data 作为子节点数据
+        resolve(data);
+      }, 500);
+    },
+    showAssetsFun(data) {
+      this.title = data.dataSourceName + '(' + data.dataSourceDatabaseName + '-' + data.dataSourceSystemName + ')'
+      this.showAssets = data.type;
+      if (data.type === 'dataSource') {
+        // 异步调用 selectAssetSouructureTableList API 函数，传入当前节点的 id 作为参数
+        selectAssetSouructureTableList(data.id).then((response) => {
+          // 打印 API 返回的响应数据
+          // console.log(response);
+
+          // 将 API 返回的 data 属性赋值给 this.childrenList
+          this.childrenList = response.data.tableDetailsRespList;
+
+          // 遍历 this.childrenList，为每个元素添加 type 属性，值为 "dataTable"
+          this.childrenList.forEach((item) => {
+            item.type = "dataTable";
+          });
+
+          this.structureTableDataCount.tableCount = response.data.tableCount
+          this.structureTableDataCount.tableDataCount = response.data.tableDataCount
+          this.structureTableDataCount.childrenList = this.childrenList
+        });
+      }
     }
   }
 }