feat:Optimize page display issues of csmf slicinng page

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

2 files changed, 23 insertions, 16 deletions

diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html
index dc401089..e4a5ef19 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html
@@ -9,6 +9,14 @@
                         {{ item.title }}
                     </nz-form-label>
                     <nz-form-control [nzSpan]="15">
+                        <input nz-input nz-tooltip
+                               [id]="item.key"
+                               [name]="item.key"
+                               [(ngModel)]="slicing_order_info[item.key]"
+                               [ngClass]="{'error-input-border':validateRules[i] === true}"
+                               *ngIf=" item.title === 'Slicing Business Name' "
+                               (blur)="validator(item.key,slicing_order_info[item.key],i)"
+                        />
                         <nz-tooltip
                                 [nzTitle]="tooltipText"
                                 [nzPlacement]="'right'"
@@ -19,7 +27,7 @@
                                    [name]="item.key"
                                    [(ngModel)]="slicing_order_info[item.key]"
                                    [ngClass]="{'error-input-border':validateRules[i] === true}"
-                                   *ngIf=" item.title !== 'Resource Sharing Level' && item.title !== 'Mobility' && item.title !== 'Area' "
+                                   *ngIf=" item.title !== 'Slicing Business Name' && item.title !== 'Resource Sharing Level' && item.title !== 'Mobility' && item.title !== 'Area' "
                                    (blur)="validator(item.key,slicing_order_info[item.key],i)"
                                    (focus)="changeTooltipText(item.title)"
                             />
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html
index 8d7e13b3..ea4e55e1 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html
@@ -22,7 +22,8 @@
         <!--<th width=110>Service Type</th>-->
         <th width=110>S-NSSAI</th>
         <th width=110>Status</th>
-        <th width=180>Aciton</th>
+        <th width=120>Activate</th>
+        <th width=130>Terminate</th>
       </tr>
       </thead>
       <tbody>
@@ -36,10 +37,6 @@
           <td>{{ data.service_snssai }}</td>
           <td>
                             <span class="marginLeft10">
-                                <span *ngIf="data.last_operation_progress && data.last_operation_progress !== '100'">
-                                    {{data.last_operation_progress+'%'}}
-                                </span>
-                                <br>
                                 {{data.order_status}}
                             </span>
             <br>
@@ -51,19 +48,21 @@
                          (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'"
-                      [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.order_status==='activated')}"
-                 nz-icon nzType="poweroff" nzTheme="outline" class="anticon anticon-poweroff"
-                 (click)="terminate(data,i)"></i>
-              <nz-progress
-                      *ngIf="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100' && terminateStart[i]"
-                      [nzPercent]="data.last_operation_progress" [nzShowInfo]="false" nzStatus="active">
+                      [nzPercent]="data.last_operation_progress" [nzShowInfo]="true" nzStatus="active">
               </nz-progress>
             </div>
           </td>
+            <td>
+                <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.order_status==='activated')}"
+                       nz-icon nzType="poweroff" nzTheme="outline" class="anticon anticon-poweroff"
+                       (click)="terminate(data,i)"></i>
+                    <nz-progress
+                            *ngIf="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100' && terminateStart[i]"
+                            [nzPercent]="data.last_operation_progress" [nzShowInfo]="true" nzStatus="active">
+                    </nz-progress>
+                </div>
+            </td>
         </tr>
       </ng-template>
       </tbody>