Show today battery percentage forecast

Author: zijian-z

README.md

@@ -12,7 +12,7 @@ API、PostgreSQL、MQTT 和 TeslaMate 容器端口都只在 Docker 网络内使
 - 当前车辆状态、电量、续航、里程、位置、温度、胎压、软件版本
 - 默认 7 天数据，支持 30 天、90 天、一年、全部和自定义日期范围
 - 概览、趋势、行程、充电、效率、电池、地点、车辆信息报表
-- 概览页展示今日分时电量消耗，并按车辆休眠/未休眠状态预测今日剩余电量消耗
+- 概览页展示今日实际/预测电量百分比，并按车辆休眠/未休眠状态预测今日结束电量
 - 行程统计：里程、时长、最高车速、平均速度、能耗、海拔累计、路线排行
 - 充电统计：电量、费用、SOC 增量、功率、AC/DC 月汇总、快充次数、充电地点
 - 电池和车辆观测：电量/续航趋势、状态占比、温度、胎压

backend/app/main.py

@@ -112,6 +112,10 @@ def to_float(value: Any) -> float | None:
         return None
 
 
+def clamp(value: float, low: float, high: float) -> float:
+    return min(max(value, low), high)
+
+
 def hour_start(value: datetime) -> datetime:
     return value.replace(minute=0, second=0, microsecond=0)
 
@@ -173,7 +177,11 @@ def today_energy(car_id: int, car: dict[str, Any]) -> dict[str, Any]:
         where p.car_id = %s
           and p.date >= %s::timestamp
           and p.date < least(%s::timestamp, %s::timestamp)
-          and (p.rated_battery_range_km is not null or p.ideal_battery_range_km is not null)
+          and (
+              p.battery_level is not null
+              or p.rated_battery_range_km is not null
+              or p.ideal_battery_range_km is not null
+          )
         order by p.date asc
         """,
         (car_id, history_start_utc, tomorrow_start_utc, now_utc + timedelta(minutes=5)),
@@ -203,6 +211,11 @@ def today_energy(car_id: int, car: dict[str, Any]) -> dict[str, Any]:
     def range_km(row: dict[str, Any]) -> float | None:
         return to_float(row.get("rated_battery_range_km")) or to_float(row.get("ideal_battery_range_km"))
 
+    def battery_level(row: dict[str, Any] | None) -> float | None:
+        if not row:
+            return None
+        return to_float(row.get("battery_level")) or to_float(row.get("usable_battery_level"))
+
     def is_moving(row: dict[str, Any]) -> bool:
         speed = to_float(row.get("speed")) or 0
         return row.get("drive_id") is not None or speed > 1
@@ -342,23 +355,79 @@ def parked_rate(hour: int) -> tuple[str, float | None]:
         else:
             predicted_unknown[hour] = rate * remaining_hours
 
+    latest_battery_level = battery_level(latest_row) or to_float(car.get("battery_level")) or to_float(car.get("usable_battery_level"))
+    latest_range_km = (range_km(latest_row) if latest_row else None) or to_float(car.get("rated_battery_range_km")) or to_float(car.get("ideal_battery_range_km"))
+    kwh_per_percent = None
+    if efficiency and latest_range_km and latest_battery_level and latest_battery_level > 0:
+        kwh_per_percent = latest_range_km * efficiency / latest_battery_level
+
+    battery_samples = [
+        {
+            "date": row["date"],
+            "level": battery_level(row),
+        }
+        for row in rows
+        if isinstance(row.get("date"), datetime) and battery_level(row) is not None
+    ]
+
+    def actual_level_at(marker_local: datetime) -> float | None:
+        if not battery_samples:
+            return None
+        marker_utc = utc_naive(marker_local)
+        level = None
+        for sample in battery_samples:
+            if sample["date"] <= marker_utc:
+                level = sample["level"]
+            else:
+                break
+        return level
+
+    current_hour = now_local.hour
+
+    def predicted_energy_until(hour: int) -> float:
+        end_hour = min(max(hour, 0), 24)
+        if end_hour <= current_hour:
+            return 0.0
+        return sum(
+            predicted_drive[index] + predicted_asleep[index] + predicted_awake[index] + predicted_unknown[index]
+            for index in range(current_hour, end_hour)
+        )
+
+    def predicted_level_at(hour: int) -> float | None:
+        if latest_battery_level is None or hour < current_hour:
+            return None
+        predicted_kwh = predicted_energy_until(hour)
+        if not kwh_per_percent:
+            return latest_battery_level if predicted_kwh == 0 else None
+        return clamp(latest_battery_level - predicted_kwh / kwh_per_percent, 0, 100)
+
     points = []
-    for hour in range(24):
-        predicted_kwh = predicted_drive[hour] + predicted_asleep[hour] + predicted_awake[hour] + predicted_unknown[hour]
+    for hour in range(25):
+        predicted_kwh = (
+            predicted_drive[hour] + predicted_asleep[hour] + predicted_awake[hour] + predicted_unknown[hour]
+            if hour < 24
+            else 0.0
+        )
+        marker_local = today_start_local + timedelta(hours=hour)
+        actual_battery_level = latest_battery_level if hour == current_hour else actual_level_at(marker_local)
+        if marker_local > now_local and hour != current_hour:
+            actual_battery_level = None
         points.append(
             {
                 "hour": hour,
                 "label": f"{hour:02d}:00",
-                "actual_kwh": actual_by_hour[hour],
-                "actual_drive_kwh": actual_drive_by_hour[hour],
-                "actual_asleep_kwh": actual_asleep_by_hour[hour],
-                "actual_awake_kwh": actual_awake_by_hour[hour],
-                "actual_unknown_kwh": actual_unknown_by_hour[hour],
+                "actual_battery_level": actual_battery_level,
+                "predicted_battery_level": predicted_level_at(hour),
+                "actual_kwh": actual_by_hour[hour] if hour < 24 else 0.0,
+                "actual_drive_kwh": actual_drive_by_hour[hour] if hour < 24 else 0.0,
+                "actual_asleep_kwh": actual_asleep_by_hour[hour] if hour < 24 else 0.0,
+                "actual_awake_kwh": actual_awake_by_hour[hour] if hour < 24 else 0.0,
+                "actual_unknown_kwh": actual_unknown_by_hour[hour] if hour < 24 else 0.0,
                 "predicted_kwh": predicted_kwh,
-                "predicted_drive_kwh": predicted_drive[hour],
-                "predicted_asleep_kwh": predicted_asleep[hour],
-                "predicted_awake_kwh": predicted_awake[hour],
-                "predicted_unknown_kwh": predicted_unknown[hour],
+                "predicted_drive_kwh": predicted_drive[hour] if hour < 24 else 0.0,
+                "predicted_asleep_kwh": predicted_asleep[hour] if hour < 24 else 0.0,
+                "predicted_awake_kwh": predicted_awake[hour] if hour < 24 else 0.0,
+                "predicted_unknown_kwh": predicted_unknown[hour] if hour < 24 else 0.0,
             }
         )
 
@@ -388,6 +457,8 @@ def parked_rate(hour: int) -> tuple[str, float | None]:
         "state": latest_state or None,
         "prediction_basis": prediction_basis,
         "prediction_confidence": "normal" if has_basis_samples else "low",
+        "current_battery_level": latest_battery_level,
+        "estimated_end_battery_level": predicted_level_at(24),
         "actual_kwh": actual_total,
         "predicted_remaining_kwh": predicted_total,
         "estimated_total_kwh": actual_total + predicted_total,

frontend/src/main.tsx

@@ -162,6 +162,8 @@ type RangePoint = {
 type TodayEnergyPoint = {
   hour: number;
   label: string;
+  actual_battery_level?: number | null;
+  predicted_battery_level?: number | null;
   actual_kwh?: number | null;
   actual_drive_kwh?: number | null;
   actual_asleep_kwh?: number | null;
@@ -182,6 +184,8 @@ type TodayEnergy = {
   state?: string | null;
   prediction_basis?: string | null;
   prediction_confidence?: string | null;
+  current_battery_level?: number | null;
+  estimated_end_battery_level?: number | null;
   actual_kwh?: number | null;
   predicted_remaining_kwh?: number | null;
   estimated_total_kwh?: number | null;
@@ -390,11 +394,6 @@ function kwh(value: number | null | undefined): string {
   return value === null || value === undefined ? '—' : `${numberFormat.format(value)} kWh`;
 }
 
-function preciseKwh(value: number | null | undefined): string {
-  if (value === null || value === undefined) return '—';
-  return `${new Intl.NumberFormat('zh-CN', { maximumFractionDigits: 2 }).format(value)} kWh`;
-}
-
 function percent(value: number | null | undefined): string {
   return value === null || value === undefined ? '—' : `${integerFormat.format(value)}%`;
 }
@@ -895,29 +894,16 @@ function App() {
     () =>
       (dashboard?.today_energy?.points ?? []).map((item) => ({
         ...item,
-        hourLabel: String(item.hour).padStart(2, '0'),
-        actual_kwh: Number((item.actual_kwh ?? 0).toFixed(2)),
-        actual_drive_kwh: Number((item.actual_drive_kwh ?? 0).toFixed(2)),
-        actual_asleep_kwh: Number((item.actual_asleep_kwh ?? 0).toFixed(2)),
-        actual_awake_kwh: Number((item.actual_awake_kwh ?? 0).toFixed(2)),
-        actual_unknown_kwh: Number((item.actual_unknown_kwh ?? 0).toFixed(2)),
-        predicted_drive_kwh: Number((item.predicted_drive_kwh ?? 0).toFixed(2)),
-        predicted_asleep_kwh: Number((item.predicted_asleep_kwh ?? 0).toFixed(2)),
-        predicted_awake_kwh: Number((item.predicted_awake_kwh ?? 0).toFixed(2)),
-        predicted_unknown_kwh: Number((item.predicted_unknown_kwh ?? 0).toFixed(2))
+        hourLabel: item.hour === 24 ? '24' : String(item.hour).padStart(2, '0'),
+        actual_battery_level:
+          item.actual_battery_level === null || item.actual_battery_level === undefined ? null : Number(item.actual_battery_level.toFixed(1)),
+        predicted_battery_level:
+          item.predicted_battery_level === null || item.predicted_battery_level === undefined ? null : Number(item.predicted_battery_level.toFixed(1))
       })),
     [dashboard]
   );
   const todayEnergyHasData = todayEnergyPoints.some(
-    (item) =>
-      item.actual_drive_kwh ||
-      item.actual_asleep_kwh ||
-      item.actual_awake_kwh ||
-      item.actual_unknown_kwh ||
-      item.predicted_drive_kwh ||
-      item.predicted_asleep_kwh ||
-      item.predicted_awake_kwh ||
-      item.predicted_unknown_kwh
+    (item) => item.actual_battery_level !== null || item.predicted_battery_level !== null
   );
   const reportItems: Array<{ key: ReportKey; label: string; icon: React.ReactNode }> = [
     { key: 'overview', label: '概览', icon: <Activity size={17} /> },
@@ -1039,57 +1025,41 @@ function App() {
     const aside = `${basis} · 最近 ${energy?.history_days ?? 30} 天均值${energy?.prediction_confidence === 'low' ? ' · 样本较少' : ''}`;
 
     return (
-      <Section title="今日电量消耗" icon={<BatteryCharging size={18} />} aside={aside}>
-        <div className="today-energy-kpis">
-          <div>
-            <span>已消耗</span>
-            <strong>{preciseKwh(energy?.actual_kwh)}</strong>
-          </div>
-          <div>
-            <span>预计剩余</span>
-            <strong>{preciseKwh(energy?.predicted_remaining_kwh)}</strong>
-          </div>
+      <Section title="今日电量预测" icon={<BatteryCharging size={18} />} aside={aside}>
+        <div className="today-energy-kpis today-energy-kpis-single">
           <div>
-            <span>预计全天</span>
-            <strong>{preciseKwh(energy?.estimated_total_kwh)}</strong>
+            <span>预计今日结束电量</span>
+            <strong>{percent(energy?.estimated_end_battery_level)}</strong>
           </div>
         </div>
 
         {todayEnergyHasData ? (
           <>
             <div className="chart chart-compact today-energy-chart">
               <ResponsiveContainer width="100%" height="100%">
-                <BarChart data={todayEnergyPoints} margin={{ top: 10, right: 8, bottom: 0, left: -20 }}>
+                <LineChart data={todayEnergyPoints} margin={{ top: 10, right: 10, bottom: 0, left: -16 }}>
                   <CartesianGrid strokeDasharray="3 3" vertical={false} />
                   <XAxis dataKey="hourLabel" tickLine={false} axisLine={false} interval={2} />
-                  <YAxis tickLine={false} axisLine={false} width={40} />
+                  <YAxis tickLine={false} axisLine={false} width={38} domain={[0, 100]} tickFormatter={(value) => `${value}%`} />
                   <Tooltip
                     formatter={chartTooltipFormatter({
-                      actual_kwh: { label: '已消耗', format: preciseKwh },
-                      predicted_drive_kwh: { label: '预计行驶', format: preciseKwh },
-                      predicted_asleep_kwh: { label: '预计休眠', format: preciseKwh },
-                      predicted_awake_kwh: { label: '预计未休眠', format: preciseKwh },
-                      predicted_unknown_kwh: { label: '预计未知', format: preciseKwh }
+                      actual_battery_level: { label: '实际电量', format: percent },
+                      predicted_battery_level: { label: '预测电量', format: percent }
                     })}
                     labelFormatter={(label) => `${label}:00`}
                   />
-                  <Bar dataKey="actual_kwh" stackId="energy" fill="#171a20" radius={[3, 3, 0, 0]} name="actual_kwh" />
-                  <Bar dataKey="predicted_drive_kwh" stackId="energy" fill="#8da2fb" radius={[3, 3, 0, 0]} name="predicted_drive_kwh" />
-                  <Bar dataKey="predicted_asleep_kwh" stackId="energy" fill="#94a3b8" radius={[3, 3, 0, 0]} name="predicted_asleep_kwh" />
-                  <Bar dataKey="predicted_awake_kwh" stackId="energy" fill="#3e6ae1" fillOpacity={0.62} radius={[3, 3, 0, 0]} name="predicted_awake_kwh" />
-                  <Bar dataKey="predicted_unknown_kwh" stackId="energy" fill="#d8d9da" radius={[3, 3, 0, 0]} name="predicted_unknown_kwh" />
-                </BarChart>
+                  <Line type="monotone" dataKey="actual_battery_level" stroke="#171a20" strokeWidth={2.4} dot={false} connectNulls={false} name="实际电量" />
+                  <Line type="monotone" dataKey="predicted_battery_level" stroke="#3e6ae1" strokeWidth={2.4} strokeDasharray="6 4" dot={false} connectNulls={false} name="预测电量" />
+                </LineChart>
               </ResponsiveContainer>
             </div>
-            <div className="energy-legend" aria-label="今日电量消耗图例">
-              <span><i style={{ background: '#171a20' }} />已消耗</span>
-              <span><i style={{ background: '#8da2fb' }} />预计行驶</span>
-              <span><i style={{ background: '#94a3b8' }} />预计休眠</span>
-              <span><i style={{ background: '#3e6ae1' }} />预计未休眠</span>
+            <div className="energy-legend" aria-label="今日电量预测图例">
+              <span><i style={{ background: '#171a20' }} />实际电量</span>
+              <span><i style={{ background: '#3e6ae1' }} />预测电量</span>
             </div>
           </>
         ) : (
-          <Empty text="暂无可计算的今日能耗采样" />
+          <Empty text="暂无可计算的今日电量采样" />
         )}
       </Section>
     );

frontend/src/styles.css

@@ -580,6 +580,10 @@ main {
   margin-bottom: 12px;
 }
 
+.today-energy-kpis-single {
+  grid-template-columns: minmax(0, 1fr);
+}
+
 .today-energy-kpis div {
   min-width: 0;
   padding: 12px 14px;