diff --git a/src/app/routes/data-v/workstation/pagination/pagination.ts b/src/app/routes/data-v/workstation/pagination/pagination.ts
new file mode 100644
index 0000000..536cc7c
--- /dev/null
+++ b/src/app/routes/data-v/workstation/pagination/pagination.ts
@@ -0,0 +1,37 @@
+
+// import { Component, OnInit, } from '@angular/core';
+// import { NzPaginationModule } from 'ng-zorro-antd/pagination';
+// @Component({
+// selector: 'grid-pagination-changer',
+// imports: [NzPaginationModule],
+// standalone: true,
+// template: `
+//
+// `
+// })
+// 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
+// }
+// }
diff --git a/src/app/routes/data-v/workstation/workstation.component.html b/src/app/routes/data-v/workstation/workstation.component.html
index 693db77..82b8c0f 100644
--- a/src/app/routes/data-v/workstation/workstation.component.html
+++ b/src/app/routes/data-v/workstation/workstation.component.html
@@ -1,9 +1,18 @@
\ No newline at end of file
diff --git a/src/app/routes/data-v/workstation/workstation.component.less b/src/app/routes/data-v/workstation/workstation.component.less
index 78973b6..0240b1c 100644
--- a/src/app/routes/data-v/workstation/workstation.component.less
+++ b/src/app/routes/data-v/workstation/workstation.component.less
@@ -23,27 +23,105 @@
// color: #94DDF3;
// }
-.ag-theme-datav ::ng-deep .ag-row-selected .ag-ltr .ag-cell {
+/* 分页器 */
+
+
+
+
+// 第几条 文字
+.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 {
color: red !important;
-
- }
+}
-// 选中样式
+// 选中行样式
.ag-theme-datav ::ng-deep .ag-ltr .ag-row-focus {
- color: red ;
+ font-weight: 600;
+ color: red;
- .ag-cell-focus{
+ .ag-cell-focus {
border: #74FAFB;
}
- .ag-grid-button-style{
+ .ag-grid-button-style {
color: red;
+ border-color: red;
}
}
-
-
+
+
.ag-theme-datav {
--ag-border-color: #74FAFB;
--ag-foreground-color: #74FAFB;
@@ -54,14 +132,27 @@
--ag-header-column-resize-handle-color: rgb(126 46 132);
--ag-font-size: 17px;
--ag-font-family: monospace;
+ //竖线颜色
+
height: 17rem;
- &:extend(.ag-theme-material);
+ &:extend(.ag-theme-material);
+
+ //标题间的 竖线
+ ::ng-deep .ag-header-cell-resize {
+ --ag-header-column-resize-handle-color: #74FAFB;
+
+ }
+
+ //外边框去掉圆角
+ ::ng-deep .ag-root-wrapper {
+ border-radius: 0;
+ }
}
/* 设置滚动条的宽度 */
.ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar {
- width: 12px;
+ width: 12em;
}
/* 设置滚动条滑块的样式 */
@@ -77,14 +168,14 @@
/* 滚动条滑块的边框 */
}
-
+
/* 设置滚动条轨道的样式 */
.ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-track {
background-color: yellow;
-
-
+
+
/* 滚动条轨道的背景颜色 */
}
diff --git a/src/app/routes/data-v/workstation/workstation.component.ts b/src/app/routes/data-v/workstation/workstation.component.ts
index ab4f49f..3293061 100644
--- a/src/app/routes/data-v/workstation/workstation.component.ts
+++ b/src/app/routes/data-v/workstation/workstation.component.ts
@@ -1,6 +1,5 @@
import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
-import { STColumn, STComponent } from '@delon/abc/st';
-import { SFSchema } from '@delon/form';
+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
@@ -14,7 +13,7 @@ import {
@Component({
selector: 'app-data-v-workstation',
standalone: true,
- imports: [AgGridAngular, DataVCardComponent, GridButtonValueRenderer, DataVTitleComponent, ...SHARED_IMPORTS],
+ imports: [AgGridAngular, NzPaginationModule, DataVCardComponent, GridButtonValueRenderer, DataVTitleComponent, ...SHARED_IMPORTS],
templateUrl: './workstation.component.html',
styleUrls: ['./workstation.component.less']
})
@@ -22,13 +21,15 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit {
private readonly http = inject(_HttpClient);
private readonly modal = inject(ModalHelper);
private readonly elementRef = inject(ElementRef);
- private gridApi!: GridApi;
+
+ @ViewChild('myGrid') grid!: AgGridAngular;
public defaultColDef: ColDef = {
width: 130,
editable: false,
};
- dataSet: any;
-
+ public pageSize!: number;
+ public pageIndex!: number;
+ public pageTotal!: number;
rowData = [
{
rwmc: "任务1", rwms: "任务描述1", kssj: "2024-1-1", jhwcsj: "2024-1-2", sfcq: '否', dqzt: "正常", dqjd: "节点1", sjwcsj: "2024-1-2",
@@ -152,11 +153,14 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit {
{ headerName: '通知名称', unSortIcon: true, field: "tzmc", },
{ headerName: '通知内容', unSortIcon: true, field: "tznr", },
{ headerName: '附件', field: "fj", },
- { headerName: '操作', autoHeight: true, width: 110, field: "cz", cellRenderer: GridButtonValueRenderer, },
+ { headerName: '操作', autoHeight: true, width: 70, field: "cz", cellRenderer: GridButtonValueRenderer, },
];
ngOnInit(): void {
- console.log('ngOnInit');
+ 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");
// });
@@ -177,9 +181,31 @@ 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();
}
}