Fix VNF Performance Query Bugs

Change-Id: I54894af1b0082c4e107a80531179801eddc6a547
Issue-ID: USECASEUI-230
Signed-off-by: zhangab <zhanganbing@chinamobile.com>

3 files changed, 75 insertions, 39 deletions

diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html
index 2899b6a6..f151ef33 100644
--- a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html
+++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html
@@ -1,5 +1,5 @@
 <!--
-    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
@@ -14,11 +14,10 @@
     limitations under the License.
 -->
 <h3 class="title">
-    <span (click)="performanceShow()" style="cursor:pointer;">Performance VNF</span> 
-    <span (click)="graphicShow()" *ngIf="graphicshow">> Graphic list </span> 
-    <span *ngIf="detailshow">> Details </span> 
+    <span (click)="performanceShow()" style="cursor:pointer;" *ngIf="graphicshow" >Performance VNF</span> 
+    <span (click)="graphicShow()" *ngIf="graphicshow">/ Graphic list </span> 
+    <span *ngIf="detailshow">/ Details </span> 
 </h3>
-<hr>
 <div class="select" [@showHideAnimate]="state">
     <span>Source Name: </span>
     <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
@@ -29,15 +28,22 @@
             </li>
         </ul>
     </nz-dropdown>
-    <button class="search" nz-button [nzType]="'primary'" (click)="getperformanceSsourceNames()"><i class="anticon anticon-search"></i><span>Search</span></button>
+    <button class="search" nz-button [nzType]="'primary'"><i class="anticon anticon-search"></i><span>Search</span></button>
+    <!-- <button class="search" nz-button [nzType]="'primary'" (click)="getperformanceSsourceNames()"><i class="anticon anticon-search"></i><span>Search</span></button> -->
 </div>
 <div class="content" [@showHideAnimate]="state">
     <div class="vnfs">
         <div class="vnf" *ngFor="let item of totalRecords">
-            <img src="../../../assets/images/VNF3.png" title="VF" (click)="graphicShow2(item)">
-            <h3>{{item}}</h3>
+            <img src="../../../assets/images/vnf01.png" title="VNF" (click)="graphicShow2(item)">
+            <!-- <h3>{{item.name}}</h3> -->
             <div class="intro"> 
-               {{item}}
+              {{item.name}}
+            </div>
+        </div>
+        <div class="vnf" *ngFor="let item of totalpnfs">
+            <img src="../../../assets/images/pnf01.png" alt="PNF" (click)="graphicShow2(item)">
+            <div class="intro"> 
+                {{item.name}}
             </div>
         </div>
         <div class="empty" *ngFor="let empty of emptys"></div>   
diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less
index 6cc5b0fc..ed562d2d 100644
--- a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less
+++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less
@@ -1,20 +1,19 @@
 .title {
-    font: 700 18px/18px "思源黑体";
-    color: #4c5e70;
-    margin-bottom: 18px; 
-}
-hr {
-    border: none;
-    height: 2px;
-    background-color: #dce1e7;
-    margin-bottom: 20px;
+    font: 500 14px/18px "ArialMT";
+    color: #3C4F8C;
+    padding: 20px 0 0 20px;
 }
 .select {
-    margin-bottom: 20px;
+    height: 70px;
+    background-color: #fff;
+    margin-top: -30px;
+    padding-left: 20px;
+    box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06);
+    line-height: 5;
     span {
         display: inline-block;
-        font: 700 14px "Arial";
-        color: #4c5e70;
+        font: 400 14px "ArialMT";
+        color: #3C4F8C;
     }
     nz-dropdown {
         vertical-align: middle;
@@ -24,9 +23,9 @@ hr {
         button {
             width: 165px;
             height: 30px;
-            background-color: #eceff4;
+            background-color: #fff;
             text-align: left;
-            border-color: #9fa9ab;
+            border-color: #E5E8F2;
             span {
                 font-weight: 400;
                 display: inline-block;
@@ -41,10 +40,14 @@ hr {
                 right: 10px;
             }
         }
+        :hover {
+            border-color: #48C6EF;
+        }
         //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的
     }
     .search {
         margin-left: 20px;
+        margin-top: -6px;
         vertical-align: middle;       
         height: 30px;
         padding: 0 10px;
@@ -56,7 +59,7 @@ hr {
 }
 
 .content {
-    background-color: #fff;
+    // background-color: #fff;
     border-radius: 5px;
     padding: 12px;
     .vnfs {
@@ -65,6 +68,7 @@ hr {
         justify-content: space-around;
         .vnf {
             // width: 180px;
+            background-color: #fff;
             width: 18%;
             height: 200px;
             margin: 5px;
@@ -74,8 +78,9 @@ hr {
             cursor: pointer;
             transition: all 0.3s linear;
             &:hover {
-                background-color: #f5f5f5; 
-                transform: scale(1.02);       
+                background-color: #fff; 
+                transform: scale(1.02); 
+                color: #3F9CFF;      
             }
             h3 {
                 font-size: 14px;
@@ -89,6 +94,7 @@ hr {
                 text-align: left;
                 font-size: 12px;
                 overflow: hidden;
+                padding-top: 25px;
                 display: -webkit-box;
                 -webkit-line-clamp: 3;
                 -webkit-box-orient: vertical;
diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts
index e52e19d2..05719155 100644
--- a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts
+++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts
@@ -1,5 +1,5 @@
 /*
-    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
@@ -39,7 +39,29 @@ export class PerformanceVnfComponent implements OnInit {
 
   ngOnInit() {
     this.getqueryAllSourceNames();
-    this.getperformanceSsourceNames();
+    // this.getperformanceSsourceNames();
+    let _this = this;
+    setTimeout(function(){
+      _this.totalRecords = [    
+        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"}
+      ];
+      _this.totalpnfs = [
+        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"}
+      ]
+      _this.emptys = new Array(12-_this.totalRecords.length);
+    },300)
   }
 
 
@@ -62,21 +84,23 @@ export class PerformanceVnfComponent implements OnInit {
   }
   // vnfs data
   totalRecords = [];
+  totalpnfs = [];
   //Fill the box
   emptys = []; 
 
-  getperformanceSsourceNames() {
-    this.myhttp.getperformanceSourceNames(this.currentPage, this.pageSize, this.sourceName).subscribe((data) => {
-      this.totalRecords = data.totalRecords;
-      this.vnfsdataTotal = data.names;
-      if (Number.isInteger(this.totalRecords.length / 5)) {
-        this.emptys = new Array(0);
-      } else {
-        this.emptys = new Array(5 - this.totalRecords.length % 5);
-      }
-    })
-  }
+  // getperformanceSsourceNames() {
+  //   this.myhttp.getperformanceSourceNames(this.currentPage, this.pageSize, this.sourceName).subscribe((data) => {
+  //     this.totalRecords = data.totalRecords;
+  //     this.vnfsdataTotal = data.names;
+  //     if (Number.isInteger(this.totalRecords.length / 5)) {
+  //       this.emptys = new Array(0);
+  //     } else {
+  //       this.emptys = new Array(5 - this.totalRecords.length % 5);
+  //     }
+  //   })
+  // }
   //Detail page title display
+  isHidden = true;
   graphicshow = false;
   detailshow = false;
   // Show hidden animation