01
专线监控概述
什么是专线、为什么需要监控、监控看板的核心价值。
概念背景
02
需求分析
确定监控指标（延迟、抖动、丢包率、带宽利用率）、用户角色定义。
指标角色
03
技术选型
前端框架对比（Vue vs React）、后端选型（Flask vs FastAPI）、数据库选型（InfluxDB vs Prometheus）。
对比架构
04
环境搭建
Python虚拟环境、Node.js环境、Docker容器化部署准备。
工具部署
05
数据采集基础
SNMP协议原理、使用snmpwalk获取设备信息。
SNMP协议
06
数据采集进阶
使用Python的pysnmp库编写采集脚本。
Python脚本
07
数据存储设计
InfluxDB时序数据库安装、数据库与表结构设计。
InfluxDB时序
08
数据写入
Python脚本将采集数据写入InfluxDB。
写入存储
09
后端API开发（一）
Flask框架搭建、RESTful API设计原则。
FlaskREST
10
后端API开发（二）
编写查询接口（最新数据、历史数据）。
查询接口
11
后端API开发（三）
数据聚合与处理（计算平均值、最大值、抖动值）。
聚合计算
12
后端API开发（四）
异常检测逻辑（阈值告警、基线告警）。
告警异常
13
前端项目初始化
Vue3 + Vite项目搭建、Element Plus UI库集成。
Vue3Vite
14
前端路由与布局
左侧导航栏、顶部状态栏、主内容区布局设计。
布局路由
15
前端核心组件（一）
实时数据卡片组件（显示延迟、丢包率）。
卡片实时
16
前端核心组件（二）
趋势折线图组件（使用ECharts展示历史数据）。
ECharts趋势
17
前端核心组件（三）
拓扑图组件（使用SVG绘制网络拓扑）。
SVG拓扑
18
前端核心组件（四）
告警列表组件（实时滚动告警信息）。
告警滚动
19
前后端联调
Axios封装、API接口对接、跨域问题解决。
Axios联调
20
实时数据刷新
WebSocket原理、后端集成Flask-SocketIO、前端实时更新。
WebSocket实时
21
告警通知集成
邮件告警（smtplib）、企业微信机器人告警。
邮件企微
22
用户认证与权限
JWT登录、不同角色查看不同专线。
JWT权限
23
看板主题定制
暗黑模式切换、自定义颜色主题。
主题暗黑
24
性能优化
前端虚拟列表、后端查询缓存、数据库索引优化。
优化缓存
25
测试与调试
单元测试（pytest）、前端调试技巧、模拟数据生成。
pytest调试
26
部署上线
使用Docker Compose编排前后端与数据库。
DockerCompose
27
运维与监控
看板自身的健康检查、日志收集（ELK）。
ELK健康
28
案例实战（一）
监控一条跨国专线，分析延迟抖动问题。
跨国实战
29
案例实战（二）
监控多条分支专线，对比带宽利用率。
多分支对比
30
总结与展望
项目复盘、未来功能扩展（AI预测、自动运维）。
复盘AI