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 index 6da66b8..be1c43c 100644 --- 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 @@ -2,6 +2,7 @@ #myGrid [class]="gridThemeClass" [pagination]="true" + style="height: 100%" [suppressPaginationPanel]="true" [suppressPaginationPanel]="true" [suppressScrollOnNewData]="true" 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 index d24397c..2c110f3 100644 --- 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 @@ -41,7 +41,7 @@ border-radius: 3px; /* 调整内边距以适应内容 */ //position: relative; - background-image: url('../../../../assets/dashboard/dashboard_card_bg.jpg'); + background-image: url('../../../../assets/dashboard/dashboard_card_bg2.png'); background-repeat: no-repeat; /* 防止背景图片重复 */ @@ -104,8 +104,8 @@ border-radius: 3px; } .table-container { - margin: 10px 5px 20px; /* Adjust padding as needed */ - padding: 10px; + margin: 10px 3px 20px 55px; /* Adjust padding as needed */ + padding: 5px; border: 1px solid #fff; /* White border */ /* Other styles */ @@ -115,14 +115,37 @@ border-radius: 3px; .table-header { display: flex; /* 使用 flex 布局 */ justify-content: space-between; /* 元素之间平均分布 */ + } .table-header span { flex: 1; /* 每个元素占据等宽 */ + font-size: 12px; text-align: center; /* 文本居中 */ } .grid-item { - margin-bottom: 10px; - } + display: flex; + align-items: flex-start; /* 内容居上对齐 */ + margin-bottom: 20px; /* 增加底部间距 */ +} + + .rounded-border { + display: flex; + place-items: center center; + justify-content: center; + width: 50px; + height: 40px; + margin-right: 10px; + padding: 3px; + font-size: 26px; + font-weight: 700; + text-align: center; + background-color: #21306A; + border:1px solid #00EFF9; + border-radius: 2px; /* 减小圆角 */ +} + + + \ 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 index 0d2be2b..d96e21a 100644 --- 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 @@ -14,37 +14,42 @@
+
#1
+
+
#2
+
#3
+
#4
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 index d600993..6c1d9b6 100644 --- 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 @@ -41,16 +41,19 @@ export class DataVLjCarInfoTableComponent implements OnInit { //默认列配置 @Input() defaultColDef: ColDef = { - width: 130, + // width: 130, editable: false, - headerClass: 'ag-header-center', + // headerClass: 'ag-header-center', cellStyle: { 'font-weight': 'bold', textAlign: 'center', 'justify-content': 'center', 'line-height': '38px' } }; /** 列头 */ @Input() columnDefs: ColDef[] = []; /**行数据 */ - @Input() rowData: any[] = []; + @Input() rowData1: any[] = []; + @Input() rowData2: any[] = []; + @Input() rowData3: any[] = []; + @Input() rowData4: any[] = []; /**表格主题 */ @Input() gridThemeClass: string = 'ag-theme-quartz'; @Input() paginationThemeClass: string = 'ag-theme-quartz'; @@ -75,74 +78,85 @@ export class DataVLjCarInfoTableComponent implements OnInit { valueGetter: function (params: any) { return parseInt(params.node.id) + 1; }, - width: 90, - // flex: 2, - sortable: true, - unSortIcon: true, + width: 20, + cellStyle: { 'font-size': '8px' }, 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 } + { headerName: '时间', field: 'time', width: 60, cellStyle: { 'font-size': '8px' } }, + { headerName: '车牌', field: 'carNo', width: 60, cellStyle: { 'font-size': '8px' } }, + { headerName: '车型', field: 'carType', width: 50, cellStyle: { 'font-size': '8px' } }, + { headerName: '卡号', field: 'no', width: 50, cellStyle: { 'font-size': '8px' } }, + { headerName: '供应商', width: 50, field: 'supplier', cellStyle: { 'font-size': '8px' } }, + { headerName: '毛重', width: 50, field: 'grossWeight', cellStyle: { 'font-size': '8px' } }, + { headerName: '上报热值', width: 50, field: 'reportHotValue', cellStyle: { 'font-size': '8px' } }, + { headerName: '估算热值', width: 50, field: 'estimateValue', cellStyle: { 'font-size': '8px' } } + // { 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: '操作' - }); - } + this.rowData1.push({ + xh: 1, + time: '13:25', + carNo: 'A4132', + carType: '重卡', + no: '6-*', + supplier: '大同', + grossWeight: '7.15', + reportHotValue: '7.6', + estimateValue: '7.51' + }); + this.rowData1.push({ + xh: 1, + time: '13:25', + carNo: 'A4132', + carType: '重卡', + no: '6-*', + supplier: '大同', + grossWeight: '7.15', + reportHotValue: '7.6', + estimateValue: '7.51' + }); + this.rowData1.push({ + xh: 1, + time: '13:25', + carNo: 'A4132', + carType: '重卡', + no: '6-*', + supplier: '大同', + grossWeight: '7.15', + reportHotValue: '7.6', + estimateValue: '7.51' + }); + // 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; + this.pageRowTotal = this.rowData1.length; } //每页数 nzPageSizeChange(_pageSize: any) { 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 5aea341..3aea473 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 @@ -38,14 +38,14 @@ span[nz-icon] { .card-content { overflow: hidden; + height: 250px; margin-bottom: 0.5rem; - //height: 18rem; padding: 1rem 1.5rem; padding: 1rem; /* 调整内边距以适应内容 */ //position: relative; - background-image: url('/assets/dashboard/dashboard_card_bg.jpg'); + background-image: url('../../../../assets/dashboard/dashboard_card_bg.jpg'); background-repeat: no-repeat; /* 防止背景图片重复 */ diff --git a/src/app/routes/data-v/lj-dashboard/lj-board-title/lj-board-title.component.html b/src/app/routes/data-v/lj-dashboard/lj-board-title/lj-board-title.component.html new file mode 100644 index 0000000..e356437 --- /dev/null +++ b/src/app/routes/data-v/lj-dashboard/lj-board-title/lj-board-title.component.html @@ -0,0 +1,13 @@ +
+
+
+
{{ title }}
+
+
+ + + +
+
+ +
diff --git a/src/app/routes/data-v/lj-dashboard/lj-board-title/lj-board-title.component.less b/src/app/routes/data-v/lj-dashboard/lj-board-title/lj-board-title.component.less new file mode 100644 index 0000000..81af53d --- /dev/null +++ b/src/app/routes/data-v/lj-dashboard/lj-board-title/lj-board-title.component.less @@ -0,0 +1,104 @@ +.card-top-content { + display: grid; + grid-template-columns: auto auto; + align-items: start; + 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: 72px; + height: 40px; + font-size: 24px; + 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; + height: 350px; + margin-bottom: 0.5rem; + 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-dashboard/lj-board-title/lj-board-title.component.ts b/src/app/routes/data-v/lj-dashboard/lj-board-title/lj-board-title.component.ts new file mode 100644 index 0000000..b9b67de --- /dev/null +++ b/src/app/routes/data-v/lj-dashboard/lj-board-title/lj-board-title.component.ts @@ -0,0 +1,30 @@ +// parent.component.ts +import { CommonModule } from '@angular/common'; +import { Component, Input, Output, EventEmitter } from '@angular/core'; +import { SHARED_IMPORTS } from '@shared'; +import { NzDropDownModule } from 'ng-zorro-antd/dropdown'; +import { NzIconModule } from 'ng-zorro-antd/icon'; +@Component({ + selector: 'lj-data-v-board-title', + standalone: true, + templateUrl: './lj-board-title.component.html', + styleUrls: ['./lj-board-title.component.less'], + imports: [NzIconModule, CommonModule, NzDropDownModule, ...SHARED_IMPORTS] +}) +export class LJDataVBoardTitleComponent { + @Input() showSetting = false; + @Input() showEditButton: boolean = false; + @Input() + optionsList: Array<{ label: string; checked: boolean }> = []; + // 定义输出事件 + @Output() onCheckedItemsChange = new EventEmitter>(); + @Input() title: string = ''; + getCheckedItems() { + return this.optionsList.filter(option => option.checked); + } + + onCheckChange() { + const checkedItems = this.getCheckedItems(); + this.onCheckedItemsChange.emit(checkedItems); + } +} 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 index aaf3ebd..b5ce63a 100644 --- a/src/app/routes/data-v/lj-dashboard/lj-dashboard.component.html +++ b/src/app/routes/data-v/lj-dashboard/lj-dashboard.component.html @@ -1,6 +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 index 0d9b63d..50be3e3 100644 --- a/src/app/routes/data-v/lj-dashboard/lj-dashboard.component.ts +++ b/src/app/routes/data-v/lj-dashboard/lj-dashboard.component.ts @@ -3,6 +3,7 @@ import { AgGridAngular } from 'ag-grid-angular'; import { ColDef, GridApi } from 'ag-grid-community'; import { NzPaginationModule } from 'ng-zorro-antd/pagination'; +import { LJDataVBoardTitleComponent } from './lj-board-title/lj-board-title.component'; 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'; @@ -11,7 +12,14 @@ import { DataVLjTextDashboardComponent } from '../lj-text-dashboard/lj-text-dash selector: 'app-data-v-lj-dashboard', standalone: true, templateUrl: './lj-dashboard.component.html', - imports: [AgGridAngular, NzPaginationModule, LJDataVCardComponent, DataVLjTableComponent, DataVLjTextDashboardComponent] + imports: [ + AgGridAngular, + NzPaginationModule, + LJDataVCardComponent, + DataVLjTableComponent, + DataVLjTextDashboardComponent, + LJDataVBoardTitleComponent + ] }) export class DataVLjDashboardComponent implements OnInit { [x: string]: any; 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 index e257242..a00d86e 100644 --- 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 @@ -29,7 +29,29 @@ background-size: contain; /* 或者可以使用 'contain' 根据你的需要 */ border-width: 0; } - + + @media (min-width:0){ + + .chart-button {font-size:12px;} +} + + +@media (min-width: 360px){ + + .chart-button {font-size:14px;} +} + + +@media (min-width: 920px){ + + .chart-button {font-size:18px;} +} + +@media (min-width: 1920px){ + + .chart-button {font-size:26px;} +} + .chart-container { width: 10rem; height: 10rem; diff --git a/src/app/routes/data-v/second1/second1.component.html b/src/app/routes/data-v/second1/second1.component.html index daf315f..8e9f6aa 100644 --- a/src/app/routes/data-v/second1/second1.component.html +++ b/src/app/routes/data-v/second1/second1.component.html @@ -47,9 +47,10 @@ - - + +