路由复用优化

This commit is contained in:
zhouyuejun
2018-12-19 13:40:46 +08:00
parent 1e735059f8
commit cdb09eefa2
15 changed files with 155 additions and 116 deletions
+1 -1
View File
@@ -27,7 +27,7 @@ const appRoutes: Routes = [
path: 'app',
loadChildren: './pages/pages.module#PagesModule',
canActivate: [LoginAuthService],
data: { preload: false, reuse: true }
data: { preload: false, reuse: false }
}
]
+2 -2
View File
@@ -2,8 +2,8 @@
<div class="login-panel card p-20">
<div class="card-header">
<div class="login-header">
<img src="../../assets/images/logo.png">
<h4 class="dip text-center">Welcome To Gzzn-admin</h4>
<img src="/adminweb/assets/images/logo.png">
<h4 class="dip text-center">航班信息查询系统</h4>
</div>
</div>
<div class="card-body">
+13 -5
View File
@@ -35,11 +35,19 @@ export class LoginComponent implements OnInit {
_submit() {
this.httpClient.post('/login', this.loginForm.value).subscribe(
data => {
if(data.is_success){
const toastCfg = new ToastConfig(ToastType.SUCCESS, '', '登录成功!', 3000);
this.toastService.toast(toastCfg);
this.router.navigate(['../app'], { relativeTo: this.route })
}else{
if (data.is_success) {
this.httpClient.get('/sysapi/setting/user/currentUser/detail').subscribe(
xhr => {
console.log(xhr);
if (xhr.is_success) {
sessionStorage.setItem('userInfo', JSON.stringify(xhr.body));
const toastCfg = new ToastConfig(ToastType.SUCCESS, '', '登录成功!', 3000);
this.toastService.toast(toastCfg);
this.router.navigate(['../app/main'], { relativeTo: this.route })
}
}
)
} else {
const toastCfg = new ToastConfig(ToastType.ERROR, '', '登录失败!', 3000);
this.toastService.toast(toastCfg);
}
@@ -20,78 +20,79 @@ const basicDataRoutes: Routes = [
{
path: '',
component: BasicDataComponent,
children:[
children: [
{
path:'',
redirectTo:'chekingroup',
pathMatch:'full'
path: '',
redirectTo: 'chekingroup',
pathMatch: 'full'
},
{
path:'checkingroup',
component:CheckinGroupComponent,
data: { preload: true, reuse: false }
path: 'checkingroup',
component: CheckinGroupComponent,
data: { preload: true, reuse: true }
},
{
path:'gate',
component:GateComponent,
data: { preload: true, reuse: false }
path: 'gate',
component: GateComponent,
data: { preload: true, reuse: true }
},
{
path:'terminal',
component:TerminalComponent,
data: { preload: true, reuse: false }
path: 'terminal',
component: TerminalComponent,
data: { preload: true, reuse: true }
},
{
path:'chut',
component:ChutComponent,
data: { preload: true, reuse: false }
path: 'chut',
component: ChutComponent,
data: { preload: true, reuse: true }
},
{
path:'stand',
component:StandComponent,
data: { preload: true, reuse: false }
path: 'stand',
component: StandComponent,
data: { preload: true, reuse: true }
},
{
path:'carousel',
component:CarouselComponent,
data: { preload: true, reuse: false }
path: 'carousel',
component: CarouselComponent,
data: { preload: true, reuse: true }
},
{
path:'checkindesk',
component:CheckinDeskComponent,
data: { preload: true, reuse: false }
path: 'checkindesk',
component: CheckinDeskComponent,
data: { preload: true, reuse: true }
},
{
path:'airport',
component:AirportComponent,
data: { preload: true, reuse: false }
path: 'airport',
component: AirportComponent,
data: { preload: true, reuse: true }
},
{
path:'city',
component:CityComponent,
data: { preload: true, reuse: false }
path: 'city',
component: CityComponent,
data: { preload: true, reuse: true }
},
{
path:'aircrafttype',
component:AircraftTypeComponent,
data: { preload: true, reuse: false }
path: 'aircrafttype',
component: AircraftTypeComponent,
data: { preload: true, reuse: true }
},
{
path:'aircraft',
component:AircraftComponent,
data: { preload: true, reuse: false }
path: 'aircraft',
component: AircraftComponent,
data: { preload: true, reuse: true }
},
{
path:'terminalarea',
component:TerminalAreaComponent,
data: { preload: true, reuse: false }
path: 'terminalarea',
component: TerminalAreaComponent,
data: { preload: true, reuse: true }
},
{
path:'airline',
component:AirlineComponent,
data: { preload: true, reuse: false }
path: 'airline',
component: AirlineComponent,
data: { preload: true, reuse: true }
}
]
],
// data: { preload: false, reuse: true }
}
]
@@ -7,7 +7,7 @@ const historicalDataRoutes: Routes = [
{
path: '',
component: HistoricalDataComponent,
data: { preload: true, reuse: false }
data: { preload: true, reuse: true }
}
]
@@ -52,31 +52,28 @@
<select [(ngModel)]="filterItems.MVIN" (ngModelChange)="selectChange()" class="form-control">
<option value=""></option>
<option value="A">到达</option>
<option value="D">离港</option>
<option value="D">出发</option>
</select>
</div>
<div class="input-container mr-4">
<label for="">机坪代理:&nbsp;&nbsp;</label>
<select [(ngModel)]="filterItems.FHAG" class="form-control">
<select [(ngModel)]="filterItems.FHAG" (ngModelChange)="selectChange()" class="form-control">
<option value=""></option>
<option value="GH">国航代理</option>
<option value="CH">川航代理</option>
<option *ngFor="let anget of flightAgents" [value]="anget.oGId">{{anget.flightAgentName}}</option>
</select>
</div>
<div class="input-container mr-4">
<label for="">旅客代理:&nbsp;&nbsp;</label>
<select [(ngModel)]="filterItems.PHAG" class="form-control">
<select [(ngModel)]="filterItems.PHAG" (ngModelChange)="selectChange()" class="form-control">
<option value=""></option>
<option value="GH">国航代理</option>
<option value="CH">川航代理</option>
<option *ngFor="let anget of flightAgents" [value]="anget.oGId">{{anget.flightAgentName}}</option>
</select>
</div>
<div class="input-container mr-4">
<label for="">维护代理:&nbsp;&nbsp;</label>
<select [(ngModel)]="filterItems.MHAG" class="form-control">
<select [(ngModel)]="filterItems.MHAG" (ngModelChange)="selectChange()" class="form-control">
<option value=""></option>
<option value="GH">国航代理</option>
<option value="CH">川航代理</option>
<option *ngFor="let anget of flightAgents" [value]="anget.oGId">{{anget.flightAgentName}}</option>
</select>
</div>
</div>
@@ -36,6 +36,7 @@ export class HistoricalDataComponent implements OnInit {
public tabClose: boolean = true;
//各项基础数据
public flightAgents: Array<any>;
public flightTypes: Array<any>;
public terminals: Array<any>;
public flightStatus: Array<any>;
@@ -77,7 +78,7 @@ export class HistoricalDataComponent implements OnInit {
}
)
//获取航班动态信息
this.httpCilent.post('/adminapi/hitFlightData/list', { searchDate: new Date().getTime() }).subscribe(
this.httpCilent.post('/adminapi/hitFlightData/list', { hstFLightTime: "2018-11-22" }).subscribe(
data => {
this.raw_data = data.body;
@@ -89,6 +90,7 @@ export class HistoricalDataComponent implements OnInit {
});
//从基础数据服务中拿出部分基础数据
this.flightAgents = this.basicDataService.flightAgents;
this.flightTypes = this.basicDataService.flightTypes;
this.terminals = this.basicDataService.terminal;
this.flightStatus = this.basicDataService.flightStatus;
@@ -104,6 +106,9 @@ export class HistoricalDataComponent implements OnInit {
this.combined_data = combined_data;
this.doSequence(this.combined_data);
} else {
this.basicDataService.flightAgents_subject.subscribe(
val => this.flightAgents = val
)
this.basicDataService.flightTypes_subject.subscribe(
val => this.flightTypes = val
)
+14 -17
View File
@@ -81,26 +81,23 @@
</div>
<div class="input-container mr-4">
<label for="">机坪代理:&nbsp;&nbsp;</label>
<select [(ngModel)]="filterItems.FHAG" class="form-control">
<select [(ngModel)]="filterItems.FHAG" (ngModelChange)="selectChange()" class="form-control">
<option value=""></option>
<option value="GH">国航代理</option>
<option value="CH">川航代理</option>
<option *ngFor="let anget of flightAgents" [value]="anget.oGId">{{anget.flightAgentName}}</option>
</select>
</div>
<div class="input-container mr-4">
<label for="">旅客代理:&nbsp;&nbsp;</label>
<select [(ngModel)]="filterItems.PHAG" class="form-control">
<select [(ngModel)]="filterItems.PHAG" (ngModelChange)="selectChange()" class="form-control">
<option value=""></option>
<option value="GH">国航代理</option>
<option value="CH">川航代理</option>
<option *ngFor="let anget of flightAgents" [value]="anget.oGId">{{anget.flightAgentName}}</option>
</select>
</div>
<div class="input-container mr-4">
<label for="">维护代理:&nbsp;&nbsp;</label>
<select [(ngModel)]="filterItems.MHAG" class="form-control">
<select [(ngModel)]="filterItems.MHAG" (ngModelChange)="selectChange()" class="form-control">
<option value=""></option>
<option value="GH">国航代理</option>
<option value="CH">川航代理</option>
<option *ngFor="let anget of flightAgents" [value]="anget.oGId">{{anget.flightAgentName}}</option>
</select>
</div>
</div>
@@ -143,14 +140,14 @@
[ngClass]="{'selected':row_state['renderFlight']['FLNO']===airline_row['renderFlight']['FLNO']}">
<td>{{i+1}}</td>
<td>
<img class="mr-2" *ngIf="getVipNotes(airline_row)" src="/assets/images/important-notes/vip.png" alt="">
<img class="mr-2" *ngIf="getOutplanNotes(airline_row)" src="/assets/images/important-notes/out_plan.png" alt="">
<img class="mr-2" *ngIf="getAlternateNotes(airline_row)" src="/assets/images/important-notes/alternate.png" alt="">
<img class="mr-2" *ngIf="getDelay30Notes(airline_row)" src="/assets/images/important-notes/delay_30.png" alt="">
<img class="mr-2" *ngIf="getDelayNotes(airline_row)" src="/assets/images/important-notes/delay.png" alt="">
<img class="mr-2" *ngIf="getReturnNotes(airline_row)" src="/assets/images/important-notes/return.png" alt="">
<img class="mr-2" *ngIf="getCancleNotes(airline_row)" src="/assets/images/important-notes/cancle.png" alt="">
<img class="mr-2" *ngIf="getStopoverNotes(airline_row)" src="/assets/images/important-notes/stopover.png" alt="">
<img class="mr-2" *ngIf="getVipNotes(airline_row)" src="/adminweb/assets/images/important-notes/vip.png" alt="">
<img class="mr-2" *ngIf="getOutplanNotes(airline_row)" src="/adminweb/assets/images/important-notes/out_plan.png" alt="">
<img class="mr-2" *ngIf="getAlternateNotes(airline_row)" src="/adminweb/assets/images/important-notes/alternate.png" alt="">
<img class="mr-2" *ngIf="getDelay30Notes(airline_row)" src="/adminweb/assets/images/important-notes/delay_30.png" 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>
+33 -15
View File
@@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { ChangeDetectorRef } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { ToastService } from '../../components/toast/toast.service';
import { ToastConfig, ToastType } from '../../components/toast/toast-model';
@@ -16,7 +17,9 @@ import { AlertMessageHandle } from '../../utils/alert-message-handle';
import dateFormatter from '../../utils/date-formatter';
import { filter } from 'rxjs/operators';
import * as $ from 'jquery';
@Component({
selector: 'app-main',
templateUrl: './main.component.html',
@@ -24,6 +27,7 @@ import * as $ from 'jquery';
})
export class MainComponent implements OnInit {
constructor(
private router: Router,
private basicDataService: BasicDataService,
private operateSpinServiceService: OperateSpinServiceService,
private httpCilent: HttpClientService,
@@ -33,6 +37,30 @@ export class MainComponent implements OnInit {
) {
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 => {
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.changeDetectorRef.detectChanges();
}
)
}
}
)
}
public orderHandle = new DynamicFlightOrder();
public dataHandle = new FlightsDataHandle();
@@ -48,6 +76,7 @@ export class MainComponent implements OnInit {
public dynamicAlertArray: Array<any> = [];
//各项基础数据
public flightAgents: Array<any>;
public flightTypes: Array<any>;
public terminals: Array<any>;
public flightStatus: Array<any>;
@@ -104,21 +133,6 @@ export class MainComponent implements OnInit {
}
)
/* 获取用户设置 */
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.httpCilent.get('/msgexchangeapi/all/flights').subscribe(
data => {
@@ -132,6 +146,7 @@ export class MainComponent implements OnInit {
});
//从基础数据服务中拿出部分基础数据
this.flightAgents = this.basicDataService.flightAgents;
this.flightTypes = this.basicDataService.flightTypes;
this.terminals = this.basicDataService.terminal;
this.flightStatus = this.basicDataService.flightStatus;
@@ -147,6 +162,9 @@ export class MainComponent implements OnInit {
this.combined_data = combined_data;
this.doSequence(this.combined_data);
} else {
this.basicDataService.flightAgents_subject.subscribe(
val => this.flightAgents = val
)
this.basicDataService.flightTypes_subject.subscribe(
val => this.flightTypes = val
)
+2 -2
View File
@@ -21,12 +21,12 @@ const pagesRoutes: Routes = [
{
path:'season',
loadChildren:'./seasonal-plan/seasonal-plan.module#SeasonalPlanModule',
data: { preload: true, reuse: false }
data: { preload: true, reuse: true }
},
{
path:'history',
loadChildren:'./historical-data/historical-data.module#HistoricalDataModule',
data: { preload: true, reuse: false }
data: { preload: true, reuse: true }
},
{
path:'basic',
+7 -5
View File
@@ -13,14 +13,14 @@
<ul class="navbar-nav ml-auto mr-4">
<li class="nav-item mr-3">
<a class="nav-link">
<label>用户:</label>
<span>admin</span>
<label>用户</label>
<span>{{user_name}}</span>
</a>
</li>
<li class="nav-item mr-3">
<a class="nav-link">
<label>角色</label>
<span>系统管理员</span>
<label>用户</label>
<span>{{role_type}}</span>
</a>
</li>
<!-- <li class="nav-item dropdown mr-2">
@@ -84,7 +84,9 @@
</div>
<div class="right-wrapper" [ngClass]="{'right-wrapper-c': menuClose,'right-wrapper-o': !menuClose}">
<router-outlet></router-outlet>
<div *ngIf="isSpinning" class="page-loading"></div>
<div *ngIf="isSpinning" class="page-loading">
<i nz-icon [type]="'loading'"></i>
</div>
</div>
</div>
</div>
+4 -3
View File
@@ -17,6 +17,8 @@ import { filter } from 'rxjs/operators';
styleUrls: ['./pages.component.scss']
})
export class PagesComponent implements OnInit {
public user_name: string;
public role_type: string;
public menuClose: boolean = false;
public isSpinning: any = false;
menuData = [
@@ -203,6 +205,8 @@ export class PagesComponent implements OnInit {
}
ngOnInit() {
this.user_name = JSON.parse(sessionStorage.getItem('userInfo')).login_name;
this.role_type = JSON.parse(sessionStorage.getItem('userInfo')).real_name;
let activeRoute = this.router.url;
this.selectActiveMenu(this.menuData, activeRoute);
@@ -211,9 +215,6 @@ export class PagesComponent implements OnInit {
).subscribe((event) => {
this.selectActiveMenu(this.menuData, event['urlAfterRedirects'])
});
}
toggleMenu() {
@@ -7,7 +7,7 @@ const seasonalPlanRoutes: Routes = [
{
path: '',
component: SeasonalPlanComponent,
data: { preload: true, reuse: false }
data: { preload: true, reuse: true }
}
]
+12 -9
View File
@@ -12,28 +12,27 @@ interface ICachedRoute {
@Injectable()
export class AppReuseStrategy implements RouteReuseStrategy {
private routeCache = new Map<string, ICachedRoute>();
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
return future.routeConfig === curr.routeConfig;
}
/** 是否需要复用 */
shouldDetach(route: ActivatedRouteSnapshot): boolean {
const data = this.getRouteData(route);
return data && data.reuse;
}
/** 存储路由快照 */
store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
const url = this.getFullRouteUrl(route);
const data = this.getRouteData(route);
this.routeCache.set(url, { handle, data });
this.addRedirectsRecursively(route);
}
/** 是否允许还原 在缓存中有的都认为允许还原 */
shouldAttach(route: ActivatedRouteSnapshot): boolean {
const url = this.getFullRouteUrl(route);
if (url === 'login') {
this.routeCache = new Map<string, ICachedRoute>();
}
return this.routeCache.has(url);
}
/** 从缓存中获取快照 */
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
const url = this.getFullRouteUrl(route);
const data = this.getRouteData(route);
@@ -41,6 +40,10 @@ export class AppReuseStrategy implements RouteReuseStrategy {
? this.routeCache.get(url).handle
: null;
}
/** 同一路由时使用快照 */
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
return future.routeConfig === curr.routeConfig;
}
private addRedirectsRecursively(route: ActivatedRouteSnapshot): void {
const config = route.routeConfig;
@@ -63,7 +66,7 @@ export class AppReuseStrategy implements RouteReuseStrategy {
}
private getFullRouteUrl(route: ActivatedRouteSnapshot): string {
return this.getFullRouteUrlPaths(route).filter(Boolean).join('/');
return this.getFullRouteUrlPaths(route).filter(Boolean).join('/').replace('/', '_');
}
private getFullRouteUrlPaths(route: ActivatedRouteSnapshot): string[] {
+7
View File
@@ -4,6 +4,8 @@ import { Subject, forkJoin, zip } from 'rxjs'
@Injectable()
export class BasicDataService {
public flightAgents:Array<any>;
public flightAgents_subject = new Subject<any>();
public flightTypes:Array<any>;
public flightTypes_subject = new Subject<any>();
public flightStatus:Array<any>;
@@ -48,6 +50,7 @@ export class BasicDataService {
) { }
loadBasicData() {
let flightAgentsHttp = this.httpClient.get('/adminapi/basicdata/sysFlightAgents');
let flightTypesHttp = this.httpClient.get('/adminapi/basicdata/sysFlightTypes');
let flightStatusHttp = this.httpClient.get('/adminapi/basicdata/sysFlightStatus');
let checkinGroupHttp = this.httpClient.get('/adminapi/basicdata/checkinGroups');
@@ -68,6 +71,7 @@ export class BasicDataService {
let airportGroupsHttp = this.httpClient.get('/adminapi/basicdata/sysAirportGroups');
let airlineGroupHttp = this.httpClient.get('/adminapi/basicdata/sysAirlineGroup');
zip(
flightAgentsHttp,
flightTypesHttp,
flightStatusHttp,
checkinGroupHttp,
@@ -89,6 +93,7 @@ export class BasicDataService {
airlineGroupHttp
).subscribe(
([
flightAgentsRes,
flightTypesRes,
flightStatusRes,
checkinGroupRes,
@@ -109,6 +114,8 @@ export class BasicDataService {
airportGroupRes,
airlineGroupRes
]) => {
this.flightAgents = flightAgentsRes.body;
this.flightAgents_subject.next(flightAgentsRes.body);
this.flightTypes = flightTypesRes.body;
this.flightTypes_subject.next(flightTypesRes.body)
this.flightStatus = flightStatusRes.body;