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

fix: 解决链路图切换时间后接口无数据，界面仍保留之前数据的问题

Browse Source 
(cherry picked from commit 82bd184bdd)
This commit is contained in:
刘洪洪
2022-11-29 14:54:37 +08:00
committed by 陈劲松
parent 8b2e1e95db
commit f1423b6b62
1 changed files with 107 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -73,63 +73,62 @@ export default {
} }
return a.egressLinkId - b.egressLinkId return a.egressLinkId - b.egressLinkId
}) })
this.isLinkNoData = linkData.length === 0 this.isLinkNoData = linkData.length === 0
if (this.isLinkNoData) { if (!this.isLinkNoData) {
return // 链路流量数据
} const linkGridData = []
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 = linkGridData.find(g => g.linkId === ingressLink.linkId)
// 链路流量数据 // 上行使用情况计算
const linkGridData = [] const egressUsage = this.computeUsage(d.egressBitsRate, egressLink.bandwidth)
linkData.forEach(d => { // 下行使用情况计算
const ingressLink = linkInfo.find(l => l.originalLinkId === d.ingressLinkId) const ingressUsage = this.computeUsage(d.ingressBitsRate, ingressLink.bandwidth)
const egressLink = linkInfo.find(l => l.originalLinkId === d.egressLinkId) // 宽带使用超过90%，赋红点
if (ingressLink && egressLink) {
const data = linkGridData.find(g => g.linkId === ingressLink.linkId)
// 上行使用情况计算 d.usageMore90 = egressUsage >= 0.9 || ingressUsage >= 0.9
const egressUsage = this.computeUsage(d.egressBitsRate, egressLink.bandwidth) // 计算npm分数
// 下行使用情况计算 // 分数低于3分，赋红点
const ingressUsage = this.computeUsage(d.ingressBitsRate, ingressLink.bandwidth) d.score = this.localComputeScore(d)
// 宽带使用超过90%，赋红点
d.usageMore90 = egressUsage >= 0.9 || ingressUsage >= 0.9 d.scoreLow3 = d.score < 3
// 计算npm分数
// 分数低于3分，赋红点
d.score = this.localComputeScore(d)
d.scoreLow3 = d.score < 3 if (data) {
const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId)
if (data) { if (!existedEgressLink) {
const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId) data.egress.push({
if (!existedEgressLink) { linkId: egressLink.linkId,
data.egress.push({ egressUsage: egressUsage,
linkId: egressLink.linkId, ingressUsage: ingressUsage,
egressUsage: egressUsage, popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
ingressUsage: ingressUsage, valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'), totalBitsRate: d.totalBitsRate,
valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'), ...d
totalBitsRate: d.totalBitsRate, })
...d }
} else {
linkGridData.push({
linkId: ingressLink.linkId,
egress: [{
linkId: egressLink.linkId,
egressUsage: egressUsage,
ingressUsage: ingressUsage,
popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
totalBitsRate: d.totalBitsRate,
...d
}]
}) })
} }
} else {
linkGridData.push({
linkId: ingressLink.linkId,
egress: [{
linkId: egressLink.linkId,
egressUsage: egressUsage,
ingressUsage: ingressUsage,
popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
totalBitsRate: d.totalBitsRate,
...d
}]
})
} }
} })
})
this.linkGridData = linkGridData this.linkGridData = linkGridData
}
} else { } else {
this.isLinkNoData = false this.isLinkNoData = false
this.isLinkShowError = true this.isLinkShowError = true
@@ -150,80 +149,78 @@ export default {
}) })
this.isNextNoData = nextLinkData.length === 0 this.isNextNoData = nextLinkData.length === 0
if (this.isNextNoData) { if (!this.isNextNoData) {
return // 链路下一跳数据
} const nextGridData = []
// 链路下一跳数据 nextLinkData.forEach(d => {
const nextGridData = [] const ingressLink = linkInfo.find(l => l.nextHop === d.ingressLinkDirection && l.direction === 'ingress')
const egressLink = linkInfo.find(l => l.nextHop === d.egressLinkDirection && l.direction === 'egress')
nextLinkData.forEach(d => { if (ingressLink && egressLink) {
const ingressLink = linkInfo.find(l => l.nextHop === d.ingressLinkDirection && l.direction === 'ingress') const data = nextGridData.find(g => g.linkId === ingressLink.linkId)
const egressLink = linkInfo.find(l => l.nextHop === d.egressLinkDirection && l.direction === 'egress')
if (ingressLink && egressLink) { let egressBanwidth = 0
const data = nextGridData.find(g => g.linkId === ingressLink.linkId) let ingressBanwidth = 0
linkInfo.forEach((item) => {
if (item.nextHop === d.egressLinkDirection && item.direction === 'egress') {
egressBanwidth += item.bandwidth
}
if (item.nextHop === d.ingressLinkDirection && item.direction === 'ingress') {
ingressBanwidth += item.bandwidth
}
})
let egressBanwidth = 0 // 上行使用情况计算
let ingressBanwidth = 0 const egressUsage = this.computeUsage(d.egressBitsRate, egressBanwidth)
linkInfo.forEach((item) => { // 下行使用情况计算
if (item.nextHop === d.egressLinkDirection && item.direction === 'egress') { const ingressUsage = this.computeUsage(d.ingressBitsRate, ingressBanwidth)
egressBanwidth += item.bandwidth // 宽带使用超过90%，赋红点
}
if (item.nextHop === d.ingressLinkDirection && item.direction === 'ingress') {
ingressBanwidth += item.bandwidth
}
})
// 上行使用情况计算 d.usageMore90 = egressUsage >= 0.9 || ingressUsage >= 0.9
const egressUsage = this.computeUsage(d.egressBitsRate, egressBanwidth) // 计算npm分数
// 下行使用情况计算 // 分数低于3分，赋红点
const ingressUsage = this.computeUsage(d.ingressBitsRate, ingressBanwidth) d.score = this.localComputeScore(d)
// 宽带使用超过90%，赋红点
d.usageMore90 = egressUsage >= 0.9 || ingressUsage >= 0.9 d.scoreLow3 = d.score < 3
// 计算npm分数
// 分数低于3分，赋红点
d.score = this.localComputeScore(d)
d.scoreLow3 = d.score < 3 if (data) {
const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId)
if (data) { if (!existedEgressLink) {
const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId) data.egress.push({
if (!existedEgressLink) { linkId: egressLink.linkId,
data.egress.push({ nextHop: egressLink.nextHop,
linkId: egressLink.linkId, egressUsage: egressUsage,
nextHop: egressLink.nextHop, ingressUsage: ingressUsage,
egressUsage: egressUsage, popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
ingressUsage: ingressUsage, valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'), totalBitsRate: d.totalBitsRate,
valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'), ...d
totalBitsRate: d.totalBitsRate, })
...d }
} else {
nextGridData.push({
linkId: ingressLink.linkId,
nextHop: ingressLink.nextHop,
egress: [{
linkId: egressLink.linkId,
nextHop: ingressLink.nextHop,
egressUsage: egressUsage,
ingressUsage: ingressUsage,
popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
totalBitsRate: d.totalBitsRate,
...d
}]
}) })
} }
} else {
nextGridData.push({
linkId: ingressLink.linkId,
nextHop: ingressLink.nextHop,
egress: [{
linkId: egressLink.linkId,
nextHop: ingressLink.nextHop,
egressUsage: egressUsage,
ingressUsage: ingressUsage,
popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
totalBitsRate: d.totalBitsRate,
...d
}]
})
} }
} })
})
this.nextGridData = nextGridData this.nextGridData = nextGridData
}
} else { } else {
this.isLinkNoData = false this.isNextNoData = true
this.isNextShowError = true this.isNextShowError = true
// todo 此时返回的是msg，后期记得改为message // todo 此时返回的是msg，后期记得改为message
this.nextErrorMsg = res[1].msg this.nextErrorMsg = res[1].msg