Support NS Package Query for VF-C

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

3 files changed, 282 insertions, 80 deletions

diff --git a/usecaseui-portal/src/app/home/home.component.html b/usecaseui-portal/src/app/home/home.component.html
index c93d3f76..191c67ac 100644
--- a/usecaseui-portal/src/app/home/home.component.html
+++ b/usecaseui-portal/src/app/home/home.component.html
@@ -13,21 +13,31 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 -->
-<h3 class="title"> {{"Overall trend" | translate}}</h3>
-<hr>
+
+<!--<h3 class="title"> {{"Overall trend" | translate}}</h3>
+<hr> -->
 <div class="content">
   <div class="services">
     <h4>{{"SERVICES" | translate}}</h4>
-    <h3>{{serviceNumber}} <span>{{"services" | translate}}</span> </h3>
-    <p>{{serviceNumber}} {{"services has been created" | translate}}</p>
+    <!-- <h3>{{serviceNumber}} <span>{{"services" | translate}}</span> </h3>
+    <p>{{serviceNumber}} {{"services has been created" | translate}}</p> -->
     <app-pie [initData]="serviceChartInit" [chartData]="serviceChartData"></app-pie>
-    <p class="tip">View the details</p>
+    <div>
+      <h5> {{serviceNumber}} <span>cutomers and</span> {{serviceNumber}} <span>service intance</span></h5>
+    </div>
+    <div class="details">
+      <li> <div class="detailstoplin" *ngFor="let item of userdata"> <div>{{item.name}}</div> <div> <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData"></app-bar></div> <div>{{item.value1}}/{{item.value2}}</div></div> </li>
+    </div>
+    <p class="tip">View Details</p>
   </div>
-
   <div class="rightcontent">
     <div class="rt-content">
+      <div class="alarm">
+        <h4>{{"ALARM" | translate}}</h4>
+        <app-pie [initData]="alarmChartInit" [chartData]="alarmChartData"></app-pie>
+      </div>
       <div class="poerformance">
-        <h4>{{"PERFORMANCE" | translate}}</h4>
+        <h4>{{"DEVICES" | translate}}</h4>
         <div class="pfVnf">
           <h3 class="pfVnfNum">{{performanceVnfNum}}</h3>
           <p>Performance VNF</p>
@@ -39,14 +49,9 @@
           <img src="./assets/images/VM.png" alt="VM/PM">
         </div>
       </div>
-      <div class="alarm">
-        <h4>{{"Alarm" | translate}}</h4>
-        <app-pie [initData]="alarmChartInit" [chartData]="alarmChartData"></app-pie>
-      </div>
     </div>
-
     <div class="rb-content">
-      <h4>{{"Alarm" | translate}}</h4>
+      <h4>{{"VM PERFORMANCE" | translate}}</h4>
       <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomRight'">
         <button nz-button nz-dropdown><span>{{sourceNameSelected}}</span> <i class="anticon anticon-down"></i></button>
         <ul nz-menu>
@@ -58,6 +63,4 @@
       <app-line [initData]="alarmLineChartInit" [chartData]="alarmLineChartData"></app-line>
     </div>
   </div>
-
 </div>
-
diff --git a/usecaseui-portal/src/app/home/home.component.less b/usecaseui-portal/src/app/home/home.component.less
index 89abafa6..750f5a32 100644
--- a/usecaseui-portal/src/app/home/home.component.less
+++ b/usecaseui-portal/src/app/home/home.component.less
@@ -1,14 +1,14 @@
-.title {
-    font: 700 18px/18px "思源黑体";
-    color: #4c5e70;
-    margin-bottom: 18px; 
-}
-hr {
-    border: none;
-    height: 2px;
-    background-color: #dce1e7;
-    margin-bottom: 20px;
-}
+// .title {
+//     font: 700 18px/18px "思源黑体";
+//     color: #4c5e70;
+//     margin-bottom: 18px; 
+// }
+// hr {
+//     border: none;
+//     height: 2px;
+//     background-color: #dce1e7;
+//     margin-bottom: 20px;
+// }
 .content {
     .services {
         float: left;
@@ -18,9 +18,9 @@ hr {
         border-radius: 5px;
         padding: 28px 22px;
         h4 {
-            font: 600 16px/16px "Arial";
-            color: #3d4d65;
-            margin-bottom: 58px;
+            font: 600 16px/16px "Arial Bold";
+            color: #3F9CFF;
+            margin-bottom: 20px;
         }
         h3 {
             font: 400 48px/48px "Arial";
@@ -30,18 +30,67 @@ hr {
                 font-size: 14px;
             }
         }
+        h5 {
+            font: 500 16px/16px "ArialMT";
+            color:#3F9CFF;
+            margin: -2em 0 1em 0 ;
+            span {
+                font-size: 12px;
+                font-family: "Arial";
+                color:rgba(60,79,140,1);
+            }
+            span:first-child {
+                padding: 0  4PX  0 4px;
+            }
+            span:last-child {
+                padding-left: 4px;
+            }
+           
+        }
         p {
             font: 400 14px/14px "Arial";
             color: #54657e;
             text-align: center;
             margin-bottom: 48px;
         }
+        .details {
+            li {
+                border-bottom:0.5px solid rgba(237,237,237,1);
+                border-radius:4px;
+                line-height: 45px;
+                font-size: 14px;
+                color: #3C4F8C;
+                font-family:"ArialMT";
+                .detailstoplin {
+                    width: 100%;
+                    height: 50px;
+                    border-top: 0.5px solid #ededed;
+                    border-radius: 4px;
+                    div:first-child{
+                        width: 20%;
+                        float: left;
+                    }
+                    div:nth-child(2){
+                        width: 65%;
+                        float: left;
+                    }
+                    div:last-child {
+                        width: 13%;
+                        float: right;
+                        font-size:12px;
+                        font-weight: 500;
+                        color:rgba(60,79,140,0.5);
+                    }
+                }
+            } 
+        }
         .tip {
+            width: 110px;
             background-color: #eceff4;
-            color: #3d4d65;
+            color: #3C4F8C;
             font-size: 16px;
-            margin: 0 20px;
-            height: 35px;
+            float: right;
+            margin-top: 53px;
             line-height: 35px;
             border-radius: 5px;
         }
@@ -54,34 +103,44 @@ hr {
             height: 220px;
             margin-bottom: 18px;
             .poerformance {
-                float: left;              
+                float: left;  
+                margin-left: 2%;            
                 background-color: #fff;
                 height: 100%;
                 width: 50%;
                 border-radius: 5px;
                 padding: 28px 26px;
+                .pfVmPm {
+                    h3 {
+                        color:#BD57E5;
+                    }
+                }
                 h4 {
-                    font: 600 16px/16px "Arial";
-                    color: #3d4d65;
+                    font: 600 16px/16px "Arial Bold";
+                    color: #3F9CFF;
                     margin-bottom: 34px;  
                 }
+                
                 div {
                     height: 57px;
                     position: relative;
                     margin-bottom: 10px;
                     h3 {
                         font: 600 25px/25px "Arial";
-                        color: #3d4d65;
+                        color: #2F6AEF;
                         margin-bottom: 10px;
+                        padding-left: 50%;
                     }
                     p {
                         font: 400 12px/12px "Arial"; 
-                        color: #54657e
+                        color:rgba(60,79,140,0.5);
+                        padding-left: 50%;
+                        
                     }
                     img {
                         position: absolute;
                         top: 0;
-                        right: 0;
+                        left: 0;
                     }
                 }
             }
@@ -90,14 +149,14 @@ hr {
                 background-color: #fff;
                 height: 100%;
                 width: 48%;
-                margin-left: 2%;
+                
                 border-radius: 5px;
                 position: relative;
                 padding: 28px 26px;
                 h4 {
                     position: absolute;
-                    font: 600 16px/16px "Arial";
-                    color: #3d4d65; 
+                    font: 600 16px/16px "Arial Bold";
+                    color: #3F9CFF;
                 }
             }
         }
@@ -108,8 +167,8 @@ hr {
             padding: 24px 30px;
             position: relative;
             h4 {
-                font: 600 16px/16px "Arial";
-                color: #3d4d65; 
+                font: 600 16px/16px "Arial Bold";
+                color: #3F9CFF;
             }
             nz-dropdown {
                 position: absolute;
diff --git a/usecaseui-portal/src/app/home/home.component.ts b/usecaseui-portal/src/app/home/home.component.ts
index e893453e..29211810 100644
--- a/usecaseui-portal/src/app/home/home.component.ts
+++ b/usecaseui-portal/src/app/home/home.component.ts
@@ -20,6 +20,7 @@ export class HomeComponent implements OnInit {
     this.getHomePerformanceData();
     this.getHomeAlarmData();
     this.getHomeAlarmChartData();
+    this.getHomeServiceBarData();
   }
   
 
@@ -27,6 +28,7 @@ export class HomeComponent implements OnInit {
   serviceNumber:number = 0;
   serviceChartData:Object;
   serviceChartInit:Object = {
+  backgroundColor: '#fff',
     height: 300,
     option:{
       legend: {
@@ -35,21 +37,22 @@ export class HomeComponent implements OnInit {
         bottom: '0px',
         data: ['Active','Closed']
       },
-      color:["#3fa8eb","#1abb9b","#a4ead7"],
-      series:[{
-        name:"服务信息",
-        radius : ['45%','65%'],
-        avoidLabelOverlap: false,
-        label:{
-          normal:{
-            show: false,
-            position: 'center'
-          },
-          emphasis: {
-            show: true,
-            formatter:'{b}\n{c}',
-            textStyle: {
-                fontSize: '20',
+      color: ["#7AC0EF", "#6A86D8", "#748CDC", "#7277D4", "#7067CE", "#B9B0F7", "#7DCFF5"],
+      series: [
+        {
+          name: "服务信息",
+          radius: ['50%', '70%'],
+          avoidLabelOverlap: false,
+          label: {
+            normal: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              show: true,
+              formatter: '{b}\n{c}',
+              textStyle: {
+                fontSize: '18',
                 fontWeight: 'bold'
             }
           }
@@ -57,9 +60,19 @@ export class HomeComponent implements OnInit {
         labelLine: {
           normal: {
               show: false
-          }
-        },        
-      }]
+            }
+          },
+          itemStyle: {
+            normal: {
+              borderWidth: 4,
+              borderColor: "#fff"
+            },
+            emphasis: {
+              borderWidth: 0
+            }
+          },
+        }
+      ]
     }
   };
   // gethomeServiceData
@@ -93,25 +106,56 @@ export class HomeComponent implements OnInit {
   // alarm饼图
   alarmChartData:Object;
   alarmChartInit:Object = {
-    height: 164,
+    height: 180,
     option:{
       legend: {
         orient: 'vertical',
         left: '0px',
         bottom: '0px',
-        data: ['Active','Closed']
+        itemWidth: 10,
+        itemHeight: 10,
+        textStyle: {
+          color: "#3C4F8C"
+        },
+        data: ['Active', 'Fixed']
       },
-      color:["#fb6e6e","#526b75"],
-      series:[{
-        name:"告警信息",
-        radius : '55%',
-        label:{
-          normal:{
+      color: [
+        {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [{
+            offset: 0, color: '#FB93C2' // 0% 处的颜色
+          }, {
+            offset: 1, color: '#FB7788' // 100% 处的颜色
+          }],
+          globalCoord: false // 缺省为 false
+        }, {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [{
+            offset: 0, color: '#A6BFE4' // 0% 处的颜色
+          }, {
+            offset: 1, color: '#7A8BAE' // 100% 处的颜色
+          }],
+          globalCoord: false // 缺省为 false
+        }],
+      series: [{
+        name: "告警信息",
+        radius: '55%',
+        label: {
+          normal: {
             show: false,
           },
           emphasis: {
             show: true,
-            formatter:'{b}\n{c},{d}%',
+            formatter: '{b}\n{c},{d}%',
+            color: "#3C4F8C"
           }
         }
       }]
@@ -122,7 +166,7 @@ export class HomeComponent implements OnInit {
       .subscribe((data)=>{
         this.alarmChartData ={
           series:[{
-            data:[{name:"Active",value:data[0]},{name:"Closed",value:data[1]}]
+            data: [{ name: "Active", value: data[0] }, { name: "Fixed", value: data[1] }]
           }]
         };
       })
@@ -135,7 +179,7 @@ export class HomeComponent implements OnInit {
     option:{
       legend: {
         bottom: '0px',
-        data: ['All','Active','Closed']
+        data: ['CPU', 'Memory', 'Disk']
       },
       xAxis:{
         data:["2018-09-10 ","2018-09-11","2018-09-12","2018-09-13","2018-09-14",
@@ -144,23 +188,119 @@ export class HomeComponent implements OnInit {
       },
       series : [
         {
-            name: 'All',
-            type: 'line',
-            data:[30,45,34,35,43,56,36,53,42,45,44,35,32]
+          name: 'CPU',
+          type: 'line',
+          itemStyle: {
+            color: "#70ACEC"
+          },
+          data: [30, 45, 34, 35, 43, 56, 36, 53, 42, 45, 44, 35, 32]
         },
         {
-            name: 'Active',
-            type: 'line',
-            data:[10,23,24,22,14,15,32,12,12,32,14,23,23]
+          name: 'Memory',
+          type: 'line',
+          itemStyle: {
+            color: "#3BCD79"
+          },
+          data: [10, 23, 24, 22, 14, 15, 32, 12, 12, 32, 14, 23, 23]
         },
         {
-          name: 'Closed',
+          name: 'Disk',
           type: 'line',
-          data:[20,23,14,12,34,25,22,42,52,35,34,13,13]
+          itemStyle: {
+            color: "#FDC288"
+          },
+          data: [20, 23, 14, 12, 34, 25, 22, 42, 52, 35, 34, 13, 13]
         }
       ]
     }
   };
+  
+   // services进度条
+  servicesBarChartData: Object;
+  serviceBarChartInit: Object = {
+    option: {
+      xAxis: {
+        // data: [],
+        type: 'value',
+        show: false,
+        min: 0,
+        max: 80,
+        axisTick: {
+          show: false
+        },
+      },
+      series: [{
+        type: 'bar',
+        name: 'a',
+        silent: true,
+        animation: false,
+        data: [80],
+        stack: 'income',
+        barWidth: 12,
+        itemStyle: {
+          normal: {
+            color: '#7AC0EF',
+            barBorderRadius: [10, 10, 10, 10]
+          }
+        },
+      }, {
+        type: 'bar',
+        name: '',
+        animation: false,
+        silent: true,
+        data: [60],
+        tooltip: {
+          show: false
+        },
+        stack: 'income',
+        barWidth: 12,
+        itemStyle: {
+          normal: {
+            color: '#fff',
+            barBorderRadius: [10, 10, 10, 10]
+          }
+        },
+        label: {
+          normal: {
+            show: false,
+          }
+        },
+      }
+      ]
+    }
+  }
+  userdata;
+  getHomeServiceBarData() {
+    this.myhttp.getHomeServiceBarData()
+      .subscribe((data) => {
+        this.userdata = data.customerServiceList;
+        let Val1;
+        let Val2;
+        let MIN: number = 0;
+        let MAX: number = Val1;
+        Val1 = data.customerServiceList[1].value1;
+        Val2 = data.customerServiceList[1].value2;
+        if (Val1 > Val2) {
+          MIN = 0;
+          MAX = Val1;
+        } else {
+          MIN = Val1 - Val2;
+          MAX = Val2;
+        }
+        this.servicesBarChartData = {
+          xAxis: {
+            min: MIN,
+            max: MAX,
+          },
+          series: [
+            { data: [Val1] },
+            { data: [Val1 - Val2] },
+          ]
+        }
+      }, (err) => {
+        console.log(err);
+      })
+  }
   // sourceName筛选框
   sourceNameList = ['performanceNameOne'];
   sourceNameSelected = null;