fastbee/yack-view/docs/操作手册.md

1.9 KiB
Raw Permalink Blame History

FastBee 驾驶舱制作指南

5分钟上手,只讲操作,不讲原理


一、登录

  1. 打开 yack-view 地址
  2. 用管理后台的账号密码登录

二、新建大屏

  1. 点击「新建项目」
  2. 输入名字,比如「车间监控大屏」
  3. 点「确定」

三、做界面

编辑器左侧是组件库,拖拽到中间画布:

组件 用来做什么
柱状图 对比数据高低
折线图 看趋势变化
饼图 看占比
仪表盘 看完成率
数字翻牌 显示单个关键数字
边框 装饰用

操作:

  • 拖拽移动位置
  • 拉边框角落调整大小
  • 点组件 → 右侧修改内容

四、接入真实数据(重点)

点击组件 → 右侧「数据」标签:

方式1:静态数据

手动输入数字,适用于演示。直接改 JSON 里的数值。

方式2:对接 FastBee 数据(常用)

选择「Ajax 请求」:

请求地址: /prod-api/接口路径
刷新间隔: 30秒(数据多久更新一次)

常用接口:

你想展示 接口路径
设备在线数 /device/online/count
设备列表 /device/list
设备统计数据 /device/stat
告警列表 /alert/list
产品列表 /product/list

具体接口去 FastBee 管理后台的 Swagger 文档里查

方式3:数据池(多个图表用同一份数据)

  1. 先创建一个数据池,配好 Ajax
  2. 其他组件选「数据池」,绑定到这个池

五、保存和预览

  • 顶部「💾 保存」:保存修改
  • 顶部「👁 预览」:看实际效果

六、发布分享

  1. 项目列表点「发布」
  2. 复制生成的链接发给别人

七、常见问题

Q:图表显示空白

检查数据源配置对不对,接口能不能调通

Q:数据不刷新

确保点了「刷新间隔」,设置具体秒数


有问题找开发人员