CN-714 feat: dns图表定义

src/assets/css/components/views/charts2/linkDirectionGrid.scss

@@ -1,3 +1,72 @@
 .link-direction-grid {
+  display: flex;
+  border: 1px solid #E2E5EC;
+  height: 100%;
+  width: 100%;
+  border-radius: 4px;
 
+  .link-statistical-dimension {
+    width: 50%;
+    padding: 20px;
+
+    .dimension-title {
+      font-size: 14px;
+      color: #046ECA;
+    }
+    .data-grid {
+      height: 100px;
+      .egress-row {
+        padding-left: 190px;
+        height: 100%;
+        display: flex;
+
+        .egress-id {
+          display: flex;
+          align-items: flex-end;
+          width: 50px;
+          height: 100%;
+          margin-right: 8px;
+          transform: rotate(-45deg) translate(-5px,-15px);
+          color: #353636;
+          font-size: 12px;
+        }
+      }
+      .data-row {
+        display: flex;
+
+        .ingress-id {
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          width: 190px;
+          height: 50px;
+          margin-bottom: 10px;
+          padding-right: 12px;
+          color: #353636;
+          font-size: 12px;
+        }
+        .data-item {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 50px;
+          width: 50px;
+          margin: 0 8px 8px 0;
+          border: 1px solid #DEDEDE;
+          border-radius: 4px;
+
+          .data-item__point {
+            height: 8px;
+            width: 8px;
+            border-radius: 50%;
+            background-color: #749F4D;
+
+            &:first-of-type {
+              margin-right: 6px;
+            }
+          }
+        }
+      }
+    }
+  }
 }

src/mock/linkMonitor.js

@@ -2,7 +2,7 @@ import Mock from 'mockjs'
 
 const openMock = true
 if (openMock) {
-  Mock.mock(BASE_CONFIG.baseUrl + 'interface/linkMonitor/links', 'get', function (requestObj) {
+  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'interface/linkMonitor/links.*'), 'get', function (requestObj) {
     const linkData = []
     for (let i = 0; i < 94; i++) {
       linkData.push({ linkId: 20 * (i + 300), totalBitsRate: Math.floor(Math.pow(1.1, i) * 10000) })
@@ -15,4 +15,21 @@ if (openMock) {
       }
     }
   })
+  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'interface/linkMonitor/linkTrafficDirection.*'), 'get', function (requestObj) {
+    const data = []
+    const ingressLinkIds = ['256', '512', '768', '1024', '1280', '1536', '1792', '2048', '2304', '2816']
+    const egressLinkIds = ['257', '513', '769', '1025', '1281', '1537', '1793', '2049', '2305', '2817']
+    ingressLinkIds.forEach(ingress => {
+      egressLinkIds.forEach(egress => {
+        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 {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: data
+      }
+    }
+  })
 }

src/mock/npm.js

@@ -2,7 +2,7 @@ import Mock from 'mockjs'
 
 const openMock = false
 if (openMock) {
-  Mock.mock(RegExp(BASE_CONFIG.baseUrl + 'visual/panel*'), 'get', function (requestObj) {
+  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'visual/panel.*'), 'get', function (requestObj) {
     return {
       "msg": "success",
       "code": 200,

src/utils/api.js

@@ -20,6 +20,8 @@ export const api = {
   login: '/sys/login',
   // user
   user: '/sys/user',
+  // 获取配置
+  config: '/sys/config',
   // role
   role: '/sys/role',
   menu: '/sys/role/menu/',
@@ -196,7 +198,8 @@ export const api = {
     }
   },
   linkMonitor: {
-    links: '/interface/linkMonitor/links'
+    links: '/interface/linkMonitor/links',
+    linkTrafficDirection: '/interface/linkMonitor/linkTrafficDirection'
   }
 }
 

src/views/charts2/Chart.vue

@@ -128,6 +128,12 @@
         :chart="chart"
         @toggleLoading="toggleLoading"
     ></link-traffic-line>
+    <link-direction-grid
+        v-else-if="chart.type === typeMapping.linkMonitor.linkDirectionGrid"
+        :time-filter="timeFilter"
+        :chart="chart"
+        @toggleLoading="toggleLoading"
+    ></link-direction-grid>
     <dns-active-malicious-domain
         v-else-if="chart.type === typeMapping.dnsInsight.dnsActiveMaliciousDomain"
         :time-filter="timeFilter"
@@ -186,9 +192,11 @@ import DnsTrafficLine from '@/views/charts2/charts/dnsInsight/DnsTrafficLine'
 import { get } from '@/utils/http'
 import { getNowTime, getSecond } from '@/utils/date-util'
 import { ref } from 'vue'
+import LinkDirectionGrid from '@/views/charts2/charts/linkMonitor/LinkDirectionGrid'
 export default {
   name: 'Chart',
   components: {
+    LinkDirectionGrid,
     NpmEventsHeader,
     NpmRecentEvents,
     NpmEventsByType,

src/views/charts2/chart-tools.js

@@ -23,10 +23,11 @@ export const typeMapping = {
   linkMonitor: {
     linkBlock: 707,
     linkTrafficSankey: 708,
-    linkTrafficLine: 105
+    linkTrafficLine: 105,
+    linkDirectionGrid: 709
   },
   dnsInsight: {
-    dnsTrafficLine: 106,
+    dnsTrafficLine: 704,
     dnsEventChart: 711,
     dnsRecentEvents: 605,
     dnsActiveMaliciousDomain: 604

src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue

@@ -1,12 +1,78 @@
 <template>
-  <div class="link-direction-grid"></div>
+  <div class="link-direction-grid">
+    <div class="link-statistical-dimension">
+      <div class="dimension-title">{{$t('linkMonitor.egressLink')}}&nbsp;&&nbsp;{{$t('linkMonitor.ingressLink')}}</div>
+      <div class="data-grid">
+        <div class="egress-row">
+          <div class="egress-id" v-for="(item, index) in gridData" :key="index">{{item.linkId}}</div>
+        </div>
+        <div class="data-row" v-for="(row, index) in gridData" :key="index">
+          <div class="ingress-id">{{row.linkId}}</div>
+          <div class="data-item" v-for="(item, index2) in row.egress" :key="index2">
+            <div class="data-item__point"></div>
+            <div class="data-item__point"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 import chartMixin from '@/views/charts2/chart-mixin'
+import { getSecond } from '@/utils/date-util'
+import { api } from '@/utils/api'
+import { get } from '@/utils/http'
 
 export default {
   name: 'LinkDirectionGrid',
-  mixins: [chartMixin]
+  mixins: [chartMixin],
+  data () {
+    return {
+      gridData: [],
+      gridData2: []
+    }
+  },
+  methods: {
+    init () {
+      const params = {
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime)
+      }
+      const configRequest = get(api.config, { ckey: 'link_info' })
+      const dataRequest = get(api.linkMonitor.linkTrafficDirection, params)
+      Promise.all([configRequest, dataRequest]).then(res => {
+        if (res[0].code === 200 && res[1].code === 200) {
+          if (res[0].page.list && res[0].page.list.length > 0) {
+            // 链路基本信息
+            const linkInfo = JSON.parse(res[0].page.list[0].cvalue)
+            // 链路流量数据
+            const linkData = res[1].data.result
+            const gridData = []
+            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 = gridData.find(g => g.linkId === ingressLink.linkId)
+                if (data) {
+                  const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId)
+                  if (!existedEgressLink) {
+                    data.egress.push({ linkId: egressLink.linkId, totalBitsRate: d.totalBitsRate })
+                  }
+                } else {
+                  gridData.push({ linkId: ingressLink.linkId, egress: [{ linkId: egressLink.linkId, totalBitsRate: d.totalBitsRate }] })
+                }
+              }
+            })
+            this.gridData = gridData
+          }
+        }
+      })
+    }
+  },
+  mounted () {
+    this.toggleLoading(false)
+    this.init()
+  }
 }
 </script>