表格高度自适应等优化
This commit is contained in:
zhouyuejun
@@ -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="">航空公司： </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>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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());
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user