feat:add slicing business tableList of monitor 5g page

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

3 files changed, 104 insertions, 6 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 951eb5e7..74a88dc7 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,3 +1,54 @@
-<p>
-  monitor-5g works!
-</p>
+<div>
+    <div nz-row>
+        <div nz-col nzSpan="12" class="monitorDate">
+            <nz-date-picker
+                    nzShowTime
+                    nzFormat="yyyy-MM-dd HH:mm:ss"
+                    nzPlaceHolder="Select Time"
+                    ngModel
+                    (ngModelChange)="onDateChange($event)"
+                    (nzOnOk)="onDateOk($event)"
+            ></nz-date-picker>
+        </div>
+    </div>
+    <div class="slicing-resource-table">
+        <div class="slicing-resource-table-list">
+            <nz-table
+                    #basicTable
+                    [nzData]="listOfData"
+                    [nzFrontPagination]="false"
+                    nzShowSizeChanger
+                    [nzPageSizeOptions]="[6,8,10]"
+                    [nzTotal]='total'
+                    [(nzPageSize)]="pageSize"
+                    [(nzPageIndex)]='pageIndex'
+                    [nzLoading]="loading"
+                    (nzPageIndexChange)="searchData()"
+                    (nzPageSizeChange)="searchData(true)"
+            >
+                <thead>
+                <tr>
+                    <th>Service Instance Id</th>
+                    <th>Service Instance Name</th>
+                    <th>Service Type</th>
+                    <th>S-NSSAI</th>
+                    <th>Status</th>
+                </tr>
+                </thead>
+                <tbody>
+                <ng-template ngFor let-data [ngForOf]="basicTable.data" let-i="index">
+                    <tr>
+                        <td>{{ data.service_instance_id }}</td>
+                        <td>{{ data.service_instance_name }}</td>
+                        <td>{{ data.service_type }}</td>
+                        <td>{{ data.service_snssai }}</td>
+                        <td>
+                            {{ data.orchestration_status }}
+                        </td>
+                    </tr>
+                </ng-template>
+                </tbody>
+            </nz-table>
+        </div>
+    </div>
+</div>
\ No newline at end of file
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 e69de29b..cad2aeaa 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
@@ -0,0 +1,4 @@
+.monitorDate{
+  margin-left: 2%;
+  margin-top: 30px;
+}
\ 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 128f1ba4..ac7cc905 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,5 @@
 import { Component, OnInit } from '@angular/core';
-
+import {SlicingTaskServices} from '.././../../core/services/slicingTaskServices';
 @Component({
   selector: 'app-monitor-5g',
   templateUrl: './monitor-5g.component.html',
@@ -7,9 +7,52 @@ import { Component, OnInit } from '@angular/core';
 })
 export class Monitor5gComponent implements OnInit {
 
-  constructor() { }
-
+    constructor(
+        private myhttp: SlicingTaskServices
+    ) {
+    }
+    listOfData: any[] = [];
+    pageIndex: number = 1;
+    pageSize: number = 10;
+    total: number = 0;
+    loading = false;
   ngOnInit() {
+      this.getBusinessList()
   }
 
+    getBusinessList (): void{
+        this.loading = true;
+        let paramsObj = {
+            pageNo: this.pageIndex,
+            pageSize: this.pageSize
+        };
+        this.myhttp.getSlicingBusinessList(paramsObj,false).subscribe (res => {
+            const { result_header: { result_code }, result_body: { slicing_business_list,record_number } } = res;
+            if (+result_code === 200) {
+                this.total = record_number;
+                this.loading = false;
+                this.listOfData = [].concat(slicing_business_list)
+            }
+        })
+    }
+    searchData(reset: boolean = false) {
+        this.getBusinessList();
+    }
+    onDateChange(result: Date): void {
+        console.log('Selected Time: ', result);
+    }
+
+    onDateOk(result: Date): void {
+        console.log('onOk', result);
+    }
+    getChartsData = (time = new Date().getTime()) => {
+        if (!this.listOfData.length) {
+            return false;
+        }
+        const service_list = [];
+        this.listOfData.forEach(item => {
+            service_list.push({service_id: item.service_instance_id});
+        });
+    }
+
 }