sunshine7058
/
ETL-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

ruoyi_test
sunshine7058 2024-04-24 22:24:35 +08:00
parent 5bccf3401b
commit 3897ad5b53
5 changed files with 166 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/api/data/source.js
View File

@ -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'
})
}

150
src/views/data/assetStructure/dashboard/OverallAssetStructure.vue
View File

@ -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="表备注">用户表</el-descriptions-item>
<el-descriptions-item label="数据量">12536</el-descriptions-item>
<el-descriptions-item label="表名称">{{ childrenParams.name }}</el-descriptions-item>
<el-descriptions-item label="表备注">{{ childrenParams.annotation }}</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,38 +17,36 @@
<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="是否主键" >
<el-table :data="tableDataList" 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}}
{{ 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="是否为空" >
<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}}
{{ scope.row.isNull }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="defaultValue" label="默认值" />
<el-table-column prop="isDict" label="是否字典" >
<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}}
{{ scope.row.isDict }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="dictKey" label="映射字典" >
<el-table-column prop="dictKey" label="映射字典">
<template slot-scope="scope">
<el-popover
v-if="scope.row.isDict === 'Y'"
@ -63,11 +61,11 @@
<el-table-column property="label" label="字典标签"/>
<el-table-column property="value" label="字典值"/>
</el-table>
<el-tag slot="reference">{{scope.row.dictKey}}</el-tag>
<el-tag slot="reference">{{ scope.row.dictKey }}</el-tag>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="id" label="操作" >
<el-table-column prop="id" label="操作">
<template slot-scope="scope">
<el-button type="text" @click="update(scope.row)">编辑</el-button>
</template>
@ -92,7 +90,7 @@
<el-col :span="12">
<el-form-item label="是否主键">
<el-tag size="small" :type="form.isPrimaryKey === 'Y' ? 'success' : 'danger'">
{{form.isPrimaryKey}}
{{ form.isPrimaryKey }}
</el-tag>
</el-form-item>
</el-col>
@ -118,7 +116,7 @@
<el-col :span="12">
<el-form-item label="是否为空">
<el-tag size="small" :type="form.isNull === 'Y' ? 'success' : 'danger'">
{{form.isNull}}
{{ form.isNull }}
</el-tag>
</el-form-item>
</el-col>
@ -172,93 +170,51 @@
</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: [
{
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: "-",
}, ],
tableDataList: [],
form: {},
formStatus: false,
dictMap: {
"system_sex": [
{ label: '男', val: '1', isEdit: false },
{ label: '女', val: '2', isEdit: false },
{ label: '未知', val: '0', isEdit: false },
{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 }
{label: '是', val: '1', isEdit: false},
{label: '否', val: '0', isEdit: false}
],
}
}
},
methods: {
init() {
selectTableData(this.childrenParams.id).then(res => {
this.tableDataList = res.data
})
},
update(row) {
this.form = row;
this.formStatus = true;

72
src/views/data/assetStructure/dashboard/OverallSpecificAssets.vue
View File

@ -1,7 +1,7 @@
<template>
<el-row :gutter="40" class="panel-group">
<div class="title-header">
{{title}} - 资产结构概述
{{ title }} - 资产结构概述
</div>
<el-col :sm="12" :xs="12" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('messages')">
@ -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>
@ -60,22 +60,23 @@
<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>
<span>{{ key }}</span>
<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="标签">
<template slot-scope="scope">
<span v-if="!scope.row.isEdit">{{scope.row.label}}</span>
<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>
<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>
@ -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-tab-pane label="sys_user(用户表)" name="first">
<overall-asset-structure/>
<el-tabs v-model="activeName" type="border-card" @tab-click="checkTableName">
<el-tab-pane v-for="children in childrenList" :label="children.name+'('+children.annotation+')'"
: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,19 +139,20 @@ export default {
},
data() {
return {
activeName: 'first',
activeName: null,
dictAddName: null,
dictMap: {
"性别(system_sex)": [
{ label: '男', val: '1', isEdit: false },
{ label: '女', val: '2', isEdit: false },
{ label: '未知', val: '0', isEdit: false },
{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 }
{label: '是', val: '1', isEdit: false},
{label: '否', val: '0', isEdit: false}
],
}
},
childrenParams: null
}
},
components: {
@ -149,15 +160,24 @@ export default {
CountTo
},
methods: {
editConfirm(row){
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('字典标签或字典值，不可为空');
return;
}
row.isEdit = false;
},
addDict(){
if (!this.dictAddName){
addDict() {
if (!this.dictAddName) {
this.$message.error('数据字典，不可为空');
return;
}
@ -167,6 +187,9 @@ export default {
handleSetLineChartData(type) {
this.$emit('handleSetLineChartData', type)
}
},
created() {
this.init()
}
}
</script>
@ -279,7 +302,8 @@ export default {
}
}
}
.title-header{
.title-header {
text-align: center;
width: 100%;
font-size: 46px;

63
src/views/data/assetStructure/index.vue
View File

@ -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-asset-structure v-if="showAssets === 'dataTable'" :title="title"/>
<overall-specific-assets v-if="showAssets === 'dataSource'" :childrenList="childrenList" :count="count"
: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,25 +75,32 @@ export default {
console.log(resolve)
if (node.level === 0) return resolve(this.assetStructureList);
const {data} = node;
getChildrenList(data).then(res => {
console.log(res)
this.childrenList = res.data
resolve(this.childrenList)
this.childrenList.forEach(children => {
this.showTable.assetStructure = data
this.showTable.tableName = children.name
addTableData(this.showTable).then(res => {
// console.log(res)
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
resolve(this.childrenList)
this.childrenList.forEach(children => {
this.showTable.assetStructure = data
this.showTable.tableName = children.name
addTableData(this.showTable).then(res => {
// 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 => {

18
src/views/data/source/index.vue
View File

@ -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"
:key="databaseType.databaseId"
:label="databaseType.databaseName"
:value=" databaseType.databaseId"></el-option>
v-for="dataType in databaseTypeList"
:key="dataType.databaseId"
:label="dataType.databaseName"
: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,