feat: NpmNetworkQuantity 页面接口调试

2022-08-08 17:45:50 +08:00
parent bcf379580f
commit 78bf147730
3 changed files with 238 additions and 23 deletions
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -144,6 +144,21 @@ export const api = {
    applicationTrafficAnalysis: '/interface/overview/applicationTrafficAnalysis',
    appCompanyTrafficAnalysis: '/interface/overview/appCompanyTrafficAnalysis',
    appCompanyCycleTrafficTotal: '/interface/overview/appCompanyCycleTrafficTotal'
+  },
+  npm: {
+    overview: {
+      tcpSessionDelay: '/interface/application/performance/overview/tcpSessionDelay',
+      httpResponseDelay: '/interface/application/performance/overview/httpResponseDelay',
+      sslConDelay: '/interface/application/performance/overview/sslConDelay',
+      tcpLostlenPercent: '/interface/application/performance/overview/tcpLostlenPercent',
+      packetRetransPercent: '/interface/application/performance/overview/packetRetransPercent'
+    },
+    location: {
+
+    },
+    events: {
+
+    }
  }
 }

--- a/src/views/charts2/charts/NpmNetworkQuantity.vue
+++ b/src/views/charts2/charts/NpmNetworkQuantity.vue
@@ -1,25 +1,128 @@
 <template>
  <div class="npm-network-quantity">
-    <single-value :npm-network-quantity="npmNetworkQuantity"></single-value>
+    <single-value
+      :npm-network-cycle-data="npmNetworkCycleData"
+      :npm-network-last-cycle-data="npmNetworkLastCycleData"
+      :npm-network-name="npmNetworkName"
+    ></single-value>
  </div>
 </template>

 <script>
 import SingleValue from '@/views/charts2/charts/SingleValue'
+import { get } from '@/utils/http'
+import { getSecond } from '@/utils/date-util'
+import { api } from '@/utils/api'

 export default {
  name: 'NpmNetworkQuantity',
  components: { SingleValue },
+  props: {
+    chart: Object,
+    timeFilter: Object
+  },
  data () {
    return {
-      npmNetworkQuantity: [
-        { name: 'networkAppPerformance.tcpConnectionEstablishLatency', value: 6, number: 145, P95: 56, P99: 150, unitType: 'time', trend: 'up' },
-        { name: 'networkAppPerformance.httpResponse', value: 6, number: 184, P95: 57, P99: 192, unitType: 'time', trend: 'up' },
-        { name: 'networkAppPerformance.sslResponseLatency', value: 2, number: 0.1, P95: 0, P99: 0, unitType: 'time', trend: 'down' },
-        { name: 'networkAppPerformance.packetLoss', value: 2, number: 0.0192, P95: 0.0099, P99: 0.0099, unitType: 'percent', trend: 'down' },
-        { name: 'overall.packetRetrans', value: 2, number: 0.0386, P95: 0.0299, P99: 0.0416, unitType: 'percent', trend: 'down' }
-      ]
+      npmNetworkName: [
+        { name: 'networkAppPerformance.tcpConnectionEstablishLatency'},
+        { name: 'networkAppPerformance.httpResponse'},
+        { name: 'networkAppPerformance.sslResponseLatency'},
+        { name: 'networkAppPerformance.packetLoss'},
+        { name: 'overall.packetRetrans'}
+      ],
+      npmNetworkCycleData: [],
+      npmNetworkLastCycleData: []
    }
+  },
+  methods: {
+    npmNetworkCycleQuery () {
+      const params = {
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime),
+        cycle: 0
+      }
+      // const tcp = get(api.npm.overview.tcpSessionDelay, params)
+      // const http = get(api.npm.overview.httpResponseDelay, params)
+      // const ssl = get(api.npm.overview.sslConDelay, params)
+      // const tcpPercent = get(api.npm.overview.tcpLostlenPercent, params)
+      // const packetPercent = get(api.npm.overview.packetRetransPercent, params)
+      this.npmNetworkCycleData = [
+        {
+          establishLatencyAvg: 0.51,
+          establishLatencyP50: 0.16,
+          establishLatencyP90: 0.12,
+          establishLatencyP95: 0.34,
+          establishLatencyP99: 0.73
+        }, {
+          httpResponseLatencyAvg: 0.52,
+          httpResponseLatencyP50: 0.16,
+          httpResponseLatencyP90: 0.12,
+          httpResponseLatencyP95: 0.34,
+          httpResponseLatencyP99: 0.73
+        }, {
+          sslConLatencyAvg: 0.53,
+          sslConLatencyP50: 0.16,
+          sslConLatencyP90: 0.12,
+          sslConLatencyP95: 0.34,
+          sslConLatencyP99: 0.73
+        }, {
+          sequenceGapLossAvg: 0.54,
+          sequenceGapLossP50: 0.16,
+          sequenceGapLossP90: 0.12,
+          sequenceGapLossP95: 0.34,
+          sequenceGapLossP99: 0.73
+        }, {
+          pktRetransAvg: 0.55,
+          pktRetransP50: 0.16,
+          pktRetransP90: 0.12,
+          pktRetransP95: 0.34,
+          pktRetransP99: 0.73
+        }
+      ]
+      // Promise.all([tcp, http, ssl, tcpPercent, packetPercent]).then(res => {
+      //   if (res.code === 200) {
+      //     console.log(res)
+      //   }
+      // })
+    },
+    npmNetworkLastCycleQuery () {
+      const params = {
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime),
+        cycle: 1
+      }
+      // const tcp = get(api.npm.overview.tcpSessionDelay, params)
+      // const http = get(api.npm.overview.httpResponseDelay, params)
+      // const ssl = get(api.npm.overview.sslConDelay, params)
+      // const tcpPercent = get(api.npm.overview.tcpLostlenPercent, params)
+      // const packetPercent = get(api.npm.overview.packetRetransPercent, params)
+      this.npmNetworkLastCycleData = [
+        {
+          establishLatencyAvg: 0.64
+        },
+        {
+          httpResponseLatencyAvg: 0.34
+        },
+        {
+          sslConLatencyAvg: 0.86
+        },
+        {
+          sequenceGapLossAvg: 0.32
+        },
+        {
+          pktRetransAvg: 0.66
+        }
+      ]
+      // Promise.all([tcp, http, ssl, tcpPercent, packetPercent]).then(res => {
+      //   if (res.code === 200) {
+      //     console.log(res)
+      //   }
+      // })
+    }
+  },
+  mounted () {
+    this.npmNetworkCycleQuery()
+    this.npmNetworkLastCycleQuery()
  }
 }
 </script>
--- a/src/views/charts2/charts/SingleValue.vue
+++ b/src/views/charts2/charts/SingleValue.vue
@@ -1,34 +1,131 @@
 <template>
-  <div class="single-value" v-for="npm in npmNetworkQuantity" :key="npm.name">
-    <div class="single-value__title">{{$t(npm.name)}}</div>
+  <div class="single-value" v-for="(npm, index) in npmNetworkCycleData" :key="index">
+    <template v-if="index === 0">
+      <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
      <div class="single-value__content">
-      <div class="single-value__content-number">{{unitConvert(npm.number, npm.unitType).join(' ')}}</div>
+        <div class="single-value__content-number">{{unitConvert(npm.establishLatencyAvg, unitTypes.time).join(' ')}}</div>
        <div class="single-value__content-value" :class="npm.trend === 'up' ? 'red' : 'green'">
          <div><i class="cn-icon" :class="npm.trend === 'up' ? 'cn-icon-rise1' : 'cn-icon-decline'"></i></div>
          <div>{{npm.value}}%</div>
        </div>
      </div>
      <div class="single-value__circle">
-      <div class="single-value__circle-p95">P95: {{unitConvert(npm.P95, npm.unitType).join(' ')}}</div>
-      <div class="single-value__circle-p99">P99: {{unitConvert(npm.P99, npm.unitType).join(' ')}}</div>
+        <div class="single-value__circle-p95">P95: {{unitConvert(npm.establishLatencyP95, unitTypes.time).join(' ')}}</div>
+        <div class="single-value__circle-p99">P99: {{unitConvert(npm.establishLatencyP99, unitTypes.time).join(' ')}}</div>
      </div>
+    </template>
+    <template v-if="index === 1">
+      <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
+      <div class="single-value__content">
+        <div class="single-value__content-number">{{unitConvert(npm.httpResponseLatencyAvg, unitTypes.time).join(' ')}}</div>
+        <div class="single-value__content-value" :class="npm.trend === 'up' ? 'red' : 'green'">
+          <div><i class="cn-icon" :class="npm.trend === 'up' ? 'cn-icon-rise1' : 'cn-icon-decline'"></i></div>
+          <div>{{npm.value}}%</div>
+        </div>
+      </div>
+      <div class="single-value__circle">
+        <div class="single-value__circle-p95">P95: {{unitConvert(npm.httpResponseLatencyP95, unitTypes.time).join(' ')}}</div>
+        <div class="single-value__circle-p99">P99: {{unitConvert(npm.httpResponseLatencyP99, unitTypes.time).join(' ')}}</div>
+      </div>
+    </template>
+    <template v-if="index === 2">
+      <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
+      <div class="single-value__content">
+        <div class="single-value__content-number">{{unitConvert(npm.sslConLatencyAvg, unitTypes.time).join(' ')}}</div>
+        <div class="single-value__content-value" :class="npm.trend === 'up' ? 'red' : 'green'">
+          <div><i class="cn-icon" :class="npm.trend === 'up' ? 'cn-icon-rise1' : 'cn-icon-decline'"></i></div>
+          <div>{{npm.value}}%</div>
+        </div>
+      </div>
+      <div class="single-value__circle">
+        <div class="single-value__circle-p95">P95: {{unitConvert(npm.sslConLatencyP95, unitTypes.time).join(' ')}}</div>
+        <div class="single-value__circle-p99">P99: {{unitConvert(npm.sslConLatencyP99, unitTypes.time).join(' ')}}</div>
+      </div>
+    </template>
+    <template v-if="index === 3">
+      <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
+      <div class="single-value__content">
+        <div class="single-value__content-number">{{unitConvert(npm.sequenceGapLossAvg, unitTypes.percent).join(' ')}}</div>
+        <div class="single-value__content-value" :class="npm.trend === 'up' ? 'red' : 'green'">
+          <div><i class="cn-icon" :class="npm.trend === 'up' ? 'cn-icon-rise1' : 'cn-icon-decline'"></i></div>
+          <div>{{npm.value}}%</div>
+        </div>
+      </div>
+      <div class="single-value__circle">
+        <div class="single-value__circle-p95">P95: {{unitConvert(npm.sequenceGapLossP95, unitTypes.percent).join(' ')}}</div>
+        <div class="single-value__circle-p99">P99: {{unitConvert(npm.sequenceGapLossP99, unitTypes.percent).join(' ')}}</div>
+      </div>
+    </template>
+    <template v-if="index === 4">
+      <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
+      <div class="single-value__content">
+        <div class="single-value__content-number">{{unitConvert(npm.pktRetransAvg, unitTypes.percent).join(' ')}}</div>
+        <div class="single-value__content-value" :class="npm.trend === 'up' ? 'red' : 'green'">
+          <div><i class="cn-icon" :class="npm.trend === 'up' ? 'cn-icon-rise1' : 'cn-icon-decline'"></i></div>
+          <div>{{npm.value}}%</div>
+        </div>
+      </div>
+      <div class="single-value__circle">
+        <div class="single-value__circle-p95">P95: {{unitConvert(npm.pktRetransP95, unitTypes.percent).join(' ')}}</div>
+        <div class="single-value__circle-p99">P99: {{unitConvert(npm.pktRetransP99, unitTypes.percent).join(' ')}}</div>
+      </div>
+    </template>
  </div>
 </template>

 <script>
 import { unitTypes } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
-
 export default {
  name: 'SingleValue',
  props: {
-    npmNetworkQuantity: Array
+    npmNetworkCycleData: Array,
+    npmNetworkLastCycleData: Array,
+    npmNetworkName: Array
  },
  data () {
    return {
      unitTypes,
-      unitConvert
+      unitConvert,
+      npmNetworkData: [],
+      timer: null
    }
+  },
+  methods: {
+    npmNetworkQuantity (cycle, lastCycle) {
+      cycle.forEach(t => {
+        lastCycle.forEach(e => {
+          Object.keys(t).forEach(r => {
+            Object.keys(e).forEach(d => {
+              if (r === d) {
+                t.trend = this.chainCalculation(t[r], e[d]).value
+                t.value = this.chainCalculation(t[r], e[d]).total
+              }
+            })
+          })
+        })
+      })
+      this.npmNetworkData = cycle
+    },
+    chainCalculation (period, pperiod) {
+      const periodicData = {}
+      if (period > pperiod) {
+        periodicData.value = 'up'
+        periodicData.total = parseInt(((period - pperiod) / pperiod) * 100)
+      } else if (period < pperiod) {
+        periodicData.value = 'down'
+        periodicData.total = parseInt(((pperiod - period) / pperiod) * 100)
+      }
+      return periodicData
+    }
+  },
+  mounted () {
+    this.timer = setTimeout(() => {
+      this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData)
+    }, 200)
+  },
+  beforeUnmount () {
+    clearTimeout(this.timer)
  }
 }
 </script>