CN-247 流量统计页面-APP分析统计图表配置

src/components/charts/PieTable.vue

@@ -6,7 +6,7 @@
       style="width: 100%;border: 1px solid #E7EAED"
       :row-key="getRowKey"
       @expand-change="currentChange"
-      current-row-key="domain"
+      :current-row-key="tableNameColumn"
       tooltip-effect="light"
       :expand-row-keys="expandRowKeys"
       :size="'mini'"
@@ -37,7 +37,10 @@
                 :prop="item.prop"
                 #default="{row}">
             <span v-if="item.prop === 'nameColumn'">
-                {{ nameColumn === 'fqdnCategoryName' ? row['fqdnCategoryName'] : row['reputationLevel'] }}
+                {{ nameColumn === 'fqdnCategoryName' ? row['fqdnCategoryName'] :(nameColumn === 'fqdnReputationLevel'? row['fqdnReputationLevel']:(nameColumn==='appCategory'?row['appCategory']:row['appRisk']))}}
+            </span>
+              <span v-else-if="item.prop === 'tableNameColumn'">
+                {{ tableNameColumn === 'appName' ? row['appName'] : row['domain']}}
             </span>
               <span v-else-if="item.prop === 'bytes'">
                 {{unitConvert(row[item.prop], unitTypes.byte).join(' ')}}
@@ -58,11 +61,14 @@
         :key="index"
         show-overflow-tooltip
         :min-width="item.width"
-        :label="item.label"
+        :label="(tableNameColumn === 'appName'&& item.prop === 'tableNameColumn')? $t('overall.appName'):item.label"
         :prop="item.prop"
         #default="{row}">
       <span v-if="item.prop === 'nameColumn'">
-        {{ nameColumn === 'fqdnCategoryName' ? row['categoryName'] : row['reputationLevel'] }}
+          {{ nameColumn === 'fqdnCategoryName' ? row['categoryName'] :(nameColumn === 'fqdnReputationLevel'? row['reputationLevel']:(nameColumn==='appCategory'?row['appCategory']:row['appRisk']))}}
+      </span>
+      <span v-else-if="item.prop === 'tableNameColumn'">
+          {{ tableNameColumn === 'appName' ? row['appName'] : row['domain']}}
       </span>
       <span v-else-if="item.prop === 'bytes'">
           {{unitConvert(row[item.prop], unitTypes.byte).join(' ')}}
@@ -108,6 +114,7 @@ export default {
       handler (n) {
         if (n && n.params) {
           this.nameColumn = n.params.nameColumn
+          this.tableNameColumn = n.params.tableNameColumn
         }
       }
     }
@@ -115,13 +122,14 @@ export default {
   data () {
     return {
       nameColumn: '',
+      tableNameColumn: '',
       pieTableData: [],
       childrenTableData: [],
       expandRowKeys: [],
       tableTitles: [
         {
           label: this.$t('overall.domain'),
-          prop: 'domain',
+          prop: 'tableNameColumn', // 'domain'
           width: '20%'
         },
         {
@@ -179,21 +187,43 @@ export default {
     currentChange (row, expandedRows) {
       this.loading = true
       this.childrenTableData = []
+
+      if (this.tableNameColumn === 'appName') {
+        if (this.expandRowKeys[0] && (row.appName === this.expandRowKeys[0])) {
+          this.expandRowKeys = []
+        } else {
+          this.expandRowKeys = [row.appName]
+        }
+      } else {
         if (this.expandRowKeys[0] && (row.domain === this.expandRowKeys[0])) {
           this.expandRowKeys = []
         } else {
           this.expandRowKeys = [row.domain]
         }
+      }
+
       const url = this.chartInfo.params.urlChildrenTable
-      const queryParams = {
+      let queryParams = {
         startTime: parseInt(this.timeFilter.startTime / 1000),
         endTime: parseInt(this.timeFilter.endTime / 1000),
         order: this.order,
         domain: row.domain,
         limit: 10
       }
+      if (this.tableNameColumn === 'appName') {
+        queryParams = {
+          startTime: parseInt(this.timeFilter.startTime / 1000),
+          endTime: parseInt(this.timeFilter.endTime / 1000),
+          order: this.order,
+          appName: row.appName,
+          limit: 10
+        }
+      }
       setTimeout(() => {
         get(replaceUrlPlaceholder(url, queryParams)).then(response2 => {
+          // app：测试数据生成，如接口可正常返回数据后，删除即可
+          response2 = this.initTestDataForAppSecondTable(url, row)
+
           if (response2.code === 200) {
             this.childrenTableData = response2.data.result
           }
@@ -202,9 +232,44 @@ export default {
         })
       }, 500)
     },
+    initTestDataForAppSecondTable (url, row) {
+      let rlt = ''
+
+      if (url.indexOf('app') > -1) {
+        rlt = {
+          code: 200,
+          msg: '',
+          data: {
+            resultType: 'table',
+            result: [{
+              sessions: '0',
+              packets: '134',
+              bytes: '33202',
+              appCategory: row.appCategory,
+              serverIp: '51.104.167.186',
+              appRisk: row.appRisk
+            }, {
+              sessions: '0',
+              packets: '134',
+              bytes: '33202',
+              appCategory: row.appCategory,
+              serverIp: '23.164.67.16',
+              appRisk: row.appRisk
+            }
+            ]
+          },
+          success: true
+        }
+      }
+      return rlt
+    },
     getRowKey (row) {
+      if (this.tableNameColumn === 'appName') {
+        return row.appName
+      } else {
         return row.domain
       }
+    }
   },
   setup () {
     return {

src/views/charts/Chart.vue

@@ -2112,14 +2112,94 @@ export default {
         }, 250)
       })
     },
+
+    initTestDataForApp (chartParams) {
+      let rlt = ''
+      if (chartParams.url.indexOf('App') > -1) {
+        rlt = {
+          code: 200,
+          msg: '',
+          data: {
+            resultType: 'table',
+            result: [{
+              appCategory: 'aaa',
+              uniqApps: 'bbb',
+              bytes: '1337678073',
+              packets: '1687757',
+              sessions: '28307',
+              appRisk: 'low'
+            }, {
+              appCategory: 'www',
+              uniqApps: 'uuu',
+              bytes: '1337678073',
+              packets: '1687757',
+              sessions: '28307',
+              appRisk: 'middle'
+            }, {
+              appCategory: 'xxx',
+              uniqApps: 'zzz',
+              bytes: '1337678073',
+              packets: '1687757',
+              sessions: '28307',
+              appRisk: 'high'
+            }
+            ]
+          },
+          success: true
+        }
+      }
+      return rlt
+    },
+
+    initTestDataForAppTable (chartParams) {
+      let rlt = ''
+      if (chartParams.urlTable.indexOf('app') > -1) {
+        rlt = {
+          code: 200,
+          msg: '',
+          data: {
+            resultType: 'table',
+            result: [{
+              sessions: '0',
+              packets: '134',
+              bytes: '33202',
+              appName: 'aacccc',
+              appCategory: 'aaa',
+              appRisk: 'low'
+            }, {
+              sessions: '0',
+              packets: '134',
+              bytes: '33202',
+              appName: 'wwcccc',
+              appCategory: 'www',
+              appRisk: 'middle'
+            }, {
+              sessions: '0',
+              packets: '134',
+              bytes: '33202',
+              appName: 'xxcccc',
+              appCategory: 'xxx',
+              appRisk: 'high'
+            }
+            ]
+          },
+          success: true
+        }
+      }
+      return rlt
+    },
+
     initEchartsWithPieTable (chartParams) {
       const self = this
       chartParams.valueColumn = this.orderPieTable
       const unitType = getUnitType(chartParams.valueColumn)
       const queryParams = { ...this.queryTimeRange, limit: 10, order: this.orderPieTable, ...this.entity } // 统计数据的查询参数
       const tableQueryParams = { ...this.queryTimeRange, limit: 10, order: this.orderPieTable, ...this.entity } // 统计数据的查询参数
-      tableQueryParams[chartParams.nameColumn] = [] // 处理两个图表不一样的地方
+      tableQueryParams[chartParams.nameColumn] = [] // 处理两个图表不一样的地方)
       get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
+        // app：测试数据生成，如接口可正常返回数据后，删除即可
+        response = this.initTestDataForApp(chartParams)
+
         if (response.code === 200) {
           if (this.$_.isEmpty(response.data.result)) {
             this.noData = true
@@ -2153,6 +2233,9 @@ export default {
           this.myChart.setOption(this.chartOption)
           if (!this.$_.isEmpty(data)) {
             get(replaceUrlPlaceholder(chartParams.urlTable, tableQueryParams)).then(response2 => {
+              // app：测试数据生成，如接口可正常返回数据后，删除即可
+              response2 = this.initTestDataForAppTable(chartParams)
+
               if (response2.code === 200) {
                 this.pieTableData = response2.data.result
               } else {