每行数可配置，完善样式

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

@@ -1,45 +1,41 @@
 <div nz-row [nzGutter]="16" class="s1-container">
   <div nz-col nzSpan="8">
     <data-v-card title="系统状态">
-      <div nz-row style="justify-content: center;align-items: center;">
+      <div nz-row style="justify-content: center; align-items: center">
         <div nz-col nzSpan="12">
           <div class="centered-element">
-            <app-chart-component [options]="chart_options" style="width: 26rem; height: 11rem;" />
-
+            <app-chart-component [options]="chart_options" style="width: 26rem; height: 11rem" />
           </div>
           <div class="sys-status-title">系统健康度</div>
         </div>
         <div nz-col nzSpan="12">
           <div class="centered-element">
-            <app-chart-component [options]="chart_options0" style="width: 26rem; height: 11rem;" />
-
+            <app-chart-component [options]="chart_options0" style="width: 26rem; height: 11rem" />
           </div>
           <div class="sys-status-title">设备投运度</div>
         </div>
       </div>
     </data-v-card>
 
-    <data-v-card title="系统操作记录" style="margin-top: 1rem;">
-      <ag-grid-angular [rowData]="rowData" [columnDefs]="colDefs1" class="ag-theme-datav">
-      </ag-grid-angular>
+    <data-v-card title="系统操作记录" style="margin-top: 1rem">
+      <ag-grid-angular [rowData]="rowData" [columnDefs]="colDefs1" class="ag-theme-datav"> </ag-grid-angular>
     </data-v-card>
 
-    <data-v-card title="系统报警信息" style="margin-top: 1rem;">
-      <ag-grid-angular [rowData]="rowData" [columnDefs]="colDefs2" class="ag-theme-datav">
-      </ag-grid-angular>
+    <data-v-card title="系统报警信息" style="margin-top: 1rem">
+      <ag-grid-angular [rowData]="rowData" [columnDefs]="colDefs2" class="ag-theme-datav"> </ag-grid-angular>
     </data-v-card>
 
-    <data-v-card title="" style="margin-top: 1rem;">
+    <data-v-card title="" style="margin-top: 1rem">
       <!-- <div class="progress-display">完成样品数量/时长 16/8</div> -->
       <div class="progress-container">
         <span class="status-text">化验效率：</span>
-        <nz-progress [nzPercent]="64" [nzStrokeColor]="'#74FAFB'" style="width: 100%; "></nz-progress>
+        <nz-progress [nzPercent]="64" [nzStrokeColor]="'#74FAFB'" style="width: 100%"></nz-progress>
         <span class="status-ext-text">（16/25）</span>
       </div>
 
       <div class="progress-container mt-sm">
         <span class="status-text">完 成 率 ：</span>
-        <nz-progress [nzPercent]="60" [nzStrokeColor]="'#74FAFB'" style="width: 100%;"></nz-progress>
+        <nz-progress [nzPercent]="60" [nzStrokeColor]="'#74FAFB'" style="width: 100%"></nz-progress>
         <span class="status-ext-text">（12/20）</span>
       </div>
     </data-v-card>
@@ -47,56 +43,43 @@
 
   <div nz-col nzSpan="8">
     <data-v-card title="">
-      <div style="height: 34.6rem;">
-        <img src="assets/dashboard/dashboard_ws_demo1.png" style="width: 100%;" />
+      <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]="optionsCheckList"
+    <data-v-card title="化验结果" [showSetting]="true" [optionsList]="chartConfig.optionsCheckList"
       (onCheckedItemsChange)="handleCheckedItems($event)">
-      <div class="scrollable-container">
-        @for (item of optionsCheckList; track item) {
-        <div *ngIf="item.checked" class="centered-element">
-          <app-chart-component [options]="item.options" style="width: 80%; height: 16rem;" />
+      <div nz-row class="scrollable-container">
+        @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"
+            [style]="{'margin': '20px ' + (20 / chartConfig.rowNumber) + 'px','width': '100%', 'height': '16rem'}"
+            *ngIf="item.checked" />
         </div>
         }
       </div>
-      <div nz-row style="justify-content: center;align-items: center;margin-top: 0.4rem;">
+      <div nz-row>
+        @for (item of chartConfig.optionBottomList; track item) {
         <div nz-col nzSpan="12">
-          <div class="centered-element">
-            <app-chart-component [options]="chart_options3" style="width: 26rem; height: 11rem;" />
-          </div>
-        </div>
-        <div nz-col nzSpan="12">
-          <div class="centered-element">
-            <app-chart-component [options]="chart_options4" style="width: 26rem; height: 11rem;" />
-
+          <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>
+  </div>
+</div>

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

@@ -28,14 +28,7 @@
     height: 5rem;
 }
 
-.scrollable-container {
-    overflow-y: auto;
-    /* 水平滚动关闭，垂直滚动开启 */
-    width: 100%;
-    /* 或者指定一个固定的宽度 */
-    height: 20rem;
-    /* 根据需求设置容器的高度以触发滚动条 */
-}
+
 
 .centered-element {
     display: flex;
@@ -100,4 +93,41 @@
 
 .white-color-theme {
     color: #74FAFB;
+}
+
+
+
+
+//滚动
+.scrollable-container {
+    scrollbar-color: auto;
+    overflow-y: auto;
+    /* 水平滚动关闭，垂直滚动开启 */
+    width: 100%;
+    /* 或者指定一个固定的宽度 */
+    height: 20rem;
+    /* 根据需求设置容器的高度以触发滚动条 */
+}
+
+::ng-deep ::-webkit-scrollbar {
+    width: 10px;
+    /* 滚动条宽度 */
+}
+
+::ng-deep ::-webkit-scrollbar-track {
+    background-color: #0A1632;
+    /* 轨道颜色 */
+}
+
+/** 滚动条样式 */
+::ng-deep ::-webkit-scrollbar-thumb {
+    background-color: #74FAFB;
+    /* 按钮颜色 */
+    border-radius: 2px;
+    /* 按钮圆角 */
+}
+
+::ng-deep ::-webkit-scrollbar-thumb:hover {
+    background-color: #74FAFB;
+    /* 滑动时按钮颜色 */
 }

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

@@ -11,11 +11,10 @@ import { DataVTitleComponent } from '../title/title.component';
 import { ColDef } from 'ag-grid-community'; // Column Definition Type Interface
 import { NzProgressModule } from 'ng-zorro-antd/progress';
 import { NzBadgeModule } from 'ng-zorro-antd/badge';
-import { Subscription } from 'rxjs';
+import { Subscription, finalize } from 'rxjs';
 import { IMqttMessage, MqttService } from 'ngx-mqtt';
 import { ChartComponentComponent } from './chart-component/chart-component.component';
 import { NzListModule } from 'ng-zorro-antd/list';
-
 @Component({
   selector: 'app-data-v-s1',
   standalone: true,
@@ -26,20 +25,23 @@ import { NzListModule } from 'ng-zorro-antd/list';
 export class DataVS1Component implements OnInit {
   private readonly http = inject(_HttpClient);
   private readonly modal = inject(ModalHelper);
-  optionsCheckList = [
-    { label: '全水', options: {}, checked: true },
-    { label: '热值', options: {}, checked: true },
-    { label: '全硫', options: {}, checked: false },
-    { label: '内水', options: {}, checked: false },
-    { label: '灰分', options: {}, checked: false },
-    { label: '挥发分', options: {}, checked: false },
-    { label: '碳', options: {}, checked: false },
-    { label: '氢', options: {}, checked: false },
-    { label: '氮', options: {}, checked: false },
-  ];
+  chartConfig = {
+    //每行数
+    rowNumber: 1,
+    //check 表格
+    optionsCheckList: [
+      { label: '全水', options: {}, checked: true },
+      { label: '热值', options: {}, checked: true },
+      { label: '全硫', options: {}, checked: false },
+      { label: '内水', options: {}, checked: false },
+      { label: '灰分', options: {}, checked: false },
+      { label: '挥发分', options: {}, checked: false },
+    ],
+    //底部
+    optionBottomList: [{}]
+  };
   handleCheckedItems(checkedItems: { label: string, checked: boolean }[]) {
     console.log('当前选中的项目:', checkedItems);
-    // 在此处添加更多逻辑来处理这些选中项
   }
   chart_options = {}
   chart_options0 = {}
@@ -47,127 +49,20 @@ export class DataVS1Component implements OnInit {
   chart_options2 = {}
   chart_options3 = {}
   chart_options4 = {}
-
-
-  rowData = [
-    {
-      rwmc: '任务1',
-      rwms: '任务描述1',
-      kssj: '2024-1-1',
-      jhwcsj: '2024-1-2',
-      sfcq: '否',
-      dqzt: '正常',
-      dqjd: '节点1',
-      sjwcsj: '2024-1-2',
-      bjmc: '报警1',
-      bjms: '报警描述1',
-      bjsj: '2024-1-1',
-      gzyy: '-',
-      clff: '-',
-      tzsj: '2024-1-2',
-      zycd: '一般',
-      tzmc: '系统提示',
-      tznr: '账户登录',
-      fj: '-'
-    },
-    {
-      rwmc: '任务2',
-      rwms: '任务描述2',
-      kssj: '2024-1-2',
-      jhwcsj: '2024-1-3',
-      sfcq: '否',
-      dqzt: '正常',
-      dqjd: '节点2',
-      sjwcsj: '2024-1-2',
-      bjmc: '报警2',
-      bjms: '报警描述2',
-      bjsj: '2024-1-2',
-      gzyy: '-',
-      clff: '-',
-      tzsj: '2024-1-2',
-      zycd: '一般',
-      tzmc: '系统提示',
-      tznr: '账户登录',
-      fj: '-'
-    },
-    {
-      rwmc: '任务3',
-      rwms: '任务描述3',
-      kssj: '2024-1-3',
-      jhwcsj: '2024-1-4',
-      sfcq: '否',
-      dqzt: '正常',
-      dqjd: '节点3',
-      sjwcsj: '2024-1-2',
-      bjmc: '报警3',
-      bjms: '报警描述3',
-      bjsj: '2024-1-3',
-      gzyy: '-',
-      clff: '-',
-      tzsj: '2024-1-2',
-      zycd: '一般',
-      tzmc: '系统提示',
-      tznr: '账户登录',
-      fj: '-'
-    },
-    {
-      rwmc: '任务4',
-      rwms: '任务描述4',
-      kssj: '2024-1-4',
-      jhwcsj: '2024-1-5',
-      sfcq: '否',
-      dqzt: '正常',
-      dqjd: '节点4',
-      sjwcsj: '2024-1-2',
-      bjmc: '报警4',
-      bjms: '报警描述4',
-      bjsj: '2024-1-4',
-      gzyy: '-',
-      clff: '-',
-      tzsj: '2024-1-2',
-      zycd: '一般',
-      tzmc: '系统提示',
-      tznr: '账户登录',
-      fj: '-'
-    },
-    {
-      rwmc: '任务5',
-      rwms: '任务描述5',
-      kssj: '2024-1-5',
-      jhwcsj: '2024-1-6',
-      sfcq: '否',
-      dqzt: '正常',
-      dqjd: '节点5',
-      sjwcsj: '2024-1-2',
-      bjmc: '报警5',
-      bjms: '报警描述5',
-      bjsj: '2024-1-5',
-      gzyy: '-',
-      clff: '-',
-      tzsj: '2024-1-2',
-      zycd: '一般',
-      tzmc: '系统提示',
-      tznr: '账户登录',
-      fj: '-'
-    }
-  ];
-
+  rowData: object[] = [];
   colDefs1: ColDef[] = [
     { headerName: '时间', field: 'rwmc', flex: 1 },
     { headerName: '系统/设备', field: 'rwms', flex: 1 },
     { headerName: '操作描述', field: 'kssj', flex: 1 },
     { headerName: '操作人员', field: 'jhwcsj', flex: 1 }
   ];
-
   colDefs2: ColDef[] = [
     { headerName: '序号', field: 'rwmc', flex: 1 },
     { headerName: '时间', field: 'kssj', flex: 2 },
     { headerName: '任务描述', field: 'rwms', flex: 1 },
     { headerName: '等级', field: 'dqzt', flex: 1.5 }
   ];
-
   private subscription: Subscription;
-
   constructor(private _mqttService: MqttService) {
     this.subscription = this._mqttService.observe('s1').subscribe((message: IMqttMessage) => {
       const messagePayload = JSON.parse(message.payload.toString());
@@ -175,9 +70,16 @@ export class DataVS1Component implements OnInit {
       this.chart_options0 = messagePayload.msg;
     });
   }
-
   ngOnInit(): void {
-
+    /** 获取服务器配置 */
+    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, 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: "操作"
+      });
+    }
     var errorData = [];
     var categoryData = [];
     var barData = [];
@@ -192,8 +94,6 @@ export class DataVS1Component implements OnInit {
       ]);
       barData.push(echarts.number.round(val, 2));
     }
-
-
     this.chart_options = {
       backgroundColor: 'transparent',
       series: [
@@ -484,25 +384,9 @@ export class DataVS1Component implements OnInit {
         text: '热值',
         subtext: '(kg/kg)'
       },
-      grid: {
-        left: '3%',
-        right: '3%',
-        bottom: '3%',
-        containLabel: true
-      },
       legend: {
         data: ['超差样数量', '不合格样数量']
       },
-      toolbox: {
-        show: false,
-        feature: {
-          dataView: { show: true, readOnly: false },
-          magicType: { show: true, type: ['line', 'bar'] },
-          restore: { show: true },
-          saveAsImage: { show: true }
-        }
-      },
-      calculable: true,
       xAxis: [
         {
           type: 'category',
@@ -541,7 +425,25 @@ export class DataVS1Component implements OnInit {
             data: [{ type: 'average', name: 'Avg' }]
           }
         }
-      ]
+      ],
+      grid: {
+        left: '3%',
+        right: '3%',
+        bottom: '3%',
+        containLabel: true
+      },
+
+      toolbox: {
+        show: false,
+        feature: {
+          dataView: { show: true, readOnly: false },
+          magicType: { show: true, type: ['line', 'bar'] },
+          restore: { show: true },
+          saveAsImage: { show: true }
+        }
+      },
+      calculable: true,
+
     };
     this.chart_options3 = {
       title: {
@@ -605,19 +507,30 @@ export class DataVS1Component implements OnInit {
         },
       }]
     };
-    this.optionsCheckList[0].options = this.chart_options1;
-    this.optionsCheckList[1].options = this.chart_options2;
-    this.optionsCheckList[2].options = this.chart_options3;
-    this.optionsCheckList[3].options = this.chart_options4;
+    this.chartConfig.optionsCheckList[0].options = this.chart_options1;
+    this.chartConfig.optionsCheckList[1].options = this.chart_options2;
+    this.chartConfig.optionsCheckList[2].options = this.chart_options3;
+    this.chartConfig.optionsCheckList[3].options = this.chart_options4;
+    this.chartConfig.optionBottomList[0] = this.chart_options3;
+    this.chartConfig.optionBottomList[1] = this.chart_options4;
   }
-
-  add(): void { }
-
   public unsafePublish(topic: string, message: string): void {
     this._mqttService.unsafePublish(topic, message, { qos: 1, retain: true });
   }
-
   ngOnDestroy(): void {
     this.subscription.unsubscribe();
   }
+
+  /**
+   * 服务器获取配置
+   */
+  getServerConfig() {
+    this.http
+      .get('s1/',)
+      .subscribe(res => {
+        this.chartConfig = res['data'];
+      });
+
+  }
+
 }