<!DOCTYPE html>
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="renderer" content="webkit">
|
<th:block th:include="include :: header('智能抓拍')"/>
|
<link rel="stylesheet" type="text/css" th:href="@{/ajax/libs/layui/css/layui.css}"/>
|
<link rel="stylesheet" th:href="@{/security/snap/snapRecord-style.css}">
|
<th:block th:include="include :: select2-css"/>
|
<style>
|
.select-list .select2-container--bootstrap {
|
width: 280px !important;
|
display: inline-block;
|
}
|
</style>
|
</head>
|
<body class="gray-bg">
|
<div class="container-div">
|
<div class="row">
|
<div class="col-sm-12 search-collapse"
|
style="display: flex; justify-content: space-between; align-items: center;">
|
<form id="snapRecord-form">
|
<div class="select-list">
|
<ul>
|
<li>
|
收储公司：<select class="form-control" name="key">
|
<option th:each="company : ${companyList}" th:value="${company.id}"
|
th:text="${company.dwmc}"
|
th:selected="${company.id == defaultCompany}">
|
</option>
|
</select>
|
</li>
|
<li>
|
所选库区：<select class="form-control" name="deptId">
|
<option th:each="dept : ${deptList}" th:value="${dept.id}" th:text="${dept.kqmc}"
|
th:selected="${dept.id == defaultDeptId}">
|
</option>
|
</select>
|
</li>
|
<li th:if="${viewType == '1'}">
|
标签：<input type="text" name="name" placeholder="请输入标签">
|
</li>
|
<li class="select-time">
|
<label style="width: 100px">抓拍时间：</label>
|
<input type="text" class="time-input" style="width: 140px;" id="start"
|
placeholder="开始时间" name="start"/>
|
<span>-</span>
|
<input type="text" class="time-input" style="width: 140px;" id="end" placeholder="结束时间"
|
name="end"/>
|
</li>
|
<li>
|
<a class="btn btn-primary btn-rounded btn-sm" onclick="searchRecord()"><i
|
class="fa fa-search"></i> 搜索</a>
|
<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
|
class="fa fa-refresh"></i> 重置</a>
|
</li>
|
</ul>
|
</div>
|
</form>
|
<div class="btn-group-sm" role="group">
|
<a class="btn btn-success" onclick="openConf()">
|
<i class="fa fa-plus"></i> 库区配置
|
</a>
|
</div>
|
</div>
|
|
|
<div class="col-sm-12 " style="padding-top: 10px;background: #FFFFFF;margin-top: 10px;">
|
<!-- 图片网格 -->
|
<div class="gallery-grid" id="gallery-container">
|
<!-- 图片为空时显示 -->
|
<div th:if="${#lists.isEmpty(snapRecordList)}" class="empty-state">
|
<i class="fa-solid fa-camera-slash"></i>
|
<h3>暂无抓拍记录</h3>
|
<p>当前没有可展示的抓拍记录数据</p>
|
</div>
|
<!-- 图片卡片 -->
|
<div th:each="snapRecord : ${snapRecordList}" class="gallery-item">
|
<img th:src="${snapRecord.imgName ?: '/logo-sm.png'}" th:alt="${snapRecord.id}"
|
th:data-url="${snapRecord.imgName ?: '/logo-sm.png'}" th:data-id="${snapRecord.id}"
|
class="gallery-img" onclick="showSnapRecordPreview(this.getAttribute('data-url'))">
|
<div class="gallery-info">
|
<div class="gallery-header">
|
<!-- <h3 class="gallery-title" th:text="${snapRecord.id}"></h3>-->
|
<!-- 标签列表 -->
|
<div class="gallery-tags">
|
<span th:each="tag : ${#strings.arraySplit(snapRecord.tags, ',')}" class="tag-person">
|
<i class="layui-icon layui-icon-note"></i>
|
<span th:text="${tag}"></span>
|
</span>
|
</div>
|
</div>
|
|
<div class="gallery-meta">
|
<div style="display: flex; align-items: center; gap: 15px;width: 100%">
|
<div class="meta-item" style="width: 50%">
|
<i class="layui-icon layui-icon-video"></i>
|
<span th:text="${snapRecord.cameraId}"></span>
|
</div>
|
|
|
<div class="meta-item" style="width: 50%">
|
<i class="layui-icon layui-icon-date"></i>
|
<span th:text="${snapRecord.snapTime != null ? #dates.format(snapRecord.snapTime, 'yyyy-MM-dd HH:mm') : '无时间'}"></span>
|
</div>
|
</div>
|
<div class="meta-item">
|
<i class="layui-icon layui-icon-home"></i>
|
<!-- <span th:text="${snapRecord.deptId}"></span>-->
|
<th:block th:with="matchedDept=${deptList.?[id == #root.snapRecord.deptId]}">
|
<th:block th:if="${!#lists.isEmpty(matchedDept)}">
|
<span th:text="${matchedDept[0].kqmc}"></span>
|
</th:block>
|
<th:block th:if="${#lists.isEmpty(matchedDept)}">
|
<span th:text="${snapRecord.deptId}"></span>
|
</th:block>
|
</th:block>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 分页控件 -->
|
<div class="pagination-container" th:if="${not #lists.isEmpty(snapRecordList)}">
|
<div id="pagination"></div>
|
</div>
|
|
</div>
|
</div>
|
<!-- 图片预览层 -->
|
<div class="img-preview" id="imgPreview">
|
<div class="preview-content">
|
<img src="" alt="预览图片" class="preview-img" id="previewImg">
|
<div class="close-preview" id="closePreview">
|
<i class="layui-icon layui-icon-clear"></i>
|
</div>
|
</div>
|
</div>
|
</div>
|
<th:block th:include="include :: footer"/>
|
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
|
<th:block th:include="include :: select2-js"/>
|
<script th:src="@{/security/snap/snapRecord.js}"></script>
|
<script th:inline="javascript">
|
var viewType = [[${viewType}]];
|
var cameraList = [[${cameraList}]];
|
var deptList = [[${deptList}]];
|
var companyList = [[${companyList}]];
|
var currentPage = [[${currentPage}]];
|
var totalItems = [[${totalItems}]];
|
var pageSize = [[${pageSize}]];
|
|
</script>
|
|
</body>
|
</html>
|
