feat(图表): 表格阈值支持非指标字段 #8111

2024-05-24 18:00:38 +08:00 · 2024-05-24 18:00:38 +08:00 · 1eee7faa11
commit 1eee7faa11
parent e873205588
5 changed files with 126 additions and 87 deletions
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@ -922,7 +922,7 @@ export default {
    line_type_dotted: '点',
    value_can_not_empty: '值不能为空',
    value_error: '值必须为数值',
-    threshold: '阈值',
+    threshold: '条件样式',
    threshold_range: '阈值区间',
    gauge_threshold_format_error: '格式错误',
    total_cfg: '总计配置',
--- a/core/core-frontend/src/models/chart/chart-senior.d.ts
+++ b/core/core-frontend/src/models/chart/chart-senior.d.ts
@ -134,12 +134,26 @@ declare interface ChartThreshold {
  /**
   * 表格阈值
   */
-  tableThreshold: Threshold[]
+  tableThreshold: TableThreshold[]
  /**
   * 文本卡阈值
   */
  textLabelThreshold: Threshold[]
 }
+declare interface TableThreshold {
+  /**
+   * 字段id
+   */
+  fieldId: string
+  /**
+   * 字段
+   */
+  field: ChartViewField
+  /**
+   * 条件
+   */
+  conditions: Threshold[]
+}
 /**
 * 阈值
 */
@ -157,7 +171,7 @@ declare interface Threshold {
   */
  term: string
  /**
-   *
+   * 字段
   */
  field: ChartViewField
  /**
--- 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
@ -336,7 +336,9 @@ init()
              }}</span>
            </el-col>
            <el-col :span="12">
-              <span v-if="!item.term.includes('null')" :title="item.value">{{ item.value }}</span>
+              <span v-if="!item.term.includes('null')" :title="item.value + ''">{{
+                item.value
+              }}</span>
              <span v-else>&nbsp;</span>
            </el-col>
            <el-col :span="6">
@ -426,7 +428,7 @@ init()
              }}</span>
            </div>
            <div style="flex: 1; margin: 0 8px">
-              <span v-if="item.term !== 'between'" :title="item.value">{{ item.value }}</span>
+              <span v-if="item.term !== 'between'" :title="item.value + ''">{{ item.value }}</span>
              <span v-if="item.term === 'between'">
                {{ item.min }}&nbsp;≤{{ t('chart.drag_block_label_value') }}≤&nbsp;{{ item.max }}
              </span>
@ -498,8 +500,8 @@ init()
              <span>
                <el-icon>
                  <Icon
-                    :className="`field-icon-${fieldType[fieldItem.field.deType.deType]}`"
-                    :name="`field_${fieldType[fieldItem.field.deType.deType]}`"
+                    :className="`field-icon-${fieldType[fieldItem.field.deType]}`"
+                    :name="`field_${fieldType[fieldItem.field.deType]}`"
                  />
                </el-icon>
              </span>
@ -556,7 +558,7 @@ init()
                    !item.term.includes('empty') &&
                    item.term !== 'between'
                  "
-                  :title="item.value"
+                  :title="item.value + ''"
                  >{{ item.value }}</span
                >
                <span
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue
@ -1,15 +1,14 @@
 <script lang="tsx" setup>
-import { computed, reactive } from 'vue'
+import { PropType, reactive } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { COLOR_PANEL } from '../../../util/chart'
 import { fieldType } from '@/utils/attr'
-import _ from 'lodash'

 const { t } = useI18n()

 const props = defineProps({
  chart: {
-    type: Object,
+    type: Object as PropType<ChartObj>,
    required: true
  },
  threshold: {
@ -164,17 +163,17 @@ const valueOptions = [
 const predefineColors = COLOR_PANEL

 const state = reactive({
-  thresholdArr: [],
+  thresholdArr: [] as TableThreshold[],
  fields: [],
  thresholdObj: {
    fieldId: '',
    field: {},
    conditions: []
-  }
+  } as TableThreshold
 })

 const init = () => {
-  state.thresholdArr = JSON.parse(JSON.stringify(props.threshold))
+  state.thresholdArr = JSON.parse(JSON.stringify(props.threshold)) as TableThreshold[]
  initFields()
 }
 const initOptions = item => {
@ -193,33 +192,20 @@ const initOptions = item => {
  }
 }
 const initFields = () => {
-  // 暂时支持指标
+  let fields = []
  if (props.chart.type === 'table-info') {
-    if (Object.prototype.toString.call(props.chart.xAxis) === '[object Array]') {
-      state.fields = JSON.parse(JSON.stringify(props.chart.xAxis))
-    } else {
-      state.fields = JSON.parse(props.chart.xAxis)
-    }
+    fields = JSON.parse(JSON.stringify(props.chart.xAxis))
  } else if (props.chart.type === 'table-pivot') {
-    if (Object.prototype.toString.call(props.chart.yAxis) === '[object Array]') {
-      state.fields = JSON.parse(JSON.stringify(props.chart.yAxis))
-    } else {
-      state.fields = JSON.parse(props.chart.yAxis)
-    }
+    const xAxis = JSON.parse(JSON.stringify(props.chart.xAxis))
+    const xAxisExt = JSON.parse(JSON.stringify(props.chart.xAxisExt))
+    const yAxis = JSON.parse(JSON.stringify(props.chart.yAxis))
+    fields = [...xAxis, ...xAxisExt, ...yAxis]
  } else {
-    if (Object.prototype.toString.call(props.chart.xAxis) === '[object Array]') {
-      state.fields = state.fields.concat(JSON.parse(JSON.stringify(props.chart.xAxis)))
-    } else {
-      state.fields = state.fields.concat(JSON.parse(props.chart.xAxis))
-    }
-    if (Object.prototype.toString.call(props.chart.yAxis) === '[object Array]') {
-      state.fields = state.fields.concat(JSON.parse(JSON.stringify(props.chart.yAxis)))
-    } else {
-      state.fields = state.fields.concat(JSON.parse(props.chart.yAxis))
-    }
+    const xAxis = JSON.parse(JSON.stringify(props.chart.xAxis))
+    const yAxis = JSON.parse(JSON.stringify(props.chart.yAxis))
+    fields = [...xAxis, ...yAxis]
  }
-  // 暂不支持时间
-  // this.fields = this.fields.filter(ele => ele.deType !== 1)
+  state.fields.splice(0, state.fields.length, ...fields)
 }
 const addThreshold = () => {
  state.thresholdArr.push(JSON.parse(JSON.stringify(state.thresholdObj)))
@ -243,9 +229,6 @@ const removeCondition = (item, index) => {
  changeThreshold()
 }

-const computedFields = computed(() => {
-  return _.filter(state.fields, f => f.deType === 2 || f.deType === 3)
-})
 const addField = item => {
  // get field
  if (state.fields && state.fields.length > 0) {
@ -280,7 +263,7 @@ init()
            <el-select v-model="fieldItem.fieldId" @change="addField(fieldItem)">
              <el-option
                class="series-select-option"
-                v-for="fieldOption in computedFields"
+                v-for="fieldOption in state.fields"
                :key="fieldOption.id"
                :label="fieldOption.name"
                :value="fieldOption.id"
@ -344,10 +327,19 @@ init()
            >
              <el-form-item class="form-item">
                <el-input-number
-                  controls-position="right"
                  v-model="item.value"
-                  class="value-item"
+                  v-if="[2, 3].includes(fieldItem.field.deType)"
                  :placeholder="t('chart.drag_block_label_value')"
+                  controls-position="right"
+                  class="value-item"
+                  clearable
+                  @change="changeThreshold"
+                />
+                <el-input
+                  v-model="item.value"
+                  v-else
+                  :placeholder="t('chart.drag_block_label_value')"
+                  controls-position="right"
                  clearable
                  @change="changeThreshold"
                />
@ -355,14 +347,16 @@ init()
            </el-col>

            <el-col v-if="item.term === 'between'" :span="4" style="text-align: center">
-              <el-input-number
-                v-model="item.min"
-                controls-position="right"
-                class="between-item"
-                :placeholder="t('chart.axis_value_min')"
-                clearable
-                @change="changeThreshold"
-              />
+              <el-form-item class="form-item">
+                <el-input-number
+                  v-model="item.min"
+                  controls-position="right"
+                  class="between-item"
+                  :placeholder="t('chart.axis_value_min')"
+                  clearable
+                  @change="changeThreshold"
+                />
+              </el-form-item>
            </el-col>

            <el-col v-if="item.term === 'between'" :span="2" style="text-align: center">
@ -372,43 +366,49 @@ init()
            </el-col>

            <el-col v-if="item.term === 'between'" :span="4" style="text-align: center">
-              <el-input-number
-                v-model="item.max"
-                controls-position="right"
-                class="between-item"
-                :placeholder="t('chart.axis_value_max')"
-                clearable
-                @change="changeThreshold"
-              />
+              <el-form-item class="form-item">
+                <el-input-number
+                  v-model="item.max"
+                  controls-position="right"
+                  class="between-item"
+                  :placeholder="t('chart.axis_value_max')"
+                  clearable
+                  @change="changeThreshold"
+                />
+              </el-form-item>
            </el-col>

            <div
              style="display: flex; align-items: center; justify-content: center; margin-left: 8px"
            >
              <div class="color-title">{{ t('chart.textColor') }}</div>
-              <el-color-picker
-                is-custom
-                size="large"
-                v-model="item.color"
-                show-alpha
-                class="color-picker-style"
-                :predefine="predefineColors"
-                @change="changeThreshold"
-              />
+              <el-form-item class="form-item">
+                <el-color-picker
+                  is-custom
+                  size="large"
+                  v-model="item.color"
+                  show-alpha
+                  class="color-picker-style"
+                  :predefine="predefineColors"
+                  @change="changeThreshold"
+                />
+              </el-form-item>
            </div>
            <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
-                size="large"
-                v-model="item.backgroundColor"
-                show-alpha
-                class="color-picker-style"
-                :predefine="predefineColors"
-                @change="changeThreshold"
-              />
+              <el-form-item class="form-item">
+                <el-color-picker
+                  is-custom
+                  size="large"
+                  v-model="item.backgroundColor"
+                  show-alpha
+                  class="color-picker-style"
+                  :predefine="predefineColors"
+                  @change="changeThreshold"
+                />
+              </el-form-item>
            </div>
            <div
              style="display: flex; align-items: center; justify-content: center; margin-left: 8px"
--- a/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts
@ -393,28 +393,51 @@ export function getConditions(chart: Chart) {
  }
  const conditions = threshold.tableThreshold ?? []

+  const dimFields = [...chart.xAxis, ...chart.xAxisExt].map(i => i.dataeaseName)
  if (conditions?.length > 0) {
-    const { tableCell, basicStyle } = parseJson(chart.customAttr)
-    const valueColor = tableCell.tableFontColor
-    let valueBgColor = hexColorToRGBA(tableCell.tableItemBgColor, basicStyle.alpha)
+    const { tableCell, basicStyle, tableHeader } = parseJson(chart.customAttr)
    const enableTableCrossBG = tableCell.enableTableCrossBG
-    if (enableTableCrossBG) {
-      valueBgColor = null
-    }
+    const valueColor = tableCell.tableFontColor
+    const valueBgColor = enableTableCrossBG
+      ? null
+      : hexColorToRGBA(tableCell.tableItemBgColor, basicStyle.alpha)
+    const headerValueColor = tableHeader.tableHeaderFontColor
+    const headerValueBgColor = hexColorToRGBA(tableHeader.tableHeaderBgColor, basicStyle.alpha)
    for (let i = 0; i < conditions.length; i++) {
      const field = conditions[i]
+      let defaultValueColor = valueColor
+      let defaultBgColor = valueBgColor
+      // 透视表表头颜色配置
+      if (chart.type === 'table-pivot' && dimFields.includes(field.field.dataeaseName)) {
+        defaultValueColor = headerValueColor
+        defaultBgColor = headerValueBgColor
+      }
      res.text.push({
        field: field.field.dataeaseName,
-        mapping(value) {
+        mapping(value, rowData) {
+          // 总计小计
+          if (rowData?.isTotals) {
+            return null
+          }
+          // 表头
+          if (rowData?.id && rowData?.field === rowData.id) {
+            return null
+          }
          return {
-            fill: mappingColor(value, valueColor, field, 'color')
+            fill: mappingColor(value, defaultValueColor, field, 'color')
          }
        }
      })
      res.background.push({
        field: field.field.dataeaseName,
-        mapping(value) {
-          const fill = mappingColor(value, valueBgColor, field, 'backgroundColor')
+        mapping(value, rowData) {
+          if (rowData?.isTotals) {
+            return null
+          }
+          if (rowData?.id && rowData?.field === rowData.id) {
+            return null
+          }
+          const fill = mappingColor(value, defaultBgColor, field, 'backgroundColor')
          return fill ? { fill } : null
        }
      })