import { Component, OnInit, ViewChild, Renderer2 } from '@angular/core'; import { HttpClientService } from '../../services/http-client.service'; import { BasicDataService } from '../../services/basic-data-service'; import { OperateSpinServiceService } from '../../services/operate-spin-service.service'; import { FlightOrder } from '../../utils/flight-order'; import { FlightsDataHandle } from '../../utils/flights-data-handle'; import { Utils } from '../../utils/utils'; import * as $ from 'jquery'; declare var laydate: any; @Component({ selector: 'app-historical-data', templateUrl: './historical-data.component.html', styleUrls: ['./historical-data.component.scss'] }) export class HistoricalDataComponent implements OnInit { constructor( private renderer2: Renderer2, private basicDataService: BasicDataService, private operateSpinServiceService: OperateSpinServiceService, private httpCilent: HttpClientService, ) { this.operateSpinServiceService.showSpin(); } public orderHandle = new FlightOrder(); public dataHandle = new FlightsDataHandle(); public utils = new Utils(); public tabClose: boolean = true; //各项基础数据 public flightAgents: Array; public flightTypes: Array; public terminals: Array; public flightStatus: Array; public airports: Array; public citys: Array; public airlines: Array; public airlinesSelections: Array = []; public flightTypeSelections: Array = []; public raw_data: Array = []; //原始数据,未经过任何转换和组合 public combined_data: Array = []; //组合数据,即链接航班,显示信息等组合好之后的数据 public wait_render_data: Array = []; //待显示的数据,实际显示从中截取可视区域高度可容纳的数据条数 public render_data: Array = []; //显示数据,即需要显示的数据 public selectedFilterData: Array = []; public col_lists: Array; //列数据 public render_col_lists: Array; public select_col_lists: Array; public row_state: any = {}; public filterDate: string = '' public checkboxGroup = { 'related': false, 'detail': false, 'vip': false, 'special': false, 'guarantee': false } @ViewChild('pageContent') pageContent; @ViewChild('searchFilter') searchFilter; @ViewChild('tableContainer') tableContainer; @ViewChild('tabContainer') tabContainer; @ViewChild('tableHead') tableHead; @ViewChild('tableBody') tableBody; @ViewChild('tableContent') tableContent; trItemHeight: number = 42; start: number = 0; end: number = 0; visibleCount: number = 0; scrollTop: number = 0; ngOnInit() { let toDate = new Date().getTime(); let preDate = new Date(toDate - 24 * 60 * 60 * 1000); this.filterDate = this.dateFormatter(preDate) laydate.render({ elem: '#selectDate', showBottom: false, value: preDate, format: 'yyyy-MM-dd', done: (value) => { this.filterDate = value; this.operateSpinServiceService.showSpin(); this.httpCilent.post('/adminapi/hitFlightData/list', { hstFLightTime: value }).subscribe( data => { this.raw_data = data.body; this.combined_data = []; //查找链接航班并将其组合成一条数据 let combined_linked_data = this.dataHandle.findLinkFlights(this.raw_data); combined_linked_data.forEach(element => { let flights_item = this.dataHandle.flightsRenderTransfer(element, this.col_lists); this.combined_data.push(flights_item); }); let combined_data = [] this.combined_data.forEach(item => { combined_data.push(this.dataHandle.basicDataTransHandle(item, this.airports, this.citys, this.airlines, this.flightStatus, this.flightTypes)); }) this.combined_data = combined_data; this.doSequence(this.combined_data); }) } }); window.onresize = function () { this.calcVisibleCount(); }.bind(this) /* 获取用户设置 */ this.httpCilent.get('/adminapi/settings/uisettings').subscribe( data => { data.body.forEach(element => { if (element.groupCode === 'userSettingCol') { this.col_lists = JSON.parse(element.settingContent).defaultData; this.render_col_lists = JSON.parse(element.settingContent).targetList; this.select_col_lists = JSON.parse(element.settingContent).targetList; this.select_col_lists.unshift({ "COL_CODE": "FLNO", "COL_CN": "航班号", "COL_ORDER": "0", "COL_WIDTH": "140px" }) } }) //获取历史航班 this.httpCilent.post('/adminapi/hitFlightData/list', { hstFLightTime: this.filterDate }).subscribe( data => { this.raw_data = data.body; //查找链接航班并将其组合成一条数据 let combined_linked_data = this.dataHandle.findLinkFlights(this.raw_data); combined_linked_data.forEach(element => { let flights_item = this.dataHandle.flightsRenderTransfer(element, this.col_lists); this.combined_data.push(flights_item); }); //从基础数据服务中拿出部分基础数据 this.flightAgents = this.basicDataService.flightAgents; this.flightTypes = this.basicDataService.flightTypes; this.terminals = this.basicDataService.terminal; this.flightStatus = this.basicDataService.flightStatus; this.airlines = this.basicDataService.airline; this.citys = this.basicDataService.city; this.airports = this.basicDataService.airport; if (this.airports && this.airports.length > 0) { let combined_data = [] this.combined_data.forEach(item => { combined_data.push(this.dataHandle.basicDataTransHandle(item, this.airports, this.citys, this.airlines, this.flightStatus, this.flightTypes)); }) this.combined_data = combined_data; this.doSequence(this.combined_data); } else { this.basicDataService.flightAgents_subject.subscribe( val => this.flightAgents = val ) this.basicDataService.flightTypes_subject.subscribe( val => this.flightTypes = val ) this.basicDataService.terminal_subject.subscribe( val => this.terminals = val ) this.basicDataService.flightStatus_subject.subscribe( val => this.flightStatus = val ); this.basicDataService.airline_subject.subscribe( val => this.airlines = val ); this.basicDataService.city_subject.subscribe( val => this.citys = val ); this.basicDataService.airport_subject.subscribe( val => { this.airports = val; let combined_data = [] this.combined_data.forEach(item => { combined_data.push(this.dataHandle.basicDataTransHandle(item, this.airports, this.citys, this.airlines, this.flightStatus, this.flightTypes)); }) this.combined_data = combined_data; this.doSequence(this.combined_data); } ); } } ) } ) } /** * 数据组合完毕,执行排序、渲染以及动态信息处理 * @param combined_data */ doSequence(combined_data) { this.raw_data.forEach(element => { if (this.airlinesSelections.findIndex(airline => airline.airlineCodeIata === element['ALCD']) === -1) { let index = this.airlines.findIndex(val => val.airlineCodeIata === element['ALCD']); this.airlinesSelections.push(this.airlines[index]); } if (this.flightTypeSelections.findIndex(flightType => flightType.flightTypeCode === element['FLTY']) === -1) { let index = this.flightTypes.findIndex(val => val.flightTypeCode === element['FLTY']); this.flightTypeSelections.push(this.flightTypes[index]); } }) //计算可视区域高度,渲染数据 this.wait_render_data = combined_data; this.selectedFilterData = combined_data; this.calcVisibleCount() //默认选中第一条 if (this.render_data.length > 0) { this.row_state = this.render_data[0]; } this.operateSpinServiceService.hideSpin(); } /** * 设置动态设置单元格的宽度 * @param isLast */ setWidth(isLast) { if (isLast) { $(".table-body tbody>tr").eq(0).find('td').each((index, element) => { $(".table-head table thead tr").eq(0).find('th').eq(index).attr('width', $(element).outerWidth() + 'px'); }) if (this.tableBody.nativeElement.scrollHeight <= (this.tableBody.nativeElement.innerHeight || this.tableBody.nativeElement.clientHeight)) { this.tableHead.nativeElement.style.overflowY = 'auto'; } else { this.tableHead.nativeElement.style.overflowY = 'scroll'; } } return true; } /** * 纵向滚动条滚动渲染数据 */ handleScroll() { const scrollTop = this.tableBody.nativeElement.scrollTop; $(".table-head").scrollLeft($('.table-body').scrollLeft()); const fixedScrollTop = scrollTop - scrollTop % this.trItemHeight; this.tableContent.nativeElement.style.webkitTransform = `translateY(${fixedScrollTop}px)`; this.start = Math.floor(scrollTop / this.trItemHeight); this.end = this.start + this.visibleCount; this.render_data = this.wait_render_data.slice(this.start, this.end); } /** * 计算可视区域数据的渲染 */ calcVisibleCount() { this.renderer2.setStyle(this.tableContainer.nativeElement, 'height', this.pageContent.nativeElement.offsetHeight - this.searchFilter.nativeElement.offsetHeight - 35 + 'px'); this.renderer2.setStyle(this.tableBody.nativeElement, 'height', this.tableContainer.nativeElement.offsetHeight - this.tableHead.nativeElement.offsetHeight + 'px'); if (!this.tabClose) { this.renderer2.setStyle(this.tabContainer.nativeElement, 'height', this.pageContent.nativeElement.offsetHeight - this.searchFilter.nativeElement.offsetHeight - 35 + 'px'); } this.visibleCount = Math.ceil(this.tableBody.nativeElement.clientHeight / this.trItemHeight); const scrollTop = this.tableBody.nativeElement.scrollTop; const fixedScrollTop = scrollTop - scrollTop % this.trItemHeight; this.tableContent.nativeElement.style.transform = `translateY(${fixedScrollTop}px)`; this.start = Math.floor(scrollTop / this.trItemHeight); this.end = this.start + this.visibleCount; this.render_data = this.wait_render_data.slice(this.start, this.end); } /** * 展开/关闭过滤条件 */ public filterClose: boolean = true; toggleFilter() { this.filterClose = !this.filterClose; setTimeout(() => { this.calcVisibleCount(); }, 10) } /** * 刷新 */ refresh() { this.operateSpinServiceService.showSpin(); this.positionedArray = []; //定位数组为清空 this.positionArrayIndex = 0; //定位元素Index归零 this.SEARCH = ''; //手动输入条件 this.FLT_POS = 1; //过滤还是定位 this.SEL_COL = ''; //选择列名 this.filterItems = { ALCD: '', //航空公司 FLIN: '', //航线类别 FLTY: '', //航班类别 MVIN: '', //到达/出发 FHAG: '', //机坪代理 MHAG: '', //维护代理 PHAG: '', //旅客代理 } /* 获取用户设置 */ this.httpCilent.get('/adminapi/settings/uisettings').subscribe( data => { data.body.forEach(element => { if (element.groupCode === 'userSettingCol') { this.col_lists = JSON.parse(element.settingContent).defaultData; this.render_col_lists = JSON.parse(element.settingContent).targetList; this.select_col_lists = JSON.parse(element.settingContent).targetList; this.select_col_lists.unshift({ "COL_CODE": "FLNO", "COL_CN": "航班号", "COL_ORDER": "0", "COL_WIDTH": "140px" }) } }) //获取航班动态信息 this.httpCilent.post('/adminapi/hitFlightData/list', { hstFLightTime: this.filterDate }).subscribe( data => { this.raw_data = data.body; //查找链接航班并将其组合成一条数据 this.combined_data = []; let combined_linked_data = this.dataHandle.findLinkFlights(this.raw_data); combined_linked_data.forEach(element => { let flights_item = this.dataHandle.flightsRenderTransfer(element, this.col_lists); this.combined_data.push(flights_item); }); let combined_data = [] this.combined_data.forEach(item => { combined_data.push(this.dataHandle.basicDataTransHandle(item, this.airports, this.citys, this.airlines, this.flightStatus, this.flightTypes)); }) this.combined_data = combined_data; this.doSequence(this.combined_data); } ) } ) } /** * 过滤及定位 * @param filterItems * @return */ SEARCH = ''; //手动输入条件 LASTSEARCH = ''; FLT_POS = 1; //过滤还是定位 SEL_COL = ''; //选择列名 LAST_SEL_COL = ''; public filterItems = { ALCD: '', //航空公司 FLIN: '', //航线类别 FLTY: '', //航班类别 MVIN: '', //到达/出发 FHAG: '', //机坪代理 MHAG: '', //维护代理 PHAG: '', //旅客代理 } /** * 输入框回车事件 */ inputEnter() { if (this.FLT_POS === 1) { this.LAST_SEL_COL = this.SEL_COL; this.LASTSEARCH = this.SEARCH; // this.selectChange('filter'); this.operateSpinServiceService.showSpin(); this.inputFilter(this.selectedFilterData); } else { this.inputPosition(this.wait_render_data) } } /** * 下拉框选择筛选 */ selectChange() { this.operateSpinServiceService.showSpin(); this.positionedArray = []; this.positionArrayIndex = 0; 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 (this.orderHandle.isArriFlight(item)) { let is_satis = true; for (const key in filterItems) { if (filterItems.hasOwnProperty(key) && filterItems[key]) { if (item['preFlight'][key] == filterItems[key]) { is_satis = true; continue; } else { is_satis = false; break; } } } return is_satis; } else if (this.orderHandle.isDeptFlight(item)) { let is_satis = true; for (const key in filterItems) { if (filterItems.hasOwnProperty(key) && filterItems[key]) { if (item['reaFlight'][key] == filterItems[key]) { is_satis = true; continue; } else { is_satis = false; break; } } } return is_satis; } else { let pre_satis = true; let rea_satis = true; for (const key in filterItems) { if (filterItems.hasOwnProperty(key) && filterItems[key]) { if (item['preFlight'][key] == filterItems[key]) { pre_satis = true; continue; } else { pre_satis = false; break; } } } for (const key in filterItems) { if (filterItems.hasOwnProperty(key) && filterItems[key]) { if (item['reaFlight'][key] == filterItems[key]) { rea_satis = true; continue; } else { rea_satis = false; break; } } } if (pre_satis && !rea_satis) { item['renderFlight'] = item['renderPreFlight']; delete item['reaFlight']; delete item['renderReaFlight']; return pre_satis; } else if (!pre_satis && rea_satis) { item['renderFlight'] = item['renderReaFlight']; delete item['preFlight']; delete item['renderPreFlight']; return rea_satis; } else if (pre_satis && rea_satis) { return pre_satis && rea_satis; } else { return false; } } }) this.selectedFilterData = filter_data; if (this.FLT_POS === 1) { this.inputFilter(filter_data); } else { this.wait_render_data = filter_data; this.render_data = this.wait_render_data.slice(this.start, this.end); let hasSelectedRow: boolean = false; for (let i = 0; i < this.wait_render_data.length; i++) { let flight = this.wait_render_data[i]; if (flight['preFlight'] && !flight['reaFlight']) { if (this.row_state['preFlight'] && !this.row_state['reaFlight']) { if (flight['preFlight']['FLID'] === this.row_state['preFlight']['FLID']) { this.row_state = flight; hasSelectedRow = true; break; } } } else if (!flight['preFlight'] && flight['reaFlight']) { if (!this.row_state['preFlight'] && this.row_state['reaFlight']) { if (flight['reaFlight']['FLID'] === this.row_state['reaFlight']['FLID']) { this.row_state = flight; hasSelectedRow = true; break; } } } else { if (this.row_state['preFlight'] && this.row_state['reaFlight']) { if ((flight['preFlight']['FLID'] === this.row_state['preFlight']['FLID']) && (flight['reaFlight']['FLID'] === this.row_state['reaFlight']['FLID'])) { this.row_state = flight; hasSelectedRow = true; break; } } } } if (!hasSelectedRow) { if (this.render_data.length > 0) { this.row_state = this.render_data[0]; } } this.operateSpinServiceService.hideSpin(); } } /** * 输入框筛选 * @param filterData */ inputFilter(filterData) { if (this.LASTSEARCH) { if (this.LAST_SEL_COL) { let sel_col = this.LAST_SEL_COL; filterData = filterData.filter(item => { if (item['renderFlight'][sel_col]) { if (item['renderFlight'][sel_col].toString().match(new RegExp(this.LASTSEARCH, 'i'))) { return true; } } else { return false; } }) } else { filterData = filterData.filter(item => { let is_satis = false; let cols = this.select_col_lists; for (let i = 0; i < cols.length; i++) { if (item['renderFlight'][cols[i]['COL_CODE']]) { if (item['renderFlight'][cols[i]['COL_CODE']].toString().match(new RegExp(this.LASTSEARCH, 'i'))) { is_satis = true; break; } else { is_satis = false; continue; } } else { is_satis = false; continue; } } return is_satis; }) } } this.wait_render_data = filterData; this.render_data = this.wait_render_data.slice(this.start, this.end); let hasSelectedRow: boolean = false; for (let i = 0; i < this.wait_render_data.length; i++) { let flight = this.wait_render_data[i]; if (flight['preFlight'] && !flight['reaFlight']) { if (this.row_state['preFlight'] && !this.row_state['reaFlight']) { if (flight['preFlight']['FLID'] === this.row_state['preFlight']['FLID']) { this.row_state = flight; hasSelectedRow = true; break; } } } else if (!flight['preFlight'] && flight['reaFlight']) { if (!this.row_state['preFlight'] && this.row_state['reaFlight']) { if (flight['reaFlight']['FLID'] === this.row_state['reaFlight']['FLID']) { this.row_state = flight; hasSelectedRow = true; break; } } } else { if (this.row_state['preFlight'] && this.row_state['reaFlight']) { if ((flight['preFlight']['FLID'] === this.row_state['preFlight']['FLID']) && (flight['reaFlight']['FLID'] === this.row_state['reaFlight']['FLID'])) { this.row_state = flight; hasSelectedRow = true; break; } } } } if (!hasSelectedRow) { if (this.render_data.length > 0) { this.row_state = this.render_data[0]; } } this.operateSpinServiceService.hideSpin(); } /** * 输入框定位 */ positionedArray: Array = []; positionArrayIndex: number = 0; inputPosition(filterData) { let hasSearchData: boolean = false; let hasPositionedEle: boolean = false; if (this.SEL_COL) { let sel_col = this.SEL_COL; for (let i = 0; i < filterData.length; i++) { if (i === filterData.length - 1) { this.positionedArray = []; this.positionArrayIndex = 0; } let fliterElement = filterData[i]; if (fliterElement['renderFlight'][sel_col]) { if (fliterElement['renderFlight'][sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) { let hasThisEle: boolean = false; hasSearchData = true; for (let k = 0; k < this.positionedArray.length; k++) { let positionedElement = this.positionedArray[k]; let diffResult = this.utils.diff(positionedElement, fliterElement); if (diffResult) { hasThisEle = true; break; } else { continue; } }; if (!hasThisEle) { hasPositionedEle = true; this.row_state = fliterElement; this.positionArrayIndex = i; this.positionedArray.push(fliterElement); break; } } else { continue; } } else { if (!this.SEARCH) { let hasThisEle: boolean = false; hasSearchData = true; for (let k = 0; k < this.positionedArray.length; k++) { let positionedElement = this.positionedArray[k]; let diffResult = this.utils.diff(positionedElement, fliterElement); if (diffResult) { hasThisEle = true; break; } else { continue; } }; if (!hasThisEle) { hasPositionedEle = true; this.row_state = fliterElement; this.positionArrayIndex = i; this.positionedArray.push(fliterElement); break; } } else { continue; } } } } else { let cols = this.select_col_lists; for (let i = 0; i < filterData.length; i++) { if (i === filterData.length - 1) { this.positionedArray = []; this.positionArrayIndex = 0; } let positionIsOk: boolean = false; let filterElement = filterData[i]; for (let j = 0; j < cols.length; j++) { let elementCol = cols[j]; if (filterElement['renderFlight'][elementCol['COL_CODE']]) { if (filterElement['renderFlight'][elementCol['COL_CODE']].toString().match(new RegExp(this.SEARCH, 'i'))) { let hasThisEle: boolean = false; hasSearchData = true; for (let k = 0; k < this.positionedArray.length; k++) { let positionedElement = this.positionedArray[k]; let diffResult = this.utils.diff(positionedElement, filterElement); if (diffResult) { hasThisEle = true; break; } else { continue; } }; if (!hasThisEle) { hasPositionedEle = true; positionIsOk = true; this.row_state = filterElement; this.positionArrayIndex = i; this.positionedArray.push(filterElement); } break; } else { continue; } } else { if (!this.SEARCH) { let hasThisEle: boolean = false; hasSearchData = true; for (let k = 0; k < this.positionedArray.length; k++) { let positionedElement = this.positionedArray[k]; let diffResult = this.utils.diff(positionedElement, filterElement); if (diffResult) { hasThisEle = true; break; } else { continue; } }; if (!hasThisEle) { hasPositionedEle = true; positionIsOk = true; this.row_state = filterElement; this.positionArrayIndex = i; this.positionedArray.push(filterElement); } break; } else { continue; } } } if (positionIsOk) { break; } } } if (!hasSearchData) { alert("没有搜索到相关数据"); } if (hasPositionedEle) { const scrollTop = this.positionArrayIndex * this.trItemHeight this.tableBody.nativeElement.scrollTop = scrollTop; } } /** * 重置定位数组 */ resetPositionArray() { this.positionedArray = []; this.positionArrayIndex = 0; } /** * 选中某行 * @param i */ selectRow(i) { this.row_state = i; } /** * 判断当前行是否是选中的行,是则高亮 */ getSelectedRow(flight) { if (flight['preFlight'] && !flight['reaFlight']) { if (this.row_state['preFlight'] && !this.row_state['reaFlight']) { if (flight['preFlight']['FLID'] === this.row_state['preFlight']['FLID']) { return true; } else { return false; } } else { return false; } } else if (!flight['preFlight'] && flight['reaFlight']) { if (!this.row_state['preFlight'] && this.row_state['reaFlight']) { if (flight['reaFlight']['FLID'] === this.row_state['reaFlight']['FLID']) { return true; } else { return false; } } else { return false; } } else { if (this.row_state['preFlight'] && this.row_state['reaFlight']) { if ((flight['preFlight']['FLID'] === this.row_state['preFlight']['FLID']) && (flight['reaFlight']['FLID'] === this.row_state['reaFlight']['FLID'])) { return true; } else { return false; } } else { return false; } } } /** * 单元格内容居左居右 * @param col_CODE * @param flight */ getPosition(col_CODE, flight) { if (this.orderHandle.isDeptFlight(flight)) { if (col_CODE === 'FLNO' || col_CODE === 'SODT' || col_CODE === 'ESTT' || col_CODE === 'ACTT') { return 'text-right'; } } else if (this.orderHandle.isLinked(flight)) { if (col_CODE === 'SODT' || col_CODE === 'ESTT' || col_CODE === 'ACTT') { if (!flight['renderPreFlight'][col_CODE] && flight['renderReaFlight'][col_CODE]) { return 'text-right'; } else if (flight['renderPreFlight'][col_CODE] && !flight['renderReaFlight'][col_CODE]) { return 'text-left'; } } } else { if (col_CODE === 'FLNO' || col_CODE === 'SODT' || col_CODE === 'ESTT' || col_CODE === 'ACTT') { return 'text-left'; } } } /** * 复选框勾选事件 */ checkboxChange() { let tabClose = true for (const key in this.checkboxGroup) { if (this.checkboxGroup.hasOwnProperty(key)) { if (this.checkboxGroup[key]) { tabClose = false; break; } else { tabClose = true; continue; } } } this.tabClose = tabClose; if (!this.tabClose) { setTimeout(() => { this.renderer2.setStyle(this.tabContainer.nativeElement, 'height', this.pageContent.nativeElement.offsetHeight - this.searchFilter.nativeElement.offsetHeight - 35 + 'px'); }, 10) } } dateFormatter(date) { var time = new Date(date); var y = time.getFullYear(); var m = time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1; var d = time.getDate() < 10 ? '0' + time.getDate() : time.getDate(); var h = time.getHours(); var mm = time.getMinutes(); var s = time.getSeconds(); return y + '-' + m + '-' + d; } }