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

## 📋 概述

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

## 📁 前端文件清单

### 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初始化脚本：

```bash
sql/vehicle_abnormal_alert.sql
```

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

### 第二步：配置路由

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

```javascript
// 车辆异常告警管理
{
  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` - 导出

### 第四步：编译前端项目

```bash
cd ruoyi-ui
npm install
npm run build:prod
```

### 第五步：部署到Nginx

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

```bash
# 复制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  
**维护人员**：开发团队