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'; @Component({ selector: 'app-gate', templateUrl: './gate.component.html', styleUrls: ['./gate.component.scss'] }) export class GateComponent implements OnInit { constructor( private httpCilent: HttpClientService, private changeDetectorRef: ChangeDetectorRef ) { } public raw_data: Array = []; //原始数据,即航班计划 public combined_data: Array = []; //组合数据,即链接航班,显示信息等组合好之后的数据 public render_data: Array = []; //显示数据,即需要显示的数据 public gate_lists: Array; //列数据 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 } } 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.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); } /** * 执行排序并渲染 */ /* 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() } else { this.selectChange() 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) { let is_satis = true; for (const key in filterItems) { if (filterItems.hasOwnProperty(key) && filterItems[key]) { if (item['preFlight'][key] === filterItems[key]) { is_satis = true; continue; } else { is_satis = false; break; } } } return is_satis; } else if (item) { let is_satis = true; for (const key in filterItems) { if (filterItems.hasOwnProperty(key) && filterItems[key]) { if (item['reaFlight'][key] === filterItems[key]) { is_satis = true; continue; } else { is_satis = false; break; } } } return is_satis; } else { let pre_satis = true; let rea_satis = true; for (const key in filterItems) { if (filterItems.hasOwnProperty(key) && filterItems[key]) { if (item['preFlight'][key] === filterItems[key]) { pre_satis = true; continue; } else { pre_satis = false; break; } } } for (const key in filterItems) { if (filterItems.hasOwnProperty(key) && filterItems[key]) { if (item['reaFlight'][key] === filterItems[key]) { rea_satis = true; continue; } else { rea_satis = false; break; } } } if (pre_satis && !rea_satis) { item['renderFlight'] = item['renderPreFlight']; return pre_satis; } else if (!pre_satis && rea_satis) { item['renderFlight'] = item['renderReaFlight']; return rea_satis; } else if (pre_satis && rea_satis) { return pre_satis && rea_satis; } else { return false; } } }) if (this.FLT_POS === 1) { this.inputFilter(filter_data); } else { this.render_data = filter_data; this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} }; // this.inputPosition(this.render_data); this.changeDetectorRef.detectChanges(); } } //输入框筛选 inputFilter(filterData) { if (this.SEARCH) { if (this.SEL_COL) { let sel_col = this.SEL_COL; filterData = filterData.filter(item => { if (item['renderFlight'][sel_col]) { if (item['renderFlight'][sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) { return true; } } else { if (this.SEARCH) { return false; } else { return true; } } }) } else { 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 { if (this.SEARCH) { is_satis = false; continue; } else { is_satis = true; break; } } } else { continue; } } return is_satis; }) } } this.render_data = filterData; this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} }; this.changeDetectorRef.detectChanges(); } positionArray: Array = []; 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'))) { transArray.push(element) } } else { if (!this.SEARCH) { transArray.push(element) } } }); } else { filterData.forEach(element => { for (const key in element['renderFlight']) { if (element['renderFlight'].hasOwnProperty(key)) { if (element['renderFlight'][key]) { if (element['renderFlight'][key].toString().match(new RegExp(this.SEARCH, 'i'))) { transArray.push(element) break; } else { continue; } } else { if (this.SEARCH) { continue; } else { transArray.push(element) break; } } } else { continue; } } }); } if (transArray.length > 0) { if (transArray.toString() == this.positionArray.toString()) { this.positionArrayIndex++; if (this.positionArrayIndex === this.positionArray.length) { this.positionArrayIndex = 0; } this.row_state = this.positionArray[this.positionArrayIndex]; } else { this.positionArray = transArray; this.positionArrayIndex = 0; this.row_state = this.positionArray[this.positionArrayIndex]; } } else { alert('没有搜索到相关数据'); } this.changeDetectorRef.detectChanges(); let tr = $(".selected"); let objTr = tr[0]; $("#table-container").animate({ scrollTop: objTr.offsetTop - 42 }, "slow"); } }