cyber-narrator-cn-ui/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue

<template>
  <div class="link-direction-grid">
    <!--左侧链路出入口-->
    <popover-content :isNoData="isLinkNoData" :gridData="linkGridData" :showError="isLinkShowError" :content="linkErrorMsg" style="width: 900px;"/>

    <!--右侧链路下一跳-->
    <popover-content :isNoData="isNextNoData" :gridData="nextGridData" :showError="isNextShowError" :content="nextErrorMsg" />
  </div>
</template>

<script>
import chartMixin from '@/views/charts2/chart-mixin'
import { getSecond } from '@/utils/date-util'
import { api } from '@/utils/api'
import { storageKey } from '@/utils/constants'
import PopoverContent from './LinkDirectionGrid/PopoverContent'
import { computeScore } from '@/utils/tools'
import axios from 'axios'

export default {
  name: 'LinkDirectionGrid',
  mixins: [chartMixin],
  data () {
    return {
      linkGridData: [],
      nextGridData: [],
      isLinkNoData: false,
      isNextNoData: false,
      isLinkShowError: false, // 显示左侧链路报错标识
      linkErrorMsg: '', // 左侧链路的报错信息
      isNextShowError: false, // 显示右侧下一跳报错标识
      nextErrorMsg: '' // 右侧下一跳的报错信息
    }
  },
  components: {
    PopoverContent
  },
  watch: {
    timeFilter: {
      handler () {
        this.init()
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      // 链路基本信息
      let linkInfo = localStorage.getItem(storageKey.linkInfo)
      linkInfo = JSON.parse(linkInfo)

      const params = {
        startTime: getSecond(this.timeFilter.startTime),
        endTime: getSecond(this.timeFilter.endTime)
      }

      const dataRequest = axios.get(api.linkMonitor.bigramAnalysis, { params: params })
      const nextHopRequest = axios.get(api.linkMonitor.bigramNextHopAnalysis, { params: params })
      this.toggleLoading(true)

      Promise.all([dataRequest, nextHopRequest]).then(response => {
        const res = []
        res[0] = response[0].data
        res[1] = response[1].data
        if (res[0].code === 200) {
          this.isLinkShowError = false
          // 链路流量数据
          const linkData = res[0].data.result
          // 接口数据乱序，根据入链路id（ingressLinkId）大小排序之后，
          // 再根据同ingressLinkId下的egressLinkId进行排序
          linkData.sort((a, b) => {
            if (a.ingressLinkId !== b.ingressLinkId) {
              return a.ingressLinkId - b.ingressLinkId
            }
            return a.egressLinkId - b.egressLinkId
          })

          this.isLinkNoData = linkData.length === 0
          if (!this.isLinkNoData) {
            // 链路流量数据
            const linkGridData = []
            linkData.forEach(d => {
              const ingressLink = linkInfo.find(l => l.originalLinkId === d.ingressLinkId)
              const egressLink = linkInfo.find(l => l.originalLinkId === d.egressLinkId)
              if (ingressLink && egressLink) {
                const data = linkGridData.find(g => g.linkId === ingressLink.linkId)

                // 上行使用情况计算
                const egressUsage = this.computeUsage(d.egressBitsRate, egressLink.bandwidth)
                // 下行使用情况计算
                const ingressUsage = this.computeUsage(d.ingressBitsRate, ingressLink.bandwidth)
                // 宽带使用超过90%，赋红点

                d.usageMore90 = egressUsage >= 0.9 || ingressUsage >= 0.9
                // 计算npm分数
                // 分数低于3分，赋红点
                d.score = this.localComputeScore(d)

                d.scoreLow3 = d.score < 3 || d.score === '-'

                if (data) {
                  const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId)
                  if (!existedEgressLink) {
                    data.egress.push({
                      linkId: egressLink.linkId,
                      egressUsage: egressUsage,
                      ingressUsage: ingressUsage,
                      popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
                      valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
                      totalBitsRate: d.totalBitsRate,
                      ...d
                    })
                  }
                } else {
                  linkGridData.push({
                    linkId: ingressLink.linkId,
                    egress: [{
                      linkId: egressLink.linkId,
                      egressUsage: egressUsage,
                      ingressUsage: ingressUsage,
                      popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
                      valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
                      totalBitsRate: d.totalBitsRate,
                      ...d
                    }]
                  })
                }
              }
            })

            this.linkGridData = linkGridData
          }
        } else {
          this.isLinkNoData = false
          this.isLinkShowError = true
          this.linkErrorMsg = res[0].message
        }

        if (res[1].code === 200) {
          this.isNextShowError = false

          // 链路下一跳信息
          const nextLinkData = res[1].data.result
          // 接口数据乱序，根据入方向排序，再根据同个入方向下的出方向进行排序
          nextLinkData.sort((a, b) => {
            if (a.ingressLinkDirection !== b.ingressLinkDirection) {
              return a.ingressLinkDirection.localeCompare(b.ingressLinkDirection, 'zh')
            }
            return a.egressLinkDirection.localeCompare(b.egressLinkDirection, 'zh')
          })

          this.isNextNoData = nextLinkData.length === 0
          if (!this.isNextNoData) {
            // 链路下一跳数据
            const nextGridData = []

            nextLinkData.forEach(d => {
              const ingressLink = linkInfo.find(l => l.nextHop === d.ingressLinkDirection && l.direction === 'ingress')
              const egressLink = linkInfo.find(l => l.nextHop === d.egressLinkDirection && l.direction === 'egress')

              if (ingressLink && egressLink) {
                const data = nextGridData.find(g => g.linkId === ingressLink.linkId)

                let egressBanwidth = 0
                let ingressBanwidth = 0
                linkInfo.forEach((item) => {
                  if (item.nextHop === d.egressLinkDirection && item.direction === 'egress') {
                    egressBanwidth += item.bandwidth
                  }
                  if (item.nextHop === d.ingressLinkDirection && item.direction === 'ingress') {
                    ingressBanwidth += item.bandwidth
                  }
                })

                // 上行使用情况计算
                const egressUsage = this.computeUsage(d.egressBitsRate, egressBanwidth)
                // 下行使用情况计算
                const ingressUsage = this.computeUsage(d.ingressBitsRate, ingressBanwidth)
                // 宽带使用超过90%，赋红点

                d.usageMore90 = egressUsage >= 0.9 || ingressUsage >= 0.9
                // 计算npm分数
                // 分数低于3分，赋红点
                d.score = this.localComputeScore(d)

                d.scoreLow3 = d.score < 3 || d.score === '-'

                if (data) {
                  const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId)
                  if (!existedEgressLink) {
                    data.egress.push({
                      linkId: egressLink.linkId,
                      nextHop: egressLink.nextHop,
                      egressUsage: egressUsage,
                      ingressUsage: ingressUsage,
                      popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
                      valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
                      totalBitsRate: d.totalBitsRate,
                      ...d
                    })
                  }
                } else {
                  nextGridData.push({
                    linkId: ingressLink.linkId,
                    nextHop: ingressLink.nextHop,
                    egress: [{
                      linkId: egressLink.linkId,
                      nextHop: ingressLink.nextHop,
                      egressUsage: egressUsage,
                      ingressUsage: ingressUsage,
                      popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
                      valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
                      totalBitsRate: d.totalBitsRate,
                      ...d
                    }]
                  })
                }
              }
            })

            this.nextGridData = nextGridData
          }
        } else {
          this.isNextNoData = false
          this.isNextShowError = true
          this.nextErrorMsg = res[1].message
        }
      }).catch(e => {
        this.isLinkShowError = true
        this.linkErrorMsg = e.message

        this.isNextShowError = true
        this.nextErrorMsg = e.message
      }).finally(() => {
        this.toggleLoading(false)
      })
    },
    /**
     * 计算上下行使用占比
     */
    computeUsage (e, bandwidth) {
      let usage = e / bandwidth
      if (usage >= 1) {
        usage = 1
      }
      return usage
    },
    /**
     * 本地计算npm分数
     */
    localComputeScore (data) {
      let score = 0
      const dataScore = {
        establishLatencyMs: data.establishLatencyMs || null,
        httpResponseLatency: data.httpResponseLatency || null,
        sslConLatency: data.sslConLatency || null,
        tcpLostlenPercent: data.tcpLostlenPercent || null,
        pktRetransPercent: data.pktRetransPercent || null
      }
      score = computeScore(dataScore)
      return score
    },
    /**
     * 计算popover弹窗和右侧数据模块的宽度
     * 弹窗最小宽度为360px，右侧数据最小宽度为75px，右侧数据每大一位，popover弹窗宽度增加7px
     */
    computeWidth (egress, ingress, flag) {
      let width = 0
      let length = 0

      let egressUsage = ''
      let ingressUsage = ''

      if (egress < 0.0001 && egress !== 0) {
        egressUsage = '<0.01%'
      } else {
        egressUsage = JSON.stringify(parseFloat((egress * 100).toFixed(2)))
      }
      if (ingress < 0.0001 && ingress !== 0) {
        ingressUsage = '<0.01%'
      } else {
        ingressUsage = JSON.stringify(parseFloat((ingress * 100).toFixed(2)))
      }

      length = egressUsage.length + ingressUsage.length - 1

      if (flag === 'popover') {
        width = 360 + length * 7
      } else {
        width = 75 + length * 7
      }

      return width
    }
  }
}
</script>