Home multilingual translation

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

1 files changed, 30 insertions, 25 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>