diff --git a/src/app/routes/data-v/lj-car-info-table/lj-car-ag-grid-component/lj-car-ag-grid-component.component.html b/src/app/routes/data-v/lj-car-info-table/lj-car-ag-grid-component/lj-car-ag-grid-component.component.html new file mode 100644 index 0000000..6da66b8 --- /dev/null +++ b/src/app/routes/data-v/lj-car-info-table/lj-car-ag-grid-component/lj-car-ag-grid-component.component.html @@ -0,0 +1,13 @@ + diff --git a/src/app/routes/data-v/lj-car-info-table/lj-car-ag-grid-component/lj-car-ag-grid-component.component.ts b/src/app/routes/data-v/lj-car-info-table/lj-car-ag-grid-component/lj-car-ag-grid-component.component.ts new file mode 100644 index 0000000..88dd154 --- /dev/null +++ b/src/app/routes/data-v/lj-car-info-table/lj-car-ag-grid-component/lj-car-ag-grid-component.component.ts @@ -0,0 +1,62 @@ +import { Component, OnInit, ViewChild, Input } from '@angular/core'; +import { AgGridAngular } from 'ag-grid-angular'; +import { ColDef, GridApi } from 'ag-grid-community'; +import { NzPaginationModule } from 'ng-zorro-antd/pagination'; +@Component({ + selector: 'lj-car-ag-grid-component', + imports: [AgGridAngular, NzPaginationModule], + standalone: true, + templateUrl: './lj-car-ag-grid-component.component.html', + styleUrls: ['./pagination-style/pagination.less'] +}) +export class LjCarAgGridComponentComponent implements OnInit { + @ViewChild('myGrid') grid!: AgGridAngular; + public gridOptions: any = { + headerHeight: 0 + }; + + /**每页数 */ + public pageSize!: number; + /**当前页 */ + public pageIndex!: number; + /**总数 */ + public pageRowTotal!: number; + //默认列配置 + @Input() defaultColDef: ColDef = { + width: 130, + editable: false + }; + /** 列头 */ + @Input() columnDefs: ColDef[] = []; + /**行数据 */ + @Input() rowData: any[] = []; + /**表格主题 */ + @Input() gridThemeClass: string = 'ag-theme-quartz'; + @Input() paginationThemeClass: string = 'ag-theme-quartz'; + /** 构造函数 */ + constructor() {} + /**初始化 */ + ngOnInit() { + console.log('-----表格初始化-----'); + this.pageSize = 10; + this.pageIndex = 1; + this.pageRowTotal = this.rowData.length; + } + //每页数 + nzPageSizeChange(_pageSize: any) { + this.pageSize = _pageSize; + } + //当前页 + nzPageIndexChange(_pageIndex: any) { + console.log(`nzPageIndexChange${_pageIndex}`); + if (this.grid.api) { + if (_pageIndex == 1) { + /**去首页 */ + this.grid.api.paginationGoToFirstPage(); + } else { + /** 页面跳转 */ + this.grid.api.paginationGoToPage(_pageIndex); + } + } + } +} diff --git a/src/app/routes/data-v/lj-car-info-table/lj-car-ag-grid-component/lj-car-ag-grid-componentcomponent.less b/src/app/routes/data-v/lj-car-info-table/lj-car-ag-grid-component/lj-car-ag-grid-componentcomponent.less new file mode 100644 index 0000000..7a247bd --- /dev/null +++ b/src/app/routes/data-v/lj-car-info-table/lj-car-ag-grid-component/lj-car-ag-grid-componentcomponent.less @@ -0,0 +1,3 @@ +/* Core Grid CSS */ +@import 'ag-grid-community/styles/ag-grid.css'; +@import 'ag-grid-community/styles/ag-theme-quartz.css'; \ No newline at end of file diff --git a/src/app/routes/data-v/lj-car-info-table/lj-car-ag-grid-component/pagination-style/pagination.less b/src/app/routes/data-v/lj-car-info-table/lj-car-ag-grid-component/pagination-style/pagination.less new file mode 100644 index 0000000..35e93f4 --- /dev/null +++ b/src/app/routes/data-v/lj-car-info-table/lj-car-ag-grid-component/pagination-style/pagination.less @@ -0,0 +1,94 @@ +/* 分页器 */ +.grid-pagination { + display: flex; + justify-content: space-between; + height: 32px; +} + +// 第几条 文字 +.grid-pagination ::ng-deep .ant-select-selection-item, +.ant-select-selector { + color: #00eff8; + border-color: #00eff8; + border-width: 2px; +} + +//总数 +.grid-pagination ::ng-deep .page-total-style { + font-size: medium; + font-weight: 700; + color: #00eff8; +} + +//页面尺寸选中 +::ng-deep .ant-select-item-option { + color: #00eff8 !important; +} + +//页面尺寸每项 +::ng-deep .ant-select-item-option-active div { + font-weight: 800 !important; + color: #00eff8 !important; +} + +//箭头 颜色 +.grid-pagination::ng-deep .anticon { + color: #00eff8; +} + +//页面尺寸选择 +.grid-pagination ::ng-deep .ant-select-selector { + color: #00eff8; + border-color: #00eff8; + border-width: 2px; + +} + +//前 link +.grid-pagination ::ng-deep .ant-pagination-prev .ant-pagination-item-link { + color: #00eff8; + border-color: transparent; +} + +//中间的 item +.grid-pagination ::ng-deep .ant-pagination-item { + color: #00eff8; + border-color: #00eff8; + border-width: 2px; +} + +// disable 样式 +.grid-pagination ::ng-deep .ant-pagination-item a { + color: #00eff8 !important; +} + +.grid-pagination ::ng-deep .ant-pagination-item-active a { + color: black !important; + +} + +//前后箭头 +.grid-pagination ::ng-deep .ant-pagination-next button, + +.ant-pagination-prev button { + color: #00eff8; + border-color: transparent; +} + +//鼠标放上去的样式 +.grid-pagination ::ng-deep .ant-pagination-item-active:focus-visible, +.ant-pagination-item-active:hover, + +.ant-pagination-next:hover button, +.ant-pagination-prev:hover button { + border-color: #00eff8; + border-width: 2px; +} + +//选中样式 +.grid-pagination ::ng-deep .ant-pagination-item-active { + font-weight: 500; + background-color: #00eff8; + border-color: #00eff8; + border-width: 2px; +} \ No newline at end of file diff --git a/src/app/routes/data-v/lj-car-info-table/lj-car-info-table.component.css b/src/app/routes/data-v/lj-car-info-table/lj-car-info-table.component.css new file mode 100644 index 0000000..deb7419 --- /dev/null +++ b/src/app/routes/data-v/lj-car-info-table/lj-car-info-table.component.css @@ -0,0 +1,104 @@ +.card-top-content { + display: grid; + grid-template-columns: auto auto; + align-items: center; + justify-content: space-between; + margin-bottom: 10px; + + +} + +/* 对于按钮和图标的容器 */ +.buttons-container { + display: flex; + align-items: center; + justify-content: flex-end; /* 使按钮组靠右对齐 */ + } + + .card-button, span[nz-icon] { + margin-left: 0.5rem; /* 为按钮和图标添加一些间隔 */ + } + +.card-button { + cursor: pointer; /* 更好的用户体验，表明这是一个可点击的按钮 */ + width: 82px; + height: 40px; + font-size: 26px; + line-height: 20px; + color: rgb(0 239 248 / 100%); +text-align: center; +background-color: rgb(33 48 105 / 100%); + border: none; /* 假设你不想要边框 */ +border-radius: 3px; + } + +.card-content { + overflow: hidden; + margin-bottom: 0.5rem; + //height: 18rem; + padding: 1rem 1.5rem; + padding: 1rem; + + /* 调整内边距以适应内容 */ + //position: relative; + background-image: url('../../../../assets/dashboard/dashboard_card_bg.jpg'); + background-repeat: no-repeat; + + /* 防止背景图片重复 */ + background-position: center; + // background-position: top; + background-size: 100% 100%; + + .card-content-title { + display: flex; + flex-grow: 1; /* 允许标题占据多余空间 */ + align-items: center; + + /* 确保子元素垂直居中 */ + justify-content: space-between; + width: fit-content; + height: fit-content; + margin-bottom: 0.5rem; + padding: 5px 20px 0; + + /* 文本的内边距 */ + + /* 根据需要调整字体大小 + font-weight: bold; /* 字体加粗 */ + padding: 5px 20px; + + /* 根据实际情况调整这里的内边距 */ + font-size: 28px; + font-weight: 600; + line-height: 22px; + + /* 字体颜色 */ + color: #74FAFB; + color: rgb(0 239 248 / 100%); + text-align: center; + + /* 文本居中对齐 */ + background-color: #19426E; + + /* 设置背景颜色为深蓝色 */ + border: 1px solid #1f6f97; + + /* 设置边框颜色 */ + border-radius: 10px 10px 0 0; + + /* 上面是圆角，下面是直角 */ + box-shadow: inset 0 0 10px #1f6f97; + + /* 内阴影效果 */ + .card-content-l { + flex: 1; + align-self: flex-start; + + /* 占据剩余空间 */ + } + + .card-content-r { + align-self: flex-end; + } + } +} \ No newline at end of file diff --git a/src/app/routes/data-v/lj-car-info-table/lj-car-info-table.component.html b/src/app/routes/data-v/lj-car-info-table/lj-car-info-table.component.html new file mode 100644 index 0000000..581c6c3 --- /dev/null +++ b/src/app/routes/data-v/lj-car-info-table/lj-car-info-table.component.html @@ -0,0 +1,11 @@ +
+ + + +
diff --git a/src/app/routes/data-v/lj-car-info-table/lj-car-info-table.component.ts b/src/app/routes/data-v/lj-car-info-table/lj-car-info-table.component.ts new file mode 100644 index 0000000..d600993 --- /dev/null +++ b/src/app/routes/data-v/lj-car-info-table/lj-car-info-table.component.ts @@ -0,0 +1,164 @@ +import { Component, Input, 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'; +import { ColDef, GridApi } from 'ag-grid-community'; + +import { LjCarAgGridComponentComponent } from './lj-car-ag-grid-component/lj-car-ag-grid-component.component'; +import { DataVCardComponent } from '../card/card.component'; +import { LJDataVCardComponent } from '../lj-card/lj-card.component'; +import { TableColumn, DataVLjTableComponent } from '../lj-table/lj-table.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-lj-car-info-table', + standalone: true, + templateUrl: './lj-car-info-table.component.html', + styleUrl: './lj-car-info-table.component.css', + imports: [ + ...SHARED_IMPORTS, + AgGridAngular, + DataVCardComponent, + DataVLjTableComponent, + LjAgGridComponentComponent, + + LjCarAgGridComponentComponent + ] +}) +export class DataVLjCarInfoTableComponent implements OnInit { + public gridThemedClass: string = 'ag-theme-quartz ag-theme-datav'; + [x: string]: any; + @ViewChild('myGrid') grid!: AgGridAngular; + @Input() title: string = ''; + public pageSize!: number; + /**当前页 */ + public pageIndex!: number; + /**总数 */ + public pageRowTotal!: number; + + //默认列配置 + @Input() defaultColDef: ColDef = { + width: 130, + editable: false, + headerClass: 'ag-header-center', + + cellStyle: { 'font-weight': 'bold', textAlign: 'center', 'justify-content': 'center', 'line-height': '38px' } + }; + /** 列头 */ + @Input() columnDefs: ColDef[] = []; + /**行数据 */ + @Input() rowData: any[] = []; + /**表格主题 */ + @Input() gridThemeClass: string = 'ag-theme-quartz'; + @Input() paginationThemeClass: string = 'ag-theme-quartz'; + /** 构造函数 */ + constructor() {} + // 在父组件的类中 + tableColumns: TableColumn[] = [ + { key: 'sort', title: '序号' }, + { key: 'time', title: '时间' }, + { key: 'option', title: '操作' }, + { key: 'optionDesc', title: '操作描述' }, + { key: 'optionMan', title: '操作人员' }, + { key: 'mark', title: '备注' }, + { key: 'edit', title: '编辑' } + + // 其他列配置... + ]; + + 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, field: 'cz', cellRenderer: GridButtonValueRenderer } + ]; + tableData = [ + { sort: '1', time: '2024.1.12 18:23', option: '锁定', optionDesc: '锁定1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' }, + { sort: '1', time: '2024.1.12 18:23', option: '释放', optionDesc: '释放1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' }, + { sort: '1', time: '2024.1.12 18:23', option: '锁定', optionDesc: '锁定1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' }, + { sort: '1', time: '2024.1.12 18:23', option: '释放', optionDesc: '释放1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' }, + { sort: '1', time: '2024.1.12 18:23', option: '锁定', optionDesc: '锁定1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' }, + { sort: '1', time: '2024.1.12 18:23', option: '释放', optionDesc: '释放1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' }, + { sort: '1', time: '2024.1.12 18:23', option: '锁定', optionDesc: '锁定1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' }, + { sort: '1', time: '2024.1.12 18:23', option: '释放', optionDesc: '释放1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' }, + { sort: '1', time: '2024.1.12 18:23', option: '锁定', optionDesc: '锁定1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' }, + { sort: '1', time: '2024.1.12 18:23', option: '释放', optionDesc: '释放1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' }, + { sort: '1', time: '2024.1.12 18:23', option: '锁定', optionDesc: '锁定1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' }, + { sort: '1', time: '2024.1.12 18:23', option: '释放', optionDesc: '释放1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' }, + { sort: '1', time: '2024.1.12 18:23', option: '锁定', optionDesc: '锁定1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' }, + { sort: '1', time: '2024.1.12 18:23', option: '释放', optionDesc: '释放1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' }, + { sort: '1', time: '2024.1.12 18:23', option: '锁定', optionDesc: '锁定1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' }, + { sort: '1', time: '2024.1.12 18:23', option: '释放', optionDesc: '释放1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' }, + { sort: '1', time: '2024.1.12 18:23', option: '锁定', optionDesc: '锁定1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' }, + { sort: '1', time: '2024.1.12 18:23', option: '释放', optionDesc: '释放1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' }, + { sort: '1', time: '2024.1.12 18:23', option: '锁定', optionDesc: '锁定1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' }, + { sort: '1', time: '2024.1.12 18:23', option: '释放', optionDesc: '释放1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' } + + // 其他数据... + ]; + /**初始化 */ + ngOnInit() { + 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: '操作' + }); + } + console.log('-----表格初始化-----'); + // this.title = ''; + this.pageSize = 5; + this.pageIndex = 1; + this.pageRowTotal = this.rowData.length; + } + //每页数 + nzPageSizeChange(_pageSize: any) { + this.pageSize = _pageSize; + } + //当前页 + nzPageIndexChange(_pageIndex: any) { + console.log(`nzPageIndexChange${_pageIndex}`); + if (this.grid.api) { + if (_pageIndex == 1) { + /**去首页 */ + this.grid.api.paginationGoToFirstPage(); + } else { + /** 页面跳转 */ + this.grid.api.paginationGoToPage(_pageIndex); + } + } + } +} diff --git a/src/app/routes/data-v/lj-card/lj-card.component.html b/src/app/routes/data-v/lj-card/lj-card.component.html index bbb591f..e356437 100644 --- a/src/app/routes/data-v/lj-card/lj-card.component.html +++ b/src/app/routes/data-v/lj-card/lj-card.component.html @@ -1,11 +1,13 @@
-
{{ title }}
-
- +
+ + + +
+
diff --git a/src/app/routes/data-v/lj-card/lj-card.component.less b/src/app/routes/data-v/lj-card/lj-card.component.less index 8856d97..deb7419 100644 --- a/src/app/routes/data-v/lj-card/lj-card.component.less +++ b/src/app/routes/data-v/lj-card/lj-card.component.less @@ -1,27 +1,35 @@ -.card-content-title { - display: flex; - align-items: center; /* 确保子元素垂直居中 */ - justify-content: space-between; - width:fit-content; - height:fit-content; - padding: 5px 20px 0; /* 文本的内边距 */ - font-size: 16px; /* 根据需要调整字体大小 - font-weight: bold; /* 字体加粗 */ - color: #29b6f6; /* 字体颜色 */ - text-align: center; /* 文本居中对齐 */ - background-color: #19426E; /* 设置背景颜色为深蓝色 */ - border: 1px solid #1f6f97; /* 设置边框颜色 */ - border-radius: 10px 10px 0 0; /* 上面是圆角，下面是直角 */ - box-shadow: inset 0 0 10px #1f6f97; /* 内阴影效果 */ - } - - -.card-top-content{ +.card-top-content { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: space-between; + margin-bottom: 10px; + +} + +/* 对于按钮和图标的容器 */ +.buttons-container { + display: flex; + align-items: center; + justify-content: flex-end; /* 使按钮组靠右对齐 */ + } + + .card-button, span[nz-icon] { + margin-left: 0.5rem; /* 为按钮和图标添加一些间隔 */ + } + +.card-button { + cursor: pointer; /* 更好的用户体验，表明这是一个可点击的按钮 */ + width: 82px; + height: 40px; + font-size: 26px; + line-height: 20px; + color: rgb(0 239 248 / 100%); +text-align: center; +background-color: rgb(33 48 105 / 100%); + border: none; /* 假设你不想要边框 */ +border-radius: 3px; } .card-content { @@ -29,21 +37,59 @@ margin-bottom: 0.5rem; //height: 18rem; padding: 1rem 1.5rem; + padding: 1rem; + + /* 调整内边距以适应内容 */ //position: relative; background-image: url('../../../../assets/dashboard/dashboard_card_bg.jpg'); - background-repeat: no-repeat; /* 防止背景图片重复 */ + background-repeat: no-repeat; + + /* 防止背景图片重复 */ background-position: center; // background-position: top; background-size: 100% 100%; - .card-content-title { display: flex; + flex-grow: 1; /* 允许标题占据多余空间 */ + align-items: center; + + /* 确保子元素垂直居中 */ + justify-content: space-between; + width: fit-content; + height: fit-content; margin-bottom: 0.5rem; - font-size: 18px; + padding: 5px 20px 0; + + /* 文本的内边距 */ + + /* 根据需要调整字体大小 + font-weight: bold; /* 字体加粗 */ + padding: 5px 20px; + + /* 根据实际情况调整这里的内边距 */ + font-size: 28px; font-weight: 600; + line-height: 22px; + + /* 字体颜色 */ color: #74FAFB; + color: rgb(0 239 248 / 100%); + text-align: center; + + /* 文本居中对齐 */ + background-color: #19426E; + + /* 设置背景颜色为深蓝色 */ + border: 1px solid #1f6f97; + + /* 设置边框颜色 */ + border-radius: 10px 10px 0 0; + + /* 上面是圆角，下面是直角 */ + box-shadow: inset 0 0 10px #1f6f97; + /* 内阴影效果 */ .card-content-l { flex: 1; align-self: flex-start; diff --git a/src/app/routes/data-v/lj-card/lj-card.component.ts b/src/app/routes/data-v/lj-card/lj-card.component.ts index 8d07e93..f7ef4be 100644 --- a/src/app/routes/data-v/lj-card/lj-card.component.ts +++ b/src/app/routes/data-v/lj-card/lj-card.component.ts @@ -13,6 +13,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon'; }) export class LJDataVCardComponent { @Input() showSetting = false; + @Input() showEditButton: boolean = false; @Input() optionsList: Array<{ label: string; checked: boolean }> = []; // 定义输出事件 diff --git a/src/app/routes/data-v/lj-dashboard/lj-dashboard.component.css b/src/app/routes/data-v/lj-dashboard/lj-dashboard.component.css new file mode 100644 index 0000000..f736ef5 --- /dev/null +++ b/src/app/routes/data-v/lj-dashboard/lj-dashboard.component.css @@ -0,0 +1,24 @@ +/* Core Grid CSS */ +@import 'ag-grid-community/styles/ag-grid.css'; +@import 'ag-grid-community/styles/ag-theme-quartz.css'; + +.custom-label { + display: inline-block; + padding: 10px 20px; /* 内边距 */ + font-size: 16px; /* 字体大小 */ + color: white; /* 文字颜色 */ + background-color: rgb(0 0 0 / 50%); /* 半透明黑色背景 */ + border-radius: 10px 10px 0 0; /* 上方圆角 */ + } + + .my-grid-font { + font-size: 16px; + font-weight: bold; + } + + .ag-header-center .ag-header-group-cell-label, +.ag-header-center .ag-header-cell-label { + display: grid; + width: 100%; + text-align: center; +} \ No newline at end of file diff --git a/src/app/routes/data-v/lj-dashboard/lj-dashboard.component.html b/src/app/routes/data-v/lj-dashboard/lj-dashboard.component.html new file mode 100644 index 0000000..aaf3ebd --- /dev/null +++ b/src/app/routes/data-v/lj-dashboard/lj-dashboard.component.html @@ -0,0 +1,6 @@ + +
+ + +
+ diff --git a/src/app/routes/data-v/lj-dashboard/lj-dashboard.component.ts b/src/app/routes/data-v/lj-dashboard/lj-dashboard.component.ts new file mode 100644 index 0000000..0d9b63d --- /dev/null +++ b/src/app/routes/data-v/lj-dashboard/lj-dashboard.component.ts @@ -0,0 +1,50 @@ +import { Component, OnInit, ViewChild, Input } from '@angular/core'; +import { AgGridAngular } from 'ag-grid-angular'; +import { ColDef, GridApi } from 'ag-grid-community'; +import { NzPaginationModule } from 'ng-zorro-antd/pagination'; + +import { LJDataVCardComponent } from '../lj-card/lj-card.component'; +import { TableColumn, DataVLjTableComponent } from '../lj-table/lj-table.component'; +import { DataVLjTextDashboardComponent } from '../lj-text-dashboard/lj-text-dashboard.component'; + +@Component({ + selector: 'app-data-v-lj-dashboard', + standalone: true, + templateUrl: './lj-dashboard.component.html', + imports: [AgGridAngular, NzPaginationModule, LJDataVCardComponent, DataVLjTableComponent, DataVLjTextDashboardComponent] +}) +export class DataVLjDashboardComponent implements OnInit { + [x: string]: any; + @ViewChild('myGrid') grid!: AgGridAngular; + @Input() title: string = ''; + + public showSetting = true; + /**每页数 */ + public pageSize!: number; + /**当前页 */ + public pageIndex!: number; + /**总数 */ + public pageRowTotal!: number; + + //默认列配置 + @Input() defaultColDef: ColDef = { + width: 130, + editable: false, + headerClass: 'ag-header-center', + + cellStyle: { 'font-weight': 'bold', textAlign: 'center', 'justify-content': 'center', 'line-height': '38px' } + }; + /** 列头 */ + @Input() columnDefs: ColDef[] = []; + /**行数据 */ + @Input() rowData: any[] = []; + /**表格主题 */ + @Input() gridThemeClass: string = 'ag-theme-quartz'; + @Input() paginationThemeClass: string = 'ag-theme-quartz'; + /** 构造函数 */ + constructor() {} + // 在父组件的类中 + + /**初始化 */ + ngOnInit() {} +} diff --git a/src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.css b/src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.css new file mode 100644 index 0000000..266fdf7 --- /dev/null +++ b/src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.css @@ -0,0 +1,32 @@ + + .chart-card { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + } + + .chart-text { + margin: 0; + font-size: 28px; + color: rgb(126 221 243 / 100%); + + } + + + .chart-button { + width: 175px; +height: 51px; + margin: 5px; + font-size: 28px; + line-height: 22px; + color: rgb(255 0 0 / 100%); + text-align: center; + background-color: rgb(6 70 120 / 0%); + background-image: url('/assets/dashboardButtonBg.png'); + background-repeat: no-repeat; + background-position: center; + background-size: contain; /* 或者可以使用 'contain' 根据你的需要 */ + border-width: 0; + } + \ No newline at end of file diff --git a/src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.html b/src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.html new file mode 100644 index 0000000..adf5b20 --- /dev/null +++ b/src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.html @@ -0,0 +1,7 @@ +
+
+
+
+

{{ text }}

+ +
diff --git a/src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.ts b/src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.ts new file mode 100644 index 0000000..89e1aa2 --- /dev/null +++ b/src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.ts @@ -0,0 +1,55 @@ +import { CommonModule } from '@angular/common'; +import { Component, Input, OnInit, ViewChild, inject } from '@angular/core'; +import { ModalHelper, _HttpClient } from '@delon/theme'; +import { SHARED_IMPORTS } from '@shared'; +import * as echarts from 'echarts'; +@Component({ + selector: 'app-data-v-lj-text-dashboard', + standalone: true, + imports: [...SHARED_IMPORTS, CommonModule], + templateUrl: './lj-text-dashboard.component.html', + styleUrl: './lj-text-dashboard.component.css' +}) +export class DataVLjTextDashboardComponent implements OnInit { + @Input() chartId: string = ''; + @Input() text: string = ''; + ngOnInit(): void { + // 使用 setTimeout 确保视图已经初始化 + setTimeout(() => this.initCharts(), 0); + } + + initCharts(): void { + console.log('初始化图表'); + console.log(this, this.chartId); + console.log(this, this.chartId.toString()); + // 获取DOM + const leftChart = echarts.init(document.getElementById(this.chartId)); // console.log(lineChart); + + const option = { + tooltip: { + formatter: '{a}
{b} : {c}%' + }, + series: [ + { + name: 'Pressure', + type: 'gauge', + progress: { + show: true + }, + detail: { + valueAnimation: true, + formatter: '{value}' + }, + data: [ + { + value: 50, + name: 'SCORE' + } + ] + } + ] + }; + + leftChart.setOption(option); + } +} diff --git a/src/app/routes/data-v/navigation/navigation.component.ts b/src/app/routes/data-v/navigation/navigation.component.ts index 6f03d0c..9f7a3ff 100644 --- a/src/app/routes/data-v/navigation/navigation.component.ts +++ b/src/app/routes/data-v/navigation/navigation.component.ts @@ -56,7 +56,6 @@ export class DataVNavigationComponent implements OnInit { ]; this.menuService.getMenus().subscribe((menus: Menu[]) => { for (let menu of menus) { - // console.log(menu); if (menu.children && menu.children.length > 0) { for (let tempMenu of menu.children) { tempMenu.childShowType = 'menu'; @@ -64,8 +63,6 @@ export class DataVNavigationComponent implements OnInit { // 检查 tempMenu 是否有 children 属性 for (let tempChildMenu of tempMenu.children) { tempChildMenu.childShowType = 'drop-down'; - console.log(tempChildMenu.text); - console.log(tempChildMenu.children); } } this.menuNetDataList.push(tempMenu); diff --git a/src/app/routes/data-v/routes.ts b/src/app/routes/data-v/routes.ts index 06f9091..7fa524c 100644 --- a/src/app/routes/data-v/routes.ts +++ b/src/app/routes/data-v/routes.ts @@ -9,6 +9,9 @@ import { DataVT1Component } from './t1/t1.component'; import { DataVThreejsComponent } from './threejs/threejs.component'; import { DataVUserComponent } from './user/user.component'; import { DataVWorkstationComponent } from './workstation/workstation.component'; +import { DataVLjDashboardComponent } from './lj-dashboard/lj-dashboard.component'; +import { DataVLjTextDashboardComponent } from './lj-text-dashboard/lj-text-dashboard.component'; +import { DataVLjCarInfoTableComponent } from './lj-car-info-table/lj-car-info-table.component'; export const routes: Routes = [ { @@ -25,4 +28,7 @@ export const routes: Routes = [ { path: 't1/:id', component: DataVT1Component }, { path: 'lj-table', component: DataVLjTableComponent }, { path: 'lj-table', component: DataVLjTableComponent } -]; +, + { path: 'lj-dashboard', component: DataVLjDashboardComponent }, + { path: 'lj-textDashboard', component: DataVLjTextDashboardComponent }, + { path: 'ljCarInfoTable', component: DataVLjCarInfoTableComponent }]; diff --git a/src/app/routes/data-v/s1/s1.component.ts b/src/app/routes/data-v/s1/s1.component.ts index ec92287..8e73b4d 100644 --- a/src/app/routes/data-v/s1/s1.component.ts +++ b/src/app/routes/data-v/s1/s1.component.ts @@ -1,21 +1,21 @@ +import { CommonModule } from '@angular/common'; import { Component, OnInit, ViewChild, inject } from '@angular/core'; import { STColumn, STComponent } from '@delon/abc/st'; import { SFSchema } from '@delon/form'; -import { CommonModule } from '@angular/common'; -import { ModalHelper, _HttpClient } from '@delon/theme'; +import { ModalHelper, _HttpClient, TitleService } from '@delon/theme'; import { SHARED_IMPORTS } from '@shared'; -import { DataVCardComponent } from '../card/card.component'; -import * as echarts from 'echarts'; import { AgGridAngular } from 'ag-grid-angular'; -import { DataVTitleComponent } from '../title/title.component'; import { ColDef } from 'ag-grid-community'; // Column Definition Type Interface -import { NzProgressModule } from 'ng-zorro-antd/progress'; +import * as echarts from 'echarts'; import { NzBadgeModule } from 'ng-zorro-antd/badge'; -import { Subscription, finalize } from 'rxjs'; +import { NzListModule } from 'ng-zorro-antd/list'; +import { NzProgressModule } from 'ng-zorro-antd/progress'; import { IMqttMessage, MqttService } from 'ngx-mqtt'; +import { Subscription, finalize } from 'rxjs'; + import { ChartComponentComponent } from './chart-component/chart-component.component'; -import { NzListModule } from 'ng-zorro-antd/list'; -import { TitleService } from '@delon/theme'; +import { DataVCardComponent } from '../card/card.component'; +import { DataVTitleComponent } from '../title/title.component'; @Component({ selector: 'app-data-v-s1', @@ -78,7 +78,7 @@ export class DataVS1Component implements OnInit { } ] }; - handleCheckedItems(checkedItems: { label: string; checked: boolean }[]) { + handleCheckedItems(checkedItems: Array<{ label: string; checked: boolean }>) { console.log('当前选中的项目:', checkedItems); } chart_options = {}; @@ -113,20 +113,20 @@ export class DataVS1Component implements OnInit { this.getServerConfig(); 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, + 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, + dqjd: `节点${i}`, + sjwcsj: `2024-1-${i} 13:38:${i * 27}`, bjmc: '报警5', bjms: '报警描述5', - bjsj: '2024-1-' + i + ' 13:38:' + i * 12, + bjsj: `2024-1-${i} 13:38:${i * 12}`, gzyy: '-', clff: '-', - tzsj: '2024-1-' + i + ' 13:38:' + i * 19, + tzsj: `2024-1-${i} 13:38:${i * 19}`, zycd: '一般', tzmc: '系统提示', tznr: '账户登录', @@ -140,7 +140,7 @@ export class DataVS1Component implements OnInit { var dataCount = 100; for (var i = 0; i < dataCount; i++) { var val = Math.random() * 1000; - categoryData.push('category' + i); + categoryData.push(`category${i}`); errorData.push([i, echarts.number.round(Math.max(0, val - Math.random() * 100)), echarts.number.round(val + Math.random() * 80)]); barData.push(echarts.number.round(val, 2)); } @@ -217,7 +217,7 @@ export class DataVS1Component implements OnInit { offsetCenter: [0, '-5%'], valueAnimation: true, formatter: function (value: any) { - return Math.round(value * 100) + ''; + return `${Math.round(value * 100)}`; }, color: 'inherit' }, @@ -303,7 +303,7 @@ export class DataVS1Component implements OnInit { offsetCenter: [0, '-5%'], valueAnimation: true, formatter: function (value: any) { - return Math.round(value * 100) + ''; + return `${Math.round(value * 100)}`; }, color: 'inherit' }, diff --git a/src/app/routes/data-v/second1/second1.component.html b/src/app/routes/data-v/second1/second1.component.html index 5b82493..b5bcbe2 100644 --- a/src/app/routes/data-v/second1/second1.component.html +++ b/src/app/routes/data-v/second1/second1.component.html @@ -1,39 +1,55 @@ -
- - - - - +
+ + - - - - - - +
+ + - + + +
diff --git a/src/app/routes/data-v/second1/second1.component.ts b/src/app/routes/data-v/second1/second1.component.ts index f0a8584..734ab9c 100644 --- a/src/app/routes/data-v/second1/second1.component.ts +++ b/src/app/routes/data-v/second1/second1.component.ts @@ -3,10 +3,13 @@ import { ModalHelper, TitleService, _HttpClient } from '@delon/theme'; import { SHARED_IMPORTS } from '@shared'; import { AgGridAngular } from 'ag-grid-angular'; import { ColDef, GridApi } from 'ag-grid-community'; +import * as echarts from 'echarts'; import { NzPaginationModule } from 'ng-zorro-antd/pagination'; import { MqttService } from 'ngx-mqtt'; import { DataVCardComponent } from '../card/card.component'; +import { DataVLjCarInfoTableComponent } from '../lj-car-info-table/lj-car-info-table.component'; +import { DataVLjDashboardComponent } from '../lj-dashboard/lj-dashboard.component'; 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'; @@ -17,6 +20,7 @@ import { LjAgGridComponentComponent } from '../workstation/lj-ag-grid-component/ templateUrl: './second1.component.html', styleUrls: ['./second1.component.less'], imports: [ + DataVLjCarInfoTableComponent, AgGridAngular, AgGridComponentComponent, LjAgGridComponentComponent, @@ -24,7 +28,9 @@ import { LjAgGridComponentComponent } from '../workstation/lj-ag-grid-component/ DataVCardComponent, GridButtonValueRenderer, DataVTitleComponent, - ...SHARED_IMPORTS + DataVLjDashboardComponent, + ...SHARED_IMPORTS, + DataVLjCarInfoTableComponent ] }) export class DataVSecond1Component implements OnInit { @@ -33,6 +39,10 @@ export class DataVSecond1Component implements OnInit { private readonly elementRef = inject(ElementRef); private readonly titleService = inject(TitleService); + public chartDom = document.getElementById('main')!; + // public myChart = echarts.init(this.chartDom); + // public option!: EChartsOption; + @ViewChild('myGrid') grid!: AgGridAngular; public defaultColDef: ColDef = { width: 170, @@ -81,47 +91,7 @@ export class DataVSecond1Component implements OnInit { { headerName: '当前状态', field: 'dqzt' }, { headerName: '当前节点', field: 'dqjd' }, { headerName: '实际完成时间', field: 'sjwcsj', minWidth: 170, flex: 1 }, - { headerName: '操作', autoHeight: true, width: 110, field: 'cz', cellRenderer: GridButtonValueRenderer } - ]; - - 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 } + { headerName: '操作', autoHeaderHeight: true, width: 110, field: 'cz', cellRenderer: GridButtonValueRenderer } ]; client: any; @@ -130,6 +100,37 @@ export class DataVSecond1Component implements OnInit { this.client = _mqttService; } + initCharts(): void { + // 获取DOM + const lineChart = echarts.init(document.getElementById('lineChart')); // console.log(lineChart); + const option = { + tooltip: { + formatter: '{a}
{b} : {c}%' + }, + series: [ + { + name: 'Pressure', + type: 'gauge', + progress: { + show: true + }, + detail: { + valueAnimation: true, + formatter: '{value}' + }, + data: [ + { + value: 50, + name: 'SCORE' + } + ] + } + ] + }; + + lineChart.setOption(option); + } + ngOnInit(): void { this.titleService.setTitle('我的工作站'); @@ -156,6 +157,8 @@ export class DataVSecond1Component implements OnInit { cz: '操作' }); } + + this.initCharts(); } ngAfterViewInit(): void { diff --git a/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.html b/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.html index 8da50cc..b50505b 100644 --- a/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.html +++ b/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.html @@ -1,7 +1,20 @@ - + -->
-
+ +
共 {{ pageRowTotal }} 项数据
diff --git a/src/assets/dashboardButtonBg.png b/src/assets/dashboardButtonBg.png new file mode 100644 index 0000000..cf54704 Binary files /dev/null and b/src/assets/dashboardButtonBg.png differ