diff --git a/src/views/Login/components/LoginForm.vue b/src/views/Login/components/LoginForm.vue
index 352bcdd..579475c 100644
--- a/src/views/Login/components/LoginForm.vue
+++ b/src/views/Login/components/LoginForm.vue
@@ -100,7 +100,8 @@ const loginData = reactive({
captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,
loginForm: {
username: import.meta.env.VITE_APP_DEFAULT_LOGIN_USERNAME || '',
- password: import.meta.env.VITE_APP_DEFAULT_LOGIN_PASSWORD || '',
+ // password: import.meta.env.VITE_APP_DEFAULT_LOGIN_PASSWORD || '',
+ password: '',
captchaVerification: '',
rememberMe: true // 默认记录我。如果不需要，可手动修改
}
diff --git a/src/views/logistics/cameraPlayback/index.vue b/src/views/logistics/cameraPlayback/index.vue
index 020e2ef..7896cb1 100644
--- a/src/views/logistics/cameraPlayback/index.vue
+++ b/src/views/logistics/cameraPlayback/index.vue
@@ -162,7 +162,7 @@
- {{ currentPlayTime }}
+
@@ -384,18 +384,25 @@ const formatDetailJson = (detailJson: string) => {
}
}
-/** 时间轴上的报警标记（基于触发时间到结束时间） */
+/** 时间轴上的报警标记（基于触发时间到结束时间，裁剪到回放范围内） */
const alarmMarks = computed(() => {
if (totalDurationMs.value <= 0) return []
- return alarmList.value.map((row: any) => {
+ const marks: { id: number; left: number; width: number }[] = []
+ for (const row of alarmList.value) {
const startMs = row.triggerTime ? new Date(row.triggerTime).getTime() : 0
const endMs = alarmEndMs(row)
- return {
+ // 裁剪到回放范围内：开始时间早于回放开始则从回放开始算，结束时间晚于回放结束则到回放结束
+ const s = Math.max(startMs, rangeStartMs.value)
+ const e = Math.min(endMs, rangeEndMs.value)
+ // 完全在范围外（在开始之前或结束之后）则跳过
+ if (e < rangeStartMs.value || s > rangeEndMs.value) continue
+ marks.push({
id: row.id,
- left: Math.max(0, Math.min(100, ((startMs - rangeStartMs.value) / totalDurationMs.value) * 100)),
- width: Math.max(2, ((endMs - startMs) / totalDurationMs.value) * 100),
- }
- })
+ left: Math.max(0, Math.min(100, ((s - rangeStartMs.value) / totalDurationMs.value) * 100)),
+ width: Math.max(2, ((e - s) / totalDurationMs.value) * 100),
+ })
+ }
+ return marks
})
/** 跳转到指定报警的前5秒播放 */
diff --git a/软件功能实现说明.txt b/软件功能实现说明.txt
new file mode 100644
index 0000000..70dead3
--- /dev/null
+++ b/软件功能实现说明.txt
@@ -0,0 +1,57 @@
+软件功能实现说明（交付说明）
+技术栈：Spring Boot（后端） + Vue（前端）
+
+一、项目概述
+本系统面向智慧仓储管控场景，围绕"设备状态监控 + 视频安防 + 报警联动"构建一体化平台，整体采用"端 — 边"落地架构，并与 WMS、WCS、ECN、EPMS 等外部业务系统横向打通，形成完整的智慧仓储管控生态。核心能力包括：设备状态实时采集与 MQTT 上报、数值阈值报警并经 SSE 实时推送、摄像头 WebRTC 低延迟播放、摄像头 SDK 拍照/回放/录像，以及设备/摄像头/报警规则的统一后台管理。
+
+二、总体技术架构
+本项目总体技术架构采用分层设计理念，由下至上依次为感知层、边缘计算层、平台层和应用层，四大层次各司其职、协同联动；同时横向打通 WMS、WCS、ECN、EPMS 等外部业务系统，形成完整的智慧仓储管控生态。
+2.1 感知层：全维度数据采集终端
+感知层是整个平台的信息源头，负责采集仓库环境状态、设备运行状态和人员行为数据。物联网传感器（温湿度、烟雾、倾斜、水浸传感器）精准布点部署于精密物资区、货架横梁、消防通道、管道接口等关键位置；视觉采集设备（4K 高清摄像头、热成像摄像头）部署于仓库出入口、货架通道、高价值物资区；采集终端内置数据过滤与预处理模块，在温湿度稳定时自动降低采样频率，仅传输有效变化数据，减少带宽占用并提升响应速度。
+2.2 边缘计算层：实时数据处理中枢
+边缘计算层采用多通道数据高速传输架构：低功耗传感器走 LoRa 无线网络覆盖全仓，高清摄像头走工业以太网确保视频无卡顿，水浸和烟雾传感器走 485 总线保障可靠性。边缘网关就近部署于货架区和出入口，实现区域级数据聚合与预处理，核心能力包括传感器与摄像头联动识险、边缘端数据过滤与冗余剔除、算力动态调整等。
+2.3 平台层：数据中台与智能决策
+平台层基于服务架构构建，集成数据中台、规则引擎、应急响应模块。数据中台负责多源数据融合分析；规则引擎实现自动联动决策（如温湿度连续 5 分钟超阈值且无烟雾告警则启动通风设备并推送巡检指令）；应急响应模块支持预警信息分级推送、处置任务智能分派、应急方案动态匹配。
+2.4 应用层：智能决策与交互终端
+应用层基于 Vue 构建 B/S 架构的 Web 管理界面，面向管理人员、巡检人员、应急人员等不同角色提供差异化交互，采用 B/S 架构实现跨平台使用。系统主要包含以下功能模块：摄像头视频墙模块（多宫格布局 2x2/3x3，支持分页 tabs 加载，实时播放仓库各点位视频）、摄像头列表模块（左侧设备树展示所有摄像头，按区域分类，点击定位播放）、视频回放模块（按时间段检索录像，时间轴叠加报警区间标记，支持 0.25x~8x 倍速回放）、报警管理模块（实时接收 SSE 推送的报警，列表动态刷新，支持按设备/时间筛选与处置）、仓库平面图模块（上传仓库背景图，按设备坐标定位显示设备状态，报警设备叠加红色光圈与报警图标）。各模块统一通过 MQTT 消息同步设备状态、通过 REST/WebRTC 与后端及流媒体交互。
+
+三、核心技术原理与实施方案思路
+3.1 智能安全管控核心技术
+采用"物联网传感器采集 + 智能视觉识别分析 + 无线高速传输"的一体化技术架构。物联网层面基于低功耗无线传感网络实现温湿度、烟雾、倾斜、水浸等环境参数全域采集；视觉层面基于神经网络算法实现安全帽佩戴检测、违规动火识别、异常入侵监测、红外测温等智能分析；传输层面通过 LoRa、工业以太网、485 总线等多通道融合确保数据稳定回传。最终形成"数据采集 — 高速传输 — 智能分析 — 精准决策"的完整闭环。
+3.2 多参数融合安全预警模型
+构建基于多参数融合的环境安全预警模型，采用加权模糊综合评价方法，将温湿度、烟雾浓度、货架倾斜角度、水浸状态等参数融合为统一的安全等级指数。模型支持管理人员根据不同库区（危化品库区、普通货物库区）自定义安全阈值与权重配置。
+3.3 模型参数率定与校准
+环境预警模型参数通过现场试验数据率定，利用历史温湿度、烟雾等数据标定各参数权重与阈值；AI 视觉模型采用迁移学习方法，在预训练模型基础上使用仓库现场采集的标注数据微调，提升场景适配性；数字孪生映射模型的运动参数（速度、加速度、位置精度）通过设备实际运行数据校准；预测模型参数采用滑动窗口方法动态更新，确保预测结果随消耗规律变化自适应调整。
+3.4 实测数据与模型对标验证
+环境预警模型对比模型计算的安全等级与人工评估结果验证准确率；AI 视觉模型对比算法检测结果与人工标注结果验证检测准确率和误报率；数字孪生映射模型对比三维模型显示的设备状态与 WCS 实际设备状态验证同步准确率和延迟；预测模型对比预测补货量与实际消耗量验证预测准确率。
+
+四、技术栈落地实现（本系统实施方案）
+在上述架构与原理指导下，本系统（Spring Boot + Vue）的具体实现对应到各层能力如下。
+4.1 数据实时采集、解析、协议适配
+开发统一的数据采集适配层，支持 LoRa、工业以太网、485 总线等多种通信协议接入；采集模块接收传感器原始数据，进行协议解析、数据校验、格式转换，将异构数据统一为标准 JSON 后推送至消息队列（MQTT）；适配层支持热插拔式协议扩展，新增设备类型只需开发对应协议适配插件；后端通过 JNA/JNI 封装厂商硬件 SDK，维护设备长连接与重连。
+4.2 数据存储、预处理与降噪补全
+数据预处理管道包含数据清洗（去除异常值、重复值）、数据降噪（滑动平均滤波、小波变换）、数据补全（线性插值、KNN）；预处理后数据分别写入时序数据库（实时展示、趋势分析）与关系型数据库（统计报表、关联查询）；设备状态经 MQTT 发布（主题 device/status/{deviceId}，QoS=1，retain=true 保留最新值）。
+4.3 实时监测展示、态势大屏与可视化
+（1）智能安全管控平台展示模块：首页数据总览看板（安全等级、在线设备数、预警数量统计）、立体地图展示（设备位置与实时状态可视化）、实时监控页面（多画面切换 1/4/9/16 分屏、异常标注叠加）、环境监控页面（实时数据、历史趋势图表、数据导出）。（2）多参数融合安全预警模块：基于规则引擎自动联动决策（示例：温湿度超阈值 + 无烟雾告警 → 启动通风 + 推巡检；未戴安全帽 + 靠近高价值区 → 声光告警 + 锁闭门禁）。（3）环境趋势预测模块：历史数据生成趋势图，标注突变点并预测风险。（4）AI 视觉行为分析模块：安全帽检测、违规动火识别、异常入侵监测、红外测温实时分析。
+4.4 报警实时推送（SSE）
+设备数值超阈值时生成报警记录并入库；设备侧/边缘网关经 HTTP 上报，后端校验入库后触发 SSE 推送；后端维护 text/event-stream 长连接，报警产生即主动推送前端，无需轮询（比 WebSocket 更轻量，适合服务端到前端单向通知）；前端 EventSource 监听，动态刷新报警列表与时间轴。
+4.5 摄像头视频流（WebRTC + 流媒体）
+部署流媒体服务器（ZLMediaKit / Janus / MediaMTX），将摄像头 RTSP 流转封装为 WebRTC，实现浏览器无插件低延迟播放；前端 RTCPeerConnection 建立播放：获取 SDP offer → setRemoteDescription → createAnswer → 回传 → onTrack 绑定 video；视频墙多宫格（2x2/3x3），按需分页（tabs）加载当前激活墙流。
+4.6 摄像头 SDK 功能（拍照 / 回放 / 录像）
+拍照：调用 SDK 抓拍存文件服务（MinIO），报警时自动拍照并存入报警记录 pic 字段；回放：对接 SDK 录像能力经流媒体回放，前端选时间段（如今早 00:00~06:00）生成回放流，倍速由后端 playbackControl（speed 参数）控制，前端支持 0.25x~8x；录像：后端触发 SDK 开始/停止录像或流媒体录制，文件存文件服务，前端可查询下载。
+4.7 外部业务系统对接
+横向打通 WMS、WCS、ECN、EPMS，通过 REST 与 MQTT 与业务系统交互，实现库存、任务、设备状态的数据同步与联动。
+
+五、软件分层设计
+系统采用前后端分离架构，前端基于 Vue、后端基于 Spring Boot，各自遵循清晰的分层设计，集成与业务解耦，便于对接不同厂商 SDK 与扩展。
+
+5.1 后端分层设计（Spring Boot）
+表现层 Controller：提供 REST 接口（设备/摄像头/报警的增删改查）、SSE 推送接口（向浏览器实时推送报警事件）、文件上传下载接口（图片/录像）。业务层 Service：设备服务（状态采集、阈值比对、报警判定）、摄像头服务（对接摄像头 SDK 实现拍照/回放/录像）、报警服务（报警接收、入库、SSE 广播）、流媒体服务（WebRTC 信令与播放地址下发）。集成层 Integration：硬件 SDK 封装（JNA/JNI 调用厂商动态库）、摄像头 SDK 封装（海康等品牌控制接口）、MQTT 客户端（设备状态发布）、流媒体客户端（与 ZLMediaKit 等信令交互）。持久层 Mapper/Repository：基于 MyBatis-Plus/JPA 操作数据库，实体包括设备、摄像头、报警记录、报警规则。配置层 Config：MQTT、SSE、WebRTC、文件存储、SDK 连接等统一配置。模型层 Entity/DTO：与数据库表映射的实体类，以及对外传输的数据对象（如报警推送体）。
+
+5.2 前端分层设计（Vue）
+视图层 views：按业务划分的独立页面，包括摄像头视频墙（cameraTree，多宫格实时播放）、摄像头列表（cameraStreet，左侧设备树定位）、视频回放（cameraPlayback，时间段检索 + 时间轴报警标记 + 倍速）、仓库平面图（warehouseBg，背景图 + 设备坐标定位 + 报警标记）、报警管理（实时列表与处置）。组件层 components：可复用 UI 与逻辑组件，包括仓库平面图报警标记组件、报警时间轴组件、视频播放组件、设备树组件等，提升复用与维护性。接口层 api：统一封装所有后端调用，包括 REST 请求（设备/摄像头/报警管理）、SSE 连接（EventSource 监听实时报警）、WebRTC 信令交互（与流媒体服务建立播放连接）。状态层 store：基于 Pinia/Vuex 管理全局状态，包括设备在线状态、报警实时列表、当前播放摄像头与回放参数等，避免跨组件重复请求。工具层 utils：时间格式化、坐标解析、报警区间裁剪等公共函数。
+
+六、关键技术点小结
+分层架构：感知/边缘/平台/应用四层 + WMS/WCS/ECN/EPMS 横向打通。MQTT：设备状态异步上报，解耦采集与展示，保留最新值。SSE：服务端单向实时推送报警，比 WebSocket 更轻量。WebRTC：浏览器无插件低延迟视频，依赖流媒体做 RTSP→WebRTC 转换。规则引擎：多参数融合预警与自动联动决策。摄像头 SDK：拍照、回放、录像核心能力入口。报警裁剪：前端时间轴报警标记裁剪到回放范围内，避免跨天超长。
+
+生成日期：2026-08-25