diff --git a/src/app/routes/data-v/second1/second1.component.html b/src/app/routes/data-v/second1/second1.component.html
index bd705c4..33d3586 100644
--- a/src/app/routes/data-v/second1/second1.component.html
+++ b/src/app/routes/data-v/second1/second1.component.html
@@ -1,11 +1,39 @@
-
+
+
-
diff --git a/src/app/routes/data-v/second1/second1.component.less b/src/app/routes/data-v/second1/second1.component.less
index 5a5239d..ffcbecb 100644
--- a/src/app/routes/data-v/second1/second1.component.less
+++ b/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;
}
\ No newline at end of file
diff --git a/src/app/routes/data-v/second1/second1.component.ts b/src/app/routes/data-v/second1/second1.component.ts
index 25805f7..f0a8584 100644
--- a/src/app/routes/data-v/second1/second1.component.ts
+++ b/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());
+ }
}
diff --git a/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.ts b/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.ts
index e4a4502..601b112 100644
--- a/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.ts
+++ b/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;
diff --git a/src/app/routes/data-v/workstation/workstation.component.html b/src/app/routes/data-v/workstation/workstation.component.html
index 9d20062..501a6a5 100644
--- a/src/app/routes/data-v/workstation/workstation.component.html
+++ b/src/app/routes/data-v/workstation/workstation.component.html
@@ -2,6 +2,7 @@