feat():数据接入树级结构

src/api/data/source.js

@@ -54,7 +54,7 @@ export function getConnect(data) {
 // 查询数据源
 export function getAssetList() {
   return request({
-    url: '/source/data/getAssetList',
+    url: '/data/source/getAssetList',
     method: 'get'
   })
 }
@@ -62,7 +62,7 @@ export function getAssetList() {
 // 查询数据库下的表
 export function getChildrenList(data) {
   return request({
-    url: '/source/data/getChildrenList',
+    url: '/data/source/getChildrenList',
     method: 'post',
     data: data
   })
@@ -71,7 +71,7 @@ export function getChildrenList(data) {
 // 添加表结构
 export function addTableData(data) {
   return request({
-    url: '/source/data/addTableData',
+    url: '/data/source/addTableData',
     method: 'post',
     data: data
   })
@@ -80,7 +80,7 @@ export function addTableData(data) {
 // 查询表结构
 export function selectTableList() {
   return request({
-    url: '/source/data/selectTableList',
+    url: '/data/source/selectTableList',
     method: 'get'
   })
 }
@@ -88,7 +88,14 @@ export function selectTableList() {
 // 查询表数据总数
 export function selectTableDataCount() {
   return request({
-    url: '/source/data/selectTableDataCount',
+    url: '/data/source/selectTableDataCount',
+    method: 'get'
+  })
+}
+// 根据childrenId查询表结构
+export function selectTableData(id) {
+  return request({
+    url: '/data/source/selectTableData/' + id,
     method: 'get'
   })
 }

src/views/data/assetStructure/dashboard/OverallAssetStructure.vue

@@ -1,13 +1,13 @@
 <template>
-  <div>
+  <div v-if="childrenParams != null">
     <el-card>
       <div slot="header" class="clearfix">
         <span>资产模型基本信息</span>
       </div>
       <el-descriptions border :column="2">
-        <el-descriptions-item label="表名称">sys_user</el-descriptions-item>
+        <el-descriptions-item label="表名称">{{ childrenParams.name }}</el-descriptions-item>
-        <el-descriptions-item label="表备注">用户表</el-descriptions-item>
+        <el-descriptions-item label="表备注">{{ childrenParams.annotation }}</el-descriptions-item>
-        <el-descriptions-item label="数据量">12536</el-descriptions-item>
+        <el-descriptions-item label="数据量">{{ childrenParams.dataTotal }}</el-descriptions-item>
         <el-descriptions-item label="是否核心">
           <el-tag size="small">是</el-tag>
         </el-descriptions-item>
@@ -17,9 +17,7 @@
       <div slot="header" class="clearfix">
         <span>资产模型详细信息</span>
       </div>
-      <el-table
+      <el-table :data="tableDataList" style="width: 100%;">
-        :data="tableData"
-        style="width: 100%;">
         <el-table-column prop="name" label="名称"/>
         <el-table-column prop="comment" label="注释"/>
         <el-table-column prop="isPrimaryKey" label="是否主键">
@@ -172,77 +170,30 @@
   </div>
 </template>
 <script>
+import {selectTableData} from "@/api/data/source";
+
 export default {
   name: 'OverallAssetStructure',
+  props: {
+    childrenParams: {
+      type: Object,
+      default: null
+    }
+  },
+  watch: {
+    childrenParams: {
+      handler(val) {
+        if (val != null) {
+          this.init()
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
   data() {
     return {
-      tableData: [
+      tableDataList: [],
-        {
-          id: 1,
-          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: "-",
-        }, ],
       form: {},
       formStatus: false,
       dictMap: {
@@ -259,6 +210,11 @@ export default {
     }
   },
   methods: {
+    init() {
+      selectTableData(this.childrenParams.id).then(res => {
+        this.tableDataList = res.data
+      })
+    },
     update(row) {
       this.form = row;
       this.formStatus = true;

src/views/data/assetStructure/dashboard/OverallSpecificAssets.vue

@@ -12,7 +12,7 @@
           <div class="card-panel-text">
             资产模型
           </div>
-          <count-to :duration="3000" :end-val="15" :start-val="0" class="card-panel-num"/>
+          <count-to :duration="3000" :end-val="count.assetStructureTableCount" :start-val="0" class="card-panel-num"/>
         </div>
       </div>
     </el-col>
@@ -25,7 +25,7 @@
           <div class="card-panel-text">
             数据模型
           </div>
-          <count-to :duration="3200" :end-val="230" :start-val="0" class="card-panel-num"/>
+          <count-to :duration="3200" :end-val="count.assetStructureTableDataCount" :start-val="0" class="card-panel-num"/>
         </div>
       </div>
     </el-col>
@@ -64,7 +64,8 @@
                 <el-button style="float: right; padding: 3px 0"
                            type="text"
                            @click="val.push({ label: null, val: null, isEdit: true })"
-                >新增</el-button>
+                >新增
+                </el-button>
               </div>
               <el-table :data="val" style="width: 100%" height="280px">
                 <el-table-column prop="label" label="标签">
@@ -87,14 +88,16 @@
                       type="text"
                       icon="el-icon-edit"
                       @click="scope.row.isEdit = true"
-                    >修改</el-button>
+                    >修改
+                    </el-button>
                     <el-button
                       v-if="scope.row.isEdit"
                       @click="editConfirm(scope.row)"
                       size="mini"
                       type="text"
                       icon="el-icon-finished"
-                    >确定</el-button>
+                    >确定
+                    </el-button>
                   </template>
                 </el-table-column>
               </el-table>
@@ -105,11 +108,11 @@
 
     </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" @tab-click="checkTableName">
-        <el-tab-pane label="sys_user(用户表)" name="first">
+        <el-tab-pane v-for="children in childrenList" :label="children.name+'('+children.annotation+')'"
-          <overall-asset-structure/>
+                     :name="children.name">
+          <overall-asset-structure v-if="children.name === childrenParams.name" :children-params="childrenParams"/>
         </el-tab-pane>
-        <el-tab-pane label="sys_dept(部门表)" name="second">sys_dept(部门表)</el-tab-pane>
       </el-tabs>
     </el-col>
   </el-row>
@@ -119,9 +122,16 @@
 <script>
 import CountTo from 'vue-count-to'
 import OverallAssetStructure from './OverallAssetStructure.vue'
+import {getDictDataList, getDictTypeList, selectDictTypeList, selectTableData} from "@/api/data/source";
 
 export default {
   props: {
+    count:{
+      assetStructureCount: null,
+      assetStructureTableCount: null,
+      assetStructureTableDataCount: null
+    },
+    childrenList: [],
     title: {
       type: String,
       default: "-"
@@ -129,7 +139,7 @@ export default {
   },
   data() {
     return {
-      activeName: 'first',
+      activeName: null,
       dictAddName: null,
       dictMap: {
         "性别(system_sex)": [
@@ -141,7 +151,8 @@ export default {
           {label: '是', val: '1', isEdit: false},
           {label: '否', val: '0', isEdit: false}
         ],
-      }
+      },
+      childrenParams: null
     }
   },
   components: {
@@ -149,6 +160,15 @@ export default {
     CountTo
   },
   methods: {
+    init() {
+      this.activeName = this.childrenList[0].name
+      this.childrenParams = this.childrenList[0]
+    },
+    checkTableName(checkTab) {
+      console.log(checkTab)
+      this.childrenParams = this.childrenList.findLast(item => item.name === checkTab.name)
+      console.log(this.childrenParams)
+    },
     editConfirm(row) {
       if (!row.label || !row.val) {
         this.$message.error('字典标签或字典值，不可为空');
@@ -167,6 +187,9 @@ export default {
     handleSetLineChartData(type) {
       this.$emit('handleSetLineChartData', type)
     }
+  },
+  created() {
+    this.init()
   }
 }
 </script>
@@ -279,6 +302,7 @@ export default {
     }
   }
 }
+
 .title-header {
   text-align: center;
   width: 100%;

src/views/data/assetStructure/index.vue

@@ -12,15 +12,20 @@
               data.name + '(' + data.databaseName + '-' + data.systemName + ')'
             }}
           </div>
-          <div v-if="data.type === 'dataTable'">{{ data.name + '-' + data.as + '(' + data.dataTotal + '条)' }}</div>
+          <div v-if="data.type === 'dataTable'">{{
+              data.name + '-' + data.annotation + '(' + data.dataTotal + '条)'
+            }}
+          </div>
         </div>
       </el-tree>
     </el-aside>
     <el-container>
       <el-main>
         <OverallAssets v-if="showAssets == null" :count="count"/>
-        <overall-specific-assets v-if="showAssets === 'dataSource'" :title="title"/>
+        <overall-specific-assets v-if="showAssets === 'dataSource'" :childrenList="childrenList" :count="count"
-        <overall-asset-structure v-if="showAssets === 'dataTable'" :title="title"/>
+                                 :title="title"/>
+        <overall-asset-structure v-if="showAssets === 'dataTable'" :children-params="childrenParams"
+                                 :tableDataList="tableDataList"/>
       </el-main>
     </el-container>
   </el-container>
@@ -29,7 +34,13 @@
 import OverallAssets from './dashboard/OverallAssets.vue'
 import OverallSpecificAssets from './dashboard/OverallSpecificAssets.vue'
 import OverallAssetStructure from './dashboard/OverallAssetStructure.vue'
-import {addTableData, getAssetList, getChildrenList, selectTableDataCount, selectTableList} from "@/api/data/source";
+import {
+  addTableData,
+  getAssetList,
+  getChildrenList, getTableDataCount,
+  selectTableData,
+  selectTableDataCount
+} from "@/api/data/source";
 
 export default {
   name: 'assetStructure',
@@ -44,6 +55,7 @@ export default {
       assetStructureList: [],
       childrenList: [],
       tableDataList: [],
+      childrenParams: null,
       showAssets: null,
       title: null,
       showTable: {
@@ -63,6 +75,12 @@ export default {
       console.log(resolve)
       if (node.level === 0) return resolve(this.assetStructureList);
       const {data} = node;
+      if (data.type === 'dataSource') {
+        getTableDataCount(data.id).then(res => {
+          this.count.assetStructureCount = res.data.assetStructureCount
+          this.count.assetStructureTableCount = res.data.assetStructureTableCount
+          this.count.assetStructureTableDataCount = res.data.assetStructureTableDataCount
+        })
         getChildrenList(data).then(res => {
           console.log(res)
           this.childrenList = res.data
@@ -74,14 +92,15 @@ export default {
               // console.log(res)
             })
           })
-        selectTableList().then(res => {
-          this.tableDataList = res.data
-          console.log(this.tableDataList)
         })
-      })
+      }
-      this.showAssets = data.type;
+      // this.showAssets = data.type;
       if (data.type === 'dataTable') {
         console.log(data)
+        selectTableData(data.id).then(res => {
+          this.tableDataList = res.data
+        })
+        this.childrenParams = data
         return resolve([])
       }
       setTimeout(() => {
@@ -91,6 +110,12 @@ export default {
     showAssetsFun(data) {
       this.title = data.name + '(' + data.databaseName + '-' + data.systemName + ')'
       this.showAssets = data.type;
+      if (data.type === "dataTable") {
+        this.childrenParams = data
+        selectTableData(data.id).then(res => {
+          this.tableDataList = res.data
+        })
+      }
     },
     getAssetStructureList() {
       getAssetList().then(res => {

src/views/data/source/index.vue

@@ -83,7 +83,7 @@
       <el-table-column label="接入源名称" align="center" prop="name" />
       <el-table-column label="数据来源系统名称" align="center" prop="systemName" />
       <el-table-column label="数据库名称" align="center" prop="databaseName" />
-      <el-table-column label="数据库类型" align="center" prop="databaseType" />
+      <el-table-column label="数据库类型" align="center" prop="dataType" />
       <el-table-column label="主机地址" align="center" prop="host" />
       <el-table-column label="端口号" align="center" prop="port" />
       <el-table-column label="用户名" align="center" prop="user" />
@@ -183,12 +183,12 @@
           <el-row>
             <el-col :md="12" :sm="24">
               <el-form-item label="数据接入类型" prop="type">
-                <el-select style="width: 100%" v-model="form.databaseType">
+                <el-select style="width: 100%" v-model="form.dataType">
                   <el-option
-                    v-for="databaseType in databaseTypeList"
+                    v-for="dataType in databaseTypeList"
-                    :key="databaseType.databaseId"
+                    :key="dataType.databaseId"
-                    :label="databaseType.databaseName"
+                    :label="dataType.databaseName"
-                    :value=" databaseType.databaseId"></el-option>
+                    :value=" dataType.databaseName"></el-option>
                 </el-select>
               </el-form-item>
             </el-col>
@@ -349,8 +349,8 @@ export default {
     },
     //连接
     handleconnect(row){
-      const id = row.databaseType
+
-      getConnect(id).then(response=>{
+      getConnect(row).then(response=>{
         console.log(response)
         if (response.data){
           this.$message.success("测试成功")
@@ -405,7 +405,7 @@ getDataBaseType() {
         name: null,
         systemName: null,
         databaseName: null,
-        databaseType: null,
+        dataType: null,
         host: null,
         port: null,
         user: null,