etl_jiangpeng_qian/src/views/etl/assets/index.vue

<template>
  <div>
    <el-container style="height: 80%; border: 1px solid #eee">
      <el-aside width="300px" style="background-color: rgb(238, 241, 246)">
        <el-tree :data="sourceList"
                 @node-click="handleNodeClick"
                 :props="defaultProps">
          </el-tree>
      </el-aside>
      <el-container>
        <el-main>
          <el-tabs v-model="activeName">
            <el-tab-pane label="资产结构" name="structure">
              <OverallAssets v-if="showAssets == null"/>
              <overall-specific-assets v-if="showAssets === 'dataSource'" :title="title"/>
              <overall-asset-structure v-if="showAssets === 'dataTable'" :title="title"/>
            </el-tab-pane>
            <el-tab-pane label="资产数据" name="data">
              <el-card style="height: 280px">
                <div slot="header" class="clearfix">
                  <span>查询语句</span>
                </div>
                <el-input type="textarea" v-model="source.sql" style="width: 1080px;" :rows="6"></el-input>
                <el-button style="float: right;margin-top: 20px" @click="sql()">查询</el-button>

              </el-card>
              <br>
              <el-card>
                <div slot="header" class="clearfix">
                  <span>数据资产</span>
                </div>
                <el-table :data="structureList" v-if="structureList!=null">
                  <el-table-column v-for="(assets,index) in assetsList" :label="index+' ('+assets+')'" width="140">
                    <template slot-scope="scope">
                      {{scope.row[index].value}}
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>

            </el-tab-pane>
          </el-tabs>

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {dataAssetList, listDatasource, structureList} from "@/api/etl/datasource";
import OverallSpecificAssets from "@/views/etl/assets/dashboard/OverallSpecificAssets.vue";
import OverallAssets from "@/views/etl/assets/dashboard/OverallAssets.vue";
import OverallAssetStructure from "@/views/etl/assets/dashboard/OverallAssetStructure.vue";
export default {
  components: { OverallSpecificAssets, OverallAssets,OverallAssetStructure},

  //import引入的组件需要注入到对象中才能使用"
  props: {},
  data() {
    return {
      mainHeight: window.innerHeight - 85,
      assetsCompute:{
        assetsModuleSum: 0,
        dataModuleSum: 0,
        dataSourceSum: 0
      },
      showAssets: null,
      title: {},
      activeName: 'structure',
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dataSourceName: null,
        linkAddress: null
      },
      // 总条数
      total: 0,
      // 【请填写功能名称】表格数据
      datasourceList:[

      ],
      sourceList: [],
      assetsList:[],
      structureList:[],
      tableAssets:[],
      defaultProps: {
        children: 'tableList',
        label: 'label'
      },
      sourceData:{},
      source:{
        sql:''
      },
      statisticsInfo:{}
    };
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {

    handleNodeClick(data) {
      if (data.dataType === 'dataSource'){
        dataAssetList(data).then(res => {
          res.data.forEach(table => {
            table.dataType = "dataTable"
            table.label=table.tableName+"-"+table.tableComment+"("+table.tableCount+"条)"
          })
          data.tableList = res.data
          this.sourceList[this.sourceList.indexOf(data)].tableList = res.data
          this.title = data
        })

      }else{
        this.title= data
      }
      this.showAssets = data.dataType
    },
    sql(){
      structureList(this.source).then(res => {
        this.structureList = res.data.kvtList
      })
    },
    getList() {
      listDatasource(this.queryParams).then(response => {
        this.sourceList = response.data.rows;
        console.log(this.sourceList)
        this.sourceList.forEach(source => {
          if (source.type=='PostGre'){
            source.label=source.dataSourceName+'('+source.databaseName+'-'+source.modeName+'-'+source.systemName+')'
          }else{
            source.label=source.dataSourceName+'('+source.databaseName+'-'+source.systemName+')'
          }

          source.dataType = 'dataSource'
          if (source.tableList!=null){
            source.tableList.forEach(table => {
              table.label = table.tableName+'-'+table.tableComment+'('+table.tableCount+'条)'
              table.dataType = 'dataTable'
            })
          }
        })
        this.total = response.data.total;
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.getList()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  }
};
</script>
<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>