diff --git a/static/index.html b/static/index.html
index f7882b8..916869c 100644
--- a/static/index.html
+++ b/static/index.html
@@ -173,17 +173,27 @@
// 初始化日期选择器
function initDatePickers() {
+ // 获取当前北京时间(UTC+8)
const now = new Date();
- const yesterday = new Date(now);
- yesterday.setDate(yesterday.getDate() - 1);
- document.getElementById('startDate').value = formatDateTime(yesterday);
+ // 设置开始时间为当天的0点(北京时间)
+ const today = new Date(now);
+ today.setHours(0, 0, 0, 0);
+
+ document.getElementById('startDate').value = formatDateTime(today);
document.getElementById('endDate').value = formatDateTime(now);
}
- // 格式化日期时间
+ // 格式化日期时间为中国时区(UTC+8)
function formatDateTime(date) {
- return date.toISOString().slice(0, 16);
+ // 转换为ISO字符串,但不使用Z(表示UTC),而是使用+08:00表示中国时区
+ const year = date.getFullYear();
+ const month = (date.getMonth() + 1).toString().padStart(2, '0');
+ const day = date.getDate().toString().padStart(2, '0');
+ const hours = date.getHours().toString().padStart(2, '0');
+ const minutes = date.getMinutes().toString().padStart(2, '0');
+
+ return `${year}-${month}-${day}T${hours}:${minutes}`;
}
// 查询数据
@@ -191,8 +201,12 @@
const interval = document.getElementById('interval').value;
const startDate = document.getElementById('startDate').value;
const endDate = document.getElementById('endDate').value;
+
+ // 确保时间格式符合后端要求,添加本地时区信息
+ const startDateTime = new Date(startDate).toISOString();
+ const endDateTime = new Date(endDate).toISOString();
- fetch(`/api/data?interval=${interval}&start=${startDate}&end=${endDate}`)
+ fetch(`/api/data?interval=${interval}&start=${startDateTime}&end=${endDateTime}`)
.then(response => response.json())
.then(data => {
updateChart(data);
@@ -212,8 +226,11 @@
mainChart.destroy();
}
+ // 按时间正序排列数据(从早到晚)
+ data.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
+
const labels = data.map(item => {
- // 直接解析ISO格式的时间字符串
+ // 解析时间字符串为本地时间
const date = new Date(item.timestamp);
// 格式化为中文日期时间格式
@@ -264,7 +281,11 @@
},
grid: {
drawOnChartArea: false
- }
+ },
+ // 设置降雨量的合理范围
+ min: 0,
+ max: 50, // 根据实际情况可调整
+ suggestedMax: 10
},
'y-temp': {
type: 'linear',
@@ -272,7 +293,12 @@
title: {
display: true,
text: '温度(℃)'
- }
+ },
+ // 设置温度的合理范围
+ min: -10,
+ max: 40,
+ suggestedMin: 0,
+ suggestedMax: 30
}
}
}
@@ -284,9 +310,11 @@
const tbody = document.getElementById('tableBody');
tbody.innerHTML = '';
+ // 数据在updateChart中已经排序,这里不需要重复排序
+
data.forEach(item => {
const row = document.createElement('tr');
- // 直接解析ISO格式的时间字符串
+ // 解析时间字符串为本地时间
const date = new Date(item.timestamp);
const formattedDate =
@@ -310,12 +338,21 @@
// 导出数据
function exportData() {
- const data = mainChart.data;
+ // 从表格中获取完整数据
+ const tableRows = document.querySelectorAll('#tableBody tr');
let csv = '时间,降雨量(mm),温度(℃),湿度(%),风速(m/s)\n';
- for (let i = 0; i < data.labels.length; i++) {
- csv += `${data.labels[i]},${data.datasets[0].data[i]},${data.datasets[1].data[i]}\n`;
- }
+ tableRows.forEach(row => {
+ const cells = row.querySelectorAll('td');
+ const rowData = [
+ cells[0].textContent, // 时间
+ cells[1].textContent, // 降雨量
+ cells[2].textContent, // 温度
+ cells[3].textContent, // 湿度
+ cells[4].textContent // 风速
+ ];
+ csv += rowData.join(',') + '\n';
+ });
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
const link = document.createElement('a');