对接畜牧监控 — 前端技术方案
依据：畜牧监控功能需求.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. 页面结构
- 筛选区：监控名称（模糊）；所属主体（
ownerOptions 远程下拉）；搜索、重置、同步（sync 权限）、新增。
- 同步提示：同步成功后展示「最近同步时间」摘要行（与牧场管理一致）。
- 列表区：监控名称、所属主体（类型
el-tag + 名称）、安装位置。
- 操作列：查看实时监控、查看、编辑、删除。
- 新增/编辑弹窗：
monitorId、监控名称、所属主体、圈舍、安装位置、视频来源等（与后端字段对齐）。
- 查看弹窗：只读详情 + 审计信息。
- 实时预览弹窗：
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. 联调说明
- 部署后端及
biz_livestock_monitor 表（见 sql/biz_livestock_monitor.sql；v1.2 升级库需 DROP COLUMN video_url）。
- 菜单增加按钮权限
videoSurveillance:livestockMonitor:sync。
- 配置
third-party.farming：mode=stub 联调（stub-cameras.json + stub-camera-play-urls.json）；生产 mode=http + base-url。
- 点击 同步：仅 upsert 监控列表；失败明细在
failMessages 中展示。
- 点击 查看实时监控：调用
/playUrl，用返回的 videoUrl 驱动 LivePlayer。
- 验证：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 |
