github/dataease
github/dataease
3
0
Fork 1
mirror of https://github.com/dataease/dataease.git synced 2025-02-24 11:32:57 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat(图表): 透视表表头分开设置背景颜色

Browse Source 
#13538
This commit is contained in:
ulleo 2024-12-10 15:48:30 +08:00
parent 02b757f62a
commit e5a2a7c463
7 changed files with 99 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
core/core-frontend/src/locales/en.ts
View File

@ -1658,6 +1658,9 @@ export default {
field: 'Field',
textColor: 'Text',
backgroundColor: 'Background',
rowBackgroundColor: 'Row Background',
colBackgroundColor: 'Column Background',
cornerBackgroundColor: 'Corner Background',
field_can_not_empty: 'Field cannot be empty',
conditions_can_not_empty:
'Field conditions cannot be empty. If there are no conditions, please delete the field directly',

3
core/core-frontend/src/locales/tw.ts
View File

@ -1626,6 +1626,9 @@ export default {
field: '字段',
textColor: '文字',
backgroundColor: '背景',
rowBackgroundColor: '行背景',
colBackgroundColor: '列背景',
cornerBackgroundColor: '角背景',
field_can_not_empty: '欄位不能為空',
conditions_can_not_empty: '欄位的條件不能為空，若無條件，請直接刪除該欄位',
remark: '備註',

3
core/core-frontend/src/locales/zh-CN.ts
View File

@ -1628,6 +1628,9 @@ export default {
field: '字段',
textColor: '文字',
backgroundColor: '背景',
rowBackgroundColor: '行背景',
colBackgroundColor: '列背景',
cornerBackgroundColor: '角背景',
field_can_not_empty: '字段不能为空',
conditions_can_not_empty: '字段的条件不能为空，若无条件，请直接删除该字段',
remark: '备注',

2
core/core-frontend/src/models/chart/chart-attr.d.ts vendored
View File

@ -359,6 +359,8 @@ declare interface ChartTableHeaderAttr {
* 表头背景颜色
*/
tableHeaderBgColor: string
tableHeaderCornerBgColor: string
tableHeaderColBgColor: string
/**
* 表头字体大小
*/

77
core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue
View File

@ -94,22 +94,67 @@ onMounted(() => {
ref="tableHeaderForm"
label-position="top"
>
<el-form-item
:label="t('chart.backgroundColor')"
class="form-item"
:class="'form-item-' + themes"
v-if="showProperty('tableHeaderBgColor')"
>
<el-color-picker
:effect="themes"
v-model="state.tableHeaderForm.tableHeaderBgColor"
is-custom
:trigger-width="108"
:predefine="predefineColors"
show-alpha
@change="changeTableHeader('tableHeaderBgColor')"
/>
</el-form-item>
<el-row :gutter="8">
<el-col :span="12">
<el-form-item
:label="
chart.type === 'table-pivot'
? t('chart.rowBackgroundColor')
: t('chart.backgroundColor')
"
class="form-item"
:class="'form-item-' + themes"
v-if="showProperty('tableHeaderBgColor')"
>
<el-color-picker
:effect="themes"
v-model="state.tableHeaderForm.tableHeaderBgColor"
is-custom
:trigger-width="108"
:predefine="predefineColors"
show-alpha
@change="changeTableHeader('tableHeaderBgColor')"
/>
</el-form-item>
</el-col>
<template v-if="chart.type === 'table-pivot' && showProperty('tableHeaderBgColor')">
<el-col :span="12">
<el-form-item
:label="t('chart.colBackgroundColor')"
class="form-item"
:class="'form-item-' + themes"
>
<el-color-picker
:effect="themes"
v-model="state.tableHeaderForm.tableHeaderColBgColor"
is-custom
:trigger-width="108"
:predefine="predefineColors"
show-alpha
@change="changeTableHeader('tableHeaderColBgColor')"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
:label="t('chart.cornerBackgroundColor')"
class="form-item"
:class="'form-item-' + themes"
>
<el-color-picker
:effect="themes"
v-model="state.tableHeaderForm.tableHeaderCornerBgColor"
is-custom
:trigger-width="108"
:predefine="predefineColors"
show-alpha
@change="changeTableHeader('tableHeaderCornerBgColor')"
/>
</el-form-item>
</el-col>
</template>
</el-row>
<el-space>
<el-form-item

12
core/core-frontend/src/views/chart/components/editor/util/chart.ts
View File

@ -41,7 +41,9 @@ export const DEFAULT_COLOR_CASE: DeepPartial<ChartAttr> = {
valueFontColor: '#5470c6'
},
tableHeader: {
tableHeaderBgColor: '#6D9A49',
tableHeaderBgColor: '#1E90FF',
tableHeaderCornerBgColor: '#1E90FF',
tableHeaderColBgColor: '#1E90FF',
tableHeaderFontColor: '#000000'
},
tableCell: {
@ -90,6 +92,8 @@ export const DEFAULT_COLOR_CASE_LIGHT: DeepPartial<ChartAttr> = {
},
tableHeader: {
tableHeaderBgColor: '#1E90FF',
tableHeaderCornerBgColor: '#1E90FF',
tableHeaderColBgColor: '#1E90FF',
tableHeaderFontColor: '#000000'
},
tableCell: {
@ -137,6 +141,8 @@ export const DEFAULT_COLOR_CASE_DARK: DeepPartial<ChartAttr> = {
},
tableHeader: {
tableHeaderBgColor: '#1E90FF',
tableHeaderCornerBgColor: '#1E90FF',
tableHeaderColBgColor: '#1E90FF',
tableHeaderFontColor: '#FFFFFF'
},
tableCell: {
@ -412,7 +418,9 @@ export const DEFAULT_TABLE_HEADER: ChartTableHeaderAttr = {
indexLabel: '序号',
showIndex: false,
tableHeaderAlign: 'left',
tableHeaderBgColor: '#6D9A49',
tableHeaderBgColor: '#1E90FF',
tableHeaderCornerBgColor: '#1E90FF',
tableHeaderColBgColor: '#1E90FF',
tableHeaderFontColor: '#000000',
tableTitleFontSize: 12,
tableTitleHeight: 36,

18
core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts
View File

@ -22,6 +22,7 @@ import { useI18n } from '@/hooks/web/useI18n'
import { isNumber, keys, maxBy, merge, minBy, some, isEmpty, get } from 'lodash-es'
import { copyContent, CustomDataCell } from '../../common/common_table'
import Decimal from 'decimal.js'
import { DEFAULT_TABLE_HEADER } from '@/views/chart/components/editor/util/chart'
type DataItem = Record<string, any>
@ -372,6 +373,16 @@ export class TablePivot extends S2ChartView<PivotSheet> {
if (!isAlphaColor(tableHeaderBgColor)) {
tableHeaderBgColor = hexColorToRGBA(tableHeaderBgColor, basicStyle.alpha)
}
let tableHeaderCornerBgColor =
tableHeader.tableHeaderCornerBgColor ?? DEFAULT_TABLE_HEADER.tableHeaderCornerBgColor
if (!isAlphaColor(tableHeaderCornerBgColor)) {
tableHeaderCornerBgColor = hexColorToRGBA(tableHeaderCornerBgColor, basicStyle.alpha)
}
let tableHeaderColBgColor =
tableHeader.tableHeaderColBgColor ?? DEFAULT_TABLE_HEADER.tableHeaderColBgColor
if (!isAlphaColor(tableHeaderColBgColor)) {
tableHeaderColBgColor = hexColorToRGBA(tableHeaderColBgColor, basicStyle.alpha)
}
let tableBorderColor = basicStyle.tableBorderColor
if (!isAlphaColor(tableBorderColor)) {
tableBorderColor = hexColorToRGBA(tableBorderColor, basicStyle.alpha)
@ -382,7 +393,7 @@ export class TablePivot extends S2ChartView<PivotSheet> {
const pivotTheme = {
rowCell: {
cell: {
backgroundColor: tableHeaderBgColor,
backgroundColor: tableHeaderColBgColor,
horizontalBorderColor: tableBorderColor,
verticalBorderColor: tableBorderColor
},
@ -415,6 +426,11 @@ export class TablePivot extends S2ChartView<PivotSheet> {
fontStyle,
fontWeight
}
},
cornerCell: {
cell: {
backgroundColor: tableHeaderCornerBgColor
}
}
}
merge(theme, pivotTheme)