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" /> - +
{ - +