feat: 链路 =》进出口 tabs 桑葚图表开发

2022-09-26 15:53:57 +08:00
parent 89952e8699
commit 92e2727514
5 changed files with 440 additions and 37 deletions
--- a/src/assets/css/components/views/charts2/linkTrafficSankey.scss
+++ b/src/assets/css/components/views/charts2/linkTrafficSankey.scss
@@ -6,9 +6,17 @@
  height: 100%;
  width: 100%;
  border-radius: 4px;
+  position: relative;

+  .sankey__label {
+    position: absolute;
+    color: #333;
+    bottom: 50px;
+    font-weight: bold;
+    transform: translateX(-50%);
+  }
  .el-tabs {
-    margin-left: 20px;
+    height: 100%;

    .el-tabs__nav-wrap {
      padding-top: 5px;
@@ -20,6 +28,7 @@
    }
    .el-tabs__nav.is-top {
      height: 33px;
+      margin-left: 20px;

      .el-tabs__active-bar {
        background-color: $blue;
@@ -38,5 +47,49 @@
        }
      }
    }
+    .el-tabs__content {
+      height: calc(100% - 52px);
+      width: 100%;
+      .el-tab-pane {
+        height: 100%;
+        width: 100%;
+        .chart-drawing {
+          height: 100%;
+          width: 100%;
+          .traffic-sankey {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            flex-direction: column;
+            .traffic-sankey-row-header {
+              .traffic-sankey__row-value {
+                font-size: 12px;
+                color: $blue;
+                font-weight: 500;
+              }
+            }
+            .traffic-sankey-row-body {
+              display: flex;
+              .traffic-sankey__tooltip-right {
+                .traffic-sankey__row-value {
+                  font-size: 12px;
+                  color: #353636;
+                  font-weight: 600;
+                }
+              }
+              .traffic-sankey__tooltip-left {
+                .traffic-sankey__row-label {
+                  margin-right: 5px;
+                  font-size: 12px;
+                  color: #575757;
+                  font-weight: 400;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
  }
 }
--- a/src/mock/linkMonitor.js
+++ b/src/mock/linkMonitor.js
@@ -21,7 +21,7 @@ if (openMock) {
    const egressLinkIds = ['257', '513', '769', '1025', '1281', '1537', '1793', '2049', '2305', '2817']
    ingressLinkIds.forEach(ingress => {
      egressLinkIds.forEach(egress => {
-        data.push({ egressLinkId: egress, ingressLinkId: ingress, egressBytes: 128000, ingressBytes: 12800, totalBytes: 130800, establishLatencyMs: 50, httpResponseLatency: 50, sslConLatency: 50, tcpLostlenPercent: 0.2, pktRetransPercent: 0.1 })
+        data.push({ egressLinkId: egress, ingressLinkId: ingress, egressUsage: 128000, ingressUsage: 12800, totalBitsRate: 985412, score: 6, tcpConnectionEstablishLatency: 50, httpResponseLatency: 50, sslResponseLatency: 50, packetsLoss: 0.2, packetRetrans: 0.1 })
      })
    })
    return {
@@ -32,4 +32,82 @@ if (openMock) {
      }
    }
  })
+  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'interface/link/overview/quadrupleIngressAnalysis.*'), 'get', function (requestObj) {
+    const data = [
+      {
+        clientCity: 'beijing',
+        commonEgressLinkId: 257,
+        ingressLinkDirection: 'xian',
+        serverCity: 'taiyuan',
+        ingressBytes: 10000000000
+      },
+      {
+        clientCity: 'xingjiang',
+        commonEgressLinkId: 513,
+        ingressLinkDirection: 'xian',
+        serverCity: 'liaoning',
+        ingressBytes: 20000000000
+      },
+      {
+        clientCity: 'shanghai',
+        commonEgressLinkId: 769,
+        ingressLinkDirection: 'xian',
+        serverCity: 'anhui',
+        ingressBytes: 30000000000
+      },
+      {
+        clientCity: 'tianjing',
+        commonEgressLinkId: 1025,
+        ingressLinkDirection: 'xian',
+        serverCity: 'taiyuan',
+        ingressBytes: 30000000000
+      }
+    ]
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: data
+      }
+    }
+  })
+  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'interface/link/overview/quadrupleEgressAnalysis.*'), 'get', function (requestObj) {
+    const data = [
+      {
+        clientCity: 'beijing',
+        commonEgressLinkId: 256,
+        egressLinkDirection: 'xian',
+        serverCity: 'taiyuan',
+        egressBytes: 10000000000
+      },
+      {
+        clientCity: 'xingjiang',
+        commonEgressLinkId: 512,
+        egressLinkDirection: 'xian',
+        serverCity: 'liaoning',
+        egressBytes: 20000000000
+      },
+      {
+        clientCity: 'shanghai',
+        commonEgressLinkId: 768,
+        egressLinkDirection: 'xian',
+        serverCity: 'anhui',
+        egressBytes: 30000000000
+      },
+      {
+        clientCity: 'tianjing',
+        commonEgressLinkId: 1024,
+        egressLinkDirection: 'xian',
+        serverCity: 'taiyuan',
+        egressBytes: 30000000000
+      }
+    ]
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: data
+      }
+    }
+  })
 }
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -199,7 +199,9 @@ export const api = {
  },
  linkMonitor: {
    links: '/interface/linkMonitor/links',
-    linkTrafficDirection: '/interface/linkMonitor/linkTrafficDirection'
+    linkTrafficDirection: '/interface/linkMonitor/linkTrafficDirection',
+    quadrupleIngressAnalysis: '/interface/link/overview/quadrupleIngressAnalysis', // 入口
+    quadrupleEgressAnalysis: '/interface/link/overview/quadrupleEgressAnalysis' // 出口
  },
  dnsInsight: {
    recentEvents: '/interface/dnsInsight/recentEvents',
--- a/src/views/charts2/charts/linkMonitor/LinkTrafficSankey.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkTrafficSankey.vue
@@ -1,15 +1,43 @@
 <template>
  <div class="link-traffic-sankey">
    <el-tabs v-model="tab">
-      <el-tab-pane :label="$t('linkMonitor.ingress')" :name="0"></el-tab-pane>
-      <el-tab-pane :label="$t('linkMonitor.egress')" :name="1"></el-tab-pane>
+      <el-tab-pane :label="$t('linkMonitor.ingress')" name="0">
+        <chart-no-data v-if="ingress"></chart-no-data>
+        <div class="chart-drawing" id="link-traffic-sankey-0"></div>
+      </el-tab-pane>
+      <el-tab-pane :label="$t('linkMonitor.egress')" name="1">
+        <chart-no-data v-if="egress"></chart-no-data>
+        <div class="chart-drawing" id="link-traffic-sankey-1"></div>
+      </el-tab-pane>
    </el-tabs>
+    <template v-if="tab == 0 && !ingress">
+      <div class="sankey__label" style="left: 5%;">External Locations</div>
+      <div class="sankey__label" style="left: 35%;">Next-Hop Internets</div>
+      <div class="sankey__label" style="left: 63%;">Links</div>
+      <div class="sankey__label" style="right: 9%; transform: translateX(50%)">Internets Locations</div>
+    </template>
+    <template v-else-if="tab == 1 && !egress">
+      <div class="sankey__label" style="left: 5%;">Internets Locations</div>
+      <div class="sankey__label" style="left: 33.2%;">Links</div>
+      <div class="sankey__label" style="left: 64.5%;">Next-Hop Internets</div>
+      <div class="sankey__label" style="right: 9%; transform: translateX(50%)">External Locations</div>
+    </template>
  </div>
 </template>

 <script>
+import * as echarts from 'echarts'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 import chartMixin from '@/views/charts2/chart-mixin'
+import { linksTrafficSankeyOption } from '@/views/charts2/charts/options/echartOption'
+import { ref, shallowRef } from 'vue'
+import { get } from '@/utils/http'
+import { api } from '@/utils/api'
+import { getSecond } from '@/utils/date-util'
+import { useRoute } from 'vue-router'
+import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
+import unitConvert from '@/utils/unit-convert'
+import { storageKey, unitTypes } from '@/utils/constants'

 export default {
  name: 'LinksTrafficSankey',
@@ -17,13 +45,278 @@ export default {
  components: {
    ChartNoData
  },
+  setup () {
+    const { query } = useRoute()
+    const tab = ref(query.tabIndex || 0)
+    return {
+      tab,
+      myChart: shallowRef(null),
+      myChart2: shallowRef(null)
+    }
+  },
  data () {
    return {
-      tab: 0
+      timer: null,
+      ingress: false,
+      egress: false,
+      unitConvert,
+      unitTypes,
+      cnLinkInfo: JSON.parse(localStorage.getItem(storageKey.linkInfo))
+    }
+  },
+  watch: {
+    tab (n) {
+      this.$nextTick(() => {
+        this.linkTrafficSankeyDataRequest(n)
+      })
+      const { query } = this.$route
+      const newUrl = urlParamsHandler(window.location.href, query, {
+        tabIndex: n
+      })
+      overwriteUrl(newUrl)
+    },
+    timeFilter: {
+      deep: true,
+      handler (n) {
+        this.linkTrafficSankeyDataRequest(this.tab)
+      }
+    }
+  },
+  methods: {
+    linkTrafficSankeyDataRequest (n) {
+      const params = {
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime)
+      }
+      let url = ''
+      if (n == 0) {
+        url = api.linkMonitor.quadrupleIngressAnalysis // 入口
+      } else {
+        url = api.linkMonitor.quadrupleEgressAnalysis // 出口
+      }
+      get(url, params).then(res => {
+        if (res.code === 200) {
+          if (n == 0) {
+            this.ingress = res.data.result.length === 0
+          } else {
+            this.egress = res.data.result.length === 0
+          }
+          this.dataProcessing(res.data.result, n)
+        }
+      }).catch(e => {
+        console.error(e)
+        this.isNoData = true
+      }).finally(() => {
+        this.toggleLoading(false)
+      })
+    },
+    dataProcessing (result, tab) {
+      let data = []
+      let links = []
+      result.forEach(t => {
+        this.cnLinkInfo.forEach(e => {
+          if (t.commonEgressLinkId == e.originalLinkId) {
+            t.commonEgressLinkId = e.linkId
+            t.ingressLinkDirection = e.nextHop
+            t.egressLinkDirection = e.nextHop
+            t.bandWidth = e.bandwidth
+          }
+        })
+        data.push(
+          { name: t.serverCity },
+          { name: t.commonEgressLinkId },
+          { name: tab == 0 ? t.ingressLinkDirection : t.egressLinkDirection },
+          { name: t.clientCity }
+        )
+      })
+      const clientCity = []
+      const linkDirection = []
+      const commonEgressLinkId = []
+      let link = []
+      result.forEach(t => {
+        const LinkDirectionShow = tab == 0 ? t.ingressLinkDirection : t.egressLinkDirection
+        const bytes = tab == 0 ? t.ingressBytes : t.egressBytes
+        if (tab == 0) {
+          clientCity.push({
+            source: t.serverCity,
+            target: LinkDirectionShow,
+            commonEgressLinkId: t.commonEgressLinkId,
+            clientCity: t.clientCity,
+            value: bytes,
+            bandWidth: t.bandWidth,
+            depth: 2
+          })
+          linkDirection.push({
+            clientCity: t.clientCity,
+            source: LinkDirectionShow,
+            target: t.commonEgressLinkId,
+            serverCity: t.serverCity,
+            value: bytes,
+            bandWidth: t.bandWidth,
+            depth: 1
+          })
+          commonEgressLinkId.push({
+            serverCity: t.serverCity,
+            LinkDirectionShow: LinkDirectionShow,
+            source: t.commonEgressLinkId,
+            target: t.clientCity,
+            value: bytes,
+            bandWidth: t.bandWidth,
+            depth: 0
+          })
+        } else {
+          clientCity.push({
+            source: t.clientCity,
+            target: t.commonEgressLinkId,
+            LinkDirectionShow: LinkDirectionShow,
+            serverCity: t.serverCity,
+            value: bytes,
+            bandWidth: t.bandWidth,
+            depth: 0
+          })
+          linkDirection.push({
+            clientCity: t.clientCity,
+            source: t.commonEgressLinkId,
+            target: LinkDirectionShow,
+            serverCity: t.serverCity,
+            value: bytes,
+            bandWidth: t.bandWidth,
+            depth: 1
+          })
+          commonEgressLinkId.push({
+            clientCity: t.clientCity,
+            commonEgressLinkId: t.commonEgressLinkId,
+            source: LinkDirectionShow,
+            target: t.serverCity,
+            value: bytes,
+            bandWidth: t.bandWidth,
+            depth: 2
+          })
+        }
+      })
+      link = [...clientCity, ...linkDirection, ...commonEgressLinkId]
+      for (let i = 0; i < link.length; i++) {
+        for (let j = i + 1; j < link.length; j++) {
+          if (link[i].source === link[j].source && link[i].target === link[j].target) {
+            link[i].value = link[i].value * 1 + link[j].value * 1
+            link.splice(j, 1)
+          }
+        }
+      }
+      const map = new Map()
+      for (const item of data) {
+        if (!map.has(item.name)) {
+          map.set(item.name, item)
+        }
+      }
+      data = [...map.values()]
+      links = link
+      this.echartsInit(tab, data, links)
+    },
+    echartsInit (tab, data, links) {
+      const _this = this
+      let dom = ''
+      if (tab == 0) {
+        dom = document.getElementById('link-traffic-sankey-0')
+        !this.myChart && (this.myChart = echarts.init(dom))
+      } else {
+        dom = document.getElementById('link-traffic-sankey-1')
+        !this.myChart2 && (this.myChart2 = echarts.init(dom))
+      }
+      this.chartOption = this.$_.cloneDeep(linksTrafficSankeyOption)
+      this.chartOption.tooltip.formatter = function (param) {
+        if (param.data.name) return ''
+        let data = ''
+        let value = 0
+        if (param.data.depth === 0) {
+          if (tab == 0) {
+            data = ` ${param.data.target} > ${param.data.source} > ${param.data.LinkDirectionShow} > ${param.data.serverCity}`
+          } else {
+            data = `${param.data.source} > ${param.data.target} > ${param.data.LinkDirectionShow} > ${param.data.serverCity}`
+          }
+          value = unitConvert((param.data.value / param.data.bandWidth), unitTypes.percent).join(' ')
+        } else if (param.data.depth === 1) {
+          if (tab == 0) {
+            data = `${param.data.clientCity} > ${param.data.target} > ${param.data.source} > ${param.data.serverCity}`
+          } else {
+            data = `${param.data.clientCity} > ${param.data.source} > ${param.data.target} > ${param.data.serverCity}`
+          }
+          value = unitConvert((param.data.value / param.data.bandWidth), unitTypes.percent).join(' ')
+        } else if (param.data.depth === 2) {
+          if (tab == 0) {
+            data = `${param.data.clientCity} > ${param.data.commonEgressLinkId} > ${param.data.target} > ${param.data.source}`
+          } else {
+            data = ` ${param.data.clientCity} > ${param.data.commonEgressLinkId}>${param.data.source} > ${param.data.target}`
+          }
+          value = unitConvert((param.data.value / param.data.bandWidth), unitTypes.percent).join(' ')
+        }
+        return `
+            <div class="traffic-sankey">
+              <div class="traffic-sankey-row-header">
+                <div class="traffic-sankey__row-value">${data}</div>
+              </div>
+              <div class="traffic-sankey-row-body">
+                <div class="traffic-sankey__tooltip-left">
+                  <div class="traffic-sankey__row-label">${_this.$t('overall.traffic')}</div>
+                  <div class="traffic-sankey__row-label">${_this.$t('linkMonitor.bandwidthUsage')}</div>
+                </div>
+                <div class="traffic-sankey__tooltip-right">
+                  <div class="traffic-sankey__row-value">${unitConvert(param.value, unitTypes.bps).join(' ')}</div>
+                  <div class="traffic-sankey__row-value">${value}</div>
+                </div>
+              </div>
+            </div>
+          `
+      }
+      this.chartOption.series[0].levels = [
+        {
+          depth: 0,
+          lineStyle: {
+            color: '#999'
+          }
+        }, {
+          depth: 1,
+          itemStyle: {
+            color: tab == 0 ? '#47D49C' : ''
+          },
+          lineStyle: {
+            color: '#999'
+          }
+        }, {
+          depth: 2,
+          itemStyle: {
+            color: tab == 0 ? '' : '#47D49C'
+          },
+          lineStyle: {
+            color: '#999'
+          }
+        }
+      ]
+      this.chartOption.series[0].data = data
+      this.chartOption.series[0].links = links
+      if (tab == 0) {
+        this.myChart.setOption(this.chartOption)
+      } else {
+        this.myChart2.setOption(this.chartOption)
+      }
+    },
+    resize () {
+      if (this.tab == 0) {
+        this.myChart.resize()
+      } else {
+        this.myChart2.resize()
+      }
    }
  },
  mounted () {
-    this.toggleLoading(false)
+    this.timer = setTimeout(() => {
+      this.linkTrafficSankeyDataRequest(this.tab)
+    }, 100)
+    window.addEventListener('resize', this.resize)
+  },
+  beforeUnmount () {
+    clearTimeout(this.timer)
+    window.removeEventListener('resize', this.resize)
  }
 }
 </script>
--- a/src/views/charts2/charts/options/echartOption.js
+++ b/src/views/charts2/charts/options/echartOption.js
@@ -449,36 +449,13 @@ export const linksTrafficSankeyOption = {
      type: 'sankey',
      data: [],
      links: [],
-      right: '5%',
-      top: 50,
-      bottom: 100,
-      levels: [
-        {
-          depth: 0,
-          itemStyle: {
-            color: '#47D49C'
-          },
-          lineStyle: {
-            color: '#999'
-          }
-        }, {
-          depth: 1,
-          itemStyle: {
-            color: '#A69BF5'
-          },
-          lineStyle: {
-            color: '#999'
-          }
-        }, {
-          depth: 2,
-          itemStyle: {
-            color: '#73A0FA'
-          },
-          lineStyle: {
-            color: '#999'
-          }
-        }
-      ]
+      right: '7%',
+      left: '3%',
+      top: '0%',
+      bottom: '23%'
+      // emphasis: {
+      //   focus: 'adjacency'
+      // }
    }
  ]
 }