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

CN-722 fix:1. 部分样式调整2.部分图表环比调整

Browse Source
This commit is contained in:
@changcode
2022-09-17 14:27:13 +08:00
parent dfff3422f1
commit a16c7b452c
6 changed files with 92 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/assets/css/components/views/charts2/npmAppEventTable.scss
View File

@@ -55,7 +55,7 @@
} }
.el-table__body-wrapper.is-scrolling-none { .el-table__body-wrapper.is-scrolling-none {
tr td { tr td {
padding: 8px 0 0 0; padding: 6.1px 0;
} }
} }
} }
@@ -93,26 +93,21 @@
font-weight: 400; font-weight: 400;
} }
.data-eventType { .data-eventType {
font-family: NotoSansHans-Medium;
font-size: 12px; font-size: 12px;
color: $blue; color: $blue;
font-weight: 500; font-weight: 500;
background: #EBF1F4; background: #EBF1F4;
border-radius: 4px; border-radius: 4px;
padding: 0 6px;
margin-right:10px;
min-width: fit-content; min-width: fit-content;
margin-bottom: 8px;
} }
.data-eventCount { .data-eventCount {
font-family: NotoSansHans-Medium;
font-size: 12px; font-size: 12px;
color: #046ECA; color: #046ECA;
font-weight: 500; font-weight: 500;
width:200px; width:200px;
} }
} }
.el-table--group::after,.el-table--border::after, .el-table::before { .el-table--group::after,.el-table--border::after,.el-table::before {
height: 0px; height: 0px;
} }
} }

9
src/assets/css/components/views/charts2/npmRecentEvents.scss
View File

@@ -7,6 +7,13 @@
font-weight: 600; font-weight: 600;
margin-bottom: 10px; margin-bottom: 10px;
} }
.npm-recent-table-ten.npm-recent-table {
.el-table__body-wrapper.is-scrolling-none {
tr td {
padding: 6.3px 0;
}
}
}
.npm-recent-table { .npm-recent-table {
height: calc(100% - 30px) !important; height: calc(100% - 30px) !important;
border: 1px solid #E2E5EC; border: 1px solid #E2E5EC;
@@ -24,7 +31,7 @@
} }
.el-table__body-wrapper.is-scrolling-none { .el-table__body-wrapper.is-scrolling-none {
tr td { tr td {
padding: 7.5px 0; padding: 6.75px 0;
} }
.el-table__empty-block .el-table__empty-text { .el-table__empty-block .el-table__empty-text {
line-height: 25px; line-height: 25px;

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

@@ -38,10 +38,18 @@
<div class="data-total-value">{{unitConvert(scope.row.totalPacketsRate, unitTypes.bps).join('')}}</div> <div class="data-total-value">{{unitConvert(scope.row.totalPacketsRate, unitTypes.bps).join('')}}</div>
<div class="data-trend"> <div class="data-trend">
<div v-if="scope.row.bytesRateChainRatio > 0" class="data-total-trend data-total-trend-red"> <div v-if="scope.row.bytesRateChainRatio > 0" class="data-total-trend data-total-trend-red">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(scope.row.bytesRateChainRatio, unitTypes.percent).join('')}} <i class="cn-icon-rise1 cn-icon"></i>&nbsp;
<span v-if="scope.row.bytesRateChainRatio <= 5">
{{unitConvert(scope.row.bytesRateChainRatio, unitTypes.percent).join('')}}
</span>
<span v-else>>500.00%</span>
</div> </div>
<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;
<span v-if="scope.row.bytesRateChainRatio <= 5">
{{unitConvert(scope.row.bytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}}
</span>
<span v-else>>500.00%</span>
</div> </div>
<div v-else-if="scope.row.bytesRateChainRatio === 0" 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>
@@ -53,10 +61,18 @@
<div class="data-total-value">{{unitConvert(scope.row.outboundPacketsRate, unitTypes.bps).join('')}}</div> <div class="data-total-value">{{unitConvert(scope.row.outboundPacketsRate, unitTypes.bps).join('')}}</div>
<div class="data-trend"> <div class="data-trend">
<div v-if="scope.row.outboundBytesRateChainRatio > 0" class="data-total-trend data-total-trend-red"> <div v-if="scope.row.outboundBytesRateChainRatio > 0" class="data-total-trend data-total-trend-red">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(scope.row.outboundBytesRateChainRatio, unitTypes.percent).join('')}} <i class="cn-icon-rise1 cn-icon"></i>&nbsp;
<span v-if="scope.row.outboundBytesRateChainRatio <= 5">
{{unitConvert(scope.row.outboundBytesRateChainRatio, unitTypes.percent).join('')}}
</span>
<span v-else>>500.00%</span>
</div> </div>
<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;
<span v-if="scope.row.outboundBytesRateChainRatio <= 5">
{{unitConvert(scope.row.outboundBytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}}
</span>
<span v-else>>500.00%</span>
</div> </div>
<div v-else-if="scope.row.outboundBytesRateChainRatio === 0" 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>
@@ -68,10 +84,18 @@
<div class="data-total-value">{{unitConvert(scope.row.inboundPacketsRate, unitTypes.bps).join('')}}</div> <div class="data-total-value">{{unitConvert(scope.row.inboundPacketsRate, unitTypes.bps).join('')}}</div>
<div class="data-trend"> <div class="data-trend">
<div v-if="scope.row.inboundBytesRateChainRatio > 0" class="data-total-trend data-total-trend-red"> <div v-if="scope.row.inboundBytesRateChainRatio > 0" class="data-total-trend data-total-trend-red">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(scope.row.inboundBytesRateChainRatio, unitTypes.percent).join('')}} <i class="cn-icon-rise1 cn-icon"></i>&nbsp;
<span v-if="scope.row.inboundBytesRateChainRatio <= 5">
{{unitConvert(scope.row.inboundBytesRateChainRatio, unitTypes.percent).join('')}}
</span>
<span v-else>>500.00%</span>
</div> </div>
<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;
<span v-if="scope.row.inboundBytesRateChainRatio <= 5">
{{unitConvert(scope.row.inboundBytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}}
</span>
<span v-else>>500.00%</span>
</div> </div>
<div v-else-if="scope.row.inboundBytesRateChainRatio === 0" 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>

2
src/views/charts2/charts/npm/NpmLine.vue
View File

@@ -4,7 +4,7 @@
<template v-if="chartData.id === 11"> <template v-if="chartData.id === 11">
<div class="npm-line-header"> <div class="npm-line-header">
<div class="npm-line-header-title">{{$t(chartData.i18n) || chartData.name}}</div> <div class="npm-line-header-title">{{$t(chartData.i18n) || chartData.name}}</div>
<div class="npm-line-header-rights" v-if="chartData.params && chartData.params.showLegend && !throughputName"> <div class="npm-line-header-rights" v-if="chartData.params && chartData.params.showLegend && !isNoData">
<div class="npm-line-header-right" :class="{'active': item.show}" v-for="(item, index) in chartOptionLineData" :key="index" @click="highlightEvent(item)"> <div class="npm-line-header-right" :class="{'active': item.show}" v-for="(item, index) in chartOptionLineData" :key="index" @click="highlightEvent(item)">
<div class="npm-line-header-icon" :class="'icon' + index"></div> <div class="npm-line-header-icon" :class="'icon' + index"></div>
<div class="npm-line-header-value">{{$t(item.legend)}}</div> <div class="npm-line-header-value">{{$t(item.legend)}}</div>

1
src/views/charts2/charts/npm/NpmRecentEvents.vue
View File

@@ -6,6 +6,7 @@
:ref="`dataTable_${index}`" :ref="`dataTable_${index}`"
:data="tableData" :data="tableData"
class="npm-recent-table" class="npm-recent-table"
:class="{'npm-recent-table-ten': tableData.length === 10}"
empty-text="" empty-text=""
height="100%" height="100%"
> >

60
src/views/charts2/charts/npm/localComponents/SingleValue.vue
View File

@@ -5,10 +5,18 @@
<div class="single-value__content"> <div class="single-value__content">
<div class="single-value__content-number">{{unitConvert(npm.establishLatencyMsAvg, unitTypes.time).join(' ')}}</div> <div class="single-value__content-number">{{unitConvert(npm.establishLatencyMsAvg, unitTypes.time).join(' ')}}</div>
<div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red"> <div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}} <i class="cn-icon-rise1 cn-icon"></i>&nbsp;
<span v-if="npm.value <= 5">
{{unitConvert(npm.value, unitTypes.percent).join('')}}
</span>
<span v-else>>500.00%</span>
</div> </div>
<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-decline cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}} <i class="cn-icon-decline cn-icon"></i>&nbsp;
<span v-if="npm.value <= 5">
{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}}
</span>
<span v-else>>500.00%</span>
</div> </div>
<div v-else-if="npm.value === 0" 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>
@@ -25,10 +33,18 @@
<div class="single-value__content"> <div class="single-value__content">
<div class="single-value__content-number">{{unitConvert(npm.httpResponseLatencyAvg, unitTypes.time).join(' ')}}</div> <div class="single-value__content-number">{{unitConvert(npm.httpResponseLatencyAvg, unitTypes.time).join(' ')}}</div>
<div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red"> <div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}} <i class="cn-icon-rise1 cn-icon"></i>&nbsp;
<span v-if="npm.value <= 5">
{{unitConvert(npm.value, unitTypes.percent).join('')}}
</span>
<span v-else>>500.00%</span>
</div> </div>
<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-decline cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}} <i class="cn-icon-decline cn-icon"></i>&nbsp;
<span v-if="npm.value <= 5">
{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}}
</span>
<span v-else>>500.00%</span>
</div> </div>
<div v-else-if="npm.value === 0" 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>
@@ -45,10 +61,18 @@
<div class="single-value__content"> <div class="single-value__content">
<div class="single-value__content-number">{{unitConvert(npm.sslConLatencyAvg, unitTypes.time).join(' ')}}</div> <div class="single-value__content-number">{{unitConvert(npm.sslConLatencyAvg, unitTypes.time).join(' ')}}</div>
<div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red"> <div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}} <i class="cn-icon-rise1 cn-icon"></i>&nbsp;
<span v-if="npm.value <= 5">
{{unitConvert(npm.value, unitTypes.percent).join('')}}
</span>
<span v-else>>500.00%</span>
</div> </div>
<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-decline cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}} <i class="cn-icon-decline cn-icon"></i>&nbsp;
<span v-if="npm.value <= 5">
{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}}
</span>
<span v-else>>500.00%</span>
</div> </div>
<div v-else-if="npm.value === 0" 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>
@@ -65,10 +89,18 @@
<div class="single-value__content"> <div class="single-value__content">
<div class="single-value__content-number">{{unitConvert(npm.tcpLostlenPercentAvg, unitTypes.percent).join(' ')}}</div> <div class="single-value__content-number">{{unitConvert(npm.tcpLostlenPercentAvg, unitTypes.percent).join(' ')}}</div>
<div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red"> <div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}} <i class="cn-icon-rise1 cn-icon"></i>&nbsp;
<span v-if="npm.value <= 5">
{{unitConvert(npm.value, unitTypes.percent).join('')}}
</span>
<span v-else>>500.00%</span>
</div> </div>
<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-decline cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}} <i class="cn-icon-decline cn-icon"></i>&nbsp;
<span v-if="npm.value <= 5">
{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}}
</span>
<span v-else>>500.00%</span>
</div> </div>
<div v-else-if="npm.value === 0" 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>
@@ -85,10 +117,18 @@
<div class="single-value__content"> <div class="single-value__content">
<div class="single-value__content-number">{{unitConvert(npm.pktRetransPercentAvg, unitTypes.percent).join(' ')}}</div> <div class="single-value__content-number">{{unitConvert(npm.pktRetransPercentAvg, unitTypes.percent).join(' ')}}</div>
<div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red"> <div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}} <i class="cn-icon-rise1 cn-icon"></i>&nbsp;
<span v-if="npm.value <= 5">
{{unitConvert(npm.value, unitTypes.percent).join('')}}
</span>
<span v-else>>500.00%</span>
</div> </div>
<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-decline cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}} <i class="cn-icon-decline cn-icon"></i>&nbsp;
<span v-if="npm.value <= 5">
{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}}
</span>
<span v-else>>500.00%</span>
</div> </div>
<div v-else-if="npm.value === 0" 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>