fix: 曲线图上方数据界面优化完善。

src/components/other/index.vue

@@ -197,16 +197,9 @@
               </view>
             </nut-config-provider>
             <nut-row class="m_t_20">
-              <view class="view_bet">
-                <view
-                  class="font_32 f_weight c_222"
-                  :style="{
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                  }"
-                >
-                  {{
+              <view class="chart-header-row">
+                <view class="chart-title">
+                  <text class="title-text">{{
                     prDev === 1
                       ? "溶解氧"
                       : prDev === 2
@@ -218,43 +211,35 @@
                       : prDev === 5
                       ? "盐　度"
                       : ""
-                  }}
+                  }}</text>
                 </view>
-                <view
-                  :style="{
-                    display: 'flex',
-                    alignItems: 'center',
-                    width: '50%',
-                    justifyContent: 'center',
-                  }"
-                >
+                <view class="day-selector">
                   <view
-                    class="gridSmall font_26 c_222"
+                    class="day-btn"
                     :class="{ active: dayDev === 1 }"
                     @click="changeDay(1)"
                   >
                     1天
                   </view>
                   <view
-                    class="gridSmall font_26 c_222"
+                    class="day-btn"
                     :class="{ active: dayDev === 3 }"
                     @click="changeDay(3)"
                   >
                     3天
                   </view>
                   <view
-                    class="gridSmall font_26 c_222"
+                    class="day-btn"
                     :class="{ active: dayDev === 7 }"
                     @click="changeDay(7)"
                   >
                     7天
                   </view>
                 </view>
-                <view :style="{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: '12px', margin: '0 7px' }">
-                  <view @click="fullscreenChart" class="zoom-btn">
-                    放大
-                  </view>
-                  <view @click="changeShow" class="hide-btn">{{ setTitle }}</view>
+                <view class="chart-actions">
+                  <text @click="fullscreenChart" class="action-link">放大</text>
+                  <text class="divider-dot">·</text>
+                  <text @click="changeShow" class="action-link">{{ setTitle }}</text>
                 </view>
               </view>
               <!-- <nut-col :span="8" class="font_32 f_weight c_222">
@@ -889,11 +874,14 @@ function getDeviceList() {
           : res.data.listDetector[0].id
           ? res.data.listDetector[0].id
           : undefined;
-        // 初始化 serialNum
-        if (res.data.listDetector[0].serialNum) {
-          paramsHistory.value.serialNum = res.data.listDetector[0].serialNum;
-        }
+        
         if (doDev.value) {
+          // 根据当前选中的设备设置 serialNum
+          const currentDevice = res.data.listDetector.find((item: any) => item.id === doDev.value);
+          if (currentDevice && currentDevice.serialNum) {
+            paramsHistory.value.serialNum = currentDevice.serialNum;
+          }
+          
           if (!oxyIds.includes(doDev.value)) {
             doDev.value = res.data.listDetector[0].id
               ? res.data.listDetector[0].id
@@ -1684,6 +1672,16 @@ function hideTour(a) {
 }
 // 刷新
 function refresh() {
+  // 确保重新设置图表尺寸
+  const sysInfo = Taro.getSystemInfoSync();
+  let cWidth = (700 / 750) * sysInfo.screenWidth;
+  let cHeight = (220 / 750) * sysInfo.windowHeight;
+  let pixelRatio = sysInfo.pixelRatio;
+  chartConf.cWidth = cWidth;
+  chartConf.cHeight = cHeight;
+  chartConf.pixelRatio = pixelRatio;
+  
+  // 重新加载设备列表和图表数据
   getDeviceList();
 }
 // 启停开关
@@ -2062,6 +2060,89 @@ defineExpose({
     background: #09b8c2;
   }
 
+  // 优化后的图表标题行样式
+  .chart-header-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0 15px;
+    gap: 15px;
+  }
+
+  .chart-title {
+    flex: 0 0 auto;
+    .title-text {
+      font-size: 32px;
+      font-weight: 600;
+      color: #222;
+      white-space: nowrap;
+    }
+  }
+
+  .day-selector {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 0;
+    border-radius: 6px;
+    overflow: hidden;
+    border: 1px solid #e5e5e5;
+    
+    .day-btn {
+      padding: 0 18px;
+      height: 36px;
+      line-height: 36px;
+      font-size: 26px;
+      color: #666;
+      background: #fff;
+      border-right: 1px solid #e5e5e5;
+      text-align: center;
+      white-space: nowrap;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      
+      &:last-child {
+        border-right: none;
+      }
+      
+      &.active {
+        color: #fff;
+        background: linear-gradient(135deg, #09b8c2 0%, #07a5ae 100%);
+        font-weight: 500;
+      }
+      
+      &:not(.active):active {
+        background: #f8f8f8;
+      }
+    }
+  }
+
+  .chart-actions {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    
+    .action-link {
+      font-size: 28px;
+      color: #1589E9;
+      white-space: nowrap;
+      cursor: pointer;
+      transition: opacity 0.2s ease;
+      
+      &:active {
+        opacity: 0.7;
+      }
+    }
+    
+    .divider-dot {
+      font-size: 20px;
+      color: #ccc;
+      margin: 0 2px;
+    }
+  }
+
   .zoom-btn {
     font-size: 28px;
     white-space: nowrap;