diff options
author | 2019-12-19 15:20:57 +0800 | |
---|---|---|
committer | 2019-12-19 15:21:02 +0800 | |
commit | a2cd3a3f639dc40fb4d55125de9fbe6db9960d1f (patch) | |
tree | 46f46d45e778d4f0766900f4dec6446ad101f303 /usecaseui-portal/src/app | |
parent | 1c006f9d6141e264961f0fed4cbd27b931580dd5 (diff) |
feat:Optimize monitoring interface chart loading of slicing monitor page
Change-Id: I065fef0815a944824baa41d6925aed455a85fcec
Issue-ID: USECASEUI-370
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app')
3 files changed, 29 insertions, 7 deletions
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html index 921e5edb..3f51dbc9 100644 --- a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html +++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html @@ -15,16 +15,25 @@ </div> <div nz-row nzType="flex" class="charts"> <div nz-col nzSpan="6" class="gutter-row col-boxshadow"> - <h4>Slicing Use Traffic</h4> - <app-pie [initData]="trafficChartInit" [chartData]="trafficChartData"></app-pie> + <nz-spin [nzSpinning]="isSpinningTraffic"> + <h4>Slicing Use Traffic</h4> + <app-pie [initData]="trafficChartInit" [chartData]="trafficChartData"></app-pie> + <div *ngIf="!isSpinningTraffic && trafficData.length === 0" class="nodata">NO Data</div> + </nz-spin> </div> <div nz-col nzSpan="8" class="gutter-row col-boxshadow"> - <h4>Number Of Online Users</h4> - <app-line [initData]="onlineuserChartInit" [chartData]="onlineuserChartData"></app-line> + <nz-spin [nzSpinning]="isSpinningOnlineuser"> + <h4>Number Of Online Users</h4> + <app-line [initData]="onlineuserChartInit" [chartData]="onlineuserChartData"></app-line> + <div *ngIf="!isSpinningOnlineuser && onlineusersData.length === 0" class="nodata">NO Data</div> + </nz-spin> </div> <div nz-col nzSpan="8" class="gutter-row col-boxshadow"> - <h4>Slicing Total Bandwidth</h4> - <app-line [initData]="bandwidthChartInit" [chartData]="bandwidthChartData"></app-line> + <nz-spin [nzSpinning]="isSpinningBandwidth"> + <h4>Slicing Total Bandwidth</h4> + <app-line [initData]="bandwidthChartInit" [chartData]="bandwidthChartData"></app-line> + <div *ngIf="!isSpinningBandwidth && bandwidthData.length === 0" class="nodata">NO Data</div> + </nz-spin> </div> </div> <div class="slicing-resource-table"> diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less index f740102b..1445978f 100644 --- a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less +++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less @@ -15,11 +15,18 @@ } .col-boxshadow { padding: 25px; + position: relative; margin: 0 1%; border-radius: 5px; box-shadow: #a9a9a92e 0px 0px 15px 10px; h4 { font-size: 18px; } + .nodata{ + position: absolute; + left: 50%; + top: 50%; + transform: translateX(-50%) translateY(-50%); + } } }
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts index 21132892..bfee94f4 100644 --- a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts +++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts @@ -19,6 +19,9 @@ export class Monitor5gComponent implements OnInit { total: number = 0; loading = false; selectDate: number = 0; + isSpinningTraffic: boolean =true; + isSpinningOnlineuser: boolean =true; + isSpinningBandwidth: boolean =true; trafficData: any[] = []; trafficLegend: any[] = []; @@ -83,7 +86,7 @@ export class Monitor5gComponent implements OnInit { service_list:[] }; this.listOfData.forEach(item => { - requestBody.service_list.push({ service_id: item.service_instance_id }); + requestBody.service_list.push({ service_id: item.service_snssai }); }); this.fetchTrafficData(requestBody, time); this.fetchOnlineusersData(requestBody, time); @@ -91,6 +94,7 @@ export class Monitor5gComponent implements OnInit { } fetchTrafficData(service_list, time) { this.myhttp.getFetchTraffic(service_list, time).subscribe(res => { + this.isSpinningTraffic = false; const { result_header: { result_code }, result_body: { slicing_usage_traffic_list } } = res; if (+result_code === 200 && slicing_usage_traffic_list.length > 0) { this.trafficData = []; @@ -123,6 +127,7 @@ export class Monitor5gComponent implements OnInit { } fetchOnlineusersData(service_list, time) { this.myhttp.getFetchOnlineusers(service_list, time).subscribe(res => { + this.isSpinningOnlineuser = false; const { result_header: { result_code }, result_body: { slicing_online_user_list } } = res; if (+result_code === 200) { this.onlineuserXAxis = []; @@ -155,6 +160,7 @@ export class Monitor5gComponent implements OnInit { } fetchBandwidthData(service_list, time) { this.myhttp.getFetchBandwidth(service_list, time).subscribe(res => { + this.isSpinningBandwidth = false; const { result_header: { result_code }, result_body: { slicing_total_bandwidth_list } } = res; if (+result_code === 200) { this.bandwidthXAxis = []; |