数据可视化展示大屏
多源 Prometheus 服务器监控展示大屏，支持对接多个 Prometheus 实例，实时展示所有服务器的 CPU、内存、磁盘、网络等关键指标。
功能特性
- 🔌 多数据源管理 - MySQL 存储配置，支持对接多个 Prometheus 实例
- 📊 NodeExporter 数据查询 - 自动聚合所有 Prometheus 中的 NodeExporter 数据
- 🌐 网络流量统计 - 24 小时网络流量趋势图，总流量统计
- ⚡ 实时带宽监控 - 所有服务器网络带宽求和，实时显示
- 💻 资源使用概览 - CPU、内存、磁盘的总使用率和详细统计
- 🖥️ 服务器列表 - 所有服务器的详细指标一览表
快速开始
1. 环境要求
- Node.js >= 16
- MySQL >= 5.7
- Valkey >= 7.0 (或 Redis >= 6.0)
2. 配置
复制环境变量文件并修改：
cp .env.example .env
编辑 .env 文件，配置 MySQL 和 Valkey 连接信息：
# MySQL 配置
MYSQL_HOST=localhost
MYSQL_PORT=3306
MYSQL_USER=root
MYSQL_PASSWORD=your_password
MYSQL_DATABASE=display_wall
# Valkey/Redis 缓存配置 (可选)
VALKEY_HOST=localhost
VALKEY_PORT=6379
VALKEY_PASSWORD=
VALKEY_TTL=30
PORT=3000
3. 系统初始化
访问 http://localhost:3000/init.html，按照引导完成数据库和缓存的初始化。
4. 安装依赖并启动
npm install
npm run dev
访问 http://localhost:3000 即可看到展示大屏。
5. 配置 Prometheus 数据源
点击右上角的 ⚙️ 按钮，添加你的 Prometheus 地址（如 http://prometheus.example.com:9090）。
6. Prometheus 配置参考 (Example)
在您的 Prometheus 配置文件 prometheus.yml 中，建议执行以下配置（scrape_interval 建议设为 5s 以获取最佳实时展示效果）：
global:
scrape_interval: 5s
scrape_configs:
- job_name: '机器名称'
static_configs:
- targets: ['IP:Port']
技术栈
- 后端: Node.js + Express
- 数据库: MySQL (存储配置数据)
- 缓存: Valkey / Redis (用于加速流量计算结果读取)
- 数据源: Prometheus HTTP API
- 前端: 原生 HTML/CSS/JavaScript
- 图表: 自定义 Canvas 渲染
API 接口
| 方法 | 路径 | 说明 |
|---|---|---|
| GET | /api/sources |
获取所有数据源 |
| POST | /api/sources |
添加数据源 |
| PUT | /api/sources/:id |
更新数据源 |
| DELETE | /api/sources/:id |
删除数据源 |
| POST | /api/sources/test |
测试数据源连接 |
| GET | /api/metrics/overview |
获取聚合指标概览 |
| GET | /api/metrics/network-history |
获取24h网络流量历史 |
| GET | /api/metrics/cpu-history |
获取CPU使用率历史 |