fix: 修改表格排序的顺序问题

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 #header>{{c.label}}</template>
-          <template #default="{ row }">{{row[c]}}</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>

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'
+    }
+  ]
+}

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()
+          this.table.tableColumns = allTableTitle['tableTitles' + this.chart.id]
-          response.data.result.forEach(d => {
-            Object.keys(d).forEach(k => {
-              tableColumns.add(k)
-            })
-          })
-          this.table.tableColumns = Array.from(tableColumns)
           this.table.tableData = response.data.result
           this.table.currentPageData = this.getTargetPageData(1, this.table.pageSize, this.table.tableData)
         }