fix: 修复 npm 模块 部分组件功能问题

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;
+    margin: 20px 20px 0 20px;
-    right: 23px;
+    justify-content: space-between;
-    z-index: 1;
+    .npm-line-header-title {
-    .npm-line-header-right {
+      font-size: 14px;
+      color: #353636;
+      font-weight: 500;
+    }
+    .npm-line-header-rights {
       display: flex;
-      margin-right: 10px;
+      .npm-line-header-right {
-      align-items: center;
+        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 {

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
-    }
+    },
-  },
+    npmNetworkLastCycleQuery () {
-  mounted () {
+      const params = {
-    this.timer = setTimeout(() => {
+        startTime: getSecond(this.timeFilter.startTime),
-      if (this.npmNetworkCycleData.length > 0 && this.npmNetworkLastCycleData.length > 0) {
+        endTime: getSecond(this.timeFilter.endTime),
-        this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData)
+        cycle: 1
       }
-    }, 500)
+      const tcp = get(api.npm.overview.tcpSessionDelay, params)
-  },
+      const http = get(api.npm.overview.httpResponseDelay, params)
-  beforeUnmount () {
+      const ssl = get(api.npm.overview.sslConDelay, params)
-    clearTimeout(this.timer)
+      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>

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

@@ -235,7 +235,7 @@ export default {
               }
             })
             this.tableData = tableData
-            console.info(tableData)
+            // console.info(tableData)
           })
         }
       })

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-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
-        <div class="npm-line-header-rights" v-if="chartData.params && chartData.params.showLegend">
+        <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">
+    <template v-else-if="chartData.id === 12">
-      <div class="npm-line-title">{{chartData.name}}</div>
+      <div class="npm-line-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
-      <div class="chart-drawing" :id="`chart${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">
+    <template v-else-if="chartData.id === 13">
-      <div class="npm-line-title">{{chartData.name}}</div>
+      <div class="npm-line-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
-      <div class="chart-drawing" :id="`chart${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">
+    <template v-else-if="chartData.id === 14">
-      <div class="npm-line-title">{{chartData.name}}</div>
+      <div class="npm-line-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
-      <div class="chart-drawing" :id="`chart${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">
+    <template v-else-if="chartData.id === 15">
-      <div class="npm-line-title">{{chartData.name}}</div>
+      <div class="npm-line-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
-      <div class="chart-drawing" :id="`chart${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">
+    <template v-else-if="chartData.id === 16">
-      <div class="npm-line-title">{{chartData.name}}</div>
+      <div class="npm-line-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
-      <div class="chart-drawing" :id="`chart${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.total', index: 0, invertTab: true, color: '#749F4D' },
-        { legend: 'network.inbound', index: 1, invertTab: true },
+        { legend: 'network.inbound', index: 1, invertTab: true, color: '#98709B' },
-        { legend: 'network.outbound', index: 2, invertTab: true }
+        { 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 () {
+    echartsInit (data, name, type) {
-      const dom = document.getElementById(`chart${this.chartData.name}`)
+      const dom = document.getElementById(`chart${name}`)
-      this.myChart = echarts.init(dom)
+      if (dom) {
-      this.chartOption = npmLineChartOption
+        this.myChart = echarts.init(dom)
-      const seriesTemplate = this.chartOption.series[0]
+        this.chartOption = npmLineChartOption
-      this.chartOption.color = this.chartData.params.color
+        const seriesTemplate = this.chartOption.series[0]
-      let result = [
+        this.chartOption.color = this.chartData.params.color
-        {
+        this.chartOption.series = data.map((t, i) => {
-          type: 'inboundBytesRate',
+          return {
-          values: [[1435781430781, '3'], [1435781431781, '4']]
+            ...seriesTemplate,
-        },
+            name: t.legend ? t.legend : t.type,
-        {
+            stack: this.chartData.params.isStack ? 'network.total' : '',
-          type: 'totalBytesRate',
+            lineStyle: {
-          values: [[1435781430781, '5'], [1435781431781, '6']]
+              width: 1
-        },
+            },
-        {
+            areaStyle: {
-          type: 'outboundBytesRate',
+              opacity: 0.1
-          values: [[1435781430781, '2'], [1435781431781, '9']]
+            },
-        }
+            data: t.values.map((v) => [Number(v[0]) * 1000, Number(v[1]), type])
-      ]
+          }
-      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)
         })
-        const str = stackedLineTooltipFormatter(params)
+        this.chartOption.tooltip.formatter = (params) => {
-        return str
+          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({

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: [],
+      npmNetworkCycleData: []
-      npmNetworkLastCycleData: []
     }
   },
   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>

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
   },