From 85a6f1ae10a80f8eb89681c10a41f5ce3c4ef28a Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Wed, 2 Feb 2022 13:29:46 +0800
Subject: [PATCH] feat: S2

---
 .../views/chart/chart/common/common_table.js  | 47 +++++++++++++++++--
 .../shape-attr/SizeSelectorAntV.vue           | 12 ++++-
 2 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/frontend/src/views/chart/chart/common/common_table.js b/frontend/src/views/chart/chart/common/common_table.js
index 81214b36a2..28a9fef32d 100644
--- a/frontend/src/views/chart/chart/common/common_table.js
+++ b/frontend/src/views/chart/chart/common/common_table.js
@@ -1,11 +1,50 @@
+import { hexColorToRGBA } from '@/views/chart/chart/util'
+import { DEFAULT_COLOR_CASE, DEFAULT_SIZE } from '@/views/chart/chart/chart'
 
 export function getCustomTheme(chart) {
-  const theme = {}
-  const background = {
-    color: '#00000000'
+  const theme = {
+    background: {
+      color: '#00000000'
+    },
+    colCell: {
+      cell: {
+        backgroundColor: hexColorToRGBA(DEFAULT_COLOR_CASE.tableHeaderBgColor, DEFAULT_COLOR_CASE.alpha)
+      },
+      bolderText: {
+        fill: DEFAULT_COLOR_CASE.tableFontColor,
+        fontSize: DEFAULT_SIZE.tableTitleFontSize
+      }
+    },
+    dataCell: {
+      cell: {
+        backgroundColor: hexColorToRGBA(DEFAULT_COLOR_CASE.tableItemBgColor, DEFAULT_COLOR_CASE.alpha)
+      },
+      text: {
+        fill: DEFAULT_COLOR_CASE.tableFontColor,
+        fontSize: DEFAULT_SIZE.tableItemFontSize
+      }
+    }
+  }
+
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    // color
+    if (customAttr.color) {
+      const c = JSON.parse(JSON.stringify(customAttr.color))
+      theme.colCell.cell.backgroundColor = hexColorToRGBA(c.tableHeaderBgColor, c.alpha)
+      theme.colCell.bolderText.fill = c.tableFontColor
+      theme.dataCell.cell.backgroundColor = hexColorToRGBA(c.tableItemBgColor, c.alpha)
+      theme.dataCell.text.fill = c.tableFontColor
+    }
+    // size
+    if (customAttr.size) {
+      const s = JSON.parse(JSON.stringify(customAttr.size))
+      theme.colCell.bolderText.fontSize = parseInt(s.tableTitleFontSize)
+      theme.dataCell.text.fontSize = parseInt(s.tableItemFontSize)
+    }
   }
 
-  theme.background = background
   return theme
 }
 
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
index b2b58c76b7..74dfa0bf06 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
@@ -110,8 +110,18 @@
         <el-form-item :label="$t('chart.table_column_width_config')" class="form-item">
           <el-radio-group v-model="sizeForm.tableColumnMode" @change="changeBarSizeCase">
             <el-radio label="adapt"><span>{{ $t('chart.table_column_adapt') }}</span></el-radio>
-            <el-radio label="custom"><span>{{ $t('chart.table_column_custom') }}</span></el-radio>
+            <el-radio label="custom">
+              <span>{{ $t('chart.table_column_custom') }}</span>
+            </el-radio>
           </el-radio-group>
+          <el-tooltip class="item" effect="dark" placement="bottom">
+            <div slot="content">
+              列宽并非任何时候都能生效。
+              <br>
+              容器宽度优先级高于列宽，即(表格容器宽度 / 列数 > 指定列宽)，则列宽优先取(容器宽度 / 列数)。
+            </div>
+            <i class="el-icon-info" style="cursor: pointer;color: #606266;margin-left: 4px;" />
+          </el-tooltip>
         </el-form-item>
         <el-form-item v-show="sizeForm.tableColumnMode === 'custom'" label="" class="form-item form-item-slider">
           <el-slider v-model="sizeForm.tableColumnWidth" :min="100" :max="500" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />