diff options
Diffstat (limited to 'usecaseui-portal/src')
4 files changed, 55 insertions, 80 deletions
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.html b/usecaseui-portal/src/app/services/services-list/services-list.component.html index c09b15be..de137fd4 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.html +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.html @@ -40,7 +40,7 @@ <button class="create" nz-button [nzType]="'primary'" (click)="createModal()"><i class="anticon anticon-plus" style="transform: scale(1.5);line-height: 15px;margin-right: 5px;"></i><span> Create </span> </button> - <nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle="TEMPLATE" (nzOnCancel)="handleCancel()" + <nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle="Service Creation" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"> <div class="select-list"> <span style="display:inline-block;">Customer: </span> @@ -48,47 +48,19 @@ <nz-option *ngFor="let item of customerList2" [nzValue]="item.name" [nzLabel]="item.name"></nz-option> </nz-select> </div> - <div class="select-list"> - <span style="display:inline-block;">Service Type: </span> - <nz-select style="width: 176px;float: right;" [(ngModel)]="serviceTypeSelected2.name" nzAllowClear> + <div class="select-list"> + <span style="display:inline-block;">SERVICE TYPE: </span> + <nz-select style="width: 176px;float: right;" [(ngModel)]="serviceTypeSelected2.name" nzAllowClear (ngModelChange)="choseTemplateType()"> <nz-option *ngFor="let item of serviceTypeList2" [nzValue]="item.name" [nzLabel]="item.name" ></nz-option> </nz-select> </div> - <div class="select-list"> - <span style="display:inline-block;">Service: </span> - <nz-select style="width: 176px;float: right;" [(ngModel)]="templateTypeSelected" nzAllowClear - (ngModelChange)="choseTemplateType()"> - <!-- <nz-option *ngFor="let item of templateType" [nzValue]="item" [nzLabel]="item"></nz-option> --> - <nz-option nzValue="SOTN" nzLabel="SOTN"></nz-option> - <nz-option nzValue="CCVPN" nzLabel="CCVPN"></nz-option> - <nz-option nzValue="E2E Service" nzLabel="E2E Service"></nz-option> - <nz-option nzValue="Network Service" nzLabel="Network Service"></nz-option> + <div class="select-list"> + <span style="display:inline-block;width:70px;">TEMPLATE: </span> + <nz-select style="width: 176px;float: right;" [(ngModel)]="template1" nzAllowClear> + <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option> </nz-select> </div> - <div *ngIf="templateTypeSelected == 'SOTN'||templateTypeSelected == 'CCVPN'"> - <div class="select-list"> - <span style="display:inline-block;">SOTN VPN: </span> - <nz-select style="width: 176px;float: right;" [(ngModel)]="template1" nzAllowClear> - <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option> - </nz-select> - </div> - <div class="select-list"> - <span style="display:inline-block;"> SITE: </span> - <nz-select style="width: 176px;float: right;" [(ngModel)]="template2" nzAllowClear> - <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option> - </nz-select> - </div> - <div *ngIf="templateTypeSelected == 'CCVPN'"> - <div class="select-list"> - <span style="display:inline-block;">SD-WAN: </span> - <nz-select style="width: 176px;float: right;" [(ngModel)]="template3" nzAllowClear> - <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option> - </nz-select> - </div> - </div> - </div> - <div *ngIf="templateTypeSelected == 'E2E Service'"> <div class="select-list"> <span style="display:inline-block;width:70px;">Orchestrator: </span> @@ -97,14 +69,7 @@ </nz-select> </div> </div> - <div *ngIf="templateTypeSelected == 'E2E Service'||templateTypeSelected == 'Network Service'"> - <div class="select-list"> - <span style="display:inline-block;width:70px;">TEMPLATE: </span> - <nz-select style="width: 176px;float: right;" [(ngModel)]="template4" nzAllowClear> - <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option> - </nz-select> - </div> - </div> + <div *ngIf="templateTypeSelected == 'E2E Service'"> <div class="check-box" style="margin:30px; height: 50px"> <input class="check-box-style" style="zoom: 1.8; width: 70px" type="checkbox" [(ngModel)]="isSol005Interface" value="true" nzAllowClear> @@ -119,7 +84,7 @@ <span class="round">{{item.serviceDomain}}</span> <div class="top-list-text"> <span>{{item.number}}</span><br> - <span>{{item.serviceDomain}} Service Instances</span> + <span>{{item.detailName}}</span> </div> </li> </ul> @@ -142,9 +107,9 @@ <tr> <th nzWidth="5%">NO</th> <th nzWidth="5%"></th> - <th nzWidth="20%">Service Instance Id</th> <th nzWidth="20%">Name</th> - <th nzWidth="15%">Service</th> + <th nzWidth="20%">Description</th> + <th nzWidth="15%">Use Case</th> <th nzWidth="20%">Status</th> <th nzWidth="15%">Action</th> </tr> @@ -154,8 +119,8 @@ <tr> <td>{{pageSize*(pageIndex-1) + i+1}}</td> <td [nzShowExpand]="data.childServiceInstances[0]" [(nzExpand)]="data.expand"></td> - <td>{{data["service-instance-id"] || data.nsInstanceId}}</td> <td>{{data["service-instance-name"] || data.nsName}}</td> + <td>{{data["service-instance-id"] || data.nsInstanceId}}</td> <td> <p [ngClass]="{'e2eColor':data.serviceDomain=='E2E Service','nsColor':data.serviceDomain=='Network Service','ccvpnColor':data.serviceDomain=='CCVPN','sotnColor':data.serviceDomain=='SOTN','voLTEColor':data.serviceDomain=='voLTE type'}"> {{data.serviceDomain}} diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.less b/usecaseui-portal/src/app/services/services-list/services-list.component.less index 48d03b16..915afd3a 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.less +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.less @@ -74,7 +74,7 @@ hr { width:116px; height:42px; background:#0DA9E2; - border-radius:2px; + border-radius:6px; margin-top: -15px; span { color: #fff; @@ -100,10 +100,10 @@ hr { } .top-list{ position: relative; - width:22%; - height:184px; - margin: 15px 1.5%; - float: left; + width:31%; + height:224px; + margin: 15px 1%; + float: left; background:url("../../../assets/images/servicelist-e2e.png") no-repeat; background-size: 100% 100%; //background:linear-gradient(90deg,rgba(16,174,222,1) 0%,rgba(43,206,202,1) 100%); @@ -114,7 +114,8 @@ hr { background-size: 100% 100%; } .top-num .top-list:nth-child(3){ - background:url("../../../assets/images/servicelist-cccvpn.png") no-repeat; + //background:url("../../../assets/images/servicelist-cccvpn.png") no-repeat; + background:url("../../../assets/images/servicelist-sotn.png") no-repeat; background-size: 100% 100%; } .top-num .top-list:nth-child(4){ @@ -150,7 +151,7 @@ hr { display: inline-block; font-size: 22px; font-weight: 500; - margin-bottom: 10px; + margin-bottom: 20px; } } .list { @@ -301,7 +302,7 @@ hr { width: 320px; height: 32px; line-height: 32px; - margin: 25px auto; + margin: 35px auto; } .select-list>span{ text-align: right; diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.ts index 2ddf1cad..2efe231a 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.ts +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.ts @@ -51,19 +51,22 @@ export class ServicesListComponent implements OnInit { serviceMunber = [ { "serviceDomain": "E2E", - "number": 10 + "number": 10, + "detailName":"End To End service" }, { "serviceDomain": "NS", - "number": 20 - }, - { - "serviceDomain": "SOTN", - "number": 30 + "number": 20, + "detailName":"Network Service" }, + // { + // "serviceDomain": "SOTN", + // "number": 30 + // }, { "serviceDomain": "CCVPN", - "number": 40 + "number": 40, + "detailName":"Cross Domain and Cross Layer VPN" } ]; @@ -153,7 +156,8 @@ export class ServicesListComponent implements OnInit { this.getAlltemplates(); } // - templateTypeSelected = "SOTN"; + templateTypeSelected = this.serviceTypeList2["name"]; + choseTemplateType(){ this.getallOrchestrators(); this.getAlltemplates(); @@ -180,11 +184,8 @@ export class ServicesListComponent implements OnInit { } console.log(this.templates); this.template1 = this.templates[0]; - this.template2 = this.templates[1]; - this.template3 = this.templates[2]; - this.template4 = this.templates[0]; - - },(err)=>{ + + }, (err) => { }) } @@ -200,13 +201,11 @@ export class ServicesListComponent implements OnInit { this.isVisible = false; if(this.templateTypeSelected=="SOTN"||this.templateTypeSelected=="CCVPN"){ - let data1 = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:"SOTN"},templates:{template1:this.template1,template2:this.template2}}; - let data2 = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:"CCVPN"},templates:{template1:this.template1,template2:this.template2,template3:this.template3}}; - this.createData = this.templateTypeSelected == "SOTN" ? data1 : data2; + this.createData = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected2, templateType:this.templateTypeSelected},template:this.template1}; this.createshow = true; this.listDisplay = true; }else if(this.templateTypeSelected=="E2E Service"||this.templateTypeSelected=="Network Service"){ - this.createData = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:this.templateTypeSelected},template:this.template4, orchestrator:this.orchestratorSelected, isSol005Interface:this.isSol005Interface}; + this.createData = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected2, templateType:this.templateTypeSelected},template:this.template1, orchestrator:this.orchestratorSelected, isSol005Interface:this.isSol005Interface}; this.createshow2 = true; this.listDisplay = true; } @@ -253,7 +252,7 @@ export class ServicesListComponent implements OnInit { return child; } }) - + item["iconMore"]=this.iconMore; if(item["serviceDomain"]=="Network Service"){ if(item["vnfInfo"]){ item["childServiceInstances"] = item["vnfInfo"].map((vnf)=>{ @@ -534,7 +533,7 @@ export class ServicesListComponent implements OnInit { let stageNum = 0; //Different stages of progress, used to add up subsequent service progress; let createParams = "?customerId="+this.customerSelected.id + - "&serviceType="+this.serviceTypeSelected.name + + "&serviceType="+this.serviceTypeSelected2.name + "&serviceDomain="+this.templateTypeSelected + "&parentServiceInstanceId="; this.createService(obj.vpnbody,createParams).then((data)=>{ @@ -568,7 +567,7 @@ export class ServicesListComponent implements OnInit { let querypros = []; //All the query // Additional parameters let createParams = "?customerId="+this.customerSelected.id + - "&serviceType="+this.serviceTypeSelected.name + + "&serviceType="+this.serviceTypeSelected2.name + "&serviceDomain="+"SDWAN" + "&parentServiceInstanceId="+this.parentServiceInstanceId; @@ -605,7 +604,7 @@ export class ServicesListComponent implements OnInit { let querypros = []; //All the query // Additional parameters let createParams = "?customerId="+this.customerSelected.id + - "&serviceType="+this.serviceTypeSelected.name + + "&serviceType="+this.serviceTypeSelected2.name + "&serviceDomain="+"SITE" + "&parentServiceInstanceId="+this.parentServiceInstanceId; let createPros = obj.sitebody.map((group)=>{ @@ -657,7 +656,7 @@ export class ServicesListComponent implements OnInit { console.log(obj); let newData; // let createParams = "?customerId="+this.customerSelected.id + - "&serviceType="+this.serviceTypeSelected.name + + "&serviceType="+this.serviceTypeSelected2.name + "&serviceDomain="+this.templateTypeSelected + "&parentServiceInstanceId="+ "&uuid="+obj.service.serviceUuid+ @@ -733,7 +732,7 @@ export class ServicesListComponent implements OnInit { } let createParams = "?ns_instance_id=" + data.nsInstanceId + "&customerId="+this.customerSelected.id + - "&serviceType="+this.serviceTypeSelected.name + + "&serviceType="+this.serviceTypeSelected2.name + "&serviceDomain="+ this.templateTypeSelected + "&parentServiceInstanceId="; // step2 diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less index 7c17ab29..845187a5 100644 --- a/usecaseui-portal/src/styles.less +++ b/usecaseui-portal/src/styles.less @@ -33,9 +33,11 @@ nz-table { .ant-select-selection--single { height: 40px; line-height: 40px !important; + border:none !important; .ant-select-selection-selected-value { height: 40px; line-height: 40px !important; + margin-left: 5px !important; } } } @@ -63,12 +65,15 @@ nz-table { color: #fff; } } + .ant-pagination-options-quick-jumper{ + display: none!important; + } } } } } -// Detail page mini table style +// 详情页迷你表格样式 .detailInformatioin { nz-table { .ant-table-small { @@ -119,9 +124,11 @@ nz-pagination { .ant-select-selection--single { height: 40px; line-height: 40px !important; + border:none !important; .ant-select-selection-selected-value { height: 40px; line-height: 40px !important; + margin-left: 5px !important; } } } @@ -149,6 +156,9 @@ nz-pagination { color: #fff; } } + .ant-pagination-options-quick-jumper{ + display: none!important; + } } } |