From e88155c2a4046974387fcb64406a28ed672a63d4 Mon Sep 17 00:00:00 2001 From: guochuyicmri Date: Fri, 17 May 2019 18:07:45 +0800 Subject: Dashboard interface front-end development Change-Id: Ife8dbb89e9a5d465e1c3b6b6a290059f376b673b Issue-ID: USECASEUI-214 Signed-off-by: guochuyicmri --- usecaseui-portal/src/app/home/home.component.html | 47 +++++- usecaseui-portal/src/app/home/home.component.less | 31 ++-- usecaseui-portal/src/app/home/home.component.ts | 181 ++++++++++++++++------ 3 files changed, 194 insertions(+), 65 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 34954314..ba847ecb 100644 --- a/usecaseui-portal/src/app/home/home.component.html +++ b/usecaseui-portal/src/app/home/home.component.html @@ -22,21 +22,52 @@

{{"i18nTextDefine_SERVICES" | translate}}

- + +
No Service Instances
+
-
{{"i18nTextDefine_Total" | translate}}: {{serviceNumber}} {{"i18nTextDefine_cutomers_and" | translate}} {{serviceNumber}} {{"i18nTextDefine_service_instance" | translate}}
+
{{"i18nTextDefine_Total" | translate}}: {{serviceNumber}} + {{"i18nTextDefine_cutomers_and" | translate}} {{serviceNumber}} + {{"i18nTextDefine_service_instance" | translate}}

- {{"i18nTextDefine_ViewDetails" | translate}} + {{"i18nTextDefine_ViewDetails" | translate}}

-
-

{{"i18nTextDefine_PACKAGE" | translate}}

+
+

{{"i18nTextDefine_PACKAGE" | translate}}

-
  • {{item.name}}
    {{item.value1}}/{{item.value2}}
    • +
  • +
    +
    NS
    +
    + +
    +
    {{NSdata}}
    +
    +
    • +
  • +
    +
    VNF
    +
    + +
    +
    {{Vnfdata}}
    +
    +
    • +
  • +
    +
    PNF
    +
    + +
    +
    {{PnfData}}
    +
    +
    • -

    - {{"i18nTextDefine_ViewDetails" | translate}} +

    + {{"i18nTextDefine_ViewDetails" | translate}}

    diff --git a/usecaseui-portal/src/app/home/home.component.less b/usecaseui-portal/src/app/home/home.component.less index 6d57fbf2..4297f5bb 100644 --- a/usecaseui-portal/src/app/home/home.component.less +++ b/usecaseui-portal/src/app/home/home.component.less @@ -28,7 +28,7 @@ .services,.PACKAGE{ background-color: #fff; width: 100%; - height: 60%; + height: 57%; border-radius: 5px; padding: 28px 22px; clear: both; @@ -47,8 +47,8 @@ } h5 { font: 500 18px/18px "ArialMT"; - color:#0DA9E2; - margin: -2em 0 1em 0 ; + color: #0DA9E2; + margin: -1em 0 0em 0; span { font-size: 14px; font-family: "Arial"; @@ -70,21 +70,32 @@ margin-bottom: 48px; } .details { + li:first-child{ + border-top: 0.5px solid #ededed; + } li { - border-bottom:0.5px solid rgba(237,237,237,1); - border-radius:4px; - line-height: 45px; + border-bottom: 0.5px solid #ededed; + border-radius: 4px; + line-height: 40px; font-size: 14px; color: #3C4F8C; font-family:"ArialMT"; .detailstoplin { width: 100%; - height: 50px; - border-top: 0.5px solid #ededed; + height: 40px; + /* border-top: 0.5px solid #ededed; */ border-radius: 4px; div:first-child{ width: 20%; float: left; + span{ + height: 12px; + width: 12px; + margin-left: 2px; + border-radius: 6px; + background-color: #FECE72; + display: inline-block; + } } div:nth-child(2){ width: 65%; @@ -106,7 +117,7 @@ color: #3C4F8C; font-size: 16px; float: right; - margin-top: 20px; + // margin-top: 20px; margin-bottom: 0!important; line-height: 35px; border-radius: 5px; @@ -176,7 +187,7 @@ } .alarm-name{ text-align: center; - margin-top: 15px; + // margin-top: 15px; } .tip{ width: 110px; diff --git a/usecaseui-portal/src/app/home/home.component.ts b/usecaseui-portal/src/app/home/home.component.ts index 9bd02941..4e18c71c 100644 --- a/usecaseui-portal/src/app/home/home.component.ts +++ b/usecaseui-portal/src/app/home/home.component.ts @@ -16,7 +16,8 @@ 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"; +import { TranslateService } from "@ngx-translate/core"; +import { Router } from '@angular/router'; @Component({ selector: 'app-home', @@ -27,16 +28,17 @@ import {TranslateService} from "@ngx-translate/core"; export class HomeComponent implements OnInit { @HostBinding('@routerAnimate') routerAnimateState; - constructor(private myhttp: HomesService) { } + constructor(private myhttp: HomesService,private router:Router) { } ngOnInit() { this.getListSortMasters(); this.getSourceNames(); this.getHomeServiceData(); - // this.getHomePerformanceData(); this.getHomeAlarmData(); this.getHomeAlarmChartData(); - this.getHomeServiceBarData(); + this.getHomeServiceBarNsData(); + this.getHomeServiceBarVnfData(); + this.getHomeServiceBarPnfData(); } @@ -45,7 +47,7 @@ export class HomeComponent implements OnInit { serviceChartData:Object; serviceChartInit:Object = { backgroundColor: '#fff', - height: 300, + height: 200, option:{ legend: { orient: 'vertical', @@ -93,12 +95,18 @@ export class HomeComponent implements OnInit { } }; // gethomeServiceData + serviceChart = true; getHomeServiceData(){ this.myhttp.getHomeServiceData() .subscribe( (data)=>{ // console.log(data); this.serviceNumber = data.serviceTotalNum; + if (this.serviceNumber > 0) { + this.serviceChart = true; + } else { + this.serviceChart = false; + } this.serviceChartData = { series:[{data:data.customerServiceList}] }; @@ -110,16 +118,6 @@ export class HomeComponent implements OnInit { ) } - // performance - // performanceVnfNum = 0; - // performanceVmNum = 0; - // getHomePerformanceData() { - // this.myhttp.getHomePerformanceData() - // .subscribe((data) => { - // this.performanceVnfNum = data.length; - // }) - // } - // VM alarm VMAlarmChartData: Object; VMAlarmChartInit: Object = { @@ -287,6 +285,8 @@ export class HomeComponent implements OnInit { // services servicesBarChartData: Object; + servicesBarChartData1: Object; + servicesBarChartData2: Object; serviceBarChartInit: Object = { height: 40, width: 160, @@ -298,11 +298,10 @@ export class HomeComponent implements OnInit { }, xAxis: { - // data: [], type: 'value', show: false, min: 0, - max: 80, + max: 100, axisTick: { show: false }, @@ -319,13 +318,24 @@ export class HomeComponent implements OnInit { name: 'a', silent: true, animation: false, - data: [80], + data: [], stack: 'income', barWidth: 12, itemStyle: { normal: { - color: '#7AC0EF', - barBorderRadius: [10, 10, 10, 10] + // color: { + // type: 'bar', + // colorStops: [{ + // offset: 0, + // color: '#FDAC63' + // }, { + // offset: 1, + // color: '#FECE72' + // }], + // globalCoord: false, + + // }, + // barBorderRadius: [10, 10, 10, 10] } }, }, { @@ -333,7 +343,7 @@ export class HomeComponent implements OnInit { name: '', animation: false, silent: true, - data: [60], + data: [100], tooltip: { show: false }, @@ -354,35 +364,106 @@ export class HomeComponent implements OnInit { ] } } - userdata; - getHomeServiceBarData() { - this.myhttp.getHomeServiceBarData() + + + NSdata: number; + Vnfdata: number; + PnfData: number; + getHomeServiceBarNsData() { + this.myhttp.getHomeServiceBarNsData() .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.NSdata = data.length; this.servicesBarChartData = { - xAxis: { - min: MIN, - max: MAX, - }, series: [ - { data: [Val1] }, - { data: [Val1 - Val2] }, + { + data: [this.NSdata], + itemStyle: { + normal: { + color: { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#FDAC63' + }, { + offset: 1, + color: '#FECE72' + }], + globalCoord: false, + }, + barBorderRadius: [10, 10, 10, 10] + } + }, + }, + { data: [100] }, + + ] + } + }, (err) => { + console.log(err); + }) + } + + getHomeServiceBarVnfData() { + this.myhttp.getHomeServiceBarVnfData() + .subscribe((data) => { + this.Vnfdata = data.length; + this.servicesBarChartData1 = { + series: [ + { + data: [this.Vnfdata], + itemStyle: { + normal: { + color: { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#9AD09F' + }, { + offset: 1, + color: '#BCECB8' + }], + globalCoord: false, + + }, + barBorderRadius: [10, 10, 10, 10] + } + }, + }, + { data: [100] }, + ] + } + }, (err) => { + console.log(err); + }) + } + + getHomeServiceBarPnfData() { + this.myhttp.getHomeServiceBarPnfData() + .subscribe((data) => { + this.PnfData = data.length; + this.servicesBarChartData2 = { + series: [ + { data: [this.PnfData], + itemStyle: { + normal: { + color: { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#71ADEF' + }, { + offset: 1, + color: '#ACCAF4' + }], + globalCoord: false, + + }, + barBorderRadius: [10, 10, 10, 10] + } + },}, + { data: [100] }, ] } - console.log(this.servicesBarChartData) }, (err) => { console.log(err); }) @@ -398,7 +479,7 @@ export class HomeComponent implements OnInit { this.myhttp.getListSortMasters() .subscribe((data)=>{ this.listSortMasters = JSON.stringify(data); - console.log(this.listSortMasters); + // console.log(this.listSortMasters); sessionStorage.setItem('listSortMasters',this.listSortMasters) }) } @@ -425,7 +506,7 @@ export class HomeComponent implements OnInit { endTime:nowTime, format:"day" } - console.log(obj); + // console.log(obj); this.myhttp.getHomeAlarmChartData(obj) .subscribe((data)=>{ this.alarmLineChartData = { @@ -443,5 +524,11 @@ export class HomeComponent implements OnInit { }) } + goback_services(){ + this.router.navigateByUrl('/services/services-list'); + } + goback_onboard(){ + this.router.navigateByUrl('/services/onboard-vnf-vm'); + } } -- cgit 1.2.3-korg