diff options
author | 2019-11-29 08:50:25 +0800 | |
---|---|---|
committer | 2019-11-29 08:50:34 +0800 | |
commit | ab3256d731b6c439f16869c3f193483532d57e23 (patch) | |
tree | cdd5f701c3562851bed4a469d380f0f6abeb495e /usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model | |
parent | 1f4acde5c38f72327fb02121db57d2ddb9609e99 (diff) |
feat: Completed the initial display of the task processing dialog
Change-Id: I2734c934344e43d504df01e72b9a71a3cfa0e275
Issue-ID: USECASEUI-352
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model')
2 files changed, 99 insertions, 92 deletions
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 f864dc92..89d64f51 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 @@ -5,21 +5,21 @@ <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.id }}</span> + <span>Task ID: {{ check.task_id }}</span> </div> <div nz-col nzSpan="8"> - <span>Task Name: {{ check.name }}</span> + <span>Task Name: {{ check.task_name }}</span> </div> <div nz-col nzSpan="6"> - <span>S-NSSAI:{{ check.snssai }}</span> + <span>S-NSSAI:{{ check.cn_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.arrivedtime }}</span> + <span>Arrived Time: {{ check.create_timer }}</span> </div> <div nz-col nzSpan="8"> - <span>Status: {{ check.status }}</span> + <span>Status: {{ check.processing_status }}</span> </div> </nz-list-item> </ng-template> @@ -28,21 +28,10 @@ <nz-list class="taskmodel_list" [nzDataSource]="businessRequirement" nzBordered [nzHeader]="'业务需求信息:'" [nzFooter]="null" [nzRenderItem]="businessItem"> <ng-template #businessItem let-item> - <nz-list-item> - <span class="ant-typography">Name:</span> - {{ item.name }} - </nz-list-item> - <nz-list-item> - <span class="ant-typography">S-NSSAI: </span> - {{ item.snssai }} - </nz-list-item> - <nz-list-item> - <span class="ant-typography">Time: </span> - {{ item.expiretime }} - </nz-list-item> - <nz-list-item> - <span class="ant-typography">Area: </span> - {{ item. area }} + <nz-list-item *ngFor="let ite of businessList " nz-row> + <div nz-col nz-Span='10'> + <span class="ant-typography">{{ ite.title }} : {{ item[ite.key] }}</span> + </div> </nz-list-item> </ng-template> </nz-list> @@ -52,15 +41,14 @@ <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.id }}</span> + <span>NST ID: {{ item.nst_id }}</span> </div> <div nz-col nzSpan="12"> - <span>NST Name: {{ item.name }}</span> + <span>NST Name: {{ item.nst_name }}</span> </div> </nz-list-item> </ng-template> - </nz-list> - + </nz-list> <div> <nz-list class="taskmodel_list" nzBordered [nzHeader]="'匹配共享切片实例:'" [nzFooter]="null"> @@ -82,35 +70,16 @@ </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 nzType="inner" nz-col nzSpan="24" nzTitle="无线域:"> - <div nz-row [nzGutter]="8"> - <div nz-col nzSpan="12"> - 切片子网实例 ID: - <nz-select nzShowSearch [(ngModel)]="selectedServiceId" (ngModelChange)="serviceIdChange($event)"> - <nz-option *ngFor="let p of serviceId" [nzValue]="p" [nzLabel]="p"></nz-option> - </nz-select> - </div> - <div nz-col nzSpan="8"> - 切片子网实例名称:{{selectedServiceName}} - </div> - <div nz-col nzSpan="4"> - <button nz-button nzType="primary" (click)="resetService()"> <i nz-icon - class="anticon anticon-plus"></i></button> - <button nz-button nzType="primary"> <i nz-icon class="anticon anticon-setting" - nzTheme="outline"></i></button> - </div> - </div> - </nz-card> - <nz-card nzType="inner" nz-col nzSpan="24" style="margin-top:16px;" nzTitle="传输域:"> + <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 [(ngModel)]="selectedServiceId" (ngModelChange)="serviceIdChange($event)"> + <nz-select nzShowSearch [(ngModel)]="item.slicingId" (ngModelChange)="serviceIdChange($event)"> <nz-option *ngFor="let p of serviceId" [nzValue]="p" [nzLabel]="p"></nz-option> </nz-select> </div> <div nz-col nzSpan="8"> - 切片子网实例名称:{{selectedServiceName}} + 切片子网实例名称:{{item.slicingName}} </div> <div nz-col nzSpan="4"> <button nz-button nzType="primary" (click)="resetService()"> <i nz-icon @@ -120,28 +89,6 @@ </div> </div> </nz-card> - <nz-card nzType="inner" nz-col nzSpan="24" style="margin-top:16px;" nzTitle="核心网域:"> - - <div nz-row [nzGutter]="12" nzType="flex" nzAlign="middle"> - <div nz-col nzSpan="12"> - 切片子网实例 ID: - <nz-select nzShowSearch [(ngModel)]="selectedServiceId" (ngModelChange)="serviceIdChange($event)"> - <nz-option *ngFor="let p of serviceId" [nzValue]="p" [nzLabel]="p"></nz-option> - </nz-select> - </div> - <div nz-col nzSpan="8"> - 切片子网实例名称:{{selectedServiceName}} - </div> - <div nz-col nzSpan="4"> - <button nz-button nzType="primary" (click)="resetService()"> - <i nz-icon class="anticon anticon-plus"></i> - </button> - <button nz-button nzType="primary"> - <i nz-icon class="anticon anticon-setting" nzTheme="outline"></i> - </button> - </div> - </div> - </nz-card> </nz-list-item> </nz-list> </div> 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 2abe8d44..8d61029e 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 @@ -1,4 +1,6 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { SlicingTaskServices } from '../../../../../core/services/slicingTaskServices'; +import { BUSINESS_REQUIREMENT } from '../../../../../../constants/constants'; @Component({ selector: 'app-slicing-task-model', @@ -8,29 +10,87 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; export class SlicingTaskModelComponent implements OnInit { @Input() showDetail: boolean; @Input() moduleTitle: string; - @Input() modelData: object; + @Input() taskId: string; @Output() cancel = new EventEmitter<boolean>(); - constructor() { } - checkDetail: [{}] = [{ - id: "b1bb0ce7-ebca-4fa7-95ed-4840d70a1177", - name: "5G Slice eMMB", - snssai: "1-010101", - arrivedtime: "2019-10-29 10:00", - status: "Checking" - }]; //配置审核详情 - businessRequirement: [{}] = [{ - name: "5G Slice eMMB", - snssai: "1-010101", - expiretime: "2019-10-29 10:00", - area: "Beijing", - }];//业务需求信息 - NSTinfo: [{}] = [{ - id: "46da8cf8-0878-48ac-bea3-f2200959411a", - name: "eMBB instancel" - }];//匹配NST信息 - selectedServiceId = '46da8cf8-0878-48ac-bea3-f2200959411a'; - selectedServiceName = ''; + constructor(private http: SlicingTaskServices) { } + + // 业务需求列表 + businessList: object[] = BUSINESS_REQUIREMENT; + // 配置审核详情 + checkDetail: object[] = [{}]; + //业务需求信息 + businessRequirement: object[] = [{}]; + //匹配NST信息 + NSTinfo: object[] = [{}]; + // 共享切片实例 + selectedServiceId: string; + selectedServiceName: string; + // 子网实例 + slicingSubnet: any[] = [ + { + title: '无线域', + slicingId: '', + slicingName: '' + }, + { + title: '传输域', + slicingId: '', + slicingName: '' + }, + { + title: '核心网域', + slicingId: '', + slicingName: '' + } + ] + + ngOnInit() { } + + ngOnChanges() { + if (this.showDetail) { + this.getautidInfo(); + } + } + + getautidInfo(): void { + this.http.getAuditInfo(this.taskId).subscribe( res => { + const { result_header: { result_code } } = res; + if (+result_code === 200) { + const { task_id, task_name, create_timer, processing_status, business_demand_info, nst_info, nsi_nssi_info, business_demand_info: { service_snssai } } = res.result_body; + const { + suggest_nsi_id, + suggest_nsi_name, + an_suggest_nssi_id, + an_suggest_nssi_name, + tn_suggest_nssi_id, + tn_suggest_nssi_name, + cn_suggest_nssi_id, + cn_suggest_nssi_name } = nsi_nssi_info; + // 处理配置审核详情数据 + this.checkDetail = [{ task_id, task_name, create_timer, processing_status, service_snssai }]; + // 业务需求信息数据 + this.businessRequirement = [business_demand_info]; + this.NSTinfo = [nst_info]; + // 共享切片实例 + this.selectedServiceId = suggest_nsi_id; + this.selectedServiceName = suggest_nsi_name; + // 子网实例 + this.slicingSubnet[0].slicingId = an_suggest_nssi_id; + this.slicingSubnet[0].slicingName = an_suggest_nssi_name; + this.slicingSubnet[1].slicingId = tn_suggest_nssi_id; + this.slicingSubnet[1].slicingName = tn_suggest_nssi_name; + this.slicingSubnet[2].slicingId = cn_suggest_nssi_id; + this.slicingSubnet[2].slicingName = cn_suggest_nssi_name; + } + }) + } + + + + + + serviceId = ['46da8cf8-0878-48ac-bea3-f2200959411a', '46da8cf8-0878-48ac-bea3-f2200959411b', '46da8cf8-0878-48ac-bea3-f2200959411c']; serviceData: {} = { "46da8cf8-0878-48ac-bea3-f2200959411a": "eMBB instancela", @@ -38,9 +98,7 @@ export class SlicingTaskModelComponent implements OnInit { "46da8cf8-0878-48ac-bea3-f2200959411c": "eMBB instancelc", }; - ngOnInit() { - this.serviceIdChange(this.selectedServiceId) - } + serviceIdChange(value: string): void { this.selectedServiceName = this.serviceData[value]; @@ -57,5 +115,7 @@ export class SlicingTaskModelComponent implements OnInit { } handleOk() { this.handleCancel(); + // 对应操作逻辑未编写 + } } |