添加固定表头、样式调整、航站楼区域优化及查找定位精确筛选

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

@@ -42,7 +42,7 @@
                             background: rgb(181, 215, 255);
                         }
                     }
-                     th{
+                    th{
                         background-color: #ddd;
                     }
                     th,td{

src/app/pages/basic-data/terminal-area/terminal-area.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>
@@ -25,18 +25,22 @@
         </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 *ngFor="let airline_col of terminalarea_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.terminalAreaCode}}</td>
+                            <td>{{airline_col.terminalAreaName}}</td> -->
                             <td *ngFor="let airline_col of terminalarea_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
                         </tr>
                     </tbody>

src/app/pages/basic-data/terminal-area/terminal-area.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/terminal-area/terminal-area.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-terminal-area',
   templateUrl: './terminal-area.component.html',
@@ -22,22 +24,7 @@ public render_data: Array<object> = [];  //显示数据，即需要显示的数
 
 public terminalarea_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 = '';    //手动输入条件
@@ -130,428 +117,246 @@ 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);
+
+    }
+    /**
+ * 过滤及定位
+ * @param filterItems
+ * @return
+ */
+//输入框回车事件
+inputEnter() {
+    if (this.FLT_POS === 1) {
+        this.selectChange()
+    } else {
+        this.selectChange()
+        this.inputPosition(this.render_data)
+    }
 }
 
-public sequence(flight) {
+//下拉框选择筛选
-  let dateTag: number = 10;
+selectChange() {
-  let dateToCompare = new Date().getTime();
-  if (!this.isCancled(flight) && !this.isDone(flight) && this.isDelayed(flight)) {
-      if (this.isLinked(flight)) {
-          if (this.getActualDatetime(flight['preFlight']) && !this.getActualDatetime(flight['reaFlight'])) {
-              dateToCompare = new Date(dateFormatter(this.getActualDatetime(flight['preFlight']))).getTime();
-              dateTag = this.TOP_1;
-          }
-          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();
-      }
-      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;
-  }
-  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){
+    filter_data = filter_data.filter(item => {
-            combined_data.forEach(item=>{
+        if (item) {
-                if(item['renderFlight'][sel_col]){
+            let is_satis = true;
-                    if (item['renderFlight'][sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
+            for (const key in filterItems) {
-                        filter_data.push(Object.assign({}, item))
+                if (filterItems.hasOwnProperty(key) && filterItems[key]) {
+                    if (item['preFlight'][key] === filterItems[key]) {
+                        is_satis = true;
+                        continue;
+                    } else {
+                        is_satis = false;
+                        break;
                     }
-                }else{
+
-                    if(!this.SEARCH){
+                }
-                        filter_data.push(Object.assign({}, item))
+            }
+            return is_satis;
+        } else if (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) {
+                item['renderFlight'] = item['renderPreFlight'];
+                return pre_satis;
+            } else if (!pre_satis && rea_satis) {
+                item['renderFlight'] = item['renderReaFlight'];
+                return rea_satis;
+            } else if (pre_satis && rea_satis) {
+                return pre_satis && rea_satis;
+            } 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: {} };
+        // 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{
+
-            combined_data.forEach(item => {
+        } 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'))) {
-                                filter_data.push(Object.assign({}, item))
+                                is_satis = true;
                                 break;
+                            } else {
+                                is_satis = false;
+                                continue;
                             }
                         } else {
-                            continue;
+                            if (this.SEARCH) {
+                                is_satis = false;
+                                continue;
+                            } else {
+                                is_satis = true;
+                                break;
+                            }
                         }
+                    } else {
+                        continue;
                     }
                 }
+                return is_satis;
             })
         }
-
-        //下拉框筛选
-        filter_data = filter_data.filter(item => {
-            if (this.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.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){
-                    item['renderFlight'] = item['renderPreFlight'];
-                    return pre_satis;
-                }else if(!pre_satis&&rea_satis){
-                    item['renderFlight'] = item['renderReaFlight'];
-                    return rea_satis;
-                }else if(pre_satis&&rea_satis){
-                    return pre_satis&&rea_satis;
-                }else{
-                    return false;
-                }
-            }
-        })
-
-        this.render_data = filter_data;
-
-    } else {    //定位
-
     }
-
+    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)
+                }
+            } 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;
-   * @param flight
+                }
-   * @return
+            }
-   */
+        });
-  public getEstimatedDatetime(flight) {
+    }
-      return flight['ESTT']
-  }
 
-  /**
+    if (transArray.length > 0) {
-   * 获取航班计划时间
+        if (transArray.toString() == this.positionArray.toString()) {
-   * @param flight
+            this.positionArrayIndex++;
-   * @return
+            if (this.positionArrayIndex === this.positionArray.length) {
-   */
+                this.positionArrayIndex = 0;
-  public getScheduledDatetime(flight) {
+            }
-      return flight['SODT']
+            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];
-   * @param flight
+    $("#table-container").animate({ scrollTop: objTr.offsetTop - 42 }, "slow");
-   * @return
-   */
-  public isLinked(flight) {
-      if (flight['preFlight'] && flight['reaFlight']) {
-          return true
-      } else {
-          return false
-      }
-  }
-
-  /**
-   * 判断航班是否是纯离港航班
-   * @param flight
-   * @return
-   */
-  public isDeptFlight(flight) {
-      if (!flight['preFlight'] && flight['reaFlight']) {
-          return true
-      } else {
-          return false
-      }
-
-  }
-
-  /**
-   * 判断航班是否是纯到港航班
-   * @param flight
-   * @return
-   */
-  public isArriFlight(flight) {
-      if (flight['preFlight'] && !flight['reaFlight']) {
-          return true;
-      } else {
-          return false;
-      }
-  }
-
-  /**
-   * 判断航班是否已经前站起飞
-   * @param flight
-   * @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;
-      }
-  }
-
 
+    }
 }