表格封装为组件

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

@@ -0,0 +1,13 @@
+<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>
+
+<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>

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

@@ -0,0 +1,3 @@
+/* Core Grid CSS */
+@import 'ag-grid-community/styles/ag-grid.css';
+@import 'ag-grid-community/styles/ag-theme-quartz.css';

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

@@ -0,0 +1,65 @@
+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 { 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"]
+})
+export class AgGridComponentComponent implements OnInit {
+  @ViewChild('myGrid') grid!: AgGridAngular;
+
+  /**每页数 */
+  public pageSize!: number;
+  /**当前页 */
+  public pageIndex!: number;
+  /**总数 */
+  public pageRowTotal!: number;
+  //默认列配置
+  @Input() defaultColDef: ColDef = {
+    width: 130,
+    editable: false,
+  };
+  /** 列头 */
+  @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/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/pagination/pagination.ts

@@ -1,37 +0,0 @@
-
-// import { Component, OnInit, } from '@angular/core';
-// import { NzPaginationModule } from 'ng-zorro-antd/pagination';
-// @Component({
-//     selector: 'grid-pagination-changer',
-//     imports: [NzPaginationModule],
-//     standalone: true,
-//     template: `
-//     <nz-pagination
-//     [nzPageIndex]="currentPage"
-//       [nzTotal]="totalRecords"
-//       [nzPageSize]="pageSize"
-//       (nzPageIndexChange)="onPageChanged($event)"
-//       (nzPageSizeChange)="onPageSizeChanged($event)"
-//     nzShowSizeChanger
-//      ></nz-pagination>
-//      `
-// })
-// export class NzDemoPaginationChangerComponent implements OnInit {
-//     public currentPage!: number;
-//     public totalRecords!: number;
-//     public pageSize!: number;
-
-//     ngOnInit(params: any): {
-//         this.currentPage = params.currentPage;
-// this.totalRecords = params.totalRecords;
-// this.pageSize = params.pageSize;
-//     }
-
-// onPageChanged(pageIndex: number): void {
-//     // Implement logic to handle page change
-// }
-
-// onPageSizeChanged(pageSize: number): void {
-//     // Implement logic to handle page size change
-// }
-// }

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

@@ -1,33 +1,24 @@
 <div nz-row [nzGutter]="[12, 12]">
   <data-v-card nz-col nzSpan="12" title="待办任务">
-    <ag-grid-angular #myGrid [pagination]="true" [suppressPaginationPanel]="true" [suppressPaginationPanel]="true"
-      [suppressScrollOnNewData]="true" [paginationPageSize]="pageSize" [defaultColDef]="defaultColDef"
-      [rowData]="rowData" [columnDefs]="colDefs1" class="ag-theme-quartz ag-theme-datav">
-    </ag-grid-angular>
-    <br />
-    <!-- 分页 -->
-    <div class="grid-pagination">
-      <ng-template #totalTemplate let-total>共 {{ pageTotal }} 项数据</ng-template>
-      <nz-pagination [nzPageIndex]="pageIndex" [nzPageSize]="pageSize" [nzTotal]="pageTotal"
-        (nzPageSizeChange)="nzPageSizeChange($event)" (nzPageIndexChange)="nzPageIndexChange($event)"
-        class="ag-theme-quartz" nzShowSizeChanger />
-    </div>
 
+    <app-ag-grid-component [defaultColDef]="defaultColDef" [rowData]="rowData" [columnDefs]="colDefs1"
+      [gridThemeClass]="gridThemedClass">
+    </app-ag-grid-component>
   </data-v-card>
   <data-v-card nz-col nzSpan="12" title="已办任务">
-    <ag-grid-angular [pagination]="true" [paginationAutoPageSize]="true" [defaultColDef]="defaultColDef"
-      [rowData]="rowData" [columnDefs]="colDefs2" class="ag-theme-quartz ag-theme-datav">
-    </ag-grid-angular>
+
+    <app-ag-grid-component [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="12" title="报警信息">
-    <ag-grid-angular [pagination]="true" [paginationAutoPageSize]="true" [defaultColDef]="defaultColDef"
-      [rowData]="rowData" [columnDefs]="colDefs3" class="ag-theme-quartz ag-theme-datav">
-    </ag-grid-angular>
+    <app-ag-grid-component [defaultColDef]="defaultColDef" [rowData]="rowData" [columnDefs]="colDefs3"
+      gridThemeClass="ag-theme-quartz ag-theme-datav">
+    </app-ag-grid-component>
   </data-v-card>
   <data-v-card nz-col nzSpan="12" title="通知">
-    <ag-grid-angular [pagination]="true" [paginationAutoPageSize]="true" [defaultColDef]="defaultColDef"
-      [rowData]="rowData" [columnDefs]="colDefs4" class="ag-theme-quartz ag-theme-datav">
-    </ag-grid-angular>
-
+    <app-ag-grid-component [defaultColDef]="defaultColDef" [rowData]="rowData" [columnDefs]="colDefs4"
+      gridThemeClass="ag-theme-quartz ag-theme-datav">
+    </app-ag-grid-component>
   </data-v-card>
 </div>

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

@@ -27,85 +27,12 @@
 
 
 
-
-// 第几条 文字
-.grid-pagination ::ng-deep .ant-select-selection-item,
-.ant-select-selector {
-    color: #74FAFB;
-    border-color: #74FAFB;
-}
-
-::ng-deep .ant-select-item-option {
-    color: #74FAFB !important;
-}
-
-::ng-deep .ant-select-item-option-active div {
-    font-weight: 800 !important;
-    color: #74FAFB !important;
-}
-
-//箭头  颜色
-.grid-pagination::ng-deep .anticon {
-    color: #74FAFB;
-}
-
-.grid-pagination ::ng-deep .ant-select-selector {
-    color: #74FAFB;
-    border-color: #74FAFB;
-
-
-}
-
-.grid-pagination ::ng-deep .ant-pagination-prev .ant-pagination-item-link {
-    color: #74FAFB;
-    border-color: #74FAFB;
-}
-
-//中间的  item
-.grid-pagination ::ng-deep .ant-pagination-item {
-    color: #74FAFB;
-    border-color: #74FAFB;
-}
-
-//*:disabled
-.grid-pagination ::ng-deep .ant-pagination-item a {
-    color: #74FAFB !important;
-}
-
-.grid-pagination ::ng-deep .ant-pagination-item-active a {
-    color: #fff !important;
-
-}
-
-.grid-pagination ::ng-deep .ant-pagination-next button,
-
-.ant-pagination-prev button {
-    color: #74FAFB;
-    border-color: #74FAFB;
-}
-
-.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: #74FAFB;
-}
-
-.grid-pagination ::ng-deep .ant-pagination-item-active {
-    font-weight: 500;
-    background-color: #74FAFB;
-    border-color: #74FAFB;
-}
-
-
-
-.ag-theme-datav ::ng-deep .ag-row-selected .ag-ltr .ag-cell {
+::ng-deep .ag-theme-datav ::ng-deep .ag-row-selected .ag-ltr .ag-cell {
     color: red !important;
 }
 
 //   选中行样式
-.ag-theme-datav ::ng-deep .ag-ltr .ag-row-focus {
+::ng-deep .ag-theme-datav ::ng-deep .ag-ltr .ag-row-focus {
     font-weight: 600;
     color: red;
 
@@ -122,7 +49,7 @@
 
 
 
-.ag-theme-datav {
+::ng-deep .ag-theme-datav {
     --ag-border-color: #74FAFB;
     --ag-foreground-color: #74FAFB;
     --ag-background-color: #0A1632;
@@ -132,15 +59,16 @@
     --ag-header-column-resize-handle-color: rgb(126 46 132);
     --ag-font-size: 17px;
     --ag-font-family: monospace;
-    //竖线颜色
-
 
     height: 17rem;
+    font-weight: 700;
+    //竖线颜色
+    border-width: 3px;
     &:extend(.ag-theme-material);
 
     //标题间的 竖线
     ::ng-deep .ag-header-cell-resize {
-        --ag-header-column-resize-handle-color: #74FAFB;
+        --ag-header-column-resize-handle-color: #00eff8;
 
     }
 
@@ -151,19 +79,21 @@
 }
 
 /* 设置滚动条的宽度 */
-.ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar {
+::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar {
     width: 12em;
+
 }
 
 /* 设置滚动条滑块的样式 */
-.ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb {
-    background-color: red;
+::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb {
+    margin-left: 40px;
+    background-color: #00eff8;
 
     /* 圆角 */
-    border: 2px solid orange;
+    border: 2px solid #00eff8;
 
     /* 滚动条滑块的背景颜色 */
-    border-radius: 6px;
+
 
     /* 滚动条滑块的边框 */
 }
@@ -171,24 +101,24 @@
 
 
 /* 设置滚动条轨道的样式 */
-.ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-track {
-    background-color: yellow;
-
-
+::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-color: #00eff8;
 
     /* 滚动条轨道的背景颜色 */
 }
 
 /* 设置滚动条滑块悬浮时的样式 */
-.ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover {
-    background-color: darkred;
+::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover {
+    margin-left: 40px;
+    background-color: #00eff8;
 
     /* 滚动条滑块悬浮时的背景颜色 */
 }
 
 /* 设置滚动条滑块激活（即正在拖动滑块）时的样式 */
-.ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:active {
-    background-color: #a00;
+::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:active {
+    background-color: #00eff8;
 
     /* 滚动条滑块激活时的背景颜色 */
 }

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

@@ -1,19 +1,21 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
-import { NzPaginationModule } from 'ng-zorro-antd/pagination';
+
 import { ModalHelper, _HttpClient } from '@delon/theme';
 import { SHARED_IMPORTS } from '@shared';
-import { AgGridAngular } from 'ag-grid-angular'; // AG Grid Component
-import { ColDef } from 'ag-grid-community'; // Column Definition Type Interface
-import { DataVCardComponent } from '../card/card.component';
-import { DataVTitleComponent } from '../title/title.component';
-import { GridButtonValueRenderer } from './grid-button/grid-button';
+import { AgGridAngular } from 'ag-grid-angular';
+import { ColDef } from 'ag-grid-community';
 import {
   GridApi,
 } from 'ag-grid-community';
+import { NzPaginationModule } from 'ng-zorro-antd/pagination';
+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';
 @Component({
   selector: 'app-data-v-workstation',
   standalone: true,
-  imports: [AgGridAngular, NzPaginationModule, DataVCardComponent, GridButtonValueRenderer, DataVTitleComponent, ...SHARED_IMPORTS],
+  imports: [AgGridAngular, AgGridComponentComponent, NzPaginationModule, DataVCardComponent, GridButtonValueRenderer, DataVTitleComponent, ...SHARED_IMPORTS],
   templateUrl: './workstation.component.html',
   styleUrls: ['./workstation.component.less']
 })
@@ -27,9 +29,9 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit {
     width: 130,
     editable: false,
   };
-  public pageSize!: number;
-  public pageIndex!: number;
-  public pageTotal!: number;
+
+  public gridThemedClass: string = 'ag-theme-quartz ag-theme-datav';
+
   rowData = [
     {
       rwmc: "任务1", rwms: "任务描述1", kssj: "2024-1-1", jhwcsj: "2024-1-2", sfcq: '否', dqzt: "正常", dqjd: "节点1", sjwcsj: "2024-1-2",
@@ -98,7 +100,8 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit {
       headerName: '序号',
       cellRenderer: function (params: any) {
         return parseInt(params.node.id) + 1
-      }, width: 100,
+      }, flex: 1,
+
       unSortIcon: true, field: "xh",
     },
     { headerName: '任务名称', unSortIcon: true, field: "rwmc", },
@@ -153,18 +156,13 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit {
     { headerName: '通知名称', unSortIcon: true, field: "tzmc", },
     { headerName: '通知内容', unSortIcon: true, field: "tznr", },
     { headerName: '附件', field: "fj", },
-    { headerName: '操作', autoHeight: true, width: 70, field: "cz", cellRenderer: GridButtonValueRenderer, },
+    { headerName: '操作', autoHeight: true, width: 110, field: "cz", cellRenderer: GridButtonValueRenderer, },
   ];
 
   ngOnInit(): void {
     console.log('ngOnInit' + this.rowData.length);
-    this.pageSize = 10;
-    this.pageIndex = 1;
-    this.pageTotal = this.rowData.length;
-    // this.gridApi.addEventListener("resize", (event: any) => {
-    //   console.log("addEventListener");
-    // });
-    //this.gridApi.sizeColumnsToFit();
+
+
   }
 
   ngAfterViewInit(): void {
@@ -181,31 +179,6 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit {
     //   .createStatic(FormEditComponent, { i: { id: 0 } })
     //   .subscribe(() => this.st.reload());
   }
-  //每页数
-  nzPageSizeChange(PageSize: any) {
-    this.pageSize = PageSize;
 
-  }
-  //当前页
-  nzPageIndexChange(PageIndex: any) {
-    console.log("nzPageIndexChange" + PageIndex)
-    if (this.grid.api) {
-      if (PageIndex == 1) {
-        console.log("first" + PageIndex)
-        this.grid.api.paginationGoToFirstPage();
-      } else {
-        this.grid.api.paginationGoToPage(PageIndex);
-      }
-    }
-  }
-  //页面尺寸改变
-  onPaginationChanged($event: any) {
-    console.log('onPaginationChanged{}');
-    //每页数
-    var pageSize = this.grid.api.paginationGetPageSize();
-    //当前页
-    var CurrentPage = this.grid.api.paginationGetCurrentPage() + 1;
-    var TotalPages = this.grid.api.paginationGetTotalPages();
 
-  }
 }