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

2022-08-15 15:53:42 +08:00
parent c02bf1a9aa
commit 35b6680350
6 changed files with 190 additions and 116 deletions
--- a/src/assets/css/components/views/charts2/npmLine.scss
+++ b/src/assets/css/components/views/charts2/npmLine.scss
@@ -2,18 +2,29 @@
  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;
+    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;
      .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 {
--- 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) {
+    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)
            this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData)
          }
-    }, 500)
-  },
-  beforeUnmount () {
-    clearTimeout(this.timer)
+        })
+      })
+    }
  }
 }
 </script>
--- 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)
          })
        }
      })
--- 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,41 +105,77 @@ 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}`)
+    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
-      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) => {
+        this.chartOption.series = data.map((t, i) => {
          return {
            ...seriesTemplate,
-          name: t.legend,
+            name: t.legend ? t.legend : t.type,
            stack: this.chartData.params.isStack ? 'network.total' : '',
            lineStyle: {
              width: 1
@@ -125,7 +183,7 @@ export default {
            areaStyle: {
              opacity: 0.1
            },
-          data: t.values.map((v) => [Number(v[0]) * 1000, Number(v[1]), this.chartData.params.unitType])
+            data: t.values.map((v) => [Number(v[0]) * 1000, Number(v[1]), type])
          }
        })
        this.chartOption.tooltip.formatter = (params) => {
@@ -137,6 +195,7 @@ export default {
        }
        this.myChartArray.push(this.myChart)
        this.myChart.setOption(this.chartOption)
+      }
    },
    dispatchLegendSelectAction (name) {
      this.myChart.dispatchAction({
--- 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>
--- 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
  },