refactor: 富文本条件样式支持自定义字段 #18298 (#18325)

core/core-frontend/src/custom-component/picture-group/Component.vue

@@ -214,7 +214,7 @@ const conditionAdaptor = (chart: Chart) => {
         defaultValueColor,
         field,
         'url'
-      )
+      ).color
       if (checkResult) {
         state.showUrl = checkResult
       }

core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue

@@ -711,6 +711,18 @@ const conditionAdaptor = (chart: Chart) => {
   if (!threshold.enable) {
     return
   }
+
+  const idNameMapping = {}
+  if (chart.xAxis && Array.isArray(chart.xAxis)) {
+    chart.xAxis.forEach(item => {
+      idNameMapping[item.id] = item.name
+    })
+  }
+  if (chart.yAxis && Array.isArray(chart.yAxis)) {
+    chart.yAxis.forEach(item => {
+      idNameMapping[item.id] = item.name
+    })
+  }
   const res = {}
   const conditions = threshold.tableThreshold ?? []
   if (conditions?.length > 0) {
@@ -718,19 +730,21 @@ const conditionAdaptor = (chart: Chart) => {
       const field = conditions[i]
       let defaultValueColor = 'none'
       let defaultBgColor = 'none'
-      res[field.field.name] = {
+      const colorCondition = mappingColorCustom(
-        color: mappingColorCustom(
+        dataRowNameSelectSource.value[field.field.name],
-          dataRowNameSelectSource.value[field.field.name],
+        defaultValueColor,
-          defaultValueColor,
+        field,
-          field,
+        'color'
-          'color'
+      )
-        ),
+      const backgroundColorCondition = mappingColorCustom(
-        backgroundColor: mappingColorCustom(
+        dataRowNameSelectSource.value[field.field.name],
-          dataRowNameSelectSource.value[field.field.name],
+        defaultBgColor,
-          defaultBgColor,
+        field,
-          field,
+        'backgroundColor'
-          'backgroundColor'
+      )
-        )
+      res[idNameMapping[colorCondition.targetFieldId] || field.field.name] = {
+        color: colorCondition.color,
+        backgroundColor: backgroundColorCondition.color
       }
     }
   }

core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue

@@ -2,7 +2,7 @@
 import icon_info_filled from '@/assets/svg/icon_info_filled.svg'
 import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
-import { PropType, reactive } from 'vue'
+import { computed, PropType, reactive } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { COLOR_PANEL } from '../../../util/chart'
 import { fieldType } from '@/utils/attr'
@@ -12,6 +12,7 @@ import {
   transDateFormat,
   transDatePickerType
 } from '@/views/chart/components/editor/util/DateFormatUtil'
+import { TableThreshold } from '@/models/chart/chart-senior'
 
 const { t } = useI18n()
 
@@ -203,11 +204,20 @@ const valueOptions = [
 ]
 const predefineColors = COLOR_PANEL
 
-const targetOptions = [
+const targetOptions = computed(() => {
-  { label: t('chart.self'), value: 'self' },
+  if (props.chart.type === 'rich-text') {
-  { label: t('chart.total_row'), value: 'total_row' },
+    return [
-  { label: t('chart.custom'), value: 'custom' }
+      { label: t('chart.self'), value: 'self' },
-]
+      { label: t('chart.custom'), value: 'custom' }
+    ]
+  } else {
+    return [
+      { label: t('chart.self'), value: 'self' },
+      { label: t('chart.total_row'), value: 'total_row' },
+      { label: t('chart.custom'), value: 'custom' }
+    ]
+  }
+})
 
 const state = reactive({
   thresholdArr: [] as TableThreshold[],
@@ -435,7 +445,7 @@ init()
       <Icon name="icon_info_filled" class="icon-style"
         ><icon_info_filled class="svg-icon icon-style"
       /></Icon>
-      <span style="padding-left: 10px">{{ t('chart.table_threshold_tip') }}</span>
+      <span style="padding-left: 10px">{{ t('chart.table_threshold_tip') }}2</span>
     </div>
 
     <div @keydown.stop @keyup.stop style="max-height: 50vh; overflow-y: auto">

core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts

@@ -796,6 +796,7 @@ export function getConditions(chart: Chart) {
 
 export function mappingColorCustom(value, defaultColor, field, type, filedValueMap?, rowData?) {
   let color = null
+  let hitCondition = null;
   for (let i = 0; i < field.conditions.length; i++) {
     let flag = false
     const t = field.conditions[i]
@@ -867,6 +868,7 @@ export function mappingColorCustom(value, defaultColor, field, type, filedValueM
         }
       }
       if (flag) {
+        hitCondition = t
         break
       } else if (i === field.conditions.length - 1) {
         color = defaultColor
@@ -907,6 +909,7 @@ export function mappingColorCustom(value, defaultColor, field, type, filedValueM
         flag = true
       }
       if (flag) {
+        hitCondition = t
         break
       } else if (i === field.conditions.length - 1) {
         color = defaultColor
@@ -925,6 +928,7 @@ export function mappingColorCustom(value, defaultColor, field, type, filedValueM
         }
       }
       if (flag) {
+        hitCondition = fc
         break
       }
       // time
@@ -968,13 +972,25 @@ export function mappingColorCustom(value, defaultColor, field, type, filedValueM
         flag = true
       }
       if (flag) {
+        hitCondition = fc
         break
       } else if (i === field.conditions.length - 1) {
         color = defaultColor
       }
     }
   }
-  return color
+  if(hitCondition && hitCondition.target === 'custom'){
+    return {
+      targetFieldId: hitCondition.targetFieldId,
+      color
+    }
+  }else{
+    return {
+      targetFieldId: field.fieldId,
+      color
+    }
+  }
+
 }
 
 export function mappingColor(value, defaultColor, rules, type, filedValueMap?, rowData?) {
@@ -1233,7 +1249,7 @@ export function getPivotConditions(chart: Chart) {
       : hexColorToRGBA(tableHeader.tableHeaderColBgColor, basicStyle.alpha)
     const filedValueMap = getFieldValueMap(chart)
 
-    
+
 
     const targetRulesMap = {} // columnName -> Array<{ rule, sourceField }>
     const xFields = chart.xAxis.map(f => f.dataeaseName)
@@ -1318,7 +1334,7 @@ export function getPivotConditions(chart: Chart) {
           if (rowData.cornerType) {
             return null
           }
-          
+
           const fill = mappingPivotColor(
             value,
             defaultBgColor,