# 对接畜牧监控 — 前端技术方案

> 依据：`畜牧监控功能需求.md`（v1.1）、`畜牧监控技术方案.md`；布局对齐 `techService/knowledge/index.vue`、`tradeMarket/marketStall/index.vue`（双 `el-card`）；字段 **小驼峰**。

---

## 1. 页面与路由

| 项 | 说明 |
| --- | --- |
| **Vue 路径** | `ruoyi-ui/src/views/videoSurveillance/livestockMonitor/index.vue` |
| **组件名** | `VideoSurveillanceLivestockMonitor` |
| **菜单配置** | 组件路径：`videoSurveillance/livestockMonitor/index`（「视频监控系统」目录下） |
| **权限前缀** | `videoSurveillance:livestockMonitor:list\|query\|add\|edit\|remove` |

---

## 2. API 模块

| 项 | 说明 |
| --- | --- |
| **文件** | `ruoyi-ui/src/api/videoSurveillance/livestockMonitor.js` |
| **Base** | `/videoSurveillance/livestockMonitor` |

| 方法 | HTTP | 说明 |
| --- | --- | --- |
| `listLivestockMonitor` | GET | `/list` |
| `getLivestockMonitor` | GET | `/{id}` |
| `addLivestockMonitor` | POST | `/` |
| `updateLivestockMonitor` | PUT | `/` |
| `delLivestockMonitor` | DELETE | `/{ids}` |
| `listLivestockMonitorOwnerOptions` | GET | `/ownerOptions?keyword=` |

---

## 3. 页面结构

1. **筛选区**：监控名称（模糊）；所属主体（`ownerOptions` 远程下拉，精确成对 `ownerType`+`ownerId`）；搜索、重置、新增。  
2. **列表区**：监控名称、所属主体（类型 `el-tag` + 名称）、安装位置；**无 IP 列**。  
3. **操作列**：查看实时监控（`msgWarning` 提示本期未开放）、查看、编辑、删除。  
4. **新增/编辑弹窗**：监控名称、所属主体、安装位置、IP；确定/取消。  
5. **查看弹窗**：全部字段含 IP、审计信息；有编辑权限时可跳转编辑。

---

## 4. 业务规则（前端）

| 规则 | 实现 |
| --- | --- |
| 主体下拉 | `ownerType-ownerId` 复合 value；`listLivestockMonitorOwnerOptions`；`remote` + 300ms 防抖 |
| 列表主体筛选 | `queryOwnerKey` 解析为 `ownerType`、`ownerId` 提交 |
| 监控名称/安装位置 | trim；1～10 字 |
| IP | IPv4 正则；≤20 字符 |
| 名称/IP 唯一 | **不**前端校验重复 |
| 实时监控 | `handleLiveView` → `$modal.msgWarning(msgLiveNotOpen)` |
| 删除 | 二次确认后 `delLivestockMonitor(id)` |
| 编辑回填 | `ensureOwnerOptionInList` 保证当前主体在选项中 |

---

## 5. 国际化

| 项 | 说明 |
| --- | --- |
| **语言包** | `videoSurveillance.livestockMonitor`、`videoSurveillance.common`、`videoSurveillance.status` |
| **文件** | `lang/zh/videoSurveillance.js`、`lang/bo/videoSurveillance.js` |
| **Mixin** | `videoSurveillanceLocaleMixin`，`vsNs = 'livestockMonitor'`，`vsT` / `vsCommon` |
| **注册** | `lang/zh-CN.js`、`lang/bo.js` 引入 `videoSurveillance` |

---

## 6. 联调说明

1. 部署 `BizLivestockMonitorController` 及 `biz_livestock_monitor` 表。  
2. 预置正常状态养殖主体、交易市场，供 `ownerOptions` 使用。  
3. 菜单组件 `videoSurveillance/livestockMonitor/index`，权限与后端 §4 一致。  
4. 验证：名称模糊、主体精确筛选、CRUD、列表无 IP、详情有 IP、实时监控提示、双语切换。

---

## 7. 文件清单

| 类型 | 路径 |
| --- | --- |
| 页面 | `ruoyi-ui/src/views/videoSurveillance/livestockMonitor/index.vue` |
| API | `ruoyi-ui/src/api/videoSurveillance/livestockMonitor.js` |
| Mixin | `ruoyi-ui/src/mixins/videoSurveillanceLocaleMixin.js` |
| i18n | `ruoyi-ui/src/lang/zh/videoSurveillance.js`、`lang/bo/videoSurveillance.js` |

---

## 8. 修订记录

| 版本 | 说明 |
| --- | --- |
| 1.0 | 初版：监控点位 CRUD；主体合并远程下拉；列表无 IP；实时监控占位提示；汉藏 i18n |