diff options
6 files changed, 180 insertions, 116 deletions
diff --git a/usecaseui-portal/src/app/mock/json/slicing_task_auditInfo.json b/usecaseui-portal/src/app/mock/json/slicing_task_auditInfo.json index 17d589d7..69568313 100644 --- a/usecaseui-portal/src/app/mock/json/slicing_task_auditInfo.json +++ b/usecaseui-portal/src/app/mock/json/slicing_task_auditInfo.json @@ -36,7 +36,7 @@ "an_5qi": "8",
"an_coverage_area_ta_list": [" xxxx;xxxxx;xxxxx ", " xxxx;xxxxx;xxxxx ", " xxxx;xxxxx;xxxxx "],
"tn_suggest_nssi_id": "46da8cf8-0878-48ac-bea3-f2200959411a",
- "tn_suggest_nssi_name": "46da8cf8-0878-48ac-bea3-f2200959411a",
+ "tn_suggest_nssi_name": "eMBB TNinstance1",
"tn_latency": "10",
"tn_bandwidth": "300",
"cn_suggest_nssi_id": "46da8cf8-0878-48ac-bea3-f2200959411a",
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html index 40a166c3..57e13653 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html @@ -36,7 +36,7 @@ </tbody> </nz-table> </div> - <app-slicing-task-model [moduleTitle]="moduleTitle" [showDetail]="showDetail" [modelData]="detailData" + <app-slicing-task-model [moduleTitle]="moduleTitle" [showDetail]="showDetail" [taskId]="taskId" (cancel)="showDetail=$event"> </app-slicing-task-model> </div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts index 7bba2c07..5c6eb369 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts @@ -17,10 +17,11 @@ export class SlicingTaskManagementComponent implements OnInit { } showDetail: boolean = false; selectedValue = null; - detailData: object = {}; + // detailData: object = {}; + taskId: string; moduleTitle: string = ""; - listOfData = []; - statusOptions = TASK_PROCESSING_STATUS; + listOfData: any[] = []; + statusOptions: any[] = TASK_PROCESSING_STATUS; getTaskList (): void{ this.myhttp.getSlicingTaskList('1', '10').subscribe (res => { @@ -64,8 +65,8 @@ export class SlicingTaskManagementComponent implements OnInit { }) } - showdetail(data: any) { - this.detailData = data; + showdetail(data: any): void { + this.taskId = data.task_id; this.showDetail = true; this.moduleTitle = data.status; } 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(); + // 对应操作逻辑未编写 + } } diff --git a/usecaseui-portal/src/constants/constants.ts b/usecaseui-portal/src/constants/constants.ts index 46d9f7c4..a83178b5 100644 --- a/usecaseui-portal/src/constants/constants.ts +++ b/usecaseui-portal/src/constants/constants.ts @@ -1,18 +1,74 @@ export const TASK_PROCESSING_STATUS = [
- {
- title: '规划阶段',
- value: 'Planning'
- },
- {
- title: '审核阶段',
- value: 'Waiting to Confirm'
- },
- {
- title: '切片创建中',
- value: 'Creating'
- },
- {
- title: '创建完成',
- value: 'Completed'
- }
- ]
\ No newline at end of file + {
+ title: '规划阶段',
+ value: 'Planning'
+ },
+ {
+ title: '审核阶段',
+ value: 'Waiting to Confirm'
+ },
+ {
+ title: '切片创建中',
+ value: 'Creating'
+ },
+ {
+ title: '创建完成',
+ value: 'Completed'
+ }
+]
+
+export const BUSINESS_REQUIREMENT = [
+ {
+ title: '切片业务名称',
+ key: 'service_name'
+ },
+ {
+ title: 'S-NSSAI',
+ key: 'service_snssai'
+ },
+ {
+ title: '用户下行带宽（Mbps）',
+ key: 'exp_data_rate_dl'
+ },
+ {
+ title: '用户上行带宽（Mbps）',
+ key: 'exp_data_rate_u'
+ },
+ {
+ title: '游牧性',
+ key: 'ue_mobility_level'
+ },
+ {
+ title: '时延（ms）',
+ key: 'latency'
+ },
+ {
+ title: '使用期限（月）',
+ key: 'use_interval'
+ },
+ {
+ title: '区域',
+ key: 'coverage_area_ta_list'
+ },
+ {
+ title: '激活因子（%）',
+ key: 'activity_factor'
+ },
+ {
+ title: '共享等级',
+ key: 'resource_sharing_level'
+ },
+ {
+ title: '上行区域流量密度（Mbps/km ）',
+ key: 'area_traffic_cap_ul'
+ },
+ {
+ title: '连接规模数',
+ key: 'max_number_of_ues'
+ },
+ {
+ title: '下行区域流量密度（Mbps/km ）',
+ key: 'area_traffic_cap_dl'
+ }
+
+]
|