Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev

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

@@ -46,7 +46,7 @@
       {{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}
     </template>
     <template #operations v-if="layout.indexOf(layoutConstant.HEADER) > -1">
-      <div class="header__operation header__operation--table">
+      <div class="header__operation header__operation--table" v-if="chart.type === 31">
         <el-select
                 size="mini"
                 v-model="orderPieTable"
@@ -118,7 +118,7 @@
             popper-class="option-popper"
             @change="tabelLimtChange"
         >
-          <el-option v-for="item in table.tableColumns" :key="item" :value="item">{{item}}</el-option>
+          <el-option v-for="item in table.tableColumns" :key="item.prop" :value="item.prop">{{item.prop}}</el-option>
         </el-select>
       </div>
 <!--      <div class="header__operation header__operation&#45;&#45;table">
@@ -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,
@@ -408,32 +408,29 @@ export default {
       return this.$_.slice(tableData, (pageNum - 1) * pageSize, pageNum * pageSize)
     },
     orderPieTableChange () {
+      if (this.chart.type === 31) {
         const chartParams = this.chartInfo.params ? JSON.parse(this.chartInfo.params) : null // 图表参数
         this.myChart.off('click')
         this.chartWithPieTableInit(chartParams)
+      }
     },
     chartWithPieTableInit (chartParams) {
       const self = this
       chartParams.valueColumn = this.orderPieTable
       const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000), limit: 10, order: this.orderPieTable } // 统计数据的查询参数
-      const tableQueryParams = { startTime: parseInt(this.startTime / 1000), endTime: this.endTime, limit: 10, order: this.orderPieTable } // 统计数据的查询参数
+      const tableQueryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000), limit: 10, order: this.orderPieTable } // 统计数据的查询参数
       tableQueryParams[chartParams.nameColumn] = [] // 处理两个图表不一样的地方
       get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
         if (response.code === 200) {
           const data = response.data.result
           this.chartOption.series[0].data = data.map(d => {
-            if (chartParams.nameColumn === 'fqdnCategoryName') {
             tableQueryParams[chartParams.nameColumn].push(d[chartParams.nameColumn])
-            }
             return {
               data: d,
               name: d[chartParams.nameColumn],
               value: parseInt(d[chartParams.valueColumn])
             }
           })
-          if (tableQueryParams[chartParams.nameColumn].length) {
-            // tableQueryParams[chartParams.nameColumn] = JSON.stringify(tableQueryParams[chartParams.nameColumn])
-          }
           if (this.chartOption.series[0].data && this.chartOption.series[0].data.length > 10) { // pieWithTable 图例超过10个改为滚动显示
             this.chartOption.legend.type = 'scroll'
           }
@@ -473,13 +470,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)
         }