feat:Add a hint

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

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