feat(视图): 表格支持斑马纹

core/core-frontend/src/components/visualization/UserViewEnlarge.vue

@@ -62,7 +62,7 @@ import { exportExcelDownload } from '@/views/chart/components/js/util'
 import { storeToRefs } from 'pinia'
 const dvMainStore = dvMainStoreWithOut()
 const dialogShow = ref(false)
-let viewInfo = ref(null)
+let viewInfo = ref<DeepPartial<ChartObj>>(null)
 const config = ref(null)
 const canvasStyleData = ref(null)
 const viewContainer = ref(null)
@@ -74,8 +74,15 @@ const { dvInfo } = storeToRefs(dvMainStore)
 const dialogInit = (canvasStyle, view, item, opt) => {
   optType.value = opt
   dialogShow.value = true
-  viewInfo.value = deepCopy(view)
+  viewInfo.value = deepCopy(view) as DeepPartial<ChartObj>
   viewInfo.value.customStyle.text.show = false
+  if (!viewInfo.value.type?.includes('table')) {
+    viewInfo.value.customAttr.tableHeader.tableHeaderBgColor = '#F8F8F9'
+    viewInfo.value.customAttr.tableHeader.tableHeaderFontColor = '#7C7E81'
+    viewInfo.value.customAttr.tableCell.tableItemBgColor = '#FFFFFF'
+    viewInfo.value.customAttr.tableCell.tableFontColor = '#7C7E81'
+    viewInfo.value.customAttr.tableCell.enableTableCrossBG = false
+  }
   config.value = deepCopy(item)
   canvasStyleData.value = canvasStyle
   if (opt === 'details') {

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

@@ -246,6 +246,14 @@ declare interface ChartTableCellAttr {
    * 单元格行高
    */
   tableItemHeight: number
+  /**
+   * 是否开启斑马纹
+   */
+  enableTableCrossBG: boolean
+  /**
+   * 斑马纹单数行颜色
+   */
+  tableItemSubBgColor: string
 }
 
 /**

core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue

@@ -82,6 +82,34 @@ onMounted(() => {
         @change="changeTableCell('tableItemBgColor')"
       />
     </el-form-item>
+    <el-form-item
+      :class="'form-item-' + themes"
+      class="form-item"
+      v-if="showProperty('enableTableCrossBG')"
+      label=""
+    >
+      <el-checkbox
+        v-model="state.tableCellForm.enableTableCrossBG"
+        :label="t('chart.stripe')"
+        :effect="themes"
+        @change="changeTableCell('enableTableCrossBG')"
+      />
+    </el-form-item>
+    <el-form-item
+      :class="'form-item-' + themes"
+      class="form-item"
+      label=""
+      v-if="showProperty('tableItemSubBgColor')"
+    >
+      <el-color-picker
+        v-model="state.tableCellForm.tableItemSubBgColor"
+        :effect="themes"
+        :predefine="predefineColors"
+        :disabled="!state.tableCellForm.enableTableCrossBG"
+        is-custom
+        @change="changeTableCell('tableItemSubBgColor')"
+      />
+    </el-form-item>
     <el-space>
       <el-form-item
         class="form-item"

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

@@ -39,7 +39,8 @@ export const DEFAULT_COLOR_CASE: DeepPartial<ChartAttr> = {
   },
   tableCell: {
     tableItemBgColor: '#FFFFFF',
-    tableFontColor: '#000000'
+    tableFontColor: '#000000',
+    tableItemSubBgColor: '#EEEEEE'
   }
 }
 
@@ -79,7 +80,8 @@ export const DEFAULT_COLOR_CASE_LIGHT: DeepPartial<ChartAttr> = {
   },
   tableCell: {
     tableItemBgColor: '#FFFFFF',
-    tableFontColor: '#000000'
+    tableFontColor: '#000000',
+    tableItemSubBgColor: '#EEEEEE'
   }
 }
 
@@ -119,7 +121,8 @@ export const DEFAULT_COLOR_CASE_DARK: DeepPartial<ChartAttr> = {
   },
   tableCell: {
     tableItemBgColor: '#131E42',
-    tableFontColor: '#ffffff'
+    tableFontColor: '#ffffff',
+    tableItemSubBgColor: '#EEEEEE'
   }
 }
 
@@ -333,7 +336,9 @@ export const DEFAULT_TABLE_CELL: ChartTableCellAttr = {
   tableItemAlign: 'right',
   tableItemBgColor: '#FFFFFF',
   tableItemFontSize: 12,
-  tableItemHeight: 36
+  tableItemHeight: 36,
+  enableTableCrossBG: false,
+  tableItemSubBgColor: '#EEEEEE'
 }
 export const DEFAULT_TITLE_STYLE: ChartTextStyle = {
   show: true,

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

@@ -27,7 +27,9 @@ export const TABLE_EDITOR_PROPERTY_INNER: EditorPropertyInner = {
     'tableItemFontSize',
     'tableFontColor',
     'tableItemAlign',
-    'tableItemHeight'
+    'tableItemHeight',
+    'enableTableCrossBG',
+    'tableItemSubBgColor'
   ],
   'title-selector': [
     'title',

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

@@ -236,7 +236,8 @@ export function getCustomTheme(chart: Chart): S2Theme {
     if (tableCell) {
       const tableFontColor = hexColorToRGBA(tableCell.tableFontColor, basicStyle.alpha)
       const tableItemBgColor = hexColorToRGBA(tableCell.tableItemBgColor, basicStyle.alpha)
-      const { tableItemAlign, tableItemFontSize } = tableCell
+      const tableItemSubBgColor = hexColorToRGBA(tableCell.tableItemSubBgColor, basicStyle.alpha)
+      const { tableItemAlign, tableItemFontSize, enableTableCrossBG } = tableCell
       const tmpTheme: S2Theme = {
         rowCell: {
           cell: {
@@ -267,7 +268,7 @@ export function getCustomTheme(chart: Chart): S2Theme {
         },
         dataCell: {
           cell: {
-            crossBackgroundColor: tableItemBgColor,
+            crossBackgroundColor: enableTableCrossBG ? tableItemSubBgColor : tableItemBgColor,
             backgroundColor: tableItemBgColor
           },
           bolderText: {
@@ -381,8 +382,11 @@ export function getConditions(chart: Chart) {
   if (conditions?.length > 0) {
     const { tableCell, basicStyle } = parseJson(chart.customAttr)
     const valueColor = tableCell.tableFontColor
-    const valueBgColor = hexColorToRGBA(tableCell.tableItemBgColor, basicStyle.alpha)
+    let valueBgColor = hexColorToRGBA(tableCell.tableItemBgColor, basicStyle.alpha)
-
+    const enableTableCrossBG = tableCell.enableTableCrossBG
+    if (enableTableCrossBG) {
+      valueBgColor = null
+    }
     for (let i = 0; i < conditions.length; i++) {
       const field = conditions[i]
       res.text.push({
@@ -396,9 +400,8 @@ export function getConditions(chart: Chart) {
       res.background.push({
         field: field.field.dataeaseName,
         mapping(value) {
-          return {
+          const fill = mappingColor(value, valueBgColor, field, 'backgroundColor')
-            fill: mappingColor(value, valueBgColor, field, 'backgroundColor')
+          return fill ? { fill } : null
-          }
         }
       })
     }
@@ -614,7 +617,8 @@ class SortTooltip extends BaseTooltip {
       style: {
         left: `${this.position?.x}px`,
         top: `${this.position?.y}px`,
-        pointerEvents: enterable ? 'all' : 'none'
+        pointerEvents: enterable ? 'all' : 'none',
+        zIndex: 9999
       },
       visible: true
     })