航班列表可视区域渲染
This commit is contained in:
zhouyuejun
@@ -1,5 +1,5 @@
|
||||
<div class="main-page" #mainPage>
|
||||
<div class="page-content">
|
||||
<div class="main-page" >
|
||||
<div class="page-content" #pageContent>
|
||||
<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">
|
||||
@@ -26,14 +26,14 @@
|
||||
<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">
|
||||
<select [(ngModel)]="filterItems.ALCD" (ngModelChange)="selectChange('filter')" class="form-control">
|
||||
<option value=""></option>
|
||||
<option *ngFor="let airline of airlinesSelections" [value]="airline.airlineCodeIata">{{airline.airlineName}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="input-container mr-4">
|
||||
<label for="">航线类别： </label>
|
||||
<select [(ngModel)]="filterItems.FLIN" (ngModelChange)="selectChange()" class="form-control">
|
||||
<select [(ngModel)]="filterItems.FLIN" (ngModelChange)="selectChange('filter')" class="form-control">
|
||||
<option value=""></option>
|
||||
<option value="D">国内</option>
|
||||
<option value="I">国际</option>
|
||||
@@ -43,14 +43,14 @@
|
||||
</div>
|
||||
<div class="input-container mr-4">
|
||||
<label for="">航班类别： </label>
|
||||
<select [(ngModel)]="filterItems.FLTY" (ngModelChange)="selectChange()" class="form-control">
|
||||
<select [(ngModel)]="filterItems.FLTY" (ngModelChange)="selectChange('filter')" class="form-control">
|
||||
<option value=""></option>
|
||||
<option *ngFor="let type of flightTypeSelections" [value]="type.flightTypeCode">{{type.flightTypeNameCn}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="input-container mr-4">
|
||||
<label for="">到达/出发：</label>
|
||||
<select [(ngModel)]="filterItems.MVIN" (ngModelChange)="selectChange()" class="form-control">
|
||||
<select [(ngModel)]="filterItems.MVIN" (ngModelChange)="selectChange('filter')" class="form-control">
|
||||
<option value=""></option>
|
||||
<option value="A">到达</option>
|
||||
<option value="D">离港</option>
|
||||
@@ -58,21 +58,21 @@
|
||||
</div>
|
||||
<div class="input-container mr-4">
|
||||
<label for="">运营状态： </label>
|
||||
<select [(ngModel)]="filterItems.FTSS" (ngModelChange)="selectChange()" class="form-control">
|
||||
<select [(ngModel)]="filterItems.FTSS" (ngModelChange)="selectChange('filter')" class="form-control">
|
||||
<option value=""></option>
|
||||
<option *ngFor="let status of flightStatus" [value]="status.sttc">{{status.stdc}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="input-container mr-4">
|
||||
<label for="">航站楼： </label>
|
||||
<select [(ngModel)]="filterItems.TRML" (ngModelChange)="selectChange()" class="form-control">
|
||||
<select [(ngModel)]="filterItems.TRML" (ngModelChange)="selectChange('filter')" class="form-control">
|
||||
<option value=""></option>
|
||||
<option *ngFor="let terminal of terminals" [value]="terminal.terminalCode">{{terminal.terminalName}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="input-container mr-4">
|
||||
<label for="">异常状态： </label>
|
||||
<select [(ngModel)]="filterItems.Abnormal_state" (ngModelChange)="selectChange()" class="form-control">
|
||||
<select [(ngModel)]="filterItems.Abnormal_state" (ngModelChange)="selectChange('filter')" class="form-control">
|
||||
<option value=""></option>
|
||||
<option value="CNCL">取消</option>
|
||||
<option value="DELY">延误</option>
|
||||
@@ -82,28 +82,28 @@
|
||||
</div>
|
||||
<div class="input-container mr-4">
|
||||
<label for="">机坪代理： </label>
|
||||
<select [(ngModel)]="filterItems.FHAG" (ngModelChange)="selectChange()" class="form-control">
|
||||
<select [(ngModel)]="filterItems.FHAG" (ngModelChange)="selectChange('filter')" class="form-control">
|
||||
<option value=""></option>
|
||||
<option *ngFor="let anget of flightAgents" [value]="anget.oGId">{{anget.flightAgentName}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="input-container mr-4">
|
||||
<label for="">旅客代理： </label>
|
||||
<select [(ngModel)]="filterItems.PHAG" (ngModelChange)="selectChange()" class="form-control">
|
||||
<select [(ngModel)]="filterItems.PHAG" (ngModelChange)="selectChange('filter')" class="form-control">
|
||||
<option value=""></option>
|
||||
<option *ngFor="let anget of flightAgents" [value]="anget.oGId">{{anget.flightAgentName}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="input-container mr-4">
|
||||
<label for="">维护代理： </label>
|
||||
<select [(ngModel)]="filterItems.MHAG" (ngModelChange)="selectChange()" class="form-control">
|
||||
<select [(ngModel)]="filterItems.MHAG" (ngModelChange)="selectChange('filter')" class="form-control">
|
||||
<option value=""></option>
|
||||
<option *ngFor="let anget of flightAgents" [value]="anget.oGId">{{anget.flightAgentName}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="input-container mr-4">
|
||||
<label for="">前时间段： </label>
|
||||
<select [(ngModel)]="filterItems.Start_time" (ngModelChange)="selectChange()" class="form-control">
|
||||
<select [(ngModel)]="filterItems.Start_time" (ngModelChange)="selectChange('filter')" class="form-control">
|
||||
<option value=""></option>
|
||||
<option value="1">前1小时</option>
|
||||
<option value="2">前2小时</option>
|
||||
@@ -121,7 +121,7 @@
|
||||
</div>
|
||||
<div class="input-container mr-4">
|
||||
<label for="">后时间段： </label>
|
||||
<select [(ngModel)]="filterItems.End_time" (ngModelChange)="selectChange()" class="form-control">
|
||||
<select [(ngModel)]="filterItems.End_time" (ngModelChange)="selectChange('filter')" class="form-control">
|
||||
<option value=""></option>
|
||||
<option value="1">后1小时</option>
|
||||
<option value="2">后2小时</option>
|
||||
@@ -164,43 +164,56 @@
|
||||
</div>
|
||||
<div class="airline-table">
|
||||
<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>
|
||||
<th>序号</th>
|
||||
<th>重要提示</th>
|
||||
<th>航班ID</th>
|
||||
<th *ngFor="let airline_col of render_col_lists">{{airline_col.COL_CN}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let airline_row of render_data;let i = index;last as isLast" (click)="selectRow(airline_row)"
|
||||
[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="">
|
||||
</td>
|
||||
<td>{{airline_row['renderFlight']['FLID']}}</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>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="table-head" #tableHead>
|
||||
<table class="table">
|
||||
<colgroup>
|
||||
<col *ngFor="let common_col of commonCol" [width]="common_col.COL_WIDTH">
|
||||
<col *ngFor="let airline_col of render_col_lists" [width]="airline_col.COL_WIDTH">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th *ngFor="let common_col of commonCol">{{common_col.COL_CN}}</th>
|
||||
<th *ngFor="let airline_col of render_col_lists">{{airline_col.COL_CN}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<div class="table-body" #tableBody (scroll)="handleScroll($event)">
|
||||
<div class="list-view-phantom" [ngStyle]="{ 'height': wait_render_data.length * 42 + 'px' }"></div>
|
||||
<table #tableContent id="table" class="table table-striped">
|
||||
<colgroup>
|
||||
<col *ngFor="let common_col of commonCol" [width]="common_col.COL_WIDTH">
|
||||
<col *ngFor="let airline_col of render_col_lists" [width]="airline_col.COL_WIDTH">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr *ngFor="let airline_row of render_data;let i = index" (click)="selectRow(airline_row)"
|
||||
[ngClass]="{'selected':row_state['renderFlight']['FLNO']===airline_row['renderFlight']['FLNO']}">
|
||||
<td>{{start+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="">
|
||||
</td>
|
||||
<td>{{airline_row['renderFlight']['FLID']}}</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)" [title]="airline_row['renderFlight'][airline_col.COL_CODE]">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="airline-message" [ngClass]="{'tab-c': tabClose,'tab-o': !tabClose}">
|
||||
<nz-tabset [nzTabPosition]="'top'" [nzType]="'card'" [nzShowPagination]="false">
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
background-color: #fff;
|
||||
.page-content {
|
||||
border: 1px solid #ccc;
|
||||
height: 100%;
|
||||
padding: 10px 20px;
|
||||
.search-filter {
|
||||
position: relative;
|
||||
@@ -24,7 +25,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.second-condition,.third-condition{
|
||||
.second-condition,
|
||||
.third-condition {
|
||||
display: none;
|
||||
}
|
||||
.input-container {
|
||||
@@ -34,50 +36,85 @@
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.filterClose-c{
|
||||
.filterClose-c {
|
||||
display: none;
|
||||
}
|
||||
.filterClose-o{
|
||||
.filterClose-o {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.airline-table {
|
||||
.table-container {
|
||||
display: inline-block;
|
||||
// border: 1px solid #ccc;
|
||||
// position: relative;
|
||||
width: 100%;
|
||||
height: 700px;
|
||||
overflow: auto;
|
||||
// overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
box-shadow: 0 0 1px 0.5px #ddd;
|
||||
table {
|
||||
width: max-content;
|
||||
tr {
|
||||
cursor: pointer;
|
||||
&.selected {
|
||||
background: rgb(181, 215, 255);
|
||||
.table-head {
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
height: 42px;
|
||||
table {
|
||||
margin: 0;
|
||||
width: max-content;
|
||||
th {
|
||||
background-color: #ddd;
|
||||
color: rgb(0, 0, 255);
|
||||
}
|
||||
}
|
||||
th {
|
||||
background-color: #ddd;
|
||||
color: rgb(0, 0, 255);
|
||||
&::-webkit-scrollbar {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
// th,td{
|
||||
// // border: none;
|
||||
// // 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;
|
||||
|
||||
.table-body {
|
||||
position: relative;
|
||||
// height: 600px;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
.list-view-phantom {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
table {
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
width: max-content;
|
||||
tr {
|
||||
cursor: pointer;
|
||||
height: 42px;
|
||||
&.selected {
|
||||
background: rgb(181, 215, 255);
|
||||
}
|
||||
}
|
||||
td {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
border: none;
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.airline-message {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user