feat: Added progress display in view progress component

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

3 files changed, 73 insertions, 1 deletions

diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.html
index e6e348c2..07599bfb 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.html
@@ -11,5 +11,33 @@
 		[NSTinfo]="NSTinfo"
 	>
 	</app-basic-info>
+	<nz-list [nzDataSource]="data" nzBordered nzHeader="任务详情:" [nzFooter]="null" [nzRenderItem]="defaultItem" >
+		<ng-template #defaultItem let-item> 
+			<nz-list-item  nz-row nzType="flex" nzJustify="center" >
+				<nz-steps 
+					nzType="navigation"
+					[nzCurrent]="item.currentProgress" 
+					nz-col 
+					nzSpan="20" 
+					nzSize="small" 
+					*ngFor="let item of data[0]; let i = index" class="task_progress" 
+					[ngStyle]="{paddingBottom: i === data[0].length -1 ? '30px': '0px'}"
+				>
+					<nz-step [nzTitle]="item.title"></nz-step>
+					<nz-step 
+						[nzTitle]="item.currentProgress > 1 ? null : 'in progress'" 
+						[nzStatus]="item.status" nzIcon="anticon anticon-spin anticon-loading"
+					> </nz-step>
+					<nz-step 
+						[nzTitle]="item.status === 'finish' ? 'success' : null"
+						[nzStatus]="item.status === 'finish' ? 'finish' : 'wait'" 
+						nzIcon='loading'
+					></nz-step>
+				</nz-steps>
+				
+			</nz-list-item>
+		</ng-template>
+	</nz-list>
+
 	
 </nz-modal>
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.less
index e69de29b..4ffecfed 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.less
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.less
@@ -0,0 +1,3 @@
+.task_progress{

+    padding-top: 30px;

+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.ts
index efb8ba72..77a36a06 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.ts
@@ -19,12 +19,18 @@ export class CheckProcessModelComponent implements OnInit {
 	checkDetail: any[];
 	businessRequirement: any[];
 	NSTinfo: any[];
+	data: any[];
+	currentProgress: number = 1;
+	timer: any = null;
 
 	ngOnInit() { }
 
 	ngOnChanges() {
 		if (this.showProcess) {
 			this.getInfo();
+			this.getProgress();
+		}else {
+			clearTimeout(this.timer);
 		}
 	}
 
@@ -51,10 +57,45 @@ export class CheckProcessModelComponent implements OnInit {
 		})
 	}
 
+	getProgress(): void {
+		this.http.getSlicingCreateProgress(this.taskId).subscribe(res => {
+			const { result_body, result_header: {result_code } } = res;
+			if (+result_code === 200) {
+				this.data = [];
+				Object.keys(result_body).forEach( item => {
+					let currentProgress = 1
+					let status = 'process';
+					if(+result_body[item] === 100){
+						currentProgress = 2;
+						status = 'finish'
+					}
+					const title = item === 'an_progress'? '无线域': (item === 'tn_progress'? '传输域' : '核心域')
+					let obj = { [item]: result_body[item], currentProgress, title, status };
+					this.data.push(obj)
+				})
+				this.data = [this.data];
+				let flag: boolean = false;
+				Object.values(result_body).forEach ( item => {
+					if(item !== 100) {
+						flag = true;
+					}
+				})
+				if(flag) {
+					this.timer = setTimeout( () => {
+						this.getProgress()
+					}, 5000)
+				}
+			}
+		})
+	}
+
 	handleCancel() {
 		this.showProcess = false;
 		this.cancel.emit(this.showProcess)
 	}
-	handleOk() { }
+	handleOk() { 
+		this.handleCancel();
+	}
 
 }
+ 
\ No newline at end of file