summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/views
diff options
context:
space:
mode:
authorwangyuerg <wangyuerg@chinamobile.com>2021-03-18 14:05:27 +0800
committerwangyuerg <wangyuerg@chinamobile.com>2021-03-18 14:06:39 +0800
commitb5cfca87aa30d0207ef32d944cc447ed4c580b29 (patch)
treec0c9dca7194163966400eb05fa196b56fee21c63 /usecaseui-portal/src/app/views
parentae329058b29ef8e4cb6ed0132f7e949a5269a51f (diff)
fix: fix the display of ip tooltip
Signed-off-by: wangyuerg <wangyuerg@chinamobile.com> iChange-Id: Id826511401a13bb0b8b1303acbea5ba23df948db Issue-ID: USECASEUI-527 Change-Id: Ib81c195438160e2ec0df7fed8557223c12c9f001
Diffstat (limited to 'usecaseui-portal/src/app/views')
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html36
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.less159
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.ts177
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,
+ },
+ });
+ }
}