<!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.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;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">
|
<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" onmousedown="ptzControl(1);"
|
onmouseup="moveStop();">
|
上移 <i class="layui-icon layui-icon-up"></i>
|
</button>
|
<button class="layui-btn layui-btn-default layui-btn-sm" onmousedown="ptzControl(2);"
|
onmouseup="moveStop();">
|
下移 <i class="layui-icon layui-icon-down"></i>
|
</button>
|
<button class="layui-btn layui-btn-default layui-btn-sm" onmousedown="ptzControl(3);"
|
onmouseup="moveStop();">
|
左移 <i class="layui-icon layui-icon-left"></i>
|
</button>
|
<button class="layui-btn layui-btn-default layui-btn-sm" onmousedown="ptzControl(4);"
|
onmouseup="moveStop();">
|
右移 <i class="layui-icon layui-icon-right"></i>
|
</button>
|
<button class="layui-btn layui-btn-default layui-btn-sm" onmousedown="ptzControl(10);"
|
onmouseup="zoomStop();">
|
变焦大 <i class="layui-icon layui-icon-addition"></i>
|
</button>
|
<button class="layui-btn layui-btn-default layui-btn-sm" onmousedown="ptzControl(9);"
|
onmouseup="zoomStop();">
|
变焦小 <i class="layui-icon layui-icon-subtraction"></i>
|
</button>
|
<button class="layui-btn layui-btn-default layui-btn-sm" onclick="checkStart()">
|
开始检测 <i class="layui-icon layui-icon-subtraction"></i>
|
</button>
|
<button class="layui-btn layui-btn-default layui-btn-sm" onclick="checkStop()">
|
停止检测 <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">
|
<!-- 过程抓拍1 -->
|
<div class="record-item" style="border: 2px solid var(--warning-color);">
|
<div class="record-img">
|
<img id="file-img1" th:src="@{/img/web/security/p-snap.jpg}">
|
</div>
|
<div class="record-info">
|
<div class="record-name">过程抓拍1</div>
|
<div id="file-time1" class="record-time">2025-12-03 10:00</div>
|
</div>
|
</div>
|
|
<!-- 过程抓拍2 -->
|
<div class="record-item" style="border: 2px solid var(--warning-color);">
|
<div class="record-img">
|
<img id="file-img2" th:src="@{/img/web/security/p-snap.jpg}">
|
</div>
|
<div class="record-info">
|
<div class="record-name">过程抓拍2</div>
|
<div id="file-time2" class="record-time">2025-12-03 10:00</div>
|
</div>
|
</div>
|
|
<!-- 过程抓拍3 -->
|
<div class="record-item" style="border: 2px solid var(--warning-color);">
|
<div class="record-img">
|
<img id="file-img3" th:src="@{/img/web/security/p-snap.jpg}">
|
</div>
|
<div class="record-info">
|
<div class="record-name">过程抓拍3</div>
|
<div id="file-time3" class="record-time">2025-12-03 14:20</div>
|
</div>
|
</div>
|
|
<!-- 过程抓拍4 -->
|
<div class="record-item" style="border: 2px solid var(--warning-color);">
|
<div class="record-img">
|
<img id="file-img4" th:src="@{/img/web/security/p-snap.jpg}">
|
</div>
|
<div class="record-info">
|
<div class="record-name">过程抓拍4</div>
|
<div id="file-time4" 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" id="record_title1">检测重量：---- KG</div>
|
<div class="alert-time" id="record_time1">----</div>
|
</div>
|
<div class="alert-content" id="record_content1">检测重量为---- KG，实际重量为---- KG，误差小于-%。</div>
|
</div>
|
<div class="alert-item">
|
<div class="alert-header">
|
<div class="alert-title" id="record_title2">检测重量：---- KG</div>
|
<div class="alert-time" id="record_time2">----</div>
|
</div>
|
<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" id="record_title4">检测重量：---- KG</div>
|
<div class="alert-time" id="record_time4">----</div>
|
</div>
|
<div class="alert-content" id="record_content4">检测重量为---- KG，实际重量为---- KG，误差小于-%。</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>
|
<script th:src="@{/security/video-control.js}"></script>
|
</html>
|
