From 762c367f7918786c6013eb4fa0aa32beaedc5df7 Mon Sep 17 00:00:00 2001 From: wisonic-s Date: Thu, 29 Feb 2024 17:34:59 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=20=E8=A1=A8=E6=A0=BC?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=96=91=E9=A9=AC=E7=BA=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../visualization/UserViewEnlarge.vue | 11 ++++++-- .../src/models/chart/chart-attr.d.ts | 8 ++++++ .../components/table/TableCellSelector.vue | 28 +++++++++++++++++++ .../chart/components/editor/util/chart.ts | 13 ++++++--- .../js/panel/charts/table/common.ts | 4 ++- .../js/panel/common/common_table.ts | 20 +++++++------ 6 files changed, 69 insertions(+), 15 deletions(-) diff --git a/core/core-frontend/src/components/visualization/UserViewEnlarge.vue b/core/core-frontend/src/components/visualization/UserViewEnlarge.vue index 9daf75ed77..592664322a 100644 --- a/core/core-frontend/src/components/visualization/UserViewEnlarge.vue +++ b/core/core-frontend/src/components/visualization/UserViewEnlarge.vue @@ -62,7 +62,7 @@ import { exportExcelDownload } from '@/views/chart/components/js/util' import { storeToRefs } from 'pinia' const dvMainStore = dvMainStoreWithOut() const dialogShow = ref(false) -let viewInfo = ref(null) +let viewInfo = ref>(null) const config = ref(null) const canvasStyleData = ref(null) const viewContainer = ref(null) @@ -74,8 +74,15 @@ const { dvInfo } = storeToRefs(dvMainStore) const dialogInit = (canvasStyle, view, item, opt) => { optType.value = opt dialogShow.value = true - viewInfo.value = deepCopy(view) + viewInfo.value = deepCopy(view) as DeepPartial viewInfo.value.customStyle.text.show = false + if (!viewInfo.value.type?.includes('table')) { + viewInfo.value.customAttr.tableHeader.tableHeaderBgColor = '#F8F8F9' + viewInfo.value.customAttr.tableHeader.tableHeaderFontColor = '#7C7E81' + viewInfo.value.customAttr.tableCell.tableItemBgColor = '#FFFFFF' + viewInfo.value.customAttr.tableCell.tableFontColor = '#7C7E81' + viewInfo.value.customAttr.tableCell.enableTableCrossBG = false + } config.value = deepCopy(item) canvasStyleData.value = canvasStyle if (opt === 'details') { diff --git a/core/core-frontend/src/models/chart/chart-attr.d.ts b/core/core-frontend/src/models/chart/chart-attr.d.ts index d7d3bfd1f5..b7d6d93d23 100644 --- a/core/core-frontend/src/models/chart/chart-attr.d.ts +++ b/core/core-frontend/src/models/chart/chart-attr.d.ts @@ -246,6 +246,14 @@ declare interface ChartTableCellAttr { * 单元格行高 */ tableItemHeight: number + /** + * 是否开启斑马纹 + */ + enableTableCrossBG: boolean + /** + * 斑马纹单数行颜色 + */ + tableItemSubBgColor: string } /** diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue index 7c933ae2e5..00f6430fc9 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue @@ -82,6 +82,34 @@ onMounted(() => { @change="changeTableCell('tableItemBgColor')" /> + + + + + + = { }, tableCell: { tableItemBgColor: '#FFFFFF', - tableFontColor: '#000000' + tableFontColor: '#000000', + tableItemSubBgColor: '#EEEEEE' } } @@ -79,7 +80,8 @@ export const DEFAULT_COLOR_CASE_LIGHT: DeepPartial = { }, tableCell: { tableItemBgColor: '#FFFFFF', - tableFontColor: '#000000' + tableFontColor: '#000000', + tableItemSubBgColor: '#EEEEEE' } } @@ -119,7 +121,8 @@ export const DEFAULT_COLOR_CASE_DARK: DeepPartial = { }, tableCell: { tableItemBgColor: '#131E42', - tableFontColor: '#ffffff' + tableFontColor: '#ffffff', + tableItemSubBgColor: '#EEEEEE' } } @@ -333,7 +336,9 @@ export const DEFAULT_TABLE_CELL: ChartTableCellAttr = { tableItemAlign: 'right', tableItemBgColor: '#FFFFFF', tableItemFontSize: 12, - tableItemHeight: 36 + tableItemHeight: 36, + enableTableCrossBG: false, + tableItemSubBgColor: '#EEEEEE' } export const DEFAULT_TITLE_STYLE: ChartTextStyle = { show: true, diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/table/common.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/table/common.ts index c23c220e7c..b309006b65 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/table/common.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/table/common.ts @@ -27,7 +27,9 @@ export const TABLE_EDITOR_PROPERTY_INNER: EditorPropertyInner = { 'tableItemFontSize', 'tableFontColor', 'tableItemAlign', - 'tableItemHeight' + 'tableItemHeight', + 'enableTableCrossBG', + 'tableItemSubBgColor' ], 'title-selector': [ 'title', diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts index d21ff51469..1df2e6e19a 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts @@ -236,7 +236,8 @@ export function getCustomTheme(chart: Chart): S2Theme { if (tableCell) { const tableFontColor = hexColorToRGBA(tableCell.tableFontColor, basicStyle.alpha) const tableItemBgColor = hexColorToRGBA(tableCell.tableItemBgColor, basicStyle.alpha) - const { tableItemAlign, tableItemFontSize } = tableCell + const tableItemSubBgColor = hexColorToRGBA(tableCell.tableItemSubBgColor, basicStyle.alpha) + const { tableItemAlign, tableItemFontSize, enableTableCrossBG } = tableCell const tmpTheme: S2Theme = { rowCell: { cell: { @@ -267,7 +268,7 @@ export function getCustomTheme(chart: Chart): S2Theme { }, dataCell: { cell: { - crossBackgroundColor: tableItemBgColor, + crossBackgroundColor: enableTableCrossBG ? tableItemSubBgColor : tableItemBgColor, backgroundColor: tableItemBgColor }, bolderText: { @@ -381,8 +382,11 @@ export function getConditions(chart: Chart) { if (conditions?.length > 0) { const { tableCell, basicStyle } = parseJson(chart.customAttr) const valueColor = tableCell.tableFontColor - const valueBgColor = hexColorToRGBA(tableCell.tableItemBgColor, basicStyle.alpha) - + let valueBgColor = hexColorToRGBA(tableCell.tableItemBgColor, basicStyle.alpha) + const enableTableCrossBG = tableCell.enableTableCrossBG + if (enableTableCrossBG) { + valueBgColor = null + } for (let i = 0; i < conditions.length; i++) { const field = conditions[i] res.text.push({ @@ -396,9 +400,8 @@ export function getConditions(chart: Chart) { res.background.push({ field: field.field.dataeaseName, mapping(value) { - return { - fill: mappingColor(value, valueBgColor, field, 'backgroundColor') - } + const fill = mappingColor(value, valueBgColor, field, 'backgroundColor') + return fill ? { fill } : null } }) } @@ -614,7 +617,8 @@ class SortTooltip extends BaseTooltip { style: { left: `${this.position?.x}px`, top: `${this.position?.y}px`, - pointerEvents: enterable ? 'all' : 'none' + pointerEvents: enterable ? 'all' : 'none', + zIndex: 9999 }, visible: true })