diff options
Diffstat (limited to 'usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management')
3 files changed, 109 insertions, 105 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 d90709f2..32443e8d 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 @@ -43,35 +43,36 @@ <p> <img src="../../../../../../../assets/images/an-img.png" class="anImg"/> </p> - <!-- <p *ngIf="isshowran" class="ran_text">{{rantext}}</p> --> - <p>{{businessDetailInfo.anVersion}} - <!-- <img src="../../../../../../../assets/images/ask-img.png" alt="" + <p *ngIf="isshowran" class="ran_text">{{rantext}}</p> + <p>{{businessDetailInfo.an_ip_adrress}} + <img src="../../../../../../../assets/images/ask-img.png" alt="" class="detail-icon" - (mouseover)="detailFn(false,'ran')" (mouseleave)="detailFn(false,'ran')" /></p> --> + *ngIf="businessDetailInfo.an_ip_adrress" + (mouseover)="detailFn(false,'ran')" (mouseleave)="detailFn(false,'ran')" /></p> </li> <li class="vLan-line"> <p > - Vlan ID:{{businessDetailInfo.vLanText}} + Vlan ID:{{businessDetailInfo.an_interface_id}} </p> <p [ngClass]="{'online-type':status=='activated','offline-type':status!=='activated'}"></p> </li> <li> - <p>{{businessDetailInfo.tnVersion}}</p> + <p class="fantask">{{ businessDetailInfo.an_nextHop_info }}</p> <p> <img src="../../../../../../../assets/images/tn-edge-img.png" class="tnImg"/> </p> <p>PE</p> </li> <li class="three-box" > - <p>{{businessDetailInfo.mbps}} Mbps</p> + <p>{{ businessDetailInfo.max_bandWidth }} Mbps</p> <p> - {{businessDetailInfo.msText}} ms + {{ businessDetailInfo.lantency }} ms </p> <p [ngClass]="{'online-type':status=='activated','offline-type':status!=='activated'}"></p> - <p class="">Link Type:{{businessDetailInfo.linkType}}</p> + <p class="">Link Type:{{businessDetailInfo.link_type}}</p> </li> <li> - <p>{{businessDetailInfo.tnEndVersion}}</p> + <p class="fantask">{{businessDetailInfo.cn_nextHop_info}}</p> <p> <img src="../../../../../../../assets/images/tn-edge-img.png" class="tnImg"/> </p> @@ -79,7 +80,7 @@ </li> <li class="vLan-line"> <p > - Vlan ID:{{businessDetailInfo.cnVlan}} + Vlan ID:{{businessDetailInfo.cn_interface_id}} </p> <p [ngClass]="{'online-type':status=='activated','offline-type':status!=='activated'}"></p> </li> @@ -87,11 +88,12 @@ <p> <img src="../../../../../../../assets/images/cn-cloud-img.jpg" class="cnCloud"/> </p> - <!-- <p *ngIf="isshowran" class="cor_text">{{rantext}}</p> --> - <p>{{businessDetailInfo.cnVersion}} - <!-- <img src="../../../../../../../assets/images/ask-img.png" alt="" + <p *ngIf="isshowcore" class="cor_text">{{rantext}}</p> + <p>{{businessDetailInfo.cn_ip_adrress}} + <img src="../../../../../../../assets/images/ask-img.png" alt="" class="core_icon" - (mouseover)="detailFn(true,'core')" (mouseleave)="detailFn(false,'core')" /> --> + *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 f3ecbe43..a22743b0 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 @@ -4,6 +4,9 @@ a{ text-decoration: none; } +.warp{ + width: 100%; +} .header{ display: flex; justify-content: space-between; @@ -11,10 +14,8 @@ a{ height: 40px; line-height: 40px; color:#000; - margin:10px 80px; -} -.head_cn{ - margin-right: 8px; + margin:10px 8%; + text-align: center; } .anImg{ width: 76px; @@ -22,11 +23,12 @@ a{ margin-top: 20px; } .list-box{ + width: 90%; display: flex; justify-content:center; align-items: center; text-align: center; - + margin:0 5%; } .list-box li{ position: relative; @@ -35,18 +37,17 @@ a{ clear: both; } .online-vlan{ - width: 100px; + flex:1; height: 1px; background: #000; } .online-type{ - width: 180px; height: 3px; background: #1DA57A; margin: 0 15px; } .offline-type{ - width: 180px; + height: 3px; background: #7e848a; margin: 0 15px; @@ -54,6 +55,7 @@ a{ .vLan-line{ text-align: center; top:-20px; + flex:1; } .tnImg{ width: 50px; @@ -61,61 +63,73 @@ a{ } .three-box{ text-align: center; + flex:1; top:-20px; } .cnCloud{ margin-left:10px; - width: 88px; + width: 68px; height: auto; margin-top: 20px; } -// .ran_text{ -// width: 200px; -// height:auto; -// background: rgba(0, 0, 0, .8); -// line-height: 40px; -// border-radius: 4px; -// position: absolute; -// right: -118px; -// top: 34px; -// color:#ffffff; -// z-index:99; -// } -// .detail-icon{ -// position: absolute; -// right: -26px; -// bottom:-2px; -// width:20px; -// height:20px; -// cursor: pointer; -// } -// .ran_text::before{ -// content: ''; -// display: block; -// position: absolute; -// right: 94px; -// bottom: -16px; -// border: 20px solid transparent; -// border: 8px solid transparent; -// border-top: 8px solid rgba(0, 0, 0, .8); -// } -// .cor_text{ -// width: 200px; -// height:auto; -// background: rgba(0, 0, 0, .8); -// line-height: 40px; -// border-radius: 4px; -// text-indent: 2em; -// position: absolute; -// right: -300px; -// top: -60px; -// color:#ffffff; -// } -// .core_icon{ -// position: absolute; -// right: 22px; -// bottom:-10px; -// width:20px; -// height:20px; -// cursor: pointer; -// }
\ No newline at end of file +.fantask{ + height: 20px; +} +.ran_text{ + width: 200px; + 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: -26px; + width:20px; + height:20px; + cursor: pointer; + } +.ran_text::before{ + content: ''; + display: block; + position: absolute; + right: 94px; + bottom: -16px; + border: 20px solid transparent; + border: 8px solid transparent; + border-top: 8px solid rgba(0, 0, 0, .8); +} +.cor_text{ + width: 200px; + height:auto; + background: rgba(0, 0, 0, .8); + line-height: 40px; + border-radius: 4px; + position: absolute; + right: -98px; + top: 20px; + color:#ffffff; +} +.cor_text::before{ + content: ''; + display: block; + position: absolute; + right: 94px; + bottom: -16px; + border: 20px solid transparent; + border: 8px solid transparent; + border-top: 8px solid rgba(0, 0, 0, .8); +} +.core_icon{ + position: absolute; + right:-10px; + + width:20px; + height:20px; + cursor: pointer; +}
\ 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 f48deea6..6d477e4a 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 @@ -27,49 +27,37 @@ export class SlicingBusinessModelComponent implements OnInit { status: string = ""; businessDetailInfo : any = {} rantext: string = "RAN Network Edge IP address"; - + isshowcore: boolean = false; isshowran: boolean = false; ngOnInit() { this.status = this.outerData.orchestration_status - console.log('status',this.status) this.getDetail() } detailFn(flag,form){ this.rantext = form =='ran'? "RAN Network Edge IP address" : "Core Network Edge IP address"; - this.isshowran = !this.isshowran + 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: { tn_bh_slice_task_info }} = res.result_body; - console.log(JSON.stringify(tn_bh_slice_task_info),11111) - // tn_bh_slice_task_info = {"suggestNssiId":null,"suggestNSSIName":null,"progress":null,"status":null,"statusDescription":null,"scriptName":null,"enableNSSISelection":null,"sliceProfile":null,"lantency":null,"max_bandWidth":null,"link_type":null} + 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 - this.businessDetailInfo = { - "suggestNssiId": '', - "suggestNSSIName": '11111', - "progress": 'active', - "status": 'active', - "statusDescription": 'p2p/mp2p', - "scriptName": '10.1.1.1', - "enableNSSISelection": '11', - "sliceProfile": '10.1.1.1', - "lantency": '10.2.3.4.5', - "max_bandWidth": '1111', - "link_type": '333' - } - // this.businessDetailInfo = { - // "anVersion":"10.2.3.4.5", - // "vLanText":"11111", - // "tnVersion":"10.0.1.1.1", - // "mbps":"11111", - // "msText":"11111", - // "linkType":"p2p/mp2p", - // "tnEndVersion":"10.1.1.1", - // "cnVlan":"11", - // "cnVersion":"1.1.2.3", - // "orchestration_status":"active" - // } business_demand_info.area = coverage_area_ta_list.map(item => { item = item.split(';').join('-'); return item |