diff options
Diffstat (limited to 'usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts')
-rw-r--r-- | usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts | 43 |
1 files changed, 39 insertions, 4 deletions
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 5511c1c0..e7d05ced 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 @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; import {SlicingTaskServices} from '.././../../core/services/slicingTaskServices'; +import {pieChartconfig} from './monitorEchartsConfig'; @Component({ selector: 'app-monitor-5g', templateUrl: './monitor-5g.component.html', @@ -17,9 +18,12 @@ export class Monitor5gComponent implements OnInit { total: number = 0; loading = false; trafficData: any[] =[]; + trafficLegend: any[] =[]; onlineusersData: any[] =[]; bandwidthData: any[] =[]; - selectDate: Date = null; + selectDate: number = 0; + trafficChartInit :Object = pieChartconfig; + trafficChartData :Object; ngOnInit() { this.getBusinessList() } @@ -45,16 +49,24 @@ export class Monitor5gComponent implements OnInit { } onDateChange(result: Date): void { console.log('Selected Time: ', result); + if(result === null){ + this.selectDate = 0; + this.getChartsData() + } } onDateOk(result: Date): void { console.log('onOk', result); - this.selectDate = result; + this.selectDate = result.valueOf(); + this.getChartsData(); } getChartsData = (time = new Date().getTime()) => { if (!this.listOfData.length) { return false; } + if(this.selectDate !==0){ + time = this.selectDate + } const service_list = []; this.listOfData.forEach(item => { service_list.push({service_id: item.service_instance_id}); @@ -66,8 +78,31 @@ export class Monitor5gComponent implements OnInit { fetchTrafficData(service_list, time){ this.myhttp.getFetchTraffic(service_list,time).subscribe (res => { const { result_header: { result_code }, result_body: { slicing_usage_traffic_list } } = res; - if (+result_code === 200) { - this.trafficData = slicing_usage_traffic_list; + if (+result_code === 200 && slicing_usage_traffic_list.length >0) { + console.log(this.trafficChartInit,"----trafficChartInit") + slicing_usage_traffic_list.forEach((item)=>{ + this.trafficData.push({ + name:item.service_id, + value:item.traffic_data + }); + this.trafficLegend.push(item.service_id) + }); + this.trafficChartData = { + legend:{ + orient: 'vertical', + left: '0px', + bottom: '0px', + itemWidth: 10, + itemHeight: 10, + textStyle: { + color: "#3C4F8C" + }, + data: this.trafficLegend + }, + series: [{ + data: this.trafficData + }] + }; } }) } |