📱 H5 实时数据看板:手机/电脑双端适配

把核心数据装进口袋,老板随时打开看,决策提速 3 倍

🎯 为什么需要 H5 看板?

你是不是也有这种困扰:

解决方案:做一个 H5 实时数据看板,把核心指标聚合到 1 个页面,手机/电脑都能看,老板/同事扫码就能打开

🖥️ 看板效果预览(你能做出这样的)

📊 中级注安项目 · 实时数据看板
🕐 数据更新:2026-06-15 16:30
本周总营收
¥ 287,500
↑ 8.2% vs 上周
本周订单数
35
↑ 12.9% vs 上周
UV / 转化率
42,800 / 9.2%
↑ 0.4pp
活跃咨询
380
↓ 3.5%
📊 端口营收拆解
📺 直播课¥ 98,000 (34%)
🎥 录播课¥ 76,500 (27%) ↑
🛡️ 协议班¥ 58,000 (20%) ↓
📚 图书¥ 45,000 (16%)
📱 题库¥ 10,000 (3%)
💡 数据每 5 分钟自动刷新一次

✨ 一个好的数据看板必须具备 6 大特性

📱

手机/电脑双端适配

响应式布局,无论 iPhone、安卓、PC 打开都好看

🔄

实时刷新

数据每 5 分钟自动更新,不需要手动维护

🔗

链接可分享

生成短链,发到群/邮件,对方点开就能看

📊

图表 + 数字

核心指标大字报 + 趋势图,一眼抓重点

🚨

异常预警

数据同比/环比异常时,红色高亮提示

📂

可下钻

点击某个端口/课程,能看到明细

🛠️ 4 步搭建流程

1

明确指标

列 5-8 个核心指标 + 数据来源

2

AI 生成

用模板让 WorkBuddy 写 HTML 看板

3

填数据

把数据填入 JS 变量(每周/每天更新)

4

发布分享

部署到内网或 WorkBuddy 静态托管

💬 提问模板(让 AI 帮你写看板代码)

👤 你输入:

你是一位资深前端工程师 + 互联网产品经理,擅长用 HTML + JS 写数据看板。

请帮我写一个"中级注安项目·实时数据看板"的单页 HTML,要求:

1. 数据指标(这些字段要展示)
- 本周总营收 ¥287,500(环比 +8.2%)
- 本周订单数 35 单(环比 +12.9%)
- UV 42,800(环比 +5.1%)
- 转化率 9.2%(环比 +0.4pp)
- 活跃咨询 380(环比 -3.5%)

2. 端口拆解(5 端口营收)
- 直播课 ¥98,000 (34%)
- 录播课 ¥76,500 (27%)
- 协议班 ¥58,000 (20%)
- 图书 ¥45,000 (16%)
- 题库 ¥10,000 (3%)

3. 视觉风格
- 科技蓝 + 暖色高亮(红色涨/绿色跌)
- 顶部 4 个核心指标卡片(数字大)
- 中间 5 端口条形对比
- 底部 Top 3 课程/销售榜单
- 显示数据更新时间

4. 技术要求
- 单页 HTML,可直接浏览器打开
- 响应式:手机/电脑双端适配
- 数据用 JS 变量集中管理,方便更新
- 异常数据(环比下滑 >15%)用红色高亮
💡 AI 会在 30 秒内返回完整 HTML 代码(一般 300-500 行)。直接保存为 .html 文件,用浏览器打开就能看。

📋 看板数据更新 SOP(每周一 10 分钟)

看板做出来不是结束,持续更新才是关键。建议每周一花 10 分钟:

  1. 导出上周 7 天的数据(CRM/抖音/微信)
  2. 打开看板的 HTML 文件
  3. 找到 <script> 里的 const DATA = { ... } 部分
  4. 替换为本周新数据
  5. 保存 → 浏览器刷新看效果
  6. 用 WorkBuddy 的"分享"功能把链接发到群里
💡 进阶:让 WorkBuddy 帮你建一个"自动更新脚本"(每次只改 Excel 就能自动同步到看板),详见 7.3 自动化任务。

🎯 看板的 3 大使用场景

  1. 📧 老板日报:每天早上 9 点发链接,让老板打开就能看当天数据
  2. 💬 销售群日报:每天在销售群发链接,激励团队 PK(销售额 Top 3 红榜)
  3. 🤝 跨部门对齐:周会时投屏,30 秒过完核心数据,直接进入讨论

⚠️ 常见坑(务必避开)

数据泄露风险:客户姓名、手机号、订单号绝不能上看板。只放"汇总数字"和"课程/销售名"。
看板 ≠ 报表:别把所有数据都堆上去。核心 5-8 个指标 + 1-2 个图表就够了。老板没空看 30 个数字。
更新不及时 = 看板死亡:做出来 1 周不更新 = 团队再也不点开。固定时间更新(每天/每周)是看板活下去的关键。

✅ 本周实操任务

  1. ☐ 列出 5-8 个核心指标 + 数据来源(用 1 张表)
  2. ☐ 用提问模板让 AI 生成 HTML 看板代码
  3. ☐ 保存为 .html,浏览器打开看效果
  4. ☐ 填入本周真实数据,分享给 1 个同事
  5. ☐ 建立"每周一更新"日历提醒