feat:Optimize progress bar display issues

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

2 files changed, 10 insertions, 9 deletions

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
index ebce5036..8bce1cdf 100644
--- 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
@@ -32,7 +32,7 @@
                         <td>{{ data.service_snssai }}</td>
                         <td>
                             <span class="marginLeft10">
-                                <span *ngIf="data.last_operation_progress && data.last_operation_progress !== 100">
+                                <span *ngIf="data.last_operation_progress && data.last_operation_progress !== '100'">
                                     {{data.last_operation_progress+'%'}}
                                 </span>
                                 <br>
@@ -43,26 +43,26 @@
                         <td>
                             <div class="action-icon">
                                 <nz-switch [ngModel]="data.orchestration_status==='activated'?true:false"
-                                    [nzDisabled]="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== 100"
+                                    [nzDisabled]="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100'"
                                     (ngModelChange)="switchChange(data,i)"></nz-switch>
                                 <nz-progress
-                                    *ngIf="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== 100 && data.last_operation_type !== 'DELETE'"
+                                    *ngIf="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100' && data.last_operation_type !== 'DELETE'"
                                     [nzPercent]="data.last_operation_progress" [nzShowInfo]="false" nzStatus="active">
                                 </nz-progress>
                             </div>
                             <div class="action-icon">
-                                <i [ngClass]="{'cannotclick': data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== 100 && (data.last_operation_type !== 'DELETE' || data.orchestration_status==='activated')}"
+                                <i [ngClass]="{'cannotclick': data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100' && (data.last_operation_type !== 'DELETE' || data.orchestration_status==='activated')}"
                                     nz-icon nzType="poweroff" nzTheme="outline" class="anticon anticon-poweroff"
                                     (click)="terminate(data)"></i>
                                 <nz-progress
-                                    *ngIf="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== 100 && terminateStart"
+                                    *ngIf="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100' && terminateStart"
                                     [nzPercent]="data.last_operation_progress" [nzShowInfo]="false" nzStatus="active">
                                 </nz-progress>
                             </div>
                         </td>
                         <td>
                             <a (click)="showdetail(data)"
-                                [ngClass]="{'cannotclick':data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== 100}">View
+                                [ngClass]="{'cannotclick':data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100'}">View
                                 Detail</a>
                         </td>
                     </tr>
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
index 92973d58..030d9f56 100644
--- 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
@@ -55,7 +55,7 @@ export class SlicingBusinessTableComponent implements OnInit {
             if (+result_code === 200) {
                 this.total = record_number;
                 this.listOfData = slicing_business_list.map((item, index) => {
-                    if (item.last_operation_progress && item.last_operation_type && item.last_operation_progress < 100) {
+                    if (item.last_operation_progress && item.last_operation_type && Number(item.last_operation_progress) < 100) {
                         let updata = (prodata: { operation_progress: string }) => {
                             item.last_operation_progress = prodata.operation_progress || item.last_operation_progress;
                         };
@@ -64,7 +64,8 @@ export class SlicingBusinessTableComponent implements OnInit {
                         };
                         if (item.last_operation_type === 'DELETE') this.terminateStart = true;
                         this.queryProgress(obj, item.orchestration_status, index, updata).then((res) => {
-                            item.last_operation_progress = 100;
+                            item.last_operation_progress = '100';
+                            this.getBusinessList();
                         })
                     }
                     return item
@@ -186,7 +187,7 @@ export class SlicingBusinessTableComponent implements OnInit {
                     .subscribe((data) => {
                         const { result_header: { result_code, result_message }, result_body: { operation_id } } = data;
                         if (+result_code === 200) {
-                            if (data.result_body.operation_progress && data.result_body.operation_progress < 100) {
+                            if (data.result_body.operation_progress && Number(data.result_body.operation_progress) < 100) {
                                 callback(data.result_body);
                                 let progressSetTimeOut = setTimeout(() => {
                                     requery();