From e6e651e17b7c53181e870c44ae16ecc48ba82674 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Mon, 26 Apr 2021 16:56:22 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=E8=A7=86=E5=9B=BE=20?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC=20=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=EF=BC=8C=E9=AB=98=E5=BA=A6=E8=87=AA=E9=80=82=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chart/components/table/TableNormal.vue    | 49 +++++++++++++++++--
 1 file changed, 46 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/chart/components/table/TableNormal.vue b/frontend/src/views/chart/components/table/TableNormal.vue
index ca6b6821cf..71d58e12dd 100644
--- a/frontend/src/views/chart/components/table/TableNormal.vue
+++ b/frontend/src/views/chart/components/table/TableNormal.vue
@@ -11,6 +11,8 @@
       :header-row-style="table_header_class"
       :row-style="getRowStyle"
       class="table-class"
+      show-summary
+      :summary-method="summaryMethod"
     >
       <ux-table-column
         v-for="field in fields"
@@ -50,7 +52,7 @@ export default {
   data() {
     return {
       fields: [],
-      height: 500,
+      height: 'auto',
       title_class: {
         margin: '8px 0',
         width: '100%',
@@ -105,8 +107,14 @@ export default {
       const that = this
       setTimeout(function() {
         const currentHeight = document.documentElement.clientHeight
-        that.height = currentHeight - 56 - 40 - 84 - that.$refs.title.offsetHeight - 8 * 2 - 20
-      }, 100)
+        const tableMaxHeight = currentHeight - 56 - 40 - 84 - that.$refs.title.offsetHeight - 8 * 2 - 20
+        const tableHeight = (that.chart.data.tableRow.length + 2) * 36
+        if (tableHeight > tableMaxHeight) {
+          that.height = tableMaxHeight + 'px'
+        } else {
+          that.height = 'auto'
+        }
+      }, 10)
     },
     initStyle() {
       if (this.chart.customAttr) {
@@ -139,6 +147,15 @@ export default {
           this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
         }
       }
+
+      // 修改footer合计样式
+      const s_table = document.getElementsByClassName('elx-table--footer')[0]
+      // console.log(s_table)
+      let s = ''
+      for (const i in this.table_header_class) {
+        s += i + ':' + this.table_header_class[i] + ';'
+      }
+      s_table.setAttribute('style', s)
     },
     getRowStyle({ row, rowIndex }) {
       if (rowIndex % 2 === 0) {
@@ -146,6 +163,32 @@ export default {
       } else {
         return this.table_item_class
       }
+    },
+    summaryMethod({ columns, data }) {
+      const means = [] // 合计
+      columns.forEach((column, columnIndex) => {
+        if (columnIndex === 0) {
+          means.push('合计')
+        } else {
+          const values = data.map(item => Number(item[column.property]))
+          // 合计
+          if (!values.every(value => isNaN(value))) {
+            means[columnIndex] = values.reduce((prev, curr) => {
+              const value = Number(curr)
+              if (!isNaN(value)) {
+                return prev + curr
+              } else {
+                return prev
+              }
+            }, 0)
+            means[columnIndex] = means[columnIndex].toFixed(2)
+          } else {
+            means[columnIndex] = ''
+          }
+        }
+      })
+      // 返回一个二维数组的表尾合计(不要平均值，就不要在数组中添加)
+      return [means]
     }
   }
 }