Merge pull request #11726 from dataease/pr@dev-v2@feat_rich-text

Pr@dev v2@feat rich text

core/core-frontend/src/custom-component/common/CommonAttr.vue

@@ -117,9 +117,7 @@ const backgroundCustomShow = computed(() => {
   return (
     dashboardActive.value ||
     (!dashboardActive.value &&
-      !['CanvasBoard', 'CanvasIcon', 'Picture', 'CircleShape', 'RectShape'].includes(
-        element.value.component
-      ))
+      !['CanvasBoard', 'CanvasIcon', 'CircleShape', 'RectShape'].includes(element.value.component))
   )
 })
 onMounted(() => {

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

@@ -104,6 +104,7 @@ const props = defineProps({
 const { element, editMode, active, disabled, showPosition } = toRefs(props)
 
 const state = reactive({
+  emptyValue: '-',
   data: null,
   viewDataInfo: null,
   totalItems: 0,
@@ -229,7 +230,7 @@ const assignment = content => {
       if (dataRowFiledName.value.includes(itm)) {
         const ele = itm.slice(1, -1)
         let value = dataRowNameSelect.value[ele] !== undefined ? dataRowNameSelect.value[ele] : null
-        let targetValue = !!value ? value : '-'
+        let targetValue = !!value ? value : state.emptyValue
         if (thresholdStyleInfo && thresholdStyleInfo[ele]) {
           const thresholdStyle = thresholdStyleInfo[ele]
           targetValue = `<span style="color:${thresholdStyle.color};background-color: ${thresholdStyle.backgroundColor}">${targetValue}</span>`
@@ -362,8 +363,16 @@ const editCursor = () => {
   }, 100)
 }
 
+const updateEmptyValue = view => {
+  state.emptyValue =
+    view?.senior?.functionCfg?.emptyDataStrategy === 'custom'
+      ? view.senior.functionCfg.emptyDataCustomValue || ''
+      : '-'
+}
+
 const calcData = (view: Chart, callback) => {
   isError.value = false
+  updateEmptyValue(view)
   if (view.tableId || view['dataFrom'] === 'template') {
     const v = JSON.parse(JSON.stringify(view))
     getData(v)
@@ -483,6 +492,7 @@ const initCurFields = chartDetails => {
 // 初始化此处不必刷新
 const renderChart = viewInfo => {
   //do renderView
+  updateEmptyValue(viewInfo)
   initCurFieldsChange()
   eventBus.emit('initCurFields-' + element.value.id)
 }

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

@@ -56,6 +56,10 @@ declare interface ChartFunctionCfg {
    * 空值处理
    */
   emptyDataStrategy: string
+  /**
+   * 自定义值
+   */
+  emptyDataCustomValue: string
   /**
    * 空值字段控制
    */

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

@@ -60,6 +60,10 @@ const showIgnoreOption = computed(() => {
   )
 })
 
+const isRichText = computed(() => {
+  return equalsAny(props.chart.type, 'rich-text')
+})
+
 const showEmptyDataFieldCtrl = computed(() => {
   return (
     showProperty('emptyDataStrategy') &&
@@ -188,14 +192,27 @@ onMounted(() => {
           @change="changeFunctionCfg"
         >
           <el-radio :effect="themes" :label="'breakLine'">
-            {{ t('chart.break_line') }}
-          </el-radio>
-          <el-radio :effect="themes" :label="'setZero'">{{ t('chart.set_zero') }}</el-radio>
-          <el-radio v-if="showIgnoreOption" :effect="themes" :label="'ignoreData'">
-            {{ t('chart.ignore_data') }}
+            {{ isRichText ? '置为"-"' : t('chart.break_line') }}
           </el-radio>
+          <el-radio v-if="isRichText" :effect="themes" :label="'custom'"> 自定义 </el-radio>
+          <template v-if="!isRichText">
+            <el-radio :effect="themes" :label="'setZero'">{{ t('chart.set_zero') }}</el-radio>
+            <el-radio v-if="showIgnoreOption" :effect="themes" :label="'ignoreData'">
+              {{ t('chart.ignore_data') }}
+            </el-radio>
+          </template>
         </el-radio-group>
       </el-form-item>
+      <el-form-item>
+        <el-input
+          v-if="state.functionForm.emptyDataStrategy === 'custom'"
+          v-model="state.functionForm['emptyDataCustomValue']"
+          class="value-item"
+          @change="changeFunctionCfg"
+          placeholder="请输入自定义值"
+          clearable
+        />
+      </el-form-item>
       <el-form-item
         v-if="showEmptyDataFieldCtrl"
         :label="t('chart.empty_data_field_ctrl')"

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

@@ -729,6 +729,7 @@ export const DEFAULT_FUNCTION_CFG: ChartFunctionCfg = {
   sliderFillBg: '#BCD6F1',
   sliderTextColor: '#999999',
   emptyDataStrategy: 'breakLine',
+  emptyDataCustomValue: '',
   emptyDataFieldCtrl: []
 }
 export const DEFAULT_ASSIST_LINE_CFG: ChartAssistLineCfg = {

core/core-frontend/src/views/chart/components/js/panel/charts/others/rich-text.ts

@@ -6,11 +6,17 @@ const { t } = useI18n()
  * 富文本图表
  */
 export class RichTextChartView extends AbstractChartView {
-  properties: EditorProperty[] = ['background-overall-component', 'border-style', 'threshold']
+  properties: EditorProperty[] = [
+    'background-overall-component',
+    'border-style',
+    'threshold',
+    'function-cfg'
+  ]
   propertyInner: EditorPropertyInner = {
     'background-overall-component': ['all'],
     'border-style': ['all'],
-    threshold: ['tableThreshold']
+    threshold: ['tableThreshold'],
+    'function-cfg': ['emptyDataStrategy']
   }
   axis: AxisType[] = ['xAxis', 'yAxis', 'filter']
   axisConfig: AxisConfig = {