diff options
author | 2019-12-10 10:21:28 +0800 | |
---|---|---|
committer | 2019-12-10 10:21:36 +0800 | |
commit | 73c1bb1a2b8b7975a73a42122bc00c04331d5e07 (patch) | |
tree | c852e8018de47e093abe524f8b1b0e33540c4cf2 /usecaseui-portal/src/app/views | |
parent | 85164a3048e72787655d927dea8c98b1dcda6ecb (diff) |
feat:add lines Echarts of 5g monitor page
Change-Id: I71666f3c193500cc65de35aa4464832a595d717d
Issue-ID: USECASEUI-370
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/views')
4 files changed, 112 insertions, 15 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 baf43f43..ca3c1eff 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 @@ -1,4 +1,5 @@ <div> + <h1>Slicing business Monitor</h1> <div nz-row> <div nz-col nzSpan="12" class="monitorDate"> <nz-date-picker @@ -17,11 +18,13 @@ <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 nz-col nzSpan="8" class="gutter-row col-boxshadow"> + <h4>Number Of Online Users</h4> + <app-line [initData]="onlineuserChartInit" [chartData]="onlineuserChartData"></app-line> </div> - <div nz-col nzSpan="9" class="gutter-row col-boxshadow"> - col-9 + <div nz-col nzSpan="8" class="gutter-row col-boxshadow"> + <h4>Slicing Total Bandwidth</h4> + <app-line [initData]="bandwidthChartInit" [chartData]="bandwidthChartData"></app-line> </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 152dc218..a100638b 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,5 +1,5 @@ .monitorDate{ - margin-left: 2%; + //margin-left: 2%; margin-top: 30px; } .businessmonitor_imagecontainer { @@ -7,10 +7,11 @@ margin-bottom: 20px; } .charts{ - margin: 30px 0px; + margin: 30px 0 10px 0; } .col-boxshadow{ padding: 25px; + margin: 0 10px; border-radius: 5px; box-shadow: #a9a9a92e 0px 0px 15px 10px; h4{ 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 e7d05ced..d1ee6ae9 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,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import {SlicingTaskServices} from '.././../../core/services/slicingTaskServices'; -import {pieChartconfig} from './monitorEchartsConfig'; +import {pieChartconfig,lineChartconfig} from './monitorEchartsConfig'; @Component({ selector: 'app-monitor-5g', templateUrl: './monitor-5g.component.html', @@ -17,13 +17,24 @@ export class Monitor5gComponent implements OnInit { pageSize: number = 10; total: number = 0; loading = false; + selectDate: number = 0; + trafficData: any[] =[]; trafficLegend: any[] =[]; - onlineusersData: any[] =[]; - bandwidthData: any[] =[]; - selectDate: number = 0; trafficChartInit :Object = pieChartconfig; trafficChartData :Object; + + onlineusersData: any[] =[]; + onlineuserXAxis :any[] = []; + onlineuserLegend :any[] = []; + onlineuserChartInit :Object = lineChartconfig; + onlineuserChartData :Object; + + bandwidthData: any[] =[]; + bandwidthXAxis :any[] = []; + bandwidthLegend :any[] = []; + bandwidthChartInit :Object = lineChartconfig; + bandwidthChartData :Object; ngOnInit() { this.getBusinessList() } @@ -79,7 +90,6 @@ export class Monitor5gComponent implements OnInit { this.myhttp.getFetchTraffic(service_list,time).subscribe (res => { const { result_header: { result_code }, result_body: { slicing_usage_traffic_list } } = res; 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, @@ -110,7 +120,27 @@ export class Monitor5gComponent implements OnInit { this.myhttp.getFetchOnlineusers(service_list,time).subscribe (res => { const { result_header: { result_code }, result_body: { slicing_online_user_list } } = res; if (+result_code === 200) { - this.onlineusersData = slicing_online_user_list; + slicing_online_user_list[0].online_user_list.map((key)=>{ + this.onlineuserXAxis.push(key.timestamp) + }); + slicing_online_user_list.forEach((item)=>{ + this.onlineuserLegend.push(item.service_id); + this.onlineusersData.push({ + name: item.service_id, + type: 'line', + data:this.getOnlineuserSeriesData(item) + }) + }); + this.onlineuserChartData = { + legend:{ + bottom: '0px', + data: this.onlineuserLegend + }, + xAxis: { + data: this.onlineuserXAxis + }, + series: this.onlineusersData + }; } }) } @@ -118,9 +148,42 @@ export class Monitor5gComponent implements OnInit { this.myhttp.getFetchBandwidth(service_list,time).subscribe (res => { const { result_header: { result_code }, result_body: { slicing_total_bandwidth_list } } = res; if (+result_code === 200) { - this.bandwidthData = slicing_total_bandwidth_list; + slicing_total_bandwidth_list[0].total_bandwidth_list.map((key)=>{ + this.bandwidthXAxis.push(key.timestamp) + }); + slicing_total_bandwidth_list.forEach((item)=>{ + this.bandwidthLegend.push(item.service_id); + this.bandwidthData.push({ + name: item.service_id, + type: 'line', + data:this.getBandwidthSeriesData(item) + }) + }); + this.bandwidthChartData = { + legend:{ + bottom: '0px', + data: this.bandwidthLegend + }, + xAxis: { + data: this.bandwidthXAxis + }, + series: this.bandwidthData + }; } }) } - + getOnlineuserSeriesData(item){ + let datas = []; + item.online_user_list.forEach((keys)=>{ + datas.push(keys.online_users) + }) + return datas + } + getBandwidthSeriesData(item){ + let datas = []; + item.total_bandwidth_list.forEach((keys)=>{ + datas.push(keys.total_bandwidth) + }) + return datas + } } diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitorEchartsConfig.ts b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitorEchartsConfig.ts index 59ed7f25..e2bde449 100644 --- a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitorEchartsConfig.ts +++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitorEchartsConfig.ts @@ -33,4 +33,34 @@ export const pieChartconfig = { } }] } -};
\ No newline at end of file +}; +export const lineChartconfig = { + height: 320, + option: { + legend: { + bottom: '0px', + data: [] + }, + xAxis: { + data: [] + }, + color: ["#7AC0EF", "#FB7788","#6A86D8","#A6BFE4","#748CDC", "#7277D4", "#7067CE", "#B9B0F7", "#7DCFF5"], + series: [ + { + name: '', + type: 'line', + data: [] + }, + { + name: 'Memory', + type: 'line', + data: [] + }, + { + name: 'Disk', + type: 'line', + data: [] + } + ] + } +}
\ No newline at end of file |