feat: 资产模型初版

fix(): 修改了代码同步不一样的问题，根据不同的数据信息id查询字段表

src/api/dataSource/source.js

@@ -66,9 +66,47 @@ export function delSource(id) {
 }
 
 //资产属性列表
-export function testList(){
+export function findAssetStructure(){
   return request({
-    url:'/dataSource/source/findTest',
+    url:'/dataSource/source/findAssetStructure',
     method:'get'
   })
 }
+export function findInformationById(id){
+  return request({
+    url:'/dataSource/source/findInformationById?id='+id,
+    method:'get',
+    params:id,
+  })
+}
+
+export function findDataBaseTableById(id){
+  return request({
+    url:'dataSource/source/findDataBaseTableById?id='+id,
+    method:'get',
+    params:id,
+  })
+}
+
+export function findDataBaseByAssetId(id){
+  return request({
+    url:'dataSource/source/findDataBaseByAssetId?id='+id,
+    method:'get',
+    params:id,
+  })
+}
+export function findDataBaseTable(id){
+  return request({
+    url:'dataSource/source/findDataBaseTable?id='+id,
+    method:'get',
+    params:id,
+  })
+}
+
+export function findDataBaseByInformationId(id){
+  return request({
+    url:'dataSource/source/findDataBaseByInformationId?id='+id,
+    method:'get',
+    params:id,
+  })
+}

src/layout/components/Navbar.vue

@@ -131,6 +131,7 @@ export default {
     return {
       noticeVisble: false,
       noticeInfo: {},
+      size:0,
       noticeAttr: [
         {
           createTime: '',

src/views/dataSource/assets/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="表名称">{{ databaseTableInformation.name }}</el-descriptions-item>
-        <el-descriptions-item label="表备注">用户表</el-descriptions-item>
+        <el-descriptions-item label="表备注">{{ databaseTableInformation.as }}</el-descriptions-item>
-        <el-descriptions-item label="数据量">12536</el-descriptions-item>
+        <el-descriptions-item label="数据量">{{ databaseTableInformation.dataTotal }}</el-descriptions-item>
         <el-descriptions-item label="是否核心">
           <el-tag size="small">是</el-tag>
         </el-descriptions-item>
@@ -18,7 +18,7 @@
         <span>资产模型详细信息</span>
       </div>
       <el-table
-        :data="tableData"
+        :data="databaseTable"
         style="width: 100%;">
         <el-table-column prop="name" label="名称" />
         <el-table-column prop="comment" label="注释" />
@@ -30,7 +30,7 @@
           </template>
         </el-table-column>
         <el-table-column prop="type" label="类型" />
-        <el-table-column prop="mappingType" label="映射类型" />
+        <el-table-column prop="detailType" label="映射类型" />
         <el-table-column prop="length" label="长度" />
         <el-table-column prop="decimalPlaces" label="小数位" />
         <el-table-column prop="isNull" label="是否为空"  >
@@ -69,85 +69,178 @@
         </el-table-column>
         <el-table-column prop="id" label="操作" >
           <template slot-scope="scope">
-            <el-button type="text">编辑</el-button>
+            <el-button type="text" @click="update(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
       </el-table>
     </el-card>
+    <el-dialog title="资产结构修改" width="80%" :visible.sync="formStatus">
+      <el-form :model="form" label-width="120px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="名称">
+              <el-input v-model="form.name" readonly autocomplete="off"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="注释">
+              <el-input v-model="form.comment" readonly autocomplete="off"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="是否主键">
+              <el-tag size="small" :type="form.isPrimaryKey === 'Y' ? 'success' : 'danger'">
+                {{form.isPrimaryKey}}
+              </el-tag>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="数据类型">
+              <el-input v-model="form.type" readonly autocomplete="off"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="数据长度">
+              <el-input v-model="form.length" readonly autocomplete="off"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="小数位">
+              <el-input v-model="form.decimalPlaces" readonly autocomplete="off"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="是否为空">
+              <el-tag size="small" :type="form.isNull === 'Y' ? 'success' : 'danger'">
+                {{form.isNull}}
+              </el-tag>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="默认值">
+              <el-input v-model="form.defaultValue" readonly autocomplete="off"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="映射字段">
+              <el-input v-model="form.mappingType" readonly autocomplete="off"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="是否字典">
+              <el-switch
+                v-model="form.isDict"
+                active-value="Y"
+                inactive-value="N"
+                active-color="#13ce66"
+                inactive-color="#ff4949">
+              </el-switch>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-if="form.isDict === 'Y'">
+          <el-col :span="24">
+            <el-form-item label="字典">
+              <el-select v-model="form.dictKey">
+                <el-option v-for="(value, key) in dictMap" :key="key" :label="key" :value="key"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item>
+              <el-table :data="dictMap[form.dictKey]" striped border>
+                <el-table-column property="label" label="字典标签"/>
+                <el-table-column property="val" label="字典值"/>
+              </el-table>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="formStatus = false">取 消</el-button>
+        <el-button type="primary" @click="formStatus = false">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
+import {findDataBaseByInformationId} from "@/api/dataSource/source";
+
 export default {
   name: 'OverallAssetStructure',
+  props:{
+    table:{
+      value:Object,
+      default:{}
+    },
+    databaseTable:{
+      value:Array,
+      default:[]
+    },
+    databaseTableInformationList:{
+      value:Array,
+      default:[]
+    },
+    databaseTableInformation:{
+      value:Object,
+      default:{}
+    },
+    childrenList:{
+      value:Array,
+      default:[]
+    },
+  },
   data() {
     return {
-      tableData: [
+      form: {},
-        {
+      formStatus: false,
-          id: 1,
+      dictMap: {
-          name: "id",
+        "system_sex": [
-          comment: "主键",
+          { label: '男', val: '1', isEdit: false },
-          isPrimaryKey: "Y",
+          { label: '女', val: '2', isEdit: false },
-          type: "bigint",
+          { label: '未知', val: '0', isEdit: false },
-          mappingType: "Long",
+        ],
-          length: "-",
+        "system_y_n": [
-          decimalPlaces: "-",
+          { label: '是', val: '1', isEdit: false },
-          isNull: "N",
+          { label: '否', val: '0', isEdit: false }
-          defaultValue: "-",
+        ],
-          isDict: "N",
+      }
-          dictKey: "-",
+    }
-        }, {
+  },
-          id: 2,
+  watch:{
-          name: "name",
+    table:{
-          comment: "姓名",
+      handler(val){
-          isPrimaryKey: "N",
+        findDataBaseByInformationId(val.id).then(
-          type: "varchar",
+
-          mappingType: "String",
+          res=>{
-          length: "64",
+            this.databaseTableInformation=this.table;
-          decimalPlaces: "-",
+            console.log(this.databaseTable)
-          isNull: "N",
+            this.databaseTable=res.data;
-          defaultValue: "-",
+          }
-          isDict: "N",
+        )
-          dictKey: "-",
+      },
-        }, {
+      immediate:true
-          id: 3,
+    }
-          name: "sex",
+  },
-          comment: "性别",
+  created() {
-          isPrimaryKey: "N",
+    // this.findDataBaseByInformationId()
-          type: "char",
+    // this.init();
-          mappingType: "String",
+  },
-          length: "1",
+  methods:{
-          decimalPlaces: "-",
+    init(){
-          isNull: "N",
+
-          defaultValue: "-",
+    },
-          isDict: "Y",
+    update(row) {
-          dictKey: "system_sex",
+      this.form = row;
-        }, {
+      this.formStatus = true;
-          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: "-",
-        }, ]
     }
   },
 }

src/views/dataSource/assets/OverallAssets.vue

@@ -49,6 +49,7 @@
 import CountTo from 'vue-count-to'
 
 export default {
+
   components: {
     CountTo
   },
@@ -56,6 +57,7 @@ export default {
     handleSetLineChartData(type) {
       this.$emit('handleSetLineChartData', type)
     }
+
   }
 }
 </script>

src/views/dataSource/assets/OverallSpecificAssets.vue

@@ -30,11 +30,85 @@
       </div>
     </el-col>
     <el-col :span="24">
-      <el-tabs v-model="activeName" type="border-card">
+      <el-card class="box-card">
-        <el-tab-pane label="sys_user(用户表)" name="first">
+        <div slot="header" class="clearfix">
-          <overall-asset-structure/>
+          <span>基础字典</span>
+          <el-popover
+            placement="top-start"
+            title="基础字典"
+            width="200"
+            trigger="hover"
+            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>
+                <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="标签">
+                  <template slot-scope="scope">
+                    <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="值">
+                  <template slot-scope="scope">
+                    <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>
+                <el-table-column prop="val" label="操作">
+                  <template slot-scope="scope">
+                    <el-button
+                      v-if="!scope.row.isEdit"
+                      size="mini"
+                      type="text"
+                      icon="el-icon-edit"
+                      @click="scope.row.isEdit = true"
+                    >修改</el-button>
+                    <el-button
+                      v-if="scope.row.isEdit"
+                      @click="editConfirm(scope.row)"
+                      size="mini"
+                      type="text"
+                      icon="el-icon-finished"
+                    >确定</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-card>
+          </el-col>
+        </el-row>
+      </el-card>
+
+    </el-col>
+    <el-col :span="24" style="margin-top: 20px">
+      <el-tabs :value="activeName" type="border-card" >
+        <el-tab-pane v-for="(table,index) in databaseTableInformationList" :label="table.name+'('+table.as+')'" :name="index+''" >
+          <OverallAssetStructure :table="table"/>
         </el-tab-pane>
-        <el-tab-pane label="sys_dept(部门表)" name="second">sys_dept(部门表)</el-tab-pane>
       </el-tabs>
     </el-col>
   </el-row>
@@ -44,27 +118,87 @@
 <script>
 import CountTo from 'vue-count-to'
 import OverallAssetStructure from "@/views/dataSource/assets/OverallAssetStructure.vue";
-
+import table from "table";
 export default {
   props: {
     title: {
       type: String,
       default: "-"
-    }
+    },
+
+    databaseTableInformationList:[],
+    childrenList:{
+
+    },
   },
   data() {
     return {
-      activeName: 'first',
+      dictAddName:null,
+      activeName: '0',
+      table:null,
+      databaseTable:[],
+      dictMap: {
+        "性别(system_sex)": [
+          { label: '男', val: '1', isEdit: false },
+          { label: '女', val: '2', isEdit: false },
+          { label: '未知', val: '0', isEdit: false },
+        ],
+        "开关(system_y_n)": [
+          { label: '是', val: '1', isEdit: false },
+          { label: '否', val: '0', isEdit: false }
+        ],
       }
+    }
+  },
+  created() {
+      this.init();
     },
   components: {
     OverallAssetStructure,
     CountTo
   },
   methods: {
+    table() {
+      return table
+    },
+    checkTableName(checkTab){
+      this.databaseTable = this.databaseTableInformationList.findLast(item => item.tableName === checkTab.name)
+      console.log(this.databaseTable);
+    },
+    init(){
+      let rows = [
+        {
+          tableName: "sys_user",
+          tableAsName: "用户表"
+        },
+        {
+          tableName: "sys_dept",
+          tableAsName: "部门表"
+        },
+      ];
+      this.tableList = rows;
+      this.activeName = rows[0].tableName;
+    },
+    editConfirm(row){
+      if (!row.label || !row.val) {
+        this.$message.error('字典标签或字典值，不可为空');
+        return;
+      }
+      row.isEdit = false;
+    },
+    addDict(){
+      if (!this.dictAddName){
+        this.$message.error('数据字典，不可为空');
+        return;
+      }
+      this.dictMap[this.dictAddName] = []
+      this.dictAddName = null
+    },
     handleSetLineChartData(type) {
       this.$emit('handleSetLineChartData', type)
-    }
+      console.log(type)
+    },
+
   }
 }
 </script>

src/views/dataSource/assets/index.vue

@@ -6,7 +6,7 @@
       <el-tree :data="assetStructureList"
                :load="expandTable"
                lazy
-               @node-click="(data) => showAssets=data.type"
+               @node-click="showAssetsFun"
                :props="defaultProps">
         <div class="custom-tree-node" slot-scope="{ node, data }">
           <div v-if="data.type === 0">{{ data. accessSourceName + '('+data.databaseName + '-' + data.dataSourceSystemName+')' }}</div>
@@ -17,8 +17,8 @@
     <el-container>
       <el-main>
         <OverallAssets v-if="showAssets == null"/>
-        <overall-specific-assets v-if="showAssets === 'dataSource'" :title="title"/>
+        <overall-specific-assets v-if="showAssets === 0"  :databaseTableInformationList="databaseTableInformationList"   :title="title"/>
-        <overall-asset-structure v-if="showAssets === 'dataTable'" :title="title"/>
+        <overall-asset-structure v-if="showAssets === 1" :databaseTable="databaseTable" :databaseTableInformation="databaseTableInformation"  :childrenList="childrenList" :title="title"/>
       </el-main>
     </el-container>
   </el-container>
@@ -27,11 +27,16 @@
 
 import OverallSpecificAssets from "@/views/dataSource/assets/OverallSpecificAssets.vue";
 import OverallAssets from "@/views/dataSource/assets/OverallAssets.vue";
-import {testList} from "@/api/dataSource/source";
+import {
+  findAssetStructure, findDataBaseByAssetId, findDataBaseByInformationId, findDataBaseTable,
+  findDataBaseTableById,
+  findInformationById
+} from "@/api/dataSource/source";
+import OverallAssetStructure from "@/views/dataSource/assets/OverallAssetStructure.vue";
 
 export default {
   name: 'assets',
-  components: { OverallSpecificAssets, OverallAssets },
+  components: {OverallAssetStructure, OverallSpecificAssets, OverallAssets },
   data() {
     return {
       mainHeight: window.innerHeight - 85,
@@ -39,38 +44,68 @@ export default {
         children: 'childrenList',
         label: 'name'
       },
+
       assetStructureList: [],
       childrenList: [],
     showAssets: null,
-      title: null
+      title: null,
+      databaseTableInformation:{},
+      databaseTableInformationList:[],
+      databaseTable:[],
   }
   },
   created() {
-    this.findTest();
+    this.findAssetStructure();
   },
   methods: {
     expandTable(node, resolve) {
       if (node.level === 0) return resolve(this.assetStructureList);
-
-
       const {data} = node;
-      this.showAssets = data.type;
+      this.showAssets = data.id;
-      if (data.type === 'dataTable') {
+
-        return resolve([])
+        findDataBaseByAssetId(data.id).then(
+          res=>{
+
+            this.databaseTableInformationList=res.data;
+
           }
-      this.title = data.accessSourceName + '('+data.databaseName + '-' + data.dataSourceSystemName+')'
+        )
+        findDataBaseTable(data.id).then(
+          res=>{
+            this.databaseTableInformation=res.data
+          }
+        )
+        findInformationById(data.id).then(
+          res=>{
+            this.childrenList=res.data;
+          }
+        )
+      if (data.type === 1){
+        findDataBaseByInformationId(data.id).then(
+          res=>{
+
+            this.databaseTable=res.data;
+            console.log("res",this.databaseTable)
+          }
+        )
+      }
+
       setTimeout(() => {
         resolve(this.childrenList)
       }, 500);
     },
-    findTest(){
+    showAssetsFun(data){
-      testList().then(
+      this.title = data.accessSourceName + '('+data.databaseName + '-' + data.dataSourceSystemName+')'
+      this.showAssets = data.type;
+    },
+    findAssetStructure(){
+      findAssetStructure().then(
         res=>{
-          this.assetStructureList=res.data.assetStructureList;
+          this.assetStructureList=res.data
-          this.childrenList=res.data.databaseTableInformationList;
         }
       )
     },
+
   }
 }
 </script>

src/views/dataSource/source/index.vue

@@ -142,7 +142,6 @@
       <el-table-column label="主机端口" align="center" prop="hostPort" />
       <el-table-column label="数据连接类型ID" align="center" prop="dataAccessTypeId" />
       <el-table-column label="数据库名称" align="center" prop="databaseName" />
-      <el-table-column label="数据连接参数" align="center" prop="dataConnectionParameter" />
       <el-table-column label="初始连接数量" align="center" prop="initialQuantity" />
       <el-table-column label="最大连接数量" align="center" prop="maximumQuantity" />
       <el-table-column label="最大等待时间" align="center" prop="maximumTime" />
@@ -426,7 +425,6 @@ export default {
       listType().then(
         res=>{
           this.accessTypes=res.data;
-          console.log("res",this.accessTypes)
         }
       )
     },