diff options
Diffstat (limited to 'usecaseui-portal/src/app/views')
4 files changed, 155 insertions, 129 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 07599bfb..ebe1e15b 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 @@ -5,39 +5,39 @@ (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" > - <app-basic-info - [checkDetail]="checkDetail" - [businessRequirement]="businessRequirement" - [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-spin [nzSpinning]="isSpinning"> + <app-basic-info + [checkDetail]="checkDetail" + [businessRequirement]="businessRequirement" + [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-spin> </nz-modal> 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 77a36a06..4656c32e 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 @@ -1,4 +1,5 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { NzMessageService } from 'ng-zorro-antd'; import { SlicingTaskServices } from '../../../../../core/services/slicingTaskServices' @Component({ @@ -14,7 +15,7 @@ export class CheckProcessModelComponent implements OnInit { @Output() cancel = new EventEmitter<boolean>(); - constructor(private http: SlicingTaskServices) { } + constructor(private http: SlicingTaskServices, private message: NzMessageService) { } checkDetail: any[]; businessRequirement: any[]; @@ -22,20 +23,29 @@ export class CheckProcessModelComponent implements OnInit { data: any[]; currentProgress: number = 1; timer: any = null; + isSpinning: boolean = false; + isGetData: boolean = false; ngOnInit() { } ngOnChanges() { if (this.showProcess) { + this.isSpinning = true; this.getInfo(); this.getProgress(); }else { clearTimeout(this.timer); + this.isGetData = false; } } getInfo(): void { this.http.getSlicingBasicInfo(this.taskId).subscribe(res => { + if (this.isGetData) { + this.isSpinning = false; + } else { + this.isGetData = true; + } const { result_body, result_header: { result_code } } = res; if (+result_code === 200) { const { @@ -53,12 +63,20 @@ export class CheckProcessModelComponent implements OnInit { this.businessRequirement = [business_demand_info]; // 匹配NST信息 this.NSTinfo = [nst_info]; + } else { + const errorMessage = this.moduleTitle === '切片创建中' ? 'Failed to get data' : 'Viewing results failed'; + this.message.error(errorMessage) } }) } getProgress(): void { this.http.getSlicingCreateProgress(this.taskId).subscribe(res => { + if (this.isGetData) { + this.isSpinning = false; + } else { + this.isGetData = true; + } const { result_body, result_header: {result_code } } = res; if (+result_code === 200) { this.data = []; @@ -85,6 +103,8 @@ export class CheckProcessModelComponent implements OnInit { this.getProgress() }, 5000) } + } else { + this.message.error('Failed to get progress') } }) } 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 666fa16b..62b01134 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 @@ -1,100 +1,101 @@ <nz-modal [nzVisible]="showDetail" nzWidth="85%" [nzTitle]="moduleTitle" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"> - <app-basic-info - [checkDetail]="checkDetail" - [businessRequirement]="businessRequirement" - [NSTinfo]="NSTinfo" - > - </app-basic-info> - - <div> - <nz-list class="taskmodel_list" nzBordered [nzHeader]="'匹配共享切片实例：'" [nzFooter]="null" *ngIf="slicingInstances"> - <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8"> - <div nz-col nzSpan="12"> - 切片实例 ID： - <nz-select - nzShowSearch - [(ngModel)]="selectedServiceId" - (nzOpenChange)="openSlicingInstance($event)" - (nzScrollToBottom)="getNextPageData()" - (ngModelChange)="slicingInstanceChange()" - > - <nz-option - nzCustomContent - *ngFor="let item of slicingInstances.list" - [nzValue]="item.service_instance_id" - [nzLabel]="item.service_instance_id" + <nz-spin [nzSpinning]="isSpinning"> + <app-basic-info + [checkDetail]="checkDetail" + [businessRequirement]="businessRequirement" + [NSTinfo]="NSTinfo" + > + </app-basic-info> + <div> + <nz-list class="taskmodel_list" nzBordered [nzHeader]="'匹配共享切片实例：'" [nzFooter]="null" *ngIf="slicingInstances"> + <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8"> + <div nz-col nzSpan="12"> + 切片实例 ID： + <nz-select + nzShowSearch + [(ngModel)]="selectedServiceId" + (nzOpenChange)="openSlicingInstance($event)" + (nzScrollToBottom)="getNextPageData()" + (ngModelChange)="slicingInstanceChange()" > - <span>{{item.service_instance_name + ' -- '}}</span> {{item.service_instance_id}} - </nz-option> - <nz-option *ngIf="slicingInstances.isLoading" nzDisabled nzCustomContent> - <i class="anticon anticon-loading anticon-spin loading-icon"></i> - Loading Data... - </nz-option> - </nz-select> - </div> - <div nz-col nzSpan="8"> - 切片实例名称：{{ selectedServiceName }} - </div> - <div nz-col nzSpan="4"> - <button nz-button nzType="primary" (click)="resetSlicingInstance()"> - <i nz-icon class="anticon anticon-delete"></i> - </button> - </div> - </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 *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 - [nzDisabled]="isDisabled" - [(ngModel)]="item.slicingId" - (ngModelChange)="slicingSubnetChange(item)" - (nzOpenChange)="openSubnetInstances($event, item)" - (nzScrollToBottom)="getNextPageSubnet(item)" + <nz-option + nzCustomContent + *ngFor="let item of slicingInstances.list" + [nzValue]="item.service_instance_id" + [nzLabel]="item.service_instance_id" > - <nz-option - nzCustomContent - *ngFor="let item of item.instances" - [nzValue]="item.service_instance_id" - [nzLabel]="item.service_instance_id" + <span>{{item.service_instance_name + ' -- '}}</span> {{item.service_instance_id}} + </nz-option> + <nz-option *ngIf="slicingInstances.isLoading" nzDisabled nzCustomContent> + <i class="anticon anticon-loading anticon-spin loading-icon"></i> + Loading Data... + </nz-option> + </nz-select> + </div> + <div nz-col nzSpan="8"> + 切片实例名称：{{ selectedServiceName }} + </div> + <div nz-col nzSpan="4"> + <button nz-button nzType="primary" (click)="resetSlicingInstance()"> + <i nz-icon class="anticon anticon-delete"></i> + </button> + </div> + </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 *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 + [nzDisabled]="isDisabled" + [(ngModel)]="item.slicingId" + (ngModelChange)="slicingSubnetChange(item)" + (nzOpenChange)="openSubnetInstances($event, item)" + (nzScrollToBottom)="getNextPageSubnet(item)" > - <span>{{item.service_instance_name + ' -- '}}</span> {{item.service_instance_id}} - </nz-option> - <nz-option *ngIf="item.isLoading" nzDisabled nzCustomContent> - <i class="anticon anticon-loading anticon-spin loading-icon"></i> - Loading Data... - </nz-option> - </nz-select> + <nz-option + nzCustomContent + *ngFor="let item of item.instances" + [nzValue]="item.service_instance_id" + [nzLabel]="item.service_instance_id" + > + <span>{{item.service_instance_name + ' -- '}}</span> {{item.service_instance_id}} + </nz-option> + <nz-option *ngIf="item.isLoading" nzDisabled nzCustomContent> + <i class="anticon anticon-loading anticon-spin loading-icon"></i> + Loading Data... + </nz-option> + </nz-select> + </div> + <div nz-col nzSpan="8"> + 切片子网实例名称：{{item.slicingName}} + </div> + <div nz-col nzSpan="4"> + <button nz-button nzType="primary" (click)="restSubnetInstance(item)" [disabled]='isDisabled' + [attr.disabled]='isDisabled?true:undefined'> + <i nz-icon class="anticon anticon-delete"></i> + </button> + <button nz-button nzType="primary" (click)="showParamsModel(item)"> + <i nz-icon class="anticon anticon-setting" nzTheme="outline"></i> + </button> + </div> </div> - <div nz-col nzSpan="8"> - 切片子网实例名称：{{item.slicingName}} - </div> - <div nz-col nzSpan="4"> - <button nz-button nzType="primary" (click)="restSubnetInstance(item)" [disabled]='isDisabled' - [attr.disabled]='isDisabled?true:undefined'> - <i nz-icon class="anticon anticon-delete"></i> - </button> - <button nz-button nzType="primary" (click)="showParamsModel(item)"> - <i nz-icon class="anticon anticon-setting" nzTheme="outline"></i> - </button> - </div> - </div> - </nz-card> - </nz-list-item> - </nz-list> - </div> - <app-subnet-params-model - [showModel]="isShowParams" - [detailData]="params" - [title]="paramsTitle" - (cancel)="isShowParams=$event" - (paramsDataChange)="changeParams($event)" - > - </app-subnet-params-model> - + </nz-card> + </nz-list-item> + </nz-list> + </div> + + </nz-spin> </nz-modal> +<app-subnet-params-model + [showModel]="isShowParams" + [detailData]="params" + [title]="paramsTitle" + (cancel)="isShowParams=$event" + (paramsDataChange)="changeParams($event)" +> +</app-subnet-params-model> <app-notification #notification [isServicesList]="false" [parentComponent]="'slicing'"></app-notification>
\ No newline at end of file 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 ff64dfe1..b55844bc 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 @@ -71,13 +71,15 @@ export class SlicingTaskModelComponent implements OnInit { isShowParams: boolean; paramsTitle: string; params: any; - + // 获取数据loading + isSpinning: boolean = false; ngOnInit() { } ngOnChanges() { if (this.showDetail) { + this.isSpinning = true; this.getautidInfo(); } else { this.isDisabled = true; @@ -87,6 +89,7 @@ export class SlicingTaskModelComponent implements OnInit { getautidInfo(): void { this.http.getAuditInfo(this.taskId).subscribe( res => { const { result_header: { result_code } } = res; + this.isSpinning = false; if (+result_code === 200) { const { task_id, @@ -159,6 +162,8 @@ export class SlicingTaskModelComponent implements OnInit { cn_area_traffic_cap_dl, cn_area_traffic_cap_ul }; + } else { + this.message.error('Failed to get data') } }) } |