Merge pull request #9861 from dataease/pr@dev-v2@feat_table_threshold_dim_field

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

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: '总计配置',

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
   /**

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]}`"
+                    :className="`field-icon-${fieldType[fieldItem.field.deType]}`"
-                    :name="`field_${fieldType[fieldItem.field.deType.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

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]') {
+    fields = JSON.parse(JSON.stringify(props.chart.xAxis))
-      state.fields = JSON.parse(JSON.stringify(props.chart.xAxis))
-    } else {
-      state.fields = JSON.parse(props.chart.xAxis)
-    }
   } else if (props.chart.type === 'table-pivot') {
-    if (Object.prototype.toString.call(props.chart.yAxis) === '[object Array]') {
+    const xAxis = JSON.parse(JSON.stringify(props.chart.xAxis))
-      state.fields = JSON.parse(JSON.stringify(props.chart.yAxis))
+    const xAxisExt = JSON.parse(JSON.stringify(props.chart.xAxisExt))
-    } else {
+    const yAxis = JSON.parse(JSON.stringify(props.chart.yAxis))
-      state.fields = JSON.parse(props.chart.yAxis)
+    fields = [...xAxis, ...xAxisExt, ...yAxis]
-    }
   } else {
-    if (Object.prototype.toString.call(props.chart.xAxis) === '[object Array]') {
+    const xAxis = JSON.parse(JSON.stringify(props.chart.xAxis))
-      state.fields = state.fields.concat(JSON.parse(JSON.stringify(props.chart.xAxis)))
+    const yAxis = JSON.parse(JSON.stringify(props.chart.yAxis))
-    } else {
+    fields = [...xAxis, ...yAxis]
-      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))
-    }
   }
-  // 暂不支持时间
+  state.fields.splice(0, state.fields.length, ...fields)
-  // this.fields = this.fields.filter(ele => ele.deType !== 1)
 }
 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
+              <el-form-item class="form-item">
-                v-model="item.min"
+                <el-input-number
-                controls-position="right"
+                  v-model="item.min"
-                class="between-item"
+                  controls-position="right"
-                :placeholder="t('chart.axis_value_min')"
+                  class="between-item"
-                clearable
+                  :placeholder="t('chart.axis_value_min')"
-                @change="changeThreshold"
+                  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
+              <el-form-item class="form-item">
-                v-model="item.max"
+                <el-input-number
-                controls-position="right"
+                  v-model="item.max"
-                class="between-item"
+                  controls-position="right"
-                :placeholder="t('chart.axis_value_max')"
+                  class="between-item"
-                clearable
+                  :placeholder="t('chart.axis_value_max')"
-                @change="changeThreshold"
+                  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
+              <el-form-item class="form-item">
-                is-custom
+                <el-color-picker
-                size="large"
+                  is-custom
-                v-model="item.color"
+                  size="large"
-                show-alpha
+                  v-model="item.color"
-                class="color-picker-style"
+                  show-alpha
-                :predefine="predefineColors"
+                  class="color-picker-style"
-                @change="changeThreshold"
+                  :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
+              <el-form-item class="form-item">
-                is-custom
+                <el-color-picker
-                size="large"
+                  is-custom
-                v-model="item.backgroundColor"
+                  size="large"
-                show-alpha
+                  v-model="item.backgroundColor"
-                class="color-picker-style"
+                  show-alpha
-                :predefine="predefineColors"
+                  class="color-picker-style"
-                @change="changeThreshold"
+                  :predefine="predefineColors"
-              />
+                  @change="changeThreshold"
+                />
+              </el-form-item>
             </div>
             <div
               style="display: flex; align-items: center; justify-content: center; margin-left: 8px"

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 { tableCell, basicStyle, tableHeader } = parseJson(chart.customAttr)
-    const valueColor = tableCell.tableFontColor
-    let valueBgColor = hexColorToRGBA(tableCell.tableItemBgColor, basicStyle.alpha)
     const enableTableCrossBG = tableCell.enableTableCrossBG
-    if (enableTableCrossBG) {
+    const valueColor = tableCell.tableFontColor
-      valueBgColor = null
+    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) {
+        mapping(value, rowData) {
-          const fill = mappingColor(value, valueBgColor, field, 'backgroundColor')
+          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
         }
       })