summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app
diff options
context:
space:
mode:
authorcyuamber <xuranyjy@chinamobile.com>2019-11-29 16:07:21 +0800
committercyuamber <xuranyjy@chinamobile.com>2019-11-29 16:07:28 +0800
commit655cdc196cf2355aae018575682ba85ec1bda33e (patch)
tree3edbd48a1d29e4919ab40f0fe394269092e67f44 /usecaseui-portal/src/app
parentab3256d731b6c439f16869c3f193483532d57e23 (diff)
feat: Completed the interaction logic in the task processing component
Change-Id: Ia3b6a4adb00a3c4b1d51ba6e2f63e7713881090e Issue-ID: USECASEUI-352 Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app')
-rw-r--r--usecaseui-portal/src/app/app.module.ts6
-rw-r--r--usecaseui-portal/src/app/core/services/slicingTaskServices.ts22
-rw-r--r--usecaseui-portal/src/app/mock/json/slicing_instance.json22
-rw-r--r--usecaseui-portal/src/app/mock/json/slicing_subnet_context.json27
-rw-r--r--usecaseui-portal/src/app/mock/json/slicing_subnet_instance.json14
-rw-r--r--usecaseui-portal/src/app/mock/routes.js5
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html27
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts152
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html2
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.less0
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts33
12 files changed, 302 insertions, 33 deletions
diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts
index be380b85..f618acdf 100644
--- a/usecaseui-portal/src/app/app.module.ts
+++ b/usecaseui-portal/src/app/app.module.ts
@@ -89,7 +89,8 @@ import { SlicingResourceManagementComponent } from './views/services/slicing-man
import { SlicingTaskModelComponent } from './views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component';
import { SlicingBusinessManagementComponent } from './views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-management.component'
import { NsiManagementComponent } from './views/services/slicing-management/slicing-resource-management/nsi-management/nsi-management.component'
-import { NssiManagementComponent } from './views/services/slicing-management/slicing-resource-management/nssi-management/nssi-management.component'
+import { NssiManagementComponent } from './views/services/slicing-management/slicing-resource-management/nssi-management/nssi-management.component';
+import { SubnetParamsModelComponent } from './views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component'
@NgModule({
providers: [
@@ -144,7 +145,8 @@ import { NssiManagementComponent } from './views/services/slicing-management/sli
SlicingTaskModelComponent,
SlicingBusinessManagementComponent,
NsiManagementComponent,
- NssiManagementComponent
+ NssiManagementComponent,
+ SubnetParamsModelComponent
],
imports: [
BrowserModule,
diff --git a/usecaseui-portal/src/app/core/services/slicingTaskServices.ts b/usecaseui-portal/src/app/core/services/slicingTaskServices.ts
index fa0a42fd..165bb80e 100644
--- a/usecaseui-portal/src/app/core/services/slicingTaskServices.ts
+++ b/usecaseui-portal/src/app/core/services/slicingTaskServices.ts
@@ -24,7 +24,10 @@ export class SlicingTaskServices {
url = {
slicingTaskList: this.baseUrl + "/task/business/pageNo/{pageNo}/pageSize/{pageSize}",
taskProcessingStatus: this.baseUrl + '/task/{processingStatus}/business/pageNo/{pageNo}/pageSize/{pageSize}',
- auditInfo: this.baseUrl + '/task/{taskId}/auditInfo'
+ auditInfo: this.baseUrl + '/task/{taskId}/auditInfo',
+ slicingInstance: this.baseUrl + '/resource/nsi/instances/pageNo/{pageNo}/pageSize/{pageSize}',
+ slicingSubnetInstance: this.baseUrl + '/resource/nsi/{nsiId}/nssiInstances',
+ subnetInContext: this.baseUrl + '/resource/nssi/{environmentContext}/instances/pageNo/{pageNo}/pageSize/{pageSize}',
}
@@ -49,6 +52,23 @@ export class SlicingTaskServices {
const url = this.url.auditInfo.replace('{taskId}', taskId);
return this.http.get<any>(url);
}
+ getSlicingInstance (pageNo: string, pageSize: string){
+ const url = this.url.slicingInstance
+ .replace("{pageNo}", pageNo)
+ .replace("{pageSize}", pageSize);
+ return this.http.get<any>(url);
+ }
+ getSlicingSubnetInstance(nsiId: string){
+ const url = this.url.slicingSubnetInstance.replace('{nsiId}', nsiId);
+ return this.http.get<any>(url);
+ }
+ getSubnetInContext (context: string, pageNo: string, pageSize: string) {
+ const url = this.url.subnetInContext
+ .replace('{environmentContext}', context)
+ .replace('{pageNo', pageNo)
+ .replace('{pageSize}', pageSize);
+ return this.http.get<any>(url);
+ }
}
diff --git a/usecaseui-portal/src/app/mock/json/slicing_instance.json b/usecaseui-portal/src/app/mock/json/slicing_instance.json
new file mode 100644
index 00000000..11c7f7bf
--- /dev/null
+++ b/usecaseui-portal/src/app/mock/json/slicing_instance.json
@@ -0,0 +1,22 @@
+{
+ "result_header": {
+ "result_code": "200",
+ "result_message": "5G slicing NSI service instances result."
+ },
+ "result_body": {
+ "record_number": 2,
+ "nsi_service_instances": [
+ {
+ "service_instance_order": "1",
+ "service_instance_id": "46da8cf8-0878-48ac-bea3-f2200959411a",
+ "service_instance_name": "eMBB instancel"
+ },
+ {
+ "service_instance_order": "2",
+ "service_instance_id": "46da8cf8-0878-48bc-bea3-f2200959411a",
+ "service_instance_name": "eMBB instance2"
+ }
+ ]
+ }
+}
+
diff --git a/usecaseui-portal/src/app/mock/json/slicing_subnet_context.json b/usecaseui-portal/src/app/mock/json/slicing_subnet_context.json
new file mode 100644
index 00000000..b44d2135
--- /dev/null
+++ b/usecaseui-portal/src/app/mock/json/slicing_subnet_context.json
@@ -0,0 +1,27 @@
+{
+ "result_header":{
+ "result_code":"200",
+ "result_message":"5G slicing NSSI query based on environment context result."
+ },
+ "result_body":{
+ "record_number":2,
+ "nssi_service_instances":[
+ {
+ "service_instance_order":"1",
+ "service_instance_id":"NSSI-C-001-HDBNJ-NSSMF-01-A-ZX",
+ "service_instance_name":"slicing_core_notwork",
+ "service_type":"slicing_core_notwork",
+ "environment_context":"cn",
+ "orchestration_status":"activated"
+ },
+ {
+ "service_instance_order":"2",
+ "service_instance_id":"NSSI-C-001-HDBNJ-NSSMF-01-A-ZX",
+ "service_instance_name":"slicing_core_notwork",
+ "service_type":"slicing_core_notwork",
+ "environment_context":"cn",
+ "orchestration_status":"activated"
+ }
+ ]
+ }
+}
diff --git a/usecaseui-portal/src/app/mock/json/slicing_subnet_instance.json b/usecaseui-portal/src/app/mock/json/slicing_subnet_instance.json
new file mode 100644
index 00000000..62e690a6
--- /dev/null
+++ b/usecaseui-portal/src/app/mock/json/slicing_subnet_instance.json
@@ -0,0 +1,14 @@
+{
+ "result_header": {
+ "result_code": "200",
+ "result_message": "NSSI associated with NSI result."
+ },
+ "result_body": {
+ "an_suggest_nssi_id": "46da8cf8-0878-48ac-bea3-f2200959411a",
+ "an_suggest_nssi_name": "eMBBANinstance1",
+ "tn_suggest_nssi_id": "46da8cf8-0878-48ac-bea3-f2200959411a",
+ "tn_suggest_nssi_name": "eMBBTNinstance1",
+ "cn_suggest_nssi_id": "46da8cf8-0878-48ac-bea3-f2200959411a",
+ "cn_suggest_nssi_name": "eMBBCNinstance1"
+ }
+}
diff --git a/usecaseui-portal/src/app/mock/routes.js b/usecaseui-portal/src/app/mock/routes.js
index fe982ca5..4f91b651 100644
--- a/usecaseui-portal/src/app/mock/routes.js
+++ b/usecaseui-portal/src/app/mock/routes.js
@@ -91,10 +91,13 @@ module.exports =
"/POST/uui-lcm/vf-packages": "/POST_uui-lcm_vf-packages",
"/POST/uui-lcm/:jsonData": "/POST_uui-lcm_create",
- ///////<-------------slicing-tesk-management--------->/////
+ ///////<-------------slicing--------->/////
"/uui-slicing/nsmf/task/business/pageNo/:pageNo/pageSize/:pageSize": "/slicing_task_list",
"/uui-slicing/nsmf/task/:processingStatus/business/pageNo/:pageNo/pageSize/:pageSize": "/slicing_task_processing_status",
"/uui-slicing/nsmf/task/:taskId/auditInfo": "/slicing_task_auditInfo",
+ "/uui-slicing/nsmf/resource/nsi/instances/pageNo/:pageNo/pageSize/:pageSize": "/slicing_instance",
+ "/uui-slicing/nsmf/resource/nsi/:nsiId/nssiInstances": "/slicing_subnet_instance",
+ "/uui-slicing/nsmf/resource/nssi/:environmentContext/instances/pageNo/:pageNo/pageSize/:pageSize": "/slicing_subnet_context",
///////<-------------general interface--------->/////
"/api/*": "/$1",
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html
index 89d64f51..3aca68fb 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html
@@ -55,15 +55,19 @@
<nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8">
<div nz-col nzSpan="12">
切片实例 ID:
- <nz-select nzShowSearch [(ngModel)]="selectedServiceId" (ngModelChange)="serviceIdChange($event)">
- <nz-option *ngFor="let p of serviceId" [nzValue]="p" [nzLabel]="p"></nz-option>
+ <nz-select nzShowSearch
+ [(ngModel)]="selectedServiceId"
+ (ngModelChange)="slicingInstanceChange()"
+ (nzOpenChange)="getSlicingData($event)"
+ >
+ <nz-option *ngFor="let item of slicingInstances" [nzValue]="item.service_instance_id" [nzLabel]="item.service_instance_id"></nz-option>
</nz-select>
</div>
<div nz-col nzSpan="8">
- 切片实例名称:{{selectedServiceName}}
+ 切片实例名称:{{ selectedServiceName }}
</div>
<div nz-col nzSpan="4">
- <button nz-button nzType="primary" (click)="resetService()">
+ <button nz-button nzType="primary" (click)="resetSlicingInstance()">
<i nz-icon class="anticon anticon-plus"></i>
</button>
</div>
@@ -74,23 +78,26 @@
<div nz-row [nzGutter]="8">
<div nz-col nzSpan="12">
切片子网实例 ID:
- <nz-select nzShowSearch [(ngModel)]="item.slicingId" (ngModelChange)="serviceIdChange($event)">
- <nz-option *ngFor="let p of serviceId" [nzValue]="p" [nzLabel]="p"></nz-option>
+ <nz-select nzShowSearch [(ngModel)]="item.slicingId" (ngModelChange)="slicingSubnetChange(item)" (nzOpenChange)="getSubnetInstances($event, item)">
+ <nz-option *ngFor="let item of item.instances" [nzValue]="item.service_instance_id" [nzLabel]="item.service_instance_id"></nz-option>
</nz-select>
</div>
<div nz-col nzSpan="8">
切片子网实例名称:{{item.slicingName}}
</div>
<div nz-col nzSpan="4">
- <button nz-button nzType="primary" (click)="resetService()"> <i nz-icon
- class="anticon anticon-plus"></i></button>
- <button nz-button nzType="primary"> <i nz-icon class="anticon anticon-setting"
- nzTheme="outline"></i></button>
+ <button nz-button nzType="primary" (click)="restSubnetInstance(item)">
+ <i nz-icon class="anticon anticon-plus"></i>
+ </button>
+ <button nz-button nzType="primary" (click)="showParamsModel(item)">
+ <i nz-icon class="anticon anticon-setting" nzTheme="outline"></i>
+ </button>
</div>
</div>
</nz-card>
</nz-list-item>
</nz-list>
</div>
+ <app-subnet-params-model [showModel]="isShowParams" [detailData]="params" [title]="paramsTitle" (cancel)="isShowParams=$event"></app-subnet-params-model>
</nz-modal> \ No newline at end of file
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 8d61029e..88eb586a 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
@@ -26,24 +26,36 @@ export class SlicingTaskModelComponent implements OnInit {
// 共享切片实例
selectedServiceId: string;
selectedServiceName: string;
+ slicingInstances: any[];
+ loading: boolean = false;
// 子网实例
slicingSubnet: any[] = [
{
title: '无线域',
+ context: 'an',
slicingId: '',
- slicingName: ''
+ slicingName: '',
+ instances: []
},
{
title: '传输域',
+ context: 'tn',
slicingId: '',
- slicingName: ''
+ slicingName: '',
+ instances: []
},
{
title: '核心网域',
+ context: 'cn',
slicingId: '',
- slicingName: ''
+ slicingName: '',
+ instances: []
}
]
+ // 子网参数
+ isShowParams: boolean;
+ paramsTitle: string;
+ params: any;
ngOnInit() { }
@@ -66,7 +78,23 @@ export class SlicingTaskModelComponent implements OnInit {
tn_suggest_nssi_id,
tn_suggest_nssi_name,
cn_suggest_nssi_id,
- cn_suggest_nssi_name } = nsi_nssi_info;
+ cn_suggest_nssi_name,
+ an_latency,
+ an_5qi,
+ an_coverage_area_ta_list,
+ tn_latency,
+ tn_bandwidth,
+ cn_service_snssai,
+ cn_resource_sharing_level,
+ cn_ue_mobility_level,
+ cn_latency,
+ cn_max_number_of_ues,
+ cn_activity_factor,
+ cn_exp_data_rate_dl,
+ cn_exp_data_rate_ul,
+ cn_area_traffic_cap_dl,
+ cn_area_traffic_cap_ul
+ } = nsi_nssi_info;
// 处理配置审核详情数据
this.checkDetail = [{ task_id, task_name, create_timer, processing_status, service_snssai }];
// 业务需求信息数据
@@ -75,38 +103,124 @@ export class SlicingTaskModelComponent implements OnInit {
// 共享切片实例
this.selectedServiceId = suggest_nsi_id;
this.selectedServiceName = suggest_nsi_name;
+ this.slicingInstances = [{
+ service_instance_id: this.selectedServiceId,
+ service_instance_name: this.selectedServiceName
+ }];
// 子网实例
this.slicingSubnet[0].slicingId = an_suggest_nssi_id;
this.slicingSubnet[0].slicingName = an_suggest_nssi_name;
+ this.slicingSubnet[0].instances = [{
+ service_instance_id: an_suggest_nssi_id,
+ service_instance_name: an_suggest_nssi_name
+ }];
+ this.slicingSubnet[0].params = { an_latency, an_5qi, an_coverage_area_ta_list }
+
this.slicingSubnet[1].slicingId = tn_suggest_nssi_id;
this.slicingSubnet[1].slicingName = tn_suggest_nssi_name;
+ this.slicingSubnet[1].instances = [{
+ service_instance_id: tn_suggest_nssi_id,
+ service_instance_name: tn_suggest_nssi_name
+ }];
+ this.slicingSubnet[1].params = { tn_latency, tn_bandwidth };
+
this.slicingSubnet[2].slicingId = cn_suggest_nssi_id;
this.slicingSubnet[2].slicingName = cn_suggest_nssi_name;
+ this.slicingSubnet[2].instances = [{
+ service_instance_id: cn_suggest_nssi_id,
+ service_instance_name: cn_suggest_nssi_name
+ }];
+ this.slicingSubnet[2].params = {
+ cn_service_snssai,
+ cn_resource_sharing_level,
+ cn_ue_mobility_level,
+ cn_latency,
+ cn_max_number_of_ues,
+ cn_activity_factor,
+ cn_exp_data_rate_dl,
+ cn_exp_data_rate_ul,
+ cn_area_traffic_cap_dl,
+ cn_area_traffic_cap_ul
+ };
}
})
}
+ getSlicingData ( bool: boolean): void {
+ this.loading = true
+ if (bool && this.slicingInstances.length === 1) {
+ this.http.getSlicingInstance('1', '10').subscribe ( res => {
+ this.loading = false;
+ const { result_header: { result_code }, result_body: { nsi_service_instances } } = res
+ if (+result_code === 200) {
+ this.slicingInstances = nsi_service_instances;
+ }
+ })
+ }
+ }
+ slicingInstanceChange ():void {
+ // 获取切片子网实例数据
+ this.http.getSlicingSubnetInstance(this.selectedServiceId).subscribe( res => {
+ const { result_header: { result_code }, result_body} = res;
+ if (+result_code === 200) {
+ const { an_suggest_nssi_id, an_suggest_nssi_name, tn_suggest_nssi_id, tn_suggest_nssi_name, cn_suggest_nssi_id, cn_suggest_nssi_name } = result_body;
+ this.slicingSubnet[0].slicingId = an_suggest_nssi_id;
+ this.slicingSubnet[0].slicingName = an_suggest_nssi_name;
+ this.slicingSubnet[1].slicingId = tn_suggest_nssi_id;
+ this.slicingSubnet[1].slicingName = tn_suggest_nssi_name;
+ this.slicingSubnet[2].slicingId = cn_suggest_nssi_id;
+ this.slicingSubnet[2].slicingName = cn_suggest_nssi_name;
+ }
+ })
+ this.slicingInstances.forEach (item => {
+ if (item.service_instance_id === this.selectedServiceId) {
+ this.selectedServiceName = item.service_instance_name;
+ }
+ })
+ }
+ resetSlicingInstance (): void {
+ this.selectedServiceId = '';
+ this.selectedServiceName = '';
+ this.slicingSubnet.map( item => {
+ item.slicingId = '';
+ item.slicingName = '';
+ })
+ }
+ getSubnetInstances (bool: boolean, instance: any): void {
+ if(bool && instance.instances.length === 1) {
+ this.http.getSubnetInContext(instance.context, '1', '10').subscribe( res => {
+ const { result_header: { result_code }, result_body } = res;
+ if (+result_code === 200) {
+ this.slicingSubnet.map (item => {
+ if (item.context === instance.context) {
+ item.instances = result_body.nssi_service_instances;
+ }
+ })
+ }
+ })
+ }
+ }
+ slicingSubnetChange (instance: any): void {
+ instance.instances.forEach( item => {
+ if (instance.slicingId === item.service_instance_id) {
+ instance.slicingName = item.service_instance_name;
+ }
+ })
+ }
- serviceId = ['46da8cf8-0878-48ac-bea3-f2200959411a', '46da8cf8-0878-48ac-bea3-f2200959411b', '46da8cf8-0878-48ac-bea3-f2200959411c'];
- serviceData: {} = {
- "46da8cf8-0878-48ac-bea3-f2200959411a": "eMBB instancela",
- "46da8cf8-0878-48ac-bea3-f2200959411b": "eMBB instancelb",
- "46da8cf8-0878-48ac-bea3-f2200959411c": "eMBB instancelc",
- };
-
-
-
- serviceIdChange(value: string): void {
- this.selectedServiceName = this.serviceData[value];
- console.log(this.selectedServiceName, "=====")
+ restSubnetInstance (instance: any): void {
+ instance.slicingId = '';
+ instance.slicingName = '';
}
- resetService() {
- this.selectedServiceId = "";
- this.serviceIdChange(this.selectedServiceId);
+
+ showParamsModel (item: any): void {
+ this.isShowParams = true;
+ this.paramsTitle = item.title;
+ this.params = item.params
}
handleCancel() {
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
new file mode 100644
index 00000000..04042d7f
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html
@@ -0,0 +1,2 @@
+<nz-modal [(nzVisible)]="showModel" [nzTitle]="title" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" nzWidth="750px">
+</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
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.less
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.spec.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.spec.ts
new file mode 100644
index 00000000..b5325d85
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SubnetParamsModelComponent } from './subnet-params-model.component';
+
+describe('SubnetParamsModelComponent', () => {
+ let component: SubnetParamsModelComponent;
+ let fixture: ComponentFixture<SubnetParamsModelComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ SubnetParamsModelComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(SubnetParamsModelComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
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
new file mode 100644
index 00000000..ec8790ab
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts
@@ -0,0 +1,33 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { WIRELESS_FORM_ITEMS, TRANSFRER_FORM_ITEMS } from '../.../../../../../../../../constants/constants'
+
+@Component({
+ selector: 'app-subnet-params-model',
+ templateUrl: './subnet-params-model.component.html',
+ styleUrls: ['./subnet-params-model.component.less']
+})
+export class SubnetParamsModelComponent implements OnInit {
+
+ @Input() showModel: boolean;
+ @Input() detailData: any;
+ @Input() title: string;
+ @Output() cancel = new EventEmitter<boolean>();
+
+ transferFormItems = TRANSFRER_FORM_ITEMS;
+
+ constructor() { }
+
+ ngOnInit() {
+
+ }
+
+ handleCancel() {
+ this.showModel = false
+ this.cancel.emit(this.showModel)
+ }
+
+ handleOk(): void {
+ this.handleCancel()
+ }
+
+}