feat:订阅Recall、日期查询

src/components/AlarmRecord.vue

@@ -15,6 +15,21 @@
       </view>
     </view> -->
     
+    <!-- 日期选择区域 -->
+    <view class="date-picker-container">
+      <picker 
+        mode="date" 
+        :value="selectedDate" 
+        @change="onDateChange"
+        class="date-picker"
+      >
+        <view class="picker-input">
+          <text class="picker-text">{{ selectedDate || '请选择日期' }}</text>
+          <text class="picker-icon">▼</text>
+        </view>
+      </picker>
+    </view>
+    
     <!-- 报警表格 -->
     <view class="page-content">
       <view class="alarm-content">
@@ -114,6 +129,11 @@ const isLoadingMore = ref(false);
 const scrollTop = ref(0);
 const isScrolling = ref(false);
 
+// 日期选择相关
+const selectedDate = ref('');
+const startTime = ref('');
+const endTime = ref('');
+
 // 移除空行占位逻辑，没有数据时只显示"暂无数据"
 
 // MQTT报警服务接口（预留）
@@ -151,10 +171,36 @@ const mqttAlarmService = {
         isLoadingMore.value = true;
       }
       
+      // 如果没有选择日期，使用默认日期（当天）
+      let queryStartTime = startTime.value;
+      let queryEndTime = endTime.value;
+      
+      if (!queryStartTime || !queryEndTime) {
+        const today = new Date();
+        const year = today.getFullYear();
+        const month = String(today.getMonth() + 1).padStart(2, '0');
+        const day = String(today.getDate()).padStart(2, '0');
+        const todayStr = `${year}-${month}-${day}`;
+        
+        queryStartTime = `${todayStr} 00:00:00`;
+        queryEndTime = `${todayStr} 23:59:59`;
+        
+        // 更新选择的日期
+        if (!selectedDate.value) {
+          selectedDate.value = todayStr;
+          startTime.value = queryStartTime;
+          endTime.value = queryEndTime;
+        }
+      }
+      
+      console.log('📅 查询时间范围:', queryStartTime, '至', queryEndTime);
+      
       // 调用分页获取告警接口
-      const response = await alertApi.getList({
+      const response = await alertApi.getListByCreateTime({
         page: page,
-        size: size
+        size: size,
+        startTime: queryStartTime,
+        endTime: queryEndTime
       });
       
       // 处理响应数据
@@ -408,6 +454,42 @@ const scrollToTop = () => {
   scrollTop.value = scrollTop.value === 0 ? 1 : 0;
 };
 
+// 日期选择处理，选择后直接查询
+const onDateChange = async (e) => {
+  selectedDate.value = e.detail.value;
+  console.log('选择的日期:', selectedDate.value);
+  
+  // 自动构建开始和结束时间
+  if (selectedDate.value) {
+    startTime.value = `${selectedDate.value} 00:00:00`;
+    endTime.value = `${selectedDate.value} 23:59:59`;
+    console.log('开始时间:', startTime.value);
+    console.log('结束时间:', endTime.value);
+    
+    // 选择日期后直接查询
+    console.log('🔍 开始查询报警记录');
+    console.log('查询时间范围:', startTime.value, '至', endTime.value);
+    
+    try {
+      // 重置分页状态
+      currentPage.value = 0;
+      hasMoreData.value = true;
+      alarmList.value = [];
+      
+      // 使用选择的日期范围查询
+      await mqttAlarmService.getHistoryAlarms(0, pageSize.value, false);
+      
+      uni.showToast({
+        title: '查询成功',
+        icon: 'success',
+        duration: 1500
+      });
+    } catch (error) {
+      console.error('❌ 查询失败:', error);
+    }
+  }
+};
+
 // 滚动到底部
 const scrollToBottom = () => {
   // 使用nextTick确保DOM更新完成
@@ -543,6 +625,49 @@ onUnmounted(() => {
   height: 100%;
 }
 
+// 日期选择器容器样式
+.date-picker-container {
+  display: flex;
+  align-items: center;
+  // justify-content: center;
+  padding: 20rpx 30rpx;
+  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+  border-bottom: 2rpx solid #e8eaed;
+}
+
+.date-picker {
+  width: 100%;
+  // max-width: 500rpx;
+}
+
+.picker-input {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16rpx 24rpx;
+  background: #ffffff;
+  border: 2rpx solid #dadce0;
+  border-radius: 8rpx;
+  transition: all 0.3s ease;
+}
+
+.picker-input:active {
+  border-color: #1a73e8;
+  background: #f1f5ff;
+}
+
+.picker-text {
+  font-size: 26rpx;
+  color: #3c4043;
+  flex: 1;
+}
+
+.picker-icon {
+  font-size: 20rpx;
+  color: #5f6368;
+  margin-left: 12rpx;
+}
+
 .alarm-content {
   // 继承通用内容样式
   flex: 1;
@@ -863,6 +988,18 @@ onUnmounted(() => {
   .empty-text {
     font-size: 28rpx;
   }
+  
+  .date-picker-container {
+    padding: 24rpx 32rpx;
+  }
+  
+  .date-picker {
+    max-width: 600rpx;
+  }
+  
+  .picker-text {
+    font-size: 28rpx;
+  }
 }
 
 // 响应式设计 - 手机设备适配
@@ -880,6 +1017,18 @@ onUnmounted(() => {
   .empty-text {
     font-size: 28rpx;
   }
+  
+  .date-picker-container {
+    padding: 16rpx 20rpx;
+  }
+  
+  .date-picker {
+    max-width: 100%;
+  }
+  
+  .picker-text {
+    font-size: 24rpx;
+  }
 }
 
 // 响应式设计 - 大屏设备适配