From c6a7747d3531cf2d477736c6e07fff191508e4d4 Mon Sep 17 00:00:00 2001 From: wisonic-s Date: Mon, 25 Mar 2024 19:31:48 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=20=E9=80=8F=E8=A7=86?= =?UTF-8?q?=E8=A1=A8=E9=98=88=E5=80=BC=E6=94=AF=E6=8C=81=E9=80=89=E6=8B=A9?= =?UTF-8?q?=E7=BB=B4=E5=BA=A6=20close=20#7523?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- core/frontend/src/lang/en.js | 5 +- core/frontend/src/lang/tw.js | 5 +- core/frontend/src/lang/zh.js | 5 +- .../src/views/chart/chart/table/table-info.js | 113 +++++++++--- .../chart/components/senior/Threshold.vue | 21 +++ .../senior/dialog/TableThresholdEdit.vue | 161 +++++++++++++++--- 6 files changed, 261 insertions(+), 49 deletions(-) diff --git a/core/frontend/src/lang/en.js b/core/frontend/src/lang/en.js index 80d44e924f..328ee42f59 100644 --- a/core/frontend/src/lang/en.js +++ b/core/frontend/src/lang/en.js @@ -1470,7 +1470,7 @@ export default { line_type_dotted: 'Dotted', value_can_not_empty: 'Value can not be empty', value_error: 'Value illegal', - threshold: 'Threshold', + threshold: 'Conditional styles', threshold_range: 'Range', gauge_threshold_format_error: 'Format Error', total_cfg: 'Total Config', @@ -1660,7 +1660,8 @@ export default { regression_pow: 'Power law', regression_loess: 'LOESS', regression_algo: 'Algorithm', - trend_line: 'Trend Line' + trend_line: 'Trend Line', + field_enum: 'Enumeration values' }, dataset: { scope_edit: 'Effective only when editing', diff --git a/core/frontend/src/lang/tw.js b/core/frontend/src/lang/tw.js index 29a8ee5cc3..bb735436cd 100644 --- a/core/frontend/src/lang/tw.js +++ b/core/frontend/src/lang/tw.js @@ -1468,7 +1468,7 @@ export default { line_type_dotted: '點', value_can_not_empty: '值不能為空', value_error: '值必須為數值', - threshold: '閾值', + threshold: '條件樣式', threshold_range: '閾值區間', gauge_threshold_format_error: '格式錯誤', total_cfg: '總計配置', @@ -1652,7 +1652,8 @@ export default { regression_pow: '冪函數', regression_loess: '局部加權', regression_algo: '算法', - trend_line: '趨勢線' + trend_line: '趨勢線', + field_enum: '枚舉值' }, dataset: { scope_edit: '僅編輯時生效', diff --git a/core/frontend/src/lang/zh.js b/core/frontend/src/lang/zh.js index 5d7f34c70a..264fb73db6 100644 --- a/core/frontend/src/lang/zh.js +++ b/core/frontend/src/lang/zh.js @@ -1468,7 +1468,7 @@ export default { line_type_dotted: '点', value_can_not_empty: '值不能为空', value_error: '值必须为数值', - threshold: '阈值', + threshold: '条件样式', threshold_range: '阈值区间', gauge_threshold_format_error: '格式错误', total_cfg: '总计配置', @@ -1652,7 +1652,8 @@ export default { regression_pow: '幂函数', regression_loess: '局部加权', regression_algo: '算法', - trend_line: '趋势线' + trend_line: '趋势线', + field_enum: '枚举值' }, dataset: { scope_edit: '仅编辑时生效', diff --git a/core/frontend/src/views/chart/chart/table/table-info.js b/core/frontend/src/views/chart/chart/table/table-info.js index 309f079273..87fc5ac4b7 100644 --- a/core/frontend/src/views/chart/chart/table/table-info.js +++ b/core/frontend/src/views/chart/chart/table/table-info.js @@ -766,12 +766,16 @@ function getConditions(chart) { // table item color let valueColor = DEFAULT_COLOR_CASE.tableFontColor let valueBgColor = DEFAULT_COLOR_CASE.tableItemBgColor + let headerColor = DEFAULT_COLOR_CASE.tableHeaderFontColor + let headerBgColor = DEFAULT_COLOR_CASE.tableHeaderBgColor if (chart.customAttr) { const customAttr = JSON.parse(chart.customAttr) // color if (customAttr.color) { const c = JSON.parse(JSON.stringify(customAttr.color)) valueColor = c.tableFontColor + headerColor = c.tableHeaderFontColor + headerBgColor = c.tableHeaderBgColor const enableTableCrossBG = c.enableTableCrossBG if (!enableTableCrossBG) { valueBgColor = hexColorToRGBA(c.tableItemBgColor, c.alpha) @@ -781,21 +785,35 @@ function getConditions(chart) { } } + const dimensionAxis = [...JSON.parse(chart.xaxis), ...JSON.parse(chart.xaxisExt)] const filedValueMap = getFieldValueMap(chart) for (let i = 0; i < conditions.length; i++) { const field = conditions[i] + let defaultTextColor = valueColor + let defaultBgColor = valueBgColor + if (chart.type === 'table-pivot') { + const index = dimensionAxis.findIndex(i => i.dataeaseName === field.field.dataeaseName) + defaultTextColor = index === -1 ? valueColor : headerColor + defaultBgColor = index === -1 ? valueBgColor : headerBgColor + } res.text.push({ field: field.field.dataeaseName, mapping(value, rowData) { + if (rowData?.isTotals) { + return null + } return { - fill: mappingColor(value, valueColor, field, 'color', filedValueMap, rowData) + fill: mappingColor(value, defaultTextColor, field, 'color', filedValueMap, rowData) } } }) res.background.push({ field: field.field.dataeaseName, mapping(value, rowData) { - const fill = mappingColor(value, valueBgColor, field, 'backgroundColor', filedValueMap, rowData) + if (rowData?.isTotals) { + return null + } + const fill = mappingColor(value, defaultBgColor, field, 'backgroundColor', filedValueMap, rowData) if (fill) { return { fill } } @@ -884,28 +902,62 @@ function mappingColor(value, defaultColor, field, type, filedValueMap, rowData) let tv if (t.field === '1') { tv = getValue(t.targetField, filedValueMap, rowData) + } else if (t.field === '2') { + tv = t.enumValues } else { tv = t.value } if (t.term === 'eq') { - if (value === tv) { - color = t[type] - flag = true + if (t.field === '2') { + const index = tv?.findIndex(v => v === value) + if (index !== -1) { + color = t[type] + flag = true + } + } else { + if (value === tv) { + color = t[type] + flag = true + } } } else if (t.term === 'not_eq') { - if (value !== tv) { - color = t[type] - flag = true + if (t.field === '2') { + const index = tv?.findIndex(v => v === value) + if (index === -1) { + color = t[type] + flag = true + } + } else { + if (value !== tv) { + color = t[type] + flag = true + } } } else if (t.term === 'like') { - if (value.includes(tv)) { - color = t[type] - flag = true + if (t.field === '2') { + const index = tv?.findIndex(v => value.includes(v)) + if (index !== -1) { + color = t[type] + flag = true + } + } else { + if (value.includes(tv)) { + color = t[type] + flag = true + } } } else if (t.term === 'not like') { - if (!value.includes(tv)) { - color = t[type] - flag = true + if (t.field === '2') { + const index = tv?.findIndex(v => value.includes(v)) + if (index === -1) { + color = t[type] + flag = true + } + } else { + if (!value.includes(tv)) { + color = t[type] + flag = true + } } } else if (t.term === 'null') { if (value === null || value === undefined || value === '') { @@ -931,20 +983,41 @@ function mappingColor(value, defaultColor, field, type, filedValueMap, rowData) if (fieldValue) { tv = new Date(fieldValue.replace(/-/g, '/') + ' GMT+8').getTime() } + } else if (t.field === '2') { + tv = [] + t.enumValues?.forEach(v => { + tv.push(new Date(v.replace(/-/g, '/') + ' GMT+8').getTime()) + }) } else { tv = new Date(t.value.replace(/-/g, '/') + ' GMT+8').getTime() } const v = new Date(value.replace(/-/g, '/') + ' GMT+8').getTime() if (t.term === 'eq') { - if (v === tv) { - color = t[type] - flag = true + if (t.field === '2') { + const index = tv.findIndex(val => v === val) + if (index !== -1) { + color = t[type] + flag = true + } + } else { + if (v === tv) { + color = t[type] + flag = true + } } } else if (t.term === 'not_eq') { - if (v !== tv) { - color = t[type] - flag = true + if (t.field === '2') { + const index = tv.findIndex(val => v === val) + if (index === -1) { + color = t[type] + flag = true + } + } else { + if (v !== tv) { + color = t[type] + flag = true + } } } else if (t.term === 'lt') { if (v < tv) { diff --git a/core/frontend/src/views/chart/components/senior/Threshold.vue b/core/frontend/src/views/chart/components/senior/Threshold.vue index 565a2b540c..b0f1ba128c 100644 --- a/core/frontend/src/views/chart/components/senior/Threshold.vue +++ b/core/frontend/src/views/chart/components/senior/Threshold.vue @@ -329,6 +329,10 @@ v-if="item.field === '1'" :title="$t('chart.field_dynamic')" >{{ $t('chart.field_dynamic') }} + {{ $t('chart.field_enum') }}   + +
+ {{ item.enumValues.join(',') }} + + + +
+ - + + + + + import { COLOR_PANEL } from '@/views/chart/chart/chart' +import { post } from '@/api/dataset/dataset' export default { name: 'TableThresholdEdit', @@ -410,7 +430,8 @@ export default { max: '1', targetField: {}, minField: {}, - maxField: {} + maxField: {}, + enumValues: [] }, summaryOptions: [{ id: 'value', @@ -530,9 +551,16 @@ export default { ], fieldTypeOptions: [ { label: this.$t('chart.field_fixed'), value: '0' }, - { label: this.$t('chart.field_dynamic'), value: '1' } + { label: this.$t('chart.field_dynamic'), value: '1' }, + { label: this.$t('chart.field_enum'), value: '2' } ], - predefineColors: COLOR_PANEL + predefineColors: COLOR_PANEL, + fieldEnumValues: {} + } + }, + computed: { + panelInfo() { + return this.$store.state.panel.panelInfo } }, mounted() { @@ -595,11 +623,23 @@ export default { this.fields = JSON.parse(this.chart.xaxis) } } else if (this.chart.type === 'table-pivot') { + const totalFields = [] if (Object.prototype.toString.call(this.chart.yaxis) === '[object Array]') { - this.fields = JSON.parse(JSON.stringify(this.chart.yaxis)) + totalFields.splice(totalFields.length, 0, ...JSON.parse(JSON.stringify(this.chart.yaxis))) } else { - this.fields = JSON.parse(this.chart.yaxis) + totalFields.splice(totalFields.length, 0, ...JSON.parse(this.chart.yaxis)) } + if (Object.prototype.toString.call(this.chart.xaxis) === '[object Array]') { + totalFields.splice(totalFields.length, 0, ...JSON.parse(JSON.stringify(this.chart.xaxis))) + } else { + totalFields.splice(totalFields.length, 0, ...JSON.parse(this.chart.xaxis)) + } + if (Object.prototype.toString.call(this.chart.xaxisExt) === '[object Array]') { + totalFields.splice(totalFields.length, 0, ...JSON.parse(JSON.stringify(this.chart.xaxisExt))) + } else { + totalFields.splice(totalFields.length, 0, ...JSON.parse(this.chart.xaxisExt)) + } + this.fields.splice(0, this.fields.length, ...totalFields) } else { if (Object.prototype.toString.call(this.chart.xaxis) === '[object Array]') { this.fields = this.fields.concat(JSON.parse(JSON.stringify(this.chart.xaxis))) @@ -654,24 +694,50 @@ export default { changeThreshold() { this.$emit('onTableThresholdChange', this.thresholdArr) }, - changeThresholdField(item) { - if (item.field === '1') { - if (item.term === 'between') { - item.minField.curField = this.getQuotaField(item.minField.fieldId) - item.maxField.curField = this.getQuotaField(item.maxField.fieldId) + changeThresholdField(item, curField) { + switch (item.field) { + case '0': item.targetField = {} - } else { - item.targetField.curField = this.getQuotaField(item.targetField.fieldId) item.minField = {} item.maxField = {} - } - } else { - item.targetField = {} - item.minField = {} - item.maxField = {} + break + case '1': + if (item.term === 'between') { + item.minField.curField = this.getQuotaField(item.minField.fieldId) + item.maxField.curField = this.getQuotaField(item.maxField.fieldId) + item.targetField = {} + } else { + item.targetField.curField = this.getQuotaField(item.targetField.fieldId) + item.minField = {} + item.maxField = {} + } + break + case '2': + if (!curField?.fieldId) { + break + } + // 时间类型只允许相等判断 + if (curField.field.deType === 1 && !['eq', 'not_eq'].includes(item.term)) { + item.field = '0' + } + this.getFieldEnumValues(curField.field) + break + default: + break } this.changeThreshold() }, + getFieldEnumValues(field) { + if (this.fieldEnumValues[field.id]) { + return + } + const fieldType = this.getFieldType(field.id) + if (fieldType) { + post('/chart/view/getFieldData/' + this.chart.id + '/' + this.panelInfo.id + '/' + field.id + '/' + fieldType, {}).then(response => { + this.$set(this.fieldEnumValues, field.id, response.data) + }) + } + }, getQuotaField(id) { if (!id) { return {} @@ -703,11 +769,60 @@ export default { } }) } - // 清空 term - item.conditions && item.conditions.forEach(ele => { + // 重置 term 和 field + item.conditions?.forEach(ele => { ele.term = '' + if (item.field.groupType === 'q' && ele.field === '2') { + ele.field = '0' + } + if (item.field.groupType === 'd') { + if (this.chart.type === 'table-pivot' && ele.field === '1') { + ele.field = '0' + } + if (ele.field === '2') { + ele.enumValues?.splice(0) + this.getFieldEnumValues(item.field) + } + } }) this.changeThreshold() + }, + getFieldType(fieldId) { + let index = -1 + index = JSON.parse(this.chart.xaxis).findIndex(i => i.id === fieldId) + if (index !== -1) { + return 'xaxis' + } + index = JSON.parse(this.chart.xaxisExt).findIndex(i => i.id === fieldId) + if (index !== -1) { + return 'xaxisExt' + } + }, + getFieldTypeOptions(field, condition) { + if (field.groupType === 'q') { + return [ + { label: this.$t('chart.field_fixed'), value: '0' }, + { label: this.$t('chart.field_dynamic'), value: '1' } + ] + } + if (field.deType === 1 && !['eq', 'not_eq'].includes(condition.term)) { + if (this.chart.type === 'table-pivot') { + return [ + { label: this.$t('chart.field_fixed'), value: '0' } + ] + } + return [ + { label: this.$t('chart.field_fixed'), value: '0' }, + { label: this.$t('chart.field_dynamic'), value: '1' } + ] + } + if (this.chart.type === 'table-pivot') { + return [ + { label: this.$t('chart.field_fixed'), value: '0' }, + { label: this.$t('chart.field_enum'), value: '2' } + ] + } + return this.fieldTypeOptions } } }