feat(视图):视图 表格 组件样式，支持'颜色'与'字体'属性修改

frontend/src/lang/zh.js

@@ -700,7 +700,13 @@ export default {
     rose_radius: '圆角',
     view_name: '视图名称',
     name_can_not_empty: '名称不能为空',
-    custom_count: '记录数'
+    custom_count: '记录数',
+    table_title_fontsize: '表头字体大小',
+    table_item_fontsize: '表格字体大小',
+    table_header_bg: '表头背景',
+    table_item_bg: '表格背景',
+    table_item_font_color: '字体颜色',
+    stripe: '斑马纹'
   },
   dataset: {
     datalist: '数据集',

frontend/src/views/chart/chart/chart.js

 export const DEFAULT_COLOR_CASE = {
   value: 'default',
   colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
-  alpha: 100
+  alpha: 100,
+  tableHeaderBgColor: '#e8eaec',
+  tableItemBgColor: '#ffffff',
+  tableFontColor: '#606266',
+  tableStripe: true
 }
 export const DEFAULT_SIZE = {
   barDefault: true,
@@ -18,7 +22,9 @@ export const DEFAULT_SIZE = {
   pieRoseType: 'radius',
   pieRoseRadius: 5,
   funnelWidth: 80,
-  radarShape: 'polygon'
+  radarShape: 'polygon',
+  tableTitleFontSize: 12,
+  tableItemFontSize: 12
 }
 export const DEFAULT_LABEL = {
   show: false,

frontend/src/views/chart/components/shape-attr/ColorSelector.vue

@@ -8,8 +8,8 @@
       >
         <el-col>
           <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
-            <el-form-item :label="$t('chart.color_case')" class="form-item">
-              <el-select v-model="colorForm.colorCase" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase">
+            <el-form-item v-if="chart.type && !chart.type.includes('table')" :label="$t('chart.color_case')" class="form-item">
+              <el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase">
                 <el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
                   <div style="float: left">
                     <span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" />
@@ -18,6 +18,20 @@
                 </el-option>
               </el-select>
             </el-form-item>
+
+            <el-form-item v-if="chart.type && chart.type.includes('table')" :label="$t('chart.table_header_bg')" class="form-item">
+              <colorPicker v-model="colorForm.tableHeaderBgColor" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeColorCase" />
+            </el-form-item>
+            <el-form-item v-if="chart.type && chart.type.includes('table')" :label="$t('chart.table_item_bg')" class="form-item">
+              <colorPicker v-model="colorForm.tableItemBgColor" style="margin-top: 6px;cursor: pointer;z-index: 1003;border: solid 1px black" @change="changeColorCase" />
+            </el-form-item>
+            <el-form-item v-if="chart.type && chart.type.includes('table')" :label="$t('chart.table_item_font_color')" class="form-item">
+              <colorPicker v-model="colorForm.tableFontColor" style="margin-top: 6px;cursor: pointer;z-index: 1002;border: solid 1px black" @change="changeColorCase" />
+            </el-form-item>
+            <el-form-item v-if="chart.type && chart.type.includes('table')" :label="$t('chart.stripe')" class="form-item">
+              <el-checkbox v-model="colorForm.tableStripe" @change="changeColorCase">{{ $t('chart.stripe') }}</el-checkbox>
+            </el-form-item>
+
             <el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">
               <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeColorCase" />
             </el-form-item>
@@ -31,6 +45,8 @@
 </template>
 
 <script>
+import { DEFAULT_COLOR_CASE } from '../../chart/chart'
+
 export default {
   name: 'ColorSelector',
   props: {
@@ -88,10 +104,7 @@ export default {
           colors: ['#05f8d6', '#0082fc', '#fdd845', '#22ed7c', '#09b0d3', '#1d27c9', '#f9e264', '#f47a75', '#009db2']
         }
       ],
-      colorForm: {
-        colorCase: 'default',
-        alpha: 100
-      }
+      colorForm: JSON.parse(JSON.stringify(DEFAULT_COLOR_CASE))
     }
   },
   watch: {
@@ -101,8 +114,7 @@ export default {
         if (chart.customAttr) {
           const customAttr = JSON.parse(chart.customAttr)
           if (customAttr.color) {
-            this.colorForm.colorCase = customAttr.color.value
-            this.colorForm.alpha = customAttr.color.alpha
+            this.colorForm = customAttr.color
           }
         }
       }
@@ -114,13 +126,12 @@ export default {
     changeColorCase() {
       const that = this
       const items = this.colorCases.filter(ele => {
-        return ele.value === that.colorForm.colorCase
-      })
-      this.$emit('onColorChange', {
-        value: items[0].value,
-        colors: items[0].colors,
-        alpha: this.colorForm.alpha
+        return ele.value === that.colorForm.value
       })
+      const val = JSON.parse(JSON.stringify(this.colorForm))
+      val.value = items[0].value
+      val.colors = items[0].colors
+      this.$emit('onColorChange', val)
     }
   }
 }

frontend/src/views/chart/components/shape-attr/SizeSelector.vue

@@ -85,6 +85,19 @@
               </el-radio-group>
             </el-form-item>
           </el-form>
+
+          <el-form v-if="chart.type && chart.type.includes('table')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
+            <el-form-item :label="$t('chart.table_title_fontsize')" class="form-item">
+              <el-select v-model="sizeForm.tableTitleFontSize" :placeholder="$t('chart.table_title_fontsize')" @change="changeBarSizeCase">
+                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('chart.table_item_fontsize')" class="form-item">
+              <el-select v-model="sizeForm.tableItemFontSize" :placeholder="$t('chart.table_item_fontsize')" @change="changeBarSizeCase">
+                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+              </el-select>
+            </el-form-item>
+          </el-form>
         </el-col>
 
         <el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.size') }}<i class="el-icon-setting el-icon--right" /></el-button>
@@ -116,7 +129,8 @@ export default {
         { name: this.$t('chart.line_symbol_diamond'), value: 'diamond' },
         { name: this.$t('chart.line_symbol_pin'), value: 'pin' },
         { name: this.$t('chart.line_symbol_arrow'), value: 'arrow' }
-      ]
+      ],
+      fontSize: []
     }
   },
   watch: {
@@ -133,8 +147,19 @@ export default {
     }
   },
   mounted() {
+    this.init()
   },
   methods: {
+    init() {
+      const arr = []
+      for (let i = 10; i <= 30; i = i + 2) {
+        arr.push({
+          name: i + '',
+          value: i + ''
+        })
+      }
+      this.fontSize = arr
+    },
     changeBarSizeCase() {
       this.$emit('onSizeChange', this.sizeForm)
     }

frontend/src/views/chart/components/table/TableNormal.vue

@@ -8,6 +8,9 @@
       :height="height"
       :checkbox-config="{highlight: true}"
       :width-resize="true"
+      :header-row-style="table_header_class"
+      :row-style="getRowStyle"
+      class="table-class"
     >
       <ux-table-column
         v-for="field in fields"
@@ -59,6 +62,21 @@ export default {
       bg_class: {
         background: hexColorToRGBA('#ffffff', 0)
       },
+      table_header_class: {
+        fontSize: '12px',
+        color: '#606266',
+        background: '#e8eaec'
+      },
+      table_item_class: {
+        fontSize: '12px',
+        color: '#606266',
+        background: '#ffffff'
+      },
+      table_item_class_stripe: {
+        fontSize: '12px',
+        color: '#606266',
+        background: '#ffffff'
+      },
       title_show: true
     }
   },
@@ -91,6 +109,23 @@ export default {
       }, 100)
     },
     initStyle() {
+      if (this.chart.customAttr) {
+        const customAttr = JSON.parse(this.chart.customAttr)
+        if (customAttr.color) {
+          this.table_header_class.color = customAttr.color.tableFontColor
+          this.table_header_class.background = hexColorToRGBA(customAttr.color.tableHeaderBgColor, customAttr.color.alpha)
+          this.table_item_class.color = customAttr.color.tableFontColor
+          this.table_item_class.background = hexColorToRGBA(customAttr.color.tableItemBgColor, customAttr.color.alpha)
+        }
+        if (customAttr.size) {
+          this.table_header_class.fontSize = customAttr.size.tableTitleFontSize + 'px'
+          this.table_item_class.fontSize = customAttr.size.tableItemFontSize + 'px'
+        }
+        this.table_item_class_stripe = JSON.parse(JSON.stringify(this.table_item_class))
+        if (customAttr.color.tableStripe) {
+          this.table_item_class_stripe.background = hexColorToRGBA(customAttr.color.tableItemBgColor, customAttr.color.alpha - 40)
+        }
+      }
       if (this.chart.customStyle) {
         const customStyle = JSON.parse(this.chart.customStyle)
         if (customStyle.text) {
@@ -104,11 +139,20 @@ export default {
           this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
         }
       }
+    },
+    getRowStyle({ row, rowIndex }) {
+      if (rowIndex % 2 === 0) {
+        return this.table_item_class_stripe
+      } else {
+        return this.table_item_class
+      }
     }
   }
 }
 </script>
 
 <style scoped>
-
+  .table-class>>>.body--wrapper{
+    background: rgba(1,1,1,0);
+  }
 </style>