xiaohuang
/
2108a-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

资产结构测试7

etl-xin
xiaohuang 2024-04-28 09:57:20 +08:00
parent 0f8c27aeca
commit 88359ed9e6
6 changed files with 1135 additions and 973 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/etl/etl.js
View File

@ -61,6 +61,14 @@ export function getTableTree(){
}) })
} }
// 修改资产数据结构
export function updateStructureInfo(data) {
return request({
url: '/etl/info/updateStructureInfo',
method: 'put',
data
})
}
//获取字典 //获取字典
export function getDict(id){ export function getDict(id){

5
src/views/etl/construction/AssetsBasic.vue
View File

@ -57,9 +57,8 @@ export default {
structureNum: null, structureNum: null,
} }
}, },
watch: {
watch:{ infoOpen(newName, oldName) {
infoOpen(newName, oldName){
console.log(newName) console.log(newName)
console.log(oldName) console.log(oldName)
} }

672
src/views/etl/construction/AssetsModel.vue
View File

@ -1,278 +1,445 @@
<template> <template>
<div> <div>
<el-row :gutter="40" class="panel-group">
<el-row :gutter="40" class="panel-group"> <div class="title-header">
<div class="title-header"> {{ this.name }}
{{ this.name }} </div>
</div> <el-col :lg="12" :sm="12" :xs="12" class="card-panel-col">
<el-col :lg="12" :sm="12" :xs="12" class="card-panel-col"> <div class="card-panel" @click="handleSetLineChartData('messages')">
<div class="card-panel" @click="handleSetLineChartData('messages')">
<div class="card-panel-icon-wrapper icon-message"> <div class="card-panel-icon-wrapper icon-message">
<svg-icon class-name="card-panel-icon" icon-class="table"/> <svg-icon class-name="card-panel-icon" icon-class="table"/>
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
<div class="card-panel-text"> <div class="card-panel-text">
资产模型 资产模型
</div> </div>
<count-to :duration="3000" :end-val="this.tableInfoList.length" :start-val="0" class="card-panel-num"/> <count-to :duration="3000" :end-val="this.tableInfoList.length" :start-val="0" class="card-panel-num"/>
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :lg="12" :sm="12" :xs="12" class="card-panel-col"> <el-col :lg="12" :sm="12" :xs="12" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('purchases')"> <div class="card-panel" @click="handleSetLineChartData('purchases')">
<div class="card-panel-icon-wrapper icon-money"> <div class="card-panel-icon-wrapper icon-money">
<svg-icon class-name="card-panel-icon" icon-class="field"/> <svg-icon class-name="card-panel-icon" icon-class="field"/>
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
<div class="card-panel-text"> <div class="card-panel-text">
数据模型 数据模型
</div> </div>
<count-to :duration="3200" :end-val="this.structureNum" :start-val="0" class="card-panel-num"/> <count-to :duration="3200" :end-val="this.structureNum" :start-val="0" class="card-panel-num"/>
</div> </div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="40" class="panel-group"> <el-row :gutter="40" class="panel-group">
<el-card>
<el-tabs type="border-card" @tab-click="handleClick">
<el-tab-pane
<el-card> v-for="tableInfo in tableInfoList"
<el-tabs type="border-card" @tab-click="handleClick"> :label="tableInfo.tableName+'('+tableInfo.info.tableRemark+')'">
<el-tab-pane
v-for="tableInfo in tableInfoList"
:label="tableInfo.tableName+'('+tableInfo.info.tableRemark+')'">
<el-card> <el-card>
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>基础字典</span>
<span>基础字典</span> <!--新增字典表-->
<!--新增字典表--> <el-button type="text" style="float: right" @click="insertDictOpen = true">新增字典</el-button>
<el-button type="text" style="float: right" @click="insertDictOpen = true">新增字典</el-button> </div>
</div> <el-row>
<el-row> <el-card style="width: 300px; float: left;margin:10px" v-for="dictInfo in dictList">
<el-card style="width: 3000px; float: left;margin: 10px" v-for="dictInfo in dictList"> <div slot="header" class="clearfix">
<div slot="header" class="clearfix"> <span>{{ dictInfo.dictName }}({{ dictInfo.dictType }})</span>
<span> <!--新增字典具体信息-->
<el-button style="float: right; padding: 3px 0" type="text" @click="insertDictList(dictInfo)">新增内容
{{dictInfo.dictName}} </el-button>
({{dictInfo.dictType}}) </div>
</span> <el-table :data="dictInfo.dictInfoList" height="216">
<el-table-column label="标签">
<template slot-scope="scope">
</div> <span v-if="!scope.row.isEdit">{{ scope.row.infoName }}</span>
<el-input :value="scope.row.infoName"
v-model="scope.row.infoName"
v-if="scope.row.isEdit"></el-input>
</template>
</el-table-column>
<el-table-column label="值">
<template slot-scope="scope">
<span v-if="!scope.row.isEdit">{{ scope.row.infoValue }}</span>
<el-input :value="scope.row.infoValue"
v-model="scope.row.infoValue"
v-if="scope.row.isEdit"></el-input>
</template>
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<el-button type="text" v-if="!scope.row.isEdit" @click="scope.row.isEdit = true">操作
</el-button>
<el-button type="text" v-if="scope.row.isEdit" @click="insertDictInfo(dictInfo.id,scope.row)">
确认
</el-button>
</template>
</el-table-column>
</el-table>
</el-card> </el-card>
</el-row> </el-row>
</el-card> </el-card>
<!--资产模型基本信息--> <!--资产模型基本信息-->
<el-card> <el-card>
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>资产模型基本信息</span> <span>资产模型基本信息</span>
</div> </div>
<el-descriptions
<el-descriptions class="margin-top"
class="margin-top" :column="2"
:column="2" border>
border> <el-descriptions-item>
<template slot="label">
<el-descriptions-item> <i class="el-icon-user"></i>
<template slot="label"> 表名称
<i class="el-icon-user"></i> </template>
表名称 {{ tableInfo.info.tableName }}
</template> </el-descriptions-item>
{{tableInfo.info.tableName}} <el-descriptions-item>
</el-descriptions-item> <template slot="label">
<i class="el-icon-mobile-phone"></i>
<el-descriptions-item> 表备注
<template slot="label"> </template>
<i class="el-icon-mobile-phone"></i> {{ tableInfo.info.tableRemark }}
表备注 </el-descriptions-item>
</template> <el-descriptions-item>
{{tableInfo.info.tableRemark}} <template slot="label">
</el-descriptions-item> <i class="el-icon-location-outline"></i>
数据量
<el-descriptions-item> </template>
<template slot="label"> {{ tableInfo.info.dataNum }}
<i class="el-icon-location-outline"></i> </el-descriptions-item>
数据量 <el-descriptions-item>
</template> <template slot="label">
{{tableInfo.info.dataNum}} <i class="el-icon-tickets"></i>
</el-descriptions-item> 备注
</template>
<el-tag size="small">学校</el-tag>
<el-descriptions-item> </el-descriptions-item>
<template slot="label"> </el-descriptions>
<i class="el-icon-tickets"></i>
备注
</template>
<el-tag size="small">小黄</el-tag>
</el-descriptions-item>
</el-descriptions>
</el-card> </el-card>
<!--数据模型--> <!--数据模型-->
<el-card> <el-card>
<div slot="header" class="clearfix">
<span>数据模型</span>
</div>
<el-table
:data="tableInfo.info.structureList"
style="width: 100%"
>
<el-table-column fixed prop="columnName" label="字段名称" width="200px"/>
<el-table-column fixed prop="columnRemark" label="字段注释"/>
<el-table-column fixed prop="isPrimary" label="是否主键">
<template slot-scope="scope">
<el-tag :type="scope.row.isPrimary==='Y'?'success':'danger'">
{{ scope.row.isPrimary }}
</el-tag>
</template>
</el-table-column>
<el-table-column fixed prop="columnType" label="数据类型"/>
<el-table-column fixed prop="javaType" label="映射类型"/>
<el-table-column fixed prop="columnLength" label="字段长度"/>
<el-table-column fixed prop="columnDecimals" label="小数位数"/>
<el-table-column fixed prop="isNull" label="是否为空">
<template slot-scope="scope">
<el-tag :type="scope.row.isNull==='Y'?'success':'danger'">
{{ scope.row.isNull }}
</el-tag>
</template>
</el-table-column>
<el-table-column fixed prop="defaultValue" label="默认值"/>
<el-table-column fixed prop="isDictionary" label="是否字典">
<template slot-scope="scope">
<el-tag v-if="scope.row.isDictionary!==null"
:type="scope.row.isDictionary==='Y'?'success':'danger'">
{{ scope.row.isDictionary }}
</el-tag>
{{ scope.row.isDictionary }}
</template>
</el-table-column>
<el-table-column fixed label="映射字典">
<template slot-scope="scope">
<div slot="header" class="clearfix"> <el-popover trigger="hover" placement="left"
<span>数据模型</span> @mouseover.native="findDictList(scope.row.dictionaryTable)"
</div> v-if="scope.row.dictionaryTable !== null">
<el-table
:data="findedDictList"
<el-table border
:data="tableInfo.info.structureList" style="width: 100%">
style="width: 100%"> <el-table-column prop="infoName" label="标签" width="180"></el-table-column>
<el-table-column prop="infoValue" label="值" width="180"></el-table-column>
<el-table-column fixed prop="columnName" label="字段名称" width="200px"/> </el-table>
<el-table-column fixed prop="columnRemark" label="字段注释" /> <div slot="reference" class="name-wrapper">
<el-table-column fixed prop="isPrimary" label="是否主键" /> <el-tag >
<el-table-column fixed prop="columnType" label="数据类型" /> {{ scope.row.dictionaryTable }}
<el-table-column fixed prop="javaType" label="映射类型" /> </el-tag>
<el-table-column fixed prop="columnLength" label="字段长度" /> </div>
<el-table-column fixed prop="columnDecimals" label="小数位数" /> </el-popover>
<el-table-column fixed prop="isNull" label="是否为空" /> </template>
<el-table-column fixed prop="defaultValue" label="默认值" /> </el-table-column>
<el-table-column fixed prop="isDictionary" label="是否字典" /> <el-table-column fixed prop="dictionaryTable" label="操作">
<el-table-column fixed prop="dictionaryTable" label="映射字典" /> <template slot-scope="scope">
<el-table-column fixed prop="dictionaryTable" label="映射字典" > <el-button
<template slot-scope="scope"> type="text"
操作 @click="editDictInfo(scope.row)">
</template> 编辑
</el-table-column> </el-button>
</el-table> </template>
</el-table-column>
</el-table>
</el-card> </el-card>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-card> </el-card>
</el-row> </el-row>
<!-- 添加新字典表对话框-->
<!--添加新字典表对话框--> <el-dialog title="字典表基础信息" style="float:left; margin:20px" :visible.sync="insertDictOpen">
<el-dialog title="字典表基础信息" style="float:left; margin:20px" :visible.sync="insertDictOpen"> <el-form :model="assetDictFormInfo">
<el-form :model="assetDictFormInfo"> <el-form-item label="字典表名" label-width="120px">
<el-form-item label="字典表名" label-width="120px">
<el-input v-model="assetDictFormInfo.dictName" autocomplete="off"></el-input> <el-input v-model="assetDictFormInfo.dictName" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="字典类型" label-width="120px">
<el-form-item label="字典类型" label-width="120px"> <el-input v-model="assetDictFormInfo.dictType" autocomplete="off"></el-input>
<el-input v-model="assetDictFormInfo.dictType" autocomplete="off"></el-input> </el-form-item>
</el-form-item> </el-form>
<div slot="footer" class="dialog-footer">
</el-form> <el-button @click="insertDictOpen = false">取 消</el-button>
<el-button type="primary" @click="insertDict(tableInfo.info)">确 定</el-button>
<div slot="footer" class="dialog-footer"> </div>
<el-button @click="insertDictOpen = false">取消</el-button> </el-dialog>
<el-button type="primary" @click="insertDict(tableInfo.info)">确定</el-button> <!-- 编辑字典详细信息 -->
</div> <el-dialog title="数据详情修改" :visible.sync="structureInfoFormOpen">
</el-dialog> {{ this.structureInfoForm }}
</div> <el-form :model="structureInfoForm" :inline="true" label-width="150px">
<el-row>
<el-col :span="12">
<el-form-item label="字段名">
<el-input v-model="structureInfoForm.columnName" disabled autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="是否主键">
<el-tag :type="structureInfoForm.isPrimary==='Y'?'success':'danger'" v-model="structureInfoForm.isNull">
{{ structureInfoForm.isPrimary }}
</el-tag>
</el-form-item>
<el-form-item label="数据类型">
<el-input v-model="structureInfoForm.columnType" disabled autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="长度">
<el-input v-model="structureInfoForm.columnLength" disabled autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="是否字典">
<el-switch
v-model="structureInfoForm.isDictionary"
active-value="Y"
inactive-value="N"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注名">
<el-input v-model="structureInfoForm.columnRemark" disabled autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="是否非空">
<el-tag :type="structureInfoForm.isNull==='Y'?'success':'danger'" v-model="structureInfoForm.isNull">
{{ structureInfoForm.isNull }}
</el-tag>
</el-form-item>
<el-form-item label="java类型">
<el-input v-model="structureInfoForm.javaType" disabled autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="小数点位数">
<el-input v-model="structureInfoForm.columnDecimals" disabled autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="选择字典" v-if="structureInfoForm.isDictionary==='Y'">
<el-select v-model="structureInfoForm.dictionaryTable" placeholder="选择系统中的字典"
@change="checkDictList">
<el-option v-for="dictInfo in dictList" :label="dictInfo.dictName"
:value="dictInfo.dictType"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<!-- 显示所选字典内容-->
<el-row :gutter="20">
<el-col :span="12" :offset="6">
<div class="grid-content bg-purple">
<el-table :data="selectDictList">
<el-table-column label="标签" prop="infoName"></el-table-column>
<el-table-column label="值" prop="infoValue"></el-table-column>
</el-table>
</div>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="outEdit">取 消</el-button>
<el-button type="primary" @click="updateStructureInfo">确 定</el-button>
</div>
</el-dialog>
</div>
</template> </template>
<script> <script>
import CountTo from "vue-count-to"; import CountTo from 'vue-count-to'
import {insertDict,insertDictInfo} from "@/api/etl/etl"; import {insertDict, insertDictInfo, updateStructureInfo} from "@/api/etl/etl";
export default { export default {
props: {
props: { name: null,
name:null, tableInfoList: Array,
tableInfoList: Array, dictList: Array
dictList: Array },
}, watch: {
//每个数据库对应的具体数据
watch:{ tableInfoList: {
tableInfoList: { handler(newValue) {
handler(newValue,oldValue){ this.structureNum = 0
this.structureNum = 0 newValue.forEach(asset => {
console.log('new') this.structureNum += asset.info.structureList.length
console.log(oldValue) })
console.log(newValue) },
newValue.forEach(asset =>{ immediate: true,
this.structureNum += asset.info.structureList.length deep: true
}) },
console.log(this.structureNum) 'structureInfoForm.isDictionary': {
}, handler(newValue) {
immediate: true, // if (newValue === "") {
deep: true //
// } else {
// console.log('数据为' + newValue)
// if (!newValue) {
// this.structureInfoForm.dictionaryTable = null
// this.structureInfoForm.isDictTionary = null
// this.selectDictList = []
// }
// }
//
},
// immediate: true,
// deep: true
}
},
name: 'AssetsModel',
components: {
CountTo
},
data() {
return {
//展示的字典表
findedDictList: [],
//选择的字典列表
selectDictList: [],
//打开字段表单
structureInfoFormOpen: false,
//字段表单对象
structureInfoForm: {
isDirectory: false,
dictionaryTable: null,
},
structureNum: null,
//同步页面传入组件中的数据
tableInfoList: this.tableInfoList,
dictList: this.dictList,
//新增字典表
insertDictOpen: false,
//字典表单对话框
dictFormInfoOpen: false,
//字典基础信息
assetDictFormInfo: {
dictName: null,
dictType: null,
},
}
},
methods: {
//找到对应的字典表并展示
findDictList(dictName) {
console.log(11111111)
this.findedDictList = this.dictList.find(item => item.dictType === dictName).dictInfoList
//利用this.$set把数据插进去
console.log(this.findedDictList)
},
//修改数据结构详情 确认提交按钮
updateStructureInfo() {
console.log(this.structureInfoForm)
updateStructureInfo(this.structureInfoForm).then(res => {
this.$message.success(res.msg)
})
this.structureInfoFormOpen = false
this.structureInfoForm.isDictionary = 'N'
this.structureInfoForm.dictionaryTable = null
this.reset()
},
//选择字典
checkDictList(data) {
//data === dictType 根据唯一类型编码查询具体字典表
this.selectDictList = this.dictList.find(item => item.dictType === data).dictInfoList
},
//编辑表单取消按钮
outEdit() {
this.structureInfoFormOpen = false
this.structureInfoForm.isDictionary = 'N'
this.structureInfoForm.dictionaryTable = null
},
//编辑按钮
editDictInfo(data) {
this.structureInfoFormOpen = true
let info = data
this.structureInfoForm = info
this.structureInfoForm.isDictionary = info.isDictionary === 'Y'
},
//前台添加字典新内容
insertDictList(data) {
console.log(data)
data.dictInfoList.push({
'id': data.id,
'infoName': null,
'infoValue': null,
'isEdit': true,
})
},
//添加字典接入表
insertDict(data) {
console.log(data)
//关闭新增字典窗口
this.insertDictOpen = false
this.assetDictFormInfo.basicId = data.basicId
console.log(this.assetDictFormInfo)
insertDict(this.assetDictFormInfo)
this.reset()
},
//字典具体信息表
insertDictInfo(id, row) {
console.log(row)
console.log(id)
row.dictId = id
row.id = null
if (row.infoValue === null || row.infoName === null) {
this.$message.error("字典标签或者值不能为空")
} else {
insertDictInfo(row)
this.$message.success("添加成功")
this.reset()
row.isEdit = false
}
},
handleSetLineChartData(type) {
this.$emit('handleSetLineChartData', type)
},
handleClick(val, event) {
console.log(val)
console.log(event)
},
//重置参数
reset() {
// this.$emit('watchChild'); //触发$emit绑定的watchChild方法
}
} }
},
name: 'AssetsModel',
components:{
CountTo
},
data(){
return {
structureNum: null,
tableInfoList: this.tableInfoList,
dictList: this.dictList,
//新增字典表
insertDictOpen: false,
dictFormInfoOpen: false,
//字典基础信息
assetDictFormInfo: {
dictName: null,
dictType: null,
},
}
},
methods: {
//点击修改字典操作
updateDictInfo(row) {
row.isEdit = true
},
//前台添加字典新内容
insertDictList(data) {
console.log(data)
data.dictInfoList.push({
'id': data.id,
'infoName': null,
'infoValue': null,
'isEdit': true,
})
},
//添加字典接入表
insertDict(data) {
console.log(data)
//关闭新增字典窗口
this.insertDictOpen = false
this.assetDictFormInfo.basicId = data.basicId
console.log(this.assetDictFormInfo)
insertDict(this.insertDictOpen)
this.reset()
},
//字典具体信息表
insertDictInfo(id,row){
console.log(row)
console.log(id)
row.dictId = id
row.id = null
if (row.infoValue === null || row.infoName === null) {
this.$message.error("字典标签或者值不能为空")
}else {
insertDictInfo(row)
this.$message.success("添加成功")
this.reset()
row.isEdit = false
}
},
handleSetLineChartData(type) {
this.$emit('handleSetLineChartData', type)
},
handleClick(val, event) {
console.log(val)
console.log(event)
},
//重置参数
reset() {
}
}
} }
</script> </script>
@ -393,8 +560,3 @@ export default {
line-height: 100px; line-height: 100px;
} }
</style> </style>

189
src/views/etl/construction/TableInfoModel.vue
View File

@ -1,106 +1,109 @@
@ -0,0 +1,221 @@
<template> <template>
<el-row :gutter="40" class="panel-group"> <el-row :gutter="40" class="panel-group">
<el-card> <el-card>
<el-tabs type="border-card" @tab-click="handleClick"> <el-tabs type="border-card" @tab-click="handleClick">
<el-tab-pane <el-tab-pane
:v-model="tableInfo" :v-model="tableInfo"
:label="tableInfo.tableName+'('+tableInfo.info.tableRemark+')'"> :label="tableInfo.tableName+'('+tableInfo.info.tableRemark+')'">
<!-- 资产模型基本信息--> <!-- 资产模型基本信息-->
<el-card> <el-card>
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>资产模型基本信息</span> <span>资产模型基本信息</span>
</div> </div>
<el-descriptions <el-descriptions
class="margin-top" class="margin-top"
:column="2" :size="size" :column="2" :size="size"
border> border>
<el-descriptions-item> <el-descriptions-item>
<template slot="label"> <template slot="label">
<i class="el-icon-user"></i> <i class="el-icon-user"></i>
表名称 表名称
</template> </template>
{{ tableInfo.info.tableName }} {{ tableInfo.info.tableName }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item> <el-descriptions-item>
<template slot="label"> <template slot="label">
<i class="el-icon-mobile-phone"></i> <i class="el-icon-mobile-phone"></i>
表备注 表备注
</template> </template>
{{ tableInfo.info.tableRemark }} {{ tableInfo.info.tableRemark }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item> <el-descriptions-item>
<template slot="label"> <template slot="label">
<i class="el-icon-location-outline"></i> <i class="el-icon-location-outline"></i>
数据量 数据量
</template> </template>
{{ tableInfo.info.dataNum }} {{ tableInfo.info.dataNum }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item> <el-descriptions-item>
<template slot="label"> <template slot="label">
<i class="el-icon-tickets"></i> <i class="el-icon-tickets"></i>
备注 备注
</template> </template>
<el-tag size="small">学校</el-tag> <el-tag size="small">学校</el-tag>
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
</el-card> </el-card>
<!-- 数据模型--> <!-- 数据模型-->
<el-card> <el-card>
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>数据模型</span> <span>数据模型</span>
</div> </div>
<el-table <el-table
:data="tableInfo.info.structureList" :data="tableInfo.info.structureList"
style="width: 100%" style="width: 100%"
> >
<el-table-column fixed prop="columnName" label="字段名称" width="200px" /> <el-table-column fixed prop="columnName" label="字段名称" width="200px" />
<el-table-column fixed prop="columnRemark" label="字段注释" /> <el-table-column fixed prop="columnRemark" label="字段注释" />
<el-table-column fixed prop="isPrimary" label="是否主键" /> <el-table-column fixed prop="isPrimary" label="是否主键" />
<el-table-column fixed prop="columnType" label="数据类型" /> <el-table-column fixed prop="columnType" label="数据类型" />
<el-table-column fixed prop="javaType" label="映射类型" /> <el-table-column fixed prop="javaType" label="映射类型" />
<el-table-column fixed prop="columnLength" label="字段长度" /> <el-table-column fixed prop="columnLength" label="字段长度" />
<el-table-column fixed prop="columnDecimals" label="小数位数" /> <el-table-column fixed prop="columnDecimals" label="小数位数" />
<el-table-column fixed prop="isNull" label="是否为空" /> <el-table-column fixed prop="isNull" label="是否为空" />
<el-table-column fixed prop="defaultValue" label="默认值" /> <el-table-column fixed prop="defaultValue" label="默认值" />
<el-table-column fixed prop="isDictionary" label="是否字典" /> <el-table-column fixed prop="isDictionary" label="是否字典" />
<el-table-column fixed prop="dictionaryTable" label="映射字典" /> <el-table-column fixed prop="dictionaryTable" label="映射字典" />
<el-table-column fixed prop="dictionaryTable" label="映射字典"> <el-table-column fixed prop="dictionaryTable" label="映射字典">
<template slot-scope="scope"> <template slot-scope="scope">
操作 操作
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-card> </el-card>
</el-tab-pane>
</el-tab-pane> </el-tabs>
</el-tabs> </el-card>
</el-card> </el-row>
</el-row>
</template> </template>
<script> <script>
import CountTo from 'vue-count-to' import CountTo from 'vue-count-to'
export default { export default {
props:{ props:{
tableInfo:[], tableInfo:Array,
},
name: 'TableInfoModel',
components: {
CountTo
},
methods: {
handleSetLineChartData(type) {
this.$emit('handleSetLineChartData', type)
}, },
handleClick(val,event){
console.log(val) name: 'TableInfoModel',
console.log(event) components: {
CountTo
},
data() {
return{
tableInfo:this.tableInfo
}
},
methods: {
handleSetLineChartData(type) {
this.$emit('handleSetLineChartData', type)
},
handleClick(val,event){
console.log(val)
console.log(event)
}
} }
}
} }
</script> </script>

251
src/views/etl/construction/index.vue
View File

@ -1,151 +1,142 @@
<template> <template>
<div> <div>
<el-container style="height: 1000px"> <el-container style="height: 1000px">
<el-aside> <el-aside>
<el-tree :data="assetStructureList" <el-tree :data="assetStructureList"
:props="defaultProps" :props="defaultProps"
@node-click="handleNodeClick"> @node-click="handleNodeClick"></el-tree>
</el-aside>
</el-tree> <el-main>
</el-aside> <AssetsBasic v-if="!infoOpen" :infoOpen="infoOpen" :fundDataNum="fundDataNum"></AssetsBasic>
<AssetsModel v-if="this.tableInfoList.length!==0" @watchChild="handleNodeClick" :name="vueName" :dictList="dictList" :tableInfoList="tableInfoList"></AssetsModel>
<el-main> <TableInfoModel v-if="this.tableInfoList.length===0" :table-info="tableInfoForm"></TableInfoModel>
<AssetsBasic v-if="!infoOpen" :info-open="infoOpen" :fund-data-num="fundDataNum"></AssetsBasic> </el-main>
<AssetsModel v-if="this.tableInfoList.length!==0" :name="vueName" :dictList="dictList" :tableInfoList="tableInfoList"></AssetsModel> </el-container>
</div>
<TableInfoModel v-if="this.tableInfoList.length===0" :table-info="tableInfoForm"></TableInfoModel>
</el-main>
</el-container>
</div>
</template> </template>
<script> <script>
import {getDict,getTableTree} from "@/api/etl/etl"; import {getDict, getTableTree} from "@/api/etl/etl";
import AssetsBasic from "@/views/etl/construction/AssetsBasic.vue"; import AssetsBasic from "@/views/etl/construction/AssetsBasic.vue";
import AssetsModel from "@/views/etl/construction/AssetsModel.vue"; import AssetsModel from "@/views/etl/construction/AssetsModel.vue";
import TableInfoModel from "@/views/etl/construction/TableInfoModel.vue"; import TableInfoModel from "@/views/etl/construction/TableInfoModel.vue";
export default { export default {
name:'construction', name: 'construction',
components:{TableInfoModel, AssetsModel, AssetsBasic }, components: { TableInfoModel, AssetsModel, AssetsBasic},
data() {
data() { return {
return { vueName:null,
vueName:null, //表详情页面
//表详情页面 tableInfoOpen: false,
tableInfoOpen: false, //结构标题
//结构标题 title: null,
title: null, //查看详细资产结构
//查看详细资产结构 infoOpen: false,
infoOpen: false, //资产结构与数据结构载体
//资产结构与数据结构载体 tableInfoForm: {},
tableInfoForm: {}, //当前数据库列表
//当前数据库列表 tableInfoList: [],
tableInfoList: [], //结构数据量
//结构数据量 fundDataNum: {
fundDataNum: { basicNum: null,
basicNum: null, tableNum: null,
tableNum: null, structureNum: null,
structureNum: null, },
}, childrenList: [],
childrenList: [], //树级机构
//树级结构 assetStructureList: [],
assetStructureList: [], //树级结构展示模板
//树级结构展示模版 defaultProps: {
defaultProps: { children: 'children',
children: 'children', label: 'tableName'
label: 'tableName' },
}, //数据字典
dictList: [],
//数据字典
dictList: [],
}
},
created() {
this.getList()
},
methods: {
//获取数据
getList() {
this.fundDataNum = {
basicNum: 0,
tableNum: 0,
structureNum: 0,
}
//树级结构内信息
getTableTree().then(response => {
this.data = []
response.data.forEach(data => {
//几个链接（资产接入）
this.fundDataNum.basicNum += 1
let child = [];
let info = data.basicConfigInfo;
data.children.forEach(tableInfo => {
//几张表（资产模型）
this.fundDataNum.tableNum += 1
//多少字段（资产结构）
this.fundDataNum.structureNum += tableInfo.structureList.length
child.push({
'tableName': tableInfo.tableName,
'info': tableInfo
})
})
//子级存入
this.assetStructureList.push({
'info': info,
'tableName': info.dataResourceName + '('+ info.databaseName + '-' + info.dataSourcesSystemName+')',
'children': child,
})
})
})
console.log(this.assetStructureList)
},
//获取具体表相关数据
handleNodeClick(data) {
// console.log(data)
console.log(data)
//undefined
// console.log(data.children)
this.infoOpen = true
//先将对象存入infoForm对象
this.tableInfoForm = data
//如果判断对象不存在，重新给form 和 list 赋值
if (data.children !== undefined) {
this.vueName = data.tableName
this.tableInfoList = data.children
this.tableInfoForm = data.children[0]
console.log(data.info.id)
getDict(data.info.id).then(response => {
console.log(response)
this.dictList = response.data
})
}else {
// this.tableInfoList = this.assetStructureList.find(assent =>
// assent.info.id === this.tableInfoForm.info.basicId
// ).children
this.tableInfoList = []
} }
console.log('tableList') },
console.log(this.tableInfoList) created() {
console.log('tableForm') this.getList()
console.log(this.tableInfoForm) },
}, methods: {
//获取数据
getList() {
this.fundDataNum = {
basicNum: 0,
tableNum: 0,
structureNum: 0,
}
//树级结构内信息
getTableTree().then(response => {
this.data = []
response.data.forEach(data => {
//几个链接（资产接入）
this.fundDataNum.basicNum += 1
let child = [];
let info = data.basicConfigInfo;
data.children.forEach(tableInfo => {
//几张表（资产模型）
this.fundDataNum.tableNum += 1
//多少字段（资产结构）
this.fundDataNum.structureNum += tableInfo.structureList.length
child.push({
'tableName': tableInfo.tableName,
'info': tableInfo
})
})
//子级存入
this.assetStructureList.push({
'info': info,
'tableName': info.dataResourceName + '(' + info.databaseName + '-' + info.dataSourcesSystemName + ')',
'children': child,
})
})
})
console.log(this.assetStructureList)
},
//获取具体表相关数据
handleNodeClick(data) {
console.log(data)
if (data===undefined){
data = sessionStorage.getItem('handleNodeClickData')
}
sessionStorage.setItem('handleNodeClickData',data)
//undefined
// console.log(data.children)
this.infoOpen = true
//先将对象存入infoForm对象
this.tableInfoForm = data
//如果判断对象不存在，重新给form 和 list 赋值
if (data.children !== undefined) {
this.vueName = data.tableName
this.tableInfoList = data.children
this.tableInfoForm = data.children[0]
console.log(data.info.id)
getDict(data.info.id).then(response => {
console.log(response)
this.dictList = response.data
})
} else {
// this.tableInfoList = this.assetStructureList.find(assent =>
// assent.info.id === this.tableInfoForm.info.basicId
// ).children
this.tableInfoList = []
}
console.log('tableList')
console.log(this.tableInfoList)
console.log('tableForm')
console.log(this.tableInfoForm)
},
} }
}; };
</script> </script>
<style> <style>
body > { body > {
margin-bottom: 40px; margin-bottom: 40px;
} }
</style> </style>

983
src/views/etl/info/index.vue
View File

File diff suppressed because it is too large Load Diff