966120
编辑 | blame | 历史 | 原始文档

车辆异常运行监控告警功能 - 前端部署指南

📋 概述

本文档提供车辆异常运行监控告警功能前端部分的完整部署指南，包括文件清单、配置步骤和测试验证。

📁 前端文件清单

1. API接口文件

路径: ruoyi-ui/src/api/system/

  • ✅ vehicleAlert.js - 告警记录管理API
  • ✅ vehicleAlertConfig.js - 告警配置管理API
  • ✅ vehicle.js - 车辆信息API

2. 页面组件文件

路径: ruoyi-ui/src/views/system/

  • ✅ vehicleAlert/index.vue - 告警记录列表页面（529行）
  • ✅ vehicleAlertConfig/index.vue - 告警配置管理页面（487行）

3. 后端接口文件（配置管理新增）

路径: ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/

  • ✅ VehicleAlertConfigController.java - 配置管理Controller

路径: ruoyi-system/src/main/java/com/ruoyi/system/

  • ✅ service/IVehicleAlertConfigService.java - 配置服务接口
  • ✅ service/impl/VehicleAlertConfigServiceImpl.java - 配置服务实现
  • ✅ mapper/VehicleAlertConfigMapper.java - 配置Mapper接口
  • ✅ domain/VehicleAlertConfig.java - 配置实体类（已更新）

路径: ruoyi-system/src/main/resources/mapper/system/

  • ✅ VehicleAlertConfigMapper.xml - 配置Mapper XML

🚀 部署步骤

第一步：确认数据库已初始化

确保已执行SQL初始化脚本：

sql/vehicle_abnormal_alert.sql

该脚本会创建：
- ✅ tb_vehicle_abnormal_alert - 告警记录表
- ✅ tb_vehicle_alert_config - 告警配置表
- ✅ 6个系统配置参数
- ✅ 定时任务记录
- ✅ 菜单权限记录（2个菜单）

第二步：配置路由

在 ruoyi-ui/src/router/index.js 中添加路由（如果使用动态路由，可跳过此步骤）：

// 车辆异常告警管理
{
  path: '/system/vehicleAlert',
  component: Layout,
  hidden: true,
  permissions: ['system:vehicleAlert:view'],
  children: [
    {
      path: 'index',
      component: () => import('@/views/system/vehicleAlert/index'),
      name: 'VehicleAlert',
      meta: { title: '车辆异常告警', activeMenu: '/system/vehicleAlert' }
    }
  ]
},
// 车辆告警配置
{
  path: '/system/vehicleAlertConfig',
  component: Layout,
  hidden: true,
  permissions: ['system:vehicleAlertConfig:view'],
  children: [
    {
      path: 'index',
      component: () => import('@/views/system/vehicleAlertConfig/index'),
      name: 'VehicleAlertConfig',
      meta: { title: '车辆告警配置', activeMenu: '/system/vehicleAlertConfig' }
    }
  ]
}

第三步：配置菜单权限

登录后台管理系统，进入 系统管理 > 菜单管理，添加以下菜单：

父菜单：车辆监控（可选，如已有车辆相关菜单，可添加到现有菜单下）

字段 值
菜单名称 车辆监控
菜单类型 目录
菜单图标 monitor
显示排序 5
路由地址 vehicle-monitor
组件路径 Layout

子菜单1：车辆异常告警

字段 值
上级菜单 车辆监控
菜单名称 车辆异常告警
菜单类型 菜单
菜单图标 warning
显示排序 1
路由地址 vehicleAlert
组件路径 system/vehicleAlert/index
权限标识 system:vehicleAlert:list

功能按钮权限：
- system:vehicleAlert:query - 查询
- system:vehicleAlert:handle - 处理
- system:vehicleAlert:remove - 删除
- system:vehicleAlert:export - 导出

子菜单2：告警配置管理

字段 值
上级菜单 车辆监控
菜单名称 告警配置管理
菜单类型 菜单
菜单图标 edit
显示排序 2
路由地址 vehicleAlertConfig
组件路径 system/vehicleAlertConfig/index
权限标识 system:vehicleAlertConfig:list

功能按钮权限：
- system:vehicleAlertConfig:query - 查询
- system:vehicleAlertConfig:add - 新增
- system:vehicleAlertConfig:edit - 修改
- system:vehicleAlertConfig:remove - 删除
- system:vehicleAlertConfig:export - 导出

第四步：编译前端项目

cd ruoyi-ui
npm install
npm run build:prod

第五步：部署到Nginx

将编译后的文件部署到Nginx：

# 复制dist目录到nginx
cp -r dist/* /usr/share/nginx/html/

# 重启nginx
nginx -s reload

🧪 功能测试

1. 告警记录列表测试

访问：系统管理 > 车辆监控 > 车辆异常告警

测试点：
- ✅ 列表数据正常显示
- ✅ 搜索功能（车牌号、日期、状态、部门）
- ✅ 统计卡片显示（未处理、今日、累计车辆、累计次数）
- ✅ 查看详情功能
- ✅ 处理单条告警
- ✅ 批量处理告警
- ✅ 删除功能
- ✅ 导出功能
- ✅ 分页功能

2. 告警配置管理测试

访问：系统管理 > 车辆监控 > 告警配置管理

测试点：
- ✅ 配置列表显示（全局/部门/车辆）
- ✅ 新增全局配置
- ✅ 新增部门配置
- ✅ 新增车辆配置
- ✅ 修改配置
- ✅ 删除配置
- ✅ 启用/停用配置
- ✅ 导出功能
- ✅ 配置说明提示

3. 配置优先级测试

测试场景：
1. 创建全局配置（阈值10km）
2. 创建部门配置（阈值8km）
3. 创建车辆配置（阈值12km）

预期结果：
- 有车辆配置的车辆使用12km阈值
- 有部门配置但无车辆配置的车辆使用8km阈值
- 无部门和车辆配置的车辆使用10km阈值

📊 页面功能详解

告警记录列表页面

核心功能：
1. 统计面板 - 4个统计卡片实时显示关键指标
2. 高级搜索 - 支持多条件组合搜索
3. 状态标签 - 告警状态、通知状态用不同颜色标签区分
4. 详情查看 - 使用 el-descriptions 组件展示详细信息
5. 批量操作 - 支持批量处理未处理的告警

页面特色：
- 🎨 美观的UI设计，使用Element UI组件
- 📱 响应式布局，适配不同屏幕
- 🔔 实时刷新统计数据
- 📝 处理备注必填验证

告警配置管理页面

核心功能：
1. 三级配置 - 支持全局/部门/车辆三级配置策略
2. 动态表单 - 根据配置类型动态显示表单项
3. 智能验证 - 根据配置类型验证必填项
4. 实时切换 - 状态开关实时生效
5. 配置说明 - 页面顶部显示配置说明提示

配置参数：
- 里程阈值 - 1-1000km，步长1
- 每日告警次数 - 1-100次，步长1
- 告警间隔 - 1-1440分钟，步长1
- 通知用户 - 支持多个用户ID（逗号分隔）

🔧 系统配置参数

在 系统管理 > 参数设置 中配置以下参数：

参数键名 参数名称 默认值 说明
vehicle.alert.enabled 车辆异常告警启用开关 true 总开关
vehicle.alert.mileage.threshold 车辆异常告警公里数阈值 10 全局默认阈值(km)
vehicle.alert.daily.limit 车辆异常告警每日告警次数 5 全局默认次数
vehicle.alert.interval.minutes 车辆异常告警间隔时间 5 全局默认间隔(分钟)
vehicle.alert.time.window 车辆异常告警监控时间窗口 10 监控窗口(分钟)
vehicle.alert.notify.users 车辆异常告警通知用户列表 1 全局默认通知用户

📝 API接口列表

告警记录API

接口 方法 路径 说明
查询列表 GET /system/vehicleAlert/list 分页查询
查询详情 GET /system/vehicleAlert/{id} 获取详情
处理告警 PUT /system/vehicleAlert/handle/{id} 单条处理
批量处理 PUT /system/vehicleAlert/batchHandle 批量处理
删除告警 DELETE /system/vehicleAlert/{ids} 删除记录
未处理统计 GET /system/vehicleAlert/unhandledCount 统计数量
导出数据 GET /system/vehicleAlert/export 导出Excel

告警配置API

接口 方法 路径 说明
查询列表 GET /system/vehicleAlertConfig/list 分页查询
查询详情 GET /system/vehicleAlertConfig/{id} 获取详情
新增配置 POST /system/vehicleAlertConfig 新增
修改配置 PUT /system/vehicleAlertConfig 修改
删除配置 DELETE /system/vehicleAlertConfig/{ids} 删除
导出配置 POST /system/vehicleAlertConfig/export 导出Excel

⚠️ 常见问题

1. 菜单不显示

原因：权限未分配
解决：
1. 检查菜单是否创建
2. 检查角色是否分配菜单权限
3. 清除浏览器缓存，重新登录

2. API接口404

原因：后端服务未启动或路由配置错误
解决：
1. 检查后端服务是否正常运行
2. 检查 application.yml 中的 context-path 配置
3. 查看后端日志

3. 配置修改不生效

原因：缓存未刷新
解决：
1. 在 系统管理 > 参数设置 中点击"刷新缓存"
2. 或重启后端服务

4. 告警统计数据不准确

原因：前端统计逻辑基于当前页面数据
解决：
- 点击"刷新统计"按钮获取最新数据
- 或者后端提供统计接口（待优化）

5. 车辆下拉列表加载慢

原因：车辆数据量大
解决：
1. 添加搜索过滤功能
2. 使用懒加载或分页加载
3. 优化后端查询性能

🎯 后续优化方向

1. 前端优化

  • [ ] 告警统计图表（ECharts）
  • [ ] 实时消息推送（WebSocket）
  • [ ] 移动端适配
  • [ ] 告警地图展示

2. 功能增强

  • [ ] 告警规则更灵活配置
  • [ ] 支持多种通知方式（短信、邮件）
  • [ ] 告警历史趋势分析
  • [ ] 批量导入配置

3. 性能优化

  • [ ] 车辆列表懒加载
  • [ ] 列表虚拟滚动
  • [ ] 接口缓存优化

📞 技术支持

如有问题，请联系开发团队或查看相关文档：

  • 📄 功能说明文档：doc/车辆异常运行监控告警功能说明.md
  • 📄 实现总结：doc/车辆异常运行监控告警-实现总结.md
  • 📄 快速部署指南：doc/车辆异常运行监控告警-快速部署指南.md

部署时间：2026-01-12
文档版本：v1.0
维护人员：开发团队