值机柜台优化及查找定位精确筛选

This commit is contained in:
714943302@qq.com
2018-11-19 10:09:00 +08:00
parent c7fa745eb9
commit ec027d0545
3 changed files with 256 additions and 418 deletions
@@ -14,7 +14,7 @@
<input type="radio" [(ngModel)]="FLT_POS" [value]="2" name="filter-position"> <input type="radio" [(ngModel)]="FLT_POS" [value]="2" name="filter-position">
<span>查找定位</span> <span>查找定位</span>
</label> </label>
<input class="form-control" [(ngModel)]="SEARCH" type="text" (keyup.enter) = "inputFliter()"> <input class="form-control" [(ngModel)]="SEARCH" type="text" (keyup.enter) = "inputEnter()">
</div> </div>
<div class="line-operator-right mb-3 col-xlg-4 col-mlg-4 col-xl-4 col-lg-1"> <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">值机柜台编辑</button> <!-- <button type="button" class="btn btn-info mr-3">值机柜台编辑</button>
@@ -26,7 +26,7 @@
<div class="second-condition mb-3 row"> <div class="second-condition mb-3 row">
<div class="input-container mr-4"> <div class="input-container mr-4">
<label for="">所属航站楼区域:&nbsp;&nbsp;</label> <label for="">所属航站楼区域:&nbsp;&nbsp;</label>
<select class="form-control" [(ngModel)]="filterItems.HZ" (ngModelChange)="inputFliter()"> <select class="form-control" [(ngModel)]="filterItems.HZ" (ngModelChange)="selectChange()">
<option value=""></option> <option value=""></option>
<option value="GH">国内区域</option> <option value="GH">国内区域</option>
<option value="CH">国外区域</option> <option value="CH">国外区域</option>
@@ -35,7 +35,7 @@
</div> </div>
<div class="input-container mr-4"> <div class="input-container mr-4">
<label for="">值机岛:&nbsp;&nbsp;</label> <label for="">值机岛:&nbsp;&nbsp;</label>
<select class="form-control" [(ngModel)]="filterItems.JJ" (ngModelChange)="inputFliter()"> <select class="form-control" [(ngModel)]="filterItems.JJ" (ngModelChange)="selectChange()">
<option value=""></option> <option value=""></option>
<option value="A">A岛</option> <option value="A">A岛</option>
<option value="B">B岛</option> <option value="B">B岛</option>
@@ -44,7 +44,7 @@
</div> </div>
<div class="input-container mr-4"> <div class="input-container mr-4">
<label for="">行李传送带:&nbsp;&nbsp;</label> <label for="">行李传送带:&nbsp;&nbsp;</label>
<select class="form-control" [(ngModel)]="filterItems.ZY" (ngModelChange)="inputFliter()"> <select class="form-control" [(ngModel)]="filterItems.ZY" (ngModelChange)="selectChange()">
<option value=""></option> <option value=""></option>
<option value="X">X行李</option> <option value="X">X行李</option>
<option value="Z">Z行李</option> <option value="Z">Z行李</option>
@@ -55,18 +55,28 @@
</div> </div>
<div class="airline-table"> <div class="airline-table">
<div class="table-container"> <div id="table-container" class="table-container">
<table class="table table-bordered table-striped"> <table id="table" class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th>序号</th> <th>序号</th>
<!-- <th>值机柜台代码</th>
<th>值机柜台名称</th>
<th>值机岛</th>
<th>行李传送带</th>
<th>航站楼区域</th> -->
<th *ngFor="let airline_col of checkindesk_lists">{{airline_col.COL_CN}}</th> <th *ngFor="let airline_col of checkindesk_lists">{{airline_col.COL_CN}}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let airline_row of render_data;let i = index" (click)="selectRow(i)" <tr *ngFor="let airline_row of render_data;let i = index" (click)="selectRow(airline_row)"
[ngClass]="{'active':row_state===i}"> [ngClass]="{'selected':row_state['renderFlight']===airline_row['renderFlight']}">
<td>{{i+1}}</td> <td>{{i+1}}</td>
<!-- <td>{{airline_col.checkindeskCode}}</td>
<td>{{airline_col.checkindeskName}}</td>
<td>{{airline_col.checkinGroupCode}}</td>
<td>{{airline_col.chutCode}}</td>
<td>{{airline_col.terminalAreaCode}}</td> -->
<td *ngFor="let airline_col of checkindesk_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td> <td *ngFor="let airline_col of checkindesk_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
</tr> </tr>
</tbody> </tbody>
@@ -1,6 +1,7 @@
.main-page { .main-page {
width: 100%; width: 100%;
height: calc(100% - 66px); height: 100%;
overflow-y: scroll;
padding: 15px 10px; padding: 15px 10px;
background-color: #fff; background-color: #fff;
.page-content { .page-content {
@@ -31,15 +32,19 @@
// border: 1px solid #ccc; // border: 1px solid #ccc;
width: 100%; width: 100%;
height: 700px; height: 700px;
overflow: scroll; overflow: auto;
box-shadow: 0 0 1px .5px #ddd;
table{ table{
width: max-content; width: max-content;
tr{ tr{
cursor: pointer; cursor: pointer;
&.active{ &.selected{
background: rgb(181, 215, 255); background: rgb(181, 215, 255);
} }
} }
th{
background-color: #ddd;
}
th,td{ th,td{
// border: none; // border: none;
text-align: center; text-align: center;
@@ -2,6 +2,8 @@ import { Component, OnInit } from '@angular/core';
import { ChangeDetectorRef } from '@angular/core'; import { ChangeDetectorRef } from '@angular/core';
import { HttpClientService } from '../../../services/http-client.service'; import { HttpClientService } from '../../../services/http-client.service';
import dateFormatter from '../../../utils/data-formatter'; import dateFormatter from '../../../utils/data-formatter';
import { HttpParams } from '@angular/common/http';
import * as $ from 'jquery';
@Component({ @Component({
selector: 'app-checkin-desk', selector: 'app-checkin-desk',
templateUrl: './checkin-desk.component.html', templateUrl: './checkin-desk.component.html',
@@ -22,22 +24,7 @@ public render_data: Array<object> = []; //显示数据,即需要显示的数
public checkindesk_lists: Array<object>; //列数据 public checkindesk_lists: Array<object>; //列数据
public row_state: number; public row_state: any = { renderFlight: {} };
public TOP_1 = 1000000000000;
public TOP_2 = 2000000000000;
public TOP_3 = 3000000000000;
public TOP_4 = 4000000000000;
public TOP_5 = 5000000000000;
public TOP_6 = 6000000000000;
public TOP_7 = 7000000000000;
public TOP_8 = 8000000000000;
public TOP_9 = 9000000000000;
public TOP_10 = 10000000000000;
public TOP_11 = 11000000000000;
public TOP_12 = 12000000000000;
public TOP_13 = 13000000000000;
public TOP_14 = 14000000000000;
// 搜索条件 // 搜索条件
SEARCH = ''; //手动输入条件 SEARCH = ''; //手动输入条件
@@ -145,430 +132,266 @@ ngOnInit() {
row_flights['renderPreFlight'] = render_pre_flight; row_flights['renderPreFlight'] = render_pre_flight;
row_flights['renderReaFlight'] = render_rea_flight; row_flights['renderReaFlight'] = render_rea_flight;
} }
this.combined_data.push(row_flights) this.combined_data.push(row_flights);
}) })
//this.doSequence(this.combined_data);
//排序
this.combined_data.forEach(element => {
element['ORDER'] = this.sequence(element)
// element['ORDER'] = '+' + element['order']
})
this.combined_data.sort(function (a, b) {
return (a['ORDER'] - b['ORDER']);
})
this.render_data = this.combined_data this.render_data = this.combined_data
this.changeDetectorRef.detectChanges(); this.changeDetectorRef.detectChanges();
} }
) )
/**
* 固定表头
*/
var tableCont = document.querySelector('#table-container');
function scrollHandle (){
var scrollTop = this.scrollTop;
this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
}
tableCont.addEventListener('scroll',scrollHandle);
} }
public sequence(flight) { /**
let dateTag: number = 10; * 执行排序并渲染
let dateToCompare = new Date().getTime(); */
if (!this.isCancled(flight) && !this.isDone(flight) && this.isDelayed(flight)) { /* doSequence(sequenceData) {
if (this.isLinked(flight)) { sequenceData.forEach(element => {
if (this.getActualDatetime(flight['preFlight']) && !this.getActualDatetime(flight['reaFlight'])) { element['ORDER'] = this.sequence(element);
dateToCompare = new Date(dateFormatter(this.getActualDatetime(flight['preFlight']))).getTime(); })
dateTag = this.TOP_1;
}
else {
dateToCompare = new Date(dateFormatter(this.getScheduledDatetime(flight['reaFlight']))).getTime();
dateTag = this.TOP_2;
}
}
else {
dateToCompare = new Date(dateFormatter(this.getScheduledDatetime(flight['reaFlight']))).getTime();
dateTag = this.TOP_3;
}
return dateToCompare + dateTag;
}
if (!this.isCancled(flight) && !this.isDone(flight) && this.isBoading(flight)) {
dateToCompare = new Date(dateFormatter(this.getScheduledDatetime(flight['reaFlight']))).getTime();
dateTag = this.TOP_4;
return dateToCompare + dateTag;
}
if (!this.isCancled(flight) && !this.isDone(flight) && this.isFlying(flight) && !this.getActualDatetime(flight['preFlight'])) {
if (this.getEstimatedDatetime(flight['preFlight'])) {
dateToCompare = new Date(dateFormatter(this.getEstimatedDatetime(flight['preFlight']))).getTime();
} else {
dateToCompare = new Date(dateFormatter(this.getScheduledDatetime(flight['preFlight']))).getTime();
}
dateTag = this.TOP_5;
return dateToCompare + dateTag;
}
if (!this.isCancled(flight) && !this.isDone(flight) && this.isLinked(flight) && this.getActualDatetime(flight['preFlight']) && !this.getActualDatetime(flight['reaFlight'])) {
dateToCompare = new Date(dateFormatter(this.getActualDatetime(flight['preFlight']))).getTime();
dateTag = this.TOP_6;
return dateToCompare + dateTag;
}
if (!this.isCancled(flight) && !this.isDone(flight) && this.isDeptFlight(flight) && !this.startBoading(flight)) {
dateToCompare = new Date(dateFormatter(this.getScheduledDatetime(flight['reaFlight']))).getTime();
dateTag = this.TOP_7;
return dateToCompare + dateTag;
}
if (!this.isCancled(flight) && this.isArriFlight(flight) && this.isDone(flight)) {
dateToCompare = new Date(dateFormatter(this.getActualDatetime(flight['preFlight']))).getTime();
dateTag = this.TOP_8;
return dateToCompare + dateTag;
}
if (!this.isCancled(flight) && !this.isDone(flight) && this.isOverBoading(flight)) {
dateToCompare = new Date(dateFormatter(this.getScheduledDatetime(flight['reaFlight']))).getTime();
dateTag = this.TOP_9;
return dateToCompare + dateTag;
}
if (!this.isCancled(flight) && !this.isDone(flight) && !this.isFlying(flight)) {
if (this.isLinked(flight)) {
dateToCompare = new Date(dateFormatter(this.getScheduledDatetime(flight['reaFlight']))).getTime();
dateTag = this.TOP_10;
} else if (this.isArriFlight(flight)) {
dateToCompare = new Date(dateFormatter(this.getScheduledDatetime(flight['preFlight']))).getTime();
dateTag = this.TOP_11;
}
return dateToCompare + dateTag;
}
if (!this.isCancled(flight) && this.isDone(flight) && (this.isLinked(flight) || this.isDeptFlight(flight))) {
dateToCompare = new Date(dateFormatter(this.getActualDatetime(flight['reaFlight']))).getTime();
dateTag = this.TOP_12;
return dateToCompare + dateTag;
}
if (this.isCancled(flight)) {
if (this.isDeptFlight(flight)) {
dateToCompare = new Date(dateFormatter(this.getScheduledDatetime(flight['reaFlight']))).getTime();
} else {
dateToCompare = new Date(dateFormatter(this.getScheduledDatetime(flight['preFlight']))).getTime();
}
dateTag = this.TOP_13; sequenceData.sort(function (a, b) {
return dateToCompare + dateTag; return (a['ORDER'] - b['ORDER']);
} })
return this.TOP_14
this.render_data = sequenceData;
this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
this.changeDetectorRef.detectChanges();
} */
/**
* 过滤及定位
* @param filterItems
* @return
*/
//输入框回车事件
inputEnter() {
if (this.FLT_POS === 1) {
this.selectChange()
} else {
this.selectChange()
this.inputPosition(this.render_data)
}
} }
inputFliter() { //下拉框选择筛选
let filterItems = this.filterItems; selectChange() {
let combined_data = this.combined_data;
let filter_data = []; let filter_data = [];
let filterItems = this.filterItems;
let sel_col = this.SEL_COL; this.combined_data.forEach(item => {
filter_data.push(Object.assign({}, item));
if (this.FLT_POS === 1) { //过滤 })
//手动输入框筛选 //下拉框筛选
if(sel_col){ filter_data = filter_data.filter(item => {
combined_data.forEach(item=>{ if (item) {
if(item['renderFlight'][sel_col]){ let is_satis = true;
if (item['renderFlight'][sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) { for (const key in filterItems) {
filter_data.push(Object.assign({}, item)) if (filterItems.hasOwnProperty(key) && filterItems[key]) {
if (item['preFlight'][key] === filterItems[key]) {
is_satis = true;
continue;
} else {
is_satis = false;
break;
} }
}else{
if(!this.SEARCH){ }
filter_data.push(Object.assign({}, item)) }
return is_satis;
} else if (item) {
let is_satis = true;
for (const key in filterItems) {
if (filterItems.hasOwnProperty(key) && filterItems[key]) {
if (item['reaFlight'][key] === filterItems[key]) {
is_satis = true;
continue;
} else {
is_satis = false;
break;
}
}
}
return is_satis;
} else {
let pre_satis = true;
let rea_satis = true;
for (const key in filterItems) {
if (filterItems.hasOwnProperty(key) && filterItems[key]) {
if (item['preFlight'][key] === filterItems[key]) {
pre_satis = true;
continue;
} else {
pre_satis = false;
break;
}
}
}
for (const key in filterItems) {
if (filterItems.hasOwnProperty(key) && filterItems[key]) {
if (item['reaFlight'][key] === filterItems[key]) {
rea_satis = true;
continue;
} else {
rea_satis = false;
break;
}
}
}
if (pre_satis && !rea_satis) {
item['renderFlight'] = item['renderPreFlight'];
return pre_satis;
} else if (!pre_satis && rea_satis) {
item['renderFlight'] = item['renderReaFlight'];
return rea_satis;
} else if (pre_satis && rea_satis) {
return pre_satis && rea_satis;
} else {
return false;
}
}
})
if (this.FLT_POS === 1) {
this.inputFilter(filter_data);
} else {
this.render_data = filter_data;
this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
// this.inputPosition(this.render_data);
this.changeDetectorRef.detectChanges();
}
}
//输入框筛选
inputFilter(filterData) {
if (this.SEARCH) {
if (this.SEL_COL) {
let sel_col = this.SEL_COL;
filterData = filterData.filter(item => {
if (item['renderFlight'][sel_col]) {
if (item['renderFlight'][sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
return true;
}
} else {
if (this.SEARCH) {
return false;
} else {
return true;
} }
} }
}) })
}else{
combined_data.forEach(item => { } else {
filterData = filterData.filter(item => {
let is_satis = false;
for (const key in item['renderFlight']) { for (const key in item['renderFlight']) {
if (item['renderFlight'].hasOwnProperty(key)) { if (item['renderFlight'].hasOwnProperty(key)) {
if (item['renderFlight'][key]) { if (item['renderFlight'][key]) {
if (item['renderFlight'][key].toString().match(new RegExp(this.SEARCH, 'i'))) { if (item['renderFlight'][key].toString().match(new RegExp(this.SEARCH, 'i'))) {
filter_data.push(Object.assign({}, item)) is_satis = true;
break; break;
} else {
is_satis = false;
continue;
} }
} else { } else {
continue; if (this.SEARCH) {
is_satis = false;
continue;
} else {
is_satis = true;
break;
}
} }
} else {
continue;
} }
} }
return is_satis;
}) })
} }
//下拉框筛选
filter_data = filter_data.filter(item => {
if (this.isArriFlight(item)) {
let is_satis = true;
for (const key in filterItems) {
if (filterItems.hasOwnProperty(key) && filterItems[key]) {
if (item['preFlight'][key] === filterItems[key]) {
is_satis = true;
continue;
} else {
is_satis = false;
break;
}
}
}
return is_satis;
} else if (this.isDeptFlight(item)) {
let is_satis = true;
for (const key in filterItems) {
if (filterItems.hasOwnProperty(key) && filterItems[key]) {
if (item['reaFlight'][key] === filterItems[key]) {
is_satis = true;
continue;
} else {
is_satis = false;
break;
}
}
}
return is_satis;
} else {
let pre_satis = true;
let rea_satis = true;
for (const key in filterItems) {
if (filterItems.hasOwnProperty(key) && filterItems[key]) {
if (item['preFlight'][key] === filterItems[key]) {
pre_satis = true;
continue;
} else {
pre_satis = false;
break;
}
}
}
for (const key in filterItems) {
if (filterItems.hasOwnProperty(key) && filterItems[key]) {
if (item['reaFlight'][key] === filterItems[key]) {
rea_satis = true;
continue;
} else {
rea_satis = false;
break;
}
}
}
if(pre_satis&&!rea_satis){
item['renderFlight'] = item['renderPreFlight'];
return pre_satis;
}else if(!pre_satis&&rea_satis){
item['renderFlight'] = item['renderReaFlight'];
return rea_satis;
}else if(pre_satis&&rea_satis){
return pre_satis&&rea_satis;
}else{
return false;
}
}
})
this.render_data = filter_data;
} else { //定位
} }
this.render_data = filterData;
this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
this.changeDetectorRef.detectChanges(); this.changeDetectorRef.detectChanges();
} }
/** positionArray: Array<any> = [];
* 获取航班实际时间 positionArrayIndex: number = 0;
* @param flight //输入框定位
* @return inputPosition(filterData) {
*/ let transArray = []
public getActualDatetime(flight) { if (this.SEL_COL) {
return flight['ACTT']; let sel_col = this.SEL_COL;
} filterData.forEach(element => {
if (element['renderFlight'][sel_col]) {
if (element['renderFlight'][sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
transArray.push(element)
}
} else {
if (!this.SEARCH) {
transArray.push(element)
}
}
});
} else {
filterData.forEach(element => {
for (const key in element['renderFlight']) {
if (element['renderFlight'].hasOwnProperty(key)) {
if (element['renderFlight'][key]) {
if (element['renderFlight'][key].toString().match(new RegExp(this.SEARCH, 'i'))) {
transArray.push(element)
break;
} else {
continue;
}
} else {
if (this.SEARCH) {
continue;
} else {
transArray.push(element)
break;
}
}
/** } else {
* 获取航班预计时间 continue;
* @param flight }
* @return }
*/ });
public getEstimatedDatetime(flight) { }
return flight['ESTT']
}
/** if (transArray.length > 0) {
* 获取航班计划时间 if (transArray.toString() == this.positionArray.toString()) {
* @param flight this.positionArrayIndex++;
* @return if (this.positionArrayIndex === this.positionArray.length) {
*/ this.positionArrayIndex = 0;
public getScheduledDatetime(flight) { }
return flight['SODT'] this.row_state = this.positionArray[this.positionArrayIndex];
} } else {
this.positionArray = transArray;
this.positionArrayIndex = 0;
/** this.row_state = this.positionArray[this.positionArrayIndex];
* 判断航班是否是链接航班 }
* @param flight } else {
* @return alert('没有搜索到相关数据');
*/ }
public isLinked(flight) {
if (flight['preFlight'] && flight['reaFlight']) {
return true
} else {
return false
}
}
/**
* 判断航班是否是纯离港航班
* @param flight
* @return
*/
public isDeptFlight(flight) {
if (!flight['preFlight'] && flight['reaFlight']) {
return true
} else {
return false
}
}
/**
* 判断航班是否是纯到港航班
* @param flight
* @return
*/
public isArriFlight(flight) {
if (flight['preFlight'] && !flight['reaFlight']) {
return true;
} else {
return false;
}
}
/**
* 判断航班是否已经前站起飞
* @param flight
* @return
*/
public isFlying(flight) {
if (this.isArriFlight(flight) || this.isLinked(flight)) {
if (flight['preFlight']['PADT']) {
return true;
} else {
return false;
}
} else {
return false;
}
}
/**
* 判断航班是否取消
* @param flight
* @return
*/
public isCancled(flight) {
if (this.isArriFlight(flight)) {
if (flight['preFlight']['CNCL']) {
return true;
} else {
return false;
}
} else if (this.isDeptFlight(flight)) {
if (flight['reaFlight']['CNCL']) {
return true;
} else {
return false;
}
} else {
return false;
}
}
/**
* 判断航班是否延误(只针对纯离港航班或链接航班中的离港航班)
* @param flight
* @return
*/
public isDelayed(flight) {
if (this.isDeptFlight(flight) || this.isLinked(flight)) {
if (flight['reaFlight']['DELY']) {
return true
} else {
return false
}
} else {
return false;
}
}
/**
* 判断航班是否已经执行完成
* @param flight
* @return
*/
public isDone(flight) {
if (this.isLinked(flight) || this.isDeptFlight(flight)) {
if (!this.getActualDatetime(flight['reaFlight'])) {
return false;
} else {
return true;
}
} else if (this.isArriFlight(flight)) {
if (!this.getActualDatetime(flight['preFlight'])) {
return false;
} else {
return true;
}
} else {
return false;
}
}
/**
* 判断航班是否开始登机
* @param flight
* @return
*/
public startBoading(flight) {
if (this.isLinked(flight) || this.isDeptFlight(flight)) {
if (!flight['reaFlight']['BOTM']) {
return false;
} else {
return true;
}
} else {
return false;
}
}
/**
* 判断航班是否正在登机中
* @param flight
* @return
*/
public isBoading(flight) {
if (this.isLinked(flight) || this.isDeptFlight(flight)) {
if (flight['reaFlight']['BOTM'] && !flight['reaFlight']['GCTM']) {
return true;
} else {
return false;
}
} else {
return false;
}
}
/**
* 判断航班是否登机结束
* @param flight
* @return
*/
public isOverBoading(flight) {
if (this.isLinked(flight) || this.isDeptFlight(flight)) {
if (!flight['GCTM']) {
return false;
} else {
return true;
}
} else {
return false;
}
}
this.changeDetectorRef.detectChanges();
let tr = $(".selected");
let objTr = tr[0];
$("#table-container").animate({ scrollTop: objTr.offsetTop - 42 }, "slow");
}
} }