feat: Completed the initial display of the task processing dialog

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

4 files changed, 106 insertions, 98 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 40a166c3..57e13653 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
@@ -36,7 +36,7 @@
       </tbody>
     </nz-table>
   </div>
-  <app-slicing-task-model [moduleTitle]="moduleTitle" [showDetail]="showDetail" [modelData]="detailData"
+  <app-slicing-task-model [moduleTitle]="moduleTitle" [showDetail]="showDetail" [taskId]="taskId"
     (cancel)="showDetail=$event">
   </app-slicing-task-model>
 </div>
\ No newline at end of file
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 7bba2c07..5c6eb369 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
@@ -17,10 +17,11 @@ export class SlicingTaskManagementComponent implements OnInit {
   }
   showDetail: boolean = false;
   selectedValue = null;
-  detailData: object = {};
+  // detailData: object = {};
+  taskId: string;
   moduleTitle: string = "";
-  listOfData = []; 
-  statusOptions = TASK_PROCESSING_STATUS;
+  listOfData: any[] = []; 
+  statusOptions: any[] = TASK_PROCESSING_STATUS;
 
   getTaskList (): void{
     this.myhttp.getSlicingTaskList('1', '10').subscribe (res => {
@@ -64,8 +65,8 @@ export class SlicingTaskManagementComponent implements OnInit {
     })
   }
 
-  showdetail(data: any) {
-    this.detailData = data;
+  showdetail(data: any): void {
+    this.taskId = data.task_id;
     this.showDetail = true;
     this.moduleTitle = data.status;
   }
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html
index f864dc92..89d64f51 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html
@@ -5,21 +5,21 @@
     <ng-template #checkItem let-check>
       <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8">
         <div nz-col nzSpan="10">
-          <span>Task ID： {{ check.id }}</span>
+          <span>Task ID： {{ check.task_id }}</span>
         </div>
         <div nz-col nzSpan="8">
-          <span>Task Name： {{ check.name }}</span>
+          <span>Task Name： {{ check.task_name }}</span>
         </div>
         <div nz-col nzSpan="6">
-          <span>S-NSSAI：{{ check.snssai }}</span>
+          <span>S-NSSAI：{{ check.cn_service_snssai }}</span>
         </div>
       </nz-list-item>
       <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8">
         <div nz-col nzSpan="10">
-          <span>Arrived Time： {{ check.arrivedtime }}</span>
+          <span>Arrived Time： {{ check.create_timer }}</span>
         </div>
         <div nz-col nzSpan="8">
-          <span>Status： {{ check.status }}</span>
+          <span>Status： {{ check.processing_status }}</span>
         </div>
       </nz-list-item>
     </ng-template>
@@ -28,21 +28,10 @@
   <nz-list class="taskmodel_list" [nzDataSource]="businessRequirement" nzBordered [nzHeader]="'业务需求信息：'"
     [nzFooter]="null" [nzRenderItem]="businessItem">
     <ng-template #businessItem let-item>
-      <nz-list-item>
-        <span class="ant-typography">Name：</span>
-        {{ item.name }}
-      </nz-list-item>
-      <nz-list-item>
-        <span class="ant-typography">S-NSSAI： </span>
-        {{ item.snssai }}
-      </nz-list-item>
-      <nz-list-item>
-        <span class="ant-typography">Time： </span>
-        {{ item.expiretime }}
-      </nz-list-item>
-      <nz-list-item>
-        <span class="ant-typography">Area： </span>
-        {{ item. area }}
+      <nz-list-item *ngFor="let ite of businessList " nz-row>
+        <div nz-col nz-Span='10'>
+          <span class="ant-typography">{{ ite.title }} : &nbsp;{{ item[ite.key] }}</span>
+        </div>
       </nz-list-item>
     </ng-template>
   </nz-list>
@@ -52,15 +41,14 @@
     <ng-template #taskItem let-item>
       <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8">
         <div nz-col nzSpan="12">
-          <span>NST ID： {{ item.id }}</span>
+          <span>NST ID： {{ item.nst_id }}</span>
         </div>
         <div nz-col nzSpan="12">
-          <span>NST Name： {{ item.name }}</span>
+          <span>NST Name： {{ item.nst_name }}</span>
         </div>
       </nz-list-item>
     </ng-template>
-  </nz-list>
-
+  </nz-list> 
 
   <div>
     <nz-list class="taskmodel_list" nzBordered [nzHeader]="'匹配共享切片实例：'" [nzFooter]="null">
@@ -82,35 +70,16 @@
       </nz-list-item>
       <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8">
         <p class="listitem_subtitle" nz-col nzSpan="24">匹配的共享切片子网实例：</p>
-        <nz-card nzType="inner" nz-col nzSpan="24" nzTitle="无线域：">
-          <div nz-row [nzGutter]="8">
-            <div nz-col nzSpan="12">
-              切片子网实例 ID：
-              <nz-select nzShowSearch [(ngModel)]="selectedServiceId" (ngModelChange)="serviceIdChange($event)">
-                <nz-option *ngFor="let p of serviceId" [nzValue]="p" [nzLabel]="p"></nz-option>
-              </nz-select>
-            </div>
-            <div nz-col nzSpan="8">
-              切片子网实例名称：{{selectedServiceName}}
-            </div>
-            <div nz-col nzSpan="4">
-              <button nz-button nzType="primary" (click)="resetService()"> <i nz-icon
-                  class="anticon anticon-plus"></i></button>
-              <button nz-button nzType="primary"> <i nz-icon class="anticon anticon-setting"
-                  nzTheme="outline"></i></button>
-            </div>
-          </div>
-        </nz-card>
-        <nz-card nzType="inner" nz-col nzSpan="24" style="margin-top:16px;" nzTitle="传输域：">
+        <nz-card *ngFor="let item of slicingSubnet" nzType="inner" nz-col nzSpan="24" [nzTitle]="item.title">
           <div nz-row [nzGutter]="8">
             <div nz-col nzSpan="12">
               切片子网实例 ID：
-              <nz-select nzShowSearch [(ngModel)]="selectedServiceId" (ngModelChange)="serviceIdChange($event)">
+              <nz-select nzShowSearch [(ngModel)]="item.slicingId" (ngModelChange)="serviceIdChange($event)">
                 <nz-option *ngFor="let p of serviceId" [nzValue]="p" [nzLabel]="p"></nz-option>
               </nz-select>
             </div>
             <div nz-col nzSpan="8">
-              切片子网实例名称：{{selectedServiceName}}
+              切片子网实例名称：{{item.slicingName}}
             </div>
             <div nz-col nzSpan="4">
               <button nz-button nzType="primary" (click)="resetService()"> <i nz-icon
@@ -120,28 +89,6 @@
             </div>
           </div>
         </nz-card>
-        <nz-card nzType="inner" nz-col nzSpan="24" style="margin-top:16px;" nzTitle="核心网域：">
-
-          <div nz-row [nzGutter]="12" nzType="flex" nzAlign="middle">
-            <div nz-col nzSpan="12">
-              切片子网实例 ID：
-              <nz-select nzShowSearch [(ngModel)]="selectedServiceId" (ngModelChange)="serviceIdChange($event)">
-                <nz-option *ngFor="let p of serviceId" [nzValue]="p" [nzLabel]="p"></nz-option>
-              </nz-select>
-            </div>
-            <div nz-col nzSpan="8">
-              切片子网实例名称：{{selectedServiceName}}
-            </div>
-            <div nz-col nzSpan="4">
-              <button nz-button nzType="primary" (click)="resetService()">
-                <i nz-icon class="anticon anticon-plus"></i>
-              </button>
-              <button nz-button nzType="primary">
-                <i nz-icon class="anticon anticon-setting" nzTheme="outline"></i>
-              </button>
-            </div>
-          </div>
-        </nz-card>
       </nz-list-item>
     </nz-list>
   </div>
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts
index 2abe8d44..8d61029e 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts
@@ -1,4 +1,6 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { SlicingTaskServices } from '../../../../../core/services/slicingTaskServices';
+import { BUSINESS_REQUIREMENT } from '../../../../../../constants/constants';
 
 @Component({
   selector: 'app-slicing-task-model',
@@ -8,29 +10,87 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 export class SlicingTaskModelComponent implements OnInit {
   @Input() showDetail: boolean;
   @Input() moduleTitle: string;
-  @Input() modelData: object;
+  @Input() taskId: string;
   @Output() cancel = new EventEmitter<boolean>();
 
-  constructor() { }
-  checkDetail: [{}] = [{
-    id: "b1bb0ce7-ebca-4fa7-95ed-4840d70a1177",
-    name: "5G Slice eMMB",
-    snssai: "1-010101",
-    arrivedtime: "2019-10-29 10:00",
-    status: "Checking"
-  }]; //配置审核详情
-  businessRequirement: [{}] = [{
-    name: "5G Slice eMMB",
-    snssai: "1-010101",
-    expiretime: "2019-10-29 10:00",
-    area: "Beijing",
-  }];//业务需求信息
-  NSTinfo: [{}] = [{
-    id: "46da8cf8-0878-48ac-bea3-f2200959411a",
-    name: "eMBB instancel"
-  }];//匹配NST信息
-  selectedServiceId = '46da8cf8-0878-48ac-bea3-f2200959411a';
-  selectedServiceName = '';
+  constructor(private http: SlicingTaskServices) { }
+
+  // 业务需求列表
+  businessList: object[] = BUSINESS_REQUIREMENT;
+  // 配置审核详情
+  checkDetail: object[] = [{}];
+  //业务需求信息
+  businessRequirement: object[] = [{}];
+  //匹配NST信息 
+  NSTinfo: object[] = [{}];
+  // 共享切片实例
+  selectedServiceId: string;
+  selectedServiceName: string;
+  // 子网实例
+  slicingSubnet: any[] =  [
+    {
+      title: '无线域',
+      slicingId: '',
+      slicingName: ''
+    },
+    {
+      title: '传输域',
+      slicingId: '',
+      slicingName: ''
+    },
+    {
+      title: '核心网域',
+      slicingId: '',
+      slicingName: ''
+    }
+  ]
+
+  ngOnInit() { }
+  
+  ngOnChanges() {
+    if (this.showDetail) {
+      this.getautidInfo();
+    }
+  }
+
+  getautidInfo(): void {
+    this.http.getAuditInfo(this.taskId).subscribe( res => {
+      const { result_header: { result_code } } = res;
+      if (+result_code === 200) {
+        const { task_id, task_name, create_timer, processing_status, business_demand_info, nst_info, nsi_nssi_info, business_demand_info: { service_snssai } } = res.result_body;
+        const { 
+          suggest_nsi_id, 
+          suggest_nsi_name, 
+          an_suggest_nssi_id, 
+          an_suggest_nssi_name, 
+          tn_suggest_nssi_id, 
+          tn_suggest_nssi_name, 
+          cn_suggest_nssi_id, 
+          cn_suggest_nssi_name } = nsi_nssi_info;
+        // 处理配置审核详情数据
+        this.checkDetail = [{ task_id, task_name, create_timer, processing_status, service_snssai }];
+        // 业务需求信息数据
+        this.businessRequirement = [business_demand_info];
+        this.NSTinfo = [nst_info];
+        // 共享切片实例
+        this.selectedServiceId = suggest_nsi_id;
+        this.selectedServiceName = suggest_nsi_name;
+        // 子网实例
+        this.slicingSubnet[0].slicingId = an_suggest_nssi_id;
+        this.slicingSubnet[0].slicingName = an_suggest_nssi_name;
+        this.slicingSubnet[1].slicingId = tn_suggest_nssi_id;
+        this.slicingSubnet[1].slicingName = tn_suggest_nssi_name;
+        this.slicingSubnet[2].slicingId = cn_suggest_nssi_id;
+        this.slicingSubnet[2].slicingName = cn_suggest_nssi_name;
+      }
+    })
+  }
+
+
+
+
+
+
   serviceId = ['46da8cf8-0878-48ac-bea3-f2200959411a', '46da8cf8-0878-48ac-bea3-f2200959411b', '46da8cf8-0878-48ac-bea3-f2200959411c'];
   serviceData: {} = {
     "46da8cf8-0878-48ac-bea3-f2200959411a": "eMBB instancela",
@@ -38,9 +98,7 @@ export class SlicingTaskModelComponent implements OnInit {
     "46da8cf8-0878-48ac-bea3-f2200959411c": "eMBB instancelc",
   };
 
-  ngOnInit() {
-    this.serviceIdChange(this.selectedServiceId)
-  }
+
 
   serviceIdChange(value: string): void {
     this.selectedServiceName = this.serviceData[value];
@@ -57,5 +115,7 @@ export class SlicingTaskModelComponent implements OnInit {
   }
   handleOk() {
     this.handleCancel();
+    // 对应操作逻辑未编写
+
   }
 }