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 14:48:00 +08:00
parent 0b35f85645
commit a110ed9efa
4 changed files with 24 additions and 14 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 { .block-content-item-value {
display: flex; display: flex;
width: 100px; width: 130px;
font-weight: 600; font-weight: 600;
} }
} }

2
src/mock/linkMonitor.js
View File

@@ -135,7 +135,7 @@ if (openMock) {
const egressLinkIds = ['西安', '太原', '西宁'] const egressLinkIds = ['西安', '太原', '西宁']
ingressLinkIds.forEach(ingress => { ingressLinkIds.forEach(ingress => {
egressLinkIds.forEach(egress => { egressLinkIds.forEach(egress => {
data.push({ egressLinkDirection: egress, ingressLinkDirection: ingress, egressBytes: 12800000000, ingressBytes: 52800000000, totalBytes: 985412000, establishLatencyMs: 50, httpResponseLatency: 50, sslConLatency: 50, tcpLostlenPercent: 0.2, pktRetransPercent: 0.1 }) data.push({ egressLinkDirection: egress, ingressLinkDirection: ingress, egressBytes: 12800000000, ingressBytes: 52800000000, totalBytes: 98541200, establishLatencyMs: 50, httpResponseLatency: 50, sslConLatency: 50, tcpLostlenPercent: 0.2, pktRetransPercent: 0.1 })
}) })
}) })
return { return {

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

@@ -190,7 +190,7 @@ export default {
* 计算上下行使用占比 * 计算上下行使用占比
*/ */
computeUsage (e, bandwidth) { computeUsage (e, bandwidth) {
return Math.ceil((e / bandwidth) * 100) return (e / bandwidth)
}, },
/** /**
* 本地计算npm分数 * 本地计算npm分数

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

@@ -18,7 +18,7 @@
</div> </div>
<div v-for="(item, index2) in row.egress" :key="index2"> <div v-for="(item, index2) in row.egress" :key="index2">
<el-popover :width="370" placement="right" trigger="hover"> <el-popover :width="400" placement="right" trigger="hover">
<template #reference> <template #reference>
<div class="data-item data-item__hover"> <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].scoreLow3 ? 'data-item__point-red':'data-item__point'"></div>
@@ -35,8 +35,8 @@
<svg class="icon item-popover-header-icon" aria-hidden="true"> <svg class="icon item-popover-header-icon" aria-hidden="true">
<use xlink:href="#cn-icon-arrow-right2"></use> <use xlink:href="#cn-icon-arrow-right2"></use>
</svg> </svg>
<span v-if="row.nextHop">{{ row.egress[index2].nextHop }}</span> <span v-if="row.nextHop">{{ row.egress[index2].egressLinkDirection }}</span>
<span v-else>{{ row.linkId }}</span> <span v-else>{{ row.egress[index2].linkId }}</span>
</div> </div>
<div class="item-popover-block"> <div class="item-popover-block">
@@ -55,13 +55,15 @@
<svg class="icon item-popover-up" aria-hidden="true"> <svg class="icon item-popover-up" aria-hidden="true">
<use xlink:href="#cn-icon-egress"></use> <use xlink:href="#cn-icon-egress"></use>
</svg> </svg>
{{ row.egress[index2].egressUsage }}% <!-- {{ row.egress[index2].egressUsage }}%-->
{{ unitConvert(row.egress[index2].egressUsage, unitTypes.percent).join('') }}
</div> </div>
<div> <div>
<svg class="icon item-popover-down" aria-hidden="true"> <svg class="icon item-popover-down" aria-hidden="true">
<use xlink:href="#cn-icon-ingress"></use> <use xlink:href="#cn-icon-ingress"></use>
</svg> </svg>
{{ row.egress[index2].ingressUsage }}% <!-- {{ row.egress[index2].ingressUsage }}%-->
{{ unitConvert(row.egress[index2].ingressUsage, unitTypes.percent).join('') }}
</div> </div>
</div> </div>
</div> </div>
@@ -70,7 +72,8 @@
<div class="block-content-item-name">{{ $t('linkMonitor.linkBlock.total') }}</div> <div class="block-content-item-name">{{ $t('linkMonitor.linkBlock.total') }}</div>
<div class="block-content-item-value"> <div class="block-content-item-value">
{{ row.egress[index2].totalBytes / 1000 }}Mbps <!-- {{row.egress[index2].totalBytes}}-->
{{unitConvert(row.egress[index2].totalBytes, unitTypes.bps).join('')}}
</div> </div>
</div> </div>
</div> </div>
@@ -95,35 +98,38 @@
<div class="block-content-item"> <div class="block-content-item">
<div class="block-content-item-name">{{ $t(npmNetworkName[0].name) }}</div> <div class="block-content-item-name">{{ $t(npmNetworkName[0].name) }}</div>
<div class="block-content-item-value"> <div class="block-content-item-value">
{{ row.egress[index2].establishLatencyMs }}ms <!-- {{ row.egress[index2].establishLatencyMs }}ms-->
{{ unitConvert(row.egress[index2].establishLatencyMs, unitTypes.time).join('') }}
</div> </div>
</div> </div>
<div class="block-content-item"> <div class="block-content-item">
<div class="block-content-item-name">{{ $t(npmNetworkName[1].name) }}</div> <div class="block-content-item-name">{{ $t(npmNetworkName[1].name) }}</div>
<div class="block-content-item-value"> <div class="block-content-item-value">
{{ row.egress[index2].httpResponseLatency }}ms <!-- {{ row.egress[index2].httpResponseLatency }}ms-->
{{ unitConvert(row.egress[index2].httpResponseLatency, unitTypes.time).join('') }}
</div> </div>
</div> </div>
<div class="block-content-item"> <div class="block-content-item">
<div class="block-content-item-name">{{ $t(npmNetworkName[2].name) }}</div> <div class="block-content-item-name">{{ $t(npmNetworkName[2].name) }}</div>
<div class="block-content-item-value"> <div class="block-content-item-value">
{{ row.egress[index2].sslConLatency }}ms <!-- {{ row.egress[index2].sslConLatency }}ms-->
{{ unitConvert(row.egress[index2].sslConLatency, unitTypes.time).join('') }}
</div> </div>
</div> </div>
<div class="block-content-item"> <div class="block-content-item">
<div class="block-content-item-name">{{ $t(npmNetworkName[3].name) }}</div> <div class="block-content-item-name">{{ $t(npmNetworkName[3].name) }}</div>
<div class="block-content-item-value"> <div class="block-content-item-value">
{{ row.egress[index2].tcpLostlenPercent * 100 }}% {{ unitConvert(row.egress[index2].tcpLostlenPercent, unitTypes.percent).join('') }}
</div> </div>
</div> </div>
<div class="block-content-item"> <div class="block-content-item">
<div class="block-content-item-name">{{ $t(npmNetworkName[4].name) }}</div> <div class="block-content-item-name">{{ $t(npmNetworkName[4].name) }}</div>
<div class="block-content-item-value"> <div class="block-content-item-value">
{{ row.egress[index2].pktRetransPercent * 100 }}% {{ unitConvert(row.egress[index2].pktRetransPercent, unitTypes.percent).join('') }}
</div> </div>
</div> </div>
</div> </div>
@@ -140,6 +146,8 @@
</template> </template>
<script> <script>
import unitConvert from '@/utils/unit-convert'
import { unitTypes } from '@/utils/constants'
export default { export default {
name: 'PopoverContent', name: 'PopoverContent',
props: { props: {
@@ -147,6 +155,8 @@ export default {
}, },
data () { data () {
return { return {
unitConvert,
unitTypes,
npmNetworkName: [ npmNetworkName: [
{ name: 'networkAppPerformance.tcpConnectionEstablishLatency' }, { name: 'networkAppPerformance.tcpConnectionEstablishLatency' },
{ name: 'networkAppPerformance.httpResponse' }, { name: 'networkAppPerformance.httpResponse' },