+
-
+
+ [rowData]="rowData" [columnDefs]="colDefs2" class="ag-theme-quartz ag-theme-datav">
+ [rowData]="rowData" [columnDefs]="colDefs3" class="ag-theme-quartz ag-theme-datav">
+ [rowData]="rowData" [columnDefs]="colDefs4" class="ag-theme-quartz ag-theme-datav">
\ 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 81e2977..78973b6 100644
--- a/src/app/routes/data-v/workstation/workstation.component.less
+++ b/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;
+
+
/* 滚动条轨道的背景颜色 */
}
diff --git a/src/app/routes/data-v/workstation/workstation.component.ts b/src/app/routes/data-v/workstation/workstation.component.ts
index b84edfe..ab4f49f 100644
--- a/src/app/routes/data-v/workstation/workstation.component.ts
+++ b/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{}');
+
+ }
}