diff --git a/src/app/routes/data-v/workstation/grid-button/grid-button.less b/src/app/routes/data-v/workstation/grid-button/grid-button.less
new file mode 100644
index 0000000..7c3c601
--- /dev/null
+++ b/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;
+ }
diff --git a/src/app/routes/data-v/workstation/grid-button/grid-button.ts b/src/app/routes/data-v/workstation/grid-button/grid-button.ts
new file mode 100644
index 0000000..b8e4bd1
--- /dev/null
+++ b/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: `
+
+
+
+ `,
+ 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;
+ }
+}
\ No newline at end of file
diff --git a/src/app/routes/data-v/workstation/workstation.component.html b/src/app/routes/data-v/workstation/workstation.component.html
index fc2fb95..a166ae0 100644
--- a/src/app/routes/data-v/workstation/workstation.component.html
+++ b/src/app/routes/data-v/workstation/workstation.component.html
@@ -1,18 +1,22 @@
\ No newline at end of file
diff --git a/src/app/routes/data-v/workstation/workstation.component.less b/src/app/routes/data-v/workstation/workstation.component.less
index 77162ec..81e2977 100644
--- a/src/app/routes/data-v/workstation/workstation.component.less
+++ b/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);
+
}
/* 设置滚动条的宽度 */
diff --git a/src/app/routes/data-v/workstation/workstation.component.ts b/src/app/routes/data-v/workstation/workstation.component.ts
index e425ce7..b84edfe 100644
--- a/src/app/routes/data-v/workstation/workstation.component.ts
+++ b/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 {