From a6365f7559fb6583c54541ac5c2b2dcc0f53af43 Mon Sep 17 00:00:00 2001 From: guochuyicmri Date: Wed, 8 May 2019 11:20:54 +0800 Subject: Home multilingual translation Change-Id: Ib5ee6b49522edc10784913193d330828b84f79a4 Issue-ID: USECASEUI-211 Signed-off-by: guochuyicmri --- usecaseui-portal/src/app/home/home.component.html | 55 +++++++++------- usecaseui-portal/src/app/home/home.component.less | 52 ++++++++++----- usecaseui-portal/src/app/home/home.component.ts | 80 +++++++++++++++++++---- 3 files changed, 132 insertions(+), 55 deletions(-) (limited to 'usecaseui-portal/src/app/home') 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 @@
-
-

{{"SERVICES" | translate}}

- - -
-
{{serviceNumber}} cutomers and {{serviceNumber}} service intance
+
+
+

{{"i18nTextDefine_SERVICES" | translate}}

+ + +
+
{{"i18nTextDefine_Total" | translate}}: {{serviceNumber}} {{"i18nTextDefine_cutomers_and" | translate}} {{serviceNumber}} {{"i18nTextDefine_service_intance" | translate}}
+
+

+ {{"i18nTextDefine_ViewDetails" | translate}} +

-
-
  • {{item.name}}
    {{item.value1}}/{{item.value2}}
    • +
    +

    {{"i18nTextDefine_PACKAGE" | translate}}

    +
    +
  • {{item.name}}
    {{item.value1}}/{{item.value2}}
    • +
    +

    + {{"i18nTextDefine_ViewDetails" | translate}} +

    -

    View Details

    -
    -
    +
    +
    -

    {{"ALARM" | translate}}

    +

    {{"i18nTextDefine_ALARM" | translate}}

    +

    {{"i18nTextDefine_VNF_Alarm" | translate}}

    -

    {{"DEVICES" | translate}}

    -
    -

    {{performanceVnfNum}}

    -

    Performance VNF

    - VNF -
    -
    -

    {{performanceVmNum}}

    -

    Performance VM/PM

    - VM/PM -
    + +

    {{"i18nTextDefine_VM_Alarm" | translate}}

    +

    + {{"i18nTextDefine_ViewDetails" | translate}} +

    -

    {{"VM PERFORMANCE" | translate}}

    +

    {{"i18nTextDefine_VM_Performance" | translate}}

      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); }) -- cgit 1.2.3-korg