feat: 优化前端页面

static/js/weather-chart.js

@@ -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[0] && b[0][field] != null) return b[0][field];
-			if (b[1] && b[1].temperature != null) return b[1].temperature;
+			if (b[1] && b[1][field] != null) return b[1][field];
-			if (b[2] && b[2].temperature != null) return b[2].temperature;
+			if (b[2] && b[2][field] != null) return b[2][field];
-			if (b[3] && b[3].temperature != null) return b[3].temperature;
+			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）
+			// 其他预报数据（取最接近的预报：0h>1h>2h>3h）
-			datasets.push({
+			datasets.push(
-				label: '温度 (°C) - 预报',
+				{
-				data: forecastTemperaturesNearest,
+					label: '温度 (°C) - 预报',
-				borderColor: 'rgb(255, 159, 64)',
+					data: forecastTemperaturesNearest,
-				backgroundColor: 'rgba(255, 159, 64, 0.1)',
+					borderColor: 'rgb(255, 159, 64)',
-				borderDash: [5, 5],
+					backgroundColor: 'rgba(255, 159, 64, 0.1)',
-				yAxisID: 'y-temperature',
+					borderDash: [5, 5],
-				tension: 0.4,
+					yAxisID: 'y-temperature',
-				spanGaps: false
+					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-temperature': { 
-					'y-humidity': { type: 'linear', display: true, position: 'right', title: { display: true, text: '湿度 (%)' }, grid: { drawOnChartArea: false }, min: 0, max: 100 },
+						type: 'linear', 
-					'y-rainfall': { type: 'linear', display: true, position: 'right', title: { display: true, text: '雨量 (mm)' }, grid: { drawOnChartArea: false }, beginAtZero: true }
+						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 
+					}
 				}
 			}
 		});