资产结构测试7
parent
0f8c27aeca
commit
88359ed9e6
|
|
@ -61,6 +61,14 @@ export function getTableTree(){
|
|||
})
|
||||
}
|
||||
|
||||
// 修改资产数据结构
|
||||
export function updateStructureInfo(data) {
|
||||
return request({
|
||||
url: '/etl/info/updateStructureInfo',
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
//获取字典
|
||||
export function getDict(id){
|
||||
|
|
|
|||
|
|
@ -57,9 +57,8 @@ export default {
|
|||
structureNum: null,
|
||||
}
|
||||
},
|
||||
|
||||
watch:{
|
||||
infoOpen(newName, oldName){
|
||||
watch: {
|
||||
infoOpen(newName, oldName) {
|
||||
console.log(newName)
|
||||
console.log(oldName)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,278 +1,445 @@
|
|||
<template>
|
||||
<div>
|
||||
|
||||
<el-row :gutter="40" class="panel-group">
|
||||
<div class="title-header">
|
||||
{{ this.name }}
|
||||
</div>
|
||||
<el-col :lg="12" :sm="12" :xs="12" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('messages')">
|
||||
<div>
|
||||
<el-row :gutter="40" class="panel-group">
|
||||
<div class="title-header">
|
||||
{{ this.name }}
|
||||
</div>
|
||||
<el-col :lg="12" :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"/>
|
||||
<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="this.tableInfoList.length" :start-val="0" class="card-panel-num"/>
|
||||
<div class="card-panel-text">
|
||||
资产模型
|
||||
</div>
|
||||
<count-to :duration="3000" :end-val="this.tableInfoList.length" :start-val="0" class="card-panel-num"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :lg="12" :sm="12" :xs="12" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('purchases')">
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :lg="12" :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"/>
|
||||
<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="this.structureNum" :start-val="0" class="card-panel-num"/>
|
||||
<div class="card-panel-text">
|
||||
数据模型
|
||||
</div>
|
||||
<count-to :duration="3200" :end-val="this.structureNum" :start-val="0" class="card-panel-num"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="40" class="panel-group">
|
||||
|
||||
|
||||
|
||||
<el-card>
|
||||
<el-tabs type="border-card" @tab-click="handleClick">
|
||||
<el-tab-pane
|
||||
v-for="tableInfo in tableInfoList"
|
||||
:label="tableInfo.tableName+'('+tableInfo.info.tableRemark+')'">
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="40" class="panel-group">
|
||||
<el-card>
|
||||
<el-tabs type="border-card" @tab-click="handleClick">
|
||||
<el-tab-pane
|
||||
v-for="tableInfo in tableInfoList"
|
||||
:label="tableInfo.tableName+'('+tableInfo.info.tableRemark+')'">
|
||||
<el-card>
|
||||
<div slot="header" class="clearfix">
|
||||
|
||||
<span>基础字典</span>
|
||||
<!--新增字典表-->
|
||||
<el-button type="text" style="float: right" @click="insertDictOpen = true">新增字典</el-button>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-card style="width: 3000px; float: left;margin: 10px" v-for="dictInfo in dictList">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>
|
||||
|
||||
{{dictInfo.dictName}}
|
||||
({{dictInfo.dictType}})
|
||||
</span>
|
||||
|
||||
|
||||
</div>
|
||||
<div slot="header" class="clearfix">
|
||||
<span>基础字典</span>
|
||||
<!--新增字典表-->
|
||||
<el-button type="text" style="float: right" @click="insertDictOpen = true">新增字典</el-button>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-card style="width: 300px; float: left;margin:10px" v-for="dictInfo in dictList">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>{{ dictInfo.dictName }}({{ dictInfo.dictType }})</span>
|
||||
<!--新增字典具体信息-->
|
||||
<el-button style="float: right; padding: 3px 0" type="text" @click="insertDictList(dictInfo)">新增内容
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table :data="dictInfo.dictInfoList" height="216">
|
||||
<el-table-column label="标签">
|
||||
<template slot-scope="scope">
|
||||
<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-row>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!--资产模型基本信息-->
|
||||
<el-card>
|
||||
<div slot="header" class="clearfix">
|
||||
<span>资产模型基本信息</span>
|
||||
</div>
|
||||
|
||||
<el-descriptions
|
||||
class="margin-top"
|
||||
:column="2"
|
||||
border>
|
||||
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-user"></i>
|
||||
表名称
|
||||
</template>
|
||||
{{tableInfo.info.tableName}}
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-mobile-phone"></i>
|
||||
表备注
|
||||
</template>
|
||||
{{tableInfo.info.tableRemark}}
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-location-outline"></i>
|
||||
数据量
|
||||
</template>
|
||||
{{tableInfo.info.dataNum}}
|
||||
</el-descriptions-item>
|
||||
|
||||
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-tickets"></i>
|
||||
备注
|
||||
</template>
|
||||
<el-tag size="small">小黄</el-tag>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div slot="header" class="clearfix">
|
||||
<span>资产模型基本信息</span>
|
||||
</div>
|
||||
<el-descriptions
|
||||
class="margin-top"
|
||||
:column="2"
|
||||
border>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-user"></i>
|
||||
表名称
|
||||
</template>
|
||||
{{ tableInfo.info.tableName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-mobile-phone"></i>
|
||||
表备注
|
||||
</template>
|
||||
{{ tableInfo.info.tableRemark }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-location-outline"></i>
|
||||
数据量
|
||||
</template>
|
||||
{{ tableInfo.info.dataNum }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-tickets"></i>
|
||||
备注
|
||||
</template>
|
||||
<el-tag size="small">学校</el-tag>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</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">
|
||||
<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="是否主键" />
|
||||
<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="是否为空" />
|
||||
<el-table-column fixed prop="defaultValue" label="默认值" />
|
||||
<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">
|
||||
操作
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-popover trigger="hover" placement="left"
|
||||
@mouseover.native="findDictList(scope.row.dictionaryTable)"
|
||||
v-if="scope.row.dictionaryTable !== null">
|
||||
<el-table
|
||||
:data="findedDictList"
|
||||
border
|
||||
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>
|
||||
<div slot="reference" class="name-wrapper">
|
||||
<el-tag >
|
||||
{{ scope.row.dictionaryTable }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed prop="dictionaryTable" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
@click="editDictInfo(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</el-row>
|
||||
|
||||
<!--添加新字典表对话框-->
|
||||
<el-dialog title="字典表基础信息" style="float:left; margin:20px" :visible.sync="insertDictOpen">
|
||||
<el-form :model="assetDictFormInfo">
|
||||
|
||||
<el-form-item label="字典表名" label-width="120px">
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</el-row>
|
||||
<!-- 添加新字典表对话框-->
|
||||
<el-dialog title="字典表基础信息" style="float:left; margin:20px" :visible.sync="insertDictOpen">
|
||||
<el-form :model="assetDictFormInfo">
|
||||
<el-form-item label="字典表名" label-width="120px">
|
||||
<el-input v-model="assetDictFormInfo.dictName" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="字典类型" label-width="120px">
|
||||
<el-input v-model="assetDictFormInfo.dictType" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="insertDictOpen = false">取消</el-button>
|
||||
<el-button type="primary" @click="insertDict(tableInfo.info)">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="字典类型" label-width="120px">
|
||||
<el-input v-model="assetDictFormInfo.dictType" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="insertDictOpen = false">取 消</el-button>
|
||||
<el-button type="primary" @click="insertDict(tableInfo.info)">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 编辑字典详细信息 -->
|
||||
<el-dialog title="数据详情修改" :visible.sync="structureInfoFormOpen">
|
||||
{{ this.structureInfoForm }}
|
||||
<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>
|
||||
|
||||
<script>
|
||||
import CountTo from "vue-count-to";
|
||||
import {insertDict,insertDictInfo} from "@/api/etl/etl";
|
||||
import CountTo from 'vue-count-to'
|
||||
import {insertDict, insertDictInfo, updateStructureInfo} from "@/api/etl/etl";
|
||||
|
||||
export default {
|
||||
|
||||
props: {
|
||||
name:null,
|
||||
tableInfoList: Array,
|
||||
dictList: Array
|
||||
},
|
||||
|
||||
watch:{
|
||||
tableInfoList: {
|
||||
handler(newValue,oldValue){
|
||||
this.structureNum = 0
|
||||
console.log('new')
|
||||
console.log(oldValue)
|
||||
console.log(newValue)
|
||||
newValue.forEach(asset =>{
|
||||
this.structureNum += asset.info.structureList.length
|
||||
})
|
||||
console.log(this.structureNum)
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
props: {
|
||||
name: null,
|
||||
tableInfoList: Array,
|
||||
dictList: Array
|
||||
},
|
||||
watch: {
|
||||
//每个数据库对应的具体数据
|
||||
tableInfoList: {
|
||||
handler(newValue) {
|
||||
this.structureNum = 0
|
||||
newValue.forEach(asset => {
|
||||
this.structureNum += asset.info.structureList.length
|
||||
})
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
'structureInfoForm.isDictionary': {
|
||||
handler(newValue) {
|
||||
// if (newValue === "") {
|
||||
//
|
||||
// } 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>
|
||||
|
||||
|
|
@ -393,8 +560,3 @@ export default {
|
|||
line-height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,106 +1,109 @@
|
|||
@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<el-row :gutter="40" class="panel-group">
|
||||
<el-card>
|
||||
<el-tabs type="border-card" @tab-click="handleClick">
|
||||
<el-tab-pane
|
||||
:v-model="tableInfo"
|
||||
:label="tableInfo.tableName+'('+tableInfo.info.tableRemark+')'">
|
||||
<!-- 资产模型基本信息-->
|
||||
<el-card>
|
||||
<div slot="header" class="clearfix">
|
||||
<span>资产模型基本信息</span>
|
||||
</div>
|
||||
<el-descriptions
|
||||
class="margin-top"
|
||||
:column="2" :size="size"
|
||||
border>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-user"></i>
|
||||
表名称
|
||||
</template>
|
||||
{{ tableInfo.info.tableName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-mobile-phone"></i>
|
||||
表备注
|
||||
</template>
|
||||
{{ tableInfo.info.tableRemark }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-location-outline"></i>
|
||||
数据量
|
||||
</template>
|
||||
{{ tableInfo.info.dataNum }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-tickets"></i>
|
||||
备注
|
||||
</template>
|
||||
<el-tag size="small">学校</el-tag>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</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="是否主键" />
|
||||
<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="是否为空" />
|
||||
<el-table-column fixed prop="defaultValue" label="默认值" />
|
||||
<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">
|
||||
操作
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-row :gutter="40" class="panel-group">
|
||||
<el-card>
|
||||
<el-tabs type="border-card" @tab-click="handleClick">
|
||||
<el-tab-pane
|
||||
:v-model="tableInfo"
|
||||
:label="tableInfo.tableName+'('+tableInfo.info.tableRemark+')'">
|
||||
<!-- 资产模型基本信息-->
|
||||
<el-card>
|
||||
<div slot="header" class="clearfix">
|
||||
<span>资产模型基本信息</span>
|
||||
</div>
|
||||
<el-descriptions
|
||||
class="margin-top"
|
||||
:column="2" :size="size"
|
||||
border>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-user"></i>
|
||||
表名称
|
||||
</template>
|
||||
{{ tableInfo.info.tableName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-mobile-phone"></i>
|
||||
表备注
|
||||
</template>
|
||||
{{ tableInfo.info.tableRemark }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-location-outline"></i>
|
||||
数据量
|
||||
</template>
|
||||
{{ tableInfo.info.dataNum }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-tickets"></i>
|
||||
备注
|
||||
</template>
|
||||
<el-tag size="small">学校</el-tag>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</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="是否主键" />
|
||||
<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="是否为空" />
|
||||
<el-table-column fixed prop="defaultValue" label="默认值" />
|
||||
<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">
|
||||
操作
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</el-row>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CountTo from 'vue-count-to'
|
||||
|
||||
export default {
|
||||
props:{
|
||||
tableInfo:[],
|
||||
},
|
||||
|
||||
name: 'TableInfoModel',
|
||||
components: {
|
||||
CountTo
|
||||
},
|
||||
methods: {
|
||||
handleSetLineChartData(type) {
|
||||
this.$emit('handleSetLineChartData', type)
|
||||
props:{
|
||||
tableInfo:Array,
|
||||
},
|
||||
handleClick(val,event){
|
||||
console.log(val)
|
||||
console.log(event)
|
||||
|
||||
name: 'TableInfoModel',
|
||||
components: {
|
||||
CountTo
|
||||
},
|
||||
data() {
|
||||
return{
|
||||
tableInfo:this.tableInfo
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSetLineChartData(type) {
|
||||
this.$emit('handleSetLineChartData', type)
|
||||
},
|
||||
handleClick(val,event){
|
||||
console.log(val)
|
||||
console.log(event)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,151 +1,142 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-container style="height: 1000px">
|
||||
<el-aside>
|
||||
<el-tree :data="assetStructureList"
|
||||
:props="defaultProps"
|
||||
@node-click="handleNodeClick">
|
||||
|
||||
</el-tree>
|
||||
</el-aside>
|
||||
|
||||
<el-main>
|
||||
<AssetsBasic v-if="!infoOpen" :info-open="infoOpen" :fund-data-num="fundDataNum"></AssetsBasic>
|
||||
<AssetsModel v-if="this.tableInfoList.length!==0" :name="vueName" :dictList="dictList" :tableInfoList="tableInfoList"></AssetsModel>
|
||||
|
||||
<TableInfoModel v-if="this.tableInfoList.length===0" :table-info="tableInfoForm"></TableInfoModel>
|
||||
</el-main>
|
||||
|
||||
</el-container>
|
||||
</div>
|
||||
<div>
|
||||
<el-container style="height: 1000px">
|
||||
<el-aside>
|
||||
<el-tree :data="assetStructureList"
|
||||
:props="defaultProps"
|
||||
@node-click="handleNodeClick"></el-tree>
|
||||
</el-aside>
|
||||
<el-main>
|
||||
<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>
|
||||
<TableInfoModel v-if="this.tableInfoList.length===0" :table-info="tableInfoForm"></TableInfoModel>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {getDict,getTableTree} from "@/api/etl/etl";
|
||||
import {getDict, getTableTree} from "@/api/etl/etl";
|
||||
import AssetsBasic from "@/views/etl/construction/AssetsBasic.vue";
|
||||
import AssetsModel from "@/views/etl/construction/AssetsModel.vue";
|
||||
import TableInfoModel from "@/views/etl/construction/TableInfoModel.vue";
|
||||
|
||||
export default {
|
||||
name:'construction',
|
||||
name: 'construction',
|
||||
|
||||
components:{TableInfoModel, AssetsModel, AssetsBasic },
|
||||
|
||||
data() {
|
||||
return {
|
||||
vueName:null,
|
||||
//表详情页面
|
||||
tableInfoOpen: false,
|
||||
//结构标题
|
||||
title: null,
|
||||
//查看详细资产结构
|
||||
infoOpen: false,
|
||||
//资产结构与数据结构载体
|
||||
tableInfoForm: {},
|
||||
//当前数据库列表
|
||||
tableInfoList: [],
|
||||
//结构数据量
|
||||
fundDataNum: {
|
||||
basicNum: null,
|
||||
tableNum: null,
|
||||
structureNum: null,
|
||||
},
|
||||
childrenList: [],
|
||||
//树级结构
|
||||
assetStructureList: [],
|
||||
//树级结构展示模版
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'tableName'
|
||||
},
|
||||
|
||||
//数据字典
|
||||
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 = []
|
||||
components: { TableInfoModel, AssetsModel, AssetsBasic},
|
||||
data() {
|
||||
return {
|
||||
vueName:null,
|
||||
//表详情页面
|
||||
tableInfoOpen: false,
|
||||
//结构标题
|
||||
title: null,
|
||||
//查看详细资产结构
|
||||
infoOpen: false,
|
||||
//资产结构与数据结构载体
|
||||
tableInfoForm: {},
|
||||
//当前数据库列表
|
||||
tableInfoList: [],
|
||||
//结构数据量
|
||||
fundDataNum: {
|
||||
basicNum: null,
|
||||
tableNum: null,
|
||||
structureNum: null,
|
||||
},
|
||||
childrenList: [],
|
||||
//树级机构
|
||||
assetStructureList: [],
|
||||
//树级结构展示模板
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'tableName'
|
||||
},
|
||||
//数据字典
|
||||
dictList: [],
|
||||
}
|
||||
console.log('tableList')
|
||||
console.log(this.tableInfoList)
|
||||
console.log('tableForm')
|
||||
console.log(this.tableInfoForm)
|
||||
},
|
||||
},
|
||||
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)
|
||||
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>
|
||||
<style>
|
||||
|
||||
|
||||
body > {
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue