OpsPilot：面向企业业务系统的智能运维 Agent 平台（4）

本次完成了告警逻辑的初步实现和对个人项目的中期总结。

告警系统

我希望在日志系统的基础上，对于error和warning的信息有更加明显的提示和更便捷的处理方式，所以我又实现了告警系统，可以辅助运维人员快速发现、解决问题。

特点

跳转功能

通过从告警系统的跳转，有问题的设备可以直接在日志中被定位，或者问题一键交给AI智能体处理。

关键代码

状态流转与操作按钮

<el-table-column label="操作" width="280"> <template #default="{ row }"> <el-button type="primary" size="small" link @click.stop="goToLogs(row)">📋 查看日志</el-button> <el-button type="warning" size="small" link @click.stop="askAI(row)">🤖 询问AI</el-button> <el-button v-if="row.status !== 'resolved'" type="success" size="small" link @click.stop="markResolved(row)" >✔ 已恢复</el-button> </template> </el-table-column>

脚本中：

// 跳转日志页，并带入主机名作为搜索关键词 function goToLogs(row) { router.push({ path: '/logs', query: { search: row.host } }) } // 跳转智能体，带入告警内容作为预设问题 function askAI(row) { const question = encodeURIComponent(`告警：${row.host} 发生错误 "${row.message}"，请分析原因并给出处理建议`) router.push({ path: '/chat', query: { ask: question } }) } // 标记已恢复 async function markResolved(row) { ElMessage.success(`告警已恢复：${row.host} - ${row.message}`) row.status = 'resolved' // 真实场景应调用 API: await request.post(`/alerts/${row.id}/resolve`) }

状态标签与过滤

const statusFilter = ref('') const searchText = ref('') // 前端过滤 const filteredAlerts = computed(() => { let result = alertData.value if (statusFilter.value) result = result.filter(a => a.status === statusFilter.value) if (searchText.value.trim()) { const kw = searchText.value.trim().toLowerCase() result = result.filter(a => a.host.toLowerCase().includes(kw) || a.message.toLowerCase().includes(kw)) } return result }) // 状态标签映射 function statusTagType(status) { return status === 'firing' ? 'danger' : status === 'acknowledged' ? 'warning' : 'success' } function statusLabel(status) { return status === 'firing' ? '触发中' : status === 'acknowledged' ? '已确认' : '已恢复' }

通过computed实现按状态、关键字过滤，无需后端请求即可实时筛选。标签颜色直观区分告警严重性：触发中为红色危险标签，已确认为橙色，已恢复为绿色，让运维人员一眼判断当前整体状况。

日志页Logs.vue在挂载时解析 query：

onMounted(() => { if (route.query.search) { searchText.value = route.query.search } fetchLogs() })

智能体Chat.vue在挂载时解析并自动发送：

onMounted(() => { if (route.query.ask) { inputText.value = decodeURIComponent(route.query.ask) sendMessage() } })

效果展示

从操作栏可以直接跳转日志或询问AI。

主机直接进入搜索框进行搜索，显示所有关于它的记录。

跳转智能体界面后直接将问题发出，无需手动输入，待真实智能体接入后就能得到完整答复。

中期工作总结

一、项目背景与目标

本次项目是为基于Python实现的运维监控后端构建一套前端可视化平台。运维工作长期依赖命令行与分散的监控工具，亟需一个集中式的可视化界面来降低信息获取成本。因此，系统围绕四个核心场景展开：用仪表盘直观展示主机状态与关键指标，用日志页面统一管理运行记录，用告警中心对异常进行响应与闭环处理，用智能体提供自然语言交互的运维辅助能力。同时在入口层加入了用户认证与权限分级，保证不同级别的运维人员拥有匹配的操作范围，并以深色主题适配长时间盯屏的工作环境。

二、技术选型与架构理解

在框架层选择了Vue 3配合Composition API，看重的是其轻量化、响应式能力和逻辑复用的便利性。构建工具选用Vite而非Webpack，主要是因为它极快的冷启动和热更新能显著缩短开发反馈周期。UI组件库选择了Element Plus，它在企业级中后台中的成熟度较高，并且原生支持暗色主题，这一点对运维场景很有价值。图表方面使用ECharts配合vue-echarts，能够覆盖折线图、仪表盘等运维常见图表类型。状态管理用Pinia替代传统的Vuex，组合式语法更贴近Vue 3的写法，上手成本低。路由管理使用Vue Router 4，利用其路由守卫机制实现权限控制。HTTP通讯层选用Axios，通过拦截器统一处理认证信息和错误提示。

整个架构遵循“展示—逻辑—数据”三层分离的思路。Vue组件负责界面渲染，Pinia管理全局状态，Axios封装统一的API请求层，通过Vite开发服务器的代理机制解决跨域问题，生产环境则通过Nginx反向代理或后端CORS配置完成对接。这种分层让每一层职责清晰，更换后端或扩展功能都更加顺畅。

三、功能模块实现与业务理解

在用户认证与权限分级方面，系统实现了完整的登录流程。登录页作为独立页面，不嵌套侧边栏，用户通过账号密码进入系统。认证信息保存在Pinia的store中，并同步到localStorage，保证刷新后无需重新登录。路由守卫通过外部传入pinia实例的方式解决了初始化时序问题，在每次跳转前检查登录状态和角色权限。权限分为两级：初级用户可访问仪表盘和智能体，高级用户额外拥有日志访问权。当权限不足时，守卫会直接弹出提示并阻止跳转，而非简单隐藏菜单。

日志页面以表格形式展示系统运行记录，支持按级别筛选和关键字搜索。通过前端computed属性进行本地过滤，减少不必要的后端请求，保持交互流畅。日志不仅是历史记录查询工具，更是告警的数据来源，这一关联在后面联动中体现出来。

告警中心是我对运维业务流程理解最深入的模块。告警数据从日志中的ERROR级别自动派生，每条告警携带关联的主机、来源和时间信息。告警状态遵循“触发中——已确认——已恢复”的生命周期，完整映射了运维从发现到解决的事件流。操作列提供了三个按钮：查看日志可跳转到日志页面并自动代入该主机作为搜索条件；询问AI可跳转到智能体页面并自动发送包含告警内容的预设问题；已恢复按钮则将状态标记为resolved。这种设计让日志、告警、智能体三者形成闭环，不再各自孤立。

运维智能体是一个对话式辅助入口，界面上区分了用户消息和助手消息，支持模拟响应用于功能验证。回复内容根据关键词匹配，覆盖CPU、内存、告警等常见运维查询。技术上预留了挂载真实AI接口的位置，从告警页传入的预设问题也能被自动发送，实现了跨页面联动。

在视觉层面，考虑到运维人员可能长时间盯屏，系统整体采用深色主题。全局引入Element Plus的暗色CSS变量，自定义区域使用统一的深色色号体系，包括主背景、卡片背景、边框和文字等级。ECharts图表也配置了对应的暗色坐标轴和分割线颜色，保证整体风格一致。

四、对项目的进一步思考

前端已经预留了完整的API请求层，后续替换为真实后端接口即可投入使用。登录认证建议采用JWT方式，token中编码用户角色，后端在关键接口上进行二次校验，不能仅依赖前端守卫拦截。开发环境通过Vite代理解决跨域，生产环境应考虑Nginx反向代理或后端统一配置CORS。

后续可以扩展的方向包括：通过WebSocket实现监控数据的实时推送，替代当前的轮询或手动刷新；增加主机详情页面，支持从列表点击跳转查看单台主机的完整指标曲线；提供数据导出功能，便于将日志和告警导出为文件进行分析；在告警通知方面引入浏览器的系统通知甚至声音提示，提升紧急情况的响应速度。

五、总结

通过本项目，从技术选型、架构设计到核心功能实现，完整构建了一个可扩展的运维监控前端平台。在权限管理、告警与日志的联动设计上，注重与实际运维工作流契合，让功能模块之间形成闭环而非独立存在。当前系统已经具备独立演示和对接真实后端的能力，为后续迭代提供了稳定的前端基础。