diff --git a/src/app/routes/data-v/header/header.component.ts b/src/app/routes/data-v/header/header.component.ts index 4865387..16a2320 100644 --- a/src/app/routes/data-v/header/header.component.ts +++ b/src/app/routes/data-v/header/header.component.ts @@ -1,21 +1,30 @@ import { Component, OnInit, ViewChild, inject } from '@angular/core'; +import { RouterOutlet } from '@angular/router'; import { STColumn, STComponent } from '@delon/abc/st'; import { SFSchema } from '@delon/form'; import { ModalHelper, _HttpClient } from '@delon/theme'; -import { SHARED_IMPORTS } from '@shared'; -import { DataVUserComponent } from '../user/user.component'; import { LayoutDefaultModule } from '@delon/theme/layout-default'; +import { SHARED_IMPORTS } from '@shared'; + import { DataVDateComponent } from '../date/date.component'; -import { DataVNavigationComponent } from '../navigation/navigation.component'; -import { RouterOutlet } from '@angular/router'; import { DataVFullScreenComponent } from '../fullscreen/fullscreen.component'; +import { DataVNavigationComponent } from '../navigation/navigation.component'; import { DataVSettingComponent } from '../setting/setting.component'; +import { DataVUserComponent } from '../user/user.component'; @Component({ selector: 'app-data-v-header', standalone: true, - imports: [DataVSettingComponent, DataVFullScreenComponent, DataVUserComponent, - DataVDateComponent, DataVNavigationComponent, LayoutDefaultModule, RouterOutlet, ...SHARED_IMPORTS], + imports: [ + DataVSettingComponent, + DataVFullScreenComponent, + DataVUserComponent, + DataVDateComponent, + DataVNavigationComponent, + LayoutDefaultModule, + RouterOutlet, + ...SHARED_IMPORTS + ], templateUrl: './header.component.html', styleUrls: ['./header.component.less'] }) @@ -23,7 +32,7 @@ export class DataVHeaderComponent implements OnInit { private readonly http = inject(_HttpClient); private readonly modal = inject(ModalHelper); - ngOnInit(): void { } + ngOnInit(): void {} add(): void { // this.modal diff --git a/src/app/routes/data-v/home/home.component.html b/src/app/routes/data-v/home/home.component.html index 6038c70..471d321 100644 --- a/src/app/routes/data-v/home/home.component.html +++ b/src/app/routes/data-v/home/home.component.html @@ -1,9 +1,9 @@
- - + + - +
-
\ No newline at end of file + diff --git a/src/app/routes/data-v/home/home.component.ts b/src/app/routes/data-v/home/home.component.ts index b68faaf..1e577aa 100644 --- a/src/app/routes/data-v/home/home.component.ts +++ b/src/app/routes/data-v/home/home.component.ts @@ -1,14 +1,15 @@ import { Component, OnInit, ViewChild, inject } from '@angular/core'; +import { RouterOutlet } from '@angular/router'; import { STColumn, STComponent } from '@delon/abc/st'; import { SFSchema } from '@delon/form'; import { ModalHelper, _HttpClient } from '@delon/theme'; -import { SHARED_IMPORTS } from '@shared'; -import { DataVUserComponent } from '../user/user.component'; import { LayoutDefaultModule } from '@delon/theme/layout-default'; +import { SHARED_IMPORTS } from '@shared'; + import { DataVDateComponent } from '../date/date.component'; -import { DataVNavigationComponent } from '../navigation/navigation.component'; -import { RouterOutlet } from '@angular/router'; import { DataVHeaderComponent } from '../header/header.component'; +import { DataVNavigationComponent } from '../navigation/navigation.component'; +import { DataVUserComponent } from '../user/user.component'; @Component({ selector: 'app-data-v-home', diff --git a/src/app/routes/data-v/menu/lj-menu.interface.ts b/src/app/routes/data-v/menu/lj-menu.interface.ts index 5314176..1cd85ea 100644 --- a/src/app/routes/data-v/menu/lj-menu.interface.ts +++ b/src/app/routes/data-v/menu/lj-menu.interface.ts @@ -1,4 +1,5 @@ export interface Menu { + selected?: boolean; menuCode: string; text: string; link?: any; diff --git a/src/app/routes/data-v/menu/lj-menu.service.ts b/src/app/routes/data-v/menu/lj-menu.service.ts index 4777ece..7f87439 100644 --- a/src/app/routes/data-v/menu/lj-menu.service.ts +++ b/src/app/routes/data-v/menu/lj-menu.service.ts @@ -11,6 +11,6 @@ export class MenuService { constructor(private http: HttpClient) {} getMenus(): Observable { - return this.http.get('path/to/your/api'); + return this.http.get('/api/main/menu?ClientId=Platform_Datav'); } } diff --git a/src/app/routes/data-v/navigation/navigation.component.html b/src/app/routes/data-v/navigation/navigation.component.html new file mode 100644 index 0000000..7d856b1 --- /dev/null +++ b/src/app/routes/data-v/navigation/navigation.component.html @@ -0,0 +1,48 @@ +
+ +
diff --git a/src/app/routes/data-v/navigation/navigation.component.less b/src/app/routes/data-v/navigation/navigation.component.less index de0eeaa..130de42 100644 --- a/src/app/routes/data-v/navigation/navigation.component.less +++ b/src/app/routes/data-v/navigation/navigation.component.less @@ -9,7 +9,7 @@ ul { display: inline-flex; width: max-content; margin-right: auto; - margin-bottom: 0rem; + margin-bottom: 0; li { display: inline-flex; @@ -86,7 +86,6 @@ ul { } &.dev-mode { - a:hover, a:active, a.active { diff --git a/src/app/routes/data-v/navigation/navigation.component.ts b/src/app/routes/data-v/navigation/navigation.component.ts index 15ea360..9527ecd 100644 --- a/src/app/routes/data-v/navigation/navigation.component.ts +++ b/src/app/routes/data-v/navigation/navigation.component.ts @@ -5,6 +5,7 @@ import { STColumn, STComponent } from '@delon/abc/st'; import { SFSchema } from '@delon/form'; import { ModalHelper, _HttpClient } from '@delon/theme'; import { SHARED_IMPORTS } from '@shared'; +import { NzDropDownModule } from 'ng-zorro-antd/dropdown'; import { Menu } from '../menu/lj-menu.interface'; import { MenuService } from '../menu/lj-menu.service'; @@ -13,13 +14,7 @@ import { MenuService } from '../menu/lj-menu.service'; selector: 'data-v-navigation', standalone: true, imports: [RouterOutlet, CommonModule, ...SHARED_IMPORTS], - template: `
- -
`, + templateUrl: './navigation.component.html', styleUrls: ['./navigation.component.less'] }) export class DataVNavigationComponent implements OnInit { @@ -27,7 +22,8 @@ export class DataVNavigationComponent implements OnInit { private readonly modal = inject(ModalHelper); private readonly router = inject(Router); menuNetDataList: Menu[] = []; - + // 添加一个属性来标记是否有菜单被选中 + selectedParentMenu: Menu | undefined; imageUrl: string = 'assets/dashboard/menu_btn_l.png'; title: string = 'Label'; @@ -35,10 +31,6 @@ export class DataVNavigationComponent implements OnInit { constructor(private menuService: MenuService) {} ngOnInit(): void { - // this.menuService.getMenus().subscribe((menus: Menu[]) => { - // this.menuNetDataList = menus; - // // this.menuList; - // }); this.menuNetDataList = [ { menuCode: 'Home', @@ -58,642 +50,55 @@ export class DataVNavigationComponent implements OnInit { clientId: 'Platform_Datav', acl: null, id: '3a1167f1-a86c-194d-eabf-258993a337ac' - }, - { - menuCode: 'CoalFlowOverview', - text: '煤流总览', - i18n: null, - icon: null, - grp: true, - leafFlag: false, - rootFlag: true, - hideInBreadcrumbFlag: true, - link: '/data-v/s1', - srtno: 0, - valiFlag: false, - menuType: 0, - parentId: null, - clientId: 'Platform_Datav', - children: [ - { - menuCode: 'EnteringFactoryQueue', - text: '入厂排队', - i18n: null, - icon: 'anticon-appstore', - grp: true, - leafFlag: false, - rootFlag: false, - hideInBreadcrumbFlag: false, - link: null, - srtno: 0, - valiFlag: false, - menuType: 0, - parentId: '3a1167d9-814f-5a16-96ad-37595e54eeb8', - clientId: 'Platform_Datav', - children: [], - acl: null, - id: '3a1167d9-8189-ef37-f6a2-72ca8a926a10' - }, - { - menuCode: 'EntranceFactorySampling', - text: '入厂采样', - i18n: null, - icon: 'anticon-appstore', - grp: true, - leafFlag: false, - rootFlag: false, - hideInBreadcrumbFlag: false, - link: null, - srtno: 0, - valiFlag: false, - menuType: 0, - parentId: '3a1167d9-814f-5a16-96ad-37595e54eeb8', - clientId: 'Platform_Datav', - children: [], - acl: null, - id: '3a1167d9-81bd-11b0-2df2-d66b72b6c999' - }, - { - menuCode: 'GrossWeightMeasurement', - text: '毛重计量', - i18n: null, - icon: 'anticon-appstore', - grp: true, - leafFlag: false, - rootFlag: false, - hideInBreadcrumbFlag: false, - link: null, - srtno: 0, - valiFlag: false, - menuType: 0, - parentId: '3a1167d9-814f-5a16-96ad-37595e54eeb8', - clientId: 'Platform_Datav', - children: [ - { - menuCode: 'GrossWeightMeasurement.Blockbuster1', - text: '重磅1', - i18n: null, - icon: null, - grp: false, - leafFlag: false, - rootFlag: false, - hideInBreadcrumbFlag: false, - link: '', - srtno: 1, - valiFlag: false, - menuType: 0, - parentId: '3a1167dd-4307-f0bb-5bcb-4274aa1735b7', - clientId: 'Platform_Datav', - children: [], - acl: { - ability: ['GrossWeightMeasurement.Blockbuster1'] - }, - id: '3a1167f1-a7ac-59aa-9215-3fee372a4995' - }, - { - menuCode: 'GrossWeightMeasurement.Blockbuster2', - text: '重磅2', - i18n: null, - icon: null, - grp: false, - leafFlag: false, - rootFlag: false, - hideInBreadcrumbFlag: false, - link: '', - srtno: 1, - valiFlag: false, - menuType: 0, - parentId: '3a1167dd-4307-f0bb-5bcb-4274aa1735b7', - clientId: 'Platform_Datav', - children: [], - acl: { - ability: ['GrossWeightMeasurement.Blockbuster2'] - }, - id: '3a1167f1-a7f9-219d-dbb9-d81196d92574' - }, - { - menuCode: 'GrossWeightMeasurement.Blockbuster3', - text: '重磅3', - i18n: null, - icon: null, - grp: false, - leafFlag: false, - rootFlag: false, - hideInBreadcrumbFlag: false, - link: '', - srtno: 3, - valiFlag: false, - menuType: 0, - parentId: '3a1167dd-4307-f0bb-5bcb-4274aa1735b7', - clientId: 'Platform_Datav', - children: [], - acl: { - ability: ['GrossWeightMeasurement.Blockbuster3'] - }, - id: '3a1167f1-a81f-97b4-1816-e081385f5f1e' - }, - { - menuCode: 'GrossWeightMeasurement.Blockbuster4', - text: '重磅4', - i18n: null, - icon: null, - grp: false, - leafFlag: false, - rootFlag: false, - hideInBreadcrumbFlag: false, - link: '', - srtno: 4, - valiFlag: false, - menuType: 0, - parentId: '3a1167dd-4307-f0bb-5bcb-4274aa1735b7', - clientId: 'Platform_Datav', - children: [], - acl: { - ability: ['GrossWeightMeasurement.Blockbuster4'] - }, - id: '3a1167f1-a844-2035-8a00-63df140caaa6' - } - ], - acl: null, - id: '3a1167dd-4307-f0bb-5bcb-4274aa1735b7' - }, - { - menuCode: 'TransshipmentMeasurement', - text: '转运计量', - i18n: null, - icon: 'anticon-appstore', - grp: true, - leafFlag: false, - rootFlag: false, - hideInBreadcrumbFlag: false, - link: null, - srtno: 0, - valiFlag: false, - menuType: 0, - parentId: '3a1167d9-814f-5a16-96ad-37595e54eeb8', - clientId: 'Platform_Datav', - children: [ - { - menuCode: 'TransshipmentMeasurement.TransferScale', - text: '转运磅', - i18n: null, - icon: null, - grp: false, - leafFlag: false, - rootFlag: false, - hideInBreadcrumbFlag: false, - link: '', - srtno: 4, - valiFlag: false, - menuType: 0, - parentId: '3a1167f1-a86c-194d-eabf-258993a337ac', - clientId: 'Platform_Datav', - children: [], - acl: { - ability: ['TransshipmentMeasurement.TransferScale'] - }, - id: '3a1167f1-a896-a133-12d5-e9b69a5e3328' - } - ], - acl: null, - id: '3a1167f1-a86c-194d-eabf-258993a337ac' - }, - { - menuCode: 'CoalUnloadingQueue', - text: '卸煤排队', - i18n: null, - icon: 'anticon-appstore', - grp: true, - leafFlag: false, - rootFlag: false, - hideInBreadcrumbFlag: false, - link: null, - srtno: 0, - valiFlag: false, - menuType: 0, - parentId: '3a1167d9-814f-5a16-96ad-37595e54eeb8', - clientId: 'Platform_Datav', - children: [ - { - menuCode: 'CoalUnloadingQueue.CoalYard', - text: '煤场1', - i18n: null, - icon: null, - grp: false, - leafFlag: false, - rootFlag: false, - hideInBreadcrumbFlag: false, - link: '', - srtno: 1, - valiFlag: false, - menuType: 0, - parentId: '3a1167f1-a8c5-a17d-18ec-2cc6dd520571', - clientId: 'Platform_Datav', - children: [], - acl: { - ability: ['CoalUnloadingQueue.CoalYard'] - }, - id: '3a1167f1-a8ee-7fbf-82d2-f5a4638050d5' - }, - { - menuCode: 'CoalUnloadingQueue.CoalYard2', - text: '煤场2', - i18n: null, - icon: null, - grp: false, - leafFlag: false, - rootFlag: false, - hideInBreadcrumbFlag: false, - link: '', - srtno: 1, - valiFlag: false, - menuType: 0, - parentId: '3a1167f1-a8c5-a17d-18ec-2cc6dd520571', - clientId: 'Platform_Datav', - children: [], - acl: { - ability: ['CoalUnloadingQueue.CoalYard2'] - }, - id: '3a1167f1-a912-7df1-d1f5-02803f77cf6e' - }, - { - menuCode: 'CoalUnloadingQueue.CoalYard3', - text: '煤场3', - i18n: null, - icon: null, - grp: false, - leafFlag: false, - rootFlag: false, - hideInBreadcrumbFlag: false, - link: '', - srtno: 1, - valiFlag: false, - menuType: 0, - parentId: '3a1167f1-a8c5-a17d-18ec-2cc6dd520571', - clientId: 'Platform_Datav', - children: [], - acl: { - ability: ['CoalUnloadingQueue.CoalYard3'] - }, - id: '3a1167f1-a937-dced-f79c-6e556cba39d4' - }, - { - menuCode: 'CoalUnloadingQueue.CoalYard4', - text: '煤场4', - i18n: null, - icon: null, - grp: false, - leafFlag: false, - rootFlag: false, - hideInBreadcrumbFlag: false, - link: '', - srtno: 4, - valiFlag: false, - menuType: 0, - parentId: '3a1167f1-a8c5-a17d-18ec-2cc6dd520571', - clientId: 'Platform_Datav', - children: [], - acl: { - ability: ['CoalUnloadingQueue.CoalYard4'] - }, - id: '3a1167f1-a95c-80ab-eb78-47e5d9485161' - } - ], - acl: null, - id: '3a1167f1-a8c5-a17d-18ec-2cc6dd520571' - } - ], - acl: null, - id: '3a1167d9-814f-5a16-96ad-37595e54eeb8' - }, - { - menuCode: 'CoalFlowOverview', - text: '煤样总览', - i18n: null, - icon: null, - grp: true, - leafFlag: false, - rootFlag: true, - hideInBreadcrumbFlag: true, - link: '/data-v/threejs', - srtno: 0, - valiFlag: false, - menuType: 0, - parentId: null, - clientId: 'Platform_Datav', - children: [ - { - menuCode: 'EnteringFactoryQueue', - text: '入厂排队', - i18n: null, - icon: 'anticon-appstore', - grp: true, - leafFlag: false, - rootFlag: false, - hideInBreadcrumbFlag: false, - link: null, - srtno: 0, - valiFlag: false, - menuType: 0, - parentId: '3a1167d9-814f-5a16-96ad-37595e54eeb8', - clientId: 'Platform_Datav', - children: [], - acl: null, - id: '3a1167d9-8189-ef37-f6a2-72ca8a926a10' - }, - { - menuCode: 'EntranceFactorySampling', - text: '入厂采样', - i18n: null, - icon: 'anticon-appstore', - grp: true, - leafFlag: false, - rootFlag: false, - hideInBreadcrumbFlag: false, - link: null, - srtno: 0, - valiFlag: false, - menuType: 0, - parentId: '3a1167d9-814f-5a16-96ad-37595e54eeb8', - clientId: 'Platform_Datav', - children: [], - acl: null, - id: '3a1167d9-81bd-11b0-2df2-d66b72b6c999' - }, - { - menuCode: 'GrossWeightMeasurement', - text: '毛重计量', - i18n: null, - icon: 'anticon-appstore', - grp: true, - leafFlag: false, - rootFlag: false, - hideInBreadcrumbFlag: false, - link: null, - srtno: 0, - valiFlag: false, - menuType: 0, - parentId: '3a1167d9-814f-5a16-96ad-37595e54eeb8', - clientId: 'Platform_Datav', - children: [ - { - menuCode: 'GrossWeightMeasurement.Blockbuster1', - text: '重磅1', - i18n: null, - icon: null, - grp: false, - leafFlag: false, - rootFlag: false, - hideInBreadcrumbFlag: false, - link: '', - srtno: 1, - valiFlag: false, - menuType: 0, - parentId: '3a1167dd-4307-f0bb-5bcb-4274aa1735b7', - clientId: 'Platform_Datav', - children: [], - acl: { - ability: ['GrossWeightMeasurement.Blockbuster1'] - }, - id: '3a1167f1-a7ac-59aa-9215-3fee372a4995' - }, - { - menuCode: 'GrossWeightMeasurement.Blockbuster2', - text: '重磅2', - i18n: null, - icon: null, - grp: false, - leafFlag: false, - rootFlag: false, - hideInBreadcrumbFlag: false, - link: '', - srtno: 1, - valiFlag: false, - menuType: 0, - parentId: '3a1167dd-4307-f0bb-5bcb-4274aa1735b7', - clientId: 'Platform_Datav', - children: [], - acl: { - ability: ['GrossWeightMeasurement.Blockbuster2'] - }, - id: '3a1167f1-a7f9-219d-dbb9-d81196d92574' - }, - { - menuCode: 'GrossWeightMeasurement.Blockbuster3', - text: '重磅3', - i18n: null, - icon: null, - grp: false, - leafFlag: false, - rootFlag: false, - hideInBreadcrumbFlag: false, - link: '', - srtno: 3, - valiFlag: false, - menuType: 0, - parentId: '3a1167dd-4307-f0bb-5bcb-4274aa1735b7', - clientId: 'Platform_Datav', - children: [], - acl: { - ability: ['GrossWeightMeasurement.Blockbuster3'] - }, - id: '3a1167f1-a81f-97b4-1816-e081385f5f1e' - }, - { - menuCode: 'GrossWeightMeasurement.Blockbuster4', - text: '重磅4', - i18n: null, - icon: null, - grp: false, - leafFlag: false, - rootFlag: false, - hideInBreadcrumbFlag: false, - link: '', - srtno: 4, - valiFlag: false, - menuType: 0, - parentId: '3a1167dd-4307-f0bb-5bcb-4274aa1735b7', - clientId: 'Platform_Datav', - children: [], - acl: { - ability: ['GrossWeightMeasurement.Blockbuster4'] - }, - id: '3a1167f1-a844-2035-8a00-63df140caaa6' - } - ], - acl: null, - id: '3a1167dd-4307-f0bb-5bcb-4274aa1735b7' - }, - { - menuCode: 'TransshipmentMeasurement', - text: '转运计量', - i18n: null, - icon: 'anticon-appstore', - grp: true, - leafFlag: false, - rootFlag: false, - hideInBreadcrumbFlag: false, - link: null, - srtno: 0, - valiFlag: false, - menuType: 0, - parentId: '3a1167d9-814f-5a16-96ad-37595e54eeb8', - clientId: 'Platform_Datav', - children: [ - { - menuCode: 'TransshipmentMeasurement.TransferScale', - text: '转运磅', - i18n: null, - icon: null, - grp: false, - leafFlag: false, - rootFlag: false, - hideInBreadcrumbFlag: false, - link: '', - srtno: 4, - valiFlag: false, - menuType: 0, - parentId: '3a1167f1-a86c-194d-eabf-258993a337ac', - clientId: 'Platform_Datav', - children: [], - acl: { - ability: ['TransshipmentMeasurement.TransferScale'] - }, - id: '3a1167f1-a896-a133-12d5-e9b69a5e3328' - } - ], - acl: null, - id: '3a1167f1-a86c-194d-eabf-258993a337ac' - }, - { - menuCode: 'CoalUnloadingQueue', - text: '卸煤排队', - i18n: null, - icon: 'anticon-appstore', - grp: true, - leafFlag: false, - rootFlag: false, - hideInBreadcrumbFlag: false, - link: null, - srtno: 0, - valiFlag: false, - menuType: 0, - parentId: '3a1167d9-814f-5a16-96ad-37595e54eeb8', - clientId: 'Platform_Datav', - children: [ - { - menuCode: 'CoalUnloadingQueue.CoalYard', - text: '煤场1', - i18n: null, - icon: null, - grp: false, - leafFlag: false, - rootFlag: false, - hideInBreadcrumbFlag: false, - link: '', - srtno: 1, - valiFlag: false, - menuType: 0, - parentId: '3a1167f1-a8c5-a17d-18ec-2cc6dd520571', - clientId: 'Platform_Datav', - children: [], - acl: { - ability: ['CoalUnloadingQueue.CoalYard'] - }, - id: '3a1167f1-a8ee-7fbf-82d2-f5a4638050d5' - }, - { - menuCode: 'CoalUnloadingQueue.CoalYard2', - text: '煤场2', - i18n: null, - icon: null, - grp: false, - leafFlag: false, - rootFlag: false, - hideInBreadcrumbFlag: false, - link: '', - srtno: 1, - valiFlag: false, - menuType: 0, - parentId: '3a1167f1-a8c5-a17d-18ec-2cc6dd520571', - clientId: 'Platform_Datav', - children: [], - acl: { - ability: ['CoalUnloadingQueue.CoalYard2'] - }, - id: '3a1167f1-a912-7df1-d1f5-02803f77cf6e' - }, - { - menuCode: 'CoalUnloadingQueue.CoalYard3', - text: '煤场3', - i18n: null, - icon: null, - grp: false, - leafFlag: false, - rootFlag: false, - hideInBreadcrumbFlag: false, - link: '', - srtno: 1, - valiFlag: false, - menuType: 0, - parentId: '3a1167f1-a8c5-a17d-18ec-2cc6dd520571', - clientId: 'Platform_Datav', - children: [], - acl: { - ability: ['CoalUnloadingQueue.CoalYard3'] - }, - id: '3a1167f1-a937-dced-f79c-6e556cba39d4' - }, - { - menuCode: 'CoalUnloadingQueue.CoalYard4', - text: '煤场4', - i18n: null, - icon: null, - grp: false, - leafFlag: false, - rootFlag: false, - hideInBreadcrumbFlag: false, - link: '', - srtno: 4, - valiFlag: false, - menuType: 0, - parentId: '3a1167f1-a8c5-a17d-18ec-2cc6dd520571', - clientId: 'Platform_Datav', - children: [], - acl: { - ability: ['CoalUnloadingQueue.CoalYard4'] - }, - id: '3a1167f1-a95c-80ab-eb78-47e5d9485161' - } - ], - acl: null, - id: '3a1167f1-a8c5-a17d-18ec-2cc6dd520571' - } - ], - acl: null, - id: '3a1167d9-814f-5a16-96ad-37595e54eeb8' } ]; - } + this.menuService.getMenus().subscribe((menus: Menu[]) => { + console.log('this.menuNetDataList'); + + this.menuNetDataList = this.menuNetDataList.concat(menus); + console.log(this.menuNetDataList); + // this.menuList; + }); + + // this.updateselectedParentMenuStatus(); + } + // 更新是否有菜单被选中的状态 + // this.hasSelectedMenu = this.menuNetDataList.some(m => m.selected); + // console.log(this.hasSelectedMenu); + // } add(): void {} menuOver(menu: any, $event: any) {} isActive(menu: any) {} - // 新的 navigate 方法 navigate(menu: any) { - if (menu.link) { + // 清除所有菜单的选中状态 + this.menuNetDataList.forEach(m => (m.selected = false)); + + // 如果是一级菜单并且有子菜单，则导航到新页面并传递数据 + if (menu.link && menu.rootFlag && menu.children && menu.children.length > 0) { + console.log('来时跳转2级'); + console.log(menu.link); + console.log(menu.children); + + // 设置当前菜单为选中状态 + menu.selected = true; + this.selectedParentMenu = menu; + + this.router.navigate([menu.link, menu.id], { + state: { menu: menu.children } + }); + } else if (menu.menuCode == 'Home') { + menu.selected = true; + this.selectedParentMenu = menu; this.router.navigateByUrl(menu.link); + } else { + menu.selected = true; + this.router.navigate([menu.link, menu.id], { + state: { menu: menu.children } + }); } - - // if (menu.code == '01') { - // // 你可能想根据菜单项来确定导航的路径 - // this.router.navigateByUrl('/'); // 将'/data-v/s1'替换为正确的路径 - // } else if (menu.code == '02') { - // // 你可能想根据菜单项来确定导航的路径 - // this.router.navigateByUrl('/data-v/s1'); // 将'/data-v/s1'替换为正确的路径 - // } } } diff --git a/src/app/routes/data-v/routes.ts b/src/app/routes/data-v/routes.ts index 89cfcda..7638e8d 100644 --- a/src/app/routes/data-v/routes.ts +++ b/src/app/routes/data-v/routes.ts @@ -1,15 +1,23 @@ import { Routes } from '@angular/router'; -import { DataVHomeComponent } from './home/home.component'; -import { DataVUserComponent } from './user/user.component'; + import { DataVDateComponent } from './date/date.component'; -import { DataVWorkstationComponent } from './workstation/workstation.component'; +import { DataVHomeComponent } from './home/home.component'; import { DataVS1Component } from './s1/s1.component'; +import { DataVSecond1Component } from './second1/second1.component'; import { DataVThreejsComponent } from './threejs/threejs.component'; +import { DataVUserComponent } from './user/user.component'; +import { DataVWorkstationComponent } from './workstation/workstation.component'; export const routes: Routes = [ { - path: 's1', - component: DataVS1Component - } -, - { path: 'threejs', component: DataVThreejsComponent }]; + path: 's1/:id', + component: DataVS1Component, + data: { menu: null } + }, + { + path: 'second1/:id', + component: DataVSecond1Component, + data: { menu: null } + }, + { path: 'threejs/:id', component: DataVThreejsComponent } +]; diff --git a/src/app/routes/data-v/second1/chart-component/chart-component.component.css b/src/app/routes/data-v/second1/chart-component/chart-component.component.css new file mode 100644 index 0000000..0519ecb --- /dev/null +++ b/src/app/routes/data-v/second1/chart-component/chart-component.component.css @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/routes/data-v/second1/chart-component/chart-component.component.html b/src/app/routes/data-v/second1/chart-component/chart-component.component.html new file mode 100644 index 0000000..fd9a61f --- /dev/null +++ b/src/app/routes/data-v/second1/chart-component/chart-component.component.html @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/src/app/routes/data-v/second1/chart-component/chart-component.component.ts b/src/app/routes/data-v/second1/chart-component/chart-component.component.ts new file mode 100644 index 0000000..544af74 --- /dev/null +++ b/src/app/routes/data-v/second1/chart-component/chart-component.component.ts @@ -0,0 +1,172 @@ +import { Component, OnInit, AfterViewInit, OnDestroy, OnChanges, SimpleChanges, Input, ViewChild, ElementRef } from '@angular/core'; +import * as echarts from 'echarts'; + +@Component({ + selector: 'app-chart-component', + standalone: true, + templateUrl: './chart-component.component.html', + styleUrls: ['./chart-component.component.css'] +}) +export class ChartComponentComponent implements OnInit, OnDestroy, OnChanges { + + @ViewChild('chart', { static: true }) + chartContainer!: ElementRef; + private chartInstance: echarts.ECharts | null = null; + + // 接收外部传入的配置项（例如：柱状图、折线图等配置） + @Input() options: echarts.EChartsOption = {}; + + /** 默认样式 */ + + defaultTooltipOptions = { + tooltip: { + trigger: 'item', + borderColor: '#00eff8', + backgroundColor: '#12192C', + padding: [6, 14, 6, 14], + textStyle: { + fontSize: 14, + color: '#74FAFB', + }, + position: 'top', + axisPointer: { + type: 'shadow' + } + }, + series: [ + { + type: 'gauge', + startAngle: 180, + endAngle: 0, + center: ['50%', '75%'], + radius: '90%', + min: 0, + max: 1, + splitNumber: 8, + axisLine: { + lineStyle: { + width: 6, + color: [ + [0.25, '#74FAFB'], + [0.5, '#74FAFB'], + [0.75, '#74FAFB'], + [1, '#74FAFB'] + ] + } + }, + pointer: { + icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z', + length: '12%', + width: 20, + offsetCenter: [0, '-60%'], + itemStyle: { + color: 'auto' + } + }, + axisTick: { + length: 12, + lineStyle: { + color: 'auto', + width: 2 + } + }, + splitLine: { + length: 20, + lineStyle: { + color: 'auto', + width: 5 + } + }, + axisLabel: { + color: '#464646', + fontSize: 20, + distance: -60, + rotate: 'tangential', + formatter: function (value: any) { + if (value === 0.875) { + return ''; + } else if (value === 0.625) { + return ''; + } else if (value === 0.375) { + return ''; + } else if (value === 0.125) { + return ''; + } + return ''; + } + }, + title: { + offsetCenter: [0, '-10%'], + fontSize: 20 + }, + tooltip: { + trigger: 'item', + borderColor: '#00eff8', + backgroundColor: '#12192C', + padding: [6, 14, 6, 14], + textStyle: { + fontSize: 14, + color: '#74FAFB', + }, + position: 'top', + axisPointer: { + type: 'shadow' + } + }, + detail: { + fontSize: 30, + offsetCenter: [0, '-5%'], + valueAnimation: true, + formatter: function (value: any) { + return Math.round(value * 100) + ''; + }, + color: 'inherit' + }, + + } + ] + }; + constructor() { } + + + ngOnInit(): void { + console.log('ChartComponentComponent ngOnInit'); + this.initEcharts(); + } + + ngOnChanges(changes: SimpleChanges): void { + + if (changes['options'] && !changes['options'].isFirstChange()) { + console.log('ChartComponentComponent ngOnChanges'); + this.updateChartOptions(); + } + } + + ngOnDestroy(): void { + if (this.chartInstance) { + console.log('ChartComponentComponent ngOnInit'); + this.chartInstance.dispose(); + } + } + + initEcharts(): void { + const chartDom = this.chartContainer.nativeElement; + this.chartInstance = echarts.init(chartDom, 'dark'); + + // 设置默认的tooltip配置，如果外部传入了tooltip则会覆盖这里的设置 + + + // 合并默认和外部传入的配置项 + const mergedOptions = { + ...this.defaultTooltipOptions, + ...this.options + }; + this.chartInstance.setOption(mergedOptions); + } + + updateChartOptions(): void { + if (this.chartInstance) { + this.chartInstance.setOption(this.options); + } + } +} diff --git a/src/app/routes/data-v/second1/second1.component.html b/src/app/routes/data-v/second1/second1.component.html new file mode 100644 index 0000000..bd705c4 --- /dev/null +++ b/src/app/routes/data-v/second1/second1.component.html @@ -0,0 +1,11 @@ + + +
+ + +
diff --git a/src/app/routes/data-v/second1/second1.component.less b/src/app/routes/data-v/second1/second1.component.less new file mode 100644 index 0000000..5a5239d --- /dev/null +++ b/src/app/routes/data-v/second1/second1.component.less @@ -0,0 +1,103 @@ +/* stylelint-disable comment-empty-line-before */ +.dashboard-container { + width: 20rem; + height: 10rem; + margin-top: -3rem; + margin-bottom: -2rem; +} + + +.sys-status-title { + font-size: 18px; + font-weight: 600; + color: #94DDF3; + text-align: center; +} + +.ag-theme-datav { + --ag-border-color: #74FAFB; + --ag-foreground-color: #74FAFB; + --ag-background-color: #0A1632; + --ag-header-foreground-color: #74FAFB; + --ag-header-background-color: #0A1632; + --ag-odd-row-background-color: #0A1632; + --ag-header-column-resize-handle-color: rgb(126 46 132); + --ag-font-size: 17px; + --ag-font-family: monospace; + + height: 5rem; +} + +.scrollable-container { + overflow-y: auto; + /* 水平滚动关闭，垂直滚动开启 */ + width: 100%; + /* 或者指定一个固定的宽度 */ + height: 20rem; + /* 根据需求设置容器的高度以触发滚动条 */ +} + +.centered-element { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + +} + +.status-container { + display: flex; + align-items: center; + padding: 0.5rem; +} + +.status-circle { + width: 18px; + height: 18px; + border-radius: 50%; + + &.red { + background-color: red; + } + + &.green { + background-color: green; + } +} + +.progress-container { + display: flex; + color: white; + + + .status-text { + width: 8rem; + margin-left: 6px; + /* 调整文字与圆形之间的间距 */ + font-size: 16px; + font-weight: 600; + color: #74FAFB; + } + + .status-ext-text { + margin-top: 3px; + /* 将文本转换为行内块元素 */ + font-size: 12px; + + } +} + +.progress-display { + color: white; + text-align: right; +} + +.statistic-item-container { + display: flex; + padding: 1rem 0; + color: white; +} + +.white-color-theme { + color: #74FAFB; +} \ No newline at end of file diff --git a/src/app/routes/data-v/second1/second1.component.ts b/src/app/routes/data-v/second1/second1.component.ts new file mode 100644 index 0000000..25805f7 --- /dev/null +++ b/src/app/routes/data-v/second1/second1.component.ts @@ -0,0 +1,70 @@ +import { CommonModule } from '@angular/common'; +import { Component, OnInit, ViewChild, inject } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { STColumn, STComponent } from '@delon/abc/st'; +import { SFSchema } from '@delon/form'; +import { ModalHelper, _HttpClient } from '@delon/theme'; +import { SHARED_IMPORTS } from '@shared'; +import { AgGridAngular } from 'ag-grid-angular'; +import { ColDef } from 'ag-grid-community'; // Column Definition Type Interface +import * as echarts from 'echarts'; +import { NzBadgeModule } from 'ng-zorro-antd/badge'; +import { NzListModule } from 'ng-zorro-antd/list'; +import { NzProgressModule } from 'ng-zorro-antd/progress'; +import { IMqttMessage, MqttService } from 'ngx-mqtt'; +import { Subscription } from 'rxjs'; + +import { ChartComponentComponent } from './chart-component/chart-component.component'; +import { DataVCardComponent } from '../card/card.component'; +import { Menu } from '../menu/lj-menu.interface'; +import { DataVTitleComponent } from '../title/title.component'; + +@Component({ + selector: 'app-data-v-s1', + standalone: true, + templateUrl: './second1.component.html', + styleUrls: ['./second1.component.less'], + imports: [ + CommonModule, + NzBadgeModule, + NzProgressModule, + AgGridAngular, + DataVCardComponent, + DataVTitleComponent, + NzListModule, + ...SHARED_IMPORTS, + ChartComponentComponent + ] +}) +export class DataVSecond1Component implements OnInit { + menu: Menu | null = null; + children: Menu[] | null = null; + + constructor( + private route: ActivatedRoute, + private router: Router + ) {} + + ngOnInit(): void { + const currentNavigation = this.router.getCurrentNavigation(); + if (currentNavigation?.extras.state) { + this.menu = currentNavigation.extras.state['menu']; + // 这里假设 'menu' 是事先定义好的属性，它应该是正确的键 + this.children = this.menu?.children || null; + console.log('穿带过来的菜单参数'); + console.log(this.menu); + console.log(this.children); + } + } + + // 如果需要导航到子菜单的特定页面，继续实现该逻辑 + navigateToChild(childMenu: Menu): void { + if (childMenu.link) { + this.router.navigateByUrl(childMenu.link); + } + } + + // ngOnDestroy(): void { + // this.subscription.unsubscribe(); + // } +}