在农业数字化转型的背景下，针对采摘类农场的信息化管理需求，构建一套集 ERP 业务管理、实时数据大屏与数字孪生可视化于一体的综合平台。该系统采用轻量化技术栈，通过单文件架构实现了高效的业务闭环与沉浸式交互体验。

一、系统架构与技术选型

本系统旨在解决传统采摘园依赖人工记录、数据分析滞后等痛点。架构设计上分为三个核心视图层：

• 业务管理层 (ERP)： 负责预约、会员、库存及结算等 8 大核心业务逻辑。
• 数据可视化层 (Dashboard)： 基于 ECharts 5 渲染实时运营指标。
• 数字孪生层 (Digital Twin)： 利用 Canvas 2D 绘制园区动态地图，模拟 IoT 传感器数据。

技术实现上，坚持"无框架、零依赖"原则，使用原生 JavaScript 驱动业务逻辑，CSS3 实现玻璃拟态（Glassmorphism）视觉风格。

二、核心业务模块设计

1. 会员等级与激励体系

系统内置四级会员成长体系，通过消费阈值自动触发等级变更，并关联差异化的折扣策略。以下为会员等级配置的逻辑实现：

const userTierMap = {
    'PLATINUM': { title: '铂金会员', rebate: 0.80, minSpend: 20000 },
    'GOLD': { title: '黄金会员', rebate: 0.88, minSpend: 8000 },
    'SILVER': { title: '白银会员', rebate: 0.95, minSpend: 2000 },
    'BASIC': { title: '普通会员', rebate: 1.00, minSpend: 0 }
};

/**
 * 根据累计消费额获取会员等级
 * @param {number} totalSpent - 累计消费金额
 */
function calculateMemberLevel(totalSpent) {
    if (totalSpent >= userTierMap.PLATINUM.minSpend) return 'PLATINUM';
    if (totalSpent >= userTierMap.GOLD.minSpend) return 'GOLD';
    if (totalSpent >= userTierMap.SILVER.minSpend) return 'SILVER';
    return 'BASIC';
}

2. 智能预约与状态机

预约系统管理游客的入园流量。每条预约记录包含客群组成（成人/儿童）、品种偏好及预计抵达时间。状态机流转逻辑为：待确认 -> 采摘中 -> 已结算，确保数据流向清晰。

3. 采摘记录与财务核算

作为系统的数据核心，采摘记录模块关联了会员权重、品种单价与区域产出。系统会自动计算实付金额：实付 = (重量 * 单价) * 会员折扣。所有交易数据通过 LocalStorage 进行本地持久化，模拟数据库存储行为。

三、数字孪生与 IoT 数据模拟

数字孪生模块通过 Canvas 2D 手绘园区平面图，打破了传统表格的枯燥感。系统模拟了 5 个核心采摘区的实时环境参数（温度、湿度、光照）。

// 模拟 IoT 传感器数据波动
function simulateEnvironmentData() {
    const zones = ['Zone_A', 'Zone_B', 'Zone_C', 'Zone_D', 'Zone_E'];
    zones.forEach(zoneId => {
        const sensorState = {
            temp: (20 + Math.random() * 10).toFixed(1),
            humidity: (60 + Math.random() * 20).toFixed(1),
            lux: Math.floor(2000 + Math.random() * 500)
        };
        // 执行视图更新逻辑
        refreshTwinDisplay(zoneId, sensorState);
    });
}

// 维持数据驱动的渲染循环
setInterval(simulateEnvironmentData, 5000);

四、视觉交互设计：玻璃拟态风格

为了提升管理后台的现代感，UI 设计采用了草莓主题色系结合毛玻璃效果。背景通过多层径向渐变营造出动态光影感。

/* 核心玻璃拟态容器样式 */
.glass-panel {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* 主题背景渐变 */
body {
    background: radial-gradient(circle at 20% 20%, rgba(232, 74, 95, 0.15), transparent),
                radial-gradient(circle at 80% 80%, rgba(93, 172, 71, 0.1), transparent),
                #0a0f0c;
}

五、数据分析维度

统计模块通过多维度图表提供决策支持：

• 收入结构： 采摘费、会员充值、农资销售的占比分析。
• 客流趋势： 基于 7 天滑动窗口的预约完成率统计。
• 库存预警： 农药、肥料及包装耗材的低库存自动高亮提醒。

通过这种高度集成的设计模式，管理者可以在单一页面内完成从日常业务操作到宏观决策分析的全部工作，极大降低了中小型农场的数字化转型成本。