feat: Local simulation data and display on the Slicing task management page

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

2 files changed, 49 insertions, 30 deletions

diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html
index 6a5abe88..ac350037 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html
@@ -13,19 +13,28 @@
     <nz-table #basicTable [nzData]="listOfData">
       <thead>
         <tr>
-          <th>Name</th>
-          <th>Age</th>
-          <th>Status</th>
-          <th>Action</th>
+          <th>任务ID</th>
+          <th>任务名称</th>
+          <th>S-NSSAI</th>
+          <th>切片业务类型</th>
+          <th>到达时间</th>
+          <th>处理环节</th>
+          <th>操作</th>
         </tr>
       </thead>
       <tbody>
         <tr *ngFor="let data of basicTable.data">
-          <td>{{ data.name }}</td>
-          <td>{{ data.age }}</td>
-          <td>{{ data.status===0?"Checking Configuration":"Creating Slicing" }}</td>
+          <td>{{ data.task_id }}</td>
+          <td>{{ data.task_name }}</td>
+          <td>{{ data.service_snssai }}</td>
+          <td>{{ data.service_type }}</td>
+          <td>{{ data.arrival_time }}</td>
+          <td>{{ data.status }}</td>
           <td>
-            <a (click)="showdetail(data)">Show Detail</a>
+            <span *ngIf="data.processing_status === 'Planning'">任务处理</span>
+            <a (click)="showdetail(data)" *ngIf="data.processing_status === 'Waiting to Confirm'">任务处理</a>
+            <a (click)="showdetail(data)" *ngIf="data.processing_status === 'Creating'">查看进度</a>
+            <a (click)="showdetail(data)" *ngIf="data.processing_status === 'Completed'">查看结果</a>
           </td>
         </tr>
       </tbody>
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts
index ad29c5ed..3d8efab0 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts
@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import * as moment from 'moment';
+import { ServiceListService } from '.././../../../core/services/serviceList.service'
 
 @Component({
   selector: 'app-slicing-task-management',
@@ -7,33 +9,41 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SlicingTaskManagementComponent implements OnInit {
 
-  constructor() { }
+  constructor(private myhttp: ServiceListService) { }
 
-  ngOnInit() { }
+  ngOnInit() { 
+    this.getTaskList()
+  }
   showDetail: boolean = false;
   selectedValue = null;
   detailData: object = {};
   moduleTitle: string = "";
-  listOfData = [
-    {
-      key: '1',
-      name: 'John Brown',
-      age: 32,
-      status: 0
-    },
-    {
-      key: '2',
-      name: 'Jim Green',
-      age: 42,
-      status: 0
-    },
-    {
-      key: '3',
-      name: 'Joe Black',
-      age: 32,
-      status: 1
-    }
-  ];
+  listOfData = []; 
+  getTaskList (): void{
+    this.myhttp.getSlicingTaskList(1,10).subscribe (res => {
+      const { result_header: { result_code }, result_body: { slicing_task_list } } = res
+      if (+result_code === 200) {
+        this.listOfData = slicing_task_list.map( item => {
+          item.arrival_time = moment(+item.arrival_time).format('YYYY-MM-DD hh:mm')
+          switch (item.processing_status){
+            case 'Planning':
+              item.status = '规划阶段';
+              break;
+            case 'Waiting to Confirm':
+              item.status = '审核阶段';
+              break;
+            case 'Creating':
+              item.status = '切片创建中';
+              break;
+            case 'Completed': 
+              item.status = '创建完成';
+              break;
+          }
+          return item;
+        })
+      }
+    })
+  }
   showdetail(data: any) {
     console.log(data, this.showDetail)
     this.detailData = data;