302 lines
8.3 KiB
Vue
302 lines
8.3 KiB
Vue
<template>
|
|
<el-row :gutter="40" class="panel-group">
|
|
<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="structureTableDataCount.tableCount" :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="structureTableDataCount.tableDataCount" :start-val="0"
|
|
class="card-panel-num"/>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<el-card class="box-card">
|
|
<div slot="header" class="clearfix">
|
|
<span>基础字典</span>
|
|
<el-popover
|
|
placement="top-start"
|
|
title="基础字典"
|
|
width="200"
|
|
trigger="hover"
|
|
content="这个字典是数据资产项目当中的字典内容，而不是本项目当中的字典内容。主要作用为数据清洗过程中数据字典映射作用">
|
|
<i class="el-icon-question" slot="reference"></i>
|
|
</el-popover>
|
|
<el-popover
|
|
placement="right"
|
|
width="400"
|
|
trigger="click">
|
|
<el-row :gutter="20">
|
|
<el-col :span="18">
|
|
<el-input v-model="dictAddName"></el-input>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-button @click="addDict">确定</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
<el-button style="float: right; padding: 3px 0" type="text" slot="reference">新增字典</el-button>
|
|
</el-popover>
|
|
</div>
|
|
<el-row :gutter="20">
|
|
<el-col v-for="(val,key) in dictMap" :md="8" :sm="24" :xs="12">
|
|
<el-card class="box-card" style="height: 300px">
|
|
<div slot="header" class="clearfix">
|
|
<span>{{ key }}</span>
|
|
<el-button style="float: right; padding: 3px 0"
|
|
type="text"
|
|
@click="val.push({ label: null, val: null, isEdit: true })"
|
|
>新增
|
|
</el-button>
|
|
</div>
|
|
<el-table :data="val" style="width: 100%" height="280px">
|
|
<el-table-column prop="label" label="标签">
|
|
<template slot-scope="scope">
|
|
<span v-if="!scope.row.isEdit">{{ scope.row.label }}</span>
|
|
<el-input v-if="scope.row.isEdit" v-model="scope.row.label" size="mini"></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="val" label="值">
|
|
<template slot-scope="scope">
|
|
<span v-if="!scope.row.isEdit">{{ scope.row.val }}</span>
|
|
<el-input v-if="scope.row.isEdit" v-model="scope.row.val" size="mini"></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="val" label="操作">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
v-if="!scope.row.isEdit"
|
|
size="mini"
|
|
type="text"
|
|
icon="el-icon-edit"
|
|
@click="scope.row.isEdit = true"
|
|
>修改
|
|
</el-button>
|
|
<el-button
|
|
v-if="scope.row.isEdit"
|
|
@click="editConfirm(scope.row)"
|
|
size="mini"
|
|
type="text"
|
|
icon="el-icon-finished"
|
|
>确定
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
|
|
</el-col>
|
|
<el-col :span="24" style="margin-top: 20px">
|
|
<el-tabs v-model="activeName" type="border-card">
|
|
<el-tab-pane v-for="(item,index) in structureTableDataCount.childrenList"
|
|
:label="item.tableName + '(' + item.tableNameAnnotation + ')'" :name="index"
|
|
@tab-click="checkTableName">
|
|
<overall-asset-structure :assetTableDetailsList="item.assetTableDetailsList" :tableName="item.tableName"
|
|
:tableNameAnnotation="item.tableNameAnnotation"
|
|
:tableDataCount="item.tableDataCount"/>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import CountTo from 'vue-count-to'
|
|
import OverallAssetStructure from "@/views/data/structure/dashlboard/OverallAssetStructure.vue";
|
|
|
|
export default {
|
|
created() {
|
|
this.init();
|
|
},
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: "-"
|
|
},
|
|
structureTableDataCount: {
|
|
tableCount: null,
|
|
tableDataCount: null,
|
|
childrenList: []
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
activeName: 0,
|
|
dictAddName: null,
|
|
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}
|
|
],
|
|
},
|
|
tableList: [],
|
|
tableParams: null
|
|
}
|
|
},
|
|
components: {
|
|
OverallAssetStructure,
|
|
CountTo
|
|
},
|
|
methods: {
|
|
handleSetLineChartData(type) {
|
|
this.$emit('handleSetLineChartData', type)
|
|
},
|
|
addDict() {
|
|
if (!this.dictAddName) {
|
|
this.$message.error('数据字典，不可为空');
|
|
return;
|
|
}
|
|
this.dictMap[this.dictAddName] = []
|
|
this.dictAddName = null
|
|
}
|
|
}
|
|
}
|
|
</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: 0px;
|
|
|
|
.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>
|