From 1fa6163bb51e6b907ebd2afd3566cbcf8822a246 Mon Sep 17 00:00:00 2001
From: "SK-20230509GLVS\\Administrator" <chenxx@auseft.com>
Date: Tue, 19 Mar 2024 17:54:52 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/routes/data-v/s1/s1.component.html | 23 ++++++----------------
 src/app/routes/data-v/s1/s1.component.less |  9 +++++++++
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/app/routes/data-v/s1/s1.component.html b/src/app/routes/data-v/s1/s1.component.html
index 4aa28c4..3bf683a 100644
--- a/src/app/routes/data-v/s1/s1.component.html
+++ b/src/app/routes/data-v/s1/s1.component.html
@@ -77,28 +77,17 @@
   <div nz-col nzSpan="8">
     <data-v-card title="化验结果" [showSetting]="true" [optionsList]="optionsCheckList"
       (onCheckedItemsChange)="handleCheckedItems($event)">
-      <nz-list nzGrid>
-        <div nz-row [nzGutter]="16">
-          <!-- 使用 *ngFor 来遍历 optionsCheckList -->
-          <div nz-col *ngFor="let item of optionsCheckList; let i = index" nzSpan="12">
-            <!-- 使用 *ngIf 检查当前项的 checked 属性 -->
-            <nz-list-item *ngIf="item.checked">
-              <div class="centered-element">
-                <!-- 只有当 checked 为 true 时才渲染 app-chart-component -->
-                <app-chart-component *ngIf="item.checked" [options]="item.options" style="width:auto; height: 11rem;">
-                </app-chart-component>
-              </div>
-            </nz-list-item>
-          </div>
+      <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-list>
-
-
+        }
+      </div>
       <div nz-row style="justify-content: center;align-items: center;margin-top: 0.4rem;">
         <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">
diff --git a/src/app/routes/data-v/s1/s1.component.less b/src/app/routes/data-v/s1/s1.component.less
index 9594c11..5a5239d 100644
--- a/src/app/routes/data-v/s1/s1.component.less
+++ b/src/app/routes/data-v/s1/s1.component.less
@@ -28,6 +28,15 @@
     height: 5rem;
 }
 
+.scrollable-container {
+    overflow-y: auto;
+    /* 水平滚动关闭，垂直滚动开启 */
+    width: 100%;
+    /* 或者指定一个固定的宽度 */
+    height: 20rem;
+    /* 根据需求设置容器的高度以触发滚动条 */
+}
+
 .centered-element {
     display: flex;
     align-items: center;