接口数据对接

This commit is contained in:
714943302@qq.com
2018-11-21 18:25:07 +08:00
parent afa2130c8d
commit 742d78e887
12 changed files with 669 additions and 1352 deletions
@@ -14,20 +14,20 @@
<input type="radio" [(ngModel)]="FLT_POS" [value]="2" name="filter-position">
<span>查找定位</span>
</label>
<input class="form-control" [(ngModel)]="SEARCH" type="text" (keyup.enter) = "inputEnter()">
<input class="form-control" [(ngModel)]="SEARCH" type="text" (keyup.enter) = "inputEnter()" id="inputerInfo">
</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">打印</button>
<button type="button" class="btn btn-info mr-3">飞机登记</button>
<button type="button" class="btn btn-info mr-3">定制查询</button> -->
<button type="button" class="btn btn-info mr-3">刷新</button>
<button type="button" class="btn btn-info mr-3" (click)="clearFiter()">刷新</button>
</div>
</div>
<div class="second-condition mb-3 row">
<div class="input-container mr-4">
<label for="">航空公司:&nbsp;&nbsp;</label>
<select class="form-control" [(ngModel)]="filterItems.HK" (ngModelChange)="selectChange()">
<select class="form-control" [(ngModel)]="aircrafts" (ngModelChange)="selectChange()" id="airlineCompany">
<option value=""></option>
<option value="GH">海南航空公司</option>
<option value="CH">国外航空公司</option>
@@ -35,7 +35,7 @@
</div>
<div class="input-container mr-4">
<label for="">机型:&nbsp;&nbsp;</label>
<select class="form-control" [(ngModel)]="filterItems.JX" (ngModelChange)="selectChange()">
<select class="form-control" [(ngModel)]="aircrafts" (ngModelChange)="selectChange()" id="jx">
<option value=""></option>
<option value="A">A306</option>
<option value="B">B252</option>
@@ -51,30 +51,29 @@
<thead>
<tr>
<th>序号</th>
<!-- <th>飞机号</th>
<th>飞机号</th>
<th>最大乘客数</th>
<th>最大货物重量</th>
<th>最大起飞重量</th>
<th>最大廊桥数</th>
<th>机主航空公司</th>
<th>航空公司</th>
<th>机型</th> -->
<th *ngFor="let airline_col of aircraft_lists">{{airline_col.COL_CN}}</th>
<th>机型</th>
<!-- <th *ngFor="let airline_col of aircraft_lists">{{airline_col.COL_CN}}</th> -->
</tr>
</thead>
<tbody>
<tr *ngFor="let airline_row of render_data;let i = index" (click)="selectRow(airline_row)"
[ngClass]="{'selected':row_state['renderFlight']===airline_row['renderFlight']}">
<tr *ngFor="let aircraft of aircrafts;let i = index">
<td>{{i+1}}</td>
<!-- <td>{{airline_col.aircraftNumber}}</td>
<td>{{airline_col.maxPassengers}}</td>
<td>{{airline_col.maxFreightWeight}}</td>
<td>{{airline_col.maxTakeoffWeight}}</td>
<td>{{airline_col.maxAirbridges}}</td>
<td>{{airline_col.aircraftOwnerCode}}</td>
<td>{{airline_col.airlineCode}}</td>
<td>{{airline_col.aircraftTypeCode}}</td> -->
<td *ngFor="let airline_col of aircraft_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
<td>{{aircraft.aircraftNumber}}</td>
<td>{{aircraft.maxPassengers}}</td>
<td>{{aircraft.maxFreightWeight}}</td>
<td>{{aircraft.maxTakeoffWeight}}</td>
<td>{{aircraft.maxAirbridges}}</td>
<td>{{aircraft.aircraftOwnerCode}}</td>
<td>{{aircraft.airlineCode}}</td>
<td>{{aircraft.aircraftTypeCode}}</td>
<!-- <td *ngFor="let airline_col of aircraft_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td> -->
</tr>
</tbody>
</table>
@@ -1,7 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { ChangeDetectorRef } from '@angular/core';
import { HttpClientService } from '../../../services/http-client.service';
import dateFormatter from '../../../utils/data-formatter';
import { BasicDataService } from '../../basic-data-service'
import { HttpParams } from '@angular/common/http';
import * as $ from 'jquery';
@Component({
@@ -13,164 +12,73 @@ import * as $ from 'jquery';
constructor(
private httpCilent: HttpClientService,
private changeDetectorRef: ChangeDetectorRef
private basicDataService: BasicDataService
) { }
public raw_data: Array<object> = []; //原始数据,即航班计划
public combined_data: Array<object> = []; //组合数据,即链接航班,显示信息等组合好之后的数据
public render_data: Array<object> = []; //显示数据,即需要显示的数据
public aircraft_lists: Array<object>; //列数据
public row_state: any = { renderFlight: {} };
// 搜索条件
SEARCH = ''; //手动输入条件
FLT_POS = 1; //过滤还是定位
SEL_COL = ''; //选择列名
public filterItems = {
HK: '', //航空公司
JX: '', //机型
}
public formatter = {
'HK': {
'GH': '海南航空公司',
'CH': '国外航空公司'
},
'JX': {
'A': 'A306',
'B': 'B252',
"C": 'C256'
},
'SODT': dateFormatter,
'ESTT': dateFormatter,
'ACTT': dateFormatter
}
selectRow(i) {
this.row_state = i;
this.changeDetectorRef.detectChanges();
}
getColor(col_CODE) {
if (col_CODE === 'SODT') {
return 'skyblue'
} else {
return null
}
}
aircrafts : Array<any>;
public row_state: any = { renderFlight: {} };
public render_data: Array<object> = []; //显示数据,即需要显示的数据
ngOnInit() {
this.changeDetectorRef.detach();
/* 获取显示列 */
this.httpCilent.get('/assets/mock-data/aircraft-code.json').subscribe(
data => {
data.sort(function (a, b) {
return (a['COL_ORDER'] - b['COL_ORDER']);
})
this.aircraft_lists = data;
this.aircrafts = this.basicDataService.aircraft;
this.basicDataService.aircraft_subject.subscribe(
data=>{
this.aircrafts = data;
this.render_data = this.aircrafts;
}
)
/* 获取飞机信息 */
this.httpCilent.get('/assets/mock-data/aircraft-data.json').subscribe(
data => {
//解析数据
data.forEach(element => {
this.raw_data.push(JSON.parse(element.value));
});
let combined_linked_data = this.raw_data
combined_linked_data.forEach(element => {
let row_flights = {};
let render_flight = {};
let render_pre_flight = {};
let render_rea_flight = {};
row_flights['preFlight'] = element;
for (let i = 0; i < this.aircraft_lists.length; i++) {
let key = this.aircraft_lists[i]['COL_CODE']
render_flight[key] = typeof (this.formatter[key]) === 'function' ? this.formatter[key](row_flights['preFlight'][key], 1) : this.formatter[key] ? this.formatter[key][row_flights['preFlight'][key]] : row_flights['preFlight'][key];
}
row_flights['renderFlight'] = render_flight;
if (element['isLinked']) {
row_flights['preFlight'] = element['linkFlight'];
delete element['linkFlight'];
delete element['isLinked'];
row_flights['reaFlight'] = element;
for (let i = 0; i < this.aircraft_lists.length; i++) {
let key = this.aircraft_lists[i]['COL_CODE']
if (this.formatter.hasOwnProperty(key)) {
if (typeof (this.formatter[key]) === 'function') {
render_flight[key] = (row_flights['preFlight'][key] === row_flights['reaFlight'][key]) ? (this.formatter[key](row_flights['preFlight'][key], 1)) : (this.formatter[key](row_flights['preFlight'][key], 1) + '/' + this.formatter[key](row_flights['reaFlight'][key], 1));
render_pre_flight[key] = this.formatter[key](row_flights['preFlight'][key], 1);
render_rea_flight[key] = this.formatter[key](row_flights['reaFlight'][key], 1);
} else {
render_flight[key] = (row_flights['preFlight'][key] === row_flights['reaFlight'][key]) ? (this.formatter[key][row_flights['preFlight'][key]]) : (this.formatter[key][row_flights['preFlight'][key]] + '/' + this.formatter[key][row_flights['reaFlight'][key]]);
render_pre_flight[key] = this.formatter[key][row_flights['preFlight'][key]];
render_rea_flight[key] = this.formatter[key][row_flights['reaFlight'][key]];
}
} else {
render_flight[key] = (row_flights['preFlight'][key] === row_flights['reaFlight'][key]) ? (row_flights['preFlight'][key]) : (row_flights['preFlight'][key] + '/' + row_flights['reaFlight'][key]);
render_pre_flight[key] = row_flights['preFlight'][key];
render_rea_flight[key] = row_flights['reaFlight'][key];
}
}
row_flights['renderFlight'] = render_flight;
row_flights['renderPreFlight'] = render_pre_flight;
row_flights['renderReaFlight'] = render_rea_flight;
}
this.combined_data.push(row_flights)
})
this.render_data = this.combined_data
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);
/**
* 固定表头
*/
var tableCont = document.querySelector('#table-container');
function scrollHandle (){
var scrollTop = this.scrollTop;
this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
}
tableCont.addEventListener('scroll',scrollHandle);
}
/**
* 过滤及定位
* @param filterItems
* @return
*/
//刷新
clearFiter(){
$("#inputerInfo").val(""); //清空过滤或查找定位文本框
$("#airlineCompany").val(""); //清空航空公司
$("#jx").val(""); //清空机型
this.ngOnInit();
}
//输入框回车事件
inputEnter() {
if (this.FLT_POS === 1) {
this.selectChange()
} else {
this.selectChange()
this.inputPosition(this.render_data)
}
if (this.FLT_POS === 1) {
this.selectChange()
} else {
this.selectChange()
this.inputPosition(this.render_data)
}
}
//下拉框选择筛选
selectChange() {
let filter_data = [];
let filterItems = this.filterItems;
this.combined_data.forEach(item => {
let filteraircrafts = this.render_data;
this.render_data.forEach(item => {
filter_data.push(Object.assign({}, item));
})
if (this.FLT_POS === 1) {
this.inputFilter(filter_data);
} else {
this.aircrafts = filter_data;
this.row_state = this.aircrafts.length > 0 ? this.aircrafts[0] : { renderFlight: {} };
}
//下拉框筛选
filter_data = filter_data.filter(item => {
if (item) {
let is_satis = true;
for (const key in filterItems) {
if (filterItems.hasOwnProperty(key) && filterItems[key]) {
if (item['preFlight'][key] === filterItems[key]) {
for (const key in filteraircrafts) {
if (filteraircrafts.hasOwnProperty(key) && filteraircrafts[key]) {
if (item[key] === filteraircrafts[key]) {
is_satis = true;
continue;
} else {
@@ -183,9 +91,9 @@ selectChange() {
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]) {
for (const key in filteraircrafts) {
if (filteraircrafts.hasOwnProperty(key) && filteraircrafts[key]) {
if (item[key] === filteraircrafts[key]) {
is_satis = true;
continue;
} else {
@@ -199,9 +107,9 @@ selectChange() {
} 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]) {
for (const key in filteraircrafts) {
if (filteraircrafts.hasOwnProperty(key) && filteraircrafts[key]) {
if (item[key] === filteraircrafts[key]) {
pre_satis = true;
continue;
} else {
@@ -211,9 +119,9 @@ selectChange() {
}
}
for (const key in filterItems) {
if (filterItems.hasOwnProperty(key) && filterItems[key]) {
if (item['reaFlight'][key] === filterItems[key]) {
for (const key in filteraircrafts) {
if (filteraircrafts.hasOwnProperty(key) && filteraircrafts[key]) {
if (item[key] === filteraircrafts[key]) {
rea_satis = true;
continue;
} else {
@@ -225,10 +133,10 @@ selectChange() {
}
if (pre_satis && !rea_satis) {
item['renderFlight'] = item['renderPreFlight'];
item = item;
return pre_satis;
} else if (!pre_satis && rea_satis) {
item['renderFlight'] = item['renderReaFlight'];
item = item;
return rea_satis;
} else if (pre_satis && rea_satis) {
return pre_satis && rea_satis;
@@ -237,24 +145,16 @@ selectChange() {
}
}
})
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) {
//输入框筛选
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'))) {
if (item[sel_col]) {
if (item[sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
return true;
}
} else {
@@ -269,10 +169,10 @@ inputFilter(filterData) {
} else {
filterData = filterData.filter(item => {
let is_satis = false;
for (const key in item['renderFlight']) {
if (item['renderFlight'].hasOwnProperty(key)) {
if (item['renderFlight'][key]) {
if (item['renderFlight'][key].toString().match(new RegExp(this.SEARCH, 'i'))) {
for (const key in item) {
if (item.hasOwnProperty(key)) {
if (item[key]) {
if (item[key].toString().match(new RegExp(this.SEARCH, 'i'))) {
is_satis = true;
break;
} else {
@@ -296,21 +196,20 @@ inputFilter(filterData) {
})
}
}
this.render_data = filterData;
this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
this.changeDetectorRef.detectChanges();
}
this.aircrafts = filterData;
this.row_state = this.aircrafts.length > 0 ? this.aircrafts[0] : { renderFlight: {} };
}
positionArray: Array<any> = [];
positionArrayIndex: number = 0;
//输入框定位
inputPosition(filterData) {
positionArray: Array<any> = [];
positionArrayIndex: number = 0;
//输入框定位
inputPosition(filterData) {
let transArray = []
if (this.SEL_COL) {
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'))) {
if (element[sel_col]) {
if (element[sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
transArray.push(element)
}
} else {
@@ -321,10 +220,10 @@ inputPosition(filterData) {
});
} 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'))) {
for (const key in element) {
if (element.hasOwnProperty(key)) {
if (element[key]) {
if (element[key].toString().match(new RegExp(this.SEARCH, 'i'))) {
transArray.push(element)
break;
} else {
@@ -361,12 +260,5 @@ inputPosition(filterData) {
} else {
alert('没有搜索到相关数据');
}
this.changeDetectorRef.detectChanges();
let tr = $(".selected");
let objTr = tr[0];
$("#table-container").animate({ scrollTop: objTr.offsetTop - 42 }, "slow");
}
}
@@ -14,19 +14,19 @@
<input type="radio" [(ngModel)]="FLT_POS" [value]="2" name="filter-position">
<span>查找定位</span>
</label>
<input class="form-control" [(ngModel)]="SEARCH" type="text" (keyup.enter) = "inputEnter()">
<input class="form-control" [(ngModel)]="SEARCH" type="text" (keyup.enter) = "inputEnter()" id="inputerInfo">
</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">值机柜台编辑</button>
<button type="button" class="btn btn-info mr-3">打印</button> -->
<button type="button" class="btn btn-info mr-3">刷新</button>
<button type="button" class="btn btn-info mr-3" (click)="clearFiter()">刷新</button>
</div>
</div>
<div class="second-condition mb-3 row">
<div class="input-container mr-4">
<label for="">所属航站楼区域:&nbsp;&nbsp;</label>
<select class="form-control" [(ngModel)]="filterItems.HZ" (ngModelChange)="selectChange()">
<select class="form-control" [(ngModel)]="checkinDesks" (ngModelChange)="selectChange()" id="qy">
<option value=""></option>
<option value="GH">国内区域</option>
<option value="CH">国外区域</option>
@@ -35,7 +35,7 @@
</div>
<div class="input-container mr-4">
<label for="">值机岛:&nbsp;&nbsp;</label>
<select class="form-control" [(ngModel)]="filterItems.JJ" (ngModelChange)="selectChange()">
<select class="form-control" [(ngModel)]="checkinDesks" (ngModelChange)="selectChange()" id="zjd">
<option value=""></option>
<option value="A">A岛</option>
<option value="B">B岛</option>
@@ -44,7 +44,7 @@
</div>
<div class="input-container mr-4">
<label for="">行李传送带:&nbsp;&nbsp;</label>
<select class="form-control" [(ngModel)]="filterItems.ZY" (ngModelChange)="selectChange()">
<select class="form-control" [(ngModel)]="checkinDesks" (ngModelChange)="selectChange()" id="xl">
<option value=""></option>
<option value="X">X行李</option>
<option value="Z">Z行李</option>
@@ -60,24 +60,23 @@
<thead>
<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>航站楼区域</th>
<!-- <th *ngFor="let airline_col of checkindesk_lists">{{airline_col.COL_CN}}</th> -->
</tr>
</thead>
<tbody>
<tr *ngFor="let airline_row of render_data;let i = index" (click)="selectRow(airline_row)"
[ngClass]="{'selected':row_state['renderFlight']===airline_row['renderFlight']}">
<tr *ngFor="let checkinDesk of checkinDesks;let i = index">
<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>{{checkinDesk.checkindeskCode}}</td>
<td>{{checkinDesk.checkindeskName}}</td>
<td>{{checkinDesk.checkinGroupCode}}</td>
<td>{{checkinDesk.chutCode}}</td>
<td>{{checkinDesk.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> -->
</tr>
</tbody>
</table>
@@ -1,7 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { ChangeDetectorRef } from '@angular/core';
import { HttpClientService } from '../../../services/http-client.service';
import dateFormatter from '../../../utils/data-formatter';
import { BasicDataService } from '../../basic-data-service'
import { HttpParams } from '@angular/common/http';
import * as $ from 'jquery';
@Component({
@@ -13,189 +12,74 @@ export class CheckinDeskComponent implements OnInit {
constructor(
private httpCilent: HttpClientService,
private changeDetectorRef: ChangeDetectorRef
private basicDataService: BasicDataService
) { }
public raw_data: Array<object> = []; //原始数据,即航班计划
public combined_data: Array<object> = []; //组合数据,即链接航班,显示信息等组合好之后的数据
public render_data: Array<object> = []; //显示数据,即需要显示的数据
public checkindesk_lists: Array<object>; //列数据
public row_state: any = { renderFlight: {} };
// 搜索条件
SEARCH = ''; //手动输入条件
FLT_POS = 1; //过滤还是定位
SEL_COL = ''; //选择列名
public filterItems = {
HZ: '', //所属航站楼区域
JJ: '', //值机岛
ZY: '', //行李传送带
}
public formatter = {
'HZ': {
'GH': '国内区域',
'CH': '国际区域',
"QH": '其他区域'
},
'JJ': {
'A': 'A岛',
'B': 'B岛',
"C": 'C岛'
},
'ZY': {
'X': 'X行李',
'Z': 'Z行李',
"Y": 'Y行李'
},
'SODT': dateFormatter,
'ESTT': dateFormatter,
'ACTT': dateFormatter
}
selectRow(i) {
this.row_state = i;
this.changeDetectorRef.detectChanges();
}
getColor(col_CODE) {
if (col_CODE === 'SODT') {
return 'skyblue'
} else {
return null
}
}
checkinDesks : Array<any>;
public row_state: any = { renderFlight: {} };
public render_data: Array<object> = []; //显示数据,即需要显示的数据
ngOnInit() {
this.changeDetectorRef.detach();
/* 获取显示列 */
this.httpCilent.get('/assets/mock-data/checkindesk-code.json').subscribe(
data => {
data.sort(function (a, b) {
return (a['COL_ORDER'] - b['COL_ORDER']);
})
this.checkindesk_lists = data;
this.checkinDesks = this.basicDataService.checkin_desk;
this.basicDataService.checkin_desk_subject.subscribe(
data=>{
this.checkinDesks = data;
this.render_data = this.checkinDesks;
}
)
/* 获取值机柜台信息 */
this.httpCilent.get('/assets/mock-data/checkindesk-data.json').subscribe(
data => {
//解析数据
data.forEach(element => {
this.raw_data.push(JSON.parse(element.value));
});
let combined_linked_data = this.raw_data
combined_linked_data.forEach(element => {
let row_flights = {};
let render_flight = {};
let render_pre_flight = {};
let render_rea_flight = {};
row_flights['preFlight'] = element;
for (let i = 0; i < this.checkindesk_lists.length; i++) {
let key = this.checkindesk_lists[i]['COL_CODE']
render_flight[key] = typeof (this.formatter[key]) === 'function' ? this.formatter[key](row_flights['preFlight'][key], 1) : this.formatter[key] ? this.formatter[key][row_flights['preFlight'][key]] : row_flights['preFlight'][key];
}
row_flights['renderFlight'] = render_flight;
if (element['isLinked']) {
row_flights['preFlight'] = element['linkFlight'];
delete element['linkFlight'];
delete element['isLinked'];
row_flights['reaFlight'] = element;
for (let i = 0; i < this.checkindesk_lists.length; i++) {
let key = this.checkindesk_lists[i]['COL_CODE']
if (this.formatter.hasOwnProperty(key)) {
if (typeof (this.formatter[key]) === 'function') {
render_flight[key] = (row_flights['preFlight'][key] === row_flights['reaFlight'][key]) ? (this.formatter[key](row_flights['preFlight'][key], 1)) : (this.formatter[key](row_flights['preFlight'][key], 1) + '/' + this.formatter[key](row_flights['reaFlight'][key], 1));
render_pre_flight[key] = this.formatter[key](row_flights['preFlight'][key], 1);
render_rea_flight[key] = this.formatter[key](row_flights['reaFlight'][key], 1);
} else {
render_flight[key] = (row_flights['preFlight'][key] === row_flights['reaFlight'][key]) ? (this.formatter[key][row_flights['preFlight'][key]]) : (this.formatter[key][row_flights['preFlight'][key]] + '/' + this.formatter[key][row_flights['reaFlight'][key]]);
render_pre_flight[key] = this.formatter[key][row_flights['preFlight'][key]];
render_rea_flight[key] = this.formatter[key][row_flights['reaFlight'][key]];
}
} else {
render_flight[key] = (row_flights['preFlight'][key] === row_flights['reaFlight'][key]) ? (row_flights['preFlight'][key]) : (row_flights['preFlight'][key] + '/' + row_flights['reaFlight'][key]);
render_pre_flight[key] = row_flights['preFlight'][key];
render_rea_flight[key] = row_flights['reaFlight'][key];
}
}
row_flights['renderFlight'] = render_flight;
row_flights['renderPreFlight'] = render_pre_flight;
row_flights['renderReaFlight'] = render_rea_flight;
}
this.combined_data.push(row_flights);
})
//this.doSequence(this.combined_data);
this.render_data = this.combined_data
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);
/**
* 固定表头
*/
var tableCont = document.querySelector('#table-container');
function scrollHandle (){
var scrollTop = this.scrollTop;
this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
}
tableCont.addEventListener('scroll',scrollHandle);
}
/**
* 执行排序并渲染
*/
/* doSequence(sequenceData) {
sequenceData.forEach(element => {
element['ORDER'] = this.sequence(element);
})
sequenceData.sort(function (a, b) {
return (a['ORDER'] - b['ORDER']);
})
this.render_data = sequenceData;
this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
this.changeDetectorRef.detectChanges();
} */
/**
* 过滤及定位
* @param filterItems
* @return
*/
//刷新
clearFiter(){
$("#inputerInfo").val(""); //清空过滤或查找定位文本框
$("#qy").val(""); //清空所属航站楼区域
$("#zjd").val(""); //清空值机岛
$("#xl").val(""); //清空行李传送带
this.ngOnInit();
}
//输入框回车事件
inputEnter() {
if (this.FLT_POS === 1) {
this.selectChange()
} else {
this.selectChange()
this.inputPosition(this.render_data)
}
if (this.FLT_POS === 1) {
this.selectChange()
} else {
this.selectChange()
this.inputPosition(this.render_data)
}
}
//下拉框选择筛选
selectChange() {
let filter_data = [];
let filterItems = this.filterItems;
this.combined_data.forEach(item => {
let filtercheckinDesks = this.render_data;
this.render_data.forEach(item => {
filter_data.push(Object.assign({}, item));
})
if (this.FLT_POS === 1) {
this.inputFilter(filter_data);
} else {
this.checkinDesks = filter_data;
this.row_state = this.checkinDesks.length > 0 ? this.checkinDesks[0] : { renderFlight: {} };
}
//下拉框筛选
filter_data = filter_data.filter(item => {
if (item) {
let is_satis = true;
for (const key in filterItems) {
if (filterItems.hasOwnProperty(key) && filterItems[key]) {
if (item['preFlight'][key] === filterItems[key]) {
for (const key in filtercheckinDesks) {
if (filtercheckinDesks.hasOwnProperty(key) && filtercheckinDesks[key]) {
if (item[key] === filtercheckinDesks[key]) {
is_satis = true;
continue;
} else {
@@ -208,9 +92,9 @@ selectChange() {
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]) {
for (const key in filtercheckinDesks) {
if (filtercheckinDesks.hasOwnProperty(key) && filtercheckinDesks[key]) {
if (item[key] === filtercheckinDesks[key]) {
is_satis = true;
continue;
} else {
@@ -224,9 +108,9 @@ selectChange() {
} 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]) {
for (const key in filtercheckinDesks) {
if (filtercheckinDesks.hasOwnProperty(key) && filtercheckinDesks[key]) {
if (item[key] === filtercheckinDesks[key]) {
pre_satis = true;
continue;
} else {
@@ -236,9 +120,9 @@ selectChange() {
}
}
for (const key in filterItems) {
if (filterItems.hasOwnProperty(key) && filterItems[key]) {
if (item['reaFlight'][key] === filterItems[key]) {
for (const key in filtercheckinDesks) {
if (filtercheckinDesks.hasOwnProperty(key) && filtercheckinDesks[key]) {
if (item[key] === filtercheckinDesks[key]) {
rea_satis = true;
continue;
} else {
@@ -250,10 +134,10 @@ selectChange() {
}
if (pre_satis && !rea_satis) {
item['renderFlight'] = item['renderPreFlight'];
item = item;
return pre_satis;
} else if (!pre_satis && rea_satis) {
item['renderFlight'] = item['renderReaFlight'];
item = item;
return rea_satis;
} else if (pre_satis && rea_satis) {
return pre_satis && rea_satis;
@@ -262,24 +146,16 @@ selectChange() {
}
}
})
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) {
//输入框筛选
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'))) {
if (item[sel_col]) {
if (item[sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
return true;
}
} else {
@@ -294,10 +170,10 @@ inputFilter(filterData) {
} else {
filterData = filterData.filter(item => {
let is_satis = false;
for (const key in item['renderFlight']) {
if (item['renderFlight'].hasOwnProperty(key)) {
if (item['renderFlight'][key]) {
if (item['renderFlight'][key].toString().match(new RegExp(this.SEARCH, 'i'))) {
for (const key in item) {
if (item.hasOwnProperty(key)) {
if (item[key]) {
if (item[key].toString().match(new RegExp(this.SEARCH, 'i'))) {
is_satis = true;
break;
} else {
@@ -321,21 +197,20 @@ inputFilter(filterData) {
})
}
}
this.render_data = filterData;
this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
this.changeDetectorRef.detectChanges();
}
this.checkinDesks = filterData;
this.row_state = this.checkinDesks.length > 0 ? this.checkinDesks[0] : { renderFlight: {} };
}
positionArray: Array<any> = [];
positionArrayIndex: number = 0;
//输入框定位
inputPosition(filterData) {
positionArray: Array<any> = [];
positionArrayIndex: number = 0;
//输入框定位
inputPosition(filterData) {
let transArray = []
if (this.SEL_COL) {
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'))) {
if (element[sel_col]) {
if (element[sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
transArray.push(element)
}
} else {
@@ -346,10 +221,10 @@ inputPosition(filterData) {
});
} 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'))) {
for (const key in element) {
if (element.hasOwnProperty(key)) {
if (element[key]) {
if (element[key].toString().match(new RegExp(this.SEARCH, 'i'))) {
transArray.push(element)
break;
} else {
@@ -386,12 +261,5 @@ inputPosition(filterData) {
} else {
alert('没有搜索到相关数据');
}
this.changeDetectorRef.detectChanges();
let tr = $(".selected");
let objTr = tr[0];
$("#table-container").animate({ scrollTop: objTr.offsetTop - 42 }, "slow");
}
}
@@ -14,12 +14,12 @@
<input type="radio" [(ngModel)]="FLT_POS" [value]="2" name="filter-position">
<span>查找定位</span>
</label>
<input class="form-control" [(ngModel)]="SEARCH" type="text" (keyup.enter) = "inputEnter()">
<input class="form-control" [(ngModel)]="SEARCH" type="text" (keyup.enter) = "inputEnter()" id="inputerInfo">
</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">行李传送带编辑</button>
<button type="button" class="btn btn-info mr-3">打印</button> -->
<button type="button" class="btn btn-info mr-3">刷新</button>
<button type="button" class="btn btn-info mr-3" (click)="clearFiter()">刷新</button>
</div>
</div>
</div>
@@ -30,18 +30,17 @@
<thead>
<tr>
<th>序号</th>
<!-- <th>行李传送带代码</th>
<th>行李传送带名称</th> -->
<th *ngFor="let airline_col of chut_lists">{{airline_col.COL_CN}}</th>
<th>行李传送带代码</th>
<th>行李传送带名称</th>
<!-- <th *ngFor="let airline_col of chut_lists">{{airline_col.COL_CN}}</th> -->
</tr>
</thead>
<tbody>
<tr *ngFor="let airline_row of render_data;let i = index" (click)="selectRow(airline_row)"
[ngClass]="{'selected':row_state['renderFlight']===airline_row['renderFlight']}">
<tr *ngFor="let chut of chuts;let i = index">
<td>{{i+1}}</td>
<!-- <td>{{airline_col.chutCode}}</td>
<td>{{airline_col.chutName}}</td> -->
<td *ngFor="let airline_col of chut_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
<td>{{chut.chutCode}}</td>
<td>{{chut.chutName}}</td>
<!-- <td *ngFor="let airline_col of chut_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td> -->
</tr>
</tbody>
</table>
+149 -266
View File
@@ -1,7 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { ChangeDetectorRef } from '@angular/core';
import { HttpClientService } from '../../../services/http-client.service';
import dateFormatter from '../../../utils/data-formatter';
import { BasicDataService } from '../../basic-data-service'
import { HttpParams } from '@angular/common/http';
import * as $ from 'jquery';
@Component({
@@ -13,147 +12,41 @@ export class ChutComponent implements OnInit {
constructor(
private httpCilent: HttpClientService,
private changeDetectorRef: ChangeDetectorRef
private basicDataService: BasicDataService
) { }
public raw_data: Array<object> = []; //原始数据,即航班计划
public combined_data: Array<object> = []; //组合数据,即链接航班,显示信息等组合好之后的数据
public render_data: Array<object> = []; //显示数据,即需要显示的数据
public chut_lists: Array<object>; //列数据
public row_state: any = { renderFlight: {} };
// 搜索条件
SEARCH = ''; //手动输入条件
FLT_POS = 1; //过滤还是定位
SEL_COL = ''; //选择列名
public filterItems = {
}
public formatter = {
'SODT': dateFormatter,
'ESTT': dateFormatter,
'ACTT': dateFormatter
}
selectRow(i) {
this.row_state = i;
this.changeDetectorRef.detectChanges();
}
getColor(col_CODE) {
if (col_CODE === 'SODT') {
return 'skyblue'
} else {
return null
}
}
chuts : Array<any>;
public row_state: any = { renderFlight: {} };
public render_data: Array<object> = []; //显示数据,即需要显示的数据
ngOnInit() {
this.changeDetectorRef.detach();
/* 获取显示列 */
this.httpCilent.get('/assets/mock-data/chut-code.json').subscribe(
data => {
data.sort(function (a, b) {
return (a['COL_ORDER'] - b['COL_ORDER']);
})
this.chut_lists = data;
this.chuts = this.basicDataService.chut;
this.basicDataService.chut_subject.subscribe(
data=>{
this.chuts = data;
this.render_data = this.chuts;
}
)
/* 获取行李传送带信息 */
this.httpCilent.get('/assets/mock-data/chut-data.json').subscribe(
data => {
//解析数据
data.forEach(element => {
this.raw_data.push(JSON.parse(element.value));
});
let combined_linked_data = this.raw_data
combined_linked_data.forEach(element => {
let row_flights = {};
let render_flight = {};
let render_pre_flight = {};
let render_rea_flight = {};
row_flights['preFlight'] = element;
for (let i = 0; i < this.chut_lists.length; i++) {
let key = this.chut_lists[i]['COL_CODE']
render_flight[key] = typeof (this.formatter[key]) === 'function' ? this.formatter[key](row_flights['preFlight'][key], 1) : this.formatter[key] ? this.formatter[key][row_flights['preFlight'][key]] : row_flights['preFlight'][key];
}
row_flights['renderFlight'] = render_flight;if (element['isLinked']) {
row_flights['preFlight'] = element['linkFlight'];
delete element['linkFlight'];
delete element['isLinked'];
row_flights['reaFlight'] = element;
for (let i = 0; i < this.chut_lists.length; i++) {
let key = this.chut_lists[i]['COL_CODE']
if (this.formatter.hasOwnProperty(key)) {
if (typeof (this.formatter[key]) === 'function') {
render_flight[key] = (row_flights['preFlight'][key] === row_flights['reaFlight'][key]) ? (this.formatter[key](row_flights['preFlight'][key], 1)) : (this.formatter[key](row_flights['preFlight'][key], 1) + '/' + this.formatter[key](row_flights['reaFlight'][key], 1));
render_pre_flight[key] = this.formatter[key](row_flights['preFlight'][key], 1);
render_rea_flight[key] = this.formatter[key](row_flights['reaFlight'][key], 1);
} else {
render_flight[key] = (row_flights['preFlight'][key] === row_flights['reaFlight'][key]) ? (this.formatter[key][row_flights['preFlight'][key]]) : (this.formatter[key][row_flights['preFlight'][key]] + '/' + this.formatter[key][row_flights['reaFlight'][key]]);
render_pre_flight[key] = this.formatter[key][row_flights['preFlight'][key]];
render_rea_flight[key] = this.formatter[key][row_flights['reaFlight'][key]];
}
} else {
render_flight[key] = (row_flights['preFlight'][key] === row_flights['reaFlight'][key]) ? (row_flights['preFlight'][key]) : (row_flights['preFlight'][key] + '/' + row_flights['reaFlight'][key]);
render_pre_flight[key] = row_flights['preFlight'][key];
render_rea_flight[key] = row_flights['reaFlight'][key];
}
}
row_flights['renderFlight'] = render_flight;
row_flights['renderPreFlight'] = render_pre_flight;
row_flights['renderReaFlight'] = render_rea_flight;
}
this.combined_data.push(row_flights)
})
//this.doSequence(this.combined_data);
this.render_data = this.combined_data
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);
/**
* 固定表头
*/
var tableCont = document.querySelector('#table-container');
function scrollHandle (){
var scrollTop = this.scrollTop;
this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
}
tableCont.addEventListener('scroll',scrollHandle);
}
/**
* 执行排序并渲染
*/
/* doSequence(sequenceData) {
sequenceData.forEach(element => {
element['ORDER'] = this.sequence(element);
})
sequenceData.sort(function (a, b) {
return (a['ORDER'] - b['ORDER']);
})
this.render_data = sequenceData;
this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
this.changeDetectorRef.detectChanges();
} */
/**
* 过滤及定位
* @param filterItems
* @return
*/
//刷新
clearFiter(){
$("#inputerInfo").val(""); //清空过滤或查找定位文本框
this.ngOnInit();
}
//输入框回车事件
inputEnter() {
if (this.FLT_POS === 1) {
@@ -166,146 +59,143 @@ inputEnter() {
//下拉框选择筛选
selectChange() {
let filter_data = [];
let filterItems = this.filterItems;
this.combined_data.forEach(item => {
filter_data.push(Object.assign({}, item));
})
//下拉框筛选
filter_data = filter_data.filter(item => {
if (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;
}
let filter_data = [];
let filterchuts = this.render_data;
this.render_data.forEach(item => {
filter_data.push(Object.assign({}, item));
})
if (this.FLT_POS === 1) {
this.inputFilter(filter_data);
} else {
this.chuts = filter_data;
this.row_state = this.chuts.length > 0 ? this.chuts[0] : { renderFlight: {} };
}
//下拉框筛选
filter_data = filter_data.filter(item => {
if (item) {
let is_satis = true;
for (const key in filterchuts) {
if (filterchuts.hasOwnProperty(key) && filterchuts[key]) {
if (item[key] === filterchuts[key]) {
is_satis = true;
continue;
} else {
is_satis = false;
break;
}
}
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);
return is_satis;
} else if (item) {
let is_satis = true;
for (const key in filterchuts) {
if (filterchuts.hasOwnProperty(key) && filterchuts[key]) {
if (item[key] === filterchuts[key]) {
is_satis = true;
continue;
} else {
is_satis = false;
break;
}
}
}
return is_satis;
} 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();
let pre_satis = true;
let rea_satis = true;
for (const key in filterchuts) {
if (filterchuts.hasOwnProperty(key) && filterchuts[key]) {
if (item[key] === filterchuts[key]) {
pre_satis = true;
continue;
} else {
pre_satis = false;
break;
}
}
}
for (const key in filterchuts) {
if (filterchuts.hasOwnProperty(key) && filterchuts[key]) {
if (item[key] === filterchuts[key]) {
rea_satis = true;
continue;
} else {
rea_satis = false;
break;
}
}
}
if (pre_satis && !rea_satis) {
item = item;
return pre_satis;
} else if (!pre_satis && rea_satis) {
item = item;
return rea_satis;
} else if (pre_satis && rea_satis) {
return pre_satis && rea_satis;
} else {
return false;
}
}
})
}
//输入框筛选
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;
}
if (this.SEARCH) {
if (this.SEL_COL) {
let sel_col = this.SEL_COL;
filterData = filterData.filter(item => {
if (item[sel_col]) {
if (item[sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
return true;
}
})
} else {
if (this.SEARCH) {
return false;
} else {
return true;
}
}
})
} else {
filterData = filterData.filter(item => {
let is_satis = false;
for (const key in item['renderFlight']) {
if (item['renderFlight'].hasOwnProperty(key)) {
if (item['renderFlight'][key]) {
if (item['renderFlight'][key].toString().match(new RegExp(this.SEARCH, 'i'))) {
is_satis = true;
break;
} else {
is_satis = false;
continue;
}
} else {
filterData = filterData.filter(item => {
let is_satis = false;
for (const key in item) {
if (item.hasOwnProperty(key)) {
if (item[key]) {
if (item[key].toString().match(new RegExp(this.SEARCH, 'i'))) {
is_satis = true;
break;
} else {
if (this.SEARCH) {
is_satis = false;
continue;
} else {
is_satis = true;
break;
}
is_satis = false;
continue;
}
} else {
continue;
if (this.SEARCH) {
is_satis = false;
continue;
} else {
is_satis = true;
break;
}
}
} else {
continue;
}
return is_satis;
})
}
}
return is_satis;
})
}
this.render_data = filterData;
this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
this.changeDetectorRef.detectChanges();
}
this.chuts = filterData;
this.row_state = this.chuts.length > 0 ? this.chuts[0] : { renderFlight: {} };
}
positionArray: Array<any> = [];
@@ -316,8 +206,8 @@ inputPosition(filterData) {
if (this.SEL_COL) {
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'))) {
if (element[sel_col]) {
if (element[sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
transArray.push(element)
}
} else {
@@ -328,10 +218,10 @@ inputPosition(filterData) {
});
} 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'))) {
for (const key in element) {
if (element.hasOwnProperty(key)) {
if (element[key]) {
if (element[key].toString().match(new RegExp(this.SEARCH, 'i'))) {
transArray.push(element)
break;
} else {
@@ -368,12 +258,5 @@ inputPosition(filterData) {
} else {
alert('没有搜索到相关数据');
}
this.changeDetectorRef.detectChanges();
let tr = $(".selected");
let objTr = tr[0];
$("#table-container").animate({ scrollTop: objTr.offsetTop - 42 }, "slow");
}
}
@@ -14,7 +14,7 @@
<input type="radio" [(ngModel)]="FLT_POS" [value]="2" name="filter-position">
<span>查找定位</span>
</label>
<input class="form-control" [(ngModel)]="SEARCH" type="text" (keyup.enter) = "inputEnter()">
<input class="form-control" [(ngModel)]="SEARCH" type="text" (keyup.enter) = "inputEnter()" id="inputerInfo">
</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">打印</button>
@@ -22,7 +22,7 @@
<button type="button" class="btn btn-info mr-3">国家登记</button>
<button type="button" class="btn btn-info mr-3">洲/地区登记</button>
<button type="button" class="btn btn-info mr-3">定制查询</button> -->
<button type="button" class="btn btn-info mr-3">刷新</button>
<button type="button" class="btn btn-info mr-3" (click)="clearFiter()">刷新</button>
</div>
</div>
@@ -37,7 +37,7 @@
</div>
<div class="input-container mr-4">
<label for="">国家:&nbsp;&nbsp;</label>
<select class="form-control" [(ngModel)]="filterItems.ZY" (ngModelChange)="selectChange()">
<select class="form-control" [(ngModel)]="citys" (ngModelChange)="selectChange()" id="citry">
<option value=""></option>
<option value="ZG">中国</option>
<option value="MG">美国</option>
@@ -64,22 +64,21 @@
<thead>
<tr>
<th>序号</th>
<!-- <th>城市代码</th>
<th>城市代码</th>
<th>城市中文名</th>
<th>城市英文名</th>
<th>所在国家</th> -->
<th *ngFor="let airline_col of city_lists">{{airline_col.COL_CN}}</th>
<th>所在国家</th>
<!-- <th *ngFor="let airline_col of city_lists">{{airline_col.COL_CN}}</th> -->
</tr>
</thead>
<tbody>
<tr *ngFor="let airline_row of render_data;let i = index" (click)="selectRow(airline_row)"
[ngClass]="{'selected':row_state['renderFlight']===airline_row['renderFlight']}">
<tr *ngFor="let city of citys;let i = index">
<td>{{i+1}}</td>
<!-- <td>{{airline_col.cityCode}}</td>
<td>{{airline_col.cityNameChn}}</td>
<td>{{airline_col.cityNameEng}}</td>
<td>{{airline_col.countryId}}</td> -->
<td *ngFor="let airline_col of city_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
<td>{{city.cityCode}}</td>
<td>{{city.cityNameChn}}</td>
<td>{{city.cityNameEng}}</td>
<td>{{city.countryId}}</td>
<!-- <td *ngFor="let airline_col of city_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td> -->
</tr>
</tbody>
</table>
+74 -177
View File
@@ -1,7 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { ChangeDetectorRef } from '@angular/core';
import { HttpClientService } from '../../../services/http-client.service';
import dateFormatter from '../../../utils/data-formatter';
import { BasicDataService } from '../../basic-data-service'
import { HttpParams } from '@angular/common/http';
import * as $ from 'jquery';
@Component({
@@ -13,158 +12,72 @@ export class CityComponent implements OnInit {
constructor(
private httpCilent: HttpClientService,
private changeDetectorRef: ChangeDetectorRef
private basicDataService: BasicDataService
) { }
public raw_data: Array<object> = []; //原始数据,即航班计划
public combined_data: Array<object> = []; //组合数据,即链接航班,显示信息等组合好之后的数据
public render_data: Array<object> = []; //显示数据,即需要显示的数据
public city_lists: Array<object>; //列数据
public row_state: any = { renderFlight: {} };
// 搜索条件
SEARCH = ''; //手动输入条件
FLT_POS = 1; //过滤还是定位
SEL_COL = ''; //选择列名
public filterItems = {
ZY: '', //所在国家
}
public formatter = {
'ZY': {
'ZG': '中国',
'MG': '美国',
"YG": '英国'
},
'SODT': dateFormatter,
'ESTT': dateFormatter,
'ACTT': dateFormatter
}
selectRow(i) {
this.row_state = i;
this.changeDetectorRef.detectChanges();
}
getColor(col_CODE) {
if (col_CODE === 'SODT') {
return 'skyblue'
} else {
return null
}
}
citys : Array<any>;
public row_state: any = { renderFlight: {} };
public render_data: Array<object> = []; //显示数据,即需要显示的数据
ngOnInit() {
this.changeDetectorRef.detach();
/* 获取显示列 */
this.httpCilent.get('/assets/mock-data/city-code.json').subscribe(
data => {
data.sort(function (a, b) {
return (a['COL_ORDER'] - b['COL_ORDER']);
})
this.city_lists = data;
}
)
/* 获取城市信息 */
this.httpCilent.get('/assets/mock-data/city-data.json').subscribe(
data => {
//解析数据
data.forEach(element => {
this.raw_data.push(JSON.parse(element.value));
});
let combined_linked_data = this.raw_data
combined_linked_data.forEach(element => {
let row_flights = {};
let render_flight = {};
let render_pre_flight = {};
let render_rea_flight = {};
row_flights['preFlight'] = element;
for (let i = 0; i < this.city_lists.length; i++) {
let key = this.city_lists[i]['COL_CODE']
render_flight[key] = typeof (this.formatter[key]) === 'function' ? this.formatter[key](row_flights['preFlight'][key], 1) : this.formatter[key] ? this.formatter[key][row_flights['preFlight'][key]] : row_flights['preFlight'][key];
}
row_flights['renderFlight'] = render_flight;
if (element['isLinked']) {
row_flights['preFlight'] = element['linkFlight'];
delete element['linkFlight'];
delete element['isLinked'];
row_flights['reaFlight'] = element;
for (let i = 0; i < this.city_lists.length; i++) {
let key = this.city_lists[i]['COL_CODE']
if (this.formatter.hasOwnProperty(key)) {
if (typeof (this.formatter[key]) === 'function') {
render_flight[key] = (row_flights['preFlight'][key] === row_flights['reaFlight'][key]) ? (this.formatter[key](row_flights['preFlight'][key], 1)) : (this.formatter[key](row_flights['preFlight'][key], 1) + '/' + this.formatter[key](row_flights['reaFlight'][key], 1));
render_pre_flight[key] = this.formatter[key](row_flights['preFlight'][key], 1);
render_rea_flight[key] = this.formatter[key](row_flights['reaFlight'][key], 1);
} else {
render_flight[key] = (row_flights['preFlight'][key] === row_flights['reaFlight'][key]) ? (this.formatter[key][row_flights['preFlight'][key]]) : (this.formatter[key][row_flights['preFlight'][key]] + '/' + this.formatter[key][row_flights['reaFlight'][key]]);
render_pre_flight[key] = this.formatter[key][row_flights['preFlight'][key]];
render_rea_flight[key] = this.formatter[key][row_flights['reaFlight'][key]];
}
} else {
render_flight[key] = (row_flights['preFlight'][key] === row_flights['reaFlight'][key]) ? (row_flights['preFlight'][key]) : (row_flights['preFlight'][key] + '/' + row_flights['reaFlight'][key]);
render_pre_flight[key] = row_flights['preFlight'][key];
render_rea_flight[key] = row_flights['reaFlight'][key];
}
}
row_flights['renderFlight'] = render_flight;
row_flights['renderPreFlight'] = render_pre_flight;
row_flights['renderReaFlight'] = render_rea_flight;
}
this.combined_data.push(row_flights)
})
this.render_data = this.combined_data
this.changeDetectorRef.detectChanges();
this.citys = this.basicDataService.city;
this.basicDataService.city_subject.subscribe(
data=>{
this.citys = data;
this.render_data = this.citys;
}
)
/**
* 固定表头
*/
var tableCont = document.querySelector('#table-container');
function scrollHandle (){
var scrollTop = this.scrollTop;
this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
}
tableCont.addEventListener('scroll',scrollHandle);
* 固定表头
*/
var tableCont = document.querySelector('#table-container');
function scrollHandle (){
var scrollTop = this.scrollTop;
this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
}
tableCont.addEventListener('scroll',scrollHandle);
}
//刷新
clearFiter(){
$("#inputerInfo").val(""); //清空过滤或查找定位文本框
$("#citry").val(""); //清空所国家
this.ngOnInit();
}
/**
* 过滤及定位
* @param filterItems
* @return
*/
//输入框回车事件
inputEnter() {
if (this.FLT_POS === 1) {
this.selectChange()
} else {
this.selectChange()
this.inputPosition(this.render_data)
}
if (this.FLT_POS === 1) {
this.selectChange()
} else {
this.selectChange()
this.inputPosition(this.render_data)
}
}
//下拉框选择筛选
selectChange() {
let filter_data = [];
let filterItems = this.filterItems;
this.combined_data.forEach(item => {
let filtercitys = this.render_data;
this.render_data.forEach(item => {
filter_data.push(Object.assign({}, item));
})
if (this.FLT_POS === 1) {
this.inputFilter(filter_data);
} else {
this.citys = filter_data;
this.row_state = this.citys.length > 0 ? this.citys[0] : { renderFlight: {} };
}
//下拉框筛选
filter_data = filter_data.filter(item => {
if (item) {
let is_satis = true;
for (const key in filterItems) {
if (filterItems.hasOwnProperty(key) && filterItems[key]) {
if (item['preFlight'][key] === filterItems[key]) {
for (const key in filtercitys) {
if (filtercitys.hasOwnProperty(key) && filtercitys[key]) {
if (item[key] === filtercitys[key]) {
is_satis = true;
continue;
} else {
@@ -177,9 +90,9 @@ selectChange() {
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]) {
for (const key in filtercitys) {
if (filtercitys.hasOwnProperty(key) && filtercitys[key]) {
if (item[key] === filtercitys[key]) {
is_satis = true;
continue;
} else {
@@ -193,9 +106,9 @@ selectChange() {
} 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]) {
for (const key in filtercitys) {
if (filtercitys.hasOwnProperty(key) && filtercitys[key]) {
if (item[key] === filtercitys[key]) {
pre_satis = true;
continue;
} else {
@@ -205,9 +118,9 @@ selectChange() {
}
}
for (const key in filterItems) {
if (filterItems.hasOwnProperty(key) && filterItems[key]) {
if (item['reaFlight'][key] === filterItems[key]) {
for (const key in filtercitys) {
if (filtercitys.hasOwnProperty(key) && filtercitys[key]) {
if (item[key] === filtercitys[key]) {
rea_satis = true;
continue;
} else {
@@ -219,10 +132,10 @@ selectChange() {
}
if (pre_satis && !rea_satis) {
item['renderFlight'] = item['renderPreFlight'];
item = item;
return pre_satis;
} else if (!pre_satis && rea_satis) {
item['renderFlight'] = item['renderReaFlight'];
item = item;
return rea_satis;
} else if (pre_satis && rea_satis) {
return pre_satis && rea_satis;
@@ -231,24 +144,16 @@ selectChange() {
}
}
})
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) {
//输入框筛选
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'))) {
if (item[sel_col]) {
if (item[sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
return true;
}
} else {
@@ -263,10 +168,10 @@ inputFilter(filterData) {
} else {
filterData = filterData.filter(item => {
let is_satis = false;
for (const key in item['renderFlight']) {
if (item['renderFlight'].hasOwnProperty(key)) {
if (item['renderFlight'][key]) {
if (item['renderFlight'][key].toString().match(new RegExp(this.SEARCH, 'i'))) {
for (const key in item) {
if (item.hasOwnProperty(key)) {
if (item[key]) {
if (item[key].toString().match(new RegExp(this.SEARCH, 'i'))) {
is_satis = true;
break;
} else {
@@ -290,21 +195,20 @@ inputFilter(filterData) {
})
}
}
this.render_data = filterData;
this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
this.changeDetectorRef.detectChanges();
}
this.citys = filterData;
this.row_state = this.citys.length > 0 ? this.citys[0] : { renderFlight: {} };
}
positionArray: Array<any> = [];
positionArrayIndex: number = 0;
//输入框定位
inputPosition(filterData) {
positionArray: Array<any> = [];
positionArrayIndex: number = 0;
//输入框定位
inputPosition(filterData) {
let transArray = []
if (this.SEL_COL) {
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'))) {
if (element[sel_col]) {
if (element[sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
transArray.push(element)
}
} else {
@@ -315,10 +219,10 @@ inputPosition(filterData) {
});
} 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'))) {
for (const key in element) {
if (element.hasOwnProperty(key)) {
if (element[key]) {
if (element[key].toString().match(new RegExp(this.SEARCH, 'i'))) {
transArray.push(element)
break;
} else {
@@ -355,12 +259,5 @@ inputPosition(filterData) {
} else {
alert('没有搜索到相关数据');
}
this.changeDetectorRef.detectChanges();
let tr = $(".selected");
let objTr = tr[0];
$("#table-container").animate({ scrollTop: objTr.offsetTop - 42 }, "slow");
}
}
@@ -14,12 +14,12 @@
<input type="radio" [(ngModel)]="FLT_POS" [value]="2" name="filter-position">
<span>查找定位</span>
</label>
<input class="form-control" [(ngModel)]="SEARCH" type="text" (keyup.enter) = "inputEnter()">
<input class="form-control" [(ngModel)]="SEARCH" type="text" (keyup.enter) = "inputEnter()" id="inputerInfo">
</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">航站楼区域编辑</button>
<button type="button" class="btn btn-info mr-3">打印</button> -->
<button type="button" class="btn btn-info mr-3">刷新</button>
<button type="button" class="btn btn-info mr-3" (click)="clearFiter()">刷新</button>
</div>
</div>
</div>
@@ -30,18 +30,17 @@
<thead>
<tr>
<th>序号</th>
<!-- <th>航站楼区域代码</th>
<th>航站楼区域名称</th> -->
<th *ngFor="let airline_col of terminalarea_lists">{{airline_col.COL_CN}}</th>
<th>航站楼区域代码</th>
<th>航站楼区域名称</th>
<!-- <th *ngFor="let airline_col of terminalarea_lists">{{airline_col.COL_CN}}</th> -->
</tr>
</thead>
<tbody>
<tr *ngFor="let airline_row of render_data;let i = index" (click)="selectRow(airline_row)"
[ngClass]="{'selected':row_state['renderFlight']===airline_row['renderFlight']}">
<tr *ngFor="let terminalArea of terminalAreas;let i = index">
<td>{{i+1}}</td>
<!-- <td>{{airline_col.terminalAreaCode}}</td>
<td>{{airline_col.terminalAreaName}}</td> -->
<td *ngFor="let airline_col of terminalarea_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
<td>{{terminalArea.terminalAreaCode}}</td>
<td>{{terminalArea.terminalAreaName}}</td>
<!-- <td *ngFor="let airline_col of terminalarea_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td> -->
</tr>
</tbody>
</table>
@@ -1,7 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { ChangeDetectorRef } from '@angular/core';
import { HttpClientService } from '../../../services/http-client.service';
import dateFormatter from '../../../utils/data-formatter';
import { BasicDataService } from '../../basic-data-service'
import { HttpParams } from '@angular/common/http';
import * as $ from 'jquery';
@Component({
@@ -13,154 +12,71 @@ export class TerminalAreaComponent implements OnInit {
constructor(
private httpCilent: HttpClientService,
private changeDetectorRef: ChangeDetectorRef
private basicDataService: BasicDataService
) { }
public raw_data: Array<object> = []; //原始数据,即航班计划
public combined_data: Array<object> = []; //组合数据,即链接航班,显示信息等组合好之后的数据
public render_data: Array<object> = []; //显示数据,即需要显示的数据
public terminalarea_lists: Array<object>; //列数据
public row_state: any = { renderFlight: {} };
// 搜索条件
SEARCH = ''; //手动输入条件
FLT_POS = 1; //过滤还是定位
SEL_COL = ''; //选择列名
public filterItems = {
}
public formatter = {
'SODT': dateFormatter,
'ESTT': dateFormatter,
'ACTT': dateFormatter
}
selectRow(i) {
this.row_state = i;
this.changeDetectorRef.detectChanges();
}
getColor(col_CODE) {
if (col_CODE === 'SODT') {
return 'skyblue'
} else {
return null
}
}
terminalAreas : Array<any>;
public row_state: any = { renderFlight: {} };
public render_data: Array<object> = []; //显示数据,即需要显示的数据
ngOnInit() {
this.changeDetectorRef.detach();
/* 获取显示列 */
this.httpCilent.get('/assets/mock-data/terminal-area-code.json').subscribe(
data => {
data.sort(function (a, b) {
return (a['COL_ORDER'] - b['COL_ORDER']);
})
this.terminalarea_lists = data;
this.terminalAreas = this.basicDataService.terminal_area;
this.basicDataService.terminal_area_subject.subscribe(
data=>{
this.terminalAreas = data;
this.render_data = this.terminalAreas;
}
)
/* 获取航站楼区域信息 */
this.httpCilent.get('/assets/mock-data/terminal-area-data.json').subscribe(
data => {
//解析数据
data.forEach(element => {
this.raw_data.push(JSON.parse(element.value));
});
let combined_linked_data = this.raw_data
combined_linked_data.forEach(element => {
let row_flights = {};
let render_flight = {};
let render_pre_flight = {};
let render_rea_flight = {};
row_flights['preFlight'] = element;
for (let i = 0; i < this.terminalarea_lists.length; i++) {
let key = this.terminalarea_lists[i]['COL_CODE']
render_flight[key] = typeof (this.formatter[key]) === 'function' ? this.formatter[key](row_flights['preFlight'][key], 1) : this.formatter[key] ? this.formatter[key][row_flights['preFlight'][key]] : row_flights['preFlight'][key];
}
row_flights['renderFlight'] = render_flight;
if (element['isLinked']) {
row_flights['preFlight'] = element['linkFlight'];
delete element['linkFlight'];
delete element['isLinked'];
row_flights['reaFlight'] = element;
for (let i = 0; i < this.terminalarea_lists.length; i++) {
let key = this.terminalarea_lists[i]['COL_CODE']
if (this.formatter.hasOwnProperty(key)) {
if (typeof (this.formatter[key]) === 'function') {
render_flight[key] = (row_flights['preFlight'][key] === row_flights['reaFlight'][key]) ? (this.formatter[key](row_flights['preFlight'][key], 1)) : (this.formatter[key](row_flights['preFlight'][key], 1) + '/' + this.formatter[key](row_flights['reaFlight'][key], 1));
render_pre_flight[key] = this.formatter[key](row_flights['preFlight'][key], 1);
render_rea_flight[key] = this.formatter[key](row_flights['reaFlight'][key], 1);
} else {
render_flight[key] = (row_flights['preFlight'][key] === row_flights['reaFlight'][key]) ? (this.formatter[key][row_flights['preFlight'][key]]) : (this.formatter[key][row_flights['preFlight'][key]] + '/' + this.formatter[key][row_flights['reaFlight'][key]]);
render_pre_flight[key] = this.formatter[key][row_flights['preFlight'][key]];
render_rea_flight[key] = this.formatter[key][row_flights['reaFlight'][key]];
}
} else {
render_flight[key] = (row_flights['preFlight'][key] === row_flights['reaFlight'][key]) ? (row_flights['preFlight'][key]) : (row_flights['preFlight'][key] + '/' + row_flights['reaFlight'][key]);
render_pre_flight[key] = row_flights['preFlight'][key];
render_rea_flight[key] = row_flights['reaFlight'][key];
}
}
row_flights['renderFlight'] = render_flight;
row_flights['renderPreFlight'] = render_pre_flight;
row_flights['renderReaFlight'] = render_rea_flight;
}
this.combined_data.push(row_flights)
})
this.render_data = this.combined_data
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);
}
/**
* 过滤及定位
* @param filterItems
* @return
*/
* 固定表头
*/
var tableCont = document.querySelector('#table-container');
function scrollHandle (){
var scrollTop = this.scrollTop;
this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
}
tableCont.addEventListener('scroll',scrollHandle);
}
//刷新
clearFiter(){
$("#inputerInfo").val(""); //清空过滤或查找定位文本框
this.ngOnInit();
}
//输入框回车事件
inputEnter() {
if (this.FLT_POS === 1) {
this.selectChange()
} else {
this.selectChange()
this.inputPosition(this.render_data)
}
if (this.FLT_POS === 1) {
this.selectChange()
} else {
this.selectChange()
this.inputPosition(this.render_data)
}
}
//下拉框选择筛选
selectChange() {
let filter_data = [];
let filterItems = this.filterItems;
this.combined_data.forEach(item => {
let filterterminalAreas = this.render_data;
this.render_data.forEach(item => {
filter_data.push(Object.assign({}, item));
})
if (this.FLT_POS === 1) {
this.inputFilter(filter_data);
} else {
this.terminalAreas = filter_data;
this.row_state = this.terminalAreas.length > 0 ? this.terminalAreas[0] : { renderFlight: {} };
}
//下拉框筛选
filter_data = filter_data.filter(item => {
if (item) {
let is_satis = true;
for (const key in filterItems) {
if (filterItems.hasOwnProperty(key) && filterItems[key]) {
if (item['preFlight'][key] === filterItems[key]) {
for (const key in filterterminalAreas) {
if (filterterminalAreas.hasOwnProperty(key) && filterterminalAreas[key]) {
if (item[key] === filterterminalAreas[key]) {
is_satis = true;
continue;
} else {
@@ -173,9 +89,9 @@ selectChange() {
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]) {
for (const key in filterterminalAreas) {
if (filterterminalAreas.hasOwnProperty(key) && filterterminalAreas[key]) {
if (item[key] === filterterminalAreas[key]) {
is_satis = true;
continue;
} else {
@@ -189,9 +105,9 @@ selectChange() {
} 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]) {
for (const key in filterterminalAreas) {
if (filterterminalAreas.hasOwnProperty(key) && filterterminalAreas[key]) {
if (item[key] === filterterminalAreas[key]) {
pre_satis = true;
continue;
} else {
@@ -201,9 +117,9 @@ selectChange() {
}
}
for (const key in filterItems) {
if (filterItems.hasOwnProperty(key) && filterItems[key]) {
if (item['reaFlight'][key] === filterItems[key]) {
for (const key in filterterminalAreas) {
if (filterterminalAreas.hasOwnProperty(key) && filterterminalAreas[key]) {
if (item[key] === filterterminalAreas[key]) {
rea_satis = true;
continue;
} else {
@@ -215,10 +131,10 @@ selectChange() {
}
if (pre_satis && !rea_satis) {
item['renderFlight'] = item['renderPreFlight'];
item = item;
return pre_satis;
} else if (!pre_satis && rea_satis) {
item['renderFlight'] = item['renderReaFlight'];
item = item;
return rea_satis;
} else if (pre_satis && rea_satis) {
return pre_satis && rea_satis;
@@ -227,24 +143,16 @@ selectChange() {
}
}
})
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) {
//输入框筛选
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'))) {
if (item[sel_col]) {
if (item[sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
return true;
}
} else {
@@ -259,10 +167,10 @@ inputFilter(filterData) {
} else {
filterData = filterData.filter(item => {
let is_satis = false;
for (const key in item['renderFlight']) {
if (item['renderFlight'].hasOwnProperty(key)) {
if (item['renderFlight'][key]) {
if (item['renderFlight'][key].toString().match(new RegExp(this.SEARCH, 'i'))) {
for (const key in item) {
if (item.hasOwnProperty(key)) {
if (item[key]) {
if (item[key].toString().match(new RegExp(this.SEARCH, 'i'))) {
is_satis = true;
break;
} else {
@@ -286,21 +194,20 @@ inputFilter(filterData) {
})
}
}
this.render_data = filterData;
this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
this.changeDetectorRef.detectChanges();
}
this.terminalAreas = filterData;
this.row_state = this.terminalAreas.length > 0 ? this.terminalAreas[0] : { renderFlight: {} };
}
positionArray: Array<any> = [];
positionArrayIndex: number = 0;
//输入框定位
inputPosition(filterData) {
positionArray: Array<any> = [];
positionArrayIndex: number = 0;
//输入框定位
inputPosition(filterData) {
let transArray = []
if (this.SEL_COL) {
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'))) {
if (element[sel_col]) {
if (element[sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
transArray.push(element)
}
} else {
@@ -311,10 +218,10 @@ inputPosition(filterData) {
});
} 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'))) {
for (const key in element) {
if (element.hasOwnProperty(key)) {
if (element[key]) {
if (element[key].toString().match(new RegExp(this.SEARCH, 'i'))) {
transArray.push(element)
break;
} else {
@@ -351,12 +258,5 @@ inputPosition(filterData) {
} else {
alert('没有搜索到相关数据');
}
this.changeDetectorRef.detectChanges();
let tr = $(".selected");
let objTr = tr[0];
$("#table-container").animate({ scrollTop: objTr.offsetTop - 42 }, "slow");
}
}
@@ -14,12 +14,12 @@
<input type="radio" [(ngModel)]="FLT_POS" [value]="2" name="filter-position">
<span>查找定位</span>
</label>
<input class="form-control" [(ngModel)]="SEARCH" type="text" (keyup.enter) = "inputEnter()">
<input class="form-control" [(ngModel)]="SEARCH" type="text" (keyup.enter) = "inputEnter()" id="inputerInfo">
</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">航站楼编辑</button>
<button type="button" class="btn btn-info mr-3">打印</button> -->
<button type="button" class="btn btn-info mr-3">刷新</button>
<button type="button" class="btn btn-info mr-3" (click)="clearFiter()">刷新</button>
</div>
</div>
</div>
@@ -30,18 +30,17 @@
<thead>
<tr>
<th>序号</th>
<!-- <th>航站楼代码</th>
<th>航站楼名称</th> -->
<th *ngFor="let airline_col of terminal_lists">{{airline_col.COL_CN}}</th>
<th>航站楼代码</th>
<th>航站楼名称</th>
<!-- <th *ngFor="let airline_col of terminal_lists">{{airline_col.COL_CN}}</th> -->
</tr>
</thead>
<tbody>
<tr *ngFor="let airline_row of render_data;let i = index" (click)="selectRow(airline_row)"
[ngClass]="{'selected':row_state['renderFlight']===airline_row['renderFlight']}">
<tr *ngFor="let terminal of terminals;let i = index">
<td>{{i+1}}</td>
<!-- <td>{{airline_col.terminalCode}}</td>
<td>{{airline_col.terminalName}}</td> -->
<td *ngFor="let airline_col of terminal_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
<td>{{terminal.terminalCode}}</td>
<td>{{terminal.terminalName}}</td>
<!-- <td *ngFor="let airline_col of terminal_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td> -->
</tr>
</tbody>
</table>
@@ -1,7 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { ChangeDetectorRef } from '@angular/core';
import { HttpClientService } from '../../../services/http-client.service';
import dateFormatter from '../../../utils/data-formatter';
import { BasicDataService } from '../../basic-data-service'
import { HttpParams } from '@angular/common/http';
import * as $ from 'jquery';
@Component({
@@ -13,147 +12,41 @@ export class TerminalComponent implements OnInit {
constructor(
private httpCilent: HttpClientService,
private changeDetectorRef: ChangeDetectorRef
private basicDataService: BasicDataService
) { }
public raw_data: Array<object> = []; //原始数据,即航班计划
public combined_data: Array<object> = []; //组合数据,即链接航班,显示信息等组合好之后的数据
public render_data: Array<object> = []; //显示数据,即需要显示的数据
public terminal_lists: Array<object>; //列数据
public row_state: any = { renderFlight: {} };
// 搜索条件
SEARCH = ''; //手动输入条件
FLT_POS = 1; //过滤还是定位
SEL_COL = ''; //选择列名
public filterItems = {
}
public formatter = {
'SODT': dateFormatter,
'ESTT': dateFormatter,
'ACTT': dateFormatter
}
selectRow(i) {
this.row_state = i;
this.changeDetectorRef.detectChanges();
}
getColor(col_CODE) {
if (col_CODE === 'SODT') {
return 'skyblue'
} else {
return null
}
}
terminals : Array<any>;
public row_state: any = { renderFlight: {} };
public render_data: Array<object> = []; //显示数据,即需要显示的数据
ngOnInit() {
this.changeDetectorRef.detach();
/* 获取显示列 */
this.httpCilent.get('/assets/mock-data/terminal-code.json').subscribe(
data => {
data.sort(function (a, b) {
return (a['COL_ORDER'] - b['COL_ORDER']);
})
this.terminal_lists = data;
this.terminals = this.basicDataService.terminal;
this.basicDataService.terminal_subject.subscribe(
data=>{
this.terminals = data;
this.render_data = this.terminals;
}
)
/* 获取航站楼信息 */
this.httpCilent.get('/assets/mock-data/terminal-data.json').subscribe(
data => {
//解析数据
data.forEach(element => {
this.raw_data.push(JSON.parse(element.value));
});
let combined_linked_data = this.raw_data
combined_linked_data.forEach(element => {
let row_flights = {};
let render_flight = {};
let render_pre_flight = {};
let render_rea_flight = {};
row_flights['preFlight'] = element;
for (let i = 0; i < this.terminal_lists.length; i++) {
let key = this.terminal_lists[i]['COL_CODE']
render_flight[key] = typeof (this.formatter[key]) === 'function' ? this.formatter[key](row_flights['preFlight'][key], 1) : this.formatter[key] ? this.formatter[key][row_flights['preFlight'][key]] : row_flights['preFlight'][key];
}
row_flights['renderFlight'] = render_flight;if (element['isLinked']) {
row_flights['preFlight'] = element['linkFlight'];
delete element['linkFlight'];
delete element['isLinked'];
row_flights['reaFlight'] = element;
for (let i = 0; i < this.terminal_lists.length; i++) {
let key = this.terminal_lists[i]['COL_CODE']
if (this.formatter.hasOwnProperty(key)) {
if (typeof (this.formatter[key]) === 'function') {
render_flight[key] = (row_flights['preFlight'][key] === row_flights['reaFlight'][key]) ? (this.formatter[key](row_flights['preFlight'][key], 1)) : (this.formatter[key](row_flights['preFlight'][key], 1) + '/' + this.formatter[key](row_flights['reaFlight'][key], 1));
render_pre_flight[key] = this.formatter[key](row_flights['preFlight'][key], 1);
render_rea_flight[key] = this.formatter[key](row_flights['reaFlight'][key], 1);
} else {
render_flight[key] = (row_flights['preFlight'][key] === row_flights['reaFlight'][key]) ? (this.formatter[key][row_flights['preFlight'][key]]) : (this.formatter[key][row_flights['preFlight'][key]] + '/' + this.formatter[key][row_flights['reaFlight'][key]]);
render_pre_flight[key] = this.formatter[key][row_flights['preFlight'][key]];
render_rea_flight[key] = this.formatter[key][row_flights['reaFlight'][key]];
}
} else {
render_flight[key] = (row_flights['preFlight'][key] === row_flights['reaFlight'][key]) ? (row_flights['preFlight'][key]) : (row_flights['preFlight'][key] + '/' + row_flights['reaFlight'][key]);
render_pre_flight[key] = row_flights['preFlight'][key];
render_rea_flight[key] = row_flights['reaFlight'][key];
}
}
row_flights['renderFlight'] = render_flight;
row_flights['renderPreFlight'] = render_pre_flight;
row_flights['renderReaFlight'] = render_rea_flight;
}
this.combined_data.push(row_flights)
})
//this.doSequence(this.combined_data);
this.render_data = this.combined_data
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);
/**
* 固定表头
*/
var tableCont = document.querySelector('#table-container');
function scrollHandle (){
var scrollTop = this.scrollTop;
this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
}
tableCont.addEventListener('scroll',scrollHandle);
}
/**
* 执行排序并渲染
*/
/* doSequence(sequenceData) {
sequenceData.forEach(element => {
element['ORDER'] = this.sequence(element);
})
sequenceData.sort(function (a, b) {
return (a['ORDER'] - b['ORDER']);
})
this.render_data = sequenceData;
this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
this.changeDetectorRef.detectChanges();
} */
/**
* 过滤及定位
* @param filterItems
* @return
*/
//刷新
clearFiter(){
$("#inputerInfo").val(""); //清空过滤或查找定位文本框
this.ngOnInit();
}
//输入框回车事件
inputEnter() {
if (this.FLT_POS === 1) {
@@ -166,146 +59,143 @@ inputEnter() {
//下拉框选择筛选
selectChange() {
let filter_data = [];
let filterItems = this.filterItems;
this.combined_data.forEach(item => {
filter_data.push(Object.assign({}, item));
})
//下拉框筛选
filter_data = filter_data.filter(item => {
if (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;
}
let filter_data = [];
let filterterminals = this.render_data;
this.render_data.forEach(item => {
filter_data.push(Object.assign({}, item));
})
if (this.FLT_POS === 1) {
this.inputFilter(filter_data);
} else {
this.terminals = filter_data;
this.row_state = this.terminals.length > 0 ? this.terminals[0] : { renderFlight: {} };
}
//下拉框筛选
filter_data = filter_data.filter(item => {
if (item) {
let is_satis = true;
for (const key in filterterminals) {
if (filterterminals.hasOwnProperty(key) && filterterminals[key]) {
if (item[key] === filterterminals[key]) {
is_satis = true;
continue;
} else {
is_satis = false;
break;
}
}
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);
return is_satis;
} else if (item) {
let is_satis = true;
for (const key in filterterminals) {
if (filterterminals.hasOwnProperty(key) && filterterminals[key]) {
if (item[key] === filterterminals[key]) {
is_satis = true;
continue;
} else {
is_satis = false;
break;
}
}
}
return is_satis;
} 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();
let pre_satis = true;
let rea_satis = true;
for (const key in filterterminals) {
if (filterterminals.hasOwnProperty(key) && filterterminals[key]) {
if (item[key] === filterterminals[key]) {
pre_satis = true;
continue;
} else {
pre_satis = false;
break;
}
}
}
for (const key in filterterminals) {
if (filterterminals.hasOwnProperty(key) && filterterminals[key]) {
if (item[key] === filterterminals[key]) {
rea_satis = true;
continue;
} else {
rea_satis = false;
break;
}
}
}
if (pre_satis && !rea_satis) {
item = item;
return pre_satis;
} else if (!pre_satis && rea_satis) {
item = item;
return rea_satis;
} else if (pre_satis && rea_satis) {
return pre_satis && rea_satis;
} else {
return false;
}
}
})
}
//输入框筛选
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;
}
if (this.SEARCH) {
if (this.SEL_COL) {
let sel_col = this.SEL_COL;
filterData = filterData.filter(item => {
if (item[sel_col]) {
if (item[sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
return true;
}
})
} else {
if (this.SEARCH) {
return false;
} else {
return true;
}
}
})
} else {
filterData = filterData.filter(item => {
let is_satis = false;
for (const key in item['renderFlight']) {
if (item['renderFlight'].hasOwnProperty(key)) {
if (item['renderFlight'][key]) {
if (item['renderFlight'][key].toString().match(new RegExp(this.SEARCH, 'i'))) {
is_satis = true;
break;
} else {
is_satis = false;
continue;
}
} else {
filterData = filterData.filter(item => {
let is_satis = false;
for (const key in item) {
if (item.hasOwnProperty(key)) {
if (item[key]) {
if (item[key].toString().match(new RegExp(this.SEARCH, 'i'))) {
is_satis = true;
break;
} else {
if (this.SEARCH) {
is_satis = false;
continue;
} else {
is_satis = true;
break;
}
is_satis = false;
continue;
}
} else {
continue;
if (this.SEARCH) {
is_satis = false;
continue;
} else {
is_satis = true;
break;
}
}
} else {
continue;
}
return is_satis;
})
}
}
return is_satis;
})
}
this.render_data = filterData;
this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
this.changeDetectorRef.detectChanges();
}
this.terminals = filterData;
this.row_state = this.terminals.length > 0 ? this.terminals[0] : { renderFlight: {} };
}
positionArray: Array<any> = [];
@@ -316,8 +206,8 @@ inputPosition(filterData) {
if (this.SEL_COL) {
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'))) {
if (element[sel_col]) {
if (element[sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
transArray.push(element)
}
} else {
@@ -328,10 +218,10 @@ inputPosition(filterData) {
});
} 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'))) {
for (const key in element) {
if (element.hasOwnProperty(key)) {
if (element[key]) {
if (element[key].toString().match(new RegExp(this.SEARCH, 'i'))) {
transArray.push(element)
break;
} else {
@@ -368,12 +258,5 @@ inputPosition(filterData) {
} else {
alert('没有搜索到相关数据');
}
this.changeDetectorRef.detectChanges();
let tr = $(".selected");
let objTr = tr[0];
$("#table-container").animate({ scrollTop: objTr.offsetTop - 42 }, "slow");
}
}
}