feat(*): 布袋监测页面开发

src/views/dustMonitoring/bag-monitoring.vue

@@ -54,15 +54,17 @@
     <div class="data-table">
 
       <div class="time-controls">
-        <el-button>
-          <i class="el-icon-back"></i>
+        <el-button @click="navigateBackward">
+          <el-icon><ArrowLeftBold />向前</el-icon>
         </el-button>
-        <el-button>
-          <i class="el-icon-right"></i>
+        <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>
 
       <table>
@@ -87,7 +89,7 @@
           </tr>
           <tr>
             <td>反吹中</td>
-            <td v-for="(value, index) in backwashValues" :key="'b'+index" :class="{ 'highlight': index === 1 }">{{ value }}</td>
+            <td v-for="(value, index) in backwashValues" :key="'b'+index">{{ value }}</td>
           </tr>
           <tr>
             <td>谷值</td>
@@ -117,6 +119,10 @@ const chartRef = ref(null)
 let chartInstance = null
 let updateTimer = null // 定时器引用
 
+// 时间导航相关
+let isRealTimeMode = true
+let lastTimePoint = null
+
 // 图表数据
 const chartData = reactive({
   xData: [],
@@ -186,7 +192,7 @@ const initChart = () => {
   initChartData()
   
   chartInstance = echarts.init(chartRef.value)
-  updateChart()
+  // updateChart()
   
   // 启动定时更新
   startRealTimeUpdates()
@@ -244,6 +250,142 @@ const startRealTimeUpdates = () => {
     updateChart()
     updateDataPanels()
   }, 1000)
+  
+  isRealTimeMode = true
+}
+
+// 停止实时更新
+const stopRealTimeUpdates = () => {
+  if (updateTimer) {
+    clearInterval(updateTimer)
+    updateTimer = null
+  }
+  
+  isRealTimeMode = false
+}
+
+// 向前导航（查看更早的数据）
+const navigateBackward = () => {
+  // 关闭实时更新
+  stopRealTimeUpdates()
+  // 获取时间间隔（分钟）
+  const interval = parseInt(timeInterval.value) || 10
+  const intervalMs = interval * 60 * 1000
+  
+  // 如果是第一次点击，以当前最后一条数据的时间为参考
+  if (lastTimePoint === null && chartData.xData.length > 0) {
+    const lastTimeString = chartData.xData[chartData.xData.length - 1]
+    const [hours, minutes, seconds] = lastTimeString.split(':').map(Number)
+    const now = new Date()
+    lastTimePoint = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes, seconds)
+  } else if (lastTimePoint === null) {
+    // 如果没有数据，使用当前时间
+    lastTimePoint = new Date()
+  }
+  
+  // 计算新的时间范围
+  const endTime = new Date(lastTimePoint.getTime() - intervalMs)
+  lastTimePoint = endTime
+  
+  // 重新生成数据
+  generateHistoricalData(endTime, interval)
+}
+
+// 向后导航（查看更近的数据）
+const navigateForward = () => {
+  // 关闭实时更新
+  stopRealTimeUpdates()
+  
+  // 获取时间间隔（分钟）
+  const interval = parseInt(timeInterval.value) || 10
+  const intervalMs = interval * 60 * 1000
+  
+  // 如果是第一次点击，以当前最后一条数据的时间为参考
+  if (lastTimePoint === null && chartData.xData.length > 0) {
+    const lastTimeString = chartData.xData[chartData.xData.length - 1]
+    const [hours, minutes, seconds] = lastTimeString.split(':').map(Number)
+    const now = new Date()
+    lastTimePoint = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes, seconds)
+  } else if (lastTimePoint === null) {
+    // 如果没有数据，使用当前时间
+    lastTimePoint = new Date()
+  }
+  
+  // 计算新的时间范围
+  const endTime = new Date(lastTimePoint.getTime() + intervalMs)
+  
+  // // 如果新的结束时间超过当前时间，则切换回实时模式
+  const now = new Date()
+  if (endTime > now) {
+    lastTimePoint = null
+    // startRealTimeUpdates()
+    return
+  }
+  
+  lastTimePoint = endTime
+  
+  // 重新生成数据
+  generateHistoricalData(endTime, interval)
+}
+
+const reset = () => {
+  // 清空现有数据
+  chartData.xData = []
+  chartData.seriesData = []
+  lastTimePoint = null
+  // 重新生成当前时间往前300秒的数据
+
+  const now = new Date()
+  generateHistoricalData(now, 5)
+  
+  // 开启实时更新
+  startRealTimeUpdate()
+}
+
+// 开启实时更新（重置用）
+const startRealTimeUpdate = () => {
+  // 确保之前的定时器已清除
+  stopRealTimeUpdates()
+  
+  // 初始化实时模式标志
+  isRealTimeMode = true
+  
+  // 启动定时更新
+  updateTimer = setInterval(() => {
+    // 添加新数据点
+    const now = new Date()
+    chartData.xData.push(formatTime(now))
+    chartData.seriesData.push(generateRandomValue())
+    
+    // 移除最旧的数据点以保持固定长度
+    if (chartData.xData.length > 31) { // 保持30秒的数据
+      chartData.xData.shift()
+      chartData.seriesData.shift()
+    }
+    
+    // 更新图表
+    updateChart()
+    updateDataPanels()
+  }, 1000)
+}
+
+// 生成历史数据
+const generateHistoricalData = (endTime, intervalMinutes) => {
+  // 清空现有数据
+  chartData.xData = []
+  chartData.seriesData = []
+  
+  // 计算开始时间（结束时间减去间隔）
+  const startTime = new Date(endTime.getTime() - intervalMinutes * 60 * 1000)
+  
+  // 生成数据点（每秒一个）
+  for (let time = new Date(startTime); time <= endTime; time = new Date(time.getTime() + 1000)) {
+    chartData.xData.push(formatTime(time))
+    chartData.seriesData.push(generateRandomValue())
+  }
+  
+  // 更新图表
+  updateChart()
 }
 
 // 更新数据面板
@@ -255,7 +397,7 @@ const updateDataPanels = () => {
   currentData.time = Math.floor((now.getTime() / 1000) % 1000).toString()
   
   // 每10秒更新一次次要数据面板
-  if (now.getSeconds() % 10 === 0) {
+  if (now.getSeconds() % 1 === 0) {
     secondaryData.time = Math.floor((now.getTime() / 1000) % 1000).toString()
     secondaryData.valleyValue = Math.floor(Math.random() * 10).toString()
   }
@@ -449,7 +591,7 @@ onBeforeUnmount(() => {
     }
     
     .time-controls {
-      margin-top: 10px;
+      margin-bottom: 10px;
       display: flex;
       align-items: center;
       justify-content: flex-end;