From f84895828196cec93dad0e90924dab8833ace3d6 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Thu, 8 Jul 2021 10:43:48 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E6=8E=92=E5=BA=8F=E7=9A=84=E9=A1=BA=E5=BA=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/charts/ChartTable.vue     | 18 +++++-
 src/components/charts/chartTableTitle.js | 74 ++++++++++++++++++++++++
 src/views/charts/Chart.vue               | 10 +---
 3 files changed, 91 insertions(+), 11 deletions(-)
 create mode 100644 src/components/charts/chartTableTitle.js

diff --git a/src/components/charts/ChartTable.vue b/src/components/charts/ChartTable.vue
index 68051b75..87551a5f 100644
--- a/src/components/charts/ChartTable.vue
+++ b/src/components/charts/ChartTable.vue
@@ -23,10 +23,18 @@
             v-for="(c, i) in tableColumns"
             show-overflow-tooltip
             :key="i"
-            :prop="c"
+            :label="c.label"
+            :prop="c.prop"
         >
-          <template #header>{{c}}</template>
-          <template #default="{ row }">{{row[c]}}</template>
+          <template #header>{{c.label}}</template>
+          <template #default="{ row }">{{}}
+            <span v-if="c.prop === 'bytes' || c.prop === 'packets' || c.prop === 'sessions'" >
+                {{shortFormatter(row[c.prop])}}
+            </span>
+            <span v-else>
+                {{row[c.prop]}}
+            </span>
+          </template>
         </el-table-column>
       </el-table>
     </div>
@@ -37,11 +45,15 @@
 </template>
 
 <script>
+import { shortFormatter } from '@/components/charts/chartFormatter'
 export default {
   name: 'ChartTable',
   props: {
     tableColumns: Array,
     tableData: Array
+  },
+  methods: {
+    shortFormatter: shortFormatter
   }
 }
 </script>
diff --git a/src/components/charts/chartTableTitle.js b/src/components/charts/chartTableTitle.js
new file mode 100644
index 00000000..bedc1c64
--- /dev/null
+++ b/src/components/charts/chartTableTitle.js
@@ -0,0 +1,74 @@
+export const allTableTitle = {
+  tableTitles10: [
+    {
+      label: 'clientIp',
+      prop: 'clientIp'
+    },
+    {
+      label: 'bytes',
+      prop: 'bytes'
+    },
+    {
+      label: 'packets',
+      prop: 'packets'
+    },
+    {
+      label: 'sessions',
+      prop: 'sessions'
+    }
+  ],
+  tableTitles13: [
+    {
+      label: 'serverIp',
+      prop: 'serverIp'
+    },
+    {
+      label: 'bytes',
+      prop: 'bytes'
+    },
+    {
+      label: 'packets',
+      prop: 'packets'
+    },
+    {
+      label: 'sessions',
+      prop: 'sessions'
+    }
+  ],
+  tableTitles14: [
+    {
+      label: 'domain',
+      prop: 'domain'
+    },
+    {
+      label: 'bytes',
+      prop: 'bytes'
+    },
+    {
+      label: 'packets',
+      prop: 'packets'
+    },
+    {
+      label: 'sessions',
+      prop: 'sessions'
+    }
+  ],
+  tableTitles15: [
+    {
+      label: 'appName',
+      prop: 'appName'
+    },
+    {
+      label: 'bytes',
+      prop: 'bytes'
+    },
+    {
+      label: 'packets',
+      prop: 'packets'
+    },
+    {
+      label: 'sessions',
+      prop: 'sessions'
+    }
+  ]
+}
diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue
index d95fb264..dc7481bd 100644
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -144,7 +144,7 @@ import * as echarts from 'echarts'
 import * as am4Core from '@amcharts/amcharts4/core'
 import * as am4Maps from '@amcharts/amcharts4/maps'
 import { shallowRef } from 'vue'
-
+import { allTableTitle } from '@/components/charts/chartTableTitle'
 import {
   isEcharts,
   isSingleValue,
@@ -467,13 +467,7 @@ export default {
       const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000), limit: this.table.limit, order: this.table.orderBy }
       get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
         if (response.code === 200) {
-          const tableColumns = new Set()
-          response.data.result.forEach(d => {
-            Object.keys(d).forEach(k => {
-              tableColumns.add(k)
-            })
-          })
-          this.table.tableColumns = Array.from(tableColumns)
+          this.table.tableColumns = allTableTitle['tableTitles' + this.chart.id]
           this.table.tableData = response.data.result
           this.table.currentPageData = this.getTargetPageData(1, this.table.pageSize, this.table.tableData)
         }