{{ 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;