From 0d64f9e2ca49706a84af8adba3495e32a40288f7 Mon Sep 17 00:00:00 2001 From: "lijie.hu" Date: Wed, 10 Apr 2024 13:36:06 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9ag-grid=E8=A1=A8=E6=A0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lj-car-info-table.component.html | 8 +- .../data-v/lj-card/lj-card.component.html | 2 +- .../data-v/second1/second1.component.html | 4 +- .../data-v/second1/second1.component.less | 222 ++++++++--------- .../data-v/second1/second1.component.ts | 60 ++--- .../lj-ag-grid-component.component.html | 11 +- .../lj-ag-grid-component.component.less | 234 +++++++++++++++++- .../lj-ag-grid-component.component.ts | 60 +++-- .../workstation/workstation.component.less | 2 +- 9 files changed, 424 insertions(+), 179 deletions(-) diff --git a/src/app/routes/data-v/lj-car-info-table/lj-car-info-table.component.html b/src/app/routes/data-v/lj-car-info-table/lj-car-info-table.component.html index 7411ae4..8ddaa71 100644 --- a/src/app/routes/data-v/lj-car-info-table/lj-car-info-table.component.html +++ b/src/app/routes/data-v/lj-car-info-table/lj-car-info-table.component.html @@ -17,7 +17,7 @@
#1
#2
#3
#4
+
{{ title }}
diff --git a/src/app/routes/data-v/second1/second1.component.html b/src/app/routes/data-v/second1/second1.component.html index d75ca7a..d01399a 100644 --- a/src/app/routes/data-v/second1/second1.component.html +++ b/src/app/routes/data-v/second1/second1.component.html @@ -7,15 +7,14 @@ [defaultColDef]="defaultColDef" [rowData]="runInfoRowData" [columnDefs]="colDefs0" - [gridThemeClass]="gridThemedClass" />
@@ -67,7 +66,6 @@ [defaultColDef]="defaultColDef" [rowData]="todayRowData" [columnDefs]="colDefs2" - [gridThemeClass]="gridThemedClass" />
diff --git a/src/app/routes/data-v/second1/second1.component.less b/src/app/routes/data-v/second1/second1.component.less index 4701091..5771177 100644 --- a/src/app/routes/data-v/second1/second1.component.less +++ b/src/app/routes/data-v/second1/second1.component.less @@ -25,154 +25,154 @@ @import "../../../..//styles/variables.less"; /* 分页器 */ -.ag-header-center .ag-header-group-cell-label, -.ag-header-center .ag-header-cell-label { +// .ag-header-center .ag-header-group-cell-label, +// .ag-header-center .ag-header-cell-label { - justify-content: center; - color: #000; - text-align: center; - background: #000; +// justify-content: center; +// color: #000; +// text-align: center; +// background: #000; -} +// } -::ng-deep .ag-theme-datav ::ng-deep .ag-row-selected .ag-ltr .ag-cell { - color: red !important; -} +// ::ng-deep .ag-theme-datav ::ng-deep .ag-row-selected .ag-ltr .ag-cell { +// color: red !important; +// } -// 选中行样式 -::ng-deep .ag-theme-datav ::ng-deep .ag-ltr .ag-row-focus { - font-weight: 600; - color: red; +// // 选中行样式 +// ::ng-deep .ag-theme-datav ::ng-deep .ag-ltr .ag-row-focus { +// font-weight: 600; +// color: red; - .ag-cell-focus { - border: #74FAFB; - } +// .ag-cell-focus { +// border: #74FAFB; +// } - .ag-grid-button-style { - color: red; - border-color: red; - } -} +// .ag-grid-button-style { +// color: red; +// border-color: red; +// } +// } -::ng-deep .ag-theme-datav { +// ::ng-deep .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); -.px2rem(12,--ag-font-size); - --ag-font-family: monospace; +// --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); +// .px2rem(12,--ag-font-size); +// --ag-font-family: monospace; - height: 17rem; - font-weight: 700; - //竖线颜色 - .px2rem(3,border-width); - &:extend(.ag-theme-material); +// height: 17rem; +// font-weight: 700; +// //竖线颜色 +// .px2rem(3,border-width); +// &:extend(.ag-theme-material); - //标题间的 竖线 - ::ng-deep .ag-header-cell-resize { - --ag-header-column-resize-handle-color: transparent; - } +// //标题间的 竖线 +// ::ng-deep .ag-header-cell-resize { +// --ag-header-column-resize-handle-color: transparent; +// } - ::ng-deep .ag-header-row { - .px2rem(13.5,font-size); - font-weight: 700; - } +// ::ng-deep .ag-header-row { +// .px2rem(13.5,font-size); +// font-weight: 700; +// } - //外边框去掉圆角 - ::ng-deep .ag-root-wrapper { - border-radius: 0; - } -} +// //外边框去掉圆角 +// ::ng-deep .ag-root-wrapper { +// border-radius: 0; +// } +// } -/* 设置滚动条的宽度 */ -::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar { - width: 12em; +// /* 设置滚动条的宽度 */ +// ::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar { +// width: 12em; -} +// } -/* 设置滚动条滑块的样式 */ -::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb { - .px2rem(40, margin-left); - background-color: #00eff8; +// /* 设置滚动条滑块的样式 */ +// ::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb { +// .px2rem(40, margin-left); +// background-color: #00eff8; - /* 圆角 */ - border: solid #00eff8; - .px2rem(2,border-width) ; - /* 滚动条滑块的背景颜色 */ +// /* 圆角 */ +// border: solid #00eff8; +// .px2rem(2,border-width) ; +// /* 滚动条滑块的背景颜色 */ - /* 滚动条滑块的边框 */ -} +// /* 滚动条滑块的边框 */ +// } -/* 设置滚动条轨道的样式 */ -::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-track { - background-color: transparent; - border-color: #00eff8; +// /* 设置滚动条轨道的样式 */ +// ::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-track { +// background-color: transparent; +// border-color: #00eff8; - /* 滚动条轨道的背景颜色 */ -} +// /* 滚动条轨道的背景颜色 */ +// } -/* 设置滚动条滑块悬浮时的样式 */ -::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover { - .px2rem(40,margin-left); - background-color: #00eff8; +// /* 设置滚动条滑块悬浮时的样式 */ +// ::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover { +// .px2rem(40,margin-left); +// background-color: #00eff8; - /* 滚动条滑块悬浮时的背景颜色 */ -} +// /* 滚动条滑块悬浮时的背景颜色 */ +// } -/* 设置滚动条滑块激活（即正在拖动滑块）时的样式 */ -::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:active { - background-color: #00eff8; +// /* 设置滚动条滑块激活（即正在拖动滑块）时的样式 */ +// ::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:active { +// background-color: #00eff8; - /* 滚动条滑块激活时的背景颜色 */ -} +// /* 滚动条滑块激活时的背景颜色 */ +// } -//竖向 -::ng-deep .ag-body-vertical-scroll-viewport { - scrollbar-color: auto; -} +// //竖向 +// ::ng-deep .ag-body-vertical-scroll-viewport { +// scrollbar-color: auto; +// } -//横向 -::ng-deep .ag-body-horizontal-scroll-viewport { - scrollbar-color: auto; -} +// //横向 +// ::ng-deep .ag-body-horizontal-scroll-viewport { +// scrollbar-color: auto; +// } -/* 设置滚动条的宽度 */ -::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar { - height: 14em; - color: #000; -} +// /* 设置滚动条的宽度 */ +// ::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar { +// height: 14em; +// color: #000; +// } -/* 设置横向滚动条轨道的样式 */ -::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track { - background-color: transparent; - border-color: #00eff8; -} +// /* 设置横向滚动条轨道的样式 */ +// ::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track { +// background-color: transparent; +// border-color: #00eff8; +// } -/* 设置横向滚动条滑块悬浮时的样式 */ -::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:hover { - background-color: #00eff8; -} +// /* 设置横向滚动条滑块悬浮时的样式 */ +// ::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:hover { +// background-color: #00eff8; +// } -/* 设置横向滚动条滑块激活时的样式 */ -::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:active { - background-color: #00eff8; -} +// /* 设置横向滚动条滑块激活时的样式 */ +// ::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:active { +// background-color: #00eff8; +// } -/* 设置横向滚动条滑块的颜色 */ -::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb { - background-color: #00eff8; -} +// /* 设置横向滚动条滑块的颜色 */ +// ::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb { +// background-color: #00eff8; +// } /* button-component.component.css */ .button-container { diff --git a/src/app/routes/data-v/second1/second1.component.ts b/src/app/routes/data-v/second1/second1.component.ts index 226a083..dfb3bdb 100644 --- a/src/app/routes/data-v/second1/second1.component.ts +++ b/src/app/routes/data-v/second1/second1.component.ts @@ -93,9 +93,9 @@ export class DataVSecond1Component implements OnInit { headerClass: 'head-class', field: 'time', autoHeaderHeight: true, - width: 130, + // width: 130, + // flex: 1, cellStyle: { - 'font-size': '0.9rem', 'text-align': 'start', 'padding-top': '0px', 'padding-right': '0px', @@ -108,9 +108,8 @@ export class DataVSecond1Component implements OnInit { field: 'option', headerClass: 'head-class', autoHeaderHeight: true, - width: 70, + // width: 70, cellStyle: { - 'font-size': '0.9rem', 'text-align': 'start', 'padding-top': '0px', 'padding-right': '0px', @@ -120,11 +119,10 @@ export class DataVSecond1Component implements OnInit { }, { headerName: '操作描述', - width: 130, + // width: 130, autoHeaderHeight: true, field: 'optionDesc', cellStyle: { - 'font-size': '0.9rem', 'text-align': 'start', 'padding-top': '0px', 'padding-right': '0px', @@ -134,11 +132,10 @@ export class DataVSecond1Component implements OnInit { }, { headerName: '操作人员', - width: 130, + // width: 130, field: 'optionMan', autoHeaderHeight: true, cellStyle: { - 'font-size': '0.9rem', 'text-align': 'start', 'padding-top': '0px', 'padding-right': '0px', @@ -152,9 +149,8 @@ export class DataVSecond1Component implements OnInit { { headerName: '序号', field: 'sort', - width: 70, + // width: 70, cellStyle: { - 'font-size': '0.9rem', 'text-align': 'start', 'padding-top': '0px', 'padding-right': '0px', @@ -165,9 +161,8 @@ export class DataVSecond1Component implements OnInit { { headerName: '时间', field: 'time', - width: 140, + // width: 140, cellStyle: { - 'font-size': '0.9rem', 'text-align': 'start', 'padding-top': '0px', 'padding-right': '0px', @@ -178,10 +173,9 @@ export class DataVSecond1Component implements OnInit { { headerName: '任务描述', - width: 130, + // width: 130, field: 'taskDesc', cellStyle: { - 'font-size': '0.9rem', 'text-align': 'start', 'padding-top': '0px', 'padding-right': '0px', @@ -191,11 +185,10 @@ export class DataVSecond1Component implements OnInit { }, { headerName: '等级', - width: 70, + // width: 70, field: 'level', autoHeaderHeight: true, cellStyle: { - 'font-size': '0.9rem', 'text-align': 'start', 'padding-top': '0px', 'padding-right': '0px', @@ -208,26 +201,23 @@ export class DataVSecond1Component implements OnInit { { headerName: '', - minWidth: 130, + // minWidth: 130, field: 'rwmc', - flex: 1, - cellStyle: { - 'font-size': '0.9rem', - - 'padding-top': '0px', - 'padding-right': '0px', - 'padding-bottom': '0px', - 'padding-left': '18px', - color: '#75F9FD' - } + flex: 1 + // cellStyle: { + // 'padding-top': '0px', + // 'padding-right': '0px', + // 'padding-bottom': '0px', + // 'padding-left': '18px', + // color: '#75F9FD' + // } }, { headerName: '1#重磅', - minWidth: 60, + // minWidth: 60, field: 'one', flex: 1, cellStyle: { - 'font-size': '0.9rem', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', @@ -237,11 +227,10 @@ export class DataVSecond1Component implements OnInit { }, { headerName: '2#重磅', - minWidth: 60, + // minWidth: 60, field: 'two', flex: 1, cellStyle: { - 'font-size': '0.9rem', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', @@ -250,11 +239,10 @@ export class DataVSecond1Component implements OnInit { }, { headerName: '3#重磅', - minWidth: 60, + // minWidth: 60, field: 'three', flex: 1, cellStyle: { - 'font-size': '0.9rem', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', @@ -263,11 +251,10 @@ export class DataVSecond1Component implements OnInit { }, { headerName: '4#重磅', - minWidth: 60, + // minWidth: 60, field: 'four', flex: 1, cellStyle: { - 'font-size': '0.9rem', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', @@ -276,12 +263,11 @@ export class DataVSecond1Component implements OnInit { }, { headerName: '汇总', - minWidth: 60, + // minWidth: 60, autoHeaderHeight: true, field: 'all', flex: 1, cellStyle: { - 'font-size': '0.9rem', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', diff --git a/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.html b/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.html index 9dfde6d..b437293 100644 --- a/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.html +++ b/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.html @@ -16,15 +16,20 @@
diff --git a/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.less b/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.less index 3f8b2c3..d1c4238 100644 --- a/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.less +++ b/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.less @@ -1,9 +1,182 @@ /* Core Grid CSS */ @import 'ag-grid-community/styles/ag-grid.css'; -@import 'ag-grid-community/styles/ag-theme-quartz.css'; +// @import 'ag-grid-community/styles/ag-theme-quartz.css'; + @import "../../../../../styles/variables.less"; +/* change the font style of a single UI component */ +// .ag-theme-quartz .ag-header-cell-label { +// font-style: italic; +// } +// .ag-theme-quartz, .ag-theme-quartz-dark, .ag-theme-quartz-auto-dark { +// --ag-active-color: #2196f3; +// --ag-background-color: #ADD8E6; /* 淡蓝色背景 */ +// } + +// .ag-header-center .ag-header-group-cell-label, +// .ag-header-center .ag-header-cell-label { +// justify-content: center; +// color: #000; +// text-align: center; +// background: #000; + +// } + +// ::ng-deep .ag-theme-datav ::ng-deep .ag-row-selected .ag-ltr .ag-cell { +// color: red !important; +// } + +// // 选中行样式 +// ::ng-deep .ag-theme-datav ::ng-deep .ag-ltr .ag-row-focus { +// font-weight: 600; +// color: red; + +// .ag-cell-focus { +// border: #74FAFB; +// } + +// .ag-grid-button-style { +// color: red; +// border-color: red; +// } +// } +.ag-header-center .ag-header-group-cell-label, +.ag-header-center .ag-header-cell-label { + + justify-content: center; + color: #000; + text-align: center; + background: #000; + +} + +.head-class { + .px2rem(18,font-size); + text-align: center; + justify-content: center; +} +.red-background { + background-color: red; +} + +// ::ng-deep .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); +// .px2rem(12,--ag-font-size); +// --ag-font-family: monospace; + +// height: 17rem; +// font-weight: 700; +// //竖线颜色 +// .px2rem(3,border-width); +// &:extend(.ag-theme-material); + +// //标题间的 竖线 +// ::ng-deep .ag-header-cell-resize { +// --ag-header-column-resize-handle-color: transparent; +// } + + +// ::ng-deep .ag-header-row { +// .px2rem(13.5,font-size); +// font-weight: 700; +// } + +// //外边框去掉圆角 +// ::ng-deep .ag-root-wrapper { +// border-radius: 0; +// } +// } + +// /* 设置滚动条的宽度 */ +// ::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar { +// width: 12em; + +// } + +// /* 设置滚动条滑块的样式 */ +// ::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb { +// .px2rem(40, margin-left); +// background-color: #00eff8; + +// /* 圆角 */ +// border: solid #00eff8; +// .px2rem(2,border-width) ; +// /* 滚动条滑块的背景颜色 */ + + +// /* 滚动条滑块的边框 */ +// } + + + +// /* 设置滚动条轨道的样式 */ +// ::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-track { +// background-color: transparent; +// border-color: #00eff8; + +// /* 滚动条轨道的背景颜色 */ +// } + +// /* 设置滚动条滑块悬浮时的样式 */ +// ::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover { +// .px2rem(40,margin-left); +// background-color: #00eff8; + +// /* 滚动条滑块悬浮时的背景颜色 */ +// } + +// /* 设置滚动条滑块激活（即正在拖动滑块）时的样式 */ +// ::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:active { +// background-color: #00eff8; + +// /* 滚动条滑块激活时的背景颜色 */ +// } + +// //竖向 +// ::ng-deep .ag-body-vertical-scroll-viewport { +// scrollbar-color: auto; +// } + +// //横向 +// ::ng-deep .ag-body-horizontal-scroll-viewport { +// scrollbar-color: auto; +// } + +// /* 设置滚动条的宽度 */ +// ::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar { +// height: 14em; +// color: #000; +// } + +// /* 设置横向滚动条轨道的样式 */ +// ::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track { +// background-color: transparent; +// border-color: #00eff8; +// } + +// /* 设置横向滚动条滑块悬浮时的样式 */ +// ::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:hover { +// background-color: #00eff8; +// } + +// /* 设置横向滚动条滑块激活时的样式 */ +// ::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:active { +// background-color: #00eff8; +// } + +// /* 设置横向滚动条滑块的颜色 */ +// ::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb { +// background-color: #00eff8; +// } + .custom-label { display: inline-block; padding: 10px 20px; /* 内边距 */ @@ -43,3 +216,62 @@ // .paginationThemeClass{ // width: 100%; // } + +.ag-theme-acmecorp { + --ag-grid-size: 5px; + --ag-list-item-height: 20px; + // --ag-odd-row-background-color: #aaa; + // --ag-subheader-background-color:red !important; + --ag-foreground-color: #75F9FD; + + /* Changes the color of the grid background */ + --ag-background-color: #041f3d; + + + --ag-background-color: #041f3d; + --ag-header-foreground-color: #75F9FD; + --ag-header-background-color: #041f3d; + --ag-odd-row-background-color: #041f3d; + --ag-header-column-resize-handle-color:#041f3d; + //边框 + + .px2rem(3,border-width); + --ag-border-color: #74FAFB; + // --ag-font-size: 17px; + .px2rem(14,--ag-font-size); + --ag--font--color:#75F9FD; + color: rgb(117, 249, 253); + --ag-font-family: monospace; + .ag-header-cell { + +.px2rem(16,--ag-font-size);; /* 字体大小 */ +.ag-body-horizontal-scroll-viewport +{ + margin-right: -8px; +} +} +} +.ag-body-horizontal-scroll-viewport +{ + margin-right: -8px; +} +// 、、滚动条 +.my-grid .ag-body-viewport { + overflow-y: scroll !important; /* 强制显示滚动条 */ +} + +.my-grid .ag-root-wrapper { + overflow: hidden; /* 隐藏根容器的滚动条 */ +} + +.my-grid .ag-body-viewport::-webkit-scrollbar { + width: 10px; /* 设置滚动条宽度 */ +} + +.my-grid .ag-body-viewport::-webkit-scrollbar-thumb { + background-color: #888; /* 设置滚动条颜色 */ +} + +.my-grid .ag-body-viewport::-webkit-scrollbar-track { + background: #f1f1f1; /* 设置滚动条轨道颜色 */ +} diff --git a/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.ts b/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.ts index cc89ad6..52b40e9 100644 --- a/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.ts +++ b/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.ts @@ -1,16 +1,18 @@ import { CommonModule } from '@angular/common'; import { Component, OnInit, ViewChild, Input } from '@angular/core'; import { AgGridAngular } from 'ag-grid-angular'; -import { ColDef, GridApi, GridOptions } from 'ag-grid-community'; +import { ColDef, GridApi, GridOptions, GridSizeChangedEvent } from 'ag-grid-community'; import { NzPaginationModule } from 'ng-zorro-antd/pagination'; +// eslint-disable-next-line import/no-unassigned-import +import 'ag-grid-community/styles/ag-theme-quartz.css'; import { LJDataVCardComponent } from '../../lj-card/lj-card.component'; import { TableColumn, DataVLjTableComponent } from '../../lj-table/lj-table.component'; @Component({ selector: 'lj-app-ag-grid-component', standalone: true, templateUrl: './lj-ag-grid-component.component.html', - styleUrls: ['./pagination-style/pagination.less'], + styleUrls: ['./pagination-style/pagination.less', './lj-ag-grid-component.component.less'], imports: [CommonModule, AgGridAngular, NzPaginationModule, LJDataVCardComponent, DataVLjTableComponent] }) export class LjAgGridComponentComponent implements OnInit { @@ -36,12 +38,44 @@ export class LjAgGridComponentComponent implements OnInit { @Input() showSetting: boolean = false; @Input() showPageTurning: boolean = true; + /**每页数 */ public pageSize!: number; + public paginationPageSizeSelector!: [number, number, number]; /**当前页 */ public pageIndex!: number; /**总数 */ public pageRowTotal!: number; + onGridSizeChanged(params: GridSizeChangedEvent) { + // get the current grids width + var gridWidth = document.querySelector('.ag-body-viewport')!.clientWidth; + // keep track of which columns to hide/show + var columnsToShow = []; + var columnsToHide = []; + // iterate over all columns (visible or not) and work out + // now many columns can fit (based on their minWidth) + var totalColsWidth = 0; + var allColumns = params.api.getColumns(); + if (allColumns && allColumns.length > 0) { + for (var i = 0; i < allColumns.length; i++) { + var column = allColumns[i]; + totalColsWidth += column.getMinWidth() || 0; + if (totalColsWidth > gridWidth) { + columnsToHide.push(column.getColId()); + } else { + columnsToShow.push(column.getColId()); + } + } + } + // show/hide columns based on current grid width + params.api.setColumnsVisible(columnsToShow, true); + params.api.setColumnsVisible(columnsToHide, false); + // wait until columns stopped moving and fill out + // any available space to ensure there are no gaps + window.setTimeout(() => { + params.api.sizeColumnsToFit(); + }, 10); + } //默认列配置 @Input() defaultColDef: ColDef = { @@ -61,17 +95,6 @@ export class LjAgGridComponentComponent implements OnInit { /** 构造函数 */ constructor() {} // 在父组件的类中 - tableColumns: TableColumn[] = [ - { key: 'sort', title: '序号' }, - { key: 'time', title: '时间' }, - { key: 'option', title: '操作' }, - { key: 'optionDesc', title: '操作描述' }, - { key: 'optionMan', title: '操作人员' }, - { key: 'mark', title: '备注' }, - { key: 'edit', title: '编辑' } - - // 其他列配置... - ]; /**初始化 */ ngOnInit() { @@ -88,10 +111,10 @@ export class LjAgGridComponentComponent implements OnInit { } console.log('-----表格初始化-----'); // this.title = ''; - this.pageSize = 10; + this.pageSize = 3; this.pageIndex = 1; this.pageRowTotal = this.rowData.length; - + this.paginationPageSizeSelector = [200, 500, 1000]; this.gridOptions = { headerHeight: 0, rowData: this.rowData, @@ -102,9 +125,10 @@ export class LjAgGridComponentComponent implements OnInit { onGridReady(params: any) { console.log('onGridReady'); console.log(params); - setTimeout(() => { - params.api.sizeColumnsToFit(); - }, 100); + // setTimeout(() => { + // params.api.sizeColumnsToFit(); + // }, 100); + params.api.resetRowHeights(); } nzPageSizeChange(_pageSize: any) { this.pageSize = _pageSize; diff --git a/src/app/routes/data-v/workstation/workstation.component.less b/src/app/routes/data-v/workstation/workstation.component.less index 8f47394..11a075c 100644 --- a/src/app/routes/data-v/workstation/workstation.component.less +++ b/src/app/routes/data-v/workstation/workstation.component.less @@ -59,7 +59,7 @@ ::ng-deep .ag-theme-datav { --ag-border-color: #74FAFB; --ag-foreground-color: #74FAFB; - --ag-background-color: #0A1632; + // --ag-background-color: #0A1632; --ag-header-foreground-color: #74FAFB; --ag-header-background-color: #0A1632; --ag-odd-row-background-color: #0A1632;