数据可视化大屏
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

workstation.component.ts 8.0KB

1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
1 jaar geleden
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
  2. import { STColumn, STComponent } from '@delon/abc/st';
  3. import { SFSchema } from '@delon/form';
  4. import { ModalHelper, _HttpClient } from '@delon/theme';
  5. import { SHARED_IMPORTS } from '@shared';
  6. import { AgGridAngular } from 'ag-grid-angular'; // AG Grid Component
  7. import { ColDef } from 'ag-grid-community'; // Column Definition Type Interface
  8. import { DataVCardComponent } from '../card/card.component';
  9. import { DataVTitleComponent } from '../title/title.component';
  10. @Component({
  11. selector: 'app-data-v-workstation',
  12. standalone: true,
  13. imports: [AgGridAngular, DataVCardComponent, DataVTitleComponent, ...SHARED_IMPORTS],
  14. templateUrl: './workstation.component.html',
  15. styleUrls: ['./workstation.component.less']
  16. })
  17. export class DataVWorkstationComponent implements OnInit, AfterViewInit {
  18. private readonly http = inject(_HttpClient);
  19. private readonly modal = inject(ModalHelper);
  20. private readonly elementRef = inject(ElementRef);
  21. dataSet: any;
  22. rowData = [
  23. {
  24. rwmc: "任务1", rwms: "任务描述1", kssj: "2024-1-1", jhwcsj: "2024-1-2", sfcq: '否', dqzt: "正常", dqjd: "节点1", sjwcsj: "2024-1-2",
  25. bjmc: "报警1", bjms: "报警描述1", bjsj: "2024-1-1", gzyy: "-", clff: "-", tzsj: "2024-1-2", zycd: "一般", tzmc: '系统提示',
  26. tznr: '账户登录', fj: "-"
  27. },
  28. {
  29. rwmc: "任务2", rwms: "任务描述2", kssj: "2024-1-2", jhwcsj: "2024-1-3", sfcq: '否', dqzt: "正常", dqjd: "节点2", sjwcsj: "2024-1-2",
  30. bjmc: "报警2", bjms: "报警描述2", bjsj: "2024-1-2", gzyy: "-", clff: "-", tzsj: "2024-1-2", zycd: "一般", tzmc: '系统提示',
  31. tznr: '账户登录', fj: "-"
  32. },
  33. {
  34. rwmc: "任务3", rwms: "任务描述3", kssj: "2024-1-3", jhwcsj: "2024-1-4", sfcq: '否', dqzt: "正常", dqjd: "节点3", sjwcsj: "2024-1-2",
  35. bjmc: "报警3", bjms: "报警描述3", bjsj: "2024-1-3", gzyy: "-", clff: "-", tzsj: "2024-1-2", zycd: "一般", tzmc: '系统提示',
  36. tznr: '账户登录', fj: "-"
  37. },
  38. {
  39. rwmc: "任务4", rwms: "任务描述4", kssj: "2024-1-4", jhwcsj: "2024-1-5", sfcq: '否', dqzt: "正常", dqjd: "节点4", sjwcsj: "2024-1-2",
  40. bjmc: "报警4", bjms: "报警描述4", bjsj: "2024-1-4", gzyy: "-", clff: "-", tzsj: "2024-1-2", zycd: "一般", tzmc: '系统提示',
  41. tznr: '账户登录', fj: "-"
  42. },
  43. {
  44. rwmc: "任务5", rwms: "任务描述5", kssj: "2024-1-5", jhwcsj: "2024-1-6", sfcq: '否', dqzt: "正常", dqjd: "节点5", sjwcsj: "2024-1-2",
  45. bjmc: "报警5", bjms: "报警描述5", bjsj: "2024-1-5", gzyy: "-", clff: "-", tzsj: "2024-1-2", zycd: "一般", tzmc: '系统提示',
  46. tznr: '账户登录', fj: "-"
  47. },
  48. {
  49. rwmc: "任务1", rwms: "任务描述1", kssj: "2024-1-1", jhwcsj: "2024-1-2", sfcq: '否', dqzt: "正常", dqjd: "节点1", sjwcsj: "2024-1-2",
  50. bjmc: "报警1", bjms: "报警描述1", bjsj: "2024-1-1", gzyy: "-", clff: "-", tzsj: "2024-1-2", zycd: "一般", tzmc: '系统提示',
  51. tznr: '账户登录', fj: "-"
  52. },
  53. {
  54. rwmc: "任务2", rwms: "任务描述2", kssj: "2024-1-2", jhwcsj: "2024-1-3", sfcq: '否', dqzt: "正常", dqjd: "节点2", sjwcsj: "2024-1-2",
  55. bjmc: "报警2", bjms: "报警描述2", bjsj: "2024-1-2", gzyy: "-", clff: "-", tzsj: "2024-1-2", zycd: "一般", tzmc: '系统提示',
  56. tznr: '账户登录', fj: "-"
  57. },
  58. {
  59. rwmc: "任务3", rwms: "任务描述3", kssj: "2024-1-3", jhwcsj: "2024-1-4", sfcq: '否', dqzt: "正常", dqjd: "节点3", sjwcsj: "2024-1-2",
  60. bjmc: "报警3", bjms: "报警描述3", bjsj: "2024-1-3", gzyy: "-", clff: "-", tzsj: "2024-1-2", zycd: "一般", tzmc: '系统提示',
  61. tznr: '账户登录', fj: "-"
  62. },
  63. {
  64. rwmc: "任务4", rwms: "任务描述4", kssj: "2024-1-4", jhwcsj: "2024-1-5", sfcq: '否', dqzt: "正常", dqjd: "节点4", sjwcsj: "2024-1-2",
  65. bjmc: "报警4", bjms: "报警描述4", bjsj: "2024-1-4", gzyy: "-", clff: "-", tzsj: "2024-1-2", zycd: "一般", tzmc: '系统提示',
  66. tznr: '账户登录', fj: "-"
  67. },
  68. {
  69. rwmc: "任务5", rwms: "任务描述5", kssj: "2024-1-5", jhwcsj: "2024-1-6", sfcq: '否', dqzt: "正常", dqjd: "节点5", sjwcsj: "2024-1-2",
  70. bjmc: "报警5", bjms: "报警描述5", bjsj: "2024-1-5", gzyy: "-", clff: "-", tzsj: "2024-1-2", zycd: "一般", tzmc: '系统提示',
  71. tznr: '账户登录', fj: "-"
  72. },
  73. {
  74. rwmc: "任务1", rwms: "任务描述1", kssj: "2024-1-1", jhwcsj: "2024-1-2", sfcq: '否', dqzt: "正常", dqjd: "节点1", sjwcsj: "2024-1-2",
  75. bjmc: "报警1", bjms: "报警描述1", bjsj: "2024-1-1", gzyy: "-", clff: "-", tzsj: "2024-1-2", zycd: "一般", tzmc: '系统提示',
  76. tznr: '账户登录', fj: "-"
  77. },
  78. {
  79. rwmc: "任务2", rwms: "任务描述2", kssj: "2024-1-2", jhwcsj: "2024-1-3", sfcq: '否', dqzt: "正常", dqjd: "节点2", sjwcsj: "2024-1-2",
  80. bjmc: "报警2", bjms: "报警描述2", bjsj: "2024-1-2", gzyy: "-", clff: "-", tzsj: "2024-1-2", zycd: "一般", tzmc: '系统提示',
  81. tznr: '账户登录', fj: "-"
  82. },
  83. {
  84. rwmc: "任务3", rwms: "任务描述3", kssj: "2024-1-3", jhwcsj: "2024-1-4", sfcq: '否', dqzt: "正常", dqjd: "节点3", sjwcsj: "2024-1-2",
  85. bjmc: "报警3", bjms: "报警描述3", bjsj: "2024-1-3", gzyy: "-", clff: "-", tzsj: "2024-1-2", zycd: "一般", tzmc: '系统提示',
  86. tznr: '账户登录', fj: "-"
  87. },
  88. {
  89. rwmc: "任务4", rwms: "任务描述4", kssj: "2024-1-4", jhwcsj: "2024-1-5", sfcq: '否', dqzt: "正常", dqjd: "节点4", sjwcsj: "2024-1-2",
  90. bjmc: "报警4", bjms: "报警描述4", bjsj: "2024-1-4", gzyy: "-", clff: "-", tzsj: "2024-1-2", zycd: "一般", tzmc: '系统提示',
  91. tznr: '账户登录', fj: "-"
  92. },
  93. {
  94. rwmc: "任务5", rwms: "任务描述5", kssj: "2024-1-5", jhwcsj: "2024-1-6", sfcq: '否', dqzt: "正常", dqjd: "节点5", sjwcsj: "2024-1-2",
  95. bjmc: "报警5", bjms: "报警描述5", bjsj: "2024-1-5", gzyy: "-", clff: "-", tzsj: "2024-1-2", zycd: "一般", tzmc: '系统提示',
  96. tznr: '账户登录', fj: "-"
  97. },
  98. ];
  99. colDefs1: ColDef[] = [
  100. { headerName: '任务名称', field: "rwmc", flex: 1 },
  101. { headerName: '任务描述', field: "rwms", flex: 2 },
  102. { headerName: '开始时间', field: "kssj", flex: 1 },
  103. { headerName: '计划完成时间', field: "jhwcsj", flex: 1.5 },
  104. { headerName: '是否超期', field: "sfcq", flex: 1 },
  105. ];
  106. colDefs2: ColDef[] = [
  107. { headerName: '任务名称', field: "rwmc", flex: 1 },
  108. { headerName: '任务描述', field: "rwms", flex: 1 },
  109. { headerName: '开始时间', field: "kssj", flex: 1 },
  110. { headerName: '当前状态', field: "dqzt", flex: 1 },
  111. { headerName: '当前节点', field: "dqjd", flex: 1 },
  112. { headerName: '实际完成时间', field: "sjwcsj", flex: 1 },
  113. ];
  114. colDefs3: ColDef[] = [
  115. { headerName: '报警名称', field: "bjmc", flex: 1 },
  116. { headerName: '报警描述', field: "bjms", flex: 1 },
  117. { headerName: '报警时间', field: "bjsj", flex: 1 },
  118. { headerName: '故障原因', field: "gzyy", flex: 1.5 },
  119. { headerName: '处理方法', field: "clff", flex: 1 },
  120. ];
  121. // Column Definitions: Defines the columns to be displayed.
  122. colDefs4: ColDef[] = [
  123. { headerName: '通知时间', field: "tzsj", flex: 1 },
  124. { headerName: '重要程度', field: "zycd", flex: 1 },
  125. { headerName: '通知名称', field: "tzmc", flex: 1 },
  126. { headerName: '通知内容', field: "tznr", flex: 1 },
  127. { headerName: '附件', field: "fj", flex: 1 }
  128. ];
  129. ngOnInit(): void {
  130. }
  131. ngAfterViewInit(): void {
  132. // 获取 ag-grid 元素
  133. const gridDiv = this.elementRef.nativeElement.querySelector('.ag-theme-datav');
  134. // 获取 ag-grid 内部滚动容器元素
  135. const scrollContainer = gridDiv.querySelector('.ag-body-viewport');
  136. // 获取滚动条元素
  137. const scrollBar = gridDiv.querySelector('.ag-scroller');
  138. }
  139. add(): void {
  140. // this.modal
  141. // .createStatic(FormEditComponent, { i: { id: 0 } })
  142. // .subscribe(() => this.st.reload());
  143. }
  144. }