diff options
13 files changed, 711 insertions, 664 deletions
diff --git a/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.html b/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.html index e66d25f7..1da7a71b 100644 --- a/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.html +++ b/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.html @@ -1,6 +1,6 @@ <div class="city-select"> <div *ngFor="let area of areaList; let i = index"> - <nz-form-control [nzSpan]="!ind ? 4 : 4" [nzOffset]="i && !ind ? 7 : 0" class="subnet_params_area" + <nz-form-control [nzSpan]="computeSpan(ind)" [nzOffset]="computeOffset(ind, i)" 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) "> @@ -8,10 +8,10 @@ </nz-option> </nz-select> </nz-form-control> - <nz-form-control [nzSpan]="1"> + <nz-form-control [nzSpan]="2"> <div class="validation_alert_area">{{checkArea(area)}}</div> </nz-form-control> - <nz-form-control [nzSpan]="1" [nzOffset]="2"> + <nz-form-control [nzSpan]="1"> <button nz-button nzType="primary" type="button" nzSize="small" class="subnet_params_button" *ngIf="!i" (click)="creatAreaList()"> <i nz-icon class="anticon anticon-plus subnet_params_icon"></i> diff --git a/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.ts b/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.ts index 432d49de..4a172d75 100644 --- a/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.ts +++ b/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.ts @@ -1,10 +1,13 @@ /******* Input - areaList /MUST/: Selected region data + areaList /MUST/: Selected region data + level /MUST/: + - 3: province;city;district + - 4: province;city;district;street ********/ import { Component, OnInit } from "@angular/core"; import { Input } from "@angular/core"; -import { ADDRESS } from "./constants"; +import { LEVEL3ADDRESS, LEVEL4ADDRESS } from "./constants"; @Component({ selector: "app-city-select", @@ -13,16 +16,74 @@ import { ADDRESS } from "./constants"; }) export class CitySelectComponent implements OnInit { @Input() areaList: any[]; + @Input() level: number; + defaultOptions: any[]; constructor() {} ngOnInit() {} - ngOnChanges() {} + ngOnChanges() { + this.chooseDefaultOptions(); + } + chooseDefaultOptions(): void { + // options for selection box + switch (this.level) { + case 3: + this.defaultOptions = LEVEL3ADDRESS; + break; + case 4: + this.defaultOptions = LEVEL4ADDRESS; + break; + default: + this.defaultOptions = LEVEL3ADDRESS; + break; + } + } + + computeSpan(ind: number) { + // Space occupation of each selection box + let res: number = 4; + switch (this.level) { + case 4: + if (ind === 0 || ind === 1 || ind === 2) { + res = 3; + } else { + res = 4; + } + break; + default: + // 3 or others + res = 4; + break; + } + return res; + } + computeOffset(ind: number, i: number) { + // the offset of each selection box + let res: number = 0; + switch (this.level) { + case 4: + if (i && !ind) { + res = 7; + } else { + res = 0; + } + break; + default: + if (i && !ind) { + res = 7; + } else { + res = 0; + } + break; + } + return res; + } handleChange(area: any[], areaItem: any): void { if (areaItem.key === "province" && areaItem.options.length <= 1) { - areaItem.options = ADDRESS; + areaItem.options = this.defaultOptions; } else if (areaItem.key === "city" && areaItem.options.length <= 1) { - ADDRESS.forEach((item) => { + this.defaultOptions.forEach((item) => { if (item.name === area[0].selected) { areaItem.options = item.city; } @@ -31,10 +92,22 @@ export class CitySelectComponent implements OnInit { areaItem.key === "district" && areaItem.options.length <= 1 ) { - ADDRESS.forEach((item: any) => { + this.defaultOptions.forEach((item: any) => { item.city.forEach((city) => { if (city.name === area[1].selected) { - areaItem.options = city.county; + areaItem.options = city.district; + } + }); + }); + } else if (areaItem.key === "street" && areaItem.options.length <= 1) { + this.defaultOptions.forEach((item: any) => { + item.city.forEach((city) => { + if (city.name === area[1].selected) { + city.district.forEach((district) => { + if (district.name === area[2].selected) { + areaItem.options = district.street; + } + }); } }); }); @@ -42,15 +115,13 @@ export class CitySelectComponent implements OnInit { } handleChangeSelected(area: any[], areaItem: any) { - if (areaItem.key === "province") { - area[1].selected = ""; - area[1].options = []; - area[2].selected = ""; - area[2].options = []; - } else if (areaItem.key === "city") { - area[2].selected = ""; - area[2].options = []; - } + let areaItemIndex = area.indexOf(areaItem); + area.map((item, index) => { + if (index > areaItemIndex) { + item.selected = ""; + item.options = []; + } + }); } // prompt text for each item of area_list @@ -73,23 +144,51 @@ export class CitySelectComponent implements OnInit { } creatAreaList(): void { - let arr = [ - { - key: "province", - selected: "", - options: [], - }, - { - key: "city", - selected: "", - options: [], - }, - { - key: "district", - selected: "", - options: [], - }, - ]; + let arr: any[] = []; + switch (this.level) { + case 4: + arr = [ + { + key: "province", + selected: "", + options: [], + }, + { + key: "city", + selected: "", + options: [], + }, + { + key: "district", + selected: "", + options: [], + }, + { + key: "street", + selected: "", + options: [], + }, + ]; + break; + default: + arr = [ + { + key: "province", + selected: "", + options: [], + }, + { + key: "city", + selected: "", + options: [], + }, + { + key: "district", + selected: "", + options: [], + }, + ]; + } this.areaList.push(arr); } diff --git a/usecaseui-portal/src/app/shared/components/city-select/city-select/constants.ts b/usecaseui-portal/src/app/shared/components/city-select/city-select/constants.ts index ecb2d038..82e0cf56 100644 --- a/usecaseui-portal/src/app/shared/components/city-select/city-select/constants.ts +++ b/usecaseui-portal/src/app/shared/components/city-select/city-select/constants.ts @@ -1,4 +1,4 @@ -export const ADDRESS = [ +export const LEVEL3ADDRESS = [ { id: "1", name: "Beijing", @@ -6,7 +6,7 @@ export const ADDRESS = [ { id: "101", name: "Beijing", - county: [ + district: [ { id: "1001", name: "Haiding District", @@ -30,7 +30,7 @@ export const ADDRESS = [ { id: "201", name: "Shanghai City", - county: [ + district: [ { id: "2001", name: "Pudongxin District", @@ -44,3 +44,135 @@ export const ADDRESS = [ ], }, ]; +export const LEVEL4ADDRESS = [ + { + id: "1", + name: "Beijing", + city: [ + { + id: "101", + name: "Beijing", + district: [ + { + 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", + district: [ + { + 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", + }, + ], + }, + ], + }, + ], + }, +]; 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, + }, +]; diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/constants.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/constants.ts new file mode 100644 index 00000000..b4550fdf --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/constants.ts @@ -0,0 +1,22 @@ +export const TASK_PROCESSING_STATUS = [ + { + title: "All", + value: "all", + }, + { + title: "Planning", + value: "Planning", + }, + { + title: "WaitingToConfirm", + value: "WaitingToConfirm", + }, + { + title: "Creating", + value: "Creating", + }, + { + title: "Completed", + value: "Completed", + }, +]; diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts index d1add64a..0ddc759a 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts @@ -1,151 +1,168 @@ -import {Component, OnInit, Input, SimpleChanges} from '@angular/core'; -import { SlicingTaskServices } from '@src/app/core/services/slicingTaskServices'; -import { TASK_PROCESSING_STATUS } from '@src/constants/constants'; +import { Component, OnInit, Input, SimpleChanges } from "@angular/core"; +import { SlicingTaskServices } from "@src/app/core/services/slicingTaskServices"; +import { TASK_PROCESSING_STATUS } from "./constants"; @Component({ - selector: 'app-slicing-task-management', - templateUrl: './slicing-task-management.component.html', - styleUrls: ['./slicing-task-management.component.less'] + selector: "app-slicing-task-management", + templateUrl: "./slicing-task-management.component.html", + styleUrls: ["./slicing-task-management.component.less"], }) export class SlicingTaskManagementComponent implements OnInit { + constructor(private myhttp: SlicingTaskServices) {} - constructor(private myhttp: SlicingTaskServices) { } + @Input() currentTabTitle; - @Input() currentTabTitle; + showDetail: boolean = false; + showProcess: boolean = false; + selectedValue = "all"; + taskId: string; + moduleTitle: string = ""; + moduleOperation: string; + listOfData: any[] = []; + statusOptions: any[] = TASK_PROCESSING_STATUS; + loading: boolean = false; + total: number = 1; + pageSize: string = "10"; + pageNum: string = "1"; - showDetail: boolean = false; - showProcess: boolean = false; - selectedValue = 'all'; - taskId: string; - moduleTitle: string = ""; - moduleOperation: string; - listOfData: any[] = []; - statusOptions: any[] = TASK_PROCESSING_STATUS; - loading: boolean = false; - total: number = 1; - pageSize: string = '10'; - pageNum: string = '1'; + ngOnChanges(changes: SimpleChanges) { + if ( + changes.currentTabTitle.currentValue === "Slicing Task Management" + ) { + this.getTaskList(); + } + } - ngOnChanges(changes: SimpleChanges) { - if(changes.currentTabTitle.currentValue === 'Slicing Task Management'){ - this.getTaskList(); - } - } + ngOnInit() { + console.log("11.24 1732"); + } - ngOnInit() { - console.log('11.24 1732') - } + getTaskList(): void { + const { pageNum, pageSize } = this; + this.loading = true; + let getSlicingTaskListFailedCallback = () => { + this.loading = false; + }; + this.myhttp + .getSlicingTaskList( + pageNum, + pageSize, + getSlicingTaskListFailedCallback + ) + .then((res) => { + const { slicing_task_list, record_number } = res.result_body; + this.dataFormatting(slicing_task_list); + this.total = record_number; + this.loading = false; + }); + } - getTaskList(): void { - const { pageNum, pageSize } = this; - this.loading = true; - let getSlicingTaskListFailedCallback = () => { - this.loading = false; - } - this.myhttp.getSlicingTaskList(pageNum, pageSize, getSlicingTaskListFailedCallback).then(res => { - const { slicing_task_list, record_number } = res.result_body; - this.dataFormatting(slicing_task_list); - this.total = record_number; - this.loading = false; - }) - } + processingStatusChange(): void { + this.pageSize = "10"; + this.pageNum = "1"; + if (this.selectedValue && this.selectedValue !== "all") { + this.getListOfProcessingStatus(); + } else { + this.getTaskList(); + } + } - processingStatusChange(): void { - this.pageSize = '10'; - this.pageNum = '1'; - if (this.selectedValue && this.selectedValue !== 'all') { - this.getListOfProcessingStatus(); - } else { - this.getTaskList(); - } - } + getListOfProcessingStatus(): void { + const { selectedValue, pageNum, pageSize } = this; + this.loading = true; + let getTaskProcessingStatusFailedCallback = () => { + this.loading = false; + this.listOfData = []; + }; + this.myhttp + .getTaskProcessingStatus( + selectedValue, + pageNum + "", + pageSize + "", + getTaskProcessingStatusFailedCallback + ) + .then((res) => { + const { result_body } = res; + const { slicing_task_list, record_number } = result_body; + this.dataFormatting(slicing_task_list); + this.total = record_number; + this.loading = false; + }); + } - getListOfProcessingStatus(): void { - const { selectedValue, pageNum, pageSize } = this; - this.loading = true; - let getTaskProcessingStatusFailedCallback = () => { - this.loading = false; - this.listOfData = []; - } - this.myhttp.getTaskProcessingStatus(selectedValue, pageNum + '', pageSize + '', getTaskProcessingStatusFailedCallback).then(res => { - const { result_body } = res - const { slicing_task_list, record_number } = result_body; - this.dataFormatting(slicing_task_list) - this.total = record_number; - this.loading = false; - }) - } + pageSizeChange(pageSize: number): void { + this.pageSize = pageSize + ""; + const { selectedValue } = this; + if (selectedValue && selectedValue !== "all") { + this.getListOfProcessingStatus(); + } else { + this.getTaskList(); + } + } - pageSizeChange(pageSize: number): void { - this.pageSize = pageSize + ''; - const { selectedValue } = this; - if (selectedValue && selectedValue !== 'all') { - this.getListOfProcessingStatus(); - } else { - this.getTaskList(); - } - } + pageNumChange(pageNum: number): void { + this.pageNum = pageNum + ""; + const { selectedValue } = this; + if (selectedValue && selectedValue !== "all") { + this.getListOfProcessingStatus(); + } else { + this.getTaskList(); + } + } - pageNumChange(pageNum: number): void { - this.pageNum = pageNum + ''; - const { selectedValue } = this; - if (selectedValue && selectedValue !== 'all') { - this.getListOfProcessingStatus(); - } else { - this.getTaskList(); - } - } + dataFormatting(list: any): void { + this.listOfData = list.map((item) => { + switch (item.processing_status) { + case "Planning": + // item.status = '规划阶段'; + item.operation = "Process Task"; + break; + case "Waiting to Confirm": + // item.status = '审核阶段'; + item.operation = "Process Task"; + break; + case "WaitingToConfirm": + // item.status = '审核阶段'; + item.operation = "Process Task"; + break; + case "Creating": + // item.status = '切片创建中'; + item.operation = "View Progress"; + break; + case "Completed": + // item.status = '创建完成'; + item.operation = "View Result"; + break; + } + return item; + }); + } - dataFormatting(list: any): void { - this.listOfData = list.map(item => { - switch (item.processing_status) { - case 'Planning': - // item.status = '规划阶段'; - item.operation = 'Process Task' - break; - case 'Waiting to Confirm': - // item.status = '审核阶段'; - item.operation = 'Process Task' - break; - case 'WaitingToConfirm': - // item.status = '审核阶段'; - item.operation = 'Process Task' - break; - case 'Creating': - // item.status = '切片创建中'; - item.operation = 'View Progress' - break; - case 'Completed': - // item.status = '创建完成'; - item.operation = 'View Result' - break; - } - return item; - }) - } + showdetail(data: any): void { + this.taskId = data.task_id; + this.moduleTitle = data.task_name; + if ( + data.processing_status === "Waiting to Confirm" || + data.processing_status === "WaitingToConfirm" + ) { + this.showDetail = true; + } else { + this.moduleOperation = data.operation; + this.showProcess = true; + } + } - showdetail(data: any): void { - this.taskId = data.task_id; - this.moduleTitle = data.task_name; - if (data.processing_status === 'Waiting to Confirm' || data.processing_status === 'WaitingToConfirm') { - this.showDetail = true; - } else { - this.moduleOperation = data.operation; - this.showProcess = true; - } - } - - handelCancel(obj: any): void { - this.showDetail = obj.showDetail; - if (obj.bool) { - if (this.selectedValue && this.selectedValue !== 'all') { - this.getListOfProcessingStatus(); - } else { - this.loading = true; - setTimeout(() => { - this.getTaskList() - }, 5000); - } - } - } + handelCancel(obj: any): void { + this.showDetail = obj.showDetail; + if (obj.bool) { + if (this.selectedValue && this.selectedValue !== "all") { + this.getListOfProcessingStatus(); + } else { + this.loading = true; + setTimeout(() => { + this.getTaskList(); + }, 5000); + } + } + } } 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 index d095237b..a84fe335 100644 --- 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 @@ -116,7 +116,7 @@ </nz-form-control> <!-- Address selection needs special treatment --> <div *ngIf="title === 'An' && item.type === 'city-select'"> - <app-city-select [areaList]="areaList"></app-city-select> + <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/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 index 6d5d7739..d3541326 100644 --- 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 @@ -15,22 +15,22 @@ min-width: 180px;
}
- .subnet_params_area {
- margin-right: 5px;
- }
+ // .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_button {
+ // margin-top: 7px;
+ // margin-left: 10px;
+ // }
- .subnet_params_icon {
- font-size: 14px;
- }
+ // .subnet_params_icon {
+ // font-size: 14px;
+ // }
}
.ant-form-item-label {
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 index c826a7ec..96d31b3c 100644 --- 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 @@ -30,6 +30,7 @@ export class SubnetParamsModelComponent implements OnInit { formData: any; coreFormItems: any = []; areaList: any[] = []; + areaLevel: number = 3; ANEndpointInputs: object = {}; CNEndpointInputs: object = {}; ANkeyList: string[] = []; diff --git a/usecaseui-portal/src/constants/constants.ts b/usecaseui-portal/src/constants/constants.ts index 249d6f6d..8c8ac661 100644 --- a/usecaseui-portal/src/constants/constants.ts +++ b/usecaseui-portal/src/constants/constants.ts @@ -10,29 +10,6 @@ options: IF ITEM NEEDS OPTIONS, CAN BE EMITTED IF NOT
********/
-export const TASK_PROCESSING_STATUS = [
- {
- title: "All",
- value: "all",
- },
- {
- title: "Planning",
- value: "Planning",
- },
- {
- title: "WaitingToConfirm",
- value: "WaitingToConfirm",
- },
- {
- title: "Creating",
- value: "Creating",
- },
- {
- title: "Completed",
- value: "Completed",
- },
-];
-
export const BUSINESS_REQUIREMENT = [
{
title: "Slicing Business Name",
|