summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src
diff options
context:
space:
mode:
authorcyuamber <xuranyjy@chinamobile.com>2019-12-10 10:21:28 +0800
committercyuamber <xuranyjy@chinamobile.com>2019-12-10 10:21:36 +0800
commit73c1bb1a2b8b7975a73a42122bc00c04331d5e07 (patch)
treec852e8018de47e093abe524f8b1b0e33540c4cf2 /usecaseui-portal/src
parent85164a3048e72787655d927dea8c98b1dcda6ecb (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')
-rw-r--r--usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html11
-rw-r--r--usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less5
-rw-r--r--usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts79
-rw-r--r--usecaseui-portal/src/app/views/fcaps/monitor-5g/monitorEchartsConfig.ts32
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