增加消息提示统一管理

src/app/components/toast/toast-box.component.scss

@@ -1,6 +1,6 @@
 .toast-container {
     position: absolute;
-    z-index: 22222;
+    z-index: 999;
     // margin-top:10px;
     width:450px;
     // height: 174px;

src/app/components/toast/toast-box.component.ts

@@ -33,6 +33,13 @@ export class ToastBoxComponent implements OnInit {
         this.toastService.getToasts().forEach((config: ToastConfig) => {
             this.toastConfigs.push(config);
         });
+        this.toastService.removeToastBoxSubject.subscribe((config?: ToastConfig) => {
+            if (config) {
+                this.remove(config);
+            } else {
+                this.toastConfigs = [];
+            }
+        })
     }
 
     ngOnInit() {
@@ -53,6 +60,7 @@ export class ToastBoxComponent implements OnInit {
     remove(toastCfg: ToastConfig) {
         if (this.toastConfigs.indexOf(toastCfg) >= 0) {
             this.toastConfigs.splice(this.toastConfigs.indexOf(toastCfg), 1);
+            this.toastService.removeToastMainSubject.next(toastCfg);
         }
     }
 }

src/app/components/toast/toast.service.ts

@@ -9,6 +9,8 @@ import {ToastConfig} from './toast-model';
 export class ToastService {
 
     private toastSubject = new Subject<ToastConfig>();
+    public removeToastBoxSubject = new Subject<ToastConfig>();
+    public removeToastMainSubject = new Subject<ToastConfig>();
 
     constructor() { }
 
@@ -21,4 +23,21 @@ export class ToastService {
         this.toastSubject.next(toastConfig);
     }
 
+    removeToastBox(toastConfig?: ToastConfig) {
+        if (toastConfig) {
+            this.removeToastBoxSubject.next(toastConfig);
+        }else{
+            this.removeToastBoxSubject.next();
+        }
+
+    }
+
+    removeToastMain(toastConfig: ToastConfig) {
+        if (toastConfig) {
+            this.removeToastMainSubject.next(toastConfig);
+        }else{
+            this.removeToastMainSubject.next();
+        }
+    }
+
 }

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

@@ -3,7 +3,7 @@
         <div class="search-filter mb-2" #searchFilter>
             <div class="first-condition row">
                 <div class="line-operator-left input-container mb-2">
-                    <select [(ngModel)]="SEL_COL" class="mr-4 form-control" (ngModelChange)="resetPositionArray()" name="" id="">
+                    <select [(ngModel)]="SEL_COL" class="mr-4 form-control" (ngModelChange)="resetPositionArray()">
                         <option value="">选择列名</option>
                         <option *ngFor="let airline_col of render_col_lists" [value]="airline_col.COL_CODE">{{airline_col.COL_CN}}</option>
                     </select>
@@ -15,10 +15,47 @@
                         <input type="radio" [(ngModel)]="FLT_POS" [value]="2" name="filter-position">
                         <span>查找定位</span>
                     </label>
-                    <input class="form-control mr-4" [(ngModel)]="SEARCH" (ngModelChange)="resetPositionArray()" type="text" (keyup.enter)="inputEnter()">
+                    <input class="form-control mr-4" [(ngModel)]="SEARCH" (ngModelChange)="resetPositionArray()" type="text"
+                        (keyup.enter)="inputEnter()">
+                    <div class="input-container mr-4" style="display:inline-block">
+                        <label for="">筛选日期：&nbsp;&nbsp;</label>
+                        <nz-date-picker [nzShowToday]="false" [(ngModel)]="dateSelect" (ngModelChange)="onChangeDate($event)"></nz-date-picker>
+                    </div>
                     <div class="line-operator-right">
-                        <button type="button" class="btn btn-info mr-2" (click)="toggleFilter()">{{filterClose?'展开':'关闭'}}</button>
+                        <button type="button" class="btn btn-info mr-2" (click)="export()">导出</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>
+                        <nz-dropdown [nzVisible]="menuVisible" [nzTrigger]="'click'" [nzPlacement]="'bottomRight'">
+                            <button nz-dropdown type="button" class="btn btn-info mr-2 badge-btn">
+                                <span>消息</span>
+                                <span class="badge-count">{{toastConfigs.length}}</span>
+                            </button>
+                            <ul nzBordered nz-menu nzSelectable class="notify-container">
+                                <li nz-menu-item *ngFor="let config of toastConfigs">
+                                    <pre>{{config.text}}</pre>
+                                    <i (click)="remove(config)" nz-icon type="close" theme="outline"></i>
+                                </li>
+                                <li class="text-center" *ngIf="toastConfigs.length<=0" nz-menu-item>暂无消息</li>
+                                <!-- <li class="text-center" *ngIf="toastConfigs.length>0">
+                                    <button class="btn btn-outline-primary">清空所有</button>
+                                </li> -->
+                            </ul>
+                            <div class="text-center clearAll" *ngIf="toastConfigs.length>0">
+                                <button class="btn btn-outline-primary" (click)="clearAllNotify()">清空所有</button>
+                            </div>
+                            <!-- <nz-list nz-menu nzSelectable [nzFooter]="Footer" [nzDataSource]="data" nzBordered [nzRenderItem]="item" [nzItemLayout]="'horizontal'">
+                                <ng-template #item let-item>
+                                    <nz-list-item [nzContent]="item" [nzActions]="[removeAction]">
+                                        <ng-template #removeAction><i nz-icon type="close" theme="outline"></i></ng-template>
+                                    </nz-list-item>
+                                </ng-template>
+                                <ng-template #Footer>
+                                    <div class="text-center">
+                                        <button class="btn btn-outline-primary">清空所有</button>
+                                    </div>
+                                </ng-template>
+                            </nz-list> -->
+                        </nz-dropdown>
                     </div>
                 </div>
             </div>

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

@@ -26,6 +26,18 @@
                         background-color: rgb(122, 156, 204);
                         border-color: rgb(122, 156, 204);
                     }
+                    .badge-btn {
+                        position: relative;
+                        .badge-count {
+                            position: absolute;
+                            top: -10px;
+                            right: -10px;
+                            background: red;
+                            width: 24px;
+                            height: 20px;
+                            border-radius: 10px;
+                        }
+                    }
                 }
             }
             .second-condition,
@@ -145,10 +157,10 @@
                     white-space: nowrap;
                 }
                 /deep/ .ant-tabs-tab-prev {
-                    background-color: rgba(221, 221, 221, 0.5)
+                    background-color: rgba(221, 221, 221, 0.5);
                 }
                 /deep/ .ant-tabs-tab-next {
-                    background-color: rgba(221, 221, 221, 0.5)
+                    background-color: rgba(221, 221, 221, 0.5);
                 }
                 nz-tabset {
                     height: 100%;
@@ -184,7 +196,58 @@
     }
 }
 
-@media screen and (max-width: 991px) {
+.notify-container{
+    max-height: 275px;
+    overflow-y: auto;
+    max-width: 600px;
+    min-width: 250px;
+    padding: 0;
+    border-radius: 0;
+    li{
+        width: 100%;
+        position: relative;
+        line-height: 35px;
+        padding: 5px 35px 5px 24px;
+        border-bottom: 1px solid #ddd;
+        white-space: pre;
+        pre{
+            margin: 0;
+        }
+        i{
+            position: absolute;
+            top: 10px;
+            right: 10px;
+        }
+    }
+}
+.clearAll{
+    background-color: #fff;
+    padding: 10px 0;
+    box-shadow: 0 2px 8px rgba(0,0,0,.15);
+}
+
+nz-list{
+    min-width: 300px;
+    max-width: 450px;
+}
+
+nz-list-item{
+    cursor: pointer;
+    position: relative;
+    &:hover{
+        background-color: rgb(230, 247, 255)
+    }
+    /deep/ .ant-list-item-content{
+        margin-right: 20px
+    }
+    /deep/ .ant-list-item-action{
+        position: absolute;
+        top: 8px;
+        right: 4px;
+    }
+}
+
+@media screen and (max-width: 1335px) {
     .line-operator-right {
         float: none !important;
     }

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

@@ -15,6 +15,7 @@ import { AlertMessageHandle } from '../../utils/alert-message-handle';
 import { Utils } from '../../utils/utils';
 
 import * as $ from 'jquery';
+import { filter } from 'rxjs/operators';
 
 @Component({
     selector: 'app-main',
@@ -22,6 +23,8 @@ import * as $ from 'jquery';
     styleUrls: ['./main.component.scss']
 })
 export class MainComponent implements OnInit {
+    private toastConfigs: Array<ToastConfig> = [];
+
     constructor(
         private router: Router,
         private renderer2: Renderer2,
@@ -31,31 +34,29 @@ export class MainComponent implements OnInit {
         private toastService: ToastService,
         private websocketService: WebsocketService
     ) {
+        this.toastService.getToasts().forEach((config: ToastConfig) => {
+            console.log(config);
+            this.toastConfigs.unshift(config);
+         });
+         this.toastService.removeToastMainSubject.subscribe((config?: ToastConfig) => {
+            if (config) {
+                this.remove(config);
+            } else {
+                this.toastConfigs = [];
+            }
+        })
         this.operateSpinServiceService.showSpin();
-        // this.router.events.pipe(
+        this.router.events.pipe(
-        //     filter((event => event instanceof NavigationEnd))
+            filter((event => event instanceof NavigationEnd))
-        // ).subscribe(
+        ).subscribe(
-        //     (event: NavigationEnd) => {
+            (event: NavigationEnd) => {
-        //         if (event.urlAfterRedirects === '/app/main') {
+                if (event.urlAfterRedirects != '/app/main') {
-        //             // this.operateSpinServiceService.showSpin();
+                    if(this.websocketService.websocket.readyState === 1){
-        //             this.httpCilent.get('/adminapi/settings/uisettings').subscribe(
+                        this.websocketService.websocket.close();
-        //                 data => {
+                    }
-        //                     data.body.forEach(element => {
+                }
-        //                         if (element.groupCode === 'userSettingCol') {
+            }
-        //                             this.col_lists = JSON.parse(element.settingContent).allCols;
+        )
-        //                             this.render_col_lists = JSON.parse(element.settingContent).targetList;
-        //                         } else if (element.groupCode === 'userSettingColor') {
-        //                             this.airline_color = JSON.parse(element.settingContent);
-        //                         } else if (element.groupCode === 'userSettingMsgAlert') {
-        //                             this.airline_message_alert = JSON.parse(element.settingContent).targetList;
-        //                         }
-        //                     });
-        //                     // this.operateSpinServiceService.hideSpin();
-        //                 }
-        //             )
-        //         }
-        //     }
-        // )
     }
     public orderHandle = new FlightOrder();
     public dataHandle = new FlightsDataHandle();
@@ -120,6 +121,13 @@ export class MainComponent implements OnInit {
     visibleCount: number = 0;
     scrollTop: number = 0;
 
+    data = [
+        'Racing car sprays burning fuel into crowd.',
+        'Japanese princess to wed commoner.',
+        'Australian walks 100km after outback crash.',
+        'Man charged over missing wedding girl.',
+        'Los Angeles battles huge wildfires.'
+      ];
 
     ngOnInit() {
         window.onresize = function () {
@@ -132,7 +140,7 @@ export class MainComponent implements OnInit {
                 let data = JSON.parse(event as string);
                 if (data.topic === 'schd') {
                     let message = JSON.parse(data.message);
-                    console.log(message);
+                    // console.log(message);
                     //是否可以开始处理动态消息
                     if (this.canHandleDynamicMessage) {
                         this.dynamicMessageHandle(message);
@@ -141,7 +149,7 @@ export class MainComponent implements OnInit {
                     }
                 } else if (data.topic === 'msg') {
                     let message = JSON.parse(data.message);
-                    console.log(message);
+                    // console.log(message);
                     if (this.canHandleDynamicAlert) {
                         this.dynamicAlertHandle(message);
                     } else {
@@ -412,6 +420,29 @@ export class MainComponent implements OnInit {
         )
     }
 
+    /**
+     * 导出
+     * @param 
+     */
+    export() {
+        let exportArray = [];
+        this.wait_render_data.forEach(item => {
+            let exportItem = Object.assign({},item)
+            if (this.orderHandle.isLinked(exportItem)||this.orderHandle.isArriFlight(exportItem)) {
+                exportItem['renderFlight']['orderBy'] = new Date(this.utils.dateFormatter(exportItem['preFlight']['SODT'])).getTime();
+            } else {
+                exportItem['renderFlight']['orderBy'] = new Date(this.utils.dateFormatter(exportItem['reaFlight']['SODT'])).getTime()
+            }
+            exportArray.push(exportItem['renderFlight']);
+        })
+
+        exportArray.sort(function (a, b) {
+            return (a['orderBy'] - b['orderBy']);
+        })
+
+        console.log(exportArray);
+    }
+
     /**
      * 动态消息处理方法
      * @param message 
@@ -532,6 +563,9 @@ export class MainComponent implements OnInit {
         PHAG: '',    //旅客代理
     }
 
+    dateSelect: Date = null;
+    dateFilterItem: string = '';
+
     /**
      * 输入框回车事件
      */
@@ -547,6 +581,15 @@ export class MainComponent implements OnInit {
         }
     }
 
+    onChangeDate(date) {
+        if (date) {
+            this.dateFilterItem = this.changeDate(date);
+        } else {
+            this.dateFilterItem = '';
+        }
+        this.selectChange('filter');
+    }
+
     /**
      * 下拉框选择筛选
      */
@@ -563,6 +606,168 @@ export class MainComponent implements OnInit {
             filter_data.push(Object.assign({}, item));
         })
         //下拉框筛选
+        if (this.dateFilterItem) {
+            filter_data = filter_data.filter(item => {
+                if (this.orderHandle.isArriFlight(item)) {
+                    let is_satis = true;
+                    for (const key in filterItems) {
+                        if (filterItems.hasOwnProperty(key) && filterItems[key]) {
+                            if (key === 'Abnormal_state') {
+                                if (item['preFlight'][filterItems[key]] && item['preFlight'][filterItems[key]].length > 0) {
+                                    is_satis = true;
+                                    continue;
+                                } else {
+                                    is_satis = false;
+                                    break;
+                                }
+                            }
+                            else {
+                                if (item['preFlight'][key] == filterItems[key]) {
+                                    is_satis = true;
+                                    continue;
+                                } else {
+                                    is_satis = false;
+                                    break;
+                                }
+                            }
+                        }
+                    }
+                    if (is_satis) {
+                        if (item['renderFlight']['FLDT']) {
+                            if (item['renderFlight']['FLDT'] === this.dateFilterItem) {
+                                is_satis = true;
+                            } else {
+                                is_satis = false;
+                            }
+                        } else {
+                            is_satis = false;
+                        }
+                    }
+                    return is_satis;
+                } else if (this.orderHandle.isDeptFlight(item)) {
+                    let is_satis = true;
+                    for (const key in filterItems) {
+                        if (filterItems.hasOwnProperty(key) && filterItems[key]) {
+                            if (key === 'Abnormal_state') {
+                                if (item['reaFlight'][filterItems[key]] && item['reaFlight'][filterItems[key]].length > 0) {
+                                    is_satis = true;
+                                    continue;
+                                } else {
+                                    is_satis = false;
+                                    break;
+                                }
+                            }
+                            else {
+                                if (item['reaFlight'][key] == filterItems[key]) {
+                                    is_satis = true;
+                                    continue;
+                                } else {
+                                    is_satis = false;
+                                    break;
+                                }
+                            }
+                        }
+                    }
+                    if (is_satis) {
+                        if (item['renderFlight']['FLDT']) {
+                            if (item['renderFlight']['FLDT'] === this.dateFilterItem) {
+                                is_satis = true;
+                            } else {
+                                is_satis = false;
+                            }
+                        } else {
+                            is_satis = false;
+                        }
+                    }
+                    return is_satis;
+                } else {
+                    let pre_satis = true;
+                    let rea_satis = true;
+                    for (const key in filterItems) {
+                        if (filterItems.hasOwnProperty(key) && filterItems[key]) {
+                            if (key === 'Abnormal_state') {
+                                if (item['preFlight'][filterItems[key]] && item['preFlight'][filterItems[key]].length > 0) {
+                                    pre_satis = true;
+                                    continue;
+                                } else {
+                                    pre_satis = false;
+                                    break;
+                                }
+                            }
+                            else {
+                                if (item['preFlight'][key] == filterItems[key]) {
+                                    pre_satis = true;
+                                    continue;
+                                } else {
+                                    pre_satis = false;
+                                    break;
+                                }
+                            }
+                        }
+                    }
+                    if (pre_satis) {
+                        if (item['renderPreFlight']['FLDT']) {
+                            if (item['renderPreFlight']['FLDT'] === this.dateFilterItem) {
+                                pre_satis = true;
+                            } else {
+                                pre_satis = false;
+                            }
+                        } else {
+                            pre_satis = false;
+                        }
+                    }
+                    for (const key in filterItems) {
+                        if (filterItems.hasOwnProperty(key) && filterItems[key]) {
+                            if (key === 'Abnormal_state') {
+                                if (item['reaFlight'][filterItems[key]] && item['reaFlight'][filterItems[key]].length > 0) {
+                                    rea_satis = true;
+                                    continue;
+                                } else {
+                                    rea_satis = false;
+                                    break;
+                                }
+                            }
+                            else {
+                                if (item['reaFlight'][key] == filterItems[key]) {
+                                    rea_satis = true;
+                                    continue;
+                                } else {
+                                    rea_satis = false;
+                                    break;
+                                }
+                            }
+                        }
+                    }
+                    if (rea_satis) {
+                        if (item['renderReaFlight']['FLDT']) {
+                            if (item['renderReaFlight']['FLDT'] === this.dateFilterItem) {
+                                rea_satis = true;
+                            } else {
+                                rea_satis = false;
+                            }
+                        } else {
+                            rea_satis = false;
+                        }
+                    }
+
+                    if (pre_satis && !rea_satis) {
+                        item['renderFlight'] = item['renderPreFlight'];
+                        delete item['reaFlight'];
+                        delete item['renderReaFlight'];
+                        return pre_satis;
+                    } else if (!pre_satis && rea_satis) {
+                        item['renderFlight'] = item['renderReaFlight'];
+                        delete item['preFlight'];
+                        delete item['renderPreFlight'];
+                        return rea_satis;
+                    } else if (pre_satis && rea_satis) {
+                        return pre_satis && rea_satis;
+                    } else {
+                        return false;
+                    }
+                }
+            })
+        } else {
             filter_data = filter_data.filter(item => {
                 if (this.orderHandle.isArriFlight(item)) {
                     let is_satis = true;
@@ -679,6 +884,7 @@ export class MainComponent implements OnInit {
                     }
                 }
             })
+        }
 
         this.selectedFilterData = filter_data;
 
@@ -1286,4 +1492,31 @@ export class MainComponent implements OnInit {
             }, 10)
         }
     }
+
+    //日期时间处理
+    changeDate(time) {
+        var date = new Date(time);
+        var Y = date.getFullYear() + '';
+        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '';
+        var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + '';
+        return Y + '-' + M + '-' + D;
+    }
+
+    /**
+     * 移除消息提示框
+     * @param toastCfg 
+     */
+    remove(toastCfg: ToastConfig) {
+        if (this.toastConfigs.indexOf(toastCfg) >= 0) {
+            this.toastConfigs.splice(this.toastConfigs.indexOf(toastCfg), 1);
+            this.toastService.removeToastBoxSubject.next(toastCfg);
+        }
+    }
+    /**
+     * 清除所有消息弹出框
+     */
+    clearAllNotify(){
+        this.toastConfigs = [];
+        this.toastService.removeToastBox();
+    }
 }

src/app/pages/main/main.module.ts

@@ -2,6 +2,10 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { registerLocaleData } from '@angular/common';
+import zh from '@angular/common/locales/zh';
+registerLocaleData(zh);
+
 /* 消息提示 */
 import { ToastModule } from '../../components/toast/toast.module'