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

feat(视图): 表头表格字体颜色分开设置

Browse Source
This commit is contained in:
junjun 2022-09-15 11:07:11 +08:00
parent baea93e8da
commit f61c196dec
6 changed files with 42 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/views/chart/chart/chart.js
View File

@ -18,6 +18,7 @@ export const DEFAULT_COLOR_CASE = {
alpha: 100,
tableHeaderBgColor: '#6D9A49',
tableItemBgColor: '#FFFFFF',
tableHeaderFontColor: '#000000',
tableFontColor: '#000000',
tableStripe: true,
dimensionColor: '#000000',

36
frontend/src/views/chart/chart/common/common_table.js
View File

@ -23,17 +23,17 @@ export function getCustomTheme(chart) {
verticalBorderColor: borderColor
},
text: {
fill: DEFAULT_COLOR_CASE.tableFontColor,
fill: DEFAULT_COLOR_CASE.tableHeaderFontColor,
fontSize: DEFAULT_SIZE.tableTitleFontSize,
textAlign: headerAlign
},
bolderText: {
fill: DEFAULT_COLOR_CASE.tableFontColor,
fill: DEFAULT_COLOR_CASE.tableHeaderFontColor,
fontSize: DEFAULT_SIZE.tableTitleFontSize,
textAlign: headerAlign
},
measureText: {
fill: DEFAULT_COLOR_CASE.tableFontColor,
fill: DEFAULT_COLOR_CASE.tableHeaderFontColor,
fontSize: DEFAULT_SIZE.tableTitleFontSize,
textAlign: headerAlign
}
@ -45,17 +45,17 @@ export function getCustomTheme(chart) {
verticalBorderColor: borderColor
},
text: {
fill: DEFAULT_COLOR_CASE.tableFontColor,
fill: DEFAULT_COLOR_CASE.tableHeaderFontColor,
fontSize: DEFAULT_SIZE.tableTitleFontSize,
textAlign: headerAlign
},
bolderText: {
fill: DEFAULT_COLOR_CASE.tableFontColor,
fill: DEFAULT_COLOR_CASE.tableHeaderFontColor,
fontSize: DEFAULT_SIZE.tableTitleFontSize,
textAlign: headerAlign
},
measureText: {
fill: DEFAULT_COLOR_CASE.tableFontColor,
fill: DEFAULT_COLOR_CASE.tableHeaderFontColor,
fontSize: DEFAULT_SIZE.tableTitleFontSize,
textAlign: headerAlign
}
@ -67,17 +67,17 @@ export function getCustomTheme(chart) {
verticalBorderColor: borderColor
},
text: {
fill: DEFAULT_COLOR_CASE.tableFontColor,
fill: DEFAULT_COLOR_CASE.tableHeaderFontColor,
fontSize: DEFAULT_SIZE.tableTitleFontSize,
textAlign: headerAlign
},
bolderText: {
fill: DEFAULT_COLOR_CASE.tableFontColor,
fill: DEFAULT_COLOR_CASE.tableHeaderFontColor,
fontSize: DEFAULT_SIZE.tableTitleFontSize,
textAlign: headerAlign
},
measureText: {
fill: DEFAULT_COLOR_CASE.tableFontColor,
fill: DEFAULT_COLOR_CASE.tableHeaderFontColor,
fontSize: DEFAULT_SIZE.tableTitleFontSize,
textAlign: headerAlign
}
@ -121,23 +121,23 @@ export function getCustomTheme(chart) {
theme.cornerCell.cell.backgroundColor = h_c
theme.cornerCell.cell.horizontalBorderColor = b_c
theme.cornerCell.cell.verticalBorderColor = b_c
theme.cornerCell.bolderText.fill = c.tableFontColor
theme.cornerCell.text.fill = c.tableFontColor
theme.cornerCell.measureText.fill = c.tableFontColor
theme.cornerCell.bolderText.fill = c.tableHeaderFontColor ? c.tableHeaderFontColor : c.tableFontColor
theme.cornerCell.text.fill = c.tableHeaderFontColor ? c.tableHeaderFontColor : c.tableFontColor
theme.cornerCell.measureText.fill = c.tableHeaderFontColor ? c.tableHeaderFontColor : c.tableFontColor
theme.rowCell.cell.backgroundColor = h_c
theme.rowCell.cell.horizontalBorderColor = b_c
theme.rowCell.cell.verticalBorderColor = b_c
theme.rowCell.bolderText.fill = c.tableFontColor
theme.rowCell.text.fill = c.tableFontColor
theme.rowCell.measureText.fill = c.tableFontColor
theme.rowCell.bolderText.fill = c.tableHeaderFontColor ? c.tableHeaderFontColor : c.tableFontColor
theme.rowCell.text.fill = c.tableHeaderFontColor ? c.tableHeaderFontColor : c.tableFontColor
theme.rowCell.measureText.fill = c.tableHeaderFontColor ? c.tableHeaderFontColor : c.tableFontColor
theme.colCell.cell.backgroundColor = h_c
theme.colCell.cell.horizontalBorderColor = b_c
theme.colCell.cell.verticalBorderColor = b_c
theme.colCell.bolderText.fill = c.tableFontColor
theme.colCell.text.fill = c.tableFontColor
theme.colCell.measureText.fill = c.tableFontColor
theme.colCell.bolderText.fill = c.tableHeaderFontColor ? c.tableHeaderFontColor : c.tableFontColor
theme.colCell.text.fill = c.tableHeaderFontColor ? c.tableHeaderFontColor : c.tableFontColor
theme.colCell.measureText.fill = c.tableHeaderFontColor ? c.tableHeaderFontColor : c.tableFontColor
theme.dataCell.cell.backgroundColor = i_c
theme.dataCell.cell.horizontalBorderColor = b_c

5
frontend/src/views/chart/chart/util.js
View File

@ -45,6 +45,7 @@ export const TYPE_CONFIGS = [
'color-selector': [
'tableHeaderBgColor',
'tableItemBgColor',
'tableHeaderFontColor',
'tableFontColor',
'tableBorderColor',
'alpha'
@ -88,6 +89,7 @@ export const TYPE_CONFIGS = [
'color-selector': [
'tableHeaderBgColor',
'tableItemBgColor',
'tableHeaderFontColor',
'tableFontColor',
'tableBorderColor',
'alpha'
@ -134,6 +136,7 @@ export const TYPE_CONFIGS = [
'color-selector': [
'tableHeaderBgColor',
'tableItemBgColor',
'tableHeaderFontColor',
'tableFontColor',
'tableBorderColor',
'alpha'
@ -1463,6 +1466,7 @@ export const TYPE_CONFIGS = [
'color-selector': [
'tableHeaderBgColor',
'tableItemBgColor',
'tableHeaderFontColor',
'tableFontColor',
'alpha'
],
@ -1499,6 +1503,7 @@ export const TYPE_CONFIGS = [
'color-selector': [
'tableHeaderBgColor',
'tableItemBgColor',
'tableHeaderFontColor',
'tableFontColor',
'alpha'
],

4
frontend/src/views/chart/components/shape-attr/ColorSelector.vue
View File

@ -94,6 +94,9 @@
<el-form-item v-show="showProperty('tableItemBgColor')" :label="$t('chart.table_item_bg')" class="form-item">
<el-color-picker v-model="colorForm.tableItemBgColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableItemBgColor')" />
</el-form-item>
<el-form-item v-show="showProperty('tableHeaderFontColor')" :label="$t('chart.table_header_font_color')" class="form-item">
<el-color-picker v-model="colorForm.tableHeaderFontColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableHeaderFontColor')" />
</el-form-item>
<el-form-item v-show="showProperty('tableFontColor')" :label="$t('chart.table_item_font_color')" class="form-item">
<el-color-picker v-model="colorForm.tableFontColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableFontColor')" />
</el-form-item>
@ -300,6 +303,7 @@ export default {
}
this.colorForm.tableBorderColor = this.colorForm.tableBorderColor ? this.colorForm.tableBorderColor : DEFAULT_COLOR_CASE.tableBorderColor
this.colorForm.tableHeaderFontColor = this.colorForm.tableHeaderFontColor ? this.colorForm.tableHeaderFontColor : this.colorForm.tableFontColor
this.initCustomColor()
}

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

@ -200,12 +200,12 @@ export default {
datas = []
this.resetPage()
}
datas.forEach(item =>{
Object.keys(item).forEach(key=> {
if(typeof item[key] === 'object'){
item[key] = ""
}
})
datas.forEach(item => {
Object.keys(item).forEach(key => {
if (typeof item[key] === 'object') {
item[key] = ''
}
})
})
this.$refs.plxTable.reloadData(datas)
this.$nextTick(() => {
@ -257,7 +257,7 @@ export default {
if (this.chart.customAttr) {
const customAttr = JSON.parse(this.chart.customAttr)
if (customAttr.color) {
this.table_header_class.color = customAttr.color.tableFontColor
this.table_header_class.color = customAttr.color.tableHeaderFontColor ? customAttr.color.tableHeaderFontColor : customAttr.color.tableFontColor
this.table_header_class.background = hexColorToRGBA(customAttr.color.tableHeaderBgColor, customAttr.color.alpha)
this.table_item_class.color = customAttr.color.tableFontColor
this.table_item_class.background = hexColorToRGBA(customAttr.color.tableItemBgColor, customAttr.color.alpha)

10
frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue
View File

@ -67,6 +67,9 @@
<el-form-item :label="$t('chart.table_item_bg')" class="form-item">
<el-color-picker v-model="colorForm.tableItemBgColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableItemBgColor')" />
</el-form-item>
<el-form-item :label="$t('chart.table_header_font_color')" class="form-item">
<el-color-picker v-model="colorForm.tableHeaderFontColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableHeaderFontColor')" />
</el-form-item>
<el-form-item :label="$t('chart.table_item_font_color')" class="form-item">
<el-color-picker v-model="colorForm.tableFontColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableFontColor')" />
</el-form-item>
@ -82,7 +85,7 @@
<script>
import { COLOR_PANEL } from '@/views/chart/chart/chart'
import { mapState } from 'vuex'
import bus from "@/utils/bus";
import bus from '@/utils/bus'
export default {
name: 'ColorSelector',
@ -183,16 +186,17 @@ export default {
]),
created() {
this.initForm()
bus.$on('onThemeColorChange',this.initForm)
bus.$on('onThemeColorChange', this.initForm)
},
beforeDestroy() {
bus.$off('onThemeColorChange',this.initForm)
bus.$off('onThemeColorChange', this.initForm)
},
mounted() {
},
methods: {
initForm() {
this.colorForm = this.canvasStyleData.chartInfo.chartColor
this.colorForm.tableHeaderFontColor = this.colorForm.tableHeaderFontColor ? this.colorForm.tableHeaderFontColor : this.colorForm.tableFontColor
},
changeColorOption(modifyName = 'value') {
const that = this