feat:数据接入(优化)

master_fei
Yunfei Du 2024-05-09 21:02:35 +08:00
parent ae1a51753c
commit 80f03dce66
3 changed files with 283 additions and 348 deletions

View File

@ -9,6 +9,17 @@ export function listSource(query) {
})
}
// 编辑数据源(添加/修改)
export function editDataSource(data) {
return request({
url: '/dataSource/source/editDataSource',
method: 'post',
data
})
}
export function getList() {
return request({
url: '/dataSource/source/getList',

View File

@ -1,178 +1,109 @@
<template>
<div>
<el-container :style="{height: mainHeight + 'px'}">
<el-aside width="400px" style="background-color: rgb(238, 241, 246);height: 80%">
<el-tree style="background-color: white" :data="sourceList" :props="defaultProps" @node-click="handleNodeClick"></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 :style="{height: mainHeight + 'px'}">
<el-aside>
<el-tree :data="assetStructureList"
:expand-on-click-node="false"
:load="expandTable"
lazy
@node-click="showAssetsFun"
:props="defaultProps">
<div class="custom-tree-node" slot-scope="{ node, data }">
<div v-if="data.type === 'dataSource'">{{ data.name + '('+data.databaseName + '-' + data.systemName+')' }}</div>
<div v-if="data.type === 'dataTable'">{{ data.name + '-'+data.nameAs + '(' + data.dataTotal+')' }}</div>
</div>
</el-tree>
</el-aside>
<el-container>
<el-main>
<OverallAssets v-if="showAssets == null"/>
<overall-specific-assets v-if="showAssets === 'dataSource'" :title="title"/>
<overall-asset-structure v-if="showAssets === 'dataTable'" :table-params="tableParams" :title="title"/>
</el-main>
</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>-->
</div>
</el-container>
</template>
<script>
//jsjsjson,
//import from ',
import {assetModelList, assetsList, dataAssetList, listSource, statisticsInfo, structureList} from "@/api/dataSource/source";
import OverallAssetStructure from "@/views/dataSource/assetStructure/dashboard/OverallAssetStructure.vue";
import OverallSpecificAssets from "@/views/dataSource/assetStructure/dashboard/OverallSpecificAssets.vue";
import OverallAssets from "@/views/dataSource/assetStructure/dashboard/OverallAssets.vue";
import OverallAssets from './dashboard/OverallAssets.vue'
import OverallSpecificAssets from './dashboard/OverallSpecificAssets.vue'
import OverallAssetStructure from './dashboard/OverallAssetStructure.vue'
import {dataAssetList, getList} from "@/api/dataSource/source";
export default {
//import使"
components: {OverallAssetStructure, OverallSpecificAssets, OverallAssets},
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,
//
sourceList: [],
assetsList:[],
structureList:[],
tableAssets:[],
defaultProps: {
children: 'tableList',
label: 'label'
},
sourceData:{},
source: {
sql: ''
},
statisticsInfo:{}
};
},
// data",
computed: {},
//data",
watch: {},
//",
methods: {
test(data){
this.sourceData = data
name: 'assetStructure',
components: { OverallAssetStructure, OverallSpecificAssets, OverallAssets },
data() {
return {
mainHeight: window.innerHeight - 85,
defaultProps: {
children: 'childrenList',
label: 'name'
},
handleNodeClick(data) {
this.source = 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 => {
console.log(res)
this.structureList = res.data.kvtList
})
},
getList() {
listSource({}).then(response => {
this.sourceList = response.data.rows;
this.sourceList.forEach(source => {
if (source.type=='PostGreSql'){
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() {
assetStructureList: [
],
childrenList: [
{
name: null,
nameAs: null,
dataTotal: 0,
type: null,
childrenList: []
},
],
showAssets: null,
title: null,
tableParams: null
}
};
},
created() {
this.getList()
},
methods: {
getList(){
getList().then(res => {
this.assetStructureList = res
})
},
expandTable( node, resolve){
console.log(node)
console.log("resolve"+resolve)
if (node.level === 0) return resolve(this.assetStructureList);
const {data} = node;
this.showAssets = data.type;
if (data.type === 'dataTable') {
this.tableParams = {
tableName: data.name,
tableAsName: data.nameAs
}
return resolve([])
}
setTimeout(() => {
// dataAssetList(data).then(res=>{
// console.log(res)
// this.childrenList=res.data.forEach(
// table=>{
// table.type="dataTable"
// }
// )
// })
resolve(this.childrenList)
}, 500);
},
showAssetsFun(data){
this.title = data.name + '('+data.databaseName + '-' + data.systemName+')'
this.showAssets = data.type;
if (data.type === "dataTable"){
this.tableParams = {
tableName: data.name,
tableAsName: data.nameAs
}
}
}
}
}
</script>
<style scoped>
<style scoped lang="scss">
.el-aside {
margin: 0;
padding: 0;

View File

@ -1,18 +1,26 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="数据源名称" prop="dataSourceName" label-width="100px">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="130px">
<el-form-item label="接入源名称" prop="name">
<el-input
v-model="queryParams.dataSourceName"
placeholder="请输入数据源名称"
v-model="queryParams.name"
placeholder="请输入接入源名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="数据源链接地址" prop="linkAddress" label-width="120px">
<el-form-item label="数据来源系统名称" prop="systemName">
<el-input
v-model="queryParams.linkAddress"
placeholder="请输入数据源链接地址"
v-model="queryParams.systemName"
placeholder="请输入数据来源系统名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="数据库名称" prop="databaseName">
<el-input
v-model="queryParams.databaseName"
placeholder="请输入数据库名称"
clearable
@keyup.enter.native="handleQuery"
/>
@ -31,7 +39,7 @@
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:source:add']"
v-hasPermi="['system:access:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
@ -42,7 +50,7 @@
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:source:remove']"
v-hasPermi="['system:access:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
@ -52,50 +60,50 @@
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['system:source:export']"
v-hasPermi="['system:access:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="sourceList" @selection-change="handleSelectionChange">
<el-table v-loading="loading" :data="accessList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="编号" align="center" prop="id" />
<el-table-column label="数据源名称" align="center" prop="dataSourceName" />
<el-table-column label="数据源连接地址" align="center" prop="linkAddress" />
<el-table-column label="数据源连接端口" align="center" prop="port" />
<el-table-column label="接入源名称" align="center" prop="name" />
<el-table-column label="数据来源系统名称" align="center" prop="systemName" />
<el-table-column label="主机地址" align="center" prop="host" />
<el-table-column label="主机地址" align="center" prop="port" />
<el-table-column label="数据接入类型" align="center" prop="type" />
<el-table-column label="数据库名称" align="center" prop="databaseName" />
<el-table-column label="连接用户名" align="center" prop="username" />
<el-table-column label="连接密码" align="center" prop="password" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="模式名称" align="center" prop="modeName" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="testConnection(scope.row)"
>测试连接</el-button>
icon="el-icon-connection"
@click="syncAssetsStructure(scope.row)"
v-hasPermi="['system:access:edit']"
>同步资产结构</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="synchronousData(scope.row)"
>同步资产</el-button>
icon="el-icon-video-play"
@click="testConnection(scope.row)"
v-hasPermi="['system:access:edit']"
>测试</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:source:edit']"
v-hasPermi="['system:access:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:source:remove']"
v-hasPermi="['system:access:remove']"
>删除</el-button>
</template>
</el-table-column>
@ -109,8 +117,8 @@
@pagination="getList"
/>
<!-- 添加或修改请填写功能名称对话框 -->
<el-dialog :title="title" :visible.sync="open" width="1150px" append-to-body>
<!-- 添加或修改数据接入对话框 -->
<el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="140px">
<el-card>
<div slot="header" class="clearfix">
@ -118,8 +126,8 @@
</div>
<el-row>
<el-col :md="12" :sm="24">
<el-form-item label="接入源名称" prop="dataSourceName">
<el-input v-model="form.dataSourceName" placeholder="请输入接入源名称" />
<el-form-item label="接入源名称" prop="name">
<el-input v-model="form.name" placeholder="请输入接入源名称" />
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
@ -130,8 +138,8 @@
</el-row>
<el-row>
<el-col :md="12" :sm="24">
<el-form-item label="主机IP" prop="linkAddress">
<el-input v-model="form.linkAddress" placeholder="请输入主机地址" />
<el-form-item label="主机地址" prop="host">
<el-input v-model="form.host" placeholder="请输入主机地址" />
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
@ -145,7 +153,7 @@
<el-form-item label="数据接入类型" prop="type">
<el-select style="width: 100%" v-model="form.type">
<el-option label="MySql" value="MySql">MySql</el-option>
<el-option label="PostGreSql" value="PostGreSql">PostGreSql</el-option>
<el-option label="Oracle" value="Oracle">Oracle</el-option>
</el-select>
</el-form-item>
</el-col>
@ -155,22 +163,15 @@
</el-form-item>
</el-col>
</el-row>
<el-row v-show="form.type === 'PostGreSql'">
<el-col :md="12" :sm="24">
<el-form-item label="模式名称" prop="modeName">
<el-input v-model="form.modeName" placeholder="模式名称" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :md="12" :sm="24">
<el-form-item label="连接用户名" prop="username">
<el-input v-model="form.username" placeholder="请输入连接用户名" />
<el-form-item label="数据库用户" prop="username">
<el-input v-model="form.username" placeholder="请输入数据库用户" />
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="连接密码" prop="password">
<el-input v-model="form.password" placeholder="请输入连接密码" />
<el-form-item label="数据库密码" prop="password">
<el-input v-model="form.password" placeholder="请输入数据库密码" />
</el-form-item>
</el-col>
</el-row>
@ -248,39 +249,21 @@
</el-form-item>
</el-card>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="testConnection(null)"> </el-button>
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listSource,
getSource,
delSource,
addSource,
updateSource,
testConnection,
synchronousData
} from "@/api/dataSource/source";
import {editDataSource, listSource, synchronousData, testConnection} from "@/api/dataSource/source";
export default {
watch:{
'form.type':{
handler(val) {
if(val != 'PostGre'){
this.form.modeName = ''
}
}
}
},
name: "Source",
name: "Access",
data() {
return {
//
@ -295,8 +278,8 @@ export default {
showSearch: true,
//
total: 0,
//
sourceList: [],
//
accessList: [],
//
title: "",
//
@ -305,44 +288,55 @@ export default {
queryParams: {
pageNum: 1,
pageSize: 10,
dataSourceName: null,
linkAddress: null
name: null,
systemName: null,
databaseName: null
},
//
form: {},
//
rules: {
dataSourceName: [
{required: true, message: "接入源名称不能为空", trigger: "blur"}
],
systemName: [
{required: true, message: "数据来源系统名称不能为空", trigger: "blur"}
],
type: [
{required: true, message: "数据接入类型不能为空", trigger: "blur"}
],
host: [
{required: true, message: "主机地址不能为空", trigger: "blur"}
],
port: [
{required: true, message: "主机地址不能为空", trigger: "blur"}
],
databaseName: [
{required: true, message: "数据库名称不能为空", trigger: "blur"}
],
initNum: [
{required: true, message: "初始连接数量不能为空", trigger: "blur"}
],
maxNum: [
{required: true, message: "最大连接数量不能为空", trigger: "blur"}
],
maxWaitTime: [
{required: true, message: "最大等待时间不能为空", trigger: "blur"}
],
maxWaitSize: [
{required: true, message: "最大等待次数不能为空", trigger: "blur"}
]
},
rules: {
name: [
{required: true, message: "接入源名称不能为空", trigger: "blur"}
],
systemName: [
{required: true, message: "数据来源系统名称不能为空", trigger: "blur"}
],
type: [
{required: true, message: "数据接入类型不能为空", trigger: "blur"}
],
host: [
{required: true, message: "主机地址不能为空", trigger: "blur"}
],
port: [
{required: true, message: "主机地址不能为空", trigger: "blur"}
],
databaseName: [
{required: true, message: "数据库名称不能为空", trigger: "blur"}
],
password: [
{required: true, message: "数据库密码不能为空", trigger: "blur"}
],
username: [
{required: true, message: "数据库用户不能为空", trigger: "blur"}
],
connectionParam: [
{required: true, message: "数据连接参数不能为空", trigger: "blur"}
],
initNum: [
{required: true, message: "初始连接数量不能为空", trigger: "blur"}
],
maxNum: [
{required: true, message: "最大连接数量不能为空", trigger: "blur"}
],
maxWaitTime: [
{required: true, message: "最大等待时间不能为空", trigger: "blur"}
],
maxWaitSize: [
{required: true, message: "最大等待次数不能为空", trigger: "blur"}
]
},
//
dataSourceParamList: [
{
name: null,
@ -355,18 +349,12 @@ 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"
});
syncAssetsStructure(row){
synchronousData(row).then(response => {
if (response.code === 200){
this.$modal.msgSuccess("同步资产结构成功");
}else {
this.$modal.msgError("同步资产结构失败");
}
})
},
@ -395,30 +383,16 @@ export default {
}).join("&")
console.log(this.form.connectionParam)
},
/** 测试连接 */
testConnection(row) {
testConnection(row).then(res => {
if (res.code === 200) {
this.$message({
message: "连接成功",
type: "success"
});
} else {
this.$message({
message: "连接失败",
type: "error"
});
}
})
},
/** 查询数据源列表 */
/** 查询数据接入列表 */
getList() {
this.loading = true;
listSource(this.queryParams).then(response => {
this.sourceList = response.data.rows;
this.total = response.data.total;
this.loading = false;
});
listSource(this.queryParams).then(
response => {
this.accessList = response.data.rows;
this.total = response.data.total;
this.loading = false;
}
)
},
//
cancel() {
@ -429,20 +403,19 @@ export default {
reset() {
this.form = {
id: null,
dataSourceName: null,
name: null,
type: null,
systemName: null,
username: null,
password: null,
linkAddress: null,
host: null,
port: null,
databaseName: null,
username: null,
password: null,
connectionParam: null,
initNum: null,
maxNum: null,
maxWaitTime: null,
maxWaitSize: null,
modeName: null,
initNum: 5,
maxNum: 20,
maxWaitTime: 3000,
maxWaitSize: 3,
createBy: null,
createTime: null,
updateBy: null,
@ -464,72 +437,92 @@ export default {
//
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.dataSourceParamList = [];
this.open = true;
this.title = "添加数据接入";
},
/** 修改按钮操作 */
handleUpdate(row) {
getSource(row.id).then(res => {
console.log(res)
this.form = res.data;
console.log(this.form)
this.dataSourceParamList = [];
if (this.form.connectionParam){
this.form.connectionParam.split("&").forEach(param => {
let paramArr = param.split("=");
this.dataSourceParamList.push({
name: paramArr[0],
val: paramArr[1]
})
})
}
this.open = true;
this.title = "修改数据接入";
this.reset();
this.form = row;
this.dataSourceParamList = [];
this.form.connectionParam.split("&").forEach(param => {
let paramArr = param.split("=");
this.dataSourceParamList.push({
name: paramArr[0],
val: paramArr[1]
})
})
this.open = true;
this.title = "修改数据接入";
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateSource(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
editDataSource(this.form).then(response => {
if (response.code === 200){
this.$modal.msgSuccess("修改成功");
this.open = false;
}else {
this.$modal.msgError("修改失败");
}
})
} else {
addSource(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
editDataSource(this.form).then(response => {
if (response.code === 200){
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}else {
this.$modal.msgError("新增失败");
}
})
}
}
});
},
/** 测试连接 */
testConnection(row) {
if (row){
testConnection(row).then(response => {
if (response.code === 200){
this.$modal.msgSuccess("测试连接成功");
}else {
this.$modal.msgError("测试连接失败");
}
})
}else {
this.$refs["form"].validate(valid => {
if (valid) {
testConnection(this.form).then(response => {
if (response.code === 200){
this.$modal.msgSuccess("测试连接成功");
}else {
this.$modal.msgError("测试连接失败");
}
})
}
});
}
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除【请填写功能名称】编号为"' + ids + '"的数据项?').then(function() {
return delSource(ids);
}).then(() => {
this.getList();
this.$modal.confirm('是否确认删除数据接入编号为"' + ids + '"的数据项?').then(() => {
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
});
},
/** 导出按钮操作 */
handleExport() {
this.download('system/source/export', {
...this.queryParams
}, `source_${new Date().getTime()}.xlsx`)
this.$modal.msgSuccess("导出成功");
}
}
};