diff options
Diffstat (limited to 'usecaseui-portal/src/app/views')
4 files changed, 237 insertions, 9 deletions
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html index d4914dd1..0ad676a0 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html @@ -1,3 +1,54 @@ -<nz-modal [(nzVisible)]="showModel" nzTitle="Create Slicing Business Order" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" +<nz-spin nzTip='Loading...' [nzSpinning]="isSpinning"> +<nz-modal [(nzVisible)]="showModel" nzTitle="Create Slicing Business Order" (nzOnCancel)="handleCancel()" + (nzOnOk)="handleOk()" nzWidth="900px"> + <div class="subnet_params_container"> + <form nz-form> + <nz-form-item *ngFor="let item of comunicationFormItems"> + <nz-form-label [nzSpan]="6" nzRequired [nzFor]="item.key"> + {{ item.title }} + </nz-form-label> + <nz-form-control [nzSpan]="15"> + <input nz-input [id]="item.key" [name]="item.key" [(ngModel)]="slicing_order_info[item.key]" + *ngIf=" item.title !== 'Resource Sharing Level' && item.title !== 'Mobility' && item.title !== 'Area' "/> + <nz-radio-group [name]="item.key" [(ngModel)]="slicing_order_info[item.key]" + *ngIf="item.title === 'Resource Sharing Level'"> + <label nz-radio [nzValue]="option.key" *ngFor="let option of item.options"> + {{ option.title }} + </label> + </nz-radio-group> + <nz-select [name]="item.key" [(ngModel)]="slicing_order_info[item.key]" + *ngIf="item.title === 'Mobility'"> + <nz-option [nzValue]="option.key" [nzLabel]="option.title" *ngFor="let option of item.options"> + </nz-option> + </nz-select> + </nz-form-control> + <div *ngIf="item.key === 'coverageArea'"> + <div *ngFor="let area of areaList; let i = index"> + <nz-form-control [nzSpan]="!ind ? 3 : 4" [nzOffset]="i && !ind ? 6 : 0" + class="subnet_params_area" + *ngFor="let item of area; let ind = index"> + <nz-select [(ngModel)]="item.selected" [name]="'area' + i + ind" + (nzOpenChange)="handleChange(area, item)" + (ngModelChange)=" handleChangeSelected(area, item) "> + <nz-option [nzValue]="op.name" [nzLabel]="op.name" *ngFor="let op of item.options"> + </nz-option> + </nz-select> + </nz-form-control> + <nz-form-control [nzSpan]="1" [nzOffset]="1"> + <button nz-button nzType="primary" nzSize="small" class="subnet_params_button" *ngIf="!i" + (click)="creatAreaList()"> + <i nz-icon class="anticon anticon-plus subnet_params_icon"></i> + </button> + <button nz-button nzType="primary" nzSize="small" class="subnet_params_button" *ngIf="i" + (click)="deleteAreaList(i)"> + <i nz-icon class="anticon anticon-minus subnet_params_icon"></i> + </button> + </nz-form-control> + </div> + </div> + </nz-form-item> + </form> + </div> </nz-modal> +</nz-spin>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.less b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.less index e69de29b..3871a5fa 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.less +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.less @@ -0,0 +1,19 @@ +.subnet_params_container{ + padding-left: 3%; + .subnet_params_area{ + margin-right: 5px; + } + .ant-btn-icon-only{ + padding: 0 5px !important; + } + .subnet_params_button{ + margin-top: 7px; + margin-left: 10px; + } + .subnet_params_icon{ + font-size: 14px; + } +} +.ant-form-item-label { + text-align: left; +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts index 0647b76d..f31f4dd1 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts @@ -1,5 +1,8 @@ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; -import {COMMUNICATION_FORM_ITEMS} from "../../../../../../constants/constants"; +import {COMMUNICATION_FORM_ITEMS, COMMUNICATION_FORM_ADDRESS} from "../../../../../../constants/constants"; +import {SlicingTaskServices} from "../../../../../core/services/slicingTaskServices"; +import {NzMessageService} from "ng-zorro-antd"; + @Component({ selector: 'app-business-order', templateUrl: './business-order.component.html', @@ -7,18 +10,173 @@ import {COMMUNICATION_FORM_ITEMS} from "../../../../../../constants/constants"; }) export class BusinessOrderComponent implements OnInit { - constructor() { } + constructor( + private myhttp: SlicingTaskServices, + private message: NzMessageService + ) { + } - ngOnInit() { - } + ngOnInit() { + } + ngOnChanges() { + this.AreaFormatting(); + } @Input() showModel: boolean; @Output() cancel = new EventEmitter<boolean>(); + comunicationFormItems = COMMUNICATION_FORM_ITEMS; + slicing_order_info = { + name: null, + maxNumberofUEs: null, + expDataRateDL: null, + latency: null, + expDataRateUL: null, + resourceSharingLevel: "shared", + uEMobilityLevel: null, + useInterval: null, + coverageArea: '' + }; + areaList: any[] = []; + isSpinning: boolean = false; + AreaFormatting() { + let areaList = ['Beijing;Beijing;Haidian District;Wanshoulu Street']; + this.areaList = areaList.map((item: any) => { + let arr = item.split(';'); + item = arr.map((ite, index) => { + let key: string; + if (!index) { + key = 'province'; + } else if (index === 1) { + key = 'city' + } else if (index === 2) { + key = 'district' + } else { + key = 'street' + } + const obj: any = {}; + obj.key = key; + obj.selected = ite + obj.options = [{name: ite, id: ite}] + return obj + }) + return item; + }) + } + + creatAreaList (): void { + let arr = [ + { + key: 'province', + selected: '', + options: [] + }, + { + key: 'city', + selected: '', + options: [] + }, + { + key: 'district', + selected: '', + options: [] + }, + { + key: 'street', + selected: '', + options: [] + } + ] + this.areaList.push(arr) + } + + deleteAreaList (index: number): void { + this.areaList.splice(index,1); + } + + handleChange(area: any[], areaItem: any): void{ + if (areaItem.key === 'province' && areaItem.options.length <= 1) { + areaItem.options = COMMUNICATION_FORM_ADDRESS; + } else if (areaItem.key === 'city' && areaItem.options.length <= 1) { + COMMUNICATION_FORM_ADDRESS.forEach( item => { + if(item.name === area[0].selected) { + areaItem.options = item.city; + } + }) + }else if (areaItem.key === 'district' && areaItem.options.length <= 1) { + COMMUNICATION_FORM_ADDRESS.forEach( (item: any) => { + item.city.forEach(city => { + if (city.name === area[1].selected) { + areaItem.options = city.county; + } + }) + }) + }else if (areaItem.key === 'street' && areaItem.options.length <= 1) { + COMMUNICATION_FORM_ADDRESS.forEach( (item: any) => { + item.city.forEach(city => { + if (city.name === area[1].selected) { + city.county.forEach(county => { + if (county.name === area[2].selected) { + areaItem.options = county.street; + } + }) + } + }) + }) + } + } + + handleChangeSelected(area: any[], areaItem: any) { + if (areaItem.key === 'province') { + area[1].selected = '' + area[1].options = []; + area[2].selected = ''; + area[2].options = []; + area[3].selected = ''; + area[3].options = []; + } else if (areaItem.key === 'city') { + area[2].selected = ''; + area[2].options = []; + area[3].selected = ''; + area[3].options = []; + }else if (areaItem.key === 'district') { + area[3].selected = ''; + area[3].options = []; + } + } handleCancel() { this.showModel = false; this.cancel.emit(this.showModel) } - handleOk() { - console.log(1) + + handleOk(): void { + const coverage_list: string[] = []; + this.areaList.forEach( item => { + let str: string = ''; + item.forEach( area => { + str += area.selected + ';'; + }); + coverage_list.push(str.substring(0, str.length-1)); + }); + if(coverage_list.length>1){ + this.slicing_order_info.coverageArea = coverage_list.join('|') + }else { + this.slicing_order_info.coverageArea = coverage_list.toString(); + } + let paramsObj = { + slicing_order_info:this.slicing_order_info + }; + console.log(paramsObj,"-----paramsObj"); + this.isSpinning = true; + this.myhttp.csmfSlicingPurchase(paramsObj).subscribe(res => { + const { result_header: { result_code, result_message }, result_body: { service_id,operation_id } } = res; + if (+result_code === 200) { + this.isSpinning = false; + this.handleCancel(); + } + }, (err) => { + this.message.error(err); + this.handleCancel(); + this.isSpinning = false; + }) } } diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html index 818fc136..9c039c6d 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html @@ -19,7 +19,7 @@ <th width=280>Service Instance Id</th> <th width=200>Service Instance Name</th> <th width=200>Creation Time</th> - <th width=110>Service Type</th> + <!--<th width=110>Service Type</th>--> <th width=110>S-NSSAI</th> <th width=110>Status</th> <th width=180>Aciton</th> @@ -32,7 +32,7 @@ <td>{{ data.order_id }}</td> <td>{{ data.order_name }}</td> <td>{{ data.order_creation_time }}</td> - <td>{{ data.service_type?data.service_type:'--' }}</td> + <!--<td>{{ data.service_type?data.service_type:'--' }}</td>--> <td>{{ data.service_snssai }}</td> <td> <span class="marginLeft10"> |