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

feat: Link monitor网格模块，动态适配弹窗宽度

Browse Source
This commit is contained in:
刘洪洪
2022-10-14 14:50:46 +08:00
parent fb5094758e
commit 51ffd3d7ef
3 changed files with 38 additions and 11 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: 145px;
min-width: 75px;
font-weight: 600;
}
}

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

@@ -118,6 +118,8 @@ export default {
linkId: egressLink.linkId,
egressUsage: egressUsage,
ingressUsage: ingressUsage,
popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
totalBitsRate: d.totalBitsRate,
...d
})
@@ -129,6 +131,8 @@ export default {
linkId: egressLink.linkId,
egressUsage: egressUsage,
ingressUsage: ingressUsage,
popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
totalBitsRate: d.totalBitsRate,
...d
}]
@@ -182,6 +186,8 @@ export default {
nextHop: egressLink.nextHop,
egressUsage: egressUsage,
ingressUsage: ingressUsage,
popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
totalBitsRate: d.totalBitsRate,
...d
})
@@ -195,6 +201,8 @@ export default {
nextHop: ingressLink.nextHop,
egressUsage: egressUsage,
ingressUsage: ingressUsage,
popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
totalBitsRate: d.totalBitsRate,
...d
}]
@@ -204,7 +212,6 @@ export default {
})
this.gridData2 = gridData2
console.log('打印下一跳数据', gridData2)
} else {
this.isNoData = true
}
@@ -240,6 +247,26 @@ export default {
npmScore = 6
}
return npmScore
},
/**
* 计算popover弹窗和右侧数据模块的宽度
* 弹窗最小宽度为360px，右侧数据最小宽度为75px，右侧数据每大一位，popover弹窗宽度增加7px
*/
computeWidth (egress, ingress, flag) {
let width = 0
let length = 0
const egressUsage = JSON.stringify(parseFloat((egress * 100).toFixed(2)))
const ingressUsage = JSON.stringify(parseFloat((ingress * 100).toFixed(2)))
length = egressUsage.length + ingressUsage.length - 1
if (flag === 'popover') {
width = 360 + length * 7
} else {
width = 75 + length * 7
}
return width
}
}
}

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

@@ -21,7 +21,7 @@
</div>
<div v-for="(item, index2) in row.egress" :key="index2">
<el-popover :width="415" placement="right" trigger="hover">
<el-popover :width="item.popoverWidth" placement="right" trigger="click">
<template #reference>
<div class="data-item data-item__hover">
<div :class="row.egress[index2].usageMore90 ? 'data-item__point-red':'data-item__point'"></div>
@@ -53,7 +53,7 @@
<div class="block-content-item">
<div class="block-content-item-name">{{ $t('linkMonitor.bandwidthUsage') }}</div>
<div class="block-content-item-value">
<div class="block-content-item-value" :style="{width: row.egress[index2].valueWidth + 'px'}">
<div style="margin-left: -10px">
<svg class="icon item-popover-up" aria-hidden="true">
<use xlink:href="#cn-icon-egress"></use>
@@ -72,7 +72,7 @@
<div class="block-content-item">
<div class="block-content-item-name">{{ $t('linkMonitor.linkBlock.total') }}</div>
<div class="block-content-item-value">
<div class="block-content-item-value" :style="{width: row.egress[index2].valueWidth + 'px'}">
{{unitConvert(row.egress[index2].totalBitsRate, unitTypes.bps).join('')}}
</div>
</div>
@@ -90,42 +90,42 @@
<div class="item-popover-block-content">
<div class="block-content-item">
<div class="block-content-item-name">{{ $t('linkMonitor.npmScore1') }}</div>
<div class="block-content-item-value">
<div class="block-content-item-value" :style="{width: row.egress[index2].valueWidth + 'px'}">
{{ row.egress[index2].score }}
</div>
</div>
<div class="block-content-item">
<div class="block-content-item-name">{{ $t(npmNetworkName[0].name) }}</div>
<div class="block-content-item-value">
<div class="block-content-item-value" :style="{width: row.egress[index2].valueWidth + 'px'}">
{{ unitConvert(row.egress[index2].establishLatencyMs, unitTypes.time).join('') }}
</div>
</div>
<div class="block-content-item">
<div class="block-content-item-name">{{ $t(npmNetworkName[1].name) }}</div>
<div class="block-content-item-value">
<div class="block-content-item-value" :style="{'width': row.egress[index2].valueWidth + 'px'}">
{{ unitConvert(row.egress[index2].httpResponseLatency, unitTypes.time).join('') }}
</div>
</div>
<div class="block-content-item">
<div class="block-content-item-name">{{ $t(npmNetworkName[2].name) }}</div>
<div class="block-content-item-value">
<div class="block-content-item-value" :style="{width: row.egress[index2].valueWidth + 'px'}">
{{ unitConvert(row.egress[index2].sslConLatency, unitTypes.time).join('') }}
</div>
</div>
<div class="block-content-item">
<div class="block-content-item-name">{{ $t(npmNetworkName[3].name) }}</div>
<div class="block-content-item-value">
<div class="block-content-item-value" :style="{width: row.egress[index2].valueWidth + 'px'}">
{{ unitConvert(row.egress[index2].tcpLostlenPercent, unitTypes.percent).join('') }}
</div>
</div>
<div class="block-content-item">
<div class="block-content-item-name">{{ $t(npmNetworkName[4].name) }}</div>
<div class="block-content-item-value">
<div class="block-content-item-value" :style="{width: row.egress[index2].valueWidth + 'px'}">
{{ unitConvert(row.egress[index2].pktRetransPercent, unitTypes.percent).join('') }}
</div>
</div>