174 lines
8.3 KiB
HTML
174 lines
8.3 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block content %}
|
|
<div class="container mx-auto px-4 py-8">
|
|
<h1 class="text-3xl font-bold mb-8 text-center">分支机构设备间图片列表</h1>
|
|
<div class="flex justify-center mb-6">
|
|
<form method="get" action="" class="w-full max-w-md">
|
|
<div class="flex">
|
|
<input type="text" name="search" placeholder="搜索分支机构名称..." value="{{ request.GET.search }}"
|
|
class="flex-1 px-4 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-r-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
搜索
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<p class="text-gray-600 mb-6 text-center">共 {{ total_count }} 个分支机构</p>
|
|
|
|
{% if branches %}
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
|
{% for branch in branches %}
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
|
|
<div class="p-4">
|
|
<h2 class="text-xl font-semibold text-gray-900 mb-1">{{ branch.name }}</h2>
|
|
<a href="{% url 'branch-detail' branch.id %}" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
|
|
查看分支机构详情 →
|
|
</a>
|
|
</div>
|
|
<div class="bg-gray-100 p-2">
|
|
{% if branch.equipment_images.exists %}
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2">
|
|
{% for image in branch.equipment_images.all %}
|
|
<img src="{{ image.image.url }}" alt="{{ branch.name }}设备间图片"
|
|
class="h-[100px] md:h-[150px] lg:h-[200px] w-auto object-cover cursor-pointer"
|
|
data-branch-id="{{ branch.id }}" data-image-type="equipment" data-index="{{ forloop.counter0 }}"
|
|
onclick="openImageModal(this)">
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="flex items-center justify-center h-48 bg-gray-200">
|
|
<span class="text-gray-400 text-sm">无图片</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- 图纸显示区域 -->
|
|
<div class="bg-gray-100 p-2 mt-4">
|
|
<h3 class="text-lg font-semibold mb-2">图纸</h3>
|
|
{% if branch.drawings.exists %}
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2">
|
|
{% for drawing in branch.drawings.all %}
|
|
<img src="{{ drawing.image.url }}" alt="{{ branch.name }}图纸"
|
|
class="h-[100px] md:h-[150px] lg:h-[200px] w-auto object-cover cursor-pointer"
|
|
data-branch-id="{{ branch.id }}" data-image-type="drawings" data-index="{{ forloop.counter0 }}"
|
|
onclick="openImageModal(this)">
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="flex items-center justify-center h-48 bg-gray-200">
|
|
<span class="text-gray-400 text-sm">无图纸</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- 图片查看模态框 -->
|
|
<div id="imageModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
|
|
<div class="relative">
|
|
<button id="prevBtn" onclick="navigateImage(-1)" class="absolute left-2 top-1/2 transform -translate-y-1/2 text-white text-4xl font-bold focus:outline-none hover:text-gray-300 z-10 bg-black bg-opacity-50 px-2 py-1 rounded">👈</button>
|
|
<button onclick="closeImageModal()" class="absolute -top-10 right-0 text-white text-2xl font-bold">×</button>
|
|
<img id="modalImage" src="" alt="大图预览" class="max-w-full max-h-[90vh]">
|
|
<div id="imageCounter" class="absolute -bottom-8 left-0 right-0 text-center text-white text-lg"></div>
|
|
<button id="nextBtn" onclick="navigateImage(1)" class="absolute right-2 top-1/2 transform -translate-y-1/2 text-white text-4xl font-bold focus:outline-none hover:text-gray-300 z-10 bg-black bg-opacity-50 px-2 py-1 rounded">👉</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
window.branchImages = {};
|
|
{% for branch in branches %}
|
|
window.branchImages[{{ branch.id }}] = {
|
|
equipment: [{% for img in branch.equipment_images.all %}"{{ img.image.url|escapejs }}"{% if not forloop.last %},{% endif %}{% endfor %}],
|
|
drawings: [{% for img in branch.drawings.all %}"{{ img.image.url|escapejs }}"{% if not forloop.last %},{% endif %}{% endfor %}]
|
|
};
|
|
{% endfor %}
|
|
|
|
var currentImages = [];
|
|
var currentIndex = 0;
|
|
|
|
function openImageModal(element) {
|
|
const branchId = element.dataset.branchId;
|
|
const imageType = element.dataset.imageType;
|
|
currentIndex = parseInt(element.dataset.index);
|
|
currentImages = window.branchImages[branchId][imageType];
|
|
|
|
document.getElementById('modalImage').src = currentImages[currentIndex];
|
|
updateNavigationButtons();
|
|
updateImageCounter();
|
|
|
|
document.getElementById('imageModal').classList.remove('hidden');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function navigateImage(direction) {
|
|
currentIndex += direction;
|
|
if (currentIndex < 0) currentIndex = 0;
|
|
if (currentIndex >= currentImages.length) currentIndex = currentImages.length - 1;
|
|
|
|
document.getElementById('modalImage').src = currentImages[currentIndex];
|
|
updateNavigationButtons();
|
|
updateImageCounter();
|
|
}
|
|
|
|
function updateNavigationButtons() {
|
|
const prevBtn = document.getElementById('prevBtn');
|
|
const nextBtn = document.getElementById('nextBtn');
|
|
|
|
prevBtn.style.display = currentIndex === 0 ? 'none' : 'block';
|
|
nextBtn.style.display = currentIndex === currentImages.length - 1 ? 'none' : 'block';
|
|
}
|
|
|
|
function updateImageCounter() {
|
|
document.getElementById('imageCounter').textContent =
|
|
`${currentIndex + 1}/${currentImages.length}`;
|
|
}
|
|
|
|
function closeImageModal() {
|
|
document.getElementById('imageModal').classList.add('hidden');
|
|
document.body.style.overflow = 'auto'; // 恢复背景滚动
|
|
}
|
|
|
|
// 点击模态框背景也可关闭
|
|
document.getElementById('imageModal').addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
closeImageModal();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- 分页控件 -->
|
|
<div class="mt-10 flex justify-center">
|
|
<nav class="inline-flex rounded-md shadow">
|
|
{% if branches.has_previous %}
|
|
<a href="?page=1" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
|
首页
|
|
</a>
|
|
<a href="?page={{ branches.previous_page_number }}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
|
|
上一页
|
|
</a>
|
|
{% endif %}
|
|
|
|
<span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-blue-50 text-sm font-medium text-blue-700">
|
|
第 {{ branches.number }} 页，共 {{ branches.paginator.num_pages }} 页
|
|
</span>
|
|
|
|
{% if branches.has_next %}
|
|
<a href="?page={{ branches.next_page_number }}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
|
|
下一页
|
|
</a>
|
|
<a href="?page={{ branches.paginator.num_pages }}" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
|
末页
|
|
</a>
|
|
{% endif %}
|
|
</nav>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-12 bg-gray-50 rounded-lg">
|
|
<p class="text-gray-500 text-lg">暂无分支机构设备间图片数据</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %} |