dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(视图):视图 表格 组件样式，支持'标题'与'背景'样式修改

Browse Source
This commit is contained in:
junjie 2021-04-26 12:35:47 +08:00
parent 461b0dda24
commit 0c477f5bcf
3 changed files with 50 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/views/chart/components/component-style/TitleSelector.vue
View File

@ -26,7 +26,7 @@
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.text_v_position')" class="form-item">
<el-form-item v-if="chart.type && !chart.type.includes('table')" :label="$t('chart.text_v_position')" class="form-item">
<el-radio-group v-model="titleForm.vPosition" size="mini" @change="changeTitleStyle">
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>

48
frontend/src/views/chart/components/table/TableNormal.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<p style="width: 100%;">{{ chart.title }}</p>
<div :style="bg_class">
<p v-show="title_show" ref="title" :style="title_class">{{ chart.title }}</p>
<ux-grid
ref="plxTable"
size="mini"
@ -27,6 +27,8 @@
</template>
<script>
import { hexColorToRGBA } from '../../chart/util'
export default {
name: 'TableNormal',
props: {
@ -45,31 +47,63 @@ export default {
data() {
return {
fields: [],
height: 500
height: 500,
title_class: {
margin: '8px 0',
width: '100%',
fontSize: '18px',
color: '#303133',
textAlign: 'left',
fontStyle: 'normal'
},
bg_class: {
background: hexColorToRGBA('#ffffff', 0)
},
title_show: true
}
},
watch: {
chart() {
this.init()
this.calcHeight()
}
},
mounted() {
this.calcHeight()
this.init()
this.calcHeight()
},
methods: {
init() {
const that = this
this.fields = JSON.parse(JSON.stringify(this.chart.data.fields))
const datas = JSON.parse(JSON.stringify(this.chart.data.tableRow))
this.$refs.plxTable.reloadData(datas)
const that = this
this.initStyle()
window.onresize = function() {
that.calcHeight()
}
},
calcHeight() {
const currentHeight = document.documentElement.clientHeight
this.height = currentHeight - 56 - 40 - 84 - 24 - 16 * 2 - 20
const that = this
setTimeout(function() {
const currentHeight = document.documentElement.clientHeight
that.height = currentHeight - 56 - 40 - 84 - that.$refs.title.offsetHeight - 8 * 2 - 20
}, 100)
},
initStyle() {
if (this.chart.customStyle) {
const customStyle = JSON.parse(this.chart.customStyle)
if (customStyle.text) {
this.title_show = customStyle.text.show
this.title_class.fontSize = customStyle.text.fontSize + 'px'
this.title_class.color = customStyle.text.color
this.title_class.textAlign = customStyle.text.hPosition
this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
}
if (customStyle.background) {
this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
}
}
}
}
}

12
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -129,12 +129,12 @@
<el-tab-pane :label="$t('chart.shape_attr')" class="padding-lr">
<color-selector class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
<size-selector class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
<label-selector class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
<tooltip-selector class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
<label-selector v-if="!view.type.includes('table')" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
<tooltip-selector v-if="!view.type.includes('table')" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
</el-tab-pane>
<el-tab-pane :label="$t('chart.module_style')" class="padding-lr">
<title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
<legend-selector class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
<legend-selector v-if="!view.type.includes('table')" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
<x-axis-selector v-if="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
<y-axis-selector v-if="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
<background-color-selector class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
@ -196,7 +196,7 @@
</el-row>
<chart-component v-if="chart.type && !chart.type.includes('table')" :chart-id="chart.id" :chart="chart" class="chart-class" />
<table-normal v-if="chart.type && chart.type.includes('table')" :chart="chart" class="chart-class" />
<table-normal v-if="chart.type && chart.type.includes('table')" :chart="chart" class="table-class" />
</el-row>
</el-col>
</el-row>
@ -762,6 +762,10 @@ export default {
height: calc(100% - 84px);
padding: 10px;
}
.table-class{
height: calc(100% - 104px);
margin: 10px;
}
.dialog-css>>>.el-dialog__title {
font-size: 14px;