# monitor-visual

**Repository Path**: liubzbd/monitor-visual

## Basic Information

- **Project Name**: monitor-visual
- **Description**: 这是一个基于 Flask、JointJS 和 ECharts 开发的服务监控可视化系统，用于直观展示和管理服务节点及其之间的关系。系统支持节点的添加、编辑、连接管理、状态监控以及图表展示，并将数据持久化存储到 SQLite 数据库中。

- **Primary Language**: Python
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-07
- **Last Updated**: 2026-01-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 可视化服务监控系统

## 项目简介

这是一个基于 Flask、JointJS 和 ECharts 开发的服务监控可视化系统，用于直观展示和管理服务节点及其之间的关系。系统支持节点的添加、编辑、连接管理、状态监控以及图表展示，并将数据持久化存储到 SQLite 数据库中。

## 功能特性

### 核心功能
- **拓扑图管理**：支持多拓扑图、层级管理、拓扑图类型（业务流程/网络结构/物理部署）
- **节点管理**：完整的节点CRUD操作，支持多种节点类型（业务、服务器、数据库、中间件、网络）
- **连接管理**：完整的连接CRUD操作，支持多种连接类型（调用、数据流、依赖、网络）
- **数据持久化**：基于SQLite数据库，支持JSON格式的拓扑图数据加载和保存
- **状态监控**：支持节点状态显示（正常、警告、严重、致命、未知）
- **图表展示**：集成ECharts，支持监控指标的可视化展示

### 交互功能
- **节点操作**：双击添加节点、拖拽移动、点击选中、框选、Delete删除
- **连接操作**：Shift+拖拽创建连接、编辑连接属性
- **属性编辑**：侧边栏显示节点属性，支持完整属性编辑
- **批量操作**：支持批量删除节点和连接
- **数据保存**：实时保存拓扑图数据到数据库
- **数据加载**：初始化时自动加载已保存的数据

## 技术栈

### 后端技术
- Python 3.8+
- Flask 2.0+（Web框架）
- Flask-SQLAlchemy 3.0+（ORM框架）
- SQLite（数据库）

### 前端技术
- HTML5 / CSS3
- JavaScript (ES6+)
- jQuery 3.6.0（DOM操作）
- JointJS 3.2.0（图形可视化）
- ECharts 5.4.3（图表展示）
- Lodash 4.17.21（工具库）
- Backbone.js 1.4.0（前端MVC框架）

## 项目结构

```
monitor/service/
├── app.py                    # Flask应用主文件
├── models.py                 # 数据模型定义
├── services.py               # 业务逻辑层
├── NodeList.py               # 节点管理模块
├── requirements.txt           # Python依赖
├── static/                   # 静态文件
│   ├── css/
│   │   └── style.css      # 样式文件
│   └── js/
│       └── topology-editor.js # JavaScript逻辑
├── templates/                 # HTML模板
│   ├── index.html           # 默认页面
│   ├── home.html            # 首页（监控拓扑图）
│   ├── login.html           # 登录页面
│   └── autojs.html         # 自动脚本页面
├── instance/                  # 实例目录
│   └── nodes.db            # SQLite数据库文件
├── test/                     # 测试目录
│   ├── README.md            # 测试说明
│   └── 多个测试文件          # 各种功能测试
├── REQUIREMENTS.md            # 需求文档
├── ARCHITECTURE.md           # 架构分析文档
├── IMPLEMENTATION.md          # 实现总结文档
├── CHECKLIST.md              # 任务清单
└── ReadMe.md                # 项目说明文件（本文件）
```

## 安装与运行

### 环境要求
- Python 3.8 或更高版本
- pip 包管理器

### 安装步骤

1. **克隆项目**

2. **安装依赖**
   ```bash
   pip install -r requirements.txt
   ```

3. **运行应用**
   ```bash
   python app.py
   ```

4. **访问系统**
   打开浏览器，访问 `http://localhost:5000`

## API接口

### 拓扑图管理
- `GET /api/v1/topologies` - 获取拓扑图列表
- `GET /api/v1/topologies/<id>` - 获取拓扑图详情
- `POST /api/v1/topologies` - 创建拓扑图
- `PUT /api/v1/topologies/<id>` - 更新拓扑图
- `DELETE /api/v1/topologies/<id>` - 删除拓扑图

### 节点管理
- `GET /api/v1/topologies/<id>/nodes` - 获取节点列表
- `GET /api/v1/nodes/<node_id>` - 获取节点详情
- `POST /api/v1/topologies/<id>/nodes` - 创建节点
- `PUT /api/v1/nodes/<node_id>` - 更新节点
- `DELETE /api/v1/nodes/<node_id>` - 删除节点
- `POST /api/v1/nodes/batch-delete` - 批量删除节点
- `POST /api/v1/nodes/batch-update-positions` - 批量更新节点位置

### 连接管理
- `GET /api/v1/topologies/<id>/links` - 获取连接列表
- `GET /api/v1/links/<link_id>` - 获取连接详情
- `POST /api/v1/topologies/<id>/links` - 创建连接
- `PUT /api/v1/links/<link_id>` - 更新连接
- `DELETE /api/v1/links/<link_id>` - 删除连接
- `POST /api/v1/links/batch-delete` - 批量删除连接

### 拓扑图数据
- `GET /api/v1/topologies/<id>/data` - 获取拓扑图JSON数据
- `POST /api/v1/topologies/<id>/data` - 保存拓扑图JSON数据

## 使用指南

### 基本操作

1. **添加节点**：在画布空白处双击鼠标
2. **移动节点**：拖拽节点改变位置
3. **创建连接**：按住Shift键，从一个节点拖拽到另一个节点
4. **选中节点**：点击节点进行选中
5. **批量选择**：在空白处拖拽鼠标框选多个节点
6. **删除元素**：选中节点或连接后，按Delete键删除
7. **编辑属性**：点击节点，右侧显示属性面板，编辑后点击保存
8. **保存数据**：点击"保存拓扑图"按钮保存当前数据

### 节点属性

- **基本信息**：节点名称、描述、图标
- **技术信息**：IP地址、端口、技术栈、版本
- **业务信息**：负责人、联系方式、业务重要性、SLA要求

### 节点类型

- **业务节点**：代表业务模块或服务
- **服务器节点**：代表物理服务器或虚拟机
- **数据库节点**：代表数据库实例
- **中间件节点**：代表消息队列、缓存等中间件
- **网络节点**：代表网络设备或网络区域

### 状态颜色

- **正常状态**：绿色（#52c41a）
- **警告状态**：黄色（#faad14）
- **严重状态**：橙色（#fa8c16）
- **致命状态**：红色（#f5222d）
- **未知状态**：灰色（#d9d9d9）

## 数据库结构

### 主要数据表

#### Topology表
- 拓扑图基本信息
- 支持层级关系
- 支持多种拓扑图类型

#### Node表
- 节点基本信息
- 节点类型和属性
- 位置信息
- 技术和业务信息

#### Link表
- 连接基本信息
- 连接类型和属性
- 网络和业务指标

#### Metric表
- 监控指标定义
- 指标类型和单位

#### NodeMetricConfig表
- 节点监控配置
- 阈值设置
- 采集方式配置

#### AlertRule表
- 告警规则定义
- 告警级别设置
- 通知配置

#### AlertEvent表
- 告警事件记录
- 告警处理状态
- 传播路径记录

## 开发说明

### 已实现功能
- ✅ 完整的数据模型重构
- ✅ RESTful API接口实现
- ✅ 拓扑图管理（CRUD）
- ✅ 节点管理（CRUD）
- ✅ 连接管理（CRUD）
- ✅ 拓扑图JSON数据加载和保存
- ✅ 前端代码模块化
- ✅ ECharts图表集成
- ✅ 统一的响应格式
- ✅ 完善的错误处理
- ✅ 登录页面实现
- ✅ 验证码功能（动态生成、验证）
- ✅ 首页监控拓扑图集成
- ✅ 拓扑编辑器工具栏
- ✅ 节点属性侧边栏
- ✅ 拓扑图列表和创建模态框
- ✅ 首页底部保存按钮移除

### 待实现功能
- ⏳ 监控指标配置和管理
- ⏳ 告警规则和事件管理
- ⏳ 状态传播机制
- ⏳ 实时监控功能
- ⏳ 拓扑图模板功能
- ⏳ 子图导航功能
- ⏳ 完整的拓扑图列表界面

## 文档

- [REQUIREMENTS.md](file:///Users/liubingzhao/Documents/workspaces/python_ws/demo/monitor/service/REQUIREMENTS.md) - 完整的需求文档
- [ARCHITECTURE.md](file:///Users/liubingzhao/Documents/workspaces/python_ws/demo/monitor/service/ARCHITECTURE.md) - 架构分析文档
- [IMPLEMENTATION.md](file:///Users/liubingzhao/Documents/workspaces/python_ws/demo/monitor/service/IMPLEMENTATION.md) - 实现总结文档

## 许可证

本项目采用 MIT 许可证。

## 贡献

欢迎提交 Issue 和 Pull Request 来改进这个项目！