50 lines
1.1 KiB
Markdown
50 lines
1.1 KiB
Markdown
|
# 水务管理系统 BI 前端
|
||
|
|
|
||
|
|
这是一个简单的HTML前端，用于展示水务管理系统的BI看板和数据可视化功能。
|
||
|
|
|
||
|
|
## 功能特点
|
||
|
|
|
||
|
|
- 自助BI看板浏览
|
||
|
|
- 图表数据可视化
|
||
|
|
- 实时数据展示
|
||
|
|
- 响应式设计
|
||
|
|
- 移动端兼容
|
||
|
|
|
||
|
|
## 文件结构
|
||
|
|
|
||
|
|
```
|
||
|
|
frontend/
|
||
|
|
├── index.html # 主页面
|
||
|
|
├── css/
|
||
|
|
│ └── styles.css # 样式文件
|
||
|
|
├── js/
|
||
|
|
│ ├── main.js # 主要JavaScript逻辑
|
||
|
|
│ ├── api.js # API调用封装
|
||
|
|
│ └── charts.js # 图表绘制逻辑
|
||
|
|
└── lib/
|
||
|
|
└── echarts.min.js # ECharts图表库
|
||
|
|
```
|
||
|
|
|
||
|
|
## 使用方法
|
||
|
|
|
||
|
|
1. 确保后端API服务器正在运行
|
||
|
|
2. 打开 `index.html` 文件
|
||
|
|
3. 选择要查看的看板
|
||
|
|
4. 查看实时数据和图表
|
||
|
|
|
||
|
|
## API接口
|
||
|
|
|
||
|
|
前端主要通过以下API接口与后端交互：
|
||
|
|
|
||
|
|
- `/bi-api/dashboards/overview` - 获取概览看板
|
||
|
|
- `/bi-api/dashboards/{id}/data` - 获取看板数据
|
||
|
|
- `/bi-api/charts/{id}/data` - 获取图表数据
|
||
|
|
- `/bi-api/search` - 搜索功能
|
||
|
|
|
||
|
|
## 技术栈
|
||
|
|
|
||
|
|
- HTML5
|
||
|
|
- CSS3
|
||
|
|
- JavaScript (ES6+)
|
||
|
|
- ECharts 图表库
|
||
|
|
- Fetch API
|