表格样式

src/app/routes/data-v/workstation/grid-button/grid-button.less

@@ -1,23 +1,17 @@
-.ag-grid-button-style{
+.ag-grid-button-style {
     cursor: pointer;
-    display: block; 
-    align-items:center;
-
-	/* 水平居中把这个打开 */
-	justify-content:center; 
-    width: 90%;
-    padding: 4px 9px;
-    font-weight: 800px;
+    display: inline-block; 
+    width: 90px;   
+    height: 90%; 
+    font-weight: 800; 
     color: #74FAFB;
     text-align: center;
-    text-decoration: none;
     background-color: transparent;
     border-color: #74FAFB;
-    border-radius: 4px;
-    transition-duration: 0.4s;  
-    }
-    
-    .ag-grid-button-style:hover {
-        color: white;
-        background-color:#74FAFB// #1795bb; 
-    }
+    border-radius: 4px; 
+}
+
+.ag-grid-button-style:hover {
+    color: white;
+    background-color: #74FAFB; 
+}

src/app/routes/data-v/workstation/grid-button/grid-button.ts

@@ -5,11 +5,12 @@ import { ICellRendererParams } from 'ag-grid-community';
 @Component({
   standalone: true,
   template: `
-    <span> 
-      <button class="ag-grid-button-style"   (click)="buttonClicked()">{{cellValue}}</button>
-    </span>
+   <span style="display: flex; justify-content: center; align-items: center; height: 100%;">
+    <button class="ag-grid-button-style" (click)="buttonClicked()">{{cellValue}}</button>
+</span>
+
   `,
-  styleUrls:['./grid-button.less']
+  styleUrls: ['./grid-button.less']
 })
 
 export class GridButtonValueRenderer implements ICellRendererAngularComp {

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

@@ -1,22 +1,23 @@
-<div nz-row [nzGutter]="[8, 8]">
+<div nz-row [nzGutter]="[12, 12]">
   <data-v-card nz-col nzSpan="12" title="待办任务">
-    <ag-grid-angular [pagination]="true" [paginationAutoPageSize]="true" [defaultColDef]="defaultColDef"
-      [rowData]="rowData" [columnDefs]="colDefs1" class="ag-theme-datav">
+    <ag-grid-angular (paginationChanged)="onPaginationChanged($event)" [pagination]="true"
+      [paginationAutoPageSize]="true" [defaultColDef]="defaultColDef" [rowData]="rowData" [columnDefs]="colDefs1"
+      class="ag-theme-quartz ag-theme-datav">
     </ag-grid-angular>
   </data-v-card>
   <data-v-card nz-col nzSpan="12" title="已办任务">
     <ag-grid-angular [pagination]="true" [paginationAutoPageSize]="true" [defaultColDef]="defaultColDef"
-      [rowData]="rowData" [columnDefs]="colDefs2" class="ag-theme-datav">
+      [rowData]="rowData" [columnDefs]="colDefs2" class="ag-theme-quartz ag-theme-datav">
     </ag-grid-angular>
   </data-v-card>
   <data-v-card nz-col nzSpan="12" title="报警信息">
     <ag-grid-angular [pagination]="true" [paginationAutoPageSize]="true" [defaultColDef]="defaultColDef"
-      [rowData]="rowData" [columnDefs]="colDefs3" class="ag-theme-datav">
+      [rowData]="rowData" [columnDefs]="colDefs3" class="ag-theme-quartz ag-theme-datav">
     </ag-grid-angular>
   </data-v-card>
   <data-v-card nz-col nzSpan="12" title="通知">
     <ag-grid-angular [pagination]="true" [paginationAutoPageSize]="true" [defaultColDef]="defaultColDef"
-      [rowData]="rowData" [columnDefs]="colDefs4" class="ag-theme-datav">
+      [rowData]="rowData" [columnDefs]="colDefs4" class="ag-theme-quartz ag-theme-datav">
     </ag-grid-angular>
   </data-v-card>
 </div>

src/app/routes/data-v/workstation/workstation.component.less

@@ -16,13 +16,34 @@
 //     background-position: top;background-positionbackground-position
 // }
 
-.workstation-content-title {
-    margin-bottom: 0.5rem;
-    font-size: 18px;
-    font-weight: 600;
-    color: #94DDF3;
+// .workstation-content-title {
+//     margin-bottom: 0.5rem;
+//     font-size: 18px;
+//     font-weight: 600;
+//     color: #94DDF3;
+// }
+
+.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 ;
+
+    .ag-cell-focus{
+        border: #74FAFB;
+    }
+
+    .ag-grid-button-style{
+        color: red;
+    }
 }
+ 
+
 
+  
 .ag-theme-datav {
     --ag-border-color: #74FAFB;
     --ag-foreground-color: #74FAFB;
@@ -34,9 +55,8 @@
     --ag-font-size: 17px;
     --ag-font-family: monospace;
 
-    height: 14rem;
-    &:extend(.ag-theme-material);
-     
+    height: 17rem;
+    &:extend(.ag-theme-material); 
 }
 
 /* 设置滚动条的宽度 */
@@ -57,10 +77,14 @@
     /* 滚动条滑块的边框 */
 }
 
+ 
+
 /* 设置滚动条轨道的样式 */
 .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-track {
     background-color: yellow;
 
+   
+    
     /* 滚动条轨道的背景颜色 */
 }
 

src/app/routes/data-v/workstation/workstation.component.ts

@@ -8,13 +8,13 @@ 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 { 
-  GridApi, 
+import {
+  GridApi,
 } from 'ag-grid-community';
 @Component({
   selector: 'app-data-v-workstation',
   standalone: true,
-  imports: [AgGridAngular, DataVCardComponent, GridButtonValueRenderer,DataVTitleComponent, ...SHARED_IMPORTS],
+  imports: [AgGridAngular, DataVCardComponent, GridButtonValueRenderer, DataVTitleComponent, ...SHARED_IMPORTS],
   templateUrl: './workstation.component.html',
   styleUrls: ['./workstation.component.less']
 })
@@ -24,10 +24,8 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit {
   private readonly elementRef = inject(ElementRef);
   private gridApi!: GridApi;
   public defaultColDef: ColDef = {
-    editable: true,
-    flex: 1,
-    minWidth: 100,
-    filter: true,
+    width: 130,
+    editable: false,
   };
   dataSet: any;
 
@@ -35,109 +33,134 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit {
     {
       rwmc: "任务1", rwms: "任务描述1", kssj: "2024-1-1", jhwcsj: "2024-1-2", sfcq: '否', dqzt: "正常", dqjd: "节点1", sjwcsj: "2024-1-2",
       bjmc: "报警1", bjms: "报警描述1", bjsj: "2024-1-1", gzyy: "-", clff: "-", tzsj: "2024-1-2", zycd: "一般", tzmc: '系统提示',
-      tznr: '账户登录', fj: "-",cz:"操作"
+      tznr: '账户登录', fj: "-", cz: "操作"
     },
     {
       rwmc: "任务2", rwms: "任务描述2", kssj: "2024-1-2", jhwcsj: "2024-1-3", sfcq: '否', dqzt: "正常", dqjd: "节点2", sjwcsj: "2024-1-2",
       bjmc: "报警2", bjms: "报警描述2", bjsj: "2024-1-2", gzyy: "-", clff: "-", tzsj: "2024-1-2", zycd: "一般", tzmc: '系统提示',
-      tznr: '账户登录', fj: "-",cz:"操作"
+      tznr: '账户登录', fj: "-", cz: "操作"
     },
     {
       rwmc: "任务3", rwms: "任务描述3", kssj: "2024-1-3", jhwcsj: "2024-1-4", sfcq: '否', dqzt: "正常", dqjd: "节点3", sjwcsj: "2024-1-2",
       bjmc: "报警3", bjms: "报警描述3", bjsj: "2024-1-3", gzyy: "-", clff: "-", tzsj: "2024-1-2", zycd: "一般", tzmc: '系统提示',
-      tznr: '账户登录', fj: "-",cz:"操作"
+      tznr: '账户登录', fj: "-", cz: "操作"
     },
     {
       rwmc: "任务4", rwms: "任务描述4", kssj: "2024-1-4", jhwcsj: "2024-1-5", sfcq: '否', dqzt: "正常", dqjd: "节点4", sjwcsj: "2024-1-2",
       bjmc: "报警4", bjms: "报警描述4", bjsj: "2024-1-4", gzyy: "-", clff: "-", tzsj: "2024-1-2", zycd: "一般", tzmc: '系统提示',
-      tznr: '账户登录', fj: "-",cz:"操作"
+      tznr: '账户登录', fj: "-", cz: "操作"
     },
     {
       rwmc: "任务5", rwms: "任务描述5", kssj: "2024-1-5", jhwcsj: "2024-1-6", sfcq: '否', dqzt: "正常", dqjd: "节点5", sjwcsj: "2024-1-2",
       bjmc: "报警5", bjms: "报警描述5", bjsj: "2024-1-5", gzyy: "-", clff: "-", tzsj: "2024-1-2", zycd: "一般", tzmc: '系统提示',
-      tznr: '账户登录', fj: "-",cz:"操作"
+      tznr: '账户登录', fj: "-", cz: "操作"
     },
     {
       rwmc: "任务6", rwms: "任务描述5", kssj: "2024-1-5", jhwcsj: "2024-1-6", sfcq: '否', dqzt: "正常", dqjd: "节点5", sjwcsj: "2024-1-2",
       bjmc: "报警5", bjms: "报警描述5", bjsj: "2024-1-5", gzyy: "-", clff: "-", tzsj: "2024-1-2", zycd: "一般", tzmc: '系统提示',
-      tznr: '账户登录', fj: "-",cz:"操作"
+      tznr: '账户登录', fj: "-", cz: "操作"
     },
     {
       rwmc: "任务7", rwms: "任务描述5", kssj: "2024-1-5", jhwcsj: "2024-1-6", sfcq: '否', dqzt: "正常", dqjd: "节点5", sjwcsj: "2024-1-2",
       bjmc: "报警5", bjms: "报警描述5", bjsj: "2024-1-5", gzyy: "-", clff: "-", tzsj: "2024-1-2", zycd: "一般", tzmc: '系统提示',
-      tznr: '账户登录', fj: "-",cz:"操作"
+      tznr: '账户登录', fj: "-", cz: "操作"
     },
     {
       rwmc: "任务8", rwms: "任务描述5", kssj: "2024-1-5", jhwcsj: "2024-1-6", sfcq: '否', dqzt: "正常", dqjd: "节点5", sjwcsj: "2024-1-2",
       bjmc: "报警5", bjms: "报警描述5", bjsj: "2024-1-5", gzyy: "-", clff: "-", tzsj: "2024-1-2", zycd: "一般", tzmc: '系统提示',
-      tznr: '账户登录', fj: "-",cz:"操作"
+      tznr: '账户登录', fj: "-", cz: "操作"
     },
     {
       rwmc: "任务9", rwms: "任务描述5", kssj: "2024-1-5", jhwcsj: "2024-1-6", sfcq: '否', dqzt: "正常", dqjd: "节点5", sjwcsj: "2024-1-2",
       bjmc: "报警5", bjms: "报警描述5", bjsj: "2024-1-5", gzyy: "-", clff: "-", tzsj: "2024-1-2", zycd: "一般", tzmc: '系统提示',
-      tznr: '账户登录', fj: "-",cz:"操作"
+      tznr: '账户登录', fj: "-", cz: "操作"
     },
     {
       rwmc: "任务10", rwms: "任务描述5", kssj: "2024-1-5", jhwcsj: "2024-1-6", sfcq: '否', dqzt: "正常", dqjd: "节点5", sjwcsj: "2024-1-2",
       bjmc: "报警5", bjms: "报警描述5", bjsj: "2024-1-5", gzyy: "-", clff: "-", tzsj: "2024-1-2", zycd: "一般", tzmc: '系统提示',
-      tznr: '账户登录', fj: "-",cz:"操作"
+      tznr: '账户登录', fj: "-", cz: "操作"
     },
     {
       rwmc: "任务11", rwms: "任务描述5", kssj: "2024-1-5", jhwcsj: "2024-1-6", sfcq: '否', dqzt: "正常", dqjd: "节点5", sjwcsj: "2024-1-2",
       bjmc: "报警5", bjms: "报警描述5", bjsj: "2024-1-5", gzyy: "-", clff: "-", tzsj: "2024-1-2", zycd: "一般", tzmc: '系统提示',
-      tznr: '账户登录', fj: "-",cz:"操作"
+      tznr: '账户登录', fj: "-", cz: "操作"
     },
     {
       rwmc: "任务12", rwms: "任务描述5", kssj: "2024-1-5", jhwcsj: "2024-1-6", sfcq: '否', dqzt: "正常", dqjd: "节点5", sjwcsj: "2024-1-2",
       bjmc: "报警5", bjms: "报警描述5", bjsj: "2024-1-5", gzyy: "-", clff: "-", tzsj: "2024-1-2", zycd: "一般", tzmc: '系统提示',
-      tznr: '账户登录', fj: "-",cz:"操作"
+      tznr: '账户登录', fj: "-", cz: "操作"
     },
-  ]; 
+  ];
 
   colDefs1: ColDef[] = [
-    { headerName: '任务名称',autoHeight:true,editable:false, field: "rwmc",  flex: 1 },
-    { headerName: '任务描述',autoHeight:true,editable:false, field: "rwms",  flex: 2 },
-    { headerName: '开始时间',autoHeight:true,editable:false, field: "kssj", flex: 1 },
-    { headerName: '计划完成时间',autoHeight:true,editable:false, field: "jhwcsj", flex: 1.5 },
-    { headerName: '是否超期',autoHeight:true,editable:false, field: "sfcq", flex: 1 },
-    { headerName: '操作', autoHeight:true,field: "cz", editable: false,flex: 1,cellRenderer: GridButtonValueRenderer, },
+    {
+      headerName: '序号',
+      cellRenderer: function (params: any) {
+        return parseInt(params.node.id) + 1
+      }, width: 100,
+      unSortIcon: true, field: "xh",
+    },
+    { headerName: '任务名称', unSortIcon: true, field: "rwmc", },
+    { headerName: '任务描述', unSortIcon: true, field: "rwms", },
+    { headerName: '开始时间', unSortIcon: true, field: "kssj", },
+    { headerName: '计划完成时间', unSortIcon: true, field: "jhwcsj", },
+    { headerName: '超期', width: 80, field: "sfcq", },
+    { headerName: '操作', autoHeight: true, width: 110, field: "cz", cellRenderer: GridButtonValueRenderer, },
   ];
 
   colDefs2: ColDef[] = [
-    { headerName: '任务名称',autoHeight:true,editable:false, field: "rwmc", flex: 1 },
-    { headerName: '任务描述',autoHeight:true,editable:false, field: "rwms", flex: 1 },
-    { headerName: '开始时间',autoHeight:true,editable:false, field: "kssj", flex: 1 },
-    { headerName: '当前状态',autoHeight:true,editable:false, field: "dqzt", flex: 1 },
-    { headerName: '当前节点',autoHeight:true,editable:false, field: "dqjd", flex: 1 },
-    { headerName: '实际完成时间',autoHeight:true,editable:false, field: "sjwcsj", flex: 1 },
-    { headerName: '操作', field: "cz",autoHeight:true,editable: false, flex: 1,cellRenderer: GridButtonValueRenderer, },
+    {
+      headerName: '序号', cellRenderer: function (params: any) {
+        return parseInt(params.node.id) + 1
+      }, width: 100, unSortIcon: true, field: "xh",
+    },
+    { headerName: '任务名称', unSortIcon: true, field: "rwmc", },
+    { headerName: '任务描述', unSortIcon: true, field: "rwms", },
+    { headerName: '开始时间', unSortIcon: true, field: "kssj", },
+    { headerName: '当前状态', field: "dqzt", },
+    { headerName: '当前节点', field: "dqjd", },
+    { headerName: '实际完成时间', field: "sjwcsj", },
+    { headerName: '操作', autoHeight: true, width: 110, field: "cz", cellRenderer: GridButtonValueRenderer, },
   ];
 
   colDefs3: ColDef[] = [
-    { headerName: '报警名称', autoHeight:true,field: "bjmc", flex: 1 },
-    { headerName: '报警描述', autoHeight:true,field: "bjms", flex: 1 },
-    { headerName: '报警时间', autoHeight:true,field: "bjsj", flex: 1 },
-    { headerName: '故障原因', autoHeight:true,field: "gzyy", flex: 1.5 },
-    { headerName: '处理方法', autoHeight:true,field: "clff", flex: 1 },
-    { headerName: '操作', autoHeight:true,field: "cz", flex: 1,cellRenderer: GridButtonValueRenderer, },
+    {
+      headerName: '序号', cellRenderer: function (params: any) {
+        return parseInt(params.node.id) + 1
+      }, width: 100, unSortIcon: true, field: "xh",
+    },
+    { headerName: '报警名称', unSortIcon: true, field: "bjmc", },
+    { headerName: '报警等级', unSortIcon: true, field: "bjdg", },
+    { headerName: '报警描述', unSortIcon: true, field: "bjms", },
+    { headerName: '报警时间', unSortIcon: true, field: "bjsj", },
+    { headerName: '操作', autoHeight: true, width: 110, field: "cz", cellRenderer: GridButtonValueRenderer, },
+
+    { headerName: '故障原因', field: "gzyy", },
+    { headerName: '处理方法', field: "clff", },
+    { headerName: '注意事项', field: "clff", },
   ];
 
   // Column Definitions: Defines the columns to be displayed.
   colDefs4: ColDef[] = [
-    { headerName: '通知时间', autoHeight:true,field: "tzsj", flex: 1 },
-    { headerName: '重要程度', autoHeight:true,field: "zycd", flex: 1 },
-    { headerName: '通知名称', autoHeight:true,field: "tzmc", flex: 1 },
-    { headerName: '通知内容', autoHeight:true,field: "tznr", flex: 1 },
-    { headerName: '附件', autoHeight:true,field: "fj", flex: 1 },
-    { headerName: '操作', autoHeight:true,field: "cz", flex: 1,cellRenderer: GridButtonValueRenderer, },
+    {
+      headerName: '序号', cellRenderer: function (params: any) {
+        return parseInt(params.node.id) + 1
+      }, width: 100, unSortIcon: true, field: "xh",
+    },
+    { headerName: '通知时间', unSortIcon: true, field: "tzsj", },
+    { headerName: '重要程度', unSortIcon: true, field: "zycd", },
+    { headerName: '通知名称', unSortIcon: true, field: "tzmc", },
+    { headerName: '通知内容', unSortIcon: true, field: "tznr", },
+    { headerName: '附件', field: "fj", },
+    { headerName: '操作', autoHeight: true, width: 110, field: "cz", cellRenderer: GridButtonValueRenderer, },
   ];
 
   ngOnInit(): void {
     console.log('ngOnInit');
-    this.gridApi.addEventListener('selectionChanged', (event:any) => {
-      if (event.api.getSelectedRows().length === event.api.paginationGetRowCount()) {
-      }
-    });
+    // this.gridApi.addEventListener("resize", (event: any) => {
+    //   console.log("addEventListener");
+    // });
+    //this.gridApi.sizeColumnsToFit();
   }
 
   ngAfterViewInit(): void {
@@ -154,4 +177,9 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit {
     //   .createStatic(FormEditComponent, { i: { id: 0 } })
     //   .subscribe(() => this.st.reload());
   }
+  //页面尺寸改变
+  onPaginationChanged($event: any) {
+    console.log('onPaginationChanged{}');
+
+  }
 }