# 监控

**Repository Path**: gitabs/monitor

## Basic Information

- **Project Name**: 监控
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-18
- **Last Updated**: 2026-04-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Spring Boot Admin Monitor

一个基于 Vue 3 的 Spring Boot 管理监控仪表盘可视化项目。

## 项目简介

本项目是一个现代化的监控数据可视化大屏，用于展示 Spring Boot 应用的各类监控指标，包括系统状态、服务健康度、API 调用统计、告警信息等核心监控数据。

## 功能特性

- **实时监控仪表盘** - 展示 CPU、内存、磁盘、网络等系统指标
- **服务状态监控** - 实时展示各服务的运行状态
- **API 监控分析** - 统计 API 请求量、错误率、QPS 等数据
- **告警信息展示** - 支持 Critical、Warning、Info 三种告警级别
- **数据可视化** - 采用图表形式直观展示各类指标数据

## 技术栈

- **前端框架**: Vue 3
- **构建工具**: Vite 5
- **图表库**: ECharts 5
- **样式**: CSS3 (Flexbox 布局)

## 项目结构

```
monitor/
├── src/
│   ├── components/          # 组件目录
│   │   ├── GaugeChart.vue  # 仪表盘图表组件
│   │   ├── LineChart.vue   # 折线图组件
│   │   ├── PieChart.vue    # 饼图组件
│   │   └── ServiceStatus.vue # 服务状态组件
│   ├── data/
│   │   └── mockData.js     # 模拟数据
│   ├── App.vue             # 主应用组件
│   └── main.js             # 应用入口
├── index.html              # HTML 入口文件
├── package.json            # 项目配置
└── vite.config.js          # Vite 配置
```

## 快速开始

### 环境要求

- Node.js >= 16
- npm >= 8

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

服务启动后访问 http://localhost:5173/

### 构建生产版本

```bash
npm run build
```

## 组件说明

### GaugeChart.vue

仪表盘图表组件，用于展示百分比类型的指标数据，如 CPU 使用率、内存使用率等。

**属性**:
- `title` - 图表标题
- `value` - 当前值
- `max` - 最大值（默认 100）
- `unit` - 单位（默认 '%'）
- `color` - 主题色（默认 '#00d4ff'）

### LineChart.vue

折线图组件，用于展示时间序列数据，如请求量趋势、响应时间变化等。

### PieChart.vue

饼图组件，用于展示占比数据，如各服务状态分布、请求类型分布等。

### ServiceStatus.vue

服务状态组件，用于展示各微服务的运行状态，支持在线/离线/异常等状态显示。

## 数据说明

项目使用 `mockData.js` 中的模拟数据，展示了以下监控指标：

- 系统指标：CPU、内存、磁盘、网络、JVM
- 服务状态：用户服务、订单服务、支付服务、库存服务
- API 监控：请求量、错误数、错误率、QPS
- 告警信息：系统告警、应用告警、安全告警

## 界面预览

项目采用深蓝色科技风格设计，主色调为深蓝色背景配青色高亮，呈现专业的监控大屏效果。界面设计风格参考了 [完竣世界数据可视化大屏](https://www.wanjunshijie.com/project/3986.html) 系列作品。

## 扩展说明

如需对接真实的 Spring Boot Admin 数据源，可修改 `src/data/mockData.js` 文件，替换为实际的 API 调用逻辑，从 Spring Boot Admin 服务端获取真实监控数据。