feat:add lines Echarts of 5g monitor page

Change-Id: I71666f3c193500cc65de35aa4464832a595d717d
Issue-ID: USECASEUI-370
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

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