feat: 大屏真数据面板、时序曲线与告警/天气体验

接入设备台账与时序落库驱动左右面板历史曲线，修复机组遥测误标写导致空值、三维刷新闪变与视点条丢失；告警改右上角顶层下拉，天气改拉澳门天文台。

Co-authored-by: Cursor <cursoragent@cursor.com>

docker-compose.yml

 services:
 services:
+  # 时序：默认 postgres；可选改 image 为 timescale/timescaledb:latest-pg16（需重建卷）
   db:
   db:
-    image: postgres:16-alpine
+    image: ${POSTGRES_IMAGE:-postgres:16-alpine}
     container_name: jh-lab-db
     container_name: jh-lab-db
     restart: unless-stopped
     restart: unless-stopped
     environment:
     environment:

package-lock.json

@@ -1976,6 +1976,22 @@
         "safe-buffer": "^5.0.1"
         "safe-buffer": "^5.0.1"
       }
       }
     },
     },
+    "node_modules/echarts": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-6.1.0.tgz",
+      "integrity": "sha512-q0yaFPggC9FUdsWH4blavRWFmxdrIodbkoKNAjJudAI6CA9gNPxHtV2RcZNEepZVlk4yvBYkOkbk6HIVpIyHZA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "6.1.0"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
+    },
     "node_modules/ee-first": {
     "node_modules/ee-first": {
       "version": "1.1.1",
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -4108,6 +4124,16 @@
         }
         }
       }
       }
     },
     },
+    "node_modules/vue-echarts": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-8.3.2.tgz",
+      "integrity": "sha512-FbJD49OZZZv1I8aclHQ+gcQxU+Y9nNWQMuod1sewE7/YjGQUJAaeVcf6WrSfQDBRPke+WoVsUtdRFIqPOsRrnw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "echarts": "^6.0.0",
+        "vue": "^3.3.0"
+      }
+    },
     "node_modules/vue-router": {
     "node_modules/vue-router": {
       "version": "4.6.4",
       "version": "4.6.4",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz",
@@ -4237,6 +4263,21 @@
         "node": ">=12"
         "node": ">=12"
       }
       }
     },
     },
+    "node_modules/zrender": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-6.1.0.tgz",
+      "integrity": "sha512-oEGMDB6pOP2S6OwRR4PdVv610zrjnA3Bh+JnSG12fYJlBKjtNAoEb5fSUoCOOINlH96I2fU38/A2UpRKs67xYQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
+    },
     "server": {
     "server": {
       "version": "0.1.0",
       "version": "0.1.0",
       "dependencies": {
       "dependencies": {
@@ -4275,8 +4316,10 @@
     "web": {
     "web": {
       "version": "0.1.0",
       "version": "0.1.0",
       "dependencies": {
       "dependencies": {
+        "echarts": "^6.1.0",
         "pinia": "^3.0.1",
         "pinia": "^3.0.1",
         "vue": "^3.5.42",
         "vue": "^3.5.42",
+        "vue-echarts": "^8.3.2",
         "vue-router": "^4.5.0"
         "vue-router": "^4.5.0"
       },
       },
       "devDependencies": {
       "devDependencies": {

server/src/config.ts

@@ -11,6 +11,11 @@ export const config = {
   databaseUrl:
   databaseUrl:
     process.env.DATABASE_URL ||
     process.env.DATABASE_URL ||
     'postgres://jh_lab:jh_lab_pass@127.0.0.1:5432/jh_lab',
     'postgres://jh_lab:jh_lab_pass@127.0.0.1:5432/jh_lab',
+  /**
+   * 网关模式下，对超过该毫秒未更新的点位继续用模拟值补发，保证大屏/时序不断流。
+   * 0 = 关闭补发。
+   */
+  mockFillStaleMs: Number(process.env.MOCK_FILL_STALE_MS || 60_000),
   /** 采集明细保留天数，0 表示不清理 */
   /** 采集明细保留天数，0 表示不清理 */
   collectRetentionDays: Number(process.env.COLLECT_RETENTION_DAYS || 90),
   collectRetentionDays: Number(process.env.COLLECT_RETENTION_DAYS || 90),
   /** 单一 Windows 协议网关 */
   /** 单一 Windows 协议网关 */

server/src/db/collect.ts

 import type { RealtimeSnapshot } from '../types.js'
 import type { RealtimeSnapshot } from '../types.js'
 import { config } from '../config.js'
 import { config } from '../config.js'
+import { listDevices } from '../devices/store.js'
 import { pool, query } from './pool.js'
 import { pool, query } from './pool.js'
 import { isPgEnabled } from './state.js'
 import { isPgEnabled } from './state.js'
+import {
+  persistSnapshotTimeseries,
+  pruneTimeseriesData,
+  queryTsSeries,
+} from './timeseries.js'
 
 
-/** 将一次采集快照完整入库（整包 + 分项），供本地追溯与计费汇总 */
+/** 整包快照降频落库（审计用）；明细走时序窄表 */
+function snapshotMinIntervalMs() {
+  return Number(process.env.COLLECT_SNAPSHOT_INTERVAL_MS || 15_000)
+}
+let lastSnapshotWriteMs = 0
+
+/** 将一次采集快照入库：时序明细 + 降频整包 */
 export async function persistSnapshot(snap: RealtimeSnapshot) {
 export async function persistSnapshot(snap: RealtimeSnapshot) {
   if (!isPgEnabled()) return
   if (!isPgEnabled()) return
-  const ts = new Date(snap.ts || Date.now())
+
+  // 1) 窄表时序（主路径，供大屏曲线高效读取）
+  try {
+    await persistSnapshotTimeseries(snap)
+  } catch (e) {
+    console.error('[db] persist timeseries failed', e)
+  }
+
+  const now = Date.now()
+  if (now - lastSnapshotWriteMs < snapshotMinIntervalMs()) return
+  lastSnapshotWriteMs = now
+
+  const ts = new Date(snap.ts || now)
   const client = await pool.connect()
   const client = await pool.connect()
   try {
   try {
     await client.query('BEGIN')
     await client.query('BEGIN')
-    await client.query(
-      `INSERT INTO collect_snapshots (ts, payload) VALUES ($1, $2::jsonb)`,
-      [ts, JSON.stringify(snap)],
-    )
+    await client.query(`INSERT INTO collect_snapshots (ts, payload) VALUES ($1, $2::jsonb)`, [
+      ts,
+      JSON.stringify(snap),
+    ])
 
 
+    // 兼容旧查询：保留少量 JSON 分项（同样降频）
     const rows: [Date, string, string | null, string][] = []
     const rows: [Date, string, string | null, string][] = []
-    for (const r of snap.rooms) {
-      rows.push([ts, 'room', r.id, JSON.stringify(r)])
-    }
-    for (const v of snap.vav) {
-      rows.push([ts, 'vav', v.id, JSON.stringify(v)])
-    }
-    for (const f of snap.fridges) {
-      rows.push([ts, 'fridge', f.id, JSON.stringify(f)])
-    }
+    for (const r of snap.rooms) rows.push([ts, 'room', r.id, JSON.stringify(r)])
+    for (const v of snap.vav) rows.push([ts, 'vav', v.id, JSON.stringify(v)])
+    for (const f of snap.fridges) rows.push([ts, 'fridge', f.id, JSON.stringify(f)])
     rows.push([ts, 'hvac', 'PAU201', JSON.stringify(snap.hvac)])
     rows.push([ts, 'hvac', 'PAU201', JSON.stringify(snap.hvac)])
     rows.push([ts, 'metering', 'lab', JSON.stringify(snap.metering)])
     rows.push([ts, 'metering', 'lab', JSON.stringify(snap.metering)])
-    rows.push([ts, 'access', 'system', JSON.stringify(snap.access)])
-    rows.push([ts, 'online', 'gateway', JSON.stringify(snap.online)])
 
 
     if (rows.length) {
     if (rows.length) {
       const values: unknown[] = []
       const values: unknown[] = []
@@ -45,7 +62,6 @@ export async function persistSnapshot(snap: RealtimeSnapshot) {
       )
       )
     }
     }
 
 
-    // 当日计量累计写入计费日表（取最新快照计量值作为日用量参考）
     const day = ts.toISOString().slice(0, 10)
     const day = ts.toISOString().slice(0, 10)
     const power = snap.metering.powerKwh
     const power = snap.metering.powerKwh
     const water = snap.metering.waterM3
     const water = snap.metering.waterM3
@@ -88,11 +104,91 @@ export async function persistWriteLog(action: string, detail: Record<string, unk
   )
   )
 }
 }
 
 
-/** 清理过期采集数据，默认保留 90 天 */
+export type FridgeTempPoint = { t: number; temp: number }
+export type FridgeTempSeries = {
+  id: string
+  name: string
+  points: FridgeTempPoint[]
+}
+
+/**
+ * 近 N 小时冰箱温度曲线。
+ * 优先 ts_rollups 预聚合；旧 collect_samples 作回退。
+ */
+export async function queryFridgeTempSeries(opts?: {
+  hours?: number
+  bucketMinutes?: number
+}): Promise<FridgeTempSeries[]> {
+  if (!isPgEnabled()) return []
+  const hours = Math.min(168, Math.max(1, opts?.hours ?? 24))
+  const bucketMinutes = Math.min(60, Math.max(5, opts?.bucketMinutes ?? 15))
+
+  try {
+    const series = await queryTsSeries({
+      source: 'fridge',
+      metric: 'temp',
+      hours,
+      // 24h 内用 1min 桶，曲线更密
+      bucketMinutes: hours <= 24 ? Math.min(bucketMinutes, 1) || 1 : bucketMinutes,
+    })
+    if (series.length) {
+      const fridges = await listDevices({ category: 'fridge' })
+      const nameById = new Map(fridges.map((d) => [d.id, d.name]))
+      return series.map((s) => ({
+        id: s.id,
+        name: nameById.get(s.id) || s.name || s.id,
+        points: s.points.map((p) => ({ t: p.t, temp: p.v })),
+      }))
+    }
+  } catch (e) {
+    console.warn('[db] queryTsSeries fridge failed, fallback collect_samples', e)
+  }
+
+  const { rows } = await query<{
+    device_id: string
+    name: string | null
+    bucket: Date
+    temp: string | number
+  }>(
+    `SELECT
+       device_id,
+       MAX(payload->>'name') AS name,
+       to_timestamp(floor(extract(epoch FROM ts) / ($2 * 60)) * ($2 * 60)) AS bucket,
+       AVG(NULLIF(payload->>'temp', '')::float) AS temp
+     FROM collect_samples
+     WHERE source = 'fridge'
+       AND device_id IS NOT NULL
+       AND ts >= NOW() - ($1::text || ' hours')::interval
+       AND payload ? 'temp'
+     GROUP BY device_id, bucket
+     HAVING AVG(NULLIF(payload->>'temp', '')::float) IS NOT NULL
+     ORDER BY device_id, bucket`,
+    [String(hours), bucketMinutes],
+  )
+
+  const map = new Map<string, FridgeTempSeries>()
+  for (const r of rows) {
+    const id = String(r.device_id)
+    let series = map.get(id)
+    if (!series) {
+      series = { id, name: r.name || id, points: [] }
+      map.set(id, series)
+    }
+    if (r.name) series.name = r.name
+    const temp = Number(r.temp)
+    if (!Number.isFinite(temp)) continue
+    const t = r.bucket instanceof Date ? r.bucket.getTime() : new Date(r.bucket).getTime()
+    series.points.push({ t, temp })
+  }
+  return [...map.values()]
+}
+
+/** 清理过期采集数据 */
 export async function pruneCollectData() {
 export async function pruneCollectData() {
   if (!isPgEnabled()) return
   if (!isPgEnabled()) return
   const days = config.collectRetentionDays
   const days = config.collectRetentionDays
   if (days <= 0) return
   if (days <= 0) return
+  await pruneTimeseriesData()
   await query(`DELETE FROM collect_samples WHERE ts < NOW() - ($1::text || ' days')::interval`, [
   await query(`DELETE FROM collect_samples WHERE ts < NOW() - ($1::text || ' days')::interval`, [
     String(days),
     String(days),
   ])
   ])

server/src/db/migrate.ts

 import { pool, query } from './pool.js'
 import { pool, query } from './pool.js'
+import { ensureTimeseriesSchema } from './timeseries.js'
 
 
 const SQL = `
 const SQL = `
 CREATE TABLE IF NOT EXISTS users (
 CREATE TABLE IF NOT EXISTS users (
@@ -178,9 +179,23 @@ ALTER TABLE device_points ADD COLUMN IF NOT EXISTS alarm_low DOUBLE PRECISION;
 ALTER TABLE device_points ADD COLUMN IF NOT EXISTS alarm_high DOUBLE PRECISION;
 ALTER TABLE device_points ADD COLUMN IF NOT EXISTS alarm_high DOUBLE PRECISION;
 `
 `
 
 
+/** 纠正房间/冰箱传感器被 CSV 误标为写点的问题 */
+const FIX_SENSOR_RW = `
+UPDATE device_points
+SET rw = 'r', updated_at = NOW()
+WHERE rw = 'w'
+  AND (
+    name ~ '实时温度|实时湿度|实时压差|冰箱温度|冰箱湿度'
+    OR item_id ~ '实时温度|实时湿度|实时压差|冰箱温度|冰箱湿度'
+  )
+  AND name !~ '设定|上限|下限|高限|低限|目标|地址'
+`
+
 export async function migrate() {
 export async function migrate() {
   await query(SQL)
   await query(SQL)
   await query(ALTER)
   await query(ALTER)
+  await query(FIX_SENSOR_RW)
+  await ensureTimeseriesSchema()
   console.log('[db] schema migrated')
   console.log('[db] schema migrated')
 }
 }
 
 

server/src/devices/alarms.ts

@@ -25,12 +25,21 @@ function levelFor(p: DevicePoint, kind: PointAlarmKind): PointAlarmLevel {
   return 'amber'
   return 'amber'
 }
 }
 
 
-/** 根据点位 alarmLow/alarmHigh 与 lastEng 判定当前超限告警 */
+const FRESH_MS = 5 * 60_000
+
+function isFresh(p: DevicePoint): boolean {
+  if (!p.lastTs) return false
+  const t = Date.parse(p.lastTs)
+  return Number.isFinite(t) && Date.now() - t <= FRESH_MS
+}
+
+/** 根据点位 alarmLow/alarmHigh 与 lastEng 判定当前超限告警（仅新鲜遥测） */
 export function evaluateAlarmsFromPoints(points: DevicePoint[]): PointAlarm[] {
 export function evaluateAlarmsFromPoints(points: DevicePoint[]): PointAlarm[] {
   const out: PointAlarm[] = []
   const out: PointAlarm[] = []
   for (const p of points) {
   for (const p of points) {
     if (!p.enabled) continue
     if (!p.enabled) continue
     if (p.lastEng === null || p.lastEng === undefined || Number.isNaN(Number(p.lastEng))) continue
     if (p.lastEng === null || p.lastEng === undefined || Number.isNaN(Number(p.lastEng))) continue
+    if (!isFresh(p)) continue
     const hasLow = p.alarmLow !== null && p.alarmLow !== undefined
     const hasLow = p.alarmLow !== null && p.alarmLow !== undefined
     const hasHigh = p.alarmHigh !== null && p.alarmHigh !== undefined
     const hasHigh = p.alarmHigh !== null && p.alarmHigh !== undefined
     if (!hasLow && !hasHigh) continue
     if (!hasLow && !hasHigh) continue

server/src/devices/pointRw.ts

@@ -9,6 +9,26 @@ export type PointRwContext = {
 }
 }
 
 
 /**
 /**
+ * 房间屏采集量：CSV 常误标 -F6 为写，但「实时温度/湿度/压差」实为传感器读数。
+ */
+export function isRoomSensorPoint(ctx: PointRwContext = {}): boolean {
+  const name = `${ctx.name || ''} ${ctx.itemId || ''}`
+  if (/设定|上限|下限|高限|低限|目标|地址/.test(name)) return false
+  return /实时温度|实时湿度|实时压差|冰箱温度|冰箱湿度/.test(name)
+}
+
+/**
+ * 机组/VAV 运行显示量：CSV 常把 Holding 标成 -F6、把状态线圈标成 -F5，
+ * 但「送风温度显示 / 实际风量 / 开停状态」等实为遥测，应参与周期采集。
+ */
+export function isHvacTelemetryPoint(ctx: PointRwContext = {}): boolean {
+  const name = `${ctx.name || ''} ${ctx.itemId || ''}`
+  if (/设定|校准|命令|复位|给定|手自动|地址|上限|下限/.test(name)) return false
+  if (/显示/.test(name)) return true
+  return /实际风量|实际面风速|开停状态|系统启动信号/.test(name)
+}
+
+/**
  * 计量仪表测点：现场 CSV 常把 Holding 一律标成 `-F6`，但电表/水表(流量计)/能量计
  * 计量仪表测点：现场 CSV 常把 Holding 一律标成 `-F6`，但电表/水表(流量计)/能量计
  * 点名均为电压/电流/流量/热量等采集量，Description 为空，无写控说明 → 强制只读。
  * 点名均为电压/电流/流量/热量等采集量，Description 为空，无写控说明 → 强制只读。
  */
  */
@@ -42,8 +62,8 @@ export function inferPointRw(
   fallback: PointRw = 'r',
   fallback: PointRw = 'r',
   ctx: PointRwContext = {},
   ctx: PointRwContext = {},
 ): PointRw {
 ): PointRw {
-  // 电表 / 流量计(水) / 能量计：业务上只采集，忽略 CSV 上的 -F6/-F16 误标
-  if (isMeterTelemetryPoint(ctx)) return 'r'
+  // 房间/冰箱传感器、机组显示量、电表等：业务上只采集，忽略 CSV 上的 -F6/-F16 误标
+  if (isRoomSensorPoint(ctx) || isHvacTelemetryPoint(ctx) || isMeterTelemetryPoint(ctx)) return 'r'
 
 
   const t = (regType || '').toUpperCase()
   const t = (regType || '').toUpperCase()
   if (!t) return fallback
   if (!t) return fallback
@@ -72,7 +92,7 @@ export function isReadablePoint(p: {
     sourceCsv: p.sourceCsv,
     sourceCsv: p.sourceCsv,
     category: p.category,
     category: p.category,
   }
   }
-  if (isMeterTelemetryPoint(ctx)) return true
+  if (isRoomSensorPoint(ctx) || isHvacTelemetryPoint(ctx) || isMeterTelemetryPoint(ctx)) return true
   const rw = inferPointRw(p.regType || '', (p.rw as 'r' | 'w' | 'rw') || 'r', ctx).toLowerCase()
   const rw = inferPointRw(p.regType || '', (p.rw as 'r' | 'w' | 'rw') || 'r', ctx).toLowerCase()
   return rw !== 'w'
   return rw !== 'w'
 }
 }

server/src/devices/store.ts

@@ -921,6 +921,25 @@ export async function applyPointTelemetry(samples: PointTelemetrySample[]): Prom
 /** Mock/网关旁路：按点位生成可读工程值，便于后台联调 */
 /** Mock/网关旁路：按点位生成可读工程值，便于后台联调 */
 export async function applyMockPointTelemetry(): Promise<number> {
 export async function applyMockPointTelemetry(): Promise<number> {
   const points = (await listPoints()).filter((p) => p.enabled && isReadablePoint(p))
   const points = (await listPoints()).filter((p) => p.enabled && isReadablePoint(p))
+  return applyMockSamples(points)
+}
+
+/**
+ * 仅对超过 staleMs 未更新的可读点补发模拟值（网关部分在线时保持时序不断流）。
+ */
+export async function applyMockPointTelemetryStale(staleMs: number): Promise<number> {
+  if (staleMs <= 0) return 0
+  const cutoff = Date.now() - staleMs
+  const points = (await listPoints()).filter((p) => {
+    if (!p.enabled || !isReadablePoint(p)) return false
+    if (!p.lastTs) return true
+    const t = Date.parse(p.lastTs)
+    return !Number.isFinite(t) || t < cutoff
+  })
+  return applyMockSamples(points)
+}
+
+async function applyMockSamples(points: DevicePoint[]): Promise<number> {
   if (!points.length) return 0
   if (!points.length) return 0
   const t = Date.now()
   const t = Date.now()
   const samples: PointTelemetrySample[] = points.map((p, i) => {
   const samples: PointTelemetrySample[] = points.map((p, i) => {
@@ -935,7 +954,7 @@ export async function applyMockPointTelemetry(): Promise<number> {
       p.minEngRange,
       p.minEngRange,
       p.maxEngRange,
       p.maxEngRange,
     )
     )
-    return { id: p.id, itemId: p.itemId, raw, eng, ts: now(), quality: 'good' }
+    return { id: p.id, itemId: p.itemId, raw, eng, ts: now(), quality: 'simulated' }
   })
   })
   return applyPointTelemetry(samples)
   return applyPointTelemetry(samples)
 }
 }
@@ -946,9 +965,25 @@ function mockRaw(p: DevicePoint, t: number, i: number): number {
   if (/Boolean|Bit/i.test(p.dataType) || /开停|状态|到位|信号|开关/.test(name)) {
   if (/Boolean|Bit/i.test(p.dataType) || /开停|状态|到位|信号|开关/.test(name)) {
     return wave > 0 ? 1 : 0
     return wave > 0 ? 1 : 0
   }
   }
-  if (/温度|temp/i.test(name)) return Math.round((-22 + wave * 3) * 10) // *0.1 → ℃
-  if (/湿度|humid/i.test(name)) return Math.round((45 + wave * 15) * 10)
-  if (/压差|pressure|压力/.test(name)) return Math.round((-15 + wave * 8) * 10)
+  // 原始寄存器常按 ×0.1 工程化；按业务给合理 raw
+  if (/冰箱|冷链|fridge/i.test(name) && /温度|temp/i.test(name)) {
+    return Math.round((-20 + wave * 1.2) * 10)
+  }
+  if (/冰箱|冷链|fridge/i.test(name) && /湿度|humid/i.test(name)) {
+    return Math.round((40 + wave * 8) * 10)
+  }
+  if (/送风温度|新风温度|排风温度|表冷后温度|实时温度|^温度$|temp/i.test(name)) {
+    return Math.round((22.5 + wave * 1.2) * 10)
+  }
+  if (/送风湿度|新风湿度|排风湿度|表冷后湿度|实时湿度|^湿度$|humid/i.test(name)) {
+    return Math.round((48 + wave * 6) * 10)
+  }
+  if (/送风压力|排风压力|实时压差|压差|pressure|压力/.test(name)) {
+    return Math.round((-12 + wave * 4) * 10)
+  }
+  if (/实际风量/.test(name)) return Math.round((650 + wave * 80) * 10)
+  if (/实际面风速/.test(name)) return Math.round((0.45 + wave * 0.08) * 100)
+  if (/用电量|有功电能/.test(name)) return Math.round((480 + wave * 20 + (i % 9)) * 10)
   if (/电压|电流|功率|电|流量|流速|能量/.test(name)) return Math.round((100 + wave * 40 + (i % 7)) * 10) / 10
   if (/电压|电流|功率|电|流量|流速|能量/.test(name)) return Math.round((100 + wave * 40 + (i % 7)) * 10) / 10
   if (/Float|Double/i.test(p.dataType)) return +(12 + wave * 5 + (i % 5)).toFixed(3)
   if (/Float|Double/i.test(p.dataType)) return +(12 + wave * 5 + (i % 5)).toFixed(3)
   return Math.round(100 + wave * 30 + (i % 11))
   return Math.round(100 + wave * 30 + (i % 11))

server/src/index.ts

@@ -22,6 +22,7 @@ import { lightRouter } from './routes/light.js'
 import { devicesRouter } from './routes/devices.js'
 import { devicesRouter } from './routes/devices.js'
 import { gatewayRouter } from './routes/gateway.js'
 import { gatewayRouter } from './routes/gateway.js'
 import { alarmsRouter } from './routes/alarms.js'
 import { alarmsRouter } from './routes/alarms.js'
+import { weatherRouter } from './routes/weather.js'
 import { getSnapshot, startRealtimeLoop, subscribe } from './realtime/store.js'
 import { getSnapshot, startRealtimeLoop, subscribe } from './realtime/store.js'
 
 
 async function bootstrap() {
 async function bootstrap() {
@@ -69,6 +70,7 @@ async function bootstrap() {
   app.use('/api/light', lightRouter)
   app.use('/api/light', lightRouter)
   app.use('/api/devices', devicesRouter)
   app.use('/api/devices', devicesRouter)
   app.use('/api/alarms', alarmsRouter)
   app.use('/api/alarms', alarmsRouter)
+  app.use('/api/weather', weatherRouter)
   /** Windows 网关上行：拉点表 / 推测点落库 */
   /** Windows 网关上行：拉点表 / 推测点落库 */
   app.use('/api/gateway', gatewayRouter)
   app.use('/api/gateway', gatewayRouter)
 
 

server/src/realtime/fromDevices.ts

+import { evaluatePointAlarms } from '../devices/alarms.js'
+import { listDevices, listGateways, listPoints } from '../devices/store.js'
+import type { Device, DevicePoint } from '../devices/types.js'
+import type { FridgeSnapshot, RealtimeSnapshot, RoomSnapshot, VavSnapshot } from '../types.js'
+
+/** 与前端 PROTOCOL_ROOMS / 场景书签对齐的稳定房间 id */
+const ROOM_ID_BY_NAME: Record<string, string> = {
+  收样咨询室: 'recv',
+  生信分析报告室: 'report',
+  试剂准备间: 'reagent',
+  PCR走廊: 'pcr-corridor',
+  样本制备区1: 'sample-1',
+  样本制备区2: 'sample-2',
+  样本制备区缓冲: 'sample-buf',
+  文库制备区1: 'lib-1',
+  文库制备区1缓冲: 'lib-1-buf',
+  文库制备区2: 'lib-2',
+  文库制备区2缓冲: 'lib-2-buf',
+  测序区: 'seq',
+  测序区缓冲: 'seq-buf',
+}
+
+function stableRoomId(d: Device): string {
+  if (ROOM_ID_BY_NAME[d.name]) return ROOM_ID_BY_NAME[d.name]
+  for (const [name, id] of Object.entries(ROOM_ID_BY_NAME)) {
+    if (d.name.includes(name) || name.includes(d.name)) return id
+  }
+  return d.id
+}
+
+function num(v: number | null | undefined): number | null {
+  if (v === null || v === undefined) return null
+  const n = Number(v)
+  return Number.isFinite(n) ? n : null
+}
+
+function pickPoint(points: DevicePoint[], ...patterns: RegExp[]): DevicePoint | undefined {
+  for (const re of patterns) {
+    const hit = points.find((p) => re.test(p.name) || re.test(p.itemId))
+    if (hit) return hit
+  }
+  return undefined
+}
+
+function eng(points: DevicePoint[], ...patterns: RegExp[]): number | null {
+  return num(pickPoint(points, ...patterns)?.lastEng)
+}
+
+function boolOn(points: DevicePoint[], ...patterns: RegExp[]): boolean {
+  const v = eng(points, ...patterns)
+  return v !== null && v !== 0
+}
+
+function pointFresh(p: DevicePoint | undefined, maxAgeMs = 5 * 60_000): boolean {
+  if (!p?.lastTs) return false
+  const t = Date.parse(p.lastTs)
+  return Number.isFinite(t) && Date.now() - t <= maxAgeMs
+}
+
+function deviceOnline(points: DevicePoint[]): boolean {
+  return points.some((p) => pointFresh(p))
+}
+
+function roomFromDevice(d: Device, points: DevicePoint[]): RoomSnapshot {
+  const tempP = pickPoint(points, /实时温度|^温度$|Temp/i)
+  const humP = pickPoint(points, /实时湿度|^湿度$|Humid/i)
+  const pressP = pickPoint(points, /实时压差|压差(?!设定|上限|下限)/)
+  const temp = pointFresh(tempP) ? num(tempP?.lastEng) ?? 0 : 0
+  const humidity = pointFresh(humP) ? Math.round(num(humP?.lastEng) ?? 0) : 0
+  const pressure = pointFresh(pressP) ? num(pressP?.lastEng) ?? 0 : 0
+  const alarms: string[] = []
+  for (const p of [tempP, humP, pressP]) {
+    if (!p || !pointFresh(p) || p.lastEng === null || p.lastEng === undefined) continue
+    const v = Number(p.lastEng)
+    if (p.alarmLow !== null && v < p.alarmLow) alarms.push(`${p.name}偏低`)
+    if (p.alarmHigh !== null && v > p.alarmHigh) alarms.push(`${p.name}偏高`)
+  }
+  return { id: stableRoomId(d), name: d.name, temp, humidity, pressure, alarms }
+}
+
+function fridgeFromDevice(d: Device, points: DevicePoint[]): FridgeSnapshot {
+  const tempP = pickPoint(points, /冰箱温度|温度/)
+  const humP = pickPoint(points, /冰箱湿度|湿度/)
+  return {
+    id: d.id,
+    name: d.name,
+    temp: pointFresh(tempP) ? num(tempP?.lastEng) ?? 0 : 0,
+    humidity: pointFresh(humP) ? Math.round(num(humP?.lastEng) ?? 0) : 0,
+  }
+}
+
+function vavFromDevice(d: Device, points: DevicePoint[]): VavSnapshot {
+  const alarm = eng(points, /报警代码/)
+  return {
+    id: d.id,
+    name: d.name,
+    running: boolOn(points, /开停状态|^开机$/),
+    faceVelocity: eng(points, /实际面风速|面风速/) ?? 0,
+    sashHeight: eng(points, /实际门高|门高/) ?? 0,
+    airflow: eng(points, /实际风量|风量/) ?? 0,
+    valveOpen: 0,
+    maxExhaust: boolOn(points, /最大排风/),
+    minAirflow: boolOn(points, /最小风量/),
+    alarmCode: alarm !== null ? Math.round(alarm) : 0,
+  }
+}
+
+function sumEng(devices: Device[], byDevice: Map<string, DevicePoint[]>, nameRe: RegExp): number {
+  let sum = 0
+  let any = false
+  for (const d of devices) {
+    const v = eng(byDevice.get(d.id) || [], nameRe)
+    if (v === null) continue
+    sum += v
+    any = true
+  }
+  return any ? Number(sum.toFixed(3)) : 0
+}
+
+/**
+ * 从设备台账 + 点位 lastEng 组装大屏业务快照（无假数；无遥测则为 0 / 空告警）。
+ */
+export async function buildSnapshotFromDevices(): Promise<RealtimeSnapshot> {
+  const [devices, points, gateways, pointAlarms] = await Promise.all([
+    listDevices(),
+    listPoints(),
+    listGateways(),
+    evaluatePointAlarms().catch(() => []),
+  ])
+
+  const enabled = devices.filter((d) => d.enabled)
+  const byDevice = new Map<string, DevicePoint[]>()
+  for (const p of points) {
+    if (!p.deviceId || !p.enabled) continue
+    const list = byDevice.get(p.deviceId) || []
+    list.push(p)
+    byDevice.set(p.deviceId, list)
+  }
+
+  const rooms = enabled
+    .filter((d) => d.category === 'room')
+    .map((d) => roomFromDevice(d, byDevice.get(d.id) || []))
+
+  const fridges = enabled
+    .filter((d) => d.category === 'fridge')
+    .map((d) => fridgeFromDevice(d, byDevice.get(d.id) || []))
+
+  const vav = enabled
+    .filter((d) => d.category === 'vav')
+    .map((d) => vavFromDevice(d, byDevice.get(d.id) || []))
+
+  const pauDevs = enabled.filter((d) => d.category === 'pau')
+  const pauPts = pauDevs.flatMap((d) => byDevice.get(d.id) || [])
+  const systemRunning = boolOn(pauPts, /系统启动信号|^开机$|PAU201送风机启停/)
+  const modeAuto = !boolOn(pauPts, /PAU201手自动模式选择/) // 常见：0 自动 1 手动；无值当自动
+  const hvacAlarms: string[] = []
+  for (const tip of [
+    '机组故障报警',
+    '缺风报警',
+    '初效报警',
+    '消防报警',
+    '送风缺风故障提示',
+    '初/中效故障提示',
+  ]) {
+    if (boolOn(pauPts, new RegExp(tip.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')))) {
+      hvacAlarms.push(tip)
+    }
+  }
+  for (const a of pointAlarms) {
+    if (/PAU|EAF|送风|排风|滤/i.test(a.message) || /pau/i.test(a.deviceId || '')) {
+      hvacAlarms.push(a.message)
+    }
+  }
+
+  const powerMeters = enabled.filter((d) => d.category === 'meter_power')
+  const waterMeters = enabled.filter((d) => d.category === 'meter_water')
+  const coolMeters = enabled.filter((d) => d.category === 'meter_cooling')
+
+  let onlineCount = 0
+  for (const d of enabled) {
+    if (deviceOnline(byDevice.get(d.id) || [])) onlineCount += 1
+  }
+  const gwOk = gateways.some((g) => g.enabled && !!g.lastOkAt)
+
+  return {
+    ts: Date.now(),
+    rooms,
+    hvac: {
+      systemRunning,
+      supplyFanHz: eng(pauPts, /PAU201_输出值|PAU201风机频率/) ?? 0,
+      exhaustPressure: eng(pauPts, /EAF201排风压力显示|EAF201排风压力/) ?? 0,
+      filterRemainPct: boolOn(pauPts, /初效报警|初\/中效故障提示|初\/中效故障/) ? 0 : 0,
+      mode: modeAuto ? 'auto' : 'manual',
+      supplyTemp: eng(pauPts, /送风温度显示|送风温度/) ?? 0,
+      supplyHumidity: Math.round(eng(pauPts, /送风湿度显示|送风湿度/) ?? 0),
+      supplyPressure: eng(pauPts, /PAU201送风压力显示|送风压力/) ?? 0,
+      freshAirTemp: eng(pauPts, /新风温度显示|新风温度/) ?? 0,
+      alarms: [...new Set(hvacAlarms)].slice(0, 8),
+    },
+    vav,
+    fridges,
+    metering: {
+      powerKwh: sumEng(powerMeters, byDevice, /用电量|有功电能|总有功/),
+      waterM3: sumEng(waterMeters, byDevice, /用水量|累计流量|流量/),
+      coolingKwh: sumEng(coolMeters, byDevice, /冷量|累计|用电量/),
+      powerTrendPct: 0,
+      waterTrendPct: 0,
+      coolingTrendPct: 0,
+    },
+    access: {
+      doors: enabled
+        .filter((d) => d.category === 'door')
+        .map((d) => ({
+          id: d.id,
+          name: d.name,
+          status: (d.status === 'alarm' ? 'alarm' : d.status === 'offline' ? 'offline' : 'closed') as
+            | 'open'
+            | 'closed'
+            | 'alarm'
+            | 'offline',
+        })),
+      todayPassCount: 0,
+      recentEvents: [],
+    },
+    online: {
+      devicesOnline: onlineCount,
+      devicesTotal: enabled.length,
+      gatewayOk: gwOk,
+    },
+    pointAlarms,
+  }
+}

server/src/realtime/history.ts

+import { listDevices } from '../devices/store.js'
+import {
+  listTsCatalog,
+  queryTsSeries,
+  type TsCatalogItem,
+  type TsSeries,
+} from '../db/timeseries.js'
+
+const METRIC_LABEL: Record<string, string> = {
+  temp: '温度',
+  humidity: '湿度',
+  pressure: '压差',
+  airflow: '风量',
+  face_velocity: '面风速',
+  supply_temp: '送风温度',
+  supply_humidity: '送风湿度',
+  supply_pressure: '送风压力',
+  fresh_air_temp: '新风温度',
+  exhaust_pressure: '排风压力',
+  power_kwh: '用电量',
+  water_m3: '用水量',
+  cooling_kwh: '冷量',
+}
+
+const SOURCE_LABEL: Record<string, string> = {
+  room: '房间环境',
+  fridge: '冷链冰箱',
+  vav: '通风柜',
+  hvac: '空调排风',
+  metering: '计量',
+}
+
+export function metricLabel(metric: string) {
+  return METRIC_LABEL[metric] || metric
+}
+
+export function sourceLabel(source: string) {
+  return SOURCE_LABEL[source] || source
+}
+
+async function deviceNameMap() {
+  const devices = await listDevices()
+  const map = new Map<string, string>()
+  for (const d of devices) map.set(d.id, d.name)
+  map.set('PAU201', 'PAU-201 机组')
+  map.set('lab', '实验室汇总')
+  return map
+}
+
+export async function attachSeriesNames(series: TsSeries[]): Promise<TsSeries[]> {
+  const names = await deviceNameMap()
+  return series.map((s) => ({ ...s, name: names.get(s.id) || s.name || s.id }))
+}
+
+export async function getHistoryCatalog(): Promise<
+  (TsCatalogItem & { sourceLabel: string; metricLabel: string; name: string })[]
+> {
+  const [catalog, names] = await Promise.all([listTsCatalog(), deviceNameMap()])
+  return catalog.map((c) => ({
+    ...c,
+    sourceLabel: sourceLabel(c.source),
+    metricLabel: metricLabel(c.metric),
+    name: names.get(c.deviceId) || c.deviceId,
+  }))
+}
+
+export async function getHistorySeries(opts: {
+  source: string
+  metric: string
+  hours?: number
+  bucketMinutes?: number
+  deviceId?: string
+}): Promise<{
+  source: string
+  metric: string
+  sourceLabel: string
+  metricLabel: string
+  hours: number
+  bucketMinutes: number
+  series: TsSeries[]
+}> {
+  const hours = opts.hours ?? 24
+  const bucketMinutes = opts.bucketMinutes ?? 15
+  const raw = await queryTsSeries({
+    source: opts.source,
+    metric: opts.metric,
+    hours,
+    bucketMinutes,
+    deviceIds: opts.deviceId ? [opts.deviceId] : undefined,
+  })
+  const series = await attachSeriesNames(raw)
+  return {
+    source: opts.source,
+    metric: opts.metric,
+    sourceLabel: sourceLabel(opts.source),
+    metricLabel: metricLabel(opts.metric),
+    hours,
+    bucketMinutes,
+    series,
+  }
+}

server/src/realtime/store.ts

-import { generateSnapshot } from '../mock/generator.js'
 import type { RealtimeSnapshot } from '../types.js'
 import type { RealtimeSnapshot } from '../types.js'
 import { config } from '../config.js'
 import { config } from '../config.js'
 import { persistSnapshot, persistWriteLog, pruneCollectData } from '../db/collect.js'
 import { persistSnapshot, persistWriteLog, pruneCollectData } from '../db/collect.js'
@@ -8,16 +7,47 @@ import { syncPointAlarms } from '../alarms/store.js'
 import { evaluatePointAlarms } from '../devices/alarms.js'
 import { evaluatePointAlarms } from '../devices/alarms.js'
 import {
 import {
   applyMockPointTelemetry,
   applyMockPointTelemetry,
+  applyMockPointTelemetryStale,
   applyPointTelemetry,
   applyPointTelemetry,
   type PointTelemetrySample,
   type PointTelemetrySample,
 } from '../devices/store.js'
 } from '../devices/store.js'
+import { buildSnapshotFromDevices } from './fromDevices.js'
 
 
-let snapshot: RealtimeSnapshot = generateSnapshot()
+let snapshot: RealtimeSnapshot = {
+  ts: 0,
+  rooms: [],
+  hvac: {
+    systemRunning: false,
+    supplyFanHz: 0,
+    exhaustPressure: 0,
+    filterRemainPct: 0,
+    mode: 'auto',
+    supplyTemp: 0,
+    supplyHumidity: 0,
+    supplyPressure: 0,
+    freshAirTemp: 0,
+    alarms: [],
+  },
+  vav: [],
+  fridges: [],
+  metering: {
+    powerKwh: 0,
+    waterM3: 0,
+    coolingKwh: 0,
+    powerTrendPct: 0,
+    waterTrendPct: 0,
+    coolingTrendPct: 0,
+  },
+  access: { doors: [], todayPassCount: 0, recentEvents: [] },
+  online: { devicesOnline: 0, devicesTotal: 0, gatewayOk: false },
+  pointAlarms: [],
+}
 const listeners = new Set<(s: RealtimeSnapshot) => void>()
 const listeners = new Set<(s: RealtimeSnapshot) => void>()
 let persistBusy = false
 let persistBusy = false
 let pollTimer: ReturnType<typeof setInterval> | undefined
 let pollTimer: ReturnType<typeof setInterval> | undefined
 let currentPollMs = config.modbus.pollMs
 let currentPollMs = config.modbus.pollMs
 let tickBusy = false
 let tickBusy = false
+let lastMockFillLogMs = 0
 
 
 export function getSnapshot() {
 export function getSnapshot() {
   return snapshot
   return snapshot
@@ -98,29 +128,11 @@ async function tick() {
   if (tickBusy) return
   if (tickBusy) return
   tickBusy = true
   tickBusy = true
   try {
   try {
-    if (!useGatewayMode() || !resolveGatewayBase()) {
-      snapshot = generateSnapshot()
-      if (useGatewayMode()) snapshot.online.gatewayOk = false
-      // 仅 mock 模式本地造数；gateway 模式优先等 Windows 网关 POST /api/gateway/telemetry
-      if (config.dataMode === 'mock') {
-        try {
-          await applyMockPointTelemetry()
-        } catch (e) {
-          console.warn('[realtime] mock point telemetry failed', e)
-        }
-      }
-    } else {
+    let gatewayOk: boolean | undefined
+    if (useGatewayMode() && resolveGatewayBase()) {
       const [health, gwSnap] = await Promise.all([fetchGatewayHealth(), fetchGatewaySnapshot()])
       const [health, gwSnap] = await Promise.all([fetchGatewayHealth(), fetchGatewaySnapshot()])
-      // 网关快照合并进业务快照：一期先保留 mock 结构，标记网关连通；点值供设备页展示
-      snapshot = generateSnapshot()
-      snapshot.online.gatewayOk = health.ok
+      gatewayOk = health.ok
       const samples = parseGatewayValues(gwSnap)
       const samples = parseGatewayValues(gwSnap)
-      if (gwSnap && typeof gwSnap === 'object') {
-        ;(snapshot as RealtimeSnapshot & { gatewayTelemetry?: unknown }).gatewayTelemetry = (
-          gwSnap as { values?: unknown }
-        ).values
-      }
-      // 拉取兜底（网关也会主动推送到 /api/gateway/telemetry）；先写完再判定告警
       if (samples.length) {
       if (samples.length) {
         try {
         try {
           await applyPointTelemetry(samples)
           await applyPointTelemetry(samples)
@@ -128,7 +140,39 @@ async function tick() {
           console.warn('[realtime] gateway point telemetry failed', e)
           console.warn('[realtime] gateway point telemetry failed', e)
         }
         }
       }
       }
+      // 网关部分断线时，过期点位继续模拟补发，保证时序入库与大屏不断流
+      const staleMs = Number(process.env.MOCK_FILL_STALE_MS || config.mockFillStaleMs || 0)
+      if (staleMs > 0) {
+        try {
+          const n = await applyMockPointTelemetryStale(staleMs)
+          const now = Date.now()
+          if (n > 0 && now - lastMockFillLogMs > 30_000) {
+            lastMockFillLogMs = now
+            console.log(`[realtime] mock-fill stale points: ${n}`)
+          }
+        } catch (e) {
+          console.warn('[realtime] mock-fill stale failed', e)
+        }
+      }
+    } else if (config.dataMode === 'mock') {
+      try {
+        await applyMockPointTelemetry()
+      } catch (e) {
+        console.warn('[realtime] mock point telemetry failed', e)
+      }
+    } else if (Number(process.env.MOCK_FILL_STALE_MS || config.mockFillStaleMs || 0) > 0) {
+      // gateway 模式但未配置 URL：仍用模拟保持发送
+      try {
+        await applyMockPointTelemetry()
+      } catch (e) {
+        console.warn('[realtime] mock telemetry failed', e)
+      }
     }
     }
+
+    snapshot = await buildSnapshotFromDevices()
+    if (gatewayOk !== undefined) snapshot.online.gatewayOk = gatewayOk
+    else if (useGatewayMode()) snapshot.online.gatewayOk = false
+
     await attachPointAlarms()
     await attachPointAlarms()
     publish()
     publish()
     void persistSafe(snapshot)
     void persistSafe(snapshot)

server/src/routes/realtime.ts

 import { Router } from 'express'
 import { Router } from 'express'
 import { authRequired, requireRole } from '../auth/middleware.js'
 import { authRequired, requireRole } from '../auth/middleware.js'
+import { queryFridgeTempSeries } from '../db/collect.js'
+import { getHistoryCatalog, getHistorySeries } from '../realtime/history.js'
+import { buildScreenDashboard } from '../realtime/screen.js'
 import { applyWriteLog, getSnapshot } from '../realtime/store.js'
 import { applyWriteLog, getSnapshot } from '../realtime/store.js'
 
 
 export const realtimeRouter = Router()
 export const realtimeRouter = Router()
@@ -9,6 +12,61 @@ realtimeRouter.get('/snapshot', (_req, res) => {
   res.json(getSnapshot())
   res.json(getSnapshot())
 })
 })
 
 
+/** 大屏面板：设备台账 + 点位实值 + 图表聚合（无假数） */
+realtimeRouter.get('/screen', async (_req, res) => {
+  try {
+    const data = await buildScreenDashboard()
+    res.json(data)
+  } catch (e) {
+    console.error('[realtime] screen dashboard failed', e)
+    res.status(500).json({ message: '大屏数据组装失败' })
+  }
+})
+
+/** 时序目录：所有已落库可查序列 */
+realtimeRouter.get('/history/catalog', async (_req, res) => {
+  try {
+    const catalog = await getHistoryCatalog()
+    res.json({ catalog })
+  } catch (e) {
+    console.error('[realtime] history catalog failed', e)
+    res.status(500).json({ message: '历史目录查询失败', catalog: [] })
+  }
+})
+
+/** 通用历史曲线：source + metric（可选 deviceId） */
+realtimeRouter.get('/history', async (req, res) => {
+  const source = String(req.query.source || '')
+  const metric = String(req.query.metric || '')
+  if (!source || !metric) {
+    res.status(400).json({ message: '缺少 source / metric' })
+    return
+  }
+  const hours = Number(req.query.hours) || 24
+  const bucketMinutes = Number(req.query.bucketMinutes) || 15
+  const deviceId = req.query.deviceId ? String(req.query.deviceId) : undefined
+  try {
+    const data = await getHistorySeries({ source, metric, hours, bucketMinutes, deviceId })
+    res.json(data)
+  } catch (e) {
+    console.error('[realtime] history query failed', e)
+    res.status(500).json({ message: '历史曲线查询失败', series: [] })
+  }
+})
+
+/** 各冰箱近 24h 温度曲线（采集落库聚合） */
+realtimeRouter.get('/fridges/temp-history', async (req, res) => {
+  const hours = Number(req.query.hours) || 24
+  const bucketMinutes = Number(req.query.bucketMinutes) || 15
+  try {
+    const series = await queryFridgeTempSeries({ hours, bucketMinutes })
+    res.json({ hours, bucketMinutes, series })
+  } catch (e) {
+    console.error('[realtime] fridge temp-history failed', e)
+    res.status(500).json({ message: '温度历史查询失败', series: [] })
+  }
+})
+
 realtimeRouter.post('/write', authRequired, requireRole('admin'), (req, res) => {
 realtimeRouter.post('/write', authRequired, requireRole('admin'), (req, res) => {
   const { target, action, value } = req.body || {}
   const { target, action, value } = req.body || {}
   if (!target || !action) {
   if (!target || !action) {

server/src/routes/weather.ts

+import { Router } from 'express'
+
+export const weatherRouter = Router()
+
+const SMG_BRIEF = 'https://xml.smg.gov.mo/c_actual_brief.xml'
+const CACHE_MS = 10 * 60_000
+
+type MacauWeather = {
+  place: string
+  temp: string
+  text: string
+  humidity: string
+  feelsLike?: string
+  wind?: string
+  source: string
+  updatedAt: string | null
+}
+
+let cache: { at: number; data: MacauWeather } | null = null
+
+function pickTag(xml: string, tag: string): string | null {
+  const re = new RegExp(`<${tag}[^>]*>([\\s\\S]*?)</${tag}>`, 'i')
+  const m = xml.match(re)
+  return m ? m[1].trim() : null
+}
+
+function pickTypedValue(xml: string, blockTag: string, type: string): string | null {
+  const re = new RegExp(
+    `<${blockTag}>[\\s\\S]*?<Type>${type}</Type>[\\s\\S]*?<Value>([^<]*)</Value>[\\s\\S]*?</${blockTag}>`,
+    'i',
+  )
+  const m = xml.match(re)
+  return m ? m[1].trim() : null
+}
+
+function parseBrief(xml: string): MacauWeather {
+  const temp = pickTypedValue(xml, 'Temperature', '3') || pickTag(xml, 'Value')
+  const humidity = pickTypedValue(xml, 'Humidity', '3')
+  const text =
+    pickTag(xml, 'IconDescription') ||
+    pickTag(xml, 'FeelsLikeDescription') ||
+    '—'
+  const windDir = pickTag(xml, 'WindDescription')
+  const windSpd = pickTag(xml, 'WindSpeedDescription')
+  const feels = pickTag(xml, 'FeelsLikeDescription')
+  const updated = pickTag(xml, 'ValidFor') || pickTag(xml, 'SysPubdate')
+  return {
+    place: '澳门',
+    temp: temp != null && temp !== '' ? `${Math.round(Number(temp))}℃` : '--',
+    text,
+    humidity: humidity != null && humidity !== '' ? `${Math.round(Number(humidity))}%` : '--',
+    feelsLike: feels || undefined,
+    wind: [windDir, windSpd].filter(Boolean).join(' · ') || undefined,
+    source: 'https://www.smg.gov.mo/zh',
+    updatedAt: updated,
+  }
+}
+
+async function fetchMacauWeather(): Promise<MacauWeather> {
+  if (cache && Date.now() - cache.at < CACHE_MS) return cache.data
+  const res = await fetch(SMG_BRIEF, {
+    headers: { Accept: 'application/xml,text/xml,*/*', 'User-Agent': 'jh-lab-dashboard/1.0' },
+  })
+  if (!res.ok) throw new Error(`SMG HTTP ${res.status}`)
+  const xml = await res.text()
+  const data = parseBrief(xml)
+  cache = { at: Date.now(), data }
+  return data
+}
+
+weatherRouter.get('/macau', async (_req, res) => {
+  try {
+    const data = await fetchMacauWeather()
+    res.json(data)
+  } catch (e) {
+    console.warn('[weather] SMG fetch failed', e)
+    if (cache?.data) {
+      res.json({ ...cache.data, stale: true })
+      return
+    }
+    res.status(502).json({ message: '澳门天文台天气暂不可用' })
+  }
+})

web/package.json

@@ -9,8 +9,10 @@
     "preview": "vite preview"
     "preview": "vite preview"
   },
   },
   "dependencies": {
   "dependencies": {
+    "echarts": "^6.1.0",
     "pinia": "^3.0.1",
     "pinia": "^3.0.1",
     "vue": "^3.5.42",
     "vue": "^3.5.42",
+    "vue-echarts": "^8.3.2",
     "vue-router": "^4.5.0"
     "vue-router": "^4.5.0"
   },
   },
   "devDependencies": {
   "devDependencies": {

web/src/components/charts/EChart.vue

+<script setup lang="ts">
+import { computed } from 'vue'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { BarChart, LineChart, PieChart, ScatterChart } from 'echarts/charts'
+import {
+  GridComponent,
+  LegendComponent,
+  TooltipComponent,
+  VisualMapComponent,
+} from 'echarts/components'
+import VChart from 'vue-echarts'
+import type { ComposeOption } from 'echarts/core'
+import type { BarSeriesOption, LineSeriesOption, PieSeriesOption, ScatterSeriesOption } from 'echarts/charts'
+import type {
+  GridComponentOption,
+  LegendComponentOption,
+  TooltipComponentOption,
+  VisualMapComponentOption,
+} from 'echarts/components'
+
+use([
+  CanvasRenderer,
+  BarChart,
+  LineChart,
+  PieChart,
+  ScatterChart,
+  GridComponent,
+  LegendComponent,
+  TooltipComponent,
+  VisualMapComponent,
+])
+
+export type ECOption = ComposeOption<
+  | BarSeriesOption
+  | LineSeriesOption
+  | PieSeriesOption
+  | ScatterSeriesOption
+  | GridComponentOption
+  | LegendComponentOption
+  | TooltipComponentOption
+  | VisualMapComponentOption
+>
+
+const props = withDefaults(
+  defineProps<{
+    option: ECOption
+    height?: string | number
+    loading?: boolean
+    emptyText?: string
+  }>(),
+  {
+    height: '100%',
+    loading: false,
+    emptyText: '暂无采集数据',
+  },
+)
+
+const style = computed(() => ({
+  width: '100%',
+  height: typeof props.height === 'number' ? `${props.height}px` : props.height,
+  minHeight: '80px',
+}))
+
+const isEmpty = computed(() => {
+  const series = props.option?.series
+  if (!series) return true
+  const list = Array.isArray(series) ? series : [series]
+  return list.every((s) => {
+    const data = (s as { data?: unknown[] }).data
+    return !data || data.length === 0
+  })
+})
+
+/** 空数据时仍给 ECharts 合法 option，避免 v-if 反复挂载触发 __vnode 错误 */
+const EMPTY_OPTION: ECOption = {
+  backgroundColor: 'transparent',
+  series: [],
+}
+
+const chartOption = computed(() => (isEmpty.value ? EMPTY_OPTION : props.option))
+</script>
+
+<template>
+  <div class="echart-wrap" :style="style">
+    <VChart class="echart" :option="chartOption" autoresize :manual-update="false" />
+    <div v-if="isEmpty" class="echart-empty">{{ emptyText }}</div>
+  </div>
+</template>
+
+<style scoped>
+.echart-wrap {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+}
+.echart {
+  width: 100%;
+  height: 100%;
+}
+.echart-empty {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: var(--label, #7a9bb0);
+  border: 1px dashed rgba(0, 247, 255, 0.18);
+  border-radius: 4px;
+  background: rgba(4, 18, 36, 0.35);
+  pointer-events: none;
+}
+</style>

web/src/components/panels/ColdTempCharts.vue

+<script setup lang="ts">
+import { computed, onMounted, onBeforeUnmount, ref, watch } from 'vue'
+import { api } from '@/api/http'
+import type { FridgeSnapshot } from '@/types'
+
+type HistPoint = { t: number; temp: number }
+type HistSeries = { id: string; name: string; points: HistPoint[] }
+
+const props = defineProps<{
+  items: FridgeSnapshot[]
+}>()
+
+const seriesMap = ref<Record<string, HistSeries>>({})
+const loading = ref(false)
+const error = ref('')
+let timer: number | undefined
+
+const fridges = computed(() => props.items || [])
+
+const cards = computed(() => {
+  return fridges.value.map((f) => {
+    const hist = seriesMap.value[f.id]
+    const points = hist?.points?.length
+      ? hist.points
+      : [{ t: Date.now() - 3600_000, temp: f.temp }, { t: Date.now(), temp: f.temp }]
+    const path = pathOf(points, 160, 44)
+    return {
+      id: f.id,
+      name: hist?.name || f.name,
+      temp: f.temp,
+      humidity: f.humidity,
+      warn: f.temp > -19,
+      path,
+      sparse: !hist?.points?.length,
+    }
+  })
+})
+
+async function loadHistory() {
+  loading.value = true
+  error.value = ''
+  try {
+    const res = await api<{ series: HistSeries[] }>('/api/realtime/fridges/temp-history?hours=24&bucketMinutes=15')
+    const next: Record<string, HistSeries> = {}
+    for (const s of res.series || []) next[s.id] = s
+    seriesMap.value = next
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : '历史加载失败'
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  void loadHistory()
+  timer = window.setInterval(() => void loadHistory(), 60_000)
+})
+onBeforeUnmount(() => {
+  if (timer) window.clearInterval(timer)
+})
+
+watch(
+  () => props.items.map((f) => f.id).join(','),
+  () => void loadHistory(),
+)
+
+function pathOf(points: HistPoint[], w: number, h: number) {
+  if (!points.length) return { line: '', area: '', min: 0, max: 0 }
+  const padX = 2
+  const padY = 4
+  const temps = points.map((p) => p.temp)
+  let min = Math.min(...temps)
+  let max = Math.max(...temps)
+  const span = max - min || 1
+  min -= span * 0.15
+  max += span * 0.15
+  const range = max - min || 1
+  const innerW = w - padX * 2
+  const innerH = h - padY * 2
+  const xy = points.map((p, i) => {
+    const x = padX + (points.length === 1 ? innerW / 2 : (i / (points.length - 1)) * innerW)
+    const y = padY + ((max - p.temp) / range) * innerH
+    return [x, y] as const
+  })
+  const line = xy.map((d, i) => `${i === 0 ? 'M' : 'L'}${d[0].toFixed(1)},${d[1].toFixed(1)}`).join(' ')
+  const area = `${line} L${xy[xy.length - 1][0].toFixed(1)},${(h - padY).toFixed(1)} L${xy[0][0].toFixed(1)},${(h - padY).toFixed(1)} Z`
+  return { line, area, min, max }
+}
+</script>
+
+<template>
+  <div class="cold-charts">
+    <div v-if="!cards.length" class="cold-empty">暂无冷链设备数据</div>
+    <div v-else class="cold-grid">
+      <div
+        v-for="c in cards"
+        :key="c.id"
+        class="cold-card"
+        :class="{ warn: c.warn }"
+      >
+        <div class="cold-head">
+          <span class="cold-name">{{ c.name }}</span>
+          <span class="cold-now" :class="{ warn: c.warn }">{{ c.temp.toFixed(1) }}℃</span>
+        </div>
+        <svg class="spark" viewBox="0 0 160 44" preserveAspectRatio="none" aria-hidden="true">
+          <defs>
+            <linearGradient :id="`cg-${c.id}`" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" :stop-color="c.warn ? '#faad14' : '#00f7ff'" stop-opacity="0.35" />
+              <stop offset="100%" :stop-color="c.warn ? '#faad14' : '#00f7ff'" stop-opacity="0" />
+            </linearGradient>
+          </defs>
+          <path v-if="c.path.area" :d="c.path.area" :fill="`url(#cg-${c.id})`" />
+          <path
+            v-if="c.path.line"
+            :d="c.path.line"
+            fill="none"
+            :stroke="c.warn ? '#ffd666' : '#7ad8ff'"
+            stroke-width="1.6"
+            stroke-linejoin="round"
+            stroke-linecap="round"
+            vector-effect="non-scaling-stroke"
+          />
+        </svg>
+        <div class="cold-foot">
+          <span>近24h</span>
+          <span v-if="c.sparse" class="dim">采集积累中</span>
+          <span v-else>RH {{ c.humidity }}%</span>
+        </div>
+      </div>
+    </div>
+    <div v-if="error" class="cold-err">{{ error }}</div>
+  </div>
+</template>
+
+<style scoped>
+.cold-charts {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.cold-grid {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px;
+  align-content: start;
+  padding-right: 2px;
+}
+.cold-card {
+  min-width: 0;
+  padding: 6px 8px 5px;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 247, 255, 0.18);
+  background: rgba(6, 28, 56, 0.4);
+}
+.cold-card.warn {
+  border-color: rgba(250, 173, 20, 0.4);
+  background: rgba(60, 36, 8, 0.35);
+}
+.cold-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  margin-bottom: 2px;
+}
+.cold-name {
+  font-size: 11px;
+  color: #cfe9f7;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.cold-now {
+  font-size: 12px;
+  font-weight: 700;
+  font-family: var(--font-num);
+  color: var(--green);
+  flex-shrink: 0;
+}
+.cold-now.warn { color: var(--amber); }
+.spark {
+  display: block;
+  width: 100%;
+  height: 44px;
+}
+.cold-foot {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 2px;
+  font-size: 9px;
+  color: rgba(158, 210, 232, 0.7);
+}
+.cold-foot .dim { color: rgba(158, 210, 232, 0.45); }
+.cold-empty,
+.cold-err {
+  font-size: 12px;
+  color: var(--label);
+  padding: 8px 0;
+}
+.cold-err { color: #ffb0b0; }
+</style>

web/src/components/scene/SceneViewport.vue

@@ -46,8 +46,12 @@ const activeAreaId = ref<string>(SCREEN_AREAS[0]?.id || 'seq')
 const cameras = ref<VideoDevice[]>([])
 const cameras = ref<VideoDevice[]>([])
 const playOpen = ref(false)
 const playOpen = ref(false)
 const playCam = ref<VideoDevice | null>(null)
 const playCam = ref<VideoDevice | null>(null)
+/** fill 模式：等 #screen-float-overlays 就绪再 Teleport，避免视点条丢失 */
+const floatTargetReady = ref(false)
 let markersSynced = false
 let markersSynced = false
 let engineBootstrapping = false
 let engineBootstrapping = false
+/** 就绪管线只跑一次，避免重复 addMarkers 导致光照/场景闪变 */
+let engineReadyDone = false
 
 
 function cameraMarkerList() {
 function cameraMarkerList() {
   return cameras.value
   return cameras.value
@@ -65,25 +69,24 @@ function cameraMarkerList() {
     }))
     }))
 }
 }
 
 
-/** 引擎就绪后：预加载全部预设图标 → 显示场景 POI → 打上摄像头点位 */
+/** 引擎就绪后：预加载图标 → 显示 POI → 摄像头 Marker（只同步一次） */
 async function onEngineReady() {
 async function onEngineReady() {
-  if (!useCloudFrame.value || engineBootstrapping) return
+  if (!useCloudFrame.value || engineReadyDone || engineBootstrapping) return
   engineBootstrapping = true
   engineBootstrapping = true
   try {
   try {
-    // 1) 加载引擎全部预设图标资源
     await preloadRtengineIcons(undefined, cloudUrl)
     await preloadRtengineIcons(undefined, cloudUrl)
-    // 2) 显示场景内已有 POI/图标
     bridge.showScenePresets()
     bridge.showScenePresets()
-    // 3) 确保摄像头列表最新，再写入 Marker
     await loadCameras()
     await loadCameras()
     syncCameraMarkers(true)
     syncCameraMarkers(true)
-    // 再补两次，避免引擎尚未吃下 addMarkers
-    window.setTimeout(() => syncCameraMarkers(true), 1200)
-    window.setTimeout(() => syncCameraMarkers(true), 3000)
+    // 仅当首轮未写入成功时补一次，避免固定 3 次同步打光照
+    window.setTimeout(() => {
+      if (!markersSynced) syncCameraMarkers(true)
+    }, 2000)
   } catch {
   } catch {
     syncCameraMarkers(true)
     syncCameraMarkers(true)
   } finally {
   } finally {
     engineBootstrapping = false
     engineBootstrapping = false
+    engineReadyDone = true
   }
   }
 }
 }
 
 
@@ -92,8 +95,7 @@ function syncCameraMarkers(force = false) {
   if (markersSynced && !force) return
   if (markersSynced && !force) return
   const list = cameraMarkerList()
   const list = cameraMarkerList()
   if (!list.length) return
   if (!list.length) return
-  // 先按 id 覆盖写入（引擎侧 upsert）
-  for (const m of list) bridge.addMarker(m)
+  // 批量一次写入即可（逐条 + 批量会触发多次场景刷新）
   bridge.addMarkers(list)
   bridge.addMarkers(list)
   markersSynced = true
   markersSynced = true
 }
 }
@@ -257,6 +259,14 @@ function onSelect(id: string) {
 
 
 onMounted(() => {
 onMounted(() => {
   void loadCameras()
   void loadCameras()
+  if (props.layout === 'fill') {
+    floatTargetReady.value = !!document.getElementById('screen-float-overlays')
+    if (!floatTargetReady.value) {
+      requestAnimationFrame(() => {
+        floatTargetReady.value = !!document.getElementById('screen-float-overlays')
+      })
+    }
+  }
   if (useCloudFrame.value) {
   if (useCloudFrame.value) {
     // 兜底：部分环境下无 sceneEmbedLoaded，延时强制走就绪管线
     // 兜底：部分环境下无 sceneEmbedLoaded，延时强制走就绪管线
     window.setTimeout(() => bridge.markReady(), 6000)
     window.setTimeout(() => bridge.markReady(), 6000)
@@ -283,8 +293,25 @@ onBeforeUnmount(() => {
       <span class="view">{{ modeLabel }}</span>
       <span class="view">{{ modeLabel }}</span>
     </div>
     </div>
 
 
-    <!-- 全屏模式下区域列表避开左右悬浮面板 -->
-    <div class="vp-room-panel" :class="{ 'vp-room-panel--fill': props.layout === 'fill' }">
+    <!-- 全屏：Teleport 到 float 层（高于 edge-mask）；嵌入：右侧纵向 -->
+    <Teleport v-if="props.layout === 'fill' && floatTargetReady" to="#screen-float-overlays" defer>
+      <div class="vp-room-panel vp-room-panel--fill">
+        <div class="vp-room-list">
+          <button
+            v-for="r in areaList"
+            :key="r.id"
+            type="button"
+            class="vp-room-item"
+            :class="{ active: r.id === activeAreaId, alarm: r.alarms.length > 0 }"
+            @click="onSelectArea(r.id)"
+          >
+            <AppIcon name="pin" class-name="room-ico" />
+            <span class="name">{{ r.name }}</span>
+          </button>
+        </div>
+      </div>
+    </Teleport>
+    <div v-else-if="props.layout !== 'fill'" class="vp-room-panel">
       <div class="vp-room-head">
       <div class="vp-room-head">
         <AppIcon name="pin" />
         <AppIcon name="pin" />
         <div>
         <div>
@@ -301,6 +328,7 @@ onBeforeUnmount(() => {
           :class="{ active: r.id === activeAreaId, alarm: r.alarms.length > 0 }"
           :class="{ active: r.id === activeAreaId, alarm: r.alarms.length > 0 }"
           @click="onSelectArea(r.id)"
           @click="onSelectArea(r.id)"
         >
         >
+          <AppIcon name="pin" class-name="room-ico" />
           <span class="name">{{ r.name }}</span>
           <span class="name">{{ r.name }}</span>
         </button>
         </button>
       </div>
       </div>
@@ -345,10 +373,10 @@ onBeforeUnmount(() => {
     <div v-if="props.layout !== 'fill'" class="vp-tip">
     <div v-if="props.layout !== 'fill'" class="vp-tip">
       <AppIcon name="hand" class-name="hand" />
       <AppIcon name="hand" class-name="hand" />
       <span v-if="useCloudFrame">
       <span v-if="useCloudFrame">
-        RTEngineHD 云渲染 · 在画面内操作漫游 · 右侧点选区域飞视点
+        RTEngineHD 云渲染 · 在画面内操作漫游 · 底部点选区域飞视点
       </span>
       </span>
       <span v-else>
       <span v-else>
-        <b>左键</b> 拖动 · <b>右键</b> 旋转 · <b>滚轮</b> 缩放 · 右侧点选区域
+        <b>左键</b> 拖动 · <b>右键</b> 旋转 · <b>滚轮</b> 缩放 · 底部点选区域
       </span>
       </span>
     </div>
     </div>
 
 
@@ -405,16 +433,33 @@ onBeforeUnmount(() => {
   overflow: hidden;
   overflow: hidden;
   pointer-events: auto;
   pointer-events: auto;
 }
 }
-/* 夹在左右悬浮面板之间，避开顶栏 */
+/* 全屏：夹在左右面板之间，贴地图底部横向；无外层背景面板 */
 .vp-room-panel--fill {
 .vp-room-panel--fill {
-  right: 492px;
-  top: 148px;
-  max-height: calc(100% - 260px);
+  left: 50%;
+  right: auto;
+  top: auto;
+  bottom: clamp(14px, 2.2vh, 28px);
+  width: max-content;
+  max-width: min(960px, calc(100vw - 2 * var(--screen-side-w, 24vw) - 48px));
+  max-height: none;
+  transform: translateX(-50%);
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  backdrop-filter: none;
+  box-shadow: none;
+  overflow: visible;
+  z-index: 8;
+  pointer-events: auto;
 }
 }
 .vp-room-head {
 .vp-room-head {
   display: flex; align-items: center; justify-content: center; gap: 6px;
   display: flex; align-items: center; justify-content: center; gap: 6px;
   padding: 7px 8px;
   padding: 7px 8px;
   border-bottom: 1px solid rgba(62,200,255,.12);
   border-bottom: 1px solid rgba(62,200,255,.12);
+  flex-shrink: 0;
 }
 }
 .vp-room-head :deep(.pin) { width: 12px; height: 12px; opacity: .85; }
 .vp-room-head :deep(.pin) { width: 12px; height: 12px; opacity: .85; }
 .vp-room-head > div { text-align: center; }
 .vp-room-head > div { text-align: center; }
@@ -433,17 +478,45 @@ onBeforeUnmount(() => {
   padding: 4px;
   padding: 4px;
   display: flex; flex-direction: column; gap: 2px;
   display: flex; flex-direction: column; gap: 2px;
 }
 }
+.vp-room-panel--fill .vp-room-list {
+  flex: 0 0 auto;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  overflow-x: auto;
+  overflow-y: hidden;
+  gap: 8px;
+  padding: 0;
+}
 .vp-room-item {
 .vp-room-item {
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
   width: 100%;
   width: 100%;
   border: 1px solid rgba(62, 200, 255, 0.18);
   border: 1px solid rgba(62, 200, 255, 0.18);
   background: rgba(22, 58, 110, 0.45);
   background: rgba(22, 58, 110, 0.45);
   border-radius: 4px;
   border-radius: 4px;
   padding: 4px 6px;
   padding: 4px 6px;
-  cursor: pointer; text-align: center;
+  cursor: pointer;
   color: rgba(235, 245, 255, 0.95);
   color: rgba(235, 245, 255, 0.95);
   transition: .15s;
   transition: .15s;
 }
 }
+.vp-room-panel--fill .vp-room-item {
+  width: auto;
+  flex: 0 0 auto;
+  min-width: 88px;
+  padding: 8px 12px;
+  background: rgba(8, 28, 58, 0.55);
+  border: 1px solid rgba(91, 212, 255, 0.32);
+  backdrop-filter: blur(6px);
+}
+.vp-room-item :deep(.room-ico) {
+  width: 12px;
+  height: 12px;
+  flex: 0 0 auto;
+  opacity: 0.9;
+}
 .vp-room-item:hover {
 .vp-room-item:hover {
   border-color: rgba(62,200,255,.42);
   border-color: rgba(62,200,255,.42);
   background: rgba(30, 82, 150, 0.62);
   background: rgba(30, 82, 150, 0.62);
@@ -457,10 +530,16 @@ onBeforeUnmount(() => {
 }
 }
 .vp-room-item.alarm .name { color: #ffb0b0; }
 .vp-room-item.alarm .name { color: #ffb0b0; }
 .vp-room-item .name {
 .vp-room-item .name {
-  font-size: 11px; display: block;
-  white-space: nowrap; line-height: 1.25;
+  font-size: 11px;
+  display: block;
+  white-space: nowrap;
+  line-height: 1.25;
   text-align: center;
   text-align: center;
 }
 }
+.vp-room-panel--fill .vp-room-item .name {
+  font-size: 12px;
+  font-weight: 600;
+}
 .vp-tip { right: 14px; bottom: 16px; font-size: 11px; color: #b9d6f0; }
 .vp-tip { right: 14px; bottom: 16px; font-size: 11px; color: #b9d6f0; }
 .vp-tip :deep(.hand) { width: 14px; height: 14px; }
 .vp-tip :deep(.hand) { width: 14px; height: 14px; }
 .vp-tip b { color: var(--cyan-lt); font-weight: 600; }
 .vp-tip b { color: var(--cyan-lt); font-weight: 600; }

web/src/components/screen/FlipDigit.vue

+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const props = defineProps<{ char: string }>()
+
+const display = ref(props.char || '0')
+const prev = ref(props.char || '0')
+const flipping = ref(false)
+
+watch(
+  () => props.char,
+  (next) => {
+    const n = next || ' '
+    if (n === display.value) return
+    prev.value = display.value
+    display.value = n
+    if (!/[0-9]/.test(n) && !/[0-9]/.test(prev.value)) return
+    flipping.value = false
+    requestAnimationFrame(() => {
+      flipping.value = true
+      window.setTimeout(() => {
+        flipping.value = false
+        prev.value = n
+      }, 520)
+    })
+  },
+)
+</script>
+
+<template>
+  <span class="flip-digit" :class="{ flip: flipping, punct: !/[0-9]/.test(display) }">
+    <span class="static top"><i>{{ display }}</i></span>
+    <span class="static bottom"><i>{{ display }}</i></span>
+    <span class="hinge top" :class="{ active: flipping }"><i>{{ prev }}</i></span>
+    <span class="hinge bottom" :class="{ active: flipping }"><i>{{ display }}</i></span>
+  </span>
+</template>
+
+<style scoped>
+.flip-digit {
+  position: relative;
+  display: inline-block;
+  width: 24px;
+  height: 38px;
+  margin: 0 1.5px;
+  perspective: 180px;
+  font-family: var(--font-num);
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 38px;
+  color: #e8fbff;
+  vertical-align: middle;
+}
+.flip-digit.punct {
+  width: 12px;
+  background: transparent;
+  box-shadow: none;
+}
+.flip-digit.punct .static,
+.flip-digit.punct .hinge {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+.static,
+.hinge {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 50%;
+  overflow: hidden;
+  background: linear-gradient(180deg, #0d2a4a, #071828);
+  border: 1px solid rgba(0, 247, 255, 0.28);
+  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.35);
+}
+.static.top,
+.hinge.top {
+  top: 0;
+  border-radius: 3px 3px 0 0;
+  border-bottom-color: rgba(0, 247, 255, 0.12);
+}
+.static.bottom,
+.hinge.bottom {
+  bottom: 0;
+  border-radius: 0 0 3px 3px;
+  border-top-color: rgba(0, 0, 0, 0.35);
+}
+.static i,
+.hinge i {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 38px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-style: normal;
+}
+.static.top i,
+.hinge.top i {
+  top: 0;
+}
+.static.bottom i,
+.hinge.bottom i {
+  bottom: 0;
+}
+.hinge {
+  z-index: 2;
+  backface-visibility: hidden;
+  transform-style: preserve-3d;
+  pointer-events: none;
+  opacity: 0;
+}
+.hinge.top {
+  transform-origin: bottom center;
+}
+.hinge.bottom {
+  transform-origin: top center;
+  transform: rotateX(90deg);
+}
+.hinge.top.active {
+  opacity: 1;
+  animation: flip-top 0.5s ease-in forwards;
+}
+.hinge.bottom.active {
+  opacity: 1;
+  animation: flip-bottom 0.5s ease-out forwards;
+}
+@keyframes flip-top {
+  0% { transform: rotateX(0deg); }
+  100% { transform: rotateX(-90deg); }
+}
+@keyframes flip-bottom {
+  0% { transform: rotateX(90deg); }
+  100% { transform: rotateX(0deg); }
+}
+</style>

web/src/components/screen/KpiFlipBoard.vue

+<script setup lang="ts">
+import { computed } from 'vue'
+import FlipDigit from '@/components/screen/FlipDigit.vue'
+import AppIcon from '@/components/icons/AppIcon.vue'
+
+export type KpiFlipItem = {
+  key: string
+  label: string
+  value: string
+  hint?: string
+  tone?: 'power' | 'water' | 'cool' | 'device' | 'access'
+  icon?: 'kpi-power' | 'kpi-water' | 'kpi-cool' | 'kpi-device' | 'kpi-access'
+}
+
+const props = defineProps<{ items: KpiFlipItem[] }>()
+
+function charsOf(value: string) {
+  return String(value ?? '').split('')
+}
+
+const list = computed(() => props.items || [])
+</script>
+
+<template>
+  <div class="kpi-flip-board">
+    <div
+      v-for="item in list"
+      :key="item.key"
+      class="kpi-flip"
+      :class="item.tone ? `tone-${item.tone}` : ''"
+    >
+      <div class="kpi-head">
+        <AppIcon v-if="item.icon" :name="item.icon" class-name="kpi-ico" />
+        <div class="kpi-texts">
+          <div class="kpi-label">{{ item.label }}</div>
+          <div v-if="item.hint" class="kpi-hint">{{ item.hint }}</div>
+        </div>
+      </div>
+      <div class="kpi-digits" :aria-label="item.label">
+        <FlipDigit v-for="(ch, i) in charsOf(item.value)" :key="`${item.key}-${i}`" :char="ch" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.kpi-flip-board {
+  display: flex;
+  gap: 10px;
+  width: 100%;
+  pointer-events: auto;
+}
+.kpi-flip {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 10px 12px 12px;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 247, 255, 0.28);
+  background: linear-gradient(180deg, rgba(8, 36, 68, 0.88), rgba(3, 14, 32, 0.78));
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.06),
+    0 8px 20px rgba(0, 0, 0, 0.28);
+  backdrop-filter: blur(8px);
+}
+.kpi-head {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+}
+.kpi-texts {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+}
+.kpi-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #9ad8f0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+.kpi-hint {
+  font-size: 10px;
+  color: rgba(158, 210, 232, 0.72);
+  white-space: nowrap;
+}
+.kpi-digits {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 36px;
+}
+.kpi-flip :deep(.kpi-ico) {
+  width: 22px;
+  height: 22px;
+  flex: 0 0 auto;
+}
+.tone-power { border-color: rgba(255, 180, 64, 0.45); }
+.tone-power .kpi-label { color: #f0c878; }
+.tone-water { border-color: rgba(56, 189, 248, 0.45); }
+.tone-water .kpi-label { color: #7dd3fc; }
+.tone-cool { border-color: rgba(103, 232, 249, 0.42); }
+.tone-cool .kpi-label { color: #a5f3fc; }
+.tone-device { border-color: rgba(52, 211, 153, 0.45); }
+.tone-device .kpi-label { color: #6ee7b7; }
+.tone-access { border-color: rgba(167, 139, 250, 0.45); }
+.tone-access .kpi-label { color: #c4b5fd; }
+</style>

web/src/components/screen/ScreenHeader.vue

@@ -22,35 +22,41 @@ defineProps<{
 <style scoped>
 <style scoped>
 .screen-header-hy {
 .screen-header-hy {
   position: relative;
   position: relative;
-  width: 1920px;
-  height: 84px;
+  width: 100%;
+  height: clamp(64px, 7.8vh, 84px);
   flex-shrink: 0;
   flex-shrink: 0;
   pointer-events: auto;
   pointer-events: auto;
 }
 }
 .banner {
 .banner {
   display: block;
   display: block;
-  width: 1920px;
-  height: 84px;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center top;
 }
 }
 h1 {
 h1 {
   position: absolute;
   position: absolute;
-  left: 0;
-  right: 0;
-  top: 10px;
+  left: 12%;
+  right: 12%;
+  top: 50%;
+  transform: translateY(-55%);
   z-index: 1;
   z-index: 1;
   margin: 0;
   margin: 0;
-  height: 42px;
-  line-height: 42px;
+  height: auto;
+  line-height: 1.2;
   text-align: center;
   text-align: center;
   font-family: var(--title-font);
   font-family: var(--title-font);
-  font-size: 30px;
+  font-size: clamp(16px, 1.7vw, 30px);
   font-weight: 900;
   font-weight: 900;
   font-synthesis: style;
   font-synthesis: style;
-  letter-spacing: 6px;
+  letter-spacing: clamp(2px, 0.35vw, 6px);
   color: #f4feff;
   color: #f4feff;
   font-style: italic;
   font-style: italic;
   text-shadow: 0 0 14px rgba(0, 200, 255, 0.45);
   text-shadow: 0 0 14px rgba(0, 200, 255, 0.45);
   pointer-events: none;
   pointer-events: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 }
 .slot-left,
 .slot-left,
 .slot-right {
 .slot-right {
@@ -60,13 +66,15 @@ h1 {
   z-index: 2;
   z-index: 2;
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
-  gap: 12px;
+  gap: clamp(6px, 0.8vw, 12px);
   pointer-events: auto;
   pointer-events: auto;
+  max-width: min(36vw, 420px);
 }
 }
 .slot-left {
 .slot-left {
-  left: 24px;
+  left: clamp(8px, 1.2vw, 24px);
 }
 }
 .slot-right {
 .slot-right {
-  right: 24px;
+  right: clamp(8px, 1.2vw, 24px);
+  justify-content: flex-end;
 }
 }
 </style>
 </style>

web/src/composables/useMacauWeather.ts

 import { onMounted, onUnmounted, ref } from 'vue'
 import { onMounted, onUnmounted, ref } from 'vue'
+import { api } from '@/api/http'
 
 
-/** WMO Weather interpretation codes → 中文简述 */
-function weatherText(code: number): string {
-  if (code === 0) return '晴'
-  if (code <= 3) return '多云'
-  if (code <= 48) return '雾'
-  if (code <= 57) return '毛毛雨'
-  if (code <= 67) return '雨'
-  if (code <= 77) return '雪'
-  if (code <= 82) return '阵雨'
-  if (code <= 86) return '阵雪'
-  if (code <= 99) return '雷雨'
-  return '未知'
-}
-
-const MACAU = { lat: 22.1987, lon: 113.5439 }
 const REFRESH_MS = 15 * 60 * 1000
 const REFRESH_MS = 15 * 60 * 1000
 
 
+type MacauWeatherDto = {
+  place?: string
+  temp?: string
+  text?: string
+  humidity?: string
+}
+
+/**
+ * 澳门天气：经后端代理拉取地球物理气象局简报
+ * @see https://www.smg.gov.mo/zh
+ */
 export function useMacauWeather() {
 export function useMacauWeather() {
   const place = ref('澳门')
   const place = ref('澳门')
   const temp = ref('--')
   const temp = ref('--')
@@ -26,29 +23,23 @@ export function useMacauWeather() {
 
 
   async function fetchWeather() {
   async function fetchWeather() {
     try {
     try {
-      const url =
-        `https://api.open-meteo.com/v1/forecast` +
-        `?latitude=${MACAU.lat}&longitude=${MACAU.lon}` +
-        `&current=temperature_2m,relative_humidity_2m,weather_code` +
-        `&timezone=Asia%2FMacau`
-      const res = await fetch(url)
-      if (!res.ok) throw new Error(`HTTP ${res.status}`)
-      const data = await res.json()
-      const cur = data.current
-      if (!cur) throw new Error('no current')
-      temp.value = `${Math.round(cur.temperature_2m)}℃`
-      text.value = weatherText(Number(cur.weather_code))
-      humidity.value = `${cur.relative_humidity_2m}%`
+      const data = await api<MacauWeatherDto>('/api/weather/macau')
+      place.value = data.place || '澳门'
+      temp.value = data.temp || '--'
+      text.value = data.text || '—'
+      humidity.value = data.humidity || '--'
     } catch {
     } catch {
       text.value = '暂无数据'
       text.value = '暂无数据'
     }
     }
   }
   }
 
 
   onMounted(() => {
   onMounted(() => {
-    fetchWeather()
-    timer = window.setInterval(fetchWeather, REFRESH_MS)
+    void fetchWeather()
+    timer = window.setInterval(() => void fetchWeather(), REFRESH_MS)
+  })
+  onUnmounted(() => {
+    if (timer) window.clearInterval(timer)
   })
   })
-  onUnmounted(() => window.clearInterval(timer))
 
 
   return { place, temp, text, humidity }
   return { place, temp, text, humidity }
 }
 }

web/src/composables/useMetricHistory.ts

+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { api } from '@/api/http'
+import type { HistorySeries } from '@/utils/historyChart'
+
+export function useMetricHistory(
+  getQuery: () => { source: string; metric: string; hours?: number; bucketMinutes?: number },
+  pollMs = 60_000,
+) {
+  const series = ref<HistorySeries[]>([])
+  const loading = ref(false)
+  const error = ref('')
+  let timer: number | undefined
+
+  async function refresh() {
+    const q = getQuery()
+    if (!q.source || !q.metric) return
+    loading.value = true
+    error.value = ''
+    try {
+      const params = new URLSearchParams({
+        source: q.source,
+        metric: q.metric,
+        hours: String(q.hours ?? 24),
+        bucketMinutes: String(q.bucketMinutes ?? 15),
+      })
+      const res = await api<{ series: HistorySeries[] }>(`/api/realtime/history?${params}`)
+      series.value = res.series || []
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : '历史加载失败'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  onMounted(() => {
+    void refresh()
+    timer = window.setInterval(() => void refresh(), pollMs)
+  })
+  onBeforeUnmount(() => {
+    if (timer) window.clearInterval(timer)
+  })
+
+  watch(getQuery, () => void refresh(), { deep: true })
+
+  return { series, loading, error, refresh }
+}

web/src/composables/useRtengineBridge.ts

@@ -352,12 +352,10 @@ export function useRtengineBridge(opts: {
     send('clearMarkers', {})
     send('clearMarkers', {})
   }
   }
 
 
-  /** 显示场景内预设 POI / Marker */
+  /** 显示场景内预设 POI / Marker（合并为一次，减少场景刷新/光照闪变） */
   function showScenePresets() {
   function showScenePresets() {
-    send('showPOIs', { visible: true })
-    send('setPoiVisible', { visible: true })
-    send('setPoiGroupVisible', { visible: true })
     send('setMarkerVisible', { visible: true })
     send('setMarkerVisible', { visible: true })
+    send('showPOIs', { visible: true })
   }
   }
 
 
   let readyNotified = false
   let readyNotified = false

web/src/composables/useScreenDashboard.ts

+import { onBeforeUnmount, onMounted, shallowRef, ref } from 'vue'
+import { api } from '@/api/http'
+import type { ScreenDashboard } from '@/types/screen'
+
+const emptyDigits: ScreenDashboard['digits'] = {
+  deviceTotal: 0,
+  deviceOnline: 0,
+  roomOk: 0,
+  roomTotal: 0,
+  fridgeOk: 0,
+  fridgeTotal: 0,
+  alarmOpen: 0,
+  gatewayOk: false,
+  powerKwh: 0,
+  waterM3: 0,
+  coolingKwh: 0,
+}
+
+export function useScreenDashboard(pollMs = 5000) {
+  /** shallow：整包替换，避免对 curves/snapshot 深度代理导致渲染卡死 */
+  const data = shallowRef<ScreenDashboard | null>(null)
+  const loading = ref(false)
+  const error = ref('')
+  let timer: number | undefined
+  let inFlight = false
+
+  async function refresh() {
+    if (inFlight) return
+    inFlight = true
+    try {
+      const next = await api<ScreenDashboard>('/api/realtime/screen')
+      data.value = next
+      error.value = ''
+    } catch (e) {
+      if (!data.value) {
+        error.value = e instanceof Error ? e.message : '大屏数据加载失败'
+      }
+    } finally {
+      loading.value = false
+      inFlight = false
+    }
+  }
+
+  onMounted(() => {
+    void refresh()
+    timer = window.setInterval(() => void refresh(), pollMs)
+  })
+  onBeforeUnmount(() => {
+    if (timer) window.clearInterval(timer)
+  })
+
+  return { data, loading, error, refresh, emptyDigits }
+}

web/src/composables/useStageScale.ts

 import { onMounted, onUnmounted, ref } from 'vue'
 import { onMounted, onUnmounted, ref } from 'vue'
 
 
+/**
+ * 大屏铺满浏览器视口（无 1920×1080 黑边缩放）。
+ * 同步写入 --screen-side-w，供左右面板与侧栏对齐。
+ */
 export function useStageScale() {
 export function useStageScale() {
-  const style = ref({
-    transform: 'scale(1)',
-    left: '0px',
-    top: '0px',
+  const style = ref<Record<string, string>>({
+    position: 'fixed',
+    inset: '0',
+    width: '100%',
+    height: '100%',
+    transform: 'none',
+    left: '0',
+    top: '0',
   })
   })
 
 
   function fit() {
   function fit() {
-    const s = Math.min(window.innerWidth / 1920, window.innerHeight / 1080)
-    style.value = {
-      transform: `scale(${s})`,
-      left: `${(window.innerWidth - 1920 * s) / 2}px`,
-      top: `${(window.innerHeight - 1080 * s) / 2}px`,
-    }
+    const w = window.innerWidth
+    // 窄屏收窄侧栏，宽屏不超过 480
+    const side = Math.round(Math.min(480, Math.max(280, w * 0.24)))
+    document.documentElement.style.setProperty('--screen-side-w', `${side}px`)
+    document.documentElement.style.setProperty('--screen-vw', `${w}px`)
+    document.documentElement.style.setProperty('--screen-vh', `${window.innerHeight}px`)
   }
   }
 
 
   onMounted(() => {
   onMounted(() => {

web/src/layouts/AdminLayout.vue

@@ -44,6 +44,13 @@ const navItems = computed(() =>
       icon: 'cameras',
       icon: 'cameras',
     },
     },
     {
     {
+      to: '/admin/history',
+      label: '历史曲线',
+      hint: '时序 / 指标',
+      tone: 'accent' as const,
+      icon: 'devices',
+    },
+    {
       to: '/admin/users',
       to: '/admin/users',
       label: '用户管理',
       label: '用户管理',
       hint: '账号 / 角色',
       hint: '账号 / 角色',

web/src/router/index.ts

@@ -90,6 +90,12 @@ const router = createRouter({
           meta: { title: '冷链监测', public: true },
           meta: { title: '冷链监测', public: true },
         },
         },
         {
         {
+          path: 'history',
+          name: 'history',
+          component: () => import('@/views/history/HistoryView.vue'),
+          meta: { title: '历史曲线', public: true },
+        },
+        {
           path: 'light',
           path: 'light',
           name: 'light',
           name: 'light',
           component: () => import('@/views/light/LightView.vue'),
           component: () => import('@/views/light/LightView.vue'),
@@ -110,6 +116,12 @@ const router = createRouter({
           meta: { title: '设备管理', requiresAuth: true },
           meta: { title: '设备管理', requiresAuth: true },
         },
         },
         {
         {
+          path: 'history',
+          name: 'admin-history',
+          component: () => import('@/views/history/HistoryView.vue'),
+          meta: { title: '历史曲线', requiresAuth: true },
+        },
+        {
           path: 'cameras',
           path: 'cameras',
           name: 'cameras',
           name: 'cameras',
           component: () => import('@/views/cameras/CamerasView.vue'),
           component: () => import('@/views/cameras/CamerasView.vue'),

web/src/stores/realtime.ts

@@ -65,6 +65,10 @@ export const useRealtimeStore = defineStore('realtime', () => {
     selectedRoomId.value = id
     selectedRoomId.value = id
   }
   }
 
 
+  function setSnapshot(next: RealtimeSnapshot) {
+    snapshot.value = next
+  }
+
   function connect() {
   function connect() {
     const url = import.meta.env.VITE_WS_URL || `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/ws`
     const url = import.meta.env.VITE_WS_URL || `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/ws`
     ws?.close()
     ws?.close()
@@ -101,6 +105,7 @@ export const useRealtimeStore = defineStore('realtime', () => {
     alarmCount,
     alarmCount,
     primaryRoom,
     primaryRoom,
     selectRoom,
     selectRoom,
+    setSnapshot,
     connect,
     connect,
     disconnect,
     disconnect,
   }
   }

web/src/styles/screen.css

 .stage {
 .stage {
-  position: absolute;
-  width: 1920px;
-  height: 1080px;
-  transform-origin: top left;
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  max-width: 100vw;
+  max-height: 100vh;
+  transform: none;
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
   overflow: hidden;
   overflow: hidden;
   background: #00060f;
   background: #00060f;
   color: var(--text);
   color: var(--text);
   font-family: var(--body-font);
   font-family: var(--body-font);
+  /* 左右业务栏宽度，随视口由 useStageScale 更新 */
+  --screen-side-w: clamp(280px, 24vw, 480px);
 }
 }
 .stage::before {
 .stage::before {
   content: none;
   content: none;

web/src/types/screen.ts

+import type { RealtimeSnapshot } from '@/types'
+
+export type FridgeTempSeries = {
+  id: string
+  name: string
+  points: { t: number; temp: number }[]
+}
+
+export type TsSeries = {
+  id: string
+  name?: string
+  points: { t: number; v: number }[]
+}
+
+export type ScreenCurves = {
+  roomTemp: TsSeries[]
+  roomHumidity: TsSeries[]
+  roomPressure: TsSeries[]
+  fridgeTemp: TsSeries[]
+  fridgeHumidity: TsSeries[]
+  vavAirflow: TsSeries[]
+  vavFaceVelocity: TsSeries[]
+  hvacSupplyTemp: TsSeries[]
+  hvacSupplyHumidity: TsSeries[]
+  hvacSupplyPressure: TsSeries[]
+  hvacFreshAirTemp: TsSeries[]
+  hvacExhaustPressure: TsSeries[]
+  meteringPower: TsSeries[]
+  meteringWater: TsSeries[]
+  meteringCooling: TsSeries[]
+}
+
+export type ScreenDashboard = {
+  ts: number
+  snapshot: RealtimeSnapshot
+  categoryPie: { name: string; value: number; category: string }[]
+  statusPie: { name: string; value: number }[]
+  powerBars: { name: string; value: number | null }[]
+  pressureBars: { name: string; value: number | null; ok: boolean }[]
+  envBubbles: {
+    name: string
+    temp: number | null
+    humidity: number | null
+    pressure: number | null
+    ok: boolean
+  }[]
+  fridgeBars: { id: string; name: string; temp: number | null; ok: boolean }[]
+  fridgeSeries: FridgeTempSeries[]
+  curves?: ScreenCurves
+  digits: {
+    deviceTotal: number
+    deviceOnline: number
+    roomOk: number
+    roomTotal: number
+    fridgeOk: number
+    fridgeTotal: number
+    alarmOpen: number
+    gatewayOk: boolean
+    powerKwh: number
+    waterM3: number
+    coolingKwh: number
+  }
+  pauCards: { label: string; value: number | null; unit: string; ok: boolean | null }[]
+  vavBars: { name: string; airflow: number | null; faceVelocity: number | null; running: boolean }[]
+}

web/src/utils/chartTooltip.ts

+/** 大屏图表统一：小字号、紧凑浮层、数值四舍五入 */
+
+export function roundNum(v: unknown, digits = 1): string {
+  if (v === null || v === undefined || v === '') return '—'
+  const n = Number(v)
+  if (!Number.isFinite(n)) return String(v)
+  const f = 10 ** digits
+  return String(Math.round(n * f) / f)
+}
+
+export const compactTooltipBase = {
+  backgroundColor: 'rgba(4, 18, 36, 0.92)',
+  borderColor: 'rgba(0, 247, 255, 0.28)',
+  borderWidth: 1,
+  padding: [6, 8] as [number, number],
+  textStyle: {
+    color: '#b8d4e8',
+    fontSize: 11,
+    lineHeight: 16,
+  },
+  extraCssText: 'box-shadow:0 4px 12px rgba(0,0,0,.35);border-radius:4px;max-width:220px;',
+}
+
+/** 折线 axis tooltip：系列值四舍五入 */
+export function axisTooltip(unit = '') {
+  return {
+    ...compactTooltipBase,
+    trigger: 'axis' as const,
+    axisPointer: { type: 'line' as const, lineStyle: { color: 'rgba(0,247,255,0.25)' } },
+    formatter: (params: unknown) => {
+      const list = Array.isArray(params) ? params : [params]
+      if (!list.length) return ''
+      const axis = String((list[0] as { axisValueLabel?: string }).axisValueLabel ?? '')
+      const lines = list.map((raw) => {
+        const p = raw as { marker?: string; seriesName?: string; value?: unknown }
+        const val = Array.isArray(p.value) ? p.value[p.value.length - 1] : p.value
+        const num = roundNum(val, 1)
+        return `${p.marker || ''}${p.seriesName || ''} <b style="font-weight:600;color:#e8fbff">${num}${unit}</b>`
+      })
+      return `<div style="font-size:10px;color:#7a9bb0;margin-bottom:2px">${axis}</div>${lines.join('<br/>')}`
+    },
+  }
+}
+
+/** 饼图 item tooltip */
+export function pieTooltip() {
+  return {
+    ...compactTooltipBase,
+    trigger: 'item' as const,
+    formatter: (params: unknown) => {
+      const p = params as { marker?: string; name?: string; value?: unknown; percent?: number }
+      return `${p.marker || ''}${p.name || ''} <b style="color:#e8fbff">${roundNum(p.value, 0)}</b>` +
+        (p.percent != null ? ` <span style="color:#7a9bb0">(${Math.round(p.percent)}%)</span>` : '')
+    },
+  }
+}

web/src/utils/historyChart.ts

+import type { ECOption } from '@/components/charts/EChart.vue'
+import { axisTooltip } from '@/utils/chartTooltip'
+
+export type HistoryPoint = { t: number; v: number }
+export type HistorySeries = { id: string; name?: string; points: HistoryPoint[] }
+
+const PALETTE = [
+  '#37c8ff',
+  '#52c41a',
+  '#faad14',
+  '#b37feb',
+  '#ff85c0',
+  '#5cdbd3',
+  '#69c0ff',
+  '#95de64',
+  '#ff9c6e',
+  '#85a5ff',
+]
+
+const chartText = '#9ec8dc'
+const chartMuted = 'rgba(158,200,220,0.35)'
+
+function formatTick(t: number) {
+  const d = new Date(t)
+  return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
+}
+
+/** 多设备历史折线（统一时间轴） */
+export function multiLineOption(
+  series: HistorySeries[],
+  opts?: { unit?: string; maxSeries?: number; yName?: string },
+): ECOption {
+  const maxSeries = opts?.maxSeries ?? 12
+  const list = series.filter((s) => s.points?.length).slice(0, maxSeries)
+  if (!list.length) {
+    return { backgroundColor: 'transparent', series: [{ type: 'line', data: [] }] }
+  }
+
+  const times = new Set<number>()
+  for (const s of list) for (const p of s.points) times.add(p.t)
+  const xs = [...times].sort((a, b) => a - b)
+  const unit = opts?.unit || ''
+
+  return {
+    backgroundColor: 'transparent',
+    legend: {
+      type: 'scroll',
+      bottom: 0,
+      textStyle: { color: chartText, fontSize: 9 },
+      pageTextStyle: { color: chartText },
+    },
+    grid: { left: 42, right: 10, top: 16, bottom: 36 },
+    tooltip: axisTooltip(unit),
+    xAxis: {
+      type: 'category',
+      data: xs.map(formatTick),
+      axisLabel: { color: chartText, fontSize: 9 },
+      axisLine: { lineStyle: { color: chartMuted } },
+    },
+    yAxis: {
+      type: 'value',
+      scale: true,
+      name: opts?.yName || unit,
+      nameTextStyle: { color: chartMuted, fontSize: 10 },
+      axisLabel: {
+        color: chartText,
+        fontSize: 10,
+        formatter: (v: number) => {
+          const n = Math.round(Number(v) * 10) / 10
+          return unit ? `${n}${unit}` : String(n)
+        },
+      },
+      splitLine: { lineStyle: { color: 'rgba(0,247,255,0.08)' } },
+    },
+    series: list.map((s, i) => {
+      const map = new Map(s.points.map((p) => [p.t, p.v]))
+      return {
+        name: s.name || s.id,
+        type: 'line' as const,
+        showSymbol: false,
+        smooth: true,
+        lineStyle: { width: 1.5 },
+        itemStyle: { color: PALETTE[i % PALETTE.length] },
+        data: xs.map((t) => {
+          const v = map.get(t)
+          return v == null ? null : Math.round(v * 10) / 10
+        }),
+      }
+    }),
+  }
+}
+
+export function toHistorySeries(
+  series: { id: string; name?: string; points: { t: number; temp?: number; v?: number }[] }[],
+): HistorySeries[] {
+  return series.map((s) => ({
+    id: s.id,
+    name: s.name,
+    points: s.points.map((p) => ({
+      t: p.t,
+      v: p.v ?? p.temp ?? 0,
+    })),
+  }))
+}

web/src/views/cold/ColdView.vue

 <script setup lang="ts">
 <script setup lang="ts">
+import { computed, onMounted, onBeforeUnmount, ref } from 'vue'
+import { api } from '@/api/http'
+import EChart from '@/components/charts/EChart.vue'
 import { useRealtimeStore } from '@/stores/realtime'
 import { useRealtimeStore } from '@/stores/realtime'
+import { multiLineOption } from '@/utils/historyChart'
+
 const realtime = useRealtimeStore()
 const realtime = useRealtimeStore()
+const series = ref<{ id: string; name?: string; points: { t: number; v: number }[] }[]>([])
+const humidity = ref<{ id: string; name?: string; points: { t: number; v: number }[] }[]>([])
+const loading = ref(false)
+let timer: number | undefined
+
+const tempOption = computed(() => multiLineOption(series.value, { unit: '℃', maxSeries: 12 }))
+const humidityOption = computed(() => multiLineOption(humidity.value, { unit: '%', maxSeries: 12 }))
+
+async function load() {
+  loading.value = true
+  try {
+    const [t, h] = await Promise.all([
+      api<{ series: typeof series.value }>('/api/realtime/history?source=fridge&metric=temp&hours=24&bucketMinutes=15'),
+      api<{ series: typeof humidity.value }>(
+        '/api/realtime/history?source=fridge&metric=humidity&hours=24&bucketMinutes=15',
+      ),
+    ])
+    series.value = t.series || []
+    humidity.value = h.series || []
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  void load()
+  timer = window.setInterval(() => void load(), 60_000)
+})
+onBeforeUnmount(() => {
+  if (timer) window.clearInterval(timer)
+})
 </script>
 </script>
 
 
 <template>
 <template>
-  <div class="page-fill">
-    <section class="panel" style="flex:1; overflow:auto">
+  <div class="page-fill cold-page">
+    <section class="panel" style="flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px">
       <div class="panel-head">
       <div class="panel-head">
-        <div class="panel-title"><div class="vbar" /><h3>冷链监测</h3></div>
-        <div class="badge">E栋 · 网关 192.168.10.105</div>
+        <div class="panel-title"><div class="vbar" /><h3>冷链监测 · 历史曲线</h3></div>
+        <div class="badge">E栋 · 近 24h</div>
+      </div>
+
+      <div class="charts">
+        <div class="chart-card">
+          <div class="chart-title">温度 ℃</div>
+          <EChart :option="tempOption" :loading="loading" empty-text="温度历史积累中" />
+        </div>
+        <div class="chart-card">
+          <div class="chart-title">湿度 %RH</div>
+          <EChart :option="humidityOption" :loading="loading" empty-text="湿度历史积累中" />
+        </div>
       </div>
       </div>
+
       <table class="table">
       <table class="table">
         <thead>
         <thead>
           <tr><th>设备</th><th>温度 (℃)</th><th>湿度 (%)</th><th>状态</th></tr>
           <tr><th>设备</th><th>温度 (℃)</th><th>湿度 (%)</th><th>状态</th></tr>
@@ -17,8 +65,10 @@ const realtime = useRealtimeStore()
         <tbody>
         <tbody>
           <tr v-for="f in realtime.snapshot.fridges" :key="f.id">
           <tr v-for="f in realtime.snapshot.fridges" :key="f.id">
             <td>{{ f.name }}</td>
             <td>{{ f.name }}</td>
-            <td :style="{ color: f.temp > -19 ? 'var(--amber)' : 'var(--green)' }">T: {{ f.temp.toFixed(1) }} ℃</td>
-            <td>RH: {{ f.humidity }} %</td>
+            <td :style="{ color: f.temp > -19 ? 'var(--amber)' : 'var(--green)' }">
+              {{ f.temp.toFixed(1) }} ℃
+            </td>
+            <td>{{ f.humidity }} %</td>
             <td>{{ f.temp > -19 ? '超限' : '正常' }}</td>
             <td>{{ f.temp > -19 ? '超限' : '正常' }}</td>
           </tr>
           </tr>
         </tbody>
         </tbody>
@@ -26,3 +76,32 @@ const realtime = useRealtimeStore()
     </section>
     </section>
   </div>
   </div>
 </template>
 </template>
+
+<style scoped>
+.cold-page { display: flex; min-height: 0; }
+.charts {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  min-height: 260px;
+  flex: 1;
+}
+.chart-card {
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid rgba(0, 247, 255, 0.16);
+  border-radius: 6px;
+  padding: 8px;
+  background: rgba(4, 16, 32, 0.35);
+}
+.chart-title {
+  font-size: 12px;
+  color: var(--label);
+  margin-bottom: 4px;
+}
+.chart-card :deep(.echart-wrap) {
+  flex: 1;
+  min-height: 200px;
+}
+</style>

web/src/views/history/HistoryView.vue

+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { api } from '@/api/http'
+import EChart from '@/components/charts/EChart.vue'
+import { multiLineOption } from '@/utils/historyChart'
+
+type CatalogItem = {
+  source: string
+  metric: string
+  deviceId: string
+  seriesId: string
+  points: number
+  lastBucket: string | null
+  sourceLabel: string
+  metricLabel: string
+  name: string
+}
+
+type HistSeries = { id: string; name?: string; points: { t: number; v: number }[] }
+
+const catalog = ref<CatalogItem[]>([])
+const loading = ref(false)
+const error = ref('')
+const hours = ref(24)
+const bucketMinutes = ref(15)
+const source = ref('')
+const metric = ref('')
+const deviceId = ref('')
+const series = ref<HistSeries[]>([])
+
+const sources = computed(() => {
+  const map = new Map<string, string>()
+  for (const c of catalog.value) map.set(c.source, c.sourceLabel)
+  return [...map.entries()].map(([value, label]) => ({ value, label }))
+})
+
+const metrics = computed(() => {
+  const map = new Map<string, string>()
+  for (const c of catalog.value) {
+    if (source.value && c.source !== source.value) continue
+    map.set(c.metric, c.metricLabel)
+  }
+  return [...map.entries()].map(([value, label]) => ({ value, label }))
+})
+
+const devices = computed(() => {
+  return catalog.value
+    .filter((c) => (!source.value || c.source === source.value) && (!metric.value || c.metric === metric.value))
+    .map((c) => ({ value: c.deviceId, label: c.name, points: c.points }))
+})
+
+const chartOption = computed(() =>
+  multiLineOption(series.value, {
+    maxSeries: 16,
+    unit: metric.value === 'temp' || metric.value.includes('temp') ? '℃' : metric.value === 'pressure' ? 'Pa' : '',
+  }),
+)
+
+const summary = computed(() => {
+  const n = series.value.length
+  const pts = series.value.reduce((s, x) => s + x.points.length, 0)
+  return `${n} 条序列 · ${pts} 个聚合点 · 近 ${hours.value}h`
+})
+
+async function loadCatalog() {
+  loading.value = true
+  error.value = ''
+  try {
+    const res = await api<{ catalog: CatalogItem[] }>('/api/realtime/history/catalog')
+    catalog.value = res.catalog || []
+    if (!source.value && catalog.value.length) {
+      source.value = catalog.value[0].source
+      metric.value = catalog.value[0].metric
+    }
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : '目录加载失败'
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadSeries() {
+  if (!source.value || !metric.value) {
+    series.value = []
+    return
+  }
+  loading.value = true
+  error.value = ''
+  try {
+    const q = new URLSearchParams({
+      source: source.value,
+      metric: metric.value,
+      hours: String(hours.value),
+      bucketMinutes: String(bucketMinutes.value),
+    })
+    if (deviceId.value) q.set('deviceId', deviceId.value)
+    const res = await api<{ series: HistSeries[] }>(`/api/realtime/history?${q}`)
+    series.value = res.series || []
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : '曲线加载失败'
+    series.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+watch([source, metric], () => {
+  deviceId.value = ''
+})
+
+watch([source, metric, deviceId, hours, bucketMinutes], () => {
+  void loadSeries()
+})
+
+onMounted(async () => {
+  await loadCatalog()
+  await loadSeries()
+})
+</script>
+
+<template>
+  <div class="page-fill history-page">
+    <section class="panel history-panel">
+      <div class="panel-head">
+        <div class="panel-title"><div class="vbar" /><h3>历史数据与曲线</h3></div>
+        <div class="badge">时序预聚合 · {{ summary }}</div>
+      </div>
+
+      <div class="filters">
+        <label>
+          类别
+          <select v-model="source">
+            <option v-for="s in sources" :key="s.value" :value="s.value">{{ s.label }}</option>
+          </select>
+        </label>
+        <label>
+          指标
+          <select v-model="metric">
+            <option v-for="m in metrics" :key="m.value" :value="m.value">{{ m.label }}</option>
+          </select>
+        </label>
+        <label>
+          设备
+          <select v-model="deviceId">
+            <option value="">全部设备</option>
+            <option v-for="d in devices" :key="d.value" :value="d.value">
+              {{ d.label }} ({{ d.points }})
+            </option>
+          </select>
+        </label>
+        <label>
+          时长
+          <select v-model.number="hours">
+            <option :value="6">近 6 小时</option>
+            <option :value="24">近 24 小时</option>
+            <option :value="72">近 3 天</option>
+            <option :value="168">近 7 天</option>
+          </select>
+        </label>
+        <label>
+          粒度
+          <select v-model.number="bucketMinutes">
+            <option :value="5">5 分钟</option>
+            <option :value="15">15 分钟</option>
+            <option :value="60">1 小时</option>
+          </select>
+        </label>
+        <button type="button" class="btn" :disabled="loading" @click="loadSeries">刷新</button>
+      </div>
+
+      <div v-if="error" class="err">{{ error }}</div>
+
+      <div class="chart-box">
+        <EChart :option="chartOption" :loading="loading" empty-text="暂无该指标历史数据，采集后将自动出现" />
+      </div>
+
+      <div class="table-wrap">
+        <table class="table">
+          <thead>
+            <tr>
+              <th>设备</th>
+              <th>点数</th>
+              <th>最新</th>
+              <th>最低</th>
+              <th>最高</th>
+              <th>平均</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="s in series" :key="s.id">
+              <td>{{ s.name || s.id }}</td>
+              <td>{{ s.points.length }}</td>
+              <td>{{ s.points.length ? s.points[s.points.length - 1].v.toFixed(2) : '—' }}</td>
+              <td>
+                {{
+                  s.points.length ? Math.min(...s.points.map((p) => p.v)).toFixed(2) : '—'
+                }}
+              </td>
+              <td>
+                {{
+                  s.points.length ? Math.max(...s.points.map((p) => p.v)).toFixed(2) : '—'
+                }}
+              </td>
+              <td>
+                {{
+                  s.points.length
+                    ? (s.points.reduce((a, p) => a + p.v, 0) / s.points.length).toFixed(2)
+                    : '—'
+                }}
+              </td>
+            </tr>
+            <tr v-if="!series.length">
+              <td colspan="6" class="muted">无数据</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.history-page {
+  display: flex;
+  min-height: 0;
+}
+.history-panel {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 14px;
+  align-items: end;
+  padding: 8px 4px 12px;
+}
+.filters label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 11px;
+  color: var(--label, #8eb0c4);
+}
+.filters select {
+  min-width: 120px;
+  height: 30px;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 247, 255, 0.25);
+  background: rgba(4, 20, 40, 0.85);
+  color: #e8f6ff;
+  padding: 0 8px;
+}
+.btn {
+  height: 30px;
+  padding: 0 14px;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 247, 255, 0.35);
+  background: rgba(0, 120, 160, 0.35);
+  color: #dff8ff;
+  cursor: pointer;
+}
+.btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.chart-box {
+  flex: 1;
+  min-height: 280px;
+  border: 1px solid rgba(0, 247, 255, 0.15);
+  border-radius: 6px;
+  background: rgba(4, 16, 32, 0.4);
+  padding: 6px;
+}
+.table-wrap {
+  margin-top: 10px;
+  max-height: 220px;
+  overflow: auto;
+}
+.muted {
+  text-align: center;
+  color: var(--label);
+}
+.err {
+  color: #ffb0b0;
+  font-size: 12px;
+  margin-bottom: 8px;
+}
+</style>

web/src/views/hvac/HvacView.vue

 <script setup lang="ts">
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useAuthStore } from '@/stores/auth'
 import { useAuthStore } from '@/stores/auth'
 import { useRealtimeStore } from '@/stores/realtime'
 import { useRealtimeStore } from '@/stores/realtime'
 import { api } from '@/api/http'
 import { api } from '@/api/http'
+import EChart from '@/components/charts/EChart.vue'
+import { useMetricHistory } from '@/composables/useMetricHistory'
+import { multiLineOption } from '@/utils/historyChart'
 
 
 const auth = useAuthStore()
 const auth = useAuthStore()
 const realtime = useRealtimeStore()
 const realtime = useRealtimeStore()
 const pressureSet = ref(180)
 const pressureSet = ref(180)
 
 
+const { series: supplyTemp, loading: loadTemp } = useMetricHistory(() => ({
+  source: 'hvac',
+  metric: 'supply_temp',
+}))
+const { series: supplyPressure, loading: loadPress } = useMetricHistory(() => ({
+  source: 'hvac',
+  metric: 'supply_pressure',
+}))
+const { series: exhaustPressure, loading: loadEx } = useMetricHistory(() => ({
+  source: 'hvac',
+  metric: 'exhaust_pressure',
+}))
+
+const hvacHistoryOpt = computed(() =>
+  multiLineOption(
+    [
+      ...supplyTemp.value.map((s) => ({ ...s, name: '送风温度' })),
+      ...supplyPressure.value.map((s) => ({ ...s, name: '送风压力' })),
+      ...exhaustPressure.value.map((s) => ({ ...s, name: '排风压力' })),
+    ],
+    { maxSeries: 6 },
+  ),
+)
+const histLoading = computed(() => loadTemp.value || loadPress.value || loadEx.value)
+
 async function applySet() {
 async function applySet() {
   if (!auth.isAdmin) return
   if (!auth.isAdmin) return
   await api('/api/realtime/write', {
   await api('/api/realtime/write', {
@@ -34,6 +62,10 @@ async function applySet() {
         <div class="metric"><div><div class="m-label">排风压力</div><div class="m-value">{{ realtime.snapshot.hvac.exhaustPressure }}</div></div></div>
         <div class="metric"><div><div class="m-label">排风压力</div><div class="m-value">{{ realtime.snapshot.hvac.exhaustPressure }}</div></div></div>
         <div class="metric"><div><div class="m-label">新风温度</div><div class="m-value">{{ realtime.snapshot.hvac.freshAirTemp.toFixed(1) }}</div></div></div>
         <div class="metric"><div><div class="m-label">新风温度</div><div class="m-value">{{ realtime.snapshot.hvac.freshAirTemp.toFixed(1) }}</div></div></div>
       </div>
       </div>
+      <div class="hist">
+        <div class="chart-title">近 24h 历史曲线</div>
+        <EChart :option="hvacHistoryOpt" :loading="histLoading" empty-text="机组历史积累中" />
+      </div>
     </section>
     </section>
     <section class="panel">
     <section class="panel">
       <div class="panel-head">
       <div class="panel-head">
@@ -53,3 +85,16 @@ async function applySet() {
     </section>
     </section>
   </div>
   </div>
 </template>
 </template>
+
+<style scoped>
+.hist {
+  margin-top: 12px;
+  min-height: 220px;
+  border: 1px solid rgba(0, 247, 255, 0.16);
+  border-radius: 6px;
+  padding: 8px;
+  background: rgba(4, 16, 32, 0.35);
+}
+.chart-title { font-size: 12px; color: var(--label); margin-bottom: 4px; }
+.hist :deep(.echart-wrap) { height: 200px; }
+</style>

web/src/views/pressure/PressureView.vue

 <script setup lang="ts">
 <script setup lang="ts">
+import { computed } from 'vue'
+import EChart from '@/components/charts/EChart.vue'
+import { useMetricHistory } from '@/composables/useMetricHistory'
 import { useRealtimeStore } from '@/stores/realtime'
 import { useRealtimeStore } from '@/stores/realtime'
+import { multiLineOption } from '@/utils/historyChart'
+
 const realtime = useRealtimeStore()
 const realtime = useRealtimeStore()
+const { series: pressureSeries, loading: pressureLoading } = useMetricHistory(() => ({
+  source: 'room',
+  metric: 'pressure',
+}))
+const { series: tempSeries, loading: tempLoading } = useMetricHistory(() => ({
+  source: 'room',
+  metric: 'temp',
+}))
+
+const pressureOpt = computed(() => multiLineOption(pressureSeries.value, { unit: 'Pa', maxSeries: 14 }))
+const tempOpt = computed(() => multiLineOption(tempSeries.value, { unit: '℃', maxSeries: 14 }))
 </script>
 </script>
 
 
 <template>
 <template>
-  <div class="page-fill">
-    <section class="panel" style="flex:1; overflow:auto">
+  <div class="page-fill pressure-page">
+    <section class="panel" style="flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; overflow:hidden">
       <div class="panel-head">
       <div class="panel-head">
         <div class="panel-title"><div class="vbar" /><h3>房间压差集中监控</h3></div>
         <div class="panel-title"><div class="vbar" /><h3>房间压差集中监控</h3></div>
-        <div class="badge">实时</div>
+        <div class="badge">实时 + 近24h</div>
+      </div>
+      <div class="charts">
+        <div class="chart-card">
+          <div class="chart-title">压差历史 Pa</div>
+          <EChart :option="pressureOpt" :loading="pressureLoading" empty-text="压差历史积累中" />
+        </div>
+        <div class="chart-card">
+          <div class="chart-title">温度历史 ℃</div>
+          <EChart :option="tempOpt" :loading="tempLoading" empty-text="温度历史积累中" />
         </div>
         </div>
+      </div>
+      <div class="table-wrap">
         <table class="table">
         <table class="table">
           <thead>
           <thead>
             <tr><th>房间</th><th>压差 (Pa)</th><th>温度 (℃)</th><th>湿度 (%)</th><th>告警</th></tr>
             <tr><th>房间</th><th>压差 (Pa)</th><th>温度 (℃)</th><th>湿度 (%)</th><th>告警</th></tr>
@@ -24,6 +51,30 @@ const realtime = useRealtimeStore()
             </tr>
             </tr>
           </tbody>
           </tbody>
         </table>
         </table>
+      </div>
     </section>
     </section>
   </div>
   </div>
 </template>
 </template>
+
+<style scoped>
+.pressure-page { display: flex; min-height: 0; }
+.charts {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  min-height: 240px;
+  flex: 1;
+}
+.chart-card {
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid rgba(0, 247, 255, 0.16);
+  border-radius: 6px;
+  padding: 8px;
+  background: rgba(4, 16, 32, 0.35);
+}
+.chart-title { font-size: 12px; color: var(--label); margin-bottom: 4px; }
+.chart-card :deep(.echart-wrap) { flex: 1; min-height: 180px; }
+.table-wrap { max-height: 260px; overflow: auto; }
+</style>

web/src/views/vav/VavView.vue

 <script setup lang="ts">
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useAuthStore } from '@/stores/auth'
 import { useAuthStore } from '@/stores/auth'
 import { useRealtimeStore } from '@/stores/realtime'
 import { useRealtimeStore } from '@/stores/realtime'
 import { api } from '@/api/http'
 import { api } from '@/api/http'
+import EChart from '@/components/charts/EChart.vue'
+import { useMetricHistory } from '@/composables/useMetricHistory'
+import { multiLineOption } from '@/utils/historyChart'
 
 
 const auth = useAuthStore()
 const auth = useAuthStore()
 const realtime = useRealtimeStore()
 const realtime = useRealtimeStore()
 
 
+const { series: airflow, loading: loadAir } = useMetricHistory(() => ({
+  source: 'vav',
+  metric: 'airflow',
+}))
+const { series: faceVel, loading: loadFace } = useMetricHistory(() => ({
+  source: 'vav',
+  metric: 'face_velocity',
+}))
+const vavHistoryOpt = computed(() =>
+  multiLineOption(
+    [
+      ...airflow.value.map((s) => ({ ...s, name: `${s.name || s.id}·风量` })),
+      ...faceVel.value.map((s) => ({ ...s, name: `${s.name || s.id}·面风速` })),
+    ],
+    { maxSeries: 8 },
+  ),
+)
+const histLoading = computed(() => loadAir.value || loadFace.value)
+
 async function toggle(id: string, on: boolean) {
 async function toggle(id: string, on: boolean) {
   if (!auth.isAdmin) return
   if (!auth.isAdmin) return
   await api('/api/realtime/write', {
   await api('/api/realtime/write', {
@@ -28,7 +51,10 @@ function exhaustText(v: { maxExhaust: boolean; minAirflow: boolean }) {
     <section class="panel vav-page">
     <section class="panel vav-page">
       <div class="panel-head">
       <div class="panel-head">
         <div class="panel-title"><div class="vbar" /><h3>通风柜 VAV 集中监控</h3></div>
         <div class="panel-title"><div class="vbar" /><h3>通风柜 VAV 集中监控</h3></div>
-        <div class="badge">{{ auth.isAdmin ? '可控制' : '只读' }} · 协议 PAU-201-2</div>
+        <div class="badge">{{ auth.isAdmin ? '可控制' : '只读' }} · 近24h曲线</div>
+      </div>
+      <div class="hist">
+        <EChart :option="vavHistoryOpt" :loading="histLoading" empty-text="VAV 历史积累中" />
       </div>
       </div>
       <div class="table-wrap">
       <div class="table-wrap">
         <table class="table vav-table">
         <table class="table vav-table">
@@ -75,6 +101,15 @@ function exhaustText(v: { maxExhaust: boolean; minAirflow: boolean }) {
 </template>
 </template>
 
 
 <style scoped>
 <style scoped>
+.hist {
+  min-height: 200px;
+  margin-bottom: 10px;
+  border: 1px solid rgba(0, 247, 255, 0.16);
+  border-radius: 6px;
+  padding: 8px;
+  background: rgba(4, 16, 32, 0.35);
+}
+.hist :deep(.echart-wrap) { height: 180px; }
 .vav-page {
 .vav-page {
   flex: 1;
   flex: 1;
   min-height: 0;
   min-height: 0;