<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) ">
</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>
/*******
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",
})
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;
}
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;
+ }
+ });
}
});
});
}
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
}
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);
}
-export const ADDRESS = [
+export const LEVEL3ADDRESS = [
{
id: "1",
name: "Beijing",
{
id: "101",
name: "Beijing",
- county: [
+ district: [
{
id: "1001",
name: "Haiding District",
{
id: "201",
name: "Shanghai City",
- county: [
+ district: [
{
id: "2001",
name: "Pudongxin District",
],
},
];
+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",
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+];
<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'"
</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>
-.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
-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();
+ });
+ }
}
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
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,
+ },
+];
--- /dev/null
+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",
+ },
+];
-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);
+ }
+ }
+ }
}
</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>
min-width: 180px;\r
}\r
\r
- .subnet_params_area {\r
- margin-right: 5px;\r
- }\r
+ // .subnet_params_area {\r
+ // margin-right: 5px;\r
+ // }\r
\r
.ant-btn-icon-only {\r
padding: 0 5px !important;\r
}\r
\r
- .subnet_params_button {\r
- margin-top: 7px;\r
- margin-left: 10px;\r
- }\r
+ // .subnet_params_button {\r
+ // margin-top: 7px;\r
+ // margin-left: 10px;\r
+ // }\r
\r
- .subnet_params_icon {\r
- font-size: 14px;\r
- }\r
+ // .subnet_params_icon {\r
+ // font-size: 14px;\r
+ // }\r
}\r
\r
.ant-form-item-label {\r
formData: any;
coreFormItems: any = [];
areaList: any[] = [];
+ areaLevel: number = 3;
ANEndpointInputs: object = {};
CNEndpointInputs: object = {};
ANkeyList: string[] = [];
options: IF ITEM NEEDS OPTIONS, CAN BE EMITTED IF NOT\r
********/\r
\r
-export const TASK_PROCESSING_STATUS = [\r
- {\r
- title: "All",\r
- value: "all",\r
- },\r
- {\r
- title: "Planning",\r
- value: "Planning",\r
- },\r
- {\r
- title: "WaitingToConfirm",\r
- value: "WaitingToConfirm",\r
- },\r
- {\r
- title: "Creating",\r
- value: "Creating",\r
- },\r
- {\r
- title: "Completed",\r
- value: "Completed",\r
- },\r
-];\r
-\r
export const BUSINESS_REQUIREMENT = [\r
{\r
title: "Slicing Business Name",\r
Code Review / usecase-ui.git / commitdiff