diff options
4 files changed, 103 insertions, 4 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 74a88dc7..baf43f43 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 @@ -3,6 +3,7 @@ <div nz-col nzSpan="12" class="monitorDate"> <nz-date-picker nzShowTime + [nzShowToday]="false" nzFormat="yyyy-MM-dd HH:mm:ss" nzPlaceHolder="Select Time" ngModel @@ -11,6 +12,18 @@ ></nz-date-picker> </div> </div> + <div nz-row nzType="flex" nzGutter="16" 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> + </div> + <div nz-col nzSpan="9" class="gutter-row col-boxshadow"> + col-9 + </div> + <div nz-col nzSpan="9" class="gutter-row col-boxshadow"> + col-9 + </div> + </div> <div class="slicing-resource-table"> <div class="slicing-resource-table-list"> <nz-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 cad2aeaa..152dc218 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 @@ -1,4 +1,19 @@ .monitorDate{ margin-left: 2%; margin-top: 30px; +} +.businessmonitor_imagecontainer { + width: 100%; + margin-bottom: 20px; +} +.charts{ + margin: 30px 0px; +} +.col-boxshadow{ + padding: 25px; + border-radius: 5px; + box-shadow: #a9a9a92e 0px 0px 15px 10px; + h4{ + font-size: 18px; + } }
\ 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 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 + }] + }; } }) } diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitorEchartsConfig.ts b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitorEchartsConfig.ts new file mode 100644 index 00000000..59ed7f25 --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitorEchartsConfig.ts @@ -0,0 +1,36 @@ +export const pieChartconfig = { + height: 320, + option: { + tooltip: { + trigger: 'item', + formatter: '{b}\n{c},{d}%' + }, + legend: { + orient: 'vertical', + left: '0px', + bottom: '0px', + itemWidth: 10, + itemHeight: 10, + textStyle: { + color: "#3C4F8C" + }, + data: [] + }, + color: ["#7AC0EF", "#FB7788","#6A86D8","#A6BFE4","#748CDC", "#7277D4", "#7067CE", "#B9B0F7", "#7DCFF5"], + series: [{ + name: "", + radius: '55%', + center: ['50%', '45%'], + label: { + normal: { + show: false, + }, + emphasis: { + show: false, + formatter: '{b}\n{c},{d}%', + color: "#3C4F8C" + } + } + }] + } +};
\ No newline at end of file |