fix:图表ui优化

src/components/home/LineChart.vue

@@ -9,8 +9,8 @@ const props = defineProps<{
 
 const titles = {
   Internal: '仓内',
-  WiredExtSensor: '外接传感器',
-  WirelessExtSensor: '无线传感器',
+  WiredExtSensor: '探头',
+  WirelessExtSensor: '探头',
 }
 
 watch(
@@ -25,28 +25,36 @@ watch(
     }
     const option = {
       title: {
-        text: titles[newValue?.type || ''] || '',
+        text: (titles[newValue?.type || ''] || '') + (newValue?.id || ''),
+        left: 'center', // 水平居中
+        top: 0,
+      },
+      grid: {
+        top: 100,
       },
       tooltip: {
         trigger: 'axis',
+        position: [10, 10],
         formatter: (params: any[]) => {
           if (!params || !params.length)
             return ''
-          // 1. 把第一个点的轴值（已经是格式化好的时间串）当作标题
           const time = params[0].axisValue
           let html = `<div>${time}</div>`
 
-          // 2. 逐条拼接：保留它自带的 marker（圆点／线段小样） + 系列名 + 数据 + 单位
           params.forEach((item) => {
             let unit = ''
             switch (item.seriesName) {
-              case '温度': unit = ' ℃'
+              case '温度':
+                unit = ' ℃'
                 break
-              case '相对湿度': unit = ' %RH'
+              case '相对湿度':
+                unit = ' %RH'
                 break
-              case 'H2O2浓度': unit = ' ppm'
+              case 'H2O2浓度':
+                unit = ' ppm'
                 break
-              case 'H2O2相对饱和度': unit = ' %RS'
+              case 'H2O2相对饱和度':
+                unit = ' %RS'
                 break
             }
             // item.marker 就是 echarts 自动给你的小彩点
@@ -134,9 +142,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="line-chart">
-    <div ref="chartRef" style="height: 50vh" />
-  </div>
+  <div ref="chartRef" style="height: 100%" />
 </template>
 
 <style scoped></style>

src/stores/homeStore.ts

@@ -141,6 +141,7 @@ export const useHomeStore = defineStore('home', () => {
    * @desc 更新环境传感器数据（温度、湿度、过氧化氢浓度等）
    */
   const updateHomeData = (data: Home.DisplayrelyMgr[]) => {
+    console.log(data)
     data.forEach((item, index) => {
       h2O2SensorData.value[index] = {
         ...h2O2SensorData.value[index],

src/views/home/chart.vue

@@ -4,7 +4,6 @@ import homeFinish from 'assets/images/home/home-finish.svg'
 import homeSettingSvg from 'assets/images/home/home-setting.svg'
 import BtButton from 'components/common/BTButton/index.vue'
 import RunFormulaConfig from 'components/formula/RunFormulaConfig.vue'
-import HomeFormula from 'components/home/HomeFormula.vue'
 import LineChart from 'components/home/LineChart.vue'
 import { stopTimer } from 'libs/countdownTimer'
 import { FtMessage } from 'libs/message'
@@ -137,19 +136,17 @@ onUnmounted(() => {
 
 <template>
   <main class="main-content">
-    <div class="line-chart-title">
-      <div v-if="formulaInfo && formulaInfo.name" class="line-chart-formula">
-        <HomeFormula style="background: #e0f0ff" />
-      </div>
-    </div>
+    <!--    <div class="line-chart-title"> -->
+    <!--      <div class="line-chart-formula"> -->
+    <!--        <HomeFormula style="background: #e0f0ff" /> -->
+    <!--      </div> -->
+    <!--    </div> -->
     <div
       v-loading="chartLoading"
       class="line-chart-content"
       :style="{ 'grid-template-columns': `repeat(${chartList.length},1fr)` }"
     >
-      <div v-for="(item, index) in chartList" :key="index">
-        <LineChart :env-data="item" />
-      </div>
+      <LineChart v-for="(item, index) in chartList" :key="index" :env-data="item" />
     </div>
     <div class="line-chart-bottom">
       <div class="home-chart-time">
@@ -273,12 +270,13 @@ onUnmounted(() => {
   }
   .line-chart-content {
     display: grid;
-    height: 65%;
+    height: calc(100% - 60px);
   }
   .line-chart-bottom {
-    height: 15%;
+    height: 60px;
     display: flex;
     padding-right: 20px;
+    align-items: center;
     .home-chart-btn {
       display: flex;
       justify-content: end;