From ce0bc28aaaabd43a3415f37a91a7bc67b6a98eac Mon Sep 17 00:00:00 2001 From: "SK-20230509GLVS\\Administrator" Date: Thu, 7 Mar 2024 11:37:50 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E5=B0=81=E8=A3=85=E4=B8=BA?= =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ag-grid-component.component.html | 13 ++ .../ag-grid-component.component.less | 3 + .../ag-grid-component.component.ts | 65 ++++++++++ .../pagination-style/pagination.less | 94 +++++++++++++++ .../workstation/pagination/pagination.ts | 37 ------ .../workstation/workstation.component.html | 35 ++---- .../workstation/workstation.component.less | 114 ++++-------------- .../workstation/workstation.component.ts | 61 +++------- 8 files changed, 227 insertions(+), 195 deletions(-) create mode 100644 src/app/routes/data-v/workstation/ag-grid-component/ag-grid-component.component.html create mode 100644 src/app/routes/data-v/workstation/ag-grid-component/ag-grid-component.component.less create mode 100644 src/app/routes/data-v/workstation/ag-grid-component/ag-grid-component.component.ts create mode 100644 src/app/routes/data-v/workstation/ag-grid-component/pagination-style/pagination.less delete mode 100644 src/app/routes/data-v/workstation/pagination/pagination.ts diff --git a/src/app/routes/data-v/workstation/ag-grid-component/ag-grid-component.component.html b/src/app/routes/data-v/workstation/ag-grid-component/ag-grid-component.component.html new file mode 100644 index 0000000..2aae1ce --- /dev/null +++ b/src/app/routes/data-v/workstation/ag-grid-component/ag-grid-component.component.html @@ -0,0 +1,13 @@ + + + +
+ +
+
共 {{ pageRowTotal }} 项数据
+ +
\ No newline at end of file diff --git a/src/app/routes/data-v/workstation/ag-grid-component/ag-grid-component.component.less b/src/app/routes/data-v/workstation/ag-grid-component/ag-grid-component.component.less new file mode 100644 index 0000000..7a247bd --- /dev/null +++ b/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'; \ No newline at end of file diff --git a/src/app/routes/data-v/workstation/ag-grid-component/ag-grid-component.component.ts b/src/app/routes/data-v/workstation/ag-grid-component/ag-grid-component.component.ts new file mode 100644 index 0000000..284aeaa --- /dev/null +++ b/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); + } + } + } + +} diff --git a/src/app/routes/data-v/workstation/ag-grid-component/pagination-style/pagination.less b/src/app/routes/data-v/workstation/ag-grid-component/pagination-style/pagination.less new file mode 100644 index 0000000..35e93f4 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/app/routes/data-v/workstation/pagination/pagination.ts b/src/app/routes/data-v/workstation/pagination/pagination.ts deleted file mode 100644 index 536cc7c..0000000 --- a/src/app/routes/data-v/workstation/pagination/pagination.ts +++ /dev/null @@ -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: ` -// -// ` -// }) -// 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 82b8c0f..b12aaef 100644 --- a/src/app/routes/data-v/workstation/workstation.component.html +++ b/src/app/routes/data-v/workstation/workstation.component.html @@ -1,33 +1,24 @@
- - -
- -
- 共 {{ pageTotal }} 项数据 - -
+ + - - + + + - - + + - - - + +
\ 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 0240b1c..5898ffa 100644 --- a/src/app/routes/data-v/workstation/workstation.component.less +++ b/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; /* 滚动条滑块激活时的背景颜色 */ } \ No newline at end of file diff --git a/src/app/routes/data-v/workstation/workstation.component.ts b/src/app/routes/data-v/workstation/workstation.component.ts index 3293061..50d848c 100644 --- a/src/app/routes/data-v/workstation/workstation.component.ts +++ b/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(); - } }