feat: 网络概况折线堆叠图，ddos 接口调试完成

2022-08-05 15:50:54 +08:00
parent e7fcd2f4e2
commit 1b4667e81d
4 changed files with 31 additions and 190 deletions
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -136,11 +136,12 @@ export const api = {
  },
  // networkOverview
  netWorkOverview: {
-    totalTrafficAnalysis: 'interface/overview/totalTrafficAnalysis',
+    totalTrafficAnalysis: '/interface/overview/totalTrafficAnalysis',
    eventSeverity: '/interface/overview/eventSeverity',
    eventType: '/interface/overview/eventType',
    ddosEventAnalysis: '/interface/overview/ddosEventAnalysis',
-
+    applicationCycleTrafficTotal: '/interface/overview/applicationCycleTrafficTotal',
+    appCompanyTrafficAnalysis: '/interface/overview/appCompanyTrafficAnalysis'
  }
 }

--- a/src/views/charts2/charts/NetworkOverviewDdosDetection.vue
+++ b/src/views/charts2/charts/NetworkOverviewDdosDetection.vue
@@ -24,6 +24,7 @@
 <script>
 import { api } from '@/utils/api'
 import { get } from '@/utils/http'
+import { getSecond } from '@/utils/date-util'
 export default {
  name: 'NetworkOverviewDdosDetection',
  props: {
@@ -37,8 +38,8 @@ export default {
  methods: {
    ddosDetectDataRequests () {
      const params = {
-        startTime: this.timeFilter.startTime,
-        endTime: this.timeFilter.endTime
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime)
      }
      get(api.netWorkOverview.ddosEventAnalysis, params).then(res => {
        if (res.code === 200) {
--- a/src/views/charts2/charts/NetworkOverviewLine.vue
+++ b/src/views/charts2/charts/NetworkOverviewLine.vue
@@ -60,6 +60,7 @@ import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools'
 import _ from 'lodash'
 import { get } from '@/utils/http'
 import { api } from '@/utils/api'
+import { getSecond } from '@/utils/date-util'
 export default {
  name: 'NetworkOverviewLine',
  props: {
@@ -138,176 +139,10 @@ export default {
        val = 'Bits/s'
      }
      const params = {
-        startTime: this.timeFilter.startTime,
-        endTime: this.timeFilter.endTime
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime)
      }
-      const result = [
-        {
-          type: 'bytes',
-          totalBitsRate: {
-            analysis: {
-              avg: 20,
-              max: 3,
-              min: 1,
-              p95: 2.85
-            },
-            values: [[1435781430781, '20'], [1435781431781, '25'], [1435781432781, '30']]
-          },
-          inboundBitsRate: {
-            analysis: {
-              avg: 1,
-              max: 3,
-              min: 1,
-              p95: 2.85
-            },
-            values: [[1435781430781, '2'], [1435781431781, '3'], [1435781432781, '4']]
-          },
-          outboundBitsRate: {
-            analysis: {
-              avg: 3,
-              max: 3,
-              min: 1,
-              p95: 2.85
-            },
-            values: [[1435781430781, '5'], [1435781431781, '6'], [1435781432781, '7']]
-          },
-          internalBitsRate: {
-            analysis: {
-              avg: 4,
-              max: 3,
-              min: 1,
-              p95: 2.85
-            },
-            values: [[1435781430781, '7'], [1435781431781, '8'], [1435781432781, '9']]
-          },
-          externalBitsRate: {
-            analysis: {
-              avg: 5,
-              max: 3,
-              min: 1,
-              p95: 2.85
-            },
-            values: [[1435781430781, '9'], [1435781431781, '10'], [1435781432781, '11']]
-          },
-          otherBitsRate: {
-            analysis: {
-              avg: 2,
-              max: 3,
-              min: 1,
-              p95: 2.85
-            },
-            values: [[1435781430781, '11'], [1435781431781, '12'], [1435781432781, '13']]
-          }
-        },
-        {
-          type: 'packets',
-          totalPacketsRate: {
-            analysis: {
-              avg: 20,
-              max: 3,
-              min: 1,
-              p95: 2.85
-            },
-            values: [[1435781430781, '20'], [1435781431781, '30'], [1435781432781, '40'], [1435781433781, '50']]
-          },
-          inboundPacketsRate: {
-            analysis: {
-              avg: 3,
-              max: 3,
-              min: 1,
-              p95: 2.85
-            },
-            values: [[1435781430781, '10'], [1435781431781, '11'], [1435781432781, '12'], [1435781433781, '15']]
-          },
-          outboundPacketsRate: {
-            analysis: {
-              avg: 2,
-              max: 3,
-              min: 1,
-              p95: 2.85
-            },
-            values: [[1435781430781, '14'], [1435781431781, '15'], [1435781432781, '21'], [1435781433781, '10']]
-          },
-          internalPacketsRate: {
-            analysis: {
-              avg: 3,
-              max: 3,
-              min: 1,
-              p95: 2.85
-            },
-            values: [[1435781430781, '4'], [1435781431781, '9'], [1435781432781, '8'], [1435781433781, '10']]
-          },
-          externalPacketsRate: {
-            analysis: {
-              avg: 6,
-              max: 3,
-              min: 1,
-              p95: 2.85
-            },
-            values: [[1435781430781, '22'], [1435781431781, '12'], [1435781432781, '23'], [1435781433781, '24']]
-          },
-          otherPacketsRate: {
-            analysis: {
-              avg: 2,
-              max: 3,
-              min: 1,
-              p95: 2.85
-            },
-            values: [[1435781430781, '11'], [1435781431781, '12'], [1435781432781, '13'], [1435781433781, '14']]
-          }
-        },
-        {
-          type: 'sessions',
-          totalSessionsRate: {
-            analysis: {
-              avg: 20,
-              max: 3,
-              min: 1,
-              p95: 2.85
-            },
-            values: [
-              [1435781430781, '22'], [1435781431781, '12'], [1435781432781, '23'], [1435781433781, '24']
-            ]
-          }
-        }
-      ]
-      result.forEach((t, i) => {
-        if (t.type === 'bytes' && val === 'Bits/s') {
-          this.mpackets[0].analysis = t.totalBitsRate.analysis
-          this.mpackets[1].analysis = t.inboundBitsRate.analysis
-          this.mpackets[2].analysis = t.outboundBitsRate.analysis
-          this.mpackets[3].analysis = t.internalBitsRate.analysis
-          this.mpackets[4].analysis = t.externalBitsRate.analysis
-          this.mpackets[5].analysis = t.otherBitsRate.analysis
-          this.mpackets[0].data = t.totalBitsRate.values ? t.totalBitsRate.values : []
-          this.mpackets[1].data = t.inboundBitsRate.values ? t.inboundBitsRate.values : []
-          this.mpackets[2].data = t.outboundBitsRate.values ? t.outboundBitsRate.values : []
-          this.mpackets[3].data = t.internalBitsRate.values ? t.internalBitsRate.values : []
-          this.mpackets[4].data = t.externalBitsRate.values ? t.externalBitsRate.values : []
-          this.mpackets[5].data = t.otherBitsRate.values ? t.otherBitsRate.values : []
-          this.echartsInit(this.mpackets)
-        } else if (t.type === 'packets' && val === 'Packets/s') {
-          this.mpackets[0].analysis = t.totalPacketsRate.analysis
-          this.mpackets[1].analysis = t.inboundPacketsRate.analysis
-          this.mpackets[2].analysis = t.outboundPacketsRate.analysis
-          this.mpackets[3].analysis = t.internalPacketsRate.analysis
-          this.mpackets[4].analysis = t.externalPacketsRate.analysis
-          this.mpackets[5].analysis = t.otherPacketsRate.analysis
-          this.mpackets[0].data = t.totalPacketsRate.values ? t.totalPacketsRate.values : []
-          this.mpackets[1].data = t.inboundPacketsRate.values ? t.inboundPacketsRate.values : []
-          this.mpackets[2].data = t.outboundPacketsRate.values ? t.outboundPacketsRate.values : []
-          this.mpackets[3].data = t.internalPacketsRate.values ? t.internalPacketsRate.values : []
-          this.mpackets[4].data = t.externalPacketsRate.values ? t.externalPacketsRate.values : []
-          this.mpackets[5].data = t.otherPacketsRate.values ? t.otherPacketsRate.values : []
-          this.echartsInit(this.mpackets)
-        } else if (t.type === 'sessions' && val === 'Sessions/s') {
-          this.mpackets[0].analysis = t.totalSessionsRate.analysis
-          this.mpackets[0].data = t.totalSessionsRate.values ? t.totalSessionsRate.values : []
-          this.echartsInit(this.mpackets)
-        }
-      })
      get(api.netWorkOverview.totalTrafficAnalysis, params).then((res) => {
-        // res.data.result = result
        if (res.code === 200) {
          res.data.result.forEach((t, i) => {
            if (t.type === 'bytes' && val === 'Bits/s') {
@@ -316,13 +151,18 @@ export default {
              this.mpackets[2].analysis = t.outboundBitsRate.analysis
              this.mpackets[3].analysis = t.internalBitsRate.analysis
              this.mpackets[4].analysis = t.externalBitsRate.analysis
-              this.mpackets[5].analysis = t.otherBitsRate.analysis
+              this.mpackets[5].analysis = t.other.analysis
              this.mpackets[0].data = t.totalBitsRate.values ? t.totalBitsRate.values : []
              this.mpackets[1].data = t.inboundBitsRate.values ? t.inboundBitsRate.values : []
              this.mpackets[2].data = t.outboundBitsRate.values ? t.outboundBitsRate.values : []
              this.mpackets[3].data = t.internalBitsRate.values ? t.internalBitsRate.values : []
              this.mpackets[4].data = t.externalBitsRate.values ? t.externalBitsRate.values : []
-              this.mpackets[5].data = t.otherBitsRate.values ? t.otherBitsRate.values : []
+              this.mpackets[5].data = t.other.values ? t.other.values : []
+              this.mpackets.forEach(t => {
+                if (t.name !== 'network.total' && t.analysis.avg == 0) {
+                  t.show = false
+                }
+              })
              this.echartsInit(this.mpackets)
            } else if (t.type === 'packets' && val === 'Packets/s') {
              this.mpackets[0].analysis = t.totalPacketsRate.analysis
@@ -330,13 +170,18 @@ export default {
              this.mpackets[2].analysis = t.outboundPacketsRate.analysis
              this.mpackets[3].analysis = t.internalPacketsRate.analysis
              this.mpackets[4].analysis = t.externalPacketsRate.analysis
-              this.mpackets[5].analysis = t.otherPacketsRate.analysis
+              this.mpackets[5].analysis = t.other.analysis
              this.mpackets[0].data = t.totalPacketsRate.values ? t.totalPacketsRate.values : []
              this.mpackets[1].data = t.inboundPacketsRate.values ? t.inboundPacketsRate.values : []
              this.mpackets[2].data = t.outboundPacketsRate.values ? t.outboundPacketsRate.values : []
              this.mpackets[3].data = t.internalPacketsRate.values ? t.internalPacketsRate.values : []
              this.mpackets[4].data = t.externalPacketsRate.values ? t.externalPacketsRate.values : []
-              this.mpackets[5].data = t.otherPacketsRate.values ? t.otherPacketsRate.values : []
+              this.mpackets[5].data = t.other.values ? t.other.values : []
+              this.mpackets.forEach(t => {
+                if (t.name !== 'network.total' && t.analysis.avg == 0) {
+                  t.show = false
+                }
+              })
              this.echartsInit(this.mpackets)
            } else if (t.type === 'sessions' && val === 'Sessions/s') {
              this.mpackets[0].analysis = t.totalSessionsRate.analysis
@@ -346,15 +191,6 @@ export default {
          })
        }
      })
-      this.mpackets.forEach(t => {
-        if (t.name === 'network.total') {
-          t.show = true
-        } else {
-          if (this.$_.isEmpty(t.analysis) || t.analysis.avg === 0) {
-            t.show = false
-          }
-        }
-      })
    },
    echartsInit (echartsData) {
      const _this = this
@@ -371,6 +207,7 @@ export default {
            color: chartColor3[t.positioning],
            width: 1
          },
+          stack: t.name !== 'network.total' ? 'network.total' : '',
          symbolSize: function (value, params) {
            return _this.symbolSizeSortChange(i, value[0])
          },
@@ -505,6 +342,7 @@ export default {
          }
          this.legendSelectChange(t, 0)
        })
+        this.activeShow = 'total'
      } else if (!this.activeShow) {
        this.mpackets.forEach((t, i) => {
          t.show = true
--- a/src/views/charts2/charts/options/echartOption.js
+++ b/src/views/charts2/charts/options/echartOption.js
@@ -22,7 +22,7 @@ export const pieChartOption1 = {
      fontFamily: 'SimHei',
      rich: {
        a: {
-          width: 65,
+          width: 60,
          align: 'left',
          fontWeight: 'bold'
        },
@@ -37,10 +37,11 @@ export const pieChartOption1 = {
      const data = pieChartOption1.series[0].data
      let value
      data.forEach(t => {
-        if (t.name === name) {
+        if (t.name == name) {
          value = t.value
        }
      })
+      name = name.length > 9 ? name.substr(0, 9) + '...' : name
      const arr = ['{a|' + ' ' + value + '}' + '{b|' + name + '}']
      return arr
    }
@@ -74,7 +75,7 @@ export const pieChartOption2 = {
      fontFamily: 'SimHei',
      rich: {
        a: {
-          width: 65,
+          width: 60,
          align: 'left',
          fontWeight: 'bold'
        },
@@ -89,10 +90,11 @@ export const pieChartOption2 = {
      const data = pieChartOption2.series[0].data
      let value
      data.forEach(t => {
-        if (t.name === name) {
+        if (t.name == name) {
          value = t.value
        }
      })
+      name = name.length > 9 ? name.substr(0, 9) + '...' : name
      const arr = ['{a|' + ' ' + value + '}' + '{b|' + name + '}']
      return arr
    }
@@ -187,7 +189,6 @@ export const stackedLineChartOption = {
    {
      type: 'line',
      symbol: 'circle',
-      stack: 'network.total',
      smooth: true,
      showSymbol: false,
      emphasis: {