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

fix: 1.环比展示逻辑调整2.Dahsboard - npm - 网络质量概览图表问题修复

Browse Source
This commit is contained in:
@changcode
2022-08-16 09:48:16 +08:00
parent b0f5b09ccc
commit f33dbae49d
5 changed files with 28 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/css/components/views/charts2/networkOverviewApps.scss
View File

@@ -159,13 +159,16 @@
justify-content: center; justify-content: center;
position: relative; position: relative;
top: 50%; top: 50%;
color: #fff; color: #717171;
margin-top: -10px; margin-top: -10px;
background-color: rgba(113, 113, 113, 0.12);
} }
.app-card__body-content-percent.red { .app-card__body-content-percent.red {
color: #fff;
background-color: rgb(226, 97, 84); background-color: rgb(226, 97, 84);
} }
.app-card__body-content-percent.green { .app-card__body-content-percent.green {
color: #fff;
background-color: rgb(126, 159, 84); background-color: rgb(126, 159, 84);
} }
} }

16
src/views/charts2/charts/SingleValue.vue
View File

@@ -10,9 +10,10 @@
<div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green"> <div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}} <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}}
</div> </div>
<div v-else class="single-value__content-trend single-value__content-trend-black"> <div v-else-if="npm.value === 0" class="single-value__content-trend single-value__content-trend-black">
<i class="cn-icon-constant cn-icon"></i> <i class="cn-icon-constant cn-icon"></i>
</div> </div>
<div v-else></div>
</div> </div>
<div class="single-value__circle"> <div class="single-value__circle">
<div class="single-value__circle-p95">P95: {{unitConvert(npm.establishLatencyP95, unitTypes.time).join(' ')}}</div> <div class="single-value__circle-p95">P95: {{unitConvert(npm.establishLatencyP95, unitTypes.time).join(' ')}}</div>
@@ -29,9 +30,10 @@
<div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green"> <div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}} <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}}
</div> </div>
<div v-else class="single-value__content-trend single-value__content-trend-black"> <div v-else-if="npm.value === 0" class="single-value__content-trend single-value__content-trend-black">
<i class="cn-icon-constant cn-icon"></i> <i class="cn-icon-constant cn-icon"></i>
</div> </div>
<div v-else></div>
</div> </div>
<div class="single-value__circle"> <div class="single-value__circle">
<div class="single-value__circle-p95">P95: {{unitConvert(npm.httpResponseLatencyP95, unitTypes.time).join(' ')}}</div> <div class="single-value__circle-p95">P95: {{unitConvert(npm.httpResponseLatencyP95, unitTypes.time).join(' ')}}</div>
@@ -48,9 +50,10 @@
<div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green"> <div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}} <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}}
</div> </div>
<div v-else class="single-value__content-trend single-value__content-trend-black"> <div v-else-if="npm.value === 0" class="single-value__content-trend single-value__content-trend-black">
<i class="cn-icon-constant cn-icon"></i> <i class="cn-icon-constant cn-icon"></i>
</div> </div>
<div v-else></div>
</div> </div>
<div class="single-value__circle"> <div class="single-value__circle">
<div class="single-value__circle-p95">P95: {{unitConvert(npm.sslConLatencyP95, unitTypes.time).join(' ')}}</div> <div class="single-value__circle-p95">P95: {{unitConvert(npm.sslConLatencyP95, unitTypes.time).join(' ')}}</div>
@@ -67,9 +70,10 @@
<div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green"> <div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}} <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}}
</div> </div>
<div v-else class="single-value__content-trend single-value__content-trend-black"> <div v-else-if="npm.value === 0" class="single-value__content-trend single-value__content-trend-black">
<i class="cn-icon-constant cn-icon"></i> <i class="cn-icon-constant cn-icon"></i>
</div> </div>
<div v-else></div>
</div> </div>
<div class="single-value__circle"> <div class="single-value__circle">
<div class="single-value__circle-p95">P95: {{unitConvert(npm.sequenceGapLossP95, unitTypes.percent).join(' ')}}</div> <div class="single-value__circle-p95">P95: {{unitConvert(npm.sequenceGapLossP95, unitTypes.percent).join(' ')}}</div>
@@ -86,9 +90,10 @@
<div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green"> <div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}} <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}}
</div> </div>
<div v-else class="single-value__content-trend single-value__content-trend-black"> <div v-else-if="npm.value === 0" class="single-value__content-trend single-value__content-trend-black">
<i class="cn-icon-constant cn-icon"></i> <i class="cn-icon-constant cn-icon"></i>
</div> </div>
<div v-else></div>
</div> </div>
<div class="single-value__circle"> <div class="single-value__circle">
<div class="single-value__circle-p95">P95: {{unitConvert(npm.pktRetransP95, unitTypes.percent).join(' ')}}</div> <div class="single-value__circle-p95">P95: {{unitConvert(npm.pktRetransP95, unitTypes.percent).join(' ')}}</div>
@@ -138,7 +143,6 @@ export default {
Object.keys(t).forEach(r => { Object.keys(t).forEach(r => {
Object.keys(e).forEach(d => { Object.keys(e).forEach(d => {
if (r === d) { if (r === d) {
t.trend = getChainRatio(t[r], e[d])
t.value = getChainRatio(t[r], e[d]) t.value = getChainRatio(t[r], e[d])
} }
}) })

2
src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
View File

@@ -38,7 +38,7 @@
<div class="app-card__body-content-percent green" v-else-if="app.value < 0"> <div class="app-card__body-content-percent green" v-else-if="app.value < 0">
-{{unitConvert(app.value, unitTypes.percent).join('').replaceAll('-', '')}} -{{unitConvert(app.value, unitTypes.percent).join('').replaceAll('-', '')}}
</div> </div>
<div v-else></div> <div v-else-if="app.value === '-' || app.value === 0" class="app-card__body-content-percent">0</div>
</div> </div>
</div> </div>
<div class="app-card__body-previous"> <div class="app-card__body-previous">

49
src/views/charts2/charts/npm/NpmAppCategoryScore.vue
View File

@@ -1,47 +1,15 @@
<template> <template>
<div class="npm-app"> <div class="npm-app">
<div class="npm-app-left"> <div class="npm-app-left">
<div class="npm-app-letter"> <div class="npm-app-letter">
<div v-for="(letter, index) in colorPatchData" :key="index"> <div v-for="(letter, index) in colorPatchData" :key="index">
{{letter.letter}} {{letter.letter}}
</div> </div>
</div> </div>
<div class="npm-app-body"> <div class="npm-app-body">
<div class="npm-app-body-patch"> <div class="npm-app-body-patch" v-for="(data, index) in tableData" :key="index">
<div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-video"></i></span></div> <div class="npm-app-body-icon"><span><i :class="data.icon"></i></span></div>
<template v-if="tableData.length > 0"> <div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': data.score >= index + 1}"></div>
<div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[0].score >= index + 1}"></div>
</template>
</div>
<div class="npm-app-body-patch">
<div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-social-network"></i></span></div>
<template v-if="tableData.length > 0">
<div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[4].score >= index + 1}"></div>
</template>
</div>
<div class="npm-app-body-patch">
<div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-file-sharing"></i></span></div>
<template v-if="tableData.length > 0">
<div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[1].score >= index + 1}"></div>
</template>
</div>
<div class="npm-app-body-patch">
<div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-gaming"></i></span></div>
<template v-if="tableData.length > 0">
<div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[3].score >= index + 1}"></div>
</template>
</div>
<div class="npm-app-body-patch">
<div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-email"></i></span></div>
<template v-if="tableData.length > 0">
<div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[5].score >= index + 1}"></div>
</template>
</div>
<div class="npm-app-body-patch">
<div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-voip"></i></span></div>
<template v-if="tableData.length > 0">
<div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[2].score >= index + 1}"></div>
</template>
</div> </div>
</div> </div>
</div> </div>
@@ -72,9 +40,10 @@
<div v-else-if="scope.row.bytesRateChainRatio < 0" class="data-total-trend data-total-trend-green"> <div v-else-if="scope.row.bytesRateChainRatio < 0" class="data-total-trend data-total-trend-green">
<i class="cn-icon-decline cn-icon"></i>&nbsp;{{unitConvert(scope.row.bytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}} <i class="cn-icon-decline cn-icon"></i>&nbsp;{{unitConvert(scope.row.bytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}}
</div> </div>
<div v-else class="data-total-trend data-total-trend-black"> <div v-else-if="scope.row.bytesRateChainRatio === 0" class="data-total-trend data-total-trend-black">
<i class="cn-icon-constant cn-icon"></i> <i class="cn-icon-constant cn-icon"></i>
</div> </div>
<div v-else></div>
</template> </template>
<template v-else-if="item.prop === 'outbound'"> <template v-else-if="item.prop === 'outbound'">
{{unitConvert(scope.row.outboundPacketsRate, unitTypes.bps).join('')}} {{unitConvert(scope.row.outboundPacketsRate, unitTypes.bps).join('')}}
@@ -84,9 +53,10 @@
<div v-else-if="scope.row.outboundBytesRateChainRatio < 0" class="data-total-trend data-total-trend-green"> <div v-else-if="scope.row.outboundBytesRateChainRatio < 0" class="data-total-trend data-total-trend-green">
<i class="cn-icon-decline cn-icon"></i>&nbsp;{{unitConvert(scope.row.outboundBytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}} <i class="cn-icon-decline cn-icon"></i>&nbsp;{{unitConvert(scope.row.outboundBytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}}
</div> </div>
<div v-else class="data-total-trend data-total-trend-black"> <div v-else-if="scope.row.outboundBytesRateChainRatio === 0" class="data-total-trend data-total-trend-black">
<i class="cn-icon-constant cn-icon"></i> <i class="cn-icon-constant cn-icon"></i>
</div> </div>
<div v-else></div>
</template> </template>
<template v-else-if="item.prop === 'inbound'"> <template v-else-if="item.prop === 'inbound'">
{{unitConvert(scope.row.inboundPacketsRate, unitTypes.bps).join('')}} {{unitConvert(scope.row.inboundPacketsRate, unitTypes.bps).join('')}}
@@ -96,9 +66,10 @@
<div v-else-if="scope.row.inboundBytesRateChainRatio < 0" class="data-total-trend data-total-trend-green"> <div v-else-if="scope.row.inboundBytesRateChainRatio < 0" class="data-total-trend data-total-trend-green">
<i class="cn-icon-decline cn-icon"></i>&nbsp;{{unitConvert(scope.row.inboundBytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}} <i class="cn-icon-decline cn-icon"></i>&nbsp;{{unitConvert(scope.row.inboundBytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}}
</div> </div>
<div v-else class="data-total-trend data-total-trend-black"> <div v-else-if="scope.row.inboundBytesRateChainRatio === 0" class="data-total-trend data-total-trend-black">
<i class="cn-icon-constant cn-icon"></i> <i class="cn-icon-constant cn-icon"></i>
</div> </div>
<div v-else></div>
</template> </template>
<template v-else-if="item.prop === 'score'"> <template v-else-if="item.prop === 'score'">
<div v-if="scope.row.score <= 2" :class="{'data-score-red': scope.row.score <= 2}" class="data-score"> <div v-if="scope.row.score <= 2" :class="{'data-score-red': scope.row.score <= 2}" class="data-score">

5
src/views/charts2/charts/npm/NpmEventsByType.vue
View File

@@ -7,7 +7,7 @@
<div class="chart-drawing" id="chart"></div> <div class="chart-drawing" id="chart"></div>
<div class="npm-event-pie-legends"> <div class="npm-event-pie-legends">
<div class="npm-event-pie-legend"> <div class="npm-event-pie-legend">
<div class="npm-event-pie-legend-title">{{ $t('overall.type') }}</div> <div class="npm-event-pie-legend-title" v-if="chartData.length > 0">{{ $t('overall.type') }}</div>
<template v-for="(legend, index) in chartData" :key="index"> <template v-for="(legend, index) in chartData" :key="index">
<div class="npm-event-pie-legend-type"> <div class="npm-event-pie-legend-type">
<div class="npm-event-pie-legend-type-icon" :class="legend.eventSeverity"></div> <div class="npm-event-pie-legend-type-icon" :class="legend.eventSeverity"></div>
@@ -16,7 +16,7 @@
</template> </template>
</div> </div>
<div class="npm-event-pie-legend"> <div class="npm-event-pie-legend">
<div class="npm-event-pie-legend-title">{{ $t('network.total') }}</div> <div class="npm-event-pie-legend-title" v-if="chartData.length > 0">{{ $t('network.total') }}</div>
<template v-for="(legend, index) in chartData" :key="index"> <template v-for="(legend, index) in chartData" :key="index">
<div class="npm-event-pie-legend-total">{{legend.count}}</div> <div class="npm-event-pie-legend-total">{{legend.count}}</div>
</template> </template>
@@ -99,6 +99,7 @@ export default {
if (res.code === 200) { if (res.code === 200) {
if (res.data.result.length <= 0) { if (res.data.result.length <= 0) {
this.isNoData = true this.isNoData = true
return
} }
res.data.result.forEach(t => { res.data.result.forEach(t => {
if (t.eventSeverity === 'critical') { if (t.eventSeverity === 'critical') {