gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:上下行使用率超过90%，或者npm分数低于3分，红点标识

Browse Source
This commit is contained in:
刘洪洪
2022-09-28 16:55:53 +08:00
parent cc487d3a1c
commit 02de60e3d2
3 changed files with 35 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue
View File

@@ -77,8 +77,18 @@ export default {
const egressUsage = this.computeUsage(d.egressBytes, egressLink.bandwidth)
// 下行使用情况计算
const ingressUsage = this.computeUsage(d.ingressBytes, egressLink.bandwidth)
// 宽带使用超过90%，赋红点
d.usageMore90 = false
if (egressUsage >= 90 || ingressUsage >= 90) {
d.usageMore90 = true
}
// 计算npm分数
// 分数低于3分，赋红点
d.score = this.localComputeScore(d)
d.scoreLow3 = false
if (d.score < 3) {
d.scoreLow3 = true
}
if (data) {
const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId)
@@ -105,6 +115,8 @@ export default {
}
}
})
console.log('左侧出入链路数据', gridData)
this.gridData = gridData
nextLinkData.forEach(d => {
const ingressLink = linkInfo.find(l => l.nextHop === d.ingressLinkDirection && l.direction === 'ingress')
@@ -128,8 +140,18 @@ export default {
const egressUsage = this.computeUsage(d.egressBytes, egressBanwidth)
// 下行使用情况计算
const ingressUsage = this.computeUsage(d.ingressBytes, ingressBanwidth)
// 宽带使用超过90%，赋红点
d.usageMore90 = false
if (egressUsage >= 90 || ingressUsage >= 90) {
d.usageMore90 = true
}
// 计算npm分数
// 分数低于3分，赋红点
d.score = this.localComputeScore(d)
d.scoreLow3 = false
if (d.score < 3) {
d.scoreLow3 = true
}
if (data) {
const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId)
@@ -159,9 +181,7 @@ export default {
}
}
})
console.log('左侧出入链路数据', gridData)
console.log('右侧下一跳数据', gridData2)
this.gridData = gridData
this.gridData2 = gridData2
}
})
@@ -170,7 +190,7 @@ export default {
* 计算上下行使用占比
*/
computeUsage (e, bandwidth) {
return Math.ceil((e / bandwidth) * 100) + '%'
return Math.ceil((e / bandwidth) * 100)
},
/**
* 本地计算npm分数

14
src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue
View File

@@ -12,6 +12,7 @@
</div>
<div class="data-row" v-for="(row, index2) in gridData" :key="index2">
<div class="ingress-id">
<!--兼容下一跳情况-->
<span v-if="row.nextHop">{{ row.nextHop }}</span>
<span v-else>{{ row.linkId }}</span>
</div>
@@ -20,14 +21,15 @@
<el-popover :width="370" placement="right" trigger="hover">
<template #reference>
<div class="data-item data-item__hover">
<div class="data-item__point"></div>
<div class="data-item__point"></div>
<div :class="row.egress[index2].scoreLow3 ? 'data-item__point-red':'data-item__point'"></div>
<div :class="row.egress[index2].usageMore90 ? 'data-item__point-red':'data-item__point'"></div>
</div>
</template>
<!--鼠标移动的弹窗模块-->
<template #default>
<div class="item-popover-header">
<!--兼容下一跳情况-->
<span v-if="row.nextHop">{{ row.nextHop }}</span>
<span v-else>{{ row.linkId }}</span>
<svg class="icon item-popover-header-icon" aria-hidden="true">
@@ -42,7 +44,7 @@
<div style="display: flex">
<div class="row-dot">
<div class="green-dot"></div>
<div :class="row.egress[index2].scoreLow3 ? 'red-dot':'green-dot'"></div>
</div>
<div class="item-popover-block-content">
<div class="block-content-item">
@@ -53,13 +55,13 @@
<svg class="icon item-popover-up" aria-hidden="true">
<use xlink:href="#cn-icon-egress"></use>
</svg>
{{ row.egress[index2].egressUsage }}
{{ row.egress[index2].egressUsage }}%
</div>
<div>
<svg class="icon item-popover-down" aria-hidden="true">
<use xlink:href="#cn-icon-ingress"></use>
</svg>
{{ row.egress[index2].ingressUsage }}
{{ row.egress[index2].ingressUsage }}%
</div>
</div>
</div>
@@ -80,7 +82,7 @@
<div style="display: flex">
<div class="row-dot">
<div class="green-dot"></div>
<div :class="row.egress[index2].usageMore90 ? 'red-dot':'green-dot'"></div>
</div>
<div class="item-popover-block-content">
<div class="block-content-item">