From 626bdd52f6800b6f3abc91eb2e95d6d85096e690 Mon Sep 17 00:00:00 2001 From: "SK-20230509GLVS\\Administrator" Date: Wed, 6 Mar 2024 09:39:55 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../workstation/grid-button/grid-button.less | 23 +++ .../workstation/grid-button/grid-button.ts | 37 +++++ .../workstation/workstation.component.html | 12 +- .../workstation/workstation.component.less | 3 +- .../workstation/workstation.component.ts | 131 +++++++++--------- 5 files changed, 137 insertions(+), 69 deletions(-) create mode 100644 src/app/routes/data-v/workstation/grid-button/grid-button.less create mode 100644 src/app/routes/data-v/workstation/grid-button/grid-button.ts 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 {