cdia/airport-chengdu-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

表格高度自适应等优化

Browse Source
This commit is contained in:
zhouyuejun
2018-12-24 16:33:39 +08:00
parent b1d84ac2bc
commit 6e35f9cb88
9 changed files with 127 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/historical-data/historical-data.component.html
+8 -7
View File
@@ -1,6 +1,6 @@
<div class="main-page">
<div class="main-page" #mainPage>
<div class="page-content">
<div class="search-filter mb-3">
<div class="search-filter mb-3" #searchFilter>
<div class="first-condition row">
<div class="line-operator-left input-container mb-3 col-xlg-8 col-mlg-8 col-xl-8 col-lg-10">
<select [(ngModel)]="SEL_COL" class="mr-4 form-control" name="" id="">
@@ -17,12 +17,13 @@
</label>
<input class="form-control" [(ngModel)]="SEARCH" type="text" (keyup.enter)="inputEnter()">
</div>
<div class="line-operator-right mb-3 col-xlg-4 col-mlg-4 col-xl-4 col-lg-1">
<button type="button" class="btn btn-info mr-3" (click)="refresh()">刷新</button>
<div class="line-operator-right mb-3 col-xlg-4 col-mlg-4 col-xl-4 col-lg-2">
<button type="button" class="btn btn-info mr-2" (click)="toggleFilter()">{{filterClose?'展开':'关闭'}}</button>
<button type="button" class="btn btn-info mr-2" (click)="refresh()">刷新</button>
</div>
</div>
<div class="second-condition mb-3 row">
<div [ngClass]="{'filterClose-c':filterClose,'filterClose-o':!filterClose}" class="second-condition mb-3 row">
<div class="input-container mr-4">
<label for="">航空公司：&nbsp;&nbsp;</label>
<select [(ngModel)]="filterItems.ALCD" (ngModelChange)="selectChange()" class="form-control">
@@ -82,7 +83,7 @@
</div>
</div>
<div class="third-condition row">
<div [ngClass]="{'filterClose-c':filterClose,'filterClose-o':!filterClose}" class="third-condition row">
<label class="radio-inline custom-checkbox nowrap mr-4">
<input type="checkbox" [(ngModel)]="checkboxGroup.related" (ngModelChange)="checkboxChange()">
<span>航班关联信息</span>
@@ -106,7 +107,7 @@
</div>
</div>
<div class="airline-table">
<div id="table-container" class="table-container" [ngClass]="{'table-c': !tabClose,'table-o': tabClose}">
<div #tableContainer id="table-container" class="table-container" [ngClass]="{'table-c': !tabClose,'table-o': tabClose}">
<table id="table" class="table table-bordered table-striped">
<thead>
<tr>
src/app/pages/historical-data/historical-data.component.scss
+22
View File
@@ -19,6 +19,9 @@
}
}
}
.second-condition,.third-condition{
display: none;
}
.input-container {
padding: 0;
> .form-control {
@@ -26,6 +29,12 @@
display: inline-block;
}
}
.filterClose-c{
display: none;
}
.filterClose-o{
display: flex;
}
}
.airline-table{
.table-container{
@@ -50,6 +59,19 @@
text-align: center;
}
}
&::-webkit-scrollbar {
width: 15px;
height: 15px;
}
&::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
background: rgba(165, 207, 222, 1);
border-radius: 10px;
}
&::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.06);
border-radius: 10px;
}
}
}
}
src/app/pages/historical-data/historical-data.component.ts
+19 -2
View File
@@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit,ViewChild,Renderer2 } from '@angular/core';
import { ChangeDetectorRef } from '@angular/core';
import { ToastService } from '../../components/toast/toast.service';
@@ -22,6 +22,7 @@ declare var laydate: any;
export class HistoricalDataComponent implements OnInit {
constructor(
private renderer2: Renderer2,
private basicDataService: BasicDataService,
private operateSpinServiceService: OperateSpinServiceService,
private httpCilent: HttpClientService,
@@ -65,6 +66,10 @@ export class HistoricalDataComponent implements OnInit {
'guarantee': false
}
@ViewChild('mainPage') mainPage;
@ViewChild('searchFilter') searchFilter;
@ViewChild('tableContainer') tableContainer;
ngOnInit() {
laydate.render({
elem: '#selectDate',
@@ -93,6 +98,11 @@ export class HistoricalDataComponent implements OnInit {
}
});
this.renderer2.setStyle(this.tableContainer.nativeElement, 'height', this.mainPage.nativeElement.offsetHeight - this.searchFilter.nativeElement.offsetHeight - 55 + 'px');
window.onresize = function () {
this.renderer2.setStyle(this.tableContainer.nativeElement, 'height', this.mainPage.nativeElement.offsetHeight - this.searchFilter.nativeElement.offsetHeight - 55 + 'px');
}.bind(this)
/* 获取用户设置 */
this.httpCilent.get('/adminapi/settings/uisettings').subscribe(
@@ -106,7 +116,7 @@ export class HistoricalDataComponent implements OnInit {
}
)
//获取航班动态信息
this.httpCilent.post('/adminapi/hitFlightData/list').subscribe(
this.httpCilent.post('/adminapi/hitFlightData/list',{ hstFLightTime: '2018-11-22' }).subscribe(
data => {
this.raw_data = data.body;
@@ -204,6 +214,13 @@ export class HistoricalDataComponent implements OnInit {
this.operateSpinServiceService.hideSpin()
}
public filterClose: boolean = true;
toggleFilter() {
this.filterClose = !this.filterClose;
this.changeDetectorRef.detectChanges();
this.renderer2.setStyle(this.tableContainer.nativeElement, 'height', this.mainPage.nativeElement.offsetHeight - this.searchFilter.nativeElement.offsetHeight - 55 + 'px');
}
/**
* 刷新
*/
src/app/pages/main/main.component.html
+24 -15
View File
@@ -1,6 +1,6 @@
<div class="main-page">
<div class="main-page" #mainPage>
<div class="page-content">
<div class="search-filter mb-3">
<div class="search-filter mb-3" #searchFilter>
<div class="first-condition row">
<div class="line-operator-left input-container mb-3 col-xlg-8 col-mlg-8 col-xl-8 col-lg-10">
<select [(ngModel)]="SEL_COL" class="mr-4 form-control" name="" id="">
@@ -17,12 +17,13 @@
</label>
<input class="form-control" [(ngModel)]="SEARCH" type="text" (keyup.enter)="inputEnter()">
</div>
<div class="line-operator-right mb-3 col-xlg-4 col-mlg-4 col-xl-4 col-lg-1">
<button type="button" class="btn btn-info mr-3" (click)="refresh()">刷新</button>
<div class="line-operator-right mb-3 col-xlg-4 col-mlg-4 col-xl-4 col-lg-2">
<button type="button" class="btn btn-info mr-2" (click)="toggleFilter()">{{filterClose?'展开':'关闭'}}</button>
<button type="button" class="btn btn-info mr-2" (click)="refresh()">刷新</button>
</div>
</div>
<div class="second-condition mb-3 row">
<div [ngClass]="{'filterClose-c':filterClose,'filterClose-o':!filterClose}" class="second-condition mb-3 row">
<div class="input-container mr-4">
<label for="">航空公司：&nbsp;&nbsp;</label>
<select [(ngModel)]="filterItems.ALCD" (ngModelChange)="selectChange()" class="form-control">
@@ -102,7 +103,7 @@
</div>
</div>
<div class="third-condition row">
<div [ngClass]="{'filterClose-c':filterClose,'filterClose-o':!filterClose}" class="third-condition row">
<label class="radio-inline custom-checkbox nowrap mr-4">
<input type="checkbox" [(ngModel)]="checkboxGroup.related" (ngModelChange)="checkboxChange()">
<span>航班关联信息</span>
@@ -126,7 +127,7 @@
</div>
</div>
<div class="airline-table">
<div id="table-container" class="table-container" [ngClass]="{'table-c': !tabClose,'table-o': tabClose}">
<div #tableContainer id="table-container" class="table-container" [ngClass]="{'table-c': !tabClose,'table-o': tabClose}">
<table id="table" class="table table-bordered table-striped">
<thead>
<tr>
@@ -140,14 +141,22 @@
[ngClass]="{'selected':row_state['renderFlight']['FLNO']===airline_row['renderFlight']['FLNO']}">
<td>{{i+1}}</td>
<td>
<img class="mr-2" *ngIf="getVipNotes(airline_row)" src="/adminweb/assets/images/important-notes/vip.png" alt="">
<img class="mr-2" *ngIf="getOutplanNotes(airline_row)" src="/adminweb/assets/images/important-notes/out_plan.png" alt="">
<img class="mr-2" *ngIf="getAlternateNotes(airline_row)" src="/adminweb/assets/images/important-notes/alternate.png" alt="">
<img class="mr-2" *ngIf="getDelay30Notes(airline_row)" src="/adminweb/assets/images/important-notes/delay_30.png" alt="">
<img class="mr-2" *ngIf="getDelayNotes(airline_row)" src="/adminweb/assets/images/important-notes/delay.png" alt="">
<img class="mr-2" *ngIf="getReturnNotes(airline_row)" src="/adminweb/assets/images/important-notes/return.png" alt="">
<img class="mr-2" *ngIf="getCancleNotes(airline_row)" src="/adminweb/assets/images/important-notes/cancle.png" alt="">
<img class="mr-2" *ngIf="getStopoverNotes(airline_row)" src="/adminweb/assets/images/important-notes/stopover.png" alt="">
<img class="mr-2" *ngIf="getVipNotes(airline_row)" src="/adminweb/assets/images/important-notes/vip.png"
alt="">
<img class="mr-2" *ngIf="getOutplanNotes(airline_row)" src="/adminweb/assets/images/important-notes/out_plan.png"
alt="">
<img class="mr-2" *ngIf="getAlternateNotes(airline_row)" src="/adminweb/assets/images/important-notes/alternate.png"
alt="">
<img class="mr-2" *ngIf="getDelay30Notes(airline_row)" src="/adminweb/assets/images/important-notes/delay_30.png"
alt="">
<img class="mr-2" *ngIf="getDelayNotes(airline_row)" src="/adminweb/assets/images/important-notes/delay.png"
alt="">
<img class="mr-2" *ngIf="getReturnNotes(airline_row)" src="/adminweb/assets/images/important-notes/return.png"
alt="">
<img class="mr-2" *ngIf="getCancleNotes(airline_row)" src="/adminweb/assets/images/important-notes/cancle.png"
alt="">
<img class="mr-2" *ngIf="getStopoverNotes(airline_row)" src="/adminweb/assets/images/important-notes/stopover.png"
alt="">
</td>
<td *ngFor="let airline_col of render_col_lists" [ngClass]="getPosition(airline_col.COL_CODE,airline_row)"
[ngStyle]="getColor(airline_col.COL_CODE,airline_row)">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
src/app/pages/main/main.component.scss
+13
View File
@@ -9,9 +9,13 @@
border: 1px solid #ccc;
padding: 10px 20px;
.search-filter {
position: relative;
padding: 0 15px;
.first-condition {
.line-operator-right {
// position: absolute;
// top: 0;
// right: 0;
text-align: right;
padding: 0;
.btn-info {
@@ -20,6 +24,9 @@
}
}
}
.second-condition,.third-condition{
display: none;
}
.input-container {
padding: 0;
> .form-control {
@@ -27,6 +34,12 @@
display: inline-block;
}
}
.filterClose-c{
display: none;
}
.filterClose-o{
display: flex;
}
}
.airline-table {
.table-container {
src/app/pages/main/main.component.ts
+19 -14
View File
@@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, ViewChild, Renderer2 } from '@angular/core';
import { ChangeDetectorRef } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
@@ -28,6 +28,7 @@ import * as $ from 'jquery';
export class MainComponent implements OnInit {
constructor(
private router: Router,
private renderer2: Renderer2,
private basicDataService: BasicDataService,
private operateSpinServiceService: OperateSpinServiceService,
private httpCilent: HttpClientService,
@@ -35,14 +36,12 @@ export class MainComponent implements OnInit {
private toastService: ToastService,
private websocketService: WebsocketService
) {
console.log(new Date().getTime());
this.operateSpinServiceService.showSpin();
this.changeDetectorRef.detach();
this.router.events.pipe(
filter((event => event instanceof NavigationEnd))
).subscribe(
(event: NavigationEnd) => {
console.log(event);
if (event.urlAfterRedirects === '/app/main') {
this.httpCilent.get('/adminapi/settings/uisettings').subscribe(
data => {
@@ -107,31 +106,36 @@ export class MainComponent implements OnInit {
'guarantee': false
}
@ViewChild('mainPage') mainPage;
@ViewChild('searchFilter') searchFilter;
@ViewChild('tableContainer') tableContainer;
ngOnInit() {
this.renderer2.setStyle(this.tableContainer.nativeElement, 'height', this.mainPage.nativeElement.offsetHeight - this.searchFilter.nativeElement.offsetHeight - 55 + 'px');
window.onresize = function () {
this.renderer2.setStyle(this.tableContainer.nativeElement, 'height', this.mainPage.nativeElement.offsetHeight - this.searchFilter.nativeElement.offsetHeight - 55 + 'px');
}.bind(this)
//订阅航班更新
this.websocketService.dynamicsMessage().subscribe(
event => {
let data = JSON.parse(event as string);
if (data.topic === 'schd') {
console.log(new Date().getTime());
let message = JSON.parse(data.message);
console.log(message);
//是否可以开始处理动态消息
if (this.canHandleDynamicMessage) {
this.dynamicMessageHandle(message);
} else {
this.dynamicMessageArray.push(message);
}
} else if (data.topic === 'msg') {
let message = JSON.parse(data.message);
console.log(message);
if (this.canHandleDynamicAlert) {
this.dynamicAlertHandle(message);
} else {
this.dynamicAlertArray.push(message);
}
}
}
)
@@ -207,6 +211,13 @@ export class MainComponent implements OnInit {
tableCont.addEventListener('scroll', scrollHandle)
}
public filterClose: boolean = true;
toggleFilter() {
this.filterClose = !this.filterClose;
this.changeDetectorRef.detectChanges();
this.renderer2.setStyle(this.tableContainer.nativeElement, 'height', this.mainPage.nativeElement.offsetHeight - this.searchFilter.nativeElement.offsetHeight - 55 + 'px');
}
/**
* 动态消息处理方法
@@ -262,8 +273,6 @@ export class MainComponent implements OnInit {
return (a['ORDER'] - b['ORDER']);
})
this.changeDetectorRef.detectChanges();
console.log(new Date().getTime());
}
/**
@@ -295,7 +304,6 @@ export class MainComponent implements OnInit {
}
dynamicAlertHandle(message) {
let alertType = message.META.TYPE + '-' + message.META.STYP;
console.log(alertType)
let index = this.airline_message_alert.findIndex(val => val['COL_CODE'] === alertType);
if (index > -1) {
let alertText = this.alertMessage[alertType]();
@@ -330,7 +338,6 @@ export class MainComponent implements OnInit {
this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
this.changeDetectorRef.detectChanges();
this.operateSpinServiceService.hideSpin();
console.log(new Date().getTime());
//开始处理动态消息
this.canHandleDynamicMessage = true;
@@ -379,7 +386,6 @@ export class MainComponent implements OnInit {
* 输入框回车事件
*/
inputEnter() {
console.log(new Date().getTime());
if (this.FLT_POS === 1) {
this.selectChange()
} else {
@@ -567,7 +573,6 @@ export class MainComponent implements OnInit {
this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
this.changeDetectorRef.detectChanges();
this.operateSpinServiceService.hideSpin();
console.log(new Date().getTime());
}
/**
src/app/pages/pages.component.html
+5 -3
View File
@@ -37,7 +37,7 @@
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li> -->
<li class="nav-item dropdown mr-3">
<!-- <li class="nav-item dropdown mr-3">
<a class="nav-icon nav-link" data-toggle="dropdown" id="alertsDropdown" aria-haspopup="true"
aria-expanded="false">
<div class="icon-container">
@@ -51,7 +51,7 @@
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</li> -->
<li class="nav-item mr-2">
<a class="nav-link" nz-popconfirm nzTitle="确认退出?" (nzOnConfirm)="confirmLogout()" nzPlacement="bottom">
<i class="fa fa-sign-out mr-1"></i>
@@ -85,7 +85,9 @@
<div class="right-wrapper" [ngClass]="{'right-wrapper-c': menuClose,'right-wrapper-o': !menuClose}">
<router-outlet></router-outlet>
<div *ngIf="isSpinning" class="page-loading">
<i nz-icon [type]="'loading'"></i>
<!-- <i nz-icon [type]="'loading'"></i> -->
<div class="snipping"></div>
<!-- <p>数据加载中 ...</p> -->
</div>
</div>
</div>
src/app/pages/pages.component.scss
+17
View File
@@ -141,4 +141,21 @@
top: 0;
left: 0;
z-index: 999;
.snipping{
position: absolute;
top: calc(50% - 40px);
left: calc(50% - 120px);
margin-bottom: 25px;
width: 80px; height: 80px;
background: url('/assets/images/loading.png') no-repeat top center, linear-gradient(to top, transparent, transparent);
background-size: cover;
animation: spin 2s linear infinite;
};
p{
position: absolute;
top: calc(50% + 50px);
left: calc(50% - 125px);
font-size: 20px;
color: skyblue;
}
}
src/assets/images/loading.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB