101 lines
1.9 KiB
Markdown
101 lines
1.9 KiB
Markdown
# 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：数据不刷新**
|
||
> 确保点了「刷新间隔」，设置具体秒数
|
||
|
||
---
|
||
|
||
> 有问题找开发人员 |