Merge pull request #9823 from dataease/pr@dev-v2@feat_indicator_threshold_background_color

feat(图表): 指标卡阈值支持设置背景色 #9370
2024-05-23 18:33:16 +08:00 · 2024-05-23 18:33:16 +08:00 · 5cf485e1e8
commit 5cf485e1e8
parent 1ebecafddc 03680208ad
6 changed files with 29 additions and 20 deletions
--- 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<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,
--- 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
  /**
   * 水平位置
   */
--- 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' }"
            ></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>
--- 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"
          />
        </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"
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue
+++ b/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"
--- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts
+++ b/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: '',