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:
@changcode
2022-08-09 14:30:53 +08:00
parent 69f08779aa
commit c82ebcacce
4 changed files with 34 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/assets/css/components/views/charts2/npmAppCategoryScore.scss
View File

@@ -130,23 +130,21 @@
margin-top: 2px; margin-top: 2px;
border-radius: 10px; border-radius: 10px;
font-weight:500; font-weight:500;
font-size: 12px;
height: 20px;
padding: 0 5px;
} }
.data-total-trend-black { .data-total-trend-black {
background-color: rgba(113,113,113,0.12); background-color: rgba(113,113,113,0.12);
color: #717171; color: #717171;
width: 36px; width: 36px;
height: 20px;
} }
.data-total-trend-green { .data-total-trend-green {
background-color: rgba(126,159,84,0.12); background-color: rgba(126,159,84,0.12);
width: 52px;
height: 20px;
color:#7E9F54; color:#7E9F54;
} }
.data-total-trend-red { .data-total-trend-red {
background-color: rgba(226,97,84,0.12); background-color: rgba(226,97,84,0.12);
width: 52px;
height: 20px;
color:#E26154; color:#E26154;
.cn-icon-rise1{ .cn-icon-rise1{
color: #E44D3E; color: #E44D3E;

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

@@ -40,23 +40,20 @@
border-radius: 10px; border-radius: 10px;
font-weight:500; font-weight:500;
font-size: 12px; font-size: 12px;
height: 20px;
padding: 0 5px;
} }
.single-value__content-trend-black { .single-value__content-trend-black {
background-color: rgba(113,113,113,0.12); background-color: rgba(113,113,113,0.12);
color: #717171; color: #717171;
width: 36px; width: 36px;
height: 20px;
} }
.single-value__content-trend-green { .single-value__content-trend-green {
background-color: rgba(126,159,84,0.12); background-color: rgba(126,159,84,0.12);
width: 52px;
height: 20px;
color:#7E9F54; color:#7E9F54;
} }
.single-value__content-trend-red { .single-value__content-trend-red {
background-color: rgba(226,97,84,0.12); background-color: rgba(226,97,84,0.12);
width: 52px;
height: 20px;
color:#E26154; color:#E26154;
.cn-icon-rise1 { .cn-icon-rise1 {
color: #E44D3E; color: #E44D3E;

32
src/views/charts2/charts/NpmAppCategoryScore.vue
View File

@@ -54,11 +54,11 @@
</template> </template>
<template v-else-if="item.prop === 'total'"> <template v-else-if="item.prop === 'total'">
{{unitConvert(scope.row[item.prop], unitTypes.bps).join('')}} {{unitConvert(scope.row[item.prop], unitTypes.bps).join('')}}
<div v-if="periodicJudgmentCalculationChange(scope.row.totalTrendValue, scope.row.pTotalTrendValue).value === 'up'" class="data-total-trend data-total-trend-red"> <div v-if="chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).value === 'up' && chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total !== 0" class="data-total-trend data-total-trend-red">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{periodicJudgmentCalculationChange(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total}}% <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total, unitTypes.percent).join('')}}
</div> </div>
<div v-else-if="periodicJudgmentCalculationChange(scope.row.totalTrendValue, scope.row.pTotalTrendValue).value === 'down'" class="data-total-trend data-total-trend-green"> <div v-else-if="chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).value === 'down' && chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total !== 0" class="data-total-trend data-total-trend-green">
<i class="cn-icon-decline cn-icon"></i>&nbsp;{{periodicJudgmentCalculationChange(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total}}% <i class="cn-icon-decline cn-icon"></i>&nbsp;{{unitConvert(chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total, unitTypes.percent).join('')}}
</div> </div>
<div v-else class="data-total-trend data-total-trend-black"> <div v-else class="data-total-trend data-total-trend-black">
<i class="cn-icon-constant cn-icon"></i> <i class="cn-icon-constant cn-icon"></i>
@@ -66,11 +66,11 @@
</template> </template>
<template v-else-if="item.prop === 'outbound'"> <template v-else-if="item.prop === 'outbound'">
{{unitConvert(scope.row[item.prop], unitTypes.bps).join('')}} {{unitConvert(scope.row[item.prop], unitTypes.bps).join('')}}
<div v-if="periodicJudgmentCalculationChange(scope.row.outboundTrendValue, scope.row.pOutboundTrendValue).value === 'up'" class="data-total-trend data-total-trend-red"> <div v-if="chainCalculation(scope.row.outboundTrendValue, scope.row.pOutboundTrendValue).value === 'up' && chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total !== 0" class="data-total-trend data-total-trend-red">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{periodicJudgmentCalculationChange(scope.row.outboundTrendValue, scope.row.pOutboundTrendValue).total}}% <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total, unitTypes.percent).join('')}}
</div> </div>
<div v-else-if="periodicJudgmentCalculationChange(scope.row.outboundTrendValue, scope.row.pOutboundTrendValue).value === 'down'" class="data-total-trend data-total-trend-green"> <div v-else-if="chainCalculation(scope.row.outboundTrendValue, scope.row.pOutboundTrendValue).value === 'down' && chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total !== 0" class="data-total-trend data-total-trend-green">
<i class="cn-icon-decline cn-icon"></i>&nbsp;{{periodicJudgmentCalculationChange(scope.row.outboundTrendValue, scope.row.pOutboundTrendValue).total}}% <i class="cn-icon-decline cn-icon"></i>&nbsp;{{unitConvert(chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total, unitTypes.percent).join('')}}
</div> </div>
<div v-else class="data-total-trend data-total-trend-black"> <div v-else class="data-total-trend data-total-trend-black">
<i class="cn-icon-constant cn-icon"></i> <i class="cn-icon-constant cn-icon"></i>
@@ -78,11 +78,11 @@
</template> </template>
<template v-else-if="item.prop === 'inbound'"> <template v-else-if="item.prop === 'inbound'">
{{unitConvert(scope.row[item.prop], unitTypes.bps).join('')}} {{unitConvert(scope.row[item.prop], unitTypes.bps).join('')}}
<div v-if="periodicJudgmentCalculationChange(scope.row.inboundTrendValue, scope.row.pInboundTrendValue).value === 'up'" class="data-total-trend data-total-trend-red"> <div v-if="chainCalculation(scope.row.inboundTrendValue, scope.row.pInboundTrendValue).value === 'up' && chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total !== 0" class="data-total-trend data-total-trend-red">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{periodicJudgmentCalculationChange(scope.row.inboundTrendValue, scope.row.pInboundTrendValue).total}}% <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total, unitTypes.percent).join('')}}
</div> </div>
<div v-else-if="periodicJudgmentCalculationChange(scope.row.inboundTrendValue, scope.row.pInboundTrendValue).value === 'down'" class="data-total-trend data-total-trend-green"> <div v-else-if="chainCalculation(scope.row.inboundTrendValue, scope.row.pInboundTrendValue).value === 'down' && chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total !== 0" class="data-total-trend data-total-trend-green">
<i class="cn-icon-decline cn-icon"></i>&nbsp;{{periodicJudgmentCalculationChange(scope.row.inboundTrendValue, scope.row.pInboundTrendValue).total}}% <i class="cn-icon-decline cn-icon"></i>&nbsp;{{unitConvert(chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total, unitTypes.percent).join('')}}
</div> </div>
<div v-else class="data-total-trend data-total-trend-black"> <div v-else class="data-total-trend data-total-trend-black">
<i class="cn-icon-constant cn-icon"></i> <i class="cn-icon-constant cn-icon"></i>
@@ -237,16 +237,18 @@ export default {
tableHeaderCellStyle ({ row, column, rowIndex, columnIndex }) { tableHeaderCellStyle ({ row, column, rowIndex, columnIndex }) {
return 'border-right:0px;font-size:12px;font-weight:500;padding:4px 0 !important;border-bottom: 1px solid #E2E5EC;' return 'border-right:0px;font-size:12px;font-weight:500;padding:4px 0 !important;border-bottom: 1px solid #E2E5EC;'
}, },
periodicJudgmentCalculationChange (period, pperiod) { chainCalculation (period, pperiod) {
const periodicData = {} const periodicData = {}
if (period > pperiod) { if (period > pperiod) {
periodicData.value = 'up' periodicData.value = 'up'
periodicData.total = parseInt(((period - pperiod) / pperiod) * 100) console.log((period - pperiod), pperiod)
periodicData.total = (period - pperiod) / pperiod
} else if (period < pperiod) { } else if (period < pperiod) {
periodicData.value = 'down' periodicData.value = 'down'
periodicData.total = parseInt(((pperiod - period) / pperiod) * 100) periodicData.total = (pperiod - period) / pperiod
} else { } else {
periodicData.value = '' periodicData.value = ''
periodicData.total = 0
} }
return periodicData return periodicData
} }

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

@@ -5,10 +5,10 @@
<div class="single-value__content"> <div class="single-value__content">
<div class="single-value__content-number">{{unitConvert(npm.establishLatencyAvg, unitTypes.time).join(' ')}}</div> <div class="single-value__content-number">{{unitConvert(npm.establishLatencyAvg, unitTypes.time).join(' ')}}</div>
<div v-if="npm.trend === 'up' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-red"> <div v-if="npm.trend === 'up' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-red">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}% <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}}
</div> </div>
<div v-else-if="npm.trend === 'down' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-green"> <div v-else-if="npm.trend === 'down' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-green">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}% <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}}
</div> </div>
<div v-else class="single-value__content-trend single-value__content-trend-black"> <div v-else 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>
@@ -24,10 +24,10 @@
<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.trend === 'up' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-red"> <div v-if="npm.trend === 'up' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-red">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}% <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}}
</div> </div>
<div v-else-if="npm.trend === 'down' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-green"> <div v-else-if="npm.trend === 'down' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-green">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}% <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}}
</div> </div>
<div v-else class="single-value__content-trend single-value__content-trend-black"> <div v-else 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>
@@ -43,10 +43,10 @@
<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.trend === 'up' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-red"> <div v-if="npm.trend === 'up' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-red">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}% <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}}
</div> </div>
<div v-else-if="npm.trend === 'down' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-green"> <div v-else-if="npm.trend === 'down' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-green">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}% <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}}
</div> </div>
<div v-else class="single-value__content-trend single-value__content-trend-black"> <div v-else 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>
@@ -62,10 +62,10 @@
<div class="single-value__content"> <div class="single-value__content">
<div class="single-value__content-number">{{unitConvert(npm.sequenceGapLossAvg, unitTypes.percent).join(' ')}}</div> <div class="single-value__content-number">{{unitConvert(npm.sequenceGapLossAvg, unitTypes.percent).join(' ')}}</div>
<div v-if="npm.trend === 'up' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-red"> <div v-if="npm.trend === 'up' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-red">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}% <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}}
</div> </div>
<div v-else-if="npm.trend === 'down' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-green"> <div v-else-if="npm.trend === 'down' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-green">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}% <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}}
</div> </div>
<div v-else class="single-value__content-trend single-value__content-trend-black"> <div v-else 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>
@@ -81,10 +81,10 @@
<div class="single-value__content"> <div class="single-value__content">
<div class="single-value__content-number">{{unitConvert(npm.pktRetransAvg, unitTypes.percent).join(' ')}}</div> <div class="single-value__content-number">{{unitConvert(npm.pktRetransAvg, unitTypes.percent).join(' ')}}</div>
<div v-if="npm.trend === 'up' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-red"> <div v-if="npm.trend === 'up' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-red">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}% <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}}
</div> </div>
<div v-else-if="npm.trend === 'down' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-green"> <div v-else-if="npm.trend === 'down' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-green">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}% <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}}
</div> </div>
<div v-else class="single-value__content-trend single-value__content-trend-black"> <div v-else 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>
@@ -136,10 +136,10 @@ export default {
const periodicData = {} const periodicData = {}
if (period > pperiod) { if (period > pperiod) {
periodicData.value = 'up' periodicData.value = 'up'
periodicData.total = parseInt(((period - pperiod) / pperiod) * 100) periodicData.total = (period - pperiod) / pperiod
} else if (period < pperiod) { } else if (period < pperiod) {
periodicData.value = 'down' periodicData.value = 'down'
periodicData.total = parseInt(((pperiod - period) / pperiod) * 100) periodicData.total = (pperiod - period) / pperiod
} else { } else {
periodicData.value = '' periodicData.value = ''
periodicData.total = 0 periodicData.total = 0