Add：1：适配毛重计量页面字体大小，和部分表格；2：菜单字体适配 3：表格宽度适配

src/app/routes/dashboard/header/index.less

@@ -26,7 +26,7 @@
     /* Offset the title to truly center it */
     color: #fff;
     /* Adjust text color as needed */
-    font-size: 28px;
+    font-size: 1.75rem;
     /* Adjust font size as needed */
     color: #B9D5E5;
     /* Additional styling for title text, such as font-family, etc. */

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

@@ -11,7 +11,7 @@
     .card-content-title {
         display: flex;
         margin-bottom: 0.5rem;
-        font-size: 18px;
+        font-size: 1.2rem;
         font-weight: 600;
         color: #74FAFB;
 

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

@@ -21,10 +21,10 @@
   
 .card-button {
     cursor: pointer; /* 更好的用户体验，表明这是一个可点击的按钮 */
-    width: 82px;
-    height: 40px;
-    font-size: 26px;
-    line-height: 20px;
+    width: 3.7rem;
+    height: 1.9rem;
+    font-size: 1.18rem;
+    line-height: 0.9rem;
     color: rgb(0 239 248 / 100%);
 text-align: center;
 background-color: rgb(33 48 105 / 100%);
@@ -68,9 +68,9 @@ border-radius: 3px;
         padding: 5px 20px;
 
         /* 根据实际情况调整这里的内边距 */
-        font-size: 28px;
+        font-size: 1.2rem;
         font-weight: 600;
-        line-height: 22px;
+        line-height: 1.3rem;
 
         /* 字体颜色 */
         color: #74FAFB;
@@ -120,7 +120,7 @@ border-radius: 3px;
   
   .table-header span {
     flex: 1; /* 每个元素占据等宽 */
-    font-size: 12px;
+    font-size: rem;
     color: #75F9FD;
     text-align: center; /* 文本居中 */
   }
@@ -139,12 +139,12 @@ border-radius: 3px;
     height: 40px;
     margin-right: 10px;
     padding:   3px;
-    font-size: 26px;
+    font-size: 1.25rem;
     font-weight: 700;
     text-align: center;
     background-color: #21306A;
     border:1px solid #00EFF9;
-    border-radius: 2px; /* 减小圆角 */
+    border-radius: 0.1rem; /* 减小圆角 */
 }
 
 

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

@@ -78,7 +78,7 @@ export class DataVLjCarInfoTableComponent implements OnInit {
       valueGetter: function (params: any) {
         return parseInt(params.node.id) + 1;
       },
-      width: 50,
+      minWidth: 50,
       cellStyle: { 'font-size': '13px' },
       field: 'xh'
     },
@@ -86,48 +86,48 @@ export class DataVLjCarInfoTableComponent implements OnInit {
     {
       headerName: '时间',
       field: 'time',
-      width: 60,
+      minWidth: 60,
       cellStyle: { 'font-size': '13px', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '0px' }
     },
     {
       headerName: '车牌',
       field: 'carNo',
-      width: 50,
+      minWidth: 50,
       cellStyle: { 'font-size': '13px', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '0px' }
     },
     {
       headerName: '车型',
       field: 'carType',
-      width: 50,
+      minWidth: 50,
       cellStyle: { 'font-size': '13px', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '0px' }
     },
     {
       headerName: '卡号',
       field: 'no',
-      width: 50,
+      minWidth: 50,
       cellStyle: { 'font-size': '13px', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '0px' }
     },
     {
       headerName: '供应商',
-      width: 55,
+      minWidth: 55,
       field: 'supplier',
       cellStyle: { 'font-size': '13px', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '0px' }
     },
     {
       headerName: '毛重',
-      width: 55,
+      minWidth: 55,
       field: 'grossWeight',
       cellStyle: { 'font-size': '13px', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '0px' }
     },
     {
       headerName: '上报热值',
-      width: 55,
+      minWidth: 55,
       field: 'reportHotValue',
       cellStyle: { 'font-size': '13px', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '0px' }
     },
     {
       headerName: '估算热值',
-      width: 55,
+      minWidth: 55,
       field: 'estimateValue',
       cellStyle: { 'font-size': '13px', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '0px' }
     }

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

@@ -24,9 +24,9 @@ span[nz-icon] {
 
 .card-button {
   cursor: pointer;
-  width: 72px;
-  height: 40px;
-  font-size: 24px;
+  width: 3.27rem;
+  height: 1.81rem;
+  font-size: 1.02rem;
   line-height: 20px;
   color: rgb(0 239 248 / 100%);
   text-align: center;
@@ -73,9 +73,9 @@ span[nz-icon] {
     padding: 5px 20px;
 
     /* 根据实际情况调整这里的内边距 */
-    font-size: 28px;
+    font-size: 1.2rem;
     font-weight: 600;
-    line-height: 22px;
+    line-height: 1.3rem;
 
     /* 字体颜色 */
     color: #74FAFB;

src/app/routes/data-v/lj-dashboard/lj-board-title/lj-board-title.component.less

@@ -21,10 +21,10 @@
   
 .card-button {
     cursor: pointer; 
-    width: 72px;
-    height: 40px;
-    font-size: 24px;
-    line-height: 20px;
+    width: 3.7rem;
+    height: 1.9rem;
+    font-size: 1.18rem;
+    line-height: 0.9rem;
     color: rgb(0 239 248 / 100%);
 text-align: center;
 background-color: rgb(33 48 105 / 100%);
@@ -69,9 +69,9 @@ border-radius: 3px;
         padding: 5px 20px;
 
         /* 根据实际情况调整这里的内边距 */
-        font-size: 28px;
+        font-size: 1.25rem;
         font-weight: 600;
-        line-height: 22px;
+        line-height: 1.35rem;
 
         /* 字体颜色 */
         color: #74FAFB;

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

@@ -5,14 +5,14 @@
 .custom-label {
     display: inline-block;
     padding: 10px 20px; /* 内边距 */
-    font-size: 16px; /* 字体大小 */
+    font-size: 0.7rem; /* 字体大小 */
     color: white; /* 文字颜色 */
     background-color: rgb(0 0 0 / 50%); /* 半透明黑色背景 */
     border-radius: 10px 10px 0 0; /* 上方圆角 */
   }
 
   .my-grid-font {
-    font-size: 16px;
+    font-size: 0.7rem;
     font-weight: bold;
   }
 

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

@@ -10,7 +10,7 @@
   
   .chart-text {
     margin: 0;
-    font-size: 24px;
+    font-size: 1.02rem;
     color: rgb(126 221 243 / 100%);
 
   }
@@ -20,8 +20,8 @@
     width: 12rem;
     height: 3rem;
     margin: 5px;
-    font-size: 28px;
-    line-height: 22px;
+    font-size: 1.75rem;
+    line-height: 1.02rem;
     color: rgb(255 0 0 / 100%);
     text-align: center;
     background-color: rgb(6 70 120 / 0%);

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

@@ -1,11 +1,11 @@
-
+@import "../../../../styles/variables.less";
 .navigation-container {
   // overflow-x: auto; /* 水平方向上的滚动条 */
   display: flex;
   // flex-flow: row wrap;     /* 允许换行 */
   flex-wrap: nowrap; /* 不允许换行 */
   // width: 100%;
-  margin-top:10px;
+  .px2rem(10,margin-top);
   padding-left: 2rem;
   white-space: nowrap; /* 防止菜单项换行 */
   // white-space: normal;
@@ -13,8 +13,9 @@
 
 
 [nz-button] {
-  margin-right: 8px;
-  margin-bottom: 12px;
+  .px2rem(8,margin-right);
+  .px2rem(12,margin-bottom);
+  
 }
 
 .nz-button-group [nz-button] {
@@ -24,7 +25,8 @@
 ul {
   display: inline-flex;
   flex-wrap: wrap; /* 允许子元素换行 */
-  margin-bottom: 10px;
+  
+  .px2rem(10,margin-bottom);
     padding-top: 0;
     padding-left: 0;
   list-style-type: none; /* 移除标记 */
@@ -35,8 +37,9 @@ ul {
   li {
     // display: flex;
     flex-wrap: wrap;
-    margin-right: 10px;
-    margin-bottom: 30px;
+    .px2rem(10,margin-right);
+    .px2rem(30,margin-bottom);
+  
 
     a {
       clear: both;
@@ -52,6 +55,7 @@ ul {
       background-color: #054254;
       border: 0 solid red;
       border-color: #74FAFB;
+      .px2rem(18,font-size);
 
       &:hover,
       &:active,
@@ -65,8 +69,10 @@ ul {
     .dropdown-menu {
       display: inline-flex;
       flex-wrap: nowrap;
-      margin-right: 10px;
-      margin-bottom: 10px;
+      
+      .px2rem(30,margin-right);
+      .px2rem(10,margin-bottom);
+      
       color: #fff;
       background-color: #337AB7;
     }
@@ -91,7 +97,8 @@ ul {
 
       >a {
         display: block;
-
+        
+      
         &::after {
           content: "\f054";
           position: absolute;

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

@@ -8,7 +8,7 @@
 
 
 .sys-status-title {
-    font-size: 18px;
+    font-size: 0.82rem;
     font-weight: 600;
     color: #94DDF3;
     text-align: center;
@@ -22,7 +22,7 @@
     --ag-header-background-color: #0A1632;
     --ag-odd-row-background-color: #0A1632;
     --ag-header-column-resize-handle-color: rgb(126 46 132);
-    --ag-font-size: 17px;
+    --ag-font-size: 0.78rem;
     --ag-font-family: monospace;
 
     height: 5rem;
@@ -67,7 +67,7 @@
         width: 8rem;
         margin-left: 6px;
         /* 调整文字与圆形之间的间距 */
-        font-size: 16px;
+        font-size: 0.72rem;
         font-weight: 600;
         color: #74FAFB;
     }
@@ -75,7 +75,7 @@
     .status-ext-text {
         margin-top: 3px;
         /* 将文本转换为行内块元素 */
-        font-size: 12px;
+        font-size: 0.54rem;
 
     }
 }

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

@@ -2,6 +2,7 @@
   <div style="display: flex; flex-direction: column; width: 23%">
     <app-data-v-lj-dashboard title="系统状态" style="width: 100%" />
     <lj-app-ag-grid-component
+      [heightNum]="11"
       title="运行信息"
       [defaultColDef]="defaultColDef"
       [rowData]="runInfoRowData"
@@ -55,19 +56,20 @@
     </div>
   </div>
 
-  <div style="display: flex; flex-direction: column; width: 30%">
+  <div style="display: flex; flex-direction: column; width: 32%">
     <!-- </data-v-card> -->
-
-    <lj-app-ag-grid-component
-      [heightNum]="146"
-      [showPageTurning]="false"
-      [showEditButton]="true"
-      title="今日汇总"
-      [defaultColDef]="defaultColDef"
-      [rowData]="todayRowData"
-      [columnDefs]="colDefs2"
-      [gridThemeClass]="gridThemedClass"
-    />
+    <div>
+      <lj-app-ag-grid-component
+        [heightNum]="10.3"
+        [showPageTurning]="false"
+        [showEditButton]="true"
+        title="今日汇总"
+        [defaultColDef]="defaultColDef"
+        [rowData]="todayRowData"
+        [columnDefs]="colDefs2"
+        [gridThemeClass]="gridThemedClass"
+      />
+    </div>
 
     <app-data-v-lj-car-info-table style="width: 100%; margin-top: 30px" />
     <!--   

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

@@ -22,7 +22,7 @@
 //     font-weight: 600;
 //     color: #94DDF3;
 // }
-
+@import "../../../..//styles/variables.less";
 /* 分页器 */
 
 .ag-header-center .ag-header-group-cell-label,
@@ -66,13 +66,13 @@
     --ag-header-background-color: #0A1632;
     --ag-odd-row-background-color: #0A1632;
     --ag-header-column-resize-handle-color: rgb(126 46 132);
-    --ag-font-size: 12px;
+.px2rem(12,--ag-font-size);
     --ag-font-family: monospace;
 
     height: 17rem;
     font-weight: 700;
     //竖线颜色
-    border-width: 3px;
+    .px2rem(3,border-width);
     &:extend(.ag-theme-material);
 
     //标题间的 竖线
@@ -82,7 +82,7 @@
 
 
   ::ng-deep .ag-header-row {
-    font-size: 14px;
+   .px2rem(12,font-size);
     font-weight: 700;
   }
 
@@ -100,12 +100,12 @@
 
 /* 设置滚动条滑块的样式 */
 ::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb {
-  margin-left: 40px;
+  .px2rem(40,  margin-left);
   background-color: #00eff8;
 
   /* 圆角 */
-  border: 2px solid #00eff8;
-
+  border:  solid #00eff8;
+  .px2rem(2,border-width) ;
   /* 滚动条滑块的背景颜色 */
 
 
@@ -124,7 +124,7 @@
 
 /* 设置滚动条滑块悬浮时的样式 */
 ::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover {
-  margin-left: 40px;
+  .px2rem(40,margin-left);
   background-color: #00eff8;
 
   /* 滚动条滑块悬浮时的背景颜色 */
@@ -185,9 +185,10 @@
 .lock-button,
 .standard-button,
 .highlighted-button {
-  margin: 5px;
-  padding: 10px 15px;
-  font-size: 20px;
+  .px2rem(5,margin);
+  
+   .px2rem(10,padding) ;
+   .px2rem(20,font-size);
   color: white;
   border: none;
 }
@@ -197,26 +198,27 @@
 }
 
 .standard-button {
-  font-size: 20px;
+   .px2rem(20,font-size);
   font-weight: bold;
-  line-height: 20px;
+  .px2rem(20,line-height);
   color: rgb(107 236 246 / 100%);
   text-align: center;
   background-color: rgb(33 48 105 / 100%);
-  border-radius: 3px;
+   .px2rem(3,border-radius);
 }
 
 .highlighted-button {
   background-color: #3498db; // 你可以根据需要调整颜色
-  border-radius: 10px;
+  .px2rem(10,border-radius);
 }
 
 .fa-lock {
-  margin-right: 5px;
+   .px2rem(5,margin-right);
 }
 
 .logo {
-  width: 55px;
+  .px2rem(65,width);
+  .px2rem(65,height);
   // height: ;
 }
 
@@ -226,7 +228,7 @@
   width: 100%;
   // height: 100%;
   margin: 1vw;
-  margin-top: 5px;
+  .px2rem(5,margin-top);
   padding: 1rem;
   background-image: url("/assets/dashboard/dashboard_card_bg.jpg");
   background-repeat: no-repeat;
@@ -240,15 +242,15 @@
   /* 保持相同高度 */
   justify-content: space-between;
   /* 子组件间平均分布 */
-  margin-bottom: 20px;
+   .px2rem(20,margin-bottom);
   /* 每行之间的间距 */
 }
 
 .item {
-  flex-basis: 100px;
+   .px2rem(100,flex-basis);
   flex-grow: 1;
-  margin: 10px;
-  margin-top: 20px;
+  .px2rem(10,margin);
+   .px2rem(20,margin-top);
 }
 
 .item:nth-child {
@@ -256,9 +258,9 @@
 }
 
 .item img {
-  width: 200px;
-  height: 200px;
-  margin: 10px;
+   .px2rem(200,width);
+   .px2rem(200,height);
+   .px2rem(10,margin);
   object-fit: contain;
   /* 保持图片的宽高比 */
 }
@@ -268,7 +270,7 @@
   // flex: 1; /* 同样的，让信息容器也占据等同的空间 */
   flex-direction: column;
   justify-content: space-around;
-  margin: 0 10px;
+  margin: 0 .px2rem(10);
 }
 
 .model-container {
@@ -277,25 +279,25 @@
   /* 同样的，让信息容器也占据等同的空间 */
   flex-direction: column;
   justify-content: space-around;
-  margin: 0 10px;
+  margin: 0 .px2rem(10);
 }
 
 
 .info-button {
-  margin: 5px 0;
-  padding: 10px;
+   .px2rem(5,margin);
+   .px2rem(10,padding);
   color: white;
   text-align: center;
   background-color: #007bff;
-  border-radius: 5px;
-  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+  .px2rem(5,border-radius);
+  box-shadow: 0 .px2rem(2) .px2rem(4) rgb(0 0 0 / 10%);
 }
 
 [nz-carousel-content] {
   overflow: hidden;
-  width: 150px;
+   .px2rem(150,width);
   /* 调整宽度 */
-  height: 80px;
+  .px2rem(80,height);
   /* 调整高度 */
   color: #fff;
   text-align: center;
@@ -320,18 +322,18 @@ h3 {
   width: fit-content;
   height: fit-content;
   margin-bottom: 0.5rem;
-  padding: 5px 20px 0;
+  padding: .px2rem(5) .px2rem(20) 0;
 
   /* 文本的内边距 */
 
   /* 根据需要调整字体大小
 font-weight: bold; /* 字体加粗 */
-  padding: 5px 20px;
+  padding: .px2rem(5) .px2rem(20);
 
   /* 根据实际情况调整这里的内边距 */
-  font-size: 20px;
+   .px2rem(20,font-size);
   font-weight: 600;
-  line-height: 22px;
+  .px2rem(22,line-height);
 
   /* 字体颜色 */
   color: #74FAFB;
@@ -342,13 +344,13 @@ font-weight: bold; /* 字体加粗 */
   background-color: #19426E;
 
   /* 设置背景颜色为深蓝色 */
-  border: 1px solid #1f6f97;
+  border: .px2rem(1) solid #1f6f97;
 
   /* 设置边框颜色 */
-  border-radius: 10px 10px 0 0;
+  border-radius: .px2rem(10) .px2rem(10) 0 0;
 
   /* 上面是圆角，下面是直角 */
-  box-shadow: inset 0 0 10px #1f6f97;
+  box-shadow: inset 0 0 .px2rem(10) #1f6f97;
 
   /* 内阴影效果 */
   .card-content-l {
@@ -365,6 +367,7 @@ font-weight: bold; /* 字体加粗 */
     color: #fff;
   }
   .head-class {
+     .px2rem(18,font-size);
     text-align: center;
     justify-content: center;
 }

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

@@ -4,11 +4,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 autofit from 'autofit.js';
 import * as echarts from 'echarts';
 import { NzCarouselModule } from 'ng-zorro-antd/carousel';
 import { NzPaginationModule } from 'ng-zorro-antd/pagination';
 import { MqttService } from 'ngx-mqtt';
 
+import { BlockbusterComponent } from './blockbuster/blockbuster.component';
 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';
@@ -17,7 +19,6 @@ 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';
 import { LjAgGridComponentComponent } from '../workstation/lj-ag-grid-component/lj-ag-grid-component.component';
-import { BlockbusterComponent } from './blockbuster/blockbuster.component';
 @Component({
   selector: 'app-data-v-s1',
   standalone: true,
@@ -93,7 +94,14 @@ export class DataVSecond1Component implements OnInit {
       field: 'time',
       autoHeaderHeight: true,
       width: 130,
-      cellStyle: { 'text-align': 'start', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '18px' }
+      cellStyle: {
+        'font-size': '0.9rem',
+        'text-align': 'start',
+        'padding-top': '0px',
+        'padding-right': '0px',
+        'padding-bottom': '0px',
+        'padding-left': '18px'
+      }
     },
     {
       headerName: '操作',
@@ -101,21 +109,42 @@ export class DataVSecond1Component implements OnInit {
       headerClass: 'head-class',
       autoHeaderHeight: true,
       width: 70,
-      cellStyle: { 'text-align': 'start', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '18px' }
+      cellStyle: {
+        'font-size': '0.9rem',
+        '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' }
+      cellStyle: {
+        'font-size': '0.9rem',
+        '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' }
+      cellStyle: {
+        'font-size': '0.9rem',
+        'text-align': 'start',
+        'padding-top': '0px',
+        'padding-right': '0px',
+        'padding-bottom': '0px',
+        'padding-left': '18px'
+      }
     }
   ];
 
@@ -124,27 +153,55 @@ export class DataVSecond1Component implements OnInit {
       headerName: '序号',
       field: 'sort',
       width: 70,
-      cellStyle: { 'text-align': 'start', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '18px' }
+      cellStyle: {
+        'font-size': '0.9rem',
+        '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' }
+      cellStyle: {
+        'font-size': '0.9rem',
+        'text-align': 'start',
+        'padding-top': '0px',
+        'padding-right': '0px',
+        'padding-bottom': '0px',
+        'padding-left': '18px'
+      }
     },
 
     {
       headerName: '任务描述',
       width: 130,
       field: 'taskDesc',
-      cellStyle: { 'text-align': 'start', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '18px' }
+      cellStyle: {
+        'font-size': '0.9rem',
+        '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' }
+      cellStyle: {
+        'font-size': '0.9rem',
+        'text-align': 'start',
+        'padding-top': '0px',
+        'padding-right': '0px',
+        'padding-bottom': '0px',
+        'padding-left': '18px'
+      }
     }
   ];
   colDefs2: ColDef[] = [
@@ -155,8 +212,8 @@ export class DataVSecond1Component implements OnInit {
       field: 'rwmc',
       flex: 1,
       cellStyle: {
-        'font-size': '13px',
-        'text-align': 'center',
+        'font-size': '0.9rem',
+
         'padding-top': '0px',
         'padding-right': '0px',
         'padding-bottom': '0px',
@@ -170,8 +227,7 @@ export class DataVSecond1Component implements OnInit {
       field: 'one',
       flex: 1,
       cellStyle: {
-        'text-align': 'center',
-        'font-size': '13px',
+        'font-size': '0.9rem',
         'padding-top': '0px',
         'padding-right': '0px',
         'padding-bottom': '0px',
@@ -185,8 +241,7 @@ export class DataVSecond1Component implements OnInit {
       field: 'two',
       flex: 1,
       cellStyle: {
-        'text-align': 'center',
-        'font-size': '13px',
+        'font-size': '0.9rem',
         'padding-top': '0px',
         'padding-right': '0px',
         'padding-bottom': '0px',
@@ -199,8 +254,7 @@ export class DataVSecond1Component implements OnInit {
       field: 'three',
       flex: 1,
       cellStyle: {
-        'text-align': 'center',
-        'font-size': '13px',
+        'font-size': '0.9rem',
         'padding-top': '0px',
         'padding-right': '0px',
         'padding-bottom': '0px',
@@ -213,8 +267,7 @@ export class DataVSecond1Component implements OnInit {
       field: 'four',
       flex: 1,
       cellStyle: {
-        'text-align': 'center',
-        'font-size': '13px',
+        'font-size': '0.9rem',
         'padding-top': '0px',
         'padding-right': '0px',
         'padding-bottom': '0px',
@@ -228,8 +281,7 @@ export class DataVSecond1Component implements OnInit {
       field: 'all',
       flex: 1,
       cellStyle: {
-        'text-align': 'center',
-        'font-size': '13px',
+        'font-size': '0.9rem',
         'padding-top': '0px',
         'padding-right': '0px',
         'padding-bottom': '0px',
@@ -277,6 +329,7 @@ export class DataVSecond1Component implements OnInit {
   }
 
   ngOnInit(): void {
+    autofit.init();
     this.todayRowData.push({
       rwmc: `车辆数`,
       one: `4（辆）`,

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

@@ -15,7 +15,7 @@
   <!-- style="min-width: 500px" -->
   <ag-grid-angular
     #myGrid
-    [ngStyle]="{ height: heightNum == 0 ? 'none' : heightNum + 'px', flex: heightNum == 0 ? '1' : 'none' }"
+    [ngStyle]="{ height: heightNum == 0 ? 'none' : heightNum + 'rem', 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

@@ -2,19 +2,19 @@
 @import 'ag-grid-community/styles/ag-grid.css';
 @import 'ag-grid-community/styles/ag-theme-quartz.css';
 
-
+@import "../../../../../styles/variables.less";
 
 .custom-label {
     display: inline-block;
     padding: 10px 20px; /* 内边距 */
-    font-size: 16px; /* 字体大小 */
+    font-size:  0.72rem; /* 字体大小 */
     color: white; /* 文字颜色 */
     background-color: rgb(0 0 0 / 50%); /* 半透明黑色背景 */
     border-radius: 10px 10px 0 0; /* 上方圆角 */
   }
 
   .my-grid-font {
-    font-size: 16px;
+    font-size: 0.72rem;
     font-weight: bold;
   }
 
@@ -25,7 +25,10 @@
     text-align: center;
     justify-content: center;
 }
-
+.page-total-style{
+  
+  .px2rem(14,font-size);
+}
 // .ag-grid-container {
 //   width: 100%;
 //   // height: 100%;

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

@@ -73,30 +73,6 @@ export class LjAgGridComponentComponent implements OnInit {
     // 其他列配置...
   ];
 
-  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() {
     if (this.showPageTurning) {

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

@@ -22,7 +22,7 @@
 //     font-weight: 600;
 //     color: #94DDF3;
 // }
-
+@import "../../../..//styles/variables.less";
 /* 分页器 */
 
 .ag-header-center .ag-header-group-cell-label, 
@@ -67,10 +67,11 @@
     --ag-font-size: 12px;
     --ag-font-family: monospace;
 
-    height: 17rem;
+    height: 16rem;
     font-weight: 700;
     //竖线颜色
-    border-width: 3px;
+    
+    .px2rem(3,border-width);
     &:extend(.ag-theme-material);
 
     //标题间的 竖线
@@ -79,7 +80,7 @@
     }
 
     ::ng-deep .ag-header-row {
-        font-size: 14px;
+        .px2rem(12,font-size);
         font-weight: 700;
     }
 

src/index.html

@@ -51,7 +51,7 @@
     }
 
     .cs-loader-inner label {
-      font-size: 20px;
+      font-size: 1.25px;
       opacity: 0;
       display: inline-block
     }

src/main.ts

@@ -4,3 +4,20 @@ import { AppComponent } from './app/app.component';
 import { appConfig } from './app/app.config';
 
 bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));
+
+function setFontSize() {
+  let designWidth = 1366; // 设计稿的宽度，根据实际项目调整
+  let designHeight = 768; // 设计稿的高度，根据实际项目调整
+  var fontSize =
+    document.documentElement.clientWidth / document.documentElement.clientHeight < designWidth / designHeight
+      ? (document.documentElement.clientWidth / designWidth) * 12
+      : (document.documentElement.clientHeight / designHeight) * 12;
+
+  const htmlElement = document.querySelector('html');
+  if (htmlElement !== null) {
+    htmlElement.style.fontSize = `${fontSize}px`;
+  }
+}
+
+setFontSize(); // 初始化字体大小
+window.onresize = setFontSize; // 窗口大小改变时重新设置字体大小

src/styles.less

@@ -9,6 +9,10 @@
 @import 'ag-grid-community/styles/ag-theme-material.css';
 @import 'ag-grid-community/styles/ag-theme-quartz.css';
 
+/* src/styles.css */
+html {
+  font-size: calc(16px + (100vw - 320px) / 800);
+}
 
 .dis-flex {
   display: flex;

src/styles/mixins.scss

@@ -0,0 +1,7 @@
+// src/styles/mixins.scss
+$design_width: 1920; // 设计稿的宽度，根据实际项目调整
+$design_font_size: 12; // 基准字体大小，根据实际项目调整
+
+@function px2rem($px) {
+  @return ($px / $design_font_size) * 1rem;
+}

src/styles/variables.less

@@ -0,0 +1,10 @@
+// src/styles/variables.less
+@design_width: 1920; // 设计稿的宽度，根据实际项目调整
+@design_font_size: 12; // 基准字体大小，根据实际项目调整
+
+.px2rem(@px) {
+  @result: (@px / @design_font_size) * 1rem;
+}
+.px2rem(@px, @property) {
+    @{property}: (@px / @design_font_size) * 1rem;
+  }