feat:add pie echarts of monitor 5g page

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

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