bwadmin/QueryCarInfo2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home0923

Browse Source
This commit is contained in:
bwadmin
2025-09-23 08:17:10 +08:00
parent 0cae9749a8
commit 89c79bdaa1
11 changed files with 768 additions and 306 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/query.html
+135 -176
View File
@@ -91,6 +91,7 @@
<th>车牌号</th>
<th>手机号</th>
<th>状态</th>
<th>登录用户</th>
<th>登录部门</th>
<th>登录IP</th>
</tr>
@@ -118,7 +119,8 @@
{% endif %}
</span>
</td>
<td>{{ query.department }}</td>
<td>{{ query.user_name }}</td>
<td>{{ query.user_department }}</td>
<td>{{ query.query_ip }}</td>
</tr>
{% endfor %}
@@ -136,19 +138,7 @@
<input type="hidden" id="add_plate_number">
<input type="hidden" id="add_phone">
<!-- 详情模态框 -->
<div id="detailModal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4">
<div class="bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
<div class="p-6" id="modalContent">
<!-- 结果列表 -->
<div id="resultList" class="hidden">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6" id="carOwnerCards">
<!-- 车辆信息卡片会动态添加到这里 -->
</div>
</div>
</div>
</div>
</div>
<!-- 详情弹窗已使用layui动态生成，此处不再需要静态模态框 -->
{% include 'footer.html' %}
@@ -158,25 +148,23 @@
document.addEventListener('DOMContentLoaded', function() {
// 获取DOM元素
var addQueryBtn = document.getElementById('addQueryBtn');
var addQueryModal = document.getElementById('addQueryModal');
var closeAddModal = document.getElementById('closeAddModal');
var cancelAddBtn = document.getElementById('cancelAddBtn');
var addQueryForm = document.getElementById('addQueryForm');
var addQueryLoading = document.getElementById('addQueryLoading');
var detailModal = document.getElementById('detailModal');
var closeModal = document.getElementById('closeModal');
var loadingState = document.getElementById('loadingState');
var noResultState = document.getElementById('noResultState');
var resultList = document.getElementById('resultList');
var carOwnerCards = document.getElementById('carOwnerCards');
// 为查询历史记录行添加点击事件
// 为查询历史记录行添加单击事件
var rows = document.querySelectorAll('tr[data-history-id]');
for (var i = 0; i < rows.length; i++) {
rows[i].addEventListener('click', function() {
var historyId = this.getAttribute('data-history-id');
loadHistoryDetail(historyId);
});
// 为了提升用户体验，添加鼠标悬停效果
rows[i].style.cursor = 'pointer';
rows[i].style.transition = 'background-color 0.2s ease';
rows[i].addEventListener('mouseenter', function() {
this.style.backgroundColor = '#f5f7fa';
});
rows[i].addEventListener('mouseleave', function() {
this.style.backgroundColor = '';
});
}
// 增加查询按钮点击事件
@@ -396,48 +384,21 @@
});
});
// 移除对已删除元素的引用
// 点击详情模态框背景关闭
detailModal.addEventListener('click', function(e) {
if (e.target === detailModal) {
// 兼容classList API
if (detailModal.classList) {
detailModal.classList.add('hidden');
} else {
detailModal.className += ' hidden';
}
}
});
// 详情弹窗已使用layui实现，点击背景关闭功能由layui自动处理
// 表单提交逻辑已整合到layui弹窗中，不需要单独的表单提交事件
// 加载查询历史详情
function loadHistoryDetail(historyId) {
// 显示模态框和加载状态
// 兼容classList API
if (detailModal.classList) {
detailModal.classList.remove('hidden');
} else {
detailModal.className = detailModal.className.replace('hidden', '');
}
if (loadingState.classList) {
loadingState.classList.remove('hidden');
} else {
loadingState.className = loadingState.className.replace('hidden', '');
}
if (noResultState.classList) {
noResultState.classList.add('hidden');
} else {
noResultState.className += ' hidden';
}
if (resultList.classList) {
resultList.classList.add('hidden');
} else {
resultList.className += ' hidden';
}
carOwnerCards.innerHTML = '';
// 创建加载中的弹窗
const loadingIndex = layer.load(2, {
shade: [0.3, '#fff'],
content: '<div style="padding: 20px;"><i class="fa fa-spinner fa-spin mr-2"></i>正在加载详情...</div>',
shadeClose: false
});
// 发送AJAX请求获取详情
fetch('/query_history_detail/' + historyId)
@@ -445,99 +406,135 @@
return response.json();
})
.then(function(data) {
// 隐藏加载状态
// 兼容classList API
if (loadingState.classList) {
loadingState.classList.add('hidden');
} else {
loadingState.className += ' hidden';
// 关闭加载弹窗
layer.close(loadingIndex);
// 创建详情弹窗内容
let content = '';
// 转义特殊字符以防止XSS攻击
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text || '';
return div.innerHTML;
}
if (data.error) {
// 显示错误信息
noResultState.querySelector('p').textContent = data.error;
// 兼容classList API
if (noResultState.classList) {
noResultState.classList.remove('hidden');
} else {
noResultState.className = noResultState.className.replace('hidden', '');
}
content = `
<div class="layui-text" style="text-align: center; padding: 60px 40px;">
<div style="display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; background-color: #fef0f0; border-radius: 50%; margin-bottom: 20px;">
<i class="fa fa-exclamation-circle text-red-500 text-4xl"></i>
</div>
<p style="color: #666; font-size: 16px;">${data.error}</p>
</div>
`;
} else if (data.car_owners && data.car_owners.length > 0) {
// 显示结果列表
// 兼容classList API
if (resultList.classList) {
resultList.classList.remove('hidden');
} else {
resultList.className = resultList.className.replace('hidden', '');
}
// 添加查询信息标题
content = `
<div class="layui-text" style="padding: 15px;">
<div class="mb-4 pb-3 border-b border-gray-200">
</div>
<div class="space-y-4" id="carOwnerCards">
`;
// 添加车辆信息卡片
for (var i = 0; i < data.car_owners.length; i++) {
var carOwner = data.car_owners[i];
var card = document.createElement('div');
card.className = 'bg-white border border-gray-200 rounded-lg p-5 shadow-sm hover:shadow-md transition-shadow duration-200';
// 使用字符串拼接替代模板字符串
var cardHtml = '';
cardHtml += '<h4 class="text-lg font-medium text-gray-800 mb-4 flex items-center">';
cardHtml += ' <i class="fa fa-car text-primary mr-2"></i>';
cardHtml += ' 车辆信息';
cardHtml += '</h4>';
cardHtml += '<div class="space-y-3">';
cardHtml += ' <div class="flex justify-between items-center">';
cardHtml += ' <span class="text-gray-500">车牌号：</span>';
cardHtml += ' <span class="font-medium text-gray-800">' + (carOwner.plate_number || '') + '</span>';
cardHtml += ' </div>';
cardHtml += ' <div class="flex justify-between items-center">';
cardHtml += ' <span class="text-gray-500">手机号：</span>';
cardHtml += ' <span class="font-medium text-gray-800">' + (carOwner.phone || '') + '</span>';
cardHtml += ' </div>';
cardHtml += ' <div class="flex justify-between items-center">';
cardHtml += ' <span class="text-gray-500">车主姓名：</span>';
cardHtml += ' <span class="font-medium text-gray-800">' + (carOwner.name || '') + '</span>';
cardHtml += ' </div>';
cardHtml += ' <div class="flex justify-between items-center">';
cardHtml += ' <span class="text-gray-500">身份证号：</span>';
cardHtml += ' <span class="font-medium text-gray-800">' + (carOwner.id_card || '') + '</span>';
cardHtml += ' </div>';
cardHtml += ' <div class="flex justify-between items-center">';
cardHtml += ' <span class="text-gray-500">电子邮箱：</span>';
cardHtml += ' <span class="font-medium text-gray-800">' + (carOwner.email || '未提供') + '</span>';
cardHtml += ' </div>';
cardHtml += ' <div class="flex justify-between items-center">';
cardHtml += ' <span class="text-gray-500">居住地址：</span>';
cardHtml += ' <span class="font-medium text-gray-800">' + (carOwner.address || '未提供') + '</span>';
cardHtml += ' </div>';
cardHtml += '</div>';
card.innerHTML = cardHtml;
carOwnerCards.appendChild(card);
content += `
<div class="bg-white border border-gray-200 rounded-lg shadow-sm">
<div class="p-3 grid grid-cols-1 gap-2">
<div class="flex items-center p-2">
<i class="fa fa-id-card-o text-gray-400 w-8 text-center"></i>
<span class="text-gray-500 w-20">车牌号：</span>
<span class="font-medium text-gray-800 flex-1">${escapeHtml(carOwner.plate_number)}</span>
</div>
<div class="flex items-center p-2">
<i class="fa fa-mobile text-gray-400 w-8 text-center"></i>
<span class="text-gray-500 w-20">手机号：</span>
<span class="font-medium text-gray-800 flex-1">${escapeHtml(carOwner.phone)}</span>
</div>
<div class="flex items-center p-2">
<i class="fa fa-user text-gray-400 w-8 text-center"></i>
<span class="text-gray-500 w-20">车主姓名：</span>
<span class="font-medium text-gray-800 flex-1">${escapeHtml(carOwner.name)}</span>
</div>
<div class="flex items-center p-2">
<i class="fa fa-id-card text-gray-400 w-8 text-center"></i>
<span class="text-gray-500 w-20">身份证号：</span>
<span class="font-medium text-gray-800 flex-1">${escapeHtml(carOwner.id_card)}</span>
</div>
</div>
</div>
`;
}
content += `
</div>
</div>
`;
} else {
// 显示无结果状态
// 兼容classList API
if (noResultState.classList) {
noResultState.classList.remove('hidden');
} else {
noResultState.className = noResultState.className.replace('hidden', '');
}
content = `
<div class="layui-text" style="text-align: center; padding: 60px 40px;">
<div style="display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; background-color: #f5f7fa; border-radius: 50%; margin-bottom: 20px;">
<i class="fa fa-search text-gray-300 text-4xl"></i>
</div>
<p style="color: #666; font-size: 16px; margin-bottom: 8px;">暂无车辆信息</p>
<p style="color: #909399; font-size: 14px;">该查询条件下未找到相关车辆信息</p>
</div>
`;
}
// 打开详情弹窗 - 优化布局和样式
layer.open({
type: 1,
title: '<i class="fa fa-file-text-o"></i> 查询详情',
area: ['700px', 'auto'], // 使用自适应高度
offset: '10%',
shade: [0.3, '#fff'],
shadeClose: true,
anim: 2,
content: content,
btn: ['关闭'],
btnAlign: 'c',
btnClass: ['layui-btn layui-btn-primary'],
skin: 'layui-layer-molv',
success: function(layero, index) {
}
});
})
.catch(function(error) {
// 隐藏加载状态，显示错误信息
// 兼容classList API
if (loadingState.classList) {
loadingState.classList.add('hidden');
} else {
loadingState.className += ' hidden';
}
noResultState.querySelector('p').textContent = '加载详情时发生错误';
// 兼容classList API
if (noResultState.classList) {
noResultState.classList.remove('hidden');
} else {
noResultState.className = noResultState.className.replace('hidden', '');
}
// 关闭加载弹窗
layer.close(loadingIndex);
// 显示错误弹窗
layer.open({
type: 1,
title: '<i class="fa fa-exclamation-circle"></i> 加载失败',
area: ['360px', 'auto'],
offset: '10%',
shade: 0.3,
shadeClose: false,
anim: 2,
content: `
<div class="layui-text" style="text-align: center; padding: 30px 20px;">
<div style="display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; background-color: #fef0f0; border-radius: 50%; margin-bottom: 15px;">
<i class="fa fa-exclamation-circle text-red-500 text-3xl"></i>
</div>
<p style="color: #666; font-size: 14px;">加载详情时发生错误</p>
<p style="color: #999; font-size: 12px; margin-top: 8px;">请稍后重试</p>
</div>
`,
btn: ['确定'],
btnAlign: 'c',
btnClass: ['layui-btn layui-btn-primary'],
skin: 'layui-layer-molv'
});
console.error('Error loading history detail:', error);
});
}
@@ -561,44 +558,6 @@
});
});
</script>
<script>
// 全局搜索变量
var searchQuery = '';
</script>
<script>
// ESC键关闭详情弹窗
document.addEventListener('keydown', function(e) {
// 使用keyCode替代key，提高兼容性
var key = e.key || e.keyCode;
var isEscape = key === 'Escape' || key === 'Esc' || key === 27;
var detailModal = document.getElementById('detailModal');
var isHidden = false;
// 兼容classList API
if (detailModal.classList) {
isHidden = detailModal.classList.contains('hidden');
} else {
isHidden = detailModal.className.indexOf('hidden') !== -1;
}
if (isEscape && !isHidden) {
// 兼容classList API
if (detailModal.classList) {
detailModal.classList.add('hidden');
} else {
detailModal.className += ' hidden';
}
}
});
</script>
</body>
</html>