-
+
@@ -519,6 +549,10 @@
let singleStationLayer;
let combinedChart = null;
const CLUSTER_THRESHOLD = 10; // 缩放级别阈值，小于此值时启用集群
+ let isMapCollapsed = false; // 地图折叠状态
+ // 缓存最近一次查询数据，便于切换“显示历史预报”选项
+ let cachedHistoryData = [];
+ let cachedForecastData = [];
// 十六进制转十进制
function hexToDecimal(hex) {
@@ -603,6 +637,14 @@
// 每30秒刷新在线设备数量
setInterval(updateOnlineDevices, 30000);
+ // 监听"显示历史预报"复选框，切换表格渲染
+ const showPastForecast = document.getElementById('showPastForecast');
+ if (showPastForecast) {
+ showPastForecast.addEventListener('change', function() {
+ displayTable(cachedHistoryData, cachedForecastData);
+ });
+ }
+
// 添加输入框事件监听
const stationInput = document.getElementById('stationInput');
stationInput.addEventListener('input', function(e) {
@@ -1198,30 +1240,14 @@
const hexID = decimalToHex(decimalId);
const stationID = `RS485-${hexID}`;
- // 检查是否查询未来时间（包含未来时间的查询）
- const now = new Date();
- const endDateTime = new Date(endTime.replace('T', ' ') + ':00');
- const isIncludingFuture = endDateTime > now;
-
+ // 始终按用户选择的起止时间获取全量预报
let forecastParams;
- if (isIncludingFuture) {
- // 查询包含未来时间：只查询未来部分的预报
- const futureStartTime = now.toISOString().slice(0, 19).replace('T', ' ');
- forecastParams = new URLSearchParams({
- station_id: stationID,
- from: futureStartTime,
- to: endTime.replace('T', ' ') + ':00',
- provider: forecastProvider
- });
- } else {
- // 查询历史时间段：查询当时发布的历史预报
- forecastParams = new URLSearchParams({
- station_id: stationID,
- from: startTime.replace('T', ' ') + ':00',
- to: endTime.replace('T', ' ') + ':00',
- provider: forecastProvider
- });
- }
+ forecastParams = new URLSearchParams({
+ station_id: stationID,
+ from: startTime.replace('T', ' ') + ':00',
+ to: endTime.replace('T', ' ') + ':00',
+ provider: forecastProvider
+ });
const forecastResponse = await fetch(`/api/forecast?${forecastParams}`);
if (forecastResponse.ok) {
@@ -1235,11 +1261,37 @@
}
}
+ // 缓存本次结果，用于表格切换
+ cachedHistoryData = historyData;
+ cachedForecastData = forecastData;
+
if (historyData.length === 0 && forecastData.length === 0) {
alert('该时间段内无数据');
return;
}
+ // 查找当前选择的站点信息
+ const station = stations.find(s => s.decimal_id == decimalId);
+
+ // 更新站点信息标题
+ const stationInfoTitle = document.getElementById('stationInfoTitle');
+ if (station) {
+ stationInfoTitle.innerHTML = `
+
+ ${station.location || '未知位置'} ·
+ 编号 ${decimalId} ·
+ 坐标 ${station.latitude ? station.latitude.toFixed(6) : '未知'}, ${station.longitude ? station.longitude.toFixed(6) : '未知'}
+
+ `;
+ } else {
+ stationInfoTitle.innerHTML = `编号 ${decimalId}`;
+ }
+
+ // 自动折叠地图
+ if (!isMapCollapsed) {
+ toggleMap();
+ }
+
displayChart(historyData, forecastData);
displayTable(historyData, forecastData);
@@ -1250,11 +1302,13 @@
chartContainer.classList.add('show');
tableContainer.classList.add('show');
- // 平滑滚动到图表位置
- chartContainer.scrollIntoView({
- behavior: 'smooth',
- block: 'start'
- });
+ // 平滑滚动到图表位置，添加延时确保图表完全加载
+ setTimeout(() => {
+ chartContainer.scrollIntoView({
+ behavior: 'smooth',
+ block: 'start'
+ });
+ }, 300);
} catch (error) {
console.error('查询数据失败:', error);
@@ -1428,10 +1482,58 @@
historyData = Array.isArray(historyData) ? historyData : [];
forecastData = Array.isArray(forecastData) ? forecastData : [];
+ // 计算将要展示的预报集合（未来3小时 + 可选历史）
+ const nowTs = Date.now();
+ const future3hTs = nowTs + 3 * 60 * 60 * 1000;
+ const showPastForecast = document.getElementById('showPastForecast');
+ const shouldShowPast = !!(showPastForecast && showPastForecast.checked);
+ const displayedForecast = forecastData.filter(item => {
+ const t = new Date(item.date_time).getTime();
+ const isFuture3h = t > nowTs && t <= future3hTs;
+ const isPast = t <= nowTs;
+ return isFuture3h || (shouldShowPast && isPast);
+ });
+ const timesWithForecast = new Set(displayedForecast.map(f => f.date_time));
+ const hasForecast = displayedForecast.length > 0;
+
+ // 控制"显示历史预报"选择框的显示/隐藏
+ const forecastToggleContainer = document.getElementById('forecastToggleContainer');
+ if (forecastToggleContainer) {
+ forecastToggleContainer.style.display = forecastData.length > 0 ? 'block' : 'none';
+ }
+
+ // 动态构建表头
+ const thead = document.getElementById('tableHeader');
+ // 清除旧的表头
+ thead.innerHTML = '';
+
+ // 添加固定列
+ const fixedHeaders = ['时间', '温度 (°C)', '湿度 (%)', '气压 (hPa)', '风速 (m/s)', '风向 (°)', '雨量 (mm)'];
+ fixedHeaders.forEach(text => {
+ const th = document.createElement('th');
+ th.textContent = text;
+ thead.appendChild(th);
+ });
+
+ // 如果有预报数据，添加降水概率列
+ if (hasForecast) {
+ const th = document.createElement('th');
+ th.textContent = '降水概率 (%)';
+ thead.appendChild(th);
+ }
+
+ // 添加剩余列
+ const remainingHeaders = ['光照 (lux)', '紫外线'];
+ remainingHeaders.forEach(text => {
+ const th = document.createElement('th');
+ th.textContent = text;
+ thead.appendChild(th);
+ });
+
// 合并数据并按时间排序
const allData = [];
- // 添加历史数据
+ // 添加历史数据（实测全量展示）
historyData.forEach(item => {
allData.push({
...item,
@@ -1439,12 +1541,12 @@
});
});
- // 添加预报数据
- forecastData.forEach(item => {
+ // 添加将展示的预报
+ displayedForecast.forEach(item => {
allData.push({
...item,
source: '预报',
- // 预报数据中不包含的字段设为null
+ // 预报数据中不包含的字段补缺省
light: null,
wind_speed: item.wind_speed !== null ? item.wind_speed : 0,
wind_direction: item.wind_direction !== null ? item.wind_direction : 0
@@ -1458,21 +1560,38 @@
const row = document.createElement('tr');
// 预报数据使用不同的背景色
if (item.source === '预报') {
- row.style.backgroundColor = 'rgba(255, 165, 0, 0.1)';
+ row.style.backgroundColor = 'rgba(255, 165, 0, 0.08)'; // 淡橘黄色背景
}
- row.innerHTML = `
- ${item.date_time} [${item.source}] |
- ${item.temperature !== null && item.temperature !== undefined ? item.temperature.toFixed(2) : '-'} |
- ${item.humidity !== null && item.humidity !== undefined ? item.humidity.toFixed(2) : '-'} |
- ${item.pressure !== null && item.pressure !== undefined ? item.pressure.toFixed(2) : '-'} |
- ${item.wind_speed !== null && item.wind_speed !== undefined ? item.wind_speed.toFixed(2) : '-'} |
- ${item.wind_direction !== null && item.wind_direction !== undefined ? item.wind_direction.toFixed(2) : '-'} |
- ${item.rainfall !== null && item.rainfall !== undefined ? item.rainfall.toFixed(3) : '-'} |
- ${item.source === '预报' && item.precip_prob !== null && item.precip_prob !== undefined ? item.precip_prob : '-'} |
- ${item.light !== null && item.light !== undefined ? item.light.toFixed(2) : '-'} |
- ${item.uv !== null && item.uv !== undefined ? item.uv.toFixed(2) : '-'} |
- `;
+ // 移除错误的覆盖逻辑，让实测数据正常显示
+ const overrideDash = false; // 不再覆盖实测数据为'-'
+
+ const fmt2 = v => (v === null || v === undefined ? '-' : Number(v).toFixed(2));
+ const fmt3 = v => (v === null || v === undefined ? '-' : Number(v).toFixed(3));
+
+ // 构建基础列
+ let columns = [
+ `${item.date_time}${hasForecast ? ` [${item.source}]` : ''} | `,
+ `${overrideDash ? '-' : fmt2(item.temperature)} | `,
+ `${overrideDash ? '-' : fmt2(item.humidity)} | `,
+ `${overrideDash ? '-' : fmt2(item.pressure)} | `,
+ `${overrideDash ? '-' : fmt2(item.wind_speed)} | `,
+ `${overrideDash ? '-' : fmt2(item.wind_direction)} | `,
+ `${overrideDash ? '-' : fmt3(item.rainfall)} | `
+ ];
+
+ // 如果显示预报，添加降水概率列
+ if (hasForecast) {
+ columns.push(`${item.source === '预报' && item.precip_prob !== null && item.precip_prob !== undefined ? item.precip_prob : '-'} | `);
+ }
+
+ // 添加剩余列
+ columns.push(
+ `${overrideDash ? '-' : (item.light !== null && item.light !== undefined ? Number(item.light).toFixed(2) : '-')} | `,
+ `${overrideDash ? '-' : (item.uv !== null && item.uv !== undefined ? Number(item.uv).toFixed(2) : '-')} | `
+ );
+
+ row.innerHTML = columns.join('');
tbody.appendChild(row);
});
}