From 409cd06063d0dea83c127618208085c706f9b7b3 Mon Sep 17 00:00:00 2001
From: zhenghuang <236220500@qq.com>
Date: Sun, 28 Nov 2021 21:47:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=8E=A2=E7=B4=A2=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E5=88=97=20/=20=E6=8C=87=E6=A0=87=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E7=99=BE=E5=88=86=E6=AF=94,dashboard=E6=97=A5=E6=9C=9F?=
 =?UTF-8?q?=E5=92=8C=E6=97=A5=E6=9C=9F=E8=8C=83=E5=9B=B4=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?T-1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chart/components/table/TableNormal.vue    | 271 ++++++++++++------
 1 file changed, 184 insertions(+), 87 deletions(-)

diff --git a/frontend/src/views/chart/components/table/TableNormal.vue b/frontend/src/views/chart/components/table/TableNormal.vue
index 8673472..04dca30 100644
--- a/frontend/src/views/chart/components/table/TableNormal.vue
+++ b/frontend/src/views/chart/components/table/TableNormal.vue
@@ -1,13 +1,19 @@
 <template>
-  <div ref="tableContainer" :style="bg_class" style="padding: 8px;width: 100%;height: 100%;overflow: hidden;">
-    <el-row style="height: 100%;">
-      <p v-show="title_show" ref="title" :style="title_class">{{ chart.title }}</p>
+  <div
+    ref="tableContainer"
+    :style="bg_class"
+    style="padding: 8px; width: 100%; height: 100%; overflow: hidden"
+  >
+    <el-row style="height: 100%">
+      <p v-show="title_show" ref="title" :style="title_class">
+        {{ chart.title }}
+      </p>
       <ux-grid
         ref="plxTable"
         size="mini"
-        style="width: 100%;"
+        style="width: 100%"
         :height="height"
-        :checkbox-config="{highlight: true}"
+        :checkbox-config="{ highlight: true }"
         :width-resize="true"
         :header-row-style="table_header_class"
         :row-style="getRowStyle"
@@ -21,15 +27,15 @@
       >
         <ux-table-column
           v-for="(field, index) in fields"
-          :key="field.dataeaseName+index"
-          :field="field.subFields?'':field.dataeaseName"
+          :key="field.dataeaseName + index"
+          :field="field.subFields ? '' : field.dataeaseName"
           :resizable="true"
           :fixed="field.fixed"
           :title="field.name"
         >
           <template v-if="field.subFields">
             <ux-table-column
-              v-for="(subfield) in field.subFields"
+              v-for="subfield in field.subFields"
               :key="subfield.dataeaseName"
               :field="subfield.dataeaseName"
               :resizable="true"
@@ -42,13 +48,15 @@
       <el-row v-show="chart.type === 'table-info'" class="table-page">
         <span class="total-style">
           {{ $t('chart.total') }}
-          <span>{{ (chart.data && chart.data.tableRow)?chart.data.tableRow.length:0 }}</span>
+          <span>{{
+            chart.data && chart.data.tableRow ? chart.data.tableRow.length : 0
+          }}</span>
           {{ $t('chart.items') }}
         </span>
         <el-pagination
           small
           :current-page="currentPage.page"
-          :page-sizes="[10,20,50,100]"
+          :page-sizes="[10, 20, 50, 100]"
           :page-size="currentPage.pageSize"
           :pager-count="5"
           layout="sizes, prev, pager, next"
@@ -172,7 +180,7 @@ export default {
       for (var i = 0; i < obj.length; i++) {
         var keys = Object.keys(obj[i])
         keys.sort(function(a, b) {
-          return (Number(a) - Number(b))
+          return Number(a) - Number(b)
         })
         var str = ''
         for (var j = 0; j < keys.length; j++) {
@@ -192,33 +200,45 @@ export default {
       if (this.chart.data) {
         this.fields = JSON.parse(JSON.stringify(this.chart.data.fields))
         datas = JSON.parse(JSON.stringify(this.chart.data.tableRow))
-        const findRowIndex = this.fields.findIndex(e => e.chartType === 'row')
-        const findValueIndex = this.fields.findIndex(e => e.chartType === 'bar')
+        const findRowIndex = this.fields.findIndex((e) => e.chartType === 'row')
+        const findValueIndex = this.fields.findIndex(
+          (e) => e.chartType === 'bar'
+        )
         if (this.chart.type === 'table-info') {
           // 计算分页
           this.currentPage.show = datas.length
-          const pageStart = (this.currentPage.page - 1) * this.currentPage.pageSize
+          const pageStart =
+            (this.currentPage.page - 1) * this.currentPage.pageSize
           const pageEnd = pageStart + this.currentPage.pageSize
           datas = datas.slice(pageStart, pageEnd)
         } else if (this.chart.type === 'table-normal' && findRowIndex >= 0) {
           // 交叉表数据处理
           const xaxis = this.chart.xaxis ? JSON.parse(this.chart.xaxis) : []
-          const yaxisExt = this.chart.yaxisExt ? JSON.parse(this.chart.yaxisExt) : []
-          const xaxisFieldId = xaxis.map(e => e.dataeaseName)
-          const yaxisExtFieldId = yaxisExt.map(e => e.dataeaseName)
+          const yaxisExt = this.chart.yaxisExt
+            ? JSON.parse(this.chart.yaxisExt)
+            : []
+          const xaxisFieldId = xaxis.map((e) => e.dataeaseName)
+          const yaxisExtFieldId = yaxisExt.map((e) => e.dataeaseName)
           const fieldValueName = this.fields[findValueIndex].dataeaseName
           this.cellDimension = xaxisFieldId.length
-          let fields = this.fields.filter(e => xaxisFieldId.includes(e.dataeaseName))
+          let fields = this.fields.filter((e) =>
+            xaxisFieldId.includes(e.dataeaseName)
+          )
           console.log(fields)
           let rowSum = 0
           let columnValue = []
           let rowName = []
           yaxisExtFieldId.forEach((e, index) => {
             const arr = []
-            datas.forEach(ele => {
+            datas.forEach((ele) => {
               if (index > 0) {
                 arr.push({
-                  dataeaseName: e + ele[e] + ',' + yaxisExtFieldId[0] + ele[yaxisExtFieldId[0]],
+                  dataeaseName:
+                    e +
+                    ele[e] +
+                    ',' +
+                    yaxisExtFieldId[0] +
+                    ele[yaxisExtFieldId[0]],
                   name: ele[e]
                 })
               } else {
@@ -230,9 +250,9 @@ export default {
             })
             if (index > 0) {
               const copyArr = this.deteleObject(arr)
-              rowName.forEach(item => {
+              rowName.forEach((item) => {
                 const newArr = []
-                copyArr.forEach(sube => {
+                copyArr.forEach((sube) => {
                   if (item.dataeaseName === sube.dataeaseName.split(',')[1]) {
                     newArr.push(sube)
                   }
@@ -246,7 +266,7 @@ export default {
           if (xaxisFieldId.length > 1) {
             let arr1 = []
             let arr2 = []
-            datas.forEach(obj => {
+            datas.forEach((obj) => {
               for (const key in obj) {
                 if (Object.hasOwnProperty.call(obj, key)) {
                   const element = obj[key]
@@ -265,42 +285,57 @@ export default {
             arr1 = this.deteleObject(arr1)
             arr2 = this.deteleObject(arr2)
             let rowIndex = 0
-            arr1.forEach(e => {
+            arr1.forEach((e) => {
               this.mergeCells.push({
                 col: 0,
                 row: rowIndex,
                 rowspan: arr2.length,
                 colspan: 1
               })
-              arr2.forEach(item => {
+              arr2.forEach((item) => {
                 const obj = {}
                 columnValue.push(Object.assign(obj, e, item))
                 rowIndex += 1
               })
             })
-            columnValue.forEach(ele => {
+            columnValue.forEach((ele) => {
               if (yaxisExtFieldId.length > 1) {
-                datas.forEach(subEle => {
-                  if (ele[xaxisFieldId[0]] === subEle[xaxisFieldId[0]] && ele[xaxisFieldId[1]] === subEle[xaxisFieldId[1]]) {
-                    const key = yaxisExtFieldId[1] + subEle[yaxisExtFieldId[1]] + ',' + yaxisExtFieldId[0] + subEle[yaxisExtFieldId[0]]
+                datas.forEach((subEle) => {
+                  if (
+                    ele[xaxisFieldId[0]] === subEle[xaxisFieldId[0]] &&
+                    ele[xaxisFieldId[1]] === subEle[xaxisFieldId[1]]
+                  ) {
+                    const key =
+                      yaxisExtFieldId[1] +
+                      subEle[yaxisExtFieldId[1]] +
+                      ',' +
+                      yaxisExtFieldId[0] +
+                      subEle[yaxisExtFieldId[0]]
                     ele[key] = subEle[fieldValueName]
                     rowSum += subEle[fieldValueName]
                   }
                 })
               } else {
-                datas.forEach(subEle => {
-                  if (ele[xaxisFieldId[0]] === subEle[xaxisFieldId[0]] && ele[xaxisFieldId[1]] === subEle[xaxisFieldId[1]]) {
+                datas.forEach((subEle) => {
+                  if (
+                    ele[xaxisFieldId[0]] === subEle[xaxisFieldId[0]] &&
+                    ele[xaxisFieldId[1]] === subEle[xaxisFieldId[1]]
+                  ) {
                     const key = yaxisExtFieldId[0] + subEle[yaxisExtFieldId[0]]
                     ele[key] = subEle[fieldValueName]
                     rowSum += subEle[fieldValueName]
                   }
                 })
               }
+              rowSum = rowSum.toFixed(2)
+              if (this.fields[findValueIndex].summary === 'ratio') {
+                rowSum += '%'
+              }
               ele.rowTotal = rowSum
               rowSum = 0
             })
           } else {
-            datas.forEach(obj => {
+            datas.forEach((obj) => {
               for (const key in obj) {
                 if (Object.hasOwnProperty.call(obj, key)) {
                   const element = obj[key]
@@ -313,21 +348,28 @@ export default {
               }
             })
             columnValue = this.deteleObject(columnValue)
-            columnValue.forEach(ele => {
+            columnValue.forEach((ele) => {
               if (yaxisExtFieldId.length > 1) {
-                datas.forEach(subEle => {
+                datas.forEach((subEle) => {
                   if (ele[xaxisFieldId[0]] === subEle[xaxisFieldId[0]]) {
-                    const key = yaxisExtFieldId[1] + subEle[yaxisExtFieldId[1]] + ',' + yaxisExtFieldId[0] + subEle[yaxisExtFieldId[0]]
+                    const key =
+                      yaxisExtFieldId[1] +
+                      subEle[yaxisExtFieldId[1]] +
+                      ',' +
+                      yaxisExtFieldId[0] +
+                      subEle[yaxisExtFieldId[0]]
                     ele[key] = subEle[fieldValueName]
                     rowSum += subEle[fieldValueName]
+                    console.log(3, ele)
                   }
                 })
               } else {
-                datas.forEach(subEle => {
+                datas.forEach((subEle) => {
                   if (ele[xaxisFieldId[0]] === subEle[xaxisFieldId[0]]) {
                     const key = yaxisExtFieldId[0] + subEle[yaxisExtFieldId[0]]
                     ele[key] = subEle[fieldValueName]
                     rowSum += subEle[fieldValueName]
+                    console.log(3, subEle)
                   }
                 })
               }
@@ -335,6 +377,7 @@ export default {
               rowSum = 0
             })
           }
+
           fields = fields.concat(rowName)
           fields.push({
             dataeaseName: 'rowTotal',
@@ -367,7 +410,8 @@ export default {
             pageHeight = 36
           }
           const currentHeight = this.$refs.tableContainer.offsetHeight
-          const tableMaxHeight = currentHeight - this.$refs.title.offsetHeight - 16 - pageHeight
+          const tableMaxHeight =
+            currentHeight - this.$refs.title.offsetHeight - 16 - pageHeight
           let tableHeight
           if (this.chart.data) {
             if (this.chart.type === 'table-info') {
@@ -396,17 +440,28 @@ export default {
         const customAttr = JSON.parse(this.chart.customAttr)
         if (customAttr.color) {
           this.table_header_class.color = customAttr.color.tableFontColor
-          this.table_header_class.backgroundColor = hexColorToRGBA(customAttr.color.tableHeaderBgColor, customAttr.color.alpha)
+          this.table_header_class.backgroundColor = 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)
+          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_header_class.height = customAttr.size.tableTitleHeight + 'px'
+          this.table_header_class.fontSize =
+            customAttr.size.tableTitleFontSize + 'px'
+          this.table_item_class.fontSize =
+            customAttr.size.tableItemFontSize + 'px'
+          this.table_header_class.height =
+            customAttr.size.tableTitleHeight + 'px'
           this.table_item_class.height = customAttr.size.tableItemHeight + 'px'
         }
-        this.table_item_class_stripe = JSON.parse(JSON.stringify(this.table_item_class))
+        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)
@@ -425,11 +480,18 @@ export default {
           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'
-          this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
+          this.title_class.fontStyle = customStyle.text.isItalic
+            ? 'italic'
+            : 'normal'
+          this.title_class.fontWeight = customStyle.text.isBolder
+            ? 'bold'
+            : 'normal'
         }
         if (customStyle.background) {
-          this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
+          this.bg_class.background = hexColorToRGBA(
+            customStyle.background.color,
+            customStyle.background.alpha
+          )
         }
       }
       // 修改footer合计样式
@@ -439,7 +501,15 @@ export default {
         // console.log(s_table)
         let s = ''
         for (const i in this.table_header_class) {
-          s += (i === 'fontSize' ? 'font-size' : i === 'backgroundColor' ? 'background-color' : i) + ':' + this.table_header_class[i] + ';'
+          s +=
+            (i === 'fontSize'
+              ? 'font-size'
+              : i === 'backgroundColor'
+                ? 'background-color'
+                : i) +
+            ':' +
+            this.table_header_class[i] +
+            ';'
         }
         // console.log(s_table)
         for (let i = 0; i < s_table.length; i++) {
@@ -455,7 +525,12 @@ export default {
       }
     },
     getColumStyle({ columnIndex }) {
-      if (this.chart.type === 'table-normal' && this.cellDimension > 0 && (columnIndex < this.cellDimension || columnIndex === this.fields.length - 1)) {
+      if (
+        this.chart.type === 'table-normal' &&
+        this.cellDimension > 0 &&
+        (columnIndex < this.cellDimension ||
+          columnIndex === this.fields.length - 1)
+      ) {
         return this.table_header_class
       } else {
         return ''
@@ -464,7 +539,9 @@ export default {
     summaryMethod({ columns, data }) {
       const that = this
       const means = [] // 合计
-      const findValueIndex = this.chart.data.fields.findIndex(e => e.chartType === 'bar')
+      const findValueIndex = this.chart.data.fields.findIndex(
+        (e) => e.chartType === 'bar'
+      )
       columns.forEach((column, columnIndex) => {
         if (columnIndex === 0) {
           if (this.cellDimension > 0 && findValueIndex !== -1) {
@@ -473,10 +550,23 @@ export default {
             means.push('合计')
           }
         } else {
-          if (columnIndex >= that.chart.data.fields.length - that.chart.data.series.length || this.cellDimension > 0) {
-            const values = data.map(item => Number(item[column.property]))
+          let isRatio = false
+          if (
+            columnIndex >=
+              that.chart.data.fields.length - that.chart.data.series.length ||
+            this.cellDimension > 0
+          ) {
+            const values = data.map((item) => {
+              let a = item[column.property]
+              if (typeof a === 'string' && a.indexOf('%') >= 0) {
+                a = a.replace('%', '')
+                isRatio = true
+              }
+              return Number(a)
+            })
+
             // 合计
-            if (!values.every(value => isNaN(value))) {
+            if (!values.every((value) => isNaN(value))) {
               means[columnIndex] = values.reduce((prev, curr) => {
                 const value = Number(curr)
                 if (!isNaN(value)) {
@@ -485,7 +575,14 @@ export default {
                   return prev
                 }
               }, 0)
-              means[columnIndex] = (means[columnIndex] + '').includes('.') ? means[columnIndex].toFixed(2) : means[columnIndex]
+              means[columnIndex] = (means[columnIndex] + '').includes('.')
+                ? means[columnIndex].toFixed(2)
+                : means[columnIndex]
+              if (isRatio) {
+                means[columnIndex] =
+                  means[columnIndex] > 100 ? 100 : means[columnIndex]
+                means[columnIndex] += '%'
+              }
             } else {
               means[columnIndex] = ''
             }
@@ -533,38 +630,38 @@ export default {
 </script>
 
 <style scoped>
-  .table-class>>>.body--wrapper{
-    background: rgba(1,1,1,0);
-  }
-  .table-class>>>.elx-cell{
-    max-height: none!important;
-    line-height: normal!important;
-  }
-  .table-page{
-    position: absolute;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    width: 100%;
-    overflow: hidden;
-  }
-  .page-style{
-    margin-right: auto;
-  }
-  .total-style{
-    flex: 1;
-    font-size: 12px;
-    color: #606266;
-    white-space:nowrap;
-  }
-  .page-style >>> .el-input__inner{
-    height: 24px;
-  }
-  .colum-header {
-    font-size: 12px;
-    color: #000;
-    background: rgb(78, 129, 187);
-    height: 36px;
-  }
+.table-class >>> .body--wrapper {
+  background: rgba(1, 1, 1, 0);
+}
+.table-class >>> .elx-cell {
+  max-height: none !important;
+  line-height: normal !important;
+}
+.table-page {
+  position: absolute;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  overflow: hidden;
+}
+.page-style {
+  margin-right: auto;
+}
+.total-style {
+  flex: 1;
+  font-size: 12px;
+  color: #606266;
+  white-space: nowrap;
+}
+.page-style >>> .el-input__inner {
+  height: 24px;
+}
+.colum-header {
+  font-size: 12px;
+  color: #000;
+  background: rgb(78, 129, 187);
+  height: 36px;
+}
 </style>