Add：完成数据大屏毛重计量的左边界面初版；

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

@@ -0,0 +1,13 @@
+<ag-grid-angular
+  #myGrid
+  [class]="gridThemeClass"
+  [pagination]="true"
+  [suppressPaginationPanel]="true"
+  [suppressPaginationPanel]="true"
+  [suppressScrollOnNewData]="true"
+  [paginationPageSize]="pageSize"
+  [defaultColDef]="defaultColDef"
+  [rowData]="rowData"
+  [columnDefs]="columnDefs"
+  [gridOptions]="gridOptions"
+/>

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

@@ -0,0 +1,62 @@
+import { Component, OnInit, ViewChild, Input } from '@angular/core';
+import { AgGridAngular } from 'ag-grid-angular';
+import { ColDef, GridApi } from 'ag-grid-community';
+import { NzPaginationModule } from 'ng-zorro-antd/pagination';
+@Component({
+  selector: 'lj-car-ag-grid-component',
+  imports: [AgGridAngular, NzPaginationModule],
+  standalone: true,
+  templateUrl: './lj-car-ag-grid-component.component.html',
+  styleUrls: ['./pagination-style/pagination.less']
+})
+export class LjCarAgGridComponentComponent implements OnInit {
+  @ViewChild('myGrid') grid!: AgGridAngular;
+  public gridOptions: any = {
+    headerHeight: 0
+  };
+
+  /**每页数 */
+  public pageSize!: number;
+  /**当前页 */
+  public pageIndex!: number;
+  /**总数 */
+  public pageRowTotal!: number;
+  //默认列配置
+  @Input() defaultColDef: ColDef = {
+    width: 130,
+    editable: false
+  };
+  /** 列头 */
+  @Input() columnDefs: ColDef[] = [];
+  /**行数据 */
+  @Input() rowData: any[] = [];
+  /**表格主题 */
+  @Input() gridThemeClass: string = 'ag-theme-quartz';
+  @Input() paginationThemeClass: string = 'ag-theme-quartz';
+  /** 构造函数 */
+  constructor() {}
+  /**初始化 */
+  ngOnInit() {
+    console.log('-----表格初始化-----');
+    this.pageSize = 10;
+    this.pageIndex = 1;
+    this.pageRowTotal = this.rowData.length;
+  }
+  //每页数
+  nzPageSizeChange(_pageSize: any) {
+    this.pageSize = _pageSize;
+  }
+  //当前页
+  nzPageIndexChange(_pageIndex: any) {
+    console.log(`nzPageIndexChange${_pageIndex}`);
+    if (this.grid.api) {
+      if (_pageIndex == 1) {
+        /**去首页 */
+        this.grid.api.paginationGoToFirstPage();
+      } else {
+        /** 页面跳转 */
+        this.grid.api.paginationGoToPage(_pageIndex);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+/* Core Grid CSS */
+@import 'ag-grid-community/styles/ag-grid.css';
+@import 'ag-grid-community/styles/ag-theme-quartz.css';

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

@@ -0,0 +1,94 @@
+/* 分页器 */
+.grid-pagination {
+    display: flex;
+    justify-content: space-between;
+    height: 32px;
+}
+
+// 第几条 文字
+.grid-pagination ::ng-deep .ant-select-selection-item,
+.ant-select-selector {
+    color: #00eff8;
+    border-color: #00eff8;
+    border-width: 2px;
+}
+
+//总数
+.grid-pagination ::ng-deep .page-total-style {
+    font-size: medium;
+    font-weight: 700;
+    color: #00eff8;
+}
+
+//页面尺寸选中
+::ng-deep .ant-select-item-option {
+    color: #00eff8 !important;
+}
+
+//页面尺寸每项
+::ng-deep .ant-select-item-option-active div {
+    font-weight: 800 !important;
+    color: #00eff8 !important;
+}
+
+//箭头  颜色
+.grid-pagination::ng-deep .anticon {
+    color: #00eff8;
+}
+
+//页面尺寸选择
+.grid-pagination ::ng-deep .ant-select-selector {
+    color: #00eff8;
+    border-color: #00eff8;
+    border-width: 2px;
+
+}
+
+//前 link
+.grid-pagination ::ng-deep .ant-pagination-prev .ant-pagination-item-link {
+    color: #00eff8;
+    border-color: transparent;
+}
+
+//中间的  item
+.grid-pagination ::ng-deep .ant-pagination-item {
+    color: #00eff8;
+    border-color: #00eff8;
+    border-width: 2px;
+}
+
+// disable 样式
+.grid-pagination ::ng-deep .ant-pagination-item a {
+    color: #00eff8 !important;
+}
+
+.grid-pagination ::ng-deep .ant-pagination-item-active a {
+    color: black !important;
+
+}
+
+//前后箭头
+.grid-pagination ::ng-deep .ant-pagination-next button,
+
+.ant-pagination-prev button {
+    color: #00eff8;
+    border-color: transparent;
+}
+
+//鼠标放上去的样式
+.grid-pagination ::ng-deep .ant-pagination-item-active:focus-visible,
+.ant-pagination-item-active:hover,
+
+.ant-pagination-next:hover button,
+.ant-pagination-prev:hover button {
+    border-color: #00eff8;
+    border-width: 2px;
+}
+
+//选中样式
+.grid-pagination ::ng-deep .ant-pagination-item-active {
+    font-weight: 500;
+    background-color: #00eff8;
+    border-color: #00eff8;
+    border-width: 2px;
+}

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

@@ -0,0 +1,104 @@
+.card-top-content {
+    display: grid;
+    grid-template-columns: auto auto;
+    align-items: center;
+    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: 82px;
+    height: 40px;
+    font-size: 26px;
+    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;
+    margin-bottom: 0.5rem;
+    //height: 18rem;
+    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;
+        }
+    }
+}

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

@@ -0,0 +1,11 @@
+<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"
+  />
+
+  <ng-content />
+</div>

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

@@ -0,0 +1,164 @@
+import { Component, Input, 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 { SHARED_IMPORTS } from '@shared';
+import { AgGridAngular } from 'ag-grid-angular';
+import { ColDef, GridApi } from 'ag-grid-community';
+
+import { LjCarAgGridComponentComponent } from './lj-car-ag-grid-component/lj-car-ag-grid-component.component';
+import { DataVCardComponent } from '../card/card.component';
+import { LJDataVCardComponent } from '../lj-card/lj-card.component';
+import { TableColumn, DataVLjTableComponent } from '../lj-table/lj-table.component';
+import { GridButtonValueRenderer } from '../workstation/grid-button/grid-button';
+import { LjAgGridComponentComponent } from '../workstation/lj-ag-grid-component/lj-ag-grid-component.component';
+
+@Component({
+  selector: 'app-data-v-lj-car-info-table',
+  standalone: true,
+  templateUrl: './lj-car-info-table.component.html',
+  styleUrl: './lj-car-info-table.component.css',
+  imports: [
+    ...SHARED_IMPORTS,
+    AgGridAngular,
+    DataVCardComponent,
+    DataVLjTableComponent,
+    LjAgGridComponentComponent,
+
+    LjCarAgGridComponentComponent
+  ]
+})
+export class DataVLjCarInfoTableComponent implements OnInit {
+  public gridThemedClass: string = 'ag-theme-quartz ag-theme-datav';
+  [x: string]: any;
+  @ViewChild('myGrid') grid!: AgGridAngular;
+  @Input() title: string = '';
+  public pageSize!: number;
+  /**当前页 */
+  public pageIndex!: number;
+  /**总数 */
+  public pageRowTotal!: number;
+
+  //默认列配置
+  @Input() defaultColDef: ColDef = {
+    width: 130,
+    editable: false,
+    headerClass: 'ag-header-center',
+
+    cellStyle: { 'font-weight': 'bold', textAlign: 'center', 'justify-content': 'center', 'line-height': '38px' }
+  };
+  /** 列头 */
+  @Input() columnDefs: ColDef[] = [];
+  /**行数据 */
+  @Input() rowData: any[] = [];
+  /**表格主题 */
+  @Input() gridThemeClass: string = 'ag-theme-quartz';
+  @Input() paginationThemeClass: string = 'ag-theme-quartz';
+  /** 构造函数 */
+  constructor() {}
+  // 在父组件的类中
+  tableColumns: TableColumn[] = [
+    { key: 'sort', title: '序号' },
+    { key: 'time', title: '时间' },
+    { key: 'option', title: '操作' },
+    { key: 'optionDesc', title: '操作描述' },
+    { key: 'optionMan', title: '操作人员' },
+    { key: 'mark', title: '备注' },
+    { key: 'edit', title: '编辑' }
+
+    // 其他列配置...
+  ];
+
+  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, 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: '操作'
+      });
+    }
+    console.log('-----表格初始化-----');
+    // this.title = '';
+    this.pageSize = 5;
+    this.pageIndex = 1;
+    this.pageRowTotal = this.rowData.length;
+  }
+  //每页数
+  nzPageSizeChange(_pageSize: any) {
+    this.pageSize = _pageSize;
+  }
+  //当前页
+  nzPageIndexChange(_pageIndex: any) {
+    console.log(`nzPageIndexChange${_pageIndex}`);
+    if (this.grid.api) {
+      if (_pageIndex == 1) {
+        /**去首页 */
+        this.grid.api.paginationGoToFirstPage();
+      } else {
+        /** 页面跳转 */
+        this.grid.api.paginationGoToPage(_pageIndex);
+      }
+    }
+  }
+}

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

@@ -1,11 +1,13 @@
 <div class="card-content">
-  <!-- <img src="assets/dashboard/dashboard_card_bg.jpg" style="width: 100%;" /> -->
   <div class="card-top-content">
     <div class="card-content-title">
       <div class="card-content-l">{{ title }}</div>
     </div>
-    <span nz-icon nzType="setting" nzTheme="outline"></span
-  ></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>

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

@@ -1,27 +1,35 @@
-.card-content-title {
-    display: flex;
-    align-items: center; /* 确保子元素垂直居中 */
-    justify-content: space-between;
-    width:fit-content;
-    height:fit-content; 
-    padding: 5px 20px 0; /* 文本的内边距 */ 
-    font-size: 16px; /* 根据需要调整字体大小
-    font-weight: bold; /* 字体加粗 */
-    color: #29b6f6; /* 字体颜色 */
-    text-align: center; /* 文本居中对齐 */
-    background-color: #19426E; /* 设置背景颜色为深蓝色 */
-    border: 1px solid #1f6f97; /* 设置边框颜色 */
-    border-radius: 10px 10px 0 0; /* 上面是圆角，下面是直角 */
-    box-shadow: inset 0 0 10px #1f6f97; /* 内阴影效果 */
-  }
-
-  
-.card-top-content{
+.card-top-content {
     display: grid;
     grid-template-columns: auto auto;
     align-items: center;
     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: 82px;
+    height: 40px;
+    font-size: 26px;
+    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 {
@@ -29,21 +37,59 @@
     margin-bottom: 0.5rem;
     //height: 18rem;
     padding: 1rem 1.5rem;
+    padding: 1rem;
+
+    /* 调整内边距以适应内容 */
     //position: relative;
     background-image: url('../../../../assets/dashboard/dashboard_card_bg.jpg');
-    background-repeat: no-repeat; /* 防止背景图片重复 */
+    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;
-        font-size: 18px;
+        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;

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

@@ -13,6 +13,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
 })
 export class LJDataVCardComponent {
   @Input() showSetting = false;
+  @Input() showEditButton: boolean = false;
   @Input()
   optionsList: Array<{ label: string; checked: boolean }> = [];
   // 定义输出事件

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

@@ -0,0 +1,24 @@
+/* Core Grid CSS */
+@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; /* 内边距 */
+    font-size: 16px; /* 字体大小 */
+    color: white; /* 文字颜色 */
+    background-color: rgb(0 0 0 / 50%); /* 半透明黑色背景 */
+    border-radius: 10px 10px 0 0; /* 上方圆角 */
+  }
+
+  .my-grid-font {
+    font-size: 16px;
+    font-weight: bold;
+  }
+
+  .ag-header-center .ag-header-group-cell-label, 
+.ag-header-center .ag-header-cell-label {
+    display: grid;
+    width: 100%;
+    text-align: center;
+}

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

@@ -0,0 +1,6 @@
+<lj-data-v-card 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>

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

@@ -0,0 +1,50 @@
+import { Component, OnInit, ViewChild, Input } from '@angular/core';
+import { AgGridAngular } from 'ag-grid-angular';
+import { ColDef, GridApi } from 'ag-grid-community';
+import { NzPaginationModule } from 'ng-zorro-antd/pagination';
+
+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';
+
+@Component({
+  selector: 'app-data-v-lj-dashboard',
+  standalone: true,
+  templateUrl: './lj-dashboard.component.html',
+  imports: [AgGridAngular, NzPaginationModule, LJDataVCardComponent, DataVLjTableComponent, DataVLjTextDashboardComponent]
+})
+export class DataVLjDashboardComponent implements OnInit {
+  [x: string]: any;
+  @ViewChild('myGrid') grid!: AgGridAngular;
+  @Input() title: string = '';
+
+  public showSetting = true;
+  /**每页数 */
+  public pageSize!: number;
+  /**当前页 */
+  public pageIndex!: number;
+  /**总数 */
+  public pageRowTotal!: number;
+
+  //默认列配置
+  @Input() defaultColDef: ColDef = {
+    width: 130,
+    editable: false,
+    headerClass: 'ag-header-center',
+
+    cellStyle: { 'font-weight': 'bold', textAlign: 'center', 'justify-content': 'center', 'line-height': '38px' }
+  };
+  /** 列头 */
+  @Input() columnDefs: ColDef[] = [];
+  /**行数据 */
+  @Input() rowData: any[] = [];
+  /**表格主题 */
+  @Input() gridThemeClass: string = 'ag-theme-quartz';
+  @Input() paginationThemeClass: string = 'ag-theme-quartz';
+  /** 构造函数 */
+  constructor() {}
+  // 在父组件的类中
+
+  /**初始化 */
+  ngOnInit() {}
+}

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

@@ -0,0 +1,32 @@
+
+  .chart-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+  
+  .chart-text {
+    margin: 0;
+    font-size: 28px;
+    color: rgb(126 221 243 / 100%);
+
+  }
+  
+ 
+  .chart-button {
+    width: 175px;
+height: 51px;
+    margin: 5px;
+    font-size: 28px;
+    line-height: 22px;
+    color: rgb(255 0 0 / 100%);
+    text-align: center;
+    background-color: rgb(6 70 120 / 0%);
+    background-image: url('/assets/dashboardButtonBg.png');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain; /* 或者可以使用 'contain' 根据你的需要 */
+    border-width: 0;
+  }
+  

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

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

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

@@ -0,0 +1,55 @@
+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 * as echarts from 'echarts';
+@Component({
+  selector: 'app-data-v-lj-text-dashboard',
+  standalone: true,
+  imports: [...SHARED_IMPORTS, CommonModule],
+  templateUrl: './lj-text-dashboard.component.html',
+  styleUrl: './lj-text-dashboard.component.css'
+})
+export class DataVLjTextDashboardComponent implements OnInit {
+  @Input() chartId: string = '';
+  @Input() text: string = '';
+  ngOnInit(): void {
+    // 使用 setTimeout 确保视图已经初始化
+    setTimeout(() => this.initCharts(), 0);
+  }
+
+  initCharts(): void {
+    console.log('初始化图表');
+    console.log(this, this.chartId);
+    console.log(this, this.chartId.toString());
+    // 获取DOM
+    const leftChart = echarts.init(document.getElementById(this.chartId)); // console.log(lineChart);
+
+    const option = {
+      tooltip: {
+        formatter: '{a} <br/>{b} : {c}%'
+      },
+      series: [
+        {
+          name: 'Pressure',
+          type: 'gauge',
+          progress: {
+            show: true
+          },
+          detail: {
+            valueAnimation: true,
+            formatter: '{value}'
+          },
+          data: [
+            {
+              value: 50,
+              name: 'SCORE'
+            }
+          ]
+        }
+      ]
+    };
+
+    leftChart.setOption(option);
+  }
+}

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

@@ -56,7 +56,6 @@ export class DataVNavigationComponent implements OnInit {
     ];
     this.menuService.getMenus().subscribe((menus: Menu[]) => {
       for (let menu of menus) {
-        // console.log(menu);
         if (menu.children && menu.children.length > 0) {
           for (let tempMenu of menu.children) {
             tempMenu.childShowType = 'menu';
@@ -64,8 +63,6 @@ export class DataVNavigationComponent implements OnInit {
               // 检查 tempMenu 是否有 children 属性
               for (let tempChildMenu of tempMenu.children) {
                 tempChildMenu.childShowType = 'drop-down';
-                console.log(tempChildMenu.text);
-                console.log(tempChildMenu.children);
               }
             }
             this.menuNetDataList.push(tempMenu);

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

@@ -9,6 +9,9 @@ import { DataVT1Component } from './t1/t1.component';
 import { DataVThreejsComponent } from './threejs/threejs.component';
 import { DataVUserComponent } from './user/user.component';
 import { DataVWorkstationComponent } from './workstation/workstation.component';
+import { DataVLjDashboardComponent } from './lj-dashboard/lj-dashboard.component';
+import { DataVLjTextDashboardComponent } from './lj-text-dashboard/lj-text-dashboard.component';
+import { DataVLjCarInfoTableComponent } from './lj-car-info-table/lj-car-info-table.component';
 
 export const routes: Routes = [
   {
@@ -25,4 +28,7 @@ export const routes: Routes = [
   { path: 't1/:id', component: DataVT1Component },
   { path: 'lj-table', component: DataVLjTableComponent },
   { path: 'lj-table', component: DataVLjTableComponent }
-];
+,
+  { path: 'lj-dashboard', component: DataVLjDashboardComponent },
+  { path: 'lj-textDashboard', component: DataVLjTextDashboardComponent },
+  { path: 'ljCarInfoTable', component: DataVLjCarInfoTableComponent }];

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

@@ -1,21 +1,21 @@
+import { CommonModule } from '@angular/common';
 import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { STColumn, STComponent } from '@delon/abc/st';
 import { SFSchema } from '@delon/form';
-import { CommonModule } from '@angular/common';
-import { ModalHelper, _HttpClient } from '@delon/theme';
+import { ModalHelper, _HttpClient, TitleService } from '@delon/theme';
 import { SHARED_IMPORTS } from '@shared';
-import { DataVCardComponent } from '../card/card.component';
-import * as echarts from 'echarts';
 import { AgGridAngular } from 'ag-grid-angular';
-import { DataVTitleComponent } from '../title/title.component';
 import { ColDef } from 'ag-grid-community'; // Column Definition Type Interface
-import { NzProgressModule } from 'ng-zorro-antd/progress';
+import * as echarts from 'echarts';
 import { NzBadgeModule } from 'ng-zorro-antd/badge';
-import { Subscription, finalize } from 'rxjs';
+import { NzListModule } from 'ng-zorro-antd/list';
+import { NzProgressModule } from 'ng-zorro-antd/progress';
 import { IMqttMessage, MqttService } from 'ngx-mqtt';
+import { Subscription, finalize } from 'rxjs';
+
 import { ChartComponentComponent } from './chart-component/chart-component.component';
-import { NzListModule } from 'ng-zorro-antd/list';
-import { TitleService } from '@delon/theme';
+import { DataVCardComponent } from '../card/card.component';
+import { DataVTitleComponent } from '../title/title.component';
 
 @Component({
   selector: 'app-data-v-s1',
@@ -78,7 +78,7 @@ export class DataVS1Component implements OnInit {
       }
     ]
   };
-  handleCheckedItems(checkedItems: { label: string; checked: boolean }[]) {
+  handleCheckedItems(checkedItems: Array<{ label: string; checked: boolean }>) {
     console.log('当前选中的项目:', checkedItems);
   }
   chart_options = {};
@@ -113,20 +113,20 @@ export class DataVS1Component implements OnInit {
     this.getServerConfig();
     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,
+        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,
+        dqjd: `节点${i}`,
+        sjwcsj: `2024-1-${i} 13:38:${i * 27}`,
         bjmc: '报警5',
         bjms: '报警描述5',
-        bjsj: '2024-1-' + i + ' 13:38:' + i * 12,
+        bjsj: `2024-1-${i} 13:38:${i * 12}`,
         gzyy: '-',
         clff: '-',
-        tzsj: '2024-1-' + i + ' 13:38:' + i * 19,
+        tzsj: `2024-1-${i} 13:38:${i * 19}`,
         zycd: '一般',
         tzmc: '系统提示',
         tznr: '账户登录',
@@ -140,7 +140,7 @@ export class DataVS1Component implements OnInit {
     var dataCount = 100;
     for (var i = 0; i < dataCount; i++) {
       var val = Math.random() * 1000;
-      categoryData.push('category' + i);
+      categoryData.push(`category${i}`);
       errorData.push([i, echarts.number.round(Math.max(0, val - Math.random() * 100)), echarts.number.round(val + Math.random() * 80)]);
       barData.push(echarts.number.round(val, 2));
     }
@@ -217,7 +217,7 @@ export class DataVS1Component implements OnInit {
             offsetCenter: [0, '-5%'],
             valueAnimation: true,
             formatter: function (value: any) {
-              return Math.round(value * 100) + '';
+              return `${Math.round(value * 100)}`;
             },
             color: 'inherit'
           },
@@ -303,7 +303,7 @@ export class DataVS1Component implements OnInit {
             offsetCenter: [0, '-5%'],
             valueAnimation: true,
             formatter: function (value: any) {
-              return Math.round(value * 100) + '';
+              return `${Math.round(value * 100)}`;
             },
             color: 'inherit'
           },

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

@@ -1,39 +1,55 @@
-<div nz-row [nzGutter]="[12, 12]">
-  <lj-app-ag-grid-component
-    style="width: 50%"
-    title="待办任务"
-    [defaultColDef]="defaultColDef"
-    [rowData]="rowData"
-    [columnDefs]="colDefs1"
-    [gridThemeClass]="gridThemedClass"
-  />
-
-  <!-- </data-v-card> -->
-  <data-v-card nz-col nzSpan="24" nzXs="24" nzSm="24" nzMd="12" nzLg="12" nzXl="12" nzXXl="12" title="已办任务">
-    <app-ag-grid-component
-      style="width: 100%"
+<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%" />
+    <lj-app-ag-grid-component
+      style="width: 80%"
+      title="运行信息"
       [defaultColDef]="defaultColDef"
       [rowData]="rowData"
-      [columnDefs]="colDefs2"
-      gridThemeClass="ag-theme-quartz ag-theme-datav"
+      [columnDefs]="colDefs1"
+      [gridThemeClass]="gridThemedClass"
     />
-  </data-v-card>
-  <data-v-card nz-col nzSpan="24" nzXs="24" nzSm="24" nzMd="12" nzLg="12" nzXl="12" nzXXl="12" title="报警信息">
-    <app-ag-grid-component
-      style="width: 100%"
+    <lj-app-ag-grid-component
+      style="width: 80%"
+      title="系统报警信息"
       [defaultColDef]="defaultColDef"
       [rowData]="rowData"
-      [columnDefs]="colDefs3"
-      gridThemeClass="ag-theme-quartz ag-theme-datav"
+      [columnDefs]="colDefs1"
+      [gridThemeClass]="gridThemedClass"
     />
-  </data-v-card>
-  <data-v-card nz-col nzSpan="24" nzXs="24" nzSm="24" nzMd="12" nzLg="12" nzXl="12" nzXXl="12" title="通知">
-    <app-ag-grid-component
+  </div>
+  <div style="display: flex; flex-direction: column">
+    <!-- </data-v-card> -->
+    <lj-app-ag-grid-component
       style="width: 100%"
+      [showPageTurning]="false"
+      [showEditButton]="true"
+      title="今日汇总"
       [defaultColDef]="defaultColDef"
       [rowData]="rowData"
-      [columnDefs]="colDefs4"
-      gridThemeClass="ag-theme-quartz ag-theme-datav"
+      [columnDefs]="colDefs2"
+      [gridThemeClass]="gridThemedClass"
     />
-  </data-v-card>
+    <app-data-v-lj-car-info-table style="width: 100%" />
+    <!--   
+
+    <data-v-card nz-col nzSpan="24" nzXs="24" nzSm="24" nzMd="12" nzLg="12" nzXl="12" nzXXl="12" title="报警信息">
+      <app-ag-grid-component
+        style="width: 30%"
+        [defaultColDef]="defaultColDef"
+        [rowData]="rowData"
+        [columnDefs]="colDefs3"
+        gridThemeClass="ag-theme-quartz ag-theme-datav"
+      />
+    </data-v-card>
+    <data-v-card nz-col nzSpan="24" nzXs="24" nzSm="24" nzMd="12" nzLg="12" nzXl="12" nzXXl="12" title="通知">
+      <app-ag-grid-component
+        style="width: 30%"
+        [defaultColDef]="defaultColDef"
+        [rowData]="rowData"
+        [columnDefs]="colDefs4"
+        gridThemeClass="ag-theme-quartz ag-theme-datav"
+      />
+    </data-v-card> -->
+  </div>
 </div>

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

@@ -3,10 +3,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 * as echarts from 'echarts';
 import { NzPaginationModule } from 'ng-zorro-antd/pagination';
 import { MqttService } from 'ngx-mqtt';
 
 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';
 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';
@@ -17,6 +20,7 @@ import { LjAgGridComponentComponent } from '../workstation/lj-ag-grid-component/
   templateUrl: './second1.component.html',
   styleUrls: ['./second1.component.less'],
   imports: [
+    DataVLjCarInfoTableComponent,
     AgGridAngular,
     AgGridComponentComponent,
     LjAgGridComponentComponent,
@@ -24,7 +28,9 @@ import { LjAgGridComponentComponent } from '../workstation/lj-ag-grid-component/
     DataVCardComponent,
     GridButtonValueRenderer,
     DataVTitleComponent,
-    ...SHARED_IMPORTS
+    DataVLjDashboardComponent,
+    ...SHARED_IMPORTS,
+    DataVLjCarInfoTableComponent
   ]
 })
 export class DataVSecond1Component implements OnInit {
@@ -33,6 +39,10 @@ export class DataVSecond1Component implements OnInit {
   private readonly elementRef = inject(ElementRef);
   private readonly titleService = inject(TitleService);
 
+  public chartDom = document.getElementById('main')!;
+  // public myChart = echarts.init(this.chartDom);
+  // public option!: EChartsOption;
+
   @ViewChild('myGrid') grid!: AgGridAngular;
   public defaultColDef: ColDef = {
     width: 170,
@@ -81,47 +91,7 @@ export class DataVSecond1Component implements OnInit {
     { headerName: '当前状态', field: 'dqzt' },
     { headerName: '当前节点', field: 'dqjd' },
     { headerName: '实际完成时间', field: 'sjwcsj', minWidth: 170, flex: 1 },
-    { headerName: '操作', autoHeight: true, width: 110, field: 'cz', cellRenderer: GridButtonValueRenderer }
-  ];
-
-  colDefs3: ColDef[] = [
-    {
-      headerName: '序号',
-      valueGetter: function (params: any) {
-        return parseInt(params.node.id) + 1;
-      },
-      width: 90,
-      unSortIcon: true,
-      field: 'xh'
-    },
-    { headerName: '报警名称', unSortIcon: true, field: 'bjmc' },
-    { headerName: '报警等级', unSortIcon: true, field: 'bjdg' },
-    { headerName: '报警描述', unSortIcon: true, field: 'bjms', minWidth: 170, flex: 1 },
-    { headerName: '报警时间', unSortIcon: true, field: 'bjsj', minWidth: 170, flex: 1 },
-    { headerName: '操作', autoHeight: true, width: 110, field: 'cz', cellRenderer: GridButtonValueRenderer },
-
-    { headerName: '故障原因', field: 'gzyy' },
-    { headerName: '处理方法', field: 'clff' },
-    { headerName: '注意事项', field: 'clff' }
-  ];
-
-  // Column Definitions: Defines the columns to be displayed.
-  colDefs4: ColDef[] = [
-    {
-      headerName: '序号',
-      valueGetter: function (params: any) {
-        return parseInt(params.node.id) + 1;
-      },
-      width: 90,
-      unSortIcon: true,
-      field: 'xh'
-    },
-    { headerName: '通知时间', unSortIcon: true, field: 'tzsj', minWidth: 170, flex: 1 },
-    { headerName: '重要程度', unSortIcon: true, field: 'zycd' },
-    { headerName: '通知名称', unSortIcon: true, field: 'tzmc' },
-    { headerName: '通知内容', unSortIcon: true, field: 'tznr', minWidth: 170, flex: 1 },
-    { headerName: '附件', field: 'fj' },
-    { headerName: '操作', autoHeight: true, width: 110, field: 'cz', cellRenderer: GridButtonValueRenderer }
+    { headerName: '操作', autoHeaderHeight: true, width: 110, field: 'cz', cellRenderer: GridButtonValueRenderer }
   ];
 
   client: any;
@@ -130,6 +100,37 @@ export class DataVSecond1Component implements OnInit {
     this.client = _mqttService;
   }
 
+  initCharts(): void {
+    // 获取DOM
+    const lineChart = echarts.init(document.getElementById('lineChart')); // console.log(lineChart);
+    const option = {
+      tooltip: {
+        formatter: '{a} <br/>{b} : {c}%'
+      },
+      series: [
+        {
+          name: 'Pressure',
+          type: 'gauge',
+          progress: {
+            show: true
+          },
+          detail: {
+            valueAnimation: true,
+            formatter: '{value}'
+          },
+          data: [
+            {
+              value: 50,
+              name: 'SCORE'
+            }
+          ]
+        }
+      ]
+    };
+
+    lineChart.setOption(option);
+  }
+
   ngOnInit(): void {
     this.titleService.setTitle('我的工作站');
 
@@ -156,6 +157,8 @@ export class DataVSecond1Component implements OnInit {
         cz: '操作'
       });
     }
+
+    this.initCharts();
   }
 
   ngAfterViewInit(): void {

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

@@ -1,7 +1,20 @@
 <!-- <label class="custom-label">Your Label</label> -->
-<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-card
+  [showEditButton]="showEditButton"
+  [showSetting]="showSetting"
+  nz-col
+  nzSpan="24"
+  nzXs="24"
+  nzSm="24"
+  nzMd="12"
+  nzLg="12"
+  nzXl="12"
+  nzXXl="12"
+  title="{{ title }}"
+>
   <ag-grid-angular
     #myGrid
+    style="min-width: 500px"
     [class]="gridThemeClass"
     [pagination]="true"
     [suppressPaginationPanel]="true"
@@ -16,7 +29,8 @@
   <!-- <app-data-v-lj-table [columns]="tableColumns" [data]="tableData" /> -->
   <br />
   <!-- 分页 -->
-  <div class="grid-pagination">
+
+  <div [hidden]="!showPageTurning" class="grid-pagination">
     <div class="page-total-style">共 {{ pageRowTotal }} 项数据</div>
     <nz-pagination
       [nzPageIndex]="pageIndex"

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

@@ -1,3 +1,4 @@
+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';
@@ -10,14 +11,18 @@ import { TableColumn, DataVLjTableComponent } from '../../lj-table/lj-table.comp
   standalone: true,
   templateUrl: './lj-ag-grid-component.component.html',
   styleUrls: ['./pagination-style/pagination.less'],
-  imports: [AgGridAngular, NzPaginationModule, LJDataVCardComponent, DataVLjTableComponent]
+  imports: [CommonModule, AgGridAngular, NzPaginationModule, LJDataVCardComponent, DataVLjTableComponent]
 })
 export class LjAgGridComponentComponent implements OnInit {
   [x: string]: any;
   @ViewChild('myGrid') grid!: AgGridAngular;
   @Input() title: string = '';
 
-  public showSetting = true;
+  @Input() showEditButton: boolean = false;
+
+  @Input() showSetting: boolean = false;
+
+  @Input() showPageTurning: boolean = true;
   /**每页数 */
   public pageSize!: number;
   /**当前页 */
@@ -81,6 +86,12 @@ export class LjAgGridComponentComponent implements OnInit {
   ];
   /**初始化 */
   ngOnInit() {
+    if (this.showPageTurning) {
+      console.log('showPageTurning:', this.showPageTurning);
+    } else {
+      console.log('showPageTurning has not true');
+    }
+
     if (this.title) {
       console.log('Title has been passed:', this.title);
     } else {
@@ -88,7 +99,7 @@ export class LjAgGridComponentComponent implements OnInit {
     }
     console.log('-----表格初始化-----');
     // this.title = '';
-    this.pageSize = 10;
+    this.pageSize = 5;
     this.pageIndex = 1;
     this.pageRowTotal = this.rowData.length;
   }

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

@@ -14,7 +14,7 @@
     style="width: 50%"
     [title]="'已办任务'"
     [rowData]="rowData"
-    [columnDefs]="colDefs1"
+    [columnDefs]="colDefs2"
     [gridThemeClass]="gridThemedClass"
   />