feat: 增加了查看数据资产的功能(差字典的操作)

将表结构完善,代码生成了数据资产相关表的代码生成,完成了数据资产的基本信息和详细信息的查看,也完成了数据接入的同步
master
yaoxin 2024-04-22 20:27:49 +08:00
parent 157c051a5e
commit 006e1f246b
6 changed files with 718 additions and 62 deletions

View File

@ -9,6 +9,22 @@ export function listSource(query) {
})
}
export function dataAssetList(data) {
return request({
url: '/etl/source/DataAssetList',
method: 'post',
data
})
}
export function assetModelList(data) {
return request({
url: '/etl/source/AssetModelList',
method: 'post',
data
})
}
export function assetsList(data) {
return request({
url: '/etl/source/AssetsList',
@ -17,6 +33,14 @@ export function assetsList(data) {
})
}
export function synchronousData(data) {
return request({
url: '/etl/source/SynchronousData',
method: 'post',
data
})
}
export function structureList(data) {
return request({
url: '/etl/source/StructureList',

View File

@ -0,0 +1,174 @@
<template>
<div>
<el-card>
<div slot="header" class="clearfix">
<span>资产模型基本信息</span>
</div>
<el-descriptions border :column="2">
<el-descriptions-item label="表名称">{{title.tableName}}</el-descriptions-item>
<el-descriptions-item label="表备注">{{title.tableComment}}</el-descriptions-item>
<el-descriptions-item label="数据量">{{title.tableCount}}</el-descriptions-item>
<el-descriptions-item label="是否核心">
<el-tag size="small"></el-tag>
</el-descriptions-item>
</el-descriptions>
</el-card>
<el-card style=" margin-top: 20px;">
<div slot="header" class="clearfix">
<span>资产模型详细信息</span>
</div>
<el-table
:data="tableData"
style="width: 100%;">
<el-table-column prop="name" label="名称" />
<el-table-column prop="comment" label="注释" />
<el-table-column prop="isPrimaryKey" label="是否主键" >
<template slot-scope="scope">
<el-tag size="small" :type="scope.row.isPrimaryKey === 'Y' ? 'success' : ''">
{{scope.row.isPrimaryKey}}
</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="isNull" label="是否为空" >
<template slot-scope="scope">
<el-tag size="small" :type="scope.row.isNull === 'Y' ? 'success' : 'danger'">
{{scope.row.isNull}}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="defaultValue" label="默认值" />
<el-table-column prop="isDict" label="是否字典" >
<template slot-scope="scope">
<el-tag v-if="scope.row.isDict === 'Y'" size="small" type="success">
{{scope.row.isDict}}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="dictKey" label="映射字典" >
<template slot-scope="scope">
<el-popover
v-if="scope.row.isDict === 'Y'"
placement="left"
width="200"
trigger="hover">
<el-table :data="[
{ label: '男', value: '1' },
{ label: '女', value: '2' },
{ label: '未知', value: '0' },
]">
<el-table-column property="label" label="字典标签"/>
<el-table-column property="value" label="字典值"/>
</el-table>
<el-tag slot="reference">{{scope.row.dictKey}}</el-tag>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="id" label="操作" >
<template slot-scope="scope">
<el-button type="text">编辑</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
<script>
import {assetModelList} from "@/api/etl/source";
export default {
name: 'OverallAssetStructure',
watch:{
'title': {
handler(val) {
console.log(val)
assetModelList(val).then(res => {
this.tableData = res.data
})
},
immediate: true
}
},
props: {
title: {
}
},
data() {
return {
tableData: [
{
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: "-",
}, ]
}
},
}
</script>
<style scoped lang="scss">
</style>

View File

@ -0,0 +1,185 @@
<template>
<el-row :gutter="40" class="panel-group">
<div class="title-header">
整体数据资产结构概述
</div>
<el-col :lg="8" :sm="12" :xs="12" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('newVisitis')">
<div class="card-panel-icon-wrapper icon-people">
<svg-icon class-name="card-panel-icon" icon-class="database"/>
</div>
<div class="card-panel-description">
<div class="card-panel-text">
数据接入
</div>
<count-to :duration="2600" :end-val="assetsCompute.dataSourceSum" :start-val="0" class="card-panel-num"/>
</div>
</div>
</el-col>
<el-col :lg="8" :sm="12" :xs="12" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('messages')">
<div class="card-panel-icon-wrapper icon-message">
<svg-icon class-name="card-panel-icon" icon-class="table"/>
</div>
<div class="card-panel-description">
<div class="card-panel-text">
资产模型
</div>
<count-to :duration="3000" :end-val="assetsCompute.assetsModuleSum" :start-val="0" class="card-panel-num"/>
</div>
</div>
</el-col>
<el-col :lg="8" :sm="12" :xs="12" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('purchases')">
<div class="card-panel-icon-wrapper icon-money">
<svg-icon class-name="card-panel-icon" icon-class="field"/>
</div>
<div class="card-panel-description">
<div class="card-panel-text">
数据模型
</div>
<count-to :duration="3200" :end-val="assetsCompute.dataModuleSum" :start-val="0" class="card-panel-num"/>
</div>
</div>
</el-col>
</el-row>
</template>
<script>
import CountTo from 'vue-count-to'
export default {
props: {
assetsCompute: {
assetsModuleSum: 0,
dataModuleSum: 0,
dataSourceSum: 0
}
},
components: {
CountTo
},
methods: {
handleSetLineChartData(type) {
this.$emit('handleSetLineChartData', type)
}
}
}
</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>

View File

@ -0,0 +1,203 @@
<template>
<el-row :gutter="40" class="panel-group">
<div class="title-header">
{{title.dataSourceName+'('+title.databaseName+'-'+title.systemName+')'}} - 资产结构概述
</div>
<el-col :sm="12" :xs="12" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('messages')">
<div class="card-panel-icon-wrapper icon-message">
<svg-icon class-name="card-panel-icon" icon-class="table"/>
</div>
<div class="card-panel-description">
<div class="card-panel-text">
资产模型
</div>
<count-to :duration="3000" :end-val="assetModel" :start-val="0" class="card-panel-num"/>
</div>
</div>
</el-col>
<el-col :sm="12" :xs="12" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('purchases')">
<div class="card-panel-icon-wrapper icon-money">
<svg-icon class-name="card-panel-icon" icon-class="field"/>
</div>
<div class="card-panel-description">
<div class="card-panel-text">
数据模型
</div>
<count-to :duration="3200" :end-val="dataModel" :start-val="0" class="card-panel-num"/>
</div>
</div>
</el-col>
<el-col :span="24">
<el-tabs v-model="activeName" type="border-card">
<el-tab-pane v-for="tableAsset in title.tableList" :label="tableAsset.tableName+'('+tableAsset.tableComment+')'" :name="tableAsset.tableName">
<overall-asset-structure v-if="activeName == tableAsset.tableName" :title="tableAsset"/>
</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
</template>
<script>
import CountTo from 'vue-count-to'
import OverallAssetStructure from './OverallAssetStructure.vue'
export default {
watch:{
'title':{
handler(val){
console.log(val)
this.activeName = val.tableList[0].tableName
this.assetModel = 0
this.dataModel = 0
val.tableList.forEach(table => {
if (table.tableCount!=null){
this.dataModel = parseInt(this.dataModel) + parseInt(table.tableCount);
}
if (table.fields!=null){
this.assetModel = parseInt(this.assetModel) + parseInt(table.fields);
}
})
}
}
},
props: {
title:{}
},
data() {
return {
activeName: '',
assetModel: 0,
dataModel: 0
}
},
components: {
OverallAssetStructure,
CountTo
},
methods: {
handleSetLineChartData(type) {
this.$emit('handleSetLineChartData', type)
}
}
}
</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>

View File

@ -1,76 +1,89 @@
<template>
<div>
<el-container style="height: 80%; border: 1px solid #eee">
<el-aside width="300px" style="background-color: rgb(238, 241, 246)">
<el-aside width="400px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu :index="source.id" v-for="source in sourceList">
<template slot="title"><i class="el-icon-message"></i>{{source.dataSourceName}}</template>
<el-menu-item-group>
<template v-if="source.tableList==null" slot="title"></template>
<el-menu-item v-for="(tableName,index) in source.tableList" :index="source.id-index" @click="selectAssets(source,tableName)">{{tableName}}</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-tree :data="sourceList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</el-menu>
</el-aside>
<el-container>
<el-main>
<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="dialogTableVisible = true">数据结构</el-button>
<el-button style="float: right;margin-top: 20px" @click="sql()"></el-button>
<el-main style="height: 100%">
<el-tabs v-model="activeName">
<el-tab-pane label="资产结构" name="structure">
<OverallAssets v-if="showAssets == null" :assets-compute="assetsCompute"/>
<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">
<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-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>
<el-dialog title="数据结构" :visible.sync="dialogTableVisible">
<el-table :data="tableAssets">
<el-table-column property="field" label="字段名" width="150"></el-table-column>
<el-table-column property="type" label="类型" width="150"></el-table-column>
<el-table-column property="null" label="是否为空" width="150"></el-table-column>
<el-table-column property="key" label="键" width="150"></el-table-column>
<el-table-column property="default" label="默认值" width="150"></el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogTableVisible = false"> </el-button>
<el-button type="primary" @click="dialogTableVisible = false"> </el-button>
</div>
</el-dialog>
<!-- <el-dialog title="数据结构" :visible.sync="dialogTableVisible">-->
<!-- <el-table :data="tableAssets">-->
<!-- <el-table-column property="field" label="字段名" width="150"></el-table-column>-->
<!-- <el-table-column property="type" label="类型" width="150"></el-table-column>-->
<!-- <el-table-column property="null" label="是否为空" width="150"></el-table-column>-->
<!-- <el-table-column property="key" label="键" width="150"></el-table-column>-->
<!-- <el-table-column property="default" label="默认值" width="150"></el-table-column>-->
<!-- </el-table>-->
<!-- <div slot="footer" class="dialog-footer">-->
<!-- <el-button @click="dialogTableVisible = false"> </el-button>-->
<!-- <el-button type="primary" @click="dialogTableVisible = false"> </el-button>-->
<!-- </div>-->
<!-- </el-dialog>-->
</div>
</template>
<script>
//jsjsjson,
//import from ',
import {assetsList, listSource, structureList} from "@/api/etl/source";
import {assetModelList, assetsList, dataAssetList, listSource, structureList} from "@/api/etl/source";
import OverallAssets from "@/views/etl/assets/dashboard/OverallAssets.vue";
import OverallSpecificAssets from "@/views/etl/assets/dashboard/OverallSpecificAssets.vue";
import OverallAssetStructure from "@/views/etl/assets/dashboard/OverallAssetStructure.vue";
export default {
//import使"
components: {},
components: {OverallAssetStructure, OverallSpecificAssets, OverallAssets},
props: {},
data() {
return {
dialogTableVisible: false,
assetsCompute:{
assetsModuleSum: 0,
dataModuleSum: 0,
dataSourceSum: 0
},
showAssets: null,
title: {},
activeName: 'structure',
queryParams: {
pageNum: 1,
pageSize: 10,
@ -84,6 +97,11 @@ export default {
assetsList:[],
structureList:[],
tableAssets:[],
defaultProps: {
children: 'tableList',
label: 'label'
},
sourceData:{},
source: {
sql: ''
}
@ -95,29 +113,51 @@ export default {
watch: {},
//",
methods: {
test(data){
this.sourceData = data
},
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
})
},
selectAssets(source,tableName) {
this.structureList = []
this.assetsList = []
this.source.sql=''
source.tableName = tableName
this.source = source
assetsList(source).then(res => {
console.log(res)
this.assetsList = res.data.structure
this.tableAssets = res.data.tableAssets
})
},
getList() {
this.loading = true;
this.assetsCompute={
assetsModuleSum: 0,
dataModuleSum: 0,
dataSourceSum: 0
}
listSource(this.queryParams).then(response => {
this.sourceList = response.data.rows;
this.total = response.data.total;
console.log(this.sourceList)
this.sourceList.forEach(source => {
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;
});
}
},

View File

@ -86,7 +86,14 @@
type="text"
icon="el-icon-edit"
@click="testConnection(scope.row)"
>测试连接</el-button><el-button
>测试连接</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="synchronousData(scope.row)"
>同步资产</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@ -256,7 +263,15 @@
</template>
<script>
import {listSource, getSource, delSource, addSource, updateSource, testConnection} from "@/api/etl/source";
import {
listSource,
getSource,
delSource,
addSource,
updateSource,
testConnection,
synchronousData
} from "@/api/etl/source";
export default {
name: "Source",
@ -337,6 +352,21 @@ export default {
this.getList();
},
methods: {
synchronousData(data) {
synchronousData(data).then(res => {
if (res.code === 200) {
this.$message({
message: "同步成功",
type: "success"
});
} else {
this.$message({
message: "同步失败",
type: "error"
});
}
})
},
//
addParam(){
this.dataSourceParamList.push({