| | |
|---|
| | | <h2>实时监控画面</h2> |
|---|
| | | <div class="layui-row layui-col-space10"> |
|---|
| | | <div class="layui-inline"> |
|---|
| | | <label class="layui-form-label">仓库列表</label> |
|---|
| | | <label class="layui-form-label">设备列表</label> |
|---|
| | | <select id="select-camera" class="layui-form-select w-select"> |
|---|
| | | <option>请选择……</option> |
|---|
| | | <option th:each="camera:${listCamera}" th:value="${camera.id}" th:text="${camera.name}"></option> |
|---|
| | | <option th:each="camera:${listCamera}" th:value="${camera.depotId}" th:text="${camera.name}"></option> |
|---|
| | | </select> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="card-body"> |
|---|
| | | <!-- 双视频展示区域 --> |
|---|
| | | <div class="video-container" id="video-container" style="grid-template-columns: 1fr;"> |
|---|
| | | <!-- 热成像视频画面 --> |
|---|
| | | <div class="video-box" id="thermal-video"> |
|---|
| | | <div class="video-label"> |
|---|
| | | <i class="layui-icon layui-icon-camera-fill"></i> 热成像视频 |
|---|
| | | </div> |
|---|
| | | <div id="divPlugin2"> |
|---|
| | | <img th:src="@{/img/web/security/p-snap.jpg}" alt="热成像实时画面"> |
|---|
| | | <div class="video-container" id="video-container" style="grid-template-columns: 1fr;min-height: 610px;"> |
|---|
| | | <!-- <!– 热成像视频画面 –>--> |
|---|
| | | <!-- <div class="video-box" id="thermal-video">--> |
|---|
| | | <!-- <div class="video-label">--> |
|---|
| | | <!-- <i class="layui-icon layui-icon-camera-fill"></i>--> |
|---|
| | | <!-- </div>--> |
|---|
| | | <div id="divPlugin2" style="height: 100%"> |
|---|
| | | <img th:src="@{/img/web/security/p-snap.jpg}" alt=""> |
|---|
| | | </div> |
|---|
| | | <!-- 温度标记点 |
|---|
| | | <div class="temp-mark" title="异常高温点: 32°C"> |
|---|
| | |
|---|
| | | </div> |
|---|
| | | --> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | <!-- </div>--> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- 简化的视频控制工具栏--> |
|---|
| | |
|---|
| | | <button class="layui-btn layui-btn-default layui-btn-sm"> |
|---|
| | | 减倍 <i class="layui-icon layui-icon-subtraction"></i> |
|---|
| | | </button> |
|---|
| | | <button class="layui-btn layui-btn-default layui-btn-sm"> |
|---|
| | | 开始检测 <i class="layui-icon layui-icon-subtraction"></i> |
|---|
| | | </button> |
|---|
| | | <button class="layui-btn layui-btn-default layui-btn-sm"> |
|---|
| | | 停止检测 <i class="layui-icon layui-icon-subtraction"></i> |
|---|
| | | </button> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | |
|---|
| | |
|---|
| | | <div class="card-body"> |
|---|
| | | <div class="record-grid"> |
|---|
| | | <!-- 普通视频记录 --> |
|---|
| | | <div class="record-item"> |
|---|
| | | <div class="record-item" style="border: 2px solid var(--warning-color);"> |
|---|
| | | <div class="record-img"> |
|---|
| | | <img th:src="@{/img/web/security/p-snap.jpg}" alt="普通视频记录"> |
|---|
| | | <img id="file-img1" th:src="@{/img/web/security/p-snap.jpg}"> |
|---|
| | | </div> |
|---|
| | | <div class="record-info"> |
|---|
| | | <div class="record-name">粮仓1号</div> |
|---|
| | | <div class="record-time">2025-12-03 10:00</div> |
|---|
| | | <div class="record-name">过程抓拍1</div> |
|---|
| | | <div id="file-time1" class="record-time">2025-12-03 10:00</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- 热成像视频记录 --> |
|---|
| | | <div class="record-item"> |
|---|
| | | <div class="record-item" style="border: 2px solid var(--warning-color);"> |
|---|
| | | <div class="record-img"> |
|---|
| | | <img th:src="@{/img/web/security/p-snap-red.jpg}" alt="热成像视频记录"> |
|---|
| | | <img id="record-img2" th:src="@{/img/web/security/p-snap.jpg}"> |
|---|
| | | </div> |
|---|
| | | <div class="record-info"> |
|---|
| | | <div class="record-name">粮仓1号</div> |
|---|
| | | <div class="record-time">2025-12-03 10:00</div> |
|---|
| | | <div class="record-name">过程抓拍2</div> |
|---|
| | | <div id="file-time2" class="record-time">2025-12-03 10:00</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- 异常事件记录 --> |
|---|
| | | <div class="record-item" style="border: 2px solid var(--warning-color);"> |
|---|
| | | <div class="record-img"> |
|---|
| | | <img th:src="@{/img/web/security/p-snap.jpg}" alt="异常事件记录"> |
|---|
| | | <img id="record-img3" th:src="@{/img/web/security/p-snap.jpg}"> |
|---|
| | | </div> |
|---|
| | | <div class="record-info"> |
|---|
| | | <div class="record-name">粮仓3号</div> |
|---|
| | | <div class="record-time">2025-12-03 14:20</div> |
|---|
| | | <div class="record-name">过程抓拍3</div> |
|---|
| | | <div id="file-time3" class="record-time">2025-12-03 14:20</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- 热成像视频记录 --> |
|---|
| | | <div class="record-item"> |
|---|
| | | <div class="record-item" style="border: 2px solid var(--warning-color);"> |
|---|
| | | <div class="record-img"> |
|---|
| | | <img th:src="@{/img/web/security/p-snap-red.jpg}" alt="热成像视频记录"> |
|---|
| | | <img id="record-img4" th:src="@{/img/web/security/p-snap.jpg}"> |
|---|
| | | </div> |
|---|
| | | <div class="record-info"> |
|---|
| | | <div class="record-name">粮仓1号</div> |
|---|
| | | <div class="record-time">2025-12-03 10:00</div> |
|---|
| | | <div class="record-name">过程抓拍4</div> |
|---|
| | | <div id="file-time4" class="record-time">2025-12-03 10:00</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | |
|---|
| | | <div class="card-body" style="max-height: 410px; overflow-y: hidden;"> |
|---|
| | | <div class="alert-item accent"> |
|---|
| | | <div class="alert-header"> |
|---|
| | | <div class="alert-title">检测重量：2590000 KG</div> |
|---|
| | | <div class="alert-time">2025-12-07 10:00</div> |
|---|
| | | <div class="alert-title" id="record_title1">检测重量：---- KG</div> |
|---|
| | | <div class="alert-time" id="record_time1">----</div> |
|---|
| | | </div> |
|---|
| | | <div class="alert-content">检测重量为2590000 KG，实际重量为2550000 KG，误差小于5%。</div> |
|---|
| | | <div style="text-align: right;"> |
|---|
| | | <button class="layui-btn layui-btn-xs" style="background-color: var(--primary-color);">查看三维渲染</button> |
|---|
| | | </div> |
|---|
| | | <div class="alert-content" id="record_content1">检测重量为---- KG，实际重量为---- KG，误差小于-%。</div> |
|---|
| | | </div> |
|---|
| | | <div class="alert-item"> |
|---|
| | | <div class="alert-header"> |
|---|
| | | <div class="alert-title">检测重量：2540000 KG</div> |
|---|
| | | <div class="alert-time">2025-12-06 10:00</div> |
|---|
| | | <div class="alert-title" id="record_title2">检测重量：---- KG</div> |
|---|
| | | <div class="alert-time" id="record_time2">----</div> |
|---|
| | | </div> |
|---|
| | | <div class="alert-content">检测重量为2540000 KG，实际重量为2550000 KG，误差小于5%。</div> |
|---|
| | | <div style="text-align: right;"> |
|---|
| | | <button class="layui-btn layui-btn-xs" style="background-color: var(--primary-color);">查看三维渲染</button> |
|---|
| | | <div class="alert-content" id="record_content2">检测重量为---- KG，实际重量为---- KG，误差小于-%。</div> |
|---|
| | | </div> |
|---|
| | | <div class="alert-item blue"> |
|---|
| | | <div class="alert-header"> |
|---|
| | | <div class="alert-title" id="record_title3">检测重量：---- KG</div> |
|---|
| | | <div class="alert-time" id="record_time3">----</div> |
|---|
| | | </div> |
|---|
| | | <div class="alert-content" id="record_content3">检测重量为---- KG，实际重量为---- KG，误差小于-%。</div> |
|---|
| | | </div> |
|---|
| | | <div class="alert-item gray"> |
|---|
| | | <div class="alert-header"> |
|---|
| | | <div class="alert-title">检测重量：2510000 KG</div> |
|---|
| | | <div class="alert-time">2025-12-05 10:00</div> |
|---|
| | | <div class="alert-title" id="record_title4">检测重量：---- KG</div> |
|---|
| | | <div class="alert-time" id="record_time4">----</div> |
|---|
| | | </div> |
|---|
| | | <div class="alert-content">检测重量为2510000 KG，实际重量为2550000 KG，误差小于5%。</div> |
|---|
| | | <div style="text-align: right;"> |
|---|
| | | <button class="layui-btn layui-btn-xs" style="background-color: var(--primary-color);">查看三维渲染</button> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="alert-item gray"> |
|---|
| | | <div class="alert-header"> |
|---|
| | | <div class="alert-title">检测重量：2560000 KG</div> |
|---|
| | | <div class="alert-time">2025-12-04 10:00</div> |
|---|
| | | </div> |
|---|
| | | <div class="alert-content">检测重量为2560000 KG，实际重量为2550000 KG，误差小于5%。</div> |
|---|
| | | <div style="text-align: right;"> |
|---|
| | | <button class="layui-btn layui-btn-xs" style="background-color: var(--primary-color);">查看三维渲染</button> |
|---|
| | | </div> |
|---|
| | | <div class="alert-content" id="record_content4">检测重量为---- KG，实际重量为---- KG，误差小于-%。</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | |
|---|
| | | <div class="tool-item-simple" style="height: 65px"> |
|---|
| | | <div class="tool-icon-simple"><i class="layui-icon layui-icon-chart"></i></div> |
|---|
| | | <div class="tool-text"> |
|---|
| | | <div class="tool-name-simple">温度变化曲线</div> |
|---|
| | | <div class="tool-desc">查看温度变化趋势分析</div> |
|---|
| | | </div> |
|---|
| | | <div class="tool-name-simple">数据报表</div> |
|---|
| | | <div class="tool-desc">查看数据报表分析</div> |
|---|
| | | </div>-- |
|---|
| | | </div> |
|---|
| | | <div class="tool-item-simple" style="height: 65px"> |
|---|
| | | <div class="tool-icon-simple"><i class="layui-icon layui-icon-print"></i></div> |
|---|
| | | <div class="tool-text"> |
|---|
| | | <div class="tool-name-simple">导出分析报告</div> |
|---|
| | | <div class="tool-desc">导出温度数据及分析结果</div> |
|---|
| | | <div class="tool-desc">导出数据数量分析结果</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
