From a2c7d80002fdfb83da8da35a6503ec9d26ade5ed Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Tue, 21 Feb 2023 09:34:58 +0800 Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=E8=B7=AF=E7=94=B1=E7=BC=93?= =?UTF-8?q?=E5=AD=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/CustomReuseStrategy.ts | 98 +++---- src/app/app.module.ts | 25 +- .../analysis-of-the-host.component.ts | 252 ++++++++++-------- .../organization/organization.component.ts | 2 +- 4 files changed, 212 insertions(+), 165 deletions(-) diff --git a/src/app/CustomReuseStrategy.ts b/src/app/CustomReuseStrategy.ts index 8089987..1321a6f 100644 --- a/src/app/CustomReuseStrategy.ts +++ b/src/app/CustomReuseStrategy.ts @@ -1,58 +1,64 @@ -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 } = {}; - public static handlers: { [key: string]: DetachedRouteHandle } = {}; - - /** 删除缓存路由快照的方法 */ - public static deleteRouteSnapshot(path: string): void { - const name = path.replace(/\//g, '_'); - if (CustomReuseStrategy.handlers[name]) { - delete CustomReuseStrategy.handlers[name]; - } + /** 删除缓存路由快照的方法 */ + public static deleteRouteSnapshot(path: string): void { + const name = path.replace(/\//g, '_'); + if (CustomReuseStrategy.handlers[name]) { + delete CustomReuseStrategy.handlers[name]; } + } - /** 表示对所有路由允许复用 如果你有路由不想利用可以在这加一些业务逻辑判断 */ - shouldDetach(route: ActivatedRouteSnapshot): boolean { - console.log('shouldDetach======>', route); - return true; - } + /** 进入路由触发，判断是否同一路由 */ + shouldReuseRoute( + future: ActivatedRouteSnapshot, + curr: ActivatedRouteSnapshot + ): boolean { + // console.debug('shouldReuseRoute======>', future, curr); + return ( + future.routeConfig === curr.routeConfig && + JSON.stringify(future.params) === JSON.stringify(curr.params) + ); + } - /** 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象 */ - store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void { - console.log('store======>', route, handle); - if(route.routeConfig.path == 'host'){ - CustomReuseStrategy.handlers[this.getRouteUrl(route)] = handle; - } - } + /** 表示对所有路由允许复用 如果你有路由不想利用可以在这加一些业务逻辑判断 */ + shouldDetach(route: ActivatedRouteSnapshot): boolean { + console.log('shouldDetach======>', route); + return true; + } - /** 若 path 在缓存中有的都认为允许还原路由 */ - shouldAttach(route: ActivatedRouteSnapshot): boolean { - // console.debug('shouldAttach======>', route); - return !!CustomReuseStrategy.handlers[this.getRouteUrl(route)]; + /** 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象 */ + store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void { + console.log('store======>', route, handle); + if (route.routeConfig.path == 'host') { + CustomReuseStrategy.handlers[this.getRouteUrl(route)] = handle; } + } - /** 从缓存中获取快照，若无则返回nul */ - retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle { - // console.debug('retrieve======>', route); - 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); - } + /** 若 path 在缓存中有的都认为允许还原路由 */ + shouldAttach(route: ActivatedRouteSnapshot): boolean { + // console.debug('shouldAttach======>', route); + return !!CustomReuseStrategy.handlers[this.getRouteUrl(route)]; + } - /** 使用route的path作为快照的key */ - getRouteUrl(route: ActivatedRouteSnapshot) { - const path = route['_routerState'].url.replace(/\//g, '_'); - return path; + /** 从缓存中获取快照，若无则返回nul */ + retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle { + // console.debug('retrieve======>', route); + if (!CustomReuseStrategy.handlers[this.getRouteUrl(route)]) { + return null; } + return CustomReuseStrategy.handlers[this.getRouteUrl(route)]; + } -} \ No newline at end of file + /** 使用route的path作为快照的key */ + getRouteUrl(route: ActivatedRouteSnapshot) { + const path = route['_routerState'].url.replace(/\//g, '_'); + return path; + } +} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 301a3e2..459b0be 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -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 {} diff --git a/src/app/system-management/analysis-of-the-host/analysis-of-the-host.component.ts b/src/app/system-management/analysis-of-the-host/analysis-of-the-host.component.ts index b7f546c..fba8e76 100644 --- a/src/app/system-management/analysis-of-the-host/analysis-of-the-host.component.ts +++ b/src/app/system-management/analysis-of-the-host/analysis-of-the-host.component.ts @@ -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 - if (element.isGasStation) { - element.isLeaf = 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; + if (element.isGasStation) { + 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', { - params: { - ContainsChildren: true, - OrganizationId: this.selectedOilStation.id, - PageSize: 999 - } - }).subscribe((data: any) => { - console.log('主机列表', data.items) - this.isLoading = false - this.listOfData = data.items - }) + 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; + }); } - - ngAfterViewInit(): void { - - } + ngAfterViewInit(): void {} //新增边缘盒子 addHost() { - console.log(this.selectedOilStation) + console.log(this.selectedOilStation); const modal = this.modal.create({ nzTitle: '新增边缘盒子', nzContent: AddhostComponent, @@ -104,105 +133,110 @@ 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) - this.message.create('success', '修改成功！'); - this.getHost() - return true - }) - }) + 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; + }); + }); } 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({ - next: (data: any) => { - console.log('文件', data) - // 文件名中有中文 则对文件名进行转码 - const link = document.createElement('a'); - const blob = new Blob([data], { type: 'application/octet-stream' }); - link.setAttribute('href', window.URL.createObjectURL(blob)); - link.setAttribute('download', `.deviceid`); - link.style.visibility = 'hidden'; - document.body.appendChild(link); - link.click(); - document.body.removeChild(link); - }, - error: (err) => { - console.log(err) - } - }) + this.http + .get(`/api/EdgeDevices/IdentityDigest/File`, httpOptions) + .subscribe({ + next: (data: any) => { + console.log('文件', data); + // 文件名中有中文 则对文件名进行转码 + const link = document.createElement('a'); + const blob = new Blob([data], { type: 'application/octet-stream' }); + link.setAttribute('href', window.URL.createObjectURL(blob)); + link.setAttribute('download', `.deviceid`); + link.style.visibility = 'hidden'; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + }, + error: (err) => { + console.log(err); + }, + }); } } diff --git a/src/app/system-management/organization/organization.component.ts b/src/app/system-management/organization/organization.component.ts index 5d53754..038ec69 100644 --- a/src/app/system-management/organization/organization.component.ts +++ b/src/app/system-management/organization/organization.component.ts @@ -27,7 +27,7 @@ export class OrganizationComponent implements OnInit { }); this.getAllOrganization() - this.deleteRouteSnapshot(); + // this.deleteRouteSnapshot(); } deleteRouteSnapshot() { CustomReuseStrategy.deleteRouteSnapshot('/system/host');