Fix：修改大屏表格样式

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

@@ -12,7 +12,8 @@ import { NzPaginationModule } from 'ng-zorro-antd/pagination';
 export class LjCarAgGridComponentComponent implements OnInit {
   @ViewChild('myGrid') grid!: AgGridAngular;
   public gridOptions: any = {
-    headerHeight: 0
+    headerHeight: 0,
+    width: '100%'
   };
 
   /**每页数 */

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

@@ -101,4 +101,28 @@ border-radius: 3px;
             align-self: flex-end;
         }
     }
-}
+}
+
+.table-container {
+    margin: 10px 5px 20px; /* Adjust padding as needed */
+    padding: 10px;
+    border: 1px solid #fff; /* White border */
+
+    /* Other styles */
+  }
+
+  
+  .table-header {
+    display: flex; /* 使用 flex 布局 */
+    justify-content: space-between; /* 元素之间平均分布 */
+  }
+  
+  .table-header span {
+    flex: 1; /* 每个元素占据等宽 */
+    text-align: center; /* 文本居中 */
+  }
+
+  .grid-item {
+    margin-bottom: 10px;
+  }
+  

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

@@ -1,11 +1,55 @@
 <div class="card-content">
-  <lj-car-ag-grid-component
-    style="width: 30%"
-    [defaultColDef]="defaultColDef"
-    [rowData]="rowData"
-    [columnDefs]="colDefs1"
-    gridThemeClass="ag-theme-quartz ag-theme-datav"
-  />
+  <div class="table-container">
+    <div class="table-header">
+      <span>序号</span>
+      <span>时间</span>
+      <span>车牌</span>
+      <span>车型</span>
+      <span>卡号</span>
+      <span>供应商</span>
+      <span>毛重</span>
+      <span>上报<br />热值</span>
+      <span>估算<br />热值</span>
+    </div>
+  </div>
+  <div class="grid-container">
+    <div class="grid-item">
+      <lj-car-ag-grid-component
+        style="width: 30%"
+        [defaultColDef]="defaultColDef"
+        [rowData]="rowData"
+        [columnDefs]="colDefs1"
+        gridThemeClass="ag-theme-quartz ag-theme-datav"
+      />
+    </div>
+    <div class="grid-item">
+      <lj-car-ag-grid-component
+        style="width: 30%"
+        [defaultColDef]="defaultColDef"
+        [rowData]="rowData"
+        [columnDefs]="colDefs1"
+        gridThemeClass="ag-theme-quartz ag-theme-datav"
+      />
+    </div>
+    <div class="grid-item">
+      <lj-car-ag-grid-component
+        style="width: 30%"
+        [defaultColDef]="defaultColDef"
+        [rowData]="rowData"
+        [columnDefs]="colDefs1"
+        gridThemeClass="ag-theme-quartz ag-theme-datav"
+      />
+    </div>
+    <div class="grid-item">
+      <lj-car-ag-grid-component
+        style="width: 30%"
+        [defaultColDef]="defaultColDef"
+        [rowData]="rowData"
+        [columnDefs]="colDefs1"
+        gridThemeClass="ag-theme-quartz ag-theme-datav"
+      />
+    </div>
+  </div>
 
   <ng-content />
 </div>

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

@@ -46,51 +46,45 @@
       <div style="height: 34.6rem">
         <img src="assets/dashboard/dashboard_ws_demo1.png" style="width: 100%" />
 
-        <div nz-row style="justify-content: center;align-items: center;margin-top: 0.5rem;">
-          <div nz-col nzSpan="12" class="sys-status-title">
-            机器人
-          </div>
-          <div nz-col nzSpan="12" class="sys-status-title">
-            全硫仪
-          </div>
-          <div nz-col nzSpan="12" class="sys-status-title">
-            全水分析仪
-          </div>
-          <div nz-col nzSpan="12" class="sys-status-title">
-            挥发分仪
-          </div>
-          <div nz-col nzSpan="12" class="sys-status-title">
-            量热仪
-          </div>
-          <div nz-col nzSpan="12" class="sys-status-title">
-            碳氢氮元素
-          </div>
+        <div nz-row style="justify-content: center; align-items: center; margin-top: 0.5rem">
+          <div nz-col nzSpan="12" class="sys-status-title"> 机器人 </div>
+          <div nz-col nzSpan="12" class="sys-status-title"> 全硫仪 </div>
+          <div nz-col nzSpan="12" class="sys-status-title"> 全水分析仪 </div>
+          <div nz-col nzSpan="12" class="sys-status-title"> 挥发分仪 </div>
+          <div nz-col nzSpan="12" class="sys-status-title"> 量热仪 </div>
+          <div nz-col nzSpan="12" class="sys-status-title"> 碳氢氮元素 </div>
         </div>
       </div>
     </data-v-card>
   </div>
 
   <div nz-col nzSpan="8">
-    <data-v-card title="化验结果" [showSetting]="true" [optionsList]="chartConfig.optionsCheckList"
-      (onCheckedItemsChange)="handleCheckedItems($event)">
+    <data-v-card
+      title="化验结果"
+      [showSetting]="true"
+      [optionsList]="chartConfig.optionsCheckList"
+      (onCheckedItemsChange)="handleCheckedItems($event)"
+    >
       <div nz-row class="scrollable-container">
-        @for(item of chartConfig.optionsCheckList; track item) {
+        @for (item of chartConfig.optionsCheckList; track item) {
           <div nz-col [nzSpan]="24 / chartConfig.rowNumber" *ngIf="item.checked" class="centered-element">
             <!-- 添加上下外边距 -->
-            <app-chart-component [options]="item.options"
+            <app-chart-component
+              [options]="item.options"
               [style]="{ margin: '20px ' + 20 / chartConfig.rowNumber + 'px', width: '100%', height: '16rem' }"
-              *ngIf="item.checked" />
+              *ngIf="item.checked"
+            />
           </div>
-          }
+        }
       </div>
       <div nz-row>
-        @for(item of chartConfig.optionBottomList; track item) {
+        @for (item of chartConfig.optionBottomList; track item) {
           <div nz-col nzSpan="12">
             <div class="centered-element" style="margin: 2px">
               <app-chart-component [options]="item" style="width: 26rem; height: 11rem; margin-left: 0.4rem" />
             </div>
           </div>
-          }
+        }
       </div>
     </data-v-card>
   </div>

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

@@ -1,8 +1,8 @@
 <div nz-row [nzGutter]="[12, 12]" style="display: flex; justify-content: space-between">
-  <div style="display: flex; flex-direction: column">
-    <app-data-v-lj-dashboard title="系统状态" style="width: 80%" />
+  <div style="display: flex; flex-direction: column; width: 40%">
+    <app-data-v-lj-dashboard title="系统状态" style="width: 100%" />
     <lj-app-ag-grid-component
-      style="width: 80%"
+      style="width: 100%"
       title="运行信息"
       [defaultColDef]="defaultColDef"
       [rowData]="rowData"
@@ -10,7 +10,7 @@
       [gridThemeClass]="gridThemedClass"
     />
     <lj-app-ag-grid-component
-      style="width: 80%"
+      style="width: 100%"
       title="系统报警信息"
       [defaultColDef]="defaultColDef"
       [rowData]="rowData"

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

@@ -1,12 +1,11 @@
 import { Component, ElementRef, 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 { ModalHelper, _HttpClient, TitleService } from '@delon/theme';
 import { SHARED_IMPORTS } from '@shared';
 import * as THREE from 'three';
-import { OrbitControls } from 'three-orbitcontrols-ts';
 import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
-import { TitleService } from '@delon/theme';
+import { OrbitControls } from 'three-orbitcontrols-ts';
 
 const clock = new THREE.Clock();
 let mixer: { update: (arg0: number) => void };

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

@@ -22,16 +22,15 @@
     [suppressScrollOnNewData]="true"
     [paginationPageSize]="pageSize"
     [defaultColDef]="defaultColDef"
-    [rowData]="rowData"
-    [columnDefs]="columnDefs"
     [rowHeight]="38"
+    [gridOptions]="gridOptions"
   />
   <!-- <app-data-v-lj-table [columns]="tableColumns" [data]="tableData" /> -->
   <br />
   <!-- 分页 -->
 
   <div [hidden]="!showPageTurning" class="grid-pagination">
-    <div class="page-total-style">共 {{ pageRowTotal }} 项数据</div>
+    <div class="page-total-style">共1222 {{ pageRowTotal }} 项数据</div>
     <nz-pagination
       [nzPageIndex]="pageIndex"
       [nzPageSize]="pageSize"

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

@@ -21,4 +21,14 @@
     display: grid;
     width: 100%;
     text-align: center;
-}
+}
+
+.ag-grid-container {
+  width: 100%;
+  height: 100%;
+}
+
+.ag-grid-angular {
+  width: 100%;
+  height: 100%;
+}

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

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { Component, OnInit, ViewChild, Input } from '@angular/core';
 import { AgGridAngular } from 'ag-grid-angular';
-import { ColDef, GridApi } from 'ag-grid-community';
+import { ColDef, GridApi, GridOptions } from 'ag-grid-community';
 import { NzPaginationModule } from 'ng-zorro-antd/pagination';
 
 import { LJDataVCardComponent } from '../../lj-card/lj-card.component';
@@ -18,6 +18,16 @@ export class LjAgGridComponentComponent implements OnInit {
   @ViewChild('myGrid') grid!: AgGridAngular;
   @Input() title: string = '';
 
+  // gridOptions: GridOptions = {
+  //   // Set grid width here
+  //   width: '100%'
+  // };
+
+  gridOptions: GridOptions = {
+    headerHeight: 0
+
+    // columnDefs="columnDefs"
+  };
   @Input() showEditButton: boolean = false;
 
   @Input() showSetting: boolean = false;
@@ -32,7 +42,7 @@ export class LjAgGridComponentComponent implements OnInit {
 
   //默认列配置
   @Input() defaultColDef: ColDef = {
-    width: 130,
+    width: 80,
     editable: false,
     headerClass: 'ag-header-center',
 
@@ -102,6 +112,12 @@ export class LjAgGridComponentComponent implements OnInit {
     this.pageSize = 5;
     this.pageIndex = 1;
     this.pageRowTotal = this.rowData.length;
+
+    this.gridOptions = {
+      headerHeight: 0,
+      rowData: this.rowData,
+      columnDefs: this.columnDefs
+    };
   }
   //每页数
   nzPageSizeChange(_pageSize: any) {