legendHoverLink: false,
hoverOffset: 3,
avoidLabelOverlap: false,
- minAngle:1,
+ // minAngle:1,
label: this.initData.option.series[0].label,
data:[],
itemStyle: this.initData.option.series[0].itemStyle
<div class="chearts">
<div class="Cu">
<p> {{"i18nTextDefine_Instance_Count_of_Customer" | translate}} </p>
- <app-pie [initData]="CUChartInit" [chartData]="CUChartData"></app-pie>
- <div class="legend"></div><span> {{"i18nTextDefine_users" | translate}} </span>
+ <app-pie [initData]="CUChartInit" [chartData]="CUChartData" *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 class="legend"></div><span> {{"i18nTextDefine_users" | translate}} </span> -->
</div>
<div class="type">
<p> {{"i18nTextDefine_Instance_Count_of_ServiceType" | translate}} </p>
normal: {
position: 'center',
show: false,
- formatter: ' {b|{b}：{c}%} ',
+ formatter: ' {b|{b}：{c}} ',
backgroundColor: 'rgba(51,51,51,0.9)',
borderColor: 'rgba(51,51,51,0.9)',
borderWidth: 1,
}
},
+ labelLine: {
+ normal: {
+ show: false
+ }
+ },
itemStyle: {
normal: {
borderWidth: 3,
}],
global: false
},
+ borderWidth: 0,
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 10, 5, 0)'
};
// get customers chart pie
+ Pie_name = [];
+ Pie_value = [];
+ serviceChart=true;
+ serviceNumber;
getCustomersPie() {
this.managemencs.getCustomersPie().subscribe((data) => {
+ this.serviceNumber = data.serviceTotalNum;
+ if (this.serviceNumber>0) {
+ this.serviceChart = true;
+ } else {
+ this.serviceChart = false;
+ }
this.CUChartData = {
series: [{
data:data.customerServiceList
<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>
.services,.PACKAGE{
background-color: #fff;
width: 100%;
- height: 60%;
+ height: 57%;
border-radius: 5px;
padding: 28px 22px;
clear: both;
}
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";
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%;
color: #3C4F8C;
font-size: 16px;
float: right;
- margin-top: 20px;
+ // margin-top: 20px;
margin-bottom: 0!important;
line-height: 35px;
border-radius: 5px;
}
.alarm-name{
text-align: center;
- margin-top: 15px;
+ // margin-top: 15px;
}
.tip{
width: 110px;
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',
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();
}
serviceChartData:Object;
serviceChartInit:Object = {
backgroundColor: '#fff',
- height: 300,
+ height: 200,
option:{
legend: {
orient: 'vertical',
}
};
// 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}]
};
)
}
- // performance
- // performanceVnfNum = 0;
- // performanceVmNum = 0;
- // getHomePerformanceData() {
- // this.myhttp.getHomePerformanceData()
- // .subscribe((data) => {
- // this.performanceVnfNum = data.length;
- // })
- // }
-
// VM alarm
VMAlarmChartData: Object;
VMAlarmChartInit: Object = {
// services
servicesBarChartData: Object;
+ servicesBarChartData1: Object;
+ servicesBarChartData2: Object;
serviceBarChartInit: Object = {
height: 40,
width: 160,
},
xAxis: {
- // data: [],
type: 'value',
show: false,
min: 0,
- max: 80,
+ max: 100,
axisTick: {
show: false
},
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]
}
},
}, {
name: '',
animation: false,
silent: true,
- data: [60],
+ data: [100],
tooltip: {
show: false
},
]
}
}
- 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);
})
this.myhttp.getListSortMasters()
.subscribe((data)=>{
this.listSortMasters = JSON.stringify(data);
- console.log(this.listSortMasters);
+ // console.log(this.listSortMasters);
sessionStorage.setItem('listSortMasters',this.listSortMasters)
})
}
endTime:nowTime,
format:"day"
}
- console.log(obj);
+ // console.log(obj);
this.myhttp.getHomeAlarmChartData(obj)
.subscribe((data)=>{
this.alarmLineChartData = {
})
}
+ goback_services(){
+ this.router.navigateByUrl('/services/services-list');
+ }
+ goback_onboard(){
+ this.router.navigateByUrl('/services/onboard-vnf-vm');
+ }
}
export class HomesService {
constructor(private http: HttpClient) { }
- baseUrl = baseUrl.baseUrl
+ baseUrl = baseUrl.baseUrl;
+ baseUrlbar = baseUrl.baseUrl + "/uui-lcm/";
url = {
home_serviceData: this.baseUrl + "/uui-lcm/serviceNumByCustomer",
home_performanceData: this.baseUrl + "/performance/queryAllSourceNames",
home_alarmData: this.baseUrl + "/alarm/statusCount",
home_alarmChartData: this.baseUrl + "/alarm/diagram",
- home_servicebarData:this.baseUrl + "",
+ home_servicebarData:this.baseUrl + "",
+ home_servicebarnsData: this.baseUrlbar + "ns-packages",
+ home_servicebarvnfData: this.baseUrlbar + "vnf-packages",
+ home_servicebarpnfData: this.baseUrlbar + "pnf-packages",
sourceNames: this.baseUrl + "/alarm/getSourceNames",
listSortMasters:this.baseUrl+"/listSortMasters",
currentLanguage:this.baseUrl+"/ONAPPORTAL/auxapi/languageSetting/user/",
getHomeServiceBarData(){
return this.http.get<any>(this.url.home_servicebarData);
}
+ getHomeServiceBarNsData(){
+ return this.http.get<any>(this.url.home_servicebarnsData);
+ }
+ getHomeServiceBarVnfData(){
+ return this.http.get<any>(this.url.home_servicebarvnfData);
+ }
+ getHomeServiceBarPnfData(){
+ return this.http.get<any>(this.url.home_servicebarpnfData);
+ }
// alarm data
getAlarmFormData(currentPage: number, pageSize: number, sourceName?: string, priority?: string, startTime?: string, endTime?: string, vfStatus?: string) {
Code Review / usecase-ui.git / commitdiff