季度计划加载渲染列表、选择列名、过滤及精确筛选查找定位

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

@@ -3,8 +3,26 @@
       <div class="search-filter mb-3">
           <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" name="" id="">
+                  <select class="mr-4 form-control" [(ngModel)]="SEL_COL" name="" id="">
                       <option value="">选择列名</option>
+                      <option value="flightNumber">航班号</option>
+                      <option value="seasonRecId">航班季度</option>
+                      <option value="internationalCode">国际代码</option>
+                      <option value="airlineChnName">航空公司</option>
+                      <option value="routeType">航线类别</option>
+                      <option value="flightTypeCode">航班类别</option>
+                      <option value="flightTask">航班任务</option>
+                      <option value="operationDays">运营日</option>
+                      <option value="startDate">开始日期</option>
+                      <option value="endDate">结束日期</option>
+                      <option value="startAirport">航线</option>
+                      <option value="arriOrDept">进/出港</option>
+                      <option value="arrivalTime">到达时间</option>
+                      <option value="departureTime">出发时间</option>
+                      <option value="aircraftTypeCode">机型</option>
+                      <option value="flyingDistance">飞行距离(千米)</option>
+                      <option value="flyingTime">飞行时间(分钟)</option>
+                      <!-- <option *ngFor="let seasonal of seasonal_lists" [value]="seasonal.COL_CODE">{{seasonal.COL_CN}}</option> -->
                   </select>
                   <label class="radio-inline custom-radio nowrap mr-4">
                         <input type="radio" [(ngModel)]="FLT_POS" [value]="1" name="filter-position">
@@ -22,49 +40,50 @@
                   <button type="button" class="btn btn-info mr-3">季度计划发布</button>
                   <button type="button" class="btn btn-info mr-3">刷新数据</button>
                   <button type="button" class="btn btn-info mr-3">季度计划维护</button> -->
-                  <button type="button" class="btn btn-info mr-3">刷新</button>
+                  <button type="button" class="btn btn-info mr-3" (click)="refresh()">刷新</button>
               </div>
           </div>
 
           <div class="second-condition mb-3 row">
             <div class="input-container mr-4">
-              <label for="">航空公司：&nbsp;&nbsp;</label>
+              <label for="airlineId">航空公司：&nbsp;&nbsp;</label>
-              <select  class="form-control" [(ngModel)]="filterItems.HZ" (ngModelChange)="selectChange()">
+              <select  class="form-control" [(ngModel)]="filterItems.airlineId" (ngModelChange)="selectChange()">
                   <option value=""></option>
-                  <option value="GH">国内区域</option>
+                  <option *ngFor="let item of airlines" [value]="item.airlineId">{{item.airlineName}}</option>
-                  <option value="CH">国际区域</option>
-                  <option value="QT">其他区域</option>
-                  <!-- <option *ngFor="let item of seasonals" [value]="item.airlineId">{{item.airlineId}}</option> -->
               </select>
             </div>
             <div class="input-container mr-4">
-                <label for="">航线类别：&nbsp;&nbsp;</label>
+                <label for="routeType">航线类别：&nbsp;&nbsp;</label>
-                <select  class="form-control" [(ngModel)]="filterItems.ZY" (ngModelChange)="selectChange()">
+                <select  class="form-control" [(ngModel)]="filterItems.routeType" (ngModelChange)="selectChange()">
                     <option value=""></option>
-                    <option value="K">可用</option>
+                    <!-- <option value="D">国内</option>
-                    <option value="R">不可用</option>
+                    <option value="I">国际</option>
-                    <!-- <option *ngFor="let item of seasonals" [value]="item.routeType">{{item.routeType}}</option> -->
+                    <option value="M">混合</option>
+                    <option value="R">地区</option> -->
+                    <option *ngFor="let item of seasonals" [value]="item.routeType">{{item.routeType}}</option>
                 </select>
             </div>
             <div class="input-container mr-4">
               <label for="flightTypeCode">航班类别：&nbsp;&nbsp;</label>
-              <select  class="form-control" (ngModelChange)="selectChange()">
+              <select  class="form-control" (ngModelChange)="selectChange()" [(ngModel)]="filterItems.flightTypeCode">
                   <option value=""></option>
-                  <!-- <option *ngFor="let item of seasonals" [value]="item.flightTypeCode">{{item.flightTypeCode}}</option> -->
+                  <option *ngFor="let item of seasonals" [value]="item.flightTypeCode">{{item.flightTypeCode}}</option>
               </select>
           </div>
           <div class="input-container mr-4">
               <label for="arriOrDept">到达/出发：&nbsp;&nbsp;</label>
-              <select  class="form-control" (ngModelChange)="selectChange()">
+              <select  class="form-control" (ngModelChange)="selectChange()" [(ngModel)]="filterItems.arriOrDept">
                   <option value=""></option>
-                  <!-- <option *ngFor="let item of seasonals" [value]="item.arriOrDept">{{item.arriOrDept}}</option> -->
+                  <!-- <option value="A">到达</option>
+                  <option value="D">出发</option> -->
+                  <option *ngFor="let item of seasonals" [value]="item.arriOrDept">{{item.arriOrDept}}</option>
               </select>
           </div>
           <div class="input-container mr-4">
               <label for="flightTask">航班任务：&nbsp;&nbsp;</label>
-              <select  class="form-control" (ngModelChange)="selectChange()">
+              <select  class="form-control" (ngModelChange)="selectChange()" [(ngModel)]="filterItems.flightTask">
                   <option value=""></option>
-                  <!-- <option *ngFor="let item of seasonals" [value]="item.flightTask">{{item.flightTask}}</option> -->
+                  <option *ngFor="let item of seasonals" [value]="item.flightTask">{{item.flightTask}}</option>
               </select>
           </div>
         </div>
@@ -86,7 +105,7 @@
                   <thead>
                       <tr>
                           <th>序号</th>
-                          <!-- <th>航班号</th>
+                          <th>航班号</th>
                           <th>航班季度</th>
                           <th>国际代码</th>
                           <th>航空公司</th>
@@ -102,18 +121,18 @@
                           <th>出发时间</th>
                           <th>机型</th>
                           <th>飞行距离(千米)</th>
-                          <th>飞行时间(分钟)</th> -->
+                          <th>飞行时间(分钟)</th>
-                          <th *ngFor="let seasonal of seasonal_lists">{{seasonal.COL_CN}}</th>
+                          <!-- <th *ngFor="let seasonal of seasonal_lists">{{seasonal.COL_CN}}</th> -->
                       </tr>
                   </thead>
                   <tbody>
-                      <tr *ngFor="let airline_row of render_data;let i = index" (click)="selectRow(airline_row)"
+                      <tr *ngFor="let seasonal of render_data;let i = index" (click)="selectRow(seasonal)"
-                          [ngClass]="{'selected':row_state['renderFlight']===airline_row['renderFlight']}">
+                          [ngClass]="{'selected':row_state===seasonal}">
                           <td>{{i+1}}</td>
-                          <!-- <td>{{seasonal.flightNumber}}</td>
+                          <td>{{seasonal.flightNumber}}</td>
                           <td>{{seasonal.seasonRecId}}</td>
                           <td>{{seasonal.internationalCode}}</td>
-                          <td>{{seasonal.airlineId}}</td>
+                          <td>{{seasonal.airlineChnName}}</td>
                           <td>{{seasonal.routeType}}</td>
                           <td>{{seasonal.flightTypeCode}}</td>
                           <td>{{seasonal.flightTask}}</td>
@@ -126,8 +145,8 @@
                           <td>{{seasonal.departureTime}}</td>
                           <td>{{seasonal.aircraftTypeCode}}</td>
                           <td>{{seasonal.flyingDistance}}</td>
-                          <td>{{seasonal.flyingTime}}</td> -->
+                          <td>{{seasonal.flyingTime}}</td>
-                          <td *ngFor="let seasonal of seasonal_lists" [ngStyle]="{'background-color':getColor(seasonal.COL_CODE)}">{{airline_row['renderFlight'][seasonal.COL_CODE]}}</td>
+                         <!--  <td *ngFor="let seasonal of seasonal_lists" [ngStyle]="{'background-color':getColor(seasonal.COL_CODE)}">{{airline_row['renderFlight'][seasonal.COL_CODE]}}</td> -->
                       </tr>
                   </tbody>
               </table>

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

@@ -1,9 +1,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';
+import { BasicDataService } from '../basic-data-service'
 @Component({
   selector: 'app-seasonal-plan',
   templateUrl: './seasonal-plan.component.html',
@@ -13,257 +12,106 @@ export class SeasonalPlanComponent implements OnInit {
 
   constructor(
     private httpCilent: HttpClientService,
-    private changeDetectorRef: ChangeDetectorRef
+    private basicDataService: BasicDataService
 ) { }
 
-public raw_data: Array<object> = [];    //原始数据，即航班计划
-
-public combined_data: Array<object> = [];    //组合数据，即链接航班，显示信息等组合好之后的数据
-
-public render_data: Array<object> = [];  //显示数据，即需要显示的数据
-
-public seasonal_lists: Array<object>;    //列数据
-
-public row_state: any = { renderFlight: {} };
-
 // 搜索条件
 SEARCH = '';    //手动输入条件
 FLT_POS = 1;    //过滤还是定位
 SEL_COL = '';   //选择列名
 
 public filterItems = {
-    HZ: '',    //所属航站楼区域
+    airlineId: '',    //航空公司
-    ZY: '',    //资源状态
+    routeType: '',
+    flightTypeCode: '',  //航班类别
+    arriOrDept: '',
+    flightTask: '',    //航班任务
 }
 
-public formatter = {
+seasonals : Array<any>; 
-    'HZ': {
+airlines : Array<any>; //航空公司
-        'GH': '国内区域',
+public row_state: any = { renderFlight: {} };
-        'CH': '国际区域',
+public render_data: Array<object> = [];  //显示数据，即需要显示的数据
-        "QT": '其他区域'
+public return_data: Array<object> = []; //下拉框显示数据
-    },
+ngOnInit() {
-    'ZY': {
+    /* 获取季度计划信息 */
-        'K': '可用',
+    this.httpCilent.get('/adminapi/schedule/flightSchdSeasons').subscribe(
-        'R': '不可用',
+        data => {
-        "T": '其他'
+            this.seasonals = data.body;
-    },
+            this.render_data = this.seasonals;
-    'SODT': dateFormatter,
+            if(this.airlines && this.airlines.length > 0){//航空公司列表数据转换
-    'ESTT': dateFormatter,
+                this.basicDataTransHandle();
-    'ACTT': dateFormatter
+            }
+        }
+    )
+    //航空公司
+    this.airlines = this.basicDataService.airline;
+    this.basicDataService.airline_subject.subscribe(
+        data=>{
+            this.airlines = data;
+        }
+    )
+    /**
+     * 固定表头
+     */
+    var tableCont = document.querySelector('#table-container');
+    function scrollHandle (){
+        var scrollTop = this.scrollTop;
+        this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
+    }
+    tableCont.addEventListener('scroll',scrollHandle);
+}
+//航空公司名称数据转换处理
+basicDataTransHandle() {
+    this.render_data.forEach(item => {
+        let airlineLinkIndex = this.airlines.findIndex(val => val.airlineId === item['airlineId']);
+        item['airlineChnName'] = this.airlines[airlineLinkIndex].airlineName;
+    })
 }
 
+/**
+ * 刷新
+ */
+refresh() {
+    this.render_data.reverse();
+}
+
+/**
+ * 选中某行
+ * @param i 
+ */
 selectRow(i) {
     this.row_state = i;
-    this.changeDetectorRef.detectChanges();
 }
 
-getColor(col_CODE) {
-    if (col_CODE === 'SODT') {
-        return 'skyblue'
-    } else {
-        return null
-    }
-}
-
-ngOnInit() {
-    this.changeDetectorRef.detach();
-    /* 获取显示列 */
-    this.httpCilent.get('/assets/mock-data/seasonal-code.json').subscribe(
-        data => {
-            data.sort(function (a, b) {
-                return (a['COL_ORDER'] - b['COL_ORDER']);
-            })
-            this.seasonal_lists = data;
-        }
-    )
-    /* 获取登机门信息 */
-    this.httpCilent.get('/assets/mock-data/seasonal-data.json').subscribe(
-        data => {
-            //解析数据
-            data.forEach(element => {
-                this.raw_data.push(JSON.parse(element.value));
-            });
-
-            let combined_linked_data = this.raw_data
-
-            combined_linked_data.forEach(element => {
-                let row_flights = {};
-                let render_flight = {};
-                let render_pre_flight = {};
-                let render_rea_flight = {};
-                row_flights['preFlight'] = element;
-
-                for (let i = 0; i < this.seasonal_lists.length; i++) {
-                    let key = this.seasonal_lists[i]['COL_CODE']
-                    render_flight[key] = typeof (this.formatter[key]) === 'function' ? this.formatter[key](row_flights['preFlight'][key], 1) : this.formatter[key] ? this.formatter[key][row_flights['preFlight'][key]] : row_flights['preFlight'][key];
-                }
-                row_flights['renderFlight'] = render_flight;
-                if (element['isLinked']) {
-                    row_flights['preFlight'] = element['linkFlight'];
-                    delete element['linkFlight'];
-                    delete element['isLinked'];
-                    row_flights['reaFlight'] = element;
-
-                    for (let i = 0; i < this.seasonal_lists.length; i++) {
-                        let key = this.seasonal_lists[i]['COL_CODE']
-                        if (this.formatter.hasOwnProperty(key)) {
-                            if (typeof (this.formatter[key]) === 'function') {
-                                render_flight[key] = (row_flights['preFlight'][key] === row_flights['reaFlight'][key]) ? (this.formatter[key](row_flights['preFlight'][key], 1)) : (this.formatter[key](row_flights['preFlight'][key], 1) + '/' + this.formatter[key](row_flights['reaFlight'][key], 1));
-                                render_pre_flight[key] = this.formatter[key](row_flights['preFlight'][key], 1);
-                                render_rea_flight[key] = this.formatter[key](row_flights['reaFlight'][key], 1);
-                            } else {
-                                render_flight[key] = (row_flights['preFlight'][key] === row_flights['reaFlight'][key]) ? (this.formatter[key][row_flights['preFlight'][key]]) : (this.formatter[key][row_flights['preFlight'][key]] + '/' + this.formatter[key][row_flights['reaFlight'][key]]);
-                                render_pre_flight[key] = this.formatter[key][row_flights['preFlight'][key]];
-                                render_rea_flight[key] = this.formatter[key][row_flights['reaFlight'][key]];
-                            }
-                        } else {
-                            render_flight[key] = (row_flights['preFlight'][key] === row_flights['reaFlight'][key]) ? (row_flights['preFlight'][key]) : (row_flights['preFlight'][key] + '/' + row_flights['reaFlight'][key]);
-                            render_pre_flight[key] = row_flights['preFlight'][key];
-                            render_rea_flight[key] = row_flights['reaFlight'][key];
-                        }
-                    }
-                    row_flights['renderFlight'] = render_flight;
-                    row_flights['renderPreFlight'] = render_pre_flight;
-                    row_flights['renderReaFlight'] = render_rea_flight;
-                }
-                this.combined_data.push(row_flights);
-            })
-            // this.doSequence(this.combined_data);
-            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);
-}
-
-/**
- * 执行排序并渲染
- */
-/* 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
- */
 //输入框回车事件
 inputEnter() {
     if (this.FLT_POS === 1) {
-        this.selectChange()
+        this.inputFilter(this.seasonals)
     } else {
-        this.selectChange()
+        this.inputFilter(this.seasonals)
-        this.inputPosition(this.render_data)
+        this.inputPosition(this.seasonals)
     }
 }
 
 //下拉框选择筛选
 selectChange() {
-    let filter_data = [];
+    this.return_data = this.seasonals.filter(item=>{
-    let filterItems = this.filterItems;
-    this.combined_data.forEach(item => {
-        filter_data.push(Object.assign({}, item));
-    })
-    //下拉框筛选
-    filter_data = filter_data.filter(item => {
-        if (item) {
             let is_satis = true;
-            for (const key in filterItems) {
+            for (const key in this.filterItems) {
-                if (filterItems.hasOwnProperty(key) && filterItems[key]) {
+                if (this.filterItems.hasOwnProperty(key) && this.filterItems[key]) {
-                    if (item['preFlight'][key] === filterItems[key]) {
+                    if (item[key] === +this.filterItems[key] || item[key] === this.filterItems[key]) {
                         is_satis = true;
                         continue;
-                    } else {
+                    }else {
                         is_satis = false;
                         break;
                     }
-
                 }
             }
             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.render_data = this.return_data;
-        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();
-    }
 }
 
 //输入框筛选
@@ -272,8 +120,8 @@ inputFilter(filterData) {
         if (this.SEL_COL) {
             let sel_col = this.SEL_COL;
             filterData = filterData.filter(item => {
-                if (item['renderFlight'][sel_col]) {
+                if (item[sel_col]) {
-                    if (item['renderFlight'][sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
+                    if (item[sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
                         return true;
                     }
                 } else {
@@ -288,10 +136,10 @@ inputFilter(filterData) {
         } else {
             filterData = filterData.filter(item => {
                 let is_satis = false;
-                for (const key in item['renderFlight']) {
+                for (const key in item) {
-                    if (item['renderFlight'].hasOwnProperty(key)) {
+                    if (item.hasOwnProperty(key)) {
-                        if (item['renderFlight'][key]) {
+                        if (item[key]) {
-                            if (item['renderFlight'][key].toString().match(new RegExp(this.SEARCH, 'i'))) {
+                            if (item[key].toString().match(new RegExp(this.SEARCH, 'i'))) {
                                 is_satis = true;
                                 break;
                             } else {
@@ -317,7 +165,6 @@ inputFilter(filterData) {
     }
     this.render_data = filterData;
     this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
-    this.changeDetectorRef.detectChanges();
 }
 
 positionArray: Array<any> = [];
@@ -328,8 +175,8 @@ inputPosition(filterData) {
     if (this.SEL_COL) {
         let sel_col = this.SEL_COL;
         filterData.forEach(element => {
-            if (element['renderFlight'][sel_col]) {
+            if (element[sel_col]) {
-                if (element['renderFlight'][sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
+                if (element[sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
                     transArray.push(element)
                 }
             } else {
@@ -340,10 +187,10 @@ inputPosition(filterData) {
         });
     } else {
         filterData.forEach(element => {
-            for (const key in element['renderFlight']) {
+            for (const key in element) {
-                if (element['renderFlight'].hasOwnProperty(key)) {
+                if (element.hasOwnProperty(key)) {
-                    if (element['renderFlight'][key]) {
+                    if (element[key]) {
-                        if (element['renderFlight'][key].toString().match(new RegExp(this.SEARCH, 'i'))) {
+                        if (element[key].toString().match(new RegExp(this.SEARCH, 'i'))) {
                             transArray.push(element)
                             break;
                         } else {
@@ -380,12 +227,6 @@ inputPosition(filterData) {
     } else {
         alert('没有搜索到相关数据');
     }
-
+    }
-    this.changeDetectorRef.detectChanges();
-
-    let tr = $(".selected");
-    let objTr = tr[0];
-    $("#table-container").animate({ scrollTop: objTr.offsetTop - 42 }, "slow");
-}
 
 }