diff options
Diffstat (limited to 'usecaseui-portal/src/app/views')
26 files changed, 532 insertions, 40 deletions
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html new file mode 100644 index 00000000..951eb5e7 --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html @@ -0,0 +1,3 @@ +<p> + monitor-5g works! +</p> diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.spec.ts b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.spec.ts new file mode 100644 index 00000000..14203595 --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { Monitor5gComponent } from './monitor-5g.component'; + +describe('Monitor5gComponent', () => { + let component: Monitor5gComponent; + let fixture: ComponentFixture<Monitor5gComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ Monitor5gComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(Monitor5gComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts new file mode 100644 index 00000000..128f1ba4 --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-monitor-5g', + templateUrl: './monitor-5g.component.html', + styleUrls: ['./monitor-5g.component.less'] +}) +export class Monitor5gComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.css b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.css index 4e80750c..4e80750c 100644 --- a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.css +++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.css diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html index c48d68f9..c48d68f9 100644 --- a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html +++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.less b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.less index f877e1ca..f877e1ca 100644 --- a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.less +++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.less diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts index 07c8b959..51980b8a 100644 --- a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts +++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts @@ -5,7 +5,7 @@ import { HttpClientModule } from '@angular/common/http'; import { NzMessageService, NzModalService } from 'ng-zorro-antd'; import { OnboardVnfVmComponent } from './onboard-vnf-vm.component'; -import { onboardService } from '../../../core/services/onboard.service'; +import { onboardService } from '../../core/services/onboard.service'; describe('OnboardVnfVmComponent', () => { let component: OnboardVnfVmComponent; @@ -18,10 +18,10 @@ describe('OnboardVnfVmComponent', () => { NO_ERRORS_SCHEMA ], imports: [TranslateModule, HttpClientModule], - declarations: [ OnboardVnfVmComponent ], + declarations: [OnboardVnfVmComponent], providers: [onboardService, NzMessageService, NzModalService] }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.ts index 3d312c5c..682f48cf 100644 --- a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts +++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.ts @@ -15,8 +15,8 @@ */ import { HttpClient, HttpRequest, HttpResponse } from '@angular/common/http'; import { Component, OnInit, HostBinding, TemplateRef, ViewChild } from '@angular/core'; -import { onboardService } from '../../../core/services/onboard.service'; -import { slideToRight } from '../../../shared/utils/animates'; +import { onboardService } from '../../core/services/onboard.service'; +import { slideToRight } from '../../shared/utils/animates'; import { NzMessageService, UploadFile, NzModalRef, NzModalService } from 'ng-zorro-antd'; import { filter } from 'rxjs/operators'; @@ -34,7 +34,7 @@ export class OnboardVnfVmComponent implements OnInit { tabs: string[] = ['NS', 'VNF', 'PNF']; currentTab: string = 'NS' fileList: UploadFile[] = []; - uploading:boolean = false; + uploading: boolean = false; infoId: string; display: string = 'block'; @@ -107,13 +107,13 @@ export class OnboardVnfVmComponent implements OnInit { } beforeUpload = (file: UploadFile): boolean => { - this.fileList.splice(0,1,file); + this.fileList.splice(0, 1, file); let API: string; - if(this.currentTab === 'NS'){ + if (this.currentTab === 'NS') { API = 'createNetworkServiceData'; - }else if(this.currentTab === 'VNF'){ + } else if (this.currentTab === 'VNF') { API = 'createVnfData'; - }else { + } else { API = 'createPnfData'; } this.myhttp.getCreatensData(API, this.requestBody)//on-line @@ -182,7 +182,7 @@ export class OnboardVnfVmComponent implements OnInit { } // Get the NS list - getTableData(): void{ + getTableData(): void { this.isSpinning = true; //ns vfc lists this.myhttp.getOnboardTableData() @@ -207,7 +207,7 @@ export class OnboardVnfVmComponent implements OnInit { } // Get the vnf list - getTableVnfData(): void{ + getTableVnfData(): void { this.isSpinning = true; //vnf vfc lists this.myhttp.getOnboardTableVnfData() @@ -240,24 +240,24 @@ export class OnboardVnfVmComponent implements OnInit { this.isSpinning = false; //loading hide }, (err) => { console.error(err); - this.isSpinning = false; + this.isSpinning = false; }) } // confirm - showConfirm(requestBody: object, id: string): void{ - let API = this.currentTab === 'NS'? 'getNsonboard' : 'getVnfonboard'; + showConfirm(requestBody: object, id: string): void { + let API = this.currentTab === 'NS' ? 'getNsonboard' : 'getVnfonboard'; this.modalService.confirm({ nzTitle: '<p>Are you sure you want to do this?</p>', nzOnOk: () => { this.myhttp[API](requestBody) .subscribe((data) => { if (data.status == "success") { - if(this.currentTab === 'NS'){ + if (this.currentTab === 'NS') { this.isUpdate = false; this.notification.notificationSuccess(this.currentTab, "OnboardingState", id); this.getTableData(); - }else{ + } else { this.jobId = data.jobId; this.queryProgress(this.jobId, id); this.getTableVnfData(); @@ -266,7 +266,7 @@ export class OnboardVnfVmComponent implements OnInit { this.isUpdate = false; this.notification.notificationFailed(this.currentTab, "OnboardingState", id); return false - } + } }, (err) => { console.log(err); }) @@ -280,10 +280,10 @@ export class OnboardVnfVmComponent implements OnInit { this.isUpdate = true; let requestBody = { "csarId": id }; this.showConfirm(requestBody, id) - } + } //Progress Progress inquiry - queryProgress(jobId: string, id: string): any{ + queryProgress(jobId: string, id: string): any { let mypromise = new Promise((res) => { this.myhttp.getProgress(jobId, 0) .subscribe((data) => { @@ -297,7 +297,7 @@ export class OnboardVnfVmComponent implements OnInit { if (data.responseDescriptor.progress > 100) { this.isUpdate = false; this.notification.notificationFailed(this.currentTab, 'OnboardingState', id); - }else if (data.responseDescriptor.progress < 100) { + } else if (data.responseDescriptor.progress < 100) { this.isUpdate = true; setTimeout(() => { this.queryProgress(this.jobId, id); @@ -329,11 +329,11 @@ export class OnboardVnfVmComponent implements OnInit { //delete nsItem deleteService(pkgid, resolve) { let API: string; - if(this.currentTab === 'NS'){ + if (this.currentTab === 'NS') { API = 'deleteNsIdData'; - }else if(this.currentTab === 'VNF'){ + } else if (this.currentTab === 'VNF') { API = 'deleteVnfIdData'; - }else{ + } else { API = 'deletePnfIdData'; } this.myhttp[API](pkgid) @@ -341,7 +341,7 @@ export class OnboardVnfVmComponent implements OnInit { this.notification.notificationSuccess(this.currentTab, 'OnboardingState', pkgid); resolve() //refresh list after successful deletion - switch(this.currentTab){ + switch (this.currentTab) { case 'NS': this.getTableData(); break diff --git a/usecaseui-portal/src/app/views/services/services-list/delete-model/delete-model.component.ts b/usecaseui-portal/src/app/views/services/services-list/delete-model/delete-model.component.ts index f9bf9a9c..5ce0d108 100644 --- a/usecaseui-portal/src/app/views/services/services-list/delete-model/delete-model.component.ts +++ b/usecaseui-portal/src/app/views/services/services-list/delete-model/delete-model.component.ts @@ -1,25 +1,25 @@ -import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; @Component({ - selector: 'app-delete-model', - templateUrl: './delete-model.component.html', - styleUrls: ['./delete-model.component.less'] + selector: 'app-delete-model', + templateUrl: './delete-model.component.html', + styleUrls: ['./delete-model.component.less'] }) export class DeleteModelComponent implements OnInit { - @Input()deleteModalVisible: boolean; - @Input()thisService; - @Input()terminationType; - @Input()loadingAnimateShow; - @Input()templateDeleteSuccessFaild; - @Input()gracefulTerminationTimeout; + @Input() deleteModalVisible: boolean; + @Input() thisService; + @Input() terminationType; + @Input() loadingAnimateShow; + @Input() templateDeleteSuccessFaild; + @Input() gracefulTerminationTimeout; - @Output() cancel = new EventEmitter<boolean>(); - @Output() deleteModalOK = new EventEmitter<any>(); + @Output() cancel = new EventEmitter<boolean>(); + @Output() deleteModalOK = new EventEmitter<any>(); - constructor() { } + constructor() { } - ngOnInit() { - } + ngOnInit() { + } deleteOk() { this.deleteModalVisible = false; diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html new file mode 100644 index 00000000..59401e02 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html @@ -0,0 +1,8 @@ +<nz-tabset> + <nz-tab nzTitle="Slicing Task Management"> + <app-slicing-task-management></app-slicing-task-management> + </nz-tab> + <nz-tab nzTitle="Slicing Resource Management"> + <app-slicing-resource-management></app-slicing-resource-management> + </nz-tab> +</nz-tabset>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.less new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.less diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.spec.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.spec.ts new file mode 100644 index 00000000..25fbf515 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SlicingManagementComponent } from './slicing-management.component'; + +describe('SlicingManagementComponent', () => { + let component: SlicingManagementComponent; + let fixture: ComponentFixture<SlicingManagementComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SlicingManagementComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SlicingManagementComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.ts new file mode 100644 index 00000000..ae2133de --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-slicing-management', + templateUrl: './slicing-management.component.html', + styleUrls: ['./slicing-management.component.less'] +}) +export class SlicingManagementComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.html new file mode 100644 index 00000000..0408552d --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.html @@ -0,0 +1,3 @@ +<p> + slicing-resource-management works! +</p> diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.less new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.less diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.spec.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.spec.ts new file mode 100644 index 00000000..6a22984b --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SlicingResourceManagementComponent } from './slicing-resource-management.component'; + +describe('SlicingResourceManagementComponent', () => { + let component: SlicingResourceManagementComponent; + let fixture: ComponentFixture<SlicingResourceManagementComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SlicingResourceManagementComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SlicingResourceManagementComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.ts new file mode 100644 index 00000000..38dc48c8 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-slicing-resource-management', + templateUrl: './slicing-resource-management.component.html', + styleUrls: ['./slicing-resource-management.component.less'] +}) +export class SlicingResourceManagementComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html new file mode 100644 index 00000000..6a5abe88 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html @@ -0,0 +1,37 @@ +<div> + <div nz-row> + <div nz-col nzSpan="6"> + <span>Status：</span> + <nz-select nzShowSearch nzAllowClear nzPlaceHolder="Select a person" [(ngModel)]="selectedValue"> + <nz-option nzLabel="Jack" nzValue="jack"></nz-option> + <nz-option nzLabel="Lucy" nzValue="lucy"></nz-option> + <nz-option nzLabel="Tom" nzValue="tom"></nz-option> + </nz-select> + </div> + </div> + <div> + <nz-table #basicTable [nzData]="listOfData"> + <thead> + <tr> + <th>Name</th> + <th>Age</th> + <th>Status</th> + <th>Action</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let data of basicTable.data"> + <td>{{ data.name }}</td> + <td>{{ data.age }}</td> + <td>{{ data.status===0?"Checking Configuration":"Creating Slicing" }}</td> + <td> + <a (click)="showdetail(data)">Show Detail</a> + </td> + </tr> + </tbody> + </nz-table> + </div> + <app-slicing-task-model [moduleTitle]="moduleTitle" [showDetail]="showDetail" [modelData]="detailData" + (cancel)="showDetail=$event"> + </app-slicing-task-model> +</div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less new file mode 100644 index 00000000..1de685d6 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less @@ -0,0 +1,3 @@ +nz-select { + width: 200px; +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.spec.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.spec.ts new file mode 100644 index 00000000..a2631a98 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SlicingTaskManagementComponent } from './slicing-task-management.component'; + +describe('SlicingTaskManagementComponent', () => { + let component: SlicingTaskManagementComponent; + let fixture: ComponentFixture<SlicingTaskManagementComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SlicingTaskManagementComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SlicingTaskManagementComponent); + 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-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts new file mode 100644 index 00000000..ad29c5ed --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts @@ -0,0 +1,43 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-slicing-task-management', + templateUrl: './slicing-task-management.component.html', + styleUrls: ['./slicing-task-management.component.less'] +}) +export class SlicingTaskManagementComponent implements OnInit { + + constructor() { } + + ngOnInit() { } + showDetail: boolean = false; + selectedValue = null; + detailData: object = {}; + moduleTitle: string = ""; + listOfData = [ + { + key: '1', + name: 'John Brown', + age: 32, + status: 0 + }, + { + key: '2', + name: 'Jim Green', + age: 42, + status: 0 + }, + { + key: '3', + name: 'Joe Black', + age: 32, + status: 1 + } + ]; + showdetail(data: any) { + console.log(data, this.showDetail) + this.detailData = data; + this.showDetail = true; + this.moduleTitle = data.status === 0 ? "Check Configuration" : "View Progress"; + } +} 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 new file mode 100644 index 00000000..f864dc92 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html @@ -0,0 +1,149 @@ +<nz-modal [nzVisible]="showDetail" nzWidth="85%" [nzTitle]="moduleTitle" (nzOnCancel)="handleCancel()" + (nzOnOk)="handleOk()"> + <nz-list class="taskmodel_list" [nzDataSource]="checkDetail" nzBordered [nzHeader]="'配置审核详情：'" [nzFooter]="null" + [nzRenderItem]="checkItem"> + <ng-template #checkItem let-check> + <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8"> + <div nz-col nzSpan="10"> + <span>Task ID： {{ check.id }}</span> + </div> + <div nz-col nzSpan="8"> + <span>Task Name： {{ check.name }}</span> + </div> + <div nz-col nzSpan="6"> + <span>S-NSSAI：{{ check.snssai }}</span> + </div> + </nz-list-item> + <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8"> + <div nz-col nzSpan="10"> + <span>Arrived Time： {{ check.arrivedtime }}</span> + </div> + <div nz-col nzSpan="8"> + <span>Status： {{ check.status }}</span> + </div> + </nz-list-item> + </ng-template> + </nz-list> + + <nz-list class="taskmodel_list" [nzDataSource]="businessRequirement" nzBordered [nzHeader]="'业务需求信息：'" + [nzFooter]="null" [nzRenderItem]="businessItem"> + <ng-template #businessItem let-item> + <nz-list-item> + <span class="ant-typography">Name：</span> + {{ item.name }} + </nz-list-item> + <nz-list-item> + <span class="ant-typography">S-NSSAI： </span> + {{ item.snssai }} + </nz-list-item> + <nz-list-item> + <span class="ant-typography">Time： </span> + {{ item.expiretime }} + </nz-list-item> + <nz-list-item> + <span class="ant-typography">Area： </span> + {{ item. area }} + </nz-list-item> + </ng-template> + </nz-list> + + <nz-list class="taskmodel_list" [nzDataSource]="NSTinfo" nzBordered [nzHeader]="'匹配NST信息：'" [nzFooter]="null" + [nzRenderItem]="taskItem"> + <ng-template #taskItem let-item> + <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8"> + <div nz-col nzSpan="12"> + <span>NST ID： {{ item.id }}</span> + </div> + <div nz-col nzSpan="12"> + <span>NST Name： {{ item.name }}</span> + </div> + </nz-list-item> + </ng-template> + </nz-list> + + + <div> + <nz-list class="taskmodel_list" nzBordered [nzHeader]="'匹配共享切片实例：'" [nzFooter]="null"> + <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> + </div> + <div nz-col nzSpan="8"> + 切片实例名称：{{selectedServiceName}} + </div> + <div nz-col nzSpan="4"> + <button nz-button nzType="primary" (click)="resetService()"> + <i nz-icon class="anticon anticon-plus"></i> + </button> + </div> + </nz-list-item> + <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8"> + <p class="listitem_subtitle" nz-col nzSpan="24">匹配的共享切片子网实例：</p> + <nz-card nzType="inner" nz-col nzSpan="24" nzTitle="无线域："> + <div nz-row [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> + </div> + <div nz-col nzSpan="8"> + 切片子网实例名称：{{selectedServiceName}} + </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> + </div> + </div> + </nz-card> + <nz-card nzType="inner" nz-col nzSpan="24" style="margin-top:16px;" nzTitle="传输域："> + <div nz-row [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> + </div> + <div nz-col nzSpan="8"> + 切片子网实例名称：{{selectedServiceName}} + </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> + </div> + </div> + </nz-card> + <nz-card nzType="inner" nz-col nzSpan="24" style="margin-top:16px;" nzTitle="核心网域："> + + <div nz-row [nzGutter]="12" nzType="flex" nzAlign="middle"> + <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> + </div> + <div nz-col nzSpan="8"> + 切片子网实例名称：{{selectedServiceName}} + </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> + </div> + </div> + </nz-card> + </nz-list-item> + </nz-list> + </div> + +</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.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.less new file mode 100644 index 00000000..aad9a554 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.less @@ -0,0 +1,15 @@ +nz-select { + width: 70%; +} + +.taskmodel_list { + margin-bottom: 20px; + + .listitem_subtitle { + font-size: 14px; + color: rgba(0, 0, 0, 0.85); + margin-bottom: 16px; + font-weight: 500; + } + +}
\ 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.spec.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.spec.ts new file mode 100644 index 00000000..a6c02728 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SlicingTaskModelComponent } from './slicing-task-model.component'; + +describe('SlicingTaskModelComponent', () => { + let component: SlicingTaskModelComponent; + let fixture: ComponentFixture<SlicingTaskModelComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SlicingTaskModelComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SlicingTaskModelComponent); + 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/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 new file mode 100644 index 00000000..2abe8d44 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts @@ -0,0 +1,61 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; + +@Component({ + selector: 'app-slicing-task-model', + templateUrl: './slicing-task-model.component.html', + styleUrls: ['./slicing-task-model.component.less'] +}) +export class SlicingTaskModelComponent implements OnInit { + @Input() showDetail: boolean; + @Input() moduleTitle: string; + @Input() modelData: object; + @Output() cancel = new EventEmitter<boolean>(); + + constructor() { } + checkDetail: [{}] = [{ + id: "b1bb0ce7-ebca-4fa7-95ed-4840d70a1177", + name: "5G Slice eMMB", + snssai: "1-010101", + arrivedtime: "2019-10-29 10:00", + status: "Checking" + }]; //配置审核详情 + businessRequirement: [{}] = [{ + name: "5G Slice eMMB", + snssai: "1-010101", + expiretime: "2019-10-29 10:00", + area: "Beijing", + }];//业务需求信息 + NSTinfo: [{}] = [{ + id: "46da8cf8-0878-48ac-bea3-f2200959411a", + name: "eMBB instancel" + }];//匹配NST信息 + selectedServiceId = '46da8cf8-0878-48ac-bea3-f2200959411a'; + selectedServiceName = ''; + 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", + }; + + ngOnInit() { + this.serviceIdChange(this.selectedServiceId) + } + + serviceIdChange(value: string): void { + this.selectedServiceName = this.serviceData[value]; + console.log(this.selectedServiceName, "=====") + } + resetService() { + this.selectedServiceId = ""; + this.serviceIdChange(this.selectedServiceId); + } + + handleCancel() { + this.showDetail = false; + this.cancel.emit(this.showDetail); + } + handleOk() { + this.handleCancel(); + } +} |