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

机场数据接口数据对接

Browse Source
This commit is contained in:
714943302@qq.com
2018-11-21 18:22:08 +08:00
parent 80fcf5b89e
commit 93f9dc0940
8 changed files with 312 additions and 1082 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/basic-data/airport/airport.component.html
+26 -25
View File
@@ -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="inputInfo">
</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>
@@ -27,20 +27,22 @@
<div class="second-condition mb-3 row">
<div class="input-container mr-4">
<label for="">机场集团：&nbsp;&nbsp;</label>
<select class="form-control" [(ngModel)]="filterItems.JT" (ngModelChange)="selectChange()">
<label for="airportGroupId">机场集团：&nbsp;&nbsp;</label>
<select class="form-control" [(ngModel)]="filterItems.airportGroupId" (ngModelChange)="selectChange()" id="jt">
<option value=""></option>
<option value="GH">国内机场</option>
<option value="CH">国际机场</option>
<!-- <option value="GH">国内机场</option>
<option value="CH">国际机场</option> -->
<option *ngFor="let item of airports" [value]="item.airportGroupId">{{item.airportGroupId}}</option>
</select>
</div>
<div class="input-container mr-4">
<label for="">城市：&nbsp;&nbsp;</label>
<select class="form-control" [(ngModel)]="filterItems.CS" (ngModelChange)="selectChange()">
<label for="cityId">城市：&nbsp;&nbsp;</label>
<select class="form-control" [(ngModel)]="filterItems.cityId" (ngModelChange)="selectChange()" id="city">
<option value=""></option>
<option value="GZ">广州</option>
<!-- <option value="GZ">广州</option>
<option value="SH">上海</option>
<option value="BJ">北京</option>
<option value="BJ">北京</option> -->
<option *ngFor="let item of airports" [value]="item.cityId">{{item.cityId}}</option>
</select>
</div>
</div>
@@ -52,7 +54,7 @@
<thead>
<tr>
<th>序号</th>
<!-- <th>机场代码</th>
<th>机场代码</th>
<th>机场中文名</th>
<th>中文简称</th>
<th>机场英文名</th>
@@ -61,25 +63,24 @@
<th>CAA码</th>
<th>ICAO码</th>
<th>机场集团</th>
<th>所在城市</th> -->
<th *ngFor="let airline_col of airport_lists">{{airline_col.COL_CN}}</th>
<th>所在城市</th>
<!-- <th *ngFor="let airline_col of airport_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 airport of render_data;let i = index">
<td>{{i+1}}</td>
<!-- <td>{{airline_col.airportCode}}</td>
<td>{{airline_col.airportNameChn}}</td>
<td>{{airline_col.briefNameChn}}</td>
<td>{{airline_col.airportNameEng}}</td>
<td>{{airline_col.briefNameEng}}</td>
<td>{{airline_col.airportCodeIata}}</td>
<td>{{airline_col.airportCodeCaa}}</td>
<td>{{airline_col.airportCodeIcao}}</td>
<td>{{airline_col.airportGroupId}}</td>
<td>{{airline_col.cityId}}</td> -->
<td *ngFor="let airline_col of airport_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
<td>{{airport.airportCode}}</td>
<td>{{airport.airportNameChn}}</td>
<td>{{airport.briefNameChn}}</td>
<td>{{airport.airportNameEng}}</td>
<td>{{airport.briefNameEng}}</td>
<td>{{airport.airportCodeIata}}</td>
<td>{{airport.airportCodeCaa}}</td>
<td>{{airport.airportCodeIcao}}</td>
<td>{{airport.airportGroupId}}</td>
<td>{{airport.cityId}}</td>
<!-- <td *ngFor="let airline_col of airport_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td> -->
</tr>
</tbody>
</table>
src/app/pages/basic-data/airport/airport.component.ts
+43 -219
View File
@@ -1,9 +1,8 @@
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 { HttpParams } from '@angular/common/http';
import * as $ from 'jquery';
import { BasicDataService } from '../../basic-data-service'
@Component({
selector: 'app-airport',
templateUrl: './airport.component.html',
@@ -13,238 +12,71 @@ export class AirportComponent 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 airport_lists: Array<object>; //列数据
public row_state: any = { renderFlight: {} };
// 搜索条件
SEARCH = ''; //手动输入条件
FLT_POS = 1; //过滤还是定位
SEL_COL = ''; //选择列名
//下拉框
public filterItems = {
JT: '', //机场集团
CS: '', //所在城市
airportGroupId:'',
cityId:'',
}
public formatter = {
'JT': {
'GH': '国内区域',
'CH': '国际区域'
},
'CS': {
'GZ': '广州',
'SH': '上海',
"BJ": '北京'
},
'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
}
}
airports : Array<any>;
public row_state: any = { renderFlight: {} };
public render_data: Array<object> = []; //显示数据，即需要显示的数据
public return_data: Array<object> = []; //下拉框显示数据
ngOnInit() {
this.changeDetectorRef.detach();
/* 获取显示列 */
this.httpCilent.get('/assets/mock-data/airport-code.json').subscribe(
data => {
data.sort(function (a, b) {
return (a['COL_ORDER'] - b['COL_ORDER']);
})
this.airport_lists = data;
this.airports = this.basicDataService.airport;
this.basicDataService.airport_subject.subscribe(
data=>{
this.airports = data;
this.render_data = this.airports;
}
)
/* 获取机场信息 */
this.httpCilent.get('/assets/mock-data/airport-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.airport_lists.length; i++) {
let key = this.airport_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.airport_lists.length; i++) {
let key = this.airport_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
*/
//输入框回车事件
inputEnter() {
if (this.FLT_POS === 1) {
this.selectChange()
this.inputFilter(this.airports)
} else {
this.selectChange()
this.inputPosition(this.render_data)
this.inputFilter(this.airports)
// this.inputPosition(this.render_data)
}
}
//下拉框选择筛选
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) {
this.return_data = this.airports.filter(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 this.filterItems) {
if (this.filterItems.hasOwnProperty(key) && this.filterItems[key]) {
if (item[key] === this.filterItems[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);
} 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();
}
this.render_data = this.return_data;
}
//输入框筛选
@@ -253,8 +85,8 @@ inputFilter(filterData) {
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 +101,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 {
@@ -298,7 +130,6 @@ inputFilter(filterData) {
}
this.render_data = filterData;
this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
this.changeDetectorRef.detectChanges();
}
positionArray: Array<any> = [];
@@ -309,8 +140,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 {
@@ -321,10 +152,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 +192,5 @@ inputPosition(filterData) {
} else {
alert('没有搜索到相关数据');
}
this.changeDetectorRef.detectChanges();
let tr = $(".selected");
let objTr = tr[0];
$("#table-container").animate({ scrollTop: objTr.offsetTop - 42 }, "slow");
}
}
src/app/pages/basic-data/carousel/carousel.component.html
+21 -20
View File
@@ -14,31 +14,33 @@
<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()">
<label for="terminalAreaCode">所属航站楼区域：&nbsp;&nbsp;</label>
<select class="form-control" [(ngModel)]="filterItems.terminalAreaCode" (ngModelChange)="selectChange()" id="qy">
<option value=""></option>
<option value="GH">国内区域</option>
<option *ngFor="let item of carousels" [value]="item.terminalAreaCode" >{{item.terminalAreaCode}}</option>
<!-- <option value="GH">国内区域</option>
<option value="CH">国际区域</option>
<option value="QT">其他区域</option>
<option value="QT">其他区域</option> -->
</select>
</div>
<div class="input-container mr-4">
<label for="">资源状态：&nbsp;&nbsp;</label>
<select class="form-control" [(ngModel)]="filterItems.ZY" (ngModelChange)="selectChange()">
<label for="carouselStatus">资源状态：&nbsp;&nbsp;</label>
<select class="form-control" [(ngModel)]="filterItems.carouselStatus" (ngModelChange)="selectChange()" id="zy">
<option value=""></option>
<option value="K">可用</option>
<option value="R">不可用</option>
<option *ngFor="let item of carousels" [value]="item.carouselStatus" >{{item.carouselStatus}}</option>
<!-- <option value="K">可用</option>
<option value="R">不可用</option> -->
</select>
</div>
</div>
@@ -50,22 +52,21 @@
<thead>
<tr>
<th>序号</th>
<!-- <th>行李转盘代码</th>
<th>行李转盘代码</th>
<th>行李转盘名称</th>
<th>航站楼区域</th>
<th>资源状态</th> -->
<th *ngFor="let airline_col of carousel_lists">{{airline_col.COL_CN}}</th>
<th>资源状态</th>
<!-- <th *ngFor="let airline_col of carousel_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 carousel of render_data;let i = index">
<td>{{i+1}}</td>
<!-- <td>{{airline_col.carouselCode}}</td>
<td>{{airline_col.carouselName}}</td>
<td>{{airline_col.terminalAreaCode}}</td>
<td>{{airline_col.carouselStatus}}</td> -->
<td *ngFor="let airline_col of carousel_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
<td>{{carousel.carouselCode}}</td>
<td>{{carousel.carouselName}}</td>
<td>{{carousel.terminalAreaCode}}</td>
<td>{{carousel.carouselStatus}}</td>
<!-- <td *ngFor="let airline_col of carousel_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td> -->
</tr>
</tbody>
</table>
src/app/pages/basic-data/carousel/carousel.component.ts
+43 -240
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';
@@ -14,257 +13,69 @@ export class CarouselComponent 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 carousel_lists: Array<object>; //列数据
public row_state: any = { renderFlight: {} };
// 搜索条件
SEARCH = ''; //手动输入条件
FLT_POS = 1; //过滤还是定位
SEL_COL = ''; //选择列名
//下拉框
public filterItems = {
HZ: '', //所属航站楼区域
ZY: '', //资源状态
terminalAreaCode:'',
carouselStatus:'',
}
public formatter = {
'HZ': {
'GH': '国内区域',
'CH': '国际区域',
"QT": '其他区域'
},
'ZY': {
'K': '可用',
'R': '不可用',
"T": '其他'
},
'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
}
}
carousels:Array<any>;
public row_state: any = { renderFlight: {} };
public render_data: Array<object> = []; //显示数据，即需要显示的数据
public return_data: Array<object> = []; //下拉框显示数据
ngOnInit() {
this.changeDetectorRef.detach();
/* 获取显示列 */
this.httpCilent.get('/assets/mock-data/carousel-code.json').subscribe(
data => {
data.sort(function (a, b) {
return (a['COL_ORDER'] - b['COL_ORDER']);
})
this.carousel_lists = data;
this.carousels = this.basicDataService.carousel;
this.basicDataService.carousel_subject.subscribe(
data=>{
this.carousels = data;
this.render_data = this.carousels;
}
)
/* 获取行李转盘信息 */
this.httpCilent.get('/assets/mock-data/carousel-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.carousel_lists.length; i++) {
let key = this.carousel_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.carousel_lists.length; i++) {
let key = this.carousel_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
*/
//输入框回车事件
inputEnter() {
if (this.FLT_POS === 1) {
this.selectChange()
this.inputFilter(this.carousels)
} else {
this.selectChange()
this.inputPosition(this.render_data)
this.inputFilter(this.carousels)
// this.inputPosition(this.render_data)
}
}
//下拉框选择筛选
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) {
this.return_data = this.carousels.filter(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 this.filterItems) {
if (this.filterItems.hasOwnProperty(key) && this.filterItems[key]) {
if (item[key] === this.filterItems[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);
} 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();
}
this.render_data = this.return_data;
}
//输入框筛选
@@ -273,8 +84,8 @@ inputFilter(filterData) {
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 {
@@ -289,10 +100,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 {
@@ -318,7 +129,6 @@ inputFilter(filterData) {
}
this.render_data = filterData;
this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
this.changeDetectorRef.detectChanges();
}
positionArray: Array<any> = [];
@@ -329,8 +139,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 {
@@ -341,10 +151,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 {
@@ -381,12 +191,5 @@ inputPosition(filterData) {
} else {
alert('没有搜索到相关数据');
}
this.changeDetectorRef.detectChanges();
let tr = $(".selected");
let objTr = tr[0];
$("#table-container").animate({ scrollTop: objTr.offsetTop - 42 }, "slow");
}
}
src/app/pages/basic-data/gate/gate.component.html
+66 -70
View File
@@ -1,75 +1,71 @@
<div class="main-page">
<div class="page-content">
<div class="search-filter mb-3">
<div class="first-condition row">
<div class="line-operator-left input-container mb-3 col-xlg-8 col-mlg-8 col-xl-8 col-lg-10">
<select class="mr-4 form-control" name="" id="">
<option value="">选择列名</option>
</select>
<label class="radio-inline custom-radio nowrap mr-4">
<input type="radio" [(ngModel)]="FLT_POS" [value]="1" name="filter-position">
<span>过滤</span>
</label>
<div class="page-content">
<div class="search-filter mb-3">
<div class="first-condition row">
<div class="line-operator-left input-container mb-3 col-xlg-8 col-mlg-8 col-xl-8 col-lg-10">
<select class="mr-4 form-control" name="" id="">
<option value="">选择列名</option>
</select>
<label class="radio-inline custom-radio nowrap mr-4">
<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()">
</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>
</div>
</div>
<div class="second-condition mb-3 row">
<input type="radio" [(ngModel)]="FLT_POS" [value]="1" name="filter-position">
<span>过滤</span>
</label>
<label class="radio-inline custom-radio nowrap mr-4">
<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()" 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>
</div>
</div>
<div class="second-condition mb-3 row">
<div class="input-container mr-4">
<label for="terminalAreaCode">所属航站楼区域：&nbsp;&nbsp;</label>
<select class="form-control" [(ngModel)]="filterItems.terminalAreaCode" (ngModelChange)="selectChange()" id="qy">
<option value=""></option>
<option *ngFor="let items of gates" [value]="items.terminalAreaCode">{{items.terminalAreaCode}}</option>
</select>
</div>
<div class="input-container mr-4">
<label for="">所属航站楼区域：&nbsp;&nbsp;</label>
<select class="form-control" [(ngModel)]="filterItems.HZ" (ngModelChange)="selectChange()">
<option value=""></option>
<option value="GH">国内区域</option>
<option value="CH">国际区域</option>
<option value="QT">其他区域</option>
</select>
</div>
<div class="input-container mr-4">
<label for="">资源状态：&nbsp;&nbsp;</label>
<select class="form-control" [(ngModel)]="filterItems.ZY" (ngModelChange)="selectChange()">
<option value=""></option>
<option value="K">可用</option>
<option value="R">不可用</option>
</select>
<label for="gateStatus">资源状态：&nbsp;&nbsp;</label>
<select class="form-control" [(ngModel)]="filterItems.gateStatus" (ngModelChange)="selectChange()" id="zy">
<option value=""></option>
<option *ngFor="let items of gates" [value]="items.gateStatus">{{items.gateStatus}}</option>
</select>
</div>
</div>
</div>
</div>
<div class="airline-table">
<div id="table-container" class="table-container">
<table id="table" class="table table-bordered table-striped">
<thead>
<tr>
<th>序号</th>
<!-- <th>登机门代码</th>
<th>登机门名称</th>
<th>航站楼区域</th>
<th>资源状态</th> -->
<th *ngFor="let airline_col of gate_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']}">
<td>{{i+1}}</td>
<!-- <td>{{airline_col.gateCode}}</td>
<td>{{airline_col.gateName}}</td>
<td>{{airline_col.terminalAreaCode}}</td>
<td>{{airline_col.gateStatus}}</td> -->
<td *ngFor="let airline_col of gate_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="airline-table">
<div id="table-container" class="table-container">
<table id="table" class="table table-bordered table-striped">
<thead>
<tr>
<th>序号</th>
<th>登机门代码</th>
<th>登机门名称</th>
<th>航站楼区域</th>
<th>资源状态</th>
<!-- <th *ngFor="let airline_col of gate_lists">{{airline_col.COL_CN}}</th> -->
</tr>
</thead>
<tbody>
<tr *ngFor="let gate of render_data;let i = index">
<td>{{i+1}}</td>
<td>{{gate.gateCode}}</td>
<td>{{gate.gateName}}</td>
<td>{{gate.terminalAreaCode}}</td>
<td>{{gate.gateStatus}}</td>
<!-- <td *ngFor="let airline_col of gate_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td> -->
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
src/app/pages/basic-data/gate/gate.component.ts
+44 -239
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,257 +12,71 @@ export class GateComponent 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 gate_lists: Array<object>; //列数据
public row_state: any = { renderFlight: {} };
// 搜索条件
SEARCH = ''; //手动输入条件
FLT_POS = 1; //过滤还是定位
SEL_COL = ''; //选择列名
//下拉框
public filterItems = {
HZ: '', //所属航站楼区域
ZY: '', //资源状态
}
public formatter = {
'HZ': {
'GH': '国内区域',
'CH': '国际区域',
"QT": '其他区域'
},
'ZY': {
'K': '可用',
'R': '不可用',
"T": '其他'
},
'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
}
terminalAreaCode:'',
gateStatus:'',
}
gates : Array<any>;
public row_state: any = { renderFlight: {} };
public render_data: Array<object> = []; //显示数据，即需要显示的数据
public return_data: Array<object> = []; //下拉框显示数据
ngOnInit() {
this.changeDetectorRef.detach();
/* 获取显示列 */
this.httpCilent.get('/assets/mock-data/gate-code.json').subscribe(
data => {
data.sort(function (a, b) {
return (a['COL_ORDER'] - b['COL_ORDER']);
})
this.gate_lists = data;
this.gates = this.basicDataService.gate;
this.basicDataService.gate_subject.subscribe(
data=>{
this.gates = data;
this.render_data = this.gates;
}
)
/* 获取登机门信息 */
this.httpCilent.get('/assets/mock-data/gate-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.gate_lists.length; i++) {
let key = this.gate_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.gate_lists.length; i++) {
let key = this.gate_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
*/
//输入框回车事件
inputEnter() {
if (this.FLT_POS === 1) {
this.selectChange()
this.inputFilter(this.gates)
} else {
this.selectChange()
this.inputPosition(this.render_data)
this.inputFilter(this.gates)
// this.inputPosition(this.render_data)
}
}
//下拉框选择筛选
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) {
this.return_data = this.gates.filter(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 this.filterItems) {
if (this.filterItems.hasOwnProperty(key) && this.filterItems[key]) {
if (item[key] === this.filterItems[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);
} 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();
}
this.render_data = this.return_data;
}
//输入框筛选
@@ -272,8 +85,8 @@ inputFilter(filterData) {
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 {
@@ -288,10 +101,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 {
@@ -317,7 +130,6 @@ inputFilter(filterData) {
}
this.render_data = filterData;
this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
this.changeDetectorRef.detectChanges();
}
positionArray: Array<any> = [];
@@ -328,8 +140,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 {
@@ -340,10 +152,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 {
@@ -380,12 +192,5 @@ inputPosition(filterData) {
} else {
alert('没有搜索到相关数据');
}
this.changeDetectorRef.detectChanges();
let tr = $(".selected");
let objTr = tr[0];
$("#table-container").animate({ scrollTop: objTr.offsetTop - 42 }, "slow");
}
}
}
src/app/pages/basic-data/stand/stand.component.html
+26 -24
View File
@@ -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>
@@ -25,30 +25,33 @@
<div class="second-condition mb-3 row">
<div class="input-container mr-4">
<label for="">所属航站楼区域：&nbsp;&nbsp;</label>
<select class="form-control" [(ngModel)]="filterItems.ZY" (ngModelChange)="selectChange()">
<label for="terminalAreaCode">所属航站楼区域：&nbsp;&nbsp;</label>
<select class="form-control" [(ngModel)]="filterItems.terminalAreaCode" (ngModelChange)="selectChange()" id="qy">
<option value=""></option>
<option value="GH">国内区域</option>
<option *ngFor="let items of stands" [value]="items.terminalAreaCode">{{items.terminalAreaCode}}</option>
<!-- <option value="GH">国内区域</option>
<option value="CH">国际区域</option>
<option value="QH">其他区域</option>
<option value="QH">其他区域</option> -->
</select>
</div>
<div class="input-container mr-4">
<label for="">机位类型：&nbsp;&nbsp;</label>
<select class="form-control" [(ngModel)]="filterItems.HZ" (ngModelChange)="selectChange()">
<label for="standType">机位类型：&nbsp;&nbsp;</label>
<select class="form-control" [(ngModel)]="filterItems.standType" (ngModelChange)="selectChange()" id="jtype">
<option value=""></option>
<option value="YJW">远机位</option>
<option *ngFor="let items of stands" [value]="items.standType">{{items.standType}}</option>
<!-- <option value="YJW">远机位</option>
<option value="JJW">近机位</option>
<option value="GWJW">过夜机位</option>
<option value="ZJW">专机位</option>
<option value="ZJW">专机位</option> -->
</select>
</div>
<div class="input-container mr-4">
<label for="">资源状态：&nbsp;&nbsp;</label>
<select class="form-control" [(ngModel)]="filterItems.ZYZT" (ngModelChange)="selectChange()">
<label for="standStatus">资源状态：&nbsp;&nbsp;</label>
<select class="form-control" [(ngModel)]="filterItems.standStatus" (ngModelChange)="selectChange()" id="zystatus">
<option value=""></option>
<option value="K">可用</option>
<option value="R">不可用</option>
<option *ngFor="let items of stands" [value]="items.standStatus">{{items.standStatus}}</option>
<!-- <option value="K">可用</option>
<option value="R">不可用</option> -->
</select>
</div>
</div>
@@ -60,24 +63,23 @@
<thead>
<tr>
<th>序号</th>
<!-- <th>机位代码</th>
<th>机位代码</th>
<th>机位名称</th>
<th>机位类型</th>
<th>资源状态</th>
<th>航站楼区域</th> -->
<th *ngFor="let airline_col of stand_lists">{{airline_col.COL_CN}}</th>
<th>航站楼区域</th>
<!-- <th *ngFor="let airline_col of stand_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 stand of render_data;let i = index">
<td>{{i+1}}</td>
<!-- <td>{{airline_col.standCode}}</td>
<td>{{airline_col.standName}}</td>
<td>{{airline_col.standType}}</td>
<td>{{airline_col.standStatus}}</td>
<td>{{airline_col.terminalAreaCode}}</td> -->
<td *ngFor="let airline_col of stand_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
<td>{{stand.standCode}}</td>
<td>{{stand.standName}}</td>
<td>{{stand.standType}}</td>
<td>{{stand.standStatus}}</td>
<td>{{stand.terminalAreaCode}}</td>
<!-- <td *ngFor="let airline_col of stand_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td> -->
</tr>
</tbody>
</table>
src/app/pages/basic-data/stand/stand.component.ts
+43 -245
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,264 +12,71 @@ export class StandComponent 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 stand_lists: Array<object>; //列数据
public row_state: any = { renderFlight: {} };
// 搜索条件
SEARCH = ''; //手动输入条件
FLT_POS = 1; //过滤还是定位
SEL_COL = ''; //选择列名
//下拉框
public filterItems = {
ZY: '', //所属航站楼区域
HZ: '', //机位类型
ZYZT: '', //资源状态
}
public formatter = {
'ZY': {
'GH': '国内区域',
'CH': '国际区域',
"QH": '其他区域'
},
'HZ': {
'YJW': '远机位',
'JJW': '近机位',
"GWJW": '过夜机位',
"ZJW": '专机位'
},
'ZYZT': {
'K': '可用',
'R': '不可用',
"T": '其他'
},
'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
}
terminalAreaCode:'',
gateStatus:'',
}
stands : Array<any>;
public row_state: any = { renderFlight: {} };
public render_data: Array<object> = []; //显示数据，即需要显示的数据
public return_data: Array<object> = []; //下拉框显示数据
ngOnInit() {
this.changeDetectorRef.detach();
/* 获取显示列 */
this.httpCilent.get('/assets/mock-data/stand-code.json').subscribe(
data => {
data.sort(function (a, b) {
return (a['COL_ORDER'] - b['COL_ORDER']);
})
this.stand_lists = data;
this.stands = this.basicDataService.stand;
this.basicDataService.stand_subject.subscribe(
data=>{
this.stands = data;
this.render_data = this.stands;
}
)
/* 获取机位信息 */
this.httpCilent.get('/assets/mock-data/stand-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.stand_lists.length; i++) {
let key = this.stand_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.stand_lists.length; i++) {
let key = this.stand_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
*/
//输入框回车事件
inputEnter() {
if (this.FLT_POS === 1) {
this.selectChange()
this.inputFilter(this.stands)
} else {
this.selectChange()
this.inputPosition(this.render_data)
this.inputFilter(this.stands)
// this.inputPosition(this.render_data)
}
}
//下拉框选择筛选
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) {
this.return_data = this.stands.filter(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 this.filterItems) {
if (this.filterItems.hasOwnProperty(key) && this.filterItems[key]) {
if (item[key] === this.filterItems[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);
} 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();
}
this.render_data = this.return_data;
}
//输入框筛选
@@ -279,8 +85,8 @@ inputFilter(filterData) {
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 {
@@ -295,10 +101,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 {
@@ -324,7 +130,6 @@ inputFilter(filterData) {
}
this.render_data = filterData;
this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
this.changeDetectorRef.detectChanges();
}
positionArray: Array<any> = [];
@@ -335,8 +140,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 {
@@ -347,10 +152,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 {
@@ -387,12 +192,5 @@ inputPosition(filterData) {
} else {
alert('没有搜索到相关数据');
}
this.changeDetectorRef.detectChanges();
let tr = $(".selected");
let objTr = tr[0];
$("#table-container").animate({ scrollTop: objTr.offsetTop - 42 }, "slow");
}
}