diff options
4 files changed, 71 insertions, 41 deletions
diff --git a/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.ts b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.ts index dc5c80a0..d22ffb02 100644 --- a/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.ts +++ b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.ts @@ -13,7 +13,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { Component, OnInit, Input } from '@angular/core'; +import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core'; import { SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks'; @Component({ @@ -110,5 +110,10 @@ export class PieComponent implements OnInit { }) } + resize(size: number){ + this.chartIntance.resize( { + height: size - 250 + }) + } } diff --git a/usecaseui-portal/src/app/views/home/home.component.html b/usecaseui-portal/src/app/views/home/home.component.html index 0946b587..faa5dcd4 100644 --- a/usecaseui-portal/src/app/views/home/home.component.html +++ b/usecaseui-portal/src/app/views/home/home.component.html @@ -17,9 +17,9 @@ <div class="content"> <!-- left-content --> <div class="left-content"> - <div class="services"> + <div class="services" #services> <h4>{{"i18nTextDefine_SERVICES" | translate}}</h4> - <app-pie [initData]="serviceChartInit" [chartData]="serviceChartData"></app-pie> + <app-pie [initData]="serviceChartInit" [chartData]="serviceChartData" #seriverChart></app-pie> <div> <h5><span>{{"i18nTextDefine_Total" | translate}}:</span> {{serviceNumber}} <span>{{"i18nTextDefine_cutomers_and" | translate}}</span> {{serviceNumber}} @@ -34,7 +34,7 @@ <div class="details"> <li class="detailstoplinContent"> <div class="detailstoplin"> - <div><span></span> NS</div> + <div>NS</div> <div> <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData"></app-bar> </div> @@ -43,7 +43,7 @@ </li> <li class="detailstoplinContent"> <div class="detailstoplin"> - <div><span style="background-color:#BCECB8;"></span> VNF</div> + <div>VNF</div> <div> <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData1"></app-bar> </div> @@ -52,7 +52,7 @@ </li> <li class="detailstoplinContent"> <div class="detailstoplin"> - <div><span style="background-color:#ACCAF4;"></span> PNF</div> + <div>PNF</div> <div> <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData2"></app-bar> </div> diff --git a/usecaseui-portal/src/app/views/home/home.component.less b/usecaseui-portal/src/app/views/home/home.component.less index dc736f18..193e0748 100644 --- a/usecaseui-portal/src/app/views/home/home.component.less +++ b/usecaseui-portal/src/app/views/home/home.component.less @@ -15,12 +15,18 @@ */ .content { - padding: 20px 20px; + padding: 20px; + min-height: 918px; + height: 100vh; overflow: hidden; .left-content{ + height: 100%; float: left; width:30%; .services,.PACKAGE{ + display:flex; + flex-direction: column; + justify-content: space-between; width: 100%; background:rgba(255,255,255,1); box-shadow:0px 10px 10px 2px rgba(222,222,222,0.5); @@ -34,27 +40,31 @@ font: 400 14px/14px "Arial"; } .tip { - float: right; + align-self: flex-end; width: 110px; line-height: 35px; border-radius: 5px; background-color: #eceff4; font-size: 16px; color: #3C4F8C; - margin-top: 20px; - margin-bottom: 0; text-align: center; + cursor: pointer; span{ color: #3C4F8C; } } } .services{ - height:466px; - h4{ - margin-bottom: 20px; - } + min-height:466px; + height: 50vh; + flex-wrap: wrap; + + // h4{ + // // margin-bottom: 20px; + // } h5 { + position: relative; + z-index: 3; font: 500 18px/18px "ArialMT"; color:#0DA9E2; margin: -2em 0 1em 0 ; @@ -78,23 +88,24 @@ } } .PACKAGE{ - height:422px; + min-height:422px; + height: 45vh; margin-top: 20px; - h4{ - margin-bottom: 50px; - } + // justify-content: space-around; + // h4{ + // margin-bottom: 50px; + // } .details { .detailstoplinContent{ border-bottom:0.5px solid rgba(237,237,237,1); border-radius:4px; - line-height: 45px; + line-height: 58px; font-size: 14px; color: #3C4F8C; font-family:"ArialMT"; .detailstoplin { width: 100%; - height: 50px; - border-top: 0.5px solid #ededed; + height: 58px; border-radius: 4px; div:first-child{ width: 20%; @@ -112,18 +123,22 @@ color:rgba(60,79,140,0.5); } } - } + &:first-child{ + border-top: 0.5px solid rgba(237,237,237,1); + } + } } } } .right-content { + height: 100%; float: left; width: 70%; - height: 96vh; padding-left: 15px; .rt-content { - height: 40%; + min-height: 350px; + height: 40vh; margin-bottom: 18px; background:rgba(255,255,255,1); box-shadow:0px 10px 10px 2px rgba(222,222,222,0.5); @@ -201,7 +216,8 @@ } .rb-content { position: relative; - height: 58%; + min-height: 538px; + height: 55vh; background-color: #fff; padding: 24px 30px; box-shadow:0px 10px 15px 2px rgba(222,222,222,0.5); diff --git a/usecaseui-portal/src/app/views/home/home.component.ts b/usecaseui-portal/src/app/views/home/home.component.ts index 153e2219..92e7e881 100644 --- a/usecaseui-portal/src/app/views/home/home.component.ts +++ b/usecaseui-portal/src/app/views/home/home.component.ts @@ -13,12 +13,13 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core'; +import { Component, OnInit, HostBinding, ViewChild, ElementRef } from '@angular/core'; import { HomesService } from '../../core/services/homes.service'; import { slideToRight } from '../../shared/utils/animates'; import { Util } from '../../shared/utils/utils'; import { TranslateService } from "@ngx-translate/core"; import { Router } from '@angular/router'; +import { Observable } from 'rxjs' @Component({ selector: 'app-home', @@ -28,12 +29,16 @@ import { Router } from '@angular/router'; }) export class HomeComponent implements OnInit { @HostBinding('@routerAnimate') routerAnimateState; + @ViewChild('seriverChart') seriverChart; + @ViewChild('services') services: ElementRef; + constructor( - private myhttp: HomesService, - private router: Router, - private Util: Util - ) { } + private myhttp: HomesService, + private router: Router, + private Util: Util + ) { + } ngOnInit() { this.getListSortMasters(); @@ -44,6 +49,16 @@ export class HomeComponent implements OnInit { this.getHomeServiceBarNsData(); this.getHomeServiceBarVnfData(); this.getHomeServiceBarPnfData(); + Observable.fromEvent(window,'resize') + .subscribe((event) => { + this.seriverChart.resize(this.services.nativeElement.offsetHeight) + }) + } + + ngAfterViewInit(){ + this.seriverChart.resize(this.services.nativeElement.offsetHeight) + + } @@ -51,9 +66,9 @@ export class HomeComponent implements OnInit { serviceNumber: number = 0; serviceChartData: Object; serviceChartInit: Object = { - backgroundColor: '#fff', - height: 200, + height: 280, option: { + backgroundColor: '#fff', legend: { orient: 'vertical', left: '0px', @@ -100,17 +115,11 @@ export class HomeComponent implements OnInit { } }; // gethomeServiceData - serviceChart = true; getHomeServiceData() { this.myhttp.getHomeServiceData() .subscribe( (data) => { this.serviceNumber = data.serviceTotalNum; - if (this.serviceNumber > 0) { - this.serviceChart = true; - } else { - this.serviceChart = false; - } this.serviceChartData = { series: [{ data: data.customerServiceList }] }; @@ -165,7 +174,7 @@ export class HomeComponent implements OnInit { show: false, }, emphasis: { - show: true, + show: false, formatter: '{b}\n{c},{d}%', color: "#3C4F8C" } @@ -230,7 +239,7 @@ export class HomeComponent implements OnInit { show: false, }, emphasis: { - show: true, + show: false, formatter: '{b}\n{c},{d}%', color: "#3C4F8C" } @@ -301,7 +310,7 @@ export class HomeComponent implements OnInit { servicesBarChartData1: Object; servicesBarChartData2: Object; serviceBarChartInit: Object = { - height: 40, + height: 58, width: 160, option: { tooltip: { |