HTML+CSS+JavaScript+ECharts 实战：恒能电池 ERP 演示站——把电池制造的排程、批次追溯与质量看板做成看得见的系统

HTMLCSSJavaScriptECharts 实战恒能电池 ERP 演示站——把电池制造的排程、批次追溯与质量看板做成看得见的系统一、前言锂电池工厂里最值钱的数据往往不在财务报表里而在产线上这一罐浆料配了什么配方、这一卷极片面密度压到了多少、这一批电芯最终装进了哪个客户的那台电池包——这些问题的答案决定了一家电池厂能不能在客诉来临时五秒钟圈定召回范围也决定了排产员能不能在化成柜通道占满之前把急单插进去。可惜「电池制造 信息化」这个题目网上资料呈现两个极端要么是纯工艺科普讲涂布辊压却看不到一张系统界面要么是通用 ERP 的功能清单换个行业 logo 就敢叫制造平台批次追溯、工艺参数这些电池行业特有的痛点完全找不到影子。想看一个「懂电池工厂」的系统长什么样反而没有现成的参考。于是我做了这座「恒能电池 ERP 演示站」七个页面围绕一条 LFP-280Ah 储能电芯产线把生产运营总览、计划排程、电芯-模组-包三级批次追溯、BOM 物料清单、供销协同、质量检验六个模块连成一条完整的产线动线。先如实交代定位这是一座纯静态实现的演示版本站点没有后端服务、不依赖数据库所有业务数据以种子数据的形式随包分发它更像一座「可以点开的电池工厂数字化沙盘」——浏览器双击即开断网也能完整演示。二、技术栈与实现说明先把技术构成交代清楚层技术说明页面结构HTML5七个语义化页面相对路径互链登录页为品牌入口视觉与布局CSS3CSS 变量承载设计令牌Grid/Flex 布局深色侧栏 浅色工作区交互逻辑原生 JavaScript零框架侧栏骨架、表格渲染、视图参数切换全部手写图表Apache ECharts 5.5.1本地化七组图表库文件随包分发运行时不发起任何网络请求静态图形内联 SVG Draw.io电芯圆形徽章、站点架构图架构上整站分四层自上而下是入口层index 登录页henadmin 一键进入工作台、导航层六个业务页互链并留了一组直达视图参数、内容层六大模块页面、资源层样式、种子数据、图表库全部本地化随包分发工程上有三条硬约束贯穿始终。一是零外链所有脚本、图表库、图标全部本地化断网双击页面依旧完整可用适合机房、内网汇报和课堂投影这类场景。二是动效克制所有 ECharts 图表关闭动画直接呈现终值投屏与截屏画面稳定不闪烁。三是视图直达参数trace.html?lvcell直达电芯级追溯、supply.html?viewstock直达库存水位、production.html?viewprocess直达工艺流知识卡演示时可以跳过页头一步到位。配色上我刻意避开了技术站里烂大街的蓝紫系也避开了常见的琥珀与终端绿配色选了胡桃 钢蓝这套组合深胡桃墨色做侧栏与登录底色像化成车间夜班灯下的木纹工作台胡桃棕做主色与数据高亮暖而不燥对应「把产品当作品」的制造手感青钢蓝负责趋势线与对比系列冷色基线一眼可辨焰栗暖橙只出现在两处——需要关注的库存水位与不良帕累托柱让警示色真正承担语义。签名元素有两处一枚「电芯圆形徽章」在导航、登录页、浏览器标签里反复出现把整站的行业身份钉死每张卡片标题左侧嵌一条「卷绕极片纹」饰条取自电芯卷绕的叠层意象。三、功能设计六大模块串成一条产线动线六个业务模块不是六个孤立的清单页而是按一条电芯的生命周期排布的生产运营总览四张 KPI 卡本月电芯产量 118,560 颗、综合良率 96.4%、设备综合效率 OEE 78.2%、在制工单 6 张先把当天结论亮出来近 14 日产量与良率双轴图看趋势六道工序直通率雷达找短板装配 96.1% 是最弱一环工序在制分布和产线状态卡回答「此刻产线在干嘛」。计划与排程本周工序排程甘特图按配料到分容六条产线铺开工单色块下方工单台账给出每张单的当前工序、进度条与计划完成日再往下是整站的行业特色所在——锂电工艺流知识卡配料、涂布、辊压、装配、化成、分容六道主工序各一张卡把行星搅拌真空脱泡、面密度公差 ±1.5%、218μm 目标厚度、SEI 成膜、容量分档这些关键控制点讲到能落地。电池批次追溯电芯激光码、模组条码、电池包条码三级链路横向铺开任一级作为焦点查看工艺参数快照与批次事件轨迹正向覆盖追溯表回答「这个电芯批次最终装进了哪些模组和电池包」召回圈定的口径直接写在页面上。BOM 物料清单HEN-ES86 储能电池包的结构树包 → 8 模组 → 96 电芯与部件、物料用量明细单用量、损耗率、自产外购标识、单包成本构成与毛利快照电芯自产占成本 76.2% 的商业模式一目了然。供销协同销售订单、采购执行、库存水位三视图合一签单额与出货额双柱对比、物料台账带覆盖天数预警电解液覆盖只剩 6 天的红色标签就是采购跟催的触发器。质量检验IQC 来料、IPQC 制程、OQC 出货三道质量门的检验单台账本月不良帕累托毛刺、虚焊、容量低前三项累计 76%与涂布面密度 X̄ 控制图并排工序 CPK 台账把「哪些工序能力充足、哪些待改善」逐条点名。四、数据设计与口径纪律演示站最怕数字各说各话——首页一个数、看板另一个数。这座站在数据设计上立了三条纪律第一一组种子数据贯穿全站。全站图表、卡片、表格共用同一套业务样本LFP-280Ah 电芯月产 118,560 颗、良率 96.4%HEN-ES86 电池包 BOM 成本 48,260 元、售价 62,000 元批次 CB-260815-C7 分容标定 286.5Ah。这批数字在总览 KPI、工单台账、追溯详情、成本快照里完全一致——读者在任何页面看到的都是同一个工厂。第二业务链条经得起追问。包条码 HNP86-2609-00315 向上能追到模组 HNM12-2609-08-1126再向上追到电芯批次 CB-260815-C7 的涂布卷号 R-2608-117 与配料批 S-0815-03正向展开是 343 组模组、43 台电池包。销售订单 SO-2609-031 的 40 台交付进度 75%对应的正是整包 EOL 与 OQC 检验记录。数据之间有因果不是随机数的堆砌。第三颜色承载固定语义。胡桃棕永远代表主线数据青钢蓝代表对比与趋势基线焰栗色只给「需要关注」的东西库存低水位、不良柱、预警标签。全站图表里颜色含义不漂移读者扫一眼就知道该看哪里。五、系统演示登录页立在整站门口深色底上把六道主工序串成一条工艺流条账号密码预填回车直达工作台生产运营总览是每天的驾驶舱四张 KPI 卡、产量良率双轴趋势、六工序直通率雷达、工序在制分布与六条产线的实时状态计划与排程页一周的工单按六条工序产线铺在甘特图上换模占用与预排块一目了然工单台账把 8 张单的当前工序、进度条与计划完成日排成一张可执行的表往下翻是整站最有行业味的部分——锂电工艺流六道工序知识卡从配料的固含量粘度讲到分容的容量分档配组电池批次追溯页包级焦点视图三级条码链横向铺开右侧是这台包从来料到入库的完整事件轨迹把焦点切到电芯级分容容量、直流内阻、K 值、涂布面密度、辊压厚度全部跟着条码走BOM 物料清单页产品结构树与 12 项物料的用量明细同屏自产外购一目了然单包物料成本构成与毛利快照并排放置电芯自产的成本护城河直接画在图上供销协同的销售订单视图五张订单的交付进度与近 6 月签单出货对比同屏库存水位视图电解液覆盖 6 天的红色预警与焰栗色水位条就是采购的待办清单质量检验页不良帕累托与涂布面密度 SPC 控制图并排改善资源该往哪投一眼可见检验单台账把 IQC、IPQC、OQC 三道质量门的近 5 日记录排在一起含一张电解液退货的不合格记录——质量门是真的会拦六、小结这座「恒能电池 ERP 演示站」用 HTML5、CSS3、原生 JavaScript 加本地化的 ECharts把电池制造行业最有味道的三件事——六级工艺参数、三级批次追溯、三道质量门——装进了一个零依赖、断网可用的静态站点里。它不连接真实的产线设备也没有后端服务但它的每一个数字都经得起跨页核对每一条追溯链都经得起反向追问每一个页面都按真实工厂的角色与语汇组织。对我而言这个项目最大的收获是想清楚了一件事行业系统的门槛从来不在增删改查而在于你愿不愿意把「面密度 CPK 1.42」「化成柜 48 通道」「召回圈定五秒响应」这些真实的行业约束放进数据模型里。静态实现恰恰逼着你把功夫全花在数据设计与口径一致性上——这本身就是一次很好的建模训练。如果你也在做制造行业的信息系统、可视化看板或者在研究如何用纯前端把一个行业讲清楚欢迎评论区交流。恒能电池 ERP 演示站源码 HTMLCSSECharts 离线可用锂电生产排程/批次追溯/质量看板