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, 16 insertions, 11 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];