<!DOCTYPE html>
|
<html lang="zh-cn" xmlns:th=http://www.thymeleaf.org>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
<meta name="renderer" content="webkit">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
<title>质押监管平台-数量监测</title>
|
<link rel="stylesheet" th:href="@{/ajax/libs/layui/css/layui.css}"/>
|
<link rel="stylesheet" th:href="@{/security/quantity.css}"/>
|
</head>
|
<body>
|
<!-- 主要内容区 -->
|
<div class="i-container">
|
<!-- 主体内容 -->
|
<div class="layui-row layui-col-space15">
|
<!-- 左侧：实时监控 -->
|
<div class="layui-col-lg8">
|
<!-- 实时热成像监控 -->
|
<div class="card">
|
<div class="card-header">
|
<h2>实时监控画面</h2>
|
<div class="layui-row layui-col-space10">
|
<div class="layui-inline">
|
<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>
|
</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>
|
<!-- 温度标记点
|
<div class="temp-mark" title="异常高温点: 32°C">
|
<i class="fa fa-thermometer-full"></i>
|
</div>
|
-->
|
|
<!-- <!– 温度标尺 –>-->
|
<!-- <div class="temp-scale">-->
|
<!-- <div style="margin-bottom: 5px;">35°C <span class="palette-color" style="background-color: #dc3545;"></span></div>-->
|
<!-- <div style="margin-bottom: 5px;">30°C <span class="palette-color" style="background-color: #fd7e14;"></span></div>-->
|
<!-- <div style="margin-bottom: 5px;">25°C <span class="palette-color" style="background-color: #ffc107;"></span></div>-->
|
<!-- <div>20°C <span class="palette-color" style="background-color: #0d6efd;"></span></div>-->
|
<!-- </div>-->
|
|
<!-- 热成像控制面板
|
<div class="video-controls">
|
<span class="video-btn"><i class="fa fa-exchange"></i></span>
|
<span class="video-btn"><i class="fa fa-plus"></i></span>
|
<span class="video-btn"><i class="fa fa-tint"></i></span>
|
</div>
|
-->
|
|
</div>
|
</div>
|
|
<!-- 简化的视频控制工具栏-->
|
<div style="margin-top: 15px; text-align: center; background-color: #f5f5f5; padding: 10px; border-radius: 4px;">
|
<button class="layui-btn layui-btn-default layui-btn-sm">
|
上移 <i class="layui-icon layui-icon-up"></i>
|
</button>
|
<button class="layui-btn layui-btn-default layui-btn-sm">
|
下移 <i class="layui-icon layui-icon-down"></i>
|
</button>
|
<button class="layui-btn layui-btn-default layui-btn-sm">
|
左移 <i class="layui-icon layui-icon-left"></i>
|
</button>
|
<button class="layui-btn layui-btn-default layui-btn-sm">
|
右移 <i class="layui-icon layui-icon-right"></i>
|
</button>
|
<button class="layui-btn layui-btn-default layui-btn-sm">
|
加倍 <i class="layui-icon layui-icon-addition"></i>
|
</button>
|
<button class="layui-btn layui-btn-default layui-btn-sm">
|
减倍 <i class="layui-icon layui-icon-subtraction"></i>
|
</button>
|
</div>
|
|
|
</div>
|
</div>
|
|
<!-- 历史记录 -->
|
<div class="card">
|
<div class="card-header">
|
<h2>历史检测过程记录</h2>
|
</div>
|
<div class="card-body">
|
<div class="record-grid">
|
<!-- 普通视频记录 -->
|
<div class="record-item">
|
<div class="record-img">
|
<img th:src="@{/img/web/security/p-snap.jpg}" alt="普通视频记录">
|
</div>
|
<div class="record-info">
|
<div class="record-name">粮仓1号</div>
|
<div class="record-time">2025-12-03 10:00</div>
|
</div>
|
</div>
|
|
<!-- 热成像视频记录 -->
|
<div class="record-item">
|
<div class="record-img">
|
<img th:src="@{/img/web/security/p-snap-red.jpg}" alt="热成像视频记录">
|
</div>
|
<div class="record-info">
|
<div class="record-name">粮仓1号</div>
|
<div 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="异常事件记录">
|
</div>
|
<div class="record-info">
|
<div class="record-name">粮仓3号</div>
|
<div class="record-time">2025-12-03 14:20</div>
|
</div>
|
</div>
|
|
<!-- 热成像视频记录 -->
|
<div class="record-item">
|
<div class="record-img">
|
<img th:src="@{/img/web/security/p-snap-red.jpg}" alt="热成像视频记录">
|
</div>
|
<div class="record-info">
|
<div class="record-name">粮仓1号</div>
|
<div class="record-time">2025-12-03 10:00</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
|
<!-- 右侧：数据分析 -->
|
<div class="layui-col-lg4">
|
<!-- 温度走势分析（ECharts实现） -->
|
<div class="card">
|
<div class="card-header">
|
<h2>数量走势分析</h2>
|
<!-- <select class="layui-form-select">-->
|
<!-- <option>近7天</option>-->
|
<!-- <option>近30天</option>-->
|
<!-- </select>-->
|
</div>
|
<div class="card-body">
|
<div style="height: 250px;" id="temperatureChart"></div>
|
</div>
|
</div>
|
|
<!-- 异常警报 -->
|
<div class="card">
|
<div class="card-header">
|
<h2>检测记录</h2>
|
<div>
|
<a href="#" style="color: var(--primary-color);">更多 <i class="layui-icon layui-icon-more"></i></a>
|
</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>
|
<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>
|
<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>
|
<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>
|
</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>
|
<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>
|
</div>
|
</div>
|
|
<!-- 热成像分析工具左侧 -->
|
<div class="card">
|
<div class="card-header">
|
<h2>分析工具</h2>
|
</div>
|
<div class="card-body">
|
<!-- 简化为两个主要工具 -->
|
|
<div class="tool-grid-simple" style="height: 108px">
|
<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>
|
<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>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</body>
|
|
<script th:inline="javascript">
|
//系统登陆人
|
const loginUser = [[${loginUser}]];
|
//业务类型
|
const bizType = [[${bizType}]];
|
//设备列表
|
const listCamera = [[${listCamera}]];
|
|
</script>
|
<script th:src="@{/js/jquery.min.js}"></script>
|
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
|
<script th:src="@{/js/plugins/echarts/echarts.min-4.7.js}"></script>
|
<script th:src="@{/security/quantity.js}"></script>
|
</html>
|
