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() { export function getAssetList() {
return request({ return request({
url: '/source/data/getAssetList', url: '/data/source/getAssetList',
method: 'get' method: 'get'
}) })
} }
@ -62,7 +62,7 @@ export function getAssetList() {
// 查询数据库下的表 // 查询数据库下的表
export function getChildrenList(data) { export function getChildrenList(data) {
return request({ return request({
url: '/source/data/getChildrenList', url: '/data/source/getChildrenList',
method: 'post', method: 'post',
data: data data: data
}) })
@ -71,7 +71,7 @@ export function getChildrenList(data) {
// 添加表结构 // 添加表结构
export function addTableData(data) { export function addTableData(data) {
return request({ return request({
url: '/source/data/addTableData', url: '/data/source/addTableData',
method: 'post', method: 'post',
data: data data: data
}) })
@ -80,7 +80,7 @@ export function addTableData(data) {
// 查询表结构 // 查询表结构
export function selectTableList() { export function selectTableList() {
return request({ return request({
url: '/source/data/selectTableList', url: '/data/source/selectTableList',
method: 'get' method: 'get'
}) })
} }
@ -88,7 +88,14 @@ export function selectTableList() {
// 查询表数据总数 // 查询表数据总数
export function selectTableDataCount() { export function selectTableDataCount() {
return request({ 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' method: 'get'
}) })
} }

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

@ -1,13 +1,13 @@
<template> <template>
<div> <div v-if="childrenParams != null">
<el-card> <el-card>
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>资产模型基本信息</span> <span>资产模型基本信息</span>
</div> </div>
<el-descriptions border :column="2"> <el-descriptions border :column="2">
<el-descriptions-item label="表名称">sys_user</el-descriptions-item> <el-descriptions-item label="表名称">{{ childrenParams.name }}</el-descriptions-item>
<el-descriptions-item label="表备注">用户表</el-descriptions-item> <el-descriptions-item label="表备注">{{ childrenParams.annotation }}</el-descriptions-item>
<el-descriptions-item label="数据量">12536</el-descriptions-item> <el-descriptions-item label="数据量">{{ childrenParams.dataTotal }}</el-descriptions-item>
<el-descriptions-item label="是否核心"> <el-descriptions-item label="是否核心">
<el-tag size="small">是</el-tag> <el-tag size="small">是</el-tag>
</el-descriptions-item> </el-descriptions-item>
@ -17,38 +17,36 @@
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>资产模型详细信息</span> <span>资产模型详细信息</span>
</div> </div>
<el-table <el-table :data="tableDataList" style="width: 100%;">
:data="tableData" <el-table-column prop="name" label="名称"/>
style="width: 100%;"> <el-table-column prop="comment" label="注释"/>
<el-table-column prop="name" label="名称" /> <el-table-column prop="isPrimaryKey" label="是否主键">
<el-table-column prop="comment" label="注释" />
<el-table-column prop="isPrimaryKey" label="是否主键" >
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag size="small" :type="scope.row.isPrimaryKey === 'Y' ? 'success' : ''"> <el-tag size="small" :type="scope.row.isPrimaryKey === 'Y' ? 'success' : ''">
{{scope.row.isPrimaryKey}} {{ scope.row.isPrimaryKey }}
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="type" label="类型" /> <el-table-column prop="type" label="类型"/>
<el-table-column prop="mappingType" label="映射类型" /> <el-table-column prop="mappingType" label="映射类型"/>
<el-table-column prop="length" label="长度" /> <el-table-column prop="length" label="长度"/>
<el-table-column prop="decimalPlaces" label="小数位" /> <el-table-column prop="decimalPlaces" label="小数位"/>
<el-table-column prop="isNull" label="是否为空" > <el-table-column prop="isNull" label="是否为空">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag size="small" :type="scope.row.isNull === 'Y' ? 'success' : 'danger'"> <el-tag size="small" :type="scope.row.isNull === 'Y' ? 'success' : 'danger'">
{{scope.row.isNull}} {{ scope.row.isNull }}
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="defaultValue" label="默认值" /> <el-table-column prop="defaultValue" label="默认值"/>
<el-table-column prop="isDict" label="是否字典" > <el-table-column prop="isDict" label="是否字典">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag v-if="scope.row.isDict === 'Y'" size="small" type="success"> <el-tag v-if="scope.row.isDict === 'Y'" size="small" type="success">
{{scope.row.isDict}} {{ scope.row.isDict }}
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="dictKey" label="映射字典" > <el-table-column prop="dictKey" label="映射字典">
<template slot-scope="scope"> <template slot-scope="scope">
<el-popover <el-popover
v-if="scope.row.isDict === 'Y'" v-if="scope.row.isDict === 'Y'"
@ -63,11 +61,11 @@
<el-table-column property="label" label="字典标签"/> <el-table-column property="label" label="字典标签"/>
<el-table-column property="value" label="字典值"/> <el-table-column property="value" label="字典值"/>
</el-table> </el-table>
<el-tag slot="reference">{{scope.row.dictKey}}</el-tag> <el-tag slot="reference">{{ scope.row.dictKey }}</el-tag>
</el-popover> </el-popover>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="id" label="操作" > <el-table-column prop="id" label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" @click="update(scope.row)">编辑</el-button> <el-button type="text" @click="update(scope.row)">编辑</el-button>
</template> </template>
@ -92,7 +90,7 @@
<el-col :span="12"> <el-col :span="12">
<el-form-item label="是否主键"> <el-form-item label="是否主键">
<el-tag size="small" :type="form.isPrimaryKey === 'Y' ? 'success' : 'danger'"> <el-tag size="small" :type="form.isPrimaryKey === 'Y' ? 'success' : 'danger'">
{{form.isPrimaryKey}} {{ form.isPrimaryKey }}
</el-tag> </el-tag>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -118,7 +116,7 @@
<el-col :span="12"> <el-col :span="12">
<el-form-item label="是否为空"> <el-form-item label="是否为空">
<el-tag size="small" :type="form.isNull === 'Y' ? 'success' : 'danger'"> <el-tag size="small" :type="form.isNull === 'Y' ? 'success' : 'danger'">
{{form.isNull}} {{ form.isNull }}
</el-tag> </el-tag>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -172,93 +170,51 @@
</div> </div>
</template> </template>
<script> <script>
import {selectTableData} from "@/api/data/source";
export default { export default {
name: 'OverallAssetStructure', name: 'OverallAssetStructure',
props: {
childrenParams: {
type: Object,
default: null
}
},
watch: {
childrenParams: {
handler(val) {
if (val != null) {
this.init()
}
},
deep: true,
immediate: true
}
},
data() { data() {
return { return {
tableData: [ tableDataList: [],
{
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: "-",
}, ],
form: {}, form: {},
formStatus: false, formStatus: false,
dictMap: { dictMap: {
"system_sex": [ "system_sex": [
{ label: '男', val: '1', isEdit: false }, {label: '男', val: '1', isEdit: false},
{ label: '女', val: '2', isEdit: false }, {label: '女', val: '2', isEdit: false},
{ label: '未知', val: '0', isEdit: false }, {label: '未知', val: '0', isEdit: false},
], ],
"system_y_n": [ "system_y_n": [
{ label: '是', val: '1', isEdit: false }, {label: '是', val: '1', isEdit: false},
{ label: '否', val: '0', isEdit: false } {label: '否', val: '0', isEdit: false}
], ],
} }
} }
}, },
methods: { methods: {
init() {
selectTableData(this.childrenParams.id).then(res => {
this.tableDataList = res.data
})
},
update(row) { update(row) {
this.form = row; this.form = row;
this.formStatus = true; this.formStatus = true;

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

@ -1,7 +1,7 @@
<template> <template>
<el-row :gutter="40" class="panel-group"> <el-row :gutter="40" class="panel-group">
<div class="title-header"> <div class="title-header">
{{title}} - 资产结构概述 {{ title }} - 资产结构概述
</div> </div>
<el-col :sm="12" :xs="12" class="card-panel-col"> <el-col :sm="12" :xs="12" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('messages')"> <div class="card-panel" @click="handleSetLineChartData('messages')">
@ -12,7 +12,7 @@
<div class="card-panel-text"> <div class="card-panel-text">
资产模型 资产模型
</div> </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>
</div> </div>
</el-col> </el-col>
@ -25,7 +25,7 @@
<div class="card-panel-text"> <div class="card-panel-text">
数据模型 数据模型
</div> </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>
</div> </div>
</el-col> </el-col>
@ -60,22 +60,23 @@
<el-col v-for="(val,key) in dictMap" :md="8" :sm="24" :xs="12"> <el-col v-for="(val,key) in dictMap" :md="8" :sm="24" :xs="12">
<el-card class="box-card" style="height: 300px"> <el-card class="box-card" style="height: 300px">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>{{key}}</span> <span>{{ key }}</span>
<el-button style="float: right; padding: 3px 0" <el-button style="float: right; padding: 3px 0"
type="text" type="text"
@click="val.push({ label: null, val: null, isEdit: true })" @click="val.push({ label: null, val: null, isEdit: true })"
>新增</el-button> >新增
</el-button>
</div> </div>
<el-table :data="val" style="width: 100%" height="280px"> <el-table :data="val" style="width: 100%" height="280px">
<el-table-column prop="label" label="标签"> <el-table-column prop="label" label="标签">
<template slot-scope="scope"> <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> <el-input v-if="scope.row.isEdit" v-model="scope.row.label" size="mini"></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="val" label="值"> <el-table-column prop="val" label="值">
<template slot-scope="scope"> <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> <el-input v-if="scope.row.isEdit" v-model="scope.row.val" size="mini"></el-input>
</template> </template>
</el-table-column> </el-table-column>
@ -87,14 +88,16 @@
type="text" type="text"
icon="el-icon-edit" icon="el-icon-edit"
@click="scope.row.isEdit = true" @click="scope.row.isEdit = true"
>修改</el-button> >修改
</el-button>
<el-button <el-button
v-if="scope.row.isEdit" v-if="scope.row.isEdit"
@click="editConfirm(scope.row)" @click="editConfirm(scope.row)"
size="mini" size="mini"
type="text" type="text"
icon="el-icon-finished" icon="el-icon-finished"
>确定</el-button> >确定
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -105,11 +108,11 @@
</el-col> </el-col>
<el-col :span="24" style="margin-top: 20px"> <el-col :span="24" style="margin-top: 20px">
<el-tabs v-model="activeName" type="border-card"> <el-tabs v-model="activeName" type="border-card" @tab-click="checkTableName">
<el-tab-pane label="sys_user(用户表)" name="first"> <el-tab-pane v-for="children in childrenList" :label="children.name+'('+children.annotation+')'"
<overall-asset-structure/> :name="children.name">
<overall-asset-structure v-if="children.name === childrenParams.name" :children-params="childrenParams"/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="sys_dept(部门表)" name="second">sys_dept(部门表)</el-tab-pane>
</el-tabs> </el-tabs>
</el-col> </el-col>
</el-row> </el-row>
@ -119,9 +122,16 @@
<script> <script>
import CountTo from 'vue-count-to' import CountTo from 'vue-count-to'
import OverallAssetStructure from './OverallAssetStructure.vue' import OverallAssetStructure from './OverallAssetStructure.vue'
import {getDictDataList, getDictTypeList, selectDictTypeList, selectTableData} from "@/api/data/source";
export default { export default {
props: { props: {
count:{
assetStructureCount: null,
assetStructureTableCount: null,
assetStructureTableDataCount: null
},
childrenList: [],
title: { title: {
type: String, type: String,
default: "-" default: "-"
@ -129,19 +139,20 @@ export default {
}, },
data() { data() {
return { return {
activeName: 'first', activeName: null,
dictAddName: null, dictAddName: null,
dictMap: { dictMap: {
"性别(system_sex)": [ "性别(system_sex)": [
{ label: '男', val: '1', isEdit: false }, {label: '男', val: '1', isEdit: false},
{ label: '女', val: '2', isEdit: false }, {label: '女', val: '2', isEdit: false},
{ label: '未知', val: '0', isEdit: false }, {label: '未知', val: '0', isEdit: false},
], ],
"开关(system_y_n)": [ "开关(system_y_n)": [
{ label: '是', val: '1', isEdit: false }, {label: '是', val: '1', isEdit: false},
{ label: '否', val: '0', isEdit: false } {label: '否', val: '0', isEdit: false}
], ],
} },
childrenParams: null
} }
}, },
components: { components: {
@ -149,15 +160,24 @@ export default {
CountTo CountTo
}, },
methods: { 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) { if (!row.label || !row.val) {
this.$message.error('字典标签或字典值，不可为空'); this.$message.error('字典标签或字典值，不可为空');
return; return;
} }
row.isEdit = false; row.isEdit = false;
}, },
addDict(){ addDict() {
if (!this.dictAddName){ if (!this.dictAddName) {
this.$message.error('数据字典，不可为空'); this.$message.error('数据字典，不可为空');
return; return;
} }
@ -167,6 +187,9 @@ export default {
handleSetLineChartData(type) { handleSetLineChartData(type) {
this.$emit('handleSetLineChartData', type) this.$emit('handleSetLineChartData', type)
} }
},
created() {
this.init()
} }
} }
</script> </script>
@ -279,7 +302,8 @@ export default {
} }
} }
} }
.title-header{
.title-header {
text-align: center; text-align: center;
width: 100%; width: 100%;
font-size: 46px; font-size: 46px;

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

@ -12,15 +12,20 @@
data.name + '(' + data.databaseName + '-' + data.systemName + ')' data.name + '(' + data.databaseName + '-' + data.systemName + ')'
}} }}
</div> </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> </div>
</el-tree> </el-tree>
</el-aside> </el-aside>
<el-container> <el-container>
<el-main> <el-main>
<OverallAssets v-if="showAssets == null" :count="count"/> <OverallAssets v-if="showAssets == null" :count="count"/>
<overall-specific-assets v-if="showAssets === 'dataSource'" :title="title"/> <overall-specific-assets v-if="showAssets === 'dataSource'" :childrenList="childrenList" :count="count"
<overall-asset-structure v-if="showAssets === 'dataTable'" :title="title"/> :title="title"/>
<overall-asset-structure v-if="showAssets === 'dataTable'" :children-params="childrenParams"
:tableDataList="tableDataList"/>
</el-main> </el-main>
</el-container> </el-container>
</el-container> </el-container>
@ -29,7 +34,13 @@
import OverallAssets from './dashboard/OverallAssets.vue' import OverallAssets from './dashboard/OverallAssets.vue'
import OverallSpecificAssets from './dashboard/OverallSpecificAssets.vue' import OverallSpecificAssets from './dashboard/OverallSpecificAssets.vue'
import OverallAssetStructure from './dashboard/OverallAssetStructure.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 { export default {
name: 'assetStructure', name: 'assetStructure',
@ -44,6 +55,7 @@ export default {
assetStructureList: [], assetStructureList: [],
childrenList: [], childrenList: [],
tableDataList: [], tableDataList: [],
childrenParams: null,
showAssets: null, showAssets: null,
title: null, title: null,
showTable: { showTable: {
@ -63,6 +75,12 @@ export default {
console.log(resolve) console.log(resolve)
if (node.level === 0) return resolve(this.assetStructureList); if (node.level === 0) return resolve(this.assetStructureList);
const {data} = node; const {data} = node;
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 => { getChildrenList(data).then(res => {
console.log(res) console.log(res)
this.childrenList = res.data this.childrenList = res.data
@ -74,14 +92,15 @@ export default {
// console.log(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') { if (data.type === 'dataTable') {
console.log(data) console.log(data)
selectTableData(data.id).then(res => {
this.tableDataList = res.data
})
this.childrenParams = data
return resolve([]) return resolve([])
} }
setTimeout(() => { setTimeout(() => {
@ -91,6 +110,12 @@ export default {
showAssetsFun(data) { showAssetsFun(data) {
this.title = data.name + '(' + data.databaseName + '-' + data.systemName + ')' this.title = data.name + '(' + data.databaseName + '-' + data.systemName + ')'
this.showAssets = data.type; this.showAssets = data.type;
if (data.type === "dataTable") {
this.childrenParams = data
selectTableData(data.id).then(res => {
this.tableDataList = res.data
})
}
}, },
getAssetStructureList() { getAssetStructureList() {
getAssetList().then(res => { 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="name" />
<el-table-column label="数据来源系统名称" align="center" prop="systemName" /> <el-table-column label="数据来源系统名称" align="center" prop="systemName" />
<el-table-column label="数据库名称" align="center" prop="databaseName" /> <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="host" />
<el-table-column label="端口号" align="center" prop="port" /> <el-table-column label="端口号" align="center" prop="port" />
<el-table-column label="用户名" align="center" prop="user" /> <el-table-column label="用户名" align="center" prop="user" />
@ -183,12 +183,12 @@
<el-row> <el-row>
<el-col :md="12" :sm="24"> <el-col :md="12" :sm="24">
<el-form-item label="数据接入类型" prop="type"> <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 <el-option
v-for="databaseType in databaseTypeList" v-for="dataType in databaseTypeList"
:key="databaseType.databaseId" :key="dataType.databaseId"
:label="databaseType.databaseName" :label="dataType.databaseName"
:value=" databaseType.databaseId"></el-option> :value=" dataType.databaseName"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -349,8 +349,8 @@ export default {
}, },
//连接 //连接
handleconnect(row){ handleconnect(row){
const id = row.databaseType
getConnect(id).then(response=>{ getConnect(row).then(response=>{
console.log(response) console.log(response)
if (response.data){ if (response.data){
this.$message.success("测试成功") this.$message.success("测试成功")
@ -405,7 +405,7 @@ getDataBaseType() {
name: null, name: null,
systemName: null, systemName: null,
databaseName: null, databaseName: null,
databaseType: null, dataType: null,
host: null, host: null,
port: null, port: null,
user: null, user: null,