From c5c6a0e0c172661e875116e8806370ec13b3f11c Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Tue, 8 Jul 2025 20:16:24 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=9B=BE=E8=A1=A8=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/HomeFormula.vue |  4 +++-
 src/components/home/LineChart.vue   |  3 ++-
 src/views/home/chart.vue            | 28 +++++++++++++++++++++++++---
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/components/home/HomeFormula.vue b/src/components/home/HomeFormula.vue
index 4196fe2..634f447 100644
--- a/src/components/home/HomeFormula.vue
+++ b/src/components/home/HomeFormula.vue
@@ -54,7 +54,9 @@ watchEffect(async () => {
 
       <el-descriptions-item label="实时消毒等级">
         <el-tag>
-          <span style="color: #31cb7a; font-size: 18px; margin: 0 5px">{{ homeStore.disinfectionState.nlog }}</span>Log
+          <span style="color: #31cb7a; font-size: 18px; margin: 0 5px">{{
+            homeStore.disinfectionState.nlog?.toFixed(2)
+          }}</span>Log
         </el-tag>
       </el-descriptions-item>
     </el-descriptions>
diff --git a/src/components/home/LineChart.vue b/src/components/home/LineChart.vue
index 6320652..f3fe206 100644
--- a/src/components/home/LineChart.vue
+++ b/src/components/home/LineChart.vue
@@ -128,6 +128,7 @@ watch(
       ],
     }
     myChart.setOption(option)
+    myChart.resize()
   },
   {
     deep: true,
@@ -142,7 +143,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div ref="chartRef" style="height: 100%" />
+  <div ref="chartRef" style="height: 100%; width: 50%" />
 </template>
 
 <style scoped></style>
diff --git a/src/views/home/chart.vue b/src/views/home/chart.vue
index 952cddc..53e727a 100644
--- a/src/views/home/chart.vue
+++ b/src/views/home/chart.vue
@@ -118,6 +118,8 @@ const operationState = computed(() => {
 
 let poll: any = null
 
+const chartRefs = ref([])
+
 const getData = async (type?: string) => {
   const data = await syncSendCmd({
     className: 'H2O2SensorMgr',
@@ -199,7 +201,9 @@ const formatSeconds = (seconds: number) => {
 
       <el-descriptions-item label="实时消毒等级">
         <el-tag>
-          <span style="color: #31cb7a; font-size: 18px; margin: 0 5px">{{ homeStore.disinfectionState.nlog }}</span>Log
+          <span style="color: #31cb7a; font-size: 18px; margin: 0 5px">{{
+            homeStore.disinfectionState.nlog?.toFixed(2)
+          }}</span>Log
         </el-tag>
       </el-descriptions-item>
     </el-descriptions>
@@ -208,7 +212,14 @@ const formatSeconds = (seconds: number) => {
       class="line-chart-content"
       :style="{ 'grid-template-columns': `repeat(${chartList.length},1fr)` }"
     >
-      <LineChart v-for="(item, index) in chartList" :key="index" :env-data="item" />
+      <LineChart
+        v-for="(item, index) in chartList"
+        ref="chartRefs"
+        :key="index"
+        class="chart-box"
+        :style="{ width: `calc(100% / ${chartList.length} - 10px)` }"
+        :env-data="item"
+      />
     </div>
     <div class="line-chart-bottom">
       <div class="home-chart-time">
@@ -296,8 +307,19 @@ const formatSeconds = (seconds: number) => {
     align-items: center;
   }
   .line-chart-content {
-    display: grid;
+    display: flex;
+    flex-direction: row; // 子元素水平排列（默认值）
+    align-items: flex-start; // 子元素顶部对齐
+    overflow-x: auto; // 横向滚动支持
+    width: 100%;
     height: calc(100% - 80px);
+    gap: 10px;
+    .chart-box {
+      flex: 0 0 auto;
+      width: 100%;
+      height: 100%;
+      min-width: 200px;
+    }
   }
   .line-chart-bottom {
     height: 40px;