单文件 HTML 实现 ERP 数据大屏 数字孪生三合一玻璃拟态设计。一、项目背景贵阳花溪区是贵州省著名的草莓种植基地每年冬季采摘季吸引大量游客。传统采摘园管理依赖纸质记录和微信沟通效率低下、数据分散。本文从0到1搭建一套完整草莓采摘园智慧管理平台覆盖预约、会员、采摘、库存、收费、统计全闭环并提供数据大屏和 IoT 数字孪生可视化。技术栈HTML5 CSS3 玻璃拟态 ECharts 5 Canvas 2D Vanilla JavaScript单文件无框架无后端开箱即用。在线体验贵阳花溪区草莓采摘园 · 智慧管理平台二、系统架构三合一融合模式系统采用顶部模式切换栏统一入口三种视图无缝切换模式说明技术 ERP管理8大业务模块完整管理闭环原生JS 侧边栏导航 数据大屏全屏可视化实时KPI趋势图ECharts 5️ 数字孪生Canvas 2D 园区地图传感器Canvas 2D 自绘数据大屏和数字孪生采用iframe 子页面独立加载各自拥有完整的 ECharts 实例和渲染循环互不干扰。三、8大功能模块详解1. 运营驾驶舱系统首页KPI 卡片 5张 ECharts 图表一屏掌握核心指标。KPI 指标今日预约数、在园人数、本月收入、会员总数、库存预警。数据从本地 seed data 实时聚合计算。5张图表月度采摘收入趋势柱状折线双轴、品种采摘占比饼图、会员等级分布环形图、近7天预约趋势、收入vs费用对比。// KPI 数据实时聚合 function renderDashboard() { const todayApts APPOINTMENTS.filter(a a.date 2026-07-17); const monthRevenue PICKING_RECORDS .filter(p p.date.startsWith(2026-07)) .reduce((s, p) s p.total, 0); // 动态渲染 KPI 卡片 ECharts 图表 }2. 预约管理支持新建预约、状态流转、时间轴查看。预约状态包括待签到 → 进行中 → 已完成。表格实时筛选支持按日期、状态过滤。核心设计预约表单内含品种选择、人数成人/儿童分开、预计到达时间数据写入APPOINTMENTS数组后页面即时刷新。3. 会员管理四级会员体系普通 → 银卡 → 金卡 → 钻石不同等级享受不同折扣率7.8折~原价。会员卡片展示累计消费、充值记录、采摘偏好。const LEVELS [ { name: 钻石, discount: 0.78, threshold: 30000 }, { name: 金卡, discount: 0.85, threshold: 10000 }, { name: 银卡, discount: 0.92, threshold: 3000 }, { name: 普通, discount: 1.0, threshold: 0 }, ];4. 采摘记录采摘记录是系统的核心数据流——关联会员、品种、采摘区域自动按会员等级计算折扣后金额。支持按品种、日期范围筛选汇总统计实时更新。每条记录包含采摘日期、会员信息、草莓品种、采摘重量(kg)、单价、折扣、实付金额、采摘区域。5. 农资库存管理化肥、农药、包装盒、工具等农资。库存预警机制低于安全库存自动标注颜色绿色正常、橙色低库存、红色预警提醒管理员及时采购。6. 收费结算聚合所有收费项目采摘费、会员充值、农资销售、其他收入。按日和按月统计汇总支持按收费类型筛选。费用支出同步记录形成收支对账。7. 统计分析7张分析图表覆盖收入分析、客流分析、品种对比、会员消费排行、预约完成率、月度对比。数据全部从已有的PICKING_RECORDS、APPOINTMENTS、MEMBERS派生计算无需额外维护。8. 系统设置品种管理、园区区域管理、会员等级折扣、系统信息。演示数据内置 8 个草莓品种红颜、章姬、奶油草莓等和 5 个采摘区域。四、数据大屏独立 HTML 文件data-dashboard.html全屏无边框设计。核心指标大数字展示 实时时钟 左侧 KPI 面板 右侧趋势图区域。每3秒自动刷新数据模拟 IoT 数据推送。// 3秒刷新循环 setInterval(() { updateSensors(); // 更新传感器数据 checkAlerts(); // 检查告警 renderSensorGrid(); // 重新渲染传感器网格 drawTwin(); // 重绘孪生 }, 3000);五、数字孪生IoT Twin纯Canvas 2D手绘园区地图包含5个采摘区域A区红颜、B区章姬、C区奶油、D区隋珠、E区宁玉每个区域独立配色传感器网格温度(°C)、土壤湿度(%)、光照强度(lux)每3秒模拟波动数据流动粒子15个粒子沿路径流动模拟数据采集传输设备状态面板右侧实时显示各区域传感器数值和状态不需要任何地图 SDK纯 Canvas API 绘制渲染性能极佳。六、设计亮点玻璃拟态 草莓主题色彩体系用途色值说明草莓红#e84a5f主色调按钮、高亮、KPI叶绿#5dac47辅助色成功、正常状态奶油金#e8b84a点缀色收入、金额深色背景#0c140f全局暗色底背景光晕三层径向渐变光晕草莓红、叶绿、奶油金CSS 动画循环浮动营造沉浸式草莓园氛围。background: radial-gradient(1400px 800px at 15% -5%, rgba(232,74,95,.18), transparent 60%), radial-gradient(1100px 650px at 85% 10%, rgba(93,172,71,.12), transparent 55%), radial-gradient(900px 600px at 50% 110%, rgba(232,184,74,.08), transparent 55%);玻璃拟态卡片所有面板采用backdrop-filter: blur() 半透明背景 微弱边框的玻璃拟态风格层次分明。七、种子数据系统内置完整演示数据开箱即可体验数据表数量说明会员 MEMBERS15条含钻石/金卡/银卡/普通预约 APPOINTMENTS12条跨多天多种状态采摘 PICKING_RECORDS28条1-7月数据库存 INVENTORY10条含预警项收费 BILLS15条采摘费会员充值农资品种 VARIETIES8个红颜/章姬/奶油等园区 ZONES5个分区管理所有数据通过 localStorage 持久化可在浏览器中增删改查刷新不丢失。八、总结这套花溪草莓采摘园管理系统单文件 HTML 不到 900 行代码完整实现了✅ 8大业务模块预约、会员、采摘、库存、收费、统计、设置、驾驶舱✅ 数据大屏全屏可视化 实时刷新✅ 数字孪生Canvas 2D 园区地图 传感器模拟✅ 玻璃拟态 UI三层光晕 毛玻璃卡片 草莓主题配色✅ 完整种子数据开箱即用无需配置核心价值对于中小型采摘园零部署成本、零运维负担浏览器打开即用。数据存 localStorage未来可平滑升级到后端数据库。在线体验贵阳花溪区草莓采摘园 · 智慧管理平台演示账号admin / admin123本文由 Y2Ksoft ERP 系统智能体生成欢迎交流讨论。