var layer;
|
var laypage;
|
|
$(function () {
|
// 初始化分页
|
layui.use(['laypage', 'layer'], function () {
|
layer = layui.layer;
|
laypage = layui.laypage;
|
|
// 初始化分页组件
|
initPagination();
|
});
|
|
// 初始化图片预览功能
|
initImagePreview();
|
});
|
|
/**
|
* 初始化分页组件
|
*/
|
function initPagination() {
|
laypage.render({
|
elem: 'pagination',
|
count: typeof totalItems !== 'undefined' ? totalItems : 0,
|
limit: typeof pageSize !== 'undefined' ? pageSize : 6,
|
curr: typeof currentPage !== 'undefined' ? currentPage : 1,
|
layout: [ 'prev', 'page', 'next', 'refresh', 'skip'],
|
jump: function (obj, first) {
|
if (!first) {
|
searchRecord(obj.curr, obj.limit)
|
}
|
}
|
});
|
}
|
|
/**
|
* 重新初始化分页组件
|
* @param {number} totalCount - 总记录数
|
* @param {number} pageSize - 每页大小
|
* @param {number} currentPage - 当前页码
|
*/
|
function reinitPagination(totalCount, pageSize, currentPage) {
|
laypage.render({
|
elem: 'pagination',
|
count: totalCount,
|
limit: pageSize,
|
curr: currentPage,
|
layout: ['prev', 'page', 'next', 'refresh', 'skip'],
|
jump: function (obj, first) {
|
if (!first) {
|
searchRecord(obj.curr, obj.limit)
|
}
|
}
|
});
|
}
|
|
/**
|
* 获取抓拍记录数据
|
* @param {Object} params - 查询参数对象
|
* @param {Function} callback - 回调函数
|
*/
|
function fetchSnapRecordData(params, callback) {
|
$.ajax({
|
url: '../../security/snap/snapRecord/pageData',
|
type: 'POST',
|
dataType: "json",
|
contentType: "application/json;charset=UTF-8",
|
data: JSON.stringify(params),
|
success: function (response) {
|
if (response.code === '0000') {
|
callback(null, response.data);
|
} else {
|
callback(new Error(response.msg || '数据加载失败'), null);
|
}
|
},
|
error: function (xhr, status, error) {
|
callback(new Error('请求失败，请稍后重试'), null);
|
}
|
});
|
}
|
|
/**
|
* 构建查询参数
|
* @param {number} page - 页码
|
* @param {number} size - 每页大小
|
* @returns {Object} 查询参数对象
|
*/
|
function buildQueryParams(page, size) {
|
var params = {
|
page: page,
|
limit: size
|
};
|
|
// 添加表单查询条件
|
var form = document.getElementById('snapRecord-form');
|
if (form) {
|
var inputs = form.querySelectorAll('input[name], select[name]');
|
inputs.forEach(function(input) {
|
if (input.value) { // 只添加非空值
|
params[input.name] = input.value;
|
}
|
});
|
}
|
|
return params;
|
}
|
|
/**
|
* 更新图片画廊内容
|
* @param {Array} records - 抓拍记录数据
|
*/
|
function updateGallery(records) {
|
var container = document.getElementById('gallery-container');
|
if (!container) return;
|
|
// 清空现有内容
|
container.innerHTML = '';
|
|
if (!records || records.length === 0) {
|
// 显示空状态
|
container.innerHTML = `
|
<div class="empty-state">
|
<i class="fa-solid fa-camera-slash"></i>
|
<h3>暂无抓拍记录</h3>
|
<p>当前没有可展示的抓拍记录数据</p>
|
</div>
|
`;
|
// 隐藏分页
|
$('.pagination-container').hide();
|
return;
|
}
|
|
// 显示分页
|
$('.pagination-container').show();
|
|
// 生成图片卡片
|
var html = '';
|
records.forEach(function(record) {
|
html += `
|
<div class="gallery-item">
|
<img src="${record.imgName || '/logo-sm.png'}" alt="${record.id}"
|
data-url="${record.imgName || '/logo-sm.png'}" data-id="${record.id}"
|
class="gallery-img" onclick="showSnapRecordPreview(this.getAttribute('data-url'))">
|
<div class="gallery-info">
|
<div class="gallery-header">
|
<!-- <h3 class="gallery-title">${record.id}</h3>-->
|
<div class="gallery-tags">
|
<span class="tag-person">
|
<i class="layui-icon layui-icon-note"></i>
|
<span>汽车</span>
|
</span>
|
<span class="tag-person">
|
<i class="layui-icon layui-icon-note"></i>
|
<span>卡车</span>
|
</span>
|
<span class="tag-person">
|
<i class="layui-icon layui-icon-note"></i>
|
<span>翻斗车</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>${record.cameraId || ''}</span>
|
</div>
|
<div class="meta-item" style="width: 50%">
|
<i class="layui-icon layui-icon-date"></i>
|
<span>${formatDate(record.snapTime)}</span>
|
</div>
|
</div>
|
<div class="meta-item">
|
<i class="layui-icon layui-icon-home"></i>
|
<span>${record.deptId || ''}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
`;
|
});
|
|
container.innerHTML = html;
|
}
|
|
/**
|
* 格式化日期
|
* @param {string|number} date - 日期字符串或时间戳
|
*/
|
function formatDate(date) {
|
if (!date) return '';
|
var d = new Date(date);
|
return d.getFullYear() + '-' +
|
String(d.getMonth() + 1).padStart(2, '0') + '-' +
|
String(d.getDate()).padStart(2, '0') + ' ' +
|
String(d.getHours()).padStart(2, '0') + ':' +
|
String(d.getMinutes()).padStart(2, '0') + ':' +
|
String(d.getSeconds()).padStart(2, '0');
|
}
|
|
/**
|
* 初始化图片预览功能
|
*/
|
function initImagePreview() {
|
var preview = document.getElementById('imgPreview');
|
var previewImg = document.getElementById('previewImg');
|
var closeBtn = document.getElementById('closePreview');
|
|
// 如果预览元素不存在，则不初始化
|
if (!preview || !previewImg) {
|
return;
|
}
|
|
// 关闭按钮点击事件
|
if (closeBtn) {
|
closeBtn.addEventListener('click', closePreview);
|
}
|
|
// 点击预览区域外关闭
|
preview.addEventListener('click', function (e) {
|
if (e.target === preview) {
|
closePreview();
|
}
|
});
|
|
// 键盘事件监听
|
document.addEventListener('keydown', function (e) {
|
if (e.key === 'Escape' && preview.style.display === 'flex') {
|
closePreview();
|
}
|
});
|
|
// 关闭预览函数
|
function closePreview() {
|
preview.style.display = 'none';
|
previewImg.src = '';
|
}
|
}
|
|
/**
|
* 显示图片预览
|
* @param {string} imgUrl 图片URL
|
*/
|
function showSnapRecordPreview(imgUrl) {
|
var preview = document.getElementById('imgPreview');
|
var previewImg = document.getElementById('previewImg');
|
|
if (preview && previewImg) {
|
previewImg.src = imgUrl;
|
preview.style.display = 'flex';
|
}
|
}
|
|
/**
|
* 读取车牌号
|
*/
|
function searchRecord(page , size) {
|
var pageNumber = 1;
|
var sizeNumber = 6;
|
if (pageSize && pageSize > 0){
|
size = pageSize;
|
}
|
|
if (size && size > 0){
|
sizeNumber = size;
|
}
|
if (page && page > 0){
|
pageNumber = page;
|
}
|
// 构造查询参数，从第一页开始
|
var queryParams = buildQueryParams(pageNumber, sizeNumber);
|
// 显示loading
|
var loadingIndex = layer.load(1, {shade: [0.1, '#fff']});
|
// 调用数据请求方法
|
fetchSnapRecordData(queryParams, function(error, data) {
|
// 关闭loading
|
layer.close(loadingIndex);
|
if (error) {
|
layer.msg(error.message);
|
return;
|
}
|
|
// 更新页面数据
|
updateGallery(data.records);
|
// 重新初始化分页组件
|
reinitPagination(data.total, data.size, data.current);
|
});
|
}
|
function openConf() {
|
var url = ctx + "com.fzzy.igds.SnapConf.d";
|
$.modal.openTab("抓拍配置", url);
|
}
|
