diff options
Diffstat (limited to 'usecaseui-portal/src/app/views/home')
3 files changed, 58 insertions, 41 deletions
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..cb0d877e 100644 --- a/usecaseui-portal/src/app/views/home/home.component.less +++ b/usecaseui-portal/src/app/views/home/home.component.less @@ -15,12 +15,17 @@ */ .content { - padding: 20px 20px; - overflow: hidden; + padding: 20px; + min-height: 937px; + height: 100vh; .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 +39,27 @@ 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:467px; + height: 49vh; + flex-wrap: wrap; h5 { + position: relative; + z-index: 3; font: 500 18px/18px "ArialMT"; color:#0DA9E2; margin: -2em 0 1em 0 ; @@ -78,23 +83,20 @@ } } .PACKAGE{ - height:422px; + min-height:410px; + height: 43vh; margin-top: 20px; - 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 +114,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: 327px; + height: 34vh; margin-bottom: 18px; background:rgba(255,255,255,1); box-shadow:0px 10px 10px 2px rgba(222,222,222,0.5); @@ -201,7 +207,8 @@ } .rb-content { position: relative; - height: 58%; + min-height: 550px; + height: 58vh; 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..a7f312e6 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; + resizeMark constructor( - private myhttp: HomesService, - private router: Router, - private Util: Util - ) { } + private myhttp: HomesService, + private router: Router, + private Util: Util + ) { + } ngOnInit() { this.getListSortMasters(); @@ -44,16 +49,27 @@ export class HomeComponent implements OnInit { this.getHomeServiceBarNsData(); this.getHomeServiceBarVnfData(); this.getHomeServiceBarPnfData(); + this.resizeMark = Observable.fromEvent(window,'resize') + .subscribe((event) => { + this.seriverChart.resize(this.services.nativeElement.offsetHeight,250) + }) + } + + ngAfterViewInit(){ + this.seriverChart.resize(this.services.nativeElement.offsetHeight,250) } + ngOnDestroy(){ + this.resizeMark.unsubscribe() + } // services serviceNumber: number = 0; serviceChartData: Object; serviceChartInit: Object = { - backgroundColor: '#fff', - height: 200, + height: 280, option: { + backgroundColor: '#fff', legend: { orient: 'vertical', left: '0px', @@ -100,17 +116,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 +175,7 @@ export class HomeComponent implements OnInit { show: false, }, emphasis: { - show: true, + show: false, formatter: '{b}\n{c},{d}%', color: "#3C4F8C" } @@ -230,7 +240,7 @@ export class HomeComponent implements OnInit { show: false, }, emphasis: { - show: true, + show: false, formatter: '{b}\n{c},{d}%', color: "#3C4F8C" } @@ -301,7 +311,7 @@ export class HomeComponent implements OnInit { servicesBarChartData1: Object; servicesBarChartData2: Object; serviceBarChartInit: Object = { - height: 40, + height: 58, width: 160, option: { tooltip: { |