Imdroid/weather-station
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化前端页面

Browse Source
This commit is contained in:
yarnom 2025-09-01 16:57:13 +08:00
parent c81cd572d4
commit d26c2c025a
1 changed files with 122 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
static/js/weather-chart.js
View File

@ -28,6 +28,14 @@ const WeatherChart = {
const item = historyData.find(d => d.date_time === label);
return item ? item.humidity : null;
});
const historyPressures = allLabels.map(label => {
const item = historyData.find(d => d.date_time === label);
return item ? item.pressure : null;
});
const historyWindSpeeds = allLabels.map(label => {
const item = historyData.find(d => d.date_time === label);
return item ? item.wind_speed : null;
});
const historyRainfalls = allLabels.map(label => {
const item = historyData.find(d => d.date_time === label);
return item ? item.rainfall : null;
@ -63,17 +71,21 @@ const WeatherChart = {
const forecastRainfallsH1 = allLabels.map(label => getRainAtLead(label, 1));
const forecastRainfallsH2 = allLabels.map(label => getRainAtLead(label, 2));
const forecastRainfallsH3 = allLabels.map(label => getRainAtLead(label, 3));
const pickNearestTemp = (label) => {
const pickNearest = (label, field) => {
// 近似优先级：0h > 1h > 2h > 3h
const b = byTime.get(label);
if (!b) return null;
if (b[0] && b[0].temperature != null) return b[0].temperature;
if (b[1] && b[1].temperature != null) return b[1].temperature;
if (b[2] && b[2].temperature != null) return b[2].temperature;
if (b[3] && b[3].temperature != null) return b[3].temperature;
if (b[0] && b[0][field] != null) return b[0][field];
if (b[1] && b[1][field] != null) return b[1][field];
if (b[2] && b[2][field] != null) return b[2][field];
if (b[3] && b[3][field] != null) return b[3][field];
return null;
};
const forecastTemperaturesNearest = allLabels.map(label => pickNearestTemp(label));
const forecastTemperaturesNearest = allLabels.map(label => pickNearest(label, 'temperature'));
const forecastHumiditiesNearest = allLabels.map(label => pickNearest(label, 'humidity'));
const forecastPressuresNearest = allLabels.map(label => pickNearest(label, 'pressure'));
const forecastWindSpeedsNearest = allLabels.map(label => pickNearest(label, 'wind_speed'));
// 销毁旧图表
if (this.chart) this.chart.destroy();
@ -99,6 +111,26 @@ const WeatherChart = {
hidden: true,
spanGaps: false
},
{
label: '大气压 (hPa) - 实测',
data: historyPressures,
borderColor: 'rgb(153, 102, 255)',
backgroundColor: 'rgba(153, 102, 255, 0.1)',
yAxisID: 'y-pressure',
tension: 0.4,
hidden: true,
spanGaps: false
},
{
label: '风速 (m/s) - 实测',
data: historyWindSpeeds,
borderColor: 'rgb(75, 192, 192)',
backgroundColor: 'rgba(75, 192, 192, 0.1)',
yAxisID: 'y-wind',
tension: 0.4,
hidden: true,
spanGaps: false
},
{
label: '雨量 (mm) - 实测',
data: historyRainfalls,
@ -128,17 +160,52 @@ const WeatherChart = {
{ label: '雨量 (mm) - 预报 (+3h)', data: forecastRainfallsH3, type: 'bar', backgroundColor: 'rgba(76, 175, 80, 0.55)', borderColor: 'rgb(76, 175, 80)', yAxisID: 'y-rainfall' }
);
// 温度 取最接近的预报（0h>1h>2h>3h）
datasets.push({
label: '温度 (°C) - 预报',
data: forecastTemperaturesNearest,
borderColor: 'rgb(255, 159, 64)',
backgroundColor: 'rgba(255, 159, 64, 0.1)',
borderDash: [5, 5],
yAxisID: 'y-temperature',
tension: 0.4,
spanGaps: false
});
// 其他预报数据（取最接近的预报：0h>1h>2h>3h）
datasets.push(
{
label: '温度 (°C) - 预报',
data: forecastTemperaturesNearest,
borderColor: 'rgb(255, 159, 64)',
backgroundColor: 'rgba(255, 159, 64, 0.1)',
borderDash: [5, 5],
yAxisID: 'y-temperature',
tension: 0.4,
spanGaps: false
},
{
label: '湿度 (%) - 预报',
data: forecastHumiditiesNearest,
borderColor: 'rgb(54, 162, 235)',
backgroundColor: 'rgba(54, 162, 235, 0.1)',
borderDash: [5, 5],
yAxisID: 'y-humidity',
tension: 0.4,
hidden: true,
spanGaps: false
},
{
label: '大气压 (hPa) - 预报',
data: forecastPressuresNearest,
borderColor: 'rgb(153, 102, 255)',
backgroundColor: 'rgba(153, 102, 255, 0.1)',
borderDash: [5, 5],
yAxisID: 'y-pressure',
tension: 0.4,
hidden: true,
spanGaps: false
},
{
label: '风速 (m/s) - 预报',
data: forecastWindSpeedsNearest,
borderColor: 'rgb(75, 192, 192)',
backgroundColor: 'rgba(75, 192, 192, 0.1)',
borderDash: [5, 5],
yAxisID: 'y-wind',
tension: 0.4,
hidden: true,
spanGaps: false
}
);
}
// 创建组合图表
@ -165,9 +232,44 @@ const WeatherChart = {
}
},
scales: {
'y-temperature': { type: 'linear', display: true, position: 'left', title: { display: true, text: '温度 (°C)' } },
'y-humidity': { type: 'linear', display: true, position: 'right', title: { display: true, text: '湿度 (%)' }, grid: { drawOnChartArea: false }, min: 0, max: 100 },
'y-rainfall': { type: 'linear', display: true, position: 'right', title: { display: true, text: '雨量 (mm)' }, grid: { drawOnChartArea: false }, beginAtZero: true }
'y-temperature': {
type: 'linear',
display: true,
position: 'left',
title: { display: true, text: '温度 (°C)' }
},
'y-humidity': {
type: 'linear',
display: true,
position: 'right',
title: { display: true, text: '湿度 (%)' },
grid: { drawOnChartArea: false },
min: 0,
max: 100
},
'y-pressure': {
type: 'linear',
display: true,
position: 'right',
title: { display: true, text: '大气压 (hPa)' },
grid: { drawOnChartArea: false }
},
'y-wind': {
type: 'linear',
display: true,
position: 'right',
title: { display: true, text: '风速 (m/s)' },
grid: { drawOnChartArea: false },
beginAtZero: true
},
'y-rainfall': {
type: 'linear',
display: true,
position: 'right',
title: { display: true, text: '雨量 (mm)' },
grid: { drawOnChartArea: false },
beginAtZero: true
}
}
}
});