历史数据修改优化

src/app/pages/historical-data/historical-data.component.html

@@ -1,5 +1,5 @@
-<div class="main-page" #mainPage>
+<div class="main-page">
-    <div class="page-content">
+    <div class="page-content" #pageContent>
         <div class="search-filter mb-3" #searchFilter>
             <div class="first-condition row">
                 <div class="line-operator-left input-container mb-3 col-xlg-8 col-mlg-8 col-xl-8 col-lg-10">
@@ -15,7 +15,9 @@
                         <input type="radio" [(ngModel)]="FLT_POS" [value]="2" name="filter-position">
                         <span>查找定位</span>
                     </label>
-                    <input class="form-control" [(ngModel)]="SEARCH" type="text" (keyup.enter)="inputEnter()">
+                    <input class="form-control mr-4" [(ngModel)]="SEARCH" type="text" (keyup.enter)="inputEnter()">
+                    <label for="">查询日期：&nbsp;&nbsp;</label>
+                    <input readonly style="background:transparent;cursor: pointer" type="text" id="selectDate" class="form-control">
                 </div>
                 <div class="line-operator-right mb-3 col-xlg-4 col-mlg-4 col-xl-4 col-lg-2">
                     <button type="button" class="btn btn-info mr-2" (click)="toggleFilter()">{{filterClose?'展开':'关闭'}}</button>
@@ -77,10 +79,6 @@
                         <option *ngFor="let anget of flightAgents" [value]="anget.oGId">{{anget.flightAgentName}}</option>
                     </select>
                 </div>
-                <div class="input-container mr-4">
-                    <label for="">查询日期：&nbsp;&nbsp;</label>
-                    <input readonly style="background:transparent;cursor: pointer" type="text" id="selectDate" class="form-control">
-                </div>
             </div>
 
             <div [ngClass]="{'filterClose-c':filterClose,'filterClose-o':!filterClose}" class="third-condition row">
@@ -108,40 +106,51 @@
         </div>
         <div class="airline-table">
             <div #tableContainer id="table-container" class="table-container" [ngClass]="{'table-c': !tabClose,'table-o': tabClose}">
-                <table id="table" class="table table-bordered table-striped" style="position:relative">
+                <div class="table-head" #tableHead>
-                    <thead>
+                    <table class="table">
-                        <tr>
+                        <thead>
-                            <th>序号</th>
+                            <tr>
-                            <th *ngFor="let airline_col of render_col_lists">{{airline_col.COL_CN}}</th>
+                                <th style="min-width:55px">序号</th>
-                        </tr>
+                                <th style="min-width:165px">航班ID</th>
-                    </thead>
+                                <th *ngFor="let airline_col of render_col_lists" [ngStyle]="{'min-width':airline_col.COL_WIDTH}">{{airline_col.COL_CN}}</th>
-                    <tbody>
+                            </tr>
-                        <tr *ngFor="let airline_row of render_data;let i = index;last as isLast" (click)="selectRow(airline_row)"
+                        </thead>
-                            [ngClass]="{'selected':row_state['renderFlight']['FLNO']===airline_row['renderFlight']['FLNO']}">
+                    </table>
-                            <td>{{i+1}}</td>
+                </div>
-                            <td *ngFor="let airline_col of render_col_lists" [ngClass]="getPosition(airline_col.COL_CODE,airline_row)">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
+                <div class="table-body" #tableBody (scroll)="handleScroll($event)">
-                        </tr>
+                    <div class="list-view-phantom" [ngStyle]="{ 'height': wait_render_data.length * 42 + 'px' }"></div>
-                    </tbody>
+                    <table #tableContent id="table" class="table table-striped">
-                </table>
+                        <tbody>
+                            <ng-container *ngFor="let airline_row of render_data;last as isLast;index as i">
+                                <tr *ngIf="setWidth(isLast)" (click)="selectRow(airline_row)" [ngClass]="{'selected':getSelectedRow(airline_row)}">
+                                    <td style="min-width:55px">{{start+i+1}}</td>
+                                    <td style="min-width:165px">{{airline_row['renderFlight']['FLID']}}</td>
+                                    <td *ngFor="let airline_col of render_col_lists" [ngClass]="getPosition(airline_col.COL_CODE,airline_row)"
+                                        [ngStyle]="{'min-width':airline_col.COL_WIDTH}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
+                                </tr>
+                            </ng-container>
+                        </tbody>
+                    </table>
+                </div>
             </div>
-            <div class="airline-message" [ngClass]="{'tab-c': tabClose,'tab-o': !tabClose}">
+            <div #tabContainer class="airline-message" [ngClass]="{'tab-c': tabClose,'tab-o': !tabClose}">
-                <!-- <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'" [nzShowPagination]="false">
+                <nz-tabset [nzTabPosition]="'right'" [nzType]="'card'" [nzShowPagination]="false">
-                    <nz-tab nzTitle="关联信息" (nzClick)="nzClick()" *ngIf="checkboxGroup.related">
+                    <nz-tab nzTitle="关联信息" *ngIf="checkboxGroup.related">
-                        <app-related-tab [flight]="row_state"></app-related-tab>
+                        <app-related-tab [flight]="row_state" [allAirports]="airports" [flightDefinitions]="flightStatusDefinitions"></app-related-tab>
                     </nz-tab>
-                    <nz-tab nzTitle="详细信息" (nzClick)="nzClick()" *ngIf="checkboxGroup.detail">
+                    <nz-tab nzTitle="详细信息" *ngIf="checkboxGroup.detail">
                         <app-detail-tab [flight]="row_state"></app-detail-tab>
                     </nz-tab>
-                    <nz-tab nzTitle="保障信息" (nzClick)="nzClick()" *ngIf="checkboxGroup.guarantee">
+                    <nz-tab nzTitle="保障信息" *ngIf="checkboxGroup.guarantee">
                         <app-guarantee-tab></app-guarantee-tab>
                     </nz-tab>
-                    <nz-tab nzTitle="VIP信息" (nzClick)="nzClick()" *ngIf="checkboxGroup.vip">
+                    <nz-tab nzTitle="VIP信息" *ngIf="checkboxGroup.vip">
                         <app-vip-tab></app-vip-tab>
                     </nz-tab>
-                    <nz-tab nzTitle="特服信息" (nzClick)="nzClick()" *ngIf="checkboxGroup.special">
+                    <nz-tab nzTitle="特服信息" *ngIf="checkboxGroup.special">
                         <app-special-tab></app-special-tab>
                     </nz-tab>
-                </nz-tabset> -->
+                </nz-tabset>
             </div>
         </div>
     </div>

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{
+        .airline-table {
-            .table-container{
+            .table-container {
-                // border: 1px solid #ccc;
+                display: inline-block;
+                // position: relative;
                 width: 100%;
-                height: 700px;
+                // overflow-x: auto;
-                overflow: auto;
+                overflow-y: hidden;
-                box-shadow: 0 0 1px .5px #ddd;
+                box-shadow: 0 0 1px 0.5px #ddd;
-                table{
+                .table-head {
-                    width: max-content;
+                    overflow: hidden;
-                    tr{
+                    overflow-y: scroll;
-                        cursor: pointer;
+                    height: 42px;
-                        &.selected{
+                    table {
-                            background: rgb(181, 215, 255);
+                        margin: 0;
+                        width: max-content;
+                        th {
+                            border-bottom: none;
+                            background-color: #ddd;
+                            color: rgb(0, 0, 255);
+                            text-align: center;
                         }
                     }
-                    th{
+                    &::-webkit-scrollbar {
-                        background-color: #ddd;
+                        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%;
+            }
         }
     }
 }

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<object> = [];    //原始数据，未经过任何转换和组合
     public combined_data: Array<object> = [];    //组合数据，即链接航班，显示信息等组合好之后的数据
+    public wait_render_data: Array<object> = [];    //待显示的数据，实际显示从中截取可视区域高度可容纳的数据条数
     public render_data: Array<object> = [];  //显示数据，即需要显示的数据
+    public selectedFilterData: Array<object> = [];
 
     public col_lists: Array<object>;    //列数据
     public render_col_lists: Array<object>;
 
-    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(
+                this.httpCilent.post('/adminapi/hitFlightData/list', { hstFLightTime: this.filterDate }).subscribe(
-            data => {
+                    data => {
-                this.raw_data = data.body;
+                        this.raw_data = data.body;
 
-                //查找链接航班并将其组合成一条数据
+                        //查找链接航班并将其组合成一条数据
-                let combined_linked_data = this.dataHandle.findLinkFlights(this.raw_data);
+                        let combined_linked_data = this.dataHandle.findLinkFlights(this.raw_data);
-                combined_linked_data.forEach(element => {
+                        combined_linked_data.forEach(element => {
-                    let flights_item = this.dataHandle.flightsRenderTransfer(element, this.col_lists);
+                            let flights_item = this.dataHandle.flightsRenderTransfer(element, this.col_lists);
-                    this.combined_data.push(flights_item);
+                            this.combined_data.push(flights_item);
-                });
+                        });
 
-                //从基础数据服务中拿出部分基础数据
+                        //从基础数据服务中拿出部分基础数据
-                this.flightAgents = this.basicDataService.flightAgents;
+                        this.flightAgents = this.basicDataService.flightAgents;
-                this.flightTypes = this.basicDataService.flightTypes;
+                        this.flightTypes = this.basicDataService.flightTypes;
-                this.terminals = this.basicDataService.terminal;
+                        this.terminals = this.basicDataService.terminal;
-                this.flightStatus = this.basicDataService.flightStatus;
+                        this.flightStatus = this.basicDataService.flightStatus;
-                this.airlines = this.basicDataService.airline;
+                        this.airlines = this.basicDataService.airline;
-                this.citys = this.basicDataService.city;
+                        this.citys = this.basicDataService.city;
-                this.airports = this.basicDataService.airport;
+                        this.airports = this.basicDataService.airport;
 
-                if (this.airports && this.airports.length > 0) {
+                        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);
+                        } 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);
+        this.wait_render_data = combined_data;
-        // })
+        this.selectedFilterData = combined_data;
-        // combined_data.sort(function (a, b) {
+        this.calcVisibleCount()
-        //     return (a['ORDER'] - b['ORDER']);
+
-        // })
+        //默认选中第一条
-        this.render_data = combined_data;
+        if (this.render_data.length > 0) {
-        this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
+            this.row_state = this.render_data[0];
-        this.changeDetectorRef.detectChanges();
+        }
-        this.operateSpinServiceService.hideSpin()
+
+        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();
+        setTimeout(() => {
-        this.renderer2.setStyle(this.tableContainer.nativeElement, 'height', this.mainPage.nativeElement.offsetHeight - this.searchFilter.nativeElement.offsetHeight - 55 + 'px');
+            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.httpCilent.post('/adminapi/hitFlightData/list', { hstFLightTime: this.filterDate }).subscribe(
+                        this.raw_data = data.body;
-            data => {
-                this.raw_data = data.body;
 
-                //查找链接航班并将其组合成一条数据
+                        //查找链接航班并将其组合成一条数据
-                this.combined_data = [];
+                        this.combined_data = [];
-                let combined_linked_data = this.dataHandle.findLinkFlights(this.raw_data);
+                        let combined_linked_data = this.dataHandle.findLinkFlights(this.raw_data);
-                combined_linked_data.forEach(element => {
+                        combined_linked_data.forEach(element => {
-                    let flights_item = this.dataHandle.flightsRenderTransfer(element, this.col_lists);
+                            let flights_item = this.dataHandle.flightsRenderTransfer(element, this.col_lists);
-                    this.combined_data.push(flights_item);
+                            this.combined_data.push(flights_item);
-                });
+                        });
-                let combined_data = []
+                        let combined_data = []
-                this.combined_data.forEach(item => {
+                        this.combined_data.forEach(item => {
-                    combined_data.push(this.dataHandle.basicDataTransHandle(item, this.airports, this.citys, this.airlines, this.flightStatus, this.flightTypes));
+                            combined_data.push(this.dataHandle.basicDataTransHandle(item, this.airports, this.citys, this.airlines, this.flightStatus, this.flightTypes));
-                })
+                        })
-                this.combined_data = combined_data;
+                        this.combined_data = combined_data;
-                this.doSequence(this.combined_data);
+                        this.doSequence(this.combined_data);
-                // const toastCfg = new ToastConfig(ToastType.SUCCESS, '', '刷新成功！', 3000);
+                    }
-                // this.toastService.toast(toastCfg);
+                )
             }
         )
     }
@@ -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(() => {
+        this.positionedArray = [];
-            let filter_data = [];
+        this.positionArrayIndex = 0;
-            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) {
+        let filter_data = [];
-                        item['renderFlight'] = item['renderPreFlight'];
+        let filterItems = this.filterItems;
-                        delete item['reaFlight'];
+        this.combined_data.forEach(item => {
-                        delete item['renderReaFlight'];
+            filter_data.push(Object.assign({}, item));
-                        return pre_satis;
+        })
-                    } else if (!pre_satis && rea_satis) {
+        //下拉框筛选
-                        item['renderFlight'] = item['renderReaFlight'];
+        filter_data = filter_data.filter(item => {
-                        delete item['preFlight'];
+            if (this.orderHandle.isArriFlight(item)) {
-                        delete item['renderPreFlight'];
+                let is_satis = true;
-                        return rea_satis;
+                for (const key in filterItems) {
-                    } else if (pre_satis && rea_satis) {
+                    if (filterItems.hasOwnProperty(key) && filterItems[key]) {
-                        return pre_satis && rea_satis;
+                        if (item['preFlight'][key] == filterItems[key]) {
-                    } else {
+                            is_satis = true;
-                        return false;
+                            continue;
+                        } else {
+                            is_satis = false;
+                            break;
+                        }
                     }
                 }
-            })
+                return is_satis;
-            if (this.FLT_POS === 1) {
+            } else if (this.orderHandle.isDeptFlight(item)) {
-                this.inputFilter(filter_data);
+                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;
+                let pre_satis = true;
-                this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
+                let rea_satis = true;
-                this.changeDetectorRef.detectChanges();
+                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.LASTSEARCH) {
-            if (this.SEL_COL) {
+            if (this.LAST_SEL_COL) {
-                let sel_col = this.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.wait_render_data = filterData;
-        this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
+        this.render_data = this.wait_render_data.slice(this.start, this.end);
-        this.changeDetectorRef.detectChanges();
+
-        this.operateSpinServiceService.hideSpin()
+        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<any> = [];
+    positionedArray: Array<any> = [];
     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 => {
+            for (let i = 0; i < filterData.length; i++) {
-                if (element['renderFlight'][sel_col]) {
+                if (i === filterData.length - 1) {
-                    if (element['renderFlight'][sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
+                    this.positionedArray = [];
-                        transArray.push(element)
+                    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.render_col_lists;
-                let cols = this.col_lists;
+            for (let i = 0; i < filterData.length; i++) {
-                for (let i = 0; i < cols.length; i++) {
+                if (i === filterData.length - 1) {
-                    if (element['renderFlight'][cols[i]['COL_CODE']]) {
+                    this.positionedArray = [];
-                        if (element['renderFlight'][cols[i]['COL_CODE']].toString().match(new RegExp(this.SEARCH, 'i'))) {
+                    this.positionArrayIndex = 0;
-                            transArray.push(element)
+                }
+                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) {
+                        if (!this.SEARCH) {
-                            continue;
+                            let hasThisEle: boolean = false;
-                        } else {
+                            hasSearchData = true;
-                            transArray.push(element)
+                            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 (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();
+        if (!hasSearchData) {
-
+            alert("没有搜索到相关数据");
-        let tr = $(".selected");
+        }
-        let objTr = tr[0];
+        if (hasPositionedEle) {
-        if (objTr) {
+            const scrollTop = this.positionArrayIndex * this.trItemHeight
-            $("#table-container").animate({ scrollTop: objTr.offsetTop - 42 }, "slow");
+            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()
+        this.tabClose = tabClose;
-    }
+        if (!this.tabClose) {
-
+            setTimeout(() => {
-    /**
+                this.renderer2.setStyle(this.tabContainer.nativeElement, 'height', this.pageContent.nativeElement.offsetHeight - this.searchFilter.nativeElement.offsetHeight - 35 + 'px');
-     * tab项切换事件
+            }, 10)
-     */
+        }
-    nzClick() {
-        this.changeDetectorRef.detectChanges();
     }
 
     dateFormatter(date) {

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]
 })

src/app/pages/main/main.component.html

@@ -173,7 +173,7 @@
                 </div>
             </div>
             <div #tabContainer class="airline-message" [ngClass]="{'tab-c': tabClose,'tab-o': !tabClose}">
-                <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'" [nzShowPagination]="true">
+                <nz-tabset [nzTabPosition]="'right'" [nzType]="'card'" [nzShowPagination]="false">
                     <nz-tab nzTitle="关联信息" *ngIf="checkboxGroup.related">
                         <app-related-tab [flight]="row_state" [allAirports]="airports" [flightDefinitions]="flightStatusDefinitions"></app-related-tab>
                     </nz-tab>

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;

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']) {

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 { TabsetModule } from '../tabset/tabset.module'
-import { GuaranteeTabComponent } from './guarantee-tab/guarantee-tab.component';
-import { VipTabComponent } from './vip-tab/vip-tab.component';
-import { SpecialTabComponent } from './special-tab/special-tab.component';
 
 @NgModule({
     imports: [
@@ -20,16 +17,12 @@ import { SpecialTabComponent } from './special-tab/special-tab.component';
         ReactiveFormsModule,
         NgZorroAntdModule,
         MainRoutingModule,
-        ToastModule
+        ToastModule,
+        TabsetModule
     ],
     declarations: [
-        MainComponent, 
+        MainComponent,
-        RelatedTabComponent, 
-        DetailTabComponent, 
-        GuaranteeTabComponent, 
-        VipTabComponent, 
-        SpecialTabComponent
     ],
-    providers:[]
+    providers: []
 })
 export class MainModule { }

src/app/pages/seasonal-plan/seasonal-plan.component.html

@@ -100,7 +100,7 @@
                 </div>
             </div>
             <div #tabContainer class="airline-message" [ngClass]="{'tab-c': tabClose,'tab-o': !tabClose}">
-                <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'" [nzShowPagination]="false">
+                <nz-tabset [nzTabPosition]="'right'" [nzType]="'card'" [nzShowPagination]="false">
                     <nz-tab nzTitle="关联信息" *ngIf="checkboxGroup.related">
                         <app-related-tab [flight]="row_state"></app-related-tab>
                     </nz-tab>

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;
                 }

src/app/pages/seasonal-plan/seasonal-plan.component.ts

@@ -394,7 +394,7 @@ export class SeasonalPlanComponent implements OnInit {
     }
 
     /**
-     * 选中高亮
+     * 判断当前行是否是选中的行,是则高亮
      * @param seasonal 
      */
     getSelectedRow(seasonal) {

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;
         }
     }
-}
+}

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 showRemc: string;
-    public vipNumber:any;
+    public vipNumber: any;
-    public isVip:any
+    public isVip: any
 
     @Input() set flight(flight) {
         this.lines = Object.assign({}, flight);

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();
+  });
+});

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 { }