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

CN-1145 fix: 指标统一增加<0.01处理

Browse Source
This commit is contained in:
chenjinsong
2023-08-04 11:00:37 +08:00
parent 2530168e44
commit 6b89d4346d
15 changed files with 76 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
View File

@@ -98,7 +98,7 @@
}
.row__content {
display: flex;
color: #3976CB;
color: #046ECA;
word-wrap: break-word;
max-width: 30%;

8
src/utils/unit-convert.js
View File

@@ -141,7 +141,7 @@ export function getUnitType (column) {
/* 单位转换，返回转换后的[value, unit]，type=time时若value<1ms，返回<1ms，type=percent时若value<0.01%，返回<0.01% */
export function valueToRangeValue (value, unitType) {
const values = unitConvert(Number(value), unitType)
const values = unitConvert(_.isString(value) ? Number(value) : value, unitType)
if (values[0] || values[0] === 0) {
switch (unitType) {
case unitTypes.time: {
@@ -168,6 +168,12 @@ export function valueToRangeValue (value, unitType) {
}
break
}
case unitTypes.number: {
if (values[0] < 0.01) {
return ['<0.01', '']
}
break
}
default: break
}
}

4
src/views/charts/charts/tools.js
View File

@@ -485,7 +485,7 @@ export function stackedLineTooltipFormatter (params) {
str += '<div class="cn-chart-tooltip">'
params.forEach((item, i) => {
str += `<span class="cn-chart-tooltip-value cn-chart-tooltip__color">
${unitConvert(item.data[1], item.value[2]).join(' ')}
${valueToRangeValue(item.data[1], item.value[2]).join(' ')}
</span>`
})
str += '</div>'
@@ -510,7 +510,7 @@ export function appStackedLineTooltipFormatter (params) {
</span>`
str += '</span>'
str += `<span class="cn-chart-tooltip-value cn-chart-tooltip__color">
${unitConvert(item.data[1], item.value[2]).join(' ')}
${valueToRangeValue(item.data[1], item.value[2]).join(' ')}
</span>`
str += '</div>'
})

12
src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
View File

@@ -21,7 +21,7 @@
<div class="app-card__body">
<div class="app-card__body-content">
<div class="app-card__body-content-value">
<div class="app-card__body-content-number" :test-id="`rate${index}`">{{unitConvert(app.rate, unitTypes.number).join(' ')}}</div>
<div class="app-card__body-content-number" :test-id="`rate${index}`">{{valueToRangeValue(app.rate, unitTypes.number).join(' ')}}</div>
<div class="app-card__body-content-percent red" v-if="app.value > 0" :test-id="`percent${index}`">
<span v-if="app.value <= 5">
+{{unitConvert(app.value, unitTypes.percent).join('')}}
@@ -39,8 +39,8 @@
</div>
<div class="app-card__body-previous">
<div>Total</div>
<div v-if="metric === 'Bits/s'" :test-id="`total${index}`">{{unitConvert(app.total, unitTypes.byte).join(' ')}}</div>
<div v-else :test-id="`total${index}`">{{unitConvert(app.total, unitTypes.number).join(' ')}}</div>
<div v-if="metric === 'Bits/s'" :test-id="`total${index}`">{{valueToRangeValue(app.total, unitTypes.byte).join(' ')}}</div>
<div v-else :test-id="`total${index}`">{{valueToRangeValue(app.total, unitTypes.number).join(' ')}}</div>
</div>
</div>
<div class="chart__drawing" v-show="!isNoData" :id="`chart-${app.name}-${app.type}`"></div>
@@ -120,7 +120,7 @@
</template>
<script>
import unitConvert from '@/utils/unit-convert'
import unitConvert, { valueToRangeValue } from '@/utils/unit-convert'
import { storageKey, unitTypes, networkTable, operationType, curTabState } from '@/utils/constants'
import * as echarts from 'echarts'
import { appListChartOption } from '@/views/charts2/charts/options/echartOption'
@@ -149,6 +149,8 @@ export default {
appData: [],
// 假数据
appTempData: [],
valueToRangeValue,
unitConvert,
unitTypes,
timer: null,
showAddApp: false,
@@ -207,7 +209,6 @@ export default {
}
},
methods: {
unitConvert,
clickOutSide () {
this.appData.forEach(t => {
t.moreOptions = false
@@ -732,6 +733,7 @@ export default {
echarts.dispose(this.myChart)
}
this.unitConvert = null
this.valueToRangeValue = null
}
}
</script>

12
src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
View File

@@ -20,9 +20,9 @@
<div class="tabs-name" :test-id="`tabTitle${index}`">{{ $t(item.name) }}</div>
</div>
<div class="line-value-unit" :test-id="`tabContent${index}`">
<span class="line-value-unit-number">{{ unitConvert(item.analysis.avg, unitTypes.number)[0] }}</span>
<span class="line-value-unit-number">{{ valueToRangeValue(item.analysis.avg, unitTypes.number)[0] }}</span>
<span class="line-value-unit-number2">
<span>{{ unitConvert(item.analysis.avg, unitTypes.number)[1] }}</span>
<span>{{ valueToRangeValue(item.analysis.avg, unitTypes.number)[1] }}</span>
<span v-if="item.unitType">{{ item.unitType }}</span>
</span>
</div>
@@ -58,7 +58,7 @@
<script>
import * as echarts from 'echarts'
import { stackedLineChartOption } from '@/views/charts2/charts/options/echartOption'
import unitConvert from '@/utils/unit-convert'
import { valueToRangeValue } from '@/utils/unit-convert'
import { unitTypes, chartColor3, chartColor4 } from '@/utils/constants.js'
import { ref, shallowRef } from 'vue'
import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools'
@@ -107,7 +107,7 @@ export default {
options2: dataForNetworkOverviewLine.options2,
tabsTemplate: dataForNetworkOverviewLine.tabsTemplate,
tabs: [],
unitConvert,
valueToRangeValue,
unitTypes,
chartDateObject: [],
timer: null,
@@ -254,7 +254,7 @@ export default {
symbol: 'none',
label: {
formatter (params) {
const arr = unitConvert(params.value, unitTypes.number).join('')
const arr = valueToRangeValue(params.value, unitTypes.number).join('')
return _this.lineRefer + '(' + arr + echartsData[0].unitType + ')'
},
position: 'insideStartTop',
@@ -576,7 +576,7 @@ export default {
echarts.dispose(this.myChart)
}
// 检测时发现该方法占用较大内存，且未被释放
this.unitConvert = null
this.valueToRangeValue = null
myChart = null
}
}

14
src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
View File

@@ -50,10 +50,10 @@
<div class="data-total" >
<div class="data-value" :test-id="`data-value-${item.prop}${scope.row.index}`">
<template v-if="showUnit && item.unit">
{{scope.row[item.prop]?((scope.row[item.prop][0]||scope.row[item.prop][0]===0)? unitConvert(scope.row[item.prop][0], item.unit).join(' ') : '-'):'' }}
{{scope.row[item.prop]?((scope.row[item.prop][0]||scope.row[item.prop][0]===0)? valueToRangeValue(scope.row[item.prop][0], item.unit).join(' ') : '-'):'' }}
</template>
<template v-else>
{{scope.row[item.prop]?((scope.row[item.prop][0]||scope.row[item.prop][0]===0)? unitConvert(scope.row[item.prop][0], unitTypes.number).join(' ') : '-'):'' }}
{{scope.row[item.prop]?((scope.row[item.prop][0]||scope.row[item.prop][0]===0)? valueToRangeValue(scope.row[item.prop][0], unitTypes.number).join(' ') : '-'):'' }}
</template>
</div>
<div class="data-trend" :test-id="`data-trend-all-${item.prop}${scope.row.index}`">
@@ -116,10 +116,10 @@
</template>
<template v-else>
<template v-if="showUnit && item.unit">
{{(scope.row[item.prop] || scope.row[item.prop]===0) ? unitConvert(scope.row[item.prop], item.unit).join(' ') : '-'}}
{{(scope.row[item.prop] || scope.row[item.prop]===0) ? valueToRangeValue(scope.row[item.prop], item.unit).join(' ') : '-'}}
</template>
<template v-else>
{{(scope.row[item.prop] || scope.row[item.prop]===0)? unitConvert(scope.row[item.prop], unitTypes.number).join(' ') : '-'}}
{{(scope.row[item.prop] || scope.row[item.prop]===0)? valueToRangeValue(scope.row[item.prop], unitTypes.number).join(' ') : '-'}}
</template>
</template>
</template>
@@ -213,7 +213,7 @@ import {
commonErrorTip
} from '@/utils/constants'
import { get } from '@/utils/http'
import unitConvert from '@/utils/unit-convert'
import unitConvert, { valueToRangeValue } from '@/utils/unit-convert'
import { getChainRatio, computeScore, urlParamsHandler, overwriteUrl, readDrilldownTableConfigByUser, combineDrilldownTableWithUserConfig, getDnsMapData, handleSpecialValue, getConfigVersion } from '@/utils/tools'
import { getSecond } from '@/utils/date-util'
import chartMixin from '@/views/charts2/chart-mixin'
@@ -231,6 +231,7 @@ export default {
orderBy: 'totalBytes',
tab: 'ip',
unitConvert,
valueToRangeValue,
unitTypes,
networkTable,
isNoData: false,
@@ -1993,7 +1994,8 @@ export default {
},
beforeUnmount () {
// 以下元素，检测到内存并未释放
this.unitConvert = null
this.valueToRangeValue = null
},
unmounted () {
this.isNoData = false

10
src/views/charts2/charts/npm/NpmAppCategoryScore.vue
View File

@@ -36,7 +36,7 @@
<span class="data-total-category-value" @click="drillDownData(scope.row.i18n)">{{$t(scope.row.i18n)}}</span>
</template>
<template v-else-if="item.prop === 'total'">
<div class="data-total-value">{{unitConvert(scope.row.totalPacketsRate, unitTypes.bps).join(' ')}}</div>
<div class="data-total-value">{{valueToRangeValue(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;
@@ -59,7 +59,7 @@
</div>
</template>
<template v-else-if="item.prop === 'outbound'">
<div class="data-total-value">{{unitConvert(scope.row.outboundPacketsRate, unitTypes.bps).join(' ')}}</div>
<div class="data-total-value">{{valueToRangeValue(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;
@@ -82,7 +82,7 @@
</div>
</template>
<template v-else-if="item.prop === 'inbound'">
<div class="data-total-value" :test-id="`inbound-packet-${scope.row.appSubcategory}`">{{unitConvert(scope.row.inboundPacketsRate, unitTypes.bps).join(' ')}}</div>
<div class="data-total-value" :test-id="`inbound-packet-${scope.row.appSubcategory}`">{{valueToRangeValue(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;
@@ -135,7 +135,7 @@
<script>
import { unitTypes, npmCategoryInfoMapping, networkTable, operationType, npmCategoryToAppCategoryMap, curTabState } from '@/utils/constants'
import unitConvert from '@/utils/unit-convert'
import unitConvert, { valueToRangeValue } from '@/utils/unit-convert'
import { api } from '@/utils/api'
import { getSecond } from '@/utils/date-util'
import { computeScore, getChainRatio, getUserDrilldownTableConfig, overwriteUrl, urlParamsHandler } from '@/utils/tools'
@@ -149,6 +149,7 @@ export default {
data () {
return {
unitConvert,
valueToRangeValue,
unitTypes,
colorPatchData: [
{ letter: '' },
@@ -379,6 +380,7 @@ export default {
},
beforeUnmount () {
this.unitConvert = null
this.valueToRangeValue = null
}
}
</script>

16
src/views/charts2/charts/npm/NpmNetworkQuantity.vue
View File

@@ -8,10 +8,10 @@
<div class="single-value__content" >
<div class="single-value__content-number" v-if="index ===0 || index ===1 || index ===2" :test-id="`singleValueContent${index}`">
{{ unitConvert(npm.Avg, unitTypes.time).join(' ') }}
{{ valueToRangeValue(npm.Avg, unitTypes.time).join(' ') }}
</div>
<div class="single-value__content-number" v-else :test-id="`singleValueContent${index}`">
{{unitConvert(npm.Avg, unitTypes.percent).join(' ')}}
{{valueToRangeValue(npm.Avg, 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" :test-id="`singleValueTrendIcon${index}`"></i>&nbsp;
@@ -36,17 +36,17 @@
<div class="single-value__circle">
<div class="single-value__circle-p95" :test-id="`singleValueP95${index}`">
<span v-if="index ===0 || index ===1 || index ===2">
P95:{{ unitConvert(npm.P95, unitTypes.time).join(' ') }}</span>
P95:{{ valueToRangeValue(npm.P95, unitTypes.time).join(' ') }}</span>
<span v-else>
P95:{{ unitConvert(npm.P95, unitTypes.percent).join(' ') }}
P95:{{ valueToRangeValue(npm.P95, unitTypes.percent).join(' ') }}
</span>
</div>
<div class="single-value__circle-p99" :test-id="`singleValueP99${index}`">
<span v-if="index ===0 || index ===1 || index ===2">
P99:{{ unitConvert(npm.P99, unitTypes.time).join(' ') }}
P99:{{ valueToRangeValue(npm.P99, unitTypes.time).join(' ') }}
</span>
<span v-else>
P99:{{ unitConvert(npm.P99, unitTypes.percent).join(' ') }}
P99:{{ valueToRangeValue(npm.P99, unitTypes.percent).join(' ') }}
</span>
</div>
</div>
@@ -63,7 +63,7 @@ import { getChainRatio, getQueryByFlag2, getQueryByType } from '@/utils/tools'
import { useRoute } from 'vue-router'
import { ref } from 'vue'
import { unitTypes } from '@/utils/constants'
import unitConvert from '@/utils/unit-convert'
import unitConvert, { valueToRangeValue } from '@/utils/unit-convert'
import axios from 'axios'
import { dataForNpmNetworkQuantity } from '@/utils/static-data'
export default {
@@ -88,6 +88,7 @@ export default {
return {
unitTypes,
unitConvert,
valueToRangeValue,
npmNetworkName: dataForNpmNetworkQuantity.npmNetworkName,
npmNetworkCycleData: [],
npmNetworkLastCycleData: [],
@@ -347,6 +348,7 @@ export default {
clearTimeout(this.timer1)
clearTimeout(this.timer2)
this.unitConvert = null
this.valueToRangeValue = null
}
}
</script>

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

@@ -6,7 +6,7 @@ import {
chartColor6,
unitTypes
} from '@/utils/constants'
import unitConvert from '@/utils/unit-convert'
import unitConvert, { valueToRangeValue } from '@/utils/unit-convert'
import { axisFormatter } from '@/views/charts/charts/tools'
import { xAxisTimeFormatter, xAxisTimeRich } from '@/utils/date-util'

4
src/views/entityExplorer/entityList/Row.vue
View File

@@ -80,7 +80,7 @@
<span class="row-item-label">{{ $t('entities.sentThroughput') }}&nbsp;:&nbsp;&nbsp;</span>
<span class="row-item-value">
{{
unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ') !=='- ' ? unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ') + 'ps' : '-'
valueToRangeValue(entityData.bytesSentRate, unitTypes.byte).join(' ') !=='- ' ? valueToRangeValue(entityData.bytesSentRate, unitTypes.byte).join(' ') + 'ps' : '-'
}}
</span>
<!-- 曲线-->
@@ -110,7 +110,7 @@
<i class="cn-icon cn-icon-fall"></i>
<span class="row-item-label">{{ $t('entities.receivedThroughput') }}&nbsp;:&nbsp;&nbsp;</span>
<span class="row-item-value">
{{ unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ') !== '- ' ? unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ') + 'ps' : '-' }}
{{ valueToRangeValue(entityData.bytesReceivedRate, unitTypes.byte).join(' ') !== '- ' ? valueToRangeValue(entityData.bytesReceivedRate, unitTypes.byte).join(' ') + 'ps' : '-' }}
</span>
<div class="item-box-loading">
<loading :loading="loading" size="small"></loading>

12
src/views/entityExplorer/entityList/detailOverview/App.vue
View File

@@ -31,13 +31,13 @@
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('overall.peak')}}</div>
<div class="row__content">
{{unitConvert(entityData.max, unitTypes.byte).join(' ') !== '- ' ? unitConvert(entityData.max, unitTypes.byte).join(' ') + '/s' : '-'}}
{{valueToRangeValue(entityData.max, unitTypes.byte).join(' ') !== '- ' ? valueToRangeValue(entityData.max, unitTypes.byte).join(' ') + '/s' : '-'}}
</div>
</div>
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('overall.mean')}}</div>
<div class="row__content">
{{unitConvert(entityData.avg, unitTypes.byte).join(' ') !== '- ' ? unitConvert(entityData.avg, unitTypes.byte).join(' ') + '/s' : '-'}}
{{valueToRangeValue(entityData.avg, unitTypes.byte).join(' ') !== '- ' ? valueToRangeValue(entityData.avg, unitTypes.byte).join(' ') + '/s' : '-'}}
</div>
</div>
<div class="overview__row">
@@ -45,7 +45,7 @@
<div class="row__contents">
<div class="row__content">
<div class="row__charts-msg">{{$t('overall.sent')}}：
{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ') !== '- ' ? unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ') + 'ps' : '-'}}
{{valueToRangeValue(entityData.bytesSentRate, unitTypes.byte).join(' ') !== '- ' ? valueToRangeValue(entityData.bytesSentRate, unitTypes.byte).join(' ') + 'ps' : '-'}}
</div>
<!-- 曲线-->
<div class="row__content-loading">
@@ -54,7 +54,7 @@
</div>
<div class="row__content row__content-accept">
<div class="row__charts-msg">{{$t('overall.received')}}：
{{unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ') !== '- ' ? unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ') + 'ps' : '-'}}
{{valueToRangeValue(entityData.bytesReceivedRate, unitTypes.byte).join(' ') !== '- ' ? valueToRangeValue(entityData.bytesReceivedRate, unitTypes.byte).join(' ') + 'ps' : '-'}}
</div>
<!-- 曲线-->
<div class="row__content-loading">
@@ -212,7 +212,7 @@
import { api } from '@/utils/api'
import entityDetailMixin from './entityDetailMixin'
import { unitTypes } from '@/utils/constants'
import unitConvert from '@/utils/unit-convert'
import { valueToRangeValue } from '@/utils/unit-convert'
import Chart from '@/views/charts/Chart'
import _ from 'lodash'
import { get } from '@/utils/http'
@@ -372,7 +372,7 @@ export default {
entityCopy: {
..._.cloneDeep(props.entity)
},
unitConvert,
valueToRangeValue,
entityData
}
}

14
src/views/entityExplorer/entityList/detailOverview/Domain.vue
View File

@@ -39,13 +39,13 @@
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('overall.peak')}}</div>
<div class="row__content">
{{unitConvert(entityData.max, unitTypes.byte).join(' ') !== '- ' ? unitConvert(entityData.max, unitTypes.byte).join(' ') + '/s' : '-'}}
{{valueToRangeValue(entityData.max, unitTypes.byte).join(' ') !== '- ' ? valueToRangeValue(entityData.max, unitTypes.byte).join(' ') + '/s' : '-'}}
</div>
</div>
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('overall.mean')}}</div>
<div class="row__label row__label--width130">{{$t('overall.average')}}</div>
<div class="row__content">
{{unitConvert(entityData.avg, unitTypes.byte).join(' ') !== '- ' ? unitConvert(entityData.avg, unitTypes.byte).join(' ') + '/s' : '-'}}
{{valueToRangeValue(entityData.avg, unitTypes.byte).join(' ') !== '- ' ? valueToRangeValue(entityData.avg, unitTypes.byte).join(' ') + '/s' : '-'}}
</div>
</div>
<div class="overview__row">
@@ -53,7 +53,7 @@
<div class="row__contents">
<div class="row__content">
<div class="row__charts-msg">{{$t('overall.sent')}}：
{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ') !== '- ' ? unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ') + 'ps' : '-'}}
{{valueToRangeValue(entityData.bytesSentRate, unitTypes.byte).join(' ') !== '- ' ? valueToRangeValue(entityData.bytesSentRate, unitTypes.byte).join(' ') + 'ps' : '-'}}
</div>
<!-- 曲线-->
<div class="row__content-loading">
@@ -62,7 +62,7 @@
</div>
<div class="row__content row__content-accept">
<div class="row__charts-msg">{{$t('overall.received')}}：
{{unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ') !== '- ' ? unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ') + 'ps' : '-'}}
{{valueToRangeValue(entityData.bytesReceivedRate, unitTypes.byte).join(' ') !== '- ' ? valueToRangeValue(entityData.bytesReceivedRate, unitTypes.byte).join(' ') + 'ps' : '-'}}
</div>
<!-- 曲线-->
<div class="row__content-loading">
@@ -216,7 +216,7 @@
import { api } from '@/utils/api'
import entityDetailMixin from './entityDetailMixin'
import { unitTypes } from '@/utils/constants'
import unitConvert from '@/utils/unit-convert'
import { valueToRangeValue } from '@/utils/unit-convert'
import Chart from '@/views/charts/Chart'
import _ from 'lodash'
import { get } from '@/utils/http'
@@ -397,7 +397,7 @@ export default {
},
entityCopy,
unitTypes,
unitConvert,
valueToRangeValue,
entityData
}
}

22
src/views/entityExplorer/entityList/detailOverview/Ip.vue
View File

@@ -44,7 +44,7 @@
<div class="row__label row__label--width130">{{$t('overall.dnsServerInfo.queryRate')}}</div>
<div class="row__contents">
<div class="row__content">
<div class="row__charts-msg">{{unitConvert(entityData.queryRate, unitTypes.byte).join(' ')}}ps</div>
<div class="row__charts-msg">{{valueToRangeValue(entityData.queryRate, unitTypes.byte).join(' ')}}ps</div>
<!-- 曲线-->
<div class="row__content-loading">
<loading :loading="!loadingDns && loading" size="small"></loading>
@@ -62,21 +62,21 @@
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('overall.peak')}}</div>
<div class="row__content">
{{unitConvert(entityData.max, unitTypes.byte).join(' ') !== '- ' ? unitConvert(entityData.max, unitTypes.byte).join(' ') + '/s' : '-'}}
{{valueToRangeValue(entityData.max, unitTypes.byte).join(' ') !== '- ' ? valueToRangeValue(entityData.max, unitTypes.byte).join(' ') + '/s' : '-'}}
</div>
</div>
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('overall.mean')}}</div>
<div class="row__label row__label--width130">{{$t('overall.average')}}</div>
<div class="row__content">
{{unitConvert(entityData.avg, unitTypes.byte).join(' ') !== '- ' ? unitConvert(entityData.avg, unitTypes.byte).join(' ') + '/s' : '-'}}
{{valueToRangeValue(entityData.avg, unitTypes.byte).join(' ') !== '- ' ? valueToRangeValue(entityData.avg, unitTypes.byte).join(' ') + '/s' : '-'}}
</div>
</div>
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('overall.throughput')}}</div>
<div class="row__contents">
<div class="row__content">
<div class="row__charts-msg">{{$t('overall.sent')}}：
{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ') !== '- ' ? unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ') + 'ps' : '-'}}
<div class="row__charts-msg">{{$t('overall.sent')}}:
{{valueToRangeValue(entityData.bytesSentRate, unitTypes.byte).join(' ') !== '- ' ? valueToRangeValue(entityData.bytesSentRate, unitTypes.byte).join(' ') + 'ps' : '-'}}
</div>
<!-- 曲线-->
<div class="row__content-loading">
@@ -84,8 +84,8 @@
</div>
</div>
<div class="row__content row__content-accept">
<div class="row__charts-msg">{{$t('overall.received')}}：
{{unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ') !== '- ' ? unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ') + 'ps' : '-'}}
<div class="row__charts-msg">{{$t('overall.received')}}:
{{valueToRangeValue(entityData.bytesReceivedRate, unitTypes.byte).join(' ') !== '- ' ? valueToRangeValue(entityData.bytesReceivedRate, unitTypes.byte).join(' ') + 'ps' : '-'}}
</div>
<!-- 曲线-->
<div class="row__content-loading">
@@ -101,7 +101,7 @@
<div class="circle-icon" v-if="score <= 2 || score === '-'" :class="{'data-score-red': score <= 2 || score === '-'}" ></div>
<div class="circle-icon" v-else-if="score <= 4" :class="{'data-score-yellow': score <= 4}" ></div>
<div class="circle-icon" v-else-if="score <= 6" :class="{'data-score-green': score <= 6}" ></div>
Score:{{score}}
Score:&nbsp;{{score}}
</div>
<loading :loading="loadingNetworkQuality" size="small" style="left: 1rem;width: 50%;"></loading>
@@ -240,7 +240,7 @@
import entityDetailMixin from './entityDetailMixin'
import { api } from '@/utils/api'
import { unitTypes } from '@/utils/constants'
import unitConvert from '@/utils/unit-convert'
import { valueToRangeValue } from '@/utils/unit-convert'
import Chart from '@/views/charts/Chart'
import _ from 'lodash'
import { get } from '@/utils/http'
@@ -468,7 +468,7 @@ export default {
},
entityCopy,
unitTypes,
unitConvert
valueToRangeValue
}
}
}

4
src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js
View File

@@ -3,7 +3,6 @@ import { get } from '@/utils/http'
import * as echarts from 'echarts'
import { entityListLineOption } from '@/views/charts/charts/chart-options'
import { riskLevelMapping, unitTypes } from '@/utils/constants'
import unitConvert from '@/utils/unit-convert'
import { shallowRef, markRaw } from 'vue'
import { metricOption } from '@/views/detections/options/detectionOptions'
import { sortBy, reverseSortBy, computeScore } from '@/utils/tools'
@@ -498,8 +497,7 @@ export default {
},
setup () {
return {
unitTypes,
unitConvert
unitTypes
}
},
mounted () {

4
src/views/entityExplorer/entityList/entityListMixin.js
View File

@@ -5,7 +5,7 @@ import * as echarts from 'echarts'
import { entityListLineOption } from '@/views/charts/charts/chart-options'
import { riskLevelMapping, unitTypes } from '@/utils/constants'
import { getSecond } from '@/utils/date-util'
import unitConvert from '@/utils/unit-convert'
import { valueToRangeValue } from '@/utils/unit-convert'
import { shallowRef } from 'vue'
export default {
@@ -20,7 +20,7 @@ export default {
trafficUrl: '',
chartOption: null,
unitTypes,
unitConvert,
valueToRangeValue,
echartsArray: []
}
},