feat(*): 优化布袋监测

src/views/dustMonitoring/bag-monitoring.vue

@@ -70,21 +70,21 @@
       <div class="time-controls">
         <div class="time-desc">
           <span class="icon"></span>
-          当前实时信号：{{ currentData.compartNo }}仓 / {{ currentData.row }}排</div>
+          当前实时信号：{{ currentData.compartNo }}仓 / {{ currentData.row }}排
+        </div>
         <div>
           <el-button @click="navigateBackward">
-          <el-icon><ArrowLeftBold />向前</el-icon>
-        </el-button>
-        <el-button @click="navigateForward">
-          <el-icon><ArrowRightBold />向后</el-icon>
-        </el-button>
-        <span class="time-label">间隔</span>
-        <el-input v-model="timeInterval" class="time-input"></el-input>
-        <span class="time-unit">分钟</span>
-
-        <el-button @click="reset">重置</el-button>
+            <el-icon><ArrowLeftBold />向前</el-icon>
+          </el-button>
+          <el-button @click="navigateForward">
+            <el-icon><ArrowRightBold />向后</el-icon>
+          </el-button>
+          <span class="time-label">间隔</span>
+          <el-input v-model="timeInterval" class="time-input"></el-input>
+          <span class="time-unit">分钟</span>
+
+          <el-button @click="reset">重置</el-button>
         </div>
-       
       </div>
 
       <table>
@@ -99,14 +99,20 @@
         <tbody>
           <tr>
             <td>峰值{{ currentData.row }}排_R</td>
-            <td v-for="(value, index) in tableData" :key="'r' + index" :class="{ 'online-style': value.compartNo ===  currentData.compartNo }">
-              {{ value.peakValueR || "-" }}
+            <td
+              v-for="(value, index) in tableData"
+              :key="'r' + index"
+              :class="{
+                'online-style': value.compartNo === currentData.compartNo,
+              }"
+            >
+              {{ value.peakValueR }}
             </td>
           </tr>
           <tr>
             <td>峰值_H</td>
             <td v-for="(value, index) in tableData" :key="'h' + index">
-              {{ value.peakValueH || "-" }}
+              {{ value.peakValueH }}
             </td>
           </tr>
           <tr>
@@ -122,13 +128,13 @@
           <tr>
             <td>反吹中</td>
             <td v-for="(value, index) in tableData" :key="'b' + index">
-              {{ value.blowBack || "-" }}
+              {{ value.blowBack }}
             </td>
           </tr>
           <tr>
             <td>谷值</td>
             <td v-for="(value, index) in tableData" :key="'v' + index">
-              {{ value.valleyValue || "-" }}
+              {{ value.valleyValue}}
             </td>
           </tr>
         </tbody>
@@ -245,7 +251,7 @@ const initChartData = () => {
     dusterNo: dusterNo.value,
     deviceNo: selectedDevice.value,
     startTime: startTime,
-    endTime: endTime,
+    // endTime: endTime,
   })
     .then((res) => {
       // 将data中的date和realData数据添加到chartData中，要求大数据量下速度快
@@ -295,65 +301,57 @@ const updateFunction = () => {
   if (!dusterNo.value || !selectedDevice.value) return;
 
   // 从API获取实时数据
-  if (showRealtimeDeviceStatus) {
-    getMonitorRealtime({
-      dusterNo: dusterNo.value,
-      deviceNo: selectedDevice.value,
-    })
-      .then((res) => {
-        if (res.data) {
-          // 更新数据面板
-          if (res.data.realtimeCompart) {
-            tableData.value = res.data.realtimeCompart;
-          }
-          if (res.data.realtimePanel) {
-            currentData.value = res.data.realtimePanel;
-          }
-        }
-      })
-      .catch((err) => {
-        console.error("获取实时数据失败:", err);
-      });
-  }
 
-  // 结束时间往后推一秒
-  let endTime = moment(new Date(currentTime.value))
-    .add(1, "seconds")
-    .format("YYYY-MM-DD HH:mm:ss");
-  getMonitorToday({
+  getMonitorRealtime({
     dusterNo: dusterNo.value,
     deviceNo: selectedDevice.value,
-    startTime: currentTime.value,
-    endTime: endTime,
-  }).then((res) => {
-    if (res.data && res.data.length > 0) {
-      const item = res.data[res.data.length - 1];
-      chartData.xData.push(item.date);
-      chartData.seriesData.push(item.realData || 0);
-
-      // 移除最旧的数据点以保持固定长度
-      if (chartData.xData.length > 301) {
-        // 保持300秒的数据
-        chartData.xData.shift();
-        chartData.seriesData.shift();
+  })
+    .then((res) => {
+      if (res.data) {
+        // 更新数据面板
+        if (res.data.realtimeCompart) {
+          tableData.value = res.data.realtimeCompart;
+        }
+        if (res.data.realtimePanel) {
+          currentData.value = res.data.realtimePanel;
+        }
       }
-      currentTime.value = endTime;
-      // 更新图表
-      updateChart();
-    }
-  });
-};
+    })
+    .catch((err) => {
+      console.error("获取实时数据失败:", err);
+    });
 
-// 停止实时更新
-const stopRealTimeUpdates = () => {
-  if (updateTimer) {
-    clearInterval(updateTimer);
-    updateTimer = null;
+  if (showRealtimeDeviceStatus) {
+    // 结束时间往后推一秒
+    let endTime = moment(new Date(currentTime.value))
+      .add(1, "seconds")
+      .format("YYYY-MM-DD HH:mm:ss");
+    getMonitorToday({
+      dusterNo: dusterNo.value,
+      deviceNo: selectedDevice.value,
+      startTime: currentTime.value,
+      endTime: endTime,
+    }).then((res) => {
+      if (res.data && res.data.length > 0) {
+        const item = res.data[res.data.length - 1];
+        chartData.xData.push(item.date);
+        chartData.seriesData.push(item.realData || 0);
+
+        // 移除最旧的数据点以保持固定长度
+        if (chartData.xData.length > 301) {
+          // 保持300秒的数据
+          chartData.xData.shift();
+          chartData.seriesData.shift();
+        }
+        currentTime.value = endTime;
+        // 更新图表
+        updateChart();
+      }
+    });
   }
-
-  showRealtimeDeviceStatus = false;
 };
 
+
 // 向前导航（查看更早的数据）
 const navigateBackward = () => {
   // 不完全关闭轮询，只禁用实时设备状态获取
@@ -376,6 +374,7 @@ const navigateBackward = () => {
   const endTime = new Date(lastTimePoint.getTime() - intervalMs);
   lastTimePoint = endTime;
 
+
   // 重新生成数据
   generateHistoricalData(endTime, interval);
 };
@@ -399,18 +398,18 @@ const navigateForward = () => {
   }
 
   // 计算新的时间范围
-  const endTime = new Date(lastTimePoint.getTime() + intervalMs);
+  let endTime = new Date(lastTimePoint.getTime() + intervalMs);
 
-  // 如果新的结束时间超过当前时间，则切换回实时模式
+  // // 如果新的结束时间超过当前时间，则切换回实时模式
   const now = moment();
   if (endTime > now) {
-    lastTimePoint = null;
-    showRealtimeDeviceStatus = true;
-    return;
+    lastTimePoint = new Date(now);
+    endTime = new Date(now);
+    // // showRealtimeDeviceStatus = true;
+    // return;
+  } else {
+    lastTimePoint = endTime;
   }
-
-  lastTimePoint = endTime;
-
   // 重新生成数据
   generateHistoricalData(endTime, interval);
 };
@@ -435,7 +434,10 @@ const reset = () => {
 // 开启实时更新（重置用）
 const startRealTimeUpdate = () => {
   // 确保之前的定时器已清除
-  stopRealTimeUpdates();
+  if (updateTimer) {
+    clearInterval(updateTimer);
+    updateTimer = null;
+  }
   // 启动定时更新
   updateTimer = setInterval(() => {
     updateFunction();
@@ -518,7 +520,6 @@ watch(dusterNo, (newVal) => {
 });
 
 onMounted(() => {
-  console.log("dusterNo", route);
   if (dusterNo.value) {
     getDeviceList();
   }