rack：主板 / 底板功率与功率曲线；底板曲线加电压电流、开机重按事件

- 每路主板功率（V×I）：总览槽位、单板卡片、单路曲线新增「功率」一张
- 底板：单板页新增功率仪表（底板输入 / 五路主板合计 / 损耗），底板曲线加
  功率图（输入 vs 主板合计）；board_history 每点多回一列 rails_mw
- 底板曲线改为纵向 N 张（温度 / 风扇 / 输入电压 / 输入电流 / 功率），断档断线
- LOG_EV_BOOT_CHECK（19）事件命名，只有「没开起来」标红

Co-Authored-By: Claude Opus 5.5 <[email protected]>

rack/backend/prrack/api.py

@@ -110,7 +110,7 @@ def create_app(hub: Hub, rec: RecoveryManager, static_dir: Optional[str] = None,
 
     @app.get("/api/boards/{board}/history")
     def board_history(board: str, start: int, end: Optional[int] = None):
-        """整板曲线（温度 / 风扇 / 输入），见 Db.board_history。"""
+        """整板曲线（温度 / 风扇 / 输入 / 五路主板合计功率），见 Db.board_history。"""
         _board_or_404(hub, board)
         return hub.db.board_history(board, start, end or now_ms())
 
@@ -188,6 +188,10 @@ def create_app(hub: Hub, rec: RecoveryManager, static_dir: Optional[str] = None,
                 if d["arg"] == 3:
                     d["name"] += "：" + protocol.OTA_ERR_NAMES.get(d["mv"], str(d["mv"]))
                 d["severe"] = d["arg"] in (3, 5)
+            elif d["type"] == 19:
+                failed = bool(d["arg"] & protocol.BOOT_CHECK_FAILED)
+                d["name"] += "（按了 %d 次，%s）" % (d["arg"] & 0x0F, "没开起来" if failed else "开起来了")
+                d["severe"] = failed
             out.append(d)
         return out
 

rack/backend/prrack/db.py

@@ -215,7 +215,8 @@ class Db:
     def board_history(self, board: str, t0: int, t1: int, max_points: int = 1500) -> dict:
         """[t0, t1) 的整板曲线：两路 NTC 温度（m°C，带每桶 min/max）、风扇占空比（‰）、输入电压电流。
         取数规则同 `history()`：近期短跨度回原始 1 s，否则回分钟聚合。
-        points：[t, t0, t0_min, t0_max, t1, t1_min, t1_max, fan, in_mv, in_ua]；读不到的是 None。"""
+        points：[t, t0, t0_min, t0_max, t1, t1_min, t1_max, fan, in_mv, in_ua, rails_mw]；读不到的是 None。
+        rails_mw 是五路手机主板合计功率（mW），和输入功率 in_mv×in_ua 一比就是板上损耗。"""
         span = max(1, t1 - t0)
         raw_ok = t0 >= now_ms() - RAW_KEEP_S * 1000 and span <= 6 * 3600 * 1000
         if raw_ok:
@@ -234,6 +235,12 @@ class Db:
                 "CAST(AVG(in_mv_avg) AS INTEGER) mv, CAST(AVG(in_ua_avg) AS INTEGER) ua FROM board_tele_min "
                 "WHERE board_id=? AND ts>=? AND ts<? GROUP BY t ORDER BY t", (bucket, bucket, board, t0, t1))
             res = "minute"
+        # 五路主板合计功率（mW）：每个时刻五路 mv×ua 求和，再按桶取均值（除以桶里的时刻数，不是行数）。
+        # 分钟聚合只有各路均值，拿 mv_avg×ua_avg 近似 —— 电压几乎不动，误差可以忽略。
+        src = ("mv*ua", "tele") if res == "raw" else ("mv_avg*ua_avg", "tele_min")
+        rails_mw = {r["t"]: r["p"] for r in self.q(
+            "SELECT ts/?*? AS t, CAST(SUM(%s)/1e6/COUNT(DISTINCT ts) AS INTEGER) p FROM %s "
+            "WHERE board_id=? AND ts>=? AND ts<? GROUP BY t" % src, (bucket, bucket, board, t0, t1))}
         return {"resolution": res, "bucket_ms": bucket,
-                "points": [[r["t"], r["a0"], r["n0"], r["x0"], r["a1"], r["n1"], r["x1"], r["f"], r["mv"], r["ua"]]
-                           for r in rows]}
+                "points": [[r["t"], r["a0"], r["n0"], r["x0"], r["a1"], r["n1"], r["x1"], r["f"], r["mv"], r["ua"],
+                            rails_mw.get(r["t"])] for r in rows]}

rack/backend/prrack/protocol.py

@@ -36,6 +36,7 @@ EVENT_TYPES: Dict[int, Tuple[str, str]] = {
     16: ("PD_LIMIT", "PD 限功率"),
     17: ("PG_TIMEOUT", "上电等不到 PG"),  # A15：arg bit0 = FLT# 在报，bit1 = 按电压判
     18: ("OTA", "固件升级"),  # C2：arg 1 开始 / 2 就绪 / 3 失败(mV 列=原因) / 4 自证健康 / 5 回滚 / 6 为换固件重启
+    19: ("BOOT_CHECK", "开机重按"),  # 0.1.2：arg bit0~3 = 按了几次，bit7 = 最终没开起来（电源键弹片接触不良）
 }
 
 # LOG_EV_OTA 的 arg（firmware/main/ota.h 的 ota_ev_t）与失败原因（ota_err_t，失败那条的 mV 列）。⚠️ 冻结。
@@ -45,7 +46,8 @@ OTA_ERR_NAMES = {1: "下载失败", 2: "大小不对", 3: "哈希不对", 4: "
                  6: "切启动分区失败", 7: "没有备用槽 / 新固件未自证"}
 
 # 严重程度：界面上标红的那些（会断电 / 断 VBUS / 硬件故障）。
-EVENT_SEVERE = {3, 4, 5, 6, 7, 9, 11, 14, 17}  # OTA 的失败 / 回滚在 api.events 里按 arg 单独标红
+EVENT_SEVERE = {3, 4, 5, 6, 7, 9, 11, 14, 17}  # OTA 的失败 / 回滚、开机重按的「没开起来」在 api.events 里按 arg 单独标红
+BOOT_CHECK_FAILED = 0x80  # LOG_EV_BOOT_CHECK 的 arg bit7
 
 # cmd_id_t（firmware/main/cmd.h），CMD_REJECT 事件的 arg 就是它。
 CMD_NAMES = {1: "status", 2: "set_voltage", 3: "power_cycle", 4: "key", 5: "edl", 6: "vbus",

rack/backend/tests/test_api.py

@@ -153,3 +153,35 @@ def test_board_history_raw_and_minute(env):
     assert old["resolution"] == "minute" and old["points"][0][2] == 35000
     assert max(p[3] for p in old["points"]) == 35119
     assert c.get("/api/boards/nope/history", params={"start": 0}).status_code == 404
+
+
+def test_boot_check_event_is_named_and_only_the_failure_is_severe(env):
+    # 固件 0.1.2 LOG_EV_BOOT_CHECK：arg 低 4 位 = 按了几次，bit7 = 最终没开起来
+    c, hub, sim, db = env
+    now = now_ms()
+    db.many("INSERT INTO events (board_id, seq, t_ms, rail, type, arg, mv, ua, received) VALUES (?,?,?,?,?,?,?,?,?)",
+            [(B, 9001, 1000, 1, 19, 2, 3931, 210000, now),
+             (B, 9002, 2000, 1, 19, 0x83, 3931, 1500, now + 1)])
+    ev = {e["seq"]: e for e in c.get("/api/events", params={"board": B}).json()}
+    assert ev[9001]["code"] == "BOOT_CHECK" and ev[9001]["severe"] is False
+    assert "按了 2 次，开起来了" in ev[9001]["name"]
+    assert ev[9002]["severe"] is True and "按了 3 次，没开起来" in ev[9002]["name"]
+
+
+def test_board_history_sums_rail_power(env):
+    # 五路主板合计功率：同一时刻各路 mv×ua 求和再按桶平均；没有主板遥测的时刻是 None
+    c, hub, sim, db = env
+    base = now_ms() // 60000 * 60000 - 3 * 60000
+    db.many("INSERT INTO board_tele VALUES (?,?,?,?,?,?,?)",
+            [(base + i * 1000, B, 12000, 1000000, 35000, 35000, 0) for i in range(120)])
+    # 前 60 s 有两路：4.0 V × 500 mA + 3.9 V × 1 A = 5.9 W；后 60 s 没有主板数据
+    db.many("INSERT INTO tele VALUES (?,?,?,?,?,?,?,?,?,?)",
+            [(base + i * 1000, B, r, mv, ua, 1, 1, 1, 1, 0)
+             for i in range(60) for r, mv, ua in ((1, 4000, 500000), (2, 3900, 1000000))])
+    h = db.board_history(B, base, base + 120000)
+    assert h["resolution"] == "raw"
+    assert {p[10] for p in h["points"] if p[0] < base + 60000} == {5900}
+    assert {p[10] for p in h["points"] if p[0] >= base + 60000} == {None}
+    assert db.downsample(base + 180000) > 0
+    old = db.board_history(B, base - 10 * 86400000, base + 120000)
+    assert old["resolution"] == "minute" and old["points"][0][10] == 5900

rack/backend/tests/test_core.py

@@ -82,6 +82,7 @@ def test_event_table_matches_firmware_numbers():
     assert protocol.EVENT_TYPES[16][0] == "PD_LIMIT"
     assert protocol.CMD_NAMES[9] == "power" and protocol.CMD_NAMES[12] == "net"
     assert protocol.EVENT_TYPES[18][0] == "OTA" and protocol.CMD_NAMES[13] == "ota"  # C2
+    assert protocol.EVENT_TYPES[19][0] == "BOOT_CHECK" and protocol.BOOT_CHECK_FAILED == 0x80  # 0.1.2
 
 
 def test_topic_matching():

rack/frontend/src/chart.js

@@ -1,7 +1,7 @@
-// ECharts 的公共部分：按需引入 + 取色 + 两张上下叠放的图共用一条时间轴。
+// ECharts 的公共部分：按需引入 + 取色 + 纵向叠放的几张小图共用一条时间轴。
 //
 // 规矩（dataviz skill）：
-//  · 不用双 Y 轴 —— 电流和电压、温度和风扇，一律上下两个 grid，共用 x（dataZoom 联动）；
+//  · 不用双 Y 轴 —— 不同量纲一律各占一个 grid，纵向排、共用 x（dataZoom 联动）；
 //  · 系列色取参考调色板第 1/2 槽，按本页亮暗两种面板底色跑过 validate_palette.js（全部通过）；
 //  · 文字一律用墨色 / 次墨色，不用系列色；网格线用最浅的细线；
 //  · 线宽 2px，不画数据点；min~max 画成同色 15% 的带子。
@@ -41,28 +41,66 @@ export function band(hex, a = 0.15) {
   return `rgba(${n >> 16},${(n >> 8) & 255},${n & 255},${a})`
 }
 
-// 上下两块：上面主图（高），下面副图（矮）。返回 grid / xAxis / dataZoom 的公共配置。
-export function stacked(p, { topName, bottomName, topFmt, bottomFmt, bottomMin, bottomMax, topMin, topMax, bottomInterval }) {
+// 纵向排 N 张各自独立的小图（各有自己的 Y 轴和名字），共用一条时间轴、缩放联动。
+// panels：[{ name, fmt, min, max, interval, height }]，height 是像素。返回 { option, height }，
+// height 是整张画布该给的像素高度（容器要按它设高，不然 echarts 会挤或留白）。
+export function panels(p, defs, { gap = 44, top = 28, bottom = 64 } = {}) {
   const axisLabel = { color: p.muted, fontSize: 11 }
-  const x = i => ({
-    type: 'time', gridIndex: i, axisLine: { lineStyle: { color: p.axis } }, axisTick: { show: false },
-    axisLabel: { ...axisLabel, show: i === 1, hideOverlap: true }, splitLine: { show: false },
-  })
-  const y = (i, name, fmt, min, max, interval) => ({
-    type: 'value', gridIndex: i, name, nameTextStyle: { color: p.muted, fontSize: 11, align: 'left', padding: [0, 0, 0, -30] },
-    scale: true, min, max, interval, splitNumber: i === 0 ? 4 : 2, axisLabel: { ...axisLabel, formatter: fmt },
-    splitLine: { lineStyle: { color: p.grid } }, axisLine: { show: false }, axisTick: { show: false },
-  })
+  const last = defs.length - 1
+  let y0 = top
+  const grid = defs.map(d => { const g = { left: 52, right: 16, top: y0, height: d.height }; y0 += d.height + gap; return g })
   return {
-    animation: false,
-    textStyle: { fontFamily: getComputedStyle(document.body).fontFamily },
-    grid: [{ left: 48, right: 16, top: 30, height: '48%' }, { left: 48, right: 16, top: '75%', bottom: 44 }],
-    xAxis: [x(0), x(1)],
-    yAxis: [y(0, topName, topFmt, topMin, topMax), y(1, bottomName, bottomFmt, bottomMin, bottomMax, bottomInterval)],
-    axisPointer: { link: [{ xAxisIndex: 'all' }], lineStyle: { color: p.muted } },
-    dataZoom: [{ type: 'inside', xAxisIndex: [0, 1] },
-      { type: 'slider', xAxisIndex: [0, 1], height: 16, bottom: 8, borderColor: p.axis, fillerColor: band(p.s1, 0.12),
-        dataBackground: { lineStyle: { color: p.axis }, areaStyle: { color: p.bay } }, textStyle: { color: p.muted } }],
-    tooltip: { trigger: 'axis', backgroundColor: p.panel, borderColor: p.axis, textStyle: { color: p.ink, fontSize: 12 } },
+    height: y0 - gap + bottom,
+    option: {
+      animation: false,
+      textStyle: { fontFamily: getComputedStyle(document.body).fontFamily },
+      grid,
+      xAxis: defs.map((_, i) => ({
+        type: 'time', gridIndex: i, axisLine: { lineStyle: { color: p.axis } }, axisTick: { show: false },
+        axisLabel: { ...axisLabel, show: i === last, hideOverlap: true }, splitLine: { show: false },
+      })),
+      yAxis: defs.map((d, i) => ({
+        type: 'value', gridIndex: i, name: d.name,
+        nameTextStyle: { color: p.ink2, fontSize: 12, align: 'left', padding: [0, 0, 0, -34] },
+        scale: true, min: d.min, max: d.max, interval: d.interval, splitNumber: 2,
+        axisLabel: { ...axisLabel, formatter: d.fmt },
+        splitLine: { lineStyle: { color: p.grid } }, axisLine: { show: false }, axisTick: { show: false },
+      })),
+      axisPointer: { link: [{ xAxisIndex: 'all' }], lineStyle: { color: p.muted } },
+      // 缩放条：默认那根亮灰的拖动把手在暗色面板上太抢眼，全部压成面板线色，只让选中段带一点系列色
+      dataZoom: [{ type: 'inside', xAxisIndex: defs.map((_, i) => i) },
+        { type: 'slider', xAxisIndex: defs.map((_, i) => i), height: 18, bottom: 10, left: 52, right: 16,
+          borderColor: p.axis, backgroundColor: 'transparent', fillerColor: band(p.s1, 0.10), showDetail: false,
+          handleIcon: 'path://M4,0 h2 v18 h-2 z', handleSize: '100%', handleStyle: { color: p.muted, borderColor: p.muted },
+          moveHandleSize: 4, moveHandleStyle: { color: p.axis, opacity: 1 },
+          emphasis: { handleStyle: { color: p.ink2, borderColor: p.ink2 }, moveHandleStyle: { color: p.muted } },
+          dataBackground: { lineStyle: { color: p.axis, width: 1 }, areaStyle: { color: p.bay, opacity: 1 } },
+          selectedDataBackground: { lineStyle: { color: p.s1, width: 1, opacity: .5 }, areaStyle: { color: band(p.s1, 0.08) } },
+          textStyle: { color: p.muted } }],
+      tooltip: { trigger: 'axis', backgroundColor: p.panel, borderColor: p.axis, textStyle: { color: p.ink, fontSize: 12 } },
+    },
   }
 }
+
+// 自动撑满数据，但保证至少 span 的跨度（别把噪声级的抖动放大成山峰），上下界吸附到 step 的整数倍：
+// 不吸附的话端点是 30.7 / 40.8 这种数，echarts 会在它旁边再标一个整刻度，两个标签叠在一起。
+export const atLeast = (span, step) => {
+  const k = 1 / step
+  const r = x => Math.round(x * 1e6) / 1e6
+  return {
+    min: v => r(Math.floor(Math.min(v.min, (v.min + v.max) / 2 - span / 2) * k) / k),
+    max: v => r(Math.ceil(Math.max(v.max, (v.min + v.max) / 2 + span / 2) * k) / k),
+  }
+}
+
+// 断档处插一行空值，让线在那里断开：否则板子离线半小时，echarts 会拿一条斜线把两头连起来，
+// 看着像是电流在这半小时里匀速变化。间隔超过 3 个桶就算断档。
+export function breakGaps(pts, step) {
+  const out = []
+  for (const x of pts) {
+    const prev = out[out.length - 1]
+    if (prev && x[0] - prev[0] > 3 * step) out.push([prev[0] + step, ...Array(x.length - 1).fill(null)])
+    out.push(x)
+  }
+  return out
+}

rack/frontend/src/components/BoardChart.vue

@@ -1,44 +1,56 @@
 <template>
-  <section class="card bc">
+  <section class="card chart-card">
     <div class="hh">
-      <h2 class="ttl">底板温度</h2>
+      <h2 class="ttl">底板曲线</h2>
       <RangePicker v-model="range" />
     </div>
     <div class="legend" aria-hidden="true">
       <span><i :style="{ background: c.s1 }" />NTC1　Hub 稳压旁（U31）</span>
       <span><i :style="{ background: c.s2 }" />NTC2　输入降压旁（U37）</span>
     </div>
-    <div ref="el" class="chart" role="img" aria-label="底板两路温度与风扇占空比曲线" />
+    <div class="legend" aria-hidden="true">
+      <span><i :style="{ background: c.s1 }" />功率：底板输入</span>
+      <span><i :style="{ background: c.s2 }" />五路主板合计（两线之差 ≈ 板上损耗）</span>
+    </div>
+    <div ref="el" class="chart" :style="{ height: h + 'px' }" role="img"
+         aria-label="底板温度、风扇占空比、输入电压、输入电流、功率五张曲线" />
     <p class="muted note">{{ note }}</p>
   </section>
 </template>
 
 <script setup>
-// 底板两路 NTC 温度（上）+ 风扇占空比（下）。温度两条线用 dataviz 参考调色板第 1/2 槽，
-// 亮暗两种面板底色都跑过 validate_palette.js（CVD ΔE ≥ 24，对比 ≥ 3:1）。
-// 图例用自绘的一行（带位置说明），曲线末端不再直接标名：两条线常常贴得很近，标签会打架。
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+// 底板五张图纵向排：两路 NTC 温度 / 风扇占空比 / 12 V 输入电压 / 输入电流 / 功率（底板输入 vs 五路主板合计）。
+// 各自独立的 Y 轴（不同量纲绝不共轴），共用时间轴、缩放和十字线联动。
+// 温度两条线用 dataviz 参考调色板第 1/2 槽，亮暗两种面板底色都跑过 validate_palette.js（CVD ΔE ≥ 24，对比 ≥ 3:1）；
+// 电压电流各只有一条线，用第 1 槽；风扇沿用次墨色；功率两条线同样按第 1/2 槽（输入 / 主板），另起一行图例。
+// 图例用自绘的一行（带位置说明），曲线末端不再直接标名：两条温度线常常贴得很近，标签会打架。
+import { onBeforeUnmount, onMounted, ref, watch, nextTick } from 'vue'
 import RangePicker from './RangePicker.vue'
 import { api } from '../api'
 import { onMessage } from '../store'
+import { railsMw } from '../util'
 import { dark } from '../theme'
-import { echarts, palette, band, stacked, chartFonts } from '../chart'
+import { echarts, palette, band, panels, atLeast, chartFonts, breakGaps } from '../chart'
 
 const props = defineProps({ board: String })
 const range = ref(3600e3)
 const el = ref(null)
 const note = ref('')
 const c = ref(palette())
+const h = ref(560)
 let chart = null
-let pts = [] // [t, t0, t0min, t0max, t1, t1min, t1max, fan, in_mv, in_ua]
+let raw = [] // [t, t0, t0min, t0max, t1, t1min, t1max, fan, in_mv, in_ua, rails_mw]
 let live = false
+let step = 1000 // 每个点代表的毫秒数，判断断档用
 
 const degC = v => (v == null ? null : v / 1000)
+const NAMES = ['温度 °C', '风扇 %', '输入电压 V', '输入电流 A', '功率 W']
 
 function render() {
   if (!chart) return // 还在等字体
   const p = palette()
   c.value = p
+  const pts = breakGaps(raw, step)
   const hasBand = pts.some(x => x[2] != null && x[2] !== x[3])
   const bandOf = (lo, hi, color) => [
     { type: 'line', xAxisIndex: 0, yAxisIndex: 0, data: pts.map(x => [x[0], degC(x[lo])]), stack: `b${lo}`,
@@ -46,22 +58,32 @@ function render() {
     { type: 'line', xAxisIndex: 0, yAxisIndex: 0, data: pts.map(x => [x[0], x[hi] == null || x[lo] == null ? null : (x[hi] - x[lo]) / 1000]),
       stack: `b${lo}`, symbol: 'none', lineStyle: { opacity: 0 }, areaStyle: { color: band(color, 0.12) }, silent: true, tooltip: { show: false } },
   ]
-  const fmtC = v => (v == null ? '—' : `${v.toFixed(1)} °C`)
+  const unit = (d, u) => v => (v == null ? '—' : `${v.toFixed(d)} ${u}`)
+  const line = (i, name, color, data, fmt, extra = {}) => ({
+    name, type: 'line', xAxisIndex: i, yAxisIndex: i, data, symbol: 'none',
+    lineStyle: { width: 2 }, color, tooltip: { valueFormatter: fmt }, ...extra,
+  })
+  const L = panels(p, [
+    // 温度至少 10 °C 的跨度；输入电压至少 0.5 V、电流至少 0.5 A：别把 ADC 的抖动放大成山峰
+    { name: NAMES[0], height: 130, fmt: v => v.toFixed(0), ...atLeast(10, 5), interval: 5 },
+    { name: NAMES[1], height: 64, fmt: v => v.toFixed(0), min: 0, max: 100, interval: 50 },
+    { name: NAMES[2], height: 90, fmt: v => v.toFixed(1), ...atLeast(0.5, 0.1) },
+    { name: NAMES[3], height: 90, fmt: v => v.toFixed(1), ...atLeast(0.5, 0.1) },
+    // 功率从 0 起：两条线之间的缝就是损耗，要看得出比例
+    { name: NAMES[4], height: 120, fmt: v => v.toFixed(0), min: 0 },
+  ])
+  if (h.value !== L.height) { h.value = L.height; nextTick(() => chart && chart.resize()) }
   chart.setOption({
-    ...stacked(p, {
-      topName: '温度 °C', bottomName: '风扇 %',
-      topFmt: v => v.toFixed(0), bottomFmt: v => v.toFixed(0), bottomMin: 0, bottomMax: 100, bottomInterval: 50,
-      // 温度按数据撑满，但至少 10 °C 的跨度：别把 0.2 °C 的抖动放大成山峰
-      topMin: v => Math.floor(Math.min(v.min, (v.min + v.max) / 2 - 5)), topMax: v => Math.ceil(Math.max(v.max, (v.min + v.max) / 2 + 5)),
-    }),
+    ...L.option,
     series: [
       ...(hasBand ? [...bandOf(2, 3, p.s1), ...bandOf(5, 6, p.s2)] : []),
-      { name: 'NTC1', type: 'line', xAxisIndex: 0, yAxisIndex: 0, data: pts.map(x => [x[0], degC(x[1])]), symbol: 'none',
-        lineStyle: { width: 2 }, color: p.s1, tooltip: { valueFormatter: fmtC } },
-      { name: 'NTC2', type: 'line', xAxisIndex: 0, yAxisIndex: 0, data: pts.map(x => [x[0], degC(x[4])]), symbol: 'none',
-        lineStyle: { width: 2 }, color: p.s2, tooltip: { valueFormatter: fmtC } },
-      { name: '风扇', type: 'line', xAxisIndex: 1, yAxisIndex: 1, step: 'end', data: pts.map(x => [x[0], x[7] == null ? null : x[7] / 10]),
-        symbol: 'none', lineStyle: { width: 2 }, color: p.ink2, tooltip: { valueFormatter: v => (v == null ? '—' : `${v.toFixed(0)} %`) } },
+      line(0, 'NTC1', p.s1, pts.map(x => [x[0], degC(x[1])]), unit(1, '°C')),
+      line(0, 'NTC2', p.s2, pts.map(x => [x[0], degC(x[4])]), unit(1, '°C')),
+      line(1, '风扇', p.ink2, pts.map(x => [x[0], x[7] == null ? null : x[7] / 10]), unit(0, '%'), { step: 'end' }),
+      line(2, '输入电压', p.s1, pts.map(x => [x[0], x[8] == null ? null : x[8] / 1000]), unit(2, 'V')),
+      line(3, '输入电流', p.s1, pts.map(x => [x[0], x[9] == null ? null : x[9] / 1e6]), unit(2, 'A')),
+      line(4, '底板输入', p.s1, pts.map(x => [x[0], x[8] == null || x[9] == null ? null : x[8] * x[9] / 1e9]), unit(2, 'W')),
+      line(4, '主板合计', p.s2, pts.map(x => [x[0], x[10] == null ? null : x[10] / 1000]), unit(2, 'W')),
     ],
   }, true)
 }
@@ -69,12 +91,13 @@ function render() {
 async function load() {
   const end = Date.now()
   try {
-    const h = await api.boardHistory(props.board, end - range.value, end)
-    pts = h.points
-    live = h.resolution === 'raw' && range.value <= 3600e3
-    note.value = pts.length === 0 ? '这段时间没有温度数据（板子离线，或者刚上线）'
-      : h.resolution === 'raw' ? `每秒一个点${live ? '，实时追加' : ''}`
-        : '每分钟一个点；浅色带是这一分钟里的最低到最高温度'
+    const r = await api.boardHistory(props.board, end - range.value, end)
+    raw = r.points
+    step = r.bucket_ms || 1000
+    live = r.resolution === 'raw' && range.value <= 3600e3
+    note.value = raw.length === 0 ? '这段时间没有底板数据（板子离线，或者刚上线）'
+      : r.resolution === 'raw' ? `每秒一个点${live ? '，实时追加' : ''}`
+        : '每分钟一个点；浅色带是这一分钟里的最低到最高温度（电压电流只存了分钟均值）'
     render()
   } catch (e) {
     note.value = '曲线没取到：' + e.message
@@ -85,9 +108,9 @@ const off = onMessage(m => {
   if (!live || m.t !== 'tele' || m.board !== props.board) return
   const s = m.status
   const t = s.temp || []
-  pts.push([m.ts, t[0], t[0], t[0], t[1], t[1], t[1], s.fan?.duty, s.in?.mv, s.in?.ua])
+  raw.push([m.ts, t[0], t[0], t[0], t[1], t[1], t[1], s.fan?.duty, s.in?.mv, s.in?.ua, railsMw(s.rails)])
   const cut = Date.now() - range.value
-  while (pts.length && pts[0][0] < cut) pts.shift()
+  while (raw.length && raw[0][0] < cut) raw.shift()
   render()
 })
 
@@ -95,7 +118,7 @@ const onResize = () => chart && chart.resize()
 let gone = false
 onMounted(async () => {
   window.addEventListener('resize', onResize)
-  await chartFonts('温度 °C', '风扇 %')
+  await chartFonts(...NAMES)
   if (gone) return
   chart = echarts.init(el.value)
   load()
@@ -104,13 +127,3 @@ onBeforeUnmount(() => { gone = true; off(); window.removeEventListener('resize',
 watch(() => [props.board, range.value], load)
 watch(dark, () => chart && render())
 </script>
-
-<style scoped>
-.hh { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
-.hh .ttl { margin: 0; }
-.legend { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; color: var(--ink-2); margin-top: 8px; }
-.legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
-.chart { height: 320px; }
-.note { margin: 4px 0 0; }
-@media (max-width: 520px) { .chart { height: 260px; } }
-</style>

rack/frontend/src/components/HistoryChart.vue

@@ -1,45 +1,58 @@
 <template>
-  <section class="card hc">
+  <section class="card chart-card">
     <div class="hh">
       <h2 class="ttl">第 {{ rail }} 路</h2>
       <RangePicker v-model="range" />
     </div>
-    <div ref="el" class="chart" role="img" :aria-label="`第 ${rail} 路电流与电压曲线`" />
+    <div class="legend" aria-hidden="true">
+      <span><i :style="{ background: c.s1 }" />电流 · 功率 · 电压</span>
+      <span class="hint">点上面的卡片切换是哪一路</span>
+    </div>
+    <div ref="el" class="chart" :style="{ height: h + 'px' }" role="img" :aria-label="`第 ${rail} 路电流、功率与电压曲线`" />
     <p class="muted note">{{ note }}</p>
   </section>
 </template>
 
 <script setup>
-// 一路的电流（上）与电压（下）。**不用双 Y 轴**：3.9 V 上的几十毫伏起伏和几百 mA 的电流
-// 放在一张图的两个刻度上，谁也看不清（dataviz 头号反模式）。上下两块共用时间轴，缩放联动。
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+// 一路的电流（上）、主板功率（中，= 电压 × 电流）与电压（下）。**不用双 Y 轴**：3.9 V 上的几十毫伏起伏和几百 mA 的电流
+// 放在一张图的两个刻度上，谁也看不清（dataviz 头号反模式）。三块共用时间轴，缩放联动。
+// 功率由每个点的均值电压 × 均值电流算出来（分钟聚合时是近似，电压几乎不动，误差可忽略）。
+import { onBeforeUnmount, onMounted, ref, watch, nextTick } from 'vue'
 import RangePicker from './RangePicker.vue'
 import { api } from '../api'
 import { onMessage } from '../store'
 import { dark } from '../theme'
-import { echarts, palette, band, stacked, chartFonts } from '../chart'
+import { echarts, palette, band, panels, chartFonts, breakGaps } from '../chart'
 
 const props = defineProps({ board: String, rail: Number })
 const range = ref(600e3)
 const el = ref(null)
 const note = ref('')
+const c = ref(palette())
+const h = ref(560)
 let chart = null
-let pts = [] // [t, mv, ua, ua_min, ua_max]
+let raw = [] // [t, mv, ua, ua_min, ua_max]
 let live = false
+let step = 1000 // 每个点代表的毫秒数，判断断档用
 
 function render() {
   if (!chart) return // 还在等字体
   const p = palette()
+  c.value = p
+  const pts = breakGaps(raw, step)
   const hasBand = pts.some(x => x[3] != null && x[3] !== x[4])
   const mA = v => (v == null ? null : v / 1000)
+  // 总高度和旁边「底板曲线」那张凑齐（两张卡并排时底边对齐；那边图例多一行，按截图实测调的）
+  const L = panels(p, [
+    { name: '电流 mA', height: 256, fmt: v => v.toFixed(0) },
+    { name: '功率 W', height: 212, fmt: v => v.toFixed(1), min: 0 },
+    // 电压固定 3.5~4.1 V（硬件可调范围 3.524~4.010 V 全在里面），每 0.3 V 一格：
+    // 不固定的话 echarts 会把 3.9 V 画在 1~6 V 正中间；自动取整的刻度在这么矮的图上会挤成一团
+    { name: '电压 V', height: 140, fmt: v => v.toFixed(2), min: 3.5, max: 4.1, interval: 0.3 },
+  ])
+  if (h.value !== L.height) { h.value = L.height; nextTick(() => chart && chart.resize()) }
   chart.setOption({
-    ...stacked(p, {
-      topName: '电流 mA', bottomName: '电压 V',
-      topFmt: v => v.toFixed(0), bottomFmt: v => v.toFixed(2),
-      // 电压固定 3.5~4.1 V（硬件可调范围 3.524~4.010 V 全在里面），每 0.3 V 一格：
-      // 不固定的话 echarts 会把 3.9 V 画在 1~6 V 正中间；自动取整的刻度在这么矮的图上会挤成一团
-      bottomMin: 3.5, bottomMax: 4.1, bottomInterval: 0.3,
-    }),
+    ...L.option,
     series: [
       ...(hasBand ? [
         { type: 'line', xAxisIndex: 0, yAxisIndex: 0, data: pts.map(x => [x[0], mA(x[3])]), stack: 'b', symbol: 'none',
@@ -49,7 +62,9 @@ function render() {
       ] : []),
       { name: '电流', type: 'line', xAxisIndex: 0, yAxisIndex: 0, data: pts.map(x => [x[0], mA(x[2])]), symbol: 'none',
         lineStyle: { width: 2 }, color: p.s1, tooltip: { valueFormatter: v => (v == null ? '—' : `${v.toFixed(0)} mA`) } },
-      { name: '电压', type: 'line', xAxisIndex: 1, yAxisIndex: 1, data: pts.map(x => [x[0], x[1] == null ? null : x[1] / 1000]),
+      { name: '功率', type: 'line', xAxisIndex: 1, yAxisIndex: 1, data: pts.map(x => [x[0], x[1] == null || x[2] == null ? null : x[1] * x[2] / 1e9]),
+        symbol: 'none', lineStyle: { width: 2 }, color: p.s1, tooltip: { valueFormatter: v => (v == null ? '—' : `${v.toFixed(2)} W`) } },
+      { name: '电压', type: 'line', xAxisIndex: 2, yAxisIndex: 2, data: pts.map(x => [x[0], x[1] == null ? null : x[1] / 1000]),
         symbol: 'none', lineStyle: { width: 2 }, color: p.s1, tooltip: { valueFormatter: v => (v == null ? '—' : `${v.toFixed(3)} V`) } },
     ],
   }, true)
@@ -59,7 +74,8 @@ async function load() {
   const end = Date.now()
   try {
     const h = await api.history(props.board, props.rail, end - range.value, end)
-    pts = h.points
+    raw = h.points
+    step = h.bucket_ms || 1000
     live = h.resolution === 'raw' && range.value <= 3600e3
     note.value = h.resolution === 'raw'
       ? `每秒一个点${live ? '，实时追加' : ''}`
@@ -74,9 +90,9 @@ const off = onMessage(m => {
   if (!live || m.t !== 'tele' || m.board !== props.board) return
   const r = m.status.rails?.[props.rail - 1]
   if (!r) return
-  pts.push([m.ts, r.mv, r.ua, r.ua, r.ua])
+  raw.push([m.ts, r.mv, r.ua, r.ua, r.ua])
   const cut = Date.now() - range.value
-  while (pts.length && pts[0][0] < cut) pts.shift()
+  while (raw.length && raw[0][0] < cut) raw.shift()
   render()
 })
 
@@ -84,7 +100,7 @@ const onResize = () => chart && chart.resize()
 let gone = false
 onMounted(async () => {
   window.addEventListener('resize', onResize)
-  await chartFonts('电流 mA', '电压 V')
+  await chartFonts('电流 mA', '功率 W', '电压 V')
   if (gone) return
   chart = echarts.init(el.value)
   load()
@@ -93,11 +109,3 @@ onBeforeUnmount(() => { gone = true; off(); window.removeEventListener('resize',
 watch(() => [props.board, props.rail, range.value], load)
 watch(dark, () => chart && render())
 </script>
-
-<style scoped>
-.hh { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
-.hh .ttl { margin: 0; }
-.chart { height: 340px; margin-top: 6px; }
-.note { margin: 4px 0 0; }
-@media (max-width: 520px) { .chart { height: 280px; } }
-</style>

rack/frontend/src/components/RailCard.vue

@@ -10,7 +10,7 @@
     <el-input v-model="label" size="small" class="label" placeholder="手机编号" @change="saveLabel" @click.stop />
 
     <div class="nums" v-if="r?.pr">
-      <div><b class="readout">{{ mA(r.ua) }}</b><small>mA</small></div>
+      <div><b class="readout">{{ mA(r.ua) }}</b><small>mA</small><div class="muted set">功率 <span class="readout">{{ W(r.mv, r.ua) }}</span> W</div></div>
       <div><b class="readout">{{ V(r.mv) }}</b><small>V</small><div class="muted set">设定 {{ V(r.set) }}</div></div>
     </div>
     <div class="flags" v-if="r?.pr">
@@ -62,7 +62,7 @@ import { computed, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowDown } from '@element-plus/icons-vue'
 import { api, rspText } from '../api'
-import { mA, V, railHealth, LEVEL_COLOR, RECOVERY_ZH } from '../util'
+import { mA, V, W, railHealth, LEVEL_COLOR, RECOVERY_ZH } from '../util'
 
 const props = defineProps({ board: Object, rail: Number, selected: Boolean, recState: String })
 defineEmits(['select'])

rack/frontend/src/components/RangePicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-radio-group :model-value="modelValue" size="small" @update:model-value="v => $emit('update:modelValue', v)">
+  <el-radio-group class="rp" :model-value="modelValue" size="small" @update:model-value="v => $emit('update:modelValue', v)">
     <el-radio-button v-for="o in RANGES" :key="o.v" :value="o.v">{{ o.t }}</el-radio-button>
   </el-radio-group>
 </template>
@@ -13,3 +13,9 @@ const RANGES = [
   { v: 86400e3, t: '1 天' }, { v: 7 * 86400e3, t: '7 天' },
 ]
 </script>
+
+<style scoped>
+/* 手机上五个按钮放不下：不换行，横向滑 */
+.rp { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 1px; }
+.rp :deep(.el-radio-button__inner) { font-variant-numeric: tabular-nums; }
+</style>

rack/frontend/src/pages/Board.vue

@@ -2,34 +2,40 @@
   <div v-if="!b" class="card"><el-empty description="没有这块板子，或者还没收到它的数据" /></div>
   <div v-else class="bd">
     <section class="card head">
-      <div class="names">
-        <span :class="['led', !b.online || b.stale ? 'lost' : 'ok']" />
-        <el-input v-model="name" class="ed name" placeholder="给这块板起个名字" @change="saveMeta" />
-        <el-input v-model="location" class="ed" placeholder="位置，比如 机架 A 第 3 层" @change="saveMeta" />
+      <div class="idrow">
+        <span :class="['led', 'big', !b.online || b.stale ? 'lost' : 'ok']" />
+        <div class="ident">
+          <el-input v-model="name" class="ed name" placeholder="给这块板起个名字" @change="saveMeta" />
+          <el-input v-model="location" class="ed loc" size="small" placeholder="位置，比如 机架 A 第 3 层" @change="saveMeta" />
+        </div>
+        <dl class="meta">
+          <div><dt>状态</dt><dd :class="{ bad: !b.online || b.stale }">{{ !b.online || b.stale ? `通信中断，最后数据 ${ago(b.last_tele)}` : '在线' }}</dd></div>
+          <div><dt>ID</dt><dd class="readout">{{ b.id }}</dd></div>
+          <div><dt>固件</dt><dd><span class="readout">{{ b.status?.fw || b.fw }}</span> <OtaState :status="b.status" quiet /> <router-link to="/firmware">推固件</router-link></dd></div>
+          <div><dt>IP</dt><dd class="readout">{{ b.ip || '—' }}</dd></div>
+        </dl>
       </div>
-      <dl class="meta">
-        <div><dt>状态</dt><dd :class="{ bad: !b.online || b.stale }">{{ !b.online || b.stale ? `通信中断，最后数据 ${ago(b.last_tele)}` : '在线' }}</dd></div>
-        <div><dt>ID</dt><dd class="readout">{{ b.id }}</dd></div>
-        <div><dt>固件</dt><dd>{{ b.status?.fw || b.fw }} <OtaState :status="b.status" quiet /> <router-link to="/firmware">推固件</router-link></dd></div>
-        <div><dt>IP</dt><dd class="readout">{{ b.ip || '—' }}</dd></div>
-      </dl>
       <div class="gauges" v-if="b.status">
-        <div class="g"><span class="gk">输入</span>
-          <span class="gv readout">{{ V(b.status.in?.mv) }}<small>V</small></span>
-          <span class="gv readout">{{ mA(b.status.in?.ua) }}<small>mA</small></span></div>
-        <div class="g"><span class="gk">温度</span>
-          <span v-for="(t, i) in b.status.temp || []" :key="i" class="gv readout">{{ t == null ? '—' : C(t) }}<small>°C</small></span></div>
-        <div class="g"><span class="gk">风扇</span>
-          <span class="gv readout">{{ (b.status.fan?.duty ?? 0) / 10 }}<small>%</small></span>
-          <span v-for="(r, i) in b.status.fan?.rpm || []" :key="i" class="gv readout" :class="{ bad: b.status.fan?.stall?.[i] }">{{ r ?? '—' }}<small>rpm</small></span>
-          <el-select v-model="fanFloor" size="small" class="floor" aria-label="风扇占空比下限" @change="setFan">
-            <el-option :value="0" label="自动" />
-            <el-option v-for="d in [500, 700, 850, 1000]" :key="d" :value="d" :label="`不低于 ${d / 10}%`" />
-          </el-select></div>
-        <div class="g"><span class="gk">巡检</span>
-          <span class="gv readout">{{ b.status.safety?.cycles }}<small>圈</small></span>
-          <span class="gv readout" :class="{ bad: b.status.safety?.skipped }">{{ b.status.safety?.skipped }}<small>跳过</small></span>
-          <span class="gv readout" :class="{ bad: b.status.safety?.i2c_err }">{{ b.status.safety?.i2c_err }}<small>I²C 错</small></span></div>
+        <div class="g"><div class="gh"><span class="gk">输入</span></div>
+          <div class="gvs"><span class="gv readout">{{ V(b.status.in?.mv) }}<small>V</small></span>
+            <span class="gv readout">{{ mA(b.status.in?.ua) }}<small>mA</small></span></div></div>
+        <div class="g"><div class="gh"><span class="gk">功率</span><span class="gs">底板输入 · 主板合计 · 损耗</span></div>
+          <div class="gvs"><span class="gv readout">{{ W(b.status.in?.mv, b.status.in?.ua) }}<small>W</small></span>
+            <span class="gv sm readout">{{ fmtW(pw.rails) }}<small>W 主板</small></span>
+            <span class="gv sm readout">{{ fmtW(pw.loss) }}<small>W 损耗</small></span></div></div>
+        <div class="g"><div class="gh"><span class="gk">温度</span><span class="gs">NTC1 · NTC2</span></div>
+          <div class="gvs"><span v-for="(t, i) in b.status.temp || []" :key="i" class="gv readout">{{ t == null ? '—' : C(t) }}<small>°C</small></span></div></div>
+        <div class="g"><div class="gh"><span class="gk">风扇</span>
+            <el-select v-model="fanFloor" size="small" class="floor" aria-label="风扇占空比下限" @change="setFan">
+              <el-option :value="0" label="自动" />
+              <el-option v-for="d in [500, 700, 850, 1000]" :key="d" :value="d" :label="`不低于 ${d / 10}%`" />
+            </el-select></div>
+          <div class="gvs"><span class="gv readout">{{ (b.status.fan?.duty ?? 0) / 10 }}<small>%</small></span>
+            <span v-for="(r, i) in b.status.fan?.rpm || []" :key="i" class="gv sm readout" :class="{ bad: b.status.fan?.stall?.[i] }">{{ r ?? '—' }}<small>rpm</small></span></div></div>
+        <div class="g"><div class="gh"><span class="gk">巡检</span></div>
+          <div class="gvs"><span class="gv readout">{{ b.status.safety?.cycles }}<small>圈</small></span>
+            <span class="gv sm readout" :class="{ bad: b.status.safety?.skipped }">{{ b.status.safety?.skipped }}<small>跳过</small></span>
+            <span class="gv sm readout" :class="{ bad: b.status.safety?.i2c_err }">{{ b.status.safety?.i2c_err }}<small>I²C 错</small></span></div></div>
       </div>
     </section>
 
@@ -75,10 +81,18 @@ import BoardChart from '../components/BoardChart.vue'
 import OtaState from '../components/OtaState.vue'
 import { api, rspText } from '../api'
 import { state, onMessage } from '../store'
-import { mA, V, C, ago, fmtTime } from '../util'
+import { mA, V, W, C, ago, fmtTime, mW, railsMw } from '../util'
 
 const props = defineProps({ id: String })
 const b = computed(() => state.boards[props.id])
+// 功率（mW）：五路主板合计，和底板输入之差算作板上损耗（DC-DC 效率 + 走线 + 自身耗电）
+const pw = computed(() => {
+  const s = b.value?.status
+  const input = mW(s?.in?.mv, s?.in?.ua)
+  const rails = railsMw(s?.rails)
+  return { rails, loss: input == null || rails == null ? null : input - rails }
+})
+const fmtW = v => (v == null ? '—' : (v / 1000).toFixed(2))
 const sel = ref(1)
 const name = ref('')
 const location = ref('')
@@ -126,31 +140,45 @@ watch(() => props.id, refresh)
 
 <style scoped>
 .bd { display: flex; flex-direction: column; gap: 16px; }
-.head { display: flex; flex-direction: column; gap: 12px; }
-.names { display: grid; grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px; align-items: center; }
+.head { display: flex; flex-direction: column; gap: 14px; }
+.idrow { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
+.led.big { width: 10px; height: 10px; margin-top: 13px; }
+.ident { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; }
 /* 就地编辑：平时像标题，点进去才像输入框 */
 .ed :deep(.el-input__wrapper) { box-shadow: none; background: transparent; padding-left: 4px; }
 .ed :deep(.el-input__wrapper:hover), .ed :deep(.el-input__wrapper.is-focus) { box-shadow: 0 0 0 1px var(--line) inset; background: var(--bay); }
-.name :deep(.el-input__inner) { font-size: 18px; font-weight: 700; color: var(--ink); }
-.meta { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; font-size: 13px; }
-.meta div { display: flex; gap: 8px; align-items: center; }
-.meta dt { color: var(--muted); }
+.name :deep(.el-input__inner) { font-size: 20px; font-weight: 700; color: var(--ink); height: 34px; }
+.loc :deep(.el-input__inner) { color: var(--ink-2); font-size: 13px; }
+.meta { display: grid; grid-template-columns: auto auto; gap: 4px 24px; margin: 4px 0 0; font-size: 13px; }
+.meta div { display: flex; gap: 10px; align-items: center; min-width: 0; }
+.meta dt { color: var(--muted); width: 28px; flex-shrink: 0; }
 .meta dd { margin: 0; color: var(--ink-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
-.gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 8px;
-  border-top: 1px solid var(--line-soft); padding-top: 12px; }
-.g { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
-.gk { color: var(--muted); font-size: 13px; width: 32px; flex-shrink: 0; }
-.gv { font-size: 20px; color: var(--ink); }
+/* 五个仪表格：凹进面板的小槽，标签在上、读数在下 */
+.gauges { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
+.g { background: var(--bay); border: 1px solid var(--bay-edge); border-radius: var(--r-bay); padding: 10px 14px 12px;
+  display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+.gh { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
+.gk { color: var(--muted); font-size: 13px; }
+.gs { color: var(--muted); font-size: 11px; }
+.gvs { display: flex; gap: 6px 18px; align-items: baseline; flex-wrap: wrap; }
+.gv { font-size: 24px; color: var(--ink); line-height: 1.1; white-space: nowrap; }
+.gv.sm { font-size: 17px; color: var(--ink-2); }
+.gv.bad { color: var(--st-bad); }
 .gv small { font-size: 11px; color: var(--muted); margin-left: 3px; font-family: var(--ui); }
-.floor { width: 130px; align-self: center; }
+.floor { width: 120px; }
 .rails { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
-.charts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
+.charts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
 .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
-@media (max-width: 1200px) { .rails { grid-template-columns: repeat(3, minmax(0, 1fr)); } .charts { grid-template-columns: 1fr; } }
+@media (max-width: 1500px) { .gauges { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
+@media (max-width: 1200px) { .rails { grid-template-columns: repeat(3, minmax(0, 1fr)); } .charts { grid-template-columns: 1fr; }
+  .gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
 @media (max-width: 800px) { .rails { grid-template-columns: 1fr 1fr; } .two { grid-template-columns: 1fr; } }
 @media (max-width: 520px) {
   .rails { grid-template-columns: 1fr; }
-  .names { grid-template-columns: auto 1fr; }
-  .names .ed:not(.name) { grid-column: 1 / -1; }
+  .gauges { gap: 8px; }
+  .g { padding: 8px 10px 10px; }
+  .gv { font-size: 20px; }
+  .gv.sm { font-size: 15px; }
+  .gvs { column-gap: 12px; }
 }
 </style>

rack/frontend/src/pages/Overview.vue

@@ -35,6 +35,7 @@
               <div class="bl" :title="phone(b, i).label">{{ phone(b, i).label || '　' }}</div>
               <template v-if="rail(b, i)?.pr">
                 <div class="bv readout">{{ mA(rail(b, i)?.ua) }}<small>mA</small></div>
+                <div class="bw readout">{{ W(rail(b, i)?.mv, rail(b, i)?.ua) }}<small>W</small></div>
                 <Spark :board="b.id" :rail="i" :color="loud(b, i) ? LEVEL_COLOR[health(b, i).level] : 'var(--ink-2)'" />
               </template>
               <div class="bs" :style="{ color: loud(b, i) ? LEVEL_COLOR[health(b, i).level] : 'var(--muted)' }">{{ health(b, i).text }}</div>
@@ -44,6 +45,8 @@
           <footer class="pf" v-if="b.status">
             <div><span class="k">输入</span><span class="readout">{{ V(b.status.in?.mv) }}</span> V
               <span class="readout">{{ A(b.status.in?.ua) }}</span> A</div>
+            <div><span class="k">底板功率</span><span class="readout">{{ W(b.status.in?.mv, b.status.in?.ua) }}</span> W
+              <span class="k sub">主板</span><span class="readout">{{ railsW(b) }}</span> W</div>
             <div><span class="k">温度</span>
               <span v-for="(t, k) in b.status.temp || []" :key="k" class="readout t">{{ t == null ? '—' : C(t) }}</span> °C</div>
             <div><span class="k">风扇</span><span class="readout">{{ (b.status.fan?.duty ?? 0) / 10 }}</span> %
@@ -62,7 +65,7 @@
           <time class="muted readout">{{ fmtTime(f.ts) }}</time>
           <span class="who">{{ boardName(f.board) }}</span>
           <template v-if="f.kind === 'event'">
-            <span :class="{ bad: SEVERE.has(f.ev[3]) }">{{ f.ev[2] ? `#${f.ev[2]} ` : '' }}{{ evName(f.ev[3]) }}</span>
+            <span :class="{ bad: isSevere(f.ev) }">{{ f.ev[2] ? `#${f.ev[2]} ` : '' }}{{ evName(f.ev[3]) }}</span>
           </template>
           <template v-else-if="f.kind === 'audit'">
             <span>{{ f.row.user }} 对 #{{ f.row.rail ?? '' }} 执行 {{ f.row.request.cmd }}：{{ rspText(f.row.response) }}</span>
@@ -82,16 +85,19 @@ import { Refresh } from '@element-plus/icons-vue'
 import Spark from '../components/Spark.vue'
 import { state } from '../store'
 import { rspText } from '../api'
-import { mA, V, C, ago, fmtTime, railHealth, LEVEL_COLOR, RECOVERY_ZH, REASON_ZH } from '../util'
+import { mA, V, W, C, ago, fmtTime, railsMw, railHealth, LEVEL_COLOR, RECOVERY_ZH, REASON_ZH } from '../util'
 
 // 与 backend/prrack/protocol.py 的 EVENT_TYPES / EVENT_SEVERE 同一张表（数字来自固件 evlog.h）
 const EV = ['', '板子上电', '事件丢失', '过压关路', '欠压关路', '反灌断 VBUS', '顶高断 VBUS', 'eFuse 故障',
   'PG 变化', 'I²C 失联', '过温降载', '风扇停转', '重启序列', '命令被拒', 'mux 失联全断', '刀片不在位', 'PD 限功率',
-  '上电等不到 PG', '固件升级']
+  '上电等不到 PG', '固件升级', '开机重按']
 const SEVERE = new Set([3, 4, 5, 6, 7, 9, 11, 14, 17])
+// 开机重按（19）只有 arg bit7「最终没开起来」才算严重
+const isSevere = ev => SEVERE.has(ev[3]) || (ev[3] === 19 && (ev[4] & 0x80) !== 0)
 const evName = t => EV[t] || `事件 ${t}`
 
 const A = ua => (ua == null ? '—' : (ua / 1e6).toFixed(2))
+const railsW = b => { const s = railsMw(b.status?.rails); return s == null ? '—' : (s / 1000).toFixed(2) }
 const boards = computed(() => Object.values(state.boards).sort((a, b) =>
   (a.location + a.name + a.id).localeCompare(b.location + b.name + b.id)))
 const rail = (b, i) => b.status?.rails?.[i - 1]
@@ -152,12 +158,15 @@ const tally = computed(() => {
 .bl { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .bv { font-size: 24px; line-height: 1.1; color: var(--ink); margin-top: 2px; }
 .bv small { font-size: 11px; color: var(--muted); margin-left: 2px; font-family: var(--ui); }
+.bw { font-size: 13px; color: var(--ink-2); line-height: 1.2; }
+.bw small { font-size: 10px; color: var(--muted); margin-left: 2px; font-family: var(--ui); }
 .bs { font-size: 12px; font-weight: 600; margin-top: auto; }
-.bay.off .bv, .bay.lost .bv { color: var(--muted); }
+.bay.off .bv, .bay.lost .bv, .bay.off .bw, .bay.lost .bw { color: var(--muted); }
 
 .pf { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; color: var(--ink-2);
   border-top: 1px solid var(--line-soft); padding-top: 10px; }
 .pf .k { color: var(--muted); margin-right: 6px; }
+.pf .k.sub { margin-left: 6px; }
 .pf .readout { font-size: 15px; color: var(--ink); }
 .pf .t + .t::before { content: '/'; margin: 0 4px; color: var(--muted); }
 

rack/frontend/src/theme.css

@@ -130,3 +130,12 @@ a { color: var(--accent); }
 .el-table th.el-table__cell { font-weight: 500; }
 code { font-size: 12px; background: var(--bay); border: 1px solid var(--line-soft); padding: 0 4px; border-radius: 4px;
   word-break: break-all; }
+
+/* 曲线卡：标题 + 时间范围一行，下面一行小图例，再下面是图，最底下一行灰字说明 */
+.chart-card .hh { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
+.chart-card .hh .ttl { margin: 0; }
+.chart-card .legend { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12px; color: var(--ink-2);
+  margin-top: 10px; min-height: 20px; align-items: center; }
+.chart-card .legend .hint { color: var(--muted); }
+.chart-card .legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
+.chart-card .note { margin: 2px 0 0; font-size: 12px; }

rack/frontend/src/util.js

@@ -3,6 +3,15 @@
 export const mA = ua => (ua == null ? '—' : (ua / 1000).toFixed(ua >= 100000 || ua <= -100000 ? 0 : 1))
 export const V = mv => (mv == null ? '—' : (mv / 1000).toFixed(3))
 export const C = mc => (mc == null ? '—' : (mc / 1000).toFixed(1))
+// 功率 = 电压 × 电流：mV × µA = nW，显示成 W（两位小数，手机主板一般零点几到十几瓦）
+export const mW = (mv, ua) => (mv == null || ua == null ? null : mv * ua / 1e6)
+export const W = (mv, ua) => (mv == null || ua == null ? '—' : (mv * ua / 1e9).toFixed(2))
+// 五路主板合计功率（mW）：只算读得到的路；一路都读不到回 null
+export function railsMw(rails) {
+  let s = null
+  for (const r of rails || []) if (r?.mv != null && r?.ua != null) s = (s ?? 0) + r.mv * r.ua / 1e6
+  return s
+}
 
 export function ago(ts) {
   if (!ts) return '从未'