diff --git a/static/index.html b/static/index.html index 6b4c779..d86668c 100644 --- a/static/index.html +++ b/static/index.html @@ -336,7 +336,7 @@ }); } - // 获取最新传感器数据 + // 获取最新传感器数据(不触发设备查询) function fetchLatestSensorData() { fetch('/api/raw/latest') .then(response => response.json()) @@ -384,6 +384,28 @@ }); } + // 触发设备进行数据查询并获取最新数据 + function triggerQueryAndFetchData() { + const latestDataElement = document.querySelector('.latest-data'); + latestDataElement.style.opacity = 0.5; + + // 触发设备查询 + return triggerDeviceQuery() + .then(() => { + // 获取最新传感器数据 + return fetchLatestSensorData(); + }) + .then(() => { + // 恢复最新数据区域的不透明度 + latestDataElement.style.opacity = 1; + }) + .catch(error => { + console.error('触发查询并获取数据失败:', error); + // 恢复最新数据区域的不透明度 + latestDataElement.style.opacity = 1; + }); + } + // 查询最新数据 function queryLatestData() { const interval = document.getElementById('interval').value; @@ -411,19 +433,10 @@ // 加载状态指示 document.getElementById('mainChart').style.opacity = 0.5; - const latestDataElement = document.querySelector('.latest-data'); - latestDataElement.style.opacity = 0.5; - // 首先触发设备查询 - triggerDeviceQuery() + // 首先触发设备查询并获取最新数据 + triggerQueryAndFetchData() .then(() => { - // 获取最新传感器数据 - return fetchLatestSensorData(); - }) - .then(() => { - // 恢复最新数据区域的不透明度 - latestDataElement.style.opacity = 1; - // 获取聚合数据 return fetch(`/api/latest?interval=${interval}&start=${startDateTime}&end=${endDateTime}`); }) @@ -444,7 +457,36 @@ alert('获取最新数据失败,请检查网络连接'); // 恢复正常显示 document.getElementById('mainChart').style.opacity = 1; - latestDataElement.style.opacity = 1; + }); + } + + // 加载历史数据(不触发设备查询) + function loadInitialData() { + const interval = document.getElementById('interval').value; + + // 计算最近时间范围 - 使用当天0点到现在 + const endTime = new Date(); + const startTime = new Date(endTime); + startTime.setHours(0, 0, 0, 0); // 设置为当天0点 + + // 确保时间格式符合后端要求 + const startDateTime = startTime.toISOString(); + const endDateTime = endTime.toISOString(); + + // 获取聚合数据 + fetch(`/api/latest?interval=${interval}&start=${startDateTime}&end=${endDateTime}`) + .then(response => response.json()) + .then(data => { + updateChart(data); + updateTable(data); + + // 自动更新日期选择器为最近查询的时间范围 + document.getElementById('startDate').value = formatDateTime(startTime); + document.getElementById('endDate').value = formatDateTime(endTime); + }) + .catch(error => { + console.error('Error:', error); + alert('获取历史数据失败,请检查网络连接'); }); } @@ -626,14 +668,14 @@ // 页面加载完成后初始化 document.addEventListener('DOMContentLoaded', function() { initDatePickers(); - queryLatestData(); // 初始加载最新数据 - fetchLatestSensorData(); // 获取最新传感器原始数据 + loadInitialData(); // 加载历史数据,但不触发设备查询 + fetchLatestSensorData(); // 获取最新传感器原始数据,但不触发设备查询 // 每30秒检查一次连接状态 checkConnectionStatus(); connectionCheckTimer = setInterval(checkConnectionStatus, 30000); - // 每分钟自动刷新最新传感器数据 + // 每分钟自动刷新最新传感器数据(不触发设备查询) setInterval(fetchLatestSensorData, 60000); });