feat: Encapsulates the common parameter dialog components and completes the initial display

Change-Id: I11b6e8f5c21345c7eb7f31c4101f7db424e7a525
Issue-ID: USECASEUI-352
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

6 files changed, 275 insertions, 9 deletions

diff --git a/usecaseui-portal/src/app/mock/json/slicing_task_auditInfo.json b/usecaseui-portal/src/app/mock/json/slicing_task_auditInfo.json
index 69568313..0682c16b 100644
--- a/usecaseui-portal/src/app/mock/json/slicing_task_auditInfo.json
+++ b/usecaseui-portal/src/app/mock/json/slicing_task_auditInfo.json
@@ -16,7 +16,7 @@
             "ue_mobility_level": "stageary",

             "latency": "20",

             "use_interval": "12",

-            "coverage_area_ta_list": [" xxxx;xxxxx;xxxxx ", " xxxx;xxxxx;xxxxx ", " xxxx;xxxxx;xxxxx "],

+            "coverage_area_ta_list": ["北京;北京市;海淀区", "北京;北京市;西城区", "北京;北京市;昌平区"],

             "activity_factor": "60",

             "resource_sharing_level": "shared",

             "area_traffic_cap_ul": "300",

@@ -34,7 +34,7 @@
             "an_suggest_nssi_name": "eMBB ANinstance1",

             "an_latency": "10",

             "an_5qi": "8",

-            "an_coverage_area_ta_list": [" xxxx;xxxxx;xxxxx ", " xxxx;xxxxx;xxxxx ", " xxxx;xxxxx;xxxxx "],

+            "an_coverage_area_ta_list": ["北京;北京市;海淀区", "北京;北京市;西城区", "北京;北京市;昌平区"],

             "tn_suggest_nssi_id": "46da8cf8-0878-48ac-bea3-f2200959411a",

             "tn_suggest_nssi_name": "eMBB TNinstance1",

             "tn_latency": "10",

diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts
index b9c7827e..5e6fd988 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts
@@ -109,14 +109,10 @@ export class SlicingTaskModelComponent implements OnInit {
           service_instance_name: this.selectedServiceName
         }];
         // 子网实例
-       
         let subnetData = { an_suggest_nssi_id, an_suggest_nssi_name, tn_suggest_nssi_id, tn_suggest_nssi_name, cn_suggest_nssi_id, cn_suggest_nssi_name};
         this.subnetDataFormatting(subnetData);
         this.slicingSubnet[0].params = { an_latency, an_5qi, an_coverage_area_ta_list } 
-       
         this.slicingSubnet[1].params = { tn_latency, tn_bandwidth };
-
-       
         this.slicingSubnet[2].params = { 
           cn_service_snssai,
           cn_resource_sharing_level,
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 04042d7f..4d8e54b2 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
@@ -1,2 +1,42 @@
-<nz-modal [(nzVisible)]="showModel" [nzTitle]="title" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" nzWidth="750px">
+<nz-modal [(nzVisible)]="showModel" [nzTitle]="title + '参数'" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" nzWidth="700px">
+    <div class="subnet_params_container">
+        <form nz-form *ngIf="title === '无线域'">
+            <nz-form-item *ngFor="let item of wirelessFormItems">
+                <nz-form-label  [nzSpan]="5" nzRequired [nzFor]="item.key">{{item.title}}</nz-form-label>
+                <nz-form-control [nzSpan]="10"  *ngIf="item.key !== 'an_coverage_area_ta_list'">
+                    <input nz-input [(ngModel)]="detailData[item.key]" [name]="item.key" [id]="item.key"/>
+                </nz-form-control>
+                <div *ngIf="item.key === 'an_coverage_area_ta_list'">
+                    <div *ngFor="let area of areaList; let i = index">
+                        <nz-form-control [nzSpan]="4" [nzOffset]=" i && !ind ? 5 : 0"  class="subnet_params_area" *ngFor="let item of area; let ind = index">
+                            <nz-select [(ngModel)]="item.selected" [name]="'areaList'+i+'_'+ind"> 
+                                <nz-option [nzValue]="op.name" *ngFor="let op of item.options" [nzLabel]="op.name" ></nz-option>
+                            </nz-select>
+                        </nz-form-control>
+                        <button nz-button nzType="primary" nzSize="small" *ngIf="!i && !ind" class="subnet_params_button" (click)="creatAreaList()">
+                            <i nz-icon class="anticon anticon-plus subnet_params_icon"></i>
+                        </button>
+                    </div>
+                    
+                </div>
+            </nz-form-item>
+        </form>
+        <form nz-form *ngIf="title === '传输域'">
+            <nz-form-item *ngFor="let item of transferFormItems">
+                <nz-form-label  [nzSpan]="7" nzRequired [nzFor]="item.key">{{item.title}}</nz-form-label>
+                <nz-form-control [nzSpan]="12">
+                    <input nz-input [(ngModel)]="detailData[item.key]" [name]="item.key" [id]="item.key"/>
+                </nz-form-control>
+            </nz-form-item>
+        </form>
+        <form nz-form *ngIf="title === '核心域'">
+                <nz-form-item *ngFor="let item of coreFormItems">
+                    <nz-form-label  [nzSpan]="10" nzRequired [nzFor]="item.key">{{item.title}}</nz-form-label>
+                    <nz-form-control [nzSpan]="10">
+                        <input nz-input [(ngModel)]="detailData[item.key]" [name]="item.key" [id]="item.key"/>
+                    </nz-form-control>
+                </nz-form-item>
+            </form>
+
+    </div>
 </nz-modal>
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 e69de29b..814d2f0d 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
@@ -0,0 +1,19 @@
+.subnet_params_container{

+    padding-left: 3%;

+    .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;

+    }

+}

+.ant-form-item-label {

+    text-align: left;

+}
\ No newline at end of file
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 ec8790ab..1a3a194e 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
@@ -1,5 +1,5 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { WIRELESS_FORM_ITEMS, TRANSFRER_FORM_ITEMS } from '../.../../../../../../../../constants/constants'
+import { WIRELESS_FORM_ITEMS, TRANSFRER_FORM_ITEMS, CORE_FORM_ITEMS } from '../.../../../../../../../../constants/constants'
 
 @Component({
 	selector: 'app-subnet-params-model',
@@ -14,11 +14,36 @@ export class SubnetParamsModelComponent implements OnInit {
 	@Output() cancel = new EventEmitter<boolean>();
 
 	transferFormItems = TRANSFRER_FORM_ITEMS;
+	coreFormItems = CORE_FORM_ITEMS;
+	wirelessFormItems = WIRELESS_FORM_ITEMS;
+	areaList: any[] = [];
 
 	constructor() { }
 
-	ngOnInit() {
+	ngOnInit() { }
 
+	ngOnChanges() {
+		if (this.title === '无线域') {
+		  	this.AreaFormatting();
+		}
+	}
+
+	AreaFormatting () {
+		let areaList = [...this.detailData.an_coverage_area_ta_list];
+		this.areaList = areaList.map ( (item: any) => {
+			let arr = item.split(';');
+			item = arr.map( ite => {
+				let obj: any = {};
+				obj.selected = ite
+				obj.options = [{name: ite, id: ite}]
+				return obj
+			})
+			return item;
+		})
+	}
+
+	creatAreaList () {
+		
 	}
 
 	handleCancel() {
diff --git a/usecaseui-portal/src/constants/constants.ts b/usecaseui-portal/src/constants/constants.ts
index 6f9c48c1..b9e4ac8d 100644
--- a/usecaseui-portal/src/constants/constants.ts
+++ b/usecaseui-portal/src/constants/constants.ts
@@ -95,5 +95,191 @@ export const TRANSFRER_FORM_ITEMS = [
 	{

 		title: '带宽',

 		key: 'tn_bandwidth'

+	}

+]

+

+export const CORE_FORM_ITEMS = 	[

+	{

+		title: 'S-NSSAI',

+		key: 'cn_service_snssai'

+	},

+	{

+		title: '共享等级',

+		key: 'cn_resource_sharing_level'

+	},

+	{

+		title: '游牧性',

+		key: 'cn_ue_mobility_level'

+	},

+	{

+		title: '时延（ms）',

+		key: 'cn_latency'

+	},

+	{

+		title: '连接规模数',

+		key: 'cn_max_number_of_ues'

+	},

+	{

+		title: '活动因子（%）',

+		key: 'cn_activity_factor'

+	},

+	{

+		title: '用户下行体验速率（Mbps）',

+		key: 'cn_exp_data_rate_dl'

+	},

+	{

+		title: '用户上行体验速率（Mbps）',

+		key: 'cn_exp_data_rate_ul'

 	},

+	{

+		title: '下行区域流量密度（Mbps/km ）',

+		key: 'cn_area_traffic_cap_dl'

+	},

+	{

+		title: '下行区域流量密度（Mbps/km ）',

+		key: 'cn_area_traffic_cap_ul'

+	}

 ]

+

+export const ADDRESS = {

+    "result_header": {

+        "result_code": 200,

+        "result_message": "Successfully"

+    },

+    

+    "result_body": {

+        "province": [

+            {

+                "id": "1",

+                "name": "北京",

+                "city": [

+                    {

+                        "id": "101",

+                        "name": "北京市",

+                        "county": [

+                            {

+                                "id": "1001",

+                                "name": "海淀区",

+                                "street": [

+                                    {

+                                        "id": "100101",

+                                        "name": "万寿路街道"

+                                    },

+                                    {

+                                        "id": "100102",

+                                        "name": "中关村街道"

+                                    },

+                                    {

+                                        "id": "100103",

+                                        "name": "海淀街道"

+                                    },

+                                    {

+                                        "id": "100104",

+                                        "name": "西三旗街道"

+                                    }

+                                ]

+                            },

+                            {

+                                "id": "1002",

+                                "name": "西城区",

+                                "street": [

+                                    {

+                                        "id": "100201",

+                                        "name": "广安门内街道"

+                                    },

+                                    {

+                                        "id": "100202",

+                                        "name": "广安门外街道"

+                                    },

+                                    {

+                                        "id": "100203",

+                                        "name": "西长安街街道"

+                                    },

+                                    {

+                                        "id": "100204",

+                                        "name": "金融街街道"

+                                    }

+                                ]

+                            },

+                            {

+                                "id": "1003",

+                                "name": "昌平区",

+                                "street": [

+                                    {

+                                        "id": "100301",

+                                        "name": "城北街道"

+                                    },

+                                    {

+                                        "id": "100302",

+                                        "name": "城南街道"

+                                    },

+                                    {

+                                        "id": "100303",

+                                        "name": "天通苑北街道"

+                                    },

+                                    {

+                                        "id": "100304",

+                                        "name": "天通苑南街道"

+                                    }

+                                ]

+                            }

+                        ]

+                    }

+                ]

+            },

+            {

+                "id": "2",

+                "name": "上海",

+                "city": [{

+                    "id": "201",

+                    "name": "上海市",

+                    "county": [{

+                            "id": "2001",

+                            "name": "浦东新区",

+                            "street": [

+                                {

+                                    "id": "200101",

+                                    "name": "陆家嘴街道"

+                                },

+                                {

+                                    "id": "200102",

+                                    "name": "周家渡街道"

+                                },

+                                {

+                                    "id": "200103",

+                                    "name": "塘桥街道"

+                                },

+                                {

+                                    "id": "200104",

+                                    "name": "南码头路街道"

+                                }

+                            ]

+                        },

+                        {

+                            "id": "2002",

+                            "name": "静安区",

+                            "street": [

+                                {

+                                    "id": "200201",

+                                    "name": "江宁路街道"

+                                },

+                                {

+                                    "id": "200202",

+                                    "name": "静安寺街道"

+                                },

+                                {

+                                    "id": "200203",

+                                    "name": "南京西路街道"

+                                },

+                                {

+                                    "id": "200204",

+                                    "name": "曹家渡街道"

+                                }

+                            ]

+                        }

+                    ]

+                }]

+            }

+        ]

+    }

+}
\ No newline at end of file