diff --git a/src/app/pages/historical-data/historical-data.component.html b/src/app/pages/historical-data/historical-data.component.html index 575e197..f4f3d2a 100644 --- a/src/app/pages/historical-data/historical-data.component.html +++ b/src/app/pages/historical-data/historical-data.component.html @@ -1,5 +1,5 @@ -
-
+
+
@@ -15,7 +15,9 @@ 查找定位 - + + +
@@ -77,10 +79,6 @@
-
- - -
@@ -108,40 +106,51 @@
- - - - - - - - - - - - - -
序号{{airline_col.COL_CN}}
{{i+1}}{{airline_row['renderFlight'][airline_col.COL_CODE]}}
+
+ + + + + + + + +
序号航班ID{{airline_col.COL_CN}}
+
+
+
+ + + + + + + + + + +
{{start+i+1}}{{airline_row['renderFlight']['FLID']}}{{airline_row['renderFlight'][airline_col.COL_CODE]}}
+
-
- +
diff --git a/src/app/pages/historical-data/historical-data.component.scss b/src/app/pages/historical-data/historical-data.component.scss index ebc37b5..40faa34 100644 --- a/src/app/pages/historical-data/historical-data.component.scss +++ b/src/app/pages/historical-data/historical-data.component.scss @@ -1,16 +1,23 @@ .main-page { + position: relative; width: 100%; height: 100%; - overflow-y: scroll; + overflow-y: auto; + overflow-x: hidden; padding: 15px 10px; background-color: #fff; .page-content { border: 1px solid #ccc; + height: 100%; padding: 10px 20px; .search-filter { + position: relative; padding: 0 15px; .first-condition { .line-operator-right { + // position: absolute; + // top: 0; + // right: 0; text-align: right; padding: 0; .btn-info { @@ -19,7 +26,8 @@ } } } - .second-condition,.third-condition{ + .second-condition, + .third-condition { display: none; } .input-container { @@ -29,35 +37,119 @@ display: inline-block; } } - .filterClose-c{ + .filterClose-c { display: none; } - .filterClose-o{ + .filterClose-o { display: flex; } } - .airline-table{ - .table-container{ - // border: 1px solid #ccc; + .airline-table { + .table-container { + display: inline-block; + // position: relative; width: 100%; - height: 700px; - overflow: auto; - box-shadow: 0 0 1px .5px #ddd; - table{ - width: max-content; - tr{ - cursor: pointer; - &.selected{ - background: rgb(181, 215, 255); + // overflow-x: auto; + overflow-y: hidden; + box-shadow: 0 0 1px 0.5px #ddd; + .table-head { + overflow: hidden; + overflow-y: scroll; + height: 42px; + table { + margin: 0; + width: max-content; + th { + border-bottom: none; + background-color: #ddd; + color: rgb(0, 0, 255); + text-align: center; } } - th{ - background-color: #ddd; + &::-webkit-scrollbar { + width: 15px; + height: 15px; } - th,td{ - // border: none; - text-align: center; + } + + .table-body { + position: relative; + // height: 600px; + overflow: auto; + width: 100%; + .list-view-phantom { + position: absolute; + left: 0; + top: 0; + right: 0; + z-index: -1; } + table { + left: 0; + right: 0; + top: 0; + position: absolute; + width: max-content; + tr { + cursor: pointer; + height: 42px; + &.selected { + background: rgb(181, 215, 255); + } + } + td { + white-space: nowrap; + border: 1px solid #dee2e6; + text-align: center; + } + } + &::-webkit-scrollbar { + width: 15px; + height: 15px; + } + &::-webkit-scrollbar-thumb { + /*滚动条里面小方块*/ + background: rgba(165, 207, 222, 1); + border-radius: 10px; + } + &::-webkit-scrollbar-track { + background: rgba(0, 0, 0, 0.06); + border-radius: 10px; + } + } + } + .airline-message { + display: inline-block; + // box-shadow: 0 0 1px .5px #ddd; + vertical-align: top; + width: 0; + margin-left: 1%; + height: 700px; + /deep/ .ant-tabs-bar { + .ant-tabs-tab { + padding: 0 5px; + &.ant-tabs-tab-active { + background: skyblue; + /* border-color: skyblue; */ + color: rgba(0, 0, 0, 0.65); + padding-bottom: 0; + } + } + } + /deep/ .ant-tabs-content { + height: 100%; + overflow: auto; + border: 1px solid #ccc; + white-space: nowrap; + } + /deep/ .ant-tabs-tab-prev { + background-color: rgba(221, 221, 221, 0.5); + } + /deep/ .ant-tabs-tab-next { + background-color: rgba(221, 221, 221, 0.5); + } + nz-tabset { + height: 100%; } &::-webkit-scrollbar { width: 15px; @@ -73,6 +165,19 @@ border-radius: 10px; } } + .table-c { + width: 75%; + } + .table-o { + width: 100%; + } + .tab-c { + width: 0; + display: none; + } + .tab-o { + width: 24%; + } } } } diff --git a/src/app/pages/historical-data/historical-data.component.ts b/src/app/pages/historical-data/historical-data.component.ts index 142e535..7bc5450 100644 --- a/src/app/pages/historical-data/historical-data.component.ts +++ b/src/app/pages/historical-data/historical-data.component.ts @@ -1,12 +1,11 @@ import { Component, OnInit, ViewChild, Renderer2 } from '@angular/core'; -import { ChangeDetectorRef } 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; @@ -23,13 +22,12 @@ export class HistoricalDataComponent implements OnInit { private basicDataService: BasicDataService, private operateSpinServiceService: OperateSpinServiceService, private httpCilent: HttpClientService, - private changeDetectorRef: ChangeDetectorRef, ) { this.operateSpinServiceService.showSpin(); - this.changeDetectorRef.detach(); } public orderHandle = new FlightOrder(); public dataHandle = new FlightsDataHandle(); + public utils = new Utils(); public tabClose: boolean = true; @@ -47,12 +45,14 @@ export class HistoricalDataComponent implements OnInit { 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 row_state: any = { renderFlight: {} }; + public row_state: any = {}; public filterDate: string = '' @@ -64,9 +64,19 @@ export class HistoricalDataComponent implements OnInit { 'guarantee': false } - @ViewChild('mainPage') mainPage; + @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(); @@ -102,9 +112,8 @@ export class HistoricalDataComponent implements OnInit { } }); - this.renderer2.setStyle(this.tableContainer.nativeElement, 'height', this.mainPage.nativeElement.offsetHeight - this.searchFilter.nativeElement.offsetHeight - 55 + 'px'); window.onresize = function () { - this.renderer2.setStyle(this.tableContainer.nativeElement, 'height', this.mainPage.nativeElement.offsetHeight - this.searchFilter.nativeElement.offsetHeight - 55 + 'px'); + this.calcVisibleCount(); }.bind(this) @@ -117,78 +126,70 @@ export class HistoricalDataComponent implements OnInit { this.render_col_lists = JSON.parse(element.settingContent).targetList; } }) - } - ) - //获取历史航班 - this.httpCilent.post('/adminapi/hitFlightData/list', { hstFLightTime: this.filterDate }).subscribe( - data => { - this.raw_data = data.body; + //获取历史航班 + 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); - }); + //查找链接航班并将其组合成一条数据 + 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; + //从基础数据服务中拿出部分基础数据 + 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; + 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); + } + ); } - ); - } + } + ) } ) - - //固定表头 - var tableCont = document.querySelector('#table-container') - function scrollHandle() { - var scrollTop = this.scrollTop; - this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)'; - } - tableCont.addEventListener('scroll', scrollHandle) } /** @@ -207,23 +208,75 @@ export class HistoricalDataComponent implements OnInit { } }) - // combined_data.forEach(element => { - // element['ORDER'] = this.orderHandle.sequence(element); - // }) - // combined_data.sort(function (a, b) { - // return (a['ORDER'] - b['ORDER']); - // }) - this.render_data = combined_data; - this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} }; - this.changeDetectorRef.detectChanges(); - this.operateSpinServiceService.hideSpin() + //计算可视区域高度，渲染数据 + 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).innerWidth() + 'px'); + }) + } + 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; - this.changeDetectorRef.detectChanges(); - this.renderer2.setStyle(this.tableContainer.nativeElement, 'height', this.mainPage.nativeElement.offsetHeight - this.searchFilter.nativeElement.offsetHeight - 55 + 'px'); + setTimeout(() => { + this.calcVisibleCount(); + }, 10) } /** @@ -253,28 +306,26 @@ export class HistoricalDataComponent implements OnInit { this.render_col_lists = JSON.parse(element.settingContent).targetList; } }) - } - ) - //获取航班动态信息 - this.httpCilent.post('/adminapi/hitFlightData/list', { hstFLightTime: this.filterDate }).subscribe( - data => { - this.raw_data = data.body; + //获取航班动态信息 + 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); - // const toastCfg = new ToastConfig(ToastType.SUCCESS, '', '刷新成功！', 3000); - // this.toastService.toast(toastCfg); + //查找链接航班并将其组合成一条数据 + 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); + } + ) } ) } @@ -286,8 +337,10 @@ export class HistoricalDataComponent implements OnInit { * @return */ SEARCH = ''; //手动输入条件 + LASTSEARCH = ''; FLT_POS = 1; //过滤还是定位 SEL_COL = ''; //选择列名 + LAST_SEL_COL = ''; public filterItems = { ALCD: '', //航空公司 FLIN: '', //航线类别 @@ -303,9 +356,13 @@ export class HistoricalDataComponent implements OnInit { */ inputEnter() { if (this.FLT_POS === 1) { - this.selectChange() + 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.render_data) + this.inputPosition(this.wait_render_data) } } @@ -314,93 +371,132 @@ export class HistoricalDataComponent implements OnInit { */ selectChange() { this.operateSpinServiceService.showSpin(); - setTimeout(() => { - 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; - } - } - } + this.positionedArray = []; + this.positionArrayIndex = 0; - 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; + 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; + } } } - }) - if (this.FLT_POS === 1) { - this.inputFilter(filter_data); + 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 { - this.render_data = filter_data; - this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} }; - this.changeDetectorRef.detectChanges(); + 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; + } } - }, 10) + }) + + 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(); + } } /** @@ -408,12 +504,12 @@ export class HistoricalDataComponent implements OnInit { * @param filterData */ inputFilter(filterData) { - if (this.SEARCH) { - if (this.SEL_COL) { - let sel_col = this.SEL_COL; + 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.SEARCH, 'i'))) { + if (item['renderFlight'][sel_col].toString().match(new RegExp(this.LASTSEARCH, 'i'))) { return true; } } else { @@ -427,7 +523,7 @@ export class HistoricalDataComponent implements OnInit { let cols = this.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.SEARCH, 'i'))) { + if (item['renderFlight'][cols[i]['COL_CODE']].toString().match(new RegExp(this.LASTSEARCH, 'i'))) { is_satis = true; break; } else { @@ -443,78 +539,189 @@ export class HistoricalDataComponent implements OnInit { }) } } - this.render_data = filterData; - this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} }; - this.changeDetectorRef.detectChanges(); - this.operateSpinServiceService.hideSpin() + 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(); } /** * 输入框定位 */ - positionArray: Array = []; + positionedArray: Array = []; positionArrayIndex: number = 0; inputPosition(filterData) { - let transArray = [] + let hasSearchData: boolean = false; + let hasPositionedEle: boolean = false; 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) + 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) { - transArray.push(element) + 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 { - filterData.forEach(element => { - let cols = this.col_lists; - for (let i = 0; i < cols.length; i++) { - if (element['renderFlight'][cols[i]['COL_CODE']]) { - if (element['renderFlight'][cols[i]['COL_CODE']].toString().match(new RegExp(this.SEARCH, 'i'))) { - transArray.push(element) + let cols = this.render_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) { - continue; - } else { - transArray.push(element) + 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 (transArray.length > 0) { - if (transArray.toString() == this.positionArray.toString()) { - this.positionArrayIndex++; - if (this.positionArrayIndex === this.positionArray.length) { - this.positionArrayIndex = 0; + if (positionIsOk) { + break; } - 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]; - if (objTr) { - $("#table-container").animate({ scrollTop: objTr.offsetTop - 42 }, "slow"); + if (!hasSearchData) { + alert("没有搜索到相关数据"); + } + if (hasPositionedEle) { + const scrollTop = this.positionArrayIndex * this.trItemHeight + this.tableBody.nativeElement.scrollTop = scrollTop; } } @@ -525,7 +732,43 @@ export class HistoricalDataComponent implements OnInit { */ selectRow(i) { this.row_state = i; - this.changeDetectorRef.detectChanges(); + } + + /** + * 判断当前行是否是选中的行,是则高亮 + */ + 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; + } + } } /** @@ -542,35 +785,39 @@ export class HistoricalDataComponent implements OnInit { 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]) { - this.tabClose = false; + tabClose = false; break; } else { - this.tabClose = true; + tabClose = true; continue; } } } - this.changeDetectorRef.detectChanges() - } - - /** - * tab项切换事件 - */ - nzClick() { - this.changeDetectorRef.detectChanges(); + 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) { diff --git a/src/app/pages/historical-data/historical-data.module.ts b/src/app/pages/historical-data/historical-data.module.ts index e4e6c02..fde436d 100644 --- a/src/app/pages/historical-data/historical-data.module.ts +++ b/src/app/pages/historical-data/historical-data.module.ts @@ -4,13 +4,15 @@ import { FormsModule } from '@angular/forms'; import { NgZorroAntdModule } from 'ng-zorro-antd' import { HistoricalDataComponent } from './historical-data.component'; import { HistoricalDataRouting } from './historical-data-routing.module'; +import { TabsetModule } from '../tabset/tabset.module' @NgModule({ imports: [ CommonModule, FormsModule, NgZorroAntdModule, - HistoricalDataRouting + HistoricalDataRouting, + TabsetModule ], declarations: [HistoricalDataComponent] }) diff --git a/src/app/pages/main/main.component.html b/src/app/pages/main/main.component.html index 0a4dcca..32fb33e 100644 --- a/src/app/pages/main/main.component.html +++ b/src/app/pages/main/main.component.html @@ -173,7 +173,7 @@
- + diff --git a/src/app/pages/main/main.component.scss b/src/app/pages/main/main.component.scss index 4954e36..01017e3 100644 --- a/src/app/pages/main/main.component.scss +++ b/src/app/pages/main/main.component.scss @@ -98,8 +98,6 @@ } } td { - overflow: hidden; - text-overflow: ellipsis; white-space: nowrap; border: 1px solid #dee2e6; text-align: center; @@ -128,7 +126,6 @@ margin-left: 1%; height: 700px; /deep/ .ant-tabs-bar { - border-bottom: 10px solid skyblue; .ant-tabs-tab { padding: 0 5px; &.ant-tabs-tab-active { @@ -140,7 +137,7 @@ } } /deep/ .ant-tabs-content{ - height: calc(100% - 65px); + height: 100%; overflow: auto; border: 1px solid #ccc; white-space: nowrap; diff --git a/src/app/pages/main/main.component.ts b/src/app/pages/main/main.component.ts index 2aba8d7..37a5a40 100644 --- a/src/app/pages/main/main.component.ts +++ b/src/app/pages/main/main.component.ts @@ -964,7 +964,7 @@ export class MainComponent implements OnInit { } /** - * getSelectedRow(airline_row) + * 判断当前行是否是选中的行,是则高亮 */ getSelectedRow(flight) { if (flight['preFlight'] && !flight['reaFlight']) { diff --git a/src/app/pages/main/main.module.ts b/src/app/pages/main/main.module.ts index fb41e21..0c05abe 100644 --- a/src/app/pages/main/main.module.ts +++ b/src/app/pages/main/main.module.ts @@ -7,11 +7,8 @@ import { ToastModule } from '../../components/toast/toast.module' import { MainComponent } from './main.component'; import { MainRoutingModule } from './main-routing.module'; -import { RelatedTabComponent } from './related-tab/related-tab.component'; -import { DetailTabComponent } from './detail-tab/detail-tab.component'; -import { GuaranteeTabComponent } from './guarantee-tab/guarantee-tab.component'; -import { VipTabComponent } from './vip-tab/vip-tab.component'; -import { SpecialTabComponent } from './special-tab/special-tab.component'; + +import { TabsetModule } from '../tabset/tabset.module' @NgModule({ imports: [ @@ -20,16 +17,12 @@ import { SpecialTabComponent } from './special-tab/special-tab.component'; ReactiveFormsModule, NgZorroAntdModule, MainRoutingModule, - ToastModule + ToastModule, + TabsetModule ], declarations: [ - MainComponent, - RelatedTabComponent, - DetailTabComponent, - GuaranteeTabComponent, - VipTabComponent, - SpecialTabComponent + MainComponent, ], - providers:[] + providers: [] }) export class MainModule { } diff --git a/src/app/pages/seasonal-plan/seasonal-plan.component.html b/src/app/pages/seasonal-plan/seasonal-plan.component.html index 399b7ce..7212008 100644 --- a/src/app/pages/seasonal-plan/seasonal-plan.component.html +++ b/src/app/pages/seasonal-plan/seasonal-plan.component.html @@ -100,7 +100,7 @@
- + diff --git a/src/app/pages/seasonal-plan/seasonal-plan.component.scss b/src/app/pages/seasonal-plan/seasonal-plan.component.scss index a7c804f..bfb8ad6 100644 --- a/src/app/pages/seasonal-plan/seasonal-plan.component.scss +++ b/src/app/pages/seasonal-plan/seasonal-plan.component.scss @@ -10,7 +10,7 @@ height: 100%; padding: 10px 20px; .search-filter { - padding: 0 15px; + padding: 0 15px; .first-condition { .line-operator-right { text-align: right; @@ -118,7 +118,6 @@ margin-left: 1%; height: 700px; /deep/ .ant-tabs-bar { - border-bottom: 10px solid skyblue; .ant-tabs-tab { padding: 0 5px; &.ant-tabs-tab-active { @@ -130,7 +129,7 @@ } } /deep/ .ant-tabs-content{ - height: calc(100% - 65px); + height: 100%; overflow-y: auto; border: 1px solid #ccc; } diff --git a/src/app/pages/seasonal-plan/seasonal-plan.component.ts b/src/app/pages/seasonal-plan/seasonal-plan.component.ts index c1e7df7..ca72e67 100644 --- a/src/app/pages/seasonal-plan/seasonal-plan.component.ts +++ b/src/app/pages/seasonal-plan/seasonal-plan.component.ts @@ -394,7 +394,7 @@ export class SeasonalPlanComponent implements OnInit { } /** - * 选中高亮 + * 判断当前行是否是选中的行,是则高亮 * @param seasonal */ getSelectedRow(seasonal) { diff --git a/src/app/pages/main/detail-tab/detail-tab.component.html b/src/app/pages/tabset/detail-tab/detail-tab.component.html similarity index 100% rename from src/app/pages/main/detail-tab/detail-tab.component.html rename to src/app/pages/tabset/detail-tab/detail-tab.component.html diff --git a/src/app/pages/main/detail-tab/detail-tab.component.scss b/src/app/pages/tabset/detail-tab/detail-tab.component.scss similarity index 64% rename from src/app/pages/main/detail-tab/detail-tab.component.scss rename to src/app/pages/tabset/detail-tab/detail-tab.component.scss index 0c0d3b5..1a6b2d4 100644 --- a/src/app/pages/main/detail-tab/detail-tab.component.scss +++ b/src/app/pages/tabset/detail-tab/detail-tab.component.scss @@ -1,12 +1,12 @@ -.tab-container{ +.tab-container { padding: 10px; - .hr-line{ + .hr-line { font-weight: bold; } - .message-container{ + .message-container { padding: 5px 10px 5px 20px; - p{ + p { margin: 0; } } -} \ No newline at end of file +} diff --git a/src/app/pages/main/detail-tab/detail-tab.component.spec.ts b/src/app/pages/tabset/detail-tab/detail-tab.component.spec.ts similarity index 100% rename from src/app/pages/main/detail-tab/detail-tab.component.spec.ts rename to src/app/pages/tabset/detail-tab/detail-tab.component.spec.ts diff --git a/src/app/pages/main/detail-tab/detail-tab.component.ts b/src/app/pages/tabset/detail-tab/detail-tab.component.ts similarity index 98% rename from src/app/pages/main/detail-tab/detail-tab.component.ts rename to src/app/pages/tabset/detail-tab/detail-tab.component.ts index c69764e..46eb4a1 100644 --- a/src/app/pages/main/detail-tab/detail-tab.component.ts +++ b/src/app/pages/tabset/detail-tab/detail-tab.component.ts @@ -11,9 +11,9 @@ export class DetailTabComponent implements OnInit { public btnClickDisabled: boolean = true; public showPsst: string; - public showRemc:string; - public vipNumber:any; - public isVip:any + public showRemc: string; + public vipNumber: any; + public isVip: any @Input() set flight(flight) { this.lines = Object.assign({}, flight); diff --git a/src/app/pages/main/guarantee-tab/guarantee-tab.component.html b/src/app/pages/tabset/guarantee-tab/guarantee-tab.component.html similarity index 100% rename from src/app/pages/main/guarantee-tab/guarantee-tab.component.html rename to src/app/pages/tabset/guarantee-tab/guarantee-tab.component.html diff --git a/src/app/pages/main/guarantee-tab/guarantee-tab.component.scss b/src/app/pages/tabset/guarantee-tab/guarantee-tab.component.scss similarity index 100% rename from src/app/pages/main/guarantee-tab/guarantee-tab.component.scss rename to src/app/pages/tabset/guarantee-tab/guarantee-tab.component.scss diff --git a/src/app/pages/main/guarantee-tab/guarantee-tab.component.spec.ts b/src/app/pages/tabset/guarantee-tab/guarantee-tab.component.spec.ts similarity index 100% rename from src/app/pages/main/guarantee-tab/guarantee-tab.component.spec.ts rename to src/app/pages/tabset/guarantee-tab/guarantee-tab.component.spec.ts diff --git a/src/app/pages/main/guarantee-tab/guarantee-tab.component.ts b/src/app/pages/tabset/guarantee-tab/guarantee-tab.component.ts similarity index 100% rename from src/app/pages/main/guarantee-tab/guarantee-tab.component.ts rename to src/app/pages/tabset/guarantee-tab/guarantee-tab.component.ts diff --git a/src/app/pages/main/related-tab/related-tab.component.html b/src/app/pages/tabset/related-tab/related-tab.component.html similarity index 100% rename from src/app/pages/main/related-tab/related-tab.component.html rename to src/app/pages/tabset/related-tab/related-tab.component.html diff --git a/src/app/pages/main/related-tab/related-tab.component.scss b/src/app/pages/tabset/related-tab/related-tab.component.scss similarity index 100% rename from src/app/pages/main/related-tab/related-tab.component.scss rename to src/app/pages/tabset/related-tab/related-tab.component.scss diff --git a/src/app/pages/main/related-tab/related-tab.component.spec.ts b/src/app/pages/tabset/related-tab/related-tab.component.spec.ts similarity index 100% rename from src/app/pages/main/related-tab/related-tab.component.spec.ts rename to src/app/pages/tabset/related-tab/related-tab.component.spec.ts diff --git a/src/app/pages/main/related-tab/related-tab.component.ts b/src/app/pages/tabset/related-tab/related-tab.component.ts similarity index 100% rename from src/app/pages/main/related-tab/related-tab.component.ts rename to src/app/pages/tabset/related-tab/related-tab.component.ts diff --git a/src/app/pages/main/special-tab/special-tab.component.html b/src/app/pages/tabset/special-tab/special-tab.component.html similarity index 100% rename from src/app/pages/main/special-tab/special-tab.component.html rename to src/app/pages/tabset/special-tab/special-tab.component.html diff --git a/src/app/pages/main/special-tab/special-tab.component.scss b/src/app/pages/tabset/special-tab/special-tab.component.scss similarity index 100% rename from src/app/pages/main/special-tab/special-tab.component.scss rename to src/app/pages/tabset/special-tab/special-tab.component.scss diff --git a/src/app/pages/main/special-tab/special-tab.component.spec.ts b/src/app/pages/tabset/special-tab/special-tab.component.spec.ts similarity index 100% rename from src/app/pages/main/special-tab/special-tab.component.spec.ts rename to src/app/pages/tabset/special-tab/special-tab.component.spec.ts diff --git a/src/app/pages/main/special-tab/special-tab.component.ts b/src/app/pages/tabset/special-tab/special-tab.component.ts similarity index 100% rename from src/app/pages/main/special-tab/special-tab.component.ts rename to src/app/pages/tabset/special-tab/special-tab.component.ts diff --git a/src/app/pages/tabset/tabset.module.spec.ts b/src/app/pages/tabset/tabset.module.spec.ts new file mode 100644 index 0000000..184e860 --- /dev/null +++ b/src/app/pages/tabset/tabset.module.spec.ts @@ -0,0 +1,13 @@ +import { TabsetModule } from './tabset.module'; + +describe('TabsetModule', () => { + let tabsetModule: TabsetModule; + + beforeEach(() => { + tabsetModule = new TabsetModule(); + }); + + it('should create an instance', () => { + expect(tabsetModule).toBeTruthy(); + }); +}); diff --git a/src/app/pages/tabset/tabset.module.ts b/src/app/pages/tabset/tabset.module.ts new file mode 100644 index 0000000..c570409 --- /dev/null +++ b/src/app/pages/tabset/tabset.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { NgZorroAntdModule } from 'ng-zorro-antd'; +import { DetailTabComponent } from './detail-tab/detail-tab.component'; +import { GuaranteeTabComponent } from './guarantee-tab/guarantee-tab.component'; +import { RelatedTabComponent } from './related-tab/related-tab.component'; +import { SpecialTabComponent } from './special-tab/special-tab.component'; +import { VipTabComponent } from './vip-tab/vip-tab.component'; + +@NgModule({ + imports: [ + CommonModule, + NgZorroAntdModule + ], + declarations: [DetailTabComponent, GuaranteeTabComponent, RelatedTabComponent, SpecialTabComponent, VipTabComponent], + exports: [DetailTabComponent, GuaranteeTabComponent, RelatedTabComponent, SpecialTabComponent, VipTabComponent] +}) +export class TabsetModule { } diff --git a/src/app/pages/main/vip-tab/vip-tab.component.html b/src/app/pages/tabset/vip-tab/vip-tab.component.html similarity index 100% rename from src/app/pages/main/vip-tab/vip-tab.component.html rename to src/app/pages/tabset/vip-tab/vip-tab.component.html diff --git a/src/app/pages/main/vip-tab/vip-tab.component.scss b/src/app/pages/tabset/vip-tab/vip-tab.component.scss similarity index 100% rename from src/app/pages/main/vip-tab/vip-tab.component.scss rename to src/app/pages/tabset/vip-tab/vip-tab.component.scss diff --git a/src/app/pages/main/vip-tab/vip-tab.component.spec.ts b/src/app/pages/tabset/vip-tab/vip-tab.component.spec.ts similarity index 100% rename from src/app/pages/main/vip-tab/vip-tab.component.spec.ts rename to src/app/pages/tabset/vip-tab/vip-tab.component.spec.ts diff --git a/src/app/pages/main/vip-tab/vip-tab.component.ts b/src/app/pages/tabset/vip-tab/vip-tab.component.ts similarity index 100% rename from src/app/pages/main/vip-tab/vip-tab.component.ts rename to src/app/pages/tabset/vip-tab/vip-tab.component.ts