xiaji/fzjg_local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

分支机构的项目管理，基于Django

Browse Source
This commit is contained in:
XIAJI-NEW\qax
2025-11-11 11:09:01 +08:00
commit f0cbf2c2ec
284 changed files with 9472 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
fzjgact/huodong/templates/equipment_images.html Normal file
View File

@@ -0,0 +1,174 @@
{% 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">&times;</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 %}