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-10 15:31:34 +08:00
parent 0d403aa990
commit 47694f1d6e
6 changed files with 93 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -51,6 +51,7 @@
height: 25px;
line-height: 25px;
text-align: center;
margin-right: 36px;
span {
i {
font-size: 20px;

3
src/assets/css/components/views/charts2/npmLine.scss
View File

@@ -14,6 +14,9 @@
margin-right: 10px;
align-items: center;
}
.npm-line-header-right:last-child {
margin-right: 0;
}
.npm-line-header-right.active {
.npm-line-header-icon {
background: #ccc;

25
src/views/charts2/charts/NetworkOverviewApps.vue
View File

@@ -32,9 +32,13 @@
<div class="app-card__body-content">
<div class="app-card__body-content-value">
<div class="app-card__body-content-number">{{unitConvert(app.rate, unitTypes.number).join(' ')}}</div>
<div class="app-card__body-content-percent" :class="app.trend === 'up' ? 'red' : 'green'">
<span v-if="app.trend === 'up'">+</span><span v-else-if="app.trend === 'down'">-</span>{{unitConvert(periodicJudgmentCalculationChange(app.rate, app.pRate).total, unitTypes.percent).join('')}}
<div class="app-card__body-content-percent red" v-if="app.value > 0">
+{{unitConvert(app.value, unitTypes.percent).join('')}}
</div>
<div class="app-card__body-content-percent green" v-else-if="app.value < 0">
-{{unitConvert(app.value, unitTypes.percent).join('').replaceAll('-', '')}}
</div>
<div v-else></div>
</div>
</div>
<div class="app-card__body-previous">
@@ -116,6 +120,7 @@ import { api } from '@/utils/api'
import _ from 'lodash'
import { getSecond } from '@/utils/date-util'
import { appTestData, appPrevTestData, providerTestData, providerPrevTestData } from './appsTestData'
import { getChainRatio } from '@/utils/tools'
export default {
name: 'NetworkOverviewApps',
props: {
@@ -243,7 +248,7 @@ export default {
d2.pRate = prevTypeData ? (prevTypeData[app] ? prevTypeData[app].rate : 0) : 0
d2.total = d[app].analysis.total
d2.lineData = d[app].values.map(v => [Number(v[0]), Number(v[1]), 'time'])
d2.trend = this.periodicJudgmentCalculationChange(d2.rate, d2.pRate).value
d2.value = getChainRatio(d2.rate, d2.pRate)
this.initChart(d2)
}
})
@@ -461,20 +466,6 @@ export default {
}
})
},
periodicJudgmentCalculationChange (period, pperiod) {
const periodicData = {}
if (period > pperiod) {
periodicData.value = 'up'
periodicData.total = pperiod === 0 ? 0 : (period - pperiod) / pperiod
} else if (period < pperiod) {
periodicData.value = 'down'
periodicData.total = (pperiod - period) / pperiod
} else {
periodicData.value = ''
periodicData.total = 0
}
return periodicData
},
resize () {
this.myChart.forEach(t => {
t.resize()

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

@@ -1,6 +1,6 @@
<template>
<div class="npm-app">
<!-- <div class="npm-app-left">
<div class="npm-app-left">
<div class="npm-app-letter">
<div v-for="(letter, index) in colorPatchData" :key="index">
{{letter.letter}}
@@ -9,27 +9,39 @@
<div class="npm-app-body">
<div class="npm-app-body-patch">
<div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-video"></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[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>
<div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[1].score >= index + 1}"></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>
<div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[2].score >= index + 1}"></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>
<div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[4].score >= index + 1}"></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>
<div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[5].score >= index + 1}"></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>
@@ -50,39 +62,39 @@
<div class="data-total">
<template v-if="item.prop === 'category'">
<span class="data-total-category-icon"><i :class="scope.row.icon"></i></span>
<span class="data-total-category-value">{{$t(scope.row[item.prop])}}</span>
<span class="data-total-category-value">{{$t(scope.row.i18n)}}</span>
</template>
<template v-else-if="item.prop === 'total'">
{{unitConvert(scope.row[item.prop], unitTypes.bps).join('')}}
<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;{{unitConvert(chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total, unitTypes.percent).join('')}}
{{unitConvert(scope.row.totalPacketsRate, unitTypes.bps).join('')}}
<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('')}}
</div>
<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;{{unitConvert(chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total, unitTypes.percent).join('')}}
<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('-', '')}}
</div>
<div v-else class="data-total-trend data-total-trend-black">
<i class="cn-icon-constant cn-icon"></i>
</div>
</template>
<template v-else-if="item.prop === 'outbound'">
{{unitConvert(scope.row[item.prop], unitTypes.bps).join('')}}
<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;{{unitConvert(chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total, unitTypes.percent).join('')}}
{{unitConvert(scope.row.outboundPacketsRate, unitTypes.bps).join('')}}
<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('')}}
</div>
<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;{{unitConvert(chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total, unitTypes.percent).join('')}}
<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('-', '')}}
</div>
<div v-else class="data-total-trend data-total-trend-black">
<i class="cn-icon-constant cn-icon"></i>
</div>
</template>
<template v-else-if="item.prop === 'inbound'">
{{unitConvert(scope.row[item.prop], unitTypes.bps).join('')}}
<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;{{unitConvert(chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total, unitTypes.percent).join('')}}
{{unitConvert(scope.row.inboundPacketsRate, unitTypes.bps).join('')}}
<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('')}}
</div>
<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;{{unitConvert(chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total, unitTypes.percent).join('')}}
<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('-', '')}}
</div>
<div v-else class="data-total-trend data-total-trend-black">
<i class="cn-icon-constant cn-icon"></i>
@@ -106,7 +118,7 @@
</el-table-column>
</template>
</el-table>
</div>-->
</div>
</div>
</template>
@@ -147,33 +159,19 @@ export default {
timeFilter: Object
},
methods: {
tableCellStyle ({ row, column, rowIndex, columnIndex }) {
let style = 'border-right:0px;font-size:12px;padding:7px 0 !important;border-bottom: 1px solid #ECECEC;'
if (rowIndex === this.tableData.length - 1) {
style = style + 'border-bottom:0px !important;'
}
if (columnIndex === 0) {
style = style + 'color:#046ECA;'
}
return style
},
tableHeaderCellStyle ({ row, column, rowIndex, columnIndex }) {
return 'border-right:0px;font-size:12px;font-weight:500;padding:4px 0 !important;border-bottom: 1px solid #E2E5EC;'
},
chainCalculation (period, pperiod) {
const periodicData = {}
if (period > pperiod) {
periodicData.value = 'up'
periodicData.total = (period - pperiod) / pperiod
} else if (period < pperiod) {
periodicData.value = 'down'
periodicData.total = (pperiod - period) / pperiod
} else {
periodicData.value = ''
periodicData.total = 0
}
return periodicData
},
// tableCellStyle ({ row, column, rowIndex, columnIndex }) {
// let style = 'border-right:0px;font-size:12px;padding:7px 0 !important;border-bottom: 1px solid #ECECEC;'
// if (rowIndex === this.tableData.length - 1) {
// style = style + 'border-bottom:0px !important;'
// }
// if (columnIndex === 0) {
// style = style + 'color:#046ECA;'
// }
// return style
// },
// tableHeaderCellStyle ({ row, column, rowIndex, columnIndex }) {
// return 'border-right:0px;font-size:12px;font-weight:500;padding:4px 0 !important;border-bottom: 1px solid #E2E5EC;'
// },
init (params) {
if (!params) {
params = {
@@ -200,9 +198,9 @@ export default {
const prev = prevData.find(p => p.appSubcategory === d.appSubcategory)
if (prev) {
result.bytesRateChainRatio = prev.totalBitsRate === 0 ? '-' : getChainRatio(d.totalBitsRate, prev.totalBitsRate)
result.inboundBytesRateChainRatio = prev.inboundBitsRate === 0 ? '-' : getChainRatio(d.inboundBitsRate, prev.inboundBitsRate)
result.outboundBytesRateChainRatio = prev.outboundBitsRate === 0 ? '-' : getChainRatio(d.outboundBitsRate, prev.outboundBitsRate)
result.bytesRateChainRatio = getChainRatio(d.totalBitsRate, prev.totalBitsRate)
result.inboundBytesRateChainRatio = getChainRatio(d.inboundBitsRate, prev.inboundBitsRate)
result.outboundBytesRateChainRatio = getChainRatio(d.outboundBitsRate, prev.outboundBitsRate)
}
return result
})
@@ -231,8 +229,12 @@ export default {
}
})
tableData.forEach(t => {
t.score = (t.tcpScore + t.httpScore + t.sslScore + t.tcpLostScore + t.packetRetransScore) * 6
t.score = Math.ceil((t.tcpScore + t.httpScore + t.sslScore + t.tcpLostScore + t.packetRetransScore) * 6)
if (t.score > 6) {
t.score = 6
}
})
this.tableData = tableData
console.info(tableData)
})
}

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

@@ -4,11 +4,11 @@
<div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
<div class="single-value__content">
<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.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('')}}
</div>
<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;{{unitConvert(npm.value, unitTypes.percent).join('')}}
<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('-', '')}}
</div>
<div v-else class="single-value__content-trend single-value__content-trend-black">
<i class="cn-icon-constant cn-icon"></i>
@@ -23,11 +23,11 @@
<div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
<div class="single-value__content">
<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.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('')}}
</div>
<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;{{unitConvert(npm.value, unitTypes.percent).join('')}}
<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('-', '')}}
</div>
<div v-else class="single-value__content-trend single-value__content-trend-black">
<i class="cn-icon-constant cn-icon"></i>
@@ -42,11 +42,11 @@
<div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
<div class="single-value__content">
<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.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('')}}
</div>
<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;{{unitConvert(npm.value, unitTypes.percent).join('')}}
<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('-', '')}}
</div>
<div v-else class="single-value__content-trend single-value__content-trend-black">
<i class="cn-icon-constant cn-icon"></i>
@@ -61,11 +61,11 @@
<div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
<div class="single-value__content">
<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.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('')}}
</div>
<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;{{unitConvert(npm.value, unitTypes.percent).join('')}}
<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('-', '')}}
</div>
<div v-else class="single-value__content-trend single-value__content-trend-black">
<i class="cn-icon-constant cn-icon"></i>
@@ -80,11 +80,11 @@
<div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
<div class="single-value__content">
<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.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('')}}
</div>
<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;{{unitConvert(npm.value, unitTypes.percent).join('')}}
<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('-', '')}}
</div>
<div v-else class="single-value__content-trend single-value__content-trend-black">
<i class="cn-icon-constant cn-icon"></i>
@@ -101,6 +101,7 @@
<script>
import { unitTypes } from '@/utils/constants'
import unitConvert from '@/utils/unit-convert'
import { getChainRatio } from '@/utils/tools'
export default {
name: 'SingleValue',
props: {
@@ -123,33 +124,21 @@ export default {
Object.keys(t).forEach(r => {
Object.keys(e).forEach(d => {
if (r === d) {
t.trend = this.chainCalculation(t[r], e[d]).value
t.value = this.chainCalculation(t[r], e[d]).total
t.trend = getChainRatio(t[r], e[d])
t.value = getChainRatio(t[r], e[d])
}
})
})
})
})
this.npmNetworkData = cycle
},
chainCalculation (period, pperiod) {
const periodicData = {}
if (period > pperiod) {
periodicData.value = 'up'
periodicData.total = (period - pperiod) / pperiod
} else if (period < pperiod) {
periodicData.value = 'down'
periodicData.total = (pperiod - period) / pperiod
} else {
periodicData.value = ''
periodicData.total = 0
}
return periodicData
}
},
mounted () {
this.timer = setTimeout(() => {
if (this.npmNetworkCycleData.length > 0 && this.npmNetworkLastCycleData.length > 0) {
this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData)
}
}, 500)
},
beforeUnmount () {

6
src/views/charts2/charts/options/echartOption.js
View File

@@ -258,7 +258,7 @@ export const appListChartOption = {
export const npmLineChartOption = {
title: {
text: '',
top: 20,
top: 14.5,
left: 20,
textStyle: {
fontSize: 14,
@@ -274,8 +274,8 @@ export const npmLineChartOption = {
show: false
},
grid: {
top: '25%',
left: '4%',
top: '21%',
left: '4.6%',
right: '4%',
bottom: 15,
containLabel: true