feat: Dahsboard - npm - 网络质量概览图表根据接口返回展示数据

2022-08-09 11:39:08 +08:00
parent 1889f6b13b
commit 776936bbe2
6 changed files with 110 additions and 124 deletions
--- a/src/assets/css/components/views/charts2/npmLine.scss
+++ b/src/assets/css/components/views/charts2/npmLine.scss
@@ -14,6 +14,14 @@
      margin-right: 10px;
      align-items: center;
    }
+    .npm-line-header-right.active {
+      .npm-line-header-icon {
+        background: #ccc;
+      }
+      .npm-line-header-value {
+        color: #ccc;
+      }
+    }
    .npm-line-header-icon {
      border-radius: 3px;
      width: 16px;
@@ -35,10 +43,6 @@
      line-height: 12px;
      font-weight: 400;
    }
-    .npm-line-header-value.active {
-      color: #717171;
-      font-weight: 600;
-    }
  }
  .chart-drawing {
    height: 100%;
--- a/src/assets/css/components/views/charts2/npmNetworkQuantity.scss
+++ b/src/assets/css/components/views/charts2/npmNetworkQuantity.scss
@@ -31,32 +31,37 @@
        font-weight: 700;
        margin-right: 12px;
      }
-      .single-value__content-value {
-        font-size: 12px;
-        font-weight: 500;
-        height: 20px;
-        width: 52px;
-        line-height: 20px;
-        border-radius: 10px;
+      .single-value__content-trend {
        display: flex;
+        margin-left: 6px;
+        align-items: center;
        justify-content: center;
-        position: relative;
-        top: 50%;
-        margin-top: -10px;
-        div {
-          i {
-            margin-right: 5px;
+        margin-top: 2px;
+        border-radius: 10px;
+        font-weight:500;
+        font-size: 12px;
      }
+      .single-value__content-trend-black {
+        background-color: rgba(113,113,113,0.12);
+        color: #717171;
+        width: 36px;
+        height: 20px;
      }
-      }
-      .single-value__content-value.red {
-        background-color: rgba(226, 97, 84, 0.12);
-        color: #E26154;
-      }
-      .single-value__content-value.green {
+      .single-value__content-trend-green {
        background-color: rgba(126,159,84,0.12);
+        width: 52px;
+        height: 20px;
        color:#7E9F54;
      }
+      .single-value__content-trend-red {
+        background-color: rgba(226,97,84,0.12);
+        width: 52px;
+        height: 20px;
+        color:#E26154;
+        .cn-icon-rise1 {
+          color: #E44D3E;
+        }
+      }
    }
    .single-value__circle {
      display: flex;
--- a/src/assets/css/components/views/charts2/npmRecentEvents.scss
+++ b/src/assets/css/components/views/charts2/npmRecentEvents.scss
@@ -4,7 +4,7 @@
  .npm-recent-title {
    font-size: 14px;
    color: #353636;
-    font-weight: 500;
+    font-weight: 600;
    margin-bottom: 10px;
  }
  .npm-recent-table {
--- a/src/views/charts2/charts/NetworkOverviewLine.vue
+++ b/src/views/charts2/charts/NetworkOverviewLine.vue
@@ -375,12 +375,7 @@ export default {
          }
          this.legendSelectChange(t, 0)
        })
-      } else if (!this.activeShow) {
-        this.mpackets.forEach((t, i) => {
-          t.show = true
-          this.legendSelectChange(t, 'index')
-        })
-      } else if (this.activeShow) {
+      } else {
        this.mpackets.forEach((t, i) => {
          t.show = true
          this.legendSelectChange(t, 'index')
--- a/src/views/charts2/charts/NpmNetworkQuantity.vue
+++ b/src/views/charts2/charts/NpmNetworkQuantity.vue
@@ -41,49 +41,18 @@ export default {
        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
+      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)
+      Promise.all([tcp, http, ssl, tcpPercent, packetPercent]).then(res => {
+        res.forEach(t => {
+          if (t.code === 200) {
+            this.npmNetworkCycleData.push(t.data.result)
          }
-      ]
-      // Promise.all([tcp, http, ssl, tcpPercent, packetPercent]).then(res => {
-      //   if (res.code === 200) {
-      //     console.log(res)
-      //   }
-      // })
+        })
+      })
    },
    npmNetworkLastCycleQuery () {
      const params = {
@@ -91,33 +60,18 @@ export default {
        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
+      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)
+      Promise.all([tcp, http, ssl, tcpPercent, packetPercent]).then(res => {
+        res.forEach(t => {
+          if (t.code === 200) {
+            this.npmNetworkLastCycleData.push(t.data.result)
          }
-      ]
-      // Promise.all([tcp, http, ssl, tcpPercent, packetPercent]).then(res => {
-      //   if (res.code === 200) {
-      //     console.log(res)
-      //   }
-      // })
+        })
+      })
    }
  },
  mounted () {
--- a/src/views/charts2/charts/SingleValue.vue
+++ b/src/views/charts2/charts/SingleValue.vue
@@ -4,9 +4,14 @@
      <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
      <div class="single-value__content">
        <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 v-if="npm.trend === 'up' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-red">
+          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}%
+        </div>
+        <div v-else-if="npm.trend === 'down' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-green">
+          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}%
+        </div>
+        <div v-else class="single-value__content-trend single-value__content-trend-black">
+          <i class="cn-icon-constant cn-icon"></i>
        </div>
      </div>
      <div class="single-value__circle">
@@ -18,9 +23,14 @@
      <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 v-if="npm.trend === 'up' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-red">
+          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}%
+        </div>
+        <div v-else-if="npm.trend === 'down' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-green">
+          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}%
+        </div>
+        <div v-else class="single-value__content-trend single-value__content-trend-black">
+          <i class="cn-icon-constant cn-icon"></i>
        </div>
      </div>
      <div class="single-value__circle">
@@ -32,9 +42,14 @@
      <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 v-if="npm.trend === 'up' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-red">
+          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}%
+        </div>
+        <div v-else-if="npm.trend === 'down' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-green">
+          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}%
+        </div>
+        <div v-else class="single-value__content-trend single-value__content-trend-black">
+          <i class="cn-icon-constant cn-icon"></i>
        </div>
      </div>
      <div class="single-value__circle">
@@ -46,9 +61,14 @@
      <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 v-if="npm.trend === 'up' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-red">
+          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}%
+        </div>
+        <div v-else-if="npm.trend === 'down' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-green">
+          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}%
+        </div>
+        <div v-else class="single-value__content-trend single-value__content-trend-black">
+          <i class="cn-icon-constant cn-icon"></i>
        </div>
      </div>
      <div class="single-value__circle">
@@ -60,9 +80,14 @@
      <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 v-if="npm.trend === 'up' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-red">
+          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}%
+        </div>
+        <div v-else-if="npm.trend === 'down' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-green">
+          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}%
+        </div>
+        <div v-else class="single-value__content-trend single-value__content-trend-black">
+          <i class="cn-icon-constant cn-icon"></i>
        </div>
      </div>
      <div class="single-value__circle">
@@ -115,6 +140,9 @@ export default {
      } else if (period < pperiod) {
        periodicData.value = 'down'
        periodicData.total = parseInt(((pperiod - period) / pperiod) * 100)
+      } else {
+        periodicData.value = ''
+        periodicData.total = 0
      }
      return periodicData
    }
@@ -122,7 +150,7 @@ export default {
  mounted () {
    this.timer = setTimeout(() => {
      this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData)
-    }, 200)
+    }, 500)
  },
  beforeUnmount () {
    clearTimeout(this.timer)