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

<template>
  <div class="link-blocks">
    <div class="block-list" style="position: relative">
      <div class="block-list__title">{{ $t('linkMonitor.links') }}</div>

      <!--无数据noData-->
      <chart-no-data v-if="linkNoData" test-id="linkBlockNoData"></chart-no-data>

      <chart-error style="top: 40px;" v-show="!linkNoData" v-if="showError1" :content="errorMsg1" />
      <div class="block-list__list" v-show="!linkNoData" v-else>
        <el-popover
            placement="bottom"
            effect="dark"
            trigger="hover"
            popper-class="link-block__popper"
            v-for="(item, index) in linkData"
            :width="item.popoverWidth"
            :key="index"
        >
          <template #reference>
            <div class="block-list__block" :key="index" @click="drillLinkId(item)">
              <span class="block-hex">
                <span class="block-hex-in" :test-id="`linkBlock${index}`" :style="`background-color: ${item.color}`"></span>
              </span>
            </div>
          </template>
          <template #default>
            <div class="popper-content">
              <div class="popper-content__link-id">Link ID: {{ item.interfaceName }}</div>
              <div class="popper-content__link-info">
                <div class="info__label">{{ $t('linkMonitor.linkBlock.total') }}</div>
                <div class="info__value" :test-id="`linkBlockTotal${index}`" style="margin-left: 8px">
                  {{ unitConvert(item.totalBitsRate, unitTypes.bps).join(' ') }}
                </div>
              </div>
              <div class="popper-content__link-info">
                <div class="info__label">{{ $t('linkMonitor.linkBlock.bandwidthUsage') }}</div>
                <div class="info__value" style="display: flex">
                  <div :test-id="`linkBlockEgressUsage${index}`">
                    <svg class="icon item-popover-up" aria-hidden="true">
                      <use xlink:href="#cn-icon-egress"></use>
                    </svg>
                    {{ convertValue(item.outUsage) }}
                  </div>
                  <div :test-id="`linkBlockIngressUsage${index}`">
                    <svg class="icon item-popover-down" aria-hidden="true">
                      <use xlink:href="#cn-icon-ingress"></use>
                    </svg>
                    {{ convertValue(item.inUsage) }}
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-popover>
      </div>
    </div>

    <div class="block-list" >
      <div class="block-list__title">{{ $t('linkMonitor.nextHopInternet') }}</div>

      <chart-no-data v-if="nextHopNoData" test-id="nextHpNoData"></chart-no-data>
      <chart-error style="top: 40px;" v-show="!nextHopNoData" class="link-block-error" v-if="showError2" :content="errorMsg2" />
      <div class="block-list__list" v-show="!nextHopNoData" v-else>
        <el-popover
            placement="bottom"
            effect="dark"
            trigger="hover"
            popper-class="link-block__popper"
            v-for="(item, index) in nextHopData"
            :width="item.popoverWidth"
            :key="index"
        >
          <template #reference>
            <div class="block-list__block" :key="index" @click="drillNextHop(item)">
              <span class="block-hex">
                <span class="block-hex-in" :test-id="`nextHopBlock${index}`" :style="`background-color: ${item.color}`"></span>
              </span>
            </div>
          </template>
          <template #default>
            <div class="popper-content">
              <div class="popper-content__link-id">Next-Hop Internet: {{ item.linkDirection }}</div>
              <div class="popper-content__link-info">
                <div class="info__label">{{ $t('linkMonitor.linkBlock.total') }}</div>
                <div class="info__value" :test-id="`nextHopTotal${index}`" style="margin-left: 8px">
                  {{ unitConvert(item.totalBitsRate, unitTypes.bps).join(' ') }}
                </div>
              </div>
              <div class="popper-content__link-info">
                <div class="info__label">{{ $t('linkMonitor.linkBlock.bandwidthUsage') }}</div>
                <div class="info__value" style="display: flex">
                  <div :test-id="`nextHopEgressUsage${index}`">
                    <svg class="icon item-popover-up" aria-hidden="true">
                      <use xlink:href="#cn-icon-egress"></use>
                    </svg>
                    {{ convertValue(item.outUsage) }}
                  </div>
                  <div :test-id="`nextHopIngressUsage${index}`">
                    <svg class="icon item-popover-down" aria-hidden="true">
                      <use xlink:href="#cn-icon-ingress"></use>
                    </svg>
                    {{ convertValue(item.inUsage) }}
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-popover>
      </div>
    </div>
  </div>
</template>

<script>
import ChartNoData from '@/views/charts/charts/ChartNoData'
import chartMixin from '@/views/charts2/chart-mixin'
import { useRoute } from 'vue-router'
import { ref } from 'vue'
import { api } from '@/utils/api'
import { colorGradientCalculation, beforeRouterPush } from '@/utils/tools'
import unitConvert from '@/utils/unit-convert'
import { drillDownPanelTypeMapping, storageKey, unitTypes } from '@/utils/constants'
import { getSecond } from '@/utils/date-util'
import ChartError from '@/components/common/Error'
import axios from 'axios'

export default {
  name: 'LinkBlock',
  mixins: [chartMixin],
  components: {
    ChartError,
    ChartNoData
  },
  data () {
    return {
      linkNoData: false,
      nextHopNoData: false,
      unitTypes,
      linkData: [],
      nextHopData: [],
      gradientColor: ['#FF005C', '#40537E'], // [start, end]
      showError1: false,
      showError2: false,
      errorMsg1: '',
      errorMsg2: ''
    }
  },
  setup () {
    const { query } = useRoute()
    const tab = ref(query.blockTab || 0)
    return {
      tab
    }
  },
  watch: {
    timeFilter: {
      handler () {
        this.init()
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    unitConvert,
    init () {
      this.toggleLoading(true)
      // 链路基本信息
      let linkConfig = null
      linkConfig = localStorage.getItem(storageKey.linkInfo)
      linkConfig = JSON.parse(linkConfig)
      const params = {
        startTime: getSecond(this.timeFilter.startTime),
        endTime: getSecond(this.timeFilter.endTime)
      }
      // 根据配置判断是否是单向还是双向，只要有一条数据的direction=0或1，就视为双向。
      const isTwoWay = linkConfig.some(config => config.direction === 0 || config.direction === 1)

      const dataRequest = axios.get(api.linkMonitor.analysis, { params: params }).catch(e => {
        console.error(e)
        this.linkNoData = false
        this.showError1 = true
        this.errorMsg1 = this.errorMsgHandler(e)
      })
      const nextHopRequest = axios.get(api.linkMonitor.nextHopAnalysis, { params: params }).catch(e => {
        console.error(e)
        this.nextHopNoData = false
        this.showError2 = true
        this.errorMsg2 = this.errorMsgHandler(e)
      })

      Promise.all([dataRequest, nextHopRequest]).then(response => {
        if (response[0] && response[1]) {
          const res = []
          res[0] = response[0].data
          // res[0] = analysis.data
          res[1] = response[1].data
          // res[1] = nextHopAnalysis.data
          if (response[0].status === 200) {
            this.showError1 = false

            const linkData = res[0].data.result
            this.linkNoData = linkData.length === 0
            if (!this.linkNoData) {
              const data = []
              linkData.forEach(d => {
                const info = linkConfig.find(i => i.linkId === parseInt(d.linkId))
                if (info) {
                  const hit = data.find(d => d.interfaceName === info.interfaceName)
                  if (hit) {
                    hit.outBitsRate += d.outBitsRate
                    hit.inBitsRate += d.inBitsRate
                    if (info.direction === 0) {
                      hit.outBandwidth = info.bandwidth
                    } else if (info.direction === 1) {
                      hit.inBandwidth = info.bandwidth
                    } else if (info.direction === 2) {
                      hit.bandwidth = info.bandwidth
                    }
                  } else {
                    const hit = {
                      interfaceName: info.interfaceName,
                      outBitsRate: d.outBitsRate,
                      inBitsRate: d.inBitsRate
                    }
                    if (info.direction === 0) {
                      hit.outBandwidth = info.bandwidth
                    } else if (info.direction === 1) {
                      hit.inBandwidth = info.bandwidth
                    } else if (info.direction === 2) {
                      hit.bandwidth = info.bandwidth
                    }
                    data.push(hit)
                  }
                }
              })
              this.linkNoData = data.length === 0
              data.forEach(item => {
                item.totalBitsRate = item.outBitsRate + item.inBitsRate
                linkConfig.filter(info => info.interfaceName === item.interfaceName).forEach(info => {
                  item.linkId = info.linkId
                })
              })

              const sorted = data.sort((a, b) => b.totalBitsRate - a.totalBitsRate)
              const linkColors = colorGradientCalculation(this.gradientColor[0], this.gradientColor[1], sorted.map(s => s.totalBitsRate))
              sorted.forEach((s, i) => {
                s.color = linkColors[i]
                s.outUsage = this.computeUsage(s.outBitsRate, isTwoWay ? s.outBandwidth : s.bandwidth)
                s.inUsage = this.computeUsage(s.inBitsRate, isTwoWay ? s.inBandwidth : s.bandwidth)
                s.popoverWidth = this.computePopoverWidth(s.outUsage, s.inUsage)
              })
              this.linkData = sorted
            }
          } else {
            this.linkNoData = true
            this.showError1 = true
            this.errorMsg1 = this.errorMsgHandler(res[0])
          }

          if (response[1].status === 200) {
            this.showError2 = false

            const nextHopData = res[1].data.result
            this.nextHopNoData = nextHopData.length === 0
            if (!this.nextHopNoData) {
              let directionArr = []
              nextHopData.forEach((item) => {
                if (item.outLinkDirection !== '' && item.inLinkDirection !== '') {
                  directionArr.push(item.outLinkDirection)
                  directionArr.push(item.inLinkDirection)
                }
              })
              directionArr = Array.from(new Set(directionArr))

              const newNextHopData = []
              this.nextHopNoData = directionArr.length === 0
              directionArr.forEach((item1) => {
                const newObj = { outBitsRate: 0, inBitsRate: 0, totalBitsRate: 0, linkDirection: item1 }
                nextHopData.forEach((item2) => {
                  if (item1 === item2.outLinkDirection) {
                    newObj.outBitsRate += item2.outBitsRate
                    newObj.totalBitsRate += item2.outBitsRate
                  }
                  if (item1 === item2.inLinkDirection) {
                    newObj.inBitsRate += item2.inBitsRate
                    newObj.totalBitsRate += item2.inBitsRate
                  }
                })
                newNextHopData.push(newObj)
              })

              // 下一跳数据处理
              const nextHopSorted = newNextHopData.sort((a, b) => b.totalBitsRate - a.totalBitsRate)
              const nextHopColors = colorGradientCalculation(this.gradientColor[0], this.gradientColor[1], nextHopSorted.map(s => s.totalBitsRate))
              nextHopSorted.forEach((s, i) => {
                s.color = nextHopColors[i]

                let outTotalBandwidth = 0
                let inTotalBandwidth = 0
                let totalBandwidth = 0
                linkConfig.forEach((item) => {
                  if (s.linkDirection === item.peerCity) {
                    if (item.direction === 0) {
                      outTotalBandwidth += item.bandwidth
                    } else if (item.direction === 1) {
                      inTotalBandwidth += item.bandwidth
                    } else if (item.direction === 2) {
                      totalBandwidth += item.bandwidth
                    }
                  }
                })

                // 上行使用情况计算
                const outUsage = this.computeUsage(s.outBitsRate, isTwoWay ? outTotalBandwidth : totalBandwidth)
                // 下行使用情况计算
                const inUsage = this.computeUsage(s.inBitsRate, isTwoWay ? inTotalBandwidth : totalBandwidth)
                s.outUsage = outUsage
                s.inUsage = inUsage
                s.popoverWidth = this.computePopoverWidth(outUsage, inUsage)
              })

              this.nextHopData = nextHopSorted
            }
          } else {
            this.showError2 = true
            this.nextHopNoData = true
            this.errorMsg2 = this.errorMsgHandler(res[1])
          }
        }
      }).catch(e => {
        console.error(e)
        this.linkNoData = false
        this.nextHopNoData = false
        this.showError1 = true
        this.showError2 = true
        this.errorMsg1 = this.errorMsgHandler(e)
        this.errorMsg2 = this.errorMsgHandler(e)
      }).finally(() => {
        this.toggleLoading(false)
      })
    },
    /**
     * 计算上下行使用占比
     */
    computeUsage (e, bandwidth) {
      let usage = e / bandwidth
      if (usage >= 1) {
        usage = 1
      }
      return usage
    },
    /**
     * 计算popover弹窗的宽度
     * 最小宽度为252px，百分比每大一位，popover弹窗宽度增加7px
     */
    computePopoverWidth (out, _in) {
      let width = 252
      let length = 0

      // 将上下行乘100保留2位转换，即10.00为5位，100.00为6位，popover弹窗宽度就增加7px
      // 最小宽度为252px，最少位数为上下行相加为8位
      let outUsage = ''
      let inUsage = ''

      if (out < 0.0001 && out !== 0) {
        outUsage = '< 0.01%'
      } else {
        outUsage = JSON.stringify(parseFloat(out * 100).toFixed(2))
      }
      if (_in < 0.0001 && _in !== 0) {
        inUsage = '< 0.01%'
      } else {
        inUsage = JSON.stringify(parseFloat(_in * 100).toFixed(2))
      }

      length = outUsage.length + inUsage.length

      if (length > 8) {
        width = 252 + (length - 8) * 7
      }
      return width
    },
    drillLinkId (item) {
      const queryCondition = `out_link_id = ${item.linkId} or in_link_id = ${item.linkId}`
      beforeRouterPush()
      this.$router.push({
        query: {
          ...this.$route.query,
          thirdPanel: drillDownPanelTypeMapping.linkMonitor,
          thirdMenu: `Link ID: ${item.interfaceName}`,
          panelName: `Link ID: ${item.interfaceName}`,
          queryCondition,
          t: +new Date()
        }
      })
    },
    drillNextHop (item) {
      const queryCondition = `out_link_direction = '${item.linkDirection}' or in_link_direction = '${item.linkDirection}'`
      this.$router.push({
        query: {
          ...this.$route.query,
          thirdPanel: drillDownPanelTypeMapping.linkMonitor,
          thirdMenu: `Next-Hop Internet: ${item.linkDirection}`,
          panelName: `Next-Hop Internet: ${item.linkDirection}`,
          queryCondition,
          t: +new Date()
        }
      })
    },
    /**
     * 对单位进行转换，值小于0.0001的显示为<0.01%，除此之外正常转换显示
     * @param value
     * @returns {string}
     */
    convertValue (value) {
      let newValue = null
      if (value < 0.0001 && value !== 0) {
        newValue = '< 0.01%'
      } else {
        newValue = unitConvert(value, unitTypes.percent).join('')
      }

      return newValue
    }
  },
  beforeUnmount () {
    this.unitConvert = null
  }
}
</script>