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 @@