完成表格的细节调节

src/app/routes/data-v/lj-car-info-table/lj-car-ag-grid-component/lj-car-ag-grid-componentcomponent.less

@@ -1,3 +1,37 @@
 /* Core Grid CSS */
 @import 'ag-grid-community/styles/ag-grid.css';
-@import 'ag-grid-community/styles/ag-theme-quartz.css';
+@import 'ag-grid-community/styles/ag-theme-quartz.css';
+.ag-cell {
+    padding-right: 5px !important;
+    padding-left: 5px !important;
+  }
+  ::-webkit-scrollbar {
+    width:12px;
+    color: black;
+}
+::-webkit-scrollbar-thumb {
+	border-radius:10px;
+    background:rgba(0,0,0,0.1);
+    -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
+}
+::-webkit-scrollbar-thumb:window-inactive {
+    background:rgba(255,0,0,0.4);
+ }
+ .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb {
+    background-color: rgba(0,0,0,0.1);
+   
+    width:10px;
+}
+
+/* 定义垂直滚动条的宽度和背景颜色 */
+.ag-body-vertical-scroll::-webkit-scrollbar {
+    width: 12px;
+    background-color: #f5f5f5; /* 滚动条背景颜色 */
+}
+
+/* 定义滚动条滑块的样式 */
+.ag-body-vertical-scroll::-webkit-scrollbar-thumb {
+    background-color: #4CAF50; /* 滚动条滑块颜色 */
+    border-radius: 6px; /* 滚动条滑块圆角 */
+    border: 3px solid #f5f5f5; /* 滚动条滑块边框 */
+}

src/app/routes/data-v/lj-car-info-table/lj-car-info-table.component.css

@@ -121,6 +121,7 @@ border-radius: 3px;
   .table-header span {
     flex: 1; /* 每个元素占据等宽 */
     font-size: 12px;
+    color: #75F9FD;
     text-align: center; /* 文本居中 */
   }
 
@@ -148,4 +149,7 @@ border-radius: 3px;
 
 
 
-  
+.ag-cell {
+  padding-right: 5px !important;
+  padding-left: 5px !important;
+}

src/app/routes/data-v/lj-car-info-table/lj-car-info-table.component.ts

@@ -78,19 +78,59 @@ export class DataVLjCarInfoTableComponent implements OnInit {
       valueGetter: function (params: any) {
         return parseInt(params.node.id) + 1;
       },
-      width: 20,
-      cellStyle: { 'font-size': '8px' },
+      width: 50,
+      cellStyle: { 'font-size': '13px' },
       field: 'xh'
     },
 
-    { 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: '时间',
+      field: 'time',
+      width: 60,
+      cellStyle: { 'font-size': '13px', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '0px' }
+    },
+    {
+      headerName: '车牌',
+      field: 'carNo',
+      width: 50,
+      cellStyle: { 'font-size': '13px', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '0px' }
+    },
+    {
+      headerName: '车型',
+      field: 'carType',
+      width: 50,
+      cellStyle: { 'font-size': '13px', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '0px' }
+    },
+    {
+      headerName: '卡号',
+      field: 'no',
+      width: 50,
+      cellStyle: { 'font-size': '13px', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '0px' }
+    },
+    {
+      headerName: '供应商',
+      width: 55,
+      field: 'supplier',
+      cellStyle: { 'font-size': '13px', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '0px' }
+    },
+    {
+      headerName: '毛重',
+      width: 55,
+      field: 'grossWeight',
+      cellStyle: { 'font-size': '13px', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '0px' }
+    },
+    {
+      headerName: '上报热值',
+      width: 55,
+      field: 'reportHotValue',
+      cellStyle: { 'font-size': '13px', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '0px' }
+    },
+    {
+      headerName: '估算热值',
+      width: 55,
+      field: 'estimateValue',
+      cellStyle: { 'font-size': '13px', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '0px' }
+    }
     // { headerName: '操作', width: 90, field: 'cz', cellRenderer: GridButtonValueRenderer }
   ];
 

src/app/routes/data-v/lj-card/lj-card.component.less

@@ -34,7 +34,7 @@ border-radius: 3px;
 
 .card-content {
     overflow: hidden;
-    height: 250px;
+    // height: 100%;
     margin-bottom: 0.5rem;
     padding: 1rem 1.5rem;
     padding: 1rem;

src/app/routes/data-v/lj-dashboard/lj-dashboard.component.css

@@ -19,6 +19,7 @@
   .ag-header-center .ag-header-group-cell-label, 
 .ag-header-center .ag-header-cell-label {
     display: grid;
+    justify-content: center;
     width: 100%;
     text-align: center;
 }

src/app/routes/data-v/lj-dashboard/lj-dashboard.component.html

@@ -1,6 +1,6 @@
 <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="重衡系统投运率" />
+    <app-data-v-lj-text-dashboard locationTitle1="1#重磅" locationTitle2="3#重磅" chartId="leftChart" text="重衡系统健康度" />
+    <app-data-v-lj-text-dashboard locationTitle1="2#重磅" locationTitle2="4#重磅" chartId="rightChart" text="重衡系统投运率" />
   </div>
 </lj-data-v-board-title>

src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.css

@@ -1,10 +1,12 @@
 
-  .chart-card {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-  }
+.chart-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around; /* 或者使用 space-between 根据您的喜好 */
+  text-align: center;
+}
+
   
   .chart-text {
     margin: 0;

src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.html

@@ -3,5 +3,6 @@
     <div *ngIf="chartId" id="{{ chartId }}" class="chart-container"></div>
   </div>
   <p class="chart-text">{{ text }}</p>
-  <button class="chart-button">1#重磅</button>
+  <button class="chart-button">{{ locationTitle1 }}</button>
+  <button class="chart-button">{{ locationTitle2 }}</button>
 </div>

src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.ts

@@ -15,6 +15,9 @@ import * as echarts from 'echarts';
 export class DataVLjTextDashboardComponent implements OnInit {
   @Input() chartId: string = '';
   @Input() text: string = '';
+  @Input() locationTitle1: string = '';
+
+  @Input() locationTitle2: string = '';
   ngOnInit(): void {
     // 使用 setTimeout 确保视图已经初始化
     setTimeout(() => this.initCharts(), 0);

src/app/routes/data-v/second1/second1.component.html

@@ -2,18 +2,17 @@
   <div style="display: flex; flex-direction: column; width: 23%">
     <app-data-v-lj-dashboard title="系统状态" style="width: 100%" />
     <lj-app-ag-grid-component
-      style="width: 100%"
       title="运行信息"
       [defaultColDef]="defaultColDef"
-      [rowData]="rowData"
-      [columnDefs]="colDefs1"
+      [rowData]="runInfoRowData"
+      [columnDefs]="colDefs0"
       [gridThemeClass]="gridThemedClass"
     />
     <lj-app-ag-grid-component
       style="width: 100%"
       title="系统报警信息"
       [defaultColDef]="defaultColDef"
-      [rowData]="rowData"
+      [rowData]="systemWarnInfoRowData"
       [columnDefs]="colDefs1"
       [gridThemeClass]="gridThemedClass"
     />
@@ -36,7 +35,12 @@
         <div class="item">
           <img src="./assets/car0.jpg" alt="Car Image" />
         </div>
-        <div class="item"> 2.5D图 </div>
+        <div
+          id="divAlter"
+          style="display: block; border: 2px solid #000; width: 150px; text-align: center; line-height: 30px; padding: 10px"
+          >正在处理，请稍候...</div
+        >
+
         <div class="item">
           <img src="./assets/car0.jpg" alt="Car Image" />
         </div>
@@ -52,7 +56,7 @@
   <div style="display: flex; flex-direction: column; width: 30%">
     <!-- </data-v-card> -->
     <lj-app-ag-grid-component
-      style="height: 250px"
+      [heightNum]="146"
       [showPageTurning]="false"
       [showEditButton]="true"
       title="今日汇总"

src/app/routes/data-v/second1/second1.component.less

@@ -27,7 +27,7 @@
 
 .ag-header-center .ag-header-group-cell-label, 
 .ag-header-center .ag-header-cell-label {
-    display: grid;
+    // display: grid;
     justify-content: center;
     color: #000;
     text-align: center;
@@ -75,7 +75,7 @@
 
     //标题间的 竖线
     ::ng-deep .ag-header-cell-resize {
-        --ag-header-column-resize-handle-color: #00eff8;
+        --ag-header-column-resize-handle-color: transparent;
     }
 
     ::ng-deep .ag-header-row {
@@ -294,4 +294,14 @@
     user-select: none;
     margin-bottom: 0;
     color: #fff;
-  }
+  }
+  .head-class {
+    text-align: center;
+    justify-content: center;
+}
+
+  .ag-header-cell-label {
+    text-align: center;
+    justify-content: center;
+}
+

src/app/routes/data-v/second1/second1.component.ts

@@ -53,7 +53,7 @@ export class DataVSecond1Component implements OnInit {
 
   @ViewChild('myGrid') grid!: AgGridAngular;
   public defaultColDef: ColDef = {
-    width: 150,
+    // width: 150,
     editable: false
   };
 
@@ -62,23 +62,161 @@ export class DataVSecond1Component implements OnInit {
 
   rowData: object[] = [];
   todayRowData: object[] = [];
+
+  runInfoRowData: object[] = [];
+  systemWarnInfoRowData: object[] = [];
   array = [1, 2, 3, 4];
   effect = 'scrollx';
+  colDefs0: ColDef[] = [
+    {
+      headerName: '时间',
+      headerClass: 'head-class',
+      field: 'time',
+      autoHeaderHeight: true,
+      width: 130,
+      cellStyle: { 'text-align': 'start', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '18px' }
+    },
+    {
+      headerName: '操作',
+      field: 'option',
+      headerClass: 'head-class',
+      autoHeaderHeight: true,
+      width: 70,
+      cellStyle: { 'text-align': 'start', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '18px' }
+    },
+    {
+      headerName: '操作描述',
+      width: 130,
+      autoHeaderHeight: true,
+      field: 'optionDesc',
+      cellStyle: { 'text-align': 'start', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '18px' }
+    },
+    {
+      headerName: '操作人员',
+      width: 130,
+      field: 'optionMan',
+      autoHeaderHeight: true,
+      cellStyle: { 'text-align': 'start', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '18px' }
+    }
+  ];
+
   colDefs1: ColDef[] = [
-    { headerName: '任务描述', unSortIcon: true, field: 'rwms', width: 120 },
-    { headerName: '开始时间', headerClass: 'ag-header-center', unSortIcon: true, field: 'kssj', width: 180 },
+    {
+      headerName: '序号',
+      field: 'sort',
+      width: 70,
+      cellStyle: { 'text-align': 'start', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '18px' }
+    },
+    {
+      headerName: '时间',
+      field: 'time',
+      width: 140,
+      cellStyle: { 'text-align': 'start', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '18px' }
+    },
 
-    { headerName: '超期', width: 70, field: 'sfcq' },
-    { headerName: '操作', width: 90, autoHeaderHeight: true, field: 'cz', cellRenderer: GridButtonValueRenderer }
+    {
+      headerName: '任务描述',
+      width: 130,
+      field: 'taskDesc',
+      cellStyle: { 'text-align': 'start', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '18px' }
+    },
+    {
+      headerName: '等级',
+      width: 70,
+      field: 'level',
+      autoHeaderHeight: true,
+      cellStyle: { 'text-align': 'start', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '18px' }
+    }
   ];
-
   colDefs2: ColDef[] = [
-    { 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: '',
+
+      minWidth: 130,
+      field: 'rwmc',
+      flex: 1,
+      cellStyle: {
+        'font-size': '13px',
+        'text-align': 'center',
+        'padding-top': '0px',
+        'padding-right': '0px',
+        'padding-bottom': '0px',
+        'padding-left': '18px',
+        color: '#75F9FD'
+      }
+    },
+    {
+      headerName: '1#重磅',
+      minWidth: 60,
+      field: 'one',
+      flex: 1,
+      cellStyle: {
+        'text-align': 'center',
+        'font-size': '13px',
+        'padding-top': '0px',
+        'padding-right': '0px',
+        'padding-bottom': '0px',
+        'padding-left': '18px',
+        color: '#75F9FD'
+      }
+    },
+    {
+      headerName: '2#重磅',
+      minWidth: 60,
+      field: 'two',
+      flex: 1,
+      cellStyle: {
+        'text-align': 'center',
+        'font-size': '13px',
+        'padding-top': '0px',
+        'padding-right': '0px',
+        'padding-bottom': '0px',
+        'padding-left': '18px'
+      }
+    },
+    {
+      headerName: '3#重磅',
+      minWidth: 60,
+      field: 'three',
+      flex: 1,
+      cellStyle: {
+        'text-align': 'center',
+        'font-size': '13px',
+        'padding-top': '0px',
+        'padding-right': '0px',
+        'padding-bottom': '0px',
+        'padding-left': '18px'
+      }
+    },
+    {
+      headerName: '4#重磅',
+      minWidth: 60,
+      field: 'four',
+      flex: 1,
+      cellStyle: {
+        'text-align': 'center',
+        'font-size': '13px',
+        'padding-top': '0px',
+        'padding-right': '0px',
+        'padding-bottom': '0px',
+        'padding-left': '18px'
+      }
+    },
+    {
+      headerName: '汇总',
+      minWidth: 60,
+      autoHeaderHeight: true,
+      field: 'all',
+      flex: 1,
+      cellStyle: {
+        'text-align': 'center',
+        'font-size': '13px',
+        'padding-top': '0px',
+        'padding-right': '0px',
+        'padding-bottom': '0px',
+        'padding-left': '18px'
+      }
+    }
     // { headerName: '操作', width: 0, autoHeaderHeight: true, field: 'cz', cellRenderer: GridButtonValueRenderer }
   ];
 
@@ -137,13 +275,19 @@ export class DataVSecond1Component implements OnInit {
       all: '155（吨）'
     });
     this.todayRowData.push({
-      rwmc: `上报热值/\n估算热值`,
+      rwmc: `上报热值/估算热值`,
       one: `1/1 (MJ)`,
       two: `2/1 (MJ)`,
       three: `3/3 (MJ)`,
       four: '4/3（MJ)',
-      all: '10/8 （MJ）'
+      all: '10/8（MJ）'
     });
+    for (var i = 1; i < 10; i++) {
+      this.runInfoRowData.push({ time: '2024-09-09', option: '锁定', optionDesc: '锁定1号重磅', optionMan: '甲' });
+      this.runInfoRowData.push({ time: '2024-09-19', option: '解除', optionDesc: '接触1号重磅', optionMan: '甲' });
+      this.systemWarnInfoRowData.push({ sort: 1, time: '2024.01.25-18:32', taskDesc: '2#重磅停止', level: '1级' });
+      this.systemWarnInfoRowData.push({ sort: 2, time: '2024.01.26-18:32', taskDesc: '4#重磅停止', level: '3级' });
+    }
 
     this.titleService.setTitle('我的工作站');
 
@@ -181,6 +325,8 @@ export class DataVSecond1Component implements OnInit {
     const scrollContainer = gridDiv.querySelector('.ag-body-viewport');
     // 获取滚动条元素
     const scrollBar = gridDiv.querySelector('.ag-scroller');
+    console.log('scrollBar');
+    console.log(scrollBar);
   }
 
   add(): void {

src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.html

@@ -15,6 +15,7 @@
   <!-- style="min-width: 500px" -->
   <ag-grid-angular
     #myGrid
+    [ngStyle]="{ height: heightNum == 0 ? 'none' : heightNum + 'px', flex: heightNum == 0 ? '1' : 'none' }"
     [class]="gridThemeClass"
     (gridReady)="onGridReady($event)"
     [suppressPaginationPanel]="true"

src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.less

@@ -23,6 +23,7 @@
     display: grid;
     width: 100%;
     text-align: center;
+    justify-content: center;
 }
 
 // .ag-grid-container {

src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.ts

@@ -17,7 +17,7 @@ export class LjAgGridComponentComponent implements OnInit {
   [x: string]: any;
   @ViewChild('myGrid') grid!: AgGridAngular;
   @Input() title: string = '';
-
+  @Input() heightNum: Number = 0;
   // gridOptions: GridOptions = {
   //   // Set grid width here
   //   width: '100%'
@@ -112,7 +112,7 @@ export class LjAgGridComponentComponent implements OnInit {
     }
     console.log('-----表格初始化-----');
     // this.title = '';
-    this.pageSize = 5;
+    this.pageSize = 10;
     this.pageIndex = 1;
     this.pageRowTotal = this.rowData.length;
 

src/app/routes/data-v/workstation/workstation.component.less

@@ -75,7 +75,7 @@
 
     //标题间的 竖线
     ::ng-deep .ag-header-cell-resize {
-        --ag-header-column-resize-handle-color: #00eff8;
+        --ag-header-column-resize-handle-color: transparent;
     }
 
     ::ng-deep .ag-header-row {