Fix：修复菜单子级菜单太多直接换行的问题

src/app/routes/data-v/card/card.component.ts

@@ -2,8 +2,8 @@
 import { CommonModule } from '@angular/common';
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { SHARED_IMPORTS } from '@shared';
-import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import { NzIconModule } from 'ng-zorro-antd/icon';
 @Component({
   selector: 'data-v-card',
   standalone: true,
@@ -13,31 +13,30 @@ import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
 
       <div class="card-content-title">
         <div class="card-content-l">{{ title }}</div>
-        <div *ngIf="showSetting" class="card-content-r">         
+        <div *ngIf="showSetting" class="card-content-r">
           <a nz-dropdown [nzDropdownMenu]="menu" nz-icon nzType="setting" nzTrigger="click" nzTheme="outline"></a>
           <nz-dropdown-menu #menu="nzDropdownMenu">
             <ul nz-menu nzSelectable>
               <li nz-menu-item *ngFor="let option of optionsList">
-                <label nz-checkbox [(ngModel)]="option.checked" (ngModelChange)="onCheckChange()">{{option.label}}</label>
+                <label nz-checkbox [(ngModel)]="option.checked" (ngModelChange)="onCheckChange()">{{ option.label }}</label>
               </li>
             </ul>
-          </nz-dropdown-menu> 
-        </div>    
-       
+          </nz-dropdown-menu>
+        </div>
       </div>
 
-      <ng-content></ng-content>
+      <ng-content />
     </div>
   `,
   styleUrls: ['./card.component.less'],
-  imports: [NzIconModule, CommonModule, NzDropDownModule, ...SHARED_IMPORTS],
+  imports: [NzIconModule, CommonModule, NzDropDownModule, ...SHARED_IMPORTS]
 })
 export class DataVCardComponent {
   @Input() showSetting = false;
   @Input()
-  optionsList: { label: string; checked: boolean; }[] = [];
+  optionsList: Array<{ label: string; checked: boolean }> = [];
   // 定义输出事件
-  @Output() onCheckedItemsChange = new EventEmitter<{ label: string, checked: boolean }[]>();
+  @Output() onCheckedItemsChange = new EventEmitter<Array<{ label: string; checked: boolean }>>();
   @Input() title: string = '';
   getCheckedItems() {
     return this.optionsList.filter(option => option.checked);

src/app/routes/data-v/lj-card/lj-card.component.html

@@ -0,0 +1,9 @@
+<div class="card-content">
+  <!-- <img src="assets/dashboard/dashboard_card_bg.jpg" style="width: 100%;" /> -->
+
+  <div class="card-content-title">
+    <div class="card-content-l">{{ title }}</div>
+  </div>
+
+  <ng-content />
+</div>

src/app/routes/data-v/lj-card/lj-card.component.less

@@ -0,0 +1,48 @@
+.card-content-title {
+    width:fit-content;
+    height:fit-content; 
+    padding: 5px 20px 0; /* 文本的内边距 */ 
+    font-size: 16px; /* 根据需要调整字体大小
+    font-weight: bold; /* 字体加粗 */
+    color: #29b6f6; /* 字体颜色 */
+    text-align: center; /* 文本居中对齐 */
+    background-color: #19426E; /* 设置背景颜色为深蓝色 */
+    border: 1px solid #1f6f97; /* 设置边框颜色 */
+    border-radius: 10px 10px 0 0; /* 上面是圆角，下面是直角 */
+    box-shadow: inset 0 0 10px #1f6f97; /* 内阴影效果 */
+  }
+
+.card-content {
+    overflow: hidden;
+    margin-bottom: 0.5rem;
+    //height: 18rem;
+    padding: 1rem 1.5rem;
+    //position: relative;
+    background-image: url('../../../../assets/dashboard/dashboard_card_bg.jpg');
+    background-repeat: no-repeat; /* 防止背景图片重复 */
+    background-position: center;
+    // background-position: top;
+    background-size: 100% 100%;
+    // background-size: cover;
+    // background-size: cover;
+    // background-size: contain; /* 保证背景图片完整显示 */
+
+    .card-content-title {
+        display: flex;
+        margin-bottom: 0.5rem;
+        font-size: 18px;
+        font-weight: 600;
+        color: #74FAFB;
+
+        .card-content-l {
+            flex: 1;
+            align-self: flex-start;
+
+            /* 占据剩余空间 */
+        }
+
+        .card-content-r {
+            align-self: flex-end;
+        }
+    }
+}

src/app/routes/data-v/lj-card/lj-card.component.ts

@@ -0,0 +1,29 @@
+// parent.component.ts
+import { CommonModule } from '@angular/common';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { SHARED_IMPORTS } from '@shared';
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+@Component({
+  selector: 'lj-data-v-card',
+  standalone: true,
+  templateUrl: './lj-card.component.html',
+  styleUrls: ['./lj-card.component.less'],
+  imports: [NzIconModule, CommonModule, NzDropDownModule, ...SHARED_IMPORTS]
+})
+export class LJDataVCardComponent {
+  @Input() showSetting = false;
+  @Input()
+  optionsList: Array<{ label: string; checked: boolean }> = [];
+  // 定义输出事件
+  @Output() onCheckedItemsChange = new EventEmitter<Array<{ label: string; checked: boolean }>>();
+  @Input() title: string = '';
+  getCheckedItems() {
+    return this.optionsList.filter(option => option.checked);
+  }
+
+  onCheckChange() {
+    const checkedItems = this.getCheckedItems();
+    this.onCheckedItemsChange.emit(checkedItems);
+  }
+}

src/app/routes/data-v/menu/lj-menu.interface.ts

@@ -17,4 +17,5 @@ export interface Menu {
   children?: Menu[];
   acl?: any;
   id: string;
+  childShowType: string; //展示类型
 }

src/app/routes/data-v/navigation/navigation.component.html

@@ -1,47 +1,52 @@
 <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)">
-          <img *ngIf="menu.icon" width="20" src="assets/{{ menu.icon }}" alt="{{ menu.text }}" />
-          {{ menu.menuCode == 'Home' && selectedParentMenu && selectedParentMenu.menuCode != 'Home' ? '/ ' + selectedParentMenu.text : '' }}
-          {{ menu.menuCode != 'Home' ? menu.text : '' }}
-        </a>
+    <ng-container id="parent-menu" *ngFor="let menu of visibleMenuList">
+      <li class="dropdown-submenu" (mouseover)="menuOver(menu, $event)">
+        <ng-container *ngIf="menu.childShowType == 'menu'">
+          <a href="javascript:void(0);" class="menu-group" [class.active]="isActive(true)" (click)="navigate(menu)">
+            <img
+              *ngIf="menu.icon"
+              width="20"
+              src="assets/{{ menu.icon.includes('svg') ? menu.icon : menu.icon + '.svg' }}"
+              alt="{{ menu.text }}"
+            />
+            {{
+              menu.menuCode == 'Home' && selectedParentMenu && selectedParentMenu.menuCode != 'Home' ? '/ ' + selectedParentMenu.text : ''
+            }}
+            {{ menu.menuCode != 'Home' ? menu.text : '' }}
+          </a>
+        </ng-container>
+        <ng-container *ngIf="menu.childShowType == 'drop-down'">
+          <ng-container *ngIf="menu.children && menu.children.length > 0; else noChildren">
+            <a nz-dropdown class="menu-group" [nzDropdownMenu]="childMenu">
+              {{ menu.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 menu.children" (click)="navigate(subItem)">
+                  {{ subItem.text }}
+                </li>
+              </ul>
+            </nz-dropdown-menu>
+          </ng-container>
+
+          <ng-template #noChildren>
+            <a href="javascript:void(0);" class="menu-group" [class.active]="isActive(true)" (click)="navigate(menu)">
+              <img
+                *ngIf="menu.icon"
+                width="20"
+                src="assets/{{ menu.icon.includes('svg') ? menu.icon : menu.icon + '.svg' }}"
+                alt="{{ menu.text }}"
+              />
+
+              {{ menu.menuCode != 'Home' ? menu.text : '' }}
+            </a>
+          </ng-template>
+        </ng-container>
       </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'"
-      >
-        <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>

src/app/routes/data-v/navigation/navigation.component.less

@@ -2,52 +2,14 @@
 .navigation-container {
   // overflow-x: auto; /* 水平方向上的滚动条 */
   display: flex;
-  flex-direction: row;
+  // flex-flow: row wrap;     /* 允许换行 */
+  flex-wrap: nowrap; /* 不允许换行 */
   // width: 100%;
   padding-left: 2rem;
-  // white-space: nowrap; /* 防止菜单项换行 */
-  white-space: normal;
+  white-space: nowrap; /* 防止菜单项换行 */
+  // white-space: normal;
 }
 
-// .navigation-container .dropdown-submenu {
-//   white-space: normal; /* 允许内容换行 */
-// }
-
-// /* 调整滚动条大小 */
-// ::-webkit-scrollbar {
-//   width: 8px; /* 调整滚动条的宽度 */
-//   height: 8px; /* 调整滚动条的高度 */
-// // }
-
-// /* 调整滚动条轨道的样式 */
-// ::-webkit-scrollbar-track {
-//   background: #f1f1f1;
-//   border-radius: 4px;
-// }
-
-// /* 调整滚动条滑块的样式 */
-// ::-webkit-scrollbar-thumb {
-//   background: #888;
-//   border-radius: 4px;
-// }
-
-// /* 当鼠标悬停在滑块上时，改变滑块的颜色 */
-// ::-webkit-scrollbar-thumb:hover {
-//   background: #555;
-// }
-
-// /* 调整菜单与滚动条的间距 */
-// .navigation-container ul {
-//   padding-right: 12px; /* 增加右侧内边距以增加间距 */
-// }
-
-// .dropdown-submenu {
-//   display: inline-block; /* 使菜单项在一行内显示 */
-// }
-
-// .scrollable-menu ul {
-  // padding-right: 20px; /* 右侧内边距，根据需要调整 */
-// }
 
 [nz-button] {
   margin-right: 8px;
@@ -58,35 +20,27 @@
   margin-right: 0;
 }
 
-// ul.nz-menu {
-//   padding-left: 0;
-// }
-
 ul {
-  display: flex;
+  display: inline-flex;
   flex-wrap: wrap; /* 允许子元素换行 */
-  // justify-content: space-around;
-  // width: max-content;
-  // margin-right: auto;
   margin-bottom: 10px;
-
-  // nz-menu {
     padding-top: 0;
     padding-left: 0;
+  list-style-type: none; /* 移除标记 */
    
 
-  // }
+
 
   li {
     // display: flex;
     flex-wrap: wrap;
     margin-right: 10px;
-    margin-bottom: 10px;
+    margin-bottom: 30px;
 
     a {
       clear: both;
-      display: block;
-      width: 100%;
+      // display: inline-block;
+      // width: 100%;
       min-width: 4rem;
       margin-right: 1rem;
       padding: 0.5rem 1.5rem;
@@ -108,6 +62,10 @@ ul {
     }
 
     .dropdown-menu {
+      display: inline-flex;
+      flex-wrap: nowrap;
+      margin-right: 10px;
+      margin-bottom: 10px;
       color: #fff;
       background-color: #337AB7;
     }

src/app/routes/data-v/navigation/navigation.component.ts

@@ -22,8 +22,10 @@ export class DataVNavigationComponent implements OnInit {
   private readonly modal = inject(ModalHelper);
   private readonly router = inject(Router);
   menuNetDataList: Menu[] = [];
+  visibleMenuList: Menu[] = []; // 新建一个用于存放要显示的菜单项的列表
   // 添加一个属性来标记是否有菜单被选中
   selectedParentMenu: Menu | undefined;
+
   imageUrl: string = 'assets/dashboard/menu_btn_l.png';
   title: string = 'Label';
 
@@ -48,14 +50,31 @@ export class DataVNavigationComponent implements OnInit {
         parentId: null,
         clientId: 'Platform_Datav',
         acl: null,
+        childShowType: 'menu',
         id: '3a1167f1-a86c-194d-eabf-258993a337ac'
       }
     ];
     this.menuService.getMenus().subscribe((menus: Menu[]) => {
+      for (let menu of menus) {
+        // console.log(menu);
+        if (menu.children && menu.children.length > 0) {
+          for (let tempMenu of menu.children) {
+            tempMenu.childShowType = 'menu';
+            if (tempMenu.children) {
+              // 检查 tempMenu 是否有 children 属性
+              for (let tempChildMenu of tempMenu.children) {
+                tempChildMenu.childShowType = 'drop-down';
+                console.log(tempChildMenu.text);
+                console.log(tempChildMenu.children);
+              }
+            }
+            this.menuNetDataList.push(tempMenu);
+          }
+        }
+      }
       console.log('this.menuNetDataList');
 
-      this.menuNetDataList = this.menuNetDataList.concat(menus);
-
+      this.updateVisibleMenuList(); // 更新要显示的菜单列表
       console.log(this.menuNetDataList);
       // this.menuList;
     });
@@ -67,17 +86,39 @@ export class DataVNavigationComponent implements OnInit {
   //   console.log(this.hasSelectedMenu);
   // }
   add(): void {}
+  // 计算属性，返回需要显示的菜单列表
+
+  // 更新要显示的菜单列表的方法
+  updateVisibleMenuList(): void {
+    this.visibleMenuList = this.menuNetDataList.filter(
+      menu => !this.selectedParentMenu || menu.menuCode == 'Home' || (this.selectedParentMenu && this.selectedParentMenu.menuCode == 'Home')
+    );
+    this.menuNetDataList.forEach(menu => {
+      if (
+        menu.childShowType == 'menu' &&
+        this.selectedParentMenu &&
+        menu.menuCode == this.selectedParentMenu.menuCode &&
+        menu.menuCode !== 'Home'
+      ) {
+        this.visibleMenuList = this.visibleMenuList.concat(menu.children || []);
+      }
+    });
+    console.log('visibleMenuList');
+    console.log(this.visibleMenuList);
+  }
 
   menuOver(menu: any, $event: any) {}
 
   isActive(menu: any) {}
 
   navigate(menu: any) {
+    console.log('点击menu');
+    console.log(menu);
     // 清除所有菜单的选中状态
     this.menuNetDataList.forEach(m => (m.selected = false));
 
     // 如果是一级菜单并且有子菜单，则导航到新页面并传递数据
-    if (menu.link && menu.rootFlag && menu.children && menu.children.length > 0) {
+    if (menu.link && menu.childShowType == 'menu' && menu.children && menu.children.length > 0) {
       console.log('来时跳转2级');
       console.log(menu.link);
       console.log(menu.children);
@@ -85,19 +126,24 @@ export class DataVNavigationComponent implements OnInit {
       // 设置当前菜单为选中状态
       menu.selected = true;
       this.selectedParentMenu = menu;
-
-      this.router.navigate([menu.link, menu.id], {
-        state: { menu: menu.children }
-      });
+      if (menu.link)
+        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);
+      if (menu.link) this.router.navigateByUrl(menu.link);
     } else {
       menu.selected = true;
-      this.router.navigate([menu.link, menu.id], {
-        state: { menu: menu.children }
-      });
+      console.log('路由');
+      console.log(menu.link);
+      if (menu.link)
+        this.router.navigate([menu.link, menu.id], {
+          state: { menu: menu.children }
+        });
     }
+    // 根据新的选中项更新要显示的菜单列表
+    this.updateVisibleMenuList();
   }
 }

src/app/routes/data-v/s1/s1.component.html

@@ -18,24 +18,24 @@
     </data-v-card>
 
     <data-v-card title="系统操作记录" style="margin-top: 1rem">
-      <ag-grid-angular [rowData]="rowData" [columnDefs]="colDefs1" class="ag-theme-datav"> </ag-grid-angular>
+      <ag-grid-angular [rowData]="rowData" [columnDefs]="colDefs1" class="ag-theme-datav" />
     </data-v-card>
 
     <data-v-card title="系统报警信息" style="margin-top: 1rem">
-      <ag-grid-angular [rowData]="rowData" [columnDefs]="colDefs2" class="ag-theme-datav"> </ag-grid-angular>
+      <ag-grid-angular [rowData]="rowData" [columnDefs]="colDefs2" class="ag-theme-datav" />
     </data-v-card>
 
     <data-v-card title="" style="margin-top: 1rem">
       <!-- <div class="progress-display">完成样品数量/时长 16/8</div> -->
       <div class="progress-container">
         <span class="status-text">化验效率：</span>
-        <nz-progress [nzPercent]="64" [nzStrokeColor]="'#74FAFB'" style="width: 100%"></nz-progress>
+        <nz-progress [nzPercent]="64" [nzStrokeColor]="'#74FAFB'" style="width: 100%" />
         <span class="status-ext-text">（16/25）</span>
       </div>
 
       <div class="progress-container mt-sm">
         <span class="status-text">完 成 率 ：</span>
-        <nz-progress [nzPercent]="60" [nzStrokeColor]="'#74FAFB'" style="width: 100%"></nz-progress>
+        <nz-progress [nzPercent]="60" [nzStrokeColor]="'#74FAFB'" style="width: 100%" />
         <span class="status-ext-text">（12/20）</span>
       </div>
     </data-v-card>
@@ -59,27 +59,33 @@
   </div>
 
   <div nz-col nzSpan="8">
-    <data-v-card title="化验结果" [showSetting]="true" [optionsList]="chartConfig.optionsCheckList"
-      (onCheckedItemsChange)="handleCheckedItems($event)">
+    <data-v-card
+      title="化验结果"
+      [showSetting]="true"
+      [optionsList]="chartConfig.optionsCheckList"
+      (onCheckedItemsChange)="handleCheckedItems($event)"
+    >
       <div nz-row class="scrollable-container">
         @for (item of chartConfig.optionsCheckList; track item) {
-        <div nz-col [nzSpan]="24 / chartConfig.rowNumber" *ngIf="item.checked" class="centered-element">
-          <!-- 添加上下外边距 -->
-          <app-chart-component [options]="item.options"
-            [style]="{'margin': '20px ' + (20 / chartConfig.rowNumber) + 'px','width': '100%', 'height': '16rem'}"
-            *ngIf="item.checked" />
-        </div>
+          <div nz-col [nzSpan]="24 / chartConfig.rowNumber" *ngIf="item.checked" class="centered-element">
+            <!-- 添加上下外边距 -->
+            <app-chart-component
+              [options]="item.options"
+              [style]="{ margin: '20px ' + 20 / chartConfig.rowNumber + 'px', width: '100%', height: '16rem' }"
+              *ngIf="item.checked"
+            />
+          </div>
         }
       </div>
       <div nz-row>
         @for (item of chartConfig.optionBottomList; track item) {
-        <div nz-col nzSpan="12">
-          <div class="centered-element" style="margin: 2px">
-            <app-chart-component [options]="item" style="width: 26rem; height: 11rem; margin-left: 0.4rem" />
+          <div nz-col nzSpan="12">
+            <div class="centered-element" style="margin: 2px">
+              <app-chart-component [options]="item" style="width: 26rem; height: 11rem; margin-left: 0.4rem" />
+            </div>
           </div>
-        </div>
         }
       </div>
     </data-v-card>
   </div>
-</div>
+</div>

src/app/routes/data-v/workstation/ag-grid-component/ag-grid-component.component.html

@@ -1,13 +1,27 @@
-<ag-grid-angular #myGrid [class]="gridThemeClass" [pagination]="true" [suppressPaginationPanel]="true"
-  [suppressPaginationPanel]="true" [suppressScrollOnNewData]="true" [paginationPageSize]="pageSize"
-  [defaultColDef]="defaultColDef" [rowData]="rowData" [columnDefs]="columnDefs">
-</ag-grid-angular>
+<ag-grid-angular
+  #myGrid
+  [class]="gridThemeClass"
+  [pagination]="true"
+  [suppressPaginationPanel]="true"
+  [suppressPaginationPanel]="true"
+  [suppressScrollOnNewData]="true"
+  [paginationPageSize]="pageSize"
+  [defaultColDef]="defaultColDef"
+  [rowData]="rowData"
+  [columnDefs]="columnDefs"
+/>
 
 <br />
 <!-- 分页 -->
 <div class="grid-pagination">
   <div class="page-total-style">共 {{ pageRowTotal }} 项数据</div>
-  <nz-pagination [nzPageIndex]="pageIndex" [nzPageSize]="pageSize" [nzTotal]="pageRowTotal"
-    (nzPageSizeChange)="nzPageSizeChange($event)" (nzPageIndexChange)="nzPageIndexChange($event)"
-    [className]="paginationThemeClass" nzShowSizeChanger />
-</div>
+  <nz-pagination
+    [nzPageIndex]="pageIndex"
+    [nzPageSize]="pageSize"
+    [nzTotal]="pageRowTotal"
+    (nzPageSizeChange)="nzPageSizeChange($event)"
+    (nzPageIndexChange)="nzPageIndexChange($event)"
+    [className]="paginationThemeClass"
+    nzShowSizeChanger
+  />
+</div>

src/app/routes/data-v/workstation/ag-grid-component/ag-grid-component.component.ts

@@ -1,17 +1,13 @@
 import { Component, OnInit, ViewChild, Input } from '@angular/core';
-
 import { AgGridAngular } from 'ag-grid-angular';
-import { ColDef } from 'ag-grid-community';
-import {
-  GridApi,
-} from 'ag-grid-community';
+import { ColDef, GridApi } from 'ag-grid-community';
 import { NzPaginationModule } from 'ng-zorro-antd/pagination';
 @Component({
   selector: 'app-ag-grid-component',
   imports: [AgGridAngular, NzPaginationModule],
   standalone: true,
   templateUrl: './ag-grid-component.component.html',
-  styleUrls: ["./pagination-style/pagination.less"]
+  styleUrls: ['./pagination-style/pagination.less']
 })
 export class AgGridComponentComponent implements OnInit {
   @ViewChild('myGrid') grid!: AgGridAngular;
@@ -25,17 +21,17 @@ export class AgGridComponentComponent implements OnInit {
   //默认列配置
   @Input() defaultColDef: ColDef = {
     width: 130,
-    editable: false,
+    editable: false
   };
   /** 列头 */
   @Input() columnDefs: ColDef[] = [];
   /**行数据 */
   @Input() rowData: any[] = [];
   /**表格主题 */
-  @Input() gridThemeClass: string = "ag-theme-quartz"
-  @Input() paginationThemeClass: string = "ag-theme-quartz"
+  @Input() gridThemeClass: string = 'ag-theme-quartz';
+  @Input() paginationThemeClass: string = 'ag-theme-quartz';
   /** 构造函数 */
-  constructor() { }
+  constructor() {}
   /**初始化 */
   ngOnInit() {
     console.log('-----表格初始化-----');
@@ -46,11 +42,10 @@ export class AgGridComponentComponent implements OnInit {
   //每页数
   nzPageSizeChange(_pageSize: any) {
     this.pageSize = _pageSize;
-
   }
   //当前页
   nzPageIndexChange(_pageIndex: any) {
-    console.log("nzPageIndexChange" + _pageIndex)
+    console.log(`nzPageIndexChange${_pageIndex}`);
     if (this.grid.api) {
       if (_pageIndex == 1) {
         /**去首页 */
@@ -61,5 +56,4 @@ export class AgGridComponentComponent implements OnInit {
       }
     }
   }
-
 }

src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.html

@@ -0,0 +1,30 @@
+<!-- <label class="custom-label">Your Label</label> -->
+<lj-data-v-card nz-col nzSpan="24" nzXs="24" nzSm="24" nzMd="12" nzLg="12" nzXl="12" nzXXl="12" title="待办任务">
+  <ag-grid-angular
+    #myGrid
+    [class]="gridThemeClass"
+    [pagination]="true"
+    [suppressPaginationPanel]="true"
+    [suppressPaginationPanel]="true"
+    [suppressScrollOnNewData]="true"
+    [paginationPageSize]="pageSize"
+    [defaultColDef]="defaultColDef"
+    [rowData]="rowData"
+    [columnDefs]="columnDefs"
+  />
+
+  <br />
+  <!-- 分页 -->
+  <div class="grid-pagination">
+    <div class="page-total-style">共 {{ pageRowTotal }} 项数据</div>
+    <nz-pagination
+      [nzPageIndex]="pageIndex"
+      [nzPageSize]="pageSize"
+      [nzTotal]="pageRowTotal"
+      (nzPageSizeChange)="nzPageSizeChange($event)"
+      (nzPageIndexChange)="nzPageIndexChange($event)"
+      [className]="paginationThemeClass"
+      nzShowSizeChanger
+    />
+  </div>
+</lj-data-v-card>

src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.less

@@ -0,0 +1,18 @@
+/* Core Grid CSS */
+@import 'ag-grid-community/styles/ag-grid.css';
+@import 'ag-grid-community/styles/ag-theme-quartz.css';
+
+.custom-label {
+    display: inline-block;
+    padding: 10px 20px; /* 内边距 */
+    font-size: 16px; /* 字体大小 */
+    color: white; /* 文字颜色 */
+    background-color: rgb(0 0 0 / 50%); /* 半透明黑色背景 */
+    border-radius: 10px 10px 0 0; /* 上方圆角 */
+  }
+
+  .my-grid-font {
+    font-size: 16px;
+    font-weight: bold;
+  }
+  

src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.ts

@@ -0,0 +1,64 @@
+import { Component, OnInit, ViewChild, Input } from '@angular/core';
+import { AgGridAngular } from 'ag-grid-angular';
+import { ColDef, GridApi } from 'ag-grid-community';
+import { NzPaginationModule } from 'ng-zorro-antd/pagination';
+
+import { LJDataVCardComponent } from '../../lj-card/lj-card.component';
+@Component({
+  selector: 'lj-app-ag-grid-component',
+  imports: [AgGridAngular, NzPaginationModule, LJDataVCardComponent],
+  standalone: true,
+  templateUrl: './lj-ag-grid-component.component.html',
+  styleUrls: ['./pagination-style/pagination.less']
+})
+export class LjAgGridComponentComponent implements OnInit {
+  [x: string]: any;
+  @ViewChild('myGrid') grid!: AgGridAngular;
+
+  /**每页数 */
+  public pageSize!: number;
+  /**当前页 */
+  public pageIndex!: number;
+  /**总数 */
+  public pageRowTotal!: number;
+
+  //默认列配置
+  @Input() defaultColDef: ColDef = {
+    width: 130,
+    editable: false,
+    cellStyle: { 'font-weight': 'bold' }
+  };
+  /** 列头 */
+  @Input() columnDefs: ColDef[] = [];
+  /**行数据 */
+  @Input() rowData: any[] = [];
+  /**表格主题 */
+  @Input() gridThemeClass: string = 'ag-theme-quartz';
+  @Input() paginationThemeClass: string = 'ag-theme-quartz';
+  /** 构造函数 */
+  constructor() {}
+  /**初始化 */
+  ngOnInit() {
+    console.log('-----表格初始化-----');
+    this.pageSize = 10;
+    this.pageIndex = 1;
+    this.pageRowTotal = this.rowData.length;
+  }
+  //每页数
+  nzPageSizeChange(_pageSize: any) {
+    this.pageSize = _pageSize;
+  }
+  //当前页
+  nzPageIndexChange(_pageIndex: any) {
+    console.log(`nzPageIndexChange${_pageIndex}`);
+    if (this.grid.api) {
+      if (_pageIndex == 1) {
+        /**去首页 */
+        this.grid.api.paginationGoToFirstPage();
+      } else {
+        /** 页面跳转 */
+        this.grid.api.paginationGoToPage(_pageIndex);
+      }
+    }
+  }
+}

src/app/routes/data-v/workstation/lj-ag-grid-component/pagination-style/pagination.less

@@ -0,0 +1,94 @@
+/* 分页器 */
+.grid-pagination {
+    display: flex;
+    justify-content: space-between;
+    height: 32px;
+}
+
+// 第几条 文字
+.grid-pagination ::ng-deep .ant-select-selection-item,
+.ant-select-selector {
+    color: #00eff8;
+    border-color: #00eff8;
+    border-width: 2px;
+}
+
+//总数
+.grid-pagination ::ng-deep .page-total-style {
+    font-size: medium;
+    font-weight: 700;
+    color: #00eff8;
+}
+
+//页面尺寸选中
+::ng-deep .ant-select-item-option {
+    color: #00eff8 !important;
+}
+
+//页面尺寸每项
+::ng-deep .ant-select-item-option-active div {
+    font-weight: 800 !important;
+    color: #00eff8 !important;
+}
+
+//箭头  颜色
+.grid-pagination::ng-deep .anticon {
+    color: #00eff8;
+}
+
+//页面尺寸选择
+.grid-pagination ::ng-deep .ant-select-selector {
+    color: #00eff8;
+    border-color: #00eff8;
+    border-width: 2px;
+
+}
+
+//前 link
+.grid-pagination ::ng-deep .ant-pagination-prev .ant-pagination-item-link {
+    color: #00eff8;
+    border-color: transparent;
+}
+
+//中间的  item
+.grid-pagination ::ng-deep .ant-pagination-item {
+    color: #00eff8;
+    border-color: #00eff8;
+    border-width: 2px;
+}
+
+// disable 样式
+.grid-pagination ::ng-deep .ant-pagination-item a {
+    color: #00eff8 !important;
+}
+
+.grid-pagination ::ng-deep .ant-pagination-item-active a {
+    color: black !important;
+
+}
+
+//前后箭头
+.grid-pagination ::ng-deep .ant-pagination-next button,
+
+.ant-pagination-prev button {
+    color: #00eff8;
+    border-color: transparent;
+}
+
+//鼠标放上去的样式
+.grid-pagination ::ng-deep .ant-pagination-item-active:focus-visible,
+.ant-pagination-item-active:hover,
+
+.ant-pagination-next:hover button,
+.ant-pagination-prev:hover button {
+    border-color: #00eff8;
+    border-width: 2px;
+}
+
+//选中样式
+.grid-pagination ::ng-deep .ant-pagination-item-active {
+    font-weight: 500;
+    background-color: #00eff8;
+    border-color: #00eff8;
+    border-width: 2px;
+}

src/app/routes/data-v/workstation/workstation.component.html

@@ -1,23 +1,39 @@
 <div nz-row [nzGutter]="[12, 12]">
-  <data-v-card nz-col nzSpan="24" nzXs="24" nzSm="24" nzMd="12" nzLg="12" nzXl="12" nzXXl="12" title="待办任务">
-    <app-ag-grid-component style="width: 100%;" [defaultColDef]="defaultColDef" [rowData]="rowData"
-      [columnDefs]="colDefs1" [gridThemeClass]="gridThemedClass">
-    </app-ag-grid-component>
-  </data-v-card>
-  <data-v-card nz-col nzSpan="24" nzXs="24" nzSm="24" nzMd="12" nzLg="12" nzXl="12" nzXXl="12" title="已办任务">
+  <!-- <data-v-card nz-col nzSpan="24" nzXs="24" nzSm="24" nzMd="12" nzLg="12" nzXl="12" nzXXl="12" title="待办任务"> -->
+  <lj-app-ag-grid-component
+    style="width: 50%"
+    [defaultColDef]="defaultColDef"
+    [rowData]="rowData"
+    [columnDefs]="colDefs1"
+    [gridThemeClass]="gridThemedClass"
+  />
 
-    <app-ag-grid-component style="width: 100%;" [defaultColDef]="defaultColDef" [rowData]="rowData"
-      [columnDefs]="colDefs2" gridThemeClass="ag-theme-quartz ag-theme-datav">
-    </app-ag-grid-component>
+  <!-- </data-v-card> -->
+  <data-v-card nz-col nzSpan="24" nzXs="24" nzSm="24" nzMd="12" nzLg="12" nzXl="12" nzXXl="12" title="已办任务">
+    <app-ag-grid-component
+      style="width: 100%"
+      [defaultColDef]="defaultColDef"
+      [rowData]="rowData"
+      [columnDefs]="colDefs2"
+      gridThemeClass="ag-theme-quartz ag-theme-datav"
+    />
   </data-v-card>
   <data-v-card nz-col nzSpan="24" nzXs="24" nzSm="24" nzMd="12" nzLg="12" nzXl="12" nzXXl="12" title="报警信息">
-    <app-ag-grid-component style="width: 100%;" [defaultColDef]="defaultColDef" [rowData]="rowData"
-      [columnDefs]="colDefs3" gridThemeClass="ag-theme-quartz ag-theme-datav">
-    </app-ag-grid-component>
+    <app-ag-grid-component
+      style="width: 100%"
+      [defaultColDef]="defaultColDef"
+      [rowData]="rowData"
+      [columnDefs]="colDefs3"
+      gridThemeClass="ag-theme-quartz ag-theme-datav"
+    />
   </data-v-card>
   <data-v-card nz-col nzSpan="24" nzXs="24" nzSm="24" nzMd="12" nzLg="12" nzXl="12" nzXXl="12" title="通知">
-    <app-ag-grid-component style="width: 100%;" [defaultColDef]="defaultColDef" [rowData]="rowData"
-      [columnDefs]="colDefs4" gridThemeClass="ag-theme-quartz ag-theme-datav">
-    </app-ag-grid-component>
+    <app-ag-grid-component
+      style="width: 100%"
+      [defaultColDef]="defaultColDef"
+      [rowData]="rowData"
+      [columnDefs]="colDefs4"
+      gridThemeClass="ag-theme-quartz ag-theme-datav"
+    />
   </data-v-card>
 </div>

src/app/routes/data-v/workstation/workstation.component.ts

@@ -1,22 +1,30 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
-
 import { ModalHelper, _HttpClient } from '@delon/theme';
 import { SHARED_IMPORTS } from '@shared';
 import { AgGridAngular } from 'ag-grid-angular';
-import { ColDef } from 'ag-grid-community';
-import {
-  GridApi,
-} from 'ag-grid-community';
+import { ColDef, GridApi } from 'ag-grid-community';
 import { NzPaginationModule } from 'ng-zorro-antd/pagination';
+import { MqttService } from 'ngx-mqtt';
+
+import { AgGridComponentComponent } from './ag-grid-component/ag-grid-component.component';
+import { GridButtonValueRenderer } from './grid-button/grid-button';
+import { LjAgGridComponentComponent } from './lj-ag-grid-component/lj-ag-grid-component.component';
 import { DataVCardComponent } from '../card/card.component';
 import { DataVTitleComponent } from '../title/title.component';
-import { GridButtonValueRenderer } from './grid-button/grid-button';
-import { AgGridComponentComponent } from './ag-grid-component/ag-grid-component.component';
-import { MqttService } from 'ngx-mqtt';
+
 @Component({
   selector: 'app-data-v-workstation',
   standalone: true,
-  imports: [AgGridAngular, AgGridComponentComponent, NzPaginationModule, DataVCardComponent, GridButtonValueRenderer, DataVTitleComponent, ...SHARED_IMPORTS],
+  imports: [
+    AgGridAngular,
+    AgGridComponentComponent,
+    LjAgGridComponentComponent,
+    NzPaginationModule,
+    DataVCardComponent,
+    GridButtonValueRenderer,
+    DataVTitleComponent,
+    ...SHARED_IMPORTS
+  ],
   templateUrl: './workstation.component.html',
   styleUrls: ['./workstation.component.less']
 })
@@ -28,7 +36,7 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit {
   @ViewChild('myGrid') grid!: AgGridAngular;
   public defaultColDef: ColDef = {
     width: 170,
-    editable: false,
+    editable: false
   };
 
   public gridThemedClass: string = 'ag-theme-quartz ag-theme-datav';
@@ -44,63 +52,74 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit {
       },
       width: 90,
       sortable: true,
-      unSortIcon: true, field: "xh",
-
-
+      unSortIcon: true,
+      field: 'xh'
     },
-    { headerName: '任务名称', unSortIcon: true, field: "rwmc", },
-    { headerName: '任务描述', unSortIcon: true, field: "rwms", minWidth: 170, flex: 1 },
-    { headerName: '开始时间', unSortIcon: true, field: "kssj", minWidth: 170, flex: 1 },
-    { headerName: '计划完成时间', unSortIcon: true, field: "jhwcsj", minWidth: 170, flex: 1 },
-    { headerName: '超期', width: 80, field: "sfcq", },
-    { headerName: '操作', autoHeight: true, width: 110, field: "cz", cellRenderer: GridButtonValueRenderer, },
+    { headerName: '任务名称', unSortIcon: true, field: 'rwmc' },
+    { headerName: '任务描述', unSortIcon: true, field: 'rwms', minWidth: 170, flex: 1 },
+    { headerName: '开始时间', unSortIcon: true, field: 'kssj', minWidth: 170, flex: 1 },
+    { headerName: '计划完成时间', unSortIcon: true, field: 'jhwcsj', minWidth: 170, flex: 1 },
+    { headerName: '超期', width: 80, field: 'sfcq' },
+    { headerName: '操作', autoHeight: true, width: 110, field: 'cz', cellRenderer: GridButtonValueRenderer }
   ];
 
   colDefs2: ColDef[] = [
     {
-      headerName: '序号', valueGetter: function (params: any) {
+      headerName: '序号',
+      valueGetter: function (params: any) {
         return parseInt(params.node.id) + 1;
-      }, width: 90, unSortIcon: true, field: "xh",
+      },
+      width: 90,
+      unSortIcon: true,
+      field: 'xh'
     },
-    { headerName: '任务名称', unSortIcon: true, field: "rwmc", },
-    { headerName: '任务描述', unSortIcon: true, field: "rwms", minWidth: 170, flex: 1 },
-    { headerName: '开始时间', unSortIcon: true, field: "kssj", minWidth: 170, flex: 1 },
-    { headerName: '当前状态', field: "dqzt", },
-    { headerName: '当前节点', field: "dqjd", },
-    { headerName: '实际完成时间', field: "sjwcsj", minWidth: 170, flex: 1 },
-    { headerName: '操作', autoHeight: true, width: 110, field: "cz", cellRenderer: GridButtonValueRenderer, },
+    { headerName: '任务名称', unSortIcon: true, field: 'rwmc' },
+    { headerName: '任务描述', unSortIcon: true, field: 'rwms', minWidth: 170, flex: 1 },
+    { headerName: '开始时间', unSortIcon: true, field: 'kssj', minWidth: 170, flex: 1 },
+    { headerName: '当前状态', field: 'dqzt' },
+    { headerName: '当前节点', field: 'dqjd' },
+    { headerName: '实际完成时间', field: 'sjwcsj', minWidth: 170, flex: 1 },
+    { headerName: '操作', autoHeight: true, width: 110, field: 'cz', cellRenderer: GridButtonValueRenderer }
   ];
 
   colDefs3: ColDef[] = [
     {
-      headerName: '序号', valueGetter: function (params: any) {
+      headerName: '序号',
+      valueGetter: function (params: any) {
         return parseInt(params.node.id) + 1;
-      }, width: 90, unSortIcon: true, field: "xh",
+      },
+      width: 90,
+      unSortIcon: true,
+      field: 'xh'
     },
-    { headerName: '报警名称', unSortIcon: true, field: "bjmc", },
-    { headerName: '报警等级', unSortIcon: true, field: "bjdg", },
-    { headerName: '报警描述', unSortIcon: true, field: "bjms", minWidth: 170, flex: 1 },
-    { headerName: '报警时间', unSortIcon: true, field: "bjsj", minWidth: 170, flex: 1 },
-    { headerName: '操作', autoHeight: true, width: 110, field: "cz", cellRenderer: GridButtonValueRenderer, },
-
-    { headerName: '故障原因', field: "gzyy", },
-    { headerName: '处理方法', field: "clff", },
-    { headerName: '注意事项', field: "clff", },
+    { headerName: '报警名称', unSortIcon: true, field: 'bjmc' },
+    { headerName: '报警等级', unSortIcon: true, field: 'bjdg' },
+    { headerName: '报警描述', unSortIcon: true, field: 'bjms', minWidth: 170, flex: 1 },
+    { headerName: '报警时间', unSortIcon: true, field: 'bjsj', minWidth: 170, flex: 1 },
+    { headerName: '操作', autoHeight: true, width: 110, field: 'cz', cellRenderer: GridButtonValueRenderer },
+
+    { headerName: '故障原因', field: 'gzyy' },
+    { headerName: '处理方法', field: 'clff' },
+    { headerName: '注意事项', field: 'clff' }
   ];
 
   // Column Definitions: Defines the columns to be displayed.
   colDefs4: ColDef[] = [
     {
-      headerName: '序号', valueGetter: function (params: any) {
+      headerName: '序号',
+      valueGetter: function (params: any) {
         return parseInt(params.node.id) + 1;
-      }, width: 90, unSortIcon: true, field: "xh",
+      },
+      width: 90,
+      unSortIcon: true,
+      field: 'xh'
     },
-    { headerName: '通知时间', unSortIcon: true, field: "tzsj", minWidth: 170, flex: 1 },
-    { headerName: '重要程度', unSortIcon: true, field: "zycd", },
-    { headerName: '通知名称', unSortIcon: true, field: "tzmc", },
-    { headerName: '通知内容', unSortIcon: true, field: "tznr", minWidth: 170, flex: 1 },
-    { headerName: '附件', field: "fj", },
-    { headerName: '操作', autoHeight: true, width: 110, field: "cz", cellRenderer: GridButtonValueRenderer, },
+    { headerName: '通知时间', unSortIcon: true, field: 'tzsj', minWidth: 170, flex: 1 },
+    { headerName: '重要程度', unSortIcon: true, field: 'zycd' },
+    { headerName: '通知名称', unSortIcon: true, field: 'tzmc' },
+    { headerName: '通知内容', unSortIcon: true, field: 'tznr', minWidth: 170, flex: 1 },
+    { headerName: '附件', field: 'fj' },
+    { headerName: '操作', autoHeight: true, width: 110, field: 'cz', cellRenderer: GridButtonValueRenderer }
   ];
 
   client: any;
@@ -110,16 +129,31 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit {
   }
 
   ngOnInit(): void {
-    console.log('ngOnInit' + this.rowData.length);
+    console.log(`ngOnInit${this.rowData.length}`);
 
     for (var i = 1; i < 30; i++) {
       this.rowData.push({
-        rwmc: '任务' + i, rwms: '任务描述' + i, kssj: '2024-1-' + i + ' 13:38:' + i * 11, jhwcsj: '2024-1-' + i + ' 13:38:' + i * 10, sfcq: '否',
-        dqzt: "正常", dqjd: "节点" + i, sjwcsj: '2024-1-' + i + ' 13:38:' + i * 27, bjmc: "报警5", bjms: "报警描述5", bjsj: '2024-1-' + i + ' 13:38:' + i * 12,
-        gzyy: "-", clff: "-", tzsj: '2024-1-' + i + ' 13:38:' + i * 19, zycd: "一般", tzmc: '系统提示', tznr: '账户登录', fj: "-", cz: "操作"
+        rwmc: `任务${i}`,
+        rwms: `任务描述${i}`,
+        kssj: `2024-1-${i} 13:38:${i * 11}`,
+        jhwcsj: `2024-1-${i} 13:38:${i * 10}`,
+        sfcq: '否',
+        dqzt: '正常',
+        dqjd: `节点${i}`,
+        sjwcsj: `2024-1-${i} 13:38:${i * 27}`,
+        bjmc: '报警5',
+        bjms: '报警描述5',
+        bjsj: `2024-1-${i} 13:38:${i * 12}`,
+        gzyy: '-',
+        clff: '-',
+        tzsj: `2024-1-${i} 13:38:${i * 19}`,
+        zycd: '一般',
+        tzmc: '系统提示',
+        tznr: '账户登录',
+        fj: '-',
+        cz: '操作'
       });
     }
-
   }
 
   ngAfterViewInit(): void {
@@ -136,6 +170,4 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit {
     //   .createStatic(FormEditComponent, { i: { id: 0 } })
     //   .subscribe(() => this.st.reload());
   }
-
-
 }

src/assets/anticon-appstore.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1711079266842" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5873" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M957.59 467.39C936.56 255.62 768.15 87.22 556.38 66.2v-2.22h-89.64v2.22C254.98 87.23 86.59 255.63 65.56 467.39h-2.22v89.65h2.22C86.42 767.16 252.39 934.6 461.85 957.71l-0.08 2.73h94.61v-2.22c211.77-21.02 380.18-189.43 401.21-401.19h2.22v-89.65h-2.22z m-90.47 89.65c-21.27 158.05-152.69 289.49-310.74 310.75v-86.64h-89.64l-2.39 86.3c-156.99-22.26-287.18-153.17-308.34-310.41h86.63v-89.65h-86.63c21.27-158.04 152.68-289.48 310.73-310.75v86.63h89.64v-86.64c158.05 21.26 289.47 152.7 310.74 310.75h-86.61v89.65h86.61z m-355.54-194.7c-82.77 0-149.88 67.1-149.88 149.88 0 82.77 67.1 149.88 149.88 149.88S661.46 595 661.46 512.22s-67.1-149.88-149.88-149.88z" fill="#E9EBED" p-id="5874"></path></svg>