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

CN-464 实体列表下拉详情中网络质量的5个单值图需显示在一行；单值图中为0的值应显示0，不可显示为'-'

Browse Source
This commit is contained in:
hyx
2022-04-06 20:16:30 +08:00
parent 46c8dbe94e
commit b83a856e98
6 changed files with 76 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/assets/css/components/views/charts/chartSingleValue.scss
View File

@@ -456,31 +456,30 @@
align-items: center;
justify-content: left;
height: 100%;
width: unset;
flex: 0 0 270px;
flex-wrap: wrap;
flex: 0 0 auto;
flex-wrap: nowrap;
margin-bottom: 10px;
.single-value-icon__box {
display: flex;
align-items: center;
justify-content: left;
margin-right: 12px;
margin-right: 5px;
flex: 0 0 80;
}
.single-value__icon {
display: flex;
justify-content: center;
width: 56px;
height: 56px;
width: 40px;
height: 40px;
background-color: $--chart-single-value-icon-background-color;
border-radius: 50%;
i {
display: flex;
align-items: center;
font-size: 28px;
font-size: 20px;
color: $--color-primary;
}
}
@@ -498,20 +497,18 @@
}
.content__data {
margin-bottom: 7%;
font-size: 16px;
margin-bottom: 5px;
font-size: 12px;
color: #333333;
font-weight: bold;
}
.content__title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 14px !important;
font-size: 12px !important;
color: #7e8081;
margin-bottom: 7%;
padding: 5px 6px 5px 5px;
margin-bottom: 5px;
padding: 3px 4px 3px 3px;
}
.title-background-color {
@@ -522,7 +519,7 @@
.content__percentile {
white-space: nowrap;
text-overflow: ellipsis;
font-size: 14px;
font-size: 12px;
color: #666666;
display:flex;
flex-direction: row;
@@ -530,7 +527,7 @@
.circle__content {
display:flex;
flex-display:row;
margin-right:15px;
margin-right:4px;
.percentile__title-color {
color:#9b9b9b
@@ -565,7 +562,8 @@
}
.single-value__unit {
padding-right: 10px;
padding-left:0px;
padding-right: 5px;
color: #333333;
font-size: 14px;
font-weight: bold;

11
src/views/charts/charts/ChartSingleValue.vue
View File

@@ -35,12 +35,11 @@
<div class="single-value__content" v-if="isSingleValueWithPercentileRight(type)">
<div class="data__title-in-one">
<div class="content__data">
<span>{{
<span style="white-space: nowrap;">{{
handleSingleValue[0] || handleSingleValue[0] === 0
? handleSingleValue[0]
: '-'
}}</span>
<span class="single-value__unit">{{ handleSingleValue[1] }}</span>
}}</span><span class="single-value__unit">{{handleSingleValue[1] }}</span>
</div>
<div class="content__title title-background-color">
<span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{
@@ -281,7 +280,7 @@ export default {
handleSingleValue () {
let value = null
if (this.type === 506 || this.type === 507) {
value = this.chartData && (this.chartData[0].value || this.chartData[0].value === 0) ? this.chartData[0].value : ''
value = this.chartData && (this.chartData.value || this.chartData.value === 0) ? this.chartData.value : ''
} else {
value = this.$_.isEmpty(this.chartData) || this.$_.get(this, 'chartData')
? this.chartData
@@ -294,8 +293,8 @@ export default {
let p50 = ''
let p90 = ''
if (this.type === 506 || this.type === 507) {
p50 = this.chartData ? unitConvert(this.chartData[0].p50, unitType) : ''
p90 = this.chartData ? unitConvert(this.chartData[0].p90, unitType) : ''
p50 = this.chartData ? unitConvert(this.chartData.p50, unitType) : ''
p90 = this.chartData ? unitConvert(this.chartData.p90, unitType) : ''
}
switch (unitType) {

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

@@ -100,7 +100,7 @@
<div class="overview-item">
<div class="overview__title">{{$t('overall.networkQuality')}}</div>
<div class="overview__content">
<div class="overview__row">
<div class="overview__row" style="flex-wrap: nowrap;">
<chart-single-value
v-for="(chartInfo, i) in singleValues.chartInfos"
:chart-info="chartInfo"

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

@@ -104,7 +104,7 @@
<div class="overview-item">
<div class="overview__title">{{$t('overall.networkQuality')}}</div>
<div class="overview__content">
<div class="overview__row">
<div class="overview__row" style="flex-wrap: nowrap;">
<chart-single-value
v-for="(chartInfo, i) in singleValues.chartInfos"
:chart-info="chartInfo"

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

@@ -123,7 +123,7 @@
<div class="overview-item">
<div class="overview__title">{{$t('overall.networkQuality')}}</div>
<div class="overview__content">
<div class="overview__row">
<div class="overview__row" style="flex-wrap: nowrap;">
<chart-single-value
v-for="(chartInfo, i) in singleValues.chartInfos"
:chart-info="chartInfo"

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

@@ -148,17 +148,58 @@ export default {
if (this.networkQuantityUrl) {
get(this.networkQuantityUrl, this.getQueryParams()).then(response => {
if (response.code === 200) {
this.entityData.establishLatency = response.data.result.establishLatency
this.entityData.httpResponseLatency = response.data.result.httpResponseLatency
this.entityData.sslConLatency = response.data.result.sslConLatency
this.entityData.sequenceGapLossPercent = response.data.result.sequenceGapLossPercent
this.entityData.pktRetransPercent = response.data.result.pktRetransPercent
this.entityData.establishLatencyAvg = response.data.result.establishLatencyAvg
this.entityData.establishLatencyP50 = response.data.result.establishLatencyP50
this.entityData.establishLatencyP90 = response.data.result.establishLatencyP90
this.singleValues.chartDatas.splice(0, 1, this.$_.get(this.entityData, 'establishLatency'))
this.singleValues.chartDatas.splice(1, 1, this.$_.get(this.entityData, 'httpResponseLatency'))
this.singleValues.chartDatas.splice(2, 1, this.$_.get(this.entityData, 'sslConLatency'))
this.singleValues.chartDatas.splice(3, 1, this.$_.get(this.entityData, 'sequenceGapLossPercent'))
this.singleValues.chartDatas.splice(4, 1, this.$_.get(this.entityData, 'pktRetransPercent'))
this.entityData.httpResponseLantencyAvg = response.data.result.httpResponseLantencyAvg
this.entityData.httpResponseLantencyP50 = response.data.result.httpResponseLantencyP50
this.entityData.httpResponseLantencyP90 = response.data.result.httpResponseLantencyP90
this.entityData.sslConLatencyAvg = response.data.result.sslConLatencyAvg
this.entityData.sslConLatencyP50 = response.data.result.sslConLatencyP50
this.entityData.sslConLatencyP90 = response.data.result.sslConLatencyP90
this.entityData.sequenceGapLossAvg = response.data.result.sequenceGapLossAvg
this.entityData.sequenceGapLossP50 = response.data.result.sequenceGapLossP50
this.entityData.sequenceGapLossP90 = response.data.result.sequenceGapLossP90
this.entityData.pktRetransAvg = response.data.result.pktRetransAvg
this.entityData.pktRetransP50 = response.data.result.pktRetransP50
this.entityData.pktRetransP90 = response.data.result.pktRetransP90
const establishLatency = {
value: this.entityData.establishLatencyAvg,
p50: this.entityData.establishLatencyP50,
p90: this.entityData.establishLatencyP90
}
this.singleValues.chartDatas.splice(0, 1, establishLatency)
const httpResponseLatency = {
value: this.entityData.httpResponseLantencyAvg,
p50: this.entityData.httpResponseLantencyP50,
p90: this.entityData.httpResponseLantencyP90
}
this.singleValues.chartDatas.splice(1, 1, httpResponseLatency)
const sslConLatency = {
value: this.entityData.sslConLatencyAvg,
p50: this.entityData.sslConLatencyP50,
p90: this.entityData.sslConLatencyP90
}
this.singleValues.chartDatas.splice(2, 1, sslConLatency)
const sequenceGapLoss = {
value: this.entityData.sequenceGapLossAvg,
p50: this.entityData.sequenceGapLossP50,
p90: this.entityData.sequenceGapLossP90
}
this.singleValues.chartDatas.splice(3, 1, sequenceGapLoss)
const pktRetransPercent = {
value: this.entityData.pktRetransAvg,
p50: this.entityData.pktRetransP50,
p90: this.entityData.pktRetransP90
}
this.singleValues.chartDatas.splice(4, 1, pktRetransPercent)
console.log(this.singleValues.chartDatas)
}
})
}
@@ -181,7 +222,7 @@ export default {
})
const max = parseFloat(sorted[0].bytes)
const maxId = parseFloat(sortedId[0].commonIngressLinkId)
this.entityData.linkInPercent = (parseFloat(max / sum)).toFixed(2)
this.entityData.linkInPercent = (parseFloat(max / sum) * 100).toFixed(2)
this.entityData.linkInId = maxId
}
}
@@ -206,7 +247,7 @@ export default {
})
const max = parseFloat(sorted[0].bytes)
const maxId = parseFloat(sortedId[0].commonEgressLinkId)
this.entityData.linkOutPercent = (parseFloat(max / sum)).toFixed(2)
this.entityData.linkOutPercent = (parseFloat(max / sum) * 100).toFixed(2)
this.entityData.linkOutId = maxId
}
}