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

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

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

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

@@ -7,6 +7,13 @@
font-weight: 600;
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 {
height: calc(100% - 30px) !important;
border: 1px solid #E2E5EC;
@@ -24,7 +31,7 @@
}
.el-table__body-wrapper.is-scrolling-none {
tr td {
padding: 7.5px 0;
padding: 6.75px 0;
}
.el-table__empty-block .el-table__empty-text {
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-trend">
<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 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 v-else-if="scope.row.bytesRateChainRatio === 0" class="data-total-trend data-total-trend-black">
<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-trend">
<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 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 v-else-if="scope.row.outboundBytesRateChainRatio === 0" class="data-total-trend data-total-trend-black">
<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-trend">
<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 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 v-else-if="scope.row.inboundBytesRateChainRatio === 0" class="data-total-trend data-total-trend-black">
<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">
<div class="npm-line-header">
<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-icon" :class="'icon' + index"></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}`"
:data="tableData"
class="npm-recent-table"
:class="{'npm-recent-table-ten': tableData.length === 10}"
empty-text=""
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-number">{{unitConvert(npm.establishLatencyMsAvg, unitTypes.time).join(' ')}}</div>
<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 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 v-else-if="npm.value === 0" class="single-value__content-trend single-value__content-trend-black">
<i class="cn-icon-constant cn-icon"></i>
@@ -25,10 +33,18 @@
<div class="single-value__content">
<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">
<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 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 v-else-if="npm.value === 0" class="single-value__content-trend single-value__content-trend-black">
<i class="cn-icon-constant cn-icon"></i>
@@ -45,10 +61,18 @@
<div class="single-value__content">
<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">
<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 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 v-else-if="npm.value === 0" class="single-value__content-trend single-value__content-trend-black">
<i class="cn-icon-constant cn-icon"></i>
@@ -65,10 +89,18 @@
<div class="single-value__content">
<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">
<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 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 v-else-if="npm.value === 0" class="single-value__content-trend single-value__content-trend-black">
<i class="cn-icon-constant cn-icon"></i>
@@ -85,10 +117,18 @@
<div class="single-value__content">
<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">
<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 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 v-else-if="npm.value === 0" class="single-value__content-trend single-value__content-trend-black">
<i class="cn-icon-constant cn-icon"></i>