表格高度自适应等优化

src/app/pages/historical-data/historical-data.component.html

@@ -1,6 +1,6 @@
-<div class="main-page">
+<div class="main-page" #mainPage>
     <div class="page-content">
-        <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 [(ngModel)]="SEL_COL" class="mr-4 form-control" name="" id="">
@@ -17,12 +17,13 @@
                     </label>
                     <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">
+                <div class="line-operator-right mb-3 col-xlg-4 col-mlg-4 col-xl-4 col-lg-2">
-                    <button type="button" class="btn btn-info mr-3" (click)="refresh()">刷新</button>
+                    <button type="button" class="btn btn-info mr-2" (click)="toggleFilter()">{{filterClose?'展开':'关闭'}}</button>
+                    <button type="button" class="btn btn-info mr-2" (click)="refresh()">刷新</button>
                 </div>
             </div>
 
-            <div class="second-condition mb-3 row">
+            <div [ngClass]="{'filterClose-c':filterClose,'filterClose-o':!filterClose}" class="second-condition mb-3 row">
                 <div class="input-container mr-4">
                     <label for="">航空公司：&nbsp;&nbsp;</label>
                     <select [(ngModel)]="filterItems.ALCD" (ngModelChange)="selectChange()" class="form-control">
@@ -82,7 +83,7 @@
                 </div>
             </div>
 
-            <div class="third-condition row">
+            <div [ngClass]="{'filterClose-c':filterClose,'filterClose-o':!filterClose}" class="third-condition row">
                 <label class="radio-inline custom-checkbox nowrap mr-4">
                     <input type="checkbox" [(ngModel)]="checkboxGroup.related" (ngModelChange)="checkboxChange()">
                     <span>航班关联信息</span>
@@ -106,7 +107,7 @@
             </div>
         </div>
         <div class="airline-table">
-            <div id="table-container" class="table-container" [ngClass]="{'table-c': !tabClose,'table-o': tabClose}">
+            <div #tableContainer id="table-container" class="table-container" [ngClass]="{'table-c': !tabClose,'table-o': tabClose}">
                 <table id="table" class="table table-bordered table-striped">
                     <thead>
                         <tr>

src/app/pages/historical-data/historical-data.component.scss

@@ -19,6 +19,9 @@
                     }
                 }
             }
+            .second-condition,.third-condition{
+                display: none;
+            }
             .input-container {
                 padding: 0;
                 > .form-control {
@@ -26,6 +29,12 @@
                     display: inline-block;
                 }
             }
+            .filterClose-c{
+                display: none;
+            }
+            .filterClose-o{
+                display: flex;
+            }
         }
         .airline-table{
             .table-container{
@@ -50,6 +59,19 @@
                         text-align: center;
                     }
                 }
+                &::-webkit-scrollbar {
+                    width: 15px;
+                    height: 15px;
+                }
+                &::-webkit-scrollbar-thumb {
+                    /*滚动条里面小方块*/
+                    background: rgba(165, 207, 222, 1);
+                    border-radius: 10px;
+                }
+                &::-webkit-scrollbar-track {
+                    background: rgba(0, 0, 0, 0.06);
+                    border-radius: 10px;
+                }
             }
         }
     }

src/app/pages/historical-data/historical-data.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit,ViewChild,Renderer2 } from '@angular/core';
 import { ChangeDetectorRef } from '@angular/core';
 
 import { ToastService } from '../../components/toast/toast.service';
@@ -22,6 +22,7 @@ declare var laydate: any;
 export class HistoricalDataComponent implements OnInit {
 
     constructor(
+        private renderer2: Renderer2,
         private basicDataService: BasicDataService,
         private operateSpinServiceService: OperateSpinServiceService,
         private httpCilent: HttpClientService,
@@ -65,6 +66,10 @@ export class HistoricalDataComponent implements OnInit {
         'guarantee': false
     }
 
+    @ViewChild('mainPage') mainPage;
+    @ViewChild('searchFilter') searchFilter;
+    @ViewChild('tableContainer') tableContainer;
+
     ngOnInit() {
         laydate.render({
             elem: '#selectDate',
@@ -93,6 +98,11 @@ export class HistoricalDataComponent implements OnInit {
             }
         });
 
+        this.renderer2.setStyle(this.tableContainer.nativeElement, 'height', this.mainPage.nativeElement.offsetHeight - this.searchFilter.nativeElement.offsetHeight - 55 + 'px');
+        window.onresize = function () {
+            this.renderer2.setStyle(this.tableContainer.nativeElement, 'height', this.mainPage.nativeElement.offsetHeight - this.searchFilter.nativeElement.offsetHeight - 55 + 'px');
+        }.bind(this)
+
 
         /* 获取用户设置 */
         this.httpCilent.get('/adminapi/settings/uisettings').subscribe(
@@ -106,7 +116,7 @@ export class HistoricalDataComponent implements OnInit {
             }
         )
         //获取航班动态信息
-        this.httpCilent.post('/adminapi/hitFlightData/list').subscribe(
+        this.httpCilent.post('/adminapi/hitFlightData/list',{ hstFLightTime: '2018-11-22' }).subscribe(
             data => {
                 this.raw_data = data.body;
 
@@ -204,6 +214,13 @@ export class HistoricalDataComponent implements OnInit {
         this.operateSpinServiceService.hideSpin()
     }
 
+    public filterClose: boolean = true;
+    toggleFilter() {
+        this.filterClose = !this.filterClose;
+        this.changeDetectorRef.detectChanges();
+        this.renderer2.setStyle(this.tableContainer.nativeElement, 'height', this.mainPage.nativeElement.offsetHeight - this.searchFilter.nativeElement.offsetHeight - 55 + 'px');
+    }
+
     /**
      * 刷新
      */

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

@@ -1,6 +1,6 @@
-<div class="main-page">
+<div class="main-page" #mainPage>
     <div class="page-content">
-        <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 [(ngModel)]="SEL_COL" class="mr-4 form-control" name="" id="">
@@ -17,12 +17,13 @@
                     </label>
                     <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">
+                <div class="line-operator-right mb-3 col-xlg-4 col-mlg-4 col-xl-4 col-lg-2">
-                    <button type="button" class="btn btn-info mr-3" (click)="refresh()">刷新</button>
+                    <button type="button" class="btn btn-info mr-2" (click)="toggleFilter()">{{filterClose?'展开':'关闭'}}</button>
+                    <button type="button" class="btn btn-info mr-2" (click)="refresh()">刷新</button>
                 </div>
             </div>
 
-            <div class="second-condition mb-3 row">
+            <div [ngClass]="{'filterClose-c':filterClose,'filterClose-o':!filterClose}" class="second-condition mb-3 row">
                 <div class="input-container mr-4">
                     <label for="">航空公司：&nbsp;&nbsp;</label>
                     <select [(ngModel)]="filterItems.ALCD" (ngModelChange)="selectChange()" class="form-control">
@@ -102,7 +103,7 @@
                 </div>
             </div>
 
-            <div class="third-condition row">
+            <div [ngClass]="{'filterClose-c':filterClose,'filterClose-o':!filterClose}" class="third-condition row">
                 <label class="radio-inline custom-checkbox nowrap mr-4">
                     <input type="checkbox" [(ngModel)]="checkboxGroup.related" (ngModelChange)="checkboxChange()">
                     <span>航班关联信息</span>
@@ -126,7 +127,7 @@
             </div>
         </div>
         <div class="airline-table">
-            <div id="table-container" class="table-container" [ngClass]="{'table-c': !tabClose,'table-o': tabClose}">
+            <div #tableContainer id="table-container" class="table-container" [ngClass]="{'table-c': !tabClose,'table-o': tabClose}">
                 <table id="table" class="table table-bordered table-striped">
                     <thead>
                         <tr>
@@ -140,14 +141,22 @@
                             [ngClass]="{'selected':row_state['renderFlight']['FLNO']===airline_row['renderFlight']['FLNO']}">
                             <td>{{i+1}}</td>
                             <td>
-                                <img class="mr-2" *ngIf="getVipNotes(airline_row)" src="/adminweb/assets/images/important-notes/vip.png" alt="">
+                                <img class="mr-2" *ngIf="getVipNotes(airline_row)" src="/adminweb/assets/images/important-notes/vip.png"
-                                <img class="mr-2" *ngIf="getOutplanNotes(airline_row)" src="/adminweb/assets/images/important-notes/out_plan.png" alt="">
+                                    alt="">
-                                <img class="mr-2" *ngIf="getAlternateNotes(airline_row)" src="/adminweb/assets/images/important-notes/alternate.png" alt="">
+                                <img class="mr-2" *ngIf="getOutplanNotes(airline_row)" src="/adminweb/assets/images/important-notes/out_plan.png"
-                                <img class="mr-2" *ngIf="getDelay30Notes(airline_row)" src="/adminweb/assets/images/important-notes/delay_30.png" alt="">
+                                    alt="">
-                                <img class="mr-2" *ngIf="getDelayNotes(airline_row)" src="/adminweb/assets/images/important-notes/delay.png" alt="">
+                                <img class="mr-2" *ngIf="getAlternateNotes(airline_row)" src="/adminweb/assets/images/important-notes/alternate.png"
-                                <img class="mr-2" *ngIf="getReturnNotes(airline_row)" src="/adminweb/assets/images/important-notes/return.png" alt="">
+                                    alt="">
-                                <img class="mr-2" *ngIf="getCancleNotes(airline_row)" src="/adminweb/assets/images/important-notes/cancle.png" alt="">
+                                <img class="mr-2" *ngIf="getDelay30Notes(airline_row)" src="/adminweb/assets/images/important-notes/delay_30.png"
-                                <img class="mr-2" *ngIf="getStopoverNotes(airline_row)" src="/adminweb/assets/images/important-notes/stopover.png" alt="">
+                                    alt="">
+                                <img class="mr-2" *ngIf="getDelayNotes(airline_row)" src="/adminweb/assets/images/important-notes/delay.png"
+                                    alt="">
+                                <img class="mr-2" *ngIf="getReturnNotes(airline_row)" src="/adminweb/assets/images/important-notes/return.png"
+                                    alt="">
+                                <img class="mr-2" *ngIf="getCancleNotes(airline_row)" src="/adminweb/assets/images/important-notes/cancle.png"
+                                    alt="">
+                                <img class="mr-2" *ngIf="getStopoverNotes(airline_row)" src="/adminweb/assets/images/important-notes/stopover.png"
+                                    alt="">
                             </td>
                             <td *ngFor="let airline_col of render_col_lists" [ngClass]="getPosition(airline_col.COL_CODE,airline_row)"
                                 [ngStyle]="getColor(airline_col.COL_CODE,airline_row)">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>

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

@@ -9,9 +9,13 @@
         border: 1px solid #ccc;
         padding: 10px 20px;
         .search-filter {
+            position: relative;
             padding: 0 15px;
             .first-condition {
                 .line-operator-right {
+                    // position: absolute;
+                    // top: 0;
+                    // right: 0;
                     text-align: right;
                     padding: 0;
                     .btn-info {
@@ -20,6 +24,9 @@
                     }
                 }
             }
+            .second-condition,.third-condition{
+                display: none;
+            }
             .input-container {
                 padding: 0;
                 > .form-control {
@@ -27,6 +34,12 @@
                     display: inline-block;
                 }
             }
+            .filterClose-c{
+                display: none;
+            }
+            .filterClose-o{
+                display: flex;
+            }
         }
         .airline-table {
             .table-container {

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, Renderer2 } from '@angular/core';
 import { ChangeDetectorRef } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 
@@ -28,6 +28,7 @@ import * as $ from 'jquery';
 export class MainComponent implements OnInit {
     constructor(
         private router: Router,
+        private renderer2: Renderer2,
         private basicDataService: BasicDataService,
         private operateSpinServiceService: OperateSpinServiceService,
         private httpCilent: HttpClientService,
@@ -35,14 +36,12 @@ export class MainComponent implements OnInit {
         private toastService: ToastService,
         private websocketService: WebsocketService
     ) {
-        console.log(new Date().getTime());
         this.operateSpinServiceService.showSpin();
         this.changeDetectorRef.detach();
         this.router.events.pipe(
             filter((event => event instanceof NavigationEnd))
         ).subscribe(
             (event: NavigationEnd) => {
-                console.log(event);
                 if (event.urlAfterRedirects === '/app/main') {
                     this.httpCilent.get('/adminapi/settings/uisettings').subscribe(
                         data => {
@@ -107,31 +106,36 @@ export class MainComponent implements OnInit {
         'guarantee': false
     }
 
+    @ViewChild('mainPage') mainPage;
+    @ViewChild('searchFilter') searchFilter;
+    @ViewChild('tableContainer') tableContainer;
+
+
     ngOnInit() {
+        this.renderer2.setStyle(this.tableContainer.nativeElement, 'height', this.mainPage.nativeElement.offsetHeight - this.searchFilter.nativeElement.offsetHeight - 55 + 'px');
+        window.onresize = function () {
+            this.renderer2.setStyle(this.tableContainer.nativeElement, 'height', this.mainPage.nativeElement.offsetHeight - this.searchFilter.nativeElement.offsetHeight - 55 + 'px');
+        }.bind(this)
+
         //订阅航班更新
         this.websocketService.dynamicsMessage().subscribe(
             event => {
                 let data = JSON.parse(event as string);
                 if (data.topic === 'schd') {
-                    console.log(new Date().getTime());
                     let message = JSON.parse(data.message);
-                    console.log(message);
                     //是否可以开始处理动态消息
                     if (this.canHandleDynamicMessage) {
                         this.dynamicMessageHandle(message);
                     } else {
                         this.dynamicMessageArray.push(message);
                     }
-
                 } else if (data.topic === 'msg') {
                     let message = JSON.parse(data.message);
-                    console.log(message);
                     if (this.canHandleDynamicAlert) {
                         this.dynamicAlertHandle(message);
                     } else {
                         this.dynamicAlertArray.push(message);
                     }
-
                 }
             }
         )
@@ -207,6 +211,13 @@ export class MainComponent implements OnInit {
         tableCont.addEventListener('scroll', scrollHandle)
     }
 
+    public filterClose: boolean = true;
+    toggleFilter() {
+        this.filterClose = !this.filterClose;
+        this.changeDetectorRef.detectChanges();
+        this.renderer2.setStyle(this.tableContainer.nativeElement, 'height', this.mainPage.nativeElement.offsetHeight - this.searchFilter.nativeElement.offsetHeight - 55 + 'px');
+    }
+
 
     /**
      * 动态消息处理方法
@@ -262,8 +273,6 @@ export class MainComponent implements OnInit {
             return (a['ORDER'] - b['ORDER']);
         })
         this.changeDetectorRef.detectChanges();
-        console.log(new Date().getTime());
-
     }
 
     /**
@@ -295,7 +304,6 @@ export class MainComponent implements OnInit {
     }
     dynamicAlertHandle(message) {
         let alertType = message.META.TYPE + '-' + message.META.STYP;
-        console.log(alertType)
         let index = this.airline_message_alert.findIndex(val => val['COL_CODE'] === alertType);
         if (index > -1) {
             let alertText = this.alertMessage[alertType]();
@@ -330,7 +338,6 @@ export class MainComponent implements OnInit {
         this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
         this.changeDetectorRef.detectChanges();
         this.operateSpinServiceService.hideSpin();
-        console.log(new Date().getTime());
 
         //开始处理动态消息
         this.canHandleDynamicMessage = true;
@@ -379,7 +386,6 @@ export class MainComponent implements OnInit {
      * 输入框回车事件
      */
     inputEnter() {
-        console.log(new Date().getTime());
         if (this.FLT_POS === 1) {
             this.selectChange()
         } else {
@@ -567,7 +573,6 @@ export class MainComponent implements OnInit {
         this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
         this.changeDetectorRef.detectChanges();
         this.operateSpinServiceService.hideSpin();
-        console.log(new Date().getTime());
     }
 
     /**

src/app/pages/pages.component.html

@@ -37,7 +37,7 @@
                             <a class="dropdown-item" href="#">Something else here</a>
                         </div>
                     </li> -->
-                    <li class="nav-item dropdown mr-3">
+                    <!-- <li class="nav-item dropdown mr-3">
                         <a class="nav-icon nav-link" data-toggle="dropdown" id="alertsDropdown" aria-haspopup="true"
                             aria-expanded="false">
                             <div class="icon-container">
@@ -51,7 +51,7 @@
                             <a class="dropdown-item" href="#">Another action</a>
                             <a class="dropdown-item" href="#">Something else here</a>
                         </div>
-                    </li>
+                    </li> -->
                     <li class="nav-item mr-2">
                         <a class="nav-link" nz-popconfirm nzTitle="确认退出?" (nzOnConfirm)="confirmLogout()" nzPlacement="bottom">
                             <i class="fa fa-sign-out mr-1"></i>
@@ -85,7 +85,9 @@
         <div class="right-wrapper" [ngClass]="{'right-wrapper-c': menuClose,'right-wrapper-o': !menuClose}">
             <router-outlet></router-outlet>
             <div *ngIf="isSpinning" class="page-loading">
-                <i nz-icon [type]="'loading'"></i>
+                <!-- <i nz-icon [type]="'loading'"></i> -->
+                <div class="snipping"></div>
+                <!-- <p>数据加载中 ...</p> -->
             </div>
         </div>
     </div>

src/app/pages/pages.component.scss

@@ -141,4 +141,21 @@
     top: 0;
     left: 0;
     z-index: 999;
+    .snipping{
+        position: absolute;
+        top: calc(50% - 40px);
+        left: calc(50% - 120px);
+        margin-bottom: 25px;
+        width: 80px; height: 80px;
+        background: url('/assets/images/loading.png') no-repeat top center, linear-gradient(to top, transparent, transparent);
+        background-size: cover;
+        animation: spin 2s linear infinite;
+    };
+    p{
+        position: absolute;
+        top: calc(50% + 50px);
+        left: calc(50% - 125px);
+        font-size: 20px;
+        color: skyblue;
+    }
 }