617 lines
19 KiB
HTML
617 lines
19 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}录入成果 - 紫金·稷下薪火·云枢智海师生成果共创系统{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="card">
|
||
<h2 style="color: var(--primary); border-bottom: 2px solid var(--primary); padding-bottom: 10px;">
|
||
<i class="fas fa-cloud-upload-alt"></i> 成果录入
|
||
</h2>
|
||
<p class="mb-4">请上传包含成果信息的图片（如获奖证书、论文封面等），系统将自动识别关键信息</p>
|
||
|
||
<form id="upload-form" enctype="multipart/form-data" class="mb-4">
|
||
<div class="mb-3">
|
||
<label for="file" class="form-label">选择图片文件</label>
|
||
<input type="file" name="file" accept="image/*" id="file" class="form-control" required>
|
||
<div class="form-text">支持JPG、PNG、GIF等格式，文件大小不超过10MB</div>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary btn-lg">
|
||
<i class="fas fa-upload"></i> 上传图片
|
||
</button>
|
||
</form>
|
||
|
||
<!-- 编辑确认区域 -->
|
||
<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 editSection = document.getElementById("edit-section");
|
||
|
||
// 显示上传进度动画
|
||
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) {
|
||
editSection.innerHTML = `
|
||
<div class="card">
|
||
<div class="alert alert-danger">
|
||
<i class="fas fa-exclamation-circle"></i> 错误: ${data.error}
|
||
</div>
|
||
</div>
|
||
`;
|
||
} else {
|
||
// 存储当前数据
|
||
currentData = data.data;
|
||
currentImage = data.image;
|
||
|
||
// 生成编辑表单
|
||
generateEditForm(data.data);
|
||
}
|
||
})
|
||
.catch(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>
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, var(--primary), var(--primary-light));
|
||
border: none;
|
||
border-radius: 30px;
|
||
padding: 12px 24px;
|
||
font-weight: 500;
|
||
transition: var(--transition);
|
||
box-shadow: 0 4px 8px rgba(67, 97, 238, 0.2);
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: linear-gradient(135deg, var(--primary-light), var(--primary));
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 12px rgba(67, 97, 238, 0.3);
|
||
}
|
||
|
||
.form-control {
|
||
width: 100%;
|
||
padding: 12px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.form-control:hover {
|
||
border-color: var(--primary);
|
||
}
|
||
|
||
.progress-container {
|
||
background-color: #f8f9fa;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.progress-bar {
|
||
width: 100%;
|
||
height: 8px;
|
||
background-color: #e9ecef;
|
||
border-radius: 4px;
|
||
margin-bottom: 15px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.progress-bar::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 80%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent, #4cc9f0, transparent);
|
||
animation: progress 1.5s infinite;
|
||
}
|
||
|
||
@keyframes progress {
|
||
0% { left: -100%; }
|
||
100% { left: 200%; }
|
||
}
|
||
|
||
.progress-text {
|
||
color: #6c757d;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.alert {
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.alert-danger {
|
||
background-color: #ffe3e3;
|
||
color: #d32f2f;
|
||
border-left: 4px solid #d32f2f;
|
||
}
|
||
|
||
.result-card {
|
||
background: white;
|
||
border-radius: 12px;
|
||
box-shadow: var(--shadow);
|
||
padding: 20px;
|
||
border-left: 4px solid var(--success);
|
||
}
|
||
|
||
.result-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-bottom: 15px;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.result-header h3 {
|
||
color: var(--success);
|
||
margin: 0;
|
||
}
|
||
|
||
.timestamp {
|
||
color: #6c757d;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.result-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.result-label {
|
||
font-weight: 500;
|
||
color: #495057;
|
||
}
|
||
|
||
.result-value {
|
||
color: #333;
|
||
max-width: 70%;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.result-footer {
|
||
margin-top: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.success-message {
|
||
color: var(--success);
|
||
font-weight: 500;
|
||
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);
|
||
border-radius: 6px;
|
||
padding: 8px 16px;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.btn-outline-primary:hover {
|
||
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 %} |