380 lines
12 KiB
Vue
380 lines
12 KiB
Vue
<template>
|
|
<div>
|
|
|
|
<el-row :gutter="40" class="panel-group">
|
|
<!-- insertDictOpen {{ this.insertDictOpen }}-->
|
|
<!-- <p></p>-->
|
|
<!-- assetDictFormInfo {{ this.assetDictFormInfo }}-->
|
|
<!-- <p></p>-->
|
|
<!-- dictFormInfoOpen {{ this.dictFormInfoOpen }}-->
|
|
<!-- <p></p>-->
|
|
<!-- dictFormInfo {{ this.dictFormInfo }}-->
|
|
<!-- <p></p>-->
|
|
<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 gutter="20">
|
|
<el-col v-for="dictInfo in dictList" :span="8">
|
|
<el-card style="width: 300px;">
|
|
<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">
|
|
<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>
|
|
{{ scope.row.isEdit }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</el-col>
|
|
</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>
|
|
</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-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>
|
|
</template>
|
|
<script>
|
|
import CountTo from "vue-count-to";
|
|
import {insertDict,insertDictInfo} from "@/api/etl/etl";
|
|
|
|
export default {
|
|
|
|
props: {
|
|
tableInfoList: Array,
|
|
dictList: Array
|
|
},
|
|
|
|
name: 'AssetsModel',
|
|
components:{
|
|
CountTo
|
|
},
|
|
|
|
data(){
|
|
return {
|
|
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>
|
|
|
|
<style lang="scss" scoped>
|
|
.panel-group {
|
|
margin-top: 18px;
|
|
|
|
.card-panel-col {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.card-panel {
|
|
height: 108px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
color: #666;
|
|
background: #fff;
|
|
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
|
|
border-color: rgba(0, 0, 0, .05);
|
|
|
|
&:hover {
|
|
.card-panel-icon-wrapper {
|
|
color: #fff;
|
|
}
|
|
|
|
.icon-people {
|
|
background: #40c9c6;
|
|
}
|
|
|
|
.icon-message {
|
|
background: #36a3f7;
|
|
}
|
|
|
|
.icon-money {
|
|
background: #f4516c;
|
|
}
|
|
|
|
.icon-shopping {
|
|
background: #34bfa3
|
|
}
|
|
}
|
|
|
|
.icon-people {
|
|
color: #40c9c6;
|
|
}
|
|
|
|
.icon-message {
|
|
color: #36a3f7;
|
|
}
|
|
|
|
.icon-money {
|
|
color: #f4516c;
|
|
}
|
|
|
|
.icon-shopping {
|
|
color: #34bfa3
|
|
}
|
|
|
|
.card-panel-icon-wrapper {
|
|
float: left;
|
|
margin: 14px 0 0 14px;
|
|
padding: 16px;
|
|
transition: all 0.38s ease-out;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.card-panel-icon {
|
|
float: left;
|
|
font-size: 48px;
|
|
}
|
|
|
|
.card-panel-description {
|
|
float: right;
|
|
font-weight: bold;
|
|
margin: 26px;
|
|
margin-left: 0;
|
|
|
|
.card-panel-text {
|
|
line-height: 18px;
|
|
color: rgba(0, 0, 0, 0.45);
|
|
font-size: 16px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.card-panel-num {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 550px) {
|
|
.card-panel-description {
|
|
display: none;
|
|
}
|
|
|
|
.card-panel-icon-wrapper {
|
|
float: none !important;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0 !important;
|
|
|
|
.svg-icon {
|
|
display: block;
|
|
margin: 14px auto !important;
|
|
float: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.title-header {
|
|
text-align: center;
|
|
width: 100%;
|
|
font-size: 46px;
|
|
font-weight: 600;
|
|
line-height: 100px;
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|