feat(视图):视图 表格 组件样式，支持'标题'与'背景'样式修改

frontend/src/views/chart/components/component-style/TitleSelector.vue

@@ -26,7 +26,7 @@
                 <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
               </el-radio-group>
             </el-form-item>
-            <el-form-item :label="$t('chart.text_v_position')" class="form-item">
+            <el-form-item v-if="chart.type && !chart.type.includes('table')" :label="$t('chart.text_v_position')" class="form-item">
               <el-radio-group v-model="titleForm.vPosition" size="mini" @change="changeTitleStyle">
                 <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
                 <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>

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

 <template>
-  <div>
-    <p style="width: 100%;">{{ chart.title }}</p>
+  <div :style="bg_class">
+    <p v-show="title_show" ref="title" :style="title_class">{{ chart.title }}</p>
     <ux-grid
       ref="plxTable"
       size="mini"
@@ -27,6 +27,8 @@
 </template>
 
 <script>
+import { hexColorToRGBA } from '../../chart/util'
+
 export default {
   name: 'TableNormal',
   props: {
@@ -45,31 +47,63 @@ export default {
   data() {
     return {
       fields: [],
-      height: 500
+      height: 500,
+      title_class: {
+        margin: '8px 0',
+        width: '100%',
+        fontSize: '18px',
+        color: '#303133',
+        textAlign: 'left',
+        fontStyle: 'normal'
+      },
+      bg_class: {
+        background: hexColorToRGBA('#ffffff', 0)
+      },
+      title_show: true
     }
   },
   watch: {
     chart() {
       this.init()
+      this.calcHeight()
     }
   },
   mounted() {
-    this.calcHeight()
     this.init()
+    this.calcHeight()
   },
   methods: {
     init() {
+      const that = this
       this.fields = JSON.parse(JSON.stringify(this.chart.data.fields))
       const datas = JSON.parse(JSON.stringify(this.chart.data.tableRow))
       this.$refs.plxTable.reloadData(datas)
-      const that = this
+      this.initStyle()
       window.onresize = function() {
         that.calcHeight()
       }
     },
     calcHeight() {
-      const currentHeight = document.documentElement.clientHeight
-      this.height = currentHeight - 56 - 40 - 84 - 24 - 16 * 2 - 20
+      const that = this
+      setTimeout(function() {
+        const currentHeight = document.documentElement.clientHeight
+        that.height = currentHeight - 56 - 40 - 84 - that.$refs.title.offsetHeight - 8 * 2 - 20
+      }, 100)
+    },
+    initStyle() {
+      if (this.chart.customStyle) {
+        const customStyle = JSON.parse(this.chart.customStyle)
+        if (customStyle.text) {
+          this.title_show = customStyle.text.show
+          this.title_class.fontSize = customStyle.text.fontSize + 'px'
+          this.title_class.color = customStyle.text.color
+          this.title_class.textAlign = customStyle.text.hPosition
+          this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
+        }
+        if (customStyle.background) {
+          this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
+        }
+      }
     }
   }
 }

frontend/src/views/chart/view/ChartEdit.vue

@@ -129,12 +129,12 @@
             <el-tab-pane :label="$t('chart.shape_attr')" class="padding-lr">
               <color-selector class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
               <size-selector class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
-              <label-selector class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
-              <tooltip-selector class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
+              <label-selector v-if="!view.type.includes('table')" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
+              <tooltip-selector v-if="!view.type.includes('table')" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
             </el-tab-pane>
             <el-tab-pane :label="$t('chart.module_style')" class="padding-lr">
               <title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
-              <legend-selector class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
+              <legend-selector v-if="!view.type.includes('table')" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
               <x-axis-selector v-if="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
               <y-axis-selector v-if="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
               <background-color-selector class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
@@ -196,7 +196,7 @@
           </el-row>
 
           <chart-component v-if="chart.type && !chart.type.includes('table')" :chart-id="chart.id" :chart="chart" class="chart-class" />
-          <table-normal v-if="chart.type && chart.type.includes('table')" :chart="chart" class="chart-class" />
+          <table-normal v-if="chart.type && chart.type.includes('table')" :chart="chart" class="table-class" />
         </el-row>
       </el-col>
     </el-row>
@@ -762,6 +762,10 @@ export default {
     height: calc(100% - 84px);
     padding: 10px;
   }
+  .table-class{
+    height: calc(100% - 104px);
+    margin: 10px;
+  }
 
   .dialog-css>>>.el-dialog__title {
     font-size: 14px;