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

feat: CN-1578 Subscriber详情KPI组件调整

Browse Source
This commit is contained in:
hanyuxia
2024-03-13 14:04:25 +08:00
parent 7af74b2a6d
commit f9f634b5d7
2 changed files with 41 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/assets/css/components/views/charts2/EntityDetailSubscriberKpi.scss
View File

@@ -21,22 +21,22 @@
border-radius: 4px;
height:calc(100% - 34px);
.subscriber-kpi-content {
height: calc(100% - 36px);
padding: 20px 0 20px 20px;
height: calc(100% - 38px);
margin: 20px;
display: flex;
flex-direction: column;
flex-direction: row;
justify-content:space-between;
align-items: center;
.panel-chart__no-data {
height: calc(100% - 46px);
}
.kpi-type {
display: flex;
flex-direction: column;
justify-content:space-between;
height: calc(100% - 65px);
.kpi-type-value {
.kpi-type_column {
display: flex;
flex-direction:column;
.kpi-type-value{
display: flex;
flex-direction: column;
padding-bottom:20px;
margin-bottom:30px;
.kpi-type-value-name {
line-height: 12px;
margin-bottom: 10px;
@@ -88,6 +88,13 @@
}
}
}
}
.kpi-type_last-value{
margin-bottom:0px !important;
}
.kpi-type_first-column{
font-size:24px !important;
line-height: 24px !important;
}
}
}

44
src/views/charts2/charts/entityDetail/EntityDetailSubscriberKpi.vue
View File

@@ -8,7 +8,7 @@
:end-time="timeFilter.endTime"
:date-range="timeFilter.dateRangeValue"
ref="dateTimeRange"
showPosition="left"
showPosition="right"
@change="reload"
/>
</div>
@@ -18,42 +18,44 @@
<chart-error v-if="showError" :content="errorMsg" style="top:34px;" />
<div class="subscriber-kpi-content" v-if="!isNoData && !showError">
<div class="kpi-type">
<div class="kpi-type-value">
<div class="kpi-type-value-name">{{$t('subscriber.volume')}}</div>
<div class="kpi-type_column">
<div class="kpi-type-value kpi-type_last-value ">
<div class="kpi-type-value-name kpi-type_first-column" >{{$t('subscriber.volume')}}</div>
<div class="kpi-type-data" >
<div class="kpi-type-value-number" >{{$_.get(kpiData, 'volume') ? unitConvert($_.get(kpiData, 'volume')[0], unitTypes.byte).join(' ') : '-'}}</div>
<div class="data-trend" v-if="$_.get(kpiData, 'volume')">
<div v-if="$_.get(kpiData, 'volume')[1] === 'up'" class="data-total-trend data-total-trend-red" >
<div class="kpi-type-value-number" style="font-size:30px;">{{$_.get(kpiData, 'volume') ? unitConvert($_.get(kpiData, 'volume')[0], unitTypes.byte).join(' ') : '-'}}</div>
<div class="data-trend" v-if="$_.get(kpiData, 'volume')" style="align-items: center;">
<div v-if="$_.get(kpiData, 'volume')[1] === 'up'" class="data-total-trend data-total-trend-red">
<i class="cn-icon-rise1 cn-icon"></i><span>{{$_.get(kpiData, 'volume')[2]}}</span>
</div>
<div v-else-if=" $_.get(kpiData, 'volume')[1] === 'down'" class="data-total-trend data-total-trend-green" >
<div v-else-if=" $_.get(kpiData, 'volume')[1] === 'down'" class="data-total-trend data-total-trend-green">
<i class="cn-icon-decline cn-icon"></i><span>{{$_.get(kpiData, 'volume')[2]}}</span>
</div>
<div v-else-if=" $_.get(kpiData, 'volume')[1] === 'noChange'" class="data-total-trend data-total-trend-black" >
<div v-else-if=" $_.get(kpiData, 'volume')[1] === 'noChange'" class="data-total-trend data-total-trend-black">
<i class="cn-icon-constant cn-icon"></i>
</div>
</div>
</div>
</div>
</div>
<div class="kpi-type_column">
<div class="kpi-type-value">
<div class="kpi-type-value-name">{{$t('subscriber.throughput')}}</div>
<div class="kpi-type-data" >
<div class="kpi-type-value-number" >{{$_.get(kpiData, 'throughput') ? valueToRangeValue($_.get(kpiData, 'throughput')[0], unitTypes.bps).join(' ') : '-'}}</div>
<div class="data-trend" v-if="$_.get(kpiData, 'throughput')">
<div v-if="$_.get(kpiData, 'throughput')[1] === 'up'" class="data-total-trend data-total-trend-red" >
<i class="cn-icon-rise1 cn-icon"></i><span>{{$_.get(kpiData, 'throughput')[2]}}</span>
</div>
<div v-else-if=" $_.get(kpiData, 'throughput')[1] === 'down'" class="data-total-trend data-total-trend-green" >
<i class="cn-icon-decline cn-icon"></i><span>{{$_.get(kpiData, 'throughput')[2]}}</span>
</div>
<div v-else-if=" $_.get(kpiData, 'throughput')[1] === 'noChange'" class="data-total-trend data-total-trend-black" >
<i class="cn-icon-constant cn-icon"></i>
</div>
<div v-if="$_.get(kpiData, 'throughput')[1] === 'up'" class="data-total-trend data-total-trend-red" >
<i class="cn-icon-rise1 cn-icon"></i><span>{{$_.get(kpiData, 'throughput')[2]}}</span>
</div>
<div v-else-if=" $_.get(kpiData, 'throughput')[1] === 'down'" class="data-total-trend data-total-trend-green" >
<i class="cn-icon-decline cn-icon"></i><span>{{$_.get(kpiData, 'throughput')[2]}}</span>
</div>
<div v-else-if=" $_.get(kpiData, 'throughput')[1] === 'noChange'" class="data-total-trend data-total-trend-black" >
<i class="cn-icon-constant cn-icon"></i>
</div>
</div>
</div>
</div>
<div class="kpi-type-value">
<div class="kpi-type-value kpi-type_last-value">
<div class="kpi-type-value-name">{{$t('subscriber.httpLatency')}}</div>
<div class="kpi-type-data" >
<div class="kpi-type-value-number" >{{$_.get(kpiData, 'httpLatency') ? valueToRangeValue($_.get(kpiData, 'httpLatency')[0], unitTypes.time).join(' ') : '-'}}</div>
@@ -70,6 +72,8 @@
</div>
</div>
</div>
</div>
<div class="kpi-type_column">
<div class="kpi-type-value">
<div class="kpi-type-value-name">{{$t('subscriber.sslLatency')}}</div>
<div class="kpi-type-data" >
@@ -87,7 +91,7 @@
</div>
</div>
</div>
<div class="kpi-type-value">
<div class="kpi-type-value kpi-type_last-value">
<div class="kpi-type-value-name">{{$t('subscriber.packetLoss')}}</div>
<div class="kpi-type-data" >
<div class="kpi-type-value-number" >{{$_.get(kpiData, 'packetLoss') ? valueToRangeValue($_.get(kpiData, 'packetLoss')[0], unitTypes.percent).join(' ') : '-'}}</div>