diff --git a/src/app/components/toast/toast-box.component.scss b/src/app/components/toast/toast-box.component.scss index 223650d..4652d5f 100644 --- a/src/app/components/toast/toast-box.component.scss +++ b/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; diff --git a/src/app/components/toast/toast-box.component.ts b/src/app/components/toast/toast-box.component.ts index 2a60431..e5d3b42 100644 --- a/src/app/components/toast/toast-box.component.ts +++ b/src/app/components/toast/toast-box.component.ts @@ -1,58 +1,66 @@ -import {Component, Input, OnInit} from '@angular/core'; -import {trigger, transition, style, animate, state} from '@angular/animations' -import {ToastService} from './toast.service'; -import {ToastConfig} from './toast-model'; +import { Component, Input, OnInit } from '@angular/core'; +import { trigger, transition, style, animate, state } from '@angular/animations' +import { ToastService } from './toast.service'; +import { ToastConfig } from './toast-model'; // import { from } from 'rxjs'; /** * toast外层组件 */ @Component({ - selector: 'toast-box', - templateUrl : './toast-box.component.html', - styleUrls:['./toast-box.component.scss'], - animations: [ - trigger('animation', [ - transition('void => fancy', [ - style({opacity: 1, maxWidth: 450, transform: 'translateX(100%)'}), - animate('500ms ease-in-out') - ]), - transition('fancy => void', [ - animate('500ms ease-in-out', style({transform: 'translateX(100%)'})) - ]) - ]) - ] + selector: 'toast-box', + templateUrl: './toast-box.component.html', + styleUrls: ['./toast-box.component.scss'], + animations: [ + trigger('animation', [ + transition('void => fancy', [ + style({ opacity: 1, maxWidth: 450, transform: 'translateX(100%)' }), + animate('500ms ease-in-out') + ]), + transition('fancy => void', [ + animate('500ms ease-in-out', style({ transform: 'translateX(100%)' })) + ]) + ]) + ] }) export class ToastBoxComponent implements OnInit { - @Input() toastAnimation: string = 'none'; - @Input() toastPosition: string = 'toast-top-center'; + @Input() toastAnimation: string = 'none'; + @Input() toastPosition: string = 'toast-top-center'; - private toastConfigs: Array = []; + private toastConfigs: Array = []; - constructor(private toastService: ToastService) { - this.toastService.getToasts().forEach((config: ToastConfig) => { - this.toastConfigs.push(config); - }); - } + constructor(private toastService: ToastService) { + 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() { - - } - - /** - * 获得所有toast配置 - */ - getToastConfigs(): Array { - return this.toastConfigs; - } + ngOnInit() { - /** - * 移除 - * @param toastCfg - */ - remove(toastCfg: ToastConfig) { - if(this.toastConfigs.indexOf(toastCfg) >= 0) { - this.toastConfigs.splice(this.toastConfigs.indexOf(toastCfg), 1); + } + + /** + * 获得所有toast配置 + */ + getToastConfigs(): Array { + return this.toastConfigs; + } + + /** + * 移除 + * @param toastCfg + */ + remove(toastCfg: ToastConfig) { + if (this.toastConfigs.indexOf(toastCfg) >= 0) { + this.toastConfigs.splice(this.toastConfigs.indexOf(toastCfg), 1); + this.toastService.removeToastMainSubject.next(toastCfg); + } } - } } diff --git a/src/app/components/toast/toast.service.ts b/src/app/components/toast/toast.service.ts index 4ae8f13..b25b139 100644 --- a/src/app/components/toast/toast.service.ts +++ b/src/app/components/toast/toast.service.ts @@ -1,6 +1,6 @@ -import {Injectable} from '@angular/core'; -import {Observable,Subject} from 'rxjs'; -import {ToastConfig} from './toast-model'; +import { Injectable } from '@angular/core'; +import { Observable, Subject } from 'rxjs'; +import { ToastConfig } from './toast-model'; /** * toast服务 @@ -8,17 +8,36 @@ import {ToastConfig} from './toast-model'; @Injectable() export class ToastService { - private toastSubject = new Subject(); + private toastSubject = new Subject(); + public removeToastBoxSubject = new Subject(); + public removeToastMainSubject = new Subject(); - constructor() {} + constructor() { } - getToasts(): Observable { - return this.toastSubject; - } - + getToasts(): Observable { + return this.toastSubject; + } - toast(toastConfig: ToastConfig) { - this.toastSubject.next(toastConfig); - } + + toast(toastConfig: ToastConfig) { + 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(); + } + } } diff --git a/src/app/pages/main/main.component.html b/src/app/pages/main/main.component.html index 9130d6f..41feccc 100644 --- a/src/app/pages/main/main.component.html +++ b/src/app/pages/main/main.component.html @@ -3,7 +3,7 @@
- @@ -15,10 +15,47 @@ 查找定位 - + +
+ + +
- + + + + +
    +
  • + 
    {{config.text}}
    + +
    • +
  • 暂无消息
    • + +
+
+ +
+ +
diff --git a/src/app/pages/main/main.component.scss b/src/app/pages/main/main.component.scss index 56de5fb..76cda96 100644 --- a/src/app/pages/main/main.component.scss +++ b/src/app/pages/main/main.component.scss @@ -14,7 +14,7 @@ position: relative; padding: 0 15px; .first-condition { - .line-operator-left{ + .line-operator-left { width: 100%; } .line-operator-right { @@ -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, @@ -138,19 +150,19 @@ } } } - /deep/ .ant-tabs-content{ + /deep/ .ant-tabs-content { height: 100%; overflow: auto; border: 1px solid #ccc; white-space: nowrap; } - /deep/ .ant-tabs-tab-prev{ - background-color: rgba(221, 221, 221, 0.5) + /deep/ .ant-tabs-tab-prev { + background-color: rgba(221, 221, 221, 0.5); } - /deep/ .ant-tabs-tab-next{ - background-color: rgba(221, 221, 221, 0.5) + /deep/ .ant-tabs-tab-next { + background-color: rgba(221, 221, 221, 0.5); } - nz-tabset{ + nz-tabset { height: 100%; } &::-webkit-scrollbar { @@ -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; } diff --git a/src/app/pages/main/main.component.ts b/src/app/pages/main/main.component.ts index e78b6fe..757848d 100644 --- a/src/app/pages/main/main.component.ts +++ b/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 = []; + 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( - // filter((event => event instanceof NavigationEnd)) - // ).subscribe( - // (event: NavigationEnd) => { - // if (event.urlAfterRedirects === '/app/main') { - // // this.operateSpinServiceService.showSpin(); - // this.httpCilent.get('/adminapi/settings/uisettings').subscribe( - // 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(); - // } - // ) - // } - // } - // ) + this.router.events.pipe( + filter((event => event instanceof NavigationEnd)) + ).subscribe( + (event: NavigationEnd) => { + if (event.urlAfterRedirects != '/app/main') { + if(this.websocketService.websocket.readyState === 1){ + this.websocketService.websocket.close(); + } + } + } + ) } 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,122 +606,285 @@ export class MainComponent implements OnInit { filter_data.push(Object.assign({}, item)); }) //下拉框筛选 - 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; + 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; + else { + if (item['preFlight'][key] == filterItems[key]) { + is_satis = true; + continue; + } else { + is_satis = false; + break; + } } } } - } - 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) { + if (is_satis) { + if (item['renderFlight']['FLDT']) { + if (item['renderFlight']['FLDT'] === this.dateFilterItem) { is_satis = true; - continue; } else { is_satis = false; - break; + } + } 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; + } } } - else { - if (item['reaFlight'][key] == filterItems[key]) { + } + if (is_satis) { + if (item['renderFlight']['FLDT']) { + if (item['renderFlight']['FLDT'] === this.dateFilterItem) { is_satis = true; - continue; } else { is_satis = false; - break; } + } 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; - } - } - } - } - 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 (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; + return is_satis; } else { - return false; + 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; + 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; + } + } + } + } + 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; + } + } + } + } + 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; + } + } + } + } + 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 (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; + } + } + }) + } 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(); + } } \ No newline at end of file diff --git a/src/app/pages/main/main.module.ts b/src/app/pages/main/main.module.ts index 0c05abe..b4b3f52 100644 --- a/src/app/pages/main/main.module.ts +++ b/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'