2569718930@qq.com
66 lines
2.2 KiB
TypeScript
66 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { useI18n } from "@/hooks/useI18n";
|
|
import type { ScanOpportunityRow, ScanTerminalResponse } from "@/lib/dashboard-types";
|
|
|
|
function formatTemperature(value?: number | null, unit?: string | null): string {
|
|
if (value == null || Number.isNaN(Number(value))) return "--";
|
|
return `${Number(value).toFixed(1)}${unit || "°C"}`;
|
|
}
|
|
|
|
export function ScanKPIBar({
|
|
response,
|
|
rows,
|
|
totalCities,
|
|
loading: _loading,
|
|
}: {
|
|
response: ScanTerminalResponse | null;
|
|
rows: ScanOpportunityRow[];
|
|
totalCities: number;
|
|
loading: boolean;
|
|
}) {
|
|
const { locale } = useI18n();
|
|
const isEn = locale === "en-US";
|
|
const bestRow = rows[0] || null;
|
|
|
|
const cards = [
|
|
{
|
|
label: isEn ? "AI Workspace" : "AI 工作区",
|
|
value: `${rows.length}/${totalCities || 0}`,
|
|
note: isEn
|
|
? "No automatic scan. Cities are added from map clicks."
|
|
: "不主动扫描；地图点选后加入城市分析。",
|
|
tone: response?.status === "failed" ? "red" : response?.status === "stale" ? "amber" : "cyan",
|
|
},
|
|
{
|
|
label: isEn ? "City Pool" : "城市池",
|
|
value: `${totalCities || 0}`,
|
|
note: isEn ? "Available cities for forecast review" : "可点击进入 AI 预测的城市范围",
|
|
tone: "blue",
|
|
},
|
|
{
|
|
label: isEn ? "Forecast Center" : "预测中枢",
|
|
value: bestRow ? formatTemperature(bestRow.deb_prediction, bestRow.temp_symbol || bestRow.target_unit) : "--",
|
|
note: bestRow
|
|
? `${isEn ? "Focus" : "焦点"} ${bestRow.city_display_name || bestRow.display_name || bestRow.city} · DEB / ${isEn ? "models" : "模型"} / METAR`
|
|
: isEn
|
|
? "Select a city to load DEB and observations"
|
|
: "选择城市后展示 DEB 与实测路径",
|
|
tone: "green",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="scan-kpi-bar">
|
|
{cards.map((card) => (
|
|
<article key={card.label} className={`scan-kpi-card ${card.tone}`}>
|
|
<div className="scan-kpi-label">{card.label}</div>
|
|
<div className="scan-kpi-value">{card.value}</div>
|
|
<div className="scan-kpi-note">{card.note}</div>
|
|
</article>
|
|
))}
|
|
</section>
|
|
);
|
|
}
|