【家庭智能用电监测与阶梯电费预警App】基于 Vue3 + Spring Boot + 能耗趋势预测 的设计与实现(含PRD/三端高保真源码/大屏)

7 阅读7分钟

【家庭智能用电监测与阶梯电费预警App】基于 Vue3 + Spring Boot + 能耗趋势预测 的设计与实现(含PRD/三端高保真源码/大屏)

📌 项目摘要:在夏季用电高峰与极端酷暑气象常态化背景下,“刚过月中电费账单就翻倍暴增”、“不知不觉触发二档三档高价阶梯加价”成为千万普通家庭的核心痛点。本项目研发了一套基于 Vue 3.4 + Pinia + Tailwind CSS + ECharts 5 + Spring Boot 3.2 的一体化【家庭智能用电监测与阶梯电费预警系统】。深度贯通**“家庭电能物联网毫秒级遥测 + 居民阶梯电价动态水线预警 + 24小时峰谷负荷调度 + 待机隐形电费刺客剥离 + 虚拟电厂绿电碳账户”**,打造“移动端随身 + PC端全景大屏 + Admin端配电总控”三端高保真智慧能源闭环!


一、 系统业务架构与多端协同设计

本系统严格遵从现代企业级规范,构建了**“移动端随身控电 + PC端能源全景作战大屏 + Admin端电网负荷总控”**三端协同体系:

+-----------------------------------------------------------------------------------+
|               SmartHome Energy 智慧家庭微电网与阶梯电费智能管控闭环平台            |
+-----------------------------------------------------------------------------------+
|                                                                                   |
|  [ 📱 微信小程序/随身端 ]        [ 🖥️ PC家庭能源作战大屏 ]     [ 🛡️ 运营管理总控台 ]  |
|  - 实时瞬时功率毫秒级监控      - 全屋能源全景作战大屏       - 社区台区变压器群控大屏 |
|  - 阶梯水线剩余度数跑马灯      - 阶梯电费动态安全水线仪表   - 全国省市阶梯费率引擎   |
|  - 24h低谷5.3折电自动预约      - 今日峰谷用电柱状分布       - 家电微功耗指纹识别库   |
|  - 绿色微电网 VIP 碳账本       - 阶梯电费调温推演沙盘       - 虚拟电厂调峰碳普惠结算 |
|                                                                                   |
+-----------------------------------------------------------------------------------+
                                         │
                                         ▼ (RESTful API / MQTT / WebSocket)
+-----------------------------------------------------------------------------------+
|                     Spring Boot 3.2 能耗时序预测与阶梯风控中枢                     |
|  - 发改委省市居民阶梯电价规则引擎 (Tariff Engine)  - ARIMA/LSTM 月末电量时序预测器   |
|  - 大功率电费刺客高次谐波指纹剥离模型              - 虚拟电厂(VPP)需求侧响应聚合服务 |
+-----------------------------------------------------------------------------------+

二、 现代高端前端 UI/UX 美学设计

系统彻底告别了千篇一律的深黑 AI Slop 风格,精选**“清新科技绿 + 暖橙电感 + 极光白”**(#059669, #ea580c, #f0fdfa, #10b981)作为主视觉基调。

  • 采用温润透明的磨砂玻璃拟态(Glassmorphism)与流动蓄水仪表;
  • 注入灵动生动的峰谷分时双色柱状负荷图与回路负载指示灯;
  • 兼具科技现代感与能源数据可视化的严谨度,让用电和省钱一目了然。

三、 三端高保真全套系统界面逐图解析

1. PC 端家庭能源全景数字作战大屏 (PC Terminal)

(1) 家庭能源全景作战大屏

实时展现户号、全屋瞬时运行功率 (kW)、今日累计电量、本月预估电费与阶梯水线警戒状态。 !家庭能源全景作战大屏

(2) 阶梯电费动态安全水线仪表

第一档基准平价区 (0-260度)、第二档适度提价区与第三档高价暴增区动态蓄水量可视化呈现。 !阶梯电费动态安全水线仪表

(3) 今日24小时实时负荷波动与峰谷曲线

双色柱状图直观区分 0.338元 低谷优惠时段(绿柱)与平峰时段(橙柱),量化谷电利用率。 !今日24小时实时负荷波动与峰谷曲线

(4) 家庭阶梯电费推演沙盘

空调调温 26℃、热水器 22:00 错峰排程与待机插座凌晨休眠三大行动方案节电降本沙盘演算。 !家庭阶梯电费推演沙盘

(5) 全屋智能电网回路与负荷总控台

分房间呈现空调、热水器、冰箱、充电桩等回路状态、实时功率 W、日均耗电与远程一键断闸。 !全屋智能电网回路与负荷总控台

(6) 能耗结构深度趋势与气象关联分析

ECharts 5 科学统计近一年各月份用电柱形图、空调/热水器耗电占比结构雷达与温差弹性指数。 !能耗结构深度趋势与气象关联分析

(7) 光伏储能直连与家庭绿色微电网 VIP

尊享屋顶分布式光伏发用电闭环遥测、家用储能电池低谷自动充电高峰放电套利与强电绝缘年检特权。 !光伏储能直连与家庭绿色微电网VIP


2. 运营管理总控台 (Admin Console)

(1) 社区电网负荷调度与台区变压器群控大屏

毫秒级追踪千户家庭总用电负荷、配电变压器负载率、分布式光伏倒送潮流与过载事件流。 !社区电网负荷调度与台区变压器群控大屏

(2) 全国省市阶梯电价与峰谷分时费率规则库

统一维护发改委夏季/非夏季分段标准、阶梯加价阈值及低谷折扣浮动比率。 !全国省市阶梯电价与峰谷分时费率规则库

(3) 家电微功耗指纹识别与暗线漏电仲裁模型

高频谐波算法精准识别机顶盒/智能音箱偷跑待机电量,微弱漏电 30mA 毫秒级防触电保护。 !家电微功耗指纹识别与暗线漏电仲裁模型

(4) 家庭绿色微电网碳减排账本与虚拟电厂结算

家庭分布式储能削峰填谷聚合接入电网需求侧响应,自动化结算调峰现金补贴与碳积分。 !家庭绿色微电网碳减排账本与虚拟电厂结算

(5) 智慧能源大脑预测模型与告警阈值配置

调整 ARIMA/LSTM 时序负荷预测模型迭代超参数、MQTT 上报频率与防跳档预警置信度。 !智慧能源大脑预测模型与告警阈值配置


3. 手机移动端与微信小程序随身端 (Mobile App)

(1) 实时全屋能耗与控制

实时监测 2.45kW 全屋总负荷,常用大功率家电一键启闭。 !实时全屋能耗与控制

(2) 阶梯电费跳档水线告警

动态跑马灯显示剩余 11.5 度跳档,下发调温错峰降本指南。 !阶梯电费跳档水线告警

(3) 微电网 VIP 碳积分账本

查看月度减碳 86.4kg 荣誉、错峰节约电费与光伏储能自发自用收益。 !微电网VIP碳积分账本


四、 核心业务时序流与技术实现

sequenceDiagram
    autonumber
    actor User as 家庭用户 (移动端/PC)
    participant Meter as 智能物联电表 (MQTT)
    participant Core as 能源时序中枢 (Spring Boot)
    participant Tariff as 发改委阶梯规则库
    participant ARIMA as 时序预测算法模型
    participant Grid as 虚拟电厂调度中枢

    Meter->>Core: 毫秒级上报整户有功功率 (2.45 kW)
    Core->>Core: 累加今日与月度耗电量 (248.5 kWh)
    User->>Core: 查询本月阶梯水线状态
    Core->>Tariff: 匹配省市阶梯标准 (一档限额: 260 kWh)
    Core->>ARIMA: 传入历史30天负荷,推演月末总电量
    ARIMA-->>Core: 预测将超额跳入第二档 (+8.3%加价)
    Core-->>User: 触发第一档临界高危预警 (仅剩11.5度)
    Core-->>User: 下发智能节能方案 (建议洗碗机22:00后低谷运行)
    User->>Core: 一键开启【夜间低谷错峰预约】
    Grid->>Core: 下发虚拟电厂夏季削峰调控现金奖励 (¥14.20)

核心 Spring Boot 阶梯动态水线与 ARIMA 时序预测代码

// Spring Boot 3.2 居民阶梯电费动态水线预警与 ARIMA 能耗负荷趋势预测中枢
@Service
@Transactional
public class EnergyPredictionServiceImpl implements EnergyPredictionService {

    @Autowired
    private MeterTelemetryRepository meterRepo;
    @Autowired
    private TariffRuleEngine tariffEngine;
    @Autowired
    private ArimaLoadPredictor arimaPredictor;

    @Override
    public TierAlertAnalysisVO evaluateMonthlyTierRisk(Long householdId, String tariffCity) {
        // 1. 获取本月该家庭智能物联电表实时累计用电量与昨日负荷切片
        HouseholdMeter meter = meterRepo.findById(householdId)
                .orElseThrow(() -> new BusinessException("户号不存在"));
        BigDecimal currentMonthKwh = meter.getCurrentMonthAccumulatedKwh();
        LocalDate today = LocalDate.now();
        int daysLeft = today.lengthOfMonth() - today.getDayOfMonth();

        // 2. 加载发改委现行省市居民阶梯电价阶梯分档参数
        TariffPolicy policy = tariffEngine.getPolicyByCity(tariffCity);
        BigDecimal tier1Limit = policy.getTier1LimitKwh();
        BigDecimal tier2Limit = policy.getTier2LimitKwh();

        // 3. 执行时序 ARIMA 趋势预测算法:基于历史 30 天气温与负荷衰减预测月末总电量
        BigDecimal projectedMonthKwh = arimaPredictor.predictMonthEndKwh(
                meter.getTelemetryHistory(),
                daysLeft,
                policy.getCurrentSeason()
        );

        // 4. 越档概率与防跳档保平价行动方案计算
        boolean willCrossTier1 = projectedMonthKwh.compareTo(tier1Limit) > 0;
        BigDecimal overKwh = willCrossTier1 ? projectedMonthKwh.subtract(tier1Limit) : BigDecimal.ZERO;
        BigDecimal penaltyCost = overKwh.multiply(policy.getTier2Price().subtract(policy.getTier1Price()));

        return TierAlertAnalysisVO.builder()
                .currentMonthKwh(currentMonthKwh)
                .tier1Limit(tier1Limit)
                .remainingKwhInTier1(tier1Limit.subtract(currentMonthKwh).max(BigDecimal.ZERO))
                .projectedMonthKwh(projectedMonthKwh)
                .willCrossTier1(willCrossTier1)
                .daysUntilBreach(willCrossTier1 ? arimaPredictor.calculateDaysToBreach(currentMonthKwh, tier1Limit) : -1)
                .projectedPenaltyCost(penaltyCost)
                .optimalActionPlan("建议将储水式热水器与洗碗机调整至 22:00-08:00 低谷时段 (享5.3折特惠电价),空调设定 26℃ 可平稳规避跳档加价!")
                .build();
    }
}

五、 项目资源与源码获取

完整系统包含:

  1. 三端高保真可运行完整工程源码(PC 能源作战大屏 + Admin 电网负荷总控 + Mobile 随身小程序);
  2. 满分规范 PRD 需求规格说明书 (PRD.md)
  3. 全套 15 张 4K 原生高清设计切图 与 生产部署指导手册。