feat: Optimize the code 71/99371/1
authorcyuamber <xuranyjy@chinamobile.com>
Tue, 10 Dec 2019 01:51:55 +0000 (09:51 +0800)
committercyuamber <xuranyjy@chinamobile.com>
Tue, 10 Dec 2019 01:58:03 +0000 (09:58 +0800)
Change-Id: I8bda1a8630f8150d5a71a10cd21ac7d977f083d5
Issue-ID: USECASEUI-368
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
usecaseui-portal/src/app/app.component.less
usecaseui-portal/src/app/shared/components/basic-info/basic-info.component.html
usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.ts
usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html
usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts
usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts
usecaseui-portal/src/constants/constants.ts

index 8a2d6e6..548d21a 100644 (file)
@@ -50,12 +50,11 @@ nz-layout {
         position: fixed;
         left: 0;
         z-index: 100;
-        // min-height: 937px;
         height: 100vh;
         background: #313449;
         // background: #313449 url('assets/images/UUIMenuBar.png') no-repeat;
         // background-size: 100%;
-        overflow: scroll;
+        overflow: auto;
 
         .siderContent {
             width: 100%;
index 5a600ce..f659bd4 100644 (file)
@@ -1,53 +1,89 @@
-<nz-list class="taskmodel_list" [nzDataSource]="checkDetail" nzBordered [nzHeader]="'配置审核详情:'" [nzFooter]="null" *ngIf="taskModel!==false"
-    [nzRenderItem]="checkItem">
-    <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.task_id }}</span>
-        </div>
-        <div nz-col nzSpan="8">
-          <span>Task Name: {{ check.task_name }}</span>
-        </div>
-        <div nz-col nzSpan="6">
-          <span>S-NSSAI:{{ check.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.create_time | date: 'yyyy-MM-dd HH:mm:ss' }}</span>
-        </div>
-        <div nz-col nzSpan="8">
-          <span>Status: {{ check.processing_status }}</span>
-        </div>
-      </nz-list-item>
-    </ng-template>
-  </nz-list>
+<nz-list
+       class="taskmodel_list"
+       [nzDataSource]="checkDetail"
+       nzBordered
+       [nzHeader]="'配置审核详情:'"
+       [nzFooter]="null"
+       *ngIf="taskModel !== false"
+       [nzRenderItem]="checkItem"
+>
+       <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.task_id }}</span>
+                       </div>
+                       <div nz-col nzSpan="8">
+                               <span>Task Name: {{ check.task_name }}</span>
+                       </div>
+                       <div nz-col nzSpan="6">
+                               <span>S-NSSAI:{{ check.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.create_time | date: "yyyy-MM-dd HH:mm:ss" }}
+                               </span >
+                       </div>
+                       <div nz-col nzSpan="8">
+                               <span>Status: {{ check.processing_status }}</span>
+                       </div>
+               </nz-list-item>
+       </ng-template>
+</nz-list>
 
-  <nz-list class="taskmodel_list" [nzDataSource]="businessRequirement" nzBordered [nzHeader]="'业务需求信息:'"
-    [nzFooter]="null" [nzRenderItem]="businessItem">
-    <ng-template #businessItem let-item>
-      <nz-list-item  nz-row nzType="flex" nzJustify="start" [nzGutter]="8" *ngFor="let list of businessList ">
-        <div nz-col [nzSpan]="list.length === 1 ? '24' : '8'" *ngFor="let ite of list">
-          <span class="ant-typography" *ngIf="ite!=='区域'">{{ ite.title }} : &nbsp;{{ item[ite.key] }}</span>
-            <span class="ant-typography" *ngIf="ite==='区域'">
-                {{ ite.title }} : &nbsp;
-                <span style="display: inline-block" *ngFor="let items of item[ite.key]">{{ items }}&nbsp;&nbsp;&nbsp;&nbsp;</span>
-                </span>
-        </div>
-      </nz-list-item>
-    </ng-template>
-  </nz-list>
+<nz-list
+       class="taskmodel_list"
+       [nzDataSource]="businessRequirement"
+       nzBordered
+       [nzHeader]="'业务需求信息:'"
+       [nzFooter]="null"
+       [nzRenderItem]="businessItem"
+>
+       <ng-template #businessItem let-item>
+               <nz-list-item
+                       nz-row
+                       nzType="flex"
+                       nzJustify="start"
+                       [nzGutter]="8"
+                       *ngFor="let list of businessList"
+               >
+                       <div
+                               nz-col
+                               [nzSpan]="list.length === 1 ? '24' : '8'"
+                               *ngFor="let ite of list"
+                       >
+                               <span class="ant-typography" *ngIf="ite.title !== '区域'">
+                                       {{ ite.title }} : &nbsp;{{ item[ite.key] }}
+                               </span>
+                               <span class="ant-typography" *ngIf="ite.title === '区域'">
+                                       {{ ite.title }} : &nbsp;
+                                       <nz-tag *ngFor="let value of item[ite.key]">
+                                               {{value}}
+                                       </nz-tag>
+                               </span> 
+                       </div>
+               </nz-list-item>
+       </ng-template>
+</nz-list>
 
-  <nz-list class="taskmodel_list" [nzDataSource]="NSTinfo" nzBordered [nzHeader]="'匹配NST信息:'" [nzFooter]="null"
-    [nzRenderItem]="taskItem">
-    <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.nst_id }}</span>
-        </div>
-        <div nz-col nzSpan="12">
-          <span>NST Name: {{ item.nst_name }}</span>
-        </div>
-      </nz-list-item>
-    </ng-template>
-  </nz-list> 
+<nz-list
+       class="taskmodel_list"
+       [nzDataSource]="NSTinfo"
+       nzBordered
+       [nzHeader]="'匹配NST信息:'"
+       [nzFooter]="null"
+       [nzRenderItem]="taskItem"
+>
+       <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.nst_id }}</span>
+                       </div>
+                       <div nz-col nzSpan="12">
+                               <span>NST Name: {{ item.nst_name }}</span>
+                       </div>
+               </nz-list-item>
+       </ng-template>
+</nz-list>
index 4656c32..80cad73 100644 (file)
@@ -55,11 +55,15 @@ export class CheckProcessModelComponent implements OnInit {
                                        processing_status,
                                        business_demand_info,
                                        nst_info,
-                                       business_demand_info: { service_snssai }
+                                       business_demand_info: { service_snssai, coverage_area_ta_list }
                                } = result_body;
                                // 处理配置审核详情数据
                                this.checkDetail = [{ task_id, task_name, create_time, processing_status, service_snssai }];
                                // 业务需求信息数据
+                               business_demand_info.area = coverage_area_ta_list.map(item => {
+                                       item = item.split(';').join('-')
+                                       return item
+                               })
                                this.businessRequirement = [business_demand_info];
                                // 匹配NST信息
                                this.NSTinfo = [nst_info];
index 85ed088..ff5ec27 100644 (file)
@@ -1,49 +1,84 @@
 <div>
-  <div nz-row>
-    <div nz-col nzSpan="12" class="task_status">
-      <span>Status : </span>
-      <nz-select nzShowSearch nzAllowClear [(ngModel)]="selectedValue" nzPlaceHolder="Select a processing status"
-        (ngModelChange)="processingStatusChange()">
-        <nz-option *ngFor="let item of statusOptions" [nzLabel]="item.title" [nzValue]="item.value"></nz-option>
-      </nz-select>
-    </div>
-  </div>
-  <div>
-    <nz-table #basicTable nzShowPagination nzPageSizeOptions nzShowSizeChanger [nzTotal]="total" [nzLoading]="loading"
-      [nzData]="listOfData" [nzFrontPagination]="false" (nzPageSizeChange)="pageSizeChange($event)"
-      (nzPageIndexChange)="pageNumChange($event)">
-      <thead>
-        <tr>
-          <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.task_id }}</td>
-          <td>{{ data.task_name }}</td>
-          <td>{{ data.service_snssai }}</td>
-          <td>{{ data.service_type }}</td>
-          <td>{{ data.create_time }}</td>
-          <td>{{ data.status }}</td>
-          <td>
-            <span *ngIf="data.processing_status === 'Planning'"
-              class="task_operation_disabled">{{ data.operation }}</span>
-            <a (click)="showdetail(data)" *ngIf="data.processing_status !== 'Planning'">{{ data.operation }}</a>
-          </td>
-        </tr>
-      </tbody>
-    </nz-table>
-  </div>
-  <app-slicing-task-model [moduleTitle]="moduleTitle" [showDetail]="showDetail" [taskId]="taskId"
-    (cancel)="showDetail=$event">
-  </app-slicing-task-model>
-  <app-check-process-model [moduleTitle]="moduleTitle" [showProcess]="showProcess" [taskId]="taskId"
-    (cancel)="showProcess=$event">
-  </app-check-process-model>
-</div>
\ No newline at end of file
+       <div nz-row>
+               <div nz-col nzSpan="12" class="task_status">
+                       <span>Status : </span>
+                       <nz-select
+                               nzShowSearch
+                               nzAllowClear
+                               [(ngModel)]="selectedValue"
+                               nzPlaceHolder="Select a processing status"
+                               (ngModelChange)="processingStatusChange()"
+                       >
+                               <nz-option
+                                       *ngFor="let item of statusOptions"
+                                       [nzLabel]="item.title"
+                                       [nzValue]="item.value"
+                               ></nz-option>
+                       </nz-select>
+               </div>
+       </div>
+       <div>
+               <nz-table
+                       #basicTable
+                       nzShowPagination
+                       nzPageSizeOptions
+                       nzShowSizeChanger
+                       [nzTotal]="total"
+                       [nzLoading]="loading"
+                       [nzData]="listOfData"
+                       [nzPageIndex]="pageNum"
+                       [nzPageSize]="pageSize"
+                       [nzFrontPagination]="false"
+                       (nzPageSizeChange)="pageSizeChange($event)"
+                       (nzPageIndexChange)="pageNumChange($event)"
+               >
+                       <thead>
+                               <tr>
+                                       <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.task_id }}</td>
+                                       <td>{{ data.task_name }}</td>
+                                       <td>{{ data.service_snssai }}</td>
+                                       <td>{{ data.service_type }}</td>
+                                       <td>{{ data.create_time | date: "yyyy-MM-dd HH:mm:ss"}}</td>
+                                       <td>{{ data.status }}</td>
+                                       <td>
+                                               <span
+                                                       *ngIf="data.processing_status === 'Planning'"
+                                                       class="task_operation_disabled"
+                                                       >{{ data.operation }}</span
+                                               >
+                                               <a
+                                                       (click)="showdetail(data)"
+                                                       *ngIf="data.processing_status !== 'Planning'"
+                                                       >{{ data.operation }}</a
+                                               >
+                                       </td>
+                               </tr>
+                       </tbody>
+               </nz-table>
+       </div>
+       <app-slicing-task-model
+               [moduleTitle]="moduleTitle"
+               [showDetail]="showDetail"
+               [taskId]="taskId"
+               (cancel)="showDetail = $event"
+       >
+       </app-slicing-task-model>
+       <app-check-process-model
+               [moduleTitle]="moduleTitle"
+               [showProcess]="showProcess"
+               [taskId]="taskId"
+               (cancel)="showProcess = $event"
+       >
+       </app-check-process-model>
+</div>
index e70e6d4..fd135a6 100644 (file)
@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { NzMessageService } from 'ng-zorro-antd';
-import * as moment from 'moment';
 import { SlicingTaskServices } from '.././../../../core/services/slicingTaskServices';
 import { TASK_PROCESSING_STATUS } from '../../../../../constants/constants';
 
@@ -93,7 +92,6 @@ export class SlicingTaskManagementComponent implements OnInit {
 
   dataFormatting(list: any): void {
     this.listOfData = list.map(item => {
-      item.create_time = moment(item.create_time).format('YYYY-MM-DD hh:mm')
       switch (item.processing_status) {
         case 'Planning':
           item.status = '规划阶段';
index f9ef151..3ccd869 100644 (file)
@@ -96,8 +96,9 @@ export class SlicingTaskModelComponent implements OnInit {
           create_time, 
           processing_status, 
           business_demand_info, 
-          nst_info, nsi_nssi_info, 
-          business_demand_info: { service_snssai } 
+          nst_info, 
+          nsi_nssi_info, 
+          business_demand_info: { service_snssai, coverage_area_ta_list } 
         } = res.result_body;
         const { 
           suggest_nsi_id, 
@@ -127,6 +128,10 @@ export class SlicingTaskModelComponent implements OnInit {
         // 处理配置审核详情数据
         this.checkDetail = [{ task_id, task_name, create_time, processing_status, service_snssai }];
         // 业务需求信息数据
+        business_demand_info.area = coverage_area_ta_list.map(item => {
+          item = item.split(';').join('-')
+          return item
+        })
         this.businessRequirement = [business_demand_info];
         // 匹配NST信息
         this.NSTinfo = [nst_info];
@@ -347,6 +352,7 @@ export class SlicingTaskModelComponent implements OnInit {
       cn_suggest_nssi_name: slicingSubnet[2].slicingName,
       ...slicingSubnet[2].params,
     }
+    delete businessRequirement[0].area
     let reqBody = {...checkDetail[0], business_demand_info: businessRequirement[0], nst_info: NSTinfo[0], nsi_nssi_info};
     delete reqBody.service_snssai;
     this.notification1.notificationStart('Task', 'Sumbit', this.taskId)
index e8ab5c4..160a328 100644 (file)
@@ -78,7 +78,7 @@ export const BUSINESS_REQUIREMENT = [
        [\r
                {\r
                        title: '区域',\r
-                       key: 'coverage_area_ta_list'\r
+                       key: 'area'\r
                },\r
        ],\r
        \r