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

feat: SingleValue精简代码

Browse Source
This commit is contained in:
刘洪洪
2022-11-24 09:48:17 +08:00
parent 7d9829ae27
commit 1ac910fc54
1 changed files with 87 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,153 +1,65 @@
<template v-if="npmNetworkData.length > 0"> <template>
<div class="single-value" v-for="(npm, index) in npmNetworkData" :key="index"> <div class="single-value" v-for="(npm, index) in newNpmNetworkData" :key="index">
<template v-if="index === 0"> <div class="single-value__title" style="display: flex">
<div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div> {{ $t(npmNetworkName[index].name) }}
<div class="single-value__content"> <chart-error v-if="!npm.value" tooltip :content="npm.msg"></chart-error>
<div class="single-value__content-number">{{unitConvert(npm.establishLatencyMsAvg, unitTypes.time).join(' ')}}</div> </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; <div class="single-value__content">
<span v-if="npm.value <= 5"> <div class="single-value__content-number" v-if="index ===0 || index ===1 || index ===2">
{{unitConvert(npm.value, unitTypes.percent).join('')}} {{ unitConvert(npm.Avg, unitTypes.time).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;
<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>
</div>
<div v-else></div>
</div> </div>
<div class="single-value__circle"> <div class="single-value__content-number" v-else>
<div class="single-value__circle-p95">P95: {{unitConvert(npm.establishLatencyMsP95, unitTypes.time).join(' ')}}</div> {{unitConvert(npm.Avg, unitTypes.percent).join(' ')}}
<div class="single-value__circle-p99">P99: {{unitConvert(npm.establishLatencyMsP99, unitTypes.time).join(' ')}}</div>
</div> </div>
</template> <div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red">
<template v-if="index === 1"> <i class="cn-icon-rise1 cn-icon"></i>&nbsp;
<div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div> <span v-if="npm.value <= 5">
<div class="single-value__content"> {{ unitConvert(npm.value, unitTypes.percent).join('') }}
<div class="single-value__content-number">{{unitConvert(npm.httpResponseLatencyAvg, unitTypes.time).join(' ')}}</div> </span>
<div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red"> <span v-else>>500.00%</span>
<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;
<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>
</div>
<div v-else></div>
</div> </div>
<div class="single-value__circle"> <div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green">
<div class="single-value__circle-p95">P95: {{unitConvert(npm.httpResponseLatencyP95, unitTypes.time).join(' ')}}</div> <i class="cn-icon-decline cn-icon"></i>&nbsp;
<div class="single-value__circle-p99">P99: {{unitConvert(npm.httpResponseLatencyP99, unitTypes.time).join(' ')}}</div> <span v-if="npm.value >= -5">
{{ unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '') }}
</span>
<span v-else>>500.00%</span>
</div> </div>
</template> <div v-else-if="npm.value === 0" class="single-value__content-trend single-value__content-trend-black">
<template v-if="index === 2"> <i class="cn-icon-constant cn-icon"></i>
<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.value > 0" class="single-value__content-trend single-value__content-trend-red">
<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;
<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>
</div>
<div v-else></div>
</div> </div>
<div class="single-value__circle"> <div v-else></div>
<div class="single-value__circle-p95">P95: {{unitConvert(npm.sslConLatencyP95, unitTypes.time).join(' ')}}</div> </div>
<div class="single-value__circle-p99">P99: {{unitConvert(npm.sslConLatencyP99, unitTypes.time).join(' ')}}</div>
<div class="single-value__circle">
<div class="single-value__circle-p95">
<span v-if="index ===0 || index ===1 || index ===2">
P95:{{ unitConvert(npm.P95, unitTypes.time).join(' ') }}</span>
<span v-else>
P95:{{ unitConvert(npm.P95, unitTypes.percent).join(' ') }}
</span>
</div> </div>
</template> <div class="single-value__circle-p99">
<template v-if="index === 3"> <span v-if="index ===0 || index ===1 || index ===2">
<div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div> P99:{{ unitConvert(npm.P99, unitTypes.time).join(' ') }}
<div class="single-value__content"> </span>
<div class="single-value__content-number">{{unitConvert(npm.tcpLostlenPercentAvg, unitTypes.percent).join(' ')}}</div> <span v-else>
<div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red"> P99:{{ unitConvert(npm.P99, unitTypes.percent).join(' ') }}
<i class="cn-icon-rise1 cn-icon"></i>&nbsp; </span>
<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;
<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>
</div>
<div v-else></div>
</div> </div>
<div class="single-value__circle"> </div>
<div class="single-value__circle-p95">P95: {{unitConvert(npm.tcpLostlenPercentP95, unitTypes.percent).join(' ')}}</div>
<div class="single-value__circle-p99">P99: {{unitConvert(npm.tcpLostlenPercentP99, unitTypes.percent).join(' ')}}</div>
</div>
</template>
<template v-if="index === 4">
<div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
<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;
<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;
<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>
</div>
<div v-else></div>
</div>
<div class="single-value__circle">
<div class="single-value__circle-p95">P95: {{unitConvert(npm.pktRetransPercentP95, unitTypes.percent).join(' ')}}</div>
<div class="single-value__circle-p99">P99: {{unitConvert(npm.pktRetransPercentP99, unitTypes.percent).join(' ')}}</div>
</div>
</template>
</div> </div>
</template> </template>
<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 ChartError from '@/components/common/Error'
export default { export default {
name: 'SingleValue', name: 'SingleValue',
components: { ChartError },
props: { props: {
npmNetworkName: Array, npmNetworkName: Array,
npmNetworkData: Array npmNetworkData: Array
@@ -155,7 +67,46 @@ export default {
data () { data () {
return { return {
unitTypes, unitTypes,
unitConvert unitConvert,
newNpmNetworkData: [] // 整合处理传过来的数据列表
}
},
mounted () {
this.initData()
},
methods: {
/**
* 初始化数据
*/
initData () {
// 传过来的数据
const npmNetworkData = this.npmNetworkData
// 处理数据后的数组
const dealList = []
if (npmNetworkData !== undefined && npmNetworkData.length > 0) {
npmNetworkData.forEach((item) => {
const tempObj = {}
for (const i in item) {
// 将含有avg、p90等关键字使用avg、p90来代替，形成统一属性
if (i.indexOf('Avg') > -1) {
tempObj.Avg = item[i]
} else if (i.indexOf('P50') > -1) {
tempObj.P50 = item[i]
} else if (i.indexOf('P90') > -1) {
tempObj.P90 = item[i]
} else if (i.indexOf('P95') > -1) {
tempObj.P95 = item[i]
} else if (i.indexOf('P99') > -1) {
tempObj.P99 = item[i]
}
}
tempObj.value = item.value
tempObj.msg = item.msg
dealList.push(tempObj)
})
this.newNpmNetworkData = dealList
}
} }
} }
} }