修改ag-grid表格

src/app/routes/data-v/lj-car-info-table/lj-car-info-table.component.html

@@ -17,7 +17,7 @@
       <div class="rounded-border" style="color: #ff0200">#1</div>
 
       <lj-car-ag-grid-component
-        style="width: 100%; height: 14.5rem"
+        style="width: 100%; height: 13.5rem"
         [defaultColDef]="defaultColDef"
         [rowData]="rowData1"
         [columnDefs]="colDefs1"
@@ -27,7 +27,7 @@
     <div class="grid-item">
       <div class="rounded-border" style="color: #25f551">#2</div>
       <lj-car-ag-grid-component
-        style="width: 100%; height: 14.5rem"
+        style="width: 100%; height: 13.5rem"
         [defaultColDef]="defaultColDef"
         [rowData]="rowData1"
         [columnDefs]="colDefs1"
@@ -37,7 +37,7 @@
     <div class="grid-item">
       <div class="rounded-border" style="color: #ff0200">#3</div>
       <lj-car-ag-grid-component
-        style="width: 100%; height: 14.5rem"
+        style="width: 100%; height: 13.5rem"
         [defaultColDef]="defaultColDef"
         [rowData]="rowData1"
         [columnDefs]="colDefs1"
@@ -47,7 +47,7 @@
     <div class="grid-item">
       <div class="rounded-border" style="color: #bbbbbb">#4</div>
       <lj-car-ag-grid-component
-        style="width: 100%; height: 14.5rem"
+        style="width: 100%; height: 13.5rem"
         [defaultColDef]="defaultColDef"
         [rowData]="rowData1"
         [columnDefs]="colDefs1"

src/app/routes/data-v/lj-card/lj-card.component.html

@@ -1,4 +1,4 @@
-<div class="card-content">
+<div class="card-content" style="overflow: hidden">
   <div class="card-top-content">
     <div class="card-content-title">
       <div class="card-content-l">{{ title }}</div>

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

@@ -7,15 +7,14 @@
       [defaultColDef]="defaultColDef"
       [rowData]="runInfoRowData"
       [columnDefs]="colDefs0"
-      [gridThemeClass]="gridThemedClass"
     />
     <lj-app-ag-grid-component
       style="width: 100%"
+      [heightNum]="11"
       title="系统报警信息"
       [defaultColDef]="defaultColDef"
       [rowData]="systemWarnInfoRowData"
       [columnDefs]="colDefs1"
-      [gridThemeClass]="gridThemedClass"
     />
   </div>
 
@@ -67,7 +66,6 @@
         [defaultColDef]="defaultColDef"
         [rowData]="todayRowData"
         [columnDefs]="colDefs2"
-        [gridThemeClass]="gridThemedClass"
       />
     </div>
 

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 {

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',

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

@@ -16,15 +16,20 @@
   <ag-grid-angular
     #myGrid
     [ngStyle]="{ height: heightNum == 0 ? 'none' : heightNum + 'rem', flex: heightNum == 0 ? '1' : 'none' }"
-    [class]="gridThemeClass"
-    (gridReady)="onGridReady($event)"
+    class="ag-theme-quartz ag-theme-acmecorp"
     [suppressPaginationPanel]="true"
+    domLayout="print"
     [suppressPaginationPanel]="true"
     [suppressScrollOnNewData]="true"
+    [paginationAutoPageSize]="true"
     [paginationPageSize]="pageSize"
+    [paginationPageSizeSelector]="paginationPageSizeSelector"
+    [pagination]="true"
     [defaultColDef]="defaultColDef"
-    [rowHeight]="38"
     [gridOptions]="gridOptions"
+    domLayout="autoHeight"
+    (gridSizeChanged)="onGridSizeChanged($event)"
+    (gridReady)="onGridReady($event)"
   />
   <!-- <app-data-v-lj-table [columns]="tableColumns" [data]="tableData" /> -->
   <br />

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; /* 设置滚动条轨道颜色 */
+}

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;

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;