fix: 修复网络概况部分组件问题

2022-08-20 14:52:55 +08:00
parent 6ca3c96eb8
commit c4cf810011
6 changed files with 136 additions and 125 deletions
--- a/src/views/charts/charts/tools.js
+++ b/src/views/charts/charts/tools.js
@@ -508,3 +508,27 @@ export function trafficLineTooltipFormatter (params) {
  str += '</div>'
  return str
 }
+export function appStackedLineTooltipFormatter (params) {
+  let str = '<div>'
+  params.forEach((item, i) => {
+    const tData = item.data[0]
+    if (i === 0) {
+      str += '<div style="margin-bottom: 5px">'
+      str += dateFormatByAppearance(tData)
+      str += '</div>'
+    }
+    str += '<div class="cn-chart-tooltip">'
+    str += '<span class="cn-chart-tooltip-box">'
+    str += item.marker
+    str += `<span class="cn-chart-tooltip-content"> 
+        ${item.seriesName}
+    </span>`
+    str += '</span>'
+    str += `<span class="cn-chart-tooltip-value cn-chart-tooltip__color">
+        ${unitConvert(item.data[1], item.value[2]).join(' ')}
+    </span>`
+    str += '</div>'
+  })
+  str += '</div>'
+  return str
+}
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
@@ -107,7 +107,7 @@
          <div class="body__searcher">
            <el-input v-model="searcherApp" @input="searcherAppChange" size="mini" :placeholder="$t('networkOverview.search')" prefix-icon="el-icon-search"></el-input>
          </div>
-          <div class="body__loading" v-if="loading"><loading :loading="loading"></loading></div>
+          <div class="body__loading"><loading :loading="loading"></loading></div>
        </div>
      </div>
    </el-drawer>
@@ -127,6 +127,7 @@ import { getSecond } from '@/utils/date-util'
 import { getChainRatio } from '@/utils/tools'
 import loading from '@/components/common/Loading'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
+import { appStackedLineTooltipFormatter } from '@/views/charts/charts/tools'
 export default {
  name: 'NetworkOverviewApps',
  props: {
@@ -172,7 +173,6 @@ export default {
      appTypeTab: 0,
      appShowName: false,
      searcherApp: '',
-      appShowTypeTab: 0,
      // 选中的app，不区分app和provider
      toSaveApp: [],
      myChartArray: [],
@@ -186,13 +186,15 @@ export default {
      timerScroll: null,
      offset: 0,
      flag: false,
-      timerSearc: null
+      timerSearc: null,
+      timerHandle: null
    }
  },
  watch: {
    showAddApp: {
      deep: true,
      handler (n) {
+        this.searcherApp = ''
        if (n) {
          window.addEventListener('scroll', this.handleScroll, true)
        } else {
@@ -307,7 +309,7 @@ export default {
        const chartOption = _.cloneDeep(appListChartOption)
        chartOption.series = [{
          ...chartOption.series[0],
-          data: obj.lineData,
+          data: obj.lineData.map(v => [Number(v[0]) * 1000, Number(v[1]), 'number']),
          lineStyle: {
            color: obj.trend === 'up' ? '#7FA054' : '#35ADDA'
          },
@@ -325,6 +327,13 @@ export default {
            ])
          }
        }]
+        chartOption.tooltip.formatter = (params) => {
+          params.forEach(t => {
+            t.seriesName = this.$t(t.seriesName)
+          })
+          const str = appStackedLineTooltipFormatter(params)
+          return str
+        }
        chart.setOption(chartOption)
        this.myChart.push(chart)
        this.$nextTick(() => {
@@ -338,18 +347,38 @@ export default {
      const scrollHeight = e.target.scrollHeight
      if (scrollTop && (clientHeight + scrollTop) >= scrollHeight) {
        if (this.pageObj.pages > this.pageObj.pageNo) {
-          this.pageObj.pageNo++
          this.loading = true
+          this.pageObj.pageNo = this.pageObj.pageNo + 1
+          this.addApp(this.pageObj.pageNo, this.searcherApp, this.loading)
+        }
+      }
+    },
+    addApp (pageNo, val, show) {
+      this.showAddApp = true
+      const letter = 'abcdefghijklmnopqrstuvwxyz'
      const params = {
        startTime: getSecond(this.timeFilter.startTime),
        endTime: getSecond(this.timeFilter.endTime),
        pageSize: this.pageObj.pageSize,
-            pageNo: this.pageObj.pageNo
+        q: ''
      }
-          if (this.appShowTypeTab == 0) {
+      if (val && show) { // 搜索有值 并且 true
+        params.q = val
+        params.pageNo = pageNo
+      } else if (!val && show) { // 搜索无值 并且 true
+        val = ''
+        params.pageNo = pageNo
+      } else if (val && !show) { // 搜索有值 并且 false
+        params.q = val
+        params.pageNo = 1
+      } else {
+        params.pageNo = 1
+      }
+      if (this.appTypeTab == 0) {
        params.type = 'overviewProvide'
        get(api.dict, params).then(res => {
          if (res.code === 200) {
+            this.pageObj.pages = res.data.pages
            res.data.list.forEach(t => {
              this.toSaveApp.forEach(e => {
                if (t.value === e.name) {
@@ -357,16 +386,20 @@ export default {
                }
              })
            })
+            if (val && !show) {
+              this.providerOptions = res.data.list
+            } else {
              this.providerOptions.push(...res.data.list)
-                this.pageObj.pages = res.data.pages
              this.appListData([], this.providerOptions)
            }
+          }
          this.loading = false
        })
-          } else if (this.appShowTypeTab == 1) {
+      } else if (this.appTypeTab == 1) {
        params.type = 'overviewApp'
        get(api.dict, params).then(res => {
          if (res.code === 200) {
+            this.pageObj.pages = res.data.pages
            res.data.list.forEach(t => {
              this.toSaveApp.forEach(e => {
                if (t.value === e.name) {
@@ -374,48 +407,16 @@ export default {
                }
              })
            })
+            if (val && !show) {
+              this.appOptions = res.data.list
+            } else {
              this.appOptions.push(...res.data.list)
-                this.pageObj.pages = res.data.pages
              this.appListData(this.appOptions, [])
            }
+          }
          this.loading = false
        })
      }
-        }
-      }
-    },
-    addApp () {
-      this.showAddApp = true
-      this.searcherApp = ''
-      const letter = 'abcdefghijklmnopqrstuvwxyz'
-      this.providerOptions = []
-      this.appOptions = []
-      this.pageObj.pageNo = 1
-      const params = {
-        startTime: getSecond(this.timeFilter.startTime),
-        endTime: getSecond(this.timeFilter.endTime),
-        pageSize: this.pageObj.pageSize,
-        pageNo: this.pageObj.pageNo
-      }
-      if (this.appShowTypeTab == 0) {
-        params.type = 'overviewProvide'
-        get(api.dict, params).then(res => {
-          if (res.code === 200) {
-            this.providerOptions.push(...res.data.list)
-            this.pageObj.pages = res.data.pages
-            this.appListData([], this.providerOptions)
-          }
-        })
-      } else if (this.appShowTypeTab == 1) {
-        params.type = 'overviewApp'
-        get(api.dict, params).then(res => {
-          if (res.code === 200) {
-            this.appOptions.push(...res.data.list)
-            this.pageObj.pages = res.data.pages
-            this.appListData(this.appOptions, [])
-          }
-        })
-      }
    },
    appListData (appOptions, providerOptions) {
      const oldApps = this.appData ? this.appData.filter(a => a.type === 'app') : []
@@ -431,63 +432,30 @@ export default {
      this.showAddApp = false
    },
    appTypeTabChange (val) {
-      this.appShowTypeTab = val.index
+      this.pageObj.pageNo = 1
      this.searcherApp = ''
-      this.addApp(val.index)
+      this.addApp()
      window.addEventListener('scroll', this.scrollChange, true)
      this.timerScroll = setTimeout(() => {
        window.removeEventListener('scroll', this.scrollChange, true)
-      }, 300)
+      }, 500)
    },
    scrollChange (e) {
      e.target.scrollTop = 0
    },
    searcherAppChange (val) {
      clearTimeout(this.timerSearc)
+      window.addEventListener('scroll', this.scrollChange, true)
      this.timerSearc = setTimeout(() => {
        if (this.flag) {
          return false
        }
        this.flag = true
-        if (!val) {
        this.pageObj.pageNo = 1
-        }
-        const params = {
-          startTime: getSecond(this.timeFilter.startTime),
-          endTime: getSecond(this.timeFilter.endTime),
-          pageSize: this.pageObj.pageSize,
-          pageNo: this.pageObj.pageNo
-        }
-        if (this.appShowTypeTab == 0) {
-          params.type = 'overviewProvide'
-          get(api.dict, params).then(res => {
-            if (res.code === 200) {
-              res.data.list.forEach(t => {
-                this.toSaveApp.forEach(e => {
-                  if (t.value === e.name) {
-                    t.provideShow = e.provideShow
-                  }
-                })
-              })
-              this.providerOptions = res.data.list.filter(t => t.value.indexOf(val) > -1)
-            }
-          })
-        } else if (this.appShowTypeTab == 1) {
-          params.type = 'overviewApp'
-          get(api.dict, params).then(res => {
-            if (res.code === 200) {
-              res.data.list.forEach(t => {
-                this.toSaveApp.forEach(e => {
-                  if (t.value === e.name) {
-                    t.appShow = e.appShow
-                  }
-                })
-              })
-              this.appOptions = res.data.list.filter(t => t.value.indexOf(val) > -1)
-            }
-          })
-        }
+        this.searcherApp = val
+        this.addApp(this.pageObj.pageNo, val)
        this.flag = false
+        window.removeEventListener('scroll', this.scrollChange, true)
      }, 500)
    },
    // 保存变更，并且在增、删app后，根据当前app数量更改整体高度
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
@@ -295,7 +295,7 @@ export default {
            label: {
              formatter (params) {
                const arr = unitConvert(params.value, unitTypes.number).join('')
-                return _this.echartsLabelValue + '(' + arr + 'packets/s' + ')'
+                return _this.echartsLabelValue + '(' + arr + echartsData[0].unitType + ')'
              },
              position: 'insideStartTop',
              color: '#717171',
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue
@@ -64,9 +64,21 @@ export default {
              return
            }
            res.data.result = res.data.result.map(t => {
+              if (t.eventSeverity === 'critical') {
+                t.index = 0
+              } else if (t.eventSeverity === 'high') {
+                t.index = 1
+              } else if (t.eventSeverity === 'medium') {
+                t.index = 1
+              } else if (t.eventSeverity === 'low') {
+                t.index = 3
+              } else if (t.eventSeverity === 'info') {
+                t.index = 4
+              }
              return {
                name: t.eventSeverity,
-                value: t.count
+                value: t.count,
+                index: t.index
              }
            })
            if (res.data.result.length <= 0) {
@@ -74,7 +86,7 @@ export default {
            } else {
              this.chartOption.legend.show = true
            }
-            this.chartOption.series[0].data = res.data.result
+            this.chartOption.series[0].data = res.data.result.sort((a, b) => { return a.index - b.index })
            this.myChart.setOption(this.chartOption)
          }
        })
--- a/src/views/charts2/charts/npm/NpmTrafficLine.vue
+++ b/src/views/charts2/charts/npm/NpmTrafficLine.vue
@@ -4,7 +4,7 @@
    <div class="npm-traffic-line-body">
      <chart-no-data v-if="isNoData"></chart-no-data>
      <template v-else>
-        <div class="chart-drawing" id="chart"></div>
+        <div class="chart-drawing" :id="chartData.name"></div>
      </template>
    </div>
  </div>
@@ -21,7 +21,6 @@ import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 import { getSecond } from '@/utils/date-util'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
-import { npmTrafficLine } from '@/views/charts2/charts/npmLineData'
 import _ from 'lodash'
 export default {
  name: 'NpmTrafficLine',
@@ -45,8 +44,8 @@ export default {
      unitConvert,
      unitTypes,
      isNoData: false,
-      ip: '192.68.44.54',
-      side: 'client',
+      ip: '116.178.236.216',
+      side: '',
      type: 'ip',
      mpackets: [
        { name: 'network.total', show: true, positioning: 0, data: [], unitType: '' },
@@ -55,18 +54,25 @@ export default {
        { name: 'network.internal', show: true, positioning: 3, data: [], unitType: '' },
        { name: 'network.through', show: true, positioning: 4, data: [], unitType: '' },
        { name: 'network.other', show: true, positioning: 5, data: [], unitType: '' }
-      ]
+      ],
+      chartData: {}
    }
  },
  methods: {
    init () {
+      const condition = this.$store.getters.getQueryCondition
+      console.log(condition)
+      if (this.chartData.id === 24) {
+        this.side = 'client'
+      } else {
+        this.side = 'server'
+      }
      const params = {
        startTime: getSecond(this.timeFilter.startTime),
        endTime: getSecond(this.timeFilter.endTime),
        q: `ip='${this.ip}' and side='${this.side}'`,
        type: 'ip'
      }
-      // const condition = this.$store.getters.getQueryCondition
      // if (condition) {
      //   params.q = condition
      //   params.type = this.type
@@ -74,21 +80,22 @@ export default {
      get(api.npm.overview.trafficGraph, params).then((res) => {
        if (res.code === 200) {
          // res.data.result.length = 0
-          res.data.result = npmTrafficLine
          if (res.data.result.length === 0) {
            this.isNoData = true
            return
          }
          res.data.result.forEach((t, i) => {
+            if (t.type === 'bytes') {
              const mpackets = _.cloneDeep(this.mpackets)
              mpackets[0].data = t.totalBitsRate.values ? t.totalBitsRate.values : []
              mpackets[1].data = t.inboundBitsRate.values ? t.inboundBitsRate.values : []
              mpackets[2].data = t.outboundBitsRate.values ? t.outboundBitsRate.values : []
              mpackets[3].data = t.internalBitsRate.values ? t.internalBitsRate.values : []
-            mpackets[4].data = t.externalBitsRate.values ? t.externalBitsRate.values : []
+              mpackets[4].data = t.throughBitsRate.values ? t.throughBitsRate.values : []
              mpackets[5].data = t.other.values ? t.other.values : []
              this.mpackets = mpackets
              this.echartsInit(this.mpackets)
+            }
            // else if (t.type === 'packets') {
            //   const mpackets = _.cloneDeep(this.mpackets)
            //   mpackets[0].data = t.totalPacketsRate.values ? t.totalPacketsRate.values : []
@@ -106,11 +113,13 @@ export default {
            //   this.echartsInit(this.mpackets)
            // }
          })
+        } else {
+          this.isNoData = true
        }
      })
    },
    echartsInit (echartsData) {
-      const dom = document.getElementById('chart')
+      const dom = document.getElementById(this.chartData.name)
      this.myChart = echarts.init(dom)
      this.chartOption = trafficLineChartOption
      const chartOption = this.chartOption.series[0]
@@ -198,6 +207,9 @@ export default {
    }
  },
  mounted () {
+    if (this.chart) {
+      this.chartData = _.cloneDeep(this.chart)
+    }
    this.timer = setTimeout(() => {
      this.init()
    }, 200)
--- a/src/views/charts2/charts/options/echartOption.js
+++ b/src/views/charts2/charts/options/echartOption.js
@@ -227,12 +227,7 @@ export const appListChartOption = {
  },
  yAxis: {
    show: false,
-    type: 'value',
-    axisLabel: {
-      formatter: function (value) {
-        return unitConvert(value, unitTypes.number, null, null, 0).join(' ')
-      }
-    }
+    type: 'value'
  },
  grid: {
    left: 0,