fix: npm =》 overview 下钻 流量折线图表 补充下拉列表

src/assets/css/components/views/charts2/npmTrafficLine.scss

@@ -1,11 +1,52 @@
 .npm-traffic-line {
   height: 100%;
   width: 100%;
-  .npm-traffic-line-title {
+  .npm-traffic-line-header {
-    font-size: 14px;
+    display: flex;
-    color: #353636;
+    justify-content: space-between;
-    font-weight: 600;
+    .npm-traffic-line-title {
-    height: 32px;
+      font-size: 14px;
+      color: #353636;
+      font-weight: 600;
+      height: 32px;
+    }
+    .line-select-metric {
+      display: flex;
+      align-items: center;
+
+      &>span {
+        font-size: 12px;
+        color: #575757;
+        font-weight: 400;
+        margin-right: 3px;
+      }
+      .line-select__operation {
+        height: 24px;
+        margin-left: 3px;
+        box-shadow: none;
+        border-radius: 2px;
+        .el-input__inner {
+          width: 100px;
+          height: 24px;
+          padding-left: 4px;
+          line-height: 24px;
+          font-size: 12px;
+          color: #2C72C6;
+          font-weight: 400;
+        }
+        .el-input__suffix {
+          display: flex;
+          .el-input__suffix-inner {
+            line-height: 24px;
+            .el-select__caret {
+              line-height: 24px;
+              width: 16px;
+              color: #575757;
+            }
+          }
+        }
+      }
+    }
   }
   .npm-traffic-line-body {
     border: 1px solid #E2E5EC;

src/views/charts2/charts/npm/NpmNetworkQuantity.vue

@@ -86,33 +86,6 @@ export default {
         this.toggleLoading(true)
         get(api.npm.overview.networkAnalysis, params).then(res => {
           if (res.code === 200) {
-            res.data.result = {
-              establishLatencyMsAvg: 0.16,
-              establishLatencyMsP50: 0.16,
-              establishLatencyMsP90: 0.16,
-              establishLatencyMsP95: 0.16,
-              establishLatencyMsP99: 0.16,
-              httpResponseLatencyAvg: 0.16,
-              httpResponseLatencyP50: 0.16,
-              httpResponseLatencyP90: 0.16,
-              httpResponseLatencyP95: 0.16,
-              httpResponseLatencyP99: 0.16,
-              sslConLatencyAvg: 0.16,
-              sslConLatencyP50: 0.16,
-              sslConLatencyP90: 0.16,
-              sslConLatencyP95: 0.16,
-              sslConLatencyP99: 0.16,
-              tcpLostlenPercentAvg: 0.16,
-              tcpLostlenPercentP50: 0.16,
-              tcpLostlenPercentP90: 0.16,
-              tcpLostlenPercentP95: 0.16,
-              tcpLostlenPercentP99: 0.16,
-              pktRetransPercentAvg: 0.16,
-              pktRetransPercentP50: 0.16,
-              pktRetransPercentP90: 0.16,
-              pktRetransPercentP95: 0.16,
-              pktRetransPercentP99: 0.16
-            }
             this.npmNetworkCycleData = res.data.result
           }
         }).finally(() => {
@@ -179,13 +152,6 @@ export default {
           const scoreInfo = {}
           let index = 0
           if (res.code === 200) {
-            res.data.result = {
-              establishLatencyMsAvg: 0.16,
-              httpResponseLatencyAvg: 0.16,
-              sslConLatencyAvg: 0.16,
-              tcpLostlenPercentAvg: 1,
-              pktRetransPercentAvg: 1
-            }
             if (res.data.result.establishLatencyMsAvg || res.data.result.establishLatencyMsAvg === 0) {
               res.data.result.establishLatencyMs = res.data.result.establishLatencyMsAvg
               index = 0

src/views/charts2/charts/npm/NpmTrafficLine.vue

@@ -1,6 +1,23 @@
 <template>
   <div class="npm-traffic-line">
-    <div class="npm-traffic-line-title">{{$t('overall.traffic')}}</div>
+    <div class="npm-traffic-line-header">
+      <div class="npm-traffic-line-title">{{$t('overall.traffic')}}</div>
+      <div class="line-select-metric">
+        <span>{{$t('network.metric')}}:</span>
+        <div class="line-select__operation">
+          <el-select
+              size="mini"
+              v-model="metricFilter"
+              placeholder=""
+              popper-class="common-select"
+              :popper-append-to-body="false"
+              @change="metricChange"
+          >
+            <el-option v-for="item in metricOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
+          </el-select>
+        </div>
+      </div>
+    </div>
     <div class="npm-traffic-line-body">
       <chart-no-data v-if="isNoData"></chart-no-data>
       <template v-else>
@@ -47,7 +64,23 @@ export default {
         { name: 'network.through', show: true, positioning: 4, data: [], unitType: '' },
         { name: 'network.other', show: true, positioning: 5, data: [], unitType: '' }
       ],
-      chartData: {}
+      chartData: {},
+      metricFilter: 'Bits/s',
+      metricOptions: [
+        {
+          value: 'Bits/s',
+          label: 'Bits/s'
+        },
+        {
+          value: 'Packets/s',
+          label: 'Packets/s'
+        },
+        {
+          value: 'Sessions/s',
+          label: 'Sessions/s'
+        }
+      ],
+      npmShowType: 'Bits/s'
     }
   },
   watch: {
@@ -59,7 +92,10 @@ export default {
     }
   },
   methods: {
-    init () {
+    init (val) {
+      if (!val) {
+        val = 'Bits/s'
+      }
       let condition = ''
       if (this.$store.getters.getQueryCondition.indexOf('OR') > -1) {
         condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
@@ -90,14 +126,14 @@ export default {
           params.q = `${condition[0]}'${condition[1]}'`
         }
       }
+      this.toggleLoading(true)
       get(api.npm.overview.trafficGraph, params).then((res) => {
         if (res.code === 200) {
           if (res.data.result.length === 0) {
             this.isNoData = true
-            return
           }
           res.data.result.forEach((t, i) => {
-            if (t.type === 'bytes') {
+            if (t.type === 'bytes' && val === 'Bits/s') {
               const mpackets = _.cloneDeep(this.mpackets)
               mpackets[0].data = t.totalBitsRate.values ? t.totalBitsRate.values : []
               mpackets[1].data = t.inboundBitsRate.values ? t.inboundBitsRate.values : []
@@ -107,23 +143,29 @@ export default {
               mpackets[5].data = t.other.values ? t.other.values : []
               this.mpackets = mpackets
               this.echartsInit(this.mpackets)
+            } else if (t.type === 'packets' && val === 'Packets/s') {
+              const mpackets = _.cloneDeep(this.mpackets)
+              mpackets[0].data = t.totalPacketsRate.values ? t.totalPacketsRate.values : []
+              mpackets[1].data = t.inboundPacketsRate.values ? t.inboundPacketsRate.values : []
+              mpackets[2].data = t.outboundPacketsRate.values ? t.outboundPacketsRate.values : []
+              mpackets[3].data = t.internalPacketsRate.values ? t.internalPacketsRate.values : []
+              mpackets[4].data = t.throughPacketsRate.values ? t.throughPacketsRate.values : []
+              mpackets[5].data = t.other.values ? t.other.values : []
+              this.mpackets = mpackets
+              this.echartsInit(this.mpackets)
+            } else if (t.type === 'sessions' && val === 'Sessions/s') {
+              let mpackets = _.cloneDeep(this.mpackets)
+              mpackets[0].data = t.totalSessionsRate && t.totalSessionsRate.values ? t.totalSessionsRate.values : []
+              mpackets[0].show = false
+              mpackets = mpackets.filter(t => t.show === false)
+              this.mpackets = mpackets
+              this.echartsInit(this.mpackets)
             }
-            // else if (t.type === 'packets') {
+            this.mpackets.forEach(t => {
-            //   const mpackets = _.cloneDeep(this.mpackets)
+              if (t.data.length === 0) {
-            //   mpackets[0].data = t.totalPacketsRate.values ? t.totalPacketsRate.values : []
+                this.isNoData = true
-            //   mpackets[1].data = t.inboundPacketsRate.values ? t.inboundPacketsRate.values : []
+              }
-            //   mpackets[2].data = t.outboundPacketsRate.values ? t.outboundPacketsRate.values : []
+            })
-            //   mpackets[3].data = t.internalPacketsRate.values ? t.internalPacketsRate.values : []
-            //   mpackets[4].data = t.externalPacketsRate.values ? t.externalPacketsRate.values : []
-            //   mpackets[5].data = t.other.values ? t.other.values : []
-            //   this.mpackets = mpackets
-            //   this.echartsInit(this.mpackets)
-            // } else if (t.type === 'sessions') {
-            //   const mpackets = _.cloneDeep(this.mpackets)
-            //   mpackets[0].data = t.totalSessionsRate.values ? t.totalSessionsRate.values : []
-            //   this.mpackets = mpackets
-            //   this.echartsInit(this.mpackets)
-            // }
           })
         } else {
           this.isNoData = true
@@ -147,7 +189,7 @@ export default {
             color: chartColor3[t.positioning],
             width: 1
           },
-          stack: this.$t(echartsData[0].name),
+          stack: t.name !== 'network.total' ? 'network.total' : '',
           areaStyle: {
             opacity: 0.1,
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -172,7 +214,7 @@ export default {
         return str
       }
       this.myChart.on('legendselectchanged', this.handleLegendClick)
-      this.myChart.setOption(this.chartOption)
+      this.myChart.setOption(this.chartOption, true)
     },
     // 点击前，高亮legend个数
     getSelectedNum (params) {
@@ -218,6 +260,9 @@ export default {
         }
       })
     },
+    metricChange (value) {
+      this.init(value)
+    },
     resize () {
       this.myChart.resize()
     }