fix: fix the display of ip tooltip

Signed-off-by: wangyuerg <wangyuerg@chinamobile.com>
iChange-Id: Id826511401a13bb0b8b1303acbea5ba23df948db
Issue-ID: USECASEUI-527
Change-Id: Ib81c195438160e2ec0df7fed8557223c12c9f001

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,
+			},
+		});
+	}
 }