baize
/
cloud-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 资产模型初版 

fix(): 修改了代码同步不一样的问题，根据不同的数据信息id查询字段表
master
baize 2024-04-28 21:56:12 +08:00
parent a3fe9cc846
commit dd6f35dea0
7 changed files with 404 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/api/dataSource/source.js
View File

@ -66,9 +66,47 @@ export function delSource(id) {
}
//资产属性列表
export function testList(){
export function findAssetStructure(){
return request({
url:'/dataSource/source/findTest',
url:'/dataSource/source/findAssetStructure',
method:'get'
})
}
export function findInformationById(id){
return request({
url:'/dataSource/source/findInformationById?id='+id,
method:'get',
params:id,
})
}
export function findDataBaseTableById(id){
return request({
url:'dataSource/source/findDataBaseTableById?id='+id,
method:'get',
params:id,
})
}
export function findDataBaseByAssetId(id){
return request({
url:'dataSource/source/findDataBaseByAssetId?id='+id,
method:'get',
params:id,
})
}
export function findDataBaseTable(id){
return request({
url:'dataSource/source/findDataBaseTable?id='+id,
method:'get',
params:id,
})
}
export function findDataBaseByInformationId(id){
return request({
url:'dataSource/source/findDataBaseByInformationId?id='+id,
method:'get',
params:id,
})
}

1
src/layout/components/Navbar.vue
View File

@ -131,6 +131,7 @@ export default {
return {
noticeVisble: false,
noticeInfo: {},
size:0,
noticeAttr: [
{
createTime: '',

241
src/views/dataSource/assets/OverallAssetStructure.vue
View File

@ -1,13 +1,13 @@
<template>
<template >
<div>
<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="表名称">{{ databaseTableInformation.name }}</el-descriptions-item>
<el-descriptions-item label="表备注">{{ databaseTableInformation.as }}</el-descriptions-item>
<el-descriptions-item label="数据量">{{ databaseTableInformation.dataTotal }}</el-descriptions-item>
<el-descriptions-item label="是否核心">
<el-tag size="small">是</el-tag>
</el-descriptions-item>
@ -18,7 +18,7 @@
<span>资产模型详细信息</span>
</div>
<el-table
:data="tableData"
:data="databaseTable"
style="width: 100%;">
<el-table-column prop="name" label="名称" />
<el-table-column prop="comment" label="注释" />
@ -30,7 +30,7 @@
</template>
</el-table-column>
<el-table-column prop="type" label="类型" />
<el-table-column prop="mappingType" label="映射类型" />
<el-table-column prop="detailType" label="映射类型" />
<el-table-column prop="length" label="长度" />
<el-table-column prop="decimalPlaces" label="小数位" />
<el-table-column prop="isNull" label="是否为空" >
@ -69,85 +69,178 @@
</el-table-column>
<el-table-column prop="id" label="操作" >
<template slot-scope="scope">
<el-button type="text">编辑</el-button>
<el-button type="text" @click="update(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<el-dialog title="资产结构修改" width="80%" :visible.sync="formStatus">
<el-form :model="form" label-width="120px">
<el-row>
<el-col :span="12">
<el-form-item label="名称">
<el-input v-model="form.name" readonly autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="注释">
<el-input v-model="form.comment" readonly autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="是否主键">
<el-tag size="small" :type="form.isPrimaryKey === 'Y' ? 'success' : 'danger'">
{{form.isPrimaryKey}}
</el-tag>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="数据类型">
<el-input v-model="form.type" readonly autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="数据长度">
<el-input v-model="form.length" readonly autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="小数位">
<el-input v-model="form.decimalPlaces" readonly autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="是否为空">
<el-tag size="small" :type="form.isNull === 'Y' ? 'success' : 'danger'">
{{form.isNull}}
</el-tag>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="默认值">
<el-input v-model="form.defaultValue" readonly autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="映射字段">
<el-input v-model="form.mappingType" readonly autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否字典">
<el-switch
v-model="form.isDict"
active-value="Y"
inactive-value="N"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="form.isDict === 'Y'">
<el-col :span="24">
<el-form-item label="字典">
<el-select v-model="form.dictKey">
<el-option v-for="(value, key) in dictMap" :key="key" :label="key" :value="key"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item>
<el-table :data="dictMap[form.dictKey]" striped border>
<el-table-column property="label" label="字典标签"/>
<el-table-column property="val" label="字典值"/>
</el-table>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="formStatus = false">取 消</el-button>
<el-button type="primary" @click="formStatus = false">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {findDataBaseByInformationId} from "@/api/dataSource/source";
export default {
name: 'OverallAssetStructure',
props:{
table:{
value:Object,
default:{}
},
databaseTable:{
value:Array,
default:[]
},
databaseTableInformationList:{
value:Array,
default:[]
},
databaseTableInformation:{
value:Object,
default:{}
},
childrenList:{
value:Array,
default:[]
},
},
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: "-",
}, ]
form: {},
formStatus: false,
dictMap: {
"system_sex": [
{ 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 }
],
}
}
},
watch:{
table:{
handler(val){
findDataBaseByInformationId(val.id).then(
res=>{
this.databaseTableInformation=this.table;
console.log(this.databaseTable)
this.databaseTable=res.data;
}
)
},
immediate:true
}
},
created() {
// this.findDataBaseByInformationId()
// this.init();
},
methods:{
init(){
},
update(row) {
this.form = row;
this.formStatus = true;
}
},
}

2
src/views/dataSource/assets/OverallAssets.vue
View File

@ -49,6 +49,7 @@
import CountTo from 'vue-count-to'
export default {
components: {
CountTo
},
@ -56,6 +57,7 @@ export default {
handleSetLineChartData(type) {
this.$emit('handleSetLineChartData', type)
}
}
}
</script>

150
src/views/dataSource/assets/OverallSpecificAssets.vue
View File

@ -30,11 +30,85 @@
</div>
</el-col>
<el-col :span="24">
<el-tabs v-model="activeName" type="border-card">
<el-tab-pane label="sys_user(用户表)" name="first">
<overall-asset-structure/>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>基础字典</span>
<el-popover
placement="top-start"
title="基础字典"
width="200"
trigger="hover"
content="这个字典是数据资产项目当中的字典内容，而不是本项目当中的字典内容。主要作用为数据清洗过程中数据字典映射作用">
<i class="el-icon-question" slot="reference"></i>
</el-popover>
<el-popover
placement="right"
width="400"
trigger="click">
<el-row :gutter="20">
<el-col :span="18">
<el-input v-model="dictAddName"></el-input>
</el-col>
<el-col :span="6">
<el-button @click="addDict">确定</el-button>
</el-col>
</el-row>
<el-button style="float: right; padding: 3px 0" type="text" slot="reference">新增字典</el-button>
</el-popover>
</div>
<el-row :gutter="20">
<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>
<el-button style="float: right; padding: 3px 0"
type="text"
@click="val.push({ label: null, val: null, isEdit: true })"
>新增</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>
<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>
<el-input v-if="scope.row.isEdit" v-model="scope.row.val" size="mini"></el-input>
</template>
</el-table-column>
<el-table-column prop="val" label="操作">
<template slot-scope="scope">
<el-button
v-if="!scope.row.isEdit"
size="mini"
type="text"
icon="el-icon-edit"
@click="scope.row.isEdit = true"
>修改</el-button>
<el-button
v-if="scope.row.isEdit"
@click="editConfirm(scope.row)"
size="mini"
type="text"
icon="el-icon-finished"
>确定</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</el-col>
</el-row>
</el-card>
</el-col>
<el-col :span="24" style="margin-top: 20px">
<el-tabs :value="activeName" type="border-card" >
<el-tab-pane v-for="(table,index) in databaseTableInformationList" :label="table.name+'('+table.as+')'" :name="index+''" >
<OverallAssetStructure :table="table"/>
</el-tab-pane>
<el-tab-pane label="sys_dept(部门表)" name="second">sys_dept(部门表)</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
@ -44,27 +118,87 @@
<script>
import CountTo from 'vue-count-to'
import OverallAssetStructure from "@/views/dataSource/assets/OverallAssetStructure.vue";
import table from "table";
export default {
props: {
title: {
type: String,
default: "-"
}
},
databaseTableInformationList:[],
childrenList:{
},
},
data() {
return {
activeName: 'first',
dictAddName:null,
activeName: '0',
table:null,
databaseTable:[],
dictMap: {
"性别(system_sex)": [
{ 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 }
],
}
}
},
created() {
this.init();
},
components: {
OverallAssetStructure,
CountTo
},
methods: {
table() {
return table
},
checkTableName(checkTab){
this.databaseTable = this.databaseTableInformationList.findLast(item => item.tableName === checkTab.name)
console.log(this.databaseTable);
},
init(){
let rows = [
{
tableName: "sys_user",
tableAsName: "用户表"
},
{
tableName: "sys_dept",
tableAsName: "部门表"
},
];
this.tableList = rows;
this.activeName = rows[0].tableName;
},
editConfirm(row){
if (!row.label || !row.val) {
this.$message.error('字典标签或字典值，不可为空');
return;
}
row.isEdit = false;
},
addDict(){
if (!this.dictAddName){
this.$message.error('数据字典，不可为空');
return;
}
this.dictMap[this.dictAddName] = []
this.dictAddName = null
},
handleSetLineChartData(type) {
this.$emit('handleSetLineChartData', type)
}
console.log(type)
},
}
}
</script>

69
src/views/dataSource/assets/index.vue
View File

@ -6,7 +6,7 @@
<el-tree :data="assetStructureList"
:load="expandTable"
lazy
@node-click="(data) => showAssets=data.type"
@node-click="showAssetsFun"
:props="defaultProps">
<div class="custom-tree-node" slot-scope="{ node, data }">
<div v-if="data.type === 0">{{ data. accessSourceName + '('+data.databaseName + '-' + data.dataSourceSystemName+')' }}</div>
@ -17,8 +17,8 @@
<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'" :title="title"/>
<overall-specific-assets v-if="showAssets === 0" :databaseTableInformationList="databaseTableInformationList" :title="title"/>
<overall-asset-structure v-if="showAssets === 1" :databaseTable="databaseTable" :databaseTableInformation="databaseTableInformation" :childrenList="childrenList" :title="title"/>
</el-main>
</el-container>
</el-container>
@ -27,11 +27,16 @@
import OverallSpecificAssets from "@/views/dataSource/assets/OverallSpecificAssets.vue";
import OverallAssets from "@/views/dataSource/assets/OverallAssets.vue";
import {testList} from "@/api/dataSource/source";
import {
findAssetStructure, findDataBaseByAssetId, findDataBaseByInformationId, findDataBaseTable,
findDataBaseTableById,
findInformationById
} from "@/api/dataSource/source";
import OverallAssetStructure from "@/views/dataSource/assets/OverallAssetStructure.vue";
export default {
name: 'assets',
components: { OverallSpecificAssets, OverallAssets },
components: {OverallAssetStructure, OverallSpecificAssets, OverallAssets },
data() {
return {
mainHeight: window.innerHeight - 85,
@ -39,38 +44,68 @@ export default {
children: 'childrenList',
label: 'name'
},
assetStructureList: [],
childrenList: [],
showAssets: null,
title: null
title: null,
databaseTableInformation:{},
databaseTableInformationList:[],
databaseTable:[],
}
},
created() {
this.findTest();
this.findAssetStructure();
},
methods: {
expandTable(node, resolve) {
if (node.level === 0) return resolve(this.assetStructureList);
const {data} = node;
this.showAssets = data.type;
if (data.type === 'dataTable') {
return resolve([])
this.showAssets = data.id;
findDataBaseByAssetId(data.id).then(
res=>{
this.databaseTableInformationList=res.data;
}
this.title = data.accessSourceName + '('+data.databaseName + '-' + data.dataSourceSystemName+')'
)
findDataBaseTable(data.id).then(
res=>{
this.databaseTableInformation=res.data
}
)
findInformationById(data.id).then(
res=>{
this.childrenList=res.data;
}
)
if (data.type === 1){
findDataBaseByInformationId(data.id).then(
res=>{
this.databaseTable=res.data;
console.log("res",this.databaseTable)
}
)
}
setTimeout(() => {
resolve(this.childrenList)
}, 500);
},
findTest(){
testList().then(
showAssetsFun(data){
this.title = data.accessSourceName + '('+data.databaseName + '-' + data.dataSourceSystemName+')'
this.showAssets = data.type;
},
findAssetStructure(){
findAssetStructure().then(
res=>{
this.assetStructureList=res.data.assetStructureList;
this.childrenList=res.data.databaseTableInformationList;
this.assetStructureList=res.data
}
)
},
}
}
</script>

2
src/views/dataSource/source/index.vue
View File

@ -142,7 +142,6 @@
<el-table-column label="主机端口" align="center" prop="hostPort" />
<el-table-column label="数据连接类型ID" align="center" prop="dataAccessTypeId" />
<el-table-column label="数据库名称" align="center" prop="databaseName" />
<el-table-column label="数据连接参数" align="center" prop="dataConnectionParameter" />
<el-table-column label="初始连接数量" align="center" prop="initialQuantity" />
<el-table-column label="最大连接数量" align="center" prop="maximumQuantity" />
<el-table-column label="最大等待时间" align="center" prop="maximumTime" />
@ -426,7 +425,6 @@ export default {
listType().then(
res=>{
this.accessTypes=res.data;
console.log("res",this.accessTypes)
}
)
},