完成对ag-table标题的封装

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

@@ -1,11 +1,39 @@
-<!-- MenuOverviewComponent 模板 -->
+<div nz-row [nzGutter]="[12, 12]">
+  <lj-app-ag-grid-component
+    style="width: 50%"
+    title="代办任务"
+    [defaultColDef]="defaultColDef"
+    [rowData]="rowData"
+    [columnDefs]="colDefs1"
+    [gridThemeClass]="gridThemedClass"
+  />
 
-<div *ngIf="children && children.length">
-  <!-- 这里我们创建一个二级导航菜单，它将遍历所有的子菜单项 -->
-  <ul>
-    <li *ngFor="let child of children">
-      <!-- 此处的 routerLink 应根据你的路由结构进行调整 -->
-      <a [routerLink]="child.link">{{ child.text }}</a>
-    </li>
-  </ul>
+  <!-- </data-v-card> -->
+  <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]="colDefs2"
+      gridThemeClass="ag-theme-quartz ag-theme-datav"
+    />
+  </data-v-card>
+  <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"
+    />
+  </data-v-card>
+  <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"
+    />
+  </data-v-card>
 </div>

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

@@ -1,20 +1,62 @@
-/* stylelint-disable comment-empty-line-before */
-.dashboard-container {
-    width: 20rem;
-    height: 10rem;
-    margin-top: -3rem;
-    margin-bottom: -2rem;
+// .workstation-header {
+//     width: 100%;widthwidth
+//     height: 3rem;heightheight
+//     /* 水平宽度占据整个视口宽度 */
+//     background-image: url('../../../../assets/dashboard/dashboard_workstation.jpg');background-imagebackground-image
+//     background-size: cover;background-sizebackground-size
+//     /* 背景图片尺寸适应 */
+//     background-position: top;background-positionbackground-position
+// }
+// .workstation-content {
+//     height: 18rem;heightheight
+//     padding: 1rem 1.5rem;paddingpadding
+//     background-image: url('../../../../assets/dashboard/dashboard_card_bg.jpg');background-imagebackground-image
+//     background-size: cover;background-sizebackground-size
+//     /* 背景图片尺寸适应 */
+//     background-position: top;background-positionbackground-position
+// }
+
+// .workstation-content-title {
+//     margin-bottom: 0.5rem;
+//     font-size: 18px;
+//     font-weight: 600;
+//     color: #94DDF3;
+// }
+
+/* 分页器 */
+
+.ag-header-center .ag-header-group-cell-label, 
+.ag-header-center .ag-header-cell-label {
+    display: grid;
+    justify-content: center;
+    color: #000;
+    text-align: center;
+    background: #000;
 }
 
+::ng-deep .ag-theme-datav ::ng-deep .ag-row-selected .ag-ltr .ag-cell {
+    color: red !important;
+}
 
-.sys-status-title {
-    font-size: 18px;
+//   选中行样式
+::ng-deep .ag-theme-datav ::ng-deep .ag-ltr .ag-row-focus {
     font-weight: 600;
-    color: #94DDF3;
-    text-align: center;
+    color: red;
+
+    .ag-cell-focus {
+        border: #74FAFB;
+    }
+
+    .ag-grid-button-style {
+        color: red;
+        border-color: red;
+    }
 }
 
-.ag-theme-datav {
+
+
+
+::ng-deep .ag-theme-datav {
     --ag-border-color: #74FAFB;
     --ag-foreground-color: #74FAFB;
     --ag-background-color: #0A1632;
@@ -22,82 +64,109 @@
     --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: 5rem;
-}
+    height: 17rem;
+    font-weight: 700;
+    //竖线颜色
+    border-width: 3px;
+    &:extend(.ag-theme-material);
+
+    //标题间的 竖线
+    ::ng-deep .ag-header-cell-resize {
+        --ag-header-column-resize-handle-color: #00eff8;
+    }
 
-.scrollable-container {
-    overflow-y: auto;
-    /* 水平滚动关闭，垂直滚动开启 */
-    width: 100%;
-    /* 或者指定一个固定的宽度 */
-    height: 20rem;
-    /* 根据需求设置容器的高度以触发滚动条 */
+    ::ng-deep .ag-header-row {
+        font-size: 14px;
+        font-weight: 700;
+    }
+
+    //外边框去掉圆角
+    ::ng-deep .ag-root-wrapper {
+        border-radius: 0;
+    }
 }
 
-.centered-element {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
+/* 设置滚动条的宽度 */
+::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar {
+    width: 12em;
 
 }
 
-.status-container {
-    display: flex;
-    align-items: center;
-    padding: 0.5rem;
+/* 设置滚动条滑块的样式 */
+::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb {
+    margin-left: 40px;
+    background-color: #00eff8;
+
+    /* 圆角 */
+    border: 2px solid #00eff8;
+
+    /* 滚动条滑块的背景颜色 */
+
+
+    /* 滚动条滑块的边框 */
 }
 
-.status-circle {
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
 
-    &.red {
-        background-color: red;
-    }
 
-    &.green {
-        background-color: green;
-    }
+/* 设置滚动条轨道的样式 */
+::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-color: #00eff8;
+
+    /* 滚动条轨道的背景颜色 */
 }
 
-.progress-container {
-    display: flex;
-    color: white;
+/* 设置滚动条滑块悬浮时的样式 */
+::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover {
+    margin-left: 40px;
+    background-color: #00eff8;
 
+    /* 滚动条滑块悬浮时的背景颜色 */
+}
 
-    .status-text {
-        width: 8rem;
-        margin-left: 6px;
-        /* 调整文字与圆形之间的间距 */
-        font-size: 16px;
-        font-weight: 600;
-        color: #74FAFB;
-    }
+/* 设置滚动条滑块激活（即正在拖动滑块）时的样式 */
+::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:active {
+    background-color: #00eff8;
 
-    .status-ext-text {
-        margin-top: 3px;
-        /* 将文本转换为行内块元素 */
-        font-size: 12px;
+    /* 滚动条滑块激活时的背景颜色 */
+}
 
-    }
+//竖向
+::ng-deep .ag-body-vertical-scroll-viewport {
+    scrollbar-color: auto;
+}
+
+//横向
+::ng-deep .ag-body-horizontal-scroll-viewport {
+    scrollbar-color: auto;
+}
+
+/* 设置滚动条的宽度 */
+::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar {
+    height: 14em;
+    color: #000;
+}
+
+/* 设置横向滚动条轨道的样式 */
+::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-color: #00eff8;
 }
 
-.progress-display {
-    color: white;
-    text-align: right;
+/* 设置横向滚动条滑块悬浮时的样式 */
+::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:hover {
+    background-color: #00eff8;
 }
 
-.statistic-item-container {
-    display: flex;
-    padding: 1rem 0;
-    color: white;
+/* 设置横向滚动条滑块激活时的样式 */
+::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:active {
+    background-color: #00eff8;
 }
 
-.white-color-theme {
-    color: #74FAFB;
+/* 设置横向滚动条滑块的颜色 */
+::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb {
+    background-color: #00eff8;
 }

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

@@ -1,70 +1,175 @@
-import { CommonModule } from '@angular/common';
-import { Component, OnInit, ViewChild, inject } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { STColumn, STComponent } from '@delon/abc/st';
-import { SFSchema } from '@delon/form';
-import { ModalHelper, _HttpClient } from '@delon/theme';
+import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
+import { ModalHelper, TitleService, _HttpClient } from '@delon/theme';
 import { SHARED_IMPORTS } from '@shared';
 import { AgGridAngular } from 'ag-grid-angular';
-import { ColDef } from 'ag-grid-community'; // Column Definition Type Interface
-import * as echarts from 'echarts';
-import { NzBadgeModule } from 'ng-zorro-antd/badge';
-import { NzListModule } from 'ng-zorro-antd/list';
-import { NzProgressModule } from 'ng-zorro-antd/progress';
-import { IMqttMessage, MqttService } from 'ngx-mqtt';
-import { Subscription } from 'rxjs';
-
-import { ChartComponentComponent } from './chart-component/chart-component.component';
+import { ColDef, GridApi } from 'ag-grid-community';
+import { NzPaginationModule } from 'ng-zorro-antd/pagination';
+import { MqttService } from 'ngx-mqtt';
+
 import { DataVCardComponent } from '../card/card.component';
-import { Menu } from '../menu/lj-menu.interface';
 import { DataVTitleComponent } from '../title/title.component';
-
+import { AgGridComponentComponent } from '../workstation/ag-grid-component/ag-grid-component.component';
+import { GridButtonValueRenderer } from '../workstation/grid-button/grid-button';
+import { LjAgGridComponentComponent } from '../workstation/lj-ag-grid-component/lj-ag-grid-component.component';
 @Component({
   selector: 'app-data-v-s1',
   standalone: true,
   templateUrl: './second1.component.html',
   styleUrls: ['./second1.component.less'],
   imports: [
-    CommonModule,
-    NzBadgeModule,
-    NzProgressModule,
     AgGridAngular,
+    AgGridComponentComponent,
+    LjAgGridComponentComponent,
+    NzPaginationModule,
     DataVCardComponent,
+    GridButtonValueRenderer,
     DataVTitleComponent,
-    NzListModule,
-    ...SHARED_IMPORTS,
-    ChartComponentComponent
+    ...SHARED_IMPORTS
   ]
 })
 export class DataVSecond1Component implements OnInit {
-  menu: Menu | null = null;
-  children: Menu[] | null = null;
+  private readonly http = inject(_HttpClient);
+  private readonly modal = inject(ModalHelper);
+  private readonly elementRef = inject(ElementRef);
+  private readonly titleService = inject(TitleService);
+
+  @ViewChild('myGrid') grid!: AgGridAngular;
+  public defaultColDef: ColDef = {
+    width: 170,
+    editable: false
+  };
+
+  public gridThemedClass: string = 'ag-theme-quartz ag-theme-datav';
+  //多模拟几行数据出来
+
+  rowData: object[] = [];
+
+  colDefs1: ColDef[] = [
+    {
+      headerName: '序号',
+      valueGetter: function (params: any) {
+        return parseInt(params.node.id) + 1;
+      },
+      width: 90,
+      // flex: 2,
+      sortable: true,
+      unSortIcon: true,
+      field: 'xh'
+    },
+
+    { headerName: '任务名称', unSortIcon: true, width: 120, field: 'rwmc' },
+    { headerName: '任务描述', unSortIcon: true, field: 'rwms', width: 120 },
+    { headerName: '开始时间', headerClass: 'ag-header-center', unSortIcon: true, field: 'kssj', width: 180 },
+    { headerName: '计划完成时间', unSortIcon: true, field: 'jhwcsj', width: 180 },
+    { headerName: '超期', width: 70, field: 'sfcq' },
+    { headerName: '操作', width: 90, autoHeaderHeight: true, field: 'cz', cellRenderer: GridButtonValueRenderer }
+  ];
+
+  colDefs2: ColDef[] = [
+    {
+      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', minWidth: 170, flex: 1 },
+    { headerName: '开始时间', unSortIcon: true, field: 'kssj', minWidth: 170, flex: 1 },
+    { headerName: '当前状态', field: 'dqzt' },
+    { headerName: '当前节点', field: 'dqjd' },
+    { headerName: '实际完成时间', field: 'sjwcsj', minWidth: 170, flex: 1 },
+    { headerName: '操作', autoHeight: true, width: 110, field: 'cz', cellRenderer: GridButtonValueRenderer }
+  ];
 
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router
-  ) {}
+  colDefs3: ColDef[] = [
+    {
+      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', 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' },
+    { headerName: '处理方法', field: 'clff' },
+    { headerName: '注意事项', field: 'clff' }
+  ];
+
+  // Column Definitions: Defines the columns to be displayed.
+  colDefs4: ColDef[] = [
+    {
+      headerName: '序号',
+      valueGetter: function (params: any) {
+        return parseInt(params.node.id) + 1;
+      },
+      width: 90,
+      unSortIcon: true,
+      field: 'xh'
+    },
+    { headerName: '通知时间', unSortIcon: true, field: 'tzsj', minWidth: 170, flex: 1 },
+    { headerName: '重要程度', unSortIcon: true, field: 'zycd' },
+    { headerName: '通知名称', unSortIcon: true, field: 'tzmc' },
+    { headerName: '通知内容', unSortIcon: true, field: 'tznr', minWidth: 170, flex: 1 },
+    { headerName: '附件', field: 'fj' },
+    { headerName: '操作', autoHeight: true, width: 110, field: 'cz', cellRenderer: GridButtonValueRenderer }
+  ];
+
+  client: any;
+
+  constructor(private _mqttService: MqttService) {
+    this.client = _mqttService;
+  }
 
   ngOnInit(): void {
-    const currentNavigation = this.router.getCurrentNavigation();
-    if (currentNavigation?.extras.state) {
-      this.menu = currentNavigation.extras.state['menu'];
-      // 这里假设 'menu' 是事先定义好的属性，它应该是正确的键
-      this.children = this.menu?.children || null;
-      console.log('穿带过来的菜单参数');
-      console.log(this.menu);
-      console.log(this.children);
+    this.titleService.setTitle('我的工作站');
+
+    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: '操作'
+      });
     }
   }
 
-  // 如果需要导航到子菜单的特定页面，继续实现该逻辑
-  navigateToChild(childMenu: Menu): void {
-    if (childMenu.link) {
-      this.router.navigateByUrl(childMenu.link);
-    }
+  ngAfterViewInit(): void {
+    // 获取 ag-grid 元素
+    const gridDiv = this.elementRef.nativeElement.querySelector('.ag-theme-datav');
+    // 获取 ag-grid 内部滚动容器元素
+    const scrollContainer = gridDiv.querySelector('.ag-body-viewport');
+    // 获取滚动条元素
+    const scrollBar = gridDiv.querySelector('.ag-scroller');
   }
 
-  // ngOnDestroy(): void {
-  //   this.subscription.unsubscribe();
-  // }
+  add(): void {
+    // this.modal
+    //   .createStatic(FormEditComponent, { i: { id: 0 } })
+    //   .subscribe(() => this.st.reload());
+  }
 }

src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.ts

@@ -15,7 +15,8 @@ import { TableColumn, DataVLjTableComponent } from '../../lj-table/lj-table.comp
 export class LjAgGridComponentComponent implements OnInit {
   [x: string]: any;
   @ViewChild('myGrid') grid!: AgGridAngular;
-  public title = '';
+  @Input() title: string = '';
+
   public showSetting = true;
   /**每页数 */
   public pageSize!: number;
@@ -80,8 +81,13 @@ export class LjAgGridComponentComponent implements OnInit {
   ];
   /**初始化 */
   ngOnInit() {
+    if (this.title) {
+      console.log('Title has been passed:', this.title);
+    } else {
+      console.log('Title has not been passed');
+    }
     console.log('-----表格初始化-----');
-    this.title = '待办任务';
+    // this.title = '';
     this.pageSize = 10;
     this.pageIndex = 1;
     this.pageRowTotal = this.rowData.length;

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

@@ -2,6 +2,7 @@
   <!-- <data-v-card nz-col nzSpan="24" nzXs="24" nzSm="24" nzMd="12" nzLg="12" nzXl="12" nzXXl="12" title="待办任务"> -->
   <lj-app-ag-grid-component
     style="width: 50%"
+    [title]="'待办任务'"
     [defaultColDef]="defaultColDef"
     [rowData]="rowData"
     [columnDefs]="colDefs1"