feat: Implement initial weather dashboard with interactive map, city details, and API integration.
This commit is contained in:
2569718930@qq.com
@@ -0,0 +1,40 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
|
||||
const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
|
||||
|
||||
export async function GET(
|
||||
req: NextRequest,
|
||||
context: { params: Promise<{ name: string }> },
|
||||
) {
|
||||
if (!API_BASE) {
|
||||
return NextResponse.json(
|
||||
{ error: "POLYWEATHER_API_BASE_URL is not configured" },
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
|
||||
const { name } = await context.params;
|
||||
const forceRefresh = req.nextUrl.searchParams.get("force_refresh") ?? "false";
|
||||
const url = `${API_BASE}/api/city/${encodeURIComponent(name)}/summary?force_refresh=${forceRefresh}`;
|
||||
|
||||
try {
|
||||
const res = await fetch(url, {
|
||||
headers: { Accept: "application/json" },
|
||||
cache: "no-store",
|
||||
});
|
||||
if (!res.ok) {
|
||||
const raw = await res.text();
|
||||
return NextResponse.json(
|
||||
{ error: `Backend returned ${res.status}`, detail: raw.slice(0, 300) },
|
||||
{ status: 502 },
|
||||
);
|
||||
}
|
||||
const data = await res.json();
|
||||
return NextResponse.json(data);
|
||||
} catch (error) {
|
||||
return NextResponse.json(
|
||||
{ error: "Failed to fetch city summary", detail: String(error) },
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -13,6 +13,18 @@ export default function RootLayout({
|
||||
}: Readonly<{ children: React.ReactNode }>) {
|
||||
return (
|
||||
<html lang="zh-CN" className="dark">
|
||||
<head>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||||
/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body className="min-h-screen font-sans antialiased">
|
||||
{children}
|
||||
<Analytics />
|
||||
|
||||
+11
-11
@@ -1,12 +1,12 @@
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<main className="h-screen w-screen overflow-hidden bg-black">
|
||||
<iframe
|
||||
title="PolyWeather Legacy Dashboard"
|
||||
src="/legacy/index.html?v=legacy-v19"
|
||||
className="h-full w-full border-0"
|
||||
/>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
import type { Metadata } from "next";
|
||||
import { DashboardEntry } from "@/components/dashboard/DashboardEntry";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "PolyWeather - 天气衍生品智能地图",
|
||||
description:
|
||||
"PolyWeather 天气衍生品智能地图，聚合 METAR、MGM、DEB、多模型预报与历史对账分析。",
|
||||
};
|
||||
|
||||
export default function HomePage() {
|
||||
return <DashboardEntry />;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
"use client";
|
||||
|
||||
import clsx from "clsx";
|
||||
import { useDashboardStore } from "@/hooks/useDashboardStore";
|
||||
|
||||
export function CitySidebar() {
|
||||
const store = useDashboardStore();
|
||||
const sortedCities = [...store.cities].sort((a, b) => {
|
||||
const order = { high: 0, medium: 1, low: 2 };
|
||||
return (
|
||||
(order[a.risk_level as keyof typeof order] ?? 3) -
|
||||
(order[b.risk_level as keyof typeof order] ?? 3)
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<nav className="city-list">
|
||||
<div className="city-list-header">
|
||||
<span>监控城市</span>
|
||||
<span className="city-count">{store.cities.length}</span>
|
||||
</div>
|
||||
|
||||
<div className="city-list-items">
|
||||
{sortedCities.map((city) => {
|
||||
const detail = store.cityDetailsByName[city.name];
|
||||
const summary = store.citySummariesByName[city.name];
|
||||
const snapshot = detail || summary;
|
||||
const isActive = store.selectedCity === city.name;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={city.name}
|
||||
type="button"
|
||||
className={clsx("city-item", isActive && "active")}
|
||||
onClick={() => void store.selectCity(city.name)}
|
||||
>
|
||||
<div className="city-item-main">
|
||||
<span className={clsx("risk-dot", city.risk_level)} />
|
||||
<span className="city-name-text">{city.display_name}</span>
|
||||
<span
|
||||
className={clsx(
|
||||
"city-temp",
|
||||
snapshot?.current?.temp != null && "loaded",
|
||||
)}
|
||||
>
|
||||
{snapshot?.current?.temp != null
|
||||
? `${snapshot.current.temp}${snapshot.temp_symbol || "°C"}`
|
||||
: "--"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="city-item-info">
|
||||
<span className="city-local-time">
|
||||
{snapshot?.local_time ? `🕐 ${snapshot.local_time}` : ""}
|
||||
</span>
|
||||
<span className="city-max-info">
|
||||
{detail?.current?.max_temp_time
|
||||
? `峰值 @ ${detail.current.max_temp_time}`
|
||||
: ""}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,17 @@
|
||||
"use client";
|
||||
|
||||
import dynamic from "next/dynamic";
|
||||
|
||||
const PolyWeatherDashboard = dynamic(
|
||||
() =>
|
||||
import("@/components/dashboard/PolyWeatherDashboard").then(
|
||||
(module) => module.PolyWeatherDashboard,
|
||||
),
|
||||
{
|
||||
ssr: false,
|
||||
},
|
||||
);
|
||||
|
||||
export function DashboardEntry() {
|
||||
return <PolyWeatherDashboard />;
|
||||
}
|
||||
@@ -0,0 +1,172 @@
|
||||
"use client";
|
||||
|
||||
import clsx from "clsx";
|
||||
import { useDashboardStore } from "@/hooks/useDashboardStore";
|
||||
import { getCityScenery } from "@/lib/dashboard-scenery";
|
||||
import {
|
||||
getCityProfileStats,
|
||||
getClimateDrivers,
|
||||
getRiskBadgeLabel,
|
||||
getSettlementRiskNarrative,
|
||||
} from "@/lib/dashboard-utils";
|
||||
import { ForecastTable } from "@/components/dashboard/PanelSections";
|
||||
|
||||
export function DetailPanel() {
|
||||
const store = useDashboardStore();
|
||||
const detail = store.selectedDetail;
|
||||
const isOverlayOpen =
|
||||
Boolean(store.futureModalDate) ||
|
||||
store.historyState.isOpen ||
|
||||
store.isGuideOpen;
|
||||
const isVisible =
|
||||
store.isPanelOpen &&
|
||||
Boolean(store.selectedCity) &&
|
||||
Boolean(detail) &&
|
||||
!store.loadingState.cityDetail &&
|
||||
!isOverlayOpen;
|
||||
const profileStats = detail ? getCityProfileStats(detail) : [];
|
||||
const riskLines = detail ? getSettlementRiskNarrative(detail) : [];
|
||||
const climateDrivers = detail ? getClimateDrivers(detail) : [];
|
||||
const scenery = getCityScenery(detail?.name);
|
||||
|
||||
return (
|
||||
<aside
|
||||
className={clsx("detail-panel", isVisible && "visible")}
|
||||
aria-hidden={!isVisible}
|
||||
>
|
||||
<div className="panel-header">
|
||||
<button
|
||||
type="button"
|
||||
className="panel-close"
|
||||
aria-label="关闭城市详情面板"
|
||||
onClick={store.closePanel}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
<div className="panel-title-area">
|
||||
<h2>{detail?.display_name?.toUpperCase() || "—"}</h2>
|
||||
<div className="panel-meta">
|
||||
<span className={clsx("risk-badge", detail?.risk?.level || "low")}>
|
||||
{getRiskBadgeLabel(detail?.risk?.level)}
|
||||
</span>
|
||||
<span className="local-time">
|
||||
{detail
|
||||
? `${detail.local_date} ${detail.local_time}`
|
||||
: "等待选择城市"}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className="history-btn"
|
||||
title="查看今日日内分析"
|
||||
onClick={store.openTodayModal}
|
||||
disabled={!detail}
|
||||
>
|
||||
今日日内分析
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="history-btn"
|
||||
title="查看历史对账"
|
||||
onClick={() => void store.openHistory()}
|
||||
disabled={!detail}
|
||||
>
|
||||
历史对账
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="panel-body">
|
||||
{!detail ? (
|
||||
<section>
|
||||
<div style={{ color: "var(--text-muted)", fontSize: "13px" }}>
|
||||
{store.loadingState.cityDetail
|
||||
? "正在加载城市详情..."
|
||||
: "从左侧城市列表选择一个城市查看详情。"}
|
||||
</div>
|
||||
</section>
|
||||
) : (
|
||||
<>
|
||||
<section className="detail-scenery-card">
|
||||
{scenery ? (
|
||||
<>
|
||||
<img
|
||||
className="detail-scenery-image"
|
||||
src={scenery.imageUrl}
|
||||
alt={`${detail.display_name} 风景照`}
|
||||
/>
|
||||
<div className="detail-scenery-overlay">
|
||||
<div className="detail-scenery-copy">
|
||||
<span className="detail-scenery-kicker">
|
||||
{detail.display_name}
|
||||
</span>
|
||||
</div>
|
||||
<a
|
||||
className="detail-scenery-credit"
|
||||
href={scenery.creditUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{scenery.creditLabel}
|
||||
</a>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="detail-scenery-fallback">
|
||||
<span className="detail-scenery-kicker">
|
||||
{detail.display_name}
|
||||
</span>
|
||||
<strong className="detail-scenery-title">
|
||||
城市风景与微气候
|
||||
</strong>
|
||||
<span className="detail-scenery-subtitle">
|
||||
当前没有匹配到风景图，仍可从下方档案与风险说明查看城市特征。
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="detail-section">
|
||||
<h3>城市档案</h3>
|
||||
<div className="detail-grid">
|
||||
{profileStats.map((item) => (
|
||||
<div key={item.label} className="detail-card">
|
||||
<span className="detail-label">{item.label}</span>
|
||||
<span className="detail-value">{item.value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="detail-section">
|
||||
<h3>结算与偏差风险</h3>
|
||||
<div className="risk-info">
|
||||
{riskLines.map((line) => (
|
||||
<div key={line} className="risk-row">
|
||||
<span style={{ color: "var(--accent-cyan)", opacity: 0.6 }}>
|
||||
•
|
||||
</span>
|
||||
<span>{line}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="detail-section">
|
||||
<h3>当地气候主要受什么影响</h3>
|
||||
<div className="insight-list">
|
||||
{climateDrivers.map((driver) => (
|
||||
<div key={driver.label} className="insight-item">
|
||||
<div className="insight-title">{driver.label}</div>
|
||||
<div className="insight-text">{driver.text}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<ForecastTable />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,506 @@
|
||||
"use client";
|
||||
|
||||
import { ChartConfiguration } from "chart.js/auto";
|
||||
import clsx from "clsx";
|
||||
import { CSSProperties } from "react";
|
||||
import { useChart } from "@/hooks/useChart";
|
||||
import { useDashboardStore } from "@/hooks/useDashboardStore";
|
||||
import {
|
||||
ModelForecast,
|
||||
ProbabilityDistribution,
|
||||
} from "@/components/dashboard/PanelSections";
|
||||
import {
|
||||
getFutureModalView,
|
||||
getShortTermNowcastLines,
|
||||
getTemperatureChartData,
|
||||
getWeatherSummary,
|
||||
parseAiAnalysis,
|
||||
} from "@/lib/dashboard-utils";
|
||||
|
||||
function getConfidenceLabel(confidence: string) {
|
||||
return (
|
||||
{
|
||||
high: "高",
|
||||
medium: "中",
|
||||
low: "低",
|
||||
}[confidence] || confidence
|
||||
);
|
||||
}
|
||||
|
||||
function DailyTemperatureChart({ dateStr }: { dateStr: string }) {
|
||||
const store = useDashboardStore();
|
||||
const detail = store.selectedDetail;
|
||||
const view = detail ? getFutureModalView(detail, dateStr) : null;
|
||||
const isToday = detail ? dateStr === detail.local_date : false;
|
||||
const todayChartData = detail && isToday ? getTemperatureChartData(detail) : null;
|
||||
|
||||
const canvasRef = useChart(
|
||||
() => {
|
||||
if (!detail || !view) {
|
||||
return {
|
||||
data: { datasets: [], labels: [] },
|
||||
type: "line",
|
||||
} satisfies ChartConfiguration<"line">;
|
||||
}
|
||||
|
||||
if (isToday && todayChartData) {
|
||||
const datasets: NonNullable<ChartConfiguration<"line">["data"]>["datasets"] = [];
|
||||
|
||||
if (todayChartData.datasets.hasMgmHourly) {
|
||||
datasets.push({
|
||||
backgroundColor: "rgba(234, 179, 8, 0.05)",
|
||||
borderColor: "rgba(234, 179, 8, 0.8)",
|
||||
borderWidth: 2,
|
||||
data: todayChartData.datasets.mgmHourlyPoints,
|
||||
fill: false,
|
||||
label: "MGM 预报",
|
||||
pointHoverRadius: 6,
|
||||
pointRadius: 3,
|
||||
spanGaps: true,
|
||||
tension: 0.3,
|
||||
});
|
||||
} else {
|
||||
datasets.push({
|
||||
backgroundColor: "rgba(52, 211, 153, 0.05)",
|
||||
borderColor: "rgba(52, 211, 153, 0.6)",
|
||||
borderWidth: 1.5,
|
||||
data: todayChartData.datasets.debPast,
|
||||
fill: true,
|
||||
label: "DEB 预报",
|
||||
pointHoverRadius: 3,
|
||||
pointRadius: 0,
|
||||
tension: 0.3,
|
||||
});
|
||||
datasets.push({
|
||||
borderColor: "rgba(52, 211, 153, 0.35)",
|
||||
borderDash: [5, 3],
|
||||
borderWidth: 1.5,
|
||||
data: todayChartData.datasets.debFuture,
|
||||
fill: false,
|
||||
label: "DEB 预报",
|
||||
pointRadius: 0,
|
||||
tension: 0.3,
|
||||
});
|
||||
}
|
||||
|
||||
datasets.push({
|
||||
backgroundColor: "#22d3ee",
|
||||
borderColor: "#22d3ee",
|
||||
borderWidth: 0,
|
||||
data: todayChartData.datasets.metarPoints,
|
||||
fill: false,
|
||||
label: "METAR 实测",
|
||||
order: 0,
|
||||
pointHoverRadius: 7,
|
||||
pointRadius: 5,
|
||||
});
|
||||
|
||||
if (todayChartData.datasets.mgmPoints.some((value) => value != null)) {
|
||||
datasets.push({
|
||||
backgroundColor: "#facc15",
|
||||
borderColor: "#facc15",
|
||||
borderWidth: 0,
|
||||
data: todayChartData.datasets.mgmPoints,
|
||||
fill: false,
|
||||
label: "MGM 实测",
|
||||
order: -1,
|
||||
pointHoverRadius: 9,
|
||||
pointRadius: 7,
|
||||
showLine: false,
|
||||
});
|
||||
}
|
||||
|
||||
if (
|
||||
!todayChartData.datasets.hasMgmHourly &&
|
||||
Math.abs(todayChartData.datasets.offset) > 0.3
|
||||
) {
|
||||
datasets.push({
|
||||
borderColor: "rgba(99, 102, 241, 0.2)",
|
||||
borderDash: [2, 4],
|
||||
borderWidth: 1,
|
||||
data: todayChartData.datasets.temps,
|
||||
fill: false,
|
||||
label: "OM 原始",
|
||||
pointRadius: 0,
|
||||
tension: 0.3,
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
data: {
|
||||
datasets,
|
||||
labels: todayChartData.times,
|
||||
},
|
||||
options: {
|
||||
interaction: { intersect: false, mode: "index" },
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: "#94a3b8",
|
||||
filter: (legendItem, chartData) => {
|
||||
const text = String(legendItem.text || "");
|
||||
if (!text) return false;
|
||||
if (!text.includes("DEB")) return true;
|
||||
|
||||
const firstDebIndex = (chartData.datasets || []).findIndex((dataset) =>
|
||||
String(dataset.label || "").includes("DEB"),
|
||||
);
|
||||
return legendItem.datasetIndex === firstDebIndex;
|
||||
},
|
||||
font: { family: "Inter", size: 11 },
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: "rgba(15, 23, 42, 0.96)",
|
||||
borderColor: "rgba(34, 211, 238, 0.2)",
|
||||
borderWidth: 1,
|
||||
},
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
grid: { color: "rgba(255,255,255,0.04)" },
|
||||
ticks: {
|
||||
callback: (_value, index) =>
|
||||
typeof index === "number" && index % 3 === 0
|
||||
? todayChartData.times[index]
|
||||
: "",
|
||||
color: "#64748b",
|
||||
font: { family: "Inter", size: 10 },
|
||||
maxRotation: 0,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
grid: { color: "rgba(255,255,255,0.04)" },
|
||||
max: todayChartData.max,
|
||||
min: todayChartData.min,
|
||||
ticks: {
|
||||
callback: (value) => `${value}${detail.temp_symbol || "°C"}`,
|
||||
color: "#64748b",
|
||||
font: { family: "Inter", size: 10 },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
type: "line",
|
||||
} satisfies ChartConfiguration<"line">;
|
||||
}
|
||||
|
||||
const labels = view.slice.map((point) => point.label);
|
||||
const unit = detail.temp_symbol || "°C";
|
||||
|
||||
return {
|
||||
data: {
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: "rgba(34, 211, 238, 0.08)",
|
||||
borderColor: "#22d3ee",
|
||||
data: view.slice.map((point) => point.temp),
|
||||
fill: false,
|
||||
label: "Open-Meteo 温度",
|
||||
pointRadius: 2,
|
||||
tension: 0.28,
|
||||
},
|
||||
{
|
||||
backgroundColor: "transparent",
|
||||
borderColor: "#a78bfa",
|
||||
borderDash: [5, 4],
|
||||
data: view.slice.map((point) => point.dewPoint),
|
||||
fill: false,
|
||||
label: "露点",
|
||||
pointRadius: 0,
|
||||
tension: 0.24,
|
||||
},
|
||||
],
|
||||
labels,
|
||||
},
|
||||
options: {
|
||||
interaction: { intersect: false, mode: "index" },
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: "#94a3b8",
|
||||
font: { family: "Inter", size: 11 },
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: "rgba(15, 23, 42, 0.96)",
|
||||
borderColor: "rgba(34, 211, 238, 0.2)",
|
||||
borderWidth: 1,
|
||||
callbacks: {
|
||||
label: (ctx) =>
|
||||
`${ctx.dataset.label}: ${ctx.parsed.y?.toFixed(1)}${unit}`,
|
||||
},
|
||||
},
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
grid: { color: "rgba(255,255,255,0.04)" },
|
||||
ticks: {
|
||||
color: "#64748b",
|
||||
font: { family: "Inter", size: 10 },
|
||||
maxRotation: 0,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
grid: { color: "rgba(255,255,255,0.04)" },
|
||||
ticks: {
|
||||
callback: (value) => `${value}${unit}`,
|
||||
color: "#64748b",
|
||||
font: { family: "Inter", size: 10 },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
type: "line",
|
||||
} satisfies ChartConfiguration<"line">;
|
||||
},
|
||||
[detail, isToday, todayChartData, view],
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="history-chart-wrapper future-chart-wrapper">
|
||||
<canvas ref={canvasRef} />
|
||||
</div>
|
||||
{isToday && (
|
||||
<div className="chart-legend">
|
||||
{todayChartData?.legendText || "暂无机场报文或小时级实测数据"}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function FutureForecastModal() {
|
||||
const store = useDashboardStore();
|
||||
const detail = store.selectedDetail;
|
||||
const dateStr = store.futureModalDate;
|
||||
|
||||
if (!detail || !dateStr) return null;
|
||||
|
||||
const isToday = dateStr === detail.local_date;
|
||||
const view = getFutureModalView(detail, dateStr);
|
||||
const nowcastRows = getShortTermNowcastLines(detail, dateStr);
|
||||
const ai = parseAiAnalysis(detail.ai_analysis);
|
||||
const scorePosition = `${50 + view.front.score / 2}%`;
|
||||
const barStyle = {
|
||||
"--score-position": scorePosition,
|
||||
} as CSSProperties & { "--score-position": string };
|
||||
const weatherSummary = getWeatherSummary(detail);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal-overlay"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="future-modal-title"
|
||||
onClick={(event) => {
|
||||
if (event.target === event.currentTarget) {
|
||||
store.closeFutureModal();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="modal-content large future-modal">
|
||||
<div className="modal-header">
|
||||
<h2 id="future-modal-title">
|
||||
{isToday
|
||||
? `${detail.display_name.toUpperCase()} · 今日日内分析`
|
||||
: `${detail.display_name.toUpperCase()} · ${dateStr} 未来日期分析`}
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
className="modal-close"
|
||||
aria-label={isToday ? "关闭今日日内分析" : "关闭未来日期分析"}
|
||||
onClick={store.closeFutureModal}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="modal-body future-modal-body">
|
||||
<div className="history-stats">
|
||||
{isToday && (
|
||||
<>
|
||||
<div className="h-stat-card">
|
||||
<span className="label">当前实测</span>
|
||||
<span className="val">
|
||||
{detail.current?.temp ?? "--"}
|
||||
{detail.temp_symbol} @{detail.current?.obs_time || "--"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-stat-card">
|
||||
<span className="label">当前天气</span>
|
||||
<span className="val">
|
||||
{weatherSummary.weatherIcon} {weatherSummary.weatherText}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-stat-card">
|
||||
<span className="label">WU 结算参考</span>
|
||||
<span className="val">
|
||||
{detail.current?.wu_settlement ?? "--"}
|
||||
{detail.temp_symbol}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-stat-card">
|
||||
<span className="label">日出时间</span>
|
||||
<span className="val">{detail.forecast?.sunrise || "--"}</span>
|
||||
</div>
|
||||
<div className="h-stat-card">
|
||||
<span className="label">日落时间</span>
|
||||
<span className="val">{detail.forecast?.sunset || "--"}</span>
|
||||
</div>
|
||||
<div className="h-stat-card">
|
||||
<span className="label">日照时长</span>
|
||||
<span className="val">
|
||||
{detail.forecast?.sunshine_hours != null
|
||||
? `${detail.forecast.sunshine_hours}h`
|
||||
: "--"}
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="h-stat-card">
|
||||
<span className="label">{isToday ? "今日预报高温" : "目标日预报"}</span>
|
||||
<span className="val">
|
||||
{view.forecastEntry?.max_temp ?? "--"}
|
||||
{detail.temp_symbol}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-stat-card">
|
||||
<span className="label">DEB 预测</span>
|
||||
<span className="val">
|
||||
{view.deb ?? "--"}
|
||||
{detail.temp_symbol}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-stat-card">
|
||||
<span className="label">动态分布中心</span>
|
||||
<span className="val">
|
||||
{view.mu != null ? `${view.mu.toFixed(1)}${detail.temp_symbol}` : "--"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-stat-card">
|
||||
<span className="label">趋势评分</span>
|
||||
<span className="val">
|
||||
{view.front.score > 0 ? "+" : ""}
|
||||
{view.front.score}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="future-modal-section">
|
||||
<h3>{isToday ? "今日温度走势" : "目标日小时走势"}</h3>
|
||||
<DailyTemperatureChart dateStr={dateStr} />
|
||||
</section>
|
||||
|
||||
<div className="future-modal-grid">
|
||||
<section className="future-modal-section">
|
||||
<h3>结算概率分布</h3>
|
||||
<ProbabilityDistribution detail={detail} targetDate={dateStr} hideTitle />
|
||||
</section>
|
||||
<section className="future-modal-section">
|
||||
<h3>多模型预报</h3>
|
||||
<ModelForecast detail={detail} targetDate={dateStr} hideTitle />
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div className="future-modal-grid">
|
||||
<section className="future-modal-section">
|
||||
<h3>
|
||||
<span className="section-inline-icon" aria-hidden="true">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.9"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M4 19V5" />
|
||||
<path d="M10 19V10" />
|
||||
<path d="M16 19V7" />
|
||||
<path d="M22 19V13" />
|
||||
</svg>
|
||||
</span>
|
||||
{isToday ? "今日日内结构信号" : "未来 6-48 小时趋势"}
|
||||
</h3>
|
||||
<div className="future-front-score">
|
||||
<div className="future-front-bar" style={barStyle} />
|
||||
<div className="future-front-meta">
|
||||
<span className="future-front-pill">判断: {view.front.label}</span>
|
||||
<span className="future-front-pill">
|
||||
置信度: {getConfidenceLabel(view.front.confidence)}
|
||||
</span>
|
||||
<span className="future-front-pill">
|
||||
最大降水概率: {Math.round(view.front.precipMax)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="future-text-block">{view.front.summary}</div>
|
||||
</div>
|
||||
<div className="future-trend-grid">
|
||||
{view.front.metrics.map((metric) => (
|
||||
<div key={metric.label} className="future-trend-card">
|
||||
<div className="future-trend-label">{metric.label}</div>
|
||||
<div
|
||||
className={clsx(
|
||||
"future-trend-value",
|
||||
metric.tone === "warm" && "warm",
|
||||
metric.tone === "cold" && "cold",
|
||||
)}
|
||||
>
|
||||
{metric.value}
|
||||
</div>
|
||||
<div className="future-trend-note">{metric.note}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="future-modal-section">
|
||||
<h3>AI 深度分析</h3>
|
||||
<div className="future-text-block">
|
||||
{ai.summary ? <div>{ai.summary}</div> : null}
|
||||
|
||||
{ai.bullets.length > 0 && (
|
||||
<div style={{ marginTop: ai.summary ? "10px" : 0 }}>
|
||||
{ai.bullets.map((item) => (
|
||||
<div key={item}>{item}</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!ai.summary && ai.bullets.length === 0 && (
|
||||
<div>暂无 AI 分析，当前以结构化气象与模型数据为主。</div>
|
||||
)}
|
||||
|
||||
<div style={{ marginTop: "14px" }}>
|
||||
{nowcastRows.map(([label, value]) => (
|
||||
<div key={label}>
|
||||
<strong>{label}: </strong>
|
||||
{value}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{view.front.weatherGovPeriods.length > 0 && (
|
||||
<div style={{ marginTop: "10px" }}>
|
||||
<strong>weather.gov 文本: </strong>
|
||||
{view.front.weatherGovPeriods
|
||||
.map((period) => period.short_forecast || period.detailed_forecast)
|
||||
.filter(Boolean)
|
||||
.join(" / ")}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
"use client";
|
||||
|
||||
import { useDashboardStore } from "@/hooks/useDashboardStore";
|
||||
|
||||
const GUIDE_CARDS = [
|
||||
{
|
||||
body: "Dynamic Ensemble Blending 是系统的核心预测层。它不是对 ECMWF、GFS、ICON、GEM、JMA 等模型的简单平均，而是结合近期样本表现、当前实况与城市偏置后得到的动态加权结果。",
|
||||
title: "DEB 动态融合预测",
|
||||
},
|
||||
{
|
||||
body: "右侧的结算概率分布基于 DEB 预测值与多模型离散度动态计算。μ 代表当前分布中心，会随着模型、实况和时间变化而变化，不是固定结算值。",
|
||||
title: "结算概率引擎",
|
||||
},
|
||||
{
|
||||
body: "Polymarket 结算逻辑以机场 METAR 为主。系统优先使用 Aviation Weather API 的机场报文与原始 METAR，并区分观测时间与接收时间，避免把发布延迟误认为温度变化。",
|
||||
title: "结算点与主观测源",
|
||||
},
|
||||
{
|
||||
body: "Ankara 不走通用城市逻辑。结算主站以 LTAC / Esenboğa 为准，周边领先信号优先参考 Turkish MGM 站网，其中 Ankara (Bölge/Center) 是重点监控站，不用 Etimesgut 代替。",
|
||||
title: "Ankara 专属增强",
|
||||
},
|
||||
{
|
||||
body: "点击多日预报后的模态框，主要用于分析下一个交易日。6-48 小时趋势以 weather.gov 和 Open-Meteo 为主，部分城市补充 Meteoblue；0-2 小时临近判断优先看 METAR 与周边站。",
|
||||
title: "未来日期分析",
|
||||
},
|
||||
{
|
||||
body: "历史准确率对账只统计已结算样本。网页端采用近 15 天滚动视图，不把当天尚未结算的样本算入胜率和 MAE。",
|
||||
title: "历史对账规则",
|
||||
},
|
||||
];
|
||||
|
||||
export function GuideModal() {
|
||||
const store = useDashboardStore();
|
||||
|
||||
if (!store.isGuideOpen) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal-overlay"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="guide-modal-title"
|
||||
onClick={(event) => {
|
||||
if (event.target === event.currentTarget) {
|
||||
store.closeGuide();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="modal-content large">
|
||||
<div className="modal-header">
|
||||
<h2 id="guide-modal-title">📎 PolyWeather 系统技术说明</h2>
|
||||
<button
|
||||
type="button"
|
||||
className="modal-close"
|
||||
aria-label="关闭技术说明"
|
||||
onClick={store.closeGuide}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="guide-grid">
|
||||
{GUIDE_CARDS.map((card) => (
|
||||
<div key={card.title} className="guide-card">
|
||||
<h3>{card.title}</h3>
|
||||
<p>{card.body}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="guide-footer">
|
||||
数据源以 Aviation Weather / METAR、Turkish MGM、Open-Meteo、weather.gov
|
||||
为主，部分城市补充 Meteoblue。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
"use client";
|
||||
|
||||
import clsx from "clsx";
|
||||
import { useDashboardStore } from "@/hooks/useDashboardStore";
|
||||
|
||||
export function HeaderBar() {
|
||||
const store = useDashboardStore();
|
||||
|
||||
return (
|
||||
<header className="header">
|
||||
<div className="brand">
|
||||
<h1>PolyWeather</h1>
|
||||
<span className="subtitle">天气衍生品智能分析</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="info-btn"
|
||||
title="查看系统技术说明"
|
||||
aria-label="查看系统技术说明"
|
||||
onClick={store.openGuide}
|
||||
>
|
||||
技术说明
|
||||
</button>
|
||||
<div className="live-badge" id="liveBadge">
|
||||
<span className="pulse-dot" />
|
||||
<span>实时</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className={clsx("refresh-btn", store.loadingState.refresh && "spinning")}
|
||||
title="刷新所有数据"
|
||||
aria-label="刷新所有数据"
|
||||
onClick={() => void store.refreshAll()}
|
||||
>
|
||||
↻
|
||||
</button>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,179 @@
|
||||
"use client";
|
||||
|
||||
import { ChartConfiguration } from "chart.js/auto";
|
||||
import { useMemo } from "react";
|
||||
import { useChart } from "@/hooks/useChart";
|
||||
import { useDashboardStore, useHistoryData } from "@/hooks/useDashboardStore";
|
||||
import { getHistorySummary } from "@/lib/dashboard-utils";
|
||||
|
||||
function HistoryChart() {
|
||||
const store = useDashboardStore();
|
||||
const { data } = useHistoryData();
|
||||
const summary = useMemo(
|
||||
() => getHistorySummary(data, store.selectedDetail?.local_date),
|
||||
[data, store.selectedDetail?.local_date],
|
||||
);
|
||||
const hasMgm =
|
||||
store.selectedCity === "ankara" &&
|
||||
summary.mgms.some((value) => value != null);
|
||||
|
||||
const canvasRef = useChart(
|
||||
() => {
|
||||
const datasets: NonNullable<ChartConfiguration<"line">["data"]>["datasets"] = [
|
||||
{
|
||||
backgroundColor: "rgba(248, 113, 113, 0.1)",
|
||||
borderColor: "#f87171",
|
||||
borderWidth: 2,
|
||||
data: summary.actuals,
|
||||
label: "实测最高温",
|
||||
pointBackgroundColor: "#f87171",
|
||||
pointBorderColor: "#fff",
|
||||
pointRadius: 4,
|
||||
tension: 0.2,
|
||||
},
|
||||
{
|
||||
backgroundColor: "transparent",
|
||||
borderColor: "#34d399",
|
||||
borderDash: [5, 4],
|
||||
borderWidth: 2,
|
||||
data: summary.debs,
|
||||
label: "DEB 融合",
|
||||
pointRadius: 3,
|
||||
tension: 0.2,
|
||||
},
|
||||
];
|
||||
|
||||
if (hasMgm) {
|
||||
datasets.push({
|
||||
backgroundColor: "transparent",
|
||||
borderColor: "#fb923c",
|
||||
borderWidth: 2,
|
||||
data: summary.mgms,
|
||||
label: "MGM 官方预报",
|
||||
pointRadius: 3,
|
||||
tension: 0.2,
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
data: {
|
||||
datasets,
|
||||
labels: summary.dates,
|
||||
},
|
||||
options: {
|
||||
interaction: { intersect: false, mode: "index" },
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: "#94a3b8",
|
||||
font: { family: "Inter", size: 12 },
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: "rgba(15, 23, 42, 0.9)",
|
||||
borderColor: "rgba(255, 255, 255, 0.1)",
|
||||
borderWidth: 1,
|
||||
callbacks: {
|
||||
label: (ctx) => `${ctx.dataset.label}: ${ctx.parsed.y?.toFixed(1)}°`,
|
||||
},
|
||||
},
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
grid: { color: "rgba(255,255,255,0.04)" },
|
||||
ticks: { color: "#64748b", font: { family: "Inter", size: 10 } },
|
||||
},
|
||||
y: {
|
||||
grid: { color: "rgba(255,255,255,0.04)" },
|
||||
ticks: { color: "#64748b", font: { family: "Inter", size: 10 } },
|
||||
},
|
||||
},
|
||||
},
|
||||
type: "line",
|
||||
} satisfies ChartConfiguration<"line">;
|
||||
},
|
||||
[hasMgm, summary],
|
||||
);
|
||||
|
||||
if (!summary.recentData.length) return null;
|
||||
|
||||
return (
|
||||
<div className="history-chart-wrapper">
|
||||
<canvas ref={canvasRef} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function HistoryModal() {
|
||||
const store = useDashboardStore();
|
||||
const { data, error, isLoading, isOpen } = useHistoryData();
|
||||
const summary = useMemo(
|
||||
() => getHistorySummary(data, store.selectedDetail?.local_date),
|
||||
[data, store.selectedDetail?.local_date],
|
||||
);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal-overlay"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="history-modal-title"
|
||||
onClick={(event) => {
|
||||
if (event.target === event.currentTarget) {
|
||||
store.closeHistory();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<h2 id="history-modal-title">
|
||||
📊 历史准确率对账 - {store.selectedCity?.toUpperCase()}
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
className="modal-close"
|
||||
aria-label="关闭历史对账"
|
||||
onClick={store.closeHistory}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="history-stats">
|
||||
{isLoading ? (
|
||||
<span style={{ color: "var(--text-muted)" }}>正在获取历史数据...</span>
|
||||
) : error ? (
|
||||
<span style={{ color: "var(--accent-red)" }}>获取历史信息失败</span>
|
||||
) : !summary.recentData.length ? (
|
||||
<span style={{ color: "var(--text-muted)" }}>近 15 天暂无该城市历史数据</span>
|
||||
) : (
|
||||
<>
|
||||
<div className="h-stat-card">
|
||||
<span className="label">DEB 结算胜率 (WU)</span>
|
||||
<span className="val">
|
||||
{summary.hitRate != null ? `${summary.hitRate}%` : "--"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-stat-card">
|
||||
<span className="label">DEB MAE</span>
|
||||
<span className="val">
|
||||
{summary.debMae != null ? `${summary.debMae}°` : "--"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-stat-card">
|
||||
<span className="label">近 15 天已结算样本</span>
|
||||
<span className="val">{summary.settledCount} 天</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{!isLoading && !error && <HistoryChart />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
"use client";
|
||||
|
||||
import { useDashboardStore } from "@/hooks/useDashboardStore";
|
||||
import { useLeafletMap } from "@/hooks/useLeafletMap";
|
||||
|
||||
export function MapCanvas() {
|
||||
const store = useDashboardStore();
|
||||
const { containerRef } = useLeafletMap({
|
||||
cities: store.cities,
|
||||
cityDetailsByName: store.cityDetailsByName,
|
||||
citySummariesByName: store.citySummariesByName,
|
||||
onClosePanel: store.closePanel,
|
||||
onEnsureCityDetail: store.ensureCityDetail,
|
||||
onRegisterStopMotion: store.registerMapStopMotion,
|
||||
onSelectCity: (cityName) => {
|
||||
void store.selectCity(cityName);
|
||||
},
|
||||
selectedCity: store.selectedCity,
|
||||
selectedDetail: store.selectedDetail,
|
||||
suspendMotion:
|
||||
Boolean(store.futureModalDate) ||
|
||||
store.historyState.isOpen ||
|
||||
store.isGuideOpen,
|
||||
isLoadingDetail: store.loadingState.cityDetail,
|
||||
});
|
||||
|
||||
return <div ref={containerRef} className="map" />;
|
||||
}
|
||||
@@ -0,0 +1,485 @@
|
||||
"use client";
|
||||
|
||||
import { ChartConfiguration } from "chart.js/auto";
|
||||
import clsx from "clsx";
|
||||
import { useChart } from "@/hooks/useChart";
|
||||
import { useCityData, useDashboardStore } from "@/hooks/useDashboardStore";
|
||||
import { CityDetail } from "@/lib/dashboard-types";
|
||||
import {
|
||||
getHeroMetaItems,
|
||||
getModelView,
|
||||
getProbabilityView,
|
||||
getTemperatureChartData,
|
||||
getWeatherSummary,
|
||||
parseAiAnalysis,
|
||||
} from "@/lib/dashboard-utils";
|
||||
|
||||
function EmptyState({ text }: { text: string }) {
|
||||
return <div style={{ color: "var(--text-muted)", fontSize: "13px" }}>{text}</div>;
|
||||
}
|
||||
|
||||
export function HeroSummary() {
|
||||
const { data } = useCityData();
|
||||
if (!data) return null;
|
||||
|
||||
const { weatherIcon, weatherText } = getWeatherSummary(data);
|
||||
const metaItems = getHeroMetaItems(data);
|
||||
const current = data.current || {};
|
||||
const isMax =
|
||||
current.max_so_far != null &&
|
||||
current.temp != null &&
|
||||
current.max_so_far <= current.temp;
|
||||
|
||||
return (
|
||||
<section className="hero-section">
|
||||
<div className="hero-weather">
|
||||
<span>
|
||||
{weatherIcon} {weatherText}
|
||||
</span>
|
||||
</div>
|
||||
<div className="hero-temp">
|
||||
<span className="hero-value">
|
||||
{current.temp != null ? current.temp.toFixed(1) : "--"}
|
||||
</span>
|
||||
<span className="hero-unit">{data.temp_symbol || "°C"}</span>
|
||||
</div>
|
||||
<div className="hero-max-time">
|
||||
{isMax && current.max_temp_time
|
||||
? `该城市今日最高温出现在当地时间 ${current.max_temp_time}`
|
||||
: ""}
|
||||
</div>
|
||||
<div className="hero-details">
|
||||
<div className="hero-item">
|
||||
<span className="label">当前实测</span>
|
||||
<span className="value">
|
||||
{current.temp != null
|
||||
? `${current.temp}${data.temp_symbol} @${current.obs_time || "--"}`
|
||||
: "--"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="hero-item">
|
||||
<span className="label">WU 结算参考</span>
|
||||
<span className="value highlight">
|
||||
{current.wu_settlement != null
|
||||
? `${current.wu_settlement}${data.temp_symbol}`
|
||||
: "--"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="hero-item">
|
||||
<span className="label">DEB 预测</span>
|
||||
<span className="value">
|
||||
{data.deb?.prediction != null
|
||||
? `${data.deb.prediction}${data.temp_symbol}`
|
||||
: "--"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hero-sub">
|
||||
{metaItems.map((item) => (
|
||||
<span key={item}>{item}</span>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function TemperatureChart() {
|
||||
const { data } = useCityData();
|
||||
const chartData = data ? getTemperatureChartData(data) : null;
|
||||
|
||||
const canvasRef = useChart(
|
||||
() => {
|
||||
if (!data || !chartData) {
|
||||
return {
|
||||
data: { datasets: [], labels: [] },
|
||||
type: "line",
|
||||
} satisfies ChartConfiguration<"line">;
|
||||
}
|
||||
|
||||
const datasets: NonNullable<ChartConfiguration<"line">["data"]>["datasets"] = [];
|
||||
|
||||
if (chartData.datasets.hasMgmHourly) {
|
||||
datasets.push({
|
||||
backgroundColor: "rgba(234, 179, 8, 0.05)",
|
||||
borderColor: "rgba(234, 179, 8, 0.8)",
|
||||
borderWidth: 2,
|
||||
data: chartData.datasets.mgmHourlyPoints,
|
||||
fill: false,
|
||||
label: "MGM 预报",
|
||||
pointHoverRadius: 6,
|
||||
pointRadius: 3,
|
||||
spanGaps: true,
|
||||
tension: 0.3,
|
||||
});
|
||||
} else {
|
||||
datasets.push({
|
||||
backgroundColor: "rgba(52, 211, 153, 0.05)",
|
||||
borderColor: "rgba(52, 211, 153, 0.6)",
|
||||
borderWidth: 1.5,
|
||||
data: chartData.datasets.debPast,
|
||||
fill: true,
|
||||
label: "DEB 预报",
|
||||
pointHoverRadius: 3,
|
||||
pointRadius: 0,
|
||||
tension: 0.3,
|
||||
});
|
||||
datasets.push({
|
||||
borderColor: "rgba(52, 211, 153, 0.35)",
|
||||
borderDash: [5, 3],
|
||||
borderWidth: 1.5,
|
||||
data: chartData.datasets.debFuture,
|
||||
fill: false,
|
||||
label: "DEB 预报",
|
||||
pointRadius: 0,
|
||||
tension: 0.3,
|
||||
});
|
||||
}
|
||||
|
||||
datasets.push({
|
||||
backgroundColor: "#22d3ee",
|
||||
borderColor: "#22d3ee",
|
||||
borderWidth: 0,
|
||||
data: chartData.datasets.metarPoints,
|
||||
fill: false,
|
||||
label: "METAR 实测",
|
||||
order: 0,
|
||||
pointHoverRadius: 7,
|
||||
pointRadius: 5,
|
||||
});
|
||||
|
||||
if (chartData.datasets.mgmPoints.some((value) => value != null)) {
|
||||
datasets.push({
|
||||
backgroundColor: "#facc15",
|
||||
borderColor: "#facc15",
|
||||
borderWidth: 0,
|
||||
data: chartData.datasets.mgmPoints,
|
||||
fill: false,
|
||||
label: "MGM 实测",
|
||||
order: -1,
|
||||
pointHoverRadius: 9,
|
||||
pointRadius: 7,
|
||||
showLine: false,
|
||||
});
|
||||
}
|
||||
|
||||
if (
|
||||
!chartData.datasets.hasMgmHourly &&
|
||||
Math.abs(chartData.datasets.offset) > 0.3
|
||||
) {
|
||||
datasets.push({
|
||||
borderColor: "rgba(99, 102, 241, 0.2)",
|
||||
borderDash: [2, 4],
|
||||
borderWidth: 1,
|
||||
data: chartData.datasets.temps,
|
||||
fill: false,
|
||||
label: "OM 原始",
|
||||
pointRadius: 0,
|
||||
tension: 0.3,
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
data: {
|
||||
datasets,
|
||||
labels: chartData.times,
|
||||
},
|
||||
options: {
|
||||
interaction: { intersect: false, mode: "index" },
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: {
|
||||
backgroundColor: "rgba(15, 23, 42, 0.9)",
|
||||
borderColor: "rgba(52, 211, 153, 0.3)",
|
||||
borderWidth: 1,
|
||||
},
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
grid: { color: "rgba(255,255,255,0.04)" },
|
||||
ticks: {
|
||||
callback: (_value, index) =>
|
||||
typeof index === "number" && index % 3 === 0
|
||||
? chartData.times[index]
|
||||
: "",
|
||||
color: "#64748b",
|
||||
maxRotation: 0,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
grid: { color: "rgba(255,255,255,0.04)" },
|
||||
max: chartData.max,
|
||||
min: chartData.min,
|
||||
ticks: {
|
||||
callback: (value) => `${value}${data.temp_symbol || "°C"}`,
|
||||
color: "#64748b",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
type: "line",
|
||||
} satisfies ChartConfiguration<"line">;
|
||||
},
|
||||
[data, chartData],
|
||||
);
|
||||
|
||||
return (
|
||||
<section className="chart-section">
|
||||
<h3>今日温度走势</h3>
|
||||
<div className="chart-wrapper">
|
||||
<canvas ref={canvasRef} />
|
||||
</div>
|
||||
<div className="chart-legend">{chartData?.legendText || "暂无小时级数据"}</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function ProbabilityDistribution({
|
||||
detail,
|
||||
hideTitle = false,
|
||||
targetDate,
|
||||
}: {
|
||||
detail: CityDetail;
|
||||
hideTitle?: boolean;
|
||||
targetDate?: string | null;
|
||||
}) {
|
||||
const view = getProbabilityView(detail, targetDate);
|
||||
|
||||
return (
|
||||
<section className="prob-section">
|
||||
{!hideTitle && <h3>结算概率分布</h3>}
|
||||
<div className="prob-bars">
|
||||
{view.mu != null && (
|
||||
<div
|
||||
style={{ color: "var(--text-muted)", fontSize: "11px", marginBottom: "6px" }}
|
||||
>
|
||||
动态分布中心 μ = {view.mu.toFixed(1)}
|
||||
{detail.temp_symbol}
|
||||
</div>
|
||||
)}
|
||||
{view.probabilities.length === 0 ? (
|
||||
<EmptyState text="暂无概率数据" />
|
||||
) : (
|
||||
view.probabilities.slice(0, 6).map((bucket, index) => {
|
||||
const probability = Math.round(Number(bucket.probability || 0) * 100);
|
||||
return (
|
||||
<div key={`${bucket.label || bucket.value || index}`} className="prob-row">
|
||||
<div className="prob-label">
|
||||
{bucket.label || `${bucket.value}${detail.temp_symbol}`}
|
||||
</div>
|
||||
<div className="prob-bar-track">
|
||||
<div
|
||||
className={clsx("prob-bar-fill", `rank-${index}`)}
|
||||
style={{ width: `${Math.max(probability, 8)}%` }}
|
||||
>
|
||||
{probability}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function ModelForecast({
|
||||
detail,
|
||||
hideTitle = false,
|
||||
targetDate,
|
||||
}: {
|
||||
detail: CityDetail;
|
||||
hideTitle?: boolean;
|
||||
targetDate?: string | null;
|
||||
}) {
|
||||
const view = getModelView(detail, targetDate);
|
||||
const modelEntries = Object.entries(view.models).filter(([, value]) =>
|
||||
Number.isFinite(Number(value)),
|
||||
);
|
||||
const numericValues = modelEntries.map(([, value]) => Number(value));
|
||||
const comparisonValues =
|
||||
view.deb != null ? [...numericValues, Number(view.deb)] : numericValues;
|
||||
const minValue = comparisonValues.length ? Math.min(...comparisonValues) - 1 : 0;
|
||||
const maxValue = comparisonValues.length ? Math.max(...comparisonValues) + 1 : 1;
|
||||
const range = Math.max(maxValue - minValue, 1);
|
||||
|
||||
return (
|
||||
<section className="models-section">
|
||||
{!hideTitle && <h3>多模型预报</h3>}
|
||||
<div className="model-bars">
|
||||
{!modelEntries.length ? (
|
||||
<EmptyState text="暂无多模型预报" />
|
||||
) : (
|
||||
<>
|
||||
{modelEntries
|
||||
.sort((a, b) => Number(b[1] || 0) - Number(a[1] || 0))
|
||||
.map(([name, value]) => {
|
||||
const numeric = Number(value);
|
||||
const width = ((numeric - minValue) / range) * 100;
|
||||
const debLine =
|
||||
view.deb != null
|
||||
? ((Number(view.deb) - minValue) / range) * 100
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div key={name} className="model-row">
|
||||
<div className="model-name" title={name}>
|
||||
{name}
|
||||
</div>
|
||||
<div className="model-bar-track">
|
||||
<div className="model-bar-fill" style={{ width: `${width}%` }}>
|
||||
{numeric}
|
||||
{detail.temp_symbol}
|
||||
</div>
|
||||
{debLine != null && (
|
||||
<div className="model-deb-line" style={{ left: `${debLine}%` }} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{view.deb != null && (
|
||||
<div
|
||||
className="model-row"
|
||||
style={{
|
||||
borderTop: "1px solid rgba(255,255,255,0.06)",
|
||||
marginTop: "6px",
|
||||
paddingTop: "6px",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="model-name"
|
||||
style={{ color: "var(--accent-cyan)", fontWeight: 700 }}
|
||||
>
|
||||
DEB
|
||||
</div>
|
||||
<div className="model-bar-track">
|
||||
<div
|
||||
className="model-bar-fill deb"
|
||||
style={{
|
||||
width: `${((Number(view.deb) - minValue) / range) * 100}%`,
|
||||
}}
|
||||
>
|
||||
{Number(view.deb)}
|
||||
{detail.temp_symbol}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function ForecastTable() {
|
||||
const store = useDashboardStore();
|
||||
const { data } = useCityData();
|
||||
if (!data) return null;
|
||||
|
||||
const daily = data.forecast?.daily || [];
|
||||
return (
|
||||
<section className="forecast-section">
|
||||
<h3>多日预报</h3>
|
||||
<div className="forecast-table">
|
||||
{daily.length === 0 ? (
|
||||
<EmptyState text="暂无多日预报" />
|
||||
) : (
|
||||
daily.map((day, index) => {
|
||||
const isToday = day.date === data.local_date || index === 0;
|
||||
const isSelected =
|
||||
store.futureModalDate === day.date ||
|
||||
store.selectedForecastDate === day.date;
|
||||
return (
|
||||
<button
|
||||
key={day.date}
|
||||
type="button"
|
||||
className={clsx("forecast-day", isToday && "today", isSelected && "selected")}
|
||||
onClick={() => {
|
||||
store.openFutureModal(day.date);
|
||||
}}
|
||||
>
|
||||
<div className="f-date">
|
||||
{isToday ? "今天" : day.date.substring(5).replace("-", "/")}
|
||||
</div>
|
||||
<div className="f-temp">
|
||||
{day.max_temp}
|
||||
{data.temp_symbol}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function AiAnalysis() {
|
||||
const { data } = useCityData();
|
||||
if (!data) return null;
|
||||
const ai = parseAiAnalysis(data.ai_analysis);
|
||||
|
||||
return (
|
||||
<section className="ai-section">
|
||||
<h3>AI 深度分析</h3>
|
||||
<div className="ai-box">
|
||||
{!ai.summary && ai.bullets.length === 0 ? (
|
||||
<span className="ai-placeholder">
|
||||
暂无 AI 分析，当前以结构化气象与模型数据为主。
|
||||
</span>
|
||||
) : (
|
||||
<>
|
||||
{ai.summary && <div className="ai-summary">{ai.summary}</div>}
|
||||
{ai.bullets.length > 0 && (
|
||||
<ul className="ai-list">
|
||||
{ai.bullets.map((item) => (
|
||||
<li key={item}>{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function RiskInfo() {
|
||||
const { data } = useCityData();
|
||||
if (!data) return null;
|
||||
const risk = data.risk || {};
|
||||
|
||||
return (
|
||||
<section className="risk-section">
|
||||
<h3>数据偏差风险</h3>
|
||||
<div className="risk-info">
|
||||
{!risk.airport ? (
|
||||
<span style={{ color: "var(--text-muted)" }}>暂无风险档案</span>
|
||||
) : (
|
||||
<>
|
||||
<div className="risk-row">
|
||||
<span className="risk-label">机场</span>
|
||||
<span>
|
||||
{risk.airport} ({risk.icao})
|
||||
</span>
|
||||
</div>
|
||||
<div className="risk-row">
|
||||
<span className="risk-label">距离</span>
|
||||
<span>{risk.distance_km}km</span>
|
||||
</div>
|
||||
{risk.warning && (
|
||||
<div className="risk-row">
|
||||
<span className="risk-label">注意</span>
|
||||
<span>{risk.warning}</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
import styles from "./Dashboard.module.css";
|
||||
import {
|
||||
DashboardStoreProvider,
|
||||
useDashboardStore,
|
||||
} from "@/hooks/useDashboardStore";
|
||||
import { CitySidebar } from "@/components/dashboard/CitySidebar";
|
||||
import { DetailPanel } from "@/components/dashboard/DetailPanel";
|
||||
import { FutureForecastModal } from "@/components/dashboard/FutureForecastModal";
|
||||
import { GuideModal } from "@/components/dashboard/GuideModal";
|
||||
import { HeaderBar } from "@/components/dashboard/HeaderBar";
|
||||
import { HistoryModal } from "@/components/dashboard/HistoryModal";
|
||||
import { MapCanvas } from "@/components/dashboard/MapCanvas";
|
||||
|
||||
function DashboardScreen() {
|
||||
const store = useDashboardStore();
|
||||
|
||||
useEffect(() => {
|
||||
const onKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key !== "Escape") return;
|
||||
if (store.futureModalDate) {
|
||||
store.closeFutureModal();
|
||||
return;
|
||||
}
|
||||
if (store.historyState.isOpen) {
|
||||
store.closeHistory();
|
||||
return;
|
||||
}
|
||||
if (store.isGuideOpen) {
|
||||
store.closeGuide();
|
||||
return;
|
||||
}
|
||||
if (store.isPanelOpen) {
|
||||
store.closePanel();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("keydown", onKeyDown);
|
||||
return () => {
|
||||
window.removeEventListener("keydown", onKeyDown);
|
||||
};
|
||||
}, [store]);
|
||||
|
||||
// Avoid full-page flashing on initial load; only show this overlay for manual refresh.
|
||||
const showLoading =
|
||||
store.loadingState.cities ||
|
||||
store.loadingState.cityDetail ||
|
||||
store.loadingState.refresh;
|
||||
|
||||
return (
|
||||
<div className={styles.root}>
|
||||
<MapCanvas />
|
||||
<HeaderBar />
|
||||
<CitySidebar />
|
||||
<DetailPanel />
|
||||
<GuideModal />
|
||||
<HistoryModal />
|
||||
<FutureForecastModal />
|
||||
{showLoading && (
|
||||
<div className="loading-overlay">
|
||||
<div className="loading-spinner" />
|
||||
<span>正在获取气象数据，请稍候...</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function PolyWeatherDashboard() {
|
||||
return (
|
||||
<DashboardStoreProvider>
|
||||
<DashboardScreen />
|
||||
</DashboardStoreProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
import { Chart, ChartConfiguration, ChartType } from "chart.js/auto";
|
||||
|
||||
export function useChart<TType extends ChartType>(
|
||||
createConfig: () => ChartConfiguration<TType>,
|
||||
dependencies: React.DependencyList,
|
||||
) {
|
||||
const canvasRef = useRef<HTMLCanvasElement | null>(null);
|
||||
const chartRef = useRef<Chart<TType> | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
const config = createConfig();
|
||||
if (chartRef.current) {
|
||||
chartRef.current.destroy();
|
||||
chartRef.current = null;
|
||||
}
|
||||
|
||||
chartRef.current = new Chart(canvas, config);
|
||||
return () => {
|
||||
chartRef.current?.destroy();
|
||||
chartRef.current = null;
|
||||
};
|
||||
}, dependencies);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
chartRef.current?.destroy();
|
||||
chartRef.current = null;
|
||||
};
|
||||
}, []);
|
||||
|
||||
return canvasRef;
|
||||
}
|
||||
@@ -0,0 +1,411 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
createContext,
|
||||
useContext,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import {
|
||||
dashboardClient,
|
||||
getCityRevision,
|
||||
toCitySummary,
|
||||
} from "@/lib/dashboard-client";
|
||||
import {
|
||||
CityDetail,
|
||||
CityListItem,
|
||||
CitySummary,
|
||||
DashboardState,
|
||||
HistoryPoint,
|
||||
HistoryState,
|
||||
LoadingState,
|
||||
} from "@/lib/dashboard-types";
|
||||
|
||||
interface DashboardStoreValue extends DashboardState {
|
||||
closeFutureModal: () => void;
|
||||
closeGuide: () => void;
|
||||
closeHistory: () => void;
|
||||
closePanel: () => void;
|
||||
ensureCityDetail: (cityName: string, force?: boolean) => Promise<CityDetail>;
|
||||
futureModalDate: string | null;
|
||||
isGuideOpen: boolean;
|
||||
loadCities: () => Promise<void>;
|
||||
openFutureModal: (dateStr: string) => void;
|
||||
openGuide: () => void;
|
||||
openHistory: () => Promise<void>;
|
||||
openTodayModal: () => void;
|
||||
registerMapStopMotion: (stopMotion: () => void) => void;
|
||||
refreshAll: () => Promise<void>;
|
||||
refreshSelectedCity: () => Promise<void>;
|
||||
selectedDetail: CityDetail | null;
|
||||
selectCity: (cityName: string) => Promise<void>;
|
||||
setForecastDate: (dateStr: string | null) => void;
|
||||
}
|
||||
|
||||
const DashboardStoreContext = createContext<DashboardStoreValue | null>(null);
|
||||
|
||||
function getInitialLoadingState(): LoadingState {
|
||||
return {
|
||||
cities: false,
|
||||
cityDetail: false,
|
||||
history: false,
|
||||
refresh: false,
|
||||
};
|
||||
}
|
||||
|
||||
function getInitialHistoryState(): HistoryState {
|
||||
return {
|
||||
dataByCity: {},
|
||||
error: null,
|
||||
isOpen: false,
|
||||
loading: false,
|
||||
};
|
||||
}
|
||||
|
||||
export function DashboardStoreProvider({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const initialCache = dashboardClient.readCityDetailCacheBundle();
|
||||
const [cities, setCities] = useState<CityListItem[]>([]);
|
||||
const [cityDetailsByName, setCityDetailsByName] = useState<
|
||||
Record<string, CityDetail>
|
||||
>(() => initialCache.details);
|
||||
const [citySummariesByName, setCitySummariesByName] = useState<
|
||||
Record<string, CitySummary>
|
||||
>(() =>
|
||||
Object.fromEntries(
|
||||
Object.entries(initialCache.details).map(([cityName, detail]) => [
|
||||
cityName,
|
||||
toCitySummary(detail),
|
||||
]),
|
||||
),
|
||||
);
|
||||
const [cityDetailMetaByName, setCityDetailMetaByName] = useState<
|
||||
Record<string, { cachedAt: number; revision: string }>
|
||||
>(() => initialCache.meta);
|
||||
const [selectedCity, setSelectedCity] = useState<string | null>(null);
|
||||
const [isPanelOpen, setIsPanelOpen] = useState(false);
|
||||
const [selectedForecastDate, setSelectedForecastDate] = useState<
|
||||
string | null
|
||||
>(null);
|
||||
const [futureModalDate, setFutureModalDate] = useState<string | null>(null);
|
||||
const [loadingState, setLoadingState] = useState<LoadingState>(
|
||||
getInitialLoadingState,
|
||||
);
|
||||
const [historyState, setHistoryState] = useState<HistoryState>(
|
||||
getInitialHistoryState,
|
||||
);
|
||||
const [isGuideOpen, setIsGuideOpen] = useState(false);
|
||||
|
||||
const mapStopMotionRef = useRef<() => void>(() => {});
|
||||
const citySummariesRef = useRef<Record<string, CitySummary>>(
|
||||
Object.fromEntries(
|
||||
Object.entries(initialCache.details).map(([cityName, detail]) => [
|
||||
cityName,
|
||||
toCitySummary(detail),
|
||||
]),
|
||||
),
|
||||
);
|
||||
const selectedDetail = selectedCity
|
||||
? cityDetailsByName[selectedCity] || null
|
||||
: null;
|
||||
|
||||
useEffect(() => {
|
||||
dashboardClient.writeCityDetailCacheBundle(
|
||||
cityDetailsByName,
|
||||
cityDetailMetaByName,
|
||||
);
|
||||
}, [cityDetailMetaByName, cityDetailsByName]);
|
||||
|
||||
useEffect(() => {
|
||||
citySummariesRef.current = citySummariesByName;
|
||||
}, [citySummariesByName]);
|
||||
|
||||
const ensureCityDetail = async (cityName: string, force = false) => {
|
||||
const cached = cityDetailsByName[cityName];
|
||||
const cachedMeta = cityDetailMetaByName[cityName];
|
||||
if (!force && cached && dashboardClient.isCityDetailFresh(cachedMeta)) {
|
||||
return cached;
|
||||
}
|
||||
|
||||
if (!force && cached) {
|
||||
try {
|
||||
const summary = await dashboardClient.getCitySummary(cityName);
|
||||
const revision = getCityRevision(summary);
|
||||
if (revision && revision === cachedMeta?.revision) {
|
||||
setCityDetailMetaByName((current) => ({
|
||||
...current,
|
||||
[cityName]: {
|
||||
cachedAt: Date.now(),
|
||||
revision,
|
||||
},
|
||||
}));
|
||||
return cached;
|
||||
}
|
||||
} catch {
|
||||
return cached;
|
||||
}
|
||||
}
|
||||
|
||||
const detail = await dashboardClient.getCityDetail(cityName, { force });
|
||||
setCityDetailsByName((current) => ({
|
||||
...current,
|
||||
[cityName]: detail,
|
||||
}));
|
||||
setCitySummariesByName((current) => ({
|
||||
...current,
|
||||
[cityName]: toCitySummary(detail),
|
||||
}));
|
||||
setCityDetailMetaByName((current) => ({
|
||||
...current,
|
||||
[cityName]: {
|
||||
cachedAt: Date.now(),
|
||||
revision: getCityRevision(detail),
|
||||
},
|
||||
}));
|
||||
return detail;
|
||||
};
|
||||
|
||||
const loadCities = async () => {
|
||||
setLoadingState((current) => ({ ...current, cities: true }));
|
||||
try {
|
||||
const nextCities = await dashboardClient.getCities();
|
||||
setCities(nextCities);
|
||||
} finally {
|
||||
setLoadingState((current) => ({ ...current, cities: false }));
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
void loadCities();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!cities.length) return;
|
||||
|
||||
const queue = cities
|
||||
.map((city) => city.name)
|
||||
.filter((cityName) => !citySummariesRef.current[cityName]);
|
||||
if (!queue.length) return;
|
||||
|
||||
let active = true;
|
||||
const concurrency = 4;
|
||||
let cursor = 0;
|
||||
|
||||
const worker = async () => {
|
||||
while (active && cursor < queue.length) {
|
||||
const cityName = queue[cursor];
|
||||
cursor += 1;
|
||||
if (citySummariesRef.current[cityName]) continue;
|
||||
|
||||
try {
|
||||
const summary = await dashboardClient.getCitySummary(cityName);
|
||||
if (!active) return;
|
||||
|
||||
setCitySummariesByName((current) => {
|
||||
if (current[cityName]) return current;
|
||||
const next = {
|
||||
...current,
|
||||
[cityName]: summary,
|
||||
};
|
||||
citySummariesRef.current = next;
|
||||
return next;
|
||||
});
|
||||
} catch {}
|
||||
}
|
||||
};
|
||||
|
||||
void Promise.all(
|
||||
Array.from({ length: Math.min(concurrency, queue.length) }, () =>
|
||||
worker(),
|
||||
),
|
||||
);
|
||||
|
||||
return () => {
|
||||
active = false;
|
||||
};
|
||||
}, [cities]);
|
||||
|
||||
const selectCity = async (cityName: string) => {
|
||||
setSelectedCity(cityName);
|
||||
setIsPanelOpen(true);
|
||||
setSelectedForecastDate(null);
|
||||
setFutureModalDate(null);
|
||||
setLoadingState((current) => ({ ...current, cityDetail: true }));
|
||||
try {
|
||||
const detail = await ensureCityDetail(cityName);
|
||||
setSelectedForecastDate(detail.local_date);
|
||||
} finally {
|
||||
setLoadingState((current) => ({ ...current, cityDetail: false }));
|
||||
}
|
||||
};
|
||||
|
||||
const refreshSelectedCity = async () => {
|
||||
if (!selectedCity) return;
|
||||
setLoadingState((current) => ({ ...current, refresh: true }));
|
||||
try {
|
||||
const detail = await ensureCityDetail(selectedCity, true);
|
||||
setSelectedForecastDate(detail.local_date);
|
||||
} finally {
|
||||
setLoadingState((current) => ({ ...current, refresh: false }));
|
||||
}
|
||||
};
|
||||
|
||||
const refreshAll = async () => {
|
||||
dashboardClient.clearCityDetailCache();
|
||||
setCityDetailsByName({});
|
||||
setCityDetailMetaByName({});
|
||||
if (selectedCity) {
|
||||
setLoadingState((current) => ({ ...current, refresh: true }));
|
||||
try {
|
||||
const detail = await dashboardClient.getCityDetail(selectedCity, {
|
||||
force: true,
|
||||
});
|
||||
setCityDetailsByName({ [selectedCity]: detail });
|
||||
setCitySummariesByName((current) => ({
|
||||
...current,
|
||||
[selectedCity]: toCitySummary(detail),
|
||||
}));
|
||||
setCityDetailMetaByName({
|
||||
[selectedCity]: {
|
||||
cachedAt: Date.now(),
|
||||
revision: getCityRevision(detail),
|
||||
},
|
||||
});
|
||||
setSelectedForecastDate(detail.local_date);
|
||||
} finally {
|
||||
setLoadingState((current) => ({ ...current, refresh: false }));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const openHistory = async () => {
|
||||
if (!selectedCity) return;
|
||||
setHistoryState((current) => ({
|
||||
...current,
|
||||
error: null,
|
||||
isOpen: true,
|
||||
loading: true,
|
||||
}));
|
||||
try {
|
||||
const history = await dashboardClient.getHistory(selectedCity);
|
||||
setHistoryState((current) => ({
|
||||
...current,
|
||||
dataByCity: {
|
||||
...current.dataByCity,
|
||||
[selectedCity]: history,
|
||||
},
|
||||
loading: false,
|
||||
}));
|
||||
} catch (error) {
|
||||
setHistoryState((current) => ({
|
||||
...current,
|
||||
error: String(error),
|
||||
loading: false,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const value = useMemo<DashboardStoreValue>(
|
||||
() => ({
|
||||
cities,
|
||||
cityDetailsByName,
|
||||
citySummariesByName,
|
||||
closeFutureModal: () => setFutureModalDate(null),
|
||||
closeGuide: () => setIsGuideOpen(false),
|
||||
closeHistory: () =>
|
||||
setHistoryState((current) => ({ ...current, isOpen: false })),
|
||||
closePanel: () => {
|
||||
setIsPanelOpen(false);
|
||||
},
|
||||
ensureCityDetail,
|
||||
futureModalDate,
|
||||
historyState,
|
||||
isPanelOpen,
|
||||
isGuideOpen,
|
||||
loadCities,
|
||||
loadingState,
|
||||
openFutureModal: (dateStr: string) => {
|
||||
mapStopMotionRef.current();
|
||||
setFutureModalDate(dateStr);
|
||||
},
|
||||
openGuide: () => setIsGuideOpen(true),
|
||||
openHistory,
|
||||
openTodayModal: () => {
|
||||
if (selectedDetail?.local_date) {
|
||||
mapStopMotionRef.current();
|
||||
setFutureModalDate(selectedDetail.local_date);
|
||||
}
|
||||
},
|
||||
registerMapStopMotion: (stopMotion: () => void) => {
|
||||
mapStopMotionRef.current = stopMotion;
|
||||
},
|
||||
refreshAll,
|
||||
refreshSelectedCity,
|
||||
selectedCity,
|
||||
selectedDetail,
|
||||
selectedForecastDate,
|
||||
selectCity,
|
||||
setForecastDate: (dateStr: string | null) =>
|
||||
setSelectedForecastDate(dateStr),
|
||||
}),
|
||||
[
|
||||
cities,
|
||||
cityDetailsByName,
|
||||
citySummariesByName,
|
||||
futureModalDate,
|
||||
historyState,
|
||||
isPanelOpen,
|
||||
isGuideOpen,
|
||||
loadingState,
|
||||
selectedCity,
|
||||
selectedDetail,
|
||||
selectedForecastDate,
|
||||
],
|
||||
);
|
||||
|
||||
return (
|
||||
<DashboardStoreContext.Provider value={value}>
|
||||
{children}
|
||||
</DashboardStoreContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useDashboardStore() {
|
||||
const context = useContext(DashboardStoreContext);
|
||||
if (!context) {
|
||||
throw new Error(
|
||||
"useDashboardStore must be used within DashboardStoreProvider",
|
||||
);
|
||||
}
|
||||
return context;
|
||||
}
|
||||
|
||||
export function useCityData(name?: string | null) {
|
||||
const store = useDashboardStore();
|
||||
const key = name || store.selectedCity;
|
||||
return {
|
||||
data: key ? store.cityDetailsByName[key] || null : null,
|
||||
isLoading:
|
||||
store.loadingState.cityDetail &&
|
||||
Boolean(key) &&
|
||||
store.selectedCity === key,
|
||||
};
|
||||
}
|
||||
|
||||
export function useHistoryData(name?: string | null) {
|
||||
const store = useDashboardStore();
|
||||
const key = name || store.selectedCity;
|
||||
return {
|
||||
data: key
|
||||
? store.historyState.dataByCity[key] || ([] as HistoryPoint[])
|
||||
: [],
|
||||
error: store.historyState.error,
|
||||
isLoading: store.historyState.loading,
|
||||
isOpen: store.historyState.isOpen,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,482 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
import L from "leaflet";
|
||||
import {
|
||||
CityDetail,
|
||||
CityListItem,
|
||||
CitySummary,
|
||||
NearbyStation,
|
||||
} from "@/lib/dashboard-types";
|
||||
import { pickAnkaraNearbyStations } from "@/lib/dashboard-utils";
|
||||
|
||||
interface UseLeafletMapArgs {
|
||||
cities: CityListItem[];
|
||||
cityDetailsByName: Record<string, CityDetail>;
|
||||
citySummariesByName: Record<string, CitySummary>;
|
||||
onClosePanel: () => void;
|
||||
onEnsureCityDetail: (
|
||||
cityName: string,
|
||||
force?: boolean,
|
||||
) => Promise<CityDetail>;
|
||||
onRegisterStopMotion: (stopMotion: () => void) => void;
|
||||
onSelectCity: (cityName: string) => void;
|
||||
selectedCity: string | null;
|
||||
selectedDetail: CityDetail | null;
|
||||
suspendMotion: boolean;
|
||||
isLoadingDetail: boolean;
|
||||
}
|
||||
|
||||
const AUTO_NEARBY_MIN_ZOOM = 8;
|
||||
const AUTO_NEARBY_MAX_DISTANCE_M = 120000;
|
||||
const MAP_MAX_ZOOM = 19;
|
||||
|
||||
function createMarkerIcon(
|
||||
city: CityListItem,
|
||||
snapshot?: Pick<CityDetail, "current" | "temp_symbol"> | CitySummary,
|
||||
) {
|
||||
const riskClass = `risk-${city.risk_level}`;
|
||||
const label = city.display_name;
|
||||
const unit = city.temp_unit === "fahrenheit" ? "°F" : "°C";
|
||||
const shortName = label.length > 10 ? `${label.substring(0, 8)}...` : label;
|
||||
const tempText =
|
||||
snapshot?.current?.temp != null ? `${snapshot.current.temp}${unit}` : "--";
|
||||
|
||||
return L.divIcon({
|
||||
className: "",
|
||||
html: `
|
||||
<div class="city-marker" data-city="${city.name}">
|
||||
<div class="marker-bubble ${riskClass}">${tempText}</div>
|
||||
<div class="marker-name">${shortName}</div>
|
||||
</div>
|
||||
`,
|
||||
iconAnchor: [40, 22],
|
||||
iconSize: [80, 44],
|
||||
});
|
||||
}
|
||||
|
||||
function buildNearbyIconHtml(detail: CityDetail, station: NearbyStation) {
|
||||
const symbol = detail.temp_symbol || "°C";
|
||||
let windHtml = "";
|
||||
|
||||
if (station.wind_dir != null) {
|
||||
const rotation = (Number(station.wind_dir) + 180) % 360;
|
||||
const speedRaw = Number(station.wind_speed ?? station.wind_speed_kt);
|
||||
const speed = Number.isFinite(speedRaw) ? `${speedRaw.toFixed(1)}k` : "";
|
||||
windHtml = `
|
||||
<div class="nearby-wind">
|
||||
<span class="wind-arrow" style="transform: rotate(${rotation}deg)">↑</span>
|
||||
<span class="wind-val">${speed}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="nearby-marker-premium">
|
||||
<div class="nearby-pulse">
|
||||
<div class="pulse-ring"></div>
|
||||
<div class="pulse-core"></div>
|
||||
</div>
|
||||
<div class="nearby-content">
|
||||
<span class="nearby-label">${station.name || station.icao || "OBS"}</span>
|
||||
<div class="nearby-stats">
|
||||
<span class="nearby-temp-val">${station.temp ?? "--"}</span>
|
||||
<span class="nearby-temp-unit">${symbol}</span>
|
||||
</div>
|
||||
</div>
|
||||
${windHtml}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
export function useLeafletMap({
|
||||
cities,
|
||||
cityDetailsByName,
|
||||
citySummariesByName,
|
||||
onClosePanel,
|
||||
onEnsureCityDetail,
|
||||
onRegisterStopMotion,
|
||||
onSelectCity,
|
||||
selectedCity,
|
||||
selectedDetail,
|
||||
suspendMotion,
|
||||
isLoadingDetail,
|
||||
}: UseLeafletMapArgs) {
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
const mapRef = useRef<L.Map | null>(null);
|
||||
const markersRef = useRef<
|
||||
Record<string, { city: CityListItem; marker: L.Marker }>
|
||||
>({});
|
||||
const nearbyLayerRef = useRef<L.LayerGroup | null>(null);
|
||||
const autoNearbyCityRef = useRef<string | null>(null);
|
||||
const loadingAutoNearbyRef = useRef(false);
|
||||
const lastMovedCityRef = useRef<string | null>(null);
|
||||
const suspendMotionRef = useRef(suspendMotion);
|
||||
const hasFittedInitialBoundsRef = useRef(false);
|
||||
const onClosePanelRef = useRef(onClosePanel);
|
||||
const onRegisterStopMotionRef = useRef(onRegisterStopMotion);
|
||||
const onSelectCityRef = useRef(onSelectCity);
|
||||
const onEnsureCityDetailRef = useRef(onEnsureCityDetail);
|
||||
|
||||
useEffect(() => {
|
||||
onClosePanelRef.current = onClosePanel;
|
||||
}, [onClosePanel]);
|
||||
|
||||
useEffect(() => {
|
||||
onRegisterStopMotionRef.current = onRegisterStopMotion;
|
||||
}, [onRegisterStopMotion]);
|
||||
|
||||
useEffect(() => {
|
||||
onSelectCityRef.current = onSelectCity;
|
||||
}, [onSelectCity]);
|
||||
|
||||
useEffect(() => {
|
||||
onEnsureCityDetailRef.current = onEnsureCityDetail;
|
||||
}, [onEnsureCityDetail]);
|
||||
|
||||
useEffect(() => {
|
||||
suspendMotionRef.current = suspendMotion;
|
||||
}, [suspendMotion]);
|
||||
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container || mapRef.current) return;
|
||||
|
||||
const map = L.map(container, {
|
||||
attributionControl: true,
|
||||
bounceAtZoomLimits: false,
|
||||
center: [30, 10],
|
||||
maxZoom: MAP_MAX_ZOOM,
|
||||
minZoom: 2,
|
||||
zoom: 3,
|
||||
zoomControl: false,
|
||||
});
|
||||
|
||||
L.control.zoom({ position: "bottomright" }).addTo(map);
|
||||
L.tileLayer(
|
||||
"https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
|
||||
{
|
||||
attribution:
|
||||
'© <a href="https://www.openstreetmap.org/">OSM</a> © <a href="https://carto.com/">CARTO</a>',
|
||||
maxZoom: 19,
|
||||
subdomains: "abcd",
|
||||
},
|
||||
).addTo(map);
|
||||
|
||||
const nearbyLayer = L.layerGroup().addTo(map);
|
||||
mapRef.current = map;
|
||||
nearbyLayerRef.current = nearbyLayer;
|
||||
|
||||
// Track which city we've already moved to for the current selection
|
||||
onRegisterStopMotionRef.current(() => {
|
||||
map.stop();
|
||||
});
|
||||
|
||||
const handleMapClick = () => {
|
||||
onClosePanelRef.current();
|
||||
};
|
||||
map.on("click", handleMapClick);
|
||||
|
||||
return () => {
|
||||
onRegisterStopMotionRef.current(() => {});
|
||||
map.off("click", handleMapClick);
|
||||
map.remove();
|
||||
mapRef.current = null;
|
||||
nearbyLayerRef.current = null;
|
||||
markersRef.current = {};
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Handle initial view if cities are loaded
|
||||
useEffect(() => {
|
||||
const map = mapRef.current;
|
||||
if (!map || !cities.length || hasFittedInitialBoundsRef.current) return;
|
||||
|
||||
// Only run fitBounds once for the initial list of cities
|
||||
const bounds = cities.map((city) => [city.lat, city.lon]) as [
|
||||
number,
|
||||
number,
|
||||
][];
|
||||
if (bounds.length) {
|
||||
map.fitBounds(bounds, {
|
||||
animate: false,
|
||||
maxZoom: 4,
|
||||
padding: [60, 60],
|
||||
});
|
||||
hasFittedInitialBoundsRef.current = true;
|
||||
}
|
||||
}, [cities]);
|
||||
|
||||
const lastCityDataRef = useRef<
|
||||
Record<string, { temp?: number | null; risk?: string }>
|
||||
>({});
|
||||
|
||||
// Handle marker synchronization
|
||||
useEffect(() => {
|
||||
const map = mapRef.current;
|
||||
if (!map || !cities.length) return;
|
||||
|
||||
const currentMarkers = markersRef.current;
|
||||
const nextMarkers: typeof currentMarkers = {};
|
||||
const nextLastData: typeof lastCityDataRef.current = {};
|
||||
|
||||
cities.forEach((city) => {
|
||||
const detail = cityDetailsByName[city.name];
|
||||
const summary = citySummariesByName[city.name];
|
||||
const snapshot = detail || summary;
|
||||
const existing = currentMarkers[city.name];
|
||||
|
||||
const currentTemp = snapshot?.current?.temp;
|
||||
const currentRisk = city.risk_level;
|
||||
const lastData = lastCityDataRef.current[city.name];
|
||||
const dataChanged =
|
||||
!lastData ||
|
||||
lastData.temp !== currentTemp ||
|
||||
lastData.risk !== currentRisk;
|
||||
|
||||
if (existing) {
|
||||
if (dataChanged) {
|
||||
existing.marker.setIcon(createMarkerIcon(city, snapshot));
|
||||
}
|
||||
nextMarkers[city.name] = { city, marker: existing.marker };
|
||||
nextLastData[city.name] = { temp: currentTemp, risk: currentRisk };
|
||||
return;
|
||||
}
|
||||
|
||||
// Create new marker
|
||||
const marker = L.marker([city.lat, city.lon], {
|
||||
icon: createMarkerIcon(city, snapshot),
|
||||
}).addTo(map);
|
||||
|
||||
marker.on("click", () => {
|
||||
map.stop();
|
||||
// Reset lastMovedCity so we can re-fly if needed
|
||||
lastMovedCityRef.current = null;
|
||||
onSelectCityRef.current(city.name);
|
||||
});
|
||||
|
||||
nextMarkers[city.name] = { city, marker };
|
||||
nextLastData[city.name] = { temp: currentTemp, risk: currentRisk };
|
||||
});
|
||||
|
||||
// Cleanup removed markers
|
||||
Object.entries(currentMarkers).forEach(([name, entry]) => {
|
||||
if (!nextMarkers[name]) {
|
||||
map.removeLayer(entry.marker);
|
||||
}
|
||||
});
|
||||
|
||||
markersRef.current = nextMarkers;
|
||||
lastCityDataRef.current = nextLastData;
|
||||
}, [cities, cityDetailsByName, citySummariesByName]);
|
||||
|
||||
useEffect(() => {
|
||||
Object.entries(markersRef.current).forEach(([name, entry]) => {
|
||||
const element = entry.marker.getElement();
|
||||
if (!element) return;
|
||||
const markerRoot = element.querySelector(".city-marker");
|
||||
markerRoot?.classList.toggle("selected", name === selectedCity);
|
||||
});
|
||||
}, [selectedCity]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!mapRef.current || !nearbyLayerRef.current) return;
|
||||
const map = mapRef.current;
|
||||
const layer = nearbyLayerRef.current;
|
||||
|
||||
function renderNearbyStations(detail: CityDetail, preserveView = false) {
|
||||
layer.clearLayers();
|
||||
|
||||
const allNearby = Array.isArray(detail.mgm_nearby)
|
||||
? detail.mgm_nearby
|
||||
: [];
|
||||
const nearbyStations =
|
||||
String(detail.name || "").toLowerCase() === "ankara"
|
||||
? pickAnkaraNearbyStations(allNearby)
|
||||
: allNearby;
|
||||
|
||||
if (!nearbyStations.length) {
|
||||
if (!preserveView && detail.lat != null && detail.lon != null) {
|
||||
map.flyTo([detail.lat, detail.lon], 10, {
|
||||
animate: true,
|
||||
duration: 1.5,
|
||||
easeLinearity: 0.25,
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const latLngs: Array<[number, number]> = [];
|
||||
if (detail.lat != null && detail.lon != null) {
|
||||
latLngs.push([detail.lat, detail.lon]);
|
||||
}
|
||||
|
||||
nearbyStations.forEach((station) => {
|
||||
const sLat = Number(station.lat);
|
||||
const sLon = Number(station.lon);
|
||||
// Ignore invalid (0,0) or null coordinates which cause global zoom-out
|
||||
if (!Number.isFinite(sLat) || !Number.isFinite(sLon)) return;
|
||||
if (Math.abs(sLat) < 0.1 && Math.abs(sLon) < 0.1) return;
|
||||
|
||||
const icon = L.divIcon({
|
||||
className: "",
|
||||
html: buildNearbyIconHtml(detail, station),
|
||||
iconAnchor: [16, 19],
|
||||
iconSize: [240, 38],
|
||||
});
|
||||
L.marker([sLat, sLon], { icon }).addTo(layer);
|
||||
latLngs.push([sLat, sLon]);
|
||||
});
|
||||
|
||||
if (preserveView) return;
|
||||
|
||||
// Note: Movement for selected cities is now handled by the centralized effect.
|
||||
// This section is primarily for auto-discovery movement if needed.
|
||||
}
|
||||
|
||||
async function maybeAutoShowNearbyStations() {
|
||||
if (suspendMotion) {
|
||||
map.stop();
|
||||
return;
|
||||
}
|
||||
|
||||
if (selectedDetail) {
|
||||
// Just render stations, no camera move from here
|
||||
renderNearbyStations(selectedDetail, true);
|
||||
return;
|
||||
}
|
||||
|
||||
// If no city selected, reset the move tracker
|
||||
lastMovedCityRef.current = null;
|
||||
|
||||
if (map.getZoom() < AUTO_NEARBY_MIN_ZOOM) {
|
||||
autoNearbyCityRef.current = null;
|
||||
layer.clearLayers();
|
||||
return;
|
||||
}
|
||||
|
||||
const center = map.getCenter();
|
||||
let best: { cityName: string; distance: number } | null = null;
|
||||
for (const [cityName, entry] of Object.entries(markersRef.current)) {
|
||||
const distance = map.distance(
|
||||
center,
|
||||
L.latLng(entry.city.lat, entry.city.lon),
|
||||
);
|
||||
if (distance > AUTO_NEARBY_MAX_DISTANCE_M) continue;
|
||||
if (!best || distance < best.distance) {
|
||||
best = { cityName, distance };
|
||||
}
|
||||
}
|
||||
|
||||
const targetCity = best?.cityName || null;
|
||||
if (!targetCity) {
|
||||
autoNearbyCityRef.current = null;
|
||||
layer.clearLayers();
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
autoNearbyCityRef.current === targetCity &&
|
||||
layer.getLayers().length > 0
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
autoNearbyCityRef.current = targetCity;
|
||||
const cachedDetail = cityDetailsByName[targetCity];
|
||||
if (cachedDetail) {
|
||||
renderNearbyStations(cachedDetail, true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (loadingAutoNearbyRef.current) return;
|
||||
loadingAutoNearbyRef.current = true;
|
||||
try {
|
||||
const detail = await onEnsureCityDetailRef.current(targetCity, false);
|
||||
renderNearbyStations(detail, true);
|
||||
} catch {
|
||||
} finally {
|
||||
loadingAutoNearbyRef.current = false;
|
||||
}
|
||||
}
|
||||
|
||||
const syncVisibility = () => {
|
||||
if (suspendMotion) {
|
||||
map.stop();
|
||||
return;
|
||||
}
|
||||
|
||||
if (map.getZoom() < 7) {
|
||||
if (map.hasLayer(layer)) {
|
||||
map.removeLayer(layer);
|
||||
}
|
||||
} else if (!map.hasLayer(layer)) {
|
||||
map.addLayer(layer);
|
||||
}
|
||||
void maybeAutoShowNearbyStations();
|
||||
};
|
||||
|
||||
syncVisibility();
|
||||
map.on("zoomend", syncVisibility);
|
||||
map.on("moveend", maybeAutoShowNearbyStations);
|
||||
|
||||
return () => {
|
||||
map.off("zoomend", syncVisibility);
|
||||
map.off("moveend", maybeAutoShowNearbyStations);
|
||||
};
|
||||
}, [cityDetailsByName, selectedCity, selectedDetail, suspendMotion]);
|
||||
|
||||
// Centralized City Selection Zoom Effect
|
||||
// Higher level than selection: we only flyTo once the data is loaded (selectedDetail)
|
||||
// This satisfies "loading之后再出现动画吧"
|
||||
useEffect(() => {
|
||||
if (!selectedCity) {
|
||||
lastMovedCityRef.current = null;
|
||||
return;
|
||||
}
|
||||
|
||||
const map = mapRef.current;
|
||||
if (!map || suspendMotion || !selectedDetail || isLoadingDetail) return;
|
||||
|
||||
// Check if the detail matches the selection (case-insensitive)
|
||||
if (selectedDetail.name?.toLowerCase() !== selectedCity.toLowerCase()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (lastMovedCityRef.current === selectedCity) return;
|
||||
|
||||
const entry = markersRef.current[selectedCity];
|
||||
if (!entry) return;
|
||||
|
||||
// Lock the move
|
||||
lastMovedCityRef.current = selectedCity;
|
||||
|
||||
// We use a micro-delay (50ms) to allow the browser to settle
|
||||
// after the loading overlay disappears and the detail panel renders.
|
||||
const timer = setTimeout(() => {
|
||||
const currentMap = mapRef.current;
|
||||
if (
|
||||
!currentMap ||
|
||||
lastMovedCityRef.current !== selectedCity ||
|
||||
suspendMotion
|
||||
)
|
||||
return;
|
||||
|
||||
currentMap.stop();
|
||||
currentMap.flyTo([entry.city.lat, entry.city.lon], 11, {
|
||||
animate: true,
|
||||
duration: 1.1,
|
||||
easeLinearity: 0.22,
|
||||
});
|
||||
}, 50);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [selectedCity, selectedDetail, suspendMotion, isLoadingDetail]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!suspendMotion) return;
|
||||
mapRef.current?.stop();
|
||||
}, [suspendMotion]);
|
||||
|
||||
return { containerRef };
|
||||
}
|
||||
@@ -0,0 +1,263 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
CityDetail,
|
||||
CityListItem,
|
||||
CitySummary,
|
||||
HistoryPoint,
|
||||
} from "@/lib/dashboard-types";
|
||||
|
||||
const CACHE_KEY = "polyWeather_v1";
|
||||
const CACHE_TTL_MS = 5 * 60 * 1000;
|
||||
const pendingCityDetailRequests = new Map<string, Promise<CityDetail>>();
|
||||
const pendingHistoryRequests = new Map<string, Promise<HistoryPoint[]>>();
|
||||
const pendingCitySummaryRequests = new Map<string, Promise<CitySummary>>();
|
||||
|
||||
type CityCacheMeta = {
|
||||
cachedAt: number;
|
||||
revision: string;
|
||||
};
|
||||
|
||||
type CityCacheBundle = {
|
||||
details: Record<string, CityDetail>;
|
||||
meta: Record<string, CityCacheMeta>;
|
||||
};
|
||||
|
||||
function normalizeCityName(cityName: string) {
|
||||
return encodeURIComponent(String(cityName).replace(/\s/g, "-"));
|
||||
}
|
||||
|
||||
async function fetchJson<T>(url: string): Promise<T> {
|
||||
const response = await fetch(url, {
|
||||
headers: { Accept: "application/json" },
|
||||
cache: "no-store",
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
return response.json() as Promise<T>;
|
||||
}
|
||||
|
||||
function isClient() {
|
||||
return typeof window !== "undefined";
|
||||
}
|
||||
|
||||
function normalizeRevisionPart(value: unknown) {
|
||||
return value == null ? "" : String(value);
|
||||
}
|
||||
|
||||
export function getCityRevision(source?: CityDetail | CitySummary | null) {
|
||||
if (!source) return "";
|
||||
return [
|
||||
normalizeRevisionPart(source.updated_at),
|
||||
normalizeRevisionPart(source.current?.obs_time),
|
||||
normalizeRevisionPart(source.current?.temp),
|
||||
normalizeRevisionPart(source.deb?.prediction),
|
||||
].join("|");
|
||||
}
|
||||
|
||||
export function toCitySummary(detail: CityDetail): CitySummary {
|
||||
return {
|
||||
name: detail.name,
|
||||
display_name: detail.display_name,
|
||||
icao: detail.risk?.icao,
|
||||
local_time: detail.local_time,
|
||||
temp_symbol: detail.temp_symbol,
|
||||
current: {
|
||||
obs_time: detail.current?.obs_time,
|
||||
temp: detail.current?.temp,
|
||||
},
|
||||
deb: {
|
||||
prediction: detail.deb?.prediction,
|
||||
},
|
||||
risk: {
|
||||
level: detail.risk?.level,
|
||||
warning: detail.risk?.warning,
|
||||
},
|
||||
updated_at: detail.updated_at,
|
||||
};
|
||||
}
|
||||
|
||||
function isFresh(meta?: CityCacheMeta | null) {
|
||||
return Boolean(meta && Date.now() - meta.cachedAt < CACHE_TTL_MS);
|
||||
}
|
||||
|
||||
function readLegacyCache(raw: string): CityCacheBundle {
|
||||
const parsed = JSON.parse(raw) as {
|
||||
timestamp?: number;
|
||||
data?: Record<string, CityDetail>;
|
||||
};
|
||||
const details = parsed.data || {};
|
||||
const cachedAt = parsed.timestamp || 0;
|
||||
const meta = Object.fromEntries(
|
||||
Object.entries(details).map(([cityName, detail]) => [
|
||||
cityName,
|
||||
{
|
||||
cachedAt,
|
||||
revision: getCityRevision(detail),
|
||||
},
|
||||
]),
|
||||
);
|
||||
return { details, meta };
|
||||
}
|
||||
|
||||
export const dashboardClient = {
|
||||
clearCityDetailCache() {
|
||||
if (!isClient()) return;
|
||||
window.sessionStorage.removeItem(CACHE_KEY);
|
||||
},
|
||||
|
||||
async getCities() {
|
||||
const data = await fetchJson<{ cities?: CityListItem[] }>("/api/cities");
|
||||
return data.cities || [];
|
||||
},
|
||||
|
||||
async getCitySummary(cityName: string, options?: { force?: boolean }) {
|
||||
const force = options?.force ?? false;
|
||||
const requestKey = `${cityName}::${force ? "force" : "cached"}`;
|
||||
const existing = pendingCitySummaryRequests.get(requestKey);
|
||||
if (existing) {
|
||||
return existing;
|
||||
}
|
||||
|
||||
const request = fetchJson<CitySummary>(
|
||||
`/api/city/${normalizeCityName(cityName)}/summary?force_refresh=${force}`,
|
||||
).finally(() => {
|
||||
pendingCitySummaryRequests.delete(requestKey);
|
||||
});
|
||||
|
||||
pendingCitySummaryRequests.set(requestKey, request);
|
||||
return request;
|
||||
},
|
||||
|
||||
async getCityDetail(cityName: string, options?: { force?: boolean }) {
|
||||
const force = options?.force ?? false;
|
||||
const requestKey = `${cityName}::${force ? "force" : "cached"}`;
|
||||
const existing = pendingCityDetailRequests.get(requestKey);
|
||||
if (existing) {
|
||||
return existing;
|
||||
}
|
||||
|
||||
const request = fetchJson<CityDetail>(
|
||||
`/api/city/${normalizeCityName(cityName)}?force_refresh=${force}`,
|
||||
).finally(() => {
|
||||
pendingCityDetailRequests.delete(requestKey);
|
||||
});
|
||||
|
||||
pendingCityDetailRequests.set(requestKey, request);
|
||||
return request;
|
||||
},
|
||||
|
||||
async getHistory(cityName: string) {
|
||||
const requestKey = normalizeCityName(cityName);
|
||||
const existing = pendingHistoryRequests.get(requestKey);
|
||||
if (existing) {
|
||||
return existing;
|
||||
}
|
||||
|
||||
const request = fetchJson<{ history?: HistoryPoint[] }>(
|
||||
`/api/history/${requestKey}`,
|
||||
)
|
||||
.then((data) => data.history || [])
|
||||
.finally(() => {
|
||||
pendingHistoryRequests.delete(requestKey);
|
||||
});
|
||||
|
||||
pendingHistoryRequests.set(requestKey, request);
|
||||
return request;
|
||||
},
|
||||
|
||||
isCityDetailFresh(meta?: CityCacheMeta | null) {
|
||||
return isFresh(meta);
|
||||
},
|
||||
|
||||
readCityDetailCacheBundle() {
|
||||
if (!isClient()) {
|
||||
return {
|
||||
details: {},
|
||||
meta: {},
|
||||
} satisfies CityCacheBundle;
|
||||
}
|
||||
|
||||
try {
|
||||
const cached = window.sessionStorage.getItem(CACHE_KEY);
|
||||
if (!cached) {
|
||||
return {
|
||||
details: {},
|
||||
meta: {},
|
||||
} satisfies CityCacheBundle;
|
||||
}
|
||||
|
||||
const parsed = JSON.parse(cached) as
|
||||
| {
|
||||
entries?: Record<
|
||||
string,
|
||||
{ cachedAt?: number; detail?: CityDetail; revision?: string }
|
||||
>;
|
||||
}
|
||||
| {
|
||||
timestamp?: number;
|
||||
data?: Record<string, CityDetail>;
|
||||
};
|
||||
|
||||
if ("entries" in parsed && parsed.entries) {
|
||||
const details: Record<string, CityDetail> = {};
|
||||
const meta: Record<string, CityCacheMeta> = {};
|
||||
Object.entries(parsed.entries).forEach(([cityName, entry]) => {
|
||||
if (!entry?.detail) return;
|
||||
details[cityName] = entry.detail;
|
||||
meta[cityName] = {
|
||||
cachedAt: entry.cachedAt || 0,
|
||||
revision: entry.revision || getCityRevision(entry.detail),
|
||||
};
|
||||
});
|
||||
return { details, meta };
|
||||
}
|
||||
|
||||
return readLegacyCache(cached);
|
||||
} catch {
|
||||
return {
|
||||
details: {},
|
||||
meta: {},
|
||||
} satisfies CityCacheBundle;
|
||||
}
|
||||
},
|
||||
|
||||
readCityDetailCache() {
|
||||
return this.readCityDetailCacheBundle().details;
|
||||
},
|
||||
|
||||
writeCityDetailCacheBundle(
|
||||
details: Record<string, CityDetail>,
|
||||
meta: Record<string, CityCacheMeta>,
|
||||
) {
|
||||
if (!isClient()) return;
|
||||
const entries = Object.fromEntries(
|
||||
Object.entries(details).map(([cityName, detail]) => [
|
||||
cityName,
|
||||
{
|
||||
cachedAt: meta[cityName]?.cachedAt || Date.now(),
|
||||
detail,
|
||||
revision: meta[cityName]?.revision || getCityRevision(detail),
|
||||
},
|
||||
]),
|
||||
);
|
||||
window.sessionStorage.setItem(
|
||||
CACHE_KEY,
|
||||
JSON.stringify({ entries }),
|
||||
);
|
||||
},
|
||||
|
||||
writeCityDetailCache(data: Record<string, CityDetail>) {
|
||||
const now = Date.now();
|
||||
const meta = Object.fromEntries(
|
||||
Object.entries(data).map(([cityName, detail]) => [
|
||||
cityName,
|
||||
{ cachedAt: now, revision: getCityRevision(detail) },
|
||||
]),
|
||||
);
|
||||
this.writeCityDetailCacheBundle(data, meta);
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,84 @@
|
||||
export interface CityScenery {
|
||||
creditLabel: string;
|
||||
creditUrl: string;
|
||||
imageUrl: string;
|
||||
}
|
||||
|
||||
const DEFAULT_SCENERY: CityScenery = {
|
||||
creditLabel: "Pexels / City scenery",
|
||||
creditUrl: "https://www.pexels.com/",
|
||||
imageUrl: "/scenery/city-default.jpg",
|
||||
};
|
||||
|
||||
export const CITY_SCENERY: Record<string, CityScenery> = {
|
||||
ankara: {
|
||||
creditLabel: "Pexels / Ankara skyline",
|
||||
creditUrl: "https://www.pexels.com/",
|
||||
imageUrl: "/scenery/ankara.jpg",
|
||||
},
|
||||
chicago: {
|
||||
creditLabel: "Pexels / Chicago skyline",
|
||||
creditUrl: "https://www.pexels.com/",
|
||||
imageUrl: "/scenery/chicago.jpg",
|
||||
},
|
||||
london: {
|
||||
creditLabel: "Pexels / London skyline",
|
||||
creditUrl: "https://www.pexels.com/",
|
||||
imageUrl: "/scenery/london.jpg",
|
||||
},
|
||||
lucknow: {
|
||||
creditLabel: "Pexels / Lucknow heritage",
|
||||
creditUrl: "https://www.pexels.com/",
|
||||
imageUrl: "/scenery/lucknow.jpg",
|
||||
},
|
||||
munich: {
|
||||
creditLabel: "Pexels / Munich streetscape",
|
||||
creditUrl: "https://www.pexels.com/",
|
||||
imageUrl: "/scenery/munich.jpg",
|
||||
},
|
||||
"new york": {
|
||||
creditLabel: "Pexels / New York skyline",
|
||||
creditUrl: "https://www.pexels.com/",
|
||||
imageUrl: "/scenery/new-york.jpg",
|
||||
},
|
||||
"new york city": {
|
||||
creditLabel: "Pexels / New York skyline",
|
||||
creditUrl: "https://www.pexels.com/",
|
||||
imageUrl: "/scenery/new-york.jpg",
|
||||
},
|
||||
paris: {
|
||||
creditLabel: "Pexels / Paris streetscape",
|
||||
creditUrl: "https://www.pexels.com/",
|
||||
imageUrl: "/scenery/paris.jpg",
|
||||
},
|
||||
seoul: {
|
||||
creditLabel: "Pexels / Seoul cityscape",
|
||||
creditUrl: "https://www.pexels.com/",
|
||||
imageUrl: "/scenery/seoul.jpg",
|
||||
},
|
||||
"sao paulo": {
|
||||
creditLabel: "Pexels / Sao Paulo skyline",
|
||||
creditUrl: "https://www.pexels.com/",
|
||||
imageUrl: "/scenery/sao-paulo.jpg",
|
||||
},
|
||||
"são paulo": {
|
||||
creditLabel: "Pexels / Sao Paulo skyline",
|
||||
creditUrl: "https://www.pexels.com/",
|
||||
imageUrl: "/scenery/sao-paulo.jpg",
|
||||
},
|
||||
"s茫o paulo": {
|
||||
creditLabel: "Pexels / Sao Paulo skyline",
|
||||
creditUrl: "https://www.pexels.com/",
|
||||
imageUrl: "/scenery/sao-paulo.jpg",
|
||||
},
|
||||
toronto: {
|
||||
creditLabel: "Pexels / Toronto skyline",
|
||||
creditUrl: "https://www.pexels.com/",
|
||||
imageUrl: "/scenery/toronto.jpg",
|
||||
},
|
||||
};
|
||||
|
||||
export function getCityScenery(cityName?: string | null) {
|
||||
if (!cityName) return null;
|
||||
return CITY_SCENERY[String(cityName).toLowerCase()] || DEFAULT_SCENERY;
|
||||
}
|
||||
@@ -0,0 +1,262 @@
|
||||
export type RiskLevel = "low" | "medium" | "high" | string;
|
||||
|
||||
export interface CityListItem {
|
||||
name: string;
|
||||
display_name: string;
|
||||
lat: number;
|
||||
lon: number;
|
||||
risk_level: RiskLevel;
|
||||
risk_emoji?: string;
|
||||
airport: string;
|
||||
icao: string;
|
||||
temp_unit: "celsius" | "fahrenheit";
|
||||
is_major?: boolean;
|
||||
}
|
||||
|
||||
export interface ProbabilityBucket {
|
||||
value?: number | null;
|
||||
label?: string | null;
|
||||
bucket?: string | null;
|
||||
range?: string | null;
|
||||
unit?: string | null;
|
||||
probability?: number | null;
|
||||
}
|
||||
|
||||
export interface ModelForecastEntry {
|
||||
label: string;
|
||||
value: number;
|
||||
}
|
||||
|
||||
export interface DashboardRisk {
|
||||
level: RiskLevel;
|
||||
emoji?: string;
|
||||
airport?: string;
|
||||
icao?: string;
|
||||
distance_km?: number | null;
|
||||
warning?: string | null;
|
||||
}
|
||||
|
||||
export interface CloudLayer {
|
||||
cover: string;
|
||||
base: number | null;
|
||||
}
|
||||
|
||||
export interface CurrentConditions {
|
||||
temp: number | null;
|
||||
max_so_far: number | null;
|
||||
max_temp_time: string | null;
|
||||
wu_settlement: number | null;
|
||||
obs_time: string | null;
|
||||
obs_age_min: number | null;
|
||||
wind_speed_kt: number | null;
|
||||
wind_dir: number | null;
|
||||
humidity: number | null;
|
||||
cloud_desc: string | null;
|
||||
clouds_raw: CloudLayer[];
|
||||
visibility_mi: number | null;
|
||||
wx_desc: string | null;
|
||||
raw_metar?: string | null;
|
||||
report_time?: string | null;
|
||||
receipt_time?: string | null;
|
||||
obs_time_epoch?: number | null;
|
||||
dewpoint?: number | null;
|
||||
}
|
||||
|
||||
export interface NearbyStation {
|
||||
name?: string;
|
||||
icao?: string;
|
||||
lat: number;
|
||||
lon: number;
|
||||
temp: number | null;
|
||||
wind_dir?: number | null;
|
||||
wind_speed?: number | null;
|
||||
wind_speed_kt?: number | null;
|
||||
}
|
||||
|
||||
export interface HourlyTrendPoint {
|
||||
time: string;
|
||||
temp: number;
|
||||
}
|
||||
|
||||
export interface TrendInfo {
|
||||
direction?: string;
|
||||
recent?: HourlyTrendPoint[];
|
||||
is_cooling?: boolean;
|
||||
is_dead_market?: boolean;
|
||||
}
|
||||
|
||||
export interface PeakInfo {
|
||||
hours?: string[];
|
||||
first_h?: number;
|
||||
last_h?: number;
|
||||
status?: string;
|
||||
}
|
||||
|
||||
export interface MgmData {
|
||||
temp?: number | null;
|
||||
time?: string | null;
|
||||
today_high?: number | null;
|
||||
today_low?: number | null;
|
||||
hourly?: Array<{
|
||||
time?: string | null;
|
||||
temp?: number | null;
|
||||
}>;
|
||||
}
|
||||
|
||||
export interface ForecastDay {
|
||||
date: string;
|
||||
max_temp: number | null;
|
||||
min_temp?: number | null;
|
||||
}
|
||||
|
||||
export interface ForecastData {
|
||||
today_high?: number | null;
|
||||
daily?: ForecastDay[];
|
||||
sunrise?: string | null;
|
||||
sunset?: string | null;
|
||||
sunshine_hours?: number | null;
|
||||
}
|
||||
|
||||
export interface DebForecast {
|
||||
prediction: number | null;
|
||||
weights_info?: string | null;
|
||||
}
|
||||
|
||||
export interface CitySummary {
|
||||
name: string;
|
||||
display_name?: string | null;
|
||||
icao?: string | null;
|
||||
local_time?: string | null;
|
||||
temp_symbol?: string | null;
|
||||
current?: {
|
||||
temp?: number | null;
|
||||
obs_time?: string | null;
|
||||
};
|
||||
deb?: {
|
||||
prediction?: number | null;
|
||||
};
|
||||
risk?: {
|
||||
level?: RiskLevel;
|
||||
warning?: string | null;
|
||||
};
|
||||
updated_at?: string | null;
|
||||
}
|
||||
|
||||
export interface HourlySeries {
|
||||
times?: string[];
|
||||
temps?: Array<number | null>;
|
||||
dew_point?: Array<number | null>;
|
||||
pressure_msl?: Array<number | null>;
|
||||
wind_speed_10m?: Array<number | null>;
|
||||
wind_direction_10m?: Array<number | null>;
|
||||
precipitation_probability?: Array<number | null>;
|
||||
cloud_cover?: Array<number | null>;
|
||||
radiation?: Array<number | null>;
|
||||
}
|
||||
|
||||
export interface WeatherGovPeriod {
|
||||
name?: string;
|
||||
start_time?: string;
|
||||
end_time?: string;
|
||||
short_forecast?: string | null;
|
||||
detailed_forecast?: string | null;
|
||||
temperature?: number | null;
|
||||
temperature_unit?: string | null;
|
||||
}
|
||||
|
||||
export interface SourceForecasts {
|
||||
weather_gov?: {
|
||||
forecast_periods?: WeatherGovPeriod[];
|
||||
};
|
||||
meteoblue?: {
|
||||
daily_highs?: Array<number | null>;
|
||||
};
|
||||
}
|
||||
|
||||
export interface DailyModelForecast {
|
||||
models?: Record<string, number | null>;
|
||||
deb?: {
|
||||
prediction?: number | null;
|
||||
};
|
||||
probabilities?: ProbabilityBucket[];
|
||||
}
|
||||
|
||||
export interface AiAnalysisStructured {
|
||||
summary?: string | null;
|
||||
text?: string | null;
|
||||
message?: string | null;
|
||||
highlights?: string[];
|
||||
points?: string[];
|
||||
}
|
||||
|
||||
export interface CityDetail {
|
||||
name: string;
|
||||
display_name: string;
|
||||
lat: number;
|
||||
lon: number;
|
||||
temp_symbol: string;
|
||||
local_time: string;
|
||||
local_date: string;
|
||||
risk: DashboardRisk;
|
||||
current: CurrentConditions;
|
||||
mgm?: MgmData;
|
||||
mgm_nearby?: NearbyStation[];
|
||||
forecast?: ForecastData;
|
||||
multi_model?: Record<string, number | null>;
|
||||
deb?: DebForecast;
|
||||
probabilities?: {
|
||||
mu?: number | null;
|
||||
distribution?: ProbabilityBucket[];
|
||||
};
|
||||
hourly?: {
|
||||
times?: string[];
|
||||
temps?: Array<number | null>;
|
||||
};
|
||||
hourly_next_48h?: HourlySeries;
|
||||
metar_recent_obs?: Array<{
|
||||
time?: string;
|
||||
temp?: number | null;
|
||||
}>;
|
||||
metar_today_obs?: Array<{
|
||||
time?: string;
|
||||
temp?: number | null;
|
||||
}>;
|
||||
trend?: TrendInfo;
|
||||
peak?: PeakInfo;
|
||||
ai_analysis?: string | AiAnalysisStructured | null;
|
||||
updated_at?: string;
|
||||
multi_model_daily?: Record<string, DailyModelForecast>;
|
||||
source_forecasts?: SourceForecasts;
|
||||
}
|
||||
|
||||
export interface HistoryPoint {
|
||||
date: string;
|
||||
actual: number | null;
|
||||
deb: number | null;
|
||||
mgm?: number | null;
|
||||
}
|
||||
|
||||
export interface LoadingState {
|
||||
cities: boolean;
|
||||
cityDetail: boolean;
|
||||
refresh: boolean;
|
||||
history: boolean;
|
||||
}
|
||||
|
||||
export interface HistoryState {
|
||||
isOpen: boolean;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
dataByCity: Record<string, HistoryPoint[]>;
|
||||
}
|
||||
|
||||
export interface DashboardState {
|
||||
cities: CityListItem[];
|
||||
cityDetailsByName: Record<string, CityDetail>;
|
||||
citySummariesByName: Record<string, CitySummary>;
|
||||
selectedCity: string | null;
|
||||
isPanelOpen: boolean;
|
||||
selectedForecastDate: string | null;
|
||||
loadingState: LoadingState;
|
||||
historyState: HistoryState;
|
||||
}
|
||||
@@ -0,0 +1,882 @@
|
||||
import { AiAnalysisStructured, CityDetail, HistoryPoint, NearbyStation } from "@/lib/dashboard-types";
|
||||
|
||||
const METAR_WX_MAP: Record<string, { label: string; icon: string }> = {
|
||||
RA: { label: "降雨", icon: "🌧️" },
|
||||
"-RA": { label: "小雨", icon: "🌦️" },
|
||||
"+RA": { label: "强降雨", icon: "⛈️" },
|
||||
SN: { label: "降雪", icon: "❄️" },
|
||||
"-SN": { label: "小雪", icon: "🌨️" },
|
||||
"+SN": { label: "大雪", icon: "🌨️" },
|
||||
DZ: { label: "毛毛雨", icon: "🌦️" },
|
||||
FG: { label: "雾", icon: "🌫️" },
|
||||
BR: { label: "薄雾", icon: "🌫️" },
|
||||
HZ: { label: "霾", icon: "🌫️" },
|
||||
TS: { label: "雷暴", icon: "⛈️" },
|
||||
VCTS: { label: "附近雷暴", icon: "⛈️" },
|
||||
SQ: { label: "飑线", icon: "💨" },
|
||||
GS: { label: "冰雹", icon: "🌨️" },
|
||||
};
|
||||
|
||||
export function translateMetar(code?: string | null) {
|
||||
if (!code) return null;
|
||||
for (const [key, value] of Object.entries(METAR_WX_MAP)) {
|
||||
if (String(code).includes(key)) return value;
|
||||
}
|
||||
return { label: code, icon: "🌤️" };
|
||||
}
|
||||
|
||||
export function getRiskBadgeLabel(level?: string | null) {
|
||||
return (
|
||||
{
|
||||
high: "🔴 高风险",
|
||||
medium: "🟠 中风险",
|
||||
low: "🟢 低风险",
|
||||
}[String(level || "low")] || "未知风险"
|
||||
);
|
||||
}
|
||||
|
||||
export function getWeatherSummary(detail: CityDetail) {
|
||||
const current = detail.current || {};
|
||||
let weatherText = current.cloud_desc || "未知";
|
||||
let weatherIcon =
|
||||
{
|
||||
多云: "☁️",
|
||||
阴天: "☁️",
|
||||
少云: "🌤️",
|
||||
散云: "⛅",
|
||||
晴: "☀️",
|
||||
晴朗: "☀️",
|
||||
}[String(current.cloud_desc || "")] || "🌤️";
|
||||
|
||||
if (current.wx_desc) {
|
||||
const translated = translateMetar(current.wx_desc);
|
||||
if (translated) {
|
||||
weatherText = translated.label;
|
||||
weatherIcon = translated.icon;
|
||||
}
|
||||
}
|
||||
|
||||
return { weatherIcon, weatherText };
|
||||
}
|
||||
|
||||
export function getHeroMetaItems(detail: CityDetail) {
|
||||
const current = detail.current || {};
|
||||
const parts: string[] = [];
|
||||
|
||||
if (current.obs_time) {
|
||||
const ageText =
|
||||
current.obs_age_min != null && current.obs_age_min >= 30
|
||||
? `（${current.obs_age_min} 分钟前）`
|
||||
: "";
|
||||
parts.push(`✈️ METAR ${current.obs_time}${ageText}`);
|
||||
}
|
||||
|
||||
if (current.wx_desc) {
|
||||
const translated = translateMetar(current.wx_desc);
|
||||
if (translated) {
|
||||
parts.push(`${translated.icon} ${translated.label}`);
|
||||
}
|
||||
} else if (current.cloud_desc) {
|
||||
parts.push(`☁️ ${current.cloud_desc}`);
|
||||
}
|
||||
|
||||
if (current.wind_speed_kt != null) {
|
||||
parts.push(`💨 ${current.wind_speed_kt}kt`);
|
||||
}
|
||||
|
||||
if (current.visibility_mi != null) {
|
||||
parts.push(`👁️ ${current.visibility_mi}mi`);
|
||||
}
|
||||
|
||||
if (detail.mgm?.temp != null) {
|
||||
const timeMatch = detail.mgm.time?.match(/T?(\d{2}:\d{2})/);
|
||||
const timeText = timeMatch ? ` @${timeMatch[1]}` : "";
|
||||
parts.push(`📡 MGM 实测: ${detail.mgm.temp}${detail.temp_symbol}${timeText}`);
|
||||
}
|
||||
|
||||
const trend = detail.trend || {};
|
||||
if (trend.is_dead_market) {
|
||||
parts.push("☠️ 死盘");
|
||||
} else if (trend.direction && trend.direction !== "unknown") {
|
||||
const labels: Record<string, string> = {
|
||||
rising: "📈 升温中",
|
||||
falling: "📉 降温中",
|
||||
stagnant: "⏸️ 持平",
|
||||
mixed: "📊 波动中",
|
||||
};
|
||||
parts.push(labels[trend.direction] || trend.direction);
|
||||
}
|
||||
|
||||
return parts;
|
||||
}
|
||||
|
||||
export function getTemperatureChartData(detail: CityDetail) {
|
||||
const hourly = detail.hourly || {};
|
||||
const times = hourly.times || [];
|
||||
const temps = hourly.temps || [];
|
||||
|
||||
if (!times.length) return null;
|
||||
|
||||
const currentHour = detail.local_time
|
||||
? `${detail.local_time.split(":")[0]}:00`
|
||||
: null;
|
||||
const currentIndex = currentHour ? times.indexOf(currentHour) : -1;
|
||||
const omMax = detail.forecast?.today_high;
|
||||
const debMax = detail.deb?.prediction;
|
||||
const offset =
|
||||
debMax != null && omMax != null ? Number(debMax) - Number(omMax) : 0;
|
||||
const debTemps = temps.map((temp) =>
|
||||
temp != null ? Number((temp + offset).toFixed(1)) : null,
|
||||
);
|
||||
const debPast = debTemps.map((temp, index) =>
|
||||
currentIndex >= 0 && index <= currentIndex ? temp : null,
|
||||
);
|
||||
const debFuture = debTemps.map((temp, index) =>
|
||||
currentIndex < 0 || index >= currentIndex ? temp : null,
|
||||
);
|
||||
|
||||
const metarPoints = new Array(times.length).fill(null);
|
||||
const metarSource = detail.metar_today_obs?.length
|
||||
? detail.metar_today_obs
|
||||
: detail.trend?.recent || [];
|
||||
|
||||
metarSource.forEach((item) => {
|
||||
const parts = String(item.time || "").split(":");
|
||||
let hour = Number.parseInt(parts[0], 10);
|
||||
const minute = Number.parseInt(parts[1] || "0", 10);
|
||||
if (Number.isNaN(hour)) return;
|
||||
if (minute >= 30) hour = (hour + 1) % 24;
|
||||
const key = `${String(hour).padStart(2, "0")}:00`;
|
||||
const index = times.indexOf(key);
|
||||
if (index >= 0 && metarPoints[index] === null) {
|
||||
metarPoints[index] = item.temp ?? null;
|
||||
}
|
||||
});
|
||||
|
||||
const mgmPoints = new Array(times.length).fill(null);
|
||||
if (detail.mgm?.temp != null && detail.mgm?.time) {
|
||||
const match = detail.mgm.time.match(/T?(\d{2}):(\d{2})/);
|
||||
if (match) {
|
||||
let hour = Number.parseInt(match[1], 10);
|
||||
const minute = Number.parseInt(match[2], 10);
|
||||
if (minute >= 30) hour = (hour + 1) % 24;
|
||||
const key = `${String(hour).padStart(2, "0")}:00`;
|
||||
const index = times.indexOf(key);
|
||||
if (index >= 0) {
|
||||
mgmPoints[index] = detail.mgm.temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const mgmHourlyPoints = new Array(times.length).fill(null);
|
||||
let hasMgmHourly = false;
|
||||
detail.mgm?.hourly?.forEach((item) => {
|
||||
const match = String(item.time || "").match(/T?(\d{2}):(\d{2})/);
|
||||
if (!match) return;
|
||||
const key = `${match[1]}:00`;
|
||||
const index = times.indexOf(key);
|
||||
if (index >= 0) {
|
||||
mgmHourlyPoints[index] = item.temp ?? null;
|
||||
hasMgmHourly = true;
|
||||
}
|
||||
});
|
||||
|
||||
const allValues = [
|
||||
...debTemps.filter((value) => value != null),
|
||||
...metarPoints.filter((value) => value != null),
|
||||
...mgmPoints.filter((value) => value != null),
|
||||
...mgmHourlyPoints.filter((value) => value != null),
|
||||
] as number[];
|
||||
|
||||
if (!allValues.length) return null;
|
||||
|
||||
const min = Math.floor(Math.min(...allValues)) - 1;
|
||||
const max = Math.ceil(Math.max(...allValues)) + 1;
|
||||
|
||||
const legendParts: string[] = [];
|
||||
if (detail.mgm?.temp != null) {
|
||||
legendParts.push(`MGM: ${detail.mgm.temp}${detail.temp_symbol}`);
|
||||
}
|
||||
if (!hasMgmHourly && debMax != null && omMax != null && Math.abs(offset) > 0.3) {
|
||||
const sign = offset > 0 ? "+" : "";
|
||||
legendParts.push(`DEB 偏移 ${sign}${offset.toFixed(1)}${detail.temp_symbol} vs OM`);
|
||||
}
|
||||
if (hasMgmHourly) {
|
||||
legendParts.push("已使用 MGM 小时预报替代 DEB 曲线");
|
||||
}
|
||||
if (detail.trend?.recent?.length) {
|
||||
const recentText = [...detail.trend.recent]
|
||||
.slice(0, 4)
|
||||
.reverse()
|
||||
.map((item) => `${item.temp}${detail.temp_symbol}@${item.time}`)
|
||||
.join(" -> ");
|
||||
legendParts.push(`METAR: ${recentText}`);
|
||||
}
|
||||
|
||||
return {
|
||||
datasets: {
|
||||
debFuture,
|
||||
debPast,
|
||||
hasMgmHourly,
|
||||
metarPoints,
|
||||
mgmHourlyPoints,
|
||||
mgmPoints,
|
||||
offset,
|
||||
temps,
|
||||
},
|
||||
legendText: legendParts.join(" | "),
|
||||
max,
|
||||
min,
|
||||
times,
|
||||
};
|
||||
}
|
||||
|
||||
export function getProbabilityView(detail: CityDetail, targetDate?: string | null) {
|
||||
const date = targetDate || detail.local_date;
|
||||
if (date === detail.local_date) {
|
||||
return {
|
||||
mu: detail.probabilities?.mu ?? null,
|
||||
probabilities: detail.probabilities?.distribution || [],
|
||||
};
|
||||
}
|
||||
|
||||
const daily = detail.multi_model_daily?.[date];
|
||||
return {
|
||||
mu: daily?.deb?.prediction ?? null,
|
||||
probabilities: daily?.probabilities || [],
|
||||
};
|
||||
}
|
||||
|
||||
export function getModelView(detail: CityDetail, targetDate?: string | null) {
|
||||
const date = targetDate || detail.local_date;
|
||||
const daily = detail.multi_model_daily?.[date];
|
||||
if (daily) {
|
||||
return {
|
||||
deb: daily.deb?.prediction ?? null,
|
||||
models: daily.models || {},
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
deb: detail.deb?.prediction ?? null,
|
||||
models: detail.multi_model || {},
|
||||
};
|
||||
}
|
||||
|
||||
export function parseAiAnalysis(analysis: CityDetail["ai_analysis"]) {
|
||||
const fallback = {
|
||||
bullets: [] as string[],
|
||||
summary: "",
|
||||
};
|
||||
|
||||
if (!analysis) return fallback;
|
||||
|
||||
if (typeof analysis === "string") {
|
||||
return {
|
||||
bullets: [],
|
||||
summary: analysis.trim(),
|
||||
};
|
||||
}
|
||||
|
||||
const structured = analysis as AiAnalysisStructured;
|
||||
return {
|
||||
bullets: Array.isArray(structured.highlights)
|
||||
? structured.highlights
|
||||
: Array.isArray(structured.points)
|
||||
? structured.points
|
||||
: [],
|
||||
summary: structured.summary || structured.text || structured.message || "",
|
||||
};
|
||||
}
|
||||
|
||||
export function pickAnkaraNearbyStations(stations: NearbyStation[]) {
|
||||
const preferredNames = [
|
||||
"Airport (MGM/17128)",
|
||||
"Ankara (Bölge/Center)",
|
||||
"Ankara (Bolge/Center)",
|
||||
"Etimesgut",
|
||||
"Pursaklar",
|
||||
"Cubuk",
|
||||
"Çubuk",
|
||||
"Kalecik",
|
||||
];
|
||||
|
||||
const picks = preferredNames
|
||||
.map((name) => stations.find((station) => station?.name === name))
|
||||
.filter(Boolean) as NearbyStation[];
|
||||
|
||||
return picks.length ? picks : stations;
|
||||
}
|
||||
|
||||
export function getFutureSlice(detail: CityDetail, dateStr: string) {
|
||||
const hourly = detail.hourly_next_48h || {};
|
||||
const times = hourly.times || [];
|
||||
const slice: Array<{
|
||||
cloudCover: number | null;
|
||||
dewPoint: number | null;
|
||||
label: string;
|
||||
precipProb: number | null;
|
||||
pressure: number | null;
|
||||
radiation: number | null;
|
||||
temp: number | null;
|
||||
time: string;
|
||||
windDir: number | null;
|
||||
windSpeed: number | null;
|
||||
}> = [];
|
||||
|
||||
for (let index = 0; index < times.length; index += 1) {
|
||||
const timestamp = times[index];
|
||||
if (!timestamp || !String(timestamp).startsWith(dateStr)) continue;
|
||||
|
||||
slice.push({
|
||||
cloudCover: hourly.cloud_cover?.[index] ?? null,
|
||||
dewPoint: hourly.dew_point?.[index] ?? null,
|
||||
label: String(timestamp).split("T")[1]?.slice(0, 5) || timestamp,
|
||||
precipProb: hourly.precipitation_probability?.[index] ?? null,
|
||||
pressure: hourly.pressure_msl?.[index] ?? null,
|
||||
radiation: hourly.radiation?.[index] ?? null,
|
||||
temp: hourly.temps?.[index] ?? null,
|
||||
time: timestamp,
|
||||
windDir: hourly.wind_direction_10m?.[index] ?? null,
|
||||
windSpeed: hourly.wind_speed_10m?.[index] ?? null,
|
||||
});
|
||||
}
|
||||
|
||||
return slice;
|
||||
}
|
||||
|
||||
function trendBucketFromDir(direction?: number | null) {
|
||||
const value = Number(direction);
|
||||
if (!Number.isFinite(value)) return null;
|
||||
if (value >= 135 && value <= 240) return "southerly";
|
||||
if (value >= 290 || value <= 45) return "northerly";
|
||||
if (value > 45 && value < 135) return "easterly";
|
||||
return "westerly";
|
||||
}
|
||||
|
||||
function bucketLabel(bucket: string | null) {
|
||||
return (
|
||||
{
|
||||
southerly: "南 / 西南风",
|
||||
northerly: "北 / 西北风",
|
||||
easterly: "东风",
|
||||
westerly: "西风",
|
||||
}[bucket || ""] || "风向不明"
|
||||
);
|
||||
}
|
||||
|
||||
export function formatDelta(value: number | null | undefined, suffix = "") {
|
||||
const numeric = Number(value);
|
||||
if (!Number.isFinite(numeric)) return "--";
|
||||
const sign = numeric > 0 ? "+" : "";
|
||||
return `${sign}${numeric.toFixed(1)}${suffix}`;
|
||||
}
|
||||
|
||||
function getForecastTextForDate(detail: CityDetail, dateStr: string) {
|
||||
const periods = detail.source_forecasts?.weather_gov?.forecast_periods || [];
|
||||
return periods.filter((period) =>
|
||||
String(period.start_time || "").startsWith(dateStr),
|
||||
);
|
||||
}
|
||||
|
||||
export function computeFrontTrendSignal(detail: CityDetail, dateStr: string) {
|
||||
const slice = getFutureSlice(detail, dateStr);
|
||||
const currentTemp = Number(detail.current?.temp);
|
||||
const currentDew = Number(detail.current?.dewpoint);
|
||||
|
||||
if (!slice.length) {
|
||||
return {
|
||||
confidence: "low",
|
||||
label: "监控中",
|
||||
metrics: [] as Array<{
|
||||
label: string;
|
||||
note: string;
|
||||
tone?: string;
|
||||
value: string;
|
||||
}>,
|
||||
precipMax: 0,
|
||||
score: 0,
|
||||
summary: "未来 48 小时结构化数据不足，暂时只保留基础监控。",
|
||||
weatherGovPeriods: [] as ReturnType<typeof getForecastTextForDate>,
|
||||
};
|
||||
}
|
||||
|
||||
const first = slice[0];
|
||||
const last = slice[slice.length - 1];
|
||||
const firstTemp = Number.isFinite(Number(first.temp)) ? Number(first.temp) : currentTemp;
|
||||
const lastTemp = Number.isFinite(Number(last.temp)) ? Number(last.temp) : firstTemp;
|
||||
const tempDelta =
|
||||
Number.isFinite(firstTemp) && Number.isFinite(lastTemp) ? lastTemp - firstTemp : 0;
|
||||
const firstDew = Number.isFinite(Number(first.dewPoint))
|
||||
? Number(first.dewPoint)
|
||||
: currentDew;
|
||||
const lastDew = Number.isFinite(Number(last.dewPoint))
|
||||
? Number(last.dewPoint)
|
||||
: firstDew;
|
||||
const dewDelta =
|
||||
Number.isFinite(firstDew) && Number.isFinite(lastDew) ? lastDew - firstDew : 0;
|
||||
const firstPressure = Number.isFinite(Number(first.pressure))
|
||||
? Number(first.pressure)
|
||||
: null;
|
||||
const lastPressure = Number.isFinite(Number(last.pressure))
|
||||
? Number(last.pressure)
|
||||
: firstPressure;
|
||||
const pressureDelta =
|
||||
Number.isFinite(Number(firstPressure)) && Number.isFinite(Number(lastPressure))
|
||||
? Number(lastPressure) - Number(firstPressure)
|
||||
: 0;
|
||||
const firstCloud = Number.isFinite(Number(first.cloudCover))
|
||||
? Number(first.cloudCover)
|
||||
: null;
|
||||
const lastCloud = Number.isFinite(Number(last.cloudCover))
|
||||
? Number(last.cloudCover)
|
||||
: firstCloud;
|
||||
const cloudDelta =
|
||||
Number.isFinite(Number(firstCloud)) && Number.isFinite(Number(lastCloud))
|
||||
? Number(lastCloud) - Number(firstCloud)
|
||||
: 0;
|
||||
const precipMax = slice.reduce(
|
||||
(max, point) => Math.max(max, Number(point.precipProb) || 0),
|
||||
0,
|
||||
);
|
||||
const firstBucket = trendBucketFromDir(first.windDir);
|
||||
const lastBucket = trendBucketFromDir(last.windDir);
|
||||
const weatherGovPeriods = getForecastTextForDate(detail, dateStr);
|
||||
const weatherGovText = weatherGovPeriods
|
||||
.map(
|
||||
(period) =>
|
||||
`${period.short_forecast || ""} ${period.detailed_forecast || ""}`.toLowerCase(),
|
||||
)
|
||||
.join(" ");
|
||||
|
||||
let warmScore = 0;
|
||||
let coldScore = 0;
|
||||
if (tempDelta >= 2) warmScore += 24;
|
||||
else if (tempDelta >= 0.8) warmScore += 12;
|
||||
if (tempDelta <= -2) coldScore += 24;
|
||||
else if (tempDelta <= -0.8) coldScore += 12;
|
||||
if (dewDelta >= 1.2) warmScore += 14;
|
||||
if (dewDelta <= -1.2) coldScore += 10;
|
||||
if (pressureDelta >= 1.2) coldScore += 16;
|
||||
if (pressureDelta <= -1.0) warmScore += 8;
|
||||
if (lastBucket === "southerly") warmScore += 14;
|
||||
if (firstBucket !== lastBucket && lastBucket === "southerly") warmScore += 10;
|
||||
if (lastBucket === "northerly") coldScore += 14;
|
||||
if (firstBucket !== lastBucket && lastBucket === "northerly") coldScore += 10;
|
||||
if (cloudDelta >= 15 && tempDelta >= 0) warmScore += 6;
|
||||
if (cloudDelta >= 15 && tempDelta < 0) coldScore += 8;
|
||||
if (precipMax >= 40) coldScore += 8;
|
||||
if (
|
||||
weatherGovText.includes("cold front") ||
|
||||
weatherGovText.includes("temperatures falling")
|
||||
) {
|
||||
coldScore += 18;
|
||||
}
|
||||
if (weatherGovText.includes("warm front") || weatherGovText.includes("warmer")) {
|
||||
warmScore += 18;
|
||||
}
|
||||
if (weatherGovText.includes("thunder") || weatherGovText.includes("snow")) {
|
||||
coldScore += 8;
|
||||
}
|
||||
|
||||
const score = Math.max(-100, Math.min(100, warmScore - coldScore));
|
||||
const label =
|
||||
score >= 18
|
||||
? "暖平流 / 暖锋倾向"
|
||||
: score <= -18
|
||||
? "冷平流 / 冷锋倾向"
|
||||
: "监控中";
|
||||
const confidence =
|
||||
Math.abs(score) >= 45 ? "high" : Math.abs(score) >= 22 ? "medium" : "low";
|
||||
|
||||
return {
|
||||
confidence,
|
||||
label,
|
||||
metrics: [
|
||||
{
|
||||
label: "温度变化",
|
||||
note: "Open-Meteo 未来小时温度变化",
|
||||
tone: tempDelta >= 0.8 ? "warm" : tempDelta <= -0.8 ? "cold" : "",
|
||||
value: formatDelta(tempDelta, detail.temp_symbol),
|
||||
},
|
||||
{
|
||||
label: "露点变化",
|
||||
note: "露点上升更偏向暖湿平流",
|
||||
tone: dewDelta >= 0.8 ? "warm" : dewDelta <= -0.8 ? "cold" : "",
|
||||
value: formatDelta(dewDelta, detail.temp_symbol),
|
||||
},
|
||||
{
|
||||
label: "气压变化",
|
||||
note: "气压回升更偏向冷空气压入",
|
||||
tone: pressureDelta >= 1 ? "cold" : pressureDelta <= -1 ? "warm" : "",
|
||||
value: formatDelta(pressureDelta, " hPa"),
|
||||
},
|
||||
{
|
||||
label: "风向演变",
|
||||
note: "关注是否转南风或转北风",
|
||||
value: `${bucketLabel(firstBucket)} -> ${bucketLabel(lastBucket)}`,
|
||||
},
|
||||
{
|
||||
label: "降水概率",
|
||||
note: "weather.gov / Open-Meteo 降水提示",
|
||||
tone: precipMax >= 50 ? "cold" : "",
|
||||
value: `${Math.round(precipMax)}%`,
|
||||
},
|
||||
{
|
||||
label: "云量变化",
|
||||
note: "云量抬升但未降温，常见于暖平流前段",
|
||||
tone:
|
||||
cloudDelta >= 15 && tempDelta >= 0
|
||||
? "warm"
|
||||
: cloudDelta >= 15 && tempDelta < 0
|
||||
? "cold"
|
||||
: "",
|
||||
value: formatDelta(cloudDelta, "%"),
|
||||
},
|
||||
],
|
||||
precipMax,
|
||||
score,
|
||||
summary:
|
||||
label === "暖平流 / 暖锋倾向"
|
||||
? "风向更偏南 / 西南，露点与温度整体抬升，未来 6-48 小时偏向暖平流。"
|
||||
: label === "冷平流 / 冷锋倾向"
|
||||
? "温度下滑、气压回升或风向转北，未来 6-48 小时更像冷锋或冷平流压制。"
|
||||
: detail.name !== "ankara" && Boolean(detail.source_forecasts?.meteoblue)
|
||||
? "结构化来源以 weather.gov、Open-Meteo、Meteoblue 为主，用于判断未来 6-48 小时冷暖平流趋势。"
|
||||
: "结构化来源以 weather.gov 与 Open-Meteo 为主，用于判断未来 6-48 小时冷暖平流趋势。",
|
||||
weatherGovPeriods,
|
||||
};
|
||||
}
|
||||
|
||||
export function getFutureModalView(detail: CityDetail, dateStr: string) {
|
||||
const forecastEntry =
|
||||
detail.forecast?.daily?.find((item) => item.date === dateStr) || null;
|
||||
const dailyModel = detail.multi_model_daily?.[dateStr] || {};
|
||||
const probabilities = dailyModel.probabilities || [];
|
||||
const totalProbability = probabilities.reduce((sum, item) => {
|
||||
const probability = Number(item.probability);
|
||||
return Number.isFinite(probability) ? sum + probability : sum;
|
||||
}, 0);
|
||||
const weightedProbability = probabilities.reduce((sum, item) => {
|
||||
const value = Number(item.value);
|
||||
const probability = Number(item.probability);
|
||||
if (!Number.isFinite(value) || !Number.isFinite(probability)) {
|
||||
return sum;
|
||||
}
|
||||
return sum + value * probability;
|
||||
}, 0);
|
||||
const mu = totalProbability > 0 ? weightedProbability / totalProbability : null;
|
||||
const deb = dailyModel.deb?.prediction ?? forecastEntry?.max_temp ?? null;
|
||||
|
||||
return {
|
||||
deb,
|
||||
forecastEntry,
|
||||
front: computeFrontTrendSignal(detail, dateStr),
|
||||
models: dailyModel.models || {},
|
||||
mu: Number.isFinite(Number(mu)) ? Number(mu) : null,
|
||||
probabilities,
|
||||
slice: getFutureSlice(detail, dateStr),
|
||||
};
|
||||
}
|
||||
|
||||
export function getShortTermNowcastLines(detail: CityDetail, dateStr: string) {
|
||||
const slice = getFutureSlice(detail, dateStr);
|
||||
if (dateStr !== detail.local_date) {
|
||||
const afternoon = slice.filter((point) => {
|
||||
const hour = Number.parseInt(String(point.label).split(":")[0], 10);
|
||||
return Number.isFinite(hour) && hour >= 12 && hour <= 18;
|
||||
});
|
||||
const target = afternoon.length ? afternoon : slice;
|
||||
if (!target.length) {
|
||||
return [
|
||||
["目标日期", dateStr],
|
||||
["峰值窗口", "暂无足够的小时级 forecast 数据，无法生成目标日午后峰值窗口判断。"],
|
||||
] as const;
|
||||
}
|
||||
|
||||
const maxIndex = target.reduce((bestIndex, point, index, array) => {
|
||||
const temp = Number(point.temp);
|
||||
const bestTemp = Number(array[bestIndex]?.temp);
|
||||
if (!Number.isFinite(temp)) return bestIndex;
|
||||
if (!Number.isFinite(bestTemp) || temp > bestTemp) return index;
|
||||
return bestIndex;
|
||||
}, 0);
|
||||
|
||||
const peakSlice = target.slice(
|
||||
Math.max(0, maxIndex - 1),
|
||||
Math.min(target.length, maxIndex + 2),
|
||||
);
|
||||
const start = peakSlice[0];
|
||||
const end = peakSlice[peakSlice.length - 1];
|
||||
const peakPoint = target[maxIndex] || end;
|
||||
const startTemp = Number(start.temp);
|
||||
const endTemp = Number(end.temp);
|
||||
const startDew = Number(start.dewPoint);
|
||||
const endDew = Number(end.dewPoint);
|
||||
const startPressure = Number(start.pressure);
|
||||
const endPressure = Number(end.pressure);
|
||||
const precipValues = peakSlice
|
||||
.map((point) => Number(point.precipProb))
|
||||
.filter(Number.isFinite);
|
||||
const cloudValues = peakSlice
|
||||
.map((point) => Number(point.cloudCover))
|
||||
.filter(Number.isFinite);
|
||||
const maxPrecip = precipValues.length ? Math.max(...precipValues) : 0;
|
||||
const maxCloud = cloudValues.length ? Math.max(...cloudValues) : 0;
|
||||
|
||||
return [
|
||||
["目标日期", dateStr],
|
||||
["峰值窗口", `${start.label} - ${end.label}（优先取 12:00-18:00）`],
|
||||
[
|
||||
"峰值预估",
|
||||
`${Number.isFinite(Number(peakPoint.temp)) ? Number(peakPoint.temp).toFixed(1) : "--"}${detail.temp_symbol} @ ${peakPoint.label || "--"}`,
|
||||
],
|
||||
[
|
||||
"窗口温度",
|
||||
`${Number.isFinite(startTemp) ? startTemp.toFixed(1) : "--"}${detail.temp_symbol} -> ${Number.isFinite(endTemp) ? endTemp.toFixed(1) : "--"}${detail.temp_symbol}（${formatDelta(endTemp - startTemp, detail.temp_symbol)}）`,
|
||||
],
|
||||
["露点变化", `${formatDelta(endDew - startDew, detail.temp_symbol)}，用于判断午后暖湿输送是否增强。`],
|
||||
[
|
||||
"风向演变",
|
||||
`${bucketLabel(trendBucketFromDir(start.windDir))} -> ${bucketLabel(trendBucketFromDir(end.windDir))}，关注峰值前后是否转南风或回摆北风。`,
|
||||
],
|
||||
["气压变化", `${formatDelta(endPressure - startPressure, " hPa")}，上升更偏向冷空气压入。`],
|
||||
["降水 / 云量", `${Math.round(maxPrecip)}% / ${Math.round(maxCloud)}%，用于判断峰值时段是否受云系压制。`],
|
||||
] as const;
|
||||
}
|
||||
|
||||
const recent = Array.isArray(detail.metar_recent_obs)
|
||||
? detail.metar_recent_obs.slice(-4)
|
||||
: [];
|
||||
const nearby = Array.isArray(detail.mgm_nearby) ? detail.mgm_nearby : [];
|
||||
const sourceLabel = detail.name === "ankara" ? "MGM 周边站" : "METAR 周边站";
|
||||
const currentTemp = Number(detail.current?.temp);
|
||||
const recentTemps = recent
|
||||
.map((point) => Number(point.temp))
|
||||
.filter((value) => Number.isFinite(value));
|
||||
const baseline = recentTemps.length ? recentTemps[0] : currentTemp;
|
||||
const shortDelta =
|
||||
Number.isFinite(currentTemp) && Number.isFinite(baseline)
|
||||
? currentTemp - baseline
|
||||
: 0;
|
||||
let nearbyLead: { diff: number; name: string; temp: number } | null = null;
|
||||
|
||||
for (const station of nearby) {
|
||||
const temp = Number(station.temp);
|
||||
if (!Number.isFinite(temp) || !Number.isFinite(currentTemp)) continue;
|
||||
const diff = temp - currentTemp;
|
||||
if (!nearbyLead || Math.abs(diff) > Math.abs(nearbyLead.diff)) {
|
||||
nearbyLead = {
|
||||
diff,
|
||||
name: station.name || station.icao || "周边站",
|
||||
temp,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const rows: Array<readonly [string, string]> = [
|
||||
["当前主站", `${detail.current?.temp ?? "--"}${detail.temp_symbol} @ ${detail.current?.obs_time || "--"}`],
|
||||
["原始 METAR", detail.current?.raw_metar || "暂无"],
|
||||
["近 0-2 小时", `${formatDelta(shortDelta, detail.temp_symbol)}，依据最近 METAR 序列判断短时动量。`],
|
||||
[sourceLabel, `${nearby.length} 个站点参与邻近监控。`],
|
||||
];
|
||||
|
||||
if (nearbyLead) {
|
||||
const tone =
|
||||
nearbyLead.diff > 0 ? "偏暖" : nearbyLead.diff < 0 ? "偏冷" : "持平";
|
||||
rows.push([
|
||||
"领先站",
|
||||
`${nearbyLead.name} ${nearbyLead.temp}${detail.temp_symbol}，相对主站 ${formatDelta(nearbyLead.diff, detail.temp_symbol)}（${tone}）。`,
|
||||
]);
|
||||
}
|
||||
|
||||
return rows;
|
||||
}
|
||||
|
||||
export function getHistorySummary(
|
||||
history: HistoryPoint[],
|
||||
cityLocalDate?: string | null,
|
||||
) {
|
||||
const cutoff = new Date();
|
||||
cutoff.setHours(0, 0, 0, 0);
|
||||
cutoff.setDate(cutoff.getDate() - 14);
|
||||
|
||||
const recentData = history.filter((row) => {
|
||||
if (!row?.date) return false;
|
||||
const rowDate = new Date(`${row.date}T00:00:00`);
|
||||
return !Number.isNaN(rowDate.getTime()) && rowDate >= cutoff;
|
||||
});
|
||||
|
||||
const settledData = recentData.filter((row) => {
|
||||
if (!row?.date) return false;
|
||||
return cityLocalDate
|
||||
? row.date < cityLocalDate
|
||||
: row.date < new Date().toISOString().slice(0, 10);
|
||||
});
|
||||
|
||||
let hits = 0;
|
||||
const debErrors: number[] = [];
|
||||
settledData.forEach((row) => {
|
||||
if (row.actual != null && row.deb != null) {
|
||||
debErrors.push(Math.abs(row.actual - row.deb));
|
||||
if (Math.round(row.actual) === Math.round(row.deb)) {
|
||||
hits += 1;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
dates: recentData.map((row) => row.date),
|
||||
debMae: debErrors.length
|
||||
? Number(
|
||||
(
|
||||
debErrors.reduce((sum, value) => sum + value, 0) / debErrors.length
|
||||
).toFixed(1),
|
||||
)
|
||||
: null,
|
||||
debs: recentData.map((row) => row.deb),
|
||||
hitRate: debErrors.length
|
||||
? Number(((hits / debErrors.length) * 100).toFixed(0))
|
||||
: null,
|
||||
mgms: recentData.map((row) => row.mgm ?? null),
|
||||
recentData,
|
||||
settledCount: settledData.length,
|
||||
actuals: recentData.map((row) => row.actual),
|
||||
};
|
||||
}
|
||||
|
||||
export function getCityProfileStats(detail: CityDetail) {
|
||||
const risk = detail.risk || {};
|
||||
const current = detail.current || {};
|
||||
const nearbyCount = Array.isArray(detail.mgm_nearby) ? detail.mgm_nearby.length : 0;
|
||||
|
||||
return [
|
||||
{
|
||||
label: "结算机场",
|
||||
value: risk.airport && risk.icao ? `${risk.airport} (${risk.icao})` : "暂无档案",
|
||||
},
|
||||
{
|
||||
label: "站点距离",
|
||||
value:
|
||||
risk.distance_km != null && Number.isFinite(Number(risk.distance_km))
|
||||
? `${risk.distance_km} km`
|
||||
: "未标注",
|
||||
},
|
||||
{
|
||||
label: "观测更新",
|
||||
value: current.obs_time || detail.updated_at || "未提供",
|
||||
},
|
||||
{
|
||||
label: "周边站点",
|
||||
value: nearbyCount > 0 ? `${nearbyCount} 个参与监控` : "暂无周边站",
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
export function getSettlementRiskNarrative(detail: CityDetail) {
|
||||
const risk = detail.risk || {};
|
||||
const lines: string[] = [];
|
||||
|
||||
if (risk.warning) {
|
||||
lines.push(`当前主要风险是：${risk.warning}`);
|
||||
}
|
||||
|
||||
if (risk.distance_km != null) {
|
||||
if (risk.distance_km >= 60) {
|
||||
lines.push("结算机场与城市核心区域距离偏大，盘面温度与结算值可能出现明显背离。");
|
||||
} else if (risk.distance_km >= 25) {
|
||||
lines.push("结算机场与城区存在可感知距离，午后峰值和夜间降温节奏需要优先看机场站。");
|
||||
} else {
|
||||
lines.push("结算机场距离较近，城市体感与结算温度通常更同步。");
|
||||
}
|
||||
}
|
||||
|
||||
if (detail.name === "ankara") {
|
||||
lines.push("Ankara 需要重点看 LTAC / Esenboğa 与 MGM 周边站联动，不能只看城区体感。");
|
||||
}
|
||||
|
||||
if (detail.current?.obs_age_min != null) {
|
||||
if (detail.current.obs_age_min >= 45) {
|
||||
lines.push(`当前 METAR 已有 ${detail.current.obs_age_min} 分钟时滞，临近判断要结合周边站而不是只看主站快照。`);
|
||||
} else {
|
||||
lines.push("当前主站观测较新，短时判断可以把主站温度作为主要锚点。");
|
||||
}
|
||||
}
|
||||
|
||||
return lines;
|
||||
}
|
||||
|
||||
export function getClimateDrivers(detail: CityDetail) {
|
||||
const drivers: Array<{ label: string; text: string }> = [];
|
||||
const lat = Math.abs(Number(detail.lat));
|
||||
const current = detail.current || {};
|
||||
const temp = Number(current.temp);
|
||||
const dewPoint = Number(current.dewpoint);
|
||||
const humidity = Number(current.humidity);
|
||||
const windSpeed = Number(current.wind_speed_kt);
|
||||
const nearbyCount = Array.isArray(detail.mgm_nearby) ? detail.mgm_nearby.length : 0;
|
||||
|
||||
if (lat >= 50) {
|
||||
drivers.push({
|
||||
label: "高纬冷空气",
|
||||
text: "这座城市处在较高纬度，气温更容易受冷空气南下、短波槽和日照角度变化影响，波动通常偏快。",
|
||||
});
|
||||
} else if (lat >= 35) {
|
||||
drivers.push({
|
||||
label: "中纬度西风带",
|
||||
text: "这座城市主要受中纬度西风带和锋面活动控制，升温或降温往往来自气团切换，而不是单一的日照变化。",
|
||||
});
|
||||
} else if (lat >= 20) {
|
||||
drivers.push({
|
||||
label: "副热带高压",
|
||||
text: "这座城市更容易受到副热带高压、晴空辐射和低层暖平流影响，午后冲高能力通常比高纬城市更强。",
|
||||
});
|
||||
} else {
|
||||
drivers.push({
|
||||
label: "热带水汽与对流",
|
||||
text: "这座城市更偏热带环境，温度与体感常受水汽输送、云对流和阵雨触发影响，不完全由晴空辐射主导。",
|
||||
});
|
||||
}
|
||||
|
||||
if (Number.isFinite(windSpeed) && windSpeed >= 12) {
|
||||
drivers.push({
|
||||
label: "平流输送",
|
||||
text: `当前风速约 ${windSpeed}kt，说明低层输送比较明显，盘面短时方向更容易被外来气团带动。`,
|
||||
});
|
||||
} else if (detail.trend?.is_dead_market) {
|
||||
drivers.push({
|
||||
label: "本地辐射主导",
|
||||
text: "近期更像本地辐射和地表热量收支在主导，若无新气团介入，温度节奏通常更平滑。",
|
||||
});
|
||||
}
|
||||
|
||||
if (
|
||||
Number.isFinite(temp) &&
|
||||
Number.isFinite(dewPoint) &&
|
||||
temp - dewPoint <= 3
|
||||
) {
|
||||
drivers.push({
|
||||
label: "湿度与云量约束",
|
||||
text: "当前温度和露点接近，说明低层湿度较高。午后峰值容易受云量和降水触发抑制。",
|
||||
});
|
||||
} else if (Number.isFinite(humidity) && humidity >= 70) {
|
||||
drivers.push({
|
||||
label: "湿层偏厚",
|
||||
text: "相对湿度偏高，说明局地升温效率会受到水汽和云层反馈影响，冲高空间要比干空气场景更小心。",
|
||||
});
|
||||
} else {
|
||||
drivers.push({
|
||||
label: "干暖边界层",
|
||||
text: "低层空气相对偏干，晴空时段的升温效率通常更高，午后冲顶更依赖辐射和风向切换。",
|
||||
});
|
||||
}
|
||||
|
||||
if (nearbyCount >= 4) {
|
||||
drivers.push({
|
||||
label: "局地差异",
|
||||
text: "周边可用站点较多，说明地形、城区热岛或下垫面差异可能明显，结算站与城区体感需要分开看。",
|
||||
});
|
||||
}
|
||||
|
||||
return drivers;
|
||||
}
|
||||
Generated
+30
@@ -10,6 +10,7 @@
|
||||
"dependencies": {
|
||||
"@radix-ui/react-slot": "^1.1.2",
|
||||
"@vercel/analytics": "^1.6.1",
|
||||
"chart.js": "^4.5.1",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"leaflet": "^1.9.4",
|
||||
@@ -528,6 +529,11 @@
|
||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||
}
|
||||
},
|
||||
"node_modules/@kurkle/color": {
|
||||
"version": "0.3.4",
|
||||
"resolved": "https://registry.npmmirror.com/@kurkle/color/-/color-0.3.4.tgz",
|
||||
"integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w=="
|
||||
},
|
||||
"node_modules/@next/env": {
|
||||
"version": "15.5.12",
|
||||
"resolved": "https://registry.npmmirror.com/@next/env/-/env-15.5.12.tgz",
|
||||
@@ -974,6 +980,17 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
"node_modules/chart.js": {
|
||||
"version": "4.5.1",
|
||||
"resolved": "https://registry.npmmirror.com/chart.js/-/chart.js-4.5.1.tgz",
|
||||
"integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
|
||||
"dependencies": {
|
||||
"@kurkle/color": "^0.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"pnpm": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/chokidar": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.6.0.tgz",
|
||||
@@ -2334,6 +2351,11 @@
|
||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||
}
|
||||
},
|
||||
"@kurkle/color": {
|
||||
"version": "0.3.4",
|
||||
"resolved": "https://registry.npmmirror.com/@kurkle/color/-/color-0.3.4.tgz",
|
||||
"integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w=="
|
||||
},
|
||||
"@next/env": {
|
||||
"version": "15.5.12",
|
||||
"resolved": "https://registry.npmmirror.com/@next/env/-/env-15.5.12.tgz",
|
||||
@@ -2567,6 +2589,14 @@
|
||||
"resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001776.tgz",
|
||||
"integrity": "sha512-sg01JDPzZ9jGshqKSckOQthXnYwOEP50jeVFhaSFbZcOy05TiuuaffDOfcwtCisJ9kNQuLBFibYywv2Bgm9osw=="
|
||||
},
|
||||
"chart.js": {
|
||||
"version": "4.5.1",
|
||||
"resolved": "https://registry.npmmirror.com/chart.js/-/chart.js-4.5.1.tgz",
|
||||
"integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
|
||||
"requires": {
|
||||
"@kurkle/color": "^0.3.0"
|
||||
}
|
||||
},
|
||||
"chokidar": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.6.0.tgz",
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
"dependencies": {
|
||||
"@radix-ui/react-slot": "^1.1.2",
|
||||
"@vercel/analytics": "^1.6.1",
|
||||
"chart.js": "^4.5.1",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"leaflet": "^1.9.4",
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 893 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user