feat: 前端新增资产展示使用组件形式展示

树级结构选中数据源或数据表展示不同组件

src/views/etl/assetShow/index.vue

@@ -3,48 +3,50 @@
     <el-aside>
       <el-tree style="background-color: white" :data="sourceList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
     </el-aside>
-    <el-container v-if="asset.dataType == 'dataTable'">
+    <el-container>
       <el-main>
-        <el-card>
+        <data-source-show v-if="showAssets === 'dataSource'" :source="source"></data-source-show>
-          <div slot="header" class="clearfix">
+        <data-asset-show v-if="showAssets === 'dataTable'" :asset="asset" :source="source"></data-asset-show>
-            <span>资产模型基本信息</span>
+<!--        <el-card>-->
-          </div>
+<!--          <div slot="header" class="clearfix">-->
-          <el-descriptions border :column="2">
+<!--            <span>资产模型基本信息</span>-->
-            <el-descriptions-item label="表名称">{{asset.tableName}}</el-descriptions-item>
+<!--          </div>-->
-            <el-descriptions-item label="表备注">{{asset.tableComment}}</el-descriptions-item>
+<!--          <el-descriptions border :column="2">-->
-            <el-descriptions-item label="数据量">{{asset.tableCount}}</el-descriptions-item>
+<!--            <el-descriptions-item label="表名称">{{asset.tableName}}</el-descriptions-item>-->
-            <el-descriptions-item label="是否核心">
+<!--            <el-descriptions-item label="表备注">{{asset.tableComment}}</el-descriptions-item>-->
-              <el-tag size="small">是</el-tag>
+<!--            <el-descriptions-item label="数据量">{{asset.tableCount}}</el-descriptions-item>-->
-            </el-descriptions-item>
+<!--            <el-descriptions-item label="是否核心">-->
-          </el-descriptions>
+<!--              <el-tag size="small">是</el-tag>-->
-        </el-card>
+<!--            </el-descriptions-item>-->
+<!--          </el-descriptions>-->
+<!--        </el-card>-->
 
-        <el-card class="box-card" style="margin-top: 20px">
+<!--        <el-card class="box-card" style="margin-top: 20px">-->
-          <div slot="header" class="clearfix">
+<!--          <div slot="header" class="clearfix">-->
-            <span>模型数据</span>
+<!--            <span>模型数据</span>-->
-          </div>
+<!--          </div>-->
-          <el-row v-if="kvtList.length > 0" :gutter="20">
+<!--          <el-row v-if="kvtList.length > 0" :gutter="20">-->
-            <el-col :span="6" v-for="(kvt,index) in kvtList[0]" style="margin-top: 20px">
+<!--            <el-col :span="6" v-for="(kvt,index) in kvtList[0]" style="margin-top: 20px">-->
-              <el-descriptions :title="source.dataSourceName+'.'+asset.tableName+'.'+index" direction="vertical" border :column="1">
+<!--              <el-descriptions :title="source.dataSourceName+'.'+asset.tableName+'.'+index" direction="vertical" border :column="1">-->
-                <el-descriptions-item label="Type">
+<!--                <el-descriptions-item label="Type">-->
-                  <el-tag size="small">{{kvt.type}}</el-tag>
+<!--                  <el-tag size="small">{{kvt.type}}</el-tag>-->
-                </el-descriptions-item>
+<!--                </el-descriptions-item>-->
-                <el-descriptions-item label="Value">{{kvt.value=='' ? 'null':kvt.value}}</el-descriptions-item>
+<!--                <el-descriptions-item label="Value">{{kvt.value=='' ? 'null':kvt.value}}</el-descriptions-item>-->
-              </el-descriptions>
+<!--              </el-descriptions>-->
-            </el-col>
+<!--            </el-col>-->
-          </el-row>
+<!--          </el-row>-->
-          <el-row v-if="kvtList.length == 0" :gutter="20">
+<!--          <el-row v-if="kvtList.length == 0" :gutter="20">-->
-            <el-col :span="6" v-for="(value,index) in structure" style="margin-top: 20px">
+<!--            <el-col :span="6" v-for="(value,index) in structure" style="margin-top: 20px">-->
-              <el-descriptions :title="source.dataSourceName+'.'+asset.tableName+'.'+index" direction="vertical" border :column="1">
+<!--              <el-descriptions :title="source.dataSourceName+'.'+asset.tableName+'.'+index" direction="vertical" border :column="1">-->
-                <el-descriptions-item label="Type">
+<!--                <el-descriptions-item label="Type">-->
-                  <el-tag size="small">{{value}}</el-tag>
+<!--                  <el-tag size="small">{{value}}</el-tag>-->
-                </el-descriptions-item>
+<!--                </el-descriptions-item>-->
-                <el-descriptions-item label="Value">null</el-descriptions-item>
+<!--                <el-descriptions-item label="Value">null</el-descriptions-item>-->
-              </el-descriptions>
+<!--              </el-descriptions>-->
-            </el-col>
+<!--            </el-col>-->
-          </el-row>
+<!--          </el-row>-->
 
-        </el-card>
+<!--        </el-card>-->
       </el-main>
     </el-container>
   </el-container>
@@ -53,11 +55,15 @@
 <script>
 
 import {dataAssetList, listSource, structureList} from "@/api/etl/source";
+import DataSourceShow from "@/views/etl/assetShow/modules/dataSourceShow.vue";
+import DataAssetShow from "@/views/etl/assetShow/modules/dataAssetShow.vue";
 
 export default {
   name: "AssetShow",
+  components: {DataAssetShow, DataSourceShow},
   data() {
     return {
+      showAssets: '',
       source: {},
       asset: {},
       sourceList: [],
@@ -103,13 +109,13 @@ export default {
         this.total = response.data.total;
       });
     },
-    structureList(){
+    // structureList(){
-      structureList(this.source).then(res => {
+    //   structureList(this.source).then(res => {
-        console.log(res)
+    //     console.log(res)
-        this.kvtList = res.data.kvtList
+    //     this.kvtList = res.data.kvtList
-        this.structure = res.data.structure
+    //     this.structure = res.data.structure
-      })
+    //   })
-    },
+    // },
     handleNodeClick(data) {
       if (data.dataType === 'dataSource'){
         this.source = data
@@ -134,11 +140,11 @@ export default {
             })
           }
         })
-        console.log(this.source)
+        // console.log(this.source)
-        this.source.sql = 'select * from '+(data.modeName == null ? '' : data.modeName+'.')+data.tableName +' limit 1'
+        // this.source.sql = 'select * from '+(data.modeName == null ? '' : data.modeName+'.')+data.tableName +' limit 1'
-        setTimeout(() => {
+        // setTimeout(() => {
-          this.structureList()
+        //   this.structureList()
-        }, 50);
+        // }, 50);
 
       }
       this.showAssets = data.dataType

src/views/etl/assetShow/modules/dataAssetShow.vue

@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <el-card>
+      <div slot="header" class="clearfix">
+        <span>资产模型基本信息</span>
+      </div>
+      <el-descriptions border :column="2">
+        <el-descriptions-item label="表名称">{{asset.tableName}}</el-descriptions-item>
+        <el-descriptions-item label="表备注">{{asset.tableComment}}</el-descriptions-item>
+        <el-descriptions-item label="数据量">{{asset.tableCount}}</el-descriptions-item>
+        <el-descriptions-item label="是否核心">
+          <el-tag size="small">是</el-tag>
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+
+    <el-card class="box-card" style="margin-top: 20px">
+      <div slot="header" class="clearfix">
+        <span>模型数据</span>
+      </div>
+      <el-row v-if="kvtList.length > 0" :gutter="20">
+        <el-col :span="6" v-for="(kvt,index) in kvtList[0]" style="margin-top: 20px">
+          <el-descriptions :title="source.dataSourceName+'.'+asset.tableName+'.'+index" direction="vertical" border :column="1">
+            <el-descriptions-item label="Type">
+              <el-tag size="small">{{kvt.type}}</el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item label="Value">{{kvt.value=='' ? 'null':kvt.value}}</el-descriptions-item>
+          </el-descriptions>
+        </el-col>
+      </el-row>
+      <el-row v-if="kvtList.length == 0" :gutter="20">
+        <el-col :span="6" v-for="(value,index) in structure" style="margin-top: 20px">
+          <el-descriptions :title="source.dataSourceName+'.'+asset.tableName+'.'+index" direction="vertical" border :column="1">
+            <el-descriptions-item label="Type">
+              <el-tag size="small">{{value}}</el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item label="Value">null</el-descriptions-item>
+          </el-descriptions>
+        </el-col>
+      </el-row>
+
+    </el-card>
+  </div>
+</template>
+
+<script>
+import {dataAssetList, listSource, structureList} from "@/api/etl/source";
+
+export default {
+  watch:{
+    'asset':{
+      handler(val){
+      },
+      immediate: true
+    },
+    'source':{
+      handler(val){
+        this.structureList()
+      },
+      immediate: true
+    }
+  },
+  props:{
+    asset:{},
+    source: {}
+  },
+  name: "dataAssetShow",
+  data() {
+    return {
+      sourceList: [],
+      mainHeight: window.innerHeight - 85,
+      defaultProps: {
+        children: 'tableList',
+        label: 'label'
+      },
+      showAuth: null,
+      assetShowList: [
+        {key: "测试.sys_user.id", type: "String", value: 1},
+        {key: "测试.sys_user.name", type: "String", value: "张三"},
+        {key: "测试.sys_user.age", type: "Integer", value: 18},
+        {key: "测试.sys_user.email", type: "String", value: "123@136.com"},
+        {key: "测试.sys_user.sex", type: "String", value: "Y"},
+      ],
+      kvtList: [],
+      structure: []
+    }
+  },
+  created() {
+  },
+  methods: {
+    structureList(){
+      this.source.sql = 'select * from '+(this.source.modeName == null ? '' : this.source.modeName+'.')+this.asset.tableName +' limit 1'
+      structureList(this.source).then(res => {
+        console.log(res)
+        this.kvtList = res.data.kvtList
+        this.structure = res.data.structure
+      })
+    },
+    expandTable( node, resolve){
+      if (node.level === 0) return resolve(this.assetStructureList);
+      const {data} = node;
+      if (data.type === 'dataTable') {
+        return resolve([])
+      }
+      setTimeout(() => {
+        resolve(this.childrenList)
+      }, 500);
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/etl/assetShow/modules/dataSourceShow.vue

@@ -0,0 +1,160 @@
+<template>
+<div>
+  <el-row :gutter="40" class="panel-group">
+    <el-col :span="24">
+      <el-tabs v-model="activeName" type="border-card">
+        <el-tab-pane v-for="tableAsset in source.tableList" :label="tableAsset.tableName+'('+tableAsset.tableComment+')'" :name="tableAsset.tableName">
+          <data-asset-show v-if="activeName == tableAsset.tableName" :asset="tableAsset" :source="source"/>
+        </el-tab-pane>
+      </el-tabs>
+    </el-col>
+  </el-row>
+</div>
+</template>
+
+<script>
+import DataAssetShow from "./dataAssetShow.vue";
+
+export default {
+  watch:{
+    'source':{
+      handler(val){
+        setTimeout(() => this.inio(), 100)
+      },
+      immediate: true
+    }
+  },
+  props:{
+    source:{}
+  },
+  name: "dataSourceShow",
+  components: {DataAssetShow},
+  data() {
+    return {
+      activeName: ''
+    }
+  },
+  methods:{
+    inio(){
+      this.activeName = this.source.tableList[0].tableName
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 18px;
+
+  .card-panel-col {
+    margin-bottom: 32px;
+  }
+
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+    &:hover {
+      .card-panel-icon-wrapper {
+        color: #fff;
+      }
+
+      .icon-people {
+        background: #40c9c6;
+      }
+
+      .icon-message {
+        background: #36a3f7;
+      }
+
+      .icon-money {
+        background: #f4516c;
+      }
+
+      .icon-shopping {
+        background: #34bfa3
+      }
+    }
+
+    .icon-people {
+      color: #40c9c6;
+    }
+
+    .icon-message {
+      color: #36a3f7;
+    }
+
+    .icon-money {
+      color: #f4516c;
+    }
+
+    .icon-shopping {
+      color: #34bfa3
+    }
+
+    .card-panel-icon-wrapper {
+      float: left;
+      margin: 14px 0 0 14px;
+      padding: 16px;
+      transition: all 0.38s ease-out;
+      border-radius: 6px;
+    }
+
+    .card-panel-icon {
+      float: left;
+      font-size: 48px;
+    }
+
+    .card-panel-description {
+      float: right;
+      font-weight: bold;
+      margin: 26px;
+      margin-left: 0px;
+
+      .card-panel-text {
+        line-height: 18px;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 16px;
+        margin-bottom: 12px;
+      }
+
+      .card-panel-num {
+        font-size: 20px;
+      }
+    }
+  }
+}
+
+@media (max-width: 550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+.title-header{
+  text-align: center;
+  width: 100%;
+  font-size: 46px;
+  font-weight: 600;
+  line-height: 100px;
+}
+</style>