From 35b6680350bb23f106bb5026d6511dc54c98532f Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Mon, 15 Aug 2022 15:53:42 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20npm=20=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=20=E9=83=A8=E5=88=86=E7=BB=84=E4=BB=B6=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../css/components/views/charts2/npmLine.scss |  29 ++-
 src/views/charts2/charts/SingleValue.vue      |  52 +++--
 .../charts/npm/NpmAppCategoryScore.vue        |   2 +-
 src/views/charts2/charts/npm/NpmLine.vue      | 193 ++++++++++++------
 .../charts2/charts/npm/NpmNetworkQuantity.vue |  26 +--
 .../charts2/charts/options/echartOption.js    |   4 +-
 6 files changed, 190 insertions(+), 116 deletions(-)

diff --git a/src/assets/css/components/views/charts2/npmLine.scss b/src/assets/css/components/views/charts2/npmLine.scss
index 7c46f867..fde5a79f 100644
--- a/src/assets/css/components/views/charts2/npmLine.scss
+++ b/src/assets/css/components/views/charts2/npmLine.scss
@@ -2,17 +2,28 @@
   height: 100%;
   width: 100%;
   border: 1px solid #f0f0f0;
-  position: relative;
+  .npm-line-title {
+    font-size: 14px;
+    color: #353636;
+    font-weight: 500;
+    margin: 20px 0 0 20px;
+  }
   .npm-line-header {
-    position: absolute;
     display: flex;
-    top: 21px;
-    right: 23px;
-    z-index: 1;
-    .npm-line-header-right {
+    margin: 20px 20px 0 20px;
+    justify-content: space-between;
+    .npm-line-header-title {
+      font-size: 14px;
+      color: #353636;
+      font-weight: 500;
+    }
+    .npm-line-header-rights {
       display: flex;
-      margin-right: 10px;
-      align-items: center;
+      .npm-line-header-right {
+        display: flex;
+        margin-right: 10px;
+        align-items: center;
+      }
     }
     .npm-line-header-right:last-child {
       margin-right: 0;
@@ -48,7 +59,7 @@
     }
   }
   .chart-drawing {
-    height: 100%;
+    height: calc(100% - 41px);
     width: 100%;
     .echarts-tooltip.echarts-tooltip-dark {
       .cn-chart-tooltip {
diff --git a/src/views/charts2/charts/SingleValue.vue b/src/views/charts2/charts/SingleValue.vue
index fca631f7..aba04567 100644
--- a/src/views/charts2/charts/SingleValue.vue
+++ b/src/views/charts2/charts/SingleValue.vue
@@ -1,4 +1,4 @@
-<template>
+<template v-if="npmNetworkCycleData.length > 0 && npmNetworkLastCycleData.length > 0">
   <div class="single-value" v-for="(npm, index) in npmNetworkData" :key="index">
     <template v-if="index === 0">
       <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
@@ -102,19 +102,33 @@
 import { unitTypes } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
 import { getChainRatio } from '@/utils/tools'
+import { getSecond } from '@/utils/date-util'
+import { get } from '@/utils/http'
+import { api } from '@/utils/api'
 export default {
   name: 'SingleValue',
   props: {
     npmNetworkCycleData: Array,
-    npmNetworkLastCycleData: Array,
-    npmNetworkName: Array
+    npmNetworkName: Array,
+    timeFilter: Object
   },
   data () {
     return {
       unitTypes,
       unitConvert,
       npmNetworkData: [],
-      timer: null
+      npmNetworkLastCycleData: []
+    }
+  },
+  watch: {
+    npmNetworkCycleData: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        if (n) {
+          this.npmNetworkLastCycleQuery()
+        }
+      }
     }
   },
   methods: {
@@ -132,17 +146,27 @@ export default {
         })
       })
       this.npmNetworkData = cycle
-    }
-  },
-  mounted () {
-    this.timer = setTimeout(() => {
-      if (this.npmNetworkCycleData.length > 0 && this.npmNetworkLastCycleData.length > 0) {
-        this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData)
+    },
+    npmNetworkLastCycleQuery () {
+      const params = {
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime),
+        cycle: 1
       }
-    }, 500)
-  },
-  beforeUnmount () {
-    clearTimeout(this.timer)
+      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)
+            this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData)
+          }
+        })
+      })
+    }
   }
 }
 </script>
diff --git a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
index 884a3339..c93dcff3 100644
--- a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
+++ b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
@@ -235,7 +235,7 @@ export default {
               }
             })
             this.tableData = tableData
-            console.info(tableData)
+            // console.info(tableData)
           })
         }
       })
diff --git a/src/views/charts2/charts/npm/NpmLine.vue b/src/views/charts2/charts/npm/NpmLine.vue
index 3244f2ca..3c334801 100644
--- a/src/views/charts2/charts/npm/NpmLine.vue
+++ b/src/views/charts2/charts/npm/NpmLine.vue
@@ -2,35 +2,41 @@
   <div class="npm-line">
     <template v-if="chartData.id === 11">
       <div class="npm-line-header">
-        <div class="npm-line-header-title">{{chartData.name}}</div>
-        <div class="npm-line-header-rights" v-if="chartData.params && chartData.params.showLegend">
+        <div class="npm-line-header-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
+        <div class="npm-line-header-rights" v-if="chartData.params && chartData.params.showLegend && !throughputName">
           <div class="npm-line-header-right" :class="{'active': item.show}" v-for="(item, index) in chartOptionLineData" :key="index" @click="highlightEvent(item)">
             <div class="npm-line-header-icon" :class="'icon' + index"></div>
             <div class="npm-line-header-value">{{$t(item.legend)}}</div>
           </div>
         </div>
       </div>
-      <div class="chart-drawing" :id="`chart${chartData.name}`"></div>
+      <chart-no-data v-if="throughputName"></chart-no-data>
+      <div v-else class="chart-drawing" :id="`chart${chartData.name}`"></div>
     </template>
-    <template v-if="chartData.id === 12">
-      <div class="npm-line-title">{{chartData.name}}</div>
-      <div class="chart-drawing" :id="`chart${chartData.name}`"></div>
+    <template v-else-if="chartData.id === 12">
+      <div class="npm-line-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
+      <chart-no-data v-if="tcpName"></chart-no-data>
+      <div v-else class="chart-drawing" :id="`chart${chartData.name}`"></div>
     </template>
-    <template v-if="chartData.id === 13">
-      <div class="npm-line-title">{{chartData.name}}</div>
-      <div class="chart-drawing" :id="`chart${chartData.name}`"></div>
+    <template v-else-if="chartData.id === 13">
+      <div class="npm-line-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
+      <chart-no-data v-if="httpName"></chart-no-data>
+      <div v-else class="chart-drawing" :id="`chart${chartData.name}`"></div>
     </template>
-    <template v-if="chartData.id === 14">
-      <div class="npm-line-title">{{chartData.name}}</div>
-      <div class="chart-drawing" :id="`chart${chartData.name}`"></div>
+    <template v-else-if="chartData.id === 14">
+      <div class="npm-line-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
+      <chart-no-data v-if="sslName"></chart-no-data>
+      <div v-else class="chart-drawing" :id="`chart${chartData.name}`"></div>
     </template>
-    <template v-if="chartData.id === 15">
-      <div class="npm-line-title">{{chartData.name}}</div>
-      <div class="chart-drawing" :id="`chart${chartData.name}`"></div>
+    <template v-else-if="chartData.id === 15">
+      <div class="npm-line-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
+      <chart-no-data v-if="packetsLossName"></chart-no-data>
+      <div v-else class="chart-drawing" :id="`chart${chartData.name}`"></div>
     </template>
-    <template v-if="chartData.id === 16">
-      <div class="npm-line-title">{{chartData.name}}</div>
-      <div class="chart-drawing" :id="`chart${chartData.name}`"></div>
+    <template v-else-if="chartData.id === 16">
+      <div class="npm-line-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
+      <chart-no-data v-if="packetsRetrainsName"></chart-no-data>
+      <div v-else class="chart-drawing" :id="`chart${chartData.name}`"></div>
     </template>
   </div>
 </template>
@@ -44,6 +50,8 @@ import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools'
 import { getSecond } from '@/utils/date-util'
 import { get } from '@/utils/http'
 import { api } from '@/utils/api'
+import ChartNoData from '@/views/charts/charts/ChartNoData'
+import { throughputData, tcpData, httpData, sslData, packetsLossData, packetsRetrainsData } from '@/views/charts2/charts/npmLineData'
 
 export default {
   name: 'NpmLine',
@@ -54,6 +62,9 @@ export default {
     // country: String,
     // province: String
   },
+  components: {
+    ChartNoData
+  },
   setup () {
     return {
       myChart: shallowRef()
@@ -63,15 +74,26 @@ export default {
     return {
       chartData: {},
       chartOptionLineData: [
-        { legend: 'network.total', index: 0, invertTab: true },
-        { legend: 'network.inbound', index: 1, invertTab: true },
-        { legend: 'network.outbound', index: 2, invertTab: true }
+        { legend: 'network.total', index: 0, invertTab: true, color: '#749F4D' },
+        { legend: 'network.inbound', index: 1, invertTab: true, color: '#98709B' },
+        { legend: 'network.outbound', index: 2, invertTab: true, color: '#E5A219' }
+      ],
+      npmLineColor: [
+        { legend: '', color: '#749F4D' },
+        { legend: '', color: '#98709B' },
+        { legend: '', color: '#E5A219' }
       ],
       timer: null,
       myChartArray: [],
       side: 'server',
       country: '北京',
-      province: '北京'
+      province: '北京',
+      throughputName: '',
+      tcpName: '',
+      httpName: '',
+      sslName: '',
+      packetsLossName: '',
+      packetsRetrainsName: ''
     }
   },
   methods: {
@@ -83,60 +105,97 @@ export default {
         country: this.country,
         province: this.province
       }
-      console.log(this.chartData)
       if (this.chartData.id === 11) {
+        throughputData.forEach((t, i) => {
+          if (t.type === 'totalBytesRate') {
+            this.chartOptionLineData[i].values = t.values
+          } else if (t.type === 'inboundBytesRate') {
+            this.chartOptionLineData[i].values = t.values
+          } else if (t.type === 'outboundBytesRate') {
+            this.chartOptionLineData[i].values = t.values
+          }
+        })
+        const result = this.chartOptionLineData.filter(t => this.chartData.params.color.indexOf(t.color) > -1)
         get(api.npm.location.thoughput, params).then(res => {
           if (res.code === 200) {
-            console.log(res)
+            this.echartsInit(result, this.chartData.name, this.chartData.params.unitType)
+          } else {
+            this.throughputName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
+          }
+        })
+      } else if (this.chartData.id === 12) {
+        get(api.npm.location.tcpConnectionEstablishLatency, params).then(res => {
+          if (res.code === 200) {
+            this.echartsInit(tcpData, this.chartData.name, this.chartData.params.unitType)
+          } else {
+            this.tcpName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
+          }
+        })
+      } else if (this.chartData.id === 13) {
+        get(api.npm.location.httpResponseLatency, params).then(res => {
+          if (res.code === 200) {
+            this.echartsInit(httpData, this.chartData.name, this.chartData.params.unitType)
+          } else {
+            this.httpName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
+          }
+        })
+      } else if (this.chartData.id === 14) {
+        get(api.npm.location.sslHandshakeLatency, params).then(res => {
+          if (res.code === 200) {
+            this.echartsInit(sslData, this.chartData.name, this.chartData.params.unitType)
+          } else {
+            this.sslName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
+          }
+        })
+      } else if (this.chartData.id === 15) {
+        get(api.npm.location.packetsLoss, params).then(res => {
+          if (res.code === 200) {
+            this.echartsInit(packetsLossData, this.chartData.name, this.chartData.params.unitType)
+          } else {
+            this.packetsLossName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
+          }
+        })
+      } else if (this.chartData.id === 16) {
+        get(api.npm.location.packetsRetrains, params).then(res => {
+          if (res.code === 200) {
+            this.echartsInit(packetsRetrainsData, this.chartData.name, this.chartData.params.unitType)
+          } else {
+            this.packetsRetrainsName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
           }
         })
       }
-      this.echartsInit()
     },
-    echartsInit () {
-      const dom = document.getElementById(`chart${this.chartData.name}`)
-      this.myChart = echarts.init(dom)
-      this.chartOption = npmLineChartOption
-      const seriesTemplate = this.chartOption.series[0]
-      this.chartOption.color = this.chartData.params.color
-      let result = [
-        {
-          type: 'inboundBytesRate',
-          values: [[1435781430781, '3'], [1435781431781, '4']]
-        },
-        {
-          type: 'totalBytesRate',
-          values: [[1435781430781, '5'], [1435781431781, '6']]
-        },
-        {
-          type: 'outboundBytesRate',
-          values: [[1435781430781, '2'], [1435781431781, '9']]
-        }
-      ]
-      result = result.filter(item => this.chartData.params.color.indexOf(item.color) > -1)
-      this.chartOption.series = result.map((t, i) => {
-        return {
-          ...seriesTemplate,
-          name: t.legend,
-          stack: this.chartData.params.isStack ? 'network.total' : '',
-          lineStyle: {
-            width: 1
-          },
-          areaStyle: {
-            opacity: 0.1
-          },
-          data: t.values.map((v) => [Number(v[0]) * 1000, Number(v[1]), this.chartData.params.unitType])
-        }
-      })
-      this.chartOption.tooltip.formatter = (params) => {
-        params.forEach(t => {
-          t.seriesName = this.$t(t.seriesName)
+    echartsInit (data, name, type) {
+      const dom = document.getElementById(`chart${name}`)
+      if (dom) {
+        this.myChart = echarts.init(dom)
+        this.chartOption = npmLineChartOption
+        const seriesTemplate = this.chartOption.series[0]
+        this.chartOption.color = this.chartData.params.color
+        this.chartOption.series = data.map((t, i) => {
+          return {
+            ...seriesTemplate,
+            name: t.legend ? t.legend : t.type,
+            stack: this.chartData.params.isStack ? 'network.total' : '',
+            lineStyle: {
+              width: 1
+            },
+            areaStyle: {
+              opacity: 0.1
+            },
+            data: t.values.map((v) => [Number(v[0]) * 1000, Number(v[1]), type])
+          }
         })
-        const str = stackedLineTooltipFormatter(params)
-        return str
+        this.chartOption.tooltip.formatter = (params) => {
+          params.forEach(t => {
+            t.seriesName = this.$t(t.seriesName)
+          })
+          const str = stackedLineTooltipFormatter(params)
+          return str
+        }
+        this.myChartArray.push(this.myChart)
+        this.myChart.setOption(this.chartOption)
       }
-      this.myChartArray.push(this.myChart)
-      this.myChart.setOption(this.chartOption)
     },
     dispatchLegendSelectAction (name) {
       this.myChart.dispatchAction({
diff --git a/src/views/charts2/charts/npm/NpmNetworkQuantity.vue b/src/views/charts2/charts/npm/NpmNetworkQuantity.vue
index 70553358..fc34dedf 100644
--- a/src/views/charts2/charts/npm/NpmNetworkQuantity.vue
+++ b/src/views/charts2/charts/npm/NpmNetworkQuantity.vue
@@ -2,8 +2,8 @@
   <div class="npm-network-quantity">
     <single-value
       :npm-network-cycle-data="npmNetworkCycleData"
-      :npm-network-last-cycle-data="npmNetworkLastCycleData"
       :npm-network-name="npmNetworkName"
+      :time-filter="timeFilter"
     ></single-value>
   </div>
 </template>
@@ -30,8 +30,7 @@ export default {
         { name: 'networkAppPerformance.packetLoss' },
         { name: 'overall.packetRetrans' }
       ],
-      npmNetworkCycleData: [],
-      npmNetworkLastCycleData: []
+      npmNetworkCycleData: []
     }
   },
   methods: {
@@ -53,30 +52,11 @@ export default {
           }
         })
       })
-    },
-    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)
-      Promise.all([tcp, http, ssl, tcpPercent, packetPercent]).then(res => {
-        res.forEach(t => {
-          if (t.code === 200) {
-            this.npmNetworkLastCycleData.push(t.data.result)
-          }
-        })
-      })
     }
+
   },
   mounted () {
     this.npmNetworkCycleQuery()
-    this.npmNetworkLastCycleQuery()
   }
 }
 </script>
diff --git a/src/views/charts2/charts/options/echartOption.js b/src/views/charts2/charts/options/echartOption.js
index 23192bc4..e9a917c3 100644
--- a/src/views/charts2/charts/options/echartOption.js
+++ b/src/views/charts2/charts/options/echartOption.js
@@ -264,9 +264,9 @@ export const npmLineChartOption = {
     show: false
   },
   grid: {
-    top: '21%',
+    top: '13%',
     left: '4.6%',
-    right: '4%',
+    right: '3%',
     bottom: 15,
     containLabel: true
   },