【编号:16753】看板优化，table2

FTT.Board.VueUI/src/views/board/boardlist/detail.vue

@@ -23,20 +23,20 @@
         </template>
       </page-table>
       <el-dialog
+        class="dialogBoard"
         :title="getDialogTitle()"
         :visible.sync="dialogVisible"
-        width="35%"
-        
+        width="850px"
         :before-close="handleClose"
       >
-        <div style="overflow-y:auto;height:70vh">
+        <div style="overflow-y:auto;height:55vh;">
           <div>
             <el-form
               :inline="true"
               :model="ruleForm"
               :rules="rules"
               ref="ruleForm"
-              label-width="100px"
+              label-width="110px"
               class="demo-ruleForm"
             >
               <el-row>
@@ -128,7 +128,6 @@
                     </template>
                   </el-input>
                 </el-form-item>
-                
                 <el-form-item label="刷新频率">
                   <el-input-number v-model="ruleForm.RefreshTime" :min="0"></el-input-number>
                 </el-form-item>
@@ -146,34 +145,34 @@
 
               </el-row>
               <el-row>
-                <el-form-item label="字号1颜色" v-if="ruleForm.ChartType!=5 && ruleForm.ChartType!=11">
+                <el-form-item label="表头颜色" v-if="ruleForm.ChartType!=5 && ruleForm.ChartType!=11">
                   <el-input v-model="ruleForm.FontColor1">
                     <template slot="append">
                       <el-color-picker size="mini" v-model="ruleForm.FontColor1"></el-color-picker>
                     </template>
                   </el-input>
                 </el-form-item>
-                <el-form-item label="字号1大小">
+                <el-form-item label="表头大小">
                   <el-input-number v-model="ruleForm.FontSize1" :min="0"></el-input-number>
                 </el-form-item>
               </el-row>
               <el-row>
-                <el-form-item label="字号2颜色" v-if="ruleForm.ChartType!=5 && ruleForm.ChartType!=11">
+                <el-form-item label="内容颜色" v-if="ruleForm.ChartType!=5 && ruleForm.ChartType!=11">
                   <el-input v-model="ruleForm.FontColor2">
                     <template slot="append">
                       <el-color-picker size="mini" v-model="ruleForm.FontColor2"></el-color-picker>
                     </template>
                   </el-input>
                 </el-form-item>
-                <el-form-item label="字号2大小">
+                <el-form-item label="内容大小">
                   <el-input-number v-model="ruleForm.FontSize2" :min="0"></el-input-number>
                 </el-form-item>
               </el-row>
               <el-row>
-                <el-form-item label="高度">
+                <el-form-item label="表头高度(%)">
                   <el-input-number v-model="ruleForm.Height" :min="0" :precision="1" :step="1"></el-input-number>
                 </el-form-item>
-                <el-form-item label="宽度">
+                <el-form-item label="表头宽度(%)">
                   <el-input-number v-model="ruleForm.Width" :min="0" :precision="1" :step="1"></el-input-number>
                 </el-form-item>
               </el-row>
@@ -591,6 +590,17 @@ input::-webkit-inner-spin-button {
 input[type="number"] {
   -moz-appearance: textfield;
 }
+
+</style>
+<style lang="scss" scoped>
+/deep/.dialogBoard .el-dialog__headerbtn {
+    position: absolute;
+    top: 12px;
+    right: 15px;
+}
+/deep/.dialogBoard .el-dialog__body {
+    padding: 10px 20px;
+}
 </style>
 
 

FTT.Board.VueUI/src/views/board/index.vue

@@ -284,6 +284,9 @@ export default {
           ) {
             maxheight = cha.Height;
           }
+          if(this.GetChart(element)=='Table2'){
+            maxheight="100"
+          }
         }
         var row = { key: index, height: maxheight };
         rowsArr.push(row);

FTT.Board.VueUI/src/views/chart/Table2.vue

 <template>
-  <div style="font-size:30px" :style="{color:chart.FontColor,background:chart.BackgroundColor}">
+  <div class="CustomTable" style="font-size:30px" :style="{color:chart.FontColor,background:chart.BackgroundColor}">
     <div style="width:100%">
-      <table style="width:100%;height:100%">
-        <tr style="height:8%" :style="{fontSize:chart.FontSize1!=0?chart.FontSize1+'px':'30px'}">
+      <table style="width:100%;height:100%;border-collapse: collapse;">
+        <tr :style="{
+            height:chart.Height?titleLv1Arr.length > 0?chart.Height/2+'%':chart.Height+'%':'8%',
+            fontSize: chart.FontSize1 != 0 ? chart.FontSize1 + 'px' : '30px',
+          }" v-if="titleLv1Arr.length > 0">
+          <th
+            v-for="item in titleLv1Arr"
+            :key="item.Key"
+            :colspan="item.colspan"
+            :rowspan="item.rowspan"
+            class="tableclass"
+            :style="{
+              color: chart.FontColor1?chart.FontColor1:white,
+              border: '1px' + ' solid ' + item.Color,
+              fontSize: chart.FontSize1 != 0 ? chart.FontSize1 + 'px' : '30px',
+              borderColor:
+                chart.BorderColor == null ? 'red' : chart.BorderColor,
+            }"
+          >
+            {{ item.Key }}
+          </th>
+        </tr>
+        <tr :style="{fontSize:chart.FontSize1!=0?chart.FontSize1+'px':'30px',height:chart.Height?titleLv1Arr.length > 0?chart.Height/2+'%':chart.Height+'%':'8%'}" >
           <td
             v-for="(item,index) in titlestore"
             class="tableclass"
             :key="index"
-            :style="{color:item.Color,width:item.Width+'%'}"
+            :style="{color:chart.FontColor1?chart.FontColor1:white,border:
+                    '1px' + ' solid ' + (chart.BorderColor == null
+                      ? 'red'
+                      : chart.BorderColor)}"
           >{{item.Key}}</td>
         </tr>
         <template v-for="(item,index) in itemdata">
           <tr
             :key="index"
-            :style="{fontSize:chart.FontSize2!=0?chart.FontSize2+'px':'30px',color:getfontcolor(item)}"
+            :style="{fontSize:chart.FontSize2!=0?chart.FontSize2+'px':'30px',color:chart.FontColor2?chart.FontColor2:white}"
           >
             <template v-for="(obj,index1) in item">
               <td
@@ -55,9 +79,9 @@ export default {
   data() {
     return {
       store: null,
+      titleLv1Arr: [],
       titlestore: [],
       bodystore: [],
-      // marqueewidth: 0,
       pageindex: 1,
       timer: null, //获取数据时间
       timer1: null, //换行时间
@@ -217,20 +241,45 @@ export default {
     },
     _getTitle(row) {
       var titlename = new Array();
+      var titleLv1Arr = new Array();
       for (var name in row) {
         if (name.indexOf("_") > 0) {
           var arr = name.split("_");
+          var thLv = arr.length - 1;
+          if (thLv > 1) {
+            //判断是多级表头，目前支持2级，后续可扩展
+            const existItem = titleLv1Arr.find((item) => item.Key == arr[2]);
+            if (existItem) {
+              existItem.colspan++;
+            } else {
+              titleLv1Arr.push({ Key: arr[2], Color: "red", colspan: 1 });
+            }
+
             var titleobj = { Key: arr[0], Width: arr[1], Color: "red" };
             titlename.push(titleobj);
+          } else {
+            titleLv1Arr.push({
+              Key: arr[0],
+              Color: "red",
+              colspan: 1,
+              rowspan: 2,
+            });
+          }
         } else {
           for (var item in titlename) {
             if (name.indexOf("_Color") == 0) {
               titlename[item].Color = name.split("_")[2];
             }
           }
+          for (var item in titleLv1Arr) {
+            if (name.indexOf("_Color") == 0) {
+              titleLv1Arr[item].Color = name.split("_")[2];
+            }
+          }
         }
       }
       this.titlestore = titlename;
+      this.titleLv1Arr = titleLv1Arr;
     },
     _getData(rows) {
       var me = this;
@@ -324,6 +373,14 @@ export default {
 };
 </script>
 <style scoped>
+.CustomTable div {
+  height:100%;
+  /* height: auto; */
+}
+.CustomTable th{
+  font-weight: normal!important;
+  width: 100%;
+}
 .seamless-warp {
   height: 95%;
   overflow: hidden;