From 03680208ad2b02b46760f6b725e98d10ac3e412c Mon Sep 17 00:00:00 2001 From: wisonic-s Date: Thu, 23 May 2024 18:31:18 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E6=8C=87=E6=A0=87?= =?UTF-8?q?=E5=8D=A1=E9=98=88=E5=80=BC=E6=94=AF=E6=8C=81=E8=AE=BE=E7=BD=AE?= =?UTF-8?q?=E8=83=8C=E6=99=AF=E8=89=B2=20#9370?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../indicator/DeIndicator.vue | 28 ++++++++++++------- .../src/models/chart/chart-attr.d.ts | 4 +++ .../editor-senior/components/Threshold.vue | 4 +-- .../components/dialog/TextThresholdEdit.vue | 5 ++-- .../components/table/TableHeaderSelector.vue | 7 +---- .../chart/components/editor/util/chart.ts | 1 + 6 files changed, 29 insertions(+), 20 deletions(-) diff --git a/core/core-frontend/src/custom-component/indicator/DeIndicator.vue b/core/core-frontend/src/custom-component/indicator/DeIndicator.vue index b5f3b5d031..4e5778548a 100644 --- a/core/core-frontend/src/custom-component/indicator/DeIndicator.vue +++ b/core/core-frontend/src/custom-component/indicator/DeIndicator.vue @@ -93,9 +93,10 @@ const result = computed(() => { const indicatorColor = ref(DEFAULT_INDICATOR_STYLE.color) const thresholdColor = computed(() => { - let color = indicatorColor.value + let color: string = indicatorColor.value + let backgroundColor: string = DEFAULT_INDICATOR_STYLE.backgroundColor if (result.value === '-') { - return color + return { color, backgroundColor } } const value = result.value if ( @@ -107,42 +108,47 @@ const thresholdColor = computed(() => { for (let i = 0; i < senior.threshold.labelThreshold.length; i++) { let flag = false const t = senior.threshold.labelThreshold[i] - const tv = parseFloat(t.value) + const tv = t.value if (t.term === 'eq') { if (value === tv) { color = t.color + backgroundColor = t.backgroundColor flag = true } } else if (t.term === 'not_eq') { if (value !== tv) { color = t.color + backgroundColor = t.backgroundColor flag = true } } else if (t.term === 'lt') { if (value < tv) { color = t.color + backgroundColor = t.backgroundColor flag = true } } else if (t.term === 'gt') { if (value > tv) { color = t.color + backgroundColor = t.backgroundColor flag = true } } else if (t.term === 'le') { if (value <= tv) { color = t.color + backgroundColor = t.backgroundColor flag = true } } else if (t.term === 'ge') { if (value >= tv) { color = t.color + backgroundColor = t.backgroundColor flag = true } } else if (t.term === 'between') { - const min = parseFloat(t.min) - const max = parseFloat(t.max) - if (min <= value && value <= max) { + if (t.min <= value && value <= t.max) { color = t.color + backgroundColor = t.backgroundColor flag = true } } @@ -151,7 +157,7 @@ const thresholdColor = computed(() => { } } } - return color + return { color, backgroundColor } }) const formattedResult = computed(() => { @@ -175,11 +181,12 @@ const contentStyle = ref({ 'flex-direction': 'column', 'align-items': 'center', 'justify-content': 'center', - height: '100%' + height: '100%', + 'background-color': thresholdColor.value.backgroundColor }) const indicatorClass = ref({ - color: thresholdColor.value, + color: thresholdColor.value.color, 'font-size': DEFAULT_INDICATOR_STYLE.fontSize + 'px', 'font-family': defaultTo( CHART_FONT_FAMILY_MAP[DEFAULT_INDICATOR_STYLE.fontFamily], @@ -280,7 +287,7 @@ const renderChart = async view => { } indicatorClass.value = { - color: thresholdColor.value, + color: thresholdColor.value.color, 'font-size': indicator.fontSize + 'px', 'font-family': defaultTo( CHART_FONT_FAMILY_MAP[indicator.fontFamily], @@ -292,6 +299,7 @@ const renderChart = async view => { 'text-shadow': indicator.fontShadow ? '2px 2px 4px' : 'none', 'font-synthesis': 'weight style' } + contentStyle.value['background-color'] = thresholdColor.value.backgroundColor indicatorSuffixClass.value = { color: suffixColor, 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 63f6bb9e23..1a86f4292e 100644 --- a/core/core-frontend/src/models/chart/chart-attr.d.ts +++ b/core/core-frontend/src/models/chart/chart-attr.d.ts @@ -790,6 +790,10 @@ declare interface ChartIndicatorStyle { * 字体颜色 */ color: string + /** + * 背景颜色 + */ + backgroundColor: string /** * 水平位置 */ 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 589eb39de0..8b92b9b891 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 @@ -439,14 +439,14 @@ init() class="color-div" :class="{ 'color-div-dark': themes === 'dark' }" > - + > diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TextThresholdEdit.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TextThresholdEdit.vue index ae75a0f9a5..101f8b1b2b 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TextThresholdEdit.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TextThresholdEdit.vue @@ -24,6 +24,7 @@ const thresholdObj = { field: '0', value: '0', color: '#ff0000ff', + backgroundColor: '#fff', min: '0', max: '1' } @@ -175,7 +176,7 @@ init() @change="changeThreshold" /> - +
{ - +