feat: NpmNetworkQuantity 页面接口调试

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: {
+
+    }
   }
 }
 

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: [
+      npmNetworkName: [
-        { name: 'networkAppPerformance.tcpConnectionEstablishLatency', value: 6, number: 145, P95: 56, P99: 150, unitType: 'time', trend: 'up' },
+        { name: 'networkAppPerformance.tcpConnectionEstablishLatency'},
-        { name: 'networkAppPerformance.httpResponse', value: 6, number: 184, P95: 57, P99: 192, unitType: 'time', trend: 'up' },
+        { name: 'networkAppPerformance.httpResponse'},
-        { name: 'networkAppPerformance.sslResponseLatency', value: 2, number: 0.1, P95: 0, P99: 0, unitType: 'time', trend: 'down' },
+        { name: 'networkAppPerformance.sslResponseLatency'},
-        { name: 'networkAppPerformance.packetLoss', value: 2, number: 0.0192, P95: 0.0099, P99: 0.0099, unitType: 'percent', trend: 'down' },
+        { name: 'networkAppPerformance.packetLoss'},
-        { name: 'overall.packetRetrans', value: 2, number: 0.0386, P95: 0.0299, P99: 0.0416, unitType: 'percent', trend: 'down' }
+        { 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>

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" v-for="(npm, index) in npmNetworkCycleData" :key="index">
-    <div class="single-value__title">{{$t(npm.name)}}</div>
+    <template v-if="index === 0">
-    <div class="single-value__content">
+      <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
-      <div class="single-value__content-number">{{unitConvert(npm.number, npm.unitType).join(' ')}}</div>
+      <div class="single-value__content">
-      <div class="single-value__content-value" :class="npm.trend === 'up' ? 'red' : 'green'">
+        <div class="single-value__content-number">{{unitConvert(npm.establishLatencyAvg, unitTypes.time).join(' ')}}</div>
-        <div><i class="cn-icon" :class="npm.trend === 'up' ? 'cn-icon-rise1' : 'cn-icon-decline'"></i></div>
+        <div class="single-value__content-value" :class="npm.trend === 'up' ? 'red' : 'green'">
-        <div>{{npm.value}}%</div>
+          <div><i class="cn-icon" :class="npm.trend === 'up' ? 'cn-icon-rise1' : 'cn-icon-decline'"></i></div>
+          <div>{{npm.value}}%</div>
+        </div>
       </div>
-    </div>
+      <div class="single-value__circle">
-    <div class="single-value__circle">
+        <div class="single-value__circle-p95">P95: {{unitConvert(npm.establishLatencyP95, unitTypes.time).join(' ')}}</div>
-      <div class="single-value__circle-p95">P95: {{unitConvert(npm.P95, npm.unitType).join(' ')}}</div>
+        <div class="single-value__circle-p99">P99: {{unitConvert(npm.establishLatencyP99, unitTypes.time).join(' ')}}</div>
-      <div class="single-value__circle-p99">P99: {{unitConvert(npm.P99, npm.unitType).join(' ')}}</div>
+      </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>