feat(图表): 明细表和汇总表支持隐藏表头 #8834

2024-05-29 16:08:24 +08:00 · 2024-05-29 16:08:24 +08:00 · d00f124c86
commit d00f124c86
parent 1055c7da17
11 changed files with 81 additions and 27 deletions
--- a/core/core-frontend/src/components/collapse-switch-item/src/CollapseSwitchItem.vue
+++ b/core/core-frontend/src/components/collapse-switch-item/src/CollapseSwitchItem.vue
@ -13,6 +13,11 @@ const props = defineProps({
  themes: {
    type: String as PropType<EditorTheme>,
    default: 'dark'
+  },
+  showSwitch: {
+    type: Boolean,
+    required: false,
+    default: true
  }
 })
 const emit = defineEmits(['update:modelValue', 'modelChange'])
@ -45,12 +50,15 @@ const switchValue = computed({
        <span>
          {{ title }}
        </span>
-        <el-switch
-          :effect="themes"
-          size="small"
-          v-model="switchValue"
-          @click.stop="onSwitchChange"
-        />
+        <div>
+          <el-switch
+            v-show="showSwitch"
+            v-model="switchValue"
+            :effect="themes"
+            size="small"
+            @click.stop="onSwitchChange"
+          />
+        </div>
      </div>
    </template>
    <slot />
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@ -1167,7 +1167,8 @@ export default {
    progress_target: '目标值',
    progress_current: '实际值',
    gauge_axis_label: '显示刻度',
-    gauge_percentage_tick: '百分比刻度'
+    gauge_percentage_tick: '百分比刻度',
+    add_style: '添加样式'
  },
  dataset: {
    scope_edit: '仅编辑时生效',
--- a/core/core-frontend/src/models/chart/chart-attr.d.ts
+++ b/core/core-frontend/src/models/chart/chart-attr.d.ts
@ -286,6 +286,10 @@ declare interface ChartTableHeaderAttr {
   * 列头鼠标悬浮提示开关
   */
  showColTooltip: boolean
+  /**
+   * 表头显示开关
+   */
+  showTableHeader: boolean
 }
 /**
 * 单元格属性
--- 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
@ -257,7 +257,7 @@ init()
          <el-tooltip effect="dark" placement="bottom">
            <el-icon style="margin-left: 10px"><InfoFilled /></el-icon>
            <template #content>
-              阈值设置，决定仪表盘区间颜色，为空则不开启阈值，范围(0-100)，逐级递增
+              条件样式设置，决定仪表盘区间颜色，为空则不开启阈值，范围(0-100)，逐级递增
              <br />
              例如：输入 30,70；表示：分为3段，分别为[0,30],(30,70],(70,100]
            </template>
@ -292,7 +292,7 @@ init()
          <el-tooltip effect="dark" placement="bottom">
            <el-icon style="margin-left: 10px"><InfoFilled /></el-icon>
            <template #content>
-              阈值设置，决定水波图颜色，为空则不开启阈值，范围(0-100)，逐级递增
+              条件样式设置，决定水波图颜色，为空则不开启阈值，范围(0-100)，逐级递增
              <br />
              例如：输入 30,70；表示：分为3段，分别为[0,30],(30,70],(70,100]
            </template>
@ -370,7 +370,7 @@ init()
    <el-col v-if="props.chart.type && props.chart.type === 'indicator'">
      <el-col>
        <div class="inner-container">
-          <span class="label" :class="'label-' + props.themes">阈值设置</span>
+          <span class="label" :class="'label-' + props.themes">条件样式设置</span>
          <span class="right-btns">
            <span
              class="set-text-info"
@ -468,7 +468,7 @@ init()
    <el-col v-show="showProperty('tableThreshold')">
      <el-col>
        <div class="inner-container">
-          <span class="label" :class="'label-' + props.themes">阈值设置</span>
+          <span class="label" :class="'label-' + props.themes">条件样式设置</span>
          <span class="right-btns">
            <span
              class="set-text-info"
--- 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
@ -436,7 +436,7 @@ init()
          <template #icon>
            <Icon name="icon_add_outlined" />
          </template>
-          {{ t('chart.add_condition') }}
+          {{ t('chart.add_style') }}
        </el-button>
      </div>
    </div>
@ -451,7 +451,7 @@ init()
      <template #icon>
        <Icon name="icon_add_outlined" />
      </template>
-      {{ t('chart.add_threshold') }}
+      {{ t('chart.add_condition') }}
    </el-button>
  </el-col>
 </template>
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
@ -371,11 +371,15 @@ watch(
              @onExtTooltipChange="onExtTooltipChange"
            />
          </collapse-switch-item>
-          <el-collapse-item
-            :effect="themes"
-            name="tableHeader"
-            :title="t('chart.table_header')"
+          <collapse-switch-item
            v-if="showProperties('table-header-selector')"
+            v-model="chart.customAttr.tableHeader.showTableHeader"
+            :change-model="chart.customAttr.tableHeader"
+            :effect="themes"
+            :title="t('chart.table_header')"
+            :show-switch="propertyInnerAll['table-header-selector'].includes('showTableHeader')"
+            name="tableHeader"
+            @modelChange="val => onTableHeaderChange(val, 'showTableHeader')"
          >
            <table-header-selector
              :property-inner="propertyInnerAll['table-header-selector']"
@ -383,7 +387,7 @@ watch(
              :chart="chart"
              @onTableHeaderChange="onTableHeaderChange"
            />
-          </el-collapse-item>
+          </collapse-switch-item>
          <el-collapse-item
            :effect="themes"
            name="tableCell"
--- 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
@ -66,7 +66,12 @@ onMounted(() => {
 </script>

 <template>
-  <el-form ref="tableHeaderForm" :model="state.tableHeaderForm" label-position="top">
+  <el-form
+    :model="state.tableHeaderForm"
+    :disabled="!state.tableHeaderForm.showTableHeader"
+    ref="tableHeaderForm"
+    label-position="top"
+  >
    <el-form-item
      :label="t('chart.backgroundColor')"
      class="form-item"
--- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts
+++ b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
@ -349,7 +349,8 @@ export const DEFAULT_TABLE_HEADER: ChartTableHeaderAttr = {
  tableTitleHeight: 36,
  tableHeaderSort: false,
  showColTooltip: false,
-  showRowTooltip: false
+  showRowTooltip: false,
+  showTableHeader: true
 }
 export const DEFAULT_TABLE_CELL: ChartTableCellAttr = {
  tableFontColor: '#000000',
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts
@ -18,7 +18,8 @@ export class TableInfo extends S2ChartView<TableSheet> {
    ...TABLE_EDITOR_PROPERTY_INNER,
    'table-header-selector': [
      ...TABLE_EDITOR_PROPERTY_INNER['table-header-selector'],
-      'tableHeaderSort'
+      'tableHeaderSort',
+      'showTableHeader'
    ],
    'basic-style-selector': [
      'tableColumnMode',
@ -135,8 +136,22 @@ export class TableInfo extends S2ChartView<TableSheet> {
    }
    // tooltip
    this.configTooltip(s2Options)
-    // header interaction
-    this.configHeaderInteraction(chart, s2Options)
+    // 隐藏表头，保留顶部的分割线, 禁用表头横向 resize
+    if (customAttr.tableHeader.showTableHeader === false) {
+      s2Options.style.colCfg.height = 1
+      s2Options.interaction = {
+        resize: {
+          colCellVertical: false
+        }
+      }
+      s2Options.colCell = (node, sheet, config) => {
+        node.label = ' '
+        return new TableColCell(node, sheet, config)
+      }
+    } else {
+      // header interaction
+      this.configHeaderInteraction(chart, s2Options)
+    }
    // 开始渲染
    const newChart = new TableSheet(containerDom, s2DataConfig, s2Options)

--- a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts
@ -17,7 +17,8 @@ export class TableNormal extends S2ChartView<TableSheet> {
    ...TABLE_EDITOR_PROPERTY_INNER,
    'table-header-selector': [
      ...TABLE_EDITOR_PROPERTY_INNER['table-header-selector'],
-      'tableHeaderSort'
+      'tableHeaderSort',
+      'showTableHeader'
    ]
  }
  axis: AxisType[] = ['xAxis', 'yAxis', 'drill', 'filter']
@ -134,8 +135,22 @@ export class TableNormal extends S2ChartView<TableSheet> {
    }
    // tooltip
    this.configTooltip(s2Options)
-    // header interaction
-    this.configHeaderInteraction(chart, s2Options)
+    // 隐藏表头，保留顶部的分割线, 禁用表头横向 resize
+    if (customAttr.tableHeader.showTableHeader === false) {
+      s2Options.style.colCfg.height = 1
+      s2Options.interaction = {
+        resize: {
+          colCellVertical: false
+        }
+      }
+      s2Options.colCell = (node, sheet, config) => {
+        node.label = ' '
+        return new TableColCell(node, sheet, config)
+      }
+    } else {
+      // header interaction
+      this.configHeaderInteraction(chart, s2Options)
+    }
    // 开始渲染
    const newChart = new TableSheet(containerDom, s2DataConfig, s2Options)

--- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
+++ b/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
@ -207,7 +207,8 @@ const initScroll = () => {
      return
    }
    const rowHeight = customAttr.tableCell.tableItemHeight
-    const headerHeight = customAttr.tableHeader.tableTitleHeight
+    const headerHeight =
+      customAttr.tableHeader.showTableHeader === false ? 1 : customAttr.tableHeader.tableTitleHeight
    const scrollBarSize = myChart.theme.scrollBar.size
    const scrollHeight =
      rowHeight * chartData.value.tableRow.length + headerHeight - offsetHeight + scrollBarSize