航班定位及精确定位

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

@@ -14,7 +14,7 @@
                         <input type="radio" [(ngModel)]="FLT_POS" [value]="2" name="filter-position">
                         <span>查找定位</span>
                     </label>
-                    <input class="form-control" [(ngModel)]="SEARCH" type="text" (keyup.enter) = "inputFliter()">
+                    <input class="form-control" [(ngModel)]="SEARCH" type="text" (keyup.enter) = "inputEnter()">
                 </div>
                 <div class="line-operator-right mb-3 col-xlg-4 col-mlg-4 col-xl-4 col-lg-1">
                     <!-- <button type="button" class="btn btn-info mr-3">灯光关闭</button>
@@ -33,7 +33,7 @@
                 </div>
                 <div class="input-container mr-4">
                     <label for="">航线类别：&nbsp;&nbsp;</label>
-                    <select [(ngModel)]="filterItems.FLIN" class="form-control">
+                    <select [(ngModel)]="filterItems.FLIN" (ngModelChange)="selectChange()" class="form-control">
                         <option value=""></option>
                         <option value="D">国内</option>
                         <option value="I">国际</option>
@@ -43,7 +43,7 @@
                 </div>
                 <div class="input-container mr-4">
                     <label for="">航班类别：&nbsp;&nbsp;</label>
-                    <select [(ngModel)]="filterItems.FLTY" class="form-control">
+                    <select [(ngModel)]="filterItems.FLTY" (ngModelChange)="selectChange()" class="form-control">
                         <option value=""></option>
                         <option value="">客机</option>
                         <option value="">货机</option>
@@ -59,7 +59,7 @@
                 </div> -->
                 <div class="input-container mr-4">
                     <label for="">到达/出发：</label>
-                    <select [(ngModel)]="filterItems.MVIN" class="form-control">
+                    <select [(ngModel)]="filterItems.MVIN" (ngModelChange)="selectChange()" class="form-control">
                         <option value=""></option>
                         <option value="A">到达</option>
                         <option value="D">离港</option>
@@ -73,7 +73,7 @@
                 </div>
                 <div class="input-container mr-4">
                     <label for="">航站楼：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
-                    <select [(ngModel)]="filterItems.TRML" class="form-control">
+                    <select [(ngModel)]="filterItems.TRML" (ngModelChange)="selectChange()" class="form-control">
                         <option value=""></option>
                         <option value="T1">T1</option>
                         <option value="T2">T2</option>
@@ -135,8 +135,8 @@
             </div>
         </div>
         <div class="airline-table">
-            <div class="table-container">
+            <div id="table-container" class="table-container">
-                <table class="table table-bordered table-striped">
+                <table id="table" class="table table-bordered table-striped">
                     <thead>
                         <tr>
                             <th>序号</th>
@@ -145,7 +145,7 @@
                         </tr>
                     </thead>
                     <tbody>
-                        <tr *ngFor="let airline_row of render_data;let i = index" (click)="selectRow(i)" [ngClass]="{'active':row_state===i}">
+                        <tr *ngFor="let airline_row of render_data;let i = index" (click)="selectRow(airline_row)" [ngClass]="{'selected':row_state['renderFlight']['FLNO']===airline_row['renderFlight']['FLNO']}">
                             <td>{{i+1}}</td> 
                             <td></td>
                             <td *ngFor="let airline_col of col_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>

src/app/pages/main/main.component.scss

@@ -36,7 +36,7 @@
                     width: max-content;
                     tr{
                         cursor: pointer;
-                        &.active{
+                        &.selected{
                             background: rgb(181, 215, 255);
                         }
                     }

src/app/pages/main/main.component.ts

@@ -7,7 +7,9 @@ import dateFormatter from '../../utils/data-formatter';
 import routeType from '../../utils/route-type';
 import flightType from '../../utils/flight-type';
 import arriDept from '../../utils/arri-dept';
+import { HttpParams } from '@angular/common/http';
 
+import * as $ from 'jquery';
 @Component({
     selector: 'app-main',
     templateUrl: './main.component.html',
@@ -24,13 +26,15 @@ export class MainComponent implements OnInit {
 
     public combined_data: Array<object> = [];    //组合数据，即链接航班，显示信息等组合好之后的数据
 
+    // public filter_data:Array<object> = [];      //用于过滤和定位的数据
+
     public render_data: Array<object> = [];  //显示数据，即需要显示的数据
 
 
 
     public col_lists: Array<object>;    //列数据
     public airline_color: Array<object> = [];
-    public row_state: number;
+    public row_state: any = { renderFlight: {} };
 
 
     public TOP_1 = 1000000000000;
@@ -99,6 +103,7 @@ export class MainComponent implements OnInit {
     }
 
     ngOnInit() {
+        // console.log($)
         this.changeDetectorRef.detach();
         /* 获取显示列 */
         this.httpCilent.get('/assets/mock-data/airline-col_code.json').subscribe(
@@ -117,7 +122,7 @@ export class MainComponent implements OnInit {
                     this.raw_data.push(JSON.parse(element.value));
                 });
 
-                let combined_linked_data = this.raw_data
+                let combined_linked_data = this.raw_data;
                 // this.combined_data = this.raw_data
 
                 //查找链接航班并将其组合成一条数据
@@ -187,68 +192,52 @@ export class MainComponent implements OnInit {
                     this.combined_data.push(row_flights)
                 })
 
-                //排序
+                this.doSequence(this.combined_data);
-                this.combined_data.forEach(element => {
-                    element['ORDER'] = this.sequence(element)
-                })
-
-                this.combined_data.sort(function (a, b) {
-                    return (a['ORDER'] - b['ORDER']);
-                })
-
-
-                this.render_data = this.combined_data
-
-                this.changeDetectorRef.detectChanges();
             }
         )
     }
 
 
     /**
-     * 过滤机定位
+     * 执行排序并渲染
+     */
+    doSequence(sequenceData) {
+        sequenceData.forEach(element => {
+            element['ORDER'] = this.sequence(element);
+        })
+
+        sequenceData.sort(function (a, b) {
+            return (a['ORDER'] - b['ORDER']);
+        })
+
+        this.render_data = sequenceData;
+        this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
+        this.changeDetectorRef.detectChanges();
+    }
+
+
+    /**
+     * 过滤及定位
      * @param filterItems
      * @return
      */
-
+    //输入框回车事件
-    inputFliter() {
+    inputEnter() {
-        let filterItems = this.filterItems;
+        if (this.FLT_POS === 1) {
-        let combined_data = this.combined_data;
+            this.selectChange()
-        let filter_data = [];
-
-        let sel_col = this.SEL_COL;
-
-        if (this.FLT_POS === 1) {  //过滤 
-            //手动输入框筛选
-            if(sel_col){
-                combined_data.forEach(item=>{
-                    if(item['renderFlight'][sel_col]){
-                        if (item['renderFlight'][sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
-                            filter_data.push(Object.assign({}, item))
-                        }
-                    }else{
-                        if(!this.SEARCH){
-                            filter_data.push(Object.assign({}, item))
-                        }
-                    }
-                })
-            }else{
-                combined_data.forEach(item => {
-                    for (const key in item['renderFlight']) {
-                        if (item['renderFlight'].hasOwnProperty(key)) {
-                            if (item['renderFlight'][key]) {
-                                if (item['renderFlight'][key].toString().match(new RegExp(this.SEARCH, 'i'))) {
-                                    filter_data.push(Object.assign({}, item))
-                                    break;
-                                }
         } else {
-                                continue;
+            this.selectChange()
+            this.inputPosition(this.render_data)
         }
     }
-                    }
-                })
-            }
 
+    //下拉框选择筛选
+    selectChange() {
+        let filter_data = [];
+        let filterItems = this.filterItems;
+        this.combined_data.forEach(item => {
+            filter_data.push(Object.assign({}, item));
+        })
         //下拉框筛选
         filter_data = filter_data.filter(item => {
             if (this.isArriFlight(item)) {
@@ -309,34 +298,149 @@ export class MainComponent implements OnInit {
                     }
                 }
 
-                    if(pre_satis&&!rea_satis){
+                if (pre_satis && !rea_satis) {
                     item['renderFlight'] = item['renderPreFlight'];
                     return pre_satis;
-                    }else if(!pre_satis&&rea_satis){
+                } else if (!pre_satis && rea_satis) {
                     item['renderFlight'] = item['renderReaFlight'];
                     return rea_satis;
-                    }else if(pre_satis&&rea_satis){
+                } else if (pre_satis && rea_satis) {
-                        return pre_satis&&rea_satis;
+                    return pre_satis && rea_satis;
-                    }else{
+                } else {
                     return false;
                 }
             }
         })
-
+        if (this.FLT_POS === 1) {
+            this.inputFilter(filter_data);
+        } else {
             this.render_data = filter_data;
-
+            this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
-        } else {    //定位
+            // this.inputPosition(this.render_data);
-
+            this.changeDetectorRef.detectChanges();
         }
+    }
+    //输入框筛选
+    inputFilter(filterData) {
+        if (this.SEARCH) {
+            if (this.SEL_COL) {
+                let sel_col = this.SEL_COL;
+                filterData = filterData.filter(item => {
+                    if (item['renderFlight'][sel_col]) {
+                        if (item['renderFlight'][sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
+                            return true;
+                        }
+                    } else {
+                        if (this.SEARCH) {
+                            return false;
+                        } else {
+                            return true;
+                        }
+                    }
+                })
 
+            } else {
+                filterData = filterData.filter(item => {
+                    let is_satis = false;
+                    for (const key in item['renderFlight']) {
+                        if (item['renderFlight'].hasOwnProperty(key)) {
+                            if (item['renderFlight'][key]) {
+                                if (item['renderFlight'][key].toString().match(new RegExp(this.SEARCH, 'i'))) {
+                                    is_satis = true;
+                                    break;
+                                } else {
+                                    is_satis = false;
+                                    continue;
+                                }
+                            } else {
+                                if (this.SEARCH) {
+                                    is_satis = false;
+                                    continue;
+                                } else {
+                                    is_satis = true;
+                                    break;
+                                }
+                            }
+                        } else {
+                            continue;
+                        }
+                    }
+                    return is_satis;
+                })
+            }
+        }
+        this.render_data = filterData;
+        this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
         this.changeDetectorRef.detectChanges();
     }
 
+    positionArray: Array<any> = [];
+    positionArrayIndex: number = 0;
+    //输入框定位
+    inputPosition(filterData) {
+        let transArray = []
+        if (this.SEL_COL) {
+            let sel_col = this.SEL_COL;
+            filterData.forEach(element => {
+                if (element['renderFlight'][sel_col]) {
+                    if (element['renderFlight'][sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
+                        transArray.push(element)
+                    }
+                } else {
+                    if (!this.SEARCH) {
+                        transArray.push(element)
+                    }
+                }
+            });
+        } else {
+            filterData.forEach(element => {
+                for (const key in element['renderFlight']) {
+                    if (element['renderFlight'].hasOwnProperty(key)) {
+                        if (element['renderFlight'][key]) {
+                            if (element['renderFlight'][key].toString().match(new RegExp(this.SEARCH, 'i'))) {
+                                transArray.push(element)
+                                break;
+                            } else {
+                                continue;
+                            }
+                        } else {
+                            if (this.SEARCH) {
+                                continue;
+                            } else {
+                                transArray.push(element)
+                                break;
+                            }
+                        }
 
+                    } else {
+                        continue;
+                    }
+                }
+            });
+        }
 
+        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];
+        $("#table-container").animate({ scrollTop: objTr.offsetTop }, "slow");
+    }
 
     /**
      * 行排序规则方法