From 3e542bb52c6d043d5e7252adb5f0595216465bc7 Mon Sep 17 00:00:00 2001 From: zhouyuejun <505127606@qq.com> Date: Tue, 19 Feb 2019 15:57:47 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9F=BA=E7=A1=80=E6=95=B0=E6=8D=AE=E4=B9=8B?= =?UTF-8?q?=E5=80=BC=E6=9C=BA=E5=B2=9B=E4=BC=98=E5=8C=96=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../checkin-group.component.html | 76 ++-- .../checkin-group.component.scss | 102 ++++-- .../checkin-group/checkin-group.component.ts | 329 ++++++++++++++---- .../historical-data.component.scss | 2 +- src/app/pages/main/main.component.scss | 2 +- .../seasonal-plan.component.scss | 3 +- .../seasonal-plan/seasonal-plan.component.ts | 72 ---- src/app/services/basic-data-service.ts | 44 +-- 8 files changed, 393 insertions(+), 237 deletions(-) diff --git a/src/app/pages/basic-data/checkin-group/checkin-group.component.html b/src/app/pages/basic-data/checkin-group/checkin-group.component.html index 3361d2e..017eb48 100644 --- a/src/app/pages/basic-data/checkin-group/checkin-group.component.html +++ b/src/app/pages/basic-data/checkin-group/checkin-group.component.html @@ -1,45 +1,51 @@
-
-
-
-
- - - -
-
-
+ +
+
+ -
-
- - - - - - - - - - - - - - - -
序号值机岛代码值机岛名称
{{i+1}}{{checkinGroup.checkinGroupCode}}{{checkinGroup.checkinGroupName}}
-
-
- +
+
+
+ + + + + + + +
序号{{col.COL_CN}}
+
+
+
+ + + + + + + + + +
{{start+i+1}}{{checkinGroup[col.COL_CODE]}}
+
+
+
+ \ No newline at end of file diff --git a/src/app/pages/basic-data/checkin-group/checkin-group.component.scss b/src/app/pages/basic-data/checkin-group/checkin-group.component.scss index 2804efa..84ffb13 100644 --- a/src/app/pages/basic-data/checkin-group/checkin-group.component.scss +++ b/src/app/pages/basic-data/checkin-group/checkin-group.component.scss @@ -1,14 +1,16 @@ .main-page { + position: relative; width: 100%; height: 100%; - overflow-y: scroll; + overflow-y: auto; padding: 15px 10px; - background-color: #fff; + background-color: #fff; .page-content { border: 1px solid #ccc; + height: 100%; padding: 10px 20px; .search-filter { - padding: 0 15px; + padding: 0 15px; .input-container { padding: 0; > .form-control { @@ -18,42 +20,78 @@ } } .airline-table{ - .table-container{ - // border: 1px solid #ccc; + .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: auto; + height: 42px; + table { + margin: 0; + width: max-content; + th { + border-bottom: none; + background-color: #ddd; + text-align: center; + color: rgb(0, 0, 255); } } - th{ - background-color: #ddd; - color: rgb(0, 0, 255); + &::-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 { + 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; } } } } } } - -@media screen and (max-width: 991px) { - .line-operator-right { - text-align: left !important; - } -} - -// @media screen and (min-width: 1200px){ -// .line-operator-right{ -// text-align: left; -// } -// } diff --git a/src/app/pages/basic-data/checkin-group/checkin-group.component.ts b/src/app/pages/basic-data/checkin-group/checkin-group.component.ts index a56c171..676f0b0 100644 --- a/src/app/pages/basic-data/checkin-group/checkin-group.component.ts +++ b/src/app/pages/basic-data/checkin-group/checkin-group.component.ts @@ -1,6 +1,6 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewChild, Renderer2 } from '@angular/core'; import { BasicDataService } from '../../../services/basic-data-service'; -import { ChangeDetectorRef } from '@angular/core'; +import { OperateSpinServiceService } from '../../../services/operate-spin-service.service'; import * as $ from 'jquery'; @Component({ @@ -11,13 +11,16 @@ import * as $ from 'jquery'; export class CheckinGroupComponent implements OnInit { constructor( + private renderer2: Renderer2, private basicDataService: BasicDataService, - private changeDetectorRef: ChangeDetectorRef - ) { } + private operateSpinServiceService: OperateSpinServiceService, + ) { + this.operateSpinServiceService.showSpin(); + } - public col_lists = [ - { col_code: 'checkinGroupCode', col_chn: '值机岛代码' }, - { col_code: 'checkinGroupName', col_chn: '值机岛名称' } + public render_col_lists: Array = [ + { COL_CODE: 'checkinGroupCode', COL_CN: '值机岛代码', COL_WIDTH: "120px" }, + { COL_CODE: 'checkinGroupName', COL_CN: '值机岛名称', COL_WIDTH: "120px" } ] // 搜索条件 @@ -25,43 +28,122 @@ export class CheckinGroupComponent implements OnInit { FLT_POS = 1; //过滤还是定位 SEL_COL = ''; //选择列名 - checkinGroups: Array = []; + public checkinGroups: Array; + + public wait_render_data: Array = []; public render_data: Array = []; //显示数据，即需要显示的数据 public row_state: any = {}; + @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() { + window.onresize = function () { + this.calcVisibleCount(); + }.bind(this) + this.checkinGroups = this.basicDataService.checkin_group; - this.render_data = this.basicDataService.checkin_group; - this.basicDataService.checkin_group_subject.subscribe( - data => { - this.checkinGroups = data; - this.render_data = data; - } - ) - /** - * 固定表头 - */ - var tableCont = document.querySelector('#table-container'); - function scrollHandle() { - var scrollTop = this.scrollTop; - this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)'; + // this.render_data = this.basicDataService.checkin_group; + if (this.checkinGroups && Array.isArray(this.checkinGroups)) { + this.wait_render_data = this.checkinGroups; + this.operateSpinServiceService.hideSpin(); + this.calcVisibleCount(); + } else { + this.basicDataService.checkin_group_subject.subscribe( + data => { + this.checkinGroups = data; + this.wait_render_data = data; + this.operateSpinServiceService.hideSpin(); + this.calcVisibleCount(); + } + ) } - tableCont.addEventListener('scroll', scrollHandle); } /** * 选中某行 - * @param i + * @param checkinGroup */ - selectRow(i) { - this.row_state = i; + selectRow(checkinGroup) { + this.row_state = checkinGroup; + } + + /** + * 设置动态设置单元格的宽度 + * @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'); + }) + 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'); + 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); + } + + /** + * 判断当前行是否是选中的行,是则高亮 + * @param checkinGroup + */ + getSelectedRow(checkinGroup) { + if (checkinGroup.checkinGroupCode === this.row_state.checkinGroupCode) { + return true; + } else { + return false; + } } //输入框回车事件 inputEnter() { if (this.FLT_POS === 1) { - this.inputFilter(this.checkinGroups) + this.operateSpinServiceService.showSpin(); + this.inputFilter(this.checkinGroups); } else { this.inputPosition(this.render_data) } @@ -73,7 +155,7 @@ export class CheckinGroupComponent implements OnInit { if (this.SEARCH) { if (this.SEL_COL) { let sel_col = this.SEL_COL; - this.render_data = filterData.filter(item => { + filterData = filterData.filter(item => { if (item[sel_col]) { if (item[sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) { return true; @@ -82,14 +164,13 @@ export class CheckinGroupComponent implements OnInit { return false; } }) - } else { - this.render_data = filterData.filter(item => { + filterData = filterData.filter(item => { let is_satis = false; - let cols = this.col_lists; + let cols = this.render_col_lists; for (let i = 0; i < cols.length; i++) { - if (item[cols[i].col_code]) { - if (item[cols[i].col_code].toString().match(new RegExp(this.SEARCH, 'i'))) { + if (item[cols[i]['COL_CODE']]) { + if (item[cols[i]['COL_CODE']].toString().match(new RegExp(this.SEARCH, 'i'))) { is_satis = true; break; } else { @@ -104,73 +185,175 @@ export class CheckinGroupComponent implements OnInit { return is_satis; }) } - } else { - this.render_data = filterData; } + 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 checkinGroup = this.wait_render_data[i]; + if (checkinGroup['checkinGroupCode'] === this.row_state.seasonflightId) { + this.row_state = checkinGroup; + 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[sel_col]) { - if (element[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[sel_col]) { + if (fliterElement[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 = (positionedElement.seasonflightId === fliterElement.seasonflightId); + 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 = (positionedElement.seasonflightId === fliterElement.seasonflightId); + 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[cols[i].col_code]) { - if (element[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[elementCol['COL_CODE']]) { + if (filterElement[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 = (positionedElement.seasonflightId === filterElement.seasonflightId); + 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 = (positionedElement.seasonflightId === filterElement.seasonflightId); + 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 (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('没有搜索到相关数据'); + if (!hasSearchData) { + alert("没有搜索到相关数据"); } - this.changeDetectorRef.detectChanges(); - let tr = $(".selected"); - let objTr = tr[0]; - if (objTr) { - $("#table-container").animate({ scrollTop: objTr.offsetTop - 42 }, "slow"); + if (hasPositionedEle) { + const scrollTop = this.positionArrayIndex * this.trItemHeight + this.tableBody.nativeElement.scrollTop = scrollTop; } } + + /** + * 重置定位数组 + */ + resetPositionArray() { + this.positionedArray = []; + this.positionArrayIndex = 0; + } } diff --git a/src/app/pages/historical-data/historical-data.component.scss b/src/app/pages/historical-data/historical-data.component.scss index 40faa34..6b4dd3a 100644 --- a/src/app/pages/historical-data/historical-data.component.scss +++ b/src/app/pages/historical-data/historical-data.component.scss @@ -54,7 +54,7 @@ box-shadow: 0 0 1px 0.5px #ddd; .table-head { overflow: hidden; - overflow-y: scroll; + overflow-y: auto; height: 42px; table { margin: 0; diff --git a/src/app/pages/main/main.component.scss b/src/app/pages/main/main.component.scss index 01017e3..00b2761 100644 --- a/src/app/pages/main/main.component.scss +++ b/src/app/pages/main/main.component.scss @@ -54,7 +54,7 @@ box-shadow: 0 0 1px 0.5px #ddd; .table-head { overflow: hidden; - overflow-y: scroll; + overflow-y: auto; height: 42px; table { margin: 0; diff --git a/src/app/pages/seasonal-plan/seasonal-plan.component.scss b/src/app/pages/seasonal-plan/seasonal-plan.component.scss index bfb8ad6..934b321 100644 --- a/src/app/pages/seasonal-plan/seasonal-plan.component.scss +++ b/src/app/pages/seasonal-plan/seasonal-plan.component.scss @@ -48,12 +48,13 @@ box-shadow: 0 0 1px 0.5px #ddd; .table-head { overflow: hidden; - overflow-y: scroll; + overflow-y: auto; height: 42px; table { margin: 0; width: max-content; th { + border-bottom: none; background-color: #ddd; text-align: center; color: rgb(0, 0, 255); diff --git a/src/app/pages/seasonal-plan/seasonal-plan.component.ts b/src/app/pages/seasonal-plan/seasonal-plan.component.ts index 28420ac..f1016f9 100644 --- a/src/app/pages/seasonal-plan/seasonal-plan.component.ts +++ b/src/app/pages/seasonal-plan/seasonal-plan.component.ts @@ -666,78 +666,6 @@ export class SeasonalPlanComponent implements OnInit { const scrollTop = this.positionArrayIndex * this.trItemHeight this.tableBody.nativeElement.scrollTop = scrollTop; } - - - - - - - - - - - - - - - - // let transArray = [] - // if (this.SEL_COL) { - // let sel_col = this.SEL_COL; - // filterData.forEach(element => { - // if (element[sel_col]) { - // if (element[sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) { - // transArray.push(element) - // } - // } else { - // if (!this.SEARCH) { - // transArray.push(element) - // } - // } - // }); - // } else { - // filterData.forEach(element => { - // let cols = this.render_col_lists; - // for (let i = 0; i < cols.length; i++) { - // if (element[cols[i]['COL_CODE']]) { - // if (element[cols[i]['COL_CODE']].toString().match(new RegExp(this.SEARCH, 'i'))) { - // transArray.push(element) - // break; - // } else { - // continue; - // } - // } else { - // if (this.SEARCH) { - // continue; - // } else { - // transArray.push(element) - // break; - // } - // } - // } - // }); - // } - - // 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('没有搜索到相关数据'); - // } - // let tr = $(".selected"); - // let objTr = tr[0]; - // if (objTr) { - // $("#table-container").animate({ scrollTop: objTr.offsetTop - 42 }, "slow"); - // } } /** diff --git a/src/app/services/basic-data-service.ts b/src/app/services/basic-data-service.ts index 074dc9d..0fbf229 100644 --- a/src/app/services/basic-data-service.ts +++ b/src/app/services/basic-data-service.ts @@ -4,49 +4,49 @@ import { Subject, forkJoin, zip } from 'rxjs' @Injectable() export class BasicDataService { - public flightStatusDefinitions:Array = []; + public flightStatusDefinitions:Array; public flightStatusDefinitions_subject = new Subject(); - public flightAgents:Array = []; + public flightAgents:Array; public flightAgents_subject = new Subject(); - public flightTypes:Array = []; + public flightTypes:Array; public flightTypes_subject = new Subject(); - public flightStatus:Array = []; + public flightStatus:Array; public flightStatus_subject = new Subject(); - public checkin_group: Array = []; + public checkin_group: Array; public checkin_group_subject = new Subject(); - public gate: Array = []; + public gate: Array; public gate_subject = new Subject(); - public terminal: Array = []; + public terminal: Array; public terminal_subject = new Subject(); - public chut: Array = []; + public chut: Array; public chut_subject = new Subject(); - public stand: Array = []; + public stand: Array; public stand_subject = new Subject(); - public standType: Array = []; + public standType: Array; public standType_subject = new Subject(); - public carousel: Array = []; + public carousel: Array; public carousel_subject = new Subject(); - public checkin_desk: Array = []; + public checkin_desk: Array; public checkin_desk_subject = new Subject(); - public airport: Array = []; + public airport: Array; public airport_subject = new Subject(); - public city: Array = []; + public city: Array; public city_subject = new Subject(); - public aircraft_type: Array = []; + public aircraft_type: Array; public aircraft_type_subject = new Subject(); - public aircraft: Array = []; + public aircraft: Array; public aircraft_subject = new Subject(); - public terminal_area: Array = []; + public terminal_area: Array; public terminal_area_subject = new Subject(); - public airline: Array = []; + public airline: Array; public airline_subject = new Subject(); - public country: Array = []; + public country: Array; public country_subject = new Subject(); - public aircraft_type_group: Array = []; + public aircraft_type_group: Array; public aircraft_type_group_subject = new Subject(); - public airportgroup: Array = []; + public airportgroup: Array; public airportgroup_subject = new Subject(); - public airlinegroup: Array = []; + public airlinegroup: Array; public airlinegroup_subject = new Subject(); constructor(