From 7a7b81477be87698d847f9424fa58d4cdf64a143 Mon Sep 17 00:00:00 2001
From: cyuamber <xuranyjy@chinamobile.com>
Date: Wed, 4 Dec 2019 20:29:15 +0800
Subject: feat:slicing business page basic functions code

Change-Id: Ifae9e28151a746c1258e181c05154e86b3f89aee
Issue-ID: USECASEUI-352
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
---
 usecaseui-portal/src/app/app.module.ts             |   6 +-
 .../src/app/core/services/slicingTaskServices.ts   |  22 +++
 .../src/app/mock/json/activateSlicingService.json  |   9 +
 .../app/mock/json/deactivateSlicingService.json    |   9 +
 .../src/app/mock/json/slicing_business_list.json   | 200 +++++++++++++++++++++
 usecaseui-portal/src/app/mock/routes.js            |   3 +-
 .../slicing-management.component.html              |  12 +-
 .../slicing-management.component.less              |   3 +
 .../slicing-management.component.ts                |   6 +-
 .../slicing-business-management.component.html     |   2 +-
 .../slicing-business-management.component.less     |   3 +
 .../slicing-business-table.component.html          |  75 ++++++++
 .../slicing-business-table.component.less          |  22 +++
 .../slicing-business-table.component.spec.ts       |  25 +++
 .../slicing-business-table.component.ts            |  96 ++++++++++
 .../slicing-resource-management.component.html     |  14 +-
 .../slicing-resource-management.component.less     |   5 -
 .../slicing-resource-management.component.ts       |   6 +-
 18 files changed, 499 insertions(+), 19 deletions(-)
 create mode 100644 usecaseui-portal/src/app/mock/json/activateSlicingService.json
 create mode 100644 usecaseui-portal/src/app/mock/json/deactivateSlicingService.json
 create mode 100644 usecaseui-portal/src/app/mock/json/slicing_business_list.json
 create mode 100644 usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html
 create mode 100644 usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.less
 create mode 100644 usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.spec.ts
 create mode 100644 usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts

(limited to 'usecaseui-portal/src/app')

diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts
index f618acdf..b08f339f 100644
--- a/usecaseui-portal/src/app/app.module.ts
+++ b/usecaseui-portal/src/app/app.module.ts
@@ -90,7 +90,8 @@ import { SlicingTaskModelComponent } from './views/services/slicing-management/s
 import { SlicingBusinessManagementComponent } from './views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-management.component'
 import { NsiManagementComponent } from './views/services/slicing-management/slicing-resource-management/nsi-management/nsi-management.component'
 import { NssiManagementComponent } from './views/services/slicing-management/slicing-resource-management/nssi-management/nssi-management.component';
-import { SubnetParamsModelComponent } from './views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component'
+import { SubnetParamsModelComponent } from './views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component';
+import { SlicingBusinessTableComponent } from './views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component'
 
 @NgModule({
   providers: [
@@ -146,7 +147,8 @@ import { SubnetParamsModelComponent } from './views/services/slicing-management/
     SlicingBusinessManagementComponent,
     NsiManagementComponent,
     NssiManagementComponent,
-    SubnetParamsModelComponent
+    SubnetParamsModelComponent,
+    SlicingBusinessTableComponent
   ],
   imports: [
     BrowserModule,
diff --git a/usecaseui-portal/src/app/core/services/slicingTaskServices.ts b/usecaseui-portal/src/app/core/services/slicingTaskServices.ts
index 165bb80e..9d2d1280 100644
--- a/usecaseui-portal/src/app/core/services/slicingTaskServices.ts
+++ b/usecaseui-portal/src/app/core/services/slicingTaskServices.ts
@@ -28,6 +28,13 @@ export class SlicingTaskServices {
         slicingInstance: this.baseUrl + '/resource/nsi/instances/pageNo/{pageNo}/pageSize/{pageSize}',
         slicingSubnetInstance: this.baseUrl + '/resource/nsi/{nsiId}/nssiInstances',
         subnetInContext: this.baseUrl + '/resource/nssi/{environmentContext}/instances/pageNo/{pageNo}/pageSize/{pageSize}',
+        //slicing-business-management
+        slicingBusinessList:this.baseUrl+"/resource/business/pageNo/{pageNo}/pageSize/{pageSize}",
+        slicingBusinesQueryOfStatus:this.baseUrl+"/resource/{businessStatus}/business/pageNo/{pageNo}/pageSize/{pageSize}",
+        activateSlicingService:this.baseUrl+"/resource/{serviceId}/activate",
+        deactivateSlicingService:this.baseUrl+"/resource/{serviceId}/deactivate",
+        terminateSlicingService:this.baseUrl+"/resource/{serviceId}",
+        queryOperationProgress:this.baseUrl+"resource/{serviceId}/progress",
     }
 
 
@@ -69,6 +76,21 @@ export class SlicingTaskServices {
                         .replace('{pageSize}', pageSize);
         return this.http.get<any>(url);
     }
+
+    // Get slicing business list
+    getSlicingBusinessList (paramsObj) {
+        const url = this.url.slicingBusinessList
+            .replace("{pageNo}", paramsObj.pageNo)
+            .replace("{pageSize}", paramsObj.pageSize);
+        return this.http.get<any>(url);
+    }
+    changeActivateSlicingService(paramsObj, activate: boolean){
+        let url = this.url.activateSlicingService.replace("{serviceId}", paramsObj.serviceId);
+        if(activate){
+            url = this.url.deactivateSlicingService.replace("{serviceId}", paramsObj.serviceId)
+        }
+        return this.http.put<any>(url,paramsObj);
+    }
 }
 
 
diff --git a/usecaseui-portal/src/app/mock/json/activateSlicingService.json b/usecaseui-portal/src/app/mock/json/activateSlicingService.json
new file mode 100644
index 00000000..988577bf
--- /dev/null
+++ b/usecaseui-portal/src/app/mock/json/activateSlicingService.json
@@ -0,0 +1,9 @@
+{
+  "result_header": {
+    "result_code": "200",
+    "result_message": "5G slicing service has been activated."
+  },
+  "result_body": {
+    "operation_id": "123456"
+  }
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/mock/json/deactivateSlicingService.json b/usecaseui-portal/src/app/mock/json/deactivateSlicingService.json
new file mode 100644
index 00000000..4d98ffff
--- /dev/null
+++ b/usecaseui-portal/src/app/mock/json/deactivateSlicingService.json
@@ -0,0 +1,9 @@
+{
+  "result_header": {
+    "result_code": "200",
+    "result_message": "5G slicing service has been deactivated."
+  },
+  "result_body": {
+    "operation_id": "123456"
+  }
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/mock/json/slicing_business_list.json b/usecaseui-portal/src/app/mock/json/slicing_business_list.json
new file mode 100644
index 00000000..45fa0260
--- /dev/null
+++ b/usecaseui-portal/src/app/mock/json/slicing_business_list.json
@@ -0,0 +1,200 @@
+{
+  "result_header": {
+    "result_code": "200",
+    "result_message": "5G slicing service instances query result."
+  },
+  "result_body": {
+    "record_number": 2,
+    "slicing_business_list": [
+      {
+        "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9269",
+        "service_instance_name": "slicing-01-eMBB",
+        "service_type": "eMMB",
+        "service_snssai": "1-010101",
+        "orchestration_status": "activated",
+        "last_operation_type": "activate",
+        "last_operation_progress": 10
+      },
+      {
+        "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9261",
+        "service_instance_name": "slicing-01-eMBB",
+        "service_type": "eMMB",
+        "service_snssai": "1-010101",
+        "orchestration_status": "activated",
+        "last_operation_type": "activate",
+        "last_operation_progress": 20
+      },
+      {
+        "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9262",
+        "service_instance_name": "slicing-01-eMBB",
+        "service_type": "eMMB",
+        "service_snssai": "1-010101",
+        "orchestration_status": "activated",
+        "last_operation_type": "activate",
+        "last_operation_progress": 30
+      },
+      {
+        "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9263",
+        "service_instance_name": "slicing-01-eMBB",
+        "service_type": "eMMB",
+        "service_snssai": "1-010101",
+        "orchestration_status": "activated",
+        "last_operation_type": "activate",
+        "last_operation_progress": 50
+      },
+      {
+        "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9264",
+        "service_instance_name": "slicing-01-eMBB",
+        "service_type": "eMMB",
+        "service_snssai": "1-010101",
+        "orchestration_status": "activated",
+        "last_operation_type": "activate",
+        "last_operation_progress": 70
+      },
+      {
+        "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9265",
+        "service_instance_name": "slicing-01-eMBB",
+        "service_type": "eMMB",
+        "service_snssai": "1-010101",
+        "orchestration_status": "activated",
+        "last_operation_type": "activate",
+        "last_operation_progress": 80
+      },
+      {
+        "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9266",
+        "service_instance_name": "slicing-01-eMBB",
+        "service_type": "eMMB",
+        "service_snssai": "1-010101",
+        "orchestration_status": "activated",
+        "last_operation_type": "activate",
+        "last_operation_progress": 99
+      },
+      {
+        "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9267",
+        "service_instance_name": "slicing-01-eMBB",
+        "service_type": "eMMB",
+        "service_snssai": "1-010101",
+        "orchestration_status": "activated",
+        "last_operation_type": "activate",
+        "last_operation_progress": 100
+      },
+      {
+        "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9268",
+        "service_instance_name": "slicing-01-eMBB",
+        "service_type": "eMMB",
+        "service_snssai": "1-010101",
+        "orchestration_status": "activated",
+        "last_operation_type": "activate",
+        "last_operation_progress": 100
+      },
+      {
+        "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9270",
+        "service_instance_name": "slicing-01-eMBB",
+        "service_type": "eMMB",
+        "service_snssai": "1-010101",
+        "orchestration_status": "activated",
+        "last_operation_type": "activate",
+        "last_operation_progress": 100
+      },
+      {
+        "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9271",
+        "service_instance_name": "slicing-01-eMBB",
+        "service_type": "eMMB",
+        "service_snssai": "1-010101",
+        "orchestration_status": "deactivated",
+        "last_operation_type": "deactivate",
+        "last_operation_progress": 100
+      },
+      {
+        "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9272",
+        "service_instance_name": "slicing-01-eMBB",
+        "service_type": "eMMB",
+        "service_snssai": "1-010101",
+        "orchestration_status": "deactivated",
+        "last_operation_type": "deactivate",
+        "last_operation_progress": 70
+      },
+      {
+        "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9273",
+        "service_instance_name": "slicing-01-eMBB",
+        "service_type": "eMMB",
+        "service_snssai": "1-010101",
+        "orchestration_status": "deactivated",
+        "last_operation_type": "deactivate",
+        "last_operation_progress": 50
+      },
+      {
+        "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9274",
+        "service_instance_name": "slicing-01-eMBB",
+        "service_type": "eMMB",
+        "service_snssai": "1-010101",
+        "orchestration_status": "activated",
+        "last_operation_type": "activate",
+        "last_operation_progress": 70
+      },
+      {
+        "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9275",
+        "service_instance_name": "slicing-01-eMBB",
+        "service_type": "eMMB",
+        "service_snssai": "1-010101",
+        "orchestration_status": "deactivated",
+        "last_operation_type": "deactivate",
+        "last_operation_progress": 100
+      },
+      {
+        "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9276",
+        "service_instance_name": "slicing-01-eMBB",
+        "service_type": "eMMB",
+        "service_snssai": "1-010101",
+        "orchestration_status": "activated",
+        "last_operation_type": "activate",
+        "last_operation_progress": 70
+      },
+      {
+        "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9277",
+        "service_instance_name": "slicing-01-eMBB",
+        "service_type": "eMMB",
+        "service_snssai": "1-010101",
+        "orchestration_status": "activated",
+        "last_operation_type": "activate",
+        "last_operation_progress": 70
+      },
+      {
+        "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9278",
+        "service_instance_name": "slicing-01-eMBB",
+        "service_type": "eMMB",
+        "service_snssai": "1-010101",
+        "orchestration_status": "activated",
+        "last_operation_type": "activate",
+        "last_operation_progress": 70
+      },
+      {
+        "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9279",
+        "service_instance_name": "slicing-01-eMBB",
+        "service_type": "eMMB",
+        "service_snssai": "1-010101",
+        "orchestration_status": "activated",
+        "last_operation_type": "activate",
+        "last_operation_progress": 70
+      },
+      {
+        "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9280",
+        "service_instance_name": "slicing-01-eMBB",
+        "service_type": "eMMB",
+        "service_snssai": "1-010101",
+        "orchestration_status": "activated",
+        "last_operation_type": "activate",
+        "last_operation_progress": 70
+      },
+      {
+        "service_instance_id": "23edd22b-a0b2-449f-be87-d094159b9281",
+        "service_instance_name": "slicing-01-eMBB",
+        "service_type": "eMMB",
+        "service_snssai": "1-010101",
+        "orchestration_status": "activated",
+        "last_operation_type": "activate",
+        "last_operation_progress": 70
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/mock/routes.js b/usecaseui-portal/src/app/mock/routes.js
index 4f91b651..dbc9fec3 100644
--- a/usecaseui-portal/src/app/mock/routes.js
+++ b/usecaseui-portal/src/app/mock/routes.js
@@ -98,7 +98,8 @@ module.exports =
         "/uui-slicing/nsmf/resource/nsi/instances/pageNo/:pageNo/pageSize/:pageSize": "/slicing_instance",
         "/uui-slicing/nsmf/resource/nsi/:nsiId/nssiInstances": "/slicing_subnet_instance",
         "/uui-slicing/nsmf/resource/nssi/:environmentContext/instances/pageNo/:pageNo/pageSize/:pageSize": "/slicing_subnet_context",
-
+        ///////<-------------slicing_business--------->/////
+        "/uui-slicing/nsmf/resource/business/pageNo/:pageNo/pageSize/:pageSize": "/slicing_business_list",
         ///////<-------------general interface--------->/////
         "/api/*": "/$1",
         "/*/*": "/$1_$2",
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html
index 59401e02..2c8db58d 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html
@@ -1,8 +1,12 @@
-<nz-tabset>
+<nz-tabset (nzSelectChange)="handleTabChange($event)">
   <nz-tab nzTitle="Slicing Task Management">
-    <app-slicing-task-management></app-slicing-task-management>
+    <app-slicing-task-management
+            *ngIf="currentTab ==='Slicing Task Management'"
+    ></app-slicing-task-management>
   </nz-tab>
-  <nz-tab nzTitle="Slicing Resource Management">
-    <app-slicing-resource-management></app-slicing-resource-management>
+  <nz-tab nzTitle="Slicing Resource Management" >
+    <app-slicing-resource-management
+            *ngIf="currentTab ==='Slicing Resource Management'"
+    ></app-slicing-resource-management>
   </nz-tab>
 </nz-tabset>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.less
index e69de29b..46ef8be6 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.less
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.less
@@ -0,0 +1,3 @@
+.slicing-content{
+  padding: 20px;
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.ts
index ae2133de..4b33db12 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.ts
@@ -11,5 +11,9 @@ export class SlicingManagementComponent implements OnInit {
 
   ngOnInit() {
   }
-
+    currentTab = 'Slicing Task Management';
+    handleTabChange($event): void {
+        console.log($event,"$event");
+        this.currentTab = $event.tab._title;
+    }
 }
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-management.component.html
index 6ea00aa1..7626b040 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-management.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-management.component.html
@@ -1,3 +1,3 @@
 <h3>
-  slicing-business-management
+  <app-slicing-business-table></app-slicing-business-table>
 </h3>
\ 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-management.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-management.component.less
index e69de29b..8fe39e97 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-management.component.less
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-management.component.less
@@ -0,0 +1,3 @@
+.slicing-content{
+  padding: 0!important;
+}
\ 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-table/slicing-business-table.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html
new file mode 100644
index 00000000..fde155a5
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html
@@ -0,0 +1,75 @@
+<div class="slicing-resource-table">
+    <div nz-row>
+        <div nz-col nzSpan="12" class="task_status">
+            <span>Status : </span>
+            <nz-select nzShowSearch nzPlaceHolder="Select a processing status" [(ngModel)]="selectedValue"
+                       (ngModelChange)="getListOfProcessingStatus()">
+                <nz-option *ngFor="let item of statusOptions" [nzLabel]="item" [nzValue]="item"></nz-option>
+            </nz-select>
+        </div>
+    </div>
+    <div>
+        <nz-table
+                #basicTable
+                [nzData]="listOfData"
+                [nzFrontPagination]="false"
+                [nzPageSizeOptions]="[5,10,15,20]"
+                [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>Orchestration_status</th>
+                <th>Aciton</th>
+                <th>Detail</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>
+
+                        <span  class="marginLeft10">
+                                 {{ data.last_operation_progress!==100?data.last_operation_type+'&nbsp;&nbsp;&nbsp;'+data.last_operation_progress+'%':data.orchestration_status }}
+                        </span>
+                        <nz-progress *ngIf="data.last_operation_progress !== 100"
+                                     [nzPercent]="data.last_operation_progress"
+                                     [nzShowInfo]="false" nzStatus="active"></nz-progress>
+                    </td>
+                    <td>
+                        <nz-switch [ngModel]="switchStatusAll[i]==='activated'?true:false"
+                                   [nzDisabled]="data.last_operation_progress !== 100"
+                                   (ngModelChange)="switchChange(data,i)"
+                        ></nz-switch>
+                        <i [ngClass]="{'cannotclick':data.last_operation_progress !== 100}"
+                           nz-icon
+                           nzType="poweroff"
+                           nzTheme="outline"
+                           (click)="terminate(data)"
+                        ></i>
+                    </td>
+                    <td>
+                        <!--<i [ngClass]="{'cannotclick':data.last_operation_progress !== 100}"-->
+                           <!--class="anticon anticon-bars"-->
+                           <!--(click)="showdetail(data)">-->
+                        <!--</i>-->
+                        <i (click)="showdetail(data)" [ngClass]="{'cannotclick':data.last_operation_progress !== 100}">Detail</i>
+                    </td>
+                </tr>
+            </ng-template>
+            </tbody>
+        </nz-table>
+    </div>
+</div>
\ 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-table/slicing-business-table.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.less
new file mode 100644
index 00000000..b95d55e0
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.less
@@ -0,0 +1,22 @@
+nz-select {
+  width: 200px;
+}
+.task_status{
+  margin-bottom: 20px;
+  span{
+    margin-right: 5%;
+  }
+}
+i.anticon {
+  cursor: pointer;
+  font-size: 18px;
+  padding: 2px;
+  &:hover{
+    color: #147dc2;
+  }
+}
+.cannotclick {
+  pointer-events: none;
+  color: #aaa;
+  opacity: 0.6;
+}
\ 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-table/slicing-business-table.component.spec.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.spec.ts
new file mode 100644
index 00000000..200a0fb3
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SlicingBusinessTableComponent } from './slicing-business-table.component';
+
+describe('SlicingBusinessTableComponent', () => {
+  let component: SlicingBusinessTableComponent;
+  let fixture: ComponentFixture<SlicingBusinessTableComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SlicingBusinessTableComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SlicingBusinessTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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
new file mode 100644
index 00000000..0397de9c
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts
@@ -0,0 +1,96 @@
+import {Component, OnInit} from '@angular/core';
+import {SlicingTaskServices} from '.././../../../../../core/services/slicingTaskServices';
+import {BUSINESS_STATUS} from '../../../../../../../constants/constants';
+import { NzModalService } from 'ng-zorro-antd';
+
+@Component({
+    selector: 'app-slicing-business-table',
+    templateUrl: './slicing-business-table.component.html',
+    styleUrls: ['./slicing-business-table.component.less']
+})
+export class SlicingBusinessTableComponent implements OnInit {
+
+    constructor(
+        private myhttp: SlicingTaskServices,
+        private modalService: NzModalService
+        ) {
+    }
+
+    ngOnInit() {
+        this.getBusinessList()
+    }
+
+    selectedValue = null;
+    switchStatusAll: any[] = [];
+    listOfData: any[] = [];
+    pageIndex: number = 1;
+    pageSize: number = 10;
+    total: number = 100;
+    loading = false;
+    statusOptions: any[] = BUSINESS_STATUS;
+
+
+    getBusinessList (): void{
+        this.loading = true;
+        let paramsObj = {
+            pageNo: this.pageIndex,
+            pageSize: this.pageSize
+        };
+        this.myhttp.getSlicingBusinessList(paramsObj).subscribe (res => {
+            const { result_header: { result_code }, result_body: { slicing_business_list } } = res;
+            if (+result_code === 200) {
+                this.listOfData = slicing_business_list;
+                this.total = slicing_business_list.length;
+                this.switchStatusAll = slicing_business_list.map((item)=>{
+                    return item.orchestration_status
+                });
+                this.loading = false;
+            }
+        })
+    }
+    searchData(reset: boolean = false) {
+        this.getBusinessList();
+    }
+    switchChange(data,i){
+        console.log(data,i,"----- switchChange");
+        this.modalService.confirm({
+            nzTitle: '<i>Do you Want to'+(data.orchestration_status === 'activated'?'deactivated':'activated')+ 'slicing business?</i>',
+            nzContent: '<b>service_instance_id:'+data.service_instance_id+'</b>',
+            nzOnOk: () => {
+                let paramsObj = {
+                    serviceId:data.service_instance_id
+                };
+                if(data.orchestration_status === 'activated'){
+                    this.myhttp.changeActivateSlicingService(paramsObj,false).subscribe (res => {
+                        const { result_header: { result_code }, result_body: { operation_id } } = res;
+                        if (+result_code === 200) {
+                            this.switchStatusAll[i] = 'deactivated';
+                            console.log(operation_id,"operation_id")
+                        }
+                    })
+                }else {
+                    this.myhttp.changeActivateSlicingService(paramsObj,true).subscribe (res => {
+                        const { result_header: { result_code, result_message }} = res;
+                        if (+result_code === 200) {
+                            this.switchStatusAll[i] = 'activated';
+                            console.log(result_message,"result_message")
+                        }
+                    })
+                }
+            },
+            nzCancelText: 'No',
+            nzOnCancel: () => {
+                this.switchStatusAll[i] = data.orchestration_status
+            }
+        });
+    }
+    terminate(data){
+
+    }
+    showdetail(data){
+
+    }
+    getListOfProcessingStatus(){
+
+    }
+}
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.html
index a6a06298..7e6856b6 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.html
@@ -1,11 +1,17 @@
-<nz-tabset class="slicing-resource_tab">
+<nz-tabset class="slicing-resource_tab"  (nzSelectChange)="handleTabChange($event)">
   <nz-tab nzTitle="Slicing Business Management">
-    <app-slicing-business-management></app-slicing-business-management>
+    <app-slicing-business-management
+        *ngIf="currentTab ==='Slicing Business Management'"
+    ></app-slicing-business-management>
   </nz-tab>
   <nz-tab nzTitle="Slicing Instance Management">
-    <app-nsi-management></app-nsi-management>
+    <app-nsi-management
+        *ngIf="currentTab ==='Slicing Instance Management'"
+    ></app-nsi-management>
   </nz-tab>
   <nz-tab nzTitle="Slicing Subnet Instance Management">
-    <app-nssi-management></app-nssi-management>
+    <app-nssi-management
+            *ngIf="currentTab ==='Slicing Subnet Instance Management'"
+    ></app-nssi-management>
   </nz-tab>
 </nz-tabset>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.less
index b3180ba2..e69de29b 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.less
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.less
@@ -1,5 +0,0 @@
-.slicing-resource_tab {
-    width: 104%;
-    margin-left: 20px;
-    margin-top: -35px;
-}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.ts
index 38dc48c8..b88b9073 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.ts
@@ -11,5 +11,9 @@ export class SlicingResourceManagementComponent implements OnInit {
 
   ngOnInit() {
   }
-
+    currentTab = 'Slicing Business Management';
+    handleTabChange($event): void {
+       console.log($event,"$event");
+       this.currentTab = $event.tab._title;
+    }
 }
-- 
cgit 1.2.3-korg