备份

package-lock.json

@@ -31,6 +31,7 @@
         "@types/signalr": "^2.4.3",
         "@types/three": "^0.162.0",
         "ag-grid-angular": "^31.0.2",
+        "autofit.js": "^3.1.0",
         "echarts": "^5.5.0",
         "moment": "^2.30.1",
         "mqtt": "^5.3.6",
@@ -5615,6 +5616,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/autofit.js": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/autofit.js/-/autofit.js-3.1.0.tgz",
+      "integrity": "sha512-zX/2VbpxdDcgDDCT1A0psuF8Phs8QbmFXstvLkqrrOcv33LQttCh2J6GVs84585+LfMAfacemxRXIidrFXu02g=="
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.16",
       "resolved": "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.16.tgz",

package.json

@@ -44,6 +44,7 @@
     "@types/signalr": "^2.4.3",
     "@types/three": "^0.162.0",
     "ag-grid-angular": "^31.0.2",
+    "autofit.js": "^3.1.0",
     "echarts": "^5.5.0",
     "moment": "^2.30.1",
     "mqtt": "^5.3.6",

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

@@ -15,8 +15,8 @@
   
  
   .chart-button {
-    width: 175px;
-height: 51px;
+    width: 17rem;
+    height: 5;
     margin: 5px;
     font-size: 28px;
     line-height: 22px;
@@ -29,4 +29,10 @@ height: 51px;
     background-size: contain; /* 或者可以使用 'contain' 根据你的需要 */
     border-width: 0;
   }
+  
+  .chart-container {
+    width: 10rem;
+    height: 10rem;
+  }
+  
   

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

@@ -1,6 +1,6 @@
 <div class="chart-card">
   <div class="chart-container">
-    <div *ngIf="chartId" id="{{ chartId }}" style="width: 15rem; height: 15rem"></div>
+    <div *ngIf="chartId" id="{{ chartId }}" class="chart-container"></div>
   </div>
   <p class="chart-text">{{ text }}</p>
   <button class="chart-button">1#重磅</button>

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

@@ -2,7 +2,9 @@ import { CommonModule } from '@angular/common';
 import { Component, Input, OnInit, ViewChild, inject } from '@angular/core';
 import { ModalHelper, _HttpClient } from '@delon/theme';
 import { SHARED_IMPORTS } from '@shared';
+import autofit from 'autofit.js';
 import * as echarts from 'echarts';
+
 @Component({
   selector: 'app-data-v-lj-text-dashboard',
   standalone: true,
@@ -16,6 +18,13 @@ export class DataVLjTextDashboardComponent implements OnInit {
   ngOnInit(): void {
     // 使用 setTimeout 确保视图已经初始化
     setTimeout(() => this.initCharts(), 0);
+    // autofit.init();
+    // autofit.init({
+    //   dh: 1080,
+    //   dw: 1920,
+    //   el: 'body',
+    //   resize: true
+    // });
   }
 
   initCharts(): void {

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

@@ -1,5 +1,5 @@
 <div nz-row [nzGutter]="[12, 12]" style="display: flex; justify-content: space-between">
-  <div style="display: flex; flex-direction: column; width: 40%">
+  <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%"
@@ -18,10 +18,42 @@
       [gridThemeClass]="gridThemedClass"
     />
   </div>
-  <div style="display: flex; flex-direction: column">
+
+  <div style="display: flex; flex-direction: column; width: 43%">
+    <!-- button-component.component.html -->
+    <div class="button-container">
+      <button class="lock-button">
+        <img class="logo" src="./assets/lock.svg" />
+      </button>
+      <button class="standard-button">概要</button>
+      <button class="standard-button">详情</button>
+      <!-- <button class="standard-button">操作</button> -->
+      <button class="standard-button">审计</button>
+      <button class="standard-button">校磅</button>
+    </div>
+    <div class="car-status-container">
+      <div class="row" *ngFor="let item of items; let i = index">
+        <div class="image-container">
+          <img src="http://openwrt.waitclopeo.com:3004/auseft/car0.jpg" alt="Car Image" />
+        </div>
+        <div class="image-container">
+          <img
+            src="https://img.jianbihua.com/sites/default/files/styles/photo640x425logofull/public/images/2019-11/20191115110304_360855.jpg"
+            alt="Long Image"
+          />
+        </div>
+        <div class="info-container">
+          <div class="info-button">车牌号: 苏E8888</div>
+          <div class="info-button">卡车种类:重型火卡</div>
+          <div class="info-button">重量:30吨</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div style="display: flex; flex-direction: column; width: 30%">
     <!-- </data-v-card> -->
     <lj-app-ag-grid-component
-      style="width: 100%"
       [showPageTurning]="false"
       [showEditButton]="true"
       title="今日汇总"

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

@@ -169,4 +169,98 @@
 /* 设置横向滚动条滑块的颜色 */
 ::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb {
     background-color: #00eff8;
-}
+}
+
+/* button-component.component.css */
+.button-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    // background-color: #2c3e50; // 你可以根据需要调整颜色
+  }
+  
+  .lock-button, .standard-button, .highlighted-button {
+    margin: 5px;
+    padding: 10px 15px;
+    font-size: 20px;
+    color: white;
+    border: none;
+  }
+  
+  .lock-button {
+    background-color: transparent;
+  }
+  
+  .standard-button {
+    font-size: 20px;
+    font-weight: bold;
+    line-height: 20px;
+    color: rgb(107 236 246 / 100%);
+    text-align: center;
+    background-color: rgb(33 48 105 / 100%);
+    border-radius: 3px;
+  }
+  
+  .highlighted-button {
+    background-color: #3498db; // 你可以根据需要调整颜色
+    border-radius: 10px;
+  }
+  
+  .fa-lock {
+    margin-right: 5px;
+  }
+
+  .logo{
+    width: 65px;
+    // height: ;
+  }
+
+  .car-status-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background-image: url("/assets/car-status-bg.png");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+  
+  .row {
+    display: flex;
+    align-items: stretch; /* 保持相同高度 */
+    justify-content: space-between; /* 子组件间平均分布 */
+    margin-bottom: 20px; /* 每行之间的间距 */
+  }
+  
+  .image-container {
+    display: flex;
+    flex: 1; /* 三个子元素均匀分布 */
+    align-items: center; /* 图片居中 */
+    justify-content: center; /* 图片居中 */
+    margin: 0 10px; /* 子组件之间的间距 */
+  }
+  
+  .image-container img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain; /* 保持图片的宽高比 */
+  }
+  
+  .info-container {
+    display: flex;
+    flex: 1; /* 同样的，让信息容器也占据等同的空间 */
+    flex-direction: column;
+    justify-content: space-around;
+    margin: 0 10px;
+  }
+  
+  .info-button {
+    margin: 5px 0;
+    padding: 10px;
+    color: white;
+    text-align: center;
+    background-color: #007bff;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+  }
+  

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

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
 import { ModalHelper, TitleService, _HttpClient } from '@delon/theme';
 import { SHARED_IMPORTS } from '@shared';
@@ -29,6 +30,7 @@ import { LjAgGridComponentComponent } from '../workstation/lj-ag-grid-component/
     GridButtonValueRenderer,
     DataVTitleComponent,
     DataVLjDashboardComponent,
+    CommonModule,
     ...SHARED_IMPORTS,
     DataVLjCarInfoTableComponent
   ]
@@ -38,6 +40,7 @@ export class DataVSecond1Component implements OnInit {
   private readonly modal = inject(ModalHelper);
   private readonly elementRef = inject(ElementRef);
   private readonly titleService = inject(TitleService);
+  public items = [1, 2, 3];
 
   public chartDom = document.getElementById('main')!;
   // public myChart = echarts.init(this.chartDom);
@@ -55,41 +58,17 @@ export class DataVSecond1Component implements OnInit {
   rowData: object[] = [];
 
   colDefs1: ColDef[] = [
-    {
-      headerName: '序号',
-      valueGetter: function (params: any) {
-        return parseInt(params.node.id) + 1;
-      },
-      width: 90,
-      // flex: 2,
-      sortable: true,
-      unSortIcon: true,
-      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, autoHeaderHeight: true, field: 'cz', cellRenderer: GridButtonValueRenderer }
   ];
 
   colDefs2: ColDef[] = [
-    {
-      headerName: '序号',
-      valueGetter: function (params: any) {
-        return parseInt(params.node.id) + 1;
-      },
-      width: 90,
-      unSortIcon: true,
-      field: 'xh'
-    },
-    { headerName: '任务名称', unSortIcon: true, field: 'rwmc' },
     { headerName: '任务描述', unSortIcon: true, field: 'rwms', minWidth: 170, flex: 1 },
     { headerName: '开始时间', unSortIcon: true, field: 'kssj', minWidth: 170, flex: 1 },
-    { headerName: '当前状态', field: 'dqzt' },
-    { headerName: '当前节点', field: 'dqjd' },
+
     { headerName: '实际完成时间', field: 'sjwcsj', minWidth: 170, flex: 1 },
     { headerName: '操作', autoHeaderHeight: true, width: 110, field: 'cz', cellRenderer: GridButtonValueRenderer }
   ];

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

@@ -12,11 +12,11 @@
   nzXXl="12"
   title="{{ title }}"
 >
+  <!-- style="min-width: 500px" -->
   <ag-grid-angular
     #myGrid
-    style="min-width: 500px"
     [class]="gridThemeClass"
-    [pagination]="true"
+    (gridReady)="onGridReady($event)"
     [suppressPaginationPanel]="true"
     [suppressPaginationPanel]="true"
     [suppressScrollOnNewData]="true"
@@ -30,14 +30,14 @@
   <!-- 分页 -->
 
   <div [hidden]="!showPageTurning" class="grid-pagination">
-    <div class="page-total-style">共1222 {{ pageRowTotal }} 项数据</div>
+    <div class="page-total-style">共 {{ pageRowTotal }} 项数据</div>
     <nz-pagination
       [nzPageIndex]="pageIndex"
       [nzPageSize]="pageSize"
       [nzTotal]="pageRowTotal"
+      [className]="paginationThemeClass"
       (nzPageSizeChange)="nzPageSizeChange($event)"
       (nzPageIndexChange)="nzPageIndexChange($event)"
-      [className]="paginationThemeClass"
       nzShowSizeChanger
     />
   </div>

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

@@ -2,6 +2,8 @@
 @import 'ag-grid-community/styles/ag-grid.css';
 @import 'ag-grid-community/styles/ag-theme-quartz.css';
 
+
+
 .custom-label {
     display: inline-block;
     padding: 10px 20px; /* 内边距 */
@@ -32,3 +34,8 @@
   width: 100%;
   height: 100%;
 }
+
+/* stylelint-disable-next-line selector-class-pattern */
+.paginationThemeClass{
+  width: 100%;
+}

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

@@ -24,7 +24,8 @@ export class LjAgGridComponentComponent implements OnInit {
   // };
 
   gridOptions: GridOptions = {
-    headerHeight: 0
+    headerHeight: 0,
+    suppressHorizontalScroll: false
 
     // columnDefs="columnDefs"
   };
@@ -120,6 +121,13 @@ export class LjAgGridComponentComponent implements OnInit {
     };
   }
   //每页数
+  onGridReady(params: any) {
+    console.log('onGridReady');
+    console.log(params);
+    setTimeout(() => {
+      params.api.sizeColumnsToFit();
+    }, 100);
+  }
   nzPageSizeChange(_pageSize: any) {
     this.pageSize = _pageSize;
   }

src/assets/lock.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1711695655771" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2980" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M385.150849 385.662338l-128.895105 0 0-150.377622q0-49.102897 19.436563-91.556444t53.706294-74.677323 80.815185-50.637363 101.786214-18.413586q49.102897 0 94.625375 18.413586t80.815185 50.637363 56.263736 74.677323 20.971029 91.556444l0 150.377622-123.78022 0 0-121.734266q0-64.447552-35.804196-99.74026t-97.182817-35.292707q-55.240759 0-88.999001 35.292707t-33.758242 99.74026l0 121.734266zM826.053946 447.040959q27.62038 0 47.568432 19.948052t19.948052 47.568432l0 317.122877q0 27.62038-9.718282 51.66034t-26.597403 41.942058-39.896104 28.131868-50.637363 10.22977l-516.603397 0q-27.62038 0-50.125874-10.22977t-38.361638-27.108891-24.551449-39.384615-8.695305-48.07992l0-324.283716q0-27.62038 19.436563-47.568432t47.056943-19.948052l61.378621 0 128.895105 0 255.744256 0 123.78022 0 61.378621 0z" p-id="2981" fill="#97f6fb"></path></svg>

src/assets/unLock.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1711695639298" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2740" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M768.25422 0q48.810328 0 94.061569 18.303873t80.333664 50.33565 56.436941 74.740814 21.354518 91.519364l0 150.49851-123.042701 0 0-122.025819q0-64.063555-36.099305-99.654419t-97.112214-35.590864q-54.911619 0-88.468719 35.590864t-33.5571 99.654419l0 124.059583-128.12711 0 0-152.532274q0-48.810328 19.320755-91.519364t53.386296-74.740814 80.333664-50.33565 101.179742-18.303873zM766.220457 693.513406l0 87.451837 0 47.793446q0 27.455809-9.660377 51.860973t-26.438928 41.692155-39.658391 27.455809-50.33565 10.168818l-514.542205 0q-27.455809 0-49.82721-9.660377t-38.641509-26.438928-24.913605-39.14995-8.643496-47.793446l0-323.368421q0-28.472691 19.829196-47.793446t46.268123-19.320755l629.449851 0q28.472691 0 47.793446 19.320755t19.320755 47.793446l0 179.988083z" p-id="2741" fill="#97f6fb"></path></svg>

yarn.lock

@@ -2931,6 +2931,11 @@ asynckit@^0.4.0:
   resolved "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz"
   integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
 
+autofit.js@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/autofit.js/-/autofit.js-3.1.0.tgz"
+  integrity sha512-zX/2VbpxdDcgDDCT1A0psuF8Phs8QbmFXstvLkqrrOcv33LQttCh2J6GVs84585+LfMAfacemxRXIidrFXu02g==
+
 autoprefixer@10.4.16:
   version "10.4.16"
   resolved "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.16.tgz"