fix: 图表显示

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>

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>

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;