imbytecat/fullstack-starter
1
1
Fork 3
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): 修复充电状态筛选重置

Browse Source
This commit is contained in:
imbytecat
2026-05-12 00:18:00 +08:00
parent 4571cee2a1
commit 50e8e32bac
3 changed files with 46 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/index.tsx
+22 -24
View File
@@ -1,6 +1,6 @@
import { useQuery } from '@tanstack/react-query'
import { createFileRoute, Link } from '@tanstack/react-router'
import { AlertTriangle, ArrowRight, Database, ShieldCheck, Tags, TrendingDown } from 'lucide-react'
import { Activity, AlertTriangle, ArrowRight, ShieldCheck, Tags, TrendingDown } from 'lucide-react'
import {
Area,
CartesianGrid,
@@ -78,7 +78,7 @@ function formatChartTooltip(value: ValueType | undefined, name: NameType | undef
return [
`${Number.isFinite(numericValue) ? numericValue.toFixed(1) : (value ?? '-')}%`,
name === 'history' ? '历史观测' : '模型预测',
name === 'history' ? '历史观测' : '趋势预测',
]
}
@@ -150,12 +150,12 @@ function Dashboard() {
<header className="animate-fade-up mb-12 flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
<div className="max-w-3xl">
<Badge variant="info" className="mb-4">
<Database className="size-3.5" /> MySQL 实时记录 + AI 预测 API
<Activity className="size-3.5" /> 实时数据与健康预测
</Badge>
<h1 className="text-4xl font-light tracking-tight text-white sm:text-5xl">SoH 预测与风险洞察</h1>
<h1 className="text-4xl font-light tracking-tight text-white sm:text-5xl">电池健康与风险洞察</h1>
</div>
<div className="flex flex-col items-end gap-3 text-right">
<Badge variant="muted">仅展示真实记录与预测接口返回值</Badge>
<Badge variant="muted">基于当前可用数据生成</Badge>
<p className="text-xs tabular-nums text-[#71717A]">数据更新时间: {updatedAt}</p>
<Link
to="/batteries"
@@ -178,7 +178,7 @@ function Dashboard() {
{/* Hero KPI */}
<article className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03] p-8 lg:col-span-2">
<div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-teal-500/50 to-transparent" />
<p className="text-sm font-medium text-[#A1A1AA]">当前平均 SoH</p>
<p className="text-sm font-medium text-[#A1A1AA]">当前平均健康度</p>
<div className="mt-4 flex items-baseline gap-2">
<h2 className="text-6xl font-light tabular-nums text-white">{formatPercent(avgSoh)}</h2>
{avgSoh !== null && <span className="text-2xl text-[#71717A]">%</span>}
@@ -186,7 +186,7 @@ function Dashboard() {
<div className="mt-6 flex items-center gap-3 text-sm">
<span className="inline-flex items-center gap-1.5 text-emerald-400">
<span className="h-1.5 w-1.5 rounded-full bg-emerald-400" />
{avgSoh === null ? 'AI预测不可用' : '预测已返回'}
{avgSoh === null ? '健康预测暂不可用' : '预测已返回'}
</span>
<span className="text-[#71717A]">|</span>
<span className="text-[#A1A1AA]">共 {totalDevices} 台设备</span>
@@ -236,14 +236,14 @@ function Dashboard() {
{/* Divider */}
<hr className="my-12 border-white/5" />
{/* SoH Trend Chart */}
{/* Health trend chart */}
<section className="animate-fade-up delay-300 mb-12">
<Card className="p-8">
<header className="mb-8 flex flex-wrap items-end justify-between gap-4">
<SectionTitle
icon={<TrendingDown className="size-4" />}
title="SoH 预测点位"
description="图表只展示 AI 预测 API 返回的当前、30 天、90 天聚合点；没有真实 SoH 历史时不补假趋势。"
title="健康趋势预测"
description="展示当前健康度与未来 30/90 天趋势；数据不足时保持空态，避免误导判断。"
/>
<div className="flex items-center gap-6 text-sm text-[#A1A1AA]">
{soh.history.length > 0 && (
@@ -254,7 +254,7 @@ function Dashboard() {
)}
<span className="inline-flex items-center gap-2">
<span className="h-2 w-4 rounded-full bg-indigo-400" />
API 预测值
预测趋势
</span>
</div>
</header>
@@ -354,7 +354,7 @@ function Dashboard() {
</ResponsiveContainer>
) : (
<div className="flex h-full items-center justify-center rounded-xl border border-dashed border-white/10 bg-white/[0.02] text-sm text-[#71717A]">
AI SoH 预测不可用，暂无可绘制的健康度趋势。
暂无可用的健康趋势数据。
</div>
)}
</div>
@@ -368,12 +368,12 @@ function Dashboard() {
{/* Risk Distribution */}
<div>
<div className="mb-6">
<SectionTitle icon={<ShieldCheck className="size-4" />} title="风险分层与结构" />
<SectionTitle icon={<ShieldCheck className="size-4" />} title="健康分布" />
</div>
<div className="space-y-5">
<div>
<div className="mb-2 flex justify-between text-sm">
<span className="text-[#A1A1AA]">健康 (SoH &gt; 90%)</span>
<span className="text-[#A1A1AA]">健康 (&gt; 90%)</span>
<span className="tabular-nums text-white">
{healthyCount} 台{' '}
<span className="text-[#71717A]">
@@ -390,7 +390,7 @@ function Dashboard() {
</div>
<div>
<div className="mb-2 flex justify-between text-sm">
<span className="text-[#A1A1AA]">关注 (85% &lt; SoH &le; 90%)</span>
<span className="text-[#A1A1AA]">关注 (85% - 90%)</span>
<span className="tabular-nums text-white">
{watchCount} 台{' '}
<span className="text-[#71717A]">
@@ -407,7 +407,7 @@ function Dashboard() {
</div>
<div>
<div className="mb-2 flex justify-between text-sm">
<span className="text-[#A1A1AA]">预警 (SoH &le; 85%)</span>
<span className="text-[#A1A1AA]">预警 (&le; 85%)</span>
<span className="tabular-nums text-white">
{warningCount} 台{' '}
<span className="text-[#71717A]">
@@ -458,7 +458,7 @@ function Dashboard() {
{/* Event Timeline */}
<div>
<div className="mb-6">
<SectionTitle icon={<AlertTriangle className="size-4" />} title="风险与预测快照" />
<SectionTitle icon={<AlertTriangle className="size-4" />} title="风险与趋势概览" />
</div>
<div className="relative border-l border-white/10 pl-5">
{events.length > 0 ? (
@@ -513,10 +513,8 @@ function Dashboard() {
<section className="animate-fade-up delay-500 mb-12">
<div className="mb-6 flex items-end justify-between">
<div>
<h3 className="text-xl font-medium text-white">高风险设备清单与预测明细</h3>
<p className="mt-1 text-sm text-[#A1A1AA]">
按综合风险评分排序，展示 API 返回的当前、30 天与 90 天 SoH 预测
</p>
<h3 className="text-xl font-medium text-white">重点关注设备</h3>
<p className="mt-1 text-sm text-[#A1A1AA]">按风险优先级展示当前健康度与未来 30/90 天趋势。</p>
</div>
</div>
<Card className="overflow-hidden">
@@ -526,7 +524,7 @@ function Dashboard() {
<tr className="border-b border-white/10 bg-white/[0.02] text-zinc-400">
<th className="px-6 py-4 font-medium whitespace-nowrap">设备标识</th>
<th className="px-6 py-4 font-medium whitespace-nowrap">设备型号</th>
<th className="px-6 py-4 font-medium whitespace-nowrap">当前 SoH</th>
<th className="px-6 py-4 font-medium whitespace-nowrap">当前健康度</th>
<th className="px-6 py-4 font-medium whitespace-nowrap">30天预测</th>
<th className="px-6 py-4 font-medium whitespace-nowrap">90天预测</th>
<th className="px-6 py-4 font-medium whitespace-nowrap">风险评分</th>
@@ -602,7 +600,7 @@ function Dashboard() {
<section className="animate-fade-up delay-500 grid grid-cols-1 gap-8 lg:grid-cols-3">
{/* Strategy Cards */}
<div className="lg:col-span-2">
<h3 className="mb-6 text-lg font-medium text-white">模型驱动的维护策略建议</h3>
<h3 className="mb-6 text-lg font-medium text-white">行动建议</h3>
<div className="grid gap-4 sm:grid-cols-2">
{strategies.length > 0 ? (
strategies.map((item, index) => (
@@ -641,7 +639,7 @@ function Dashboard() {
</div>
<div className="text-right">
<div className="text-sm tabular-nums text-white">{formatPercentWithUnit(item.avgSoh)}</div>
<div className="text-xs text-[#71717A]">平均 SoH</div>
<div className="text-xs text-[#71717A]">平均健康度</div>
</div>
</div>
))