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

> 依据：`畜牧监控功能需求.md`（v1.3）、`畜牧监控技术方案.md`（v1.3）；布局对齐 `dataModel/pasture/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\|sync` |

---

## 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=` |
| `syncLivestockMonitor` | POST | `/sync`（第三方同步，仅列表 upsert） |
| `getLivestockMonitorPlayUrl` | GET | `/playUrl?monitorId=`（实时播放地址） |

---

## 3. 页面结构

1. **筛选区**：监控名称（模糊）；所属主体（`ownerOptions` 远程下拉）；**搜索**、**重置**、**同步**（`sync` 权限）、**新增**。  
2. **同步提示**：同步成功后展示「最近同步时间」摘要行（与牧场管理一致）。  
3. **列表区**：监控名称、所属主体（类型 `el-tag` + 名称）、安装位置。  
4. **操作列**：查看实时监控、查看、编辑、删除。  
5. **新增/编辑弹窗**：`monitorId`、监控名称、所属主体、圈舍、安装位置、视频来源等（与后端字段对齐）。  
6. **查看弹窗**：只读详情 + 审计信息。  
7. **实时预览弹窗**：`LivePlayer` 组件，`videoUrl` 来自 `getLivestockMonitorPlayUrl`。

---

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

| 规则 | 实现 |
| --- | --- |
| 主体下拉 | `ownerType-ownerId` 复合 value；`listLivestockMonitorOwnerOptions`；`remote` + 300ms 防抖 |
| 列表主体筛选 | `queryOwnerKey` 解析为 `ownerType`、`ownerId` |
| 第三方同步 | `handleSync` → `runSyncWithLoading(() => syncLivestockMonitor())`；展示 insert/update/fail 统计 |
| 同步 loading | `videoSurveillanceLocaleMixin.runSyncWithLoading` + `vsCommon('syncLoading')` |
| 实时监控 | `handleLiveView` → `getLivestockMonitorPlayUrl(row.monitorId)` → 弹窗内 `LivePlayer` 播放 `data.videoUrl` |
| 删除 | 二次确认后 `delLivestockMonitor(id)` |

**实时预览前置**：列表行须含 `monitorId`（同步或手工登记）；无 `monitorId` 时提示用户。

---

## 5. 国际化

| 项 | 说明 |
| --- | --- |
| **语言包** | `videoSurveillance.livestockMonitor`、`videoSurveillance.common` |
| **文件** | `lang/zh/videoSurveillance.js`、`lang/bo/videoSurveillance.js` |
| **Mixin** | `videoSurveillanceLocaleMixin`：`vsNs = 'livestockMonitor'`，`vsT` / `vsCommon`，`runSyncWithLoading` |
| **同步文案** | `btnSync`、`syncSummary`、`syncTimeHint`；`common.syncLoading` |

---

## 6. 联调说明

1. 部署后端及 `biz_livestock_monitor` 表（见 `sql/biz_livestock_monitor.sql`；v1.2 升级库需 `DROP COLUMN video_url`）。  
2. 菜单增加按钮权限 `videoSurveillance:livestockMonitor:sync`。  
3. 配置 `third-party.farming`：`mode=stub` 联调（`stub-cameras.json` + `stub-camera-play-urls.json`）；生产 `mode=http` + `base-url`。  
4. 点击 **同步**：仅 upsert 监控列表；失败明细在 `failMessages` 中展示。  
5. 点击 **查看实时监控**：调用 `/playUrl`，用返回的 `videoUrl` 驱动 LivePlayer。  
6. 验证：CRUD、筛选、同步、实时预览、双语切换。

---

## 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；主体合并远程下拉；汉藏 i18n |
| 1.1 | 对齐后端：移除 IP 字段依赖；列表无 IP |
| 1.2 | 增加 **同步** 按钮与 `syncLivestockMonitor`；`runSyncWithLoading`；同步结果提示 |
| 1.3 | **实时预览**：`getLivestockMonitorPlayUrl` + LivePlayer；同步不再写入 `video_url` |