summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order
diff options
context:
space:
mode:
authorwangyuerg <wangyuerg@chinamobile.com>2021-02-08 15:22:22 +0800
committerwangyuerg <wangyuerg@chinamobile.com>2021-02-08 15:22:43 +0800
commit354d0da11c40c8b715744b59b9e299b604930c10 (patch)
treec8703a62c2df43f2dc03dbaaed870850361d952d /usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order
parent2061c3faf34037670d3b71b0e1d4dc14dfff7de6 (diff)
style: Combine city-select of csmf and city-select of subnet into one
Signed-off-by: wangyuerg <wangyuerg@chinamobile.com> Change-Id: Iade2b82052389864d36a9524547702d689920ec9 Issue-ID: USECASEUI-527
Diffstat (limited to 'usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order')
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html26
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.less39
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts331
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/constants.ts317
4 files changed, 256 insertions, 457 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 0f138db8..ff4dade4 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
@@ -3,10 +3,10 @@
<div class="subnet_params_container">
<form nz-form>
<nz-form-item *ngFor="let item of comunicationFormItems; let i = index">
- <nz-form-label [nzSpan]="6" [nzRequired]="item.required" [nzFor]=" item.key">
+ <nz-form-label [nzSpan]="7" [nzRequired]="item.required" [nzFor]=" item.key">
{{ item.title }}
</nz-form-label>
- <nz-form-control [nzSpan]="15">
+ <nz-form-control [nzSpan]="16">
<nz-tooltip [nzTitle]="item.scoped&&item.scopedText?item.scopedText:''" [nzPlacement]="'right'"
[nzTrigger]="'focus'">
<input nz-input nz-tooltip [id]="item.key" [name]="item.key" *ngIf="item.type === 'input'"
@@ -32,27 +32,7 @@
</nz-form-control>
<div *ngIf="item.type === 'city-select'">
- <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>
+ <app-city-select [areaList]="areaList" [level]="areaLevel"></app-city-select>
</div>
</nz-form-item>
</form>
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 52d3ce3e..3d0813f4 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
@@ -1,25 +1,32 @@
-.subnet_params_container{
+.subnet_params_container {
padding-left: 3%;
- .subnet_params_area{
- margin-right: 5px;
- }
- .ant-btn-icon-only{
+
+ // .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;
- }
+
+ // .subnet_params_button {
+ // margin-top: 7px;
+ // margin-left: 10px;
+ // }
+
+ // .subnet_params_icon {
+ // font-size: 14px;
+ // }
}
+
.ant-form-item-label {
text-align: left;
}
-.validateRules{
+
+.validateRules {
color: red;
}
-.error-input-border{
- border-color: red!important;
-}
+
+.error-input-border {
+ border-color: red !important;
+} \ 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 bfef2d20..4d3c7972 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,209 +1,150 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {COMMUNICATION_FORM_ITEMS, COMMUNICATION_FORM_ADDRESS} from "./constants";
-import { Util } from '../../../../../shared/utils/utils';
-import {SlicingTaskServices} from "../../../../../core/services/slicingTaskServices";
-import {NzMessageService} from "ng-zorro-antd";
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import { COMMUNICATION_FORM_ITEMS } from "./constants";
+import { Util } from "../../../../../shared/utils/utils";
+import { SlicingTaskServices } from "../../../../../core/services/slicingTaskServices";
+import { NzMessageService } from "ng-zorro-antd";
@Component({
- selector: 'app-business-order',
- templateUrl: './business-order.component.html',
- styleUrls: ['./business-order.component.less']
+ selector: "app-business-order",
+ templateUrl: "./business-order.component.html",
+ styleUrls: ["./business-order.component.less"],
})
export class BusinessOrderComponent implements OnInit {
+ constructor(
+ private myhttp: SlicingTaskServices,
+ private message: NzMessageService,
+ private Util: Util
+ ) {}
- constructor(
- private myhttp: SlicingTaskServices,
- private message: NzMessageService,
- private Util: Util
- ) {
- }
+ ngOnInit() {}
- ngOnInit() {
- }
+ ngOnChanges() {
+ this.AreaFormatting();
+ }
- 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: "stationary",
+ coverageArea: "",
+ coverageAreaNumber: null,
+ };
+ areaList: any[] = [];
+ validateRulesShow: any[] = [];
+ rulesText: any[] = [];
+ areaLevel: number = 4;
- @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: "stationary",
- coverageArea: '',
- coverageAreaNumber: null
- };
- areaList: any[] = [];
- validateRulesShow: any[] = [];
- rulesText: any[] = [];
+ AreaFormatting(): void {
+ let areaList = ["Beijing;Beijing;Haidian District;Wanshoulu Street"];
+ this.areaList = areaList.map((item: any) => {
+ let arr = item.split(";");
+ item = arr.map((it, 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 = it;
+ obj.options = [{ name: it, id: it }];
+ return obj;
+ });
+ return item;
+ });
+ }
- AreaFormatting(): void {
- let areaList = ['Beijing;Beijing;Haidian District;Wanshoulu Street'];
- this.areaList = areaList.map((item: any) => {
- let arr = item.split(';');
- item = arr.map((it, 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 = it;
- obj.options = [{name: it, id: it}]
- return obj
- })
- return item;
- })
- }
+ handleCancel(): void {
+ this.showModel = false;
+ this.cancel.emit(this.showModel);
+ this.slicing_order_info = {
+ name: null,
+ maxNumberofUEs: null,
+ expDataRateDL: null,
+ latency: null,
+ expDataRateUL: null,
+ resourceSharingLevel: "shared",
+ uEMobilityLevel: "stationary",
+ coverageArea: "",
+ coverageAreaNumber: null,
+ };
+ this.validateRulesShow = [];
+ }
- creatAreaList(): void {
- const arr = [
- {
- key: 'province',
- selected: '',
- options: []
- },
- {
- key: 'city',
- selected: '',
- options: []
- },
- {
- key: 'district',
- selected: '',
- options: []
- },
- {
- key: 'street',
- selected: '',
- options: []
- }
- ]
- this.areaList.push(arr)
- }
+ handleOk(): void {
+ const coverage_list: string[] = [];
+ let coverageAreas;
- deleteAreaList(index: number): void {
- this.areaList.splice(index, 1);
- }
+ COMMUNICATION_FORM_ITEMS.forEach((item, index) => {
+ if (item.required && item.type === "input") {
+ this.Util.validator(
+ item.title,
+ item.key,
+ this.slicing_order_info[item.key],
+ index,
+ this.rulesText,
+ this.validateRulesShow
+ );
+ }
+ });
+ if (this.validateRulesShow.indexOf(true) > -1) {
+ return;
+ }
- 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;
- }
- })
- }
- })
- })
- }
- }
+ this.areaList.forEach((item) => {
+ let str = "";
+ item.forEach((area) => {
+ str += area.selected + ";";
+ });
+ coverage_list.push(str.substring(0, str.length - 1));
+ });
+ if (coverage_list.length > 1) {
+ coverageAreas = coverage_list.join("|");
+ } else {
+ coverageAreas = coverage_list.toString();
+ }
+ const coverageAreaNumber = this.slicing_order_info[
+ "coverageAreaNumber"
+ ];
+ if (coverageAreaNumber) {
+ this.slicing_order_info.coverageArea = `${coverageAreas}-${coverageAreaNumber}`;
+ } else {
+ this.slicing_order_info.coverageArea = `${coverageAreas}`;
+ }
+ delete this.slicing_order_info.coverageAreaNumber;
- handleChangeSelected(area: any[], areaItem: any): void {
- let areaItemIndex = area.indexOf(areaItem);
- area.map((item,index)=>{
- if(index > areaItemIndex){
- item.selected = '';
- item.options = [];
- }
- })
- }
-
- handleCancel(): void {
- this.showModel = false;
- this.cancel.emit(this.showModel);
- this.slicing_order_info = {
- name: null,
- maxNumberofUEs: null,
- expDataRateDL: null,
- latency: null,
- expDataRateUL: null,
- resourceSharingLevel: "shared",
- uEMobilityLevel: "stationary",
- coverageArea: '',
- coverageAreaNumber: null
- };
- this.validateRulesShow = []
- }
-
- handleOk(): void {
- const coverage_list: string[] = [];
- let coverageAreas;
-
- COMMUNICATION_FORM_ITEMS.forEach((item, index) => {
- if (item.required && item.type==="input") {
- this.Util.validator(item.title,item.key, this.slicing_order_info[item.key], index, this.rulesText, this.validateRulesShow)
- }
- });
- if (this.validateRulesShow.indexOf(true) > -1) {
- return
- }
-
- this.areaList.forEach(item => {
- let str = '';
- item.forEach(area => {
- str += area.selected + ';';
- });
- coverage_list.push(str.substring(0, str.length - 1));
- });
- if (coverage_list.length > 1) {
- coverageAreas = coverage_list.join('|')
- } else {
- coverageAreas = coverage_list.toString();
- }
- const coverageAreaNumber = this.slicing_order_info["coverageAreaNumber"];
- if(coverageAreaNumber){
- this.slicing_order_info.coverageArea = `${coverageAreas}-${coverageAreaNumber}`;
- }else{
- this.slicing_order_info.coverageArea = `${coverageAreas}`;
- }
- delete this.slicing_order_info.coverageAreaNumber
-
- const paramsObj = {
- slicing_order_info: this.slicing_order_info
- };
- const csmfSlicingPurchaseFailedCallback = () => {
- this.handleCancel();
- }
- this.myhttp.csmfSlicingPurchase(paramsObj, csmfSlicingPurchaseFailedCallback).then(res => {
- const result = res.result_header;
- if(result&&result.result_code&&+result.result_code===200){
- console.log(res)
- }else{
- this.message.create('error','Network error')
- }
- this.handleCancel();
- })
- }
+ const paramsObj = {
+ slicing_order_info: this.slicing_order_info,
+ };
+ const csmfSlicingPurchaseFailedCallback = () => {
+ this.handleCancel();
+ };
+ this.myhttp
+ .csmfSlicingPurchase(paramsObj, csmfSlicingPurchaseFailedCallback)
+ .then((res) => {
+ const result = res.result_header;
+ if (
+ result &&
+ result.result_code &&
+ +result.result_code === 200
+ ) {
+ console.log(res);
+ } else {
+ this.message.create("error", "Network error");
+ }
+ this.handleCancel();
+ });
+ }
}
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/constants.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/constants.ts
index 9f79bff6..f982fa88 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/constants.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/constants.ts
@@ -1,5 +1,5 @@
export const COMMUNICATION_FORM_ITEMS = [
- /*******
+ /*******
title /MUST/: MARK THE ITEM NAME,
key /MUST/: MARK THE ITEM KEY,
type /MUST/: MARKE THE ITEM TYPE, CAN BE ADDED IF NECESSARY: input/select/radio/city-select
@@ -9,225 +9,96 @@ export const COMMUNICATION_FORM_ITEMS = [
placeholder: IF PLACEHOLDER, CAN BE EMITTED IF NOT
options: IF ITEM NEEDS OPTIONS, CAN BE EMITTED IF NOT
********/
- {
- title: 'Communication Service Name',
- key: 'name',
- type:"input",
- required:true
- },
- {
- title: 'Max Number of UEs',
- key: 'maxNumberofUEs',
- type:"input",
- scoped:true,
- scopedText:'Scope: 1-100000',
- required:true
- },
- {
- title: 'Data Rate Uplink (Mbps)',
- key: 'expDataRateUL',
- type:"input",
- scoped:true,
- scopedText:'Scope: 100-3000',
- required:true
- },
- {
- title: 'Data Rate Downlink (Mbps)',
- key: 'expDataRateDL',
- type:"input",
- scoped:true,
- scopedText:'Scope: 100-3000',
- required:true
- },
- {
- title: 'Latency',
- key: 'latency',
- type:"input",
- scoped:true,
- scopedText:'Scope: 10-200',
- required:true
- },
- {
- title: 'Resource Sharing Level',
- key: 'resourceSharingLevel',
- type:"radio",
- required:true,
- options: [
- {
- title: 'Shared',
- key: 'shared'
- },
- {
- title: 'Non-shared',
- key: 'non-shared'
- }
- ]
- },
- {
- title: 'Mobility',
- key: 'uEMobilityLevel',
- type:"select",
- required:true,
- options: [
- {
- title: 'Stationary',
- key: 'stationary'
- },
- {
- title: 'Nomadic',
- key: 'nomadic'
- },
- {
- title: 'Spatially Restricted Mobility',
- key: 'spatially restricted mobility'
- },
- {
- title: 'Fully Mobility',
- key: 'fully mobility'
- }
- ]
- },
- {
- title: 'Area',
- key: 'coverageArea',
- type:"city-select",
- required:true
- },
- {
- title: 'Coverage Area Number',
- key: 'coverageAreaNumber',
- type:"input",
- placeholder:"Please enter the coverage area number. use , to separate them if necessary",
- required:false
- }
-]
-
-export const COMMUNICATION_FORM_ADDRESS = [
- {
- "id": "1",
- "name": "Beijing",
- "city": [
- {
- "id": "101",
- "name": "Beijing",
- "county": [
- {
- "id": "1001",
- "name": "Haiding District",
- "street": [
- {
- "id": "100101",
- "name": "Wanshoulu Street"
- },
- {
- "id": "100102",
- "name": "Zhongguancun Street"
- },
- {
- "id": "100103",
- "name": "Haidian Street"
- },
- {
- "id": "100104",
- "name": "Xisanqi Street"
- }
- ]
- },
- {
- "id": "1002",
- "name": "Xicheng District",
- "street": [
- {
- "id": "100201",
- "name": "Guang'anmenwai Street"
- },
- {
- "id": "100202",
- "name": "Xuanwumen Street"
- },
- {
- "id": "100203",
- "name": "West Changan Street"
- },
- {
- "id": "100204",
- "name": "Financial Street"
- }
- ]
- },
- {
- "id": "1003",
- "name": "Changping District",
- "street": [
- {
- "id": "100301",
- "name": "Chengbei Street"
- },
- {
- "id": "100302",
- "name": "Chengnan Street"
- },
- {
- "id": "100303",
- "name": "Tiantongyuan North Street"
- },
- {
- "id": "100304",
- "name": "Tiantongyuan South Street"
- }
- ]
- }
- ]
- }
- ]
- },
- {
- "id": "2",
- "name": "Shanghai",
- "city": [{
- "id": "201",
- "name": "Shanghai City",
- "county": [{
- "id": "2001",
- "name": "Pudongxin District",
- "street": [
- {
- "id": "200101",
- "name": "Lujiazui Street"
- },
- {
- "id": "200102",
- "name": "Zhoujiadu Street"
- },
- {
- "id": "200103",
- "name": "Tangqiao Street"
- },
- {
- "id": "200104",
- "name": "Nanquanlu Street"
- }
- ]
- },
- {
- "id": "2002",
- "name": "Jingan District",
- "street": [
- {
- "id": "200201",
- "name": "Jiangning Lu Street"
- },
- {
- "id": "200202",
- "name": "Jing'an Temple Street"
- },
- {
- "id": "200203",
- "name": "Nanjing West Road Street"
- }
- ]
- }
- ]
- }]
- }
-] \ No newline at end of file
+ {
+ title: "Communication Service Name",
+ key: "name",
+ type: "input",
+ required: true,
+ },
+ {
+ title: "Max Number of UEs",
+ key: "maxNumberofUEs",
+ type: "input",
+ scoped: true,
+ scopedText: "Scope: 1-100000",
+ required: true,
+ },
+ {
+ title: "Data Rate Uplink (Mbps)",
+ key: "expDataRateUL",
+ type: "input",
+ scoped: true,
+ scopedText: "Scope: 100-3000",
+ required: true,
+ },
+ {
+ title: "Data Rate Downlink (Mbps)",
+ key: "expDataRateDL",
+ type: "input",
+ scoped: true,
+ scopedText: "Scope: 100-3000",
+ required: true,
+ },
+ {
+ title: "Latency",
+ key: "latency",
+ type: "input",
+ scoped: true,
+ scopedText: "Scope: 10-200",
+ required: true,
+ },
+ {
+ title: "Resource Sharing Level",
+ key: "resourceSharingLevel",
+ type: "radio",
+ required: true,
+ options: [
+ {
+ title: "Shared",
+ key: "shared",
+ },
+ {
+ title: "Non-shared",
+ key: "non-shared",
+ },
+ ],
+ },
+ {
+ title: "Mobility",
+ key: "uEMobilityLevel",
+ type: "select",
+ required: true,
+ options: [
+ {
+ title: "Stationary",
+ key: "stationary",
+ },
+ {
+ title: "Nomadic",
+ key: "nomadic",
+ },
+ {
+ title: "Spatially Restricted Mobility",
+ key: "spatially restricted mobility",
+ },
+ {
+ title: "Fully Mobility",
+ key: "fully mobility",
+ },
+ ],
+ },
+ {
+ title: "Area",
+ key: "coverageArea",
+ type: "city-select",
+ required: true,
+ },
+ {
+ title: "Coverage Area Number",
+ key: "coverageAreaNumber",
+ type: "input",
+ placeholder:
+ "Please enter the coverage area number. use , to separate them if necessary",
+ required: false,
+ },
+];