From 12d8e572ba86c05be1573f4dc3c5302f43586a43 Mon Sep 17 00:00:00 2001 From: junjun Date: Mon, 18 Jul 2022 12:57:00 +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=E9=98=88=E5=80=BC=E8=AE=BE=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/chart/chart/table/table-info.js | 217 +++++++++++++++++- 1 file changed, 213 insertions(+), 4 deletions(-) diff --git a/frontend/src/views/chart/chart/table/table-info.js b/frontend/src/views/chart/chart/table/table-info.js index 8751c8eea9..0665a44768 100644 --- a/frontend/src/views/chart/chart/table/table-info.js +++ b/frontend/src/views/chart/chart/table/table-info.js @@ -1,7 +1,8 @@ import { TableSheet, S2Event, PivotSheet } from '@antv/s2' import { getCustomTheme, getSize } from '@/views/chart/chart/common/common_table' -import { DEFAULT_TOTAL } from '@/views/chart/chart/chart' +import { DEFAULT_COLOR_CASE, DEFAULT_TOTAL } from '@/views/chart/chart/chart' import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter' +import { hexColorToRGBA } from '@/views/chart/chart/util' export function baseTableInfo(s2, container, chart, action, tableData) { const containerDom = document.getElementById(container) @@ -59,6 +60,9 @@ export function baseTableInfo(s2, container, chart, action, tableData) { if (!f) { return value } + if (value === null || value === undefined) { + return value + } if (f.groupType === 'd') { return value } else { @@ -86,6 +90,9 @@ export function baseTableInfo(s2, container, chart, action, tableData) { if (!f) { return value } + if (value === null || value === undefined) { + return value + } if (f.groupType === 'd') { return value } else { @@ -116,7 +123,8 @@ export function baseTableInfo(s2, container, chart, action, tableData) { width: containerDom.offsetWidth, height: containerDom.offsetHeight, // showSeriesNumber: true - style: getSize(chart) + style: getSize(chart), + conditions: getConditions(chart) } // 开始渲染 @@ -190,6 +198,9 @@ export function baseTableNormal(s2, container, chart, action, tableData) { if (!f) { return value } + if (value === null || value === undefined) { + return value + } if (f.formatterCfg) { return valueFormatter(value, f.formatterCfg) } else { @@ -211,6 +222,9 @@ export function baseTableNormal(s2, container, chart, action, tableData) { if (!f) { return value } + if (value === null || value === undefined) { + return value + } if (f.formatterCfg) { return valueFormatter(value, f.formatterCfg) } else { @@ -235,7 +249,8 @@ export function baseTableNormal(s2, container, chart, action, tableData) { width: containerDom.offsetWidth, height: containerDom.offsetHeight, // showSeriesNumber: true - style: getSize(chart) + style: getSize(chart), + conditions: getConditions(chart) } // 开始渲染 @@ -319,6 +334,9 @@ export function baseTablePivot(s2, container, chart, action, tableData) { if (!f) { return value } + if (value === null || value === undefined) { + return value + } if (f.formatterCfg) { return valueFormatter(value, f.formatterCfg) } else { @@ -340,6 +358,9 @@ export function baseTablePivot(s2, container, chart, action, tableData) { if (!f) { return value } + if (value === null || value === undefined) { + return value + } if (f.formatterCfg) { return valueFormatter(value, f.formatterCfg) } else { @@ -385,7 +406,8 @@ export function baseTablePivot(s2, container, chart, action, tableData) { width: containerDom.offsetWidth, height: containerDom.offsetHeight, style: getSize(chart), - totals: totalCfg + totals: totalCfg, + conditions: getConditions(chart) } // 开始渲染 @@ -424,3 +446,190 @@ function getCurrentField(valueFieldList, field) { return res } + +function getConditions(chart) { + const res = { + text: [], + background: [] + } + let conditions + try { + const senior = JSON.parse(chart.senior) + conditions = senior.threshold.tableThreshold + } catch (err) { + const senior = JSON.parse(JSON.stringify(chart.senior)) + conditions = senior.threshold.tableThreshold + } + + if (conditions && conditions.length > 0) { + // table item color + let valueColor = DEFAULT_COLOR_CASE.tableFontColor + let valueBgColor = DEFAULT_COLOR_CASE.tableItemBgColor + if (chart.customAttr) { + const customAttr = JSON.parse(chart.customAttr) + // color + if (customAttr.color) { + const c = JSON.parse(JSON.stringify(customAttr.color)) + valueColor = c.tableFontColor + valueBgColor = hexColorToRGBA(c.tableItemBgColor, c.alpha) + } + } + + for (let i = 0; i < conditions.length; i++) { + const field = conditions[i] + res.text.push({ + field: field.field.dataeaseName, + mapping(value) { + return { + fill: mappingColor(value, valueColor, field, 'color') + } + } + }) + res.background.push({ + field: field.field.dataeaseName, + mapping(value) { + return { + fill: mappingColor(value, valueBgColor, field, 'backgroundColor') + } + } + }) + } + } + return res +} + +function mappingColor(value, defaultColor, field, type) { + let color + for (let i = 0; i < field.conditions.length; i++) { + let flag = false + const t = field.conditions[i] + if (field.field.deType === 2 || field.field.deType === 3 || field.field.deType === 4) { + const tv = parseFloat(t.value) + if (t.term === 'eq') { + if (value === tv) { + color = t[type] + flag = true + } + } else if (t.term === 'not_eq') { + if (value !== tv) { + color = t[type] + flag = true + } + } else if (t.term === 'lt') { + if (value < tv) { + color = t[type] + flag = true + } + } else if (t.term === 'gt') { + if (value > tv) { + color = t[type] + flag = true + } + } else if (t.term === 'le') { + if (value <= tv) { + color = t[type] + flag = true + } + } else if (t.term === 'ge') { + if (value >= tv) { + color = t[type] + flag = true + } + } + if (flag) { + break + } else if (i === field.conditions.length - 1) { + color = defaultColor + } + } else if (field.field.deType === 0) { + const tv = t.value + if (t.term === 'eq') { + if (value === tv) { + color = t[type] + flag = true + } + } else if (t.term === 'not_eq') { + if (value !== tv) { + color = t[type] + flag = true + } + } else if (t.term === 'like') { + if (value.includes(tv)) { + color = t[type] + flag = true + } + } else if (t.term === 'not like') { + if (!value.includes(tv)) { + color = t[type] + flag = true + } + } else if (t.term === 'null') { + if (value === null || value === undefined) { + color = t[type] + flag = true + } + } else if (t.term === 'not_null') { + if (value !== null && value !== undefined) { + color = t[type] + flag = true + } + } else if (t.term === 'empty') { + if (value === '') { + color = t[type] + flag = true + } + } else if (t.term === 'not_empty') { + if (value !== '') { + color = t[type] + flag = true + } + } + if (flag) { + break + } else if (i === field.conditions.length - 1) { + color = defaultColor + } + } else { + // time + const tv = new Date(t.value + ' GMT+8').getTime() + const v = new Date(value + ' GMT+8').getTime() + if (t.term === 'eq') { + if (v === tv) { + color = t[type] + flag = true + } + } else if (t.term === 'not_eq') { + if (v !== tv) { + color = t[type] + flag = true + } + } else if (t.term === 'lt') { + if (v < tv) { + color = t[type] + flag = true + } + } else if (t.term === 'gt') { + if (v > tv) { + color = t[type] + flag = true + } + } else if (t.term === 'le') { + if (v <= tv) { + color = t[type] + flag = true + } + } else if (t.term === 'ge') { + if (v >= tv) { + color = t[type] + flag = true + } + } + if (flag) { + break + } else if (i === field.conditions.length - 1) { + color = defaultColor + } + } + } + return color +}