From 5f20cc7cd334fbb4186d355a6fb041588c7b0305 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=89=E6=B5=A9=E8=8C=B9?=
 <oncwnuLslB1QkZmG_6L-1aBuubMg@git.weixin.qq.com>
Date: Wed, 1 Oct 2025 04:07:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=97=A5=E5=BF=97=E6=8A=A5=E8=AD=A6?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AlarmRecord.vue  | 429 ++++++++++++++++++++------------
 src/components/SystemLog.vue    | 371 ++++++++++++---------------
 src/pages/alarm/index.vue       | 122 +--------
 src/pages/environment/index.vue | 341 +++++++++++++++++++++++--
 src/pages/log/index.vue         |   7 +-
 src/pages/parameter/index.vue   |  75 +++++-
 src/pages/visual/index.vue      |   4 +
 7 files changed, 833 insertions(+), 516 deletions(-)

diff --git a/src/components/AlarmRecord.vue b/src/components/AlarmRecord.vue
index 03ca36f..948be1c 100644
--- a/src/components/AlarmRecord.vue
+++ b/src/components/AlarmRecord.vue
@@ -25,8 +25,8 @@
             <view class="table-cell header-cell type-column">种类</view>
             <view class="table-cell header-cell time-column">时间</view>
             <view class="table-cell header-cell level-column">级别</view>
-            <view class="table-cell header-cell action-column">处置</view>
-            <view class="table-cell header-cell action-time-column">时间</view>
+            <!-- <view class="table-cell header-cell action-column">处置</view> -->
+            <!-- <view class="table-cell header-cell action-time-column">时间</view> -->
           </view>
           
           <!-- 表格内容 -->
@@ -55,11 +55,12 @@
                 <view class="table-cell content-column">{{ alarm.content }}</view>
                 <view class="table-cell type-column">{{ alarm.type }}</view>
                 <view class="table-cell time-column">{{ alarm.time }}</view>
-                <view class="table-cell level-column" :class="getLevelClass(alarm.level)">
+                <!-- <view class="table-cell level-column" :class="getLevelClass(alarm.level)"> -->
+                <view class="table-cell level-column">
                   {{ alarm.level }}
                 </view>
-                <view class="table-cell action-column">{{ alarm.action }}</view>
-                <view class="table-cell action-time-column">{{ alarm.actionTime }}</view>
+                <!-- <view class="table-cell action-column">{{ alarm.action }}</view> -->
+                <!-- <view class="table-cell action-time-column">{{ alarm.actionTime }}</view> -->
               </view>
             </template>
             
@@ -73,6 +74,17 @@
               <text class="table-empty-text">暂无数据</text>
             </view>
             
+            <!-- 加载更多提示 -->
+            <view class="load-more-container" v-if="isLoadingMore">
+              <view class="load-more-spinner"></view>
+              <text class="load-more-text">正在加载更多...</text>
+            </view>
+            
+            <!-- 没有更多数据提示 -->
+            <!-- <view class="no-more-container" v-if="!hasMoreData && alarmList.length > 0 && !isLoadingMore">
+              <text class="no-more-text">已加载全部数据</text>
+            </view> -->
+            
             <!-- 底部间距，确保最后一条记录完全显示 -->
             <view class="table-bottom-spacing"></view>
           </scroll-view>
@@ -84,6 +96,7 @@
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue';
+import { alertApi, eventApi } from '@/utils/api.js';
 
 // 报警数据
 const alarmList = ref([]);
@@ -91,6 +104,12 @@ const isLoading = ref(false);
 const isConnected = ref(false);
 const hasInitialized = ref(false);
 
+// 分页相关
+const currentPage = ref(0);
+const pageSize = ref(20);
+const hasMoreData = ref(true);
+const isLoadingMore = ref(false);
+
 // 滚动相关
 const scrollTop = ref(0);
 const isScrolling = ref(false);
@@ -100,167 +119,107 @@ const isScrolling = ref(false);
 // MQTT报警服务接口（预留）
 const mqttAlarmService = {
   // 连接MQTT服务器
-  connect: async () => {
-    console.log('MQTT报警服务连接中...');
-    try {
-      // 模拟连接延迟
-      await new Promise(resolve => setTimeout(resolve, 1000));
-      isConnected.value = true;
-      console.log('MQTT报警服务连接成功');
-      return Promise.resolve();
-    } catch (error) {
-      console.error('MQTT报警连接失败:', error);
-      isConnected.value = false;
-      return Promise.reject(error);
-    }
-  },
+  // connect: async () => {
+  //   console.log('MQTT报警服务连接中...');
+  //   try {
+  //     // 模拟连接延迟
+  //     await new Promise(resolve => setTimeout(resolve, 1000));
+  //     isConnected.value = true;
+  //     console.log('MQTT报警服务连接成功');
+  //     return Promise.resolve();
+  //   } catch (error) {
+  //     console.error('MQTT报警连接失败:', error);
+  //     isConnected.value = false;
+  //     return Promise.reject(error);
+  //   }
+  // },
   
   // 订阅报警数据
-  subscribeAlarmData: () => {
-    console.log('订阅系统报警数据');
-    // 这里后期会实现真实的MQTT报警订阅
-    return Promise.resolve();
-  },
+  // subscribeAlarmData: () => {
+  //   console.log('订阅系统报警数据');
+  //   // 这里后期会实现真实的MQTT报警订阅
+  //   return Promise.resolve();
+  // },
   
-  // 获取历史报警记录
-  getHistoryAlarms: async (limit = 50) => {
-    console.log(`获取历史报警记录，限制${limit}条`);
+  // 获取历史报警记录（分页）
+  getHistoryAlarms: async (page = 0, size = 20, isLoadMore = false) => {
+    console.log(`获取历史报警记录，页码:${page}, 每页:${size}条`);
     try {
-      isLoading.value = true;
-      hasInitialized.value = true;
-      // 模拟请求延迟
-      await new Promise(resolve => setTimeout(resolve, 800));
+      if (!isLoadMore) {
+        isLoading.value = true;
+        hasInitialized.value = true;
+      } else {
+        isLoadingMore.value = true;
+      }
       
-      // 模拟报警数据
-      const mockAlarms = [
-        {
-          content: '湿度45%超标',
-          type: '参数超标',
-          time: '2025-9-3-12:01',
-          level: 'A',
-          action: '恢复',
-          actionTime: '2025-9-3-13:11'
-        },
-        {
-          content: '温度28℃过高',
-          type: '参数超标',
-          time: '2025-9-3-11:45',
-          level: 'B',
-          action: '调整',
-          actionTime: '2025-9-3-12:30'
-        },
-        {
-          content: '洁净度异常',
-          type: '环境异常',
-          time: '2025-9-3-11:20',
-          level: 'A',
-          action: '清理',
-          actionTime: '2025-9-3-11:50'
-        },
-        {
-          content: '设备通讯中断',
-          type: '设备故障',
-          time: '2025-9-3-10:55',
-          level: 'C',
-          action: '重启',
-          actionTime: '2025-9-3-11:05'
-        },
-        {
-          content: '压力值偏低',
-          type: '参数异常',
-          time: '2025-9-3-10:30',
-          level: 'B',
-          action: '检查',
-          actionTime: '2025-9-3-10:45'
-        },
-        {
-          content: '电源电压不稳',
-          type: '电气故障',
-          time: '2025-9-3-10:10',
-          level: 'A',
-          action: '更换',
-          actionTime: '2025-9-3-10:25'
-        },
-        {
-          content: '传感器数据异常',
-          type: '设备异常',
-          time: '2025-9-3-09:50',
-          level: 'B',
-          action: '校准',
-          actionTime: '2025-9-3-10:00'
-        },
-        {
-          content: '网络连接超时',
-          type: '通讯故障',
-          time: '2025-9-3-09:30',
-          level: 'C',
-          action: '重连',
-          actionTime: '2025-9-3-09:35'
-        },
-        {
-          content: '内存使用率过高',
-          type: '系统异常',
-          time: '2025-9-3-09:15',
-          level: 'B',
-          action: '清理',
-          actionTime: '2025-9-3-09:20'
-        },
-        {
-          content: '磁盘空间不足',
-          type: '存储异常',
-          time: '2025-9-3-09:00',
-          level: 'A',
-          action: '扩容',
-          actionTime: '2025-9-3-09:10'
-        },
-        {
-          content: 'CPU温度过高',
-          type: '硬件故障',
-          time: '2025-9-3-08:45',
-          level: 'A',
-          action: '散热',
-          actionTime: '2025-9-3-08:50'
-        },
-        {
-          content: '数据库连接失败',
-          type: '数据异常',
-          time: '2025-9-3-08:30',
-          level: 'B',
-          action: '修复',
-          actionTime: '2025-9-3-08:35'
-        },
-        {
-          content: '配置文件损坏',
-          type: '配置异常',
-          time: '2025-9-3-08:15',
-          level: 'C',
-          action: '恢复',
-          actionTime: '2025-9-3-08:20'
-        },
-        {
-          content: '服务进程异常',
-          type: '进程故障',
-          time: '2025-9-3-08:00',
-          level: 'B',
-          action: '重启',
-          actionTime: '2025-9-3-08:05'
-        },
-        {
-          content: '日志文件过大',
-          type: '存储异常',
-          time: '2025-9-3-07:45',
-          level: 'C',
-          action: '压缩',
-          actionTime: '2025-9-3-07:50'
+      // 调用分页获取告警接口
+      const response = await alertApi.getList({
+        page: page,
+        size: size
+      });
+      
+      console.log('📊 获取告警数据响应:', response);
+      
+      // 处理响应数据
+      if (response && response.data) {
+        const newAlarms = response.data.map(item => ({
+          content: item.content || '未知报警',
+          type: item.category || '未知类型',
+          time: formatDateTime(item.alertTime) || '未知时间',
+          level: mapLevelToDisplay(item.level) || 'C',
+          action: item.action || '待处理',
+          actionTime: formatDateTime(item.actionTime) || '未知时间'
+        }));
+        
+        if (isLoadMore) {
+          // 加载更多时追加数据
+          alarmList.value = [...alarmList.value, ...newAlarms];
+        } else {
+          // 首次加载时替换数据
+          alarmList.value = newAlarms;
         }
-      ];
+        
+        // 判断是否还有更多数据
+        hasMoreData.value = newAlarms.length === size;
+        currentPage.value = page;
+        
+        // 保存查询事件（只在首次加载时保存）
+        if (!isLoadMore) {
+          await createQueryEvent('success', newAlarms.length);
+        }
+      } else {
+        console.warn('⚠️ 响应数据格式异常:', response);
+        if (!isLoadMore) {
+          alarmList.value = [];
+        }
+        hasMoreData.value = false;
+        
+        // 保存查询事件（无数据）
+        if (!isLoadMore) {
+          await createQueryEvent('empty', 0);
+        }
+      }
       
-      alarmList.value = mockAlarms;
       isLoading.value = false;
-      return Promise.resolve(mockAlarms);
+      isLoadingMore.value = false;
+      return Promise.resolve(response);
     } catch (error) {
-      console.error('获取历史报警记录失败:', error);
+      console.error('❌ 获取历史报警记录失败:', error);
       isLoading.value = false;
+      isLoadingMore.value = false;
+      
+      // 保存查询事件（错误）
+      if (!isLoadMore) {
+        await createQueryEvent('error', 0);
+      }
+      
+      // 显示错误提示
+      uni.showToast({
+        title: '获取报警记录失败',
+        icon: 'error',
+        duration: 2000
+      });
+      
       return Promise.reject(error);
     }
   },
@@ -367,6 +326,39 @@ const mqttAlarmService = {
   }
 };
 
+// 映射报警级别到显示格式
+const mapLevelToDisplay = (level) => {
+  const levelMap = {
+    '高危': 'A',
+    '中危': 'B', 
+    '低危': 'C',
+    'high': 'A',
+    'medium': 'B',
+    'low': 'C'
+  };
+  return levelMap[level] || 'C';
+};
+
+// 格式化时间
+const formatDateTime = (dateString) => {
+  if (!dateString) return '未知时间';
+  
+  try {
+    const date = new Date(dateString);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+    
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+  } catch (error) {
+    console.error('时间格式化失败:', error);
+    return dateString; // 如果格式化失败，返回原始字符串
+  }
+};
+
 // 获取级别样式类
 const getLevelClass = (level) => {
   switch (level) {
@@ -400,8 +392,19 @@ const onScroll = (e) => {
 };
 
 const onScrollToLower = () => {
-  console.log('滚动到底部');
-  // 可以在这里添加加载更多数据的逻辑
+  console.log('滚动到底部，尝试加载更多数据');
+  
+  // 如果正在加载或没有更多数据，则不处理
+  if (isLoadingMore.value || !hasMoreData.value) {
+    console.log('正在加载中或无更多数据，跳过');
+    return;
+  }
+  
+  // 加载下一页数据
+  const nextPage = currentPage.value + 1;
+  console.log(`📄 加载第${nextPage}页数据`);
+  
+  mqttAlarmService.getHistoryAlarms(nextPage, pageSize.value, true);
 };
 
 // 滚动到顶部
@@ -442,16 +445,78 @@ const stopRealtimeAlarm = () => {
   }
 };
 
+// 创建查询事件
+const createQueryEvent = async (status, dataCount) => {
+  try {
+    const currentTime = formatDateTime(new Date().toISOString())
+    const queryEvent = {
+      eventType: "报警记录查询",
+      eventTime: currentTime,
+      status: getEventStatus(status),
+      description: getEventDescription(status, dataCount),
+      deviceId: "ALARM_QUERY_001"
+    }
+
+    console.log('📤 提交报警查询事件:', queryEvent)
+    const response = await eventApi.create(queryEvent)
+    console.log('✅ 报警查询事件创建成功:', response)
+    
+  } catch (error) {
+    console.error('❌ 报警查询事件创建失败:', error)
+  }
+};
+
+// 获取事件状态
+const getEventStatus = (status) => {
+  const statusMap = {
+    'success': '已完成',
+    'empty': '已完成',
+    'error': '失败'
+  };
+  return statusMap[status] || '未知';
+};
+
+// 获取事件描述
+const getEventDescription = (status, dataCount) => {
+  const descriptions = {
+    'success': `成功查询到${dataCount}条报警记录数据`,
+    'empty': '查询报警记录，但未找到数据',
+    'error': '查询报警记录时发生错误'
+  };
+  return descriptions[status] || '未知查询状态';
+};
+
+// 刷新数据方法
+const refreshData = async () => {
+  console.log('🔄 刷新报警记录数据')
+  try {
+    // 重置分页状态
+    currentPage.value = 0;
+    hasMoreData.value = true;
+    alarmList.value = [];
+    
+    // 重新获取第一页数据
+    await mqttAlarmService.getHistoryAlarms(0, pageSize.value, false);
+  } catch (error) {
+    console.error('❌ 刷新数据失败:', error);
+  }
+};
+
+// 暴露方法给父组件
+defineExpose({
+  refreshData
+});
+
 // 组件生命周期
 onMounted(async () => {
   try {
     // 连接MQTT并初始化
-    await mqttAlarmService.connect();
-    await mqttAlarmService.subscribeAlarmData();
-    await mqttAlarmService.getHistoryAlarms();
+    // await mqttAlarmService.connect();
+    // await mqttAlarmService.subscribeAlarmData();
+    await mqttAlarmService.getHistoryAlarms(0, pageSize.value, false);
     
     // 开始实时报警获取
-    startRealtimeAlarm();
+    // startRealtimeAlarm();
   } catch (error) {
     console.error('报警系统初始化失败:', error);
     uni.showToast({
@@ -838,4 +903,44 @@ onUnmounted(() => {
     font-size: 30rpx;
   }
 }
+
+// 加载更多样式
+.load-more-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 30rpx 20rpx;
+  gap: 15rpx;
+  background-color: #ffffff;
+}
+
+.load-more-spinner {
+  width: 40rpx;
+  height: 40rpx;
+  border: 3rpx solid #e8eaed;
+  border-top: 3rpx solid #5f6368;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.load-more-text {
+  font-size: 24rpx;
+  color: #5f6368;
+  font-weight: 400;
+}
+
+.no-more-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 30rpx 20rpx;
+  background-color: #ffffff;
+}
+
+.no-more-text {
+  font-size: 24rpx;
+  color: #9aa0a6;
+  font-weight: 400;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/SystemLog.vue b/src/components/SystemLog.vue
index 0220335..4b1ee18 100644
--- a/src/components/SystemLog.vue
+++ b/src/components/SystemLog.vue
@@ -67,6 +67,17 @@
               <text class="table-empty-text">暂无数据</text>
             </view>
             
+            <!-- 加载更多提示 -->
+            <view class="load-more-container" v-if="isLoadingMore">
+              <view class="load-more-spinner"></view>
+              <text class="load-more-text">正在加载更多日志...</text>
+            </view>
+            
+            <!-- 没有更多数据提示 -->
+            <view class="no-more-container" v-if="!hasMoreData && logList.length > 0 && !isLoadingMore">
+              <text class="no-more-text">已加载全部数据</text>
+            </view>
+            
             <!-- 底部间距，确保最后一条记录完全显示 -->
             <view class="table-bottom-spacing"></view>
           </scroll-view>
@@ -78,6 +89,7 @@
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue';
+import { eventApi } from '@/utils/api.js';
 
 // 日志数据
 const logList = ref([]);
@@ -85,12 +97,50 @@ const isLoading = ref(false);
 const isConnected = ref(false);
 const hasInitialized = ref(false);
 
+// 分页相关
+const currentPage = ref(0);
+const pageSize = ref(20);
+const hasMoreData = ref(true);
+const isLoadingMore = ref(false);
+
 // 滚动相关
 const scrollTop = ref(0);
 const isScrolling = ref(false);
 
 // 移除空行占位逻辑，没有数据时只显示"暂无数据"
 
+// 状态映射函数
+const mapStatusToDisplay = (status) => {
+  const statusMap = {
+    '已完成': '正常',
+    '进行中': '进行中',
+    '失败': '异常',
+    '错误': '异常',
+    '成功': '正常',
+    '正常': '正常',
+    '异常': '异常'
+  };
+  return statusMap[status] || status || '未知';
+};
+
+// 时间格式化函数
+const formatDateTime = (dateString) => {
+  if (!dateString) return '未知时间';
+  try {
+    const date = new Date(dateString);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+  } catch (error) {
+    console.error('时间格式化失败:', error);
+    return dateString;
+  }
+};
+
 // MQTT日志服务接口（预留）
 const mqttLogService = {
   // 连接MQTT服务器
@@ -116,190 +166,54 @@ const mqttLogService = {
     return Promise.resolve();
   },
   
-  // 获取历史日志
-  getHistoryLogs: async (limit = 50) => {
-    console.log(`获取历史日志，限制${limit}条`);
+  // 获取历史日志（分页）
+  getHistoryLogs: async (page = 0, size = 20, isLoadMore = false) => {
+    console.log(`📄 加载第${page}页数据，每页${size}条`);
     try {
-      isLoading.value = true;
+      if (!isLoadMore) {
+        isLoading.value = true;
+      } else {
+        isLoadingMore.value = true;
+      }
       hasInitialized.value = true;
-      // 模拟请求延迟
-      await new Promise(resolve => setTimeout(resolve, 800));
       
-      // 模拟日志数据
-      const mockLogs = [
-        {
-          event: '开机',
-          time: '2025-9-3-12:01',
-          status: '正常'
-        },
-        {
-          event: '报警',
-          time: '2025-9-3-12:01',
-          status: '异常'
-        },
-        {
-          event: '系统启动',
-          time: '2025-9-3-11:58',
-          status: '正常'
-        },
-        {
-          event: '温度检测',
-          time: '2025-9-3-11:55',
-          status: '正常'
-        },
-        {
-          event: '湿度异常',
-          time: '2025-9-3-11:52',
-          status: '异常'
-        },
-        {
-          event: '设备自检',
-          time: '2025-9-3-11:50',
-          status: '正常'
-        },
-        {
-          event: '网络连接',
-          time: '2025-9-3-11:48',
-          status: '正常'
-        },
-        {
-          event: '参数校准',
-          time: '2025-9-3-11:45',
-          status: '正常'
-        },
-        {
-          event: '数据备份',
-          time: '2025-9-3-11:40',
-          status: '正常'
-        },
-        {
-          event: '系统更新',
-          time: '2025-9-3-11:35',
-          status: '正常'
-        },
-        {
-          event: '安全检查',
-          time: '2025-9-3-11:30',
-          status: '正常'
-        },
-        {
-          event: '性能监控',
-          time: '2025-9-3-11:25',
-          status: '正常'
-        },
-        {
-          event: '日志清理',
-          time: '2025-9-3-11:20',
-          status: '正常'
-        },
-        {
-          event: '配置更新',
-          time: '2025-9-3-11:15',
-          status: '正常'
-        },
-        {
-          event: '服务重启',
-          time: '2025-9-3-11:10',
-          status: '正常'
-        },
-        {
-          event: '数据库连接',
-          time: '2025-9-3-11:05',
-          status: '正常'
-        },
-        {
-          event: '缓存清理',
-          time: '2025-9-3-11:00',
-          status: '正常'
-        },
-        {
-          event: '定时任务',
-          time: '2025-9-3-10:55',
-          status: '正常'
-        },
-        {
-          event: '内存检查',
-          time: '2025-9-3-10:50',
-          status: '正常'
-        },
-        {
-          event: '磁盘检查',
-          time: '2025-9-3-10:45',
-          status: '正常'
-        }
-      ];
+      // 调用事件API获取分页数据
+      const response = await eventApi.getList({ page: page, size: size });
       
-      logList.value = mockLogs;
-      isLoading.value = false;
-      return Promise.resolve(mockLogs);
-    } catch (error) {
-      console.error('获取历史日志失败:', error);
-      isLoading.value = false;
-      return Promise.reject(error);
-    }
-  },
-  
-  // 获取实时日志
-  getRealtimeLogs: async () => {
-    console.log('获取实时日志');
-    try {
-      // 模拟实时日志数据
-      const events = ['温度监测', '湿度检测', '设备巡检', '数据同步', '状态上报'];
-      const statuses = ['正常', '异常', '警告'];
+      // 将API数据转换为日志格式
+      const newLogs = response.data.map(item => ({
+        event: item.eventType || '未知事件',
+        time: formatDateTime(item.eventTime) || '未知时间',
+        status: mapStatusToDisplay(item.status) || '未知'
+      }));
       
-      const newLog = {
-        event: events[Math.floor(Math.random() * events.length)],
-        time: new Date().toLocaleString('zh-CN', {
-          year: 'numeric',
-          month: 'numeric',
-          day: 'numeric',
-          hour: '2-digit',
-          minute: '2-digit'
-        }).replace(/\//g, '-').replace(', ', '-'),
-        status: statuses[Math.floor(Math.random() * statuses.length)]
-      };
-      
-      // 添加到日志列表顶部
-      logList.value.unshift(newLog);
-      
-      // 限制日志数量，保持最新的50条
-      if (logList.value.length > 50) {
-        logList.value = logList.value.slice(0, 50);
+      if (isLoadMore) {
+        // 加载更多时追加数据
+        logList.value = [...logList.value, ...newLogs];
+      } else {
+        // 首次加载时替换数据
+        logList.value = newLogs;
       }
       
-      // 自动滚动到顶部显示最新日志
-      setTimeout(() => {
-        scrollToTop();
-      }, 100);
+      // 更新分页状态
+      currentPage.value = page;
+      hasMoreData.value = newLogs.length === size; // 如果返回的数据少于请求的数量，说明没有更多数据
+      
+      console.log(`✅ 第${page}页数据加载完成，共${newLogs.length}条`);
       
-      return Promise.resolve(newLog);
     } catch (error) {
-      console.error('获取实时日志失败:', error);
-      return Promise.reject(error);
+      console.error('❌ 获取历史日志失败:', error);
+      if (!isLoadMore) {
+        // 首次加载失败时显示空数据
+        logList.value = [];
+      }
+    } finally {
+      isLoading.value = false;
+      isLoadingMore.value = false;
     }
   },
   
-  // 清空日志
-  clearLogs: async () => {
-    console.log('清空日志');
-    try {
-      // 模拟清空操作
-      await new Promise(resolve => setTimeout(resolve, 300));
-      logList.value = [];
-      uni.showToast({
-        title: '日志已清空',
-        icon: 'success'
-      });
-      return Promise.resolve();
-    } catch (error) {
-      console.error('清空日志失败:', error);
-      uni.showToast({
-        title: '清空失败',
-        icon: 'error'
-      });
-      return Promise.reject(error);
-    }
-  },
+  
   
   // 断开连接
   disconnect: () => {
@@ -342,8 +256,15 @@ const onScroll = (e) => {
 };
 
 const onScrollToLower = () => {
-  console.log('滚动到底部');
-  // 可以在这里添加加载更多数据的逻辑
+  console.log('📜 滚动到底部，触发加载更多');
+  if (isLoadingMore.value || !hasMoreData.value) {
+    console.log('⏸️ 正在加载中或没有更多数据，跳过加载');
+    return;
+  }
+  
+  const nextPage = currentPage.value + 1;
+  console.log(`📄 开始加载第${nextPage}页数据`);
+  mqttLogService.getHistoryLogs(nextPage, pageSize.value, true);
 };
 
 // 滚动到顶部
@@ -351,49 +272,15 @@ const scrollToTop = () => {
   scrollTop.value = scrollTop.value === 0 ? 1 : 0;
 };
 
-// 滚动到底部
-const scrollToBottom = () => {
-  // 使用nextTick确保DOM更新完成
-  nextTick(() => {
-    // 计算滚动到底部的位置
-    const scrollHeight = logList.value.length * 80; // 假设每行80rpx
-    scrollTop.value = scrollHeight + 100; // 额外100rpx确保完全滚动到底部
-  });
-};
 
-// 定时获取实时日志
-let realtimeTimer = null;
-
-const startRealtimeLog = () => {
-  if (realtimeTimer) return;
-  
-  realtimeTimer = setInterval(() => {
-    if (isConnected.value && !isLoading.value) {
-      // 30%概率生成新日志
-      if (Math.random() < 0.3) {
-        mqttLogService.getRealtimeLogs();
-      }
-    }
-  }, 5000); // 每5秒检查一次
-};
-
-const stopRealtimeLog = () => {
-  if (realtimeTimer) {
-    clearInterval(realtimeTimer);
-    realtimeTimer = null;
-  }
-};
 
 // 组件生命周期
 onMounted(async () => {
   try {
     // 连接MQTT并初始化
-    await mqttLogService.connect();
-    await mqttLogService.subscribeLogData();
-    await mqttLogService.getHistoryLogs();
-    
-    // 开始实时日志获取
-    startRealtimeLog();
+    // await mqttLogService.connect();
+    // await mqttLogService.subscribeLogData();
+    await mqttLogService.getHistoryLogs(0, pageSize.value, false);
   } catch (error) {
     console.error('日志系统初始化失败:', error);
     uni.showToast({
@@ -403,8 +290,28 @@ onMounted(async () => {
   }
 });
 
+// 刷新数据方法
+const refreshData = async () => {
+  console.log('🔄 刷新系统日志数据')
+  try {
+    // 重置分页状态
+    currentPage.value = 0;
+    hasMoreData.value = true;
+    logList.value = [];
+    
+    // 重新获取第一页数据
+    await mqttLogService.getHistoryLogs(0, pageSize.value, false);
+  } catch (error) {
+    console.error('❌ 刷新数据失败:', error);
+  }
+};
+
+// 暴露方法给父组件
+defineExpose({
+  refreshData
+});
+
 onUnmounted(() => {
-  stopRealtimeLog();
   mqttLogService.disconnect();
   
   // 清理滚动定时器
@@ -759,4 +666,44 @@ onUnmounted(() => {
     font-size: 30rpx;
   }
 }
+
+/* 加载更多样式 */
+.load-more-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 30rpx;
+  gap: 20rpx;
+}
+
+.load-more-spinner {
+  width: 40rpx;
+  height: 40rpx;
+  border: 4rpx solid #f3f3f3;
+  border-top: 4rpx solid #3f51b5;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.load-more-text {
+  font-size: 28rpx;
+  color: #666;
+}
+
+.no-more-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 30rpx;
+}
+
+.no-more-text {
+  font-size: 28rpx;
+  color: #999;
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/alarm/index.vue b/src/pages/alarm/index.vue
index b9d8fb6..ef71eef 100644
--- a/src/pages/alarm/index.vue
+++ b/src/pages/alarm/index.vue
@@ -7,122 +7,7 @@
     
     <!-- 内容区域 -->
     <view class="tabbar-content">
-      <AlarmRecord />
-    
-    <!-- 报警统计 -->
-    <!-- <view class="alarm-statistics">
-      <view class="stat-item">
-        <text class="stat-label">总报警数</text>
-        <text class="stat-value total">{{ totalAlarms }}</text>
-      </view>
-      <view class="stat-item">
-        <text class="stat-label">未处理</text>
-        <text class="stat-value pending">{{ pendingAlarms }}</text>
-      </view>
-      <view class="stat-item">
-        <text class="stat-label">已处理</text>
-        <text class="stat-value resolved">{{ resolvedAlarms }}</text>
-      </view>
-      <view class="stat-item">
-        <text class="stat-label">紧急报警</text>
-        <text class="stat-value urgent">{{ urgentAlarms }}</text>
-      </view>
-    </view> -->
-    
-    <!-- 筛选区域 -->
-    <!-- <view class="filter-section">
-      <view class="filter-row">
-        <view class="filter-item">
-          <text class="filter-label">报警级别</text>
-          <picker :value="levelIndex" :range="levelOptions" @change="onLevelChange">
-            <view class="picker-view">
-              <text>{{ levelOptions[levelIndex] }}</text>
-              <text class="picker-arrow">▼</text>
-            </view>
-          </picker>
-        </view>
-        
-        <view class="filter-item">
-          <text class="filter-label">处理状态</text>
-          <picker :value="statusIndex" :range="statusOptions" @change="onStatusChange">
-            <view class="picker-view">
-              <text>{{ statusOptions[statusIndex] }}</text>
-              <text class="picker-arrow">▼</text>
-            </view>
-          </picker>
-        </view>
-      </view>
-      
-      <view class="filter-row">
-        <view class="filter-item">
-          <text class="filter-label">时间范围</text>
-          <picker mode="date" :value="alarmDate" @change="onDateChange">
-            <view class="picker-view">
-              <text>{{ alarmDate }}</text>
-              <text class="picker-arrow">▼</text>
-            </view>
-          </picker>
-        </view>
-        
-        <button class="search-button" @click="searchAlarms">搜索</button>
-      </view>
-    </view> -->
-    
-    <!-- 报警列表 -->
-    <!-- <view class="alarms-container">
-      <view class="alarms-header">
-        <text class="alarms-title">报警详情</text>
-        <view class="header-actions">
-          <button class="action-button" @click="refreshAlarms">刷新</button>
-          <button class="action-button" @click="exportAlarms">导出</button>
-          <button class="action-button clear" @click="clearAlarms">清空</button>
-        </view>
-      </view>
-      
-      <scroll-view class="alarms-list" scroll-y="true">
-        <view class="alarm-item" v-for="(alarm, index) in alarms" :key="index" :class="alarm.level">
-          <view class="alarm-header">
-            <view class="alarm-level" :class="alarm.level">
-              <text>{{ alarm.levelText }}</text>
-            </view>
-            <view class="alarm-status" :class="alarm.status">
-              <text>{{ alarm.statusText }}</text>
-            </view>
-            <text class="alarm-time">{{ alarm.time }}</text>
-          </view>
-          
-          <view class="alarm-content">
-            <text class="alarm-title">{{ alarm.title }}</text>
-            <text class="alarm-description">{{ alarm.description }}</text>
-          </view>
-          
-          <view class="alarm-details">
-            <view class="detail-item">
-              <text class="detail-label">报警源:</text>
-              <text class="detail-value">{{ alarm.source }}</text>
-            </view>
-            <view class="detail-item">
-              <text class="detail-label">当前值:</text>
-              <text class="detail-value">{{ alarm.currentValue }}</text>
-            </view>
-            <view class="detail-item">
-              <text class="detail-label">阈值:</text>
-              <text class="detail-value">{{ alarm.threshold }}</text>
-            </view>
-          </view>
-          
-          <view class="alarm-actions" v-if="alarm.status === 'pending'">
-            <button class="action-button resolve" @click="resolveAlarm(alarm)">处理</button>
-            <button class="action-button ignore" @click="ignoreAlarm(alarm)">忽略</button>
-          </view>
-          
-          <view class="alarm-resolution" v-if="alarm.status === 'resolved'">
-            <text class="resolution-text">处理人: {{ alarm.resolver }}</text>
-            <text class="resolution-time">处理时间: {{ alarm.resolveTime }}</text>
-          </view>
-        </view>
-      </scroll-view>
-    </view> -->
+      <AlarmRecord ref="alarmRecord" />
     </view>
   </view>
 </template>
@@ -133,6 +18,11 @@ export default {
   components: {
     AlarmRecord
   },
+  onShow() {
+    console.log('📱 报警记录页面显示，触发页面更新')
+    // 触发子组件重新初始化
+    this.$refs.alarmRecord?.refreshData?.()
+  },
   data() {
     return {
       totalAlarms: 28,
diff --git a/src/pages/environment/index.vue b/src/pages/environment/index.vue
index a83827c..dc63ce4 100644
--- a/src/pages/environment/index.vue
+++ b/src/pages/environment/index.vue
@@ -52,7 +52,8 @@
             <view class="detail-progress-fill temperature-progress" :style="{ width: temperatureProgress + '%' }"></view>
           </view>
           <view class="detail-range">
-            <text class="detail-range-text">{{ temperatureRange.min }}°C - {{ temperatureRange.max }}°C</text>
+            <!-- <text class="detail-range-text">{{ temperatureRange.min }}°C - {{ temperatureRange.max }}°C</text> -->
+            <text class="detail-range-text">{{ 0 }}°C - {{ 100 }}°C</text>
           </view>
         </view>
         
@@ -66,7 +67,8 @@
             <view class="detail-progress-fill humidity-progress" :style="{ width: humidityProgress + '%' }"></view>
           </view>
           <view class="detail-range">
-            <text class="detail-range-text">{{ humidityRange.min }}% - {{ humidityRange.max }}%</text>
+            <!-- <text class="detail-range-text">{{ humidityRange.min }}% - {{ humidityRange.max }}%</text> -->
+            <text class="detail-range-text">{{ 0 }}% - {{ 100 }}%</text>
           </view>
         </view>
         
@@ -80,7 +82,8 @@
             <view class="detail-progress-fill cleanliness-progress" :style="{ width: cleanlinessProgress + '%' }"></view>
           </view>
           <view class="detail-range">
-            <text class="detail-range-text">暂无数据</text>
+            <!-- <text class="detail-range-text">暂无数据</text> -->
+            <text class="detail-range-text">{{ 0 }}% - {{ 100 }}%</text>
           </view>
         </view>
       </view>
@@ -121,12 +124,28 @@
         
         <view class="control-ranges">
           <view class="range-item">
-            <text class="range-label">温度控制</text>
-            <text class="range-value">{{ temperatureRange.min }}°C - {{ temperatureRange.max }}°C</text>
+            <view class="range-header">
+              <text class="range-label">温度控制</text>
+              <view class="range-status" :class="getTemperatureStatus().class">
+                <text class="status-text">{{ getTemperatureStatus().text }}</text>
+              </view>
+            </view>
+            <view class="range-content">
+              <text class="current-value">当前: {{ temperature }}°C</text>
+              <text class="range-value">范围: {{ temperatureRange.min }}°C - {{ temperatureRange.max }}°C</text>
+            </view>
           </view>
           <view class="range-item">
-            <text class="range-label">湿度控制</text>
-            <text class="range-value">{{ humidityRange.min }}% - {{ humidityRange.max }}%</text>
+            <view class="range-header">
+              <text class="range-label">湿度控制</text>
+              <view class="range-status" :class="getHumidityStatus().class">
+                <text class="status-text">{{ getHumidityStatus().text }}</text>
+              </view>
+            </view>
+            <view class="range-content">
+              <text class="current-value">当前: {{ humidity }}%</text>
+              <text class="range-value">范围: {{ humidityRange.min }}% - {{ humidityRange.max }}%</text>
+            </view>
           </view>
         </view>
       </view>
@@ -202,7 +221,7 @@
 <script>
 import mqttDataManager from '@/utils/mqttDataManager.js'
 import { manualReconnect, sendMqttData } from '@/utils/sendMqtt.js'
-import { thDataApi } from '@/utils/api.js'
+import { thDataApi, alertApi, eventApi } from '@/utils/api.js'
 
 export default {
   data() {
@@ -215,33 +234,56 @@ export default {
       cleanlinessProgress: 0,
       lastUpdate: '暂无数据',
       temperatureRange: {
-        min: 0,
-        max: 100
+        min: 25,
+        max: 35
       },
       humidityRange: {
-        min: 0,
-        max: 100
+        min: 40,
+        max: 70
       },
       tempSettings: {
         min: 25,
         max: 35
       },
       humiditySettings: {
-        min: 0,
-        max: 100
+        min: 40,
+        max: 70
       },
       connectionStatus: {
         isConnected: false,
         lastUpdate: null
       },
       targetTemperature: 30,
+      targetHumidity: 50, // 空调设定湿度
+      // 报警相关数据
+      acFaultStatus: 0, // 空调故障状态，1表示故障
+      alertHistory: [], // 报警历史记录
+      // 系统启动事件相关
+      hasCreatedStartupEvent: false, // 是否已创建启动事件
     }
   },
   onLoad() {
     console.log('环境参数页面加载')
+    
+    // 从本地存储读取是否已创建启动事件的状态
+    const hasCreatedStartupEvent = uni.getStorageSync('hasCreatedStartupEvent')
+    if (hasCreatedStartupEvent) {
+      this.hasCreatedStartupEvent = true
+      console.log('📱 从本地存储读取到启动事件状态: 已创建')
+    }
+    
     this.initMqttListener()
     // 获取最新空调温度
     this.getLatestAirConditionerTemperature()
+    // 首次进入系统时创建启动事件
+    this.createStartupEventIfNeeded()
+  },
+  onShow() {
+    console.log('📱 环境参数页面显示，触发页面更新')
+    // 只有在非首次显示时才重新获取最新空调温度
+    if (this.hasCreatedStartupEvent) {
+      this.getLatestAirConditionerTemperature()
+    }
   },
   onUnload() {
     // console.log('🔌 环境参数页面卸载，清理资源...')
@@ -265,6 +307,67 @@ export default {
     // console.log('✅ 环境参数页面资源清理完成')
   },
   methods: {
+    // 首次进入系统时创建启动事件
+    async createStartupEventIfNeeded() {
+      // 检查是否已经创建过启动事件
+      if (this.hasCreatedStartupEvent) {
+        console.log('✅ 启动事件已存在，跳过创建')
+        return
+      }
+
+      try {
+        console.log('🚀 首次进入系统，创建启动事件...')
+        
+        const currentTime = this.formatDateTime(new Date())
+        const startupEvent = {
+          eventType: "设备重启",
+          eventTime: currentTime,
+          status: "已完成",
+          description: "设备正常重启维护",
+          deviceId: "AC_001"
+        }
+
+        console.log('📤 提交启动事件:', startupEvent)
+        const response = await eventApi.create(startupEvent)
+        console.log('✅ 启动事件创建成功:', response)
+        
+        // 标记已创建启动事件
+        this.hasCreatedStartupEvent = true
+        
+        // 可以保存到本地存储，避免刷新页面后重复创建
+        uni.setStorageSync('hasCreatedStartupEvent', true)
+        
+      } catch (error) {
+        console.error('❌ 启动事件创建失败:', error)
+      }
+    },
+
+    // 获取温度控制状态
+    getTemperatureStatus() {
+      if (this.temperature === 0) {
+        return { text: '无数据', class: 'no-data' }
+      } else if (this.temperature >= this.temperatureRange.min && this.temperature <= this.temperatureRange.max) {
+        return { text: '正常', class: 'normal' }
+      } else if (this.temperature < this.temperatureRange.min) {
+        return { text: '偏低', class: 'low' }
+      } else {
+        return { text: '偏高', class: 'high' }
+      }
+    },
+    
+    // 获取湿度控制状态
+    getHumidityStatus() {
+      if (this.humidity === 0) {
+        return { text: '无数据', class: 'no-data' }
+      } else if (this.humidity >= this.humidityRange.min && this.humidity <= this.humidityRange.max) {
+        return { text: '正常', class: 'normal' }
+      } else if (this.humidity < this.humidityRange.min) {
+        return { text: '偏低', class: 'low' }
+      } else {
+        return { text: '偏高', class: 'high' }
+      }
+    },
+    
     // 获取最新空调温度
     async getLatestAirConditionerTemperature() {
       try {
@@ -347,6 +450,11 @@ export default {
     updateEnvironmentData(data) {
       // console.log('🌡️ 环境参数页面更新数据:', data)
       
+      // 处理空调故障状态
+      if (data.deviceType === 'AC' && data.faultStatus !== undefined) {
+        this.acFaultStatus = data.faultStatus
+      }
+      
       // 只处理WSD设备的数据
       if (data.deviceType === 'WSD') {
         if (data.temperature !== undefined) {
@@ -363,6 +471,9 @@ export default {
         
         this.lastUpdate = data.time || new Date().toLocaleString('zh-CN')
         
+        // 检查报警条件，传入MQTT原始数据
+        this.checkAlerts(data)
+        
         // console.log('✅ 环境数据更新完成:', {
         //   temperature: this.temperature,
         //   humidity: this.humidity,
@@ -373,6 +484,137 @@ export default {
       }
     },
     
+    // 格式化日期时间为指定格式
+    formatDateTime(date) {
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+      const hours = String(date.getHours()).padStart(2, '0')
+      const minutes = String(date.getMinutes()).padStart(2, '0')
+      const seconds = String(date.getSeconds()).padStart(2, '0')
+      
+      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+    },
+    
+    // 检查报警条件
+    checkAlerts(mqttData) {
+      const currentTime = this.formatDateTime(new Date())
+      
+      // 只处理WSD设备的数据
+      if (mqttData.deviceType !== 'WSD') {
+        return
+      }
+      
+      // 获取MQTT原始数据
+      const mqttTemperature = mqttData.temperature
+      const mqttHumidity = mqttData.humidity
+      
+      // 1. 温度报警：使用环境控制设置的区间（使用MQTT原始数据）
+      if (mqttTemperature !== undefined && (mqttTemperature < this.temperatureRange.min || mqttTemperature > this.temperatureRange.max)) {
+        const alert = {
+          // content: `温度传感器异常，读数${mqttTemperature}°C超出控制范围${this.temperatureRange.min}°C-${this.temperatureRange.max}°C`,
+          content: `温度超出控制范围`,
+          category: "传感器故障",
+          alertTime: currentTime,
+          level: "高危",
+          action: "检查温度传感器连接",
+          actionTime: currentTime,
+          deviceId: "WSD_001"
+        }
+        this.logAlert(alert)
+      }
+      
+      // 2. 湿度报警：使用环境控制设置的区间（使用MQTT原始数据）
+      if (mqttHumidity !== undefined && (mqttHumidity < this.humidityRange.min || mqttHumidity > this.humidityRange.max)) {
+        const alert = {
+          // content: `湿度传感器异常，读数${mqttHumidity}%超出控制范围${this.humidityRange.min}%-${this.humidityRange.max}%`,
+          content: `温度超出控制范围`,
+          category: "传感器故障",
+          alertTime: currentTime,
+          level: "高危",
+          action: "检查湿度传感器连接",
+          actionTime: currentTime,
+          deviceId: "WSD_001"
+        }
+        this.logAlert(alert)
+      }
+      
+      // 3. 空调故障报警：acFaultStatus为1
+      if (this.acFaultStatus === 1) {
+        const alert = {
+          // content: "空调故障，需要手动设置温度",
+          content: "空调报警",
+          category: "设备故障",
+          alertTime: currentTime,
+          level: "高危",
+          action: "手动调节空调温度",
+          actionTime: currentTime,
+          deviceId: "AC_001"
+        }
+        this.logAlert(alert)
+      }
+      
+      // 4. 温度偏差报警：|温湿度计温度 - 空调设定温度| / 空调设定温度 > 30%（使用MQTT原始数据）
+      if (mqttTemperature !== undefined && this.targetTemperature > 0) {
+        const temperatureDiff = Math.abs(mqttTemperature - this.targetTemperature)
+        const deviationPercent = (temperatureDiff / this.targetTemperature) * 100
+        
+        if (deviationPercent > 30) {
+          const alert = {
+            // content: `温度偏差过大，实际${mqttTemperature}°C与设定${this.targetTemperature}°C偏差${deviationPercent.toFixed(1)}%`,
+            content: `温度偏差过大`,
+            category: "温度控制异常",
+            alertTime: currentTime,
+            level: "中危",
+            action: "调整空调设定温度",
+            actionTime: currentTime,
+            deviceId: "AC_001"
+          }
+          this.logAlert(alert)
+        }
+      }
+      
+      // 5. 湿度偏差报警：|温湿度计湿度 - 空调设定湿度| / 空调设定湿度 > 30%（使用MQTT原始数据）
+      if (mqttHumidity !== undefined && this.targetHumidity > 0) {
+        const humidityDiff = Math.abs(mqttHumidity - this.targetHumidity)
+        const deviationPercent = (humidityDiff / this.targetHumidity) * 100
+        
+        if (deviationPercent > 30) {
+          const alert = {
+            // content: `湿度偏差过大，实际${mqttHumidity}%与设定${this.targetHumidity}%偏差${deviationPercent.toFixed(1)}%`,
+            content: `湿度偏差过大`,
+            category: "湿度控制异常",
+            alertTime: currentTime,
+            level: "中危",
+            action: "调整空调设定湿度",
+            actionTime: currentTime,
+            deviceId: "AC_001"
+          }
+          this.logAlert(alert)
+        }
+      }
+    },
+    
+    // 记录报警到控制台并调用创建告警接口
+    async logAlert(alert) {
+      console.log('🚨 报警触发:', JSON.stringify(alert, null, 2))
+      this.alertHistory.push(alert)
+      
+      // 调用创建告警接口
+      try {
+        console.log('📤 正在创建告警记录...')
+        const response = await alertApi.create(alert)
+        console.log('✅ 告警记录创建成功:', response)
+      } catch (error) {
+        console.error('❌ 告警记录创建失败:', error)
+      }
+      
+      // 限制报警历史记录数量，避免内存溢出
+      if (this.alertHistory.length > 100) {
+        this.alertHistory = this.alertHistory.slice(-50)
+      }
+    },
+    
     // 降低目标温度
     decreaseTemperature() {
       if (this.targetTemperature > 16) {
@@ -409,8 +651,16 @@ export default {
           //   duration: 1500
           // })
           
-          // 发送空调参数到MQTT
-          this.sendAirConditionerParams()
+        // 发送空调参数到MQTT
+        this.sendAirConditionerParams()
+        
+        // 温度变化后检查报警（使用当前页面数据模拟MQTT数据）
+        const mockMqttData = {
+          deviceType: 'WSD',
+          temperature: this.temperature,
+          humidity: this.humidity
+        }
+        this.checkAlerts(mockMqttData)
         },
         
         // 发送空调参数
@@ -869,25 +1119,68 @@ export default {
 }
 
 .range-item {
+  padding: 20rpx;
+  background: #f8fbff;
+  border-radius: 12rpx;
+  border-left: 4rpx solid #4a90e2;
+}
+
+.range-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 15rpx 20rpx;
-  // background: #f8fbff;
-  border-radius: 12rpx;
-  // border-left: 4rpx solid #4a90e2;
+  margin-bottom: 12rpx;
 }
 
 .range-label {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: 600;
+}
+
+.range-status {
+  padding: 6rpx 12rpx;
+  border-radius: 20rpx;
+  font-size: 22rpx;
+  font-weight: 500;
+}
+
+.range-status.normal {
+  background-color: #e8f5e8;
+  color: #4caf50;
+}
+
+.range-status.low {
+  background-color: #fff3e0;
+  color: #ff9800;
+}
+
+.range-status.high {
+  background-color: #ffebee;
+  color: #f44336;
+}
+
+.range-status.no-data {
+  background-color: #f5f5f5;
+  color: #999;
+}
+
+.range-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx;
+}
+
+.current-value {
   font-size: 26rpx;
-  color: #666;
+  color: #4a90e2;
   font-weight: 500;
 }
 
 .range-value {
-  font-size: 30rpx;
-  color: #4a90e2;
-  font-weight: 500;
+  font-size: 24rpx;
+  color: #666;
+  font-weight: 400;
 }
 
 .settings-button {
diff --git a/src/pages/log/index.vue b/src/pages/log/index.vue
index 3ef4d3e..bf1f290 100644
--- a/src/pages/log/index.vue
+++ b/src/pages/log/index.vue
@@ -16,7 +16,7 @@
             </view>
           </picker>
         </view> -->
-      <SystemLog />
+      <SystemLog ref="systemLog" />
     
     <!-- 筛选区域 -->
     <!-- <view class="filter-section">
@@ -167,6 +167,11 @@ export default {
   onLoad() {
     console.log('系统日志页面加载')
   },
+  onShow() {
+    console.log('📱 系统日志页面显示，触发页面更新')
+    // 触发子组件重新初始化
+    this.$refs.systemLog?.refreshData?.()
+  },
   methods: {
     onLevelChange(e) {
       this.levelIndex = e.detail.value
diff --git a/src/pages/parameter/index.vue b/src/pages/parameter/index.vue
index f1e67e3..cf6b1a6 100644
--- a/src/pages/parameter/index.vue
+++ b/src/pages/parameter/index.vue
@@ -67,7 +67,7 @@
 
 <script>
 import mqttDataManager from '@/utils/mqttDataManager.js'
-import { dataHistoryApi } from '@/utils/api.js'
+import { dataHistoryApi, eventApi } from '@/utils/api.js'
 import EChart from '@/uni_modules/e-chart/components/e-chart/e-chart.vue'
 
 export default {
@@ -99,6 +99,8 @@ export default {
         lastUpdateTime: null,
         dataSource: 'empty' // 'api' | 'empty' | 'error'
       },
+      // 页面初始化状态
+      hasInitialized: false,
       // ECharts配置选项
       temperatureOption: {
         title: {
@@ -312,6 +314,16 @@ export default {
     // 调用历史数据接口
     this.getHistoryData()
   },
+  onShow() {
+    console.log('📱 参数记录页面显示，触发页面更新')
+    // 只有在非首次显示时才重新获取历史数据
+    // 首次显示时已经在onLoad中获取过了
+    if (this.hasInitialized) {
+      this.getHistoryData()
+    } else {
+      this.hasInitialized = true
+    }
+  },
   onUnload() {
     // 页面卸载时移除监听器
     if (this.dataUpdateHandler) {
@@ -467,6 +479,9 @@ export default {
             lastUpdateTime: new Date().toLocaleString(),
             dataSource: 'api'
           }
+          
+          // 保存查询事件
+          await this.createQueryEvent('success', response.length)
         } else {
           console.log('📊 没有历史数据，显示空状态')
           // 没有数据时显示空状态
@@ -478,6 +493,9 @@ export default {
             lastUpdateTime: new Date().toLocaleString(),
             dataSource: 'empty'
           }
+          
+          // 保存查询事件（无数据）
+          await this.createQueryEvent('empty', 0)
         }
         
         return response
@@ -494,6 +512,9 @@ export default {
           dataSource: 'error'
         }
         
+        // 保存查询事件（错误）
+        await this.createQueryEvent('error', 0)
+        
         // 显示错误提示
         uni.showToast({
           title: '数据加载失败',
@@ -680,6 +701,58 @@ export default {
           this.$refs.pm25ChartRef.setOption(this.pm25Option)
         }
       }
+    },
+    
+    // 创建查询事件
+    async createQueryEvent(status, dataCount) {
+      try {
+        const currentTime = this.formatDateTime(new Date())
+        const queryEvent = {
+          eventType: "参数记录查询",
+          eventTime: currentTime,
+          status: this.getEventStatus(status),
+          description: this.getEventDescription(status, dataCount),
+          deviceId: "PARAMETER_QUERY_001"
+        }
+
+        console.log('📤 提交查询事件:', queryEvent)
+        const response = await eventApi.create(queryEvent)
+        console.log('✅ 查询事件创建成功:', response)
+        
+      } catch (error) {
+        console.error('❌ 查询事件创建失败:', error)
+      }
+    },
+    
+    // 获取事件状态
+    getEventStatus(status) {
+      const statusMap = {
+        'success': '已完成',
+        'empty': '已完成',
+        'error': '失败'
+      };
+      return statusMap[status] || '未知';
+    },
+    
+    // 获取事件描述
+    getEventDescription(status, dataCount) {
+      const descriptions = {
+        'success': `成功查询到${dataCount}条参数记录数据`,
+        'empty': '查询参数记录，但未找到数据',
+        'error': '查询参数记录时发生错误'
+      };
+      return descriptions[status] || '未知查询状态';
+    },
+    
+    // 时间格式化函数
+    formatDateTime(date) {
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+      const hours = String(date.getHours()).padStart(2, '0')
+      const minutes = String(date.getMinutes()).padStart(2, '0')
+      const seconds = String(date.getSeconds()).padStart(2, '0')
+      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
     }
   }
 }
diff --git a/src/pages/visual/index.vue b/src/pages/visual/index.vue
index c88e579..0603852 100644
--- a/src/pages/visual/index.vue
+++ b/src/pages/visual/index.vue
@@ -52,6 +52,10 @@ export default {
   onLoad() {
     console.log('视觉监控页面加载')
   },
+  onShow() {
+    console.log('📱 视觉监控页面显示，触发页面更新')
+    // 可以在这里添加重新连接摄像头等逻辑
+  },
   methods: {
     connectCamera() {
       uni.showLoading({