Green Energy Integration Platform

绿色能源集成智能化服务平台 · 移动端高保真原型

基于《绿色能源集成智能化服务平台》技术文档输出,面向工商业用户的小程序原型覆盖:首页仪表盘、绿电交易、绿证、节能分析、储能、碳资产、数据驾驶舱、预警中心、企业中心、系统设置,并补齐登录、企业切换、订单详情、报告详情、工单处置等关键业务页面,并继续补齐订单列表、证书详情、审批流程、报告列表、工单列表等登录后完整闭环页面。

核心页面

20

主导航

5

扩展业务页

10

开发方式

HTML + Tailwind

1. 用户体验分析

  • • 目标用户:能源经理、园区运维负责人、ESG/碳资产管理者、绿电采购决策人。
  • • 高频任务:查看 KPI、处理预警、采购绿电、管理证书、分析节能与储能状态、输出报告。
  • • 核心体验:高频信息前置、异常优先级明确、复杂分析模块可视化、关键操作低路径完成。

2. 产品界面规划

  • • 一级 Tab:首页 / 交易 / 证书 / 分析 / 我的。
  • • 分析域下拆分节能、储能、碳资产、数据驾驶舱,保证业务分层清晰。
  • • 告警中心作为跨模块入口,承接交易、设备、证书和报告通知。

3. UI 实现原则

  • • 按 iPhone 15 Pro 393×852 视口模拟,含 iOS 状态栏、Dynamic Island、底部 Tab Bar。
  • • 采用现代玻璃拟态卡片 + 品牌绿蓝渐变,统一绿色能源平台识别。
  • • 使用真实图片资源、Chart.js 图表与 FontAwesome 图标,可直接交付前端切图与开发。

01 · 首页仪表盘

核心 KPI、能源结构、采购趋势、快捷操作与报警概览。

02 · 绿电采购与交易

行情图、买卖盘、智能下单、成交明细。

03 · 绿电证书中心

证书卡片、年度分布、续期提醒、在线申请。

04 · 节能分析

设备能耗柱状图、区域占比、异常消耗与 AI 优化建议。

05 · 储能管理

SOC、电池平面图、充放电曲线、微网切换状态。

06 · 碳资产交易

配额 / CCER 持仓、碳价趋势、AI 交易策略。

07 · 数据驾驶舱

四联图可视化、核心结论与报告输出入口。

08 · 消息与预警

多模块告警聚合、风险分级与联动处置。

09 · 我的 / 企业中心

账号、企业、组织、报告导出与权限管理。

10 · 系统设置

通知、刷新、安全与版本支持。

Extended Business Pages

业务补充页面

围绕真实业务闭环,新增登录、企业切换、订单详情、报告详情、运维工单 5 个页面,方便直接进入开发阶段。

新增页面

5

认证

登录

组织

切换

交易

订单

运维

工单

11 · 登录页

手机验证码、企业 SSO、平台能力概览。

12 · 切换企业 / 园区

支持集团、园区、站点多组织视角切换。

13 · 订单详情

查看订单执行进度、成交记录与风控信息。

14 · 报告详情

周报封面、章节目录、导出与分发动作。

15 · 工单详情

告警自动派单、SLA 追踪、处理清单与现场处置。

Closed-loop Pages

登录后完整业务闭环页面

新增订单列表、证书详情、审批流程、报告列表、工单列表,形成从列表到详情、从告警到工单、从申请到审批、从报告库到详情的完整链路。

新增页面

5

订单

列表

证书

详情

流程

审批

运维

工单池

16 · 订单列表

查看全部订单、筛选状态并进入详情或审批。

17 · 证书详情

查看证书生命周期、台账信息与注销申请入口。

18 · 审批流程

订单与证书等关键动作的审批链与意见流转。

19 · 报告列表

报告库总览,可进入 ESG 周报等详情页。

20 · 工单列表

告警联动工单池,支持按风险与状态筛选。