288 lines
13 KiB
HTML
288 lines
13 KiB
HTML
{% extends "admin/base.html" %}
|
||
|
||
{% block title %}图片上传 - 墨水屏管理系统{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
||
<h1 class="h2"><i class="fas fa-image me-2"></i>图片上传</h1>
|
||
<div class="btn-toolbar mb-2 mb-md-0">
|
||
<a href="/admin/contents" class="btn btn-secondary">
|
||
<i class="fas fa-arrow-left me-1"></i> 返回内容列表
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-lg-8">
|
||
<div class="card shadow-sm">
|
||
<div class="card-header bg-white py-3">
|
||
<h6 class="m-0 font-weight-bold text-primary">图片上传</h6>
|
||
</div>
|
||
<div class="card-body">
|
||
{% if error %}
|
||
<div class="alert alert-danger" role="alert">
|
||
<i class="fas fa-exclamation-triangle me-2"></i>{{ error }}
|
||
</div>
|
||
{% endif %}
|
||
|
||
<form method="post" enctype="multipart/form-data" id="uploadForm">
|
||
<div class="mb-3">
|
||
<label for="device_id" class="form-label">设备</label>
|
||
<select class="form-select" id="device_id" name="device_id" required>
|
||
<option value="">请选择设备</option>
|
||
{% for device in devices %}
|
||
<option value="{{ device.device_id }}">{{ device.name }} ({{ device.device_id }})</option>
|
||
{% endfor %}
|
||
</select>
|
||
<div class="form-text">选择要上传图片的设备</div>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="version" class="form-label">内容版本</label>
|
||
<select class="form-select" id="version" name="version">
|
||
<option value="">创建新版本</option>
|
||
</select>
|
||
<div class="form-text">选择现有版本或创建新版本</div>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="title" class="form-label">内容标题</label>
|
||
<input type="text" class="form-control" id="title" name="title" placeholder="输入内容标题">
|
||
<div class="form-text">为图片内容添加描述性标题</div>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="image" class="form-label">图片文件</label>
|
||
<div class="upload-area" id="uploadArea">
|
||
<input type="file" class="form-control" id="image" name="image" accept="image/*" required>
|
||
<div class="upload-overlay">
|
||
<div class="upload-content">
|
||
<i class="fas fa-cloud-upload-alt fa-3x text-muted mb-3"></i>
|
||
<p class="mb-2">拖拽图片到此处或点击选择</p>
|
||
<p class="text-muted small">支持JPG、PNG、BMP等常见图片格式</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 图片预览 -->
|
||
<div class="mb-3" id="imagePreview" style="display: none;">
|
||
<label class="form-label">图片预览</label>
|
||
<div class="preview-container">
|
||
<img id="previewImg" src="#" alt="图片预览" class="img-fluid">
|
||
<div class="preview-actions">
|
||
<button type="button" class="btn btn-sm btn-outline-danger" id="removeImage">
|
||
<i class="fas fa-trash"></i> 移除
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<div class="form-check form-switch">
|
||
<input class="form-check-input" type="checkbox" id="autoPush" name="autoPush" checked>
|
||
<label class="form-check-label" for="autoPush">
|
||
上传后自动推送到设备
|
||
</label>
|
||
<div class="form-text">上传完成后自动将内容推送到设备</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<div class="form-check form-switch">
|
||
<input class="form-check-input" type="checkbox" id="enhanceContrast" name="enhanceContrast" checked>
|
||
<label class="form-check-label" for="enhanceContrast">
|
||
增强图片对比度
|
||
</label>
|
||
<div class="form-text">自动优化图片对比度以适应墨水屏显示</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
|
||
<a href="/admin/contents" class="btn btn-secondary me-md-2">
|
||
<i class="fas fa-times me-1"></i> 取消
|
||
</a>
|
||
<button type="submit" class="btn btn-primary" id="uploadBtn">
|
||
<i class="fas fa-upload me-1"></i> 上传图片
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-4">
|
||
<div class="card shadow-sm mb-4">
|
||
<div class="card-header bg-white py-3">
|
||
<h6 class="m-0 font-weight-bold text-info">图片处理说明</h6>
|
||
</div>
|
||
<div class="card-body">
|
||
<h5 class="mb-3"><i class="fas fa-info-circle me-2"></i>支持的图片格式</h5>
|
||
<div class="row g-2 mb-4">
|
||
<div class="col-6"><span class="badge bg-light text-dark">JPEG/JPG</span></div>
|
||
<div class="col-6"><span class="badge bg-light text-dark">PNG</span></div>
|
||
<div class="col-6"><span class="badge bg-light text-dark">BMP</span></div>
|
||
<div class="col-6"><span class="badge bg-light text-dark">WEBP</span></div>
|
||
</div>
|
||
|
||
<h5 class="mb-3"><i class="fas fa-cogs me-2"></i>图片处理流程</h5>
|
||
<div class="process-steps">
|
||
<div class="step-item">
|
||
<div class="step-number">1</div>
|
||
<div class="step-text">上传原始图片</div>
|
||
</div>
|
||
<div class="step-item">
|
||
<div class="step-number">2</div>
|
||
<div class="step-text">自动转换为黑白图像</div>
|
||
</div>
|
||
<div class="step-item">
|
||
<div class="step-number">3</div>
|
||
<div class="step-text">调整大小以适应墨水屏</div>
|
||
</div>
|
||
<div class="step-item">
|
||
<div class="step-number">4</div>
|
||
<div class="step-text">优化对比度</div>
|
||
</div>
|
||
<div class="step-item">
|
||
<div class="step-number">5</div>
|
||
<div class="step-text">保存处理后的图片</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h5 class="mb-3 mt-4"><i class="fas fa-desktop me-2"></i>墨水屏规格</h5>
|
||
<ul class="list-group list-group-flush">
|
||
<li class="list-group-item d-flex justify-content-between align-items-center px-0">
|
||
分辨率
|
||
<span class="badge bg-primary rounded-pill">400×300 像素</span>
|
||
</li>
|
||
<li class="list-group-item d-flex justify-content-between align-items-center px-0">
|
||
显示模式
|
||
<span class="badge bg-secondary rounded-pill">黑白</span>
|
||
</li>
|
||
<li class="list-group-item d-flex justify-content-between align-items-center px-0">
|
||
刷新时间
|
||
<span class="badge bg-info rounded-pill">约2-3秒</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card shadow-sm">
|
||
<div class="card-header bg-white py-3">
|
||
<h6 class="m-0 font-weight-bold text-warning">使用提示</h6>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="alert alert-light border-0">
|
||
<ul class="mb-0">
|
||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>建议上传高对比度的图片，以获得更好的显示效果</li>
|
||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>图片内容应简洁明了，避免过多细节</li>
|
||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>文字内容应使用较大字号，确保可读性</li>
|
||
<li><i class="fas fa-check-circle text-success me-2"></i>上传后会自动处理为适合墨水屏显示的格式</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const deviceSelect = document.getElementById('device_id');
|
||
const versionSelect = document.getElementById('version');
|
||
const imageInput = document.getElementById('image');
|
||
const imagePreview = document.getElementById('imagePreview');
|
||
const previewImg = document.getElementById('previewImg');
|
||
const uploadForm = document.getElementById('uploadForm');
|
||
const uploadBtn = document.getElementById('uploadBtn');
|
||
const uploadArea = document.getElementById('uploadArea');
|
||
const removeImageBtn = document.getElementById('removeImage');
|
||
|
||
// 拖拽上传功能
|
||
uploadArea.addEventListener('dragover', function(e) {
|
||
e.preventDefault();
|
||
this.classList.add('drag-over');
|
||
});
|
||
|
||
uploadArea.addEventListener('dragleave', function(e) {
|
||
e.preventDefault();
|
||
this.classList.remove('drag-over');
|
||
});
|
||
|
||
uploadArea.addEventListener('drop', function(e) {
|
||
e.preventDefault();
|
||
this.classList.remove('drag-over');
|
||
|
||
if (e.dataTransfer.files.length) {
|
||
imageInput.files = e.dataTransfer.files;
|
||
showImagePreview(e.dataTransfer.files[0]);
|
||
}
|
||
});
|
||
|
||
// 点击上传区域触发文件选择
|
||
uploadArea.addEventListener('click', function() {
|
||
imageInput.click();
|
||
});
|
||
|
||
// 移除图片
|
||
removeImageBtn.addEventListener('click', function() {
|
||
imageInput.value = '';
|
||
imagePreview.style.display = 'none';
|
||
});
|
||
|
||
// 设备选择变化时，加载该设备的内容版本
|
||
deviceSelect.addEventListener('change', function() {
|
||
const deviceId = this.value;
|
||
if (!deviceId) {
|
||
versionSelect.innerHTML = '<option value="">创建新版本</option>';
|
||
return;
|
||
}
|
||
|
||
// 获取设备的内容版本
|
||
fetch(`/api/devices/${deviceId}/contents`)
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
versionSelect.innerHTML = '<option value="">创建新版本</option>';
|
||
data.contents.forEach(content => {
|
||
const option = document.createElement('option');
|
||
option.value = content.version;
|
||
option.textContent = `v${content.version} - ${content.title}`;
|
||
versionSelect.appendChild(option);
|
||
});
|
||
})
|
||
.catch(error => {
|
||
console.error('Error:', error);
|
||
versionSelect.innerHTML = '<option value="">创建新版本</option>';
|
||
});
|
||
});
|
||
|
||
// 图片选择变化时，显示预览
|
||
imageInput.addEventListener('change', function() {
|
||
if (this.files && this.files[0]) {
|
||
showImagePreview(this.files[0]);
|
||
} else {
|
||
imagePreview.style.display = 'none';
|
||
}
|
||
});
|
||
|
||
// 显示图片预览
|
||
function showImagePreview(file) {
|
||
if (file.type.startsWith('image/')) {
|
||
const reader = new FileReader();
|
||
reader.onload = function(e) {
|
||
previewImg.src = e.target.result;
|
||
imagePreview.style.display = 'block';
|
||
};
|
||
reader.readAsDataURL(file);
|
||
}
|
||
}
|
||
|
||
// 表单提交时，显示加载状态
|
||
uploadForm.addEventListener('submit', function(e) {
|
||
uploadBtn.disabled = true;
|
||
uploadBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>上传中...';
|
||
});
|
||
});
|
||
</script>
|
||
{% endblock %} |