diff options
Diffstat (limited to 'usecaseui-portal/src/app/views/services')
3 files changed, 204 insertions, 168 deletions
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html index 54a44d0b..aa99279f 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html @@ -41,59 +41,57 @@ <ul class="list-box"> <li> <p> - <img src="../../../../../../../assets/images/an-img.png" class="anImg"/> + <img src="../../../../../../../assets/images/an-img.png" class="anImg" /> </p> <p *ngIf="isshowran" class="ran_text">{{rantext}}</p> <p class="ran_adrress">{{businessDetailInfo.an_ip_adrress}} - <img src="../../../../../../../assets/images/ask-img.png" alt="" - class="detail-icon" - *ngIf="businessDetailInfo.an_ip_adrress" - (mouseover)="detailFn(false,'ran')" (mouseleave)="detailFn(false,'ran')" /></p> + <img src="../../../../../../../assets/images/ask-img.png" alt="" class="detail-icon" + *ngIf="businessDetailInfo.an_ip_adrress" (mouseover)="detailFn(false,'ran')" + (mouseleave)="detailFn(false,'ran')" /></p> </li> <li class="vLan-line"> - <p > - Vlan ID:{{businessDetailInfo.an_interface_id}} + <p> + Vlan ID:{{businessDetailInfo.an_interface_id}} </p> <p [ngClass]="{'online-type':status=='activated','offline-type':status!=='activated'}"></p> </li> <li> <p class="fantask">{{ businessDetailInfo.an_nextHop_info }}</p> <p> - <img src="../../../../../../../assets/images/tn-edge-img.png" class="tnImg"/> + <img src="../../../../../../../assets/images/tn-edge-img.png" class="tnImg" /> </p> <p>PE</p> </li> - <li class="three-box" > + <li class="three-box"> <p>{{ businessDetailInfo.max_bandWidth }} Mbps</p> <p> - {{ businessDetailInfo.lantency }} ms + {{ businessDetailInfo.lantency }} ms </p> - <p [ngClass]="{'online-type':status=='activated','offline-type':status!=='activated'}"></p> + <p [ngClass]="{'online-type':status=='activated','offline-type':status!=='activated'}"></p> <p class="">Link Type:{{businessDetailInfo.link_type}}</p> </li> <li> <p class="fantask">{{businessDetailInfo.cn_nextHop_info}}</p> <p> - <img src="../../../../../../../assets/images/tn-edge-img.png" class="tnImg"/> + <img src="../../../../../../../assets/images/tn-edge-img.png" class="tnImg" /> </p> <p>PE</p> </li> <li class="vLan-line"> - <p > - Vlan ID:{{businessDetailInfo.cn_interface_id}} + <p> + Vlan ID:{{businessDetailInfo.cn_interface_id}} </p> <p [ngClass]="{'online-type':status=='activated','offline-type':status!=='activated'}"></p> </li> <li> <p> - <img src="../../../../../../../assets/images/cn-cloud-img.jpg" class="cnCloud"/> + <img src="../../../../../../../assets/images/cn-cloud-img.jpg" class="cnCloud" /> </p> <p *ngIf="isshowcore" class="cor_text">{{rantext}}</p> <p class="cn_adrress">{{businessDetailInfo.cn_ip_adrress}} - <img src="../../../../../../../assets/images/ask-img.png" alt="" - class="core_icon" - *ngIf="businessDetailInfo.cn_ip_adrress" - (mouseover)="detailFn(true,'core')" (mouseleave)="detailFn(false,'core')" /> + <img src="../../../../../../../assets/images/ask-img.png" alt="" class="core_icon" + *ngIf="businessDetailInfo.cn_ip_adrress" (mouseover)="detailFn(true,'core')" + (mouseleave)="detailFn(false,'core')" /> </p> </li> </ul> diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.less index b577fd9e..9eeb4d8f 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.less +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.less @@ -1,101 +1,119 @@ -.taskmodel_list{ +.taskmodel_list { margin-top: 20px; } -a{ + +a { text-decoration: none; } -.warp{ + +.warp { width: 100%; } -.header{ + +.header { display: flex; justify-content: space-between; align-items: center; height: 40px; line-height: 40px; - color:#000; - margin:10px 8%; + color: #000; + margin: 10px 8%; text-align: center; } -.anImg{ + +.anImg { width: 80px; height: auto; margin-top: 20px; } -.list-box{ - width: 90%; + +.list-box { + width: 90%; display: flex; - justify-content:center; + justify-content: center; align-items: center; text-align: center; - margin:0 5%; + margin: 0 5%; } -.list-box li{ + +.list-box li { position: relative; } -.clear{ + +.clear { clear: both; } -.online-vlan{ - flex:1; - height: 1px; - background: #000; + +.online-vlan { + flex: 1; + height: 1px; + background: #000; } -.online-type{ - height: 3px; - background: #1DA57A; - margin: 0 15px; + +.online-type { + height: 3px; + background: #1DA57A; + margin: 0 15px; } -.offline-type{ - + +.offline-type { + height: 3px; background: #7e848a; margin: 0 15px; } -.vLan-line{ + +.vLan-line { text-align: center; - top:-20px; - flex:1; + top: -20px; + flex: 1; } -.tnImg{ + +.tnImg { width: 40px; - height:auto; + height: auto; } -.three-box{ - text-align: center; - flex:1; - top:-20px; + +.three-box { + text-align: center; + flex: 1; + top: -20px; } -.cnCloud{ - margin-left:10px; + +.cnCloud { + margin-left: 10px; width: 80px; height: auto; margin-top: 20px; } -.fantask{ + +.fantask { height: 20px; } -.ran_text{ - width: 200px; - padding:0 6px; - height:auto; + +.ran_text { + width: 212px; + padding: 0 6px; + height: auto; background: rgba(0, 0, 0, .8); line-height: 40px; border-radius: 4px; position: absolute; right: -118px; top: 44px; - color:#ffffff; - z-index:99; -} -.detail-icon{ - position: absolute; - right: -22px; - width:20px; - height:20px; - cursor: pointer; - } -.ran_text::before{ + color: #ffffff; + z-index: 99; +} + +.detail-icon { + position: absolute; + right: -22px; + width: 20px; + height: 20px; + cursor: pointer; +} + +.ran_text::before { content: ''; display: block; position: absolute; @@ -103,21 +121,23 @@ a{ bottom: -16px; border: 20px solid transparent; border: 8px solid transparent; - border-top: 8px solid rgba(0, 0, 0, .8); + border-top: 8px solid rgba(0, 0, 0, .8); } -.cor_text{ - width: 200px; - padding:0 6px; - height:auto; + +.cor_text { + width: 212px; + padding: 0 6px; + height: auto; background: rgba(0, 0, 0, .8); line-height: 40px; border-radius: 4px; position: absolute; right: -98px; top: 26px; - color:#ffffff; + color: #ffffff; } -.cor_text::before{ + +.cor_text::before { content: ''; display: block; position: absolute; @@ -125,20 +145,23 @@ a{ bottom: -16px; border: 20px solid transparent; border: 8px solid transparent; - border-top: 8px solid rgba(0, 0, 0, .8); + border-top: 8px solid rgba(0, 0, 0, .8); } -.core_icon{ + +.core_icon { position: absolute; - right:-18px; - width:20px; - height:20px; + right: -18px; + width: 20px; + height: 20px; cursor: pointer; } -.ran_adrress{ - width:80px; - height:22px; + +.ran_adrress { + width: 80px; + height: 22px; } -.cn_adrress{ - width:90px; - height:22px; + +.cn_adrress { + width: 90px; + height: 22px; }
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.ts index 6d477e4a..04c28d7a 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.ts @@ -1,90 +1,105 @@ -import { Component, OnInit, Input } from '@angular/core'; +import { Component, OnInit, Input } from "@angular/core"; import { NzModalService, NzMessageService } from "ng-zorro-antd"; -import { SlicingTaskServices } from '.././../../../../../core/services/slicingTaskServices'; +import { SlicingTaskServices } from ".././../../../../../core/services/slicingTaskServices"; import { NsiModelComponent } from "../../nsi-management/nsi-model/nsi-model.component"; @Component({ - selector: 'app-slicing-business-model', - templateUrl: './slicing-business-model.component.html', - styleUrls: ['./slicing-business-model.component.less'] + selector: "app-slicing-business-model", + templateUrl: "./slicing-business-model.component.html", + styleUrls: ["./slicing-business-model.component.less"], }) export class SlicingBusinessModelComponent implements OnInit { + constructor( + private myhttp: SlicingTaskServices, + private modalService: NzModalService, + private message: NzMessageService + ) {} - constructor( - private myhttp: SlicingTaskServices, - private modalService: NzModalService, - private message: NzMessageService - ) { - } + @Input() businessId; + @Input() outerData; + businessRequirement: any[]; + NSTinfo: any[] = []; + nsiInfo: any[] = []; + taskModel: boolean = false; + isSpinning: boolean = true; + status: string = ""; + businessDetailInfo: any = {}; + rantext: string = "RAN Network Edge IP address"; + isshowcore: boolean = false; + isshowran: boolean = false; + ngOnInit() { + this.status = this.outerData.orchestration_status; + this.getDetail(); + } + detailFn(flag, form) { + this.rantext = + form == "ran" + ? "RAN Network Edge IP address" + : "Core Network Edge IP address"; + if (form == "ran") { + this.isshowran = !this.isshowran; + } else { + this.isshowcore = !this.isshowcore; + } + } + getDetail() { + this.myhttp.getSlicingBusinessDetail(this.businessId).then((res) => { + this.isSpinning = false; + const { + business_demand_info, + business_demand_info: { coverage_area_ta_list }, + nst_info, + nsi_info, + connection_link: { + an_slice_task_info, + cn_slice_task_info, + tn_bh_slice_task_info, + }, + } = res.result_body; + const connect_info = { + an_ip_adrress: an_slice_task_info.ip_adrress, + an_interface_id: an_slice_task_info.interface_id, + an_nextHop_info: an_slice_task_info.nextHop_info, + cn_interface_id: cn_slice_task_info.interface_id, + cn_ip_adrress: cn_slice_task_info.ip_adrress, + cn_nextHop_info: cn_slice_task_info.nextHop_info, + max_bandWidth: tn_bh_slice_task_info.max_bandWidth, + link_type: tn_bh_slice_task_info.link_type, + lantency: tn_bh_slice_task_info.lantency, + }; + this.businessDetailInfo = connect_info; - @Input() businessId; - @Input() outerData; - businessRequirement: any[]; - NSTinfo: any[] = []; - nsiInfo: any[] = []; - taskModel: boolean = false; - isSpinning: boolean = true; - status: string = ""; - businessDetailInfo : any = {} - rantext: string = "RAN Network Edge IP address"; - isshowcore: boolean = false; - isshowran: boolean = false; - ngOnInit() { - this.status = this.outerData.orchestration_status - this.getDetail() - } - detailFn(flag,form){ - this.rantext = form =='ran'? "RAN Network Edge IP address" : "Core Network Edge IP address"; - if(form =='ran'){ - this.isshowran = !this.isshowran - }else{ - this.isshowcore = !this.isshowcore - } - } - getDetail() { - this.myhttp.getSlicingBusinessDetail(this.businessId).then(res => { - this.isSpinning = false; - const { business_demand_info, business_demand_info: { coverage_area_ta_list }, nst_info, nsi_info ,connection_link: { an_slice_task_info,cn_slice_task_info,tn_bh_slice_task_info }} = res.result_body; - const connect_info = { - an_ip_adrress: an_slice_task_info.ip_adrress, - an_interface_id: an_slice_task_info.interface_id, - an_nextHop_info: an_slice_task_info.nextHop_info, - cn_interface_id: cn_slice_task_info.interface_id, - cn_ip_adrress: cn_slice_task_info.ip_adrress, - cn_nextHop_info: cn_slice_task_info.nextHop_info, - max_bandWidth: tn_bh_slice_task_info.max_bandWidth, - link_type: tn_bh_slice_task_info.link_type, - lantency: tn_bh_slice_task_info.lantency - } - this.businessDetailInfo = connect_info - - business_demand_info.area = coverage_area_ta_list.map(item => { - item = item.split(';').join('-'); - return item - }); - // area : Front-end analog data - let area = ["Haidian District;Beijing;Beijing", "Xicheng District;Beijing;Beijing", "Changping District;Beijing;Beijing"].map(item => { - item = item.split(';').join(' - '); - return item - }); - this.businessRequirement = [{ ...business_demand_info, area }]; - this.NSTinfo = [nst_info]; - console.log('ngs',this.NSTinfo) - if (nsi_info.nsi_id !== null) { - this.nsiInfo = [nsi_info]; - } - }) - } - showdetail(data) { - const nsiModal = this.modalService.create({ - nzTitle: "Detail", - nzContent: NsiModelComponent, - nzWidth: "70%", - nzOkText: null, - nzCancelText: null, - nzComponentParams: { - nsiId: data.nsi_id - } - }); - } + business_demand_info.area = coverage_area_ta_list.map((item) => { + item = item.split(";").join("-"); + return item; + }); + // area : Front-end analog data + let area = [ + "Haidian District;Beijing;Beijing", + "Xicheng District;Beijing;Beijing", + "Changping District;Beijing;Beijing", + ].map((item) => { + item = item.split(";").join(" - "); + return item; + }); + this.businessRequirement = [{ ...business_demand_info, area }]; + this.NSTinfo = [nst_info]; + console.log("ngs", this.NSTinfo); + if (nsi_info.nsi_id !== null) { + this.nsiInfo = [nsi_info]; + } + }); + } + showdetail(data) { + const nsiModal = this.modalService.create({ + nzTitle: "Detail", + nzContent: NsiModelComponent, + nzWidth: "70%", + nzOkText: null, + nzCancelText: null, + nzComponentParams: { + nsiId: data.nsi_id, + }, + }); + } } |