auseft.platform.datav/src/app/routes/data-v/workstation/workstation.component.ts

import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
import { STColumn, STComponent } from '@delon/abc/st';
import { SFSchema } from '@delon/form';
import { ModalHelper, _HttpClient } from '@delon/theme';
import { SHARED_IMPORTS } from '@shared';
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';

@Component({
  selector: 'app-data-v-workstation',
  standalone: true,
  imports: [AgGridAngular, DataVCardComponent, DataVTitleComponent, ...SHARED_IMPORTS],
  templateUrl: './workstation.component.html',
  styleUrls: ['./workstation.component.less']
})
export class DataVWorkstationComponent implements OnInit, AfterViewInit {
  private readonly http = inject(_HttpClient);
  private readonly modal = inject(ModalHelper);
  private readonly elementRef = inject(ElementRef);

  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: "-"
    },
    {
      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: "-"
    },
    {
      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: "任务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: "-"
    },
  ];

  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 },
  ];

  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 },
  ];

  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 },
  ];

  // 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 }
  ];

  ngOnInit(): void {
  }

  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');
  }

  add(): void {
    // this.modal
    //   .createStatic(FormEditComponent, { i: { id: 0 } })
    //   .subscribe(() => this.st.reload());
  }
}