summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal
diff options
context:
space:
mode:
authorcyuamber <xuranyjy@chinamobile.com>2020-02-11 16:16:13 +0800
committercyuamber <xuranyjy@chinamobile.com>2020-02-11 16:16:17 +0800
commit3db71a09cb73e24eda6d36f39df2e35f123f290b (patch)
tree39cc542c6e99f7111aa1a518dfbf57625c738b7c /usecaseui-portal
parent88f8607f42193606135191083b38b164991befa0 (diff)
feat:Order business function development and improvement of csmf slicing
Change-Id: Ie233f2882316fbe524112d44d61ed503372e8896 Issue-ID: USECASEUI-369 Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal')
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html53
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.less19
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts170
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html4
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:'&#45;&#45;' }}</td>-->
<td>{{ data.service_snssai }}</td>
<td>
<span class="marginLeft10">