fix:调整前端页面

This commit is contained in:
fengyarnom 2025-05-15 17:50:13 +08:00
parent 1d8969524b
commit 16615a5029

View File

@ -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');