From f55d2a1fcc269f26c44cb1e3721ef83802475778 Mon Sep 17 00:00:00 2001 From: jianneng-fit2cloud Date: Thu, 21 Nov 2024 16:01:14 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E6=8A=98=E7=BA=BF?= =?UTF-8?q?=E5=9B=BE=E6=94=AF=E6=8C=81=E6=9D=A1=E4=BB=B6=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/models/chart/chart-senior.d.ts | 4 + .../editor-senior/components/Threshold.vue | 224 +++++++- .../components/dialog/LineThresholdEdit.vue | 499 ++++++++++++++++++ .../chart/components/editor/util/chart.ts | 3 +- .../components/js/panel/charts/line/area.ts | 3 +- .../components/js/panel/charts/line/common.ts | 6 +- .../components/js/panel/charts/line/line.ts | 3 +- .../components/js/panel/common/common_antv.ts | 52 +- .../components/js/panel/types/impl/g2plot.ts | 11 +- 9 files changed, 797 insertions(+), 8 deletions(-) create mode 100644 core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/LineThresholdEdit.vue 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 2a56510acd..3feab92888 100644 --- a/core/core-frontend/src/models/chart/chart-senior.d.ts +++ b/core/core-frontend/src/models/chart/chart-senior.d.ts @@ -147,6 +147,10 @@ declare interface ChartThreshold { * 文本卡阈值 */ textLabelThreshold: Threshold[] + /** + * 折线阈值 + */ + lineThreshold: TableThreshold[] } declare interface TableThreshold { /** 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 f2992ad646..af9d0c18b3 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 @@ -7,6 +7,7 @@ import { DEFAULT_THRESHOLD } from '@/views/chart/components/editor/util/chart' import TableThresholdEdit from '@/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue' import TextLabelThresholdEdit from '@/views/chart/components/editor/editor-senior/components/dialog/TextLabelThresholdEdit.vue' import TextThresholdEdit from '@/views/chart/components/editor/editor-senior/components/dialog/TextThresholdEdit.vue' +import LineThresholdEdit from '@/views/chart/components/editor/editor-senior/components/dialog/LineThresholdEdit.vue' import { fieldType } from '@/utils/attr' import { defaultsDeep } from 'lodash-es' import { iconFieldMap } from '@/components/icon-group/field-list' @@ -50,7 +51,9 @@ const state = reactive({ editLabelThresholdDialog: false, thresholdArr: [], editTableThresholdDialog: false, - tableThresholdArr: [] + tableThresholdArr: [], + editLineThresholdDialog: false, + lineThresholdArr: [] }) const init = () => { @@ -63,6 +66,7 @@ const init = () => { state.textThresholdArr = JSON.parse(JSON.stringify(state.thresholdForm.textLabelThreshold)) state.thresholdArr = JSON.parse(JSON.stringify(state.thresholdForm.labelThreshold)) state.tableThresholdArr = JSON.parse(JSON.stringify(state.thresholdForm.tableThreshold)) + state.lineThresholdArr = JSON.parse(JSON.stringify(state.thresholdForm.lineThreshold ?? [])) } } const changeThreshold = () => { @@ -257,6 +261,77 @@ const changeTableThreshold = () => { changeThreshold() closeTableThreshold() } + +const lineThresholdChange = val => { + state.lineThresholdArr = val +} +const editLineThreshold = () => { + state.editLineThresholdDialog = true +} +const closeLineThreshold = () => { + state.editLineThresholdDialog = false +} +const changeLineThreshold = () => { + // check line config + for (let i = 0; i < state.lineThresholdArr?.length; i++) { + const field = state.lineThresholdArr[i] + if (!field.fieldId) { + ElMessage.error(t('chart.field_can_not_empty')) + return + } + if (!field.conditions || field.conditions.length === 0) { + ElMessage.error(t('chart.conditions_can_not_empty')) + return + } + for (let j = 0; j < field.conditions.length; j++) { + const ele = field.conditions[j] + if (!ele.term || ele.term === '') { + ElMessage.error(t('chart.exp_can_not_empty')) + return + } + if (ele.term === 'between') { + if ( + !ele.term.includes('null') && + !ele.term.includes('empty') && + (ele.min === '' || ele.max === '') + ) { + ElMessage.error(t('chart.value_can_not_empty')) + return + } + if ( + (field.field.deType === 2 || field.field.deType === 3 || field.field.deType === 4) && + (parseFloat(ele.min).toString() === 'NaN' || parseFloat(ele.max).toString() === 'NaN') + ) { + ElMessage.error(t('chart.value_error')) + return + } + if ( + (field.field.deType === 2 || field.field.deType === 3 || field.field.deType === 4) && + parseFloat(ele.min) > parseFloat(ele.max) + ) { + ElMessage.error(t('chart.value_min_max_invalid')) + return + } + } else { + if (!ele.term.includes('null') && !ele.term.includes('empty') && ele.value === '') { + ElMessage.error(t('chart.value_can_not_empty')) + return + } + if ( + (field.field.deType === 2 || field.field.deType === 3 || field.field.deType === 4) && + parseFloat(ele.value).toString() === 'NaN' + ) { + ElMessage.error(t('chart.value_error')) + return + } + } + } + } + state.thresholdForm.lineThreshold = JSON.parse(JSON.stringify(state.lineThresholdArr ?? [])) + changeThreshold() + closeLineThreshold() +} + const getFieldName = field => (field.chartShowName ? field.chartShowName : field.name) const getDynamicStyleLabel = (item, fieldObj) => { @@ -713,6 +788,129 @@ init() + + + +
+ 条件样式设置 + + + 已设置 + + + + + +
+ +
+ +
+ + + + {{ + fieldItem.field.name + }} +
+
+
+ + {{ t('chart.filter_lt') }} + + + {{ t('chart.filter_gt') }} + + + {{ t('chart.filter_le') }} + + + {{ t('chart.filter_ge') }} + + + {{ t('chart.filter_between') }} + + 默认 +
+
+ + {{ t('chart.fix') }} + +
+
+ + {{ t('chart.dynamic') }} + +
+
+ {{ item.value }} + + {{ item.min }} ≤{{ t('chart.drag_block_label_value') }}≤ {{ item.max }} + +   +
+ +
+ +
+ + + + + + + diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/LineThresholdEdit.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/LineThresholdEdit.vue new file mode 100644 index 0000000000..029b7d1f90 --- /dev/null +++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/LineThresholdEdit.vue @@ -0,0 +1,499 @@ + + + + + diff --git a/core/core-frontend/src/views/chart/components/editor/util/chart.ts b/core/core-frontend/src/views/chart/components/editor/util/chart.ts index 6c18c121fd..28d1f9a69e 100644 --- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts +++ b/core/core-frontend/src/views/chart/components/editor/util/chart.ts @@ -761,7 +761,8 @@ export const DEFAULT_THRESHOLD: ChartThreshold = { liquidThreshold: '', labelThreshold: [], tableThreshold: [], - textLabelThreshold: [] + textLabelThreshold: [], + lineLabelThreshold: [] } export const DEFAULT_SCROLL: ScrollCfg = { open: false, diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts index 835b151151..1a8fa84851 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts @@ -281,7 +281,8 @@ export class Area extends G2PlotChartView { this.configXAxis, this.configYAxis, this.configSlider, - this.configAnalyse + this.configAnalyse, + this.configConditions )(chart, options, {}, this) } diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/line/common.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/line/common.ts index 7d88df7f9e..ffc424174c 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/line/common.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/line/common.ts @@ -11,7 +11,8 @@ export const LINE_EDITOR_PROPERTY: EditorProperty[] = [ 'assist-line', 'function-cfg', 'jump-set', - 'linkage' + 'linkage', + 'threshold' ] export const LINE_EDITOR_PROPERTY_INNER: EditorPropertyInner = { 'background-overall-component': ['all'], @@ -59,7 +60,8 @@ export const LINE_EDITOR_PROPERTY_INNER: EditorPropertyInner = { 'fontShadow' ], 'legend-selector': ['icon', 'orient', 'fontSize', 'color', 'hPosition', 'vPosition'], - 'function-cfg': ['slider', 'emptyDataStrategy'] + 'function-cfg': ['slider', 'emptyDataStrategy'], + threshold: ['lineThreshold'] } export const LINE_AXIS_TYPE: AxisType[] = [ diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts index 92015890aa..0ef10111aa 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts @@ -358,7 +358,8 @@ export class Line extends G2PlotChartView { this.configXAxis, this.configYAxis, this.configSlider, - this.configAnalyse + this.configAnalyse, + this.configConditions )(chart, options) } diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts index 674cecf6da..e4ce12a555 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts @@ -1,4 +1,4 @@ -import { hexColorToRGBA, parseJson } from '../../util' +import { hexColorToRGBA, isAlphaColor, isTransparent, parseJson } from '../../util' import { DEFAULT_BASIC_STYLE, DEFAULT_XAXIS_STYLE, @@ -1328,3 +1328,53 @@ export const TOOLTIP_TPL = '{name}:' + '{value}' + '' + +export function getConditions(chart: Chart) { + const { threshold } = parseJson(chart.senior) + const annotations = [] + if (!threshold.enable) return annotations + const conditions = threshold.lineThreshold ?? [] + + for (const field of conditions) { + for (const t of field.conditions) { + if ([2, 3, 4].includes(field.field.deType)) { + const annotation = { + type: 'regionFilter', + start: ['start', 'median'], + end: ['end', 'min'], + color: t.color + } + // 加中线 + const annotationLine = { + type: 'line', + start: ['start', t.value], + end: ['end', t.value], + style: { + stroke: t.color, + lineDash: [2, 2] + } + } + if (t.term === 'between') { + annotation.start = ['start', parseFloat(t.min)] + annotation.end = ['end', parseFloat(t.max)] + annotationLine.start = ['start', parseFloat(t.min)] + annotationLine.end = ['end', parseFloat(t.min)] + annotations.push(JSON.parse(JSON.stringify(annotationLine))) + annotationLine.start = ['start', parseFloat(t.max)] + annotationLine.end = ['end', parseFloat(t.max)] + annotations.push(annotationLine) + } else if (['lt', 'le'].includes(t.term)) { + annotation.start = ['start', t.value] + annotation.end = ['end', 'min'] + annotations.push(annotationLine) + } else if (['gt', 'ge'].includes(t.term)) { + annotation.start = ['start', t.value] + annotation.end = ['end', 'max'] + annotations.push(annotationLine) + } + annotations.push(annotation) + } + } + } + return annotations +} diff --git a/core/core-frontend/src/views/chart/components/js/panel/types/impl/g2plot.ts b/core/core-frontend/src/views/chart/components/js/panel/types/impl/g2plot.ts index 4e9aa3f752..964f96dbcd 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/types/impl/g2plot.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/types/impl/g2plot.ts @@ -10,7 +10,8 @@ import { getTheme, getTooltip, getXAxis, - getYAxis + getYAxis, + getConditions } from '@/views/chart/components/js/panel/common/common_antv' import { AntVAbstractChartView, @@ -171,6 +172,14 @@ export abstract class G2PlotChartView< return undefined } + protected configConditions(chart: Chart, options: O) { + const annotations = getConditions(chart) + return { + ...options, + annotations: [...annotations, ...((options as unknown as Options).annotations || [])] + } + } + /** * 流式配置公共参数，处理常用的配置，后续如果有其他通用配置也可以放进来，需要单独配置的属性在各个图表自行实现。 * @param chart 数据库图表对象。