From d85c34f8701efd21b2189380afb12ba94e193d9e Mon Sep 17 00:00:00 2001 From: wangyuerg Date: Fri, 12 Mar 2021 09:37:57 +0800 Subject: feat:Add a hint Signed-off-by: wangyuerg Change-Id: I569a0776ccb3e225079b8b62d552c43a2d375288 Issue-ID: USECASEUI-527 --- .../app/mock/json/getSlicingBusinessDetail.json | 51 ++++++-- .../slicing-business-model.component.html | 32 ++--- .../slicing-business-model.component.less | 132 ++++++++++++--------- .../slicing-business-model.component.ts | 50 +++----- .../subnet-params-model.component.html | 2 +- 5 files changed, 150 insertions(+), 117 deletions(-) (limited to 'usecaseui-portal/src/app') diff --git a/usecaseui-portal/src/app/mock/json/getSlicingBusinessDetail.json b/usecaseui-portal/src/app/mock/json/getSlicingBusinessDetail.json index 2ff453f0..e1dd6162 100644 --- a/usecaseui-portal/src/app/mock/json/getSlicingBusinessDetail.json +++ b/usecaseui-portal/src/app/mock/json/getSlicingBusinessDetail.json @@ -45,17 +45,46 @@ "nsi_type": "eMBB", "nsi_orchestration-status": "activated" }, - "tn_bh_slice_task_info":{ - "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" + "connection_link":{ + "an_slice_task_info": { + "suggestNssiId": null, + "suggestNSSIName": null, + "progress": null, + "status": null, + "statusDescription": null, + "sliceProfile": null, + "scriptName": null, + "enableNSSISelection": null, + "ip_adrress": "10.2.3.4.5", + "interface_id": "vlan ID", + "nextHop_info": "1111" + }, + "cn_slice_task_info": { + "suggestNssiId": null, + "suggestNSSIName": null, + "progress": null, + "status": null, + "statusDescription": null, + "sliceProfile": null, + "scriptName": null, + "enableNSSISelection": null, + "ip_adrress":"10.5.6.4.5", + "interface_id": "vlan ID", + "nextHop_info": "1112" + }, + "tn_bh_slice_task_info": { + "suggestNssiId": null, + "suggestNSSIName": null, + "progress": null, + "status": null, + "statusDescription": null, + "scriptName": null, + "enableNSSISelection": null, + "sliceProfile": null, + "lantency":"ms", + "max_bandWidth": "Mbss", + "link_type": "sdsa" + } } } } \ 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.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 @@

- -

{{businessDetailInfo.anVersion}} - + *ngIf="businessDetailInfo.an_ip_adrress" + (mouseover)="detailFn(false,'ran')" (mouseleave)="detailFn(false,'ran')" />

  • - Vlan ID:{{businessDetailInfo.vLanText}} + Vlan ID:{{businessDetailInfo.an_interface_id}}

  • -

    {{businessDetailInfo.tnVersion}}

    +

    {{ businessDetailInfo.an_nextHop_info }}

    PE

  • -

    {{businessDetailInfo.mbps}} Mbps

    +

    {{ businessDetailInfo.max_bandWidth }} Mbps

    - {{businessDetailInfo.msText}} ms + {{ businessDetailInfo.lantency }} ms

    -

    Link Type:{{businessDetailInfo.linkType}}

    +

    Link Type:{{businessDetailInfo.link_type}}

  • -

    {{businessDetailInfo.tnEndVersion}}

    +

    {{businessDetailInfo.cn_nextHop_info}}

    @@ -79,7 +80,7 @@

  • - Vlan ID:{{businessDetailInfo.cnVlan}} + Vlan ID:{{businessDetailInfo.cn_interface_id}}

    • @@ -87,11 +88,12 @@

    - -

    {{businessDetailInfo.cnVersion}} - + *ngIf="businessDetailInfo.cn_ip_adrress" + (mouseover)="detailFn(true,'core')" (mouseleave)="detailFn(false,'core')" />

    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 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 index b496349d..ccc41184 100644 --- 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 @@ -63,7 +63,7 @@ {{val}} - action + {{connectionLinkTable.length!==0?'action':''}} -- cgit 1.2.3-korg