031026
/
ui
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 新增资产模型详细信息

master
031026 2024-04-24 19:41:21 +08:00
parent 8546a13fc0 a92a8dd003
commit 7eaf641c93
8 changed files with 425 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,6 +31,20 @@ export function getSource(id) {
})
}
export function database(data) {
return request({
url: '/source/source/database?name='+data,
method: 'post',
data
})
}
export function table(table) {
return request({
url: '/source/source/table?databaseName='+table,
method: 'post',
table
})
}
// 新增数据源
export function addSource(data) {
return request({
@ -72,3 +86,18 @@ export function findStructure(){
method:'get'
})
}
export function findDataBaseTable(data){
return request({
url:'/source/source/findDataBaseTable',
method:'post',
data
})
}
export function structureList(data){
return request({
url:'/source/source/structureList?id='+data,
method:'post',
data
})
}

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

@ -63,7 +63,7 @@
<!-- <div v-for="o in 4" :key="o" class="text item">-->
<!-- {{'列表内容 ' + o }}-->
<!-- </div>-->
<el-descriptions class="margin-top" :title="notice.noticeTitle" :column="2" :size="size" border>
<el-descriptions class="margin-top" :title="notice.noticeTitle" :column="2" size="size" border>
<template slot="extra">
<el-button size="small" @click="readNotice(notice)">阅读消息</el-button>
</template>

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

@ -1,157 +0,0 @@
<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="是否核心">
<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>
export default {
name: 'OverallAssetStructure',
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>

249
src/views/dataSource/assets/dashboard/OverallAssetStructure.vue 100644
View File

@ -0,0 +1,249 @@
<template>
<div>
<el-card v-if="tableMessage!=null">
<div slot="header" class="clearfix">
<span>资产模型基本信息</span>
</div>
<el-descriptions border :column="2">
<el-descriptions-item label="表名称">{{tableMessage.name}}</el-descriptions-item>
<el-descriptions-item label="表备注">{{ tableMessage.as }}</el-descriptions-item>
<el-descriptions-item label="数据量">{{ tableMessage.dataTotal }}</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="sendTest"
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" @click="updEssential(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 bus from '@/views/dataSource/assets/dashboard/bus'
import { database, table } from '@/api/dataSource/source'
export default {
props:['essential','tableMessage','itemTest','totalList',`childrenListModel`],
name: 'OverallAssetStructure',
data() {
return {
localEssential: null,
localTableMessage: null,
formStatus: false,
form:{},
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 }
],
},
sendTest:[],
}
},
beforeDestroy() {
// 组件销毁前移除事件监听器
bus.$off('getEssential');
},
watch:{
"itemTest": {
handler(val){
database(val.name).then(
res => {
this.sendTest=res.data
}
)
console.log("aadasdas",val.databaseName)
table(val.databaseName).then(
res => {
this.tableMessage = res.data
console.log("one",this.tableMessage)
}
)
},
immediate:true,
},
"childrenListModel":{
handler(val){
table(val.databaseName).then(
res=>{
this.tableMessage=res.data
})
}
}
},
created() {
},
methods: {
updEssential(row){
this.form=row
this.formStatus=true
},
}
}
</script>
<style scoped lang="scss">
</style>

4
src/views/dataSource/assets/OverallAssets.vue → src/views/dataSource/assets/dashboard/OverallAssets.vue
View File

@ -12,7 +12,7 @@
<div class="card-panel-text">
数据接入
</div>
<count-to :duration="2600" :end-val="4" :start-val="0" class="card-panel-num"/>
<count-to :duration="2600" :end-val="2" :start-val="0" class="card-panel-num"/>
</div>
</div>
</el-col>
@ -25,7 +25,7 @@
<div class="card-panel-text">
资产模型
</div>
<count-to :duration="3000" :end-val="96" :start-val="0" class="card-panel-num"/>
<count-to :duration="3000" :end-val="1" :start-val="0" class="card-panel-num"/>
</div>
</div>
</el-col>

84
src/views/dataSource/assets/OverallSpecificAssets.vue → src/views/dataSource/assets/dashboard/OverallSpecificAssets.vue
View File

@ -3,38 +3,17 @@
<div class="title-header">
{{title}} - 资产结构概述
</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="15" :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="230" :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 label="sys_user(用户表)" name="first">
<overall-asset-structure/>
<el-tabs v-model="activeName" type="border-card" >
<el-tab-pane
v-for="item in childrenList"
:key="item.name"
:label="item.name+'('+item.as+')'"
:name="item.name">
<overall-asset-structure v-bind:itemTest="item"
v-bind:childrenListModel="childrenListModel"/>
</el-tab-pane>
<el-tab-pane label="sys_dept(部门表)" name="second">sys_dept(部门表)</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
@ -43,28 +22,59 @@
<script>
import CountTo from 'vue-count-to'
import OverallAssetStructure from "@/views/dataSource/assets/OverallAssetStructure.vue";
import OverallAssetStructure from "@/views/dataSource/assets/dashboard/OverallAssetStructure";
import bus from '@/views/dataSource/assets/dashboard/bus'
import { database, table } from '@/api/dataSource/source'
export default {
props: {
title: {
type: String,
default: "-"
}
childrenList: {
type: Array,
default: function () {
return []
}
},
title: null,
},
data() {
return {
activeName: 'first',
childrenListModel:[],
}
},
created() {
},
components: {
OverallAssetStructure,
CountTo
},
methods: {
handleTabClick(tab, node,event ) {
// 通过当前激活的标签页的 name 在 childrenList 中找到对应的 item
this.selectedItem = this.childrenList.find(item => item.name === tab.name);
console.log(this.selectedItem)
table(this.selectedItem.databaseName).then(
res => {
this.childrenListModel = res.data
}
)
database(this.selectedItem.name).then(
res => {
this.essentialModel = res.data
console.log("tow",this.essentialModel)
this.childrenListModel.forEach(item => {
if (item.name === this.selectedItem.name) {
this.tableMessage = item
}
})
}
)
bus.$emit('getEssential',this.essentialModel,this.tableMessage)
},
handleSetLineChartData(type) {
this.$emit('handleSetLineChartData', type)
}
},
}
}
</script>

2
src/views/dataSource/assets/dashboard/bus.js 100644
View File

@ -0,0 +1,2 @@
import Vue from 'vue'
export default new Vue

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

@ -3,33 +3,45 @@
<el-container :style="{height: mainHeight + 'px'}">
<el-aside>
<el-tree :data="assetStructureList"
<el-tree :data="parentList"
:expand-on-click-node="false"
:load="expandTable"
lazy
@node-click="(data) => showAssets=data.type"
@node-click="handleNodeClick"
:props="defaultProps">
<div class="custom-tree-node" slot-scope="{ node, data }">
<div v-if="data.type === 0">{{ data. accessSourceName + '('+data.databaseName + '-' + data.dataSourceSystemName+')' }}</div>
<div class="custom-tree-node" slot-scope="{ node, data }">
<div v-if="data.type === 0" @click="select(data.id)">{{ data.accessSourceName + '(' + data.databaseName + '-' + data.dataSourceSystemName + ')' }}</div>
<div v-if="data.type === 1">{{ data.name + '-'+data.as + '(' + data.dataTotal+'条)' }}</div>
</div>
</el-tree>
</el-aside>
<el-container>
<el-main>
<OverallAssets v-if="showAssets == null"/>
<overall-specific-assets v-if="showAssets === 0" :title="title"/>
<overall-asset-structure v-if="showAssets === 1" :title="title"/>
</el-main>
</el-container>
<el-main>
<OverallAssets v-if="showAssets == null"/>
<!-- <overall-specific-assets v-if="showAssets === 1"-->
<!-- v-bind:totalNum="totalNum"-->
<!-- v-bind:dictDetail="dictDetail"-->
<!-- v-bind:databaseId="databaseId"-->
<!-- v-bind:totalTable="totalTable"-->
<!-- v-bind:childrenList="childrenList"-->
<!-- :title="title"/>-->
<!-- <overall-asset-structure v-bind:essential="essential" v-bind:tableMessage="tableMessage"-->
<!-- v-if="showAssets === 1" :title="title"/>-->
<overall-specific-assets v-if="showAssets === 0"
:childrenList="childrenList"
:title="title"/>
<overall-asset-structure v-if="showAssets === 1"
:childrenList="childrenList"/>
</el-main>
</el-container>
</template>
<script>
import OverallSpecificAssets from "@/views/dataSource/assets/OverallSpecificAssets.vue";
import OverallAssets from "@/views/dataSource/assets/OverallAssets.vue";
import {findStructure} from "@/api/dataSource/source";
import OverallSpecificAssets from "@/views/dataSource/assets/dashboard/OverallSpecificAssets.vue";
import OverallAssets from "@/views/dataSource/assets/dashboard/OverallAssets.vue";
import { database, findStructure, table, findDataBaseTable, structureList } from '@/api/dataSource/source'
export default {
name: 'assets',
components: { OverallSpecificAssets, OverallAssets },
data() {
@ -39,38 +51,93 @@ export default {
children: 'childrenList',
label: 'name'
},
assetStructureList: [],
childrenList: [],
showAssets: null,
title: null
}
parentList: [],
typeList: [],
dictDetail: [],
tableList: [],
showAssets: null,
title: '',
totalTable: 0,
totalNum: 0,
databaseId: 0,
}
},
created() {
this.findTest();
this.getList();
},
methods: {
handleNodeClick(data,node) {
if(data.type == 1) {
let databaseConnect={}
databaseConnect.databaseName=data.databaseName;
databaseConnect.name=data.name;
console.log(databaseConnect)
findDataBaseTable(databaseConnect).then(res=>{
this.childrenList=res.data
})
}
// this.childrenList=[]
this.totalNum=0
this.totalTable=0
this.childrenList.forEach(res=>{
//数据记录条数
this.totalTable+=res.dataTotal
})
//连接接口
this.totalNum=this.parentList.length
console.log(this.totalTable)
console.log(this.totalNum)
// database(data.databaseName).then(
// res => {
// this.childrenList = res.data
// console.log('12142141',this.childrenList)
// this.childrenList.forEach(
// item=>{
// this.totalTable+=item.dataTotal
// }
// )
// this.totalNum=this.childrenList.length
// }
// )
},
expandTable(node, resolve) {
if (node.level === 0) return resolve(this.assetStructureList);
if (node.level === 0) return resolve(this.parentList);
const { data } = node;
const {data} = node;
this.showAssets = data.type;
if (data.type === 1) {
return resolve([])
}
this.title = data.accessSourceName + '('+data.databaseName + '-' + data.dataSourceSystemName+')'
// 模拟异步操作，延迟返回子节点数据
setTimeout(() => {
resolve(this.childrenList)
resolve(this.childrenList);
}, 500);
// 设置标题
this.title = data.accessSourceName + '(' + data.databaseName + '-' + data.dataSourceSystemName + ')';
},
findTest(){
findStructure().then(
select(id){
structureList(id).then(
res=>{
this.assetStructureList=res.data.assetStructureList;
this.childrenList=res.data.databaseTableInformationList;
this.childrenList=res.data.databaseTableInformationList
}
)
},
getList(){
this.loading =true;
findStructure().then(
res=>{
this.parentList=res.data.assetStructureList;
}
)
}
}
}
</script>