fix:调整前端页面
This commit is contained in:
parent
1d8969524b
commit
16615a5029
@ -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');
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user