feat:opmizite of slicing business page & 5G slicing monitor page

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

3 files changed, 38 insertions, 22 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 ca3c1eff..921e5edb 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,4 @@
-<div>
+<div class="monitor-content">
     <h1>Slicing business Monitor</h1>
     <div nz-row>
         <div nz-col nzSpan="12" class="monitorDate">
@@ -13,7 +13,7 @@
             ></nz-date-picker>
         </div>
     </div>
-    <div nz-row nzType="flex" nzGutter="16" class="charts">
+    <div nz-row nzType="flex" 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>
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 a100638b..f740102b 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,20 +1,25 @@
-.monitorDate{
-  //margin-left: 2%;
-  margin-top: 30px;
-}
-.businessmonitor_imagecontainer {
-  width: 100%;
-  margin-bottom: 20px;
-}
-.charts{
-  margin: 30px 0 10px 0;
-}
-.col-boxshadow{
-  padding: 25px;
-  margin: 0 10px;
-  border-radius: 5px;
-  box-shadow: #a9a9a92e 0px 0px 15px 10px;
-  h4{
-    font-size: 18px;
+.monitor-content {
+  h1{
+    padding: 20px;
+  }
+  .monitorDate {
+    margin-left: 20px;
+    margin-top: 30px;
+  }
+  .businessmonitor_imagecontainer {
+    width: 100%;
+    margin-bottom: 20px;
+  }
+  .charts {
+    margin: 30px 0 10px 10px !important;
+  }
+  .col-boxshadow {
+    padding: 25px;
+    margin: 0 1%;
+    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 e1eee188..0ad68c55 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,7 @@
 import { Component, OnInit } from '@angular/core';
 import { SlicingTaskServices } from '.././../../core/services/slicingTaskServices';
 import { pieChartconfig, lineChartconfig } from './monitorEchartsConfig';
+import *as moment from 'moment';
 @Component({
     selector: 'app-monitor-5g',
     templateUrl: './monitor-5g.component.html',
@@ -90,6 +91,8 @@ 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) {
+                this.trafficData = [];
+                this.trafficLegend = [];
                 slicing_usage_traffic_list.forEach((item) => {
                     this.trafficData.push({
                         name: item.service_id,
@@ -120,8 +123,12 @@ 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.onlineuserXAxis = [];
+                this.onlineusersData = [];
+                this.onlineuserLegend = [];
                 slicing_online_user_list[0].online_user_list.map((key) => {
-                    this.onlineuserXAxis.push(key.timestamp)
+                    let date = moment(Number(key.timestamp)).format('YYYY-MM-DD/HH:mm').split("/")[1];
+                    this.onlineuserXAxis.push(date)
                 });
                 slicing_online_user_list.forEach((item) => {
                     this.onlineuserLegend.push(item.service_id);
@@ -148,8 +155,12 @@ 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.bandwidthXAxis = [];
+                this.bandwidthData = [];
+                this.bandwidthLegend = [];
                 slicing_total_bandwidth_list[0].total_bandwidth_list.map((key) => {
-                    this.bandwidthXAxis.push(key.timestamp)
+                    let date = moment(Number(key.timestamp)).format('YYYY-MM-DD/HH:mm').split("/")[1];
+                    this.bandwidthXAxis.push(date)
                 });
                 slicing_total_bandwidth_list.forEach((item) => {
                     this.bandwidthLegend.push(item.service_id);