基于 HTMLCSSJavaScript 的电气企业订单管理系统设计与实现恒控电气高低压柜订单全流程管理方案一、前言高低压成套设备制造是一个典型的「按单生产」行业一份合同里往往同时包含 KYN28 高压开关柜、GGD 低压配电柜、直流屏、箱式变电站等不同类别的产品每台柜子都要经历钣金加工、酸洗喷塑、母线加工、元器件装配、二次校线、出厂试验等固定工序交付节点则按合同交期倒排。订单一多计划员最头疼的三件事随之而来每张订单的物料齐套到什么程度、每台柜子卡在哪道工序、哪些合同的交期正在逼近——三个问题分散在表格、聊天记录和车间白板上口径对不齐数字天天打架。本文分享一套围绕这条业务链设计的电气企业订单管理系统——恒控电气订单管理系统。它采用 HTML CSS 原生 JavaScript 的纯静态方案实现不依赖服务器与数据库浏览器双击打开即可运行断网环境下全部功能照常可用。系统内置 28 份订单、10 家客户、9 型在册柜体的完整业务台账覆盖订单总览、订单列表、订单详情、生产排产、产品目录、客户管理六大业务场景适合作为前端综合练习、制造类管理系统的界面原型以及「按单生产」业务建模的入门参考。二、技术栈与整体结构系统零依赖、零构建所有能力都来自浏览器本身层技术说明页面结构HTML5七个业务页面语义化标签组织样式体系CSS3CSS 变量承载设计 token一套工业主题贯穿全站业务逻辑原生 JavaScriptES5 兼容写法数据、框架、页面脚本三层分离图表能力ECharts本地化引入柱状图、折线图、环形图双轴趋势组合数据持久化localStorage业务台账保存在本机浏览器不上传工程结构如下职责划分清晰cabinet-order/ ├── index.html # 订单总览仪表盘统一入口 ├── orders.html # 订单列表 ├── order-detail.html # 订单详情BOM / 工序 / 交付节点 ├── schedule.html # 生产排产看板 ├── products.html # 产品目录 ├── customers.html # 客户管理 ├── about.html # 关于系统 ├── css/style.css # 全站主题与组件样式 ├── js/ │ ├── data.js # 柜型目录、客户档案、订单台账、BOM 定额模板 │ ├── app.js # 导航注入、格式化、全站唯一统计口径 │ └── page-dashboard.js / page-orders.js / page-detail.js / page-schedule.js / page-products.js / page-customers.js / page-about.js ├── assets/logo.svg # 品牌标识 └── vendor/echarts.min.js # 本地化图表库视觉上从「变电站」的行业意象取材框架选用混凝土灰褐面板构成侧边导航与顶栏的浅色基底主色为红丹防锈深铁锈红用于主按钮、当前页高亮与关键数字白字对比度约 9.9:1赭橙承担进度条收尾、链接悬停与图表次系列只作小面积微强调出现在状态徽标与进行中的工序节点上。全站唯一的签名级装饰是侧栏导航的红丹铭牌——当前页菜单项整条呈防锈漆牌质感左缘一道陶土母排亮线、右端一枚陶土铆钉呼应电气柜门「设备铭牌」的工业语境侧栏顶部的开关柜面板徽标混凝土面板嵌红丹母排与陶土铆钉作为品牌锚点贯穿各页。所有颜色以 CSS 变量定义在:root中后续换肤只需要改十几个变量。订单状态采用四色语义待排产为灰紫、生产中为铁锈红、待交付为赭橙、已交付为橄榄青同一状态在仪表盘、列表、看板、详情中颜色始终一致。三、功能模块设计系统按「经营总览 — 订单执行 — 基础数据」三个层次组织成七个页面全部统计口径全站统一。订单总览是经营与生产的中枢在产订单、待交付、本年已交付、本月签约四张汇总卡一字排开每张卡片同时给出单数、台数与产值两个口径近十二个月签约金额与交付台数以「绿柱 深绿线」的双轴组合图呈现八月签约峰值与当月交付低谷的错位一眼可见右侧订单状态环形分布与下方即将交付提醒、最新签约台账让计划员在一屏之内完成早晨的交期巡检。订单列表是全部订单的检索台状态、客户两个下拉与关键字输入框组合筛选关键字同时命中订单号、客户名称、柜型与项目名称结果条实时汇总当前筛选范围的订单数、合计台数与合同额每行展示合同金额、签约日期、约定交期、状态徽标与生产进度条点击行即可穿透至订单详情。订单详情是单张订单的完整档案上半区是客户、项目、签约日期、约定交期、合同金额与供货台数八字段信息卡中部生产进度区用刻度进度条加七道主工序步骤条双重表达——钣金下料、折弯焊接、酸洗喷塑、母线加工、元器件装配、二次校线、出厂试验每道工序标注已完成、进行中或未开始下方 BOM 物料清单按一次元器件、二次元器件、柜体材料、导电材料、辅件耗材五类展开每项物料给出编码、规格、按台数折算的用量、供应商与到料状态右栏供货明细复核柜型单价与小计交付节点时间线按合同签订、技术交底、图纸确认、物料到货、装配完成、出厂试验、发运交付、现场送电八个里程碑倒排已完成节点深绿实心、当前节点信号橙高亮。生产排产是车间视角的在制看板待排产、钣金加工、装配接线、出厂试验、待发运五列订单卡片按工序权重自动归列每张卡片带订单号、客户、柜型台数、项目经理、刻度进度条与交期倒计时——剩余天数不足二十天转信号橙逾期转红。已交付订单自动退出看板车间只看在制。产品目录沉淀在册的九型柜体参数库KYN28A-12 铠装移开式开关设备、KYN61-40.5 高压柜、HXGN15-12 环网柜、GGD3 固定式低压柜、GCS 与 MNS 抽出式低压柜、GGJ2 电容补偿柜、GZDW 直流屏、YBM 预装式箱式变电站每型给出额定电压、额定电流、短时耐受、防护等级与执行标准并按订单台账实时统计在产占用台数。客户管理面向销售与计划两类读者顶部汇总合作客户数、覆盖行业数、累计订单与累计合同额台账按累计金额降序排列每家客户给出联系人、合作起始、订单数、供货台数、主力柜型画像与最近签约日期点击采购台账直接跳转到按该客户预筛选的订单列表。关于系统沉淀系统简介、功能模块清单、版本记录与数据说明新接手的计划员读完一页即可了解系统边界。四、数据设计与本地存储数据层的设计核心是「一份台账、一个口径、开箱即有」。业务实体围绕六类展开产品目录九型柜体及定额参考价、客户档案十家覆盖建筑施工、市政水务、数据服务、轨道交通等十个行业、订单台账二十八份订单每份含供货明细、项目经理与项目名称、BOM 定额模板按柜型类别定义单台用量定额、七道主工序权重表以及八节点交付里程碑模板。订单金额与台数不落库由供货明细乘以目录参考价即时推导——价目调整后全部页面同步生效不存在新旧两套数字。推导逻辑是这套系统的骨架订单总进度由工序权重加权得出工序状态由总进度反推BOM 到料状态随进度分级——待排产订单显示待采购钣金阶段显示在途装配阶段显示部分到料试验与交付阶段全部齐套交付里程碑由签约日期与合同交期按固定偏移生成节点状态再由订单状态回填。于是「生产中 88% 的订单必然停在出厂试验工序、装配完成节点必然已勾、发运交付节点必然未到」这样的因果关系在全站自动成立这就是详情页、看板与仪表盘三个页面数字永远对得上的原因。种子台账刻意覆盖了完整的业务光谱从昨天刚签约的待排产订单到正在出厂试验的华瑞云璟台配电项目再到五份成品在库、等待发运的合同以及十一个月里陆续交付的历史订单——每种状态都有真实样本图表形态稳定可复现。存储层以hk_cabinet_order_v1为命名空间首次访问写入台账快照此后全部页面共享同一份数据字典与统计函数数据只存在于本机浏览器清除站点数据后重新打开又能恢复一套完整台账。五、系统演示订单列表页的状态筛选与台账合计二十八份订单、三百三十八台、两千一百余万合同额同口径汇总订单详情页的生产中状态总进度 88%前六道工序完成、出厂试验进行中BOM 物料全部齐套交付节点走到装配完成产品目录页的九型柜体参数卡KYN28A-12、GGD3、MNS 等主力柜型的额定参数、执行标准与在产占用一目了然客户管理页的档案汇总与采购台账十家客户按累计合同额降序排列主力柜型画像直接可见生产排产看板的五列在制视图待排产四单、钣金加工三单、装配接线四单、出厂试验一单、待发运五单卡片刻度与交期倒计时实时联动订单详情页的待交付状态对照七道工序全部完成成品在库待发运与生产中状态形成清晰的阶段对照关于系统页的功能清单、版本记录与数据说明六、小结恒控电气订单管理系统用最朴素的技术组合——HTML5、CSS3、原生 JavaScript 加本地化的 ECharts完整实现了按单制造场景下订单全生命周期的管理闭环七个页面、九型柜体参数库、十家客户档案、二十八份订单的种子台账以及 BOM 齐套、工序推进、里程碑倒排三条相互咬合的推导链全部功能在断网环境中照常运转。工程结构上数据、框架、页面三层脚本各司其职设计 token 全部由 CSS 变量承载后续无论是调整主题还是把存储层替换为后端接口演进成多用户联网系统都有清晰的改造路径。对前端学习者而言这是一个覆盖状态机推导、组件化样式、图表可视化与本地持久化的综合练习对成套设备行业的软件建模而言它给出了一份可以直接照着做的「订单 — 物料 — 工序 — 节点」领域参考。如果在实现类似的订单管理系统时遇到问题欢迎评论区交流。恒控电气订单管理系统演示版 HTMLCSSJavaScriptECharts高低压电气柜订单管理/BOM物料/生产排产纯前端静态网页设计