yuhy
/
auseft.platform.datav
1
0
Fork 1
Código Issues 0 Pull requests 0 Versões 0 Wiki Atividade
Ver código fonte

Add：完成菜单页面的开发

master
lijie.hu 1 ano atrás
pai
794adad77d
commit
6e994dcd48
15 arquivos alterados com 492 adições e 663 exclusões
Visão unificada
Opções de diferenças
Mostrar estatísticas Baixar arquivo de patch Baixar arquivo de diferenças
  1. +16
    -7
      src/app/routes/data-v/header/header.component.ts
  2. +4
    -4
      src/app/routes/data-v/home/home.component.html
  3. +5
    -4
      src/app/routes/data-v/home/home.component.ts
  4. +1
    -0
      src/app/routes/data-v/menu/lj-menu.interface.ts
  5. +1
    -1
      src/app/routes/data-v/menu/lj-menu.service.ts
  6. +48
    -0
      src/app/routes/data-v/navigation/navigation.component.html
  7. +1
    -2
      src/app/routes/data-v/navigation/navigation.component.less
  8. +42
    -637
      src/app/routes/data-v/navigation/navigation.component.ts
  9. +16
    -8
      src/app/routes/data-v/routes.ts
  10. +1
    -0
      src/app/routes/data-v/second1/chart-component/chart-component.component.css
  11. +1
    -0
      src/app/routes/data-v/second1/chart-component/chart-component.component.html
  12. +172
    -0
      src/app/routes/data-v/second1/chart-component/chart-component.component.ts
  13. +11
    -0
      src/app/routes/data-v/second1/second1.component.html
  14. +103
    -0
      src/app/routes/data-v/second1/second1.component.less
  15. +70
    -0
      src/app/routes/data-v/second1/second1.component.ts

+ 16
- 7
src/app/routes/data-v/header/header.component.ts Ver arquivo

@@ -1,21 +1,30 @@
import { Component, OnInit, ViewChild, inject } from '@angular/core'; import { Component, OnInit, ViewChild, inject } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { STColumn, STComponent } from '@delon/abc/st'; import { STColumn, STComponent } from '@delon/abc/st';
import { SFSchema } from '@delon/form'; import { SFSchema } from '@delon/form';
import { ModalHelper, _HttpClient } from '@delon/theme'; 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 { LayoutDefaultModule } from '@delon/theme/layout-default';
import { SHARED_IMPORTS } from '@shared';

import { DataVDateComponent } from '../date/date.component'; import { DataVDateComponent } from '../date/date.component';
import { DataVNavigationComponent } from '../navigation/navigation.component';
import { RouterOutlet } from '@angular/router';
import { DataVFullScreenComponent } from '../fullscreen/fullscreen.component'; import { DataVFullScreenComponent } from '../fullscreen/fullscreen.component';
import { DataVNavigationComponent } from '../navigation/navigation.component';
import { DataVSettingComponent } from '../setting/setting.component'; import { DataVSettingComponent } from '../setting/setting.component';
import { DataVUserComponent } from '../user/user.component';


@Component({ @Component({
selector: 'app-data-v-header', selector: 'app-data-v-header',
standalone: true, 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', templateUrl: './header.component.html',
styleUrls: ['./header.component.less'] styleUrls: ['./header.component.less']
}) })
@@ -23,7 +32,7 @@ export class DataVHeaderComponent implements OnInit {
private readonly http = inject(_HttpClient); private readonly http = inject(_HttpClient);
private readonly modal = inject(ModalHelper); private readonly modal = inject(ModalHelper);


ngOnInit(): void { }
ngOnInit(): void {}


add(): void { add(): void {
// this.modal // this.modal


+ 4
- 4
src/app/routes/data-v/home/home.component.html Ver arquivo

@@ -1,9 +1,9 @@
<div class="home-container"> <div class="home-container">
<app-data-v-header></app-data-v-header>
<data-v-navigation></data-v-navigation>
<app-data-v-header />
<data-v-navigation />


<img src="assets/dashboard/dashboard_menu.jpg" style="width: 100%; height: 1.8rem;" />
<img src="assets/dashboard/dashboard_menu.jpg" style="width: 100%; height: 1.8rem" />
<div class="router-outlet-container"> <div class="router-outlet-container">
<router-outlet /> <router-outlet />
</div> </div>
</div>
</div>

+ 5
- 4
src/app/routes/data-v/home/home.component.ts Ver arquivo

@@ -1,14 +1,15 @@
import { Component, OnInit, ViewChild, inject } from '@angular/core'; import { Component, OnInit, ViewChild, inject } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { STColumn, STComponent } from '@delon/abc/st'; import { STColumn, STComponent } from '@delon/abc/st';
import { SFSchema } from '@delon/form'; import { SFSchema } from '@delon/form';
import { ModalHelper, _HttpClient } from '@delon/theme'; 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 { LayoutDefaultModule } from '@delon/theme/layout-default';
import { SHARED_IMPORTS } from '@shared';

import { DataVDateComponent } from '../date/date.component'; import { DataVDateComponent } from '../date/date.component';
import { DataVNavigationComponent } from '../navigation/navigation.component';
import { RouterOutlet } from '@angular/router';
import { DataVHeaderComponent } from '../header/header.component'; import { DataVHeaderComponent } from '../header/header.component';
import { DataVNavigationComponent } from '../navigation/navigation.component';
import { DataVUserComponent } from '../user/user.component';


@Component({ @Component({
selector: 'app-data-v-home', selector: 'app-data-v-home',


+ 1
- 0
src/app/routes/data-v/menu/lj-menu.interface.ts Ver arquivo

@@ -1,4 +1,5 @@
export interface Menu { export interface Menu {
selected?: boolean;
menuCode: string; menuCode: string;
text: string; text: string;
link?: any; link?: any;


+ 1
- 1
src/app/routes/data-v/menu/lj-menu.service.ts Ver arquivo

@@ -11,6 +11,6 @@ export class MenuService {
constructor(private http: HttpClient) {} constructor(private http: HttpClient) {}


getMenus(): Observable<Menu[]> { getMenus(): Observable<Menu[]> {
return this.http.get<Menu[]>('path/to/your/api');
return this.http.get<Menu[]>('/api/main/menu?ClientId=Platform_Datav');
} }
} }

+ 48
- 0
src/app/routes/data-v/navigation/navigation.component.html Ver arquivo

@@ -0,0 +1,48 @@
<div class="navigation-container">
<ul>
<!-- Always display the "My Workstation" menu -->
<ng-container id="parent-menu" *ngFor="let menu of menuNetDataList">
<li
class="dropdown-submenu"
(mouseover)="menuOver(menu, $event)"
*ngIf="!selectedParentMenu || menu.menuCode === 'Home' || (selectedParentMenu && selectedParentMenu.menuCode == 'Home')"
>
<a href="javascript:void(0);" class="menu-group" [class.active]="isActive(true)" (click)="navigate(menu)">
{{ menu.text }}
</a>
</li>
</ng-container>
<!-- If a menu is selected, display its submenu -->
<ng-container id="children-menu" *ngFor="let menu of menuNetDataList">
<li
class="dropdown-submenu"
(mouseover)="menuOver(menu, $event)"
*ngIf="menu.rootFlag && selectedParentMenu && menu.menuCode == selectedParentMenu.menuCode && menu.menuCode !== 'Home'"
>
<!-- <a href="javascript:void(0);" class="menu-group" [class.active]="isActive(true)" (click)="navigate(menu)">
{{ menu.text }}
</a> -->
<ul *ngIf="menu.children && menu.children.length > 0">
<li *ngFor="let child of menu.children">
<ng-container *ngIf="child.children && child.children.length > 0">
<a nz-dropdown [nzDropdownMenu]="childMenu">
{{ child.text }}
<span nz-icon nzType="down"></span>
</a>
<nz-dropdown-menu #childMenu="nzDropdownMenu">
<ul nz-menu nzSelectable>
<li nz-menu-item *ngFor="let subItem of child.children" (click)="navigate(subItem)">
{{ subItem.text }}
</li>
</ul>
</nz-dropdown-menu>
</ng-container>
<ng-container *ngIf="!child.children || child.children.length === 0">
<a href="javascript:void(0);" (click)="navigate(child)">{{ child.text }}</a>
</ng-container>
</li>
</ul>
</li>
</ng-container>
</ul>
</div>

+ 1
- 2
src/app/routes/data-v/navigation/navigation.component.less Ver arquivo

@@ -9,7 +9,7 @@ ul {
display: inline-flex; display: inline-flex;
width: max-content; width: max-content;
margin-right: auto; margin-right: auto;
margin-bottom: 0rem;
margin-bottom: 0;


li { li {
display: inline-flex; display: inline-flex;
@@ -86,7 +86,6 @@ ul {
} }


&.dev-mode { &.dev-mode {

a:hover, a:hover,
a:active, a:active,
a.active { a.active {


+ 42
- 637
src/app/routes/data-v/navigation/navigation.component.ts Ver arquivo

@@ -5,6 +5,7 @@ import { STColumn, STComponent } from '@delon/abc/st';
import { SFSchema } from '@delon/form'; import { SFSchema } from '@delon/form';
import { ModalHelper, _HttpClient } from '@delon/theme'; import { ModalHelper, _HttpClient } from '@delon/theme';
import { SHARED_IMPORTS } from '@shared'; import { SHARED_IMPORTS } from '@shared';
import { NzDropDownModule } from 'ng-zorro-antd/dropdown';


import { Menu } from '../menu/lj-menu.interface'; import { Menu } from '../menu/lj-menu.interface';
import { MenuService } from '../menu/lj-menu.service'; import { MenuService } from '../menu/lj-menu.service';
@@ -13,13 +14,7 @@ import { MenuService } from '../menu/lj-menu.service';
selector: 'data-v-navigation', selector: 'data-v-navigation',
standalone: true, standalone: true,
imports: [RouterOutlet, CommonModule, ...SHARED_IMPORTS], imports: [RouterOutlet, CommonModule, ...SHARED_IMPORTS],
template: ` <div class="navigation-container">
<ul>
<li class="dropdown-submenu" *ngFor="let menu of menuNetDataList" (mouseover)="menuOver(menu, $event)">
<a href="javascript:void(0);" class="menu-group" [class.active]="isActive(true)" (click)="navigate(menu)">{{ menu.text }}</a>
</li>
</ul>
</div>`,
templateUrl: './navigation.component.html',
styleUrls: ['./navigation.component.less'] styleUrls: ['./navigation.component.less']
}) })
export class DataVNavigationComponent implements OnInit { export class DataVNavigationComponent implements OnInit {
@@ -27,7 +22,8 @@ export class DataVNavigationComponent implements OnInit {
private readonly modal = inject(ModalHelper); private readonly modal = inject(ModalHelper);
private readonly router = inject(Router); private readonly router = inject(Router);
menuNetDataList: Menu[] = []; menuNetDataList: Menu[] = [];

// 添加一个属性来标记是否有菜单被选中
selectedParentMenu: Menu | undefined;
imageUrl: string = 'assets/dashboard/menu_btn_l.png'; imageUrl: string = 'assets/dashboard/menu_btn_l.png';
title: string = 'Label'; title: string = 'Label';


@@ -35,10 +31,6 @@ export class DataVNavigationComponent implements OnInit {
constructor(private menuService: MenuService) {} constructor(private menuService: MenuService) {}


ngOnInit(): void { ngOnInit(): void {
// this.menuService.getMenus().subscribe((menus: Menu[]) => {
// this.menuNetDataList = menus;
// // this.menuList;
// });
this.menuNetDataList = [ this.menuNetDataList = [
{ {
menuCode: 'Home', menuCode: 'Home',
@@ -58,642 +50,55 @@ export class DataVNavigationComponent implements OnInit {
clientId: 'Platform_Datav', clientId: 'Platform_Datav',
acl: null, acl: null,
id: '3a1167f1-a86c-194d-eabf-258993a337ac' 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 {} add(): void {}


menuOver(menu: any, $event: any) {} menuOver(menu: any, $event: any) {}


isActive(menu: any) {} isActive(menu: any) {}


// 新的 navigate 方法
navigate(menu: any) { 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); 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'替换为正确的路径
// }
} }
} }

+ 16
- 8
src/app/routes/data-v/routes.ts Ver arquivo

@@ -1,15 +1,23 @@
import { Routes } from '@angular/router'; import { Routes } from '@angular/router';
import { DataVHomeComponent } from './home/home.component';
import { DataVUserComponent } from './user/user.component';

import { DataVDateComponent } from './date/date.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 { DataVS1Component } from './s1/s1.component';
import { DataVSecond1Component } from './second1/second1.component';
import { DataVThreejsComponent } from './threejs/threejs.component'; import { DataVThreejsComponent } from './threejs/threejs.component';
import { DataVUserComponent } from './user/user.component';
import { DataVWorkstationComponent } from './workstation/workstation.component';


export const routes: Routes = [ 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 }
];

+ 1
- 0
src/app/routes/data-v/second1/chart-component/chart-component.component.css Ver arquivo

@@ -0,0 +1 @@

+ 1
- 0
src/app/routes/data-v/second1/chart-component/chart-component.component.html Ver arquivo

@@ -0,0 +1 @@
<div #chart style="width: 100%; height: 100%;"></div>

+ 172
- 0
src/app/routes/data-v/second1/chart-component/chart-component.component.ts Ver arquivo

@@ -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);
}
}
}

+ 11
- 0
src/app/routes/data-v/second1/second1.component.html Ver arquivo

@@ -0,0 +1,11 @@
<!-- MenuOverviewComponent 模板 -->

<div *ngIf="children && children.length">
<!-- 这里我们创建一个二级导航菜单，它将遍历所有的子菜单项 -->
<ul>
<li *ngFor="let child of children">
<!-- 此处的 routerLink 应根据你的路由结构进行调整 -->
<a [routerLink]="child.link">{{ child.text }}</a>
</li>
</ul>
</div>

+ 103
- 0
src/app/routes/data-v/second1/second1.component.less Ver arquivo

@@ -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;
}

+ 70
- 0
src/app/routes/data-v/second1/second1.component.ts Ver arquivo

@@ -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();
// }
}

Escrever Pré-visualização
Carregando…
Cancelar
Salvar