Data Visualization Screen

企业服务器监控数据大屏 —— 基于 Python FastAPI + Vue 3 + ECharts 的全栈数据可视化解决方案。

预览

深蓝科技风全屏数据大屏，1920×1080 完美铺满，实时监控 20 台服务器的 CPU、内存、磁盘、网络、负载等核心指标。

技术架构

┌──────────────────────────────────────────┐
│  前端  Vue 3 + TS + ECharts + Pinia      │
│  components/ → stores/ → api/            │
└──────────────────┬───────────────────────┘
                   │ RESTful API (JSON)
┌──────────────────┴───────────────────────┐
│  后端  FastAPI + SQLAlchemy + Pandas     │
│  routers/ → schemas/ → ETL → MySQL       │
└──────────────────┬───────────────────────┘
                   │ PyMySQL / SQLAlchemy
┌──────────────────┴───────────────────────┐
│  MySQL 8.0  (4 基础表 + 2 预聚合汇总表)   │
└──────────────────────────────────────────┘

项目结构

Data Visualization Screen/
├── backend/                          # Python FastAPI 后端
│   ├── main.py                       # 入口：FastAPI 启动 + CORS
│   ├── database.py                   # SQLAlchemy 连接配置
│   ├── models.py                     # ORM 模型定义
│   ├── schemas.py                    # Pydantic 请求/响应模型
│   ├── etl.py                        # ETL：.dat → MySQL 全量导入 + 预聚合
│   └── routers/
│       └── dashboard.py              # 9 个 Dashboard API 接口
├── frontend/                         # Vue 3 前端
│   ├── src/
│   │   ├── api/                      # axios 请求封装
│   │   │   ├── request.ts            # 实例 + 拦截器
│   │   │   └── dashboard.ts          # Dashboard API 方法
│   │   ├── stores/
│   │   │   └── dashboard.ts          # Pinia 状态管理
│   │   ├── types/
│   │   │   └── index.ts              # TypeScript 类型定义
│   │   ├── composables/
│   │   │   ├── useAutoRefresh.ts     # 30s 自动刷新 + 页面可见性控制
│   │   │   └── useCountUp.ts         # 数字滚动递增动画
│   │   ├── components/
│   │   │   ├── layout/               # DashboardHeader（标题栏）
│   │   │   ├── metrics/              # MetricCard（指标卡片）
│   │   │   ├── charts/               # 7 个 ECharts 图表组件
│   │   │   └── common/               # DataPanel / LoadingSkeleton / ErrorBoundary
│   │   └── styles/
│   │       └── variables.css         # 深蓝科技风全局样式
│   ├── vite.config.ts                # Vite 配置 + API 代理
│   └── package.json
├── schema.sql                        # MySQL 建表 DDL
├── LICENSE                           # MIT 开源协议
└── README.md

数据来源

来自 D3 数据建模作业的服务器监控原始数据（.dat 文件，制表符分隔）：

数据表	记录数	说明
host_detail	20	主机信息（5 个机房 × 6 种型号）
mod_detail	55	指标字典（35 磁盘 + 20 性能）
disk_tsar	12,000	磁盘采集明细（5 分钟级）
pref_tsar	67,200	性能采集明细（小时级）

时间范围：2026-07-01 ~ 2026-08-11，时间戳为 Unix 毫秒，转换为北京时间（UTC+8）。

大屏功能

指标卡片

• 6 个核心 KPI：服务器总数、监控指标数、CPU 平均使用率、内存平均使用、磁盘平均使用率、平均负载
• 数字递增动画，2 位小数精确展示

可视化图表

图表	说明
CPU 使用率趋势	5 条折线（user / sys / wait / idle / usage）
内存使用趋势	5 条折线 + 面积（used / free / buff / cache / swap）
各磁盘使用率对比	分组柱状图（avg / max，5 块磁盘）
网络流量趋势	双折线 + 面积（入站 / 出站 MB/s）
主机 CPU 排行	横向柱状图（20 台服务器，渐变色）
机房分布	玫瑰饼图（5 个机房，占比展示）
系统负载趋势	3 条折线（load1 / load5 / load15）

交互特性

• 自动刷新：30 秒轮询，页面不可见时自动暂停，切回时立即刷新
• 日期切换：下拉选择历史日期，切换不同日的数据
• 实时时钟：Header 数字时钟，每秒更新
• 加载态：首次加载骨架屏脉冲动画
• 错误兜底：接口异常显示错误提示 + 重试按钮

快速开始

环境要求

• Python 3.11+
• Node.js 18+
• MySQL 8.0+

1. 数据库

# 使用 mysql CLI 导入建表语句
mysql -u root -p < schema.sql

2. 后端

cd backend
pip install fastapi uvicorn sqlalchemy pymysql pandas apscheduler
python main.py
# 访问 http://localhost:8080/docs 查看 API 文档
# 首次启动自动执行 ETL 导入数据

3. 前端

cd frontend
npm install
npm run dev
# 访问 http://localhost:5173 查看大屏

API 接口

方法	路径	说明
GET	/api/dashboard/overview	大屏概览卡片数据
GET	/api/dashboard/cpu-trend?date=	CPU 趋势（可选日期）
GET	/api/dashboard/memory-trend?date=	内存趋势
GET	/api/dashboard/network-trend?date=	网络流量趋势
GET	/api/dashboard/load-trend?date=	系统负载趋势
GET	/api/dashboard/disk-util	磁盘使用率对比
GET	/api/dashboard/host-ranking	主机 CPU 排行
GET	/api/dashboard/location-dist	机房分布
GET	/api/dashboard/available-dates	可用日期列表

开源协议

本项目基于 MIT License 开源。