优化表格

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

@@ -1,24 +1,23 @@
 <div nz-row [nzGutter]="[12, 12]">
-  <data-v-card nz-col nzSpan="12" title="待办任务">
-
-    <app-ag-grid-component [defaultColDef]="defaultColDef" [rowData]="rowData" [columnDefs]="colDefs1"
-      [gridThemeClass]="gridThemedClass">
+  <data-v-card nz-col nzSpan="24" nzXs="24" nzSm="24" nzMd="12" nzLg="12" nzXl="12" nzXXl="12" title="待办任务">
+    <app-ag-grid-component style="width: 100%;" [defaultColDef]="defaultColDef" [rowData]="rowData"
+      [columnDefs]="colDefs1" [gridThemeClass]="gridThemedClass">
     </app-ag-grid-component>
   </data-v-card>
-  <data-v-card nz-col nzSpan="12" title="已办任务">
+  <data-v-card nz-col nzSpan="24" nzXs="24" nzSm="24" nzMd="12" nzLg="12" nzXl="12" nzXXl="12" title="已办任务">
 
-    <app-ag-grid-component [defaultColDef]="defaultColDef" [rowData]="rowData" [columnDefs]="colDefs2"
-      gridThemeClass="ag-theme-quartz ag-theme-datav">
+    <app-ag-grid-component style="width: 100%;" [defaultColDef]="defaultColDef" [rowData]="rowData"
+      [columnDefs]="colDefs2" gridThemeClass="ag-theme-quartz ag-theme-datav">
     </app-ag-grid-component>
   </data-v-card>
-  <data-v-card nz-col nzSpan="12" title="报警信息">
-    <app-ag-grid-component [defaultColDef]="defaultColDef" [rowData]="rowData" [columnDefs]="colDefs3"
-      gridThemeClass="ag-theme-quartz ag-theme-datav">
+  <data-v-card nz-col nzSpan="24" nzXs="24" nzSm="24" nzMd="12" nzLg="12" nzXl="12" nzXXl="12" title="报警信息">
+    <app-ag-grid-component style="width: 100%;" [defaultColDef]="defaultColDef" [rowData]="rowData"
+      [columnDefs]="colDefs3" gridThemeClass="ag-theme-quartz ag-theme-datav">
     </app-ag-grid-component>
   </data-v-card>
-  <data-v-card nz-col nzSpan="12" title="通知">
-    <app-ag-grid-component [defaultColDef]="defaultColDef" [rowData]="rowData" [columnDefs]="colDefs4"
-      gridThemeClass="ag-theme-quartz ag-theme-datav">
+  <data-v-card nz-col nzSpan="24" nzXs="24" nzSm="24" nzMd="12" nzLg="12" nzXl="12" nzXXl="12" title="通知">
+    <app-ag-grid-component style="width: 100%;" [defaultColDef]="defaultColDef" [rowData]="rowData"
+      [columnDefs]="colDefs4" gridThemeClass="ag-theme-quartz ag-theme-datav">
     </app-ag-grid-component>
   </data-v-card>
 </div>

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

@@ -57,7 +57,7 @@
     --ag-header-background-color: #0A1632;
     --ag-odd-row-background-color: #0A1632;
     --ag-header-column-resize-handle-color: rgb(126 46 132);
-    --ag-font-size: 17px;
+    --ag-font-size: 12px;
     --ag-font-family: monospace;
 
     height: 17rem;
@@ -69,7 +69,11 @@
     //标题间的 竖线
     ::ng-deep .ag-header-cell-resize {
         --ag-header-column-resize-handle-color: #00eff8;
+    }
 
+    ::ng-deep .ag-header-row {
+        font-size: 14px;
+        font-weight: 700;
     }
 
     //外边框去掉圆角

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

@@ -26,117 +26,60 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit {
 
   @ViewChild('myGrid') grid!: AgGridAngular;
   public defaultColDef: ColDef = {
-    width: 130,
+    width: 170,
     editable: false,
   };
 
   public gridThemedClass: string = 'ag-theme-quartz ag-theme-datav';
+  //多模拟几行数据出来
 
-  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: "-", 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: "操作"
-    },
-    {
-      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: "操作"
-    },
-    {
-      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: "操作"
-    },
-    {
-      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: "操作"
-    },
-    {
-      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: "任务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: "操作"
-    },
-    {
-      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: "任务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: "任务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: "任务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: "任务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: "操作"
-    },
-  ];
+  rowData: object[] = [];
 
   colDefs1: ColDef[] = [
     {
       headerName: '序号',
-      cellRenderer: function (params: any) {
-        return parseInt(params.node.id) + 1
-      }, flex: 1,
-
+      valueGetter: function (params: any) {
+        return parseInt(params.node.id) + 1;
+      },
+      width: 90,
+      sortable: true,
       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: '任务描述', unSortIcon: true, field: "rwms", minWidth: 170, flex: 1 },
+    { headerName: '开始时间', unSortIcon: true, field: "kssj", minWidth: 170, flex: 1 },
+    { headerName: '计划完成时间', unSortIcon: true, field: "jhwcsj", minWidth: 170, flex: 1 },
     { headerName: '超期', width: 80, field: "sfcq", },
     { headerName: '操作', autoHeight: true, width: 110, field: "cz", cellRenderer: GridButtonValueRenderer, },
   ];
 
   colDefs2: ColDef[] = [
     {
-      headerName: '序号', cellRenderer: function (params: any) {
-        return parseInt(params.node.id) + 1
-      }, width: 100, unSortIcon: true, field: "xh",
+      headerName: '序号', valueGetter: function (params: any) {
+        return parseInt(params.node.id) + 1;
+      }, width: 90, unSortIcon: true, field: "xh",
     },
     { headerName: '任务名称', unSortIcon: true, field: "rwmc", },
-    { headerName: '任务描述', unSortIcon: true, field: "rwms", },
-    { headerName: '开始时间', unSortIcon: true, field: "kssj", },
+    { headerName: '任务描述', unSortIcon: true, field: "rwms", minWidth: 170, flex: 1 },
+    { headerName: '开始时间', unSortIcon: true, field: "kssj", minWidth: 170, flex: 1 },
     { headerName: '当前状态', field: "dqzt", },
     { headerName: '当前节点', field: "dqjd", },
-    { headerName: '实际完成时间', field: "sjwcsj", },
+    { headerName: '实际完成时间', field: "sjwcsj", minWidth: 170, flex: 1 },
     { headerName: '操作', autoHeight: true, width: 110, field: "cz", cellRenderer: GridButtonValueRenderer, },
   ];
 
   colDefs3: ColDef[] = [
     {
-      headerName: '序号', cellRenderer: function (params: any) {
-        return parseInt(params.node.id) + 1
-      }, width: 100, unSortIcon: true, field: "xh",
+      headerName: '序号', valueGetter: function (params: any) {
+        return parseInt(params.node.id) + 1;
+      }, width: 90, 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: '报警描述', unSortIcon: true, field: "bjms", minWidth: 170, flex: 1 },
+    { headerName: '报警时间', unSortIcon: true, field: "bjsj", minWidth: 170, flex: 1 },
     { headerName: '操作', autoHeight: true, width: 110, field: "cz", cellRenderer: GridButtonValueRenderer, },
 
     { headerName: '故障原因', field: "gzyy", },
@@ -147,14 +90,14 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit {
   // Column Definitions: Defines the columns to be displayed.
   colDefs4: ColDef[] = [
     {
-      headerName: '序号', cellRenderer: function (params: any) {
-        return parseInt(params.node.id) + 1
-      }, width: 100, unSortIcon: true, field: "xh",
+      headerName: '序号', valueGetter: function (params: any) {
+        return parseInt(params.node.id) + 1;
+      }, width: 90, unSortIcon: true, field: "xh",
     },
-    { headerName: '通知时间', unSortIcon: true, field: "tzsj", },
+    { headerName: '通知时间', unSortIcon: true, field: "tzsj", minWidth: 170, flex: 1 },
     { headerName: '重要程度', unSortIcon: true, field: "zycd", },
     { headerName: '通知名称', unSortIcon: true, field: "tzmc", },
-    { headerName: '通知内容', unSortIcon: true, field: "tznr", },
+    { headerName: '通知内容', unSortIcon: true, field: "tznr", minWidth: 170, flex: 1 },
     { headerName: '附件', field: "fj", },
     { headerName: '操作', autoHeight: true, width: 110, field: "cz", cellRenderer: GridButtonValueRenderer, },
   ];
@@ -162,6 +105,13 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit {
   ngOnInit(): void {
     console.log('ngOnInit' + this.rowData.length);
 
+    for (var i = 1; i < 30; i++) {
+      this.rowData.push({
+        rwmc: '任务' + i, rwms: '任务描述' + i, kssj: '2024-1-' + i + ' 13:38:' + i * 11, jhwcsj: '2024-1-' + i + ' 13:38:' + i * 10, sfcq: '否',
+        dqzt: "正常", dqjd: "节点" + i, sjwcsj: '2024-1-' + i + ' 13:38:' + i * 27, bjmc: "报警5", bjms: "报警描述5", bjsj: '2024-1-' + i + ' 13:38:' + i * 12,
+        gzyy: "-", clff: "-", tzsj: '2024-1-' + i + ' 13:38:' + i * 19, zycd: "一般", tzmc: '系统提示', tznr: '账户登录', fj: "-", cz: "操作"
+      });
+    }
 
   }