数据大屏 · 服务器集群监控中心

基于 Vue 3 + TypeScript + ECharts 的服务器集群监控可视化大屏，采用国风科技风视觉。数据来源于真实采集的四张监控表（主机维度、指标字典、性能事实、磁盘事实），按“每小时一帧”预聚合后循环回放，呈现集群 CPU、磁盘、网络、负载与告警的实时演化。

项目预览

预览图由截图脚本自动生成（npm run screenshot），默认输出到 docs/screenshots/dashboard-1920x1080.png。

大屏构成

• 顶部核心指标卡片：集群 CPU 使用率、磁盘平均使用率、网络吞吐、系统可用率
• 资源趋势折线图：CPU 使用率 / 磁盘使用率双序列，按小时滑动
• 机房主机分布环形图
• 机房拓扑图：监控中心 + 各机房节点，节点颜色随健康度变化
• 主机负载排行榜：按 CPU 使用率排序的 TOP 主机
• 集群健康雷达：CPU / 内存 / 磁盘 / I/O / 网络 / 负载六维余量
• 实时告警事件流：由真实阈值触发的滚动告警

数据来源与聚合口径

原始数据为四张制表符分隔表：

文件	角色	关键字段
host_detail.dat	主机维度	hostid
mod_detail.dat	指标字典	mod
pref_tsar.dat	性能事实	ts, hostid, mod, value
disk_tsar.dat	磁盘事实	ts, hostid, mod, value

聚合口径：以 FLOOR(ts / 3600000) * 3600000 将毫秒时间戳按小时截断，对同一小时内的全部主机与采样值分别计算平均值、最大值、最小值与样本数，得到每小时一个数据截面。预聚合结果保存在 src/mocks/monitorFrames.json，共 120 帧。

技术栈

分类	选型
前端框架	Vue 3（<script setup> + 组合式 API）
构建工具	Vite
语言	TypeScript（strict 模式）
图表	ECharts
状态管理	Pinia
请求库	Axios
接口 mock	MSW（Mock Service Worker）
单元测试	Vitest
端到端测试	Playwright
代码规范	ESLint + Prettier + Stylelint

数据流

页面通过 dashboardService 请求 GET /dashboard。默认 mock 模式下由 MSW 拦截，nextDashboardFrame() 从 monitorFrames.json 逐帧回放；Pinia store 每 2 秒轮询一次驱动页面刷新。业务组件只依赖 DashboardData 类型契约，不直接接触数据来源。

切换到真实后端：复制 .env.example 为 .env，设置 VITE_DATA_SOURCE=api 与 VITE_API_BASE_URL，后端返回符合 DashboardData 结构的 JSON 即可，前端无需改动。

快速开始

环境要求：Node.js 18 及以上。

npm install
npm run prepare:msw          # 首次运行生成 MSW worker
npm run dev -- --host 127.0.0.1 --port 10001

浏览器访问 http://127.0.0.1:10001/。

可用脚本

• npm run dev — 启动开发服务器
• npm run build — 类型检查并构建生产包
• npm run preview — 预览构建产物
• npm run lint — 运行 ESLint 与 Stylelint
• npm run test — 运行 Vitest 单元测试
• npm run test:e2e — 运行 Playwright 端到端测试
• npm run screenshot — 生成大屏截图到 docs/screenshots/

项目结构

.
├─ index.html
├─ scripts/
│  └─ capture-dashboard.mjs        # 自动截图脚本
├─ src/
│  ├─ app/                         # 应用入口与全局样式
│  ├─ components/                  # 通用组件（面板 / 指标卡 / 头部）
│  ├─ charts/                      # ECharts 图表组件与主题
│  ├─ layouts/                     # 大屏等比缩放布局
│  ├─ views/                       # 页面（DashboardView）
│  ├─ services/                    # 数据访问层（http / dataSource / dashboardService）
│  ├─ mocks/                       # 数据回放器、监控数据帧、MSW
│  ├─ stores/                      # Pinia 状态管理
│  ├─ utils/                       # 格式化 / 自适应工具
│  ├─ types/                       # 领域模型类型
│  └─ tests/                       # 单元测试与 E2E 测试
├─ docs/screenshots/               # 大屏展示截图
└─ 各类配置文件（vite / tsconfig / eslint / prettier / stylelint / playwright）

License

本项目基于 MIT License 开源。