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; height: 25px;
line-height: 25px; line-height: 25px;
text-align: center; text-align: center;
margin-right: 36px;
span { span {
i { i {
font-size: 20px; font-size: 20px;

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

@@ -14,6 +14,9 @@
margin-right: 10px; margin-right: 10px;
align-items: center; align-items: center;
} }
.npm-line-header-right:last-child {
margin-right: 0;
}
.npm-line-header-right.active { .npm-line-header-right.active {
.npm-line-header-icon { .npm-line-header-icon {
background: #ccc; 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">
<div class="app-card__body-content-value"> <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-number">{{unitConvert(app.rate, unitTypes.number).join(' ')}}</div>
<div class="app-card__body-content-percent" :class="app.trend === 'up' ? 'red' : 'green'"> <div class="app-card__body-content-percent red" v-if="app.value > 0">
<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('')}} +{{unitConvert(app.value, unitTypes.percent).join('')}}
</div> </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> </div>
<div class="app-card__body-previous"> <div class="app-card__body-previous">
@@ -116,6 +120,7 @@ import { api } from '@/utils/api'
import _ from 'lodash' import _ from 'lodash'
import { getSecond } from '@/utils/date-util' import { getSecond } from '@/utils/date-util'
import { appTestData, appPrevTestData, providerTestData, providerPrevTestData } from './appsTestData' import { appTestData, appPrevTestData, providerTestData, providerPrevTestData } from './appsTestData'
import { getChainRatio } from '@/utils/tools'
export default { export default {
name: 'NetworkOverviewApps', name: 'NetworkOverviewApps',
props: { props: {
@@ -243,7 +248,7 @@ export default {
d2.pRate = prevTypeData ? (prevTypeData[app] ? prevTypeData[app].rate : 0) : 0 d2.pRate = prevTypeData ? (prevTypeData[app] ? prevTypeData[app].rate : 0) : 0
d2.total = d[app].analysis.total d2.total = d[app].analysis.total
d2.lineData = d[app].values.map(v => [Number(v[0]), Number(v[1]), 'time']) 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) 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 () { resize () {
this.myChart.forEach(t => { this.myChart.forEach(t => {
t.resize() t.resize()

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

@@ -1,6 +1,6 @@
<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}}
@@ -9,27 +9,39 @@
<div class="npm-app-body"> <div class="npm-app-body">
<div class="npm-app-body-patch"> <div class="npm-app-body-patch">
<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="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> <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>
<div class="npm-app-body-patch"> <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-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>
<div class="npm-app-body-patch"> <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-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>
<div class="npm-app-body-patch"> <div class="npm-app-body-patch">
<div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-gaming"></i></span></div> <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> <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>
<div class="npm-app-body-patch"> <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-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>
<div class="npm-app-body-patch"> <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-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> </div>
</div> </div>
@@ -50,39 +62,39 @@
<div class="data-total"> <div class="data-total">
<template v-if="item.prop === 'category'"> <template v-if="item.prop === 'category'">
<span class="data-total-category-icon"><i :class="scope.row.icon"></i></span> <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>
<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.totalPacketsRate, 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"> <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(chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total, unitTypes.percent).join('')}} <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(scope.row.bytesRateChainRatio, unitTypes.percent).join('')}}
</div> </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"> <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(chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total, unitTypes.percent).join('')}} <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 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>
</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.outboundPacketsRate, 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"> <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(chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total, unitTypes.percent).join('')}} <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(scope.row.outboundBytesRateChainRatio, unitTypes.percent).join('')}}
</div> </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"> <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(chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total, unitTypes.percent).join('')}} <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 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>
</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.inboundPacketsRate, 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"> <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(chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total, unitTypes.percent).join('')}} <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(scope.row.inboundBytesRateChainRatio, unitTypes.percent).join('')}}
</div> </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"> <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(chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total, unitTypes.percent).join('')}} <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 class="data-total-trend data-total-trend-black">
<i class="cn-icon-constant cn-icon"></i> <i class="cn-icon-constant cn-icon"></i>
@@ -106,7 +118,7 @@
</el-table-column> </el-table-column>
</template> </template>
</el-table> </el-table>
</div>--> </div>
</div> </div>
</template> </template>
@@ -147,33 +159,19 @@ export default {
timeFilter: Object timeFilter: Object
}, },
methods: { methods: {
tableCellStyle ({ row, column, rowIndex, columnIndex }) { // tableCellStyle ({ row, column, rowIndex, columnIndex }) {
let style = 'border-right:0px;font-size:12px;padding:7px 0 !important;border-bottom: 1px solid #ECECEC;' // let style = 'border-right:0px;font-size:12px;padding:7px 0 !important;border-bottom: 1px solid #ECECEC;'
if (rowIndex === this.tableData.length - 1) { // if (rowIndex === this.tableData.length - 1) {
style = style + 'border-bottom:0px !important;' // style = style + 'border-bottom:0px !important;'
} // }
if (columnIndex === 0) { // if (columnIndex === 0) {
style = style + 'color:#046ECA;' // style = style + 'color:#046ECA;'
} // }
return style // return style
}, // },
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;'
}, // },
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
},
init (params) { init (params) {
if (!params) { if (!params) {
params = { params = {
@@ -200,9 +198,9 @@ export default {
const prev = prevData.find(p => p.appSubcategory === d.appSubcategory) const prev = prevData.find(p => p.appSubcategory === d.appSubcategory)
if (prev) { if (prev) {
result.bytesRateChainRatio = prev.totalBitsRate === 0 ? '-' : getChainRatio(d.totalBitsRate, prev.totalBitsRate) result.bytesRateChainRatio = getChainRatio(d.totalBitsRate, prev.totalBitsRate)
result.inboundBytesRateChainRatio = prev.inboundBitsRate === 0 ? '-' : getChainRatio(d.inboundBitsRate, prev.inboundBitsRate) result.inboundBytesRateChainRatio = getChainRatio(d.inboundBitsRate, prev.inboundBitsRate)
result.outboundBytesRateChainRatio = prev.outboundBitsRate === 0 ? '-' : getChainRatio(d.outboundBitsRate, prev.outboundBitsRate) result.outboundBytesRateChainRatio = getChainRatio(d.outboundBitsRate, prev.outboundBitsRate)
} }
return result return result
}) })
@@ -231,8 +229,12 @@ export default {
} }
}) })
tableData.forEach(t => { 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) 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__title">{{$t(npmNetworkName[index].name)}}</div>
<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.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;{{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.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('')}} <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 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>
@@ -23,11 +23,11 @@
<div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div> <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
<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.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;{{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.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('')}} <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 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>
@@ -42,11 +42,11 @@
<div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div> <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
<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.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;{{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.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('')}} <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 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>
@@ -61,11 +61,11 @@
<div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div> <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
<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.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;{{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.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('')}} <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 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>
@@ -80,11 +80,11 @@
<div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div> <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
<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.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;{{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.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('')}} <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 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>
@@ -101,6 +101,7 @@
<script> <script>
import { unitTypes } from '@/utils/constants' import { unitTypes } from '@/utils/constants'
import unitConvert from '@/utils/unit-convert' import unitConvert from '@/utils/unit-convert'
import { getChainRatio } from '@/utils/tools'
export default { export default {
name: 'SingleValue', name: 'SingleValue',
props: { props: {
@@ -123,33 +124,21 @@ 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 = this.chainCalculation(t[r], e[d]).value t.trend = getChainRatio(t[r], e[d])
t.value = this.chainCalculation(t[r], e[d]).total t.value = getChainRatio(t[r], e[d])
} }
}) })
}) })
}) })
}) })
this.npmNetworkData = cycle 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 () { mounted () {
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
if (this.npmNetworkCycleData.length > 0 && this.npmNetworkLastCycleData.length > 0) {
this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData) this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData)
}
}, 500) }, 500)
}, },
beforeUnmount () { beforeUnmount () {

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

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