summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--usecaseui-portal/src/app/home/home.component.html55
-rw-r--r--usecaseui-portal/src/app/home/home.component.less52
-rw-r--r--usecaseui-portal/src/app/home/home.component.ts80
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);
})