基础数据之机型修改优化

src/app/pages/basic-data/aircraft-type/aircraft-type.component.html

@@ -1,77 +1,64 @@
 <div class="main-page">
-  <div class="page-content">
+    <div class="page-content" #pageContent>
-        <div class="search-filter mb-3">
+        <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">
-                    <select class="mr-4 form-control"  [(ngModel)]="SEL_COL" name="" id="">
+                    <select class="mr-4 form-control" [(ngModel)]="SEL_COL" (ngModelChange)="resetPositionArray()" name=""
+                        id="">
                         <option value="">选择列名</option>
-                        <option *ngFor="let col of col_lists" [value]="col.col_code">{{col.col_chn}}</option>
+                        <option *ngFor="let col of render_col_lists" [value]="col.COL_CODE">{{col.COL_CN}}</option>
                     </select>
                     <label class="radio-inline custom-radio nowrap mr-4">
                         <input type="radio" [(ngModel)]="FLT_POS" [value]="1" name="filter-position">
                         <span>过滤</span>
                     </label>
                     <label class="radio-inline custom-radio nowrap mr-4">
-                        <input type="radio" [(ngModel)]="FLT_POS"  [value]="2" name="filter-position">
+                        <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()" id="inputerInfo">
+                    <input class="form-control" [(ngModel)]="SEARCH" (ngModelChange)="resetPositionArray()" type="text"
+                        (keyup.enter)="inputEnter()" id="inputerInfo">
                 </div>
             </div>
-  
+
             <div class="second-condition mb-3 row">
-              <div class="input-container mr-4">
+                <div class="input-container mr-4">
-                  <label for="aircraftTypeGroupId">机型组：&nbsp;&nbsp;</label>
+                    <label for="aircraftTypeGroupId">机型组：&nbsp;&nbsp;</label>
-                  <select  class="form-control" [(ngModel)]="filterItems.aircraftTypeGroupId" (ngModelChange)="selectChange()" id="jgroup">
+                    <select class="form-control" [(ngModel)]="filterItems.aircraftTypeGroupId" (ngModelChange)="selectChange()"
-                      <option value=""></option>
+                        id="jgroup">
-                      <option *ngFor="let item of aircraftTypesGroups" [value]="item.aircraftTypeGroupId">{{item.aircraftTypeGroupName}}</option>
+                        <option value=""></option>
-                  </select>
+                        <option *ngFor="let item of aircraftTypesGroups" [value]="item.aircraftTypeGroupId">{{item.aircraftTypeGroupName}}</option>
-              </div>
+                    </select>
+                </div>
             </div>
         </div>
-  
+
         <div class="airline-table">
-            <div id="table-container" class="table-container">
+            <div #tableContainer id="table-container" class="table-container">
-                <table id="table" class="table table-bordered table-striped">
+                <div class="table-head" #tableHead>
-                    <thead>
+                    <table class="table">
-                        <tr>
+                        <thead>
-                            <th>序号</th>
+                            <tr>
-                            <th>机型代码</th>
+                                <th style="min-width:55px">序号</th>
-                            <th>机型名称</th>
+                                <th *ngFor="let col of render_col_lists" [ngStyle]="{'min-width':col.COL_WIDTH}">{{col.COL_CN}}</th>
-                            <th>飞机长度</th>
+                            </tr>
-                            <th>翼展</th>
+                        </thead>
-                            <th>机身高度</th>
+                    </table>
-                            <th>最大乘客数</th>
+                </div>
-                            <th>最大货物重量</th>
+                <div class="table-body" #tableBody (scroll)="handleScroll($event)">
-                            <th>最大起飞重量</th>
+                    <div class="list-view-phantom" [ngStyle]="{ 'height': wait_render_data.length * 42 + 'px' }"></div>
-                            <th>最大廊桥数</th>
+                    <table #tableContent id="table" class="table table-striped">
-                            <th>机型组</th>
+                        <tbody>
-                            <th>CAA码</th>
+                            <ng-container *ngFor="let aircraftType of render_data;last as isLast;index as i">
-                            <th>IATA码</th>
+                                <tr *ngIf="setWidth(isLast)" (click)="selectRow(aircraftType)" [ngClass]="{'selected':getSelectedRow(aircraftType)}">
-                            <th>ICAO码</th>
+                                    <td style="min-width:55px">{{start+i+1}}</td>
-                        </tr>
+                                    <td *ngFor="let col of render_col_lists" [ngStyle]="{'min-width':col.COL_WIDTH}">{{aircraftType[col.COL_CODE]}}</td>
-                    </thead>
+                                </tr>
-                    <tbody>
+                            </ng-container>
-                        <tr *ngFor="let aircraftType of render_data;let i = index" (click)="selectRow(aircraftType)"
+                        </tbody>
-                            [ngClass]="{'selected':row_state===aircraftType}">
+                    </table>
-                            <td>{{i+1}}</td>
+                </div>
-                            <td>{{aircraftType.aircraftTypeCode}}</td>
-                            <td>{{aircraftType.aircraftTypeName}}</td>
-                            <td>{{aircraftType.aircraftLength}}</td>
-                            <td>{{aircraftType.aircraftWidth}}</td>
-                            <td>{{aircraftType.aircraftHeight}}</td>
-                            <td>{{aircraftType.maxPassengers}}</td>
-                            <td>{{aircraftType.maxFreightWeight}}</td>
-                            <td>{{aircraftType.maxTakeoffWeight}}</td>
-                            <td>{{aircraftType.maxAirbridges}}</td>
-                            <td>{{aircraftType.aircraftTypeGroupName}}</td>
-                            <td>{{aircraftType.aircraftTypeCodeCaa}}</td>
-                            <td>{{aircraftType.aircraftTypeCodeIata}}</td>
-                            <td>{{aircraftType.aircraftTypeCodeIcao}}</td>
-                        </tr>
-                    </tbody>
-                </table>
             </div>
         </div>
     </div>
-  </div>
+</div>

src/app/pages/basic-data/aircraft-type/aircraft-type.component.scss

@@ -1,59 +0,0 @@
-.main-page {
-    width: 100%;
-    height: 100%;
-    overflow-y: scroll;
-    padding: 15px 10px;
-    background-color: #fff;
-    .page-content {
-        border: 1px solid #ccc;
-        padding: 10px 20px;
-        .search-filter {
-            padding: 0 15px;
-            .input-container {
-                padding: 0;
-                > .form-control {
-                    width: 180px;
-                    display: inline-block;
-                }
-            }
-        }
-        .airline-table{
-            .table-container{
-                // border: 1px solid #ccc;
-                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);
-                        }
-                    }
-                    th{
-                        background-color: #ddd;
-                        color: rgb(0, 0, 255);
-                    }
-                    th,td{
-                        // border: none;
-                        text-align: center;
-                    }
-                }
-            }
-        }
-    }
-}
-
-@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;
-//     }
-// }

src/app/pages/basic-data/aircraft-type/aircraft-type.component.ts

@@ -1,118 +1,214 @@
-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({
     selector: 'app-aircraft-type',
     templateUrl: './aircraft-type.component.html',
-    styleUrls: ['./aircraft-type.component.scss']
+    styleUrls: ['../basic.scss']
 })
 export class AircraftTypeComponent implements OnInit {
 
     constructor(
+        private renderer2: Renderer2,
         private basicDataService: BasicDataService,
-        private changeDetectorRef: ChangeDetectorRef
+        private operateSpinServiceService: OperateSpinServiceService,
-    ) { }
+    ) {
+        this.operateSpinServiceService.showSpin();
+    }
 
-    public col_lists = [
+    public render_col_lists = [
-        { col_code: 'aircraftTypeCode', col_chn: '机型代码' },
+        { COL_CODE: 'aircraftTypeCode', COL_CN: '机型代码', COL_WIDTH: "120px" },
-        { col_code: 'aircraftTypeName', col_chn: '机型名称' },
+        { COL_CODE: 'aircraftTypeName', COL_CN: '机型名称', COL_WIDTH: "180px" },
-        { col_code: 'aircraftLength', col_chn: '飞机长度' },
+        { COL_CODE: 'aircraftLength', COL_CN: '飞机长度', COL_WIDTH: "85px" },
-        { col_code: 'aircraftWidth', col_chn: '翼展' },
+        { COL_CODE: 'aircraftWidth', COL_CN: '翼展', COL_WIDTH: "85px" },
-        { col_code: 'aircraftHeight', col_chn: '机身高度' },
+        { COL_CODE: 'aircraftHeight', COL_CN: '机身高度', COL_WIDTH: "85px" },
-        { col_code: 'maxPassengers', col_chn: '最大乘客数' },
+        { COL_CODE: 'maxPassengers', COL_CN: '最大乘客数', COL_WIDTH: "120px" },
-        { col_code: 'maxFreightWeight', col_chn: '最大货物重量' },
+        { COL_CODE: 'maxFreightWeight', COL_CN: '最大货物重量', COL_WIDTH: "120px" },
-        { col_code: 'maxTakeoffWeight', col_chn: '最大起飞重量' },
+        { COL_CODE: 'maxTakeoffWeight', COL_CN: '最大起飞重量', COL_WIDTH: "120px" },
-        { col_code: 'maxAirbridges', col_chn: '最大廊桥数' },
+        { COL_CODE: 'maxAirbridges', COL_CN: '最大廊桥数', COL_WIDTH: "120px" },
-        { col_code: 'aircraftTypeGroupName', col_chn: '机型组' },
+        { COL_CODE: 'aircraftTypeGroupName', COL_CN: '机型组', COL_WIDTH: "85px" },
-        { col_code: 'aircraftTypeCodeCaa', col_chn: 'CAA码' },
+        { COL_CODE: 'aircraftTypeCodeCaa', COL_CN: 'CAA码', COL_WIDTH: "85px" },
-        { col_code: 'aircraftTypeCodeIata', col_chn: 'IATA码' },
+        { COL_CODE: 'aircraftTypeCodeIata', COL_CN: 'IATA码', COL_WIDTH: "85px" },
-        { col_code: 'aircraftTypeCodeIcao', col_chn: 'ICAO码' },
+        { COL_CODE: 'aircraftTypeCodeIcao', COL_CN: 'ICAO码', COL_WIDTH: "85px" },
     ]
 
     // 搜索条件
     SEARCH = '';    //手动输入条件
+    LASTSEARCH = '';
     FLT_POS = 1;    //过滤还是定位
     SEL_COL = '';   //选择列名
+    LAST_SEL_COL = '';
 
     //下拉框
     public filterItems = {
         aircrafttypegroupId: '',
     }
 
-    aircraftTypesGroups: Array<any>; //机型组
+    public aircraftTypesGroups: Array<any>; //机型组
-    aircraftTypes: Array<any>;
+    public aircraftTypes: Array<any>;
-    public row_state: any = { renderFlight: {} };
+
+    public wait_render_data: Array<object> = [];
     public render_data: Array<object> = [];  //显示数据，即需要显示的数据
+    public selectedFilterData: Array<object> = [];
+
+    public row_state: any = {};
+
+    @ViewChild('pageContent') pageContent;
+    @ViewChild('searchFilter') searchFilter;
+    @ViewChild('tableContainer') tableContainer;
+    @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() {
-        this.aircraftTypesGroups = this.basicDataService.aircraft_type_group;
+        window.onresize = function () {
+            this.calcVisibleCount();
+        }.bind(this)
+
         this.aircraftTypes = this.basicDataService.aircraft_type;
-        this.render_data = this.basicDataService.aircraft_type;
+        this.aircraftTypesGroups = this.basicDataService.aircraft_type_group;
-        this.basicDataService.aircraft_type_subject.subscribe(
+
-            data => {
+        if (this.aircraftTypesGroups && Array.isArray(this.aircraftTypesGroups)) {
-                this.aircraftTypes = data;
+            this.dataTransfer();
-                this.render_data = data;
+        } else {
-            }
+            this.basicDataService.aircraft_type_subject.subscribe(
-        )
+                data => {
-        //机型组
+                    this.aircraftTypes = data;
-        this.basicDataService.aircraft_type_group_subject.subscribe(
-            data => {
-                this.aircraftTypesGroups = data;
-                if(this.aircraftTypesGroups && this.aircraftTypesGroups.length > 0){ //机型组转换处理
-                    this.aircraftTypesGroupsHandle();
                 }
-            }
+            )
-        )
+            //机型组
-        //机型组转换处理
+            this.basicDataService.aircraft_type_group_subject.subscribe(
-        if(this.render_data){
+                data => {
-            this.aircraftTypesGroupsHandle();
+                    this.aircraftTypesGroups = data;
+                    this.dataTransfer();
+                }
+            )
         }
-        /**
-         * 固定表头
-         */
-        var tableCont = document.querySelector('#table-container');
-        function scrollHandle() {
-            var scrollTop = this.scrollTop;
-            this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
-        }
-        tableCont.addEventListener('scroll', scrollHandle);
     }
 
     //机型组转换处理
-    aircraftTypesGroupsHandle() {
+    aircraftTypesGroupsHandle(item) {
-        this.render_data.forEach(item => {
+        let aircraftTypesGroupsLinkIndex = this.aircraftTypesGroups.findIndex(val => val.aircraftTypeGroupId === item['aircraftTypeGroupId']);
-            let aircraftTypesGroupsLinkIndex = this.aircraftTypesGroups.findIndex(val => val.aircraftTypeGroupId === item['aircraftTypeGroupId']);
+        if (this.aircraftTypesGroups[aircraftTypesGroupsLinkIndex]) {
-            if(this.aircraftTypesGroups[aircraftTypesGroupsLinkIndex]){
+            item['aircraftTypeGroupName'] = this.aircraftTypesGroups[aircraftTypesGroupsLinkIndex].aircraftTypeGroupName;
-                item['aircraftTypeGroupName'] = this.aircraftTypesGroups[aircraftTypesGroupsLinkIndex].aircraftTypeGroupName;
+        }
-            }
+    }
+
+    /**
+ * 数据转换显示统一处理
+ */
+    dataTransfer() {
+        this.aircraftTypes.forEach(item => {
+            this.aircraftTypesGroupsHandle(item);
         })
+
+        this.wait_render_data = this.aircraftTypes;
+        this.selectedFilterData = this.aircraftTypes;
+        this.calcVisibleCount();
+
+        //默认选中第一条
+        if (this.render_data.length > 0) {
+            this.row_state = this.render_data[0];
+        }
+        this.operateSpinServiceService.hideSpin();
+    }
+
+    /**
+     * 设置动态设置单元格的宽度
+     * @param isLast 
+     */
+    setWidth(isLast) {
+        if (isLast) {
+            $(".table-body tbody>tr").eq(0).find('td').each((index, element) => {
+                $(".table-head table thead tr").eq(0).find('th').eq(index).attr('width', $(element).outerWidth() + 'px');
+            })
+            if (this.tableBody.nativeElement.scrollHeight <= (this.tableBody.nativeElement.innerHeight || this.tableBody.nativeElement.clientHeight)) {
+                this.tableHead.nativeElement.style.overflowY = 'auto';
+            } else {
+                this.tableHead.nativeElement.style.overflowY = 'scroll';
+            }
+        }
+        return true;
+    }
+
+    /**
+     * 纵向滚动条滚动渲染数据
+     */
+    handleScroll() {
+        const scrollTop = this.tableBody.nativeElement.scrollTop;
+        $(".table-head").scrollLeft($('.table-body').scrollLeft());
+        const fixedScrollTop = scrollTop - scrollTop % this.trItemHeight;
+        this.tableContent.nativeElement.style.webkitTransform = `translateY(${fixedScrollTop}px)`;
+        this.start = Math.floor(scrollTop / this.trItemHeight);
+        this.end = this.start + this.visibleCount;
+        this.render_data = this.wait_render_data.slice(this.start, this.end);
+    }
+
+    /**
+     * 计算可视区域数据的渲染
+     */
+    calcVisibleCount() {
+        this.renderer2.setStyle(this.tableContainer.nativeElement, 'height', this.pageContent.nativeElement.offsetHeight - this.searchFilter.nativeElement.offsetHeight - 35 + 'px');
+        this.renderer2.setStyle(this.tableBody.nativeElement, 'height', this.tableContainer.nativeElement.offsetHeight - this.tableHead.nativeElement.offsetHeight + 'px');
+        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 i 
+     * @param aircraftType 
      */
-    selectRow(i) {
+    selectRow(aircraftType) {
-        this.row_state = i;
+        this.row_state = aircraftType;
+    }
+
+    /**
+     * 判断当前行是否是选中的行,是则高亮
+     * @param aircraftType 
+     */
+    getSelectedRow(aircraftType) {
+        if (aircraftType.aircraftTypeCode === this.row_state.aircraftTypeCode) {
+            return true;
+        } else {
+            return false;
+        }
     }
 
     ///输入框回车事件
     inputEnter() {
         if (this.FLT_POS === 1) {
-            this.selectChange()
+            this.LAST_SEL_COL = this.SEL_COL;
+            this.LASTSEARCH = this.SEARCH;
+            this.operateSpinServiceService.showSpin();
+            this.inputFilter(this.selectedFilterData);
         } else {
-            this.inputPosition(this.render_data)
+            this.inputPosition(this.wait_render_data)
         }
     }
 
     //下拉框选择筛选
     selectChange() {
-        this.render_data = this.aircraftTypes.filter(item => {
+        this.operateSpinServiceService.showSpin();
+        this.positionedArray = [];
+        this.positionArrayIndex = 0;
+        let filter_data = this.aircraftTypes.filter(item => {
             let is_satis = true;
             for (const key in this.filterItems) {
                 if (this.filterItems.hasOwnProperty(key) && this.filterItems[key]) {
-                    if (item[key] == this.filterItems[key]) {
+                    if (item[key] === +this.filterItems[key]) {
                         is_satis = true;
                         continue;
                     } else {
@@ -123,35 +219,54 @@ export class AircraftTypeComponent implements OnInit {
             }
             return is_satis;
         })
+        this.selectedFilterData = filter_data;
+
+
         if (this.FLT_POS === 1) {
-            this.inputFilter(this.render_data);
+            this.inputFilter(filter_data);
         } else {
-            this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
+            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 aircraftType = this.wait_render_data[i];
+                if (aircraftType['aircraftTypeCode'] === this.row_state.aircraftTypeCode) {
+                    this.row_state = aircraftType;
+                    hasSelectedRow = true;
+                    break;
+                }
+            }
+            if (!hasSelectedRow) {
+                if (this.render_data.length > 0) {
+                    this.row_state = this.render_data[0];
+                }
+            }
+            this.operateSpinServiceService.hideSpin();
         }
     }
 
     //输入框筛选
     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;
-                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'))) {
+                        if (item[sel_col].toString().match(new RegExp(this.LASTSEARCH, 'i'))) {
                             return true;
                         }
                     } else {
                         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']]) {
-                            if (item[cols[i].col_code].toString().match(new RegExp(this.SEARCH, 'i'))) {
+                            if (item[cols[i]['COL_CODE']].toString().match(new RegExp(this.LASTSEARCH, 'i'))) {
                                 is_satis = true;
                                 break;
                             } else {
@@ -166,73 +281,174 @@ export class AircraftTypeComponent 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 aircraftType = this.wait_render_data[i];
+            if (aircraftType['aircraftTypeCode'] === this.row_state.aircraftTypeCode) {
+                this.row_state = aircraftType;
+                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[sel_col]) {
+                if (i === filterData.length - 1) {
-                    if (element[sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
+                    this.positionedArray = [];
-                        transArray.push(element)
+                    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.aircraftTypeCode === fliterElement.aircraftTypeCode);
+                            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.aircraftTypeCode === fliterElement.aircraftTypeCode);
+                            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[cols[i].col_code]) {
+                    this.positionedArray = [];
-                        if (element[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[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.aircraftTypeCode === filterElement.aircraftTypeCode);
+                                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 = (positionedElement.aircraftTypeCode === filterElement.aircraftTypeCode);
+                                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();
-        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;
+        }
+    }
+
+    /**
+     * 重置定位数组
+     */
+    resetPositionArray() {
+        this.positionedArray = [];
+        this.positionArrayIndex = 0;
     }
 }

src/app/pages/basic-data/city/city.component.ts

@@ -197,7 +197,7 @@ export class CityComponent implements OnInit {
             let is_satis = true;
             for (const key in this.filterItems) {
                 if (this.filterItems.hasOwnProperty(key) && this.filterItems[key]) {
-                    if (item[key] === this.filterItems[key]) {
+                    if (item[key] === +this.filterItems[key]) {
                         is_satis = true;
                         continue;
                     } else {