fix: 指标卡-高级-阈值 颜色设置后展示错误

【仪表板】指标卡-样式-指标值-后缀-更换字体颜色-保存后刷新页面-在指标值处进行任意操作字体颜色变更为了默认颜色
【仪表板】指标卡-高级-阈值-判断条件有误-未满足条件也改变了字体颜色
This commit is contained in:
ulleo 2024-01-25 13:58:26 +08:00
parent aa0199a934
commit d83232bde0

View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { getData } from '@/api/chart' import { getData } from '@/api/chart'
import { nextTick, ref, reactive, shallowRef, computed, CSSProperties, toRefs, watch } from 'vue' import { ref, reactive, shallowRef, computed, CSSProperties, toRefs } from 'vue'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/utils/canvasStyle' import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/utils/canvasStyle'
import { deepCopy } from '@/utils/utils' import { deepCopy } from '@/utils/utils'
@ -82,12 +82,14 @@ const result = computed(() => {
return _result return _result
}) })
const indicatorColor = ref(DEFAULT_INDICATOR_STYLE.color)
const thresholdColor = computed(() => { const thresholdColor = computed(() => {
let color = indicatorColor.value
if (result.value === '-') { if (result.value === '-') {
return undefined return color
} }
const value = result.value const value = result.value
let color = undefined
if (view.value.senior && view.value.senior.threshold?.labelThreshold?.length > 0) { if (view.value.senior && view.value.senior.threshold?.labelThreshold?.length > 0) {
const senior = view.value.senior const senior = view.value.senior
for (let i = 0; i < senior.threshold.labelThreshold.length; i++) { for (let i = 0; i < senior.threshold.labelThreshold.length; i++) {
@ -134,8 +136,6 @@ const thresholdColor = computed(() => {
} }
if (flag) { if (flag) {
break break
} else if (i === senior.threshold.labelThreshold.length - 1) {
color = t.color
} }
} }
} }
@ -167,7 +167,7 @@ const contentStyle = ref({
}) })
const indicatorClass = ref<CSSProperties>({ const indicatorClass = ref<CSSProperties>({
color: DEFAULT_INDICATOR_STYLE.color, color: thresholdColor.value,
'font-size': DEFAULT_INDICATOR_STYLE.fontSize + 'px', 'font-size': DEFAULT_INDICATOR_STYLE.fontSize + 'px',
'font-family': defaultTo( 'font-family': defaultTo(
CHART_CONT_FAMILY_MAP[DEFAULT_INDICATOR_STYLE.fontFamily], CHART_CONT_FAMILY_MAP[DEFAULT_INDICATOR_STYLE.fontFamily],
@ -214,22 +214,6 @@ const indicatorNameClass = ref<CSSProperties>({
'font-synthesis': 'weight style' 'font-synthesis': 'weight style'
}) })
function setThresholdColor(_value, _color) {
if (_color === undefined) {
return
}
if (_value === '-') {
return
}
indicatorClass.value.color = _color
}
watch([result, thresholdColor], (value, oldValue) => {
const _value = value[0]
const _color = value[1]
setThresholdColor(_value, _color)
})
const renderChart = async view => { const renderChart = async view => {
if (!view) { if (!view) {
return return
@ -265,10 +249,10 @@ const renderChart = async view => {
contentStyle.value['justify-content'] = 'center' contentStyle.value['justify-content'] = 'center'
} }
let color = customAttr.indicator.color indicatorColor.value = customAttr.indicator.color
indicatorClass.value = { indicatorClass.value = {
color: color, color: thresholdColor.value,
'font-size': customAttr.indicator.fontSize + 'px', 'font-size': customAttr.indicator.fontSize + 'px',
'font-family': defaultTo( 'font-family': defaultTo(
CHART_CONT_FAMILY_MAP[customAttr.indicator.fontFamily], CHART_CONT_FAMILY_MAP[customAttr.indicator.fontFamily],
@ -317,8 +301,6 @@ const renderChart = async view => {
indicatorNameShow.value = false indicatorNameShow.value = false
} }
} }
setThresholdColor(result.value, thresholdColor.value)
} }
const calcData = (view, callback) => { const calcData = (view, callback) => {
@ -333,7 +315,6 @@ const calcData = (view, callback) => {
errMsg.value = res.msg errMsg.value = res.msg
} else { } else {
chartData.value = res?.data as Partial<Chart['data']> chartData.value = res?.data as Partial<Chart['data']>
console.log(chartData.value)
emit('onDrillFilters', res?.drillFilters) emit('onDrillFilters', res?.drillFilters)
dvMainStore.setViewDataDetails(view.id, chartData.value) dvMainStore.setViewDataDetails(view.id, chartData.value)