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

添加路由复用策略

Browse Source
This commit is contained in:
zhouyuejun
2018-12-03 11:28:24 +08:00
parent 2871120616
commit ba0683dffe
21 changed files with 289 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/app-routing.module.ts
+6 -5
View File
@@ -6,7 +6,7 @@ import { RouterModule, Routes } from '@angular/router';
import { SelectivePreloadingStrategy } from './preloading-strategy';
/* 引入路由权限控制 */
import {LoginAuthService} from './services/login-auth.service'
import { LoginAuthService } from './services/login-auth.service'
/* 定义路由 */
@@ -15,18 +15,19 @@ const appRoutes: Routes = [
{
path: 'login',
loadChildren: './login/login.module#LoginModule',
canActivate:[LoginAuthService],
canActivate: [LoginAuthService],
data: { preload: false, reuse: false }
},
{
path: 'register',
loadChildren: './register/register.module#RegisterModule',
// data: { preload: false }
data: { preload: false, reuse: false }
},
{
path: 'app',
loadChildren: './pages/pages.module#PagesModule',
canActivate:[LoginAuthService],
data: { preload: false }
canActivate: [LoginAuthService],
data: { preload: false, reuse: true }
}
]
src/app/app.module.ts
+7 -2
View File
@@ -1,5 +1,6 @@
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouteReuseStrategy } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'
import { HttpClientModule } from '@angular/common/http'
@@ -25,6 +26,9 @@ import { LoginAuthService } from './services/login-auth.service';
/* websocket */
import { WebsocketService } from './services/websocket.service';
/* 路由缓存策略 */
import { AppReuseStrategy } from './router-reuse-strategy';
@NgModule({
declarations: [
AppComponent
@@ -43,7 +47,8 @@ import { WebsocketService } from './services/websocket.service';
LoginAuthService,
HttpService,
HttpClientService,
WebsocketService
WebsocketService,
{ provide: RouteReuseStrategy, useClass: AppReuseStrategy }
],
bootstrap: [AppComponent]
})
src/app/login/login-routing.module.ts
+2 -1
View File
@@ -6,7 +6,8 @@ import { LoginComponent } from './login.component'
const loginRoutes: Routes = [
{
path: '',
component: LoginComponent
component: LoginComponent,
data: { preload: false, reuse: false }
}
]
src/app/pages/basic-data/basic-data-routing.module.ts
+30 -12
View File
@@ -21,57 +21,75 @@ const basicDataRoutes: Routes = [
path: '',
component: BasicDataComponent,
children:[
{
path:'',
redirectTo:'chekingroup',
pathMatch:'full'
},
{
path:'checkingroup',
component:CheckinGroupComponent
component:CheckinGroupComponent,
data: { preload: true, reuse: false }
},
{
path:'gate',
component:GateComponent
component:GateComponent,
data: { preload: true, reuse: false }
},
{
path:'terminal',
component:TerminalComponent,
data: { preload: true, reuse: false }
},
{
path:'chut',
component:ChutComponent
component:ChutComponent,
data: { preload: true, reuse: false }
},
{
path:'stand',
component:StandComponent
component:StandComponent,
data: { preload: true, reuse: false }
},
{
path:'carousel',
component:CarouselComponent
component:CarouselComponent,
data: { preload: true, reuse: false }
},
{
path:'checkindesk',
component:CheckinDeskComponent
component:CheckinDeskComponent,
data: { preload: true, reuse: false }
},
{
path:'airport',
component:AirportComponent
component:AirportComponent,
data: { preload: true, reuse: false }
},
{
path:'city',
component:CityComponent
component:CityComponent,
data: { preload: true, reuse: false }
},
{
path:'aircrafttype',
component:AircraftTypeComponent
component:AircraftTypeComponent,
data: { preload: true, reuse: false }
},
{
path:'aircraft',
component:AircraftComponent
component:AircraftComponent,
data: { preload: true, reuse: false }
},
{
path:'terminalarea',
component:TerminalAreaComponent
component:TerminalAreaComponent,
data: { preload: true, reuse: false }
},
{
path:'airline',
component:AirlineComponent
component:AirlineComponent,
data: { preload: true, reuse: false }
}
]
}
src/app/pages/historical-data/historical-data-routing.module.ts
+2 -1
View File
@@ -6,7 +6,8 @@ import { HistoricalDataComponent } from './historical-data.component';
const historicalDataRoutes: Routes = [
{
path: '',
component: HistoricalDataComponent
component: HistoricalDataComponent,
data: { preload: true, reuse: false }
}
]
src/app/pages/main/main-routing.module.ts
+2 -1
View File
@@ -5,7 +5,8 @@ import { MainComponent } from './main.component'
const mainRoutes: Routes = [
{
path: '',
component: MainComponent
component: MainComponent,
data: { preload: true, reuse: true }
}
]
src/app/pages/main/main.component.html
+2 -10
View File
@@ -18,10 +18,7 @@
<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">
<!-- <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>
@@ -53,12 +50,6 @@
<option value="">VIP</option>
</select>
</div>
<!-- <div class="input-container mr-4">
<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">
@@ -151,7 +142,8 @@
[ngClass]="{'selected':row_state['renderFlight']['FLNO']===airline_row['renderFlight']['FLNO']}">
<td>{{i+1}}</td>
<td>{{isLast}}</td>
<td *ngFor="let airline_col of col_lists" [ngClass]="getPosition(airline_col.COL_CODE,airline_row)" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE,airline_row)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
<td *ngFor="let airline_col of col_lists" [ngClass]="getPosition(airline_col.COL_CODE,airline_row)"
[ngStyle]="{'background-color':getColor(airline_col.COL_CODE,airline_row)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
</tr>
</tbody>
</table>
src/app/pages/main/main.component.scss
+13
View File
@@ -1,4 +1,5 @@
.main-page {
position: relative;
width: 100%;
height: 100%;
overflow-y: auto;
@@ -122,6 +123,18 @@
}
}
.page-loading{
width: 100%;
height: 100%;
background-image: url('../../../assets/images/page-loading.gif');
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: 0;
left: 0;
z-index: 999;
}
// @media screen and (min-width: 1200px){
// .line-operator-right{
// text-align: left;
src/app/pages/main/main.component.ts
+87 -88
View File
@@ -46,13 +46,14 @@ export class MainComponent implements OnInit {
constructor(
private basicDataService: BasicDataService,
// private operateSpinServiceService:OperateSpinServiceService,
private operateSpinServiceService: OperateSpinServiceService,
private httpCilent: HttpClientService,
private changeDetectorRef: ChangeDetectorRef,
private toastService: ToastService,
private websocketService: WebsocketService
) {
console.log(new Date().getTime())
this.operateSpinServiceService.showSpin();
}
public tabClose: boolean = true;
public isSpinning: boolean = true;
@@ -108,12 +109,13 @@ export class MainComponent implements OnInit {
}
ngOnInit() {
this.websocketService.dynamicsMessage().subscribe(
event => {
console.log(event);
}
)
// this.getBasicData()
this.changeDetectorRef.detach();
/* 获取显示列 */
this.httpCilent.get('/assets/mock-data/airline-col_code.json').subscribe(
@@ -397,17 +399,13 @@ export class MainComponent implements OnInit {
sequenceData.forEach(element => {
element['ORDER'] = this.sequence(element);
})
sequenceData.sort(function (a, b) {
return (a['ORDER'] - b['ORDER']);
})
this.render_data = sequenceData;
this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
console.log(new Date().getTime() + '---');
this.changeDetectorRef.detectChanges();
console.log(new Date().getTime() + '---');
this.operateSpinServiceService.hideSpin()
}
/**
@@ -440,9 +438,7 @@ export class MainComponent implements OnInit {
*/
refresh() {
this.render_data.reverse();
console.log('=====');
this.changeDetectorRef.detectChanges();
console.log('-----');
}
@@ -482,92 +478,94 @@ export class MainComponent implements OnInit {
* 下拉框选择筛选
*/
selectChange() {
// this.operateSpinServiceService.showSpin()
let filter_data = [];
let filterItems = this.filterItems;
this.combined_data.forEach(item => {
filter_data.push(Object.assign({}, item));
})
//下拉框筛选
filter_data = filter_data.filter(item => {
if (this.isArriFlight(item)) {
let is_satis = true;
for (const key in filterItems) {
if (filterItems.hasOwnProperty(key) && filterItems[key]) {
if (item['preFlight'][key] === filterItems[key]) {
is_satis = true;
continue;
} else {
is_satis = false;
break;
this.operateSpinServiceService.showSpin();
setTimeout(() => {
let filter_data = [];
let filterItems = this.filterItems;
this.combined_data.forEach(item => {
filter_data.push(Object.assign({}, item));
})
//下拉框筛选
filter_data = filter_data.filter(item => {
if (this.isArriFlight(item)) {
let is_satis = true;
for (const key in filterItems) {
if (filterItems.hasOwnProperty(key) && filterItems[key]) {
if (item['preFlight'][key] === filterItems[key]) {
is_satis = true;
continue;
} else {
is_satis = false;
break;
}
}
}
}
return is_satis;
} else if (this.isDeptFlight(item)) {
let is_satis = true;
for (const key in filterItems) {
if (filterItems.hasOwnProperty(key) && filterItems[key]) {
if (item['reaFlight'][key] === filterItems[key]) {
is_satis = true;
continue;
} else {
is_satis = false;
break;
return is_satis;
} else if (this.isDeptFlight(item)) {
let is_satis = true;
for (const key in filterItems) {
if (filterItems.hasOwnProperty(key) && filterItems[key]) {
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 (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 (item['reaFlight'][key] === filterItems[key]) {
rea_satis = true;
continue;
} else {
rea_satis = false;
break;
}
}
}
if (pre_satis && !rea_satis) {
item['renderFlight'] = item['renderPreFlight'];
return pre_satis;
} else if (!pre_satis && rea_satis) {
item['renderFlight'] = item['renderReaFlight'];
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 (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 (item['reaFlight'][key] === filterItems[key]) {
rea_satis = true;
continue;
} else {
rea_satis = false;
break;
}
}
}
if (pre_satis && !rea_satis) {
item['renderFlight'] = item['renderPreFlight'];
return pre_satis;
} else if (!pre_satis && rea_satis) {
item['renderFlight'] = item['renderReaFlight'];
return rea_satis;
} else if (pre_satis && rea_satis) {
return pre_satis && rea_satis;
} else {
return false;
}
}
})
if (this.FLT_POS === 1) {
this.inputFilter(filter_data);
} else {
this.render_data = filter_data;
this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
this.changeDetectorRef.detectChanges();
}
})
if (this.FLT_POS === 1) {
this.inputFilter(filter_data);
} else {
this.render_data = filter_data;
this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
this.changeDetectorRef.detectChanges();
}
}, 10)
}
/**
@@ -625,6 +623,7 @@ 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();
this.operateSpinServiceService.hideSpin()
}
/**
src/app/pages/operate-spin-service.service.ts
+3 -1
View File
@@ -16,6 +16,8 @@ export class OperateSpinServiceService {
public hideSpin() {
this.isSpinning = false;
this.spinSubject.next(this.isSpinning);
setTimeout(() => {
this.spinSubject.next(this.isSpinning);
}, 500)
}
}
src/app/pages/pages-routing.module.ts
+10 -5
View File
@@ -15,23 +15,28 @@ const pagesRoutes: Routes = [
},
{
path:'main',
loadChildren:'./main/main.module#MainModule'
loadChildren:'./main/main.module#MainModule',
data: { preload: true, reuse: true }
},
{
path:'season',
loadChildren:'./seasonal-plan/seasonal-plan.module#SeasonalPlanModule'
loadChildren:'./seasonal-plan/seasonal-plan.module#SeasonalPlanModule',
data: { preload: true, reuse: false }
},
{
path:'history',
loadChildren:'./historical-data/historical-data.module#HistoricalDataModule'
loadChildren:'./historical-data/historical-data.module#HistoricalDataModule',
data: { preload: true, reuse: false }
},
{
path:'basic',
loadChildren:'./basic-data/basic-data.module#BasicDataModule'
loadChildren:'./basic-data/basic-data.module#BasicDataModule',
data: { preload: true, reuse: false }
},
{
path:'system',
loadChildren:'./system-management/system-management.module#SystemManagementModule'
loadChildren:'./system-management/system-management.module#SystemManagementModule',
data: { preload: true, reuse: false }
}
]
}
src/app/pages/pages.component.html
+2 -4
View File
@@ -83,10 +83,8 @@
</div>
</div>
<div class="right-wrapper" [ngClass]="{'right-wrapper-c': menuClose,'right-wrapper-o': !menuClose}">
<!-- <nz-spin [nzSpinning]="isSpinning" [nzDelay]="500"> -->
<router-outlet></router-outlet>
<!-- </nz-spin> -->
<router-outlet></router-outlet>
<div *ngIf="isSpinning" class="page-loading"></div>
</div>
</div>
</div>
src/app/pages/pages.component.scss
+14
View File
@@ -110,6 +110,7 @@
}
}
.right-wrapper {
position: relative;
height: calc(100% - 66px);
margin-left: 235px;
}
@@ -128,3 +129,16 @@
}
}
}
.page-loading{
width: 100%;
height: 100%;
// background-image: url('../../assets/images/page-loading.gif');
background-color: rgba(0, 0, 0, 0.5);
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: 0;
left: 0;
z-index: 999;
}
src/app/pages/pages.component.ts
+5 -5
View File
@@ -18,7 +18,7 @@ import { filter } from 'rxjs/operators';
})
export class PagesComponent implements OnInit {
public menuClose: boolean = false;
public isSpinning: any = false;
public isSpinning: any = true;
menuData = [
{
"name": "航班动态",
@@ -192,7 +192,7 @@ export class PagesComponent implements OnInit {
constructor(
private router: Router,
private basicDataService: BasicDataService,
// private operateSpinService: OperateSpinServiceService,
private operateSpinService: OperateSpinServiceService,
private httpClient: HttpClientService,
private toastService: ToastService,
) {
@@ -209,9 +209,9 @@ export class PagesComponent implements OnInit {
this.selectActiveMenu(this.menuData, event['urlAfterRedirects'])
});
// this.operateSpinService.spinSubject.subscribe(
// val => this.isSpinning = val
// )
this.operateSpinService.spinSubject.subscribe(
val => this.isSpinning = val
)
}
src/app/pages/pages.module.ts
+1 -1
View File
@@ -20,6 +20,6 @@ import { OperateSpinServiceService } from './operate-spin-service.service';
PagesRoutingModule,
],
declarations: [PagesComponent],
providers: [BasicDataService]
providers: [BasicDataService, OperateSpinServiceService]
})
export class PagesModule { }
src/app/pages/seasonal-plan/seasonal-plan-routing.module.ts
+2 -1
View File
@@ -6,7 +6,8 @@ import { SeasonalPlanComponent } from './seasonal-plan.component';
const seasonalPlanRoutes: Routes = [
{
path: '',
component: SeasonalPlanComponent
component: SeasonalPlanComponent,
data: { preload: true, reuse: false }
}
]
src/app/pages/system-management/system-management-routing.module.ts
+13 -6
View File
@@ -22,31 +22,38 @@ const systemManagementRoutes: Routes = [
},
{
path: 'settings',
component: PersonalSettingsComponent
component: PersonalSettingsComponent,
data: { preload: true, reuse: false }
},
{
path: 'roles',
component: RoleManagementComponent
component: RoleManagementComponent,
data: { preload: true, reuse: false }
},
{
path: 'users',
component: UserManagementComponent,
data: { preload: true, reuse: false }
},
{
path: 'departments',
component: DepartmentManagementComponent
component: DepartmentManagementComponent,
data: { preload: true, reuse: false }
},
{
path: 'logs',
component: OperationLogsComponent
component: OperationLogsComponent,
data: { preload: true, reuse: false }
},
{
path: 'synchronization',
component: DataSynchronizeComponent
component: DataSynchronizeComponent,
data: { preload: true, reuse: false }
},
{
path: 'users/modify',
component: UserManagementModifyComponent
component: UserManagementModifyComponent,
data: { preload: true, reuse: false }
}
]
}
src/app/register/register-routing.module.ts
+2 -1
View File
@@ -6,7 +6,8 @@ import { RegisterComponent } from './register.component'
const registerRoutes: Routes = [
{
path: '',
component: RegisterComponent
component: RegisterComponent,
data: { preload: false, reuse: false }
}
]
src/app/router-reuse-strategy.ts
+85
View File
@@ -0,0 +1,85 @@
import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router';
import { Injectable } from '@angular/core';
interface IRouteConfigData {
reuse: boolean;
}
interface ICachedRoute {
handle: DetachedRouteHandle;
data: IRouteConfigData;
}
@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);
return this.routeCache.has(url);
}
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
console.log(route)
const url = this.getFullRouteUrl(route);
const data = this.getRouteData(route);
console.log(this.routeCache.get(url));
return data && data.reuse && this.routeCache.has(url)
? this.routeCache.get(url).handle
: null;
}
private addRedirectsRecursively(route: ActivatedRouteSnapshot): void {
const config = route.routeConfig;
if (config) {
if (!config.loadChildren) {
const routeFirstChild = route.firstChild;
const routeFirstChildUrl = routeFirstChild
? this.getRouteUrlPaths(routeFirstChild).join('/')
: '';
const childConfigs = config.children;
if (childConfigs) {
const childConfigWithRedirect = childConfigs.find(c => c.path === '' && !!c.redirectTo);
if (childConfigWithRedirect) {
childConfigWithRedirect.redirectTo = routeFirstChildUrl;
}
}
}
route.children.forEach(childRoute => this.addRedirectsRecursively(childRoute));
}
}
private getFullRouteUrl(route: ActivatedRouteSnapshot): string {
return this.getFullRouteUrlPaths(route).filter(Boolean).join('/');
}
private getFullRouteUrlPaths(route: ActivatedRouteSnapshot): string[] {
const paths = this.getRouteUrlPaths(route);
return route.parent
? [...this.getFullRouteUrlPaths(route.parent), ...paths]
: paths;
}
private getRouteUrlPaths(route: ActivatedRouteSnapshot): string[] {
return route.url.map(urlSegment => urlSegment.path);
}
private getRouteData(route: ActivatedRouteSnapshot): IRouteConfigData {
return route.routeConfig && route.routeConfig.data as IRouteConfigData;
}
}
src/app/services/websocket.service.ts
+1
View File
@@ -28,6 +28,7 @@ export class WebsocketService {
ob.error("连接失败")
}
this.websocket.onclose = () => {
console.log('websocket was complete')
ob.complete();
}
})
src/assets/images/page-loading.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB