布局样式调整、机场优化及查找定位精确筛选

src/app/pages/basic-data/airport/airport.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>
@@ -28,7 +28,7 @@
           <div class="second-condition mb-3 row">
             <div class="input-container mr-4">
               <label for="">机场集团：&nbsp;&nbsp;</label>
-              <select  class="form-control" [(ngModel)]="filterItems.JT" (ngModelChange)="inputFliter()">
+              <select  class="form-control" [(ngModel)]="filterItems.JT" (ngModelChange)="selectChange()">
                   <option value=""></option>
                   <option value="GH">国内机场</option>
                   <option value="CH">国际机场</option>
@@ -36,7 +36,7 @@
           </div>
           <div class="input-container mr-4">
               <label for="">城市：&nbsp;&nbsp;</label>
-              <select  class="form-control" [(ngModel)]="filterItems.CS" (ngModelChange)="inputFliter()">
+              <select  class="form-control" [(ngModel)]="filterItems.CS" (ngModelChange)="selectChange()">
                   <option value=""></option>
                   <option value="GZ">广州</option>
                   <option value="SH">上海</option>
@@ -47,18 +47,38 @@
       </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>
+                          <!-- <th>机场代码</th>
+                          <th>机场中文名</th>
+                          <th>中文简称</th>
+                          <th>机场英文名</th>
+                          <th>英文简称</th>
+                          <th>IATA码</th>
+                          <th>CAA码</th>
+                          <th>ICAO码</th>
+                          <th>机场集团</th>
+                          <th>所在城市</th> -->
                           <th *ngFor="let airline_col of airport_lists">{{airline_col.COL_CN}}</th>
                       </tr>
                   </thead>
                   <tbody>
-                      <tr *ngFor="let airline_row of render_data;let i = index" (click)="selectRow(i)"
+                      <tr *ngFor="let airline_row of render_data;let i = index" (click)="selectRow(airline_row)"
-                          [ngClass]="{'active':row_state===i}">
+                          [ngClass]="{'selected':row_state['renderFlight']===airline_row['renderFlight']}">
                           <td>{{i+1}}</td>
+                          <!-- <td>{{airline_col.airportCode}}</td>
+                          <td>{{airline_col.airportNameChn}}</td>
+                          <td>{{airline_col.briefNameChn}}</td>
+                          <td>{{airline_col.airportNameEng}}</td>
+                          <td>{{airline_col.briefNameEng}}</td>
+                          <td>{{airline_col.airportCodeIata}}</td>
+                          <td>{{airline_col.airportCodeCaa}}</td>
+                          <td>{{airline_col.airportCodeIcao}}</td>
+                          <td>{{airline_col.airportGroupId}}</td>
+                          <td>{{airline_col.cityId}}</td> -->
                           <td *ngFor="let airline_col of airport_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
                       </tr>
                   </tbody>

src/app/pages/basic-data/airport/airport.component.scss

@@ -1,6 +1,7 @@
 .main-page {
     width: 100%;
-    height: calc(100% - 66px);
+    height: 100%;
+    overflow-y: scroll;
     padding: 15px 10px;
     background-color: #fff;
     .page-content {
@@ -31,15 +32,19 @@
                 // border: 1px solid #ccc;
                 width: 100%;
                 height: 700px;
-                overflow: scroll;
+                overflow: auto;
+                box-shadow: 0 0 1px .5px #ddd;
                 table{
                     width: max-content;
                     tr{
                         cursor: pointer;
-                        &.active{
+                        &.selected{
                             background: rgb(181, 215, 255);
                         }
                     }
+                    th{
+                        background-color: #ddd;
+                    }
                     th,td{
                         // border: none;
                         text-align: center;

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

@@ -2,6 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { ChangeDetectorRef } from '@angular/core';
 import { HttpClientService } from '../../../services/http-client.service';
 import dateFormatter from '../../../utils/data-formatter';
+import { HttpParams } from '@angular/common/http';
+import * as $ from 'jquery';
 @Component({
   selector: 'app-airport',
   templateUrl: './airport.component.html',
@@ -22,22 +24,7 @@ public render_data: Array<object> = [];  //显示数据，即需要显示的数
 
 public airport_lists: Array<object>;    //列数据
 
-public row_state: number;
+public row_state: any = { renderFlight: {} };
-
-public TOP_1 = 1000000000000;
-public TOP_2 = 2000000000000;
-public TOP_3 = 3000000000000;
-public TOP_4 = 4000000000000;
-public TOP_5 = 5000000000000;
-public TOP_6 = 6000000000000;
-public TOP_7 = 7000000000000;
-public TOP_8 = 8000000000000;
-public TOP_9 = 9000000000000;
-public TOP_10 = 10000000000000;
-public TOP_11 = 11000000000000;
-public TOP_12 = 12000000000000;
-public TOP_13 = 13000000000000;
-public TOP_14 = 14000000000000;
 
 // 搜索条件
 SEARCH = '';    //手动输入条件
@@ -140,146 +127,46 @@ ngOnInit() {
                 }
                 this.combined_data.push(row_flights)
             })
-
-            //排序
-            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();
         }
     )
+        /**
+         * 固定表头
+         */
+        var tableCont = document.querySelector('#table-container');
+        function scrollHandle (){
+          var scrollTop = this.scrollTop;
+          this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
+        }
+        tableCont.addEventListener('scroll',scrollHandle);
 }
 
-public sequence(flight) {
+/**
-  let dateTag: number = 10;
+ * 过滤及定位
-  let dateToCompare = new Date().getTime();
+ * @param filterItems
-  if (!this.isCancled(flight) && !this.isDone(flight) && this.isDelayed(flight)) {
+ * @return
-      if (this.isLinked(flight)) {
+ */
-          if (this.getActualDatetime(flight['preFlight']) && !this.getActualDatetime(flight['reaFlight'])) {
+//输入框回车事件
-              dateToCompare = new Date(dateFormatter(this.getActualDatetime(flight['preFlight']))).getTime();
+inputEnter() {
-              dateTag = this.TOP_1;
+    if (this.FLT_POS === 1) {
-          }
+        this.selectChange()
-          else {
-              dateToCompare = new Date(dateFormatter(this.getScheduledDatetime(flight['reaFlight']))).getTime();
-              dateTag = this.TOP_2;
-          }
-      }
-      else {
-          dateToCompare = new Date(dateFormatter(this.getScheduledDatetime(flight['reaFlight']))).getTime();
-          dateTag = this.TOP_3;
-      }
-      return dateToCompare + dateTag;
-  }
-  if (!this.isCancled(flight) && !this.isDone(flight) && this.isBoading(flight)) {
-      dateToCompare = new Date(dateFormatter(this.getScheduledDatetime(flight['reaFlight']))).getTime();
-      dateTag = this.TOP_4;
-      return dateToCompare + dateTag;
-  }
-  if (!this.isCancled(flight) && !this.isDone(flight) && this.isFlying(flight) && !this.getActualDatetime(flight['preFlight'])) {
-      if (this.getEstimatedDatetime(flight['preFlight'])) {
-          dateToCompare = new Date(dateFormatter(this.getEstimatedDatetime(flight['preFlight']))).getTime();
     } else {
-          dateToCompare = new Date(dateFormatter(this.getScheduledDatetime(flight['preFlight']))).getTime();
+        this.selectChange()
+        this.inputPosition(this.render_data)
     }
-      dateTag = this.TOP_5;
-      return dateToCompare + dateTag;
-  }
-  if (!this.isCancled(flight) && !this.isDone(flight) && this.isLinked(flight) && this.getActualDatetime(flight['preFlight']) && !this.getActualDatetime(flight['reaFlight'])) {
-      dateToCompare = new Date(dateFormatter(this.getActualDatetime(flight['preFlight']))).getTime();
-      dateTag = this.TOP_6;
-      return dateToCompare + dateTag;
-  }
-  if (!this.isCancled(flight) && !this.isDone(flight) && this.isDeptFlight(flight) && !this.startBoading(flight)) {
-      dateToCompare = new Date(dateFormatter(this.getScheduledDatetime(flight['reaFlight']))).getTime();
-      dateTag = this.TOP_7;
-      return dateToCompare + dateTag;
-  }
-  if (!this.isCancled(flight) && this.isArriFlight(flight) && this.isDone(flight)) {
-      dateToCompare = new Date(dateFormatter(this.getActualDatetime(flight['preFlight']))).getTime();
-      dateTag = this.TOP_8;
-      return dateToCompare + dateTag;
-  }
-  if (!this.isCancled(flight) && !this.isDone(flight) && this.isOverBoading(flight)) {
-      dateToCompare = new Date(dateFormatter(this.getScheduledDatetime(flight['reaFlight']))).getTime();
-      dateTag = this.TOP_9;
-      return dateToCompare + dateTag;
-  }
-  if (!this.isCancled(flight) && !this.isDone(flight) && !this.isFlying(flight)) {
-      if (this.isLinked(flight)) {
-          dateToCompare = new Date(dateFormatter(this.getScheduledDatetime(flight['reaFlight']))).getTime();
-          dateTag = this.TOP_10;
-      } else if (this.isArriFlight(flight)) {
-          dateToCompare = new Date(dateFormatter(this.getScheduledDatetime(flight['preFlight']))).getTime();
-          dateTag = this.TOP_11;
-      }
-      return dateToCompare + dateTag;
-  }
-  if (!this.isCancled(flight) && this.isDone(flight) && (this.isLinked(flight) || this.isDeptFlight(flight))) {
-      dateToCompare = new Date(dateFormatter(this.getActualDatetime(flight['reaFlight']))).getTime();
-      dateTag = this.TOP_12;
-      return dateToCompare + dateTag;
-  }
-  if (this.isCancled(flight)) {
-      if (this.isDeptFlight(flight)) {
-          dateToCompare = new Date(dateFormatter(this.getScheduledDatetime(flight['reaFlight']))).getTime();
-      } else {
-          dateToCompare = new Date(dateFormatter(this.getScheduledDatetime(flight['preFlight']))).getTime();
 }
 
-      dateTag = this.TOP_13;
+//下拉框选择筛选
-      return dateToCompare + dateTag;
+selectChange() {
-  }
-  return this.TOP_14
-}
-/* Enter键触发事件过滤条件数据 */
-inputFliter() {
-    let filterItems = this.filterItems;
-    let combined_data = this.combined_data;
     let filter_data = [];
-
+    let filterItems = this.filterItems;
-    let sel_col = this.SEL_COL;
+    this.combined_data.forEach(item => {
-
+        filter_data.push(Object.assign({}, item));
-    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;
-                        }
-                    }
-                }
-            })
-        }
-
     //下拉框筛选
     filter_data = filter_data.filter(item => {
-            if (this.isArriFlight(item)) {
+        if (item) {
             let is_satis = true;
             for (const key in filterItems) {
                 if (filterItems.hasOwnProperty(key) && filterItems[key]) {
@@ -294,7 +181,7 @@ inputFliter() {
                 }
             }
             return is_satis;
-            } else if (this.isDeptFlight(item)) {
+        } else if (item) {
             let is_satis = true;
             for (const key in filterItems) {
                 if (filterItems.hasOwnProperty(key) && filterItems[key]) {
@@ -350,217 +237,136 @@ inputFliter() {
             }
         }
     })
-
+    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;
-     * @param flight 
+//输入框定位
-     * @return
+inputPosition(filterData) {
-     */
+    let transArray = []
-    public getActualDatetime(flight) {
+    if (this.SEL_COL) {
-      return flight['ACTT'];
+        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)
                 }
-
-  /**
-   * 获取航班预计时间
-   * @param flight
-   * @return
-   */
-  public getEstimatedDatetime(flight) {
-      return flight['ESTT']
-  }
-
-  /**
-   * 获取航班计划时间
-   * @param flight
-   * @return
-   */
-  public getScheduledDatetime(flight) {
-      return flight['SODT']
-  }
-
-
-  /**
-   * 判断航班是否是链接航班
-   * @param flight
-   * @return
-   */
-  public isLinked(flight) {
-      if (flight['preFlight'] && flight['reaFlight']) {
-          return true
             } else {
-          return false
+                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;
                         }
                     }
 
-  /**
-   * 判断航班是否是纯离港航班
-   * @param flight
-   * @return
-   */
-  public isDeptFlight(flight) {
-      if (!flight['preFlight'] && flight['reaFlight']) {
-          return true
                 } else {
-          return false
+                    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();
-   * 判断航班是否是纯到港航班
-   * @param flight
-   * @return
-   */
-  public isArriFlight(flight) {
-      if (flight['preFlight'] && !flight['reaFlight']) {
-          return true;
-      } else {
-          return false;
-      }
-  }
 
-  /**
+    let tr = $(".selected");
-   * 判断航班是否已经前站起飞
+    let objTr = tr[0];
-   * @param flight
+    $("#table-container").animate({ scrollTop: objTr.offsetTop - 42 }, "slow");
-   * @return
-   */
-  public isFlying(flight) {
-      if (this.isArriFlight(flight) || this.isLinked(flight)) {
-          if (flight['preFlight']['PADT']) {
-              return true;
-          } else {
-              return false;
-          }
-      } else {
-          return false;
-      }
-  }
-
-
-  /**
-   * 判断航班是否取消
-   * @param flight 
-   * @return
-   */
-  public isCancled(flight) {
-      if (this.isArriFlight(flight)) {
-          if (flight['preFlight']['CNCL']) {
-              return true;
-          } else {
-              return false;
-          }
-      } else if (this.isDeptFlight(flight)) {
-          if (flight['reaFlight']['CNCL']) {
-              return true;
-          } else {
-              return false;
-          }
-      } else {
-          return false;
-      }
-  }
-
-  /**
-   * 判断航班是否延误(只针对纯离港航班或链接航班中的离港航班)
-   * @param flight 
-   * @return
-   */
-  public isDelayed(flight) {
-      if (this.isDeptFlight(flight) || this.isLinked(flight)) {
-          if (flight['reaFlight']['DELY']) {
-              return true
-          } else {
-              return false
-          }
-      } else {
-          return false;
-      }
-  }
-
-  /**
-   * 判断航班是否已经执行完成
-   * @param flight
-   * @return
-   */
-  public isDone(flight) {
-      if (this.isLinked(flight) || this.isDeptFlight(flight)) {
-          if (!this.getActualDatetime(flight['reaFlight'])) {
-              return false;
-          } else {
-              return true;
-          }
-      } else if (this.isArriFlight(flight)) {
-          if (!this.getActualDatetime(flight['preFlight'])) {
-              return false;
-          } else {
-              return true;
-          }
-      } else {
-          return false;
-      }
-  }
-
-  /**
-   * 判断航班是否开始登机
-   * @param flight
-   * @return
-   */
-  public startBoading(flight) {
-      if (this.isLinked(flight) || this.isDeptFlight(flight)) {
-          if (!flight['reaFlight']['BOTM']) {
-              return false;
-          } else {
-              return true;
-          }
-      } else {
-          return false;
-      }
 
     }
-
-  /**
-   * 判断航班是否正在登机中
-   * @param flight
-   * @return
-   */
-  public isBoading(flight) {
-      if (this.isLinked(flight) || this.isDeptFlight(flight)) {
-          if (flight['reaFlight']['BOTM'] && !flight['reaFlight']['GCTM']) {
-              return true;
-          } else {
-              return false;
-          }
-      } else {
-          return false;
-      }
-  }
-
-
-  /**
-   * 判断航班是否登机结束
-   * @param flight
-   * @return
-   */
-  public isOverBoading(flight) {
-      if (this.isLinked(flight) || this.isDeptFlight(flight)) {
-          if (!flight['GCTM']) {
-              return false;
-          } else {
-              return true;
-          }
-      } else {
-          return false;
-      }
-  }
-
-
 }