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

12 files changed, 711 insertions, 641 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[] = [];