增加按钮

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

@@ -0,0 +1,23 @@
+.ag-grid-button-style{
+    cursor: pointer;
+    display: block; 
+    align-items:center;
+
+	/* 水平居中把这个打开 */
+	justify-content:center; 
+    width: 90%;
+    padding: 4px 9px;
+    font-weight: 800px;
+    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; 
+    }

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

@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+import { ICellRendererAngularComp } from 'ag-grid-angular';
+import { ICellRendererParams } from 'ag-grid-community';
+
+@Component({
+  standalone: true,
+  template: `
+    <span> 
+      <button class="ag-grid-button-style"   (click)="buttonClicked()">{{cellValue}}</button>
+    </span>
+  `,
+  styleUrls:['./grid-button.less']
+})
+
+export class GridButtonValueRenderer implements ICellRendererAngularComp {
+  public cellValue!: string;
+  public cellPath!: string;
+  // gets called once before the renderer is used
+  agInit(params: ICellRendererParams): void {
+    this.cellValue = this.getValueToDisplay(params);
+  }
+
+  // gets called whenever the user gets the cell to refresh
+  refresh(params: ICellRendererParams) {
+    // set value into cell again
+    this.cellValue = this.getValueToDisplay(params);
+    return true;
+  }
+
+  buttonClicked() {
+    alert(`点击了 ${this.cellValue}`);
+  }
+
+  getValueToDisplay(params: ICellRendererParams) {
+    return params.valueFormatted ? params.valueFormatted : params.value;
+  }
+}

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

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

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

@@ -24,7 +24,6 @@
 }
 
 .ag-theme-datav {
-    // &:extend(.ag-theme-material);
     --ag-border-color: #74FAFB;
     --ag-foreground-color: #74FAFB;
     --ag-background-color: #0A1632;
@@ -36,6 +35,8 @@
     --ag-font-family: monospace;
 
     height: 14rem;
+    &:extend(.ag-theme-material);
+     
 }
 
 /* 设置滚动条的宽度 */

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

@@ -7,11 +7,14 @@ 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 { 
+  GridApi, 
+} from 'ag-grid-community';
 @Component({
   selector: 'app-data-v-workstation',
   standalone: true,
-  imports: [AgGridAngular, DataVCardComponent, DataVTitleComponent, ...SHARED_IMPORTS],
+  imports: [AgGridAngular, DataVCardComponent, GridButtonValueRenderer,DataVTitleComponent, ...SHARED_IMPORTS],
   templateUrl: './workstation.component.html',
   styleUrls: ['./workstation.component.less']
 })
@@ -19,122 +22,122 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit {
   private readonly http = inject(_HttpClient);
   private readonly modal = inject(ModalHelper);
   private readonly elementRef = inject(ElementRef);
-
+  private gridApi!: GridApi;
+  public defaultColDef: ColDef = {
+    editable: true,
+    flex: 1,
+    minWidth: 100,
+    filter: true,
+  };
   dataSet: any;
 
   rowData = [
     {
       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: "-"
+      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: "-"
+      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: "-"
+      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: "-"
+      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: "-"
-    },
-    {
-      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: "-"
-    },
-    {
-      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: "-"
-    },
-    {
-      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: "-"
+      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: "-"
+      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:"操作"
     },
     {
-      rwmc: "任务5", rwms: "任务描述5", kssj: "2024-1-5", jhwcsj: "2024-1-6", sfcq: '否', dqzt: "正常", dqjd: "节点5", sjwcsj: "2024-1-2",
+      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: "-"
+      tznr: '账户登录', fj: "-",cz:"操作"
     },
     {
-      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: "-"
+      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:"操作"
     },
     {
-      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: "-"
+      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:"操作"
     },
     {
-      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: "-"
+      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:"操作"
     },
     {
-      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: "-"
+      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:"操作"
     },
     {
-      rwmc: "任务5", rwms: "任务描述5", kssj: "2024-1-5", jhwcsj: "2024-1-6", sfcq: '否', dqzt: "正常", dqjd: "节点5", sjwcsj: "2024-1-2",
+      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: "-"
+      tznr: '账户登录', fj: "-",cz:"操作"
     },
-  ];
+  ]; 
 
   colDefs1: ColDef[] = [
-    { headerName: '任务名称', field: "rwmc", flex: 1 },
-    { headerName: '任务描述', field: "rwms", flex: 2 },
-    { headerName: '开始时间', field: "kssj", flex: 1 },
-    { headerName: '计划完成时间', field: "jhwcsj", flex: 1.5 },
-    { headerName: '是否超期', field: "sfcq", flex: 1 },
+    { 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, },
   ];
 
   colDefs2: ColDef[] = [
-    { headerName: '任务名称', field: "rwmc", flex: 1 },
-    { headerName: '任务描述', field: "rwms", flex: 1 },
-    { headerName: '开始时间', field: "kssj", flex: 1 },
-    { headerName: '当前状态', field: "dqzt", flex: 1 },
-    { headerName: '当前节点', field: "dqjd", flex: 1 },
-    { headerName: '实际完成时间', field: "sjwcsj", flex: 1 },
+    { 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, },
   ];
 
   colDefs3: ColDef[] = [
-    { headerName: '报警名称', field: "bjmc", flex: 1 },
-    { headerName: '报警描述', field: "bjms", flex: 1 },
-    { headerName: '报警时间', field: "bjsj", flex: 1 },
-    { headerName: '故障原因', field: "gzyy", flex: 1.5 },
-    { headerName: '处理方法', field: "clff", flex: 1 },
+    { 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, },
   ];
 
   // Column Definitions: Defines the columns to be displayed.
   colDefs4: ColDef[] = [
-    { headerName: '通知时间', field: "tzsj", flex: 1 },
-    { headerName: '重要程度', field: "zycd", flex: 1 },
-    { headerName: '通知名称', field: "tzmc", flex: 1 },
-    { headerName: '通知内容', field: "tznr", flex: 1 },
-    { headerName: '附件', field: "fj", flex: 1 }
+    { 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, },
   ];
 
   ngOnInit(): void {
+    console.log('ngOnInit');
+    this.gridApi.addEventListener('selectionChanged', (event:any) => {
+      if (event.api.getSelectedRows().length === event.api.paginationGetRowCount()) {
+      }
+    });
   }
 
   ngAfterViewInit(): void {