diff options
author | 2021-02-08 15:22:22 +0800 | |
---|---|---|
committer | 2021-02-08 15:22:43 +0800 | |
commit | 354d0da11c40c8b715744b59b9e299b604930c10 (patch) | |
tree | c8703a62c2df43f2dc03dbaaed870850361d952d /usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order | |
parent | 2061c3faf34037670d3b71b0e1d4dc14dfff7de6 (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')
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, + }, +]; |