某大型农牧集团的规模化猪场原本靠 Excel 和纸质单据管理生产，场长每月要手工汇总十几张表才能出一份报表，集团层面拿不到实时数据，异常情况往往滞后一周才被发现。
养殖行业的特殊性在于：组织层级深（集团→区域→场区→大批次→小批次），指标口径复杂（存栏是累计求和，死亡率、断奶重必须按窝数加权平均），且一线操作场景是在猪舍里用手机单手完成的，不可能坐在电脑前录数据。
本项目目标是在正式开发投入前，用可交互原型把三端业务流程跑通、确认指标口径和交互细节，降低后续返工成本。
项目共交付 288 个页面，覆盖 PC 端生产管理系统、数据看板和移动端作业系统三部分。
一、PC 端生产管理系统
包含瞭望台、猪群信息、智慧物联、设备运维、生物安全、疾病管理、基础信息、系统管理八大模块。支持多养殖部、多场区集中管理与场区切换。
二、生产管理看板
按生理阶段划分为后备、妊娠、哺乳、仔猪、保育、育肥六大批次模块，外加总览、健康生产、健康档案。支持集团总览 / 区域总览 / 繁殖场 / 育肥场四个层级下钻，每层级下均提供完整图表。指标体系涵盖存栏、死亡率、断奶重、料肉比、100kg 校正日龄、70 日龄校正末重等，含标准值、去年同期、均值三线对比。
三、智慧物联与设备运维
饲喂器、料塔、料线、环控、巡检机器人、过道盘点、声音设备七类设备的接入状态总览，设备故障 Top 10 排行、近 30 天在线率趋势、近 7 天故障记录（含故障等级与处理状态流转）。另含咳嗽监测专题，做声音设备的异常预警。
四、移动端作业系统
按场长、饲养员、兽医、主管四种角色提供差异化首页与工作台。工作台含分娩记录、寄养、治疗记录、配种、断奶计划、调栏、转群、死亡登记、种猪档案、批次管理等常用功能，以及巡栏、生物安全采样、猪只导入、角色权限批量配置等作业流程，配套生产/健康的日报周报和 AI 助手入口。
系统还支持看板导出 PDF、一览表与批次流转记录查询、SaaS 多租户体系设计。
我在项目中独立负责全部三端原型的设计与实现，从业务调研、页面结构设计到交互开发全流程。
技术栈：Vue 3.3.8（CDN 全局构建）+ Element Plus 2.4.2 + ECharts 5.4.3，零构建纯静态架构，配套自写 Node 静态服务器解决中文路径加载问题，任何人 clone 下来一条命令即可运行，无需 npm install。
实现亮点：
1. 自研 data-engine.js 统一数据引擎。把「集团→区域→场区→大批次→小批次」的层级聚合逻辑集中收口，以小批次为叶子节点自底向上计算：累计型指标求和，比率型指标按窝数加权平均。解决了各页面各自造数导致口径不一致的问题。
2. 用「按 ID 哈希的确定性伪随机」（FNV-1a + mulberry32）替代 Math.random()。这是原型演示的关键细节——同一个批次每次渲染结果完全一致，刷新不跳变，汇报时数据才有说服力，客户也才能基于稳定数据讨论口径。
3. 自研 chart-kit.js 统一图表渲染器。所有模块共用一套渲染逻辑和色板（对齐 Element Plus 设计令牌），保证四个层级切换时三张图都完整渲染且即时刷新，同时把 60 多个页面的图表代码收敛到一处维护。
4. 沉淀了卡片、图表、表格、左侧菜单四份设计规范文档和页面开发指南，让后续页面扩展保持视觉与交互一致。
主要难点：
一是指标口径。养殖指标不能简单求和，死亡率、断奶重必须加权，且每个指标的权重基数不同，这部分需要反复和业务方对齐后在数据引擎中统一实现。
二是层级下钻的数据一致性。四个层级切换时，上层数字必须等于下层聚合结果，否则业务方一眼就能看出问题，这是靠数据引擎自底向上单向计算保证的。
三是移动端的角色差异化。四种角色的首页和工作台入口都不同，通过统一路由模块管理角色态和返回逻辑，避免每个页面重复判断
评论