shaojiahao
/
Edge-host-maintenance
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[新增]路由缓存

非煤矿业企业安全风险监测预警系统
邵佳豪 2 years ago
parent
45c86722e8
commit
a2c7d80002
4 changed files with 212 additions and 165 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 30
      src/app/CustomReuseStrategy.ts
  2. 25
      src/app/app.module.ts
  3. 214
      src/app/system-management/analysis-of-the-host/analysis-of-the-host.component.ts
  4. 2
      src/app/system-management/organization/organization.component.ts

30
src/app/CustomReuseStrategy.ts
Unescape View File

@ -1,7 +1,10 @@
import { RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router';
import {
RouteReuseStrategy,
ActivatedRouteSnapshot,
DetachedRouteHandle,
} from '@angular/router';
export class CustomReuseStrategy implements RouteReuseStrategy {
public static handlers: { [key: string]: DetachedRouteHandle } = {};
/** 删除缓存路由快照的方法 */
@ -12,6 +15,18 @@ export class CustomReuseStrategy implements RouteReuseStrategy {
}
}
/** 进入路由触发，判断是否同一路由 */
shouldReuseRoute(
future: ActivatedRouteSnapshot,
curr: ActivatedRouteSnapshot
): boolean {
// console.debug('shouldReuseRoute======>', future, curr);
return (
future.routeConfig === curr.routeConfig &&
JSON.stringify(future.params) === JSON.stringify(curr.params)
);
}
/** 表示对所有路由允许复用 如果你有路由不想利用可以在这加一些业务逻辑判断 */
shouldDetach(route: ActivatedRouteSnapshot): boolean {
console.log('shouldDetach======>', route);
@ -21,7 +36,7 @@ export class CustomReuseStrategy implements RouteReuseStrategy {
/** 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象 */
store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
console.log('store======>', route, handle);
if(route.routeConfig.path == 'host'){
if (route.routeConfig.path == 'host') {
CustomReuseStrategy.handlers[this.getRouteUrl(route)] = handle;
}
}
@ -38,21 +53,12 @@ export class CustomReuseStrategy implements RouteReuseStrategy {
if (!CustomReuseStrategy.handlers[this.getRouteUrl(route)]) {
return null;
}
return CustomReuseStrategy.handlers[this.getRouteUrl(route)];
}
/** 进入路由触发，判断是否同一路由 */
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
// console.debug('shouldReuseRoute======>', future, curr);
return future.routeConfig === curr.routeConfig &&
JSON.stringify(future.params) === JSON.stringify(curr.params);
}
/** 使用route的path作为快照的key */
getRouteUrl(route: ActivatedRouteSnapshot) {
const path = route['_routerState'].url.replace(/\//g, '_');
return path;
}
}

25
src/app/app.module.ts
Unescape View File

@ -6,8 +6,8 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { PagesModule } from './pages/pages.module';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { httpInterceptorProviders } from './http-interceptors/index'
import { CacheTokenService } from './service/cache-token.service'
import { httpInterceptorProviders } from './http-interceptors/index';
import { CacheTokenService } from './service/cache-token.service';
import { NzNotificationModule } from 'ng-zorro-antd/notification';
import { NzMessageModule } from 'ng-zorro-antd/message';
import { TreeService } from './service/tree.service';
@ -15,9 +15,7 @@ import { RouteReuseStrategy } from '@angular/router';
import { CustomReuseStrategy } from './CustomReuseStrategy';
import { ConfigFormDataService } from './service/configFormData.service';
@NgModule({
declarations: [
AppComponent
],
declarations: [AppComponent],
imports: [
BrowserModule,
AppRoutingModule,
@ -26,9 +24,18 @@ import { ConfigFormDataService } from './service/configFormData.service';
FormsModule,
HttpClientModule,
NzNotificationModule,
NzMessageModule
NzMessageModule,
],
providers: [
httpInterceptorProviders,
CacheTokenService,
TreeService,
ConfigFormDataService,
{
provide: RouteReuseStrategy,
useClass: CustomReuseStrategy,
},
],
providers: [httpInterceptorProviders, CacheTokenService, TreeService, ConfigFormDataService],
bootstrap: [AppComponent]
bootstrap: [AppComponent],
})
export class AppModule { }
export class AppModule {}

214
src/app/system-management/analysis-of-the-host/analysis-of-the-host.component.ts
Unescape View File

@ -1,70 +1,100 @@
import { HttpClient } from '@angular/common/http';
import { Component, OnInit, AfterViewInit, ViewChild, ViewContainerRef } from '@angular/core';
import {
Component,
OnInit,
AfterViewInit,
ViewChild,
ViewContainerRef,
} from '@angular/core';
import { TreeService } from 'src/app/service/tree.service';
import { NzFormatEmitEvent, NzTreeComponent, NzTreeNodeOptions } from 'ng-zorro-antd/tree';
import {
NzFormatEmitEvent,
NzTreeComponent,
NzTreeNodeOptions,
} from 'ng-zorro-antd/tree';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NzModalService } from 'ng-zorro-antd/modal';
import { NzMessageService } from 'ng-zorro-antd/message';
import { AddhostComponent } from './addhost/addhost.component';
import { EdithostComponent } from './edithost/edithost.component';
import { Router } from '@angular/router';
import { NavigationEnd, Router } from '@angular/router';
import { filter } from 'rxjs';
@Component({
selector: 'app-analysis-of-the-host',
templateUrl: './analysis-of-the-host.component.html',
styleUrls: ['./analysis-of-the-host.component.scss']
styleUrls: ['./analysis-of-the-host.component.scss'],
})
export class AnalysisOfTheHostComponent implements OnInit {
constructor(
private router: Router,
private fb: FormBuilder,
private http: HttpClient,
private toTree: TreeService,
private modal: NzModalService,
private message: NzMessageService,
private viewContainerRef: ViewContainerRef
) {
router.events
.pipe(filter((e) => e instanceof NavigationEnd))
.subscribe((e) => {
if(this.selectedOilStation && this.selectedOilStation.id){
this.getHost();
}
constructor(private router: Router, private fb: FormBuilder, private http: HttpClient, private toTree: TreeService, private modal: NzModalService, private message: NzMessageService, private viewContainerRef: ViewContainerRef) { }
});
}
ngOnInit(): void {
this.getAllOrganization()
this.getAllOrganization();
}
//获取所有组织机构
searchValue = '';
nzExpandAll = false;
totalCount: string
totalCount: string;
getAllOrganization() {
let params = {
ContainsChildren: true,
PageSize: 9999
}
this.http.get('/api/Organizations', {
params: params
}).subscribe((data: any) => {
this.totalCount = data.totalCount
console.log(data.items)
data.items.forEach(element => {
element.key = element.id
element.title = element.name
element.selectable = false
PageSize: 9999,
};
this.http
.get('/api/Organizations', {
params: params,
})
.subscribe((data: any) => {
this.totalCount = data.totalCount;
console.log(data.items);
data.items.forEach((element) => {
element.key = element.id;
element.title = element.name;
element.selectable = false;
if (element.isGasStation) {
element.isLeaf = true
element.isLeaf = true;
}
});
this.nodes = [...this.toTree.toTree(data.items)]
this.defaultExpandedKeys = [this.nodes[0].id]
this.defaultExpandedKeys = [...this.defaultExpandedKeys]
})
this.nodes = [...this.toTree.toTree(data.items)];
this.defaultExpandedKeys = [this.nodes[0].id];
this.defaultExpandedKeys = [...this.defaultExpandedKeys];
});
}
@ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent;
@ViewChild('nzTreeComponent', { static: false })
nzTreeComponent!: NzTreeComponent;
defaultExpandedKeys = [];
nodes: any[] = []
nzSelectedKeys: any[] = []
selectedOilStation: any
nodes: any[] = [];
nzSelectedKeys: any[] = [];
selectedOilStation: any;
nzClick(event: NzFormatEmitEvent): void {
if (event.node.origin['isGasStation']) {//如果点击的是加油站才生效
this.nzSelectedKeys[0] = event.node.origin.id
this.nzSelectedKeys = [...this.nzSelectedKeys]
this.selectedOilStation = event.node.origin
console.log(this.selectedOilStation)
this.getHost()
if (event.node.origin['isGasStation']) {
//如果点击的是加油站才生效
this.nzSelectedKeys[0] = event.node.origin.id;
this.nzSelectedKeys = [...this.nzSelectedKeys];
this.selectedOilStation = event.node.origin;
console.log(this.selectedOilStation);
this.getHost();
} else {
this.message.info('只有加油站才可以增加主机');
}
@ -72,30 +102,29 @@ export class AnalysisOfTheHostComponent implements OnInit {
//获得加油站的主机
listOfData: any[] = [];
isLoading = false
isLoading = false;
getHost() {
this.isLoading = true
this.http.get('/api/EdgeDevices', {
this.isLoading = true;
this.http
.get('/api/EdgeDevices', {
params: {
ContainsChildren: true,
OrganizationId: this.selectedOilStation.id,
PageSize: 999
}
}).subscribe((data: any) => {
console.log('主机列表', data.items)
this.isLoading = false
this.listOfData = data.items
PageSize: 999,
},
})
.subscribe((data: any) => {
console.log('主机列表', data.items);
this.isLoading = false;
this.listOfData = data.items;
});
}
ngAfterViewInit(): void {
}
ngAfterViewInit(): void {}
//新增边缘盒子
addHost() {
console.log(this.selectedOilStation)
console.log(this.selectedOilStation);
const modal = this.modal.create({
nzTitle: '新增边缘盒子',
nzContent: AddhostComponent,
@ -104,92 +133,97 @@ export class AnalysisOfTheHostComponent implements OnInit {
nzComponentParams: {},
nzOnOk: async () => {
if (instance.validateForm.valid) {
await new Promise(resolve => {
console.log('表单信息', instance.validateForm)
await new Promise((resolve) => {
console.log('表单信息', instance.validateForm);
let body = {
hostIPAddress: instance.validateForm.value.ip,
OrganizationId: this.selectedOilStation.id
}
this.http.post('/api/EdgeDevices', body).subscribe(data => {
resolve(data)
OrganizationId: this.selectedOilStation.id,
};
this.http.post('/api/EdgeDevices', body).subscribe((data) => {
resolve(data);
this.message.create('success', '创建成功！');
this.getHost()
return true
})
})
this.getHost();
return true;
});
});
} else {
this.message.create('warning', '请填写完整！');
return false
}
return false;
}
},
});
const instance = modal.getContentComponent();
}
edit(data) {
console.log(data)
console.log(data);
const modal = this.modal.create({
nzTitle: '编辑边缘盒子',
nzContent: EdithostComponent,
nzViewContainerRef: this.viewContainerRef,
nzWidth: 288,
nzComponentParams: {
ip: data.hostIPAddress
ip: data.hostIPAddress,
},
nzOnOk: async () => {
if (instance.validateForm.valid) {
await new Promise(resolve => {
console.log('表单信息', instance.validateForm)
data.hostIPAddress = instance.validateForm.value.ip,
this.http.put(`/api/EdgeDevices/${data.id}`, data).subscribe(data => {
resolve(data)
await new Promise((resolve) => {
console.log('表单信息', instance.validateForm);
(data.hostIPAddress = instance.validateForm.value.ip),
this.http
.put(`/api/EdgeDevices/${data.id}`, data)
.subscribe((data) => {
resolve(data);
this.message.create('success', '修改成功！');
this.getHost()
return true
})
})
this.getHost();
return true;
});
});
} else {
this.message.create('warning', '请填写完整！');
return false
}
return false;
}
},
});
const instance = modal.getContentComponent();
}
delete(item) {
console.log(item)
console.log(item);
this.modal.confirm({
nzTitle: `确定要删除${item.name}这个主机吗?`,
nzOkText: '确定',
nzOkType: 'primary',
nzOnOk: () => {
this.http.delete(`/api/EdgeDevices/${item.id}`).subscribe(data => {
this.http.delete(`/api/EdgeDevices/${item.id}`).subscribe((data) => {
this.message.create('success', '删除成功！');
this.getHost()
})
this.getHost();
});
},
nzCancelText: '取消'
nzCancelText: '取消',
});
}
config(data) {
this.router.navigate([`/system/host/camera`], { queryParams: { 'hostId': data.id, 'orId': this.selectedOilStation.id } })
this.router.navigate([`/system/host/camera`], {
queryParams: { hostId: data.id, orId: this.selectedOilStation.id },
});
}
download(data) {
console.log(data)
console.log(data);
let params = {
edgeDeviceId: data.id
}
edgeDeviceId: data.id,
};
const httpOptions = {
responseType: 'blob' as 'json',
params: params
params: params,
};
this.http.get(`/api/EdgeDevices/IdentityDigest/File`, httpOptions).subscribe({
this.http
.get(`/api/EdgeDevices/IdentityDigest/File`, httpOptions)
.subscribe({
next: (data: any) => {
console.log('文件', data)
console.log('文件', data);
// 文件名中有中文 则对文件名进行转码
const link = document.createElement('a');
const blob = new Blob([data], { type: 'application/octet-stream' });
@ -201,8 +235,8 @@ export class AnalysisOfTheHostComponent implements OnInit {
document.body.removeChild(link);
},
error: (err) => {
console.log(err)
}
})
console.log(err);
},
});
}
}

2
src/app/system-management/organization/organization.component.ts
Unescape View File

@ -27,7 +27,7 @@ export class OrganizationComponent implements OnInit {
});
this.getAllOrganization()
this.deleteRouteSnapshot();
// this.deleteRouteSnapshot();
}
deleteRouteSnapshot() {
CustomReuseStrategy.deleteRouteSnapshot('/system/host');

Write Preview
Loading…
Cancel
Save