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

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

4 files changed, 30 insertions, 15 deletions

diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html
index 9ece597e..5a11ab1d 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html
@@ -1,15 +1,17 @@
+<nz-spin [nzSpinning]="isSpinning">
 <app-basic-info
         [businessRequirement]="businessRequirement"
         [NSTinfo]="NSTinfo"
         [taskModel]="taskModel"
 >
 </app-basic-info>
-<nz-list class="taskmodel_list"  nzBordered [nzHeader]="'Slicing NSI £º'" [nzFooter]="null">
+    <nz-list class="taskmodel_list" nzBordered [nzHeader]="'Slicing NSI :'" [nzFooter]="null">
     <nz-table
             #basicTable
             [nzData]="nsiInfo"
             [nzShowPagination]="false"
             nzHideOnSinglePage
+                class="model-table-padding"
     >
         <thead>
         <tr>
@@ -34,4 +36,5 @@
         </ng-template>
         </tbody>
     </nz-table>
-</nz-list>
\ No newline at end of file
+</nz-list>
+</nz-spin>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.less
index 6e097cd8..8b137891 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.less
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.less
@@ -1,3 +1 @@
-.taskmodel_list{
-  margin-bottom: 20px;
-}
\ No newline at end of file
+
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.ts
index 8115a79b..253e1c32 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.ts
@@ -18,9 +18,10 @@ export class SlicingBusinessModelComponent implements OnInit {
 
     @Input() businessId;
     businessRequirement: any[];
-    NSTinfo: any[];
-    nsiInfo: any[];
+    NSTinfo: any[] = [];
+    nsiInfo: any[] = [];
     taskModel: boolean = false;
+    isSpinning: boolean = true;
     ngOnInit() {
         console.log(this.businessId, "id");
         this.getDetail()
@@ -28,11 +29,14 @@ export class SlicingBusinessModelComponent implements OnInit {
 
     getDetail() {
         this.myhttp.getSlicingBusinessDetail(this.businessId).subscribe(res => {
-            const {result_header: {result_code}, result_body: {business_demand_info,nst_info,nsi_info} } = res;
+            const { result_body, result_header: { result_code } } = res;
             if (+result_code === 200) {
-                // business_demand_info.coverage_area_ta_list.map((item)=>{
-                //     item.replace(";","   ")
-                // });
+                this.isSpinning = false;
+                const {business_demand_info,business_demand_info: { coverage_area_ta_list },nst_info,nsi_info}  = result_body;
+                business_demand_info.area = coverage_area_ta_list.map(item => {
+                    item = item.split(';').join('-');
+                    return item
+                });
                 this.businessRequirement = [business_demand_info];
                 this.NSTinfo = [nst_info];
                 this.nsiInfo = [nsi_info];
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts
index 515a4d3d..a524b8bb 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts
@@ -20,7 +20,9 @@ export class SlicingBusinessTableComponent implements OnInit {
         this.getBusinessList()
     }
     ngOnDestroy() {
-        clearInterval(this.progressingTimer);
+        this.progressingTimer.forEach((item) => {
+            clearInterval(item.timer);
+        })
     }
     selectedValue:string = BUSINESS_STATUS[0];
     listOfData: any[] = [];
@@ -30,7 +32,7 @@ export class SlicingBusinessTableComponent implements OnInit {
     loading = false;
     isSelect: boolean = false;
     statusOptions: any[] = BUSINESS_STATUS;
-    progressingTimer :any;
+    progressingTimer :any[] = [];
 
 
     getBusinessList (): void{
@@ -175,11 +177,19 @@ export class SlicingBusinessTableComponent implements OnInit {
                     .subscribe((data) => {
                         if (data.result_body.operation_progress < 100) {
                             callback(data.result_body);
-                            this.progressingTimer = setTimeout(()=>{
+                            let progressSetTimeOut = setTimeout(() => {
                                 requery();
                             },5000);
+                            this.progressingTimer.push({
+                                id:obj.serviceId,
+                                timer:progressSetTimeOut
+                            })
                         } else {
-                            clearInterval(this.progressingTimer);
+                            this.progressingTimer.forEach((item) => {
+                                if(item.serviceId === obj.serviceId){
+                                    clearInterval(item.timer);
+                                }
+                            });
                             res(data.result_body);
                         }
                     })