feat(图表): 指标卡阈值支持设置背景色 #9370

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<CSSProperties>({
   'flex-direction': 'column',
   'align-items': 'center',
   'justify-content': 'center',
-  height: '100%'
+  height: '100%',
+  'background-color': thresholdColor.value.backgroundColor
 })
 
 const indicatorClass = ref<CSSProperties>({
-  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,

core/core-frontend/src/models/chart/chart-attr.d.ts

@@ -790,6 +790,10 @@ declare interface ChartIndicatorStyle {
    * 字体颜色
    */
   color: string
+  /**
+   * 背景颜色
+   */
+  backgroundColor: string
   /**
    * 水平位置
    */

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' }"
             ></div>
-            <!--            <div
+            <div
               :title="t('chart.backgroundColor')"
               :style="{
                 backgroundColor: item.backgroundColor
               }"
               class="color-div"
               :class="{ 'color-div-dark': themes === 'dark' }"
-            ></div>-->
+            ></div>
           </div>
         </div>
       </el-col>

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"
           />
         </div>
-        <!--        <div style="display: flex; align-items: center; justify-content: center; margin-left: 8px">
+        <div style="display: flex; align-items: center; justify-content: center; margin-left: 8px">
           <div class="color-title">{{ t('chart.backgroundColor') }}</div>
           <el-color-picker
             is-custom
@@ -186,7 +187,7 @@ init()
             :predefine="predefineColors"
             @change="changeThreshold"
           />
-        </div>-->
+        </div>
         <div style="display: flex; align-items: center; justify-content: center; margin-left: 8px">
           <el-button
             class="circle-button"

core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue

@@ -209,12 +209,7 @@ onMounted(() => {
       </el-col>
     </el-row>
 
-    <el-form-item
-      :label="t('chart.table_show_index')"
-      class="form-item"
-      :class="'form-item-' + themes"
-      v-if="showProperty('showIndex')"
-    >
+    <el-form-item class="form-item" :class="'form-item-' + themes" v-if="showProperty('showIndex')">
       <el-checkbox
         size="small"
         :effect="themes"

core/core-frontend/src/views/chart/components/editor/util/chart.ts

@@ -388,6 +388,7 @@ export const DEFAULT_INDICATOR_STYLE: ChartIndicatorStyle = {
   fontFamily: 'Microsoft YaHei',
   letterSpace: 0,
   fontShadow: false,
+  backgroundColor: '#fff',
 
   suffixEnable: true,
   suffix: '',