b2d0016a0d
All checks were successful
ci/woodpecker/manual/woodpecker Pipeline was successful
- React 18 + Babel-in-browser SPA 原型，覆盖 8 个画板： 实时地图 / 车辆详情 / 历史查询 / 轨迹回放 / 事件规则 / 通知中心 / ESG 碳减排 / 移动端 - 设计系统：IBM Plex Sans + JetBrains Mono，亮/暗双主题，羚牛绿 #007143 - 数据模型：12 + 40 辆车，TBOX (T) / JT808+1078 (JT) / 双源 (B) - 部署：nginx 静态托管，Dockerfile + woodpecker.yml + docker-compose.yml - 镜像：harbor.lnh2e.com/lingniu-v1/ln-vdc:<branch>-<VERSION> - 容器端口 80，宿主映射 8112，含 /healthz 探活
718 lines
39 KiB
JavaScript
718 lines
39 KiB
JavaScript
// mobile.jsx — Native mobile layouts for each route
|
||
// Renders a single-column, gesture-friendly version of each page
|
||
|
||
// ── Shared mobile chrome ───────────────────────────────────
|
||
const MAppBar = ({ title, subtitle, onMenu, right }) => (
|
||
<div style={{
|
||
height: 52, flex: "0 0 52px", display: "flex", alignItems: "center",
|
||
padding: "0 8px 0 4px", gap: 8, position: "relative", zIndex: 5,
|
||
background: "var(--bg-1)", borderBottom: "1px solid var(--border-1)",
|
||
}}>
|
||
<button onClick={onMenu} aria-label="菜单" style={{
|
||
width: 40, height: 40, display: "grid", placeItems: "center",
|
||
background: "transparent", border: "none", color: "var(--fg-1)", borderRadius: 8, cursor: "pointer",
|
||
}}>
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
|
||
</button>
|
||
<div style={{ flex: 1, minWidth: 0 }}>
|
||
<div style={{ fontWeight: 600, fontSize: 15, color: "var(--fg-0)", lineHeight: 1.2 }}>{title}</div>
|
||
{subtitle && <div style={{ fontSize: 11, color: "var(--fg-3)", lineHeight: 1.2 }}>{subtitle}</div>}
|
||
</div>
|
||
{right}
|
||
</div>
|
||
);
|
||
|
||
const MIconBtn = ({ icon, badge, onClick }) => (
|
||
<button onClick={onClick} style={{
|
||
width: 40, height: 40, display: "grid", placeItems: "center",
|
||
background: "transparent", border: "none", color: "var(--fg-1)", borderRadius: 8, cursor: "pointer", position: "relative",
|
||
}}>
|
||
<Icon name={icon} size={17}/>
|
||
{badge && <span style={{ position: "absolute", top: 8, right: 8, minWidth: 14, height: 14, padding: "0 4px", background: "var(--danger)", color: "#fff", fontSize: 9, fontWeight: 600, borderRadius: 7, display: "grid", placeItems: "center", lineHeight: 1 }}>{badge}</span>}
|
||
</button>
|
||
);
|
||
|
||
const MTabBar = ({ active, onChange }) => {
|
||
const tabs = [
|
||
{ id: "overview", icon: "map", label: "总览" },
|
||
{ id: "history", icon: "history", label: "查询" },
|
||
{ id: "playback", icon: "route", label: "回放" },
|
||
{ id: "inbox", icon: "bell", label: "通知" },
|
||
{ id: "esg", icon: "chart", label: "ESG" },
|
||
];
|
||
return (
|
||
<div style={{
|
||
flex: "0 0 56px", height: 56, display: "grid", gridTemplateColumns: `repeat(${tabs.length}, 1fr)`,
|
||
background: "var(--bg-1)", borderTop: "1px solid var(--border-1)",
|
||
paddingBottom: "env(safe-area-inset-bottom)",
|
||
}}>
|
||
{tabs.map(t => (
|
||
<button key={t.id} onClick={() => onChange(t.id)} style={{
|
||
background: "transparent", border: "none", display: "flex", flexDirection: "column",
|
||
alignItems: "center", justifyContent: "center", gap: 2, cursor: "pointer",
|
||
color: active === t.id ? "var(--accent)" : "var(--fg-3)",
|
||
}}>
|
||
<Icon name={t.icon} size={18}/>
|
||
<span style={{ fontSize: 10, fontWeight: active === t.id ? 600 : 400 }}>{t.label}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// ── Mobile shell wrapper ───────────────────────────────────
|
||
const MobileShell = ({ title, subtitle, right, children, hideTabBar }) => {
|
||
const ctx = window.useRoute();
|
||
return (
|
||
<div style={{
|
||
width: "100%", height: "100%", display: "flex", flexDirection: "column",
|
||
background: "var(--bg-0)", color: "var(--fg-1)", overflow: "hidden",
|
||
fontFamily: "var(--font-sans)",
|
||
}}>
|
||
<MAppBar title={title} subtitle={subtitle} onMenu={ctx.openDrawer} right={right}/>
|
||
<div style={{ flex: 1, minHeight: 0, position: "relative", overflow: "hidden" }}>
|
||
{children}
|
||
</div>
|
||
{!hideTabBar && <MTabBar active={ctx.route} onChange={ctx.navigate}/>}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// ── 1. Mobile Overview: hero map + bottom sheet vehicle list ──
|
||
const MobileOverview = () => {
|
||
const [selected, setSelected] = React.useState("浙F08638F");
|
||
const [sheetOpen, setSheetOpen] = React.useState(false);
|
||
const [filter, setFilter] = React.useState("all");
|
||
const v = (window.VEHICLES || []).find(x => x.id === selected) || {};
|
||
const vehicles = window.VEHICLES || [];
|
||
const counts = { all: vehicles.length, ok: vehicles.filter(x=>x.status==="ok").length, warn: vehicles.filter(x=>x.status==="warn").length, danger: vehicles.filter(x=>x.status==="danger").length };
|
||
const filtered = filter === "all" ? vehicles : vehicles.filter(x => x.status === filter);
|
||
|
||
return (
|
||
<MobileShell
|
||
title="实时监控"
|
||
subtitle="487/512 在线 · 312 行驶中"
|
||
right={<><MIconBtn icon="search"/><MIconBtn icon="bell" badge="3" onClick={() => window.useRoute().navigate("inbox")}/></>}
|
||
>
|
||
{/* Map fills, sheet floats */}
|
||
<div style={{ position: "absolute", inset: 0 }}>
|
||
<FleetMap selected={selected} onSelect={setSelected}/>
|
||
</div>
|
||
|
||
{/* KPI strip floating on map */}
|
||
<div style={{ position: "absolute", top: 12, left: 12, right: 12, display: "flex", gap: 8, overflowX: "auto", scrollbarWidth: "none" }}>
|
||
{[
|
||
{ l: "在线率", v: "95.1%", c: "var(--ok)" },
|
||
{ l: "告警", v: "8", c: "var(--danger)" },
|
||
{ l: "今日里程", v: "24.7K km", c: "var(--fg-1)" },
|
||
{ l: "平均能耗", v: "1.16", c: "var(--info)" },
|
||
].map((k, i) => (
|
||
<div key={i} style={{
|
||
flex: "0 0 auto", padding: "8px 12px", background: "var(--bg-1)",
|
||
border: "1px solid var(--border-1)", borderRadius: 10, boxShadow: "var(--shadow-1)",
|
||
}}>
|
||
<div style={{ fontSize: 10, color: "var(--fg-3)" }}>{k.l}</div>
|
||
<div className="mono tnum" style={{ fontSize: 15, fontWeight: 600, color: k.c }}>{k.v}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Floating action: locate */}
|
||
<button style={{
|
||
position: "absolute", right: 14, bottom: sheetOpen ? "70%" : 130,
|
||
width: 44, height: 44, borderRadius: 22, border: "1px solid var(--border-1)",
|
||
background: "var(--bg-1)", color: "var(--accent)", display: "grid", placeItems: "center",
|
||
boxShadow: "var(--shadow-2)", cursor: "pointer", transition: "bottom 280ms cubic-bezier(.3,0,.2,1)",
|
||
}}>
|
||
<Icon name="pin" size={18}/>
|
||
</button>
|
||
|
||
{/* Bottom sheet */}
|
||
<div style={{
|
||
position: "absolute", left: 0, right: 0, bottom: 0,
|
||
height: sheetOpen ? "70%" : 120, background: "var(--bg-1)",
|
||
borderTop: "1px solid var(--border-1)", borderRadius: "16px 16px 0 0",
|
||
boxShadow: "0 -8px 24px -8px rgba(0,0,0,0.16)",
|
||
transition: "height 320ms cubic-bezier(.3,0,.2,1)",
|
||
display: "flex", flexDirection: "column", overflow: "hidden",
|
||
}}>
|
||
{/* Drag handle + selected vehicle quick card */}
|
||
<div onClick={() => setSheetOpen(s => !s)} style={{ padding: "8px 16px 6px", cursor: "pointer" }}>
|
||
<div style={{ width: 36, height: 4, background: "var(--border-2)", borderRadius: 2, margin: "0 auto 8px" }}/>
|
||
<div className="between">
|
||
<div className="mid gap-2">
|
||
<span className={"dot " + v.status}/>
|
||
<span className="mono strong" style={{ fontSize: 14 }}>{v.id}</span>
|
||
<SourceBadge src={v.src}/>
|
||
<span className="muted" style={{ fontSize: 11 }}>{v.deptName}</span>
|
||
</div>
|
||
<span className="mono" style={{ fontSize: 13, color: v.soc < 20 ? "var(--danger)" : "var(--fg-1)" }}>{v.soc}%</span>
|
||
</div>
|
||
</div>
|
||
|
||
{!sheetOpen ? (
|
||
// Mini quick stats when collapsed
|
||
<div style={{ padding: "0 16px 12px", display: "flex", gap: 16, fontSize: 11 }}>
|
||
<div className="col"><span className="muted">速度</span><span className="mono strong">{v.speed} km/h</span></div>
|
||
<div className="col"><span className="muted">续航</span><span className="mono strong">{Math.round((v.soc||0)*6.2)} km</span></div>
|
||
<div className="col"><span className="muted">温度</span><span className="mono strong">{v.status==="danger"?"102":"68"}°C</span></div>
|
||
<button onClick={() => window.useRoute().navigate("detail")} className="btn primary sm" style={{ marginLeft: "auto", alignSelf: "center" }}>详情</button>
|
||
</div>
|
||
) : (
|
||
// Full list when expanded
|
||
<>
|
||
<div style={{ padding: "0 16px 8px", display: "flex", gap: 6, overflowX: "auto", scrollbarWidth: "none" }}>
|
||
{[
|
||
{id:"all", label:`全部 ${counts.all}`, c:""},
|
||
{id:"ok", label:`行驶 ${counts.ok}`, c:"ok"},
|
||
{id:"warn", label:`异常 ${counts.warn}`, c:"warn"},
|
||
{id:"danger", label:`故障 ${counts.danger}`, c:"danger"},
|
||
].map(t => (
|
||
<button key={t.id} onClick={() => setFilter(t.id)} className={"chip " + (filter===t.id ? "accent" : t.c)} style={{ flex: "0 0 auto", cursor: "pointer", padding: "6px 12px", fontSize: 12 }}>
|
||
{t.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<div style={{ flex: 1, overflowY: "auto" }}>
|
||
{filtered.map(x => (
|
||
<div key={x.id} onClick={() => { setSelected(x.id); }} style={{
|
||
padding: "12px 16px", borderBottom: "1px solid var(--border-1)",
|
||
display: "flex", alignItems: "center", gap: 12,
|
||
background: x.id === selected ? "var(--accent-soft)" : "transparent", cursor: "pointer",
|
||
}}>
|
||
<span className={"dot " + x.status}/>
|
||
<div style={{ flex: 1, minWidth: 0 }}>
|
||
<div className="mid gap-2">
|
||
<span className="mono strong" style={{ fontSize: 13 }}>{x.id}</span>
|
||
<SourceBadge src={x.src}/>
|
||
</div>
|
||
<div className="muted" style={{ fontSize: 11, marginTop: 2 }}>{x.deptName} · {x.speed} km/h</div>
|
||
</div>
|
||
<div style={{ textAlign: "right" }}>
|
||
<div className="mono" style={{ fontSize: 13, color: x.soc < 20 ? "var(--danger)" : "var(--fg-1)" }}>{x.soc}%</div>
|
||
<div style={{ width: 50, height: 3, background: "var(--bg-3)", borderRadius: 2, marginTop: 4 }}>
|
||
<div style={{ width: x.soc + "%", height: "100%", background: x.soc<20?"var(--danger)":x.soc<40?"var(--warn)":"var(--accent)", borderRadius: 2 }}/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
</MobileShell>
|
||
);
|
||
};
|
||
|
||
// ── 2. Mobile Detail ────────────────────────────────────────
|
||
const MobileDetail = () => {
|
||
const vehicles = window.VEHICLES || [];
|
||
const v = vehicles.find(x => x.id === "浙F03980F") || vehicles[0] || {};
|
||
return (
|
||
<MobileShell title={v.plate || v.id} subtitle={`${v.deptName || ''} · ${v.customer || ''}`} right={<MIconBtn icon="pin"/>}>
|
||
<div style={{ height: "100%", overflowY: "auto", padding: 12, paddingBottom: 24 }}>
|
||
{/* Hero status card */}
|
||
<div className="panel" style={{ padding: 16, marginBottom: 12 }}>
|
||
<div className="between" style={{ marginBottom: 12 }}>
|
||
<div className="mid gap-2">
|
||
<span className={"chip " + (v.asset === "abnormal" ? "danger" : v.asset === "leasing" ? "info" : "ok")}>
|
||
<span className={"dot " + (v.asset === "abnormal" ? "danger" : v.asset === "leasing" ? "info" : "ok") + " pulse"}/>
|
||
{v.asset === "leasing" ? "租赁" : v.asset === "abnormal" ? "异常" : "在库 · 运营中"}
|
||
</span>
|
||
<span className="chip" style={{fontSize:10, background: v.own === "self" ? "rgba(31,139,76,.10)" : "rgba(122,140,46,.12)", color: v.own === "self" ? "var(--accent)" : "#7A8C2E"}}>{v.own === "self" ? "自有" : "外租"}</span>
|
||
</div>
|
||
<SourceBadge src={v.src}/>
|
||
</div>
|
||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
|
||
<MStat label="车速" value={v.speed} unit="km/h" big/>
|
||
<MStat label="续航" value={v.range} unit="km" big/>
|
||
<MStat label="电池SOC" value={v.soc} unit="%" color={v.soc < 20 ? "var(--danger)" : "var(--ok)"}/>
|
||
<MStat label="氢气压力" value={v.h2} unit="MPa" color="var(--info)"/>
|
||
<MStat label="电机温度" value={v.motorTemp} unit="°C"/>
|
||
<MStat label="累计里程" value={(v.totalKm/1000).toFixed(1)} unit="k km"/>
|
||
</div>
|
||
</div>
|
||
|
||
<MSection title="业务关系">
|
||
<div className="panel" style={{padding: 14}}>
|
||
<div className="col gap-2" style={{fontSize:12}}>
|
||
<div className="between"><span className="muted">业务部门</span>
|
||
<span className="mid gap-1"><span style={{width:7,height:7,background:v.deptColor,borderRadius:1,display:"inline-block"}}/><span className="strong">{v.deptName}</span></span>
|
||
</div>
|
||
<div className="between"><span className="muted">业务负责人</span><span className="strong">{v.deptLead}</span></div>
|
||
<div className="between"><span className="muted">客户</span><span style={{textAlign:"right", maxWidth:160}}>{v.customer}</span></div>
|
||
<div className="between"><span className="muted">所属公司</span><span style={{fontSize:11,textAlign:"right"}}>{v.ownCompany}</span></div>
|
||
{v.contractNo && <div className="between"><span className="muted">合同</span><span className="mono" style={{fontSize:11}}>{v.contractNo}</span></div>}
|
||
</div>
|
||
</div>
|
||
</MSection>
|
||
|
||
<MSection title="氢电系统">
|
||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
|
||
<MMini label="燃料电池" value="42.5 kW" sub="输出功率"/>
|
||
<MMini label="动力电池" value={v.soc + "%"} sub="SOC"/>
|
||
<MMini label="H₂消耗" value="0.84 kg" sub="本次行程"/>
|
||
<MMini label="电机扭矩" value="180 N·m" sub="实时"/>
|
||
</div>
|
||
</MSection>
|
||
|
||
<MSection title="胎压与温度">
|
||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
|
||
{[
|
||
{ l: "左前", p: "0.24", t: "32" },
|
||
{ l: "右前", p: "0.24", t: "33" },
|
||
{ l: "左后", p: "0.23", t: "31" },
|
||
{ l: "右后", p: v.asset === "abnormal" ? "0.16" : "0.24", t: "38", warn: v.asset === "abnormal" },
|
||
].map((tire, i) => (
|
||
<div key={i} className="panel" style={{ padding: 12, border: tire.warn ? "1px solid var(--danger)" : "1px solid var(--border-1)" }}>
|
||
<div className="between"><span className="muted" style={{ fontSize: 11 }}>{tire.l}</span>{tire.warn && <span className="chip danger" style={{ fontSize: 9 }}>低压</span>}</div>
|
||
<div className="mono strong" style={{ fontSize: 18, color: tire.warn ? "var(--danger)" : "var(--fg-0)" }}>{tire.p}<span style={{ fontSize: 10, fontWeight: 400, color: "var(--fg-3)" }}> MPa</span></div>
|
||
<div className="mono muted" style={{ fontSize: 11 }}>{tire.t}°C</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</MSection>
|
||
|
||
<MSection title="保养预警">
|
||
<div className="panel" style={{padding: 14}}>
|
||
<div className="between" style={{marginBottom:8}}>
|
||
<span className="muted" style={{fontSize:12}}>距下次保养</span>
|
||
<span className="mono strong" style={{fontSize:16, color: v.kmToMaint < 1000 ? "var(--warn)" : "var(--accent)"}}>{v.kmToMaint.toLocaleString()} km</span>
|
||
</div>
|
||
<div className="bar" style={{height:5}}>
|
||
<i style={{width: ((10000 - v.kmToMaint)/10000*100) + "%", background: v.kmToMaint < 1000 ? "var(--warn)" : "var(--accent)"}}/>
|
||
</div>
|
||
<div className="muted" style={{fontSize:11, marginTop:8}}>上次保养 {v.lastMaintDays} 天前 · {v.lastMaintKm.toLocaleString()} km</div>
|
||
</div>
|
||
</MSection>
|
||
|
||
<MSection title="数据通道">
|
||
<div className="col gap-2" style={{ fontSize: 12 }}>
|
||
{[
|
||
{ l: "TBOX (3296/2016)", st: "ok", info: "5s 上报 · 信号 -68dBm" },
|
||
{ l: "JT808 部标", st: "ok", info: "实时 · 北京·朝阳" },
|
||
{ l: "JT1078 视频", st: "ok", info: "4 路 · 720P" },
|
||
].map((c, i) => (
|
||
<div key={i} className="between" style={{ padding: "10px 12px", background: "var(--bg-2)", borderRadius: 8, border: "1px solid var(--border-1)" }}>
|
||
<div>
|
||
<div className="strong" style={{ fontSize: 13 }}>{c.l}</div>
|
||
<div className="muted" style={{ fontSize: 11, marginTop: 2 }}>{c.info}</div>
|
||
</div>
|
||
<span className="dot ok"/>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</MSection>
|
||
|
||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginTop: 16 }}>
|
||
<button onClick={() => window.useRoute().navigate("playback")} className="btn primary" style={{ height: 44 }}><Icon name="route" size={14}/> 轨迹回放</button>
|
||
<button onClick={() => window.useRoute().navigate("history")} className="btn" style={{ height: 44 }}><Icon name="history" size={14}/> 历史数据</button>
|
||
</div>
|
||
</div>
|
||
</MobileShell>
|
||
);
|
||
};
|
||
|
||
const MStat = ({ label, value, unit, color, big }) => (
|
||
<div>
|
||
<div className="muted" style={{ fontSize: 11 }}>{label}</div>
|
||
<div className="mono strong tnum" style={{ fontSize: big ? 26 : 18, color: color || "var(--fg-0)", lineHeight: 1.1, marginTop: 2 }}>
|
||
{value}<span style={{ fontSize: big ? 12 : 10, fontWeight: 400, color: "var(--fg-3)", marginLeft: 4 }}>{unit}</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
const MMini = ({ label, value, sub }) => (
|
||
<div style={{ padding: 10, background: "var(--bg-2)", borderRadius: 8, border: "1px solid var(--border-1)" }}>
|
||
<div className="muted" style={{ fontSize: 10 }}>{label}</div>
|
||
<div className="mono strong" style={{ fontSize: 15, marginTop: 2 }}>{value}</div>
|
||
{sub && <div className="muted" style={{ fontSize: 10, marginTop: 1 }}>{sub}</div>}
|
||
</div>
|
||
);
|
||
|
||
const MSection = ({ title, children, action }) => (
|
||
<div style={{ marginBottom: 16 }}>
|
||
<div className="between" style={{ marginBottom: 8, padding: "0 4px" }}>
|
||
<span className="eyebrow" style={{ fontSize: 11 }}>{title}</span>
|
||
{action}
|
||
</div>
|
||
{children}
|
||
</div>
|
||
);
|
||
|
||
// ── 3. Mobile History ───────────────────────────────────────
|
||
const MobileHistory = () => {
|
||
const [showFilter, setShowFilter] = React.useState(false);
|
||
const trips = [
|
||
{ d: "04-28", t: "14:02–14:44", v: "浙F07179F", k: "32.4 km", h: "0.84 kg", st: "ok" },
|
||
{ d: "04-28", t: "10:11–11:03", v: "浙F07179F", k: "48.2 km", h: "1.21 kg", st: "ok" },
|
||
{ d: "04-28", t: "08:30–09:18", v: "浙F08638F", k: "29.8 km", h: "0.76 kg", st: "warn" },
|
||
{ d: "04-27", t: "17:42–18:25", v: "浙F07179F", k: "36.1 km", h: "0.92 kg", st: "ok" },
|
||
{ d: "04-27", t: "14:08–15:01", v: "浙F02002F", k: "44.5 km", h: "1.13 kg", st: "danger" },
|
||
{ d: "04-27", t: "09:22–10:14", v: "浙F07179F", k: "39.7 km", h: "1.01 kg", st: "ok" },
|
||
];
|
||
return (
|
||
<MobileShell title="历史查询" subtitle="近 7 日 · 187 条记录" right={<MIconBtn icon="filter" onClick={()=>setShowFilter(s=>!s)}/>}>
|
||
<div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
|
||
{/* Search */}
|
||
<div style={{ padding: "12px 12px 0" }}>
|
||
<div className="search" style={{ height: 40 }}>
|
||
<Icon name="search" size={14}/>
|
||
<input placeholder="车牌 / VIN / 部门 / 客户" style={{ fontSize: 14 }}/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Filter chips - horizontal scroll */}
|
||
<div style={{ padding: "10px 12px", display: "flex", gap: 6, overflowX: "auto", scrollbarWidth: "none", flexShrink: 0 }}>
|
||
<span className="chip accent" style={{ flex: "0 0 auto", padding: "6px 12px", fontSize: 12 }}>近 7 日</span>
|
||
<span className="chip" style={{ flex: "0 0 auto", padding: "6px 12px", fontSize: 12 }}>编组A</span>
|
||
<span className="chip" style={{ flex: "0 0 auto", padding: "6px 12px", fontSize: 12 }}>全部车型</span>
|
||
<span className="chip" style={{ flex: "0 0 auto", padding: "6px 12px", fontSize: 12 }}>有告警</span>
|
||
</div>
|
||
|
||
{/* KPI summary */}
|
||
<div style={{ padding: "0 12px 12px", display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8, flexShrink: 0 }}>
|
||
{[
|
||
{ l: "总里程", v: "1,847", u: "km", c: "var(--fg-0)" },
|
||
{ l: "氢耗", v: "47.2", u: "kg", c: "var(--info)" },
|
||
{ l: "减碳", v: "118", u: "kg", c: "var(--ok)" },
|
||
].map((k, i) => (
|
||
<div key={i} style={{ padding: 10, background: "var(--bg-1)", border: "1px solid var(--border-1)", borderRadius: 8 }}>
|
||
<div className="muted" style={{ fontSize: 10 }}>{k.l}</div>
|
||
<div className="mono strong tnum" style={{ fontSize: 16, color: k.c }}>{k.v}<span style={{ fontSize: 10, fontWeight: 400, color: "var(--fg-3)" }}> {k.u}</span></div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Trip list */}
|
||
<div style={{ flex: 1, overflowY: "auto", padding: "0 12px 16px" }}>
|
||
{trips.map((t, i) => {
|
||
const cls = t.st === "danger" ? "danger" : t.st === "warn" ? "warn" : "ok";
|
||
return (
|
||
<div key={i} className="panel" style={{ padding: 12, marginBottom: 8 }}>
|
||
<div className="between" style={{ marginBottom: 6 }}>
|
||
<div className="mid gap-2">
|
||
<span className="mono strong" style={{ fontSize: 13 }}>{t.v}</span>
|
||
<span className={"chip " + cls} style={{ fontSize: 9 }}>{t.st === "danger" ? "故障" : t.st === "warn" ? "告警" : "正常"}</span>
|
||
</div>
|
||
<span className="muted mono" style={{ fontSize: 11 }}>{t.d} {t.t}</span>
|
||
</div>
|
||
<div style={{ display: "flex", gap: 14, fontSize: 12 }}>
|
||
<div><span className="muted">里程 </span><span className="mono strong">{t.k}</span></div>
|
||
<div><span className="muted">氢耗 </span><span className="mono strong">{t.h}</span></div>
|
||
<button onClick={() => window.useRoute().navigate("playback")} className="btn sm ghost" style={{ marginLeft: "auto", padding: "4px 10px", fontSize: 11 }}>回放</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</MobileShell>
|
||
);
|
||
};
|
||
|
||
// ── 4. Mobile Playback ──────────────────────────────────────
|
||
const MobilePlayback = () => {
|
||
const [t, setT] = React.useState(38);
|
||
const [playing, setPlaying] = React.useState(true);
|
||
const [speed, setSpeed] = React.useState(2);
|
||
|
||
React.useEffect(() => {
|
||
if (!playing) return;
|
||
const id = setInterval(() => setT(v => (v + speed * 0.6) % 100), 200);
|
||
return () => clearInterval(id);
|
||
}, [playing, speed]);
|
||
|
||
return (
|
||
<MobileShell title="轨迹回放" subtitle="浙F07179F · 04-28 14:02 → 14:44">
|
||
<div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column" }}>
|
||
{/* Map area */}
|
||
<div style={{ flex: 1, minHeight: 0, position: "relative" }}>
|
||
<FleetMap selected="浙F07179F" playbackPoint={{ x: 280 + t * 4, y: 260 + Math.sin(t/15) * 80 }}/>
|
||
{/* Floating speed badge */}
|
||
<div style={{ position: "absolute", top: 12, left: 12, padding: "8px 12px", background: "var(--bg-1)", border: "1px solid var(--border-1)", borderRadius: 10, boxShadow: "var(--shadow-1)" }}>
|
||
<div className="muted" style={{ fontSize: 10 }}>当前速度</div>
|
||
<div className="mono strong tnum" style={{ fontSize: 16 }}>{Math.round(40 + Math.sin(t/8)*20)} <span style={{ fontSize: 10, fontWeight: 400, color: "var(--fg-3)" }}>km/h</span></div>
|
||
</div>
|
||
<div style={{ position: "absolute", top: 12, right: 12, padding: "8px 12px", background: "var(--bg-1)", border: "1px solid var(--border-1)", borderRadius: 10, boxShadow: "var(--shadow-1)" }}>
|
||
<div className="muted" style={{ fontSize: 10 }}>SOC</div>
|
||
<div className="mono strong tnum" style={{ fontSize: 16, color: "var(--ok)" }}>{Math.round(78 - t * 0.15)}%</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Bottom playback panel */}
|
||
<div style={{
|
||
flex: "0 0 auto", background: "var(--bg-1)", borderTop: "1px solid var(--border-1)",
|
||
padding: "12px 14px 16px", boxShadow: "0 -4px 16px -4px rgba(0,0,0,0.08)",
|
||
}}>
|
||
{/* Time + scrub */}
|
||
<div className="between" style={{ marginBottom: 8 }}>
|
||
<span className="mono strong" style={{ fontSize: 14 }}>14:{String(Math.floor(t * 0.42 + 2)).padStart(2,"0")}:{String(Math.floor(t*36)%60).padStart(2,"0")}</span>
|
||
<span className="mono muted" style={{ fontSize: 11 }}>已 {Math.round(t*0.42)} 分 / 共 42 分</span>
|
||
</div>
|
||
<input type="range" min="0" max="100" value={t} onChange={e => setT(+e.target.value)} style={{
|
||
width: "100%", height: 4, accentColor: "var(--accent)", marginBottom: 12,
|
||
}}/>
|
||
|
||
{/* Controls row */}
|
||
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
||
<button onClick={() => setT(0)} style={ctrlBtn}><Icon name="route" size={14}/></button>
|
||
<button onClick={() => setT(v => Math.max(0, v - 10))} style={ctrlBtn}>« 10s</button>
|
||
<button onClick={() => setPlaying(p => !p)} style={{ ...ctrlBtn, width: 56, height: 44, background: "var(--accent)", color: "#fff", borderColor: "var(--accent)" }}>{playing ? "⏸" : "▶"}</button>
|
||
<button onClick={() => setT(v => Math.min(100, v + 10))} style={ctrlBtn}>10s »</button>
|
||
<select value={speed} onChange={e => setSpeed(+e.target.value)} style={{ ...ctrlBtn, padding: "0 10px" }}>
|
||
{[0.5, 1, 2, 4, 8, 16].map(s => <option key={s} value={s}>{s}×</option>)}
|
||
</select>
|
||
</div>
|
||
|
||
{/* Mini chart timeline events */}
|
||
<div style={{ marginTop: 12, position: "relative", height: 24, background: "var(--bg-2)", borderRadius: 4 }}>
|
||
{[12, 38, 65, 88].map((p, i) => (
|
||
<div key={i} style={{ position: "absolute", left: p+"%", top: 0, bottom: 0, width: 2, background: i===2?"var(--danger)":"var(--warn)" }}/>
|
||
))}
|
||
<div style={{ position: "absolute", left: t+"%", top: -4, bottom: -4, width: 2, background: "var(--accent)", boxShadow: "0 0 8px var(--accent)" }}/>
|
||
</div>
|
||
<div className="between" style={{ marginTop: 4, fontSize: 10 }}>
|
||
<span className="muted">事件</span>
|
||
<span className="mono muted">急刹×1 · 超速×2 · 故障×1</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</MobileShell>
|
||
);
|
||
};
|
||
|
||
const ctrlBtn = {
|
||
flex: 1, height: 40, display: "grid", placeItems: "center",
|
||
background: "var(--bg-2)", border: "1px solid var(--border-1)",
|
||
color: "var(--fg-1)", borderRadius: 8, fontSize: 12, fontFamily: "var(--font-mono)", cursor: "pointer",
|
||
};
|
||
|
||
// ── 5. Mobile Alarm Rules (list-based) ──────────────────────
|
||
const MobileAlarm = () => {
|
||
const rules = [
|
||
{ n: "电池SOC严重不足", st: "on", trig: 12, cond: "SOC < 15% 持续 30s", p: "P0" },
|
||
{ n: "右后胎压低", st: "on", trig: 8, cond: "压力 < 0.20 MPa", p: "P0" },
|
||
{ n: "超速预警", st: "on", trig: 47, cond: "速度 > 限速 + 5 km/h", p: "P1" },
|
||
{ n: "H₂压力异常下降", st: "on", trig: 5, cond: "5min 内下降 > 1.0 MPa", p: "P0" },
|
||
{ n: "电堆过温保护", st: "on", trig: 3, cond: "温度 > 90°C", p: "P0" },
|
||
{ n: "急加速密集", st: "on", trig: 31, cond: "5min 内 ≥ 3 次", p: "P2" },
|
||
{ n: "疲劳驾驶", st: "off", trig: 0, cond: "连续驾驶 > 4h", p: "P1" },
|
||
];
|
||
return (
|
||
<MobileShell title="事件规则" subtitle={`${rules.filter(r=>r.st==="on").length} / ${rules.length} 启用`} right={<MIconBtn icon="plus"/>}>
|
||
<div style={{ height: "100%", overflowY: "auto", padding: 12 }}>
|
||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8, marginBottom: 12 }}>
|
||
{[
|
||
{ l: "P0 紧急", v: 4, c: "var(--danger)" },
|
||
{ l: "P1 警告", v: 2, c: "var(--warn)" },
|
||
{ l: "P2 提示", v: 1, c: "var(--info)" },
|
||
].map((k, i) => (
|
||
<div key={i} style={{ padding: 10, background: "var(--bg-1)", border: "1px solid var(--border-1)", borderRadius: 8 }}>
|
||
<div className="muted" style={{ fontSize: 10 }}>{k.l}</div>
|
||
<div className="mono strong" style={{ fontSize: 18, color: k.c }}>{k.v}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{rules.map((r, i) => (
|
||
<div key={i} className="panel" style={{ padding: 14, marginBottom: 8 }}>
|
||
<div className="between" style={{ marginBottom: 6 }}>
|
||
<div className="mid gap-2">
|
||
<span className={"chip " + (r.p==="P0"?"danger":r.p==="P1"?"warn":"info")} style={{ fontSize: 9 }}>{r.p}</span>
|
||
<span className="strong" style={{ fontSize: 14 }}>{r.n}</span>
|
||
</div>
|
||
<MSwitch on={r.st==="on"}/>
|
||
</div>
|
||
<div className="muted mono" style={{ fontSize: 11, marginBottom: 6 }}>{r.cond}</div>
|
||
<div className="between" style={{ fontSize: 11 }}>
|
||
<span className="muted">7日触发 <span className="mono strong" style={{ color: "var(--fg-1)" }}>{r.trig}</span> 次</span>
|
||
<span className="muted">短信 · App推送 · 邮件</span>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</MobileShell>
|
||
);
|
||
};
|
||
|
||
const MSwitch = ({ on }) => (
|
||
<div style={{
|
||
width: 36, height: 20, borderRadius: 10, padding: 2,
|
||
background: on ? "var(--accent)" : "var(--bg-3)", transition: "background 200ms",
|
||
}}>
|
||
<div style={{
|
||
width: 16, height: 16, borderRadius: 8, background: "#fff",
|
||
transform: on ? "translateX(16px)" : "translateX(0)",
|
||
transition: "transform 200ms cubic-bezier(.3,0,.2,1)",
|
||
boxShadow: "0 1px 2px rgba(0,0,0,0.2)",
|
||
}}/>
|
||
</div>
|
||
);
|
||
|
||
// ── 6. Mobile Inbox ─────────────────────────────────────────
|
||
const MobileInbox = () => {
|
||
const [filter, setFilter] = React.useState("all");
|
||
const alerts = [
|
||
{p:"P0", n:"电池SOC严重不足", v:"浙F08638F", t:"刚刚", det:"SOC 9% < 阈值 15% · 持续 4分20秒", st:"new"},
|
||
{p:"P0", n:"右后胎压低", v:"浙F08638F", t:"3分钟前", det:"0.16 MPa · 阈值 0.20 MPa", st:"new"},
|
||
{p:"P1", n:"超速预警", v:"浙F02002F", t:"12分钟前", det:"实测 89 km/h · 限速 80 km/h · 持续 12s", st:"new"},
|
||
{p:"P1", n:"H₂压力异常下降", v:"浙F07179F", t:"32分钟前", det:"5分钟内下降 1.2 MPa", st:"ack"},
|
||
{p:"P0", n:"电堆过温保护", v:"浙F00598F", t:"1小时前", det:"电堆温度 95°C · 阈值 90°C", st:"resolved"},
|
||
{p:"P2", n:"急加速密集", v:"浙F02608F", t:"2小时前", det:"5分钟内 3 次急加速", st:"resolved"},
|
||
{p:"P1", n:"偏离规划路线", v:"浙F00278F", t:"3小时前", det:"偏离 1.2 km · 持续 6 分钟", st:"resolved"},
|
||
];
|
||
const filtered = filter === "all" ? alerts : filter === "new" ? alerts.filter(a=>a.st==="new") : alerts.filter(a=>a.p===filter);
|
||
return (
|
||
<MobileShell title="通知中心" subtitle="3 未处理 · 24 今日">
|
||
<div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
|
||
<div style={{ padding: "10px 12px 8px", display: "flex", gap: 6, overflowX: "auto", scrollbarWidth: "none", flexShrink: 0, borderBottom: "1px solid var(--border-1)" }}>
|
||
{[
|
||
{id:"all", l:"全部 24"},
|
||
{id:"new", l:"未处理 3"},
|
||
{id:"P0", l:"P0 · 2"},
|
||
{id:"P1", l:"P1 · 8"},
|
||
{id:"P2", l:"P2 · 14"},
|
||
].map(t => (
|
||
<button key={t.id} onClick={()=>setFilter(t.id)} className={"chip " + (filter===t.id?"accent":"")} style={{ flex: "0 0 auto", padding: "6px 12px", fontSize: 12, cursor: "pointer" }}>{t.l}</button>
|
||
))}
|
||
</div>
|
||
<div style={{ flex: 1, overflowY: "auto" }}>
|
||
{filtered.map((a, i) => {
|
||
const c = a.p === "P0" ? "var(--danger)" : a.p === "P1" ? "var(--warn)" : "var(--info)";
|
||
return (
|
||
<div key={i} style={{
|
||
display: "flex", gap: 12, padding: "14px 14px",
|
||
borderBottom: "1px solid var(--border-1)",
|
||
background: a.st === "new" ? "var(--accent-soft)" : "transparent",
|
||
}}>
|
||
<div style={{ flexShrink: 0 }}>
|
||
<div style={{ width: 36, height: 36, borderRadius: 18, background: a.st === "new" ? c : "var(--bg-3)", opacity: a.st==="resolved"?0.4:1, display: "grid", placeItems: "center", color: "#fff", boxShadow: a.st === "new" ? `0 0 12px ${c}` : "none" }}>
|
||
<Icon name="bell" size={14}/>
|
||
</div>
|
||
</div>
|
||
<div style={{ flex: 1, minWidth: 0 }}>
|
||
<div className="between">
|
||
<div className="mid gap-2">
|
||
<span className={"chip " + (a.p==="P0"?"danger":a.p==="P1"?"warn":"info")} style={{ fontSize: 9, padding: "2px 6px" }}>{a.p}</span>
|
||
<span className="strong" style={{ fontSize: 13 }}>{a.n}</span>
|
||
</div>
|
||
<span className="mono muted" style={{ fontSize: 11 }}>{a.t}</span>
|
||
</div>
|
||
<div className="mono muted" style={{ fontSize: 11, marginTop: 2 }}>{a.v}</div>
|
||
<div className="muted" style={{ fontSize: 12, marginTop: 4 }}>{a.det}</div>
|
||
{a.st === "new" && (
|
||
<div style={{ display: "flex", gap: 6, marginTop: 10 }}>
|
||
<button onClick={()=>window.useRoute().navigate("playback")} className="btn sm primary" style={{ fontSize: 11 }}><Icon name="route" size={11}/> 轨迹</button>
|
||
<button className="btn sm" style={{ fontSize: 11 }}>确认</button>
|
||
<button className="btn sm ghost" style={{ fontSize: 11 }}>忽略</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</MobileShell>
|
||
);
|
||
};
|
||
|
||
// ── 7. Mobile ESG ────────────────────────────────────────────
|
||
const MobileESG = () => {
|
||
return (
|
||
<MobileShell title="ESG · 碳减排" subtitle="羚牛 ESG Link">
|
||
<div style={{ height: "100%", overflowY: "auto", padding: 12 }}>
|
||
{/* Hero stat */}
|
||
<div className="panel" style={{ padding: 16, marginBottom: 12, background: "linear-gradient(135deg, #007143, #00A35F)", color: "#fff", border: "none" }}>
|
||
<div style={{ fontSize: 11, opacity: 0.85 }}>本年度累计减碳</div>
|
||
<div className="mono tnum" style={{ fontSize: 36, fontWeight: 700, lineHeight: 1.1, margin: "4px 0" }}>1,847.2<span style={{ fontSize: 14, fontWeight: 400, opacity: 0.85, marginLeft: 6 }}>tCO₂e</span></div>
|
||
<div style={{ fontSize: 11, opacity: 0.85 }}>较去年同期 ▲ 32.4%</div>
|
||
</div>
|
||
|
||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginBottom: 12 }}>
|
||
{[
|
||
{ l: "氢能消耗", v: "47.2", u: "万 m³", c: "var(--info)" },
|
||
{ l: "里程", v: "1.84", u: "万 km", c: "var(--fg-0)" },
|
||
{ l: "碳交易收益", v: "18.78", u: "万元", c: "var(--accent)" },
|
||
{ l: "覆盖城市", v: "23", u: "个", c: "var(--fg-0)" },
|
||
].map((k, i) => (
|
||
<div key={i} className="panel" style={{ padding: 12 }}>
|
||
<div className="muted" style={{ fontSize: 10 }}>{k.l}</div>
|
||
<div className="mono strong tnum" style={{ fontSize: 18, color: k.c, marginTop: 2 }}>{k.v}<span style={{ fontSize: 10, fontWeight: 400, color: "var(--fg-3)", marginLeft: 4 }}>{k.u}</span></div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<MSection title="月度减碳趋势">
|
||
<div className="panel" style={{ padding: 14 }}>
|
||
<svg viewBox="0 0 320 120" width="100%" height="100" style={{ overflow: "visible" }}>
|
||
{[180,220,255,235,290,270,310,345,320,355,380,420].map((v, i, arr) => {
|
||
const x = 12 + i * 26;
|
||
const h = (v / 420) * 90;
|
||
return (
|
||
<g key={i}>
|
||
<rect x={x-9} y={108-h} width="18" height={h} fill="var(--accent)" rx="2" opacity={i===11?1:0.65}/>
|
||
{i%3===0 && <text x={x} y="118" fontSize="9" fill="var(--fg-3)" textAnchor="middle">{i+1}月</text>}
|
||
</g>
|
||
);
|
||
})}
|
||
</svg>
|
||
</div>
|
||
</MSection>
|
||
|
||
<MSection title="车辆减碳排行 Top 5">
|
||
<div className="col gap-1">
|
||
{[
|
||
{ p:"浙F·8A03F", v: 24.38 },
|
||
{ p:"浙F·2C57G", v: 22.15 },
|
||
{ p:"浙F·9D14B", v: 19.84 },
|
||
{ p:"浙F·6E72H", v: 17.21 },
|
||
{ p:"浙F·1B49K", v: 15.67 },
|
||
].map((r, i) => (
|
||
<div key={i} className="between" style={{ padding: "10px 12px", background: "var(--bg-1)", border: "1px solid var(--border-1)", borderRadius: 8 }}>
|
||
<span className="mid gap-2">
|
||
<span className="mono" style={{ fontSize: 11, color: "var(--fg-3)", width: 16 }}>#{i+1}</span>
|
||
<span className="mono strong" style={{ fontSize: 13 }}>{r.p}</span>
|
||
</span>
|
||
<span className="mono strong" style={{ fontSize: 13, color: "var(--accent)" }}>{r.v} <span style={{ fontSize: 10, fontWeight: 400, color: "var(--fg-3)" }}>kg</span></span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</MSection>
|
||
</div>
|
||
</MobileShell>
|
||
);
|
||
};
|
||
|
||
// ── Mobile route map ────────────────────────────────────────
|
||
const MOBILE_PAGES = {
|
||
overview: MobileOverview,
|
||
detail: MobileDetail,
|
||
history: MobileHistory,
|
||
playback: MobilePlayback,
|
||
alarm: MobileAlarm,
|
||
inbox: MobileInbox,
|
||
esg: MobileESG,
|
||
};
|
||
|
||
const MobileRouter = ({ route }) => {
|
||
const Cmp = MOBILE_PAGES[route];
|
||
if (!Cmp) {
|
||
return (
|
||
<MobileShell title="设计画板" subtitle="该页面仅桌面端可用">
|
||
<div style={{ padding: 24, textAlign: "center", color: "var(--fg-2)" }}>
|
||
<Icon name="settings" size={32}/>
|
||
<div style={{ marginTop: 12, fontSize: 14 }}>设计画板模式</div>
|
||
<div style={{ fontSize: 12, color: "var(--fg-3)", marginTop: 4 }}>请在桌面端访问以查看完整设计稿</div>
|
||
<button onClick={() => window.useRoute().navigate("overview")} className="btn primary" style={{ marginTop: 16, height: 40, padding: "0 20px" }}>返回主页</button>
|
||
</div>
|
||
</MobileShell>
|
||
);
|
||
}
|
||
return <Cmp/>;
|
||
};
|
||
|
||
window.MobileRouter = MobileRouter;
|
||
window.MobileShell = MobileShell;
|