windy/airport-chengdu-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

菜单折叠，tab栏折叠

Browse Source
This commit is contained in:
zhouyuejun
2018-11-27 18:16:25 +08:00
parent 5470628d7f
commit bb2779e6e8
10 changed files with 219 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
proxy.conf.json
+6
View File
@@ -12,6 +12,12 @@
"changeOrigin": true,
"ws": true
},
"/logout":{
"target": "http://130.120.3.231:91",
"secure": false,
"changeOrigin": true,
"ws": true
},
"/adminapi":{
"target": "http://130.120.3.231:91",
"secure": false,
src/app/pages/main/main.component.html
+24 -21
View File
@@ -19,8 +19,8 @@
</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>
<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>
<!-- <button type="button" class="btn btn-info">航班动态信息</button> -->
</div>
</div>
@@ -28,7 +28,7 @@
<div class="second-condition mb-3 row">
<div class="input-container mr-4">
<label for="">航空公司：&nbsp;&nbsp;</label>
<select [(ngModel)]="filterItems.ALCD" class="form-control">
<select [(ngModel)]="filterItems.ALCD" (ngModelChange)="selectChange()" class="form-control">
<option value=""></option>
<option *ngFor="let airline of airlines" [value]="airline.airlineCodeIata">{{airline.airlineName}}</option>
</select>
@@ -54,11 +54,11 @@
</select>
</div>
<!-- <div class="input-container mr-4">
<label for="">航班任务：&nbsp;&nbsp;</label>
<select class="form-control" name="" id="">
<option value=""></option>
</select>
</div> -->
<label for="">航班任务：&nbsp;&nbsp;</label>
<select class="form-control" name="" id="">
<option value=""></option>
</select>
</div> -->
<div class="input-container mr-4">
<label for="">到达/出发：</label>
<select [(ngModel)]="filterItems.MVIN" (ngModelChange)="selectChange()" class="form-control">
@@ -69,8 +69,9 @@
</div>
<div class="input-container mr-4">
<label for="">运营状态：&nbsp;&nbsp;</label>
<select class="form-control" name="" id="">
<select [(ngModel)]="filterItems.FTSS" (ngModelChange)="selectChange()" class="form-control">
<option value=""></option>
<option *ngFor="let status of flightStatus" [value]="status.sttc">{{status.stdc}}</option>
</select>
</div>
<div class="input-container mr-4">
@@ -114,29 +115,29 @@
<div class="third-condition row">
<label class="radio-inline custom-checkbox nowrap mr-4">
<input type="checkbox">
<input type="checkbox" [(ngModel)]="checkboxGroup.related" (ngModelChange)="checkboxChange()">
<span>航班关联信息</span>
</label>
<label class="radio-inline custom-checkbox nowrap mr-4">
<input type="checkbox">
<input type="checkbox" [(ngModel)]="checkboxGroup.detail" (ngModelChange)="checkboxChange()">
<span>详细信息</span>
</label>
<label class="radio-inline custom-checkbox nowrap mr-4">
<input type="checkbox">
<input type="checkbox" [(ngModel)]="checkboxGroup.vip" (ngModelChange)="checkboxChange()">
<span>航班VIP信息</span>
</label>
<label class="radio-inline custom-checkbox nowrap mr-4">
<input type="checkbox">
<input type="checkbox" [(ngModel)]="checkboxGroup.guarantee" (ngModelChange)="checkboxChange()">
<span>保障信息</span>
</label>
<label class="radio-inline custom-checkbox nowrap">
<input type="checkbox">
<input type="checkbox" [(ngModel)]="checkboxGroup.special" (ngModelChange)="checkboxChange()">
<span>航班特服信息</span>
</label>
</div>
</div>
<div class="airline-table">
<div id="table-container" class="table-container">
<div id="table-container" class="table-container" [ngClass]="{'table-c': !tabClose,'table-o': tabClose}">
<table id="table" class="table table-bordered table-striped">
<thead>
<tr>
@@ -151,25 +152,27 @@
<td>{{i+1}}</td>
<td>{{isLast}}</td>
<td *ngFor="let airline_col of col_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
<span *ngIf="getLast(isLast)"></span>
</tr>
</tbody>
</table>
</div>
<div class="airline-message">
<div class="airline-message" [ngClass]="{'tab-c': tabClose,'tab-o': !tabClose}">
<nz-tabset [nzTabPosition]="'top'" [nzType]="'card'" [nzShowPagination]="false">
<nz-tab nzTitle="关联信息" (nzClick)="nzClick()">
<nz-tab nzTitle="关联信息" (nzClick)="nzClick()" *ngIf="checkboxGroup.related">
<app-related-tab [flight]="row_state"></app-related-tab>
</nz-tab>
<nz-tab nzTitle="详细信息" (nzClick)="nzClick()">
<nz-tab nzTitle="详细信息" (nzClick)="nzClick()" *ngIf="checkboxGroup.detail">
<app-detail-tab [flight]="row_state"></app-detail-tab>
</nz-tab>
<nz-tab nzTitle="保障信息" (nzClick)="nzClick()">
<nz-tab nzTitle="保障信息" (nzClick)="nzClick()" *ngIf="checkboxGroup.guarantee">
<app-guarantee-tab></app-guarantee-tab>
</nz-tab>
<nz-tab nzTitle="VIP信息" (nzClick)="nzClick()">
<nz-tab nzTitle="VIP信息" (nzClick)="nzClick()" *ngIf="checkboxGroup.vip">
<app-vip-tab></app-vip-tab>
</nz-tab>
<nz-tab nzTitle="特服信息" (nzClick)="nzClick()" *ngIf="checkboxGroup.special">
<app-special-tab></app-special-tab>
</nz-tab>
</nz-tabset>
</div>
</div>
src/app/pages/main/main.component.scss
+16 -3
View File
@@ -1,7 +1,7 @@
.main-page {
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-y: auto;
padding: 15px 10px;
background-color: #fff;
.page-content {
@@ -31,7 +31,7 @@
.table-container{
display: inline-block;
// border: 1px solid #ccc;
width: 75%;
width: 100%;
height: 700px;
overflow: auto;
box-shadow: 0 0 1px .5px #ddd;
@@ -56,7 +56,7 @@
display: inline-block;
// box-shadow: 0 0 1px .5px #ddd;
vertical-align: top;
width: 24%;
width: 0;
margin-left: 1%;
height: 700px;
/deep/ .ant-tabs-bar{
@@ -72,6 +72,19 @@
}
}
}
.table-c{
width: 75%;
}
.table-o{
width: 100%;
}
.tab-c{
width: 0;
display: none;
}
.tab-o{
width: 24%;
}
}
}
}
src/app/pages/main/main.component.ts
+59 -14
View File
@@ -49,9 +49,12 @@ export class MainComponent implements OnInit {
private toastService: ToastService,
) {
console.log(new Date().getTime())
}
}
public tabClose: boolean = true;
public isSpinning:boolean = true;
//各项基础数据
public terminals: Array<any>;
public flightStatus: Array<any>;
public airports: Array<any>;
public citys: Array<any>;;
@@ -65,6 +68,16 @@ export class MainComponent implements OnInit {
public airline_color: Array<object> = [];
public row_state: any = { renderFlight: {} };
public checkboxGroup = {
'related': false,
'detail': false,
'vip': false,
'special': false,
'guarantee': false
}
public formatter = {
'GCTM': gctmFormatter,
'BOTM': botmFormatter,
@@ -207,6 +220,7 @@ export class MainComponent implements OnInit {
})
//从基础数据服务中拿出部分基础数据
this.terminals = this.basicDataService.terminal;
this.flightStatus = this.basicDataService.flightStatus;
this.airlines = this.basicDataService.airline;
this.citys = this.basicDataService.city;
@@ -224,6 +238,9 @@ export class MainComponent implements OnInit {
this.doSequence(this.combined_data);
}
}, 5000);
this.basicDataService.terminal_subject.subscribe(
val => this.terminals = val
)
this.basicDataService.flightStatus_subject.subscribe(
val => this.flightStatus = val
);
@@ -255,13 +272,9 @@ export class MainComponent implements OnInit {
tableCont.addEventListener('scroll', scrollHandle)
}
getLast(isLast){
if(isLast){
console.log('666666');
}
}
/**
* 基础数据转换
*/
basicDataTransHandle() {
this.combined_data.forEach(item => {
if (this.isArriFlight(item) || this.isDeptFlight(item)) {
@@ -284,7 +297,9 @@ export class MainComponent implements OnInit {
let erutLinkCodeArray = item['renderFlight']['ERUT'].split(' - ');
let erutLinkChnArray = []
for (let i = 0; i < erutLinkCodeArray.length; i++) {
console.log(erutLinkCodeArray[i]);
let airportIndex = this.airports.findIndex(val => val.airportCodeIata === erutLinkCodeArray[i]);
console.log(airportIndex);
let cityIndex = this.citys.findIndex(val => this.airports[airportIndex].cityId === val.cityId);
erutLinkChnArray.push(this.citys[cityIndex].cityNameChn);
}
@@ -349,16 +364,47 @@ export class MainComponent implements OnInit {
this.render_data = sequenceData;
this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
console.log(new Date().getTime() +'---');
console.log(new Date().getTime() + '---');
this.changeDetectorRef.detectChanges();
console.log(new Date().getTime() +'---');
console.log(new Date().getTime() + '---');
}
nzClick(){
/**
* 复选框勾选事件
*/
checkboxChange() {
for (const key in this.checkboxGroup) {
if (this.checkboxGroup.hasOwnProperty(key)) {
if (this.checkboxGroup[key]) {
this.tabClose = false;
break;
} else {
this.tabClose = true;
continue;
}
}
}
this.changeDetectorRef.detectChanges()
}
/**
* tab项切换事件
*/
nzClick() {
this.changeDetectorRef.detectChanges();
}
/**
* 刷新
*/
refresh() {
this.render_data.reverse();
console.log('=====');
this.changeDetectorRef.detectChanges();
console.log('-----');
}
/**
* 过滤及定位
@@ -373,6 +419,7 @@ export class MainComponent implements OnInit {
FLIN: '', //航线类别
FLTY: '', //航班类别
MVIN: '', //到达/出发
FTSS: '',
TRML: '', //航站楼
FHAG: '', //机坪代理
MHAG: '', //维护代理
@@ -395,7 +442,6 @@ export class MainComponent implements OnInit {
* 下拉框选择筛选
*/
selectChange() {
console.log(new Date().getTime() + '-----');
let filter_data = [];
let filterItems = this.filterItems;
this.combined_data.forEach(item => {
@@ -538,7 +584,6 @@ export class MainComponent implements OnInit {
this.render_data = filterData;
this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
this.changeDetectorRef.detectChanges();
console.log(new Date().getTime() + '=====');
}
/**
src/app/pages/pages.component.html
+30 -11
View File
@@ -4,13 +4,26 @@
<a class="navbar-brand">
航班信息查询系统
</a>
<a class="navbar-brand">
<i class=" fa fa-dedent"></i>
<a class="navbar-brand" (click)="toggleMenu()">
<i class="fa fa-dedent fa-fw" [hidden]="menuClose"></i>
<i class="fa fa-indent fa-fw" [hidden]="!menuClose"></i>
</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto mr-4">
<li class="nav-item dropdown mr-2">
<li class="nav-item mr-3">
<a class="nav-link">
<label>用户：</label>
<span>admin</span>
</a>
</li>
<li class="nav-item mr-3">
<a class="nav-link">
<label>角色：</label>
<span>系统管理员</span>
</a>
</li>
<!-- <li class="nav-item dropdown mr-2">
<a class="nav-icon nav-link" data-toggle="dropdown" id="messagesDropdown" aria-haspopup="true"
aria-expanded="false">
<div class="icon-container">
@@ -23,12 +36,13 @@
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown mr-2">
</li> -->
<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">
<i class="fa fa-envelope-o"></i>
<i class="fa fa-envelope-o mr-1"></i>
<label>消息</label>
<span style="background:#0cc2aa">4</span>
</div>
</a>
@@ -38,7 +52,13 @@
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<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>
<span>退出</span>
</a>
</li>
<!-- <li class="nav-item dropdown">
<a class="nav-link user-info" data-toggle="dropdown" id="userDropdown" aria-haspopup="true"
aria-expanded="false">
<div class="user-container">
@@ -51,20 +71,19 @@
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</li> -->
</ul>
</div>
</nav>
</div>
<div class="content-wrapper">
<div class="left-wrapper">
<div class="left-wrapper" [ngClass]="{'left-wrapper-c': menuClose,'left-wrapper-o': !menuClose}">
<div class="left-menu">
<app-sidebar-menu [data]="menuData"></app-sidebar-menu>
</div>
</div>
<div class="right-wrapper">
<div class="right-wrapper" [ngClass]="{'right-wrapper-c': menuClose,'right-wrapper-o': !menuClose}">
<router-outlet></router-outlet>
</div>
</div>
</div>
src/app/pages/pages.component.scss
+31 -6
View File
@@ -15,14 +15,26 @@
color: rgba(255, 255, 255, 1);
cursor: pointer;
}
.navbar-nav{
background-color: rgb(38,51,68);
padding: 0 10px;
border-radius: 20px;
}
// .bg-dark{
// }
.nav-link{
display: flex;
align-items: center;
label{
margin: 0;
}
}
.nav-icon {
padding: 0.1rem 0.75rem;
// padding: 0.1rem 0.75rem;
cursor: pointer;
display: block;
font-size: 1.5rem;
// font-size: 1.5rem;
transition: color 0.1s ease-in-out, color 0.1s ease-in-out;
&:hover {
color: $color-primary;
@@ -39,9 +51,9 @@
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05);
border-radius: 50%;
display: block;
height: 18px;
width: 18px;
padding: 1px;
height: 14px;
width: 14px;
line-height: 14px;
position: absolute;
top: -4px;
right: -8px;
@@ -77,7 +89,7 @@
left: 0;
background-color: rgb(46, 59, 76);
padding-bottom: 30px;
overflow-y: scroll;
overflow-y: auto;
.left-header {
height: 66px;
border-bottom: 1px solid $gray-900;
@@ -101,5 +113,18 @@
height: calc(100% - 66px);
margin-left: 235px;
}
.left-wrapper-o {
width: 235px;
}
.left-wrapper-c {
width: 0px;
display: none;
}
.right-wrapper-o {
margin-left: 235px;
}
.right-wrapper-c {
margin-left: 0px;
}
}
}
src/app/pages/pages.component.ts
+25 -7
View File
@@ -1,9 +1,12 @@
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { BasicDataService } from './basic-data-service'
import { BasicDataService } from './basic-data-service';
import { HttpClientService } from '../services/http-client.service';
import { map, filter, mergeMap } from 'rxjs/operators';
import { pipe } from 'rxjs'
import { ToastService } from '../components/toast/toast.service';
import { ToastConfig, ToastType } from '../components/toast/toast-model';
import { filter } from 'rxjs/operators';
// import 'rxjs/add/operator/map';
// import 'rxjs/add/operator/mergeMap';
@@ -13,7 +16,7 @@ import { pipe } from 'rxjs'
styleUrls: ['./pages.component.scss']
})
export class PagesComponent implements OnInit {
public menuClose: boolean = false;
menuData = [
{
"name": "航班动态",
@@ -185,9 +188,10 @@ export class PagesComponent implements OnInit {
}]
constructor(
private router: Router,
private basicDataService:BasicDataService,
private activatedRoute: ActivatedRoute
) {
private basicDataService: BasicDataService,
private httpClient: HttpClientService,
private toastService: ToastService,
) {
this.basicDataService.loadBasicData();
}
@@ -203,6 +207,10 @@ export class PagesComponent implements OnInit {
}
toggleMenu() {
this.menuClose = !this.menuClose;
}
/**
* 判断是否有子节点
* @param item
@@ -225,4 +233,14 @@ export class PagesComponent implements OnInit {
})
}
confirmLogout() {
this.httpClient.post('/logout').subscribe(
data => {
const toastCfg = new ToastConfig(ToastType.SUCCESS, '', '退出系统成功！', 3000);
this.toastService.toast(toastCfg);
this.router.navigate(['/login']);
}
)
}
}
src/app/pages/pages.module.ts
+9 -4
View File
@@ -1,16 +1,21 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PagesComponent } from './pages.component';
import { PagesRoutingModule } from './pages-routing.module'
import { NgZorroAntdModule } from 'ng-zorro-antd';
import { ComponentsModule } from '../components/components.module'
import { PagesComponent } from './pages.component';
import { PagesRoutingModule } from './pages-routing.module';
import { SidebarMenuModule } from '../components/sidebar-menu/sidebar-menu.module';
import { BarMenuModule } from '../components/bar-menu/bar-menu.module';
import { BasicDataService } from './basic-data-service'
@NgModule({
imports: [
CommonModule,
ComponentsModule,
NgZorroAntdModule,
SidebarMenuModule,
BarMenuModule,
PagesRoutingModule,
],
declarations: [PagesComponent],
src/app/services/http-client.service.ts
+5 -5
View File
@@ -51,9 +51,9 @@ export class HttpClientService {
paramsString.push([key, params[key]].join('='))
}
}
return this.commonProcess(this.httpClient.get(encodeURI(url + paramsString.join('&') + '&t=' + t), options = {}));
return this.commonProcess(this.httpClient.get(encodeURI(url + paramsString.join('&') + '&t=' + t), options));
} else {
return this.commonProcess(this.httpClient.get(url + 't=' + t, options = {}));
return this.commonProcess(this.httpClient.get(url + 't=' + t, options));
}
}
@@ -80,7 +80,7 @@ export class HttpClientService {
* @param url
* @param options
*/
patch(url: string, body, options?): Observable<any> {
patch(url: string, body?, options?): Observable<any> {
return this.commonProcess(this.httpClient.patch(url, body, options));
}
@@ -91,7 +91,7 @@ export class HttpClientService {
* @param body
* @param options
*/
post(url: string, body, options?): Observable<any> {
post(url: string, body?, options?): Observable<any> {
return this.commonProcess(this.httpClient.post(url, body, options));
}
@@ -100,7 +100,7 @@ export class HttpClientService {
* @param url
* @param options
*/
put(url: string, body, options?): Observable<any> {
put(url: string, body?, options?): Observable<any> {
return this.commonProcess(this.httpClient.put(url, body, options));
}
src/polyfills.ts
+14 -14
View File
@@ -19,20 +19,20 @@
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.