diff options
Diffstat (limited to 'usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management')
6 files changed, 210 insertions, 29 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 89d64f51..3aca68fb 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 @@ -55,15 +55,19 @@ <nz-list-item nz-row nzType="flex" nzJustify="start" [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 nzShowSearch + [(ngModel)]="selectedServiceId" + (ngModelChange)="slicingInstanceChange()" + (nzOpenChange)="getSlicingData($event)" + > + <nz-option *ngFor="let item of slicingInstances" [nzValue]="item.service_instance_id" [nzLabel]="item.service_instance_id"></nz-option> </nz-select> </div> <div nz-col nzSpan="8"> - 切片实例名称：{{selectedServiceName}} + 切片实例名称：{{ selectedServiceName }} </div> <div nz-col nzSpan="4"> - <button nz-button nzType="primary" (click)="resetService()"> + <button nz-button nzType="primary" (click)="resetSlicingInstance()"> <i nz-icon class="anticon anticon-plus"></i> </button> </div> @@ -74,23 +78,26 @@ <div nz-row [nzGutter]="8"> <div nz-col nzSpan="12"> 切片子网实例 ID： - <nz-select nzShowSearch [(ngModel)]="item.slicingId" (ngModelChange)="serviceIdChange($event)"> - <nz-option *ngFor="let p of serviceId" [nzValue]="p" [nzLabel]="p"></nz-option> + <nz-select nzShowSearch [(ngModel)]="item.slicingId" (ngModelChange)="slicingSubnetChange(item)" (nzOpenChange)="getSubnetInstances($event, item)"> + <nz-option *ngFor="let item of item.instances" [nzValue]="item.service_instance_id" [nzLabel]="item.service_instance_id"></nz-option> </nz-select> </div> <div nz-col nzSpan="8"> 切片子网实例名称：{{item.slicingName}} </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> + <button nz-button nzType="primary" (click)="restSubnetInstance(item)"> + <i nz-icon class="anticon anticon-plus"></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"></app-subnet-params-model> </nz-modal>
\ 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 8d61029e..88eb586a 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 @@ -26,24 +26,36 @@ export class SlicingTaskModelComponent implements OnInit { // 共享切片实例 selectedServiceId: string; selectedServiceName: string; + slicingInstances: any[]; + loading: boolean = false; // 子网实例 slicingSubnet: any[] = [ { title: '无线域', + context: 'an', slicingId: '', - slicingName: '' + slicingName: '', + instances: [] }, { title: '传输域', + context: 'tn', slicingId: '', - slicingName: '' + slicingName: '', + instances: [] }, { title: '核心网域', + context: 'cn', slicingId: '', - slicingName: '' + slicingName: '', + instances: [] } ] + // 子网参数 + isShowParams: boolean; + paramsTitle: string; + params: any; ngOnInit() { } @@ -66,7 +78,23 @@ export class SlicingTaskModelComponent implements OnInit { tn_suggest_nssi_id, tn_suggest_nssi_name, cn_suggest_nssi_id, - cn_suggest_nssi_name } = nsi_nssi_info; + cn_suggest_nssi_name, + an_latency, + an_5qi, + an_coverage_area_ta_list, + tn_latency, + tn_bandwidth, + cn_service_snssai, + cn_resource_sharing_level, + cn_ue_mobility_level, + cn_latency, + cn_max_number_of_ues, + cn_activity_factor, + cn_exp_data_rate_dl, + cn_exp_data_rate_ul, + cn_area_traffic_cap_dl, + cn_area_traffic_cap_ul + } = nsi_nssi_info; // 处理配置审核详情数据 this.checkDetail = [{ task_id, task_name, create_timer, processing_status, service_snssai }]; // 业务需求信息数据 @@ -75,38 +103,124 @@ export class SlicingTaskModelComponent implements OnInit { // 共享切片实例 this.selectedServiceId = suggest_nsi_id; this.selectedServiceName = suggest_nsi_name; + this.slicingInstances = [{ + service_instance_id: this.selectedServiceId, + service_instance_name: this.selectedServiceName + }]; // 子网实例 this.slicingSubnet[0].slicingId = an_suggest_nssi_id; this.slicingSubnet[0].slicingName = an_suggest_nssi_name; + this.slicingSubnet[0].instances = [{ + service_instance_id: an_suggest_nssi_id, + service_instance_name: an_suggest_nssi_name + }]; + this.slicingSubnet[0].params = { an_latency, an_5qi, an_coverage_area_ta_list } + this.slicingSubnet[1].slicingId = tn_suggest_nssi_id; this.slicingSubnet[1].slicingName = tn_suggest_nssi_name; + this.slicingSubnet[1].instances = [{ + service_instance_id: tn_suggest_nssi_id, + service_instance_name: tn_suggest_nssi_name + }]; + this.slicingSubnet[1].params = { tn_latency, tn_bandwidth }; + this.slicingSubnet[2].slicingId = cn_suggest_nssi_id; this.slicingSubnet[2].slicingName = cn_suggest_nssi_name; + this.slicingSubnet[2].instances = [{ + service_instance_id: cn_suggest_nssi_id, + service_instance_name: cn_suggest_nssi_name + }]; + this.slicingSubnet[2].params = { + cn_service_snssai, + cn_resource_sharing_level, + cn_ue_mobility_level, + cn_latency, + cn_max_number_of_ues, + cn_activity_factor, + cn_exp_data_rate_dl, + cn_exp_data_rate_ul, + cn_area_traffic_cap_dl, + cn_area_traffic_cap_ul + }; } }) } + getSlicingData ( bool: boolean): void { + this.loading = true + if (bool && this.slicingInstances.length === 1) { + this.http.getSlicingInstance('1', '10').subscribe ( res => { + this.loading = false; + const { result_header: { result_code }, result_body: { nsi_service_instances } } = res + if (+result_code === 200) { + this.slicingInstances = nsi_service_instances; + } + }) + } + } + slicingInstanceChange ():void { + // 获取切片子网实例数据 + this.http.getSlicingSubnetInstance(this.selectedServiceId).subscribe( res => { + const { result_header: { result_code }, result_body} = res; + if (+result_code === 200) { + const { an_suggest_nssi_id, an_suggest_nssi_name, tn_suggest_nssi_id, tn_suggest_nssi_name, cn_suggest_nssi_id, cn_suggest_nssi_name } = result_body; + 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; + } + }) + this.slicingInstances.forEach (item => { + if (item.service_instance_id === this.selectedServiceId) { + this.selectedServiceName = item.service_instance_name; + } + }) + } + resetSlicingInstance (): void { + this.selectedServiceId = ''; + this.selectedServiceName = ''; + this.slicingSubnet.map( item => { + item.slicingId = ''; + item.slicingName = ''; + }) + } + getSubnetInstances (bool: boolean, instance: any): void { + if(bool && instance.instances.length === 1) { + this.http.getSubnetInContext(instance.context, '1', '10').subscribe( res => { + const { result_header: { result_code }, result_body } = res; + if (+result_code === 200) { + this.slicingSubnet.map (item => { + if (item.context === instance.context) { + item.instances = result_body.nssi_service_instances; + } + }) + } + }) + } + } + slicingSubnetChange (instance: any): void { + instance.instances.forEach( item => { + if (instance.slicingId === item.service_instance_id) { + instance.slicingName = item.service_instance_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", - "46da8cf8-0878-48ac-bea3-f2200959411b": "eMBB instancelb", - "46da8cf8-0878-48ac-bea3-f2200959411c": "eMBB instancelc", - }; - - - - serviceIdChange(value: string): void { - this.selectedServiceName = this.serviceData[value]; - console.log(this.selectedServiceName, "=====") + restSubnetInstance (instance: any): void { + instance.slicingId = ''; + instance.slicingName = ''; } - resetService() { - this.selectedServiceId = ""; - this.serviceIdChange(this.selectedServiceId); + + showParamsModel (item: any): void { + this.isShowParams = true; + this.paramsTitle = item.title; + this.params = item.params } handleCancel() { diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html new file mode 100644 index 00000000..04042d7f --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html @@ -0,0 +1,2 @@ +<nz-modal [(nzVisible)]="showModel" [nzTitle]="title" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" nzWidth="750px"> +</nz-modal> diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.less new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.less diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.spec.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.spec.ts new file mode 100644 index 00000000..b5325d85 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SubnetParamsModelComponent } from './subnet-params-model.component'; + +describe('SubnetParamsModelComponent', () => { + let component: SubnetParamsModelComponent; + let fixture: ComponentFixture<SubnetParamsModelComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SubnetParamsModelComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SubnetParamsModelComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts new file mode 100644 index 00000000..ec8790ab --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts @@ -0,0 +1,33 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { WIRELESS_FORM_ITEMS, TRANSFRER_FORM_ITEMS } from '../.../../../../../../../../constants/constants' + +@Component({ + selector: 'app-subnet-params-model', + templateUrl: './subnet-params-model.component.html', + styleUrls: ['./subnet-params-model.component.less'] +}) +export class SubnetParamsModelComponent implements OnInit { + + @Input() showModel: boolean; + @Input() detailData: any; + @Input() title: string; + @Output() cancel = new EventEmitter<boolean>(); + + transferFormItems = TRANSFRER_FORM_ITEMS; + + constructor() { } + + ngOnInit() { + + } + + handleCancel() { + this.showModel = false + this.cancel.emit(this.showModel) + } + + handleOk(): void { + this.handleCancel() + } + +} |