Viajero/Achievement_Inputing
2
1
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

新增和完成了录入修改，查询

Browse Source
This commit is contained in:
spdis
2025-10-04 11:51:08 +08:00
parent 657365f9de
commit 30645e46ff
3 changed files with 683 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

461
templates/index.html
View File

@@ -20,72 +20,255 @@
</button>
</form>
<div id="result" class="mt-4"></div>
<!-- 编辑确认区域 -->
<div id="edit-section" class="mt-4" style="display: none;">
<div class="card">
<h3 style="color: var(--primary); border-bottom: 2px solid var(--primary); padding-bottom: 10px;">
<i class="fas fa-edit"></i> 识别结果 - 请确认并编辑数据
</h3>
<p class="mb-4">系统已识别出以下信息，您可以修改字段名和对应的数据值，确认无误后点击录入按钮</p>
<form id="edit-form">
<div id="edit-fields"></div>
<div class="mt-4 text-center">
<button type="button" id="confirm-btn" class="btn btn-success btn-lg">
<i class="fas fa-check"></i> 确认录入
</button>
<button type="button" id="cancel-btn" class="btn btn-secondary btn-lg ml-3">
<i class="fas fa-times"></i> 取消
</button>
</div>
</form>
</div>
</div>
</div>
<script>
let currentData = null;
let currentImage = null;
document.getElementById("upload-form").addEventListener("submit", function (e) {
e.preventDefault();
let formData = new FormData(this);
const resultDiv = document.getElementById("result");
const editSection = document.getElementById("edit-section");
// 显示上传进度动画
resultDiv.innerHTML = `
<div class="progress-container">
<div class="progress-bar"></div>
<p class="progress-text">正在处理图片，请稍候...</p>
editSection.innerHTML = `
<div class="card">
<div class="progress-container">
<div class="progress-bar"></div>
<p class="progress-text">正在处理图片，请稍候...</p>
</div>
</div>
`;
editSection.style.display = "block";
fetch("/upload", { method: "POST", body: formData })
.then(res => res.json())
.then(data => {
if(data.error) {
resultDiv.innerHTML = `
<div class="alert alert-danger">
<i class="fas fa-exclamation-circle"></i> 错误: ${data.error}
editSection.innerHTML = `
<div class="card">
<div class="alert alert-danger">
<i class="fas fa-exclamation-circle"></i> 错误: ${data.error}
</div>
</div>
`;
} else {
const resultHtml = `
<div class="result-card">
<div class="result-header">
<h3><i class="fas fa-check-circle"></i> 识别成功</h3>
<p class="timestamp">${new Date().toLocaleString()}</p>
</div>
<div class="result-content">
${Object.entries(data.data).map(([key, value]) => `
<div class="result-item">
<span class="result-label">${key.replace(/_/g, ' ')}</span>
<span class="result-value">${value}</span>
</div>
`).join('')}
</div>
<div class="result-footer">
<p class="success-message">${data.message}</p>
<button class="btn btn-outline-primary copy-btn" data-clipboard-text="${JSON.stringify(data.data)}">
<i class="fas fa-copy"></i> 复制结果
</button>
</div>
</div>
`;
resultDiv.innerHTML = resultHtml;
// 添加复制按钮功能
document.querySelector('.copy-btn').addEventListener('click', function() {
navigator.clipboard.writeText(this.getAttribute('data-clipboard-text'));
alert('结果已复制到剪贴板！');
});
// 存储当前数据
currentData = data.data;
currentImage = data.image;
// 生成编辑表单
generateEditForm(data.data);
}
})
.catch(error => {
resultDiv.innerHTML = `
<div class="alert alert-danger">
<i class="fas fa-exclamation-circle"></i> 上传失败: ${error}
editSection.innerHTML = `
<div class="card">
<div class="alert alert-danger">
<i class="fas fa-exclamation-circle"></i> 上传失败: ${error}
</div>
</div>
`;
});
});
function generateEditForm(data) {
const editSection = document.getElementById("edit-section");
let fieldsHtml = "";
Object.entries(data).forEach(([key, value], index) => {
fieldsHtml += `
<div class="field-row mb-3">
<div class="row">
<div class="col-md-4">
<label class="form-label">字段名</label>
<input type="text" class="form-control field-name" value="${key}" data-original-key="${key}">
</div>
<div class="col-md-6">
<label class="form-label">数据值</label>
<input type="text" class="form-control field-value" value="${value}">
</div>
<div class="col-md-2 d-flex align-items-end">
<button type="button" class="btn btn-danger btn-sm delete-field" title="删除此字段">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
</div>
`;
});
editSection.innerHTML = `
<div class="card">
<h3 style="color: var(--primary); border-bottom: 2px solid var(--primary); padding-bottom: 10px;">
<i class="fas fa-edit"></i> 识别结果 - 请确认并编辑数据
</h3>
<p class="mb-4">系统已识别出以下信息，您可以修改字段名和对应的数据值，确认无误后点击录入按钮</p>
<form id="edit-form">
<div id="edit-fields">
${fieldsHtml}
</div>
<div class="mb-3">
<button type="button" id="add-field-btn" class="btn btn-outline-primary">
<i class="fas fa-plus"></i> 添加字段
</button>
</div>
<div class="mt-4 text-center">
<button type="button" id="confirm-btn" class="btn btn-success btn-lg">
<i class="fas fa-check"></i> 确认录入
</button>
<button type="button" id="cancel-btn" class="btn btn-secondary btn-lg ml-3">
<i class="fas fa-times"></i> 取消
</button>
</div>
</form>
</div>
`;
// 绑定删除按钮事件
document.querySelectorAll('.delete-field').forEach(btn => {
btn.addEventListener('click', function() {
this.closest('.field-row').remove();
});
});
// 绑定添加字段按钮事件
document.getElementById('add-field-btn').addEventListener('click', function() {
const editFields = document.getElementById('edit-fields');
const newFieldHtml = `
<div class="field-row mb-3">
<div class="row">
<div class="col-md-4">
<label class="form-label">字段名</label>
<input type="text" class="form-control field-name" value="" data-original-key="">
</div>
<div class="col-md-6">
<label class="form-label">数据值</label>
<input type="text" class="form-control field-value" value="">
</div>
<div class="col-md-2 d-flex align-items-end">
<button type="button" class="btn btn-danger btn-sm delete-field" title="删除此字段">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
</div>
`;
editFields.insertAdjacentHTML('beforeend', newFieldHtml);
// 为新添加的删除按钮绑定事件
const newDeleteBtn = editFields.lastElementChild.querySelector('.delete-field');
newDeleteBtn.addEventListener('click', function() {
this.closest('.field-row').remove();
});
});
// 绑定确认和取消按钮事件
bindConfirmCancelEvents();
}
function bindConfirmCancelEvents() {
// 确认录入按钮事件
document.getElementById("confirm-btn").addEventListener("click", function() {
const fieldRows = document.querySelectorAll('.field-row');
const editedData = {};
// 收集编辑后的数据
fieldRows.forEach(row => {
const fieldName = row.querySelector('.field-name').value.trim();
const fieldValue = row.querySelector('.field-value').value.trim();
if (fieldName && fieldValue) {
editedData[fieldName] = fieldValue;
}
});
if (Object.keys(editedData).length === 0) {
alert('请至少保留一个有效的字段！');
return;
}
// 发送确认请求
fetch("/confirm", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
data: editedData,
image: currentImage
})
})
.then(res => res.json())
.then(data => {
const editSection = document.getElementById("edit-section");
if(data.error) {
editSection.innerHTML = `
<div class="card">
<div class="alert alert-danger">
<i class="fas fa-exclamation-circle"></i> 录入失败: ${data.error}
</div>
</div>
`;
} else {
editSection.innerHTML = `
<div class="card">
<div class="alert alert-success">
<i class="fas fa-check-circle"></i> ${data.message}
</div>
</div>
`;
// 重置表单
document.getElementById("upload-form").reset();
// 3秒后隐藏成功消息
setTimeout(() => {
editSection.style.display = "none";
}, 3000);
}
})
.catch(error => {
const editSection = document.getElementById("edit-section");
editSection.innerHTML = `
<div class="card">
<div class="alert alert-danger">
<i class="fas fa-exclamation-circle"></i> 录入失败: ${error}
</div>
</div>
`;
});
});
// 取消按钮事件
document.getElementById("cancel-btn").addEventListener("click", function() {
const editSection = document.getElementById("edit-section");
editSection.style.display = "none";
currentData = null;
currentImage = null;
});
}
</script>
<style>
@@ -222,6 +405,12 @@
margin-bottom: 15px;
}
.info-message {
color: var(--primary);
font-weight: 500;
margin-bottom: 15px;
}
.btn-outline-primary {
border: 1px solid var(--primary);
color: var(--primary);
@@ -234,5 +423,195 @@
background-color: var(--primary);
color: white;
}
.btn-success {
background: linear-gradient(135deg, #28a745, #20c997);
border: none;
border-radius: 30px;
padding: 12px 24px;
font-weight: 500;
transition: var(--transition);
box-shadow: 0 4px 8px rgba(40, 167, 69, 0.2);
color: white;
}
.btn-success:hover {
background: linear-gradient(135deg, #20c997, #28a745);
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(40, 167, 69, 0.3);
}
.btn-secondary {
background: linear-gradient(135deg, #6c757d, #495057);
border: none;
border-radius: 30px;
padding: 12px 24px;
font-weight: 500;
transition: var(--transition);
box-shadow: 0 4px 8px rgba(108, 117, 125, 0.2);
color: white;
}
.btn-secondary:hover {
background: linear-gradient(135deg, #495057, #6c757d);
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(108, 117, 125, 0.3);
}
.btn-danger {
background-color: #dc3545;
border-color: #dc3545;
color: white;
}
.btn-danger:hover {
background-color: #c82333;
border-color: #bd2130;
}
.btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
border-radius: 0.2rem;
}
.ml-3 {
margin-left: 1rem;
}
.btn-outline-primary {
color: var(--primary);
border-color: var(--primary);
background-color: transparent;
padding: 8px 16px;
border-radius: 4px;
border: 1px solid var(--primary);
transition: all 0.3s ease;
}
.btn-outline-primary:hover {
background-color: var(--primary);
border-color: var(--primary);
color: white;
}
.alert-danger {
color: #721c24;
background-color: #f8d7da;
border-color: #f5c6cb;
padding: 0.75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
}
.alert-success {
background-color: #d4edda;
color: #155724;
border-left: 4px solid #28a745;
}
#edit-section .card {
border-left: 4px solid var(--primary);
}
.form-label {
font-weight: 500;
color: #495057;
margin-bottom: 8px;
}
.field-row {
background-color: white;
padding: 15px;
border-radius: 5px;
border: 1px solid #e0e0e0;
margin-bottom: 10px;
}
.field-row:hover {
border-color: var(--primary);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col-md-4, .col-md-6, .col-md-2 {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.col-md-2 {
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-md-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-md-6 {
flex: 0 0 50%;
max-width: 50%;
}
.d-flex {
display: flex;
}
.align-items-end {
align-items: flex-end;
}
.text-center {
text-align: center;
}
.mb-3 {
margin-bottom: 1rem;
}
.mb-4 {
margin-bottom: 1.5rem;
}
.mt-4 {
margin-top: 1.5rem;
}
.btn-lg {
padding: 0.5rem 1rem;
font-size: 1.25rem;
border-radius: 0.3rem;
}
@media (max-width: 768px) {
.col-md-2, .col-md-4, .col-md-6 {
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 10px;
}
.field-row .row {
flex-direction: column;
}
.btn-lg {
width: 100%;
margin-bottom: 10px;
}
.ml-3 {
margin-left: 0;
}
}
</style>
{% endblock %}

212
templates/results.html
View File

@@ -82,6 +82,7 @@
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
border-left: 4px solid #3498db;
transition: transform 0.3s;
cursor: pointer;
}
.result-item:hover {
@@ -89,14 +90,119 @@
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.result-item p {
margin-bottom: 10px;
line-height: 1.6;
.result-preview {
margin-bottom: 15px;
}
.result-preview .field-item {
display: inline-block;
margin-right: 20px;
margin-bottom: 8px;
padding: 5px 10px;
background: #f8f9fa;
border-radius: 4px;
border: 1px solid #e9ecef;
}
.result-preview .field-label {
font-weight: bold;
color: #2c3e50;
margin-right: 5px;
}
.result-preview .field-value {
color: #34495e;
}
.result-item strong {
.result-details {
display: none;
border-top: 1px solid #e9ecef;
padding-top: 15px;
margin-top: 15px;
}
.result-details.expanded {
display: block;
}
.result-details .field-item {
margin-bottom: 10px;
padding: 8px 12px;
background: #f8f9fa;
border-radius: 4px;
border-left: 3px solid #3498db;
}
.result-details .field-label {
font-weight: bold;
color: #2c3e50;
display: inline-block;
min-width: 120px;
}
.result-details .field-value {
color: #34495e;
}
.expand-indicator {
float: right;
color: #3498db;
font-size: 14px;
transition: all 0.3s;
}
.result-item.expanded .expand-indicator {
color: #2c3e50;
}
.image-container {
margin-top: 15px;
text-align: center;
}
.result-image {
max-width: 100%;
max-height: 300px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
cursor: pointer;
transition: transform 0.3s;
}
.result-image:hover {
transform: scale(1.05);
}
.image-modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
cursor: pointer;
}
.image-modal img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 90%;
max-height: 90%;
border-radius: 8px;
}
.close-modal {
position: absolute;
top: 20px;
right: 30px;
color: white;
font-size: 30px;
font-weight: bold;
cursor: pointer;
}
/* 加载状态 */
@@ -152,22 +258,47 @@
return;
}
const html = realData.map(item => {
const html = realData.map((item, index) => {
const source = item._source || {};
const students = Array.isArray(source.students)
? source.students.join(', ')
: (source.students || '无');
const allFields = Object.entries(source).filter(([key, value]) => key !== 'image' && value);
const teacher = Array.isArray(source.teacher)
? source.teacher.join(', ')
: (source.teacher || '无');
// 获取前3个字段作为预览
const previewFields = allFields.slice(0, 3);
const hasMoreFields = allFields.length > 3;
// 生成预览字段HTML
const previewHtml = previewFields.map(([key, value]) => `
<div class="field-item">
<span class="field-label">${key}:</span>
<span class="field-value">${Array.isArray(value) ? value.join(', ') : value}</span>
</div>
`).join('');
// 生成详细字段HTML
const detailsHtml = allFields.map(([key, value]) => `
<div class="field-item">
<span class="field-label">${key}:</span>
<span class="field-value">${Array.isArray(value) ? value.join(', ') : value}</span>
</div>
`).join('');
// 图片HTML
const imageHtml = source.image ? `
<div class="image-container">
<img src="/image/${source.image}" alt="相关图片" class="result-image" onclick="openImageModal('/image/${source.image}')">
</div>
` : '';
return `
<div class="result-item">
<p><strong>比赛/论文名称：</strong>${source.id || '无'}</p>
<p><strong>项目名称：</strong>${source.name || '无'}</p>
<p><strong>学生：</strong>${students}</p>
<p><strong>指导老师：</strong>${teacher}</p>
<div class="result-item" onclick="toggleDetails(${index})" data-index="${index}">
<div class="result-preview">
${previewHtml}
${hasMoreFields ? '<span class="expand-indicator">▼ 点击查看更多</span>' : ''}
</div>
<div class="result-details" id="details-${index}">
${detailsHtml}
${imageHtml}
</div>
</div>
`;
}).join('');
@@ -178,5 +309,54 @@
resultsContainer.innerHTML = '<div class="error">搜索过程中发生错误</div>';
});
});
function toggleDetails(index) {
const resultItem = document.querySelector(`[data-index="${index}"]`);
const detailsDiv = document.getElementById(`details-${index}`);
if (detailsDiv.classList.contains('expanded')) {
detailsDiv.classList.remove('expanded');
resultItem.classList.remove('expanded');
} else {
detailsDiv.classList.add('expanded');
resultItem.classList.add('expanded');
}
}
function openImageModal(imageSrc) {
event.stopPropagation(); // 阻止事件冒泡
// 创建模态框
const modal = document.createElement('div');
modal.className = 'image-modal';
modal.innerHTML = `
<span class="close-modal" onclick="closeImageModal()">&times;</span>
<img src="${imageSrc}" alt="图片预览">
`;
document.body.appendChild(modal);
modal.style.display = 'block';
// 点击模态框背景关闭
modal.addEventListener('click', function(e) {
if (e.target === modal) {
closeImageModal();
}
});
}
function closeImageModal() {
const modal = document.querySelector('.image-modal');
if (modal) {
modal.remove();
}
}
// ESC键关闭模态框
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
closeImageModal();
}
});
</script>
{% endblock %}