From 1eee7faa113e3bbd6e58341666d91c6fd015af0a Mon Sep 17 00:00:00 2001 From: wisonic-s Date: Fri, 24 May 2024 18:00:38 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E8=A1=A8=E6=A0=BC?= =?UTF-8?q?=E9=98=88=E5=80=BC=E6=94=AF=E6=8C=81=E9=9D=9E=E6=8C=87=E6=A0=87?= =?UTF-8?q?=E5=AD=97=E6=AE=B5=20#8111?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- core/core-frontend/src/locales/zh-CN.ts | 2 +- .../src/models/chart/chart-senior.d.ts | 18 ++- .../editor-senior/components/Threshold.vue | 12 +- .../components/dialog/TableThresholdEdit.vue | 138 +++++++++--------- .../js/panel/common/common_table.ts | 43 ++++-- 5 files changed, 126 insertions(+), 87 deletions(-) diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts index afb6e700d4..b228bc2756 100644 --- a/core/core-frontend/src/locales/zh-CN.ts +++ b/core/core-frontend/src/locales/zh-CN.ts @@ -922,7 +922,7 @@ export default { line_type_dotted: '点', value_can_not_empty: '值不能为空', value_error: '值必须为数值', - threshold: '阈值', + threshold: '条件样式', threshold_range: '阈值区间', gauge_threshold_format_error: '格式错误', total_cfg: '总计配置', diff --git a/core/core-frontend/src/models/chart/chart-senior.d.ts b/core/core-frontend/src/models/chart/chart-senior.d.ts index 30747503dd..9a5c384c7f 100644 --- a/core/core-frontend/src/models/chart/chart-senior.d.ts +++ b/core/core-frontend/src/models/chart/chart-senior.d.ts @@ -134,12 +134,26 @@ declare interface ChartThreshold { /** * 表格阈值 */ - tableThreshold: Threshold[] + tableThreshold: TableThreshold[] /** * 文本卡阈值 */ textLabelThreshold: Threshold[] } +declare interface TableThreshold { + /** + * 字段id + */ + fieldId: string + /** + * 字段 + */ + field: ChartViewField + /** + * 条件 + */ + conditions: Threshold[] +} /** * 阈值 */ @@ -157,7 +171,7 @@ declare interface Threshold { */ term: string /** - * + * 字段 */ field: ChartViewField /** diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue index 8b92b9b891..17e363c6ba 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue @@ -336,7 +336,9 @@ init() }} - {{ item.value }} + {{ + item.value + }}   @@ -426,7 +428,7 @@ init() }}
- {{ item.value }} + {{ item.value }} {{ item.min }} ≤{{ t('chart.drag_block_label_value') }}≤ {{ item.max }} @@ -498,8 +500,8 @@ init() @@ -556,7 +558,7 @@ init() !item.term.includes('empty') && item.term !== 'between' " - :title="item.value" + :title="item.value + ''" >{{ item.value }} -import { computed, reactive } from 'vue' +import { PropType, reactive } from 'vue' import { useI18n } from '@/hooks/web/useI18n' import { COLOR_PANEL } from '../../../util/chart' import { fieldType } from '@/utils/attr' -import _ from 'lodash' const { t } = useI18n() const props = defineProps({ chart: { - type: Object, + type: Object as PropType, required: true }, threshold: { @@ -164,17 +163,17 @@ const valueOptions = [ const predefineColors = COLOR_PANEL const state = reactive({ - thresholdArr: [], + thresholdArr: [] as TableThreshold[], fields: [], thresholdObj: { fieldId: '', field: {}, conditions: [] - } + } as TableThreshold }) const init = () => { - state.thresholdArr = JSON.parse(JSON.stringify(props.threshold)) + state.thresholdArr = JSON.parse(JSON.stringify(props.threshold)) as TableThreshold[] initFields() } const initOptions = item => { @@ -193,33 +192,20 @@ const initOptions = item => { } } const initFields = () => { - // 暂时支持指标 + let fields = [] if (props.chart.type === 'table-info') { - if (Object.prototype.toString.call(props.chart.xAxis) === '[object Array]') { - state.fields = JSON.parse(JSON.stringify(props.chart.xAxis)) - } else { - state.fields = JSON.parse(props.chart.xAxis) - } + fields = JSON.parse(JSON.stringify(props.chart.xAxis)) } else if (props.chart.type === 'table-pivot') { - if (Object.prototype.toString.call(props.chart.yAxis) === '[object Array]') { - state.fields = JSON.parse(JSON.stringify(props.chart.yAxis)) - } else { - state.fields = JSON.parse(props.chart.yAxis) - } + const xAxis = JSON.parse(JSON.stringify(props.chart.xAxis)) + const xAxisExt = JSON.parse(JSON.stringify(props.chart.xAxisExt)) + const yAxis = JSON.parse(JSON.stringify(props.chart.yAxis)) + fields = [...xAxis, ...xAxisExt, ...yAxis] } else { - if (Object.prototype.toString.call(props.chart.xAxis) === '[object Array]') { - state.fields = state.fields.concat(JSON.parse(JSON.stringify(props.chart.xAxis))) - } else { - state.fields = state.fields.concat(JSON.parse(props.chart.xAxis)) - } - if (Object.prototype.toString.call(props.chart.yAxis) === '[object Array]') { - state.fields = state.fields.concat(JSON.parse(JSON.stringify(props.chart.yAxis))) - } else { - state.fields = state.fields.concat(JSON.parse(props.chart.yAxis)) - } + const xAxis = JSON.parse(JSON.stringify(props.chart.xAxis)) + const yAxis = JSON.parse(JSON.stringify(props.chart.yAxis)) + fields = [...xAxis, ...yAxis] } - // 暂不支持时间 - // this.fields = this.fields.filter(ele => ele.deType !== 1) + state.fields.splice(0, state.fields.length, ...fields) } const addThreshold = () => { state.thresholdArr.push(JSON.parse(JSON.stringify(state.thresholdObj))) @@ -243,9 +229,6 @@ const removeCondition = (item, index) => { changeThreshold() } -const computedFields = computed(() => { - return _.filter(state.fields, f => f.deType === 2 || f.deType === 3) -}) const addField = item => { // get field if (state.fields && state.fields.length > 0) { @@ -280,7 +263,7 @@ init() + @@ -355,14 +347,16 @@ init() - + + + @@ -372,43 +366,49 @@ init() - + + +
{{ t('chart.textColor') }}
- + + +
{{ t('chart.backgroundColor') }}
- + + +
i.dataeaseName) if (conditions?.length > 0) { - const { tableCell, basicStyle } = parseJson(chart.customAttr) - const valueColor = tableCell.tableFontColor - let valueBgColor = hexColorToRGBA(tableCell.tableItemBgColor, basicStyle.alpha) + const { tableCell, basicStyle, tableHeader } = parseJson(chart.customAttr) const enableTableCrossBG = tableCell.enableTableCrossBG - if (enableTableCrossBG) { - valueBgColor = null - } + const valueColor = tableCell.tableFontColor + const valueBgColor = enableTableCrossBG + ? null + : hexColorToRGBA(tableCell.tableItemBgColor, basicStyle.alpha) + const headerValueColor = tableHeader.tableHeaderFontColor + const headerValueBgColor = hexColorToRGBA(tableHeader.tableHeaderBgColor, basicStyle.alpha) for (let i = 0; i < conditions.length; i++) { const field = conditions[i] + let defaultValueColor = valueColor + let defaultBgColor = valueBgColor + // 透视表表头颜色配置 + if (chart.type === 'table-pivot' && dimFields.includes(field.field.dataeaseName)) { + defaultValueColor = headerValueColor + defaultBgColor = headerValueBgColor + } res.text.push({ field: field.field.dataeaseName, - mapping(value) { + mapping(value, rowData) { + // 总计小计 + if (rowData?.isTotals) { + return null + } + // 表头 + if (rowData?.id && rowData?.field === rowData.id) { + return null + } return { - fill: mappingColor(value, valueColor, field, 'color') + fill: mappingColor(value, defaultValueColor, field, 'color') } } }) res.background.push({ field: field.field.dataeaseName, - mapping(value) { - const fill = mappingColor(value, valueBgColor, field, 'backgroundColor') + mapping(value, rowData) { + if (rowData?.isTotals) { + return null + } + if (rowData?.id && rowData?.field === rowData.id) { + return null + } + const fill = mappingColor(value, defaultBgColor, field, 'backgroundColor') return fill ? { fill } : null } })