From 16615a5029fd6bee5b940a8ba38db447f364a0a0 Mon Sep 17 00:00:00 2001 From: fengyarnom Date: Thu, 15 May 2025 17:50:13 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E8=B0=83=E6=95=B4=E5=89=8D?= =?UTF-8?q?=E7=AB=AF=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/index.html | 65 +++++++++++++++++++++++++++++++++++++---------- 1 file changed, 51 insertions(+), 14 deletions(-) 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');