huimv-baqing/doc/视频监控系统/对接畜牧监控/对接畜牧监控前端技术方案.md

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

依据：畜牧监控功能需求.md（v1.1 + v1.2）、畜牧监控技术方案.md（v1.2）；布局对齐 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（第三方同步）

---

3. 页面结构

1. 筛选区：监控名称（模糊）；所属主体（ownerOptions 远程下拉）；搜索、重置、同步（sync 权限）、新增。
   
2. 同步提示：同步成功后展示「最近同步时间」摘要行（与牧场管理一致）。
   
3. 列表区：监控名称、所属主体（类型 el-tag + 名称）、安装位置。
   
4. 操作列：查看实时监控（占位提示）、查看、编辑、删除。
   
5. 新增/编辑弹窗：监控名称、所属主体、安装位置等（与后端字段对齐；历史原型 IP 字段已废弃）。
   
6. 查看弹窗：只读详情 + 审计信息。

---

4. 业务规则（前端）

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

---

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）。
   
2. 菜单增加按钮权限 videoSurveillance:livestockMonitor:sync。
   
3. 配置 third-party.farming：mode=stub 联调（样例 JSON）；生产 mode=http + base-url。
   
4. 点击 同步：先 upsert 监控列表，再写入 video_url；失败明细在 failMessages 中展示。
   
5. 验证：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；同步结果提示