diff options
Diffstat (limited to 'usecaseui-portal/src/app')
7 files changed, 230 insertions, 71 deletions
diff --git a/usecaseui-portal/src/app/components/charts/pie/pie.component.ts b/usecaseui-portal/src/app/components/charts/pie/pie.component.ts index 61bed45e..b5142410 100644 --- a/usecaseui-portal/src/app/components/charts/pie/pie.component.ts +++ b/usecaseui-portal/src/app/components/charts/pie/pie.component.ts @@ -47,7 +47,7 @@ export class PieComponent implements OnInit { 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 diff --git a/usecaseui-portal/src/app/components/customer/customer.component.html b/usecaseui-portal/src/app/components/customer/customer.component.html index 5a38944c..82ef2818 100644 --- a/usecaseui-portal/src/app/components/customer/customer.component.html +++ b/usecaseui-portal/src/app/components/customer/customer.component.html @@ -17,8 +17,9 @@ <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> diff --git a/usecaseui-portal/src/app/components/customer/customer.component.ts b/usecaseui-portal/src/app/components/customer/customer.component.ts index 51486dbf..b609de57 100644 --- a/usecaseui-portal/src/app/components/customer/customer.component.ts +++ b/usecaseui-portal/src/app/components/customer/customer.component.ts @@ -94,7 +94,7 @@ export class CustomerComponent implements OnInit { 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, @@ -112,6 +112,11 @@ export class CustomerComponent implements OnInit { } }, + labelLine: { + normal: { + show: false + } + }, itemStyle: { normal: { borderWidth: 3, @@ -131,6 +136,7 @@ export class CustomerComponent implements OnInit { }], global: false }, + borderWidth: 0, shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 10, 5, 0)' @@ -141,8 +147,18 @@ export class CustomerComponent implements OnInit { }; // 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 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'); + } } diff --git a/usecaseui-portal/src/app/homes.service.ts b/usecaseui-portal/src/app/homes.service.ts index a556a954..dc0b5cef 100644 --- a/usecaseui-portal/src/app/homes.service.ts +++ b/usecaseui-portal/src/app/homes.service.ts @@ -22,13 +22,17 @@ import { homeData, homeVmLineData, servicesSelectData, servicesTableData, create 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/", @@ -71,6 +75,15 @@ export class HomesService { 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) { |