# Conflicts: # src/app/routes/data-v/lj-card/lj-card.component.less # src/app/routes/data-v/second1/second1.component.htmlmaster
| @@ -2,6 +2,7 @@ | |||
| #myGrid | |||
| [class]="gridThemeClass" | |||
| [pagination]="true" | |||
| style="height: 100%" | |||
| [suppressPaginationPanel]="true" | |||
| [suppressPaginationPanel]="true" | |||
| [suppressScrollOnNewData]="true" | |||
| @@ -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; /* 减小圆角 */ | |||
| } | |||
| @@ -14,37 +14,42 @@ | |||
| </div> | |||
| <div class="grid-container"> | |||
| <div class="grid-item"> | |||
| <div class="rounded-border" style="color: #ff0200">#1</div> | |||
| <lj-car-ag-grid-component | |||
| style="width: 30%" | |||
| style="width: 100%; height: 120px" | |||
| [defaultColDef]="defaultColDef" | |||
| [rowData]="rowData" | |||
| [rowData]="rowData1" | |||
| [columnDefs]="colDefs1" | |||
| gridThemeClass="ag-theme-quartz ag-theme-datav" | |||
| /> | |||
| </div> | |||
| <div class="grid-item"> | |||
| <div class="rounded-border" style="color: #25f551">#2</div> | |||
| <lj-car-ag-grid-component | |||
| style="width: 30%" | |||
| style="width: 100%; height: 120px" | |||
| [defaultColDef]="defaultColDef" | |||
| [rowData]="rowData" | |||
| [rowData]="rowData1" | |||
| [columnDefs]="colDefs1" | |||
| gridThemeClass="ag-theme-quartz ag-theme-datav" | |||
| /> | |||
| </div> | |||
| <div class="grid-item"> | |||
| <div class="rounded-border" style="color: #ff0200">#3</div> | |||
| <lj-car-ag-grid-component | |||
| style="width: 30%" | |||
| style="width: 100%; height: 120px" | |||
| [defaultColDef]="defaultColDef" | |||
| [rowData]="rowData" | |||
| [rowData]="rowData1" | |||
| [columnDefs]="colDefs1" | |||
| gridThemeClass="ag-theme-quartz ag-theme-datav" | |||
| /> | |||
| </div> | |||
| <div class="grid-item"> | |||
| <div class="rounded-border" style="color: #bbbbbb">#4</div> | |||
| <lj-car-ag-grid-component | |||
| style="width: 30%" | |||
| style="width: 100%; height: 120px" | |||
| [defaultColDef]="defaultColDef" | |||
| [rowData]="rowData" | |||
| [rowData]="rowData1" | |||
| [columnDefs]="colDefs1" | |||
| gridThemeClass="ag-theme-quartz ag-theme-datav" | |||
| /> | |||
| @@ -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) { | |||
| @@ -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; | |||
| /* 防止背景图片重复 */ | |||
| @@ -0,0 +1,13 @@ | |||
| <div class="card-content"> | |||
| <div class="card-top-content"> | |||
| <div class="card-content-title"> | |||
| <div class="card-content-l">{{ title }}</div> | |||
| </div> | |||
| <div class="buttons-container"> | |||
| <button *ngIf="showEditButton" class="card-button">提交</button> | |||
| <button *ngIf="showEditButton" class="card-button">打印</button> | |||
| <span *ngIf="showSetting" nz-icon nzType="setting" nzTheme="outline"></span> | |||
| </div> | |||
| </div> | |||
| <ng-content /> | |||
| </div> | |||
| @@ -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; | |||
| } | |||
| } | |||
| } | |||
| @@ -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<Array<{ label: string; checked: boolean }>>(); | |||
| @Input() title: string = ''; | |||
| getCheckedItems() { | |||
| return this.optionsList.filter(option => option.checked); | |||
| } | |||
| onCheckChange() { | |||
| const checkedItems = this.getCheckedItems(); | |||
| this.onCheckedItemsChange.emit(checkedItems); | |||
| } | |||
| } | |||
| @@ -1,6 +1,6 @@ | |||
| <lj-data-v-card nz-col nzSpan="24" nzXs="24" nzSm="24" nzMd="12" nzLg="12" nzXl="12" nzXXl="12" title="{{ title }}"> | |||
| <lj-data-v-board-title nz-col nzSpan="24" nzXs="24" nzSm="24" nzMd="12" nzLg="12" nzXl="12" nzXXl="12" title="{{ title }}"> | |||
| <div style="display: flex; justify-content: center; align-items: center"> | |||
| <app-data-v-lj-text-dashboard chartId="leftChart" text="重衡系统健康度" /> | |||
| <app-data-v-lj-text-dashboard chartId="rightChart" text="重衡系统投运率" /> | |||
| </div> | |||
| </lj-data-v-card> | |||
| </lj-data-v-board-title> | |||
| @@ -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; | |||
| @@ -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; | |||
| @@ -47,9 +47,10 @@ | |||
| <!-- </data-v-card> --> | |||
| <lj-app-ag-grid-component [showPageTurning]="false" [showEditButton]="true" title="今日汇总" | |||
| [defaultColDef]="defaultColDef" [rowData]="rowData" [columnDefs]="colDefs2" [gridThemeClass]="gridThemedClass" /> | |||
| <app-data-v-lj-car-info-table style="width: 100%" /> | |||
| <lj-app-ag-grid-component style="height: 250px" [showPageTurning]="false" [showEditButton]="true" title="今日汇总" | |||
| [defaultColDef]="defaultColDef" [rowData]="todayRowData" [columnDefs]="colDefs2" | |||
| [gridThemeClass]="gridThemedClass" /> | |||
| <app-data-v-lj-car-info-table style="width: 100%; margin-top: 30px" /> | |||
| <!-- | |||
| <data-v-card nz-col nzSpan="24" nzXs="24" nzSm="24" nzMd="12" nzLg="12" nzXl="12" nzXXl="12" title="报警信息"> | |||
| @@ -55,7 +55,7 @@ export class DataVSecond1Component implements OnInit { | |||
| @ViewChild('myGrid') grid!: AgGridAngular; | |||
| public defaultColDef: ColDef = { | |||
| width: 170, | |||
| width: 150, | |||
| editable: false | |||
| }; | |||
| @@ -63,6 +63,7 @@ export class DataVSecond1Component implements OnInit { | |||
| //多模拟几行数据出来 | |||
| rowData: object[] = []; | |||
| todayRowData: object[] = []; | |||
| array = [1, 2, 3, 4]; | |||
| effect = 'scrollx'; | |||
| colDefs1: ColDef[] = [ | |||
| @@ -74,11 +75,13 @@ export class DataVSecond1Component implements OnInit { | |||
| ]; | |||
| colDefs2: ColDef[] = [ | |||
| { headerName: '任务描述', unSortIcon: true, field: 'rwms', minWidth: 170, flex: 1 }, | |||
| { headerName: '开始时间', unSortIcon: true, field: 'kssj', minWidth: 170, flex: 1 }, | |||
| { headerName: '实际完成时间', field: 'sjwcsj', minWidth: 170, flex: 1 }, | |||
| { headerName: '操作', autoHeaderHeight: true, width: 110, field: 'cz', cellRenderer: GridButtonValueRenderer } | |||
| { headerName: '', minWidth: 150, field: 'rwmc', flex: 1 }, | |||
| { headerName: '1#重磅', minWidth: 110, field: 'one', flex: 1 }, | |||
| { headerName: '2#重磅', minWidth: 110, field: 'two', flex: 1 }, | |||
| { headerName: '3#重磅', minWidth: 110, field: 'three', flex: 1 }, | |||
| { headerName: '4#重磅', minWidth: 110, field: 'four', flex: 1 }, | |||
| { headerName: '汇总', minWidth: 110, autoHeaderHeight: true, field: 'all', flex: 1 } | |||
| // { headerName: '操作', width: 0, autoHeaderHeight: true, field: 'cz', cellRenderer: GridButtonValueRenderer } | |||
| ]; | |||
| client: any; | |||
| @@ -119,6 +122,31 @@ export class DataVSecond1Component implements OnInit { | |||
| } | |||
| ngOnInit(): void { | |||
| this.todayRowData.push({ | |||
| rwmc: `车辆数`, | |||
| one: `4(辆)`, | |||
| two: `6(辆)`, | |||
| three: `9(辆)`, | |||
| four: '3(辆)', | |||
| all: '22(辆)' | |||
| }); | |||
| this.todayRowData.push({ | |||
| rwmc: `总吨数`, | |||
| one: `25.1(吨)`, | |||
| two: `45.2(吨)`, | |||
| three: `87.9(吨)`, | |||
| four: '15.5(吨)', | |||
| all: '155(吨)' | |||
| }); | |||
| this.todayRowData.push({ | |||
| rwmc: `上报热值/\n估算热值`, | |||
| one: `1/1 (MJ)`, | |||
| two: `2/1 (MJ)`, | |||
| three: `3/3 (MJ)`, | |||
| four: '4/3(MJ)', | |||
| all: '10/8 (MJ)' | |||
| }); | |||
| this.titleService.setTitle('我的工作站'); | |||
| for (var i = 1; i < 30; i++) { | |||
| @@ -25,17 +25,17 @@ | |||
| text-align: center; | |||
| } | |||
| .ag-grid-container { | |||
| width: 100%; | |||
| height: 100%; | |||
| } | |||
| .ag-grid-angular { | |||
| width: 100%; | |||
| height: 100%; | |||
| } | |||
| /* stylelint-disable-next-line selector-class-pattern */ | |||
| .paginationThemeClass{ | |||
| width: 100%; | |||
| } | |||
| // .ag-grid-container { | |||
| // width: 100%; | |||
| // // height: 100%; | |||
| // } | |||
| // .ag-grid-angular { | |||
| // width: 100%; | |||
| // // height: 100%; | |||
| // } | |||
| // /* stylelint-disable-next-line selector-class-pattern */ | |||
| // .paginationThemeClass{ | |||
| // width: 100%; | |||
| // } | |||
| @@ -25,7 +25,9 @@ export class LjAgGridComponentComponent implements OnInit { | |||
| gridOptions: GridOptions = { | |||
| headerHeight: 0, | |||
| suppressHorizontalScroll: false | |||
| suppressHorizontalScroll: false, | |||
| suppressNoRowsOverlay: true, | |||
| domLayout: 'autoHeight' | |||
| // columnDefs="columnDefs" | |||
| }; | |||