提交码表高度修改

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

@@ -0,0 +1,13 @@
+<div class="card-content">
+  <div class="card-top-content">
+    <div class="card-content-title">
+      <div class="card-content-l">{{ title }}</div>
+    </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-dashboard/lj-board-title/lj-board-title.component.less

@@ -0,0 +1,104 @@
+.card-top-content {
+    display: grid;
+    grid-template-columns: auto auto;
+    align-items: start;
+    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: 72px;
+    height: 40px;
+    font-size: 24px;
+    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;
+    height: 350px;
+    margin-bottom: 0.5rem;
+    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-dashboard/lj-board-title/lj-board-title.component.ts

@@ -0,0 +1,30 @@
+// parent.component.ts
+import { CommonModule } from '@angular/common';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { SHARED_IMPORTS } from '@shared';
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+@Component({
+  selector: 'lj-data-v-board-title',
+  standalone: true,
+  templateUrl: './lj-board-title.component.html',
+  styleUrls: ['./lj-board-title.component.less'],
+  imports: [NzIconModule, CommonModule, NzDropDownModule, ...SHARED_IMPORTS]
+})
+export class LJDataVBoardTitleComponent {
+  @Input() showSetting = false;
+  @Input() showEditButton: boolean = false;
+  @Input()
+  optionsList: Array<{ label: string; checked: boolean }> = [];
+  // 定义输出事件
+  @Output() onCheckedItemsChange = new EventEmitter<Array<{ label: string; checked: boolean }>>();
+  @Input() title: string = '';
+  getCheckedItems() {
+    return this.optionsList.filter(option => option.checked);
+  }
+
+  onCheckChange() {
+    const checkedItems = this.getCheckedItems();
+    this.onCheckedItemsChange.emit(checkedItems);
+  }
+}

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

@@ -1,6 +1,6 @@
-<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-board-title nz-col nzSpan="24" nzXs="24" nzSm="24" nzMd="12" nzLg="12" nzXl="12" nzXXl="12" title="{{ title }}">
   <div style="display: flex; justify-content: center; align-items: center">
     <app-data-v-lj-text-dashboard chartId="leftChart" text="重衡系统健康度" />
     <app-data-v-lj-text-dashboard chartId="rightChart" text="重衡系统投运率" />
   </div>
-</lj-data-v-card>
+</lj-data-v-board-title>

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

@@ -3,6 +3,7 @@ import { AgGridAngular } from 'ag-grid-angular';
 import { ColDef, GridApi } from 'ag-grid-community';
 import { NzPaginationModule } from 'ng-zorro-antd/pagination';
 
+import { LJDataVBoardTitleComponent } from './lj-board-title/lj-board-title.component';
 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';
@@ -11,7 +12,14 @@ import { DataVLjTextDashboardComponent } from '../lj-text-dashboard/lj-text-dash
   selector: 'app-data-v-lj-dashboard',
   standalone: true,
   templateUrl: './lj-dashboard.component.html',
-  imports: [AgGridAngular, NzPaginationModule, LJDataVCardComponent, DataVLjTableComponent, DataVLjTextDashboardComponent]
+  imports: [
+    AgGridAngular,
+    NzPaginationModule,
+    LJDataVCardComponent,
+    DataVLjTableComponent,
+    DataVLjTextDashboardComponent,
+    LJDataVBoardTitleComponent
+  ]
 })
 export class DataVLjDashboardComponent implements OnInit {
   [x: string]: any;

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

@@ -29,7 +29,29 @@
     background-size: contain; /* 或者可以使用 'contain' 根据你的需要 */
     border-width: 0;
   }
-  
+
+  @media (min-width:0){
+     
+  .chart-button {font-size:12px;}
+}
+
+
+@media (min-width: 360px){
+     
+  .chart-button {font-size:14px;}
+}
+
+
+@media (min-width: 920px){
+     
+  .chart-button {font-size:18px;}
+}
+
+@media (min-width: 1920px){
+     
+  .chart-button {font-size:26px;}
+}
+
   .chart-container {
     width: 10rem;
     height: 10rem;