summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/home
diff options
context:
space:
mode:
Diffstat (limited to 'usecaseui-portal/src/app/home')
-rw-r--r--usecaseui-portal/src/app/home/home.component.html47
-rw-r--r--usecaseui-portal/src/app/home/home.component.less31
-rw-r--r--usecaseui-portal/src/app/home/home.component.ts181
3 files changed, 194 insertions, 65 deletions
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 @@
<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>
+ <app-pie [initData]="serviceChartInit" [chartData]="serviceChartData" *ngIf="serviceChart"></app-pie>
+ <div *ngIf="!serviceChart"
+ style="color: #ddd; font-weight: 700;font-size: 19px;height: 200px;text-align: center;line-height: 8;">No Service Instances </div>
+
<div>
- <h5><span>{{"i18nTextDefine_Total" | translate}}:</span> {{serviceNumber}} <span>{{"i18nTextDefine_cutomers_and" | translate}}</span> {{serviceNumber}} <span>{{"i18nTextDefine_service_instance" | translate}}</span></h5>
+ <h5><span>{{"i18nTextDefine_Total" | translate}}:</span> {{serviceNumber}}
+ <span>{{"i18nTextDefine_cutomers_and" | translate}}</span> {{serviceNumber}}
+ <span>{{"i18nTextDefine_service_instance" | translate}}</span></h5>
</div>
<p class="tip">
- <a href="#" style="color:#3C4F8C">{{"i18nTextDefine_ViewDetails" | translate}}</a>
+ <span style="color:#3C4F8C" (click) = "goback_services()">{{"i18nTextDefine_ViewDetails" | translate}}</span>
</p>
</div>
- <div class="PACKAGE" style="height: 37%;margin-top: 3%">
- <h4 style="margin-bottom: 50px">{{"i18nTextDefine_PACKAGE" | translate}}</h4>
+ <div class="PACKAGE" style="height: 43%;margin-top: 3%">
+ <h4>{{"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>
+ <li>
+ <div class="detailstoplin">
+ <div><span></span> NS</div>
+ <div>
+ <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData"></app-bar>
+ </div>
+ <div>{{NSdata}}</div>
+ </div>
+ </li>
+ <li>
+ <div class="detailstoplin">
+ <div><span style="background-color:#BCECB8;"></span> VNF</div>
+ <div>
+ <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData1"></app-bar>
+ </div>
+ <div>{{Vnfdata}}</div>
+ </div>
+ </li>
+ <li>
+ <div class="detailstoplin">
+ <div><span style="background-color:#ACCAF4;"></span> PNF</div>
+ <div>
+ <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData2"></app-bar>
+ </div>
+ <div>{{PnfData}}</div>
+ </div>
+ </li>
</div>
- <p class="tip">
- <a href="#" style="color:#3C4F8C">{{"i18nTextDefine_ViewDetails" | translate}}</a>
+ <p class="tip" style="margin-top: 20px;">
+ <span style="color:#3C4F8C" (click) = "goback_onboard()">{{"i18nTextDefine_ViewDetails" | translate}}</span>
</p>
</div>
</div>
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');
+ }
}