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

fix: 修复网格红点显示异常的问题

Browse Source
This commit is contained in:
刘洪洪
2022-09-29 16:36:30 +08:00
parent 14f563cf56
commit 7606f1afca
3 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/css/components/views/charts2/linkDirectionGrid.scss
View File

@@ -113,7 +113,7 @@ $blue: #046ECA;
.block-content-item-value {
display: flex;
width: 130px;
width: 145px;
font-weight: 600;
}
}

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

@@ -62,6 +62,7 @@ export default {
const linkData = res[0].data.result
// 链路下一跳信息
const nextLinkData = res[1].data.result
console.log('接口的下一跳数据', nextLinkData)
// 链路流量数据
const gridData = []
@@ -79,7 +80,7 @@ export default {
const ingressUsage = this.computeUsage(d.ingressBytes, egressLink.bandwidth)
// 宽带使用超过90%，赋红点
d.usageMore90 = false
if (egressUsage >= 90 || ingressUsage >= 90) {
if (egressUsage >= 0.9 || ingressUsage >= 0.9) {
d.usageMore90 = true
}
// 计算npm分数
@@ -142,7 +143,7 @@ export default {
const ingressUsage = this.computeUsage(d.ingressBytes, ingressBanwidth)
// 宽带使用超过90%，赋红点
d.usageMore90 = false
if (egressUsage >= 90 || ingressUsage >= 90) {
if (egressUsage >= 0.9 || ingressUsage >= 0.9) {
d.usageMore90 = true
}
// 计算npm分数
@@ -190,7 +191,11 @@ export default {
* 计算上下行使用占比
*/
computeUsage (e, bandwidth) {
return (e / bandwidth)
let usage = e / bandwidth
if (usage >= 1) {
usage = 1
}
return usage
},
/**
* 本地计算npm分数

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

@@ -18,11 +18,11 @@
</div>
<div v-for="(item, index2) in row.egress" :key="index2">
<el-popover :width="400" placement="right" trigger="hover">
<el-popover :width="415" placement="right" trigger="hover">
<template #reference>
<div class="data-item data-item__hover">
<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 :class="row.egress[index2].scoreLow3 ? 'data-item__point-red':'data-item__point'"></div>
</div>
</template>
@@ -44,7 +44,7 @@
<div style="display: flex">
<div class="row-dot">
<div :class="row.egress[index2].scoreLow3 ? 'red-dot':'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">
@@ -85,7 +85,7 @@
<div style="display: flex">
<div class="row-dot">
<div :class="row.egress[index2].usageMore90 ? 'red-dot':'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">