Home multilingual translation

Change-Id: Ib5ee6b49522edc10784913193d330828b84f79a4
Issue-ID: USECASEUI-211
Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>

3 files changed, 132 insertions, 55 deletions

diff --git a/usecaseui-portal/src/app/home/home.component.html b/usecaseui-portal/src/app/home/home.component.html
index 72fe7f3d..6c79ce7b 100644
--- a/usecaseui-portal/src/app/home/home.component.html
+++ b/usecaseui-portal/src/app/home/home.component.html
@@ -17,41 +17,46 @@
 <!--<h3 class="title"> {{"Overall trend" | translate}}</h3>
 <hr> -->
 <div class="content" style="padding: 20px 20px;">
-  <div class="services">
-    <h4>{{"SERVICES" | translate}}</h4>
-    <!-- <h3>{{serviceNumber}} <span>{{"services" | translate}}</span> </h3>
-    <p>{{serviceNumber}} {{"services has been created" | translate}}</p> -->
-    <app-pie [initData]="serviceChartInit" [chartData]="serviceChartData"></app-pie>
-    <div>
-      <h5> {{serviceNumber}} <span>cutomers and</span> {{serviceNumber}} <span>service intance</span></h5>
+  <div style="float: left;width:30%;height:96vh">
+    <div class="services">
+      <h4>{{"i18nTextDefine_SERVICES" | translate}}</h4>
+      <!-- <h3>{{serviceNumber}} <span>{{"services" | translate}}</span> </h3>
+      <p>{{serviceNumber}} {{"services has been created" | translate}}</p> -->
+      <app-pie [initData]="serviceChartInit" [chartData]="serviceChartData"></app-pie>
+      <div>
+        <h5><span>{{"i18nTextDefine_Total" | translate}}:</span> {{serviceNumber}} <span>{{"i18nTextDefine_cutomers_and" | translate}}</span> {{serviceNumber}} <span>{{"i18nTextDefine_service_intance" | translate}}</span></h5>
+      </div>
+      <p class="tip">
+        <a href="#" style="color:#3C4F8C">{{"i18nTextDefine_ViewDetails" | translate}}</a>
+      </p>
     </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 class="PACKAGE" style="height: 37%;margin-top: 3%">
+      <h4 style="margin-bottom: 50px">{{"i18nTextDefine_PACKAGE" | translate}}</h4>
+      <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">
+        <a href="#" style="color:#3C4F8C">{{"i18nTextDefine_ViewDetails" | translate}}</a>
+      </p>
     </div>
-    <p class="tip">View Details</p>
   </div>
-  <div class="rightcontent">
-    <div class="rt-content">
+  <div class="rightcontent" style="height: 96vh">
+    <div class="rt-content" >
       <div class="alarm">
-        <h4>{{"ALARM" | translate}}</h4>
+        <h4>{{"i18nTextDefine_ALARM" | translate}}</h4>
         <app-pie [initData]="alarmChartInit" [chartData]="alarmChartData"></app-pie>
+        <p class="alarm-name"> {{"i18nTextDefine_VNF_Alarm" | translate}} </p>
       </div>
       <div class="poerformance">
-        <h4>{{"DEVICES" | translate}}</h4>
-        <div class="pfVnf">
-          <h3 class="pfVnfNum">{{performanceVnfNum}}</h3>
-          <p>Performance VNF</p>
-          <img src="./assets/images/VNF.png" alt="VNF">
-        </div>
-        <div class="pfVmPm">
-          <h3 class="pfVmPmNum">{{performanceVmNum}}</h3>
-          <p>Performance VM/PM</p>
-          <img src="./assets/images/VM.png" alt="VM/PM">
-        </div>
+        <app-pie [initData]="VMAlarmChartInit" [chartData]="VMAlarmChartData"></app-pie>
+        <p class="alarm-name"> {{"i18nTextDefine_VM_Alarm" | translate}} </p>
+        <p class="tip">
+          <a href="#" style="color:#3C4F8C">{{"i18nTextDefine_ViewDetails" | translate}}</a>
+        </p>
       </div>
     </div>
     <div class="rb-content">
-      <h4>{{"VM PERFORMANCE" | translate}}</h4>
+      <h4>{{"i18nTextDefine_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>
diff --git a/usecaseui-portal/src/app/home/home.component.less b/usecaseui-portal/src/app/home/home.component.less
index 9684fec7..6d57fbf2 100644
--- a/usecaseui-portal/src/app/home/home.component.less
+++ b/usecaseui-portal/src/app/home/home.component.less
@@ -25,16 +25,16 @@
 //     margin-bottom: 20px;
 // }
 .content {
-    .services {
-        float: left;
+    .services,.PACKAGE{
         background-color: #fff;
-        width: 30%;
-        height: 628px;
+        width: 100%;
+        height: 60%;
         border-radius: 5px;
         padding: 28px 22px;
+        clear: both;
         h4 {
             font: 600 16px/16px "Arial Bold";
-            color: #3F9CFF;
+            color: #0DA9E2;
             margin-bottom: 20px;
         }
         h3 {
@@ -46,15 +46,16 @@
             }
         }
         h5 {
-            font: 500 16px/16px "ArialMT";
-            color:#3F9CFF;
+            font: 500 18px/18px "ArialMT";
+            color:#0DA9E2;
             margin: -2em 0 1em 0 ;
             span {
-                font-size: 12px;
+                font-size: 14px;
                 font-family: "Arial";
-                color:rgba(60,79,140,1);
+                color:#3C4F8C;
             }
             span:first-child {
+                font-size: 18px;
                 padding: 0  4PX  0 4px;
             }
             span:last-child {
@@ -105,7 +106,8 @@
             color: #3C4F8C;
             font-size: 16px;
             float: right;
-            margin-top: 53px;
+            margin-top: 20px;
+            margin-bottom: 0!important;
             line-height: 35px;
             border-radius: 5px;
         }
@@ -115,11 +117,10 @@
         padding-left: 15px;
         width: 70%;
         .rt-content {
-            height: 220px;
+            height: 40%;
             margin-bottom: 18px;
             .poerformance {
-                float: left;  
-                margin-left: 2%;            
+                float: left;
                 background-color: #fff;
                 height: 100%;
                 width: 50%;
@@ -132,7 +133,7 @@
                 }
                 h4 {
                     font: 600 16px/16px "Arial Bold";
-                    color: #3F9CFF;
+                    color: #0DA9E2;
                     margin-bottom: 34px;  
                 }
                 
@@ -164,26 +165,41 @@
                 background-color: #fff;
                 height: 100%;
                 width: 48%;
-                
                 border-radius: 5px;
                 position: relative;
                 padding: 28px 26px;
                 h4 {
                     position: absolute;
                     font: 600 16px/16px "Arial Bold";
-                    color: #3F9CFF;
+                    color: #0DA9E2;
                 }
             }
+            .alarm-name{
+                text-align: center;
+                margin-top: 15px;
+            }
+            .tip{
+                width: 110px;
+                background-color: #eceff4;
+                color: #3C4F8C;
+                font-size: 16px;
+                float: right;
+                margin-top: 20px;
+                margin-bottom: 0!important;
+                line-height: 35px;
+                border-radius: 5px;
+                text-align: center;
+            }
         }
         .rb-content {
-            height: 390px;
+            height: 58%;
             background-color: #fff;
             border-radius: 5px;
             padding: 24px 30px;
             position: relative;
             h4 {
                 font: 600 16px/16px "Arial Bold";
-                color: #3F9CFF;
+                color: #0DA9E2;
             }
             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 65bbc606..d0e6ef0b 100644
--- a/usecaseui-portal/src/app/home/home.component.ts
+++ b/usecaseui-portal/src/app/home/home.component.ts
@@ -16,6 +16,7 @@
 import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core';
 import { HomesService } from '../homes.service';
 import { slideToRight } from '../animates';
+import {TranslateService} from "@ngx-translate/core";
 
 @Component({
   selector: 'app-home',
@@ -32,7 +33,7 @@ export class HomeComponent implements OnInit {
     this.getListSortMasters();
     this.getSourceNames();
     this.getHomeServiceData();
-    this.getHomePerformanceData();
+    // this.getHomePerformanceData();
     this.getHomeAlarmData();
     this.getHomeAlarmChartData();
     this.getHomeServiceBarData();
@@ -109,15 +110,64 @@ export class HomeComponent implements OnInit {
     )
   }
 
-  // performance
-  performanceVnfNum = 0;
-  performanceVmNum = 0;
-  getHomePerformanceData(){
-    this.myhttp.getHomePerformanceData()
-      .subscribe((data)=>{
-        this.performanceVnfNum = data.length;
-      })
-  }
+    // performance
+    // performanceVnfNum = 0;
+    // performanceVmNum = 0;
+    // getHomePerformanceData() {
+    //   this.myhttp.getHomePerformanceData()
+    //     .subscribe((data) => {
+    //       this.performanceVnfNum = data.length;
+    //     })
+    // }
+
+    // VM alarm
+    VMAlarmChartData: Object;
+    VMAlarmChartInit: Object = {
+        height: 180,
+        option: {
+            color: [
+                {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [{
+                        offset: 0, color: '#FB93C2' 
+                    }, {
+                        offset: 1, color: '#FB7788' 
+                    }],
+                    globalCoord: false // 
+                }, {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [{
+                        offset: 0, color: '#A6BFE4' 
+                    }, {
+                        offset: 1, color: '#7A8BAE' 
+                    }],
+                    globalCoord: false // 缺省为 false
+                }],
+            series: [{
+                name: "告警信息",
+                radius: ['50%', '70%'],
+                center: ['50%', '45%'],
+                label: {
+                    normal: {
+                        show: false,
+                    },
+                    emphasis: {
+                        show: true,
+                        formatter: '{b}\n{c},{d}%',
+                        color: "#3C4F8C"
+                    }
+                }
+            }]
+        }
+    };
 
   // alarm bar
   alarmChartData:Object;
@@ -186,8 +236,13 @@ export class HomeComponent implements OnInit {
             data: [{ name: "Active", value: data[0] }, { name: "Fixed", value: data[1] }]
           }]
         };
-      })
-  }
+                this.VMAlarmChartData = {
+                    series: [{
+                        data: [{name: "Active", value: data[0]}, {name: "Fixed", value: data[1]}]
+                    }]
+                };
+            })
+    }
 
   // alarm lin
   alarmLineChartData:Object;
@@ -329,6 +384,7 @@ export class HomeComponent implements OnInit {
             { data: [Val1 - Val2] },
           ]
         }
+                console.log(this.servicesBarChartData)
       }, (err) => {
         console.log(err);
       })