fzjg_local/fzjgact/huodong/templates/equipment_images.html

{% extends 'base.html' %}

{% block content %}
<!-- 页面标题 -->
<div class="w-full max-w-7xl mx-auto p-6">
    <div class="relative flex items-center justify-center py-8">
        <div class="absolute left-0 right-0 h-1 bg-gradient-to-r from-transparent via-emerald-500 to-transparent"></div>
        <div class="relative z-10 bg-gradient-to-r from-emerald-600 to-teal-700 text-white px-8 py-3 rounded-full shadow-lg">
            <h1 class="text-xl font-bold flex items-center gap-3">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
                分支机构设备间图片列表
            </h1>
        </div>
    </div>
</div>

<div class="w-full max-w-7xl mx-auto p-6">
    <!-- 搜索区域 -->
    <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-emerald-100 mb-6">
        <div class="px-6 py-4 bg-gradient-to-r from-emerald-600 via-emerald-700 to-teal-700">
            <h2 class="text-lg font-bold text-white flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
                搜索分支机构
            </h2>
        </div>
        <div class="p-6">
            <form method="get" action="" class="flex flex-col sm:flex-row gap-4 items-center justify-center">
                <div class="relative flex-1 max-w-md w-full">
                    <input type="text" name="search" placeholder="搜索分支机构名称..." value="{{ request.GET.search }}"
                           class="w-full px-4 py-3 pl-12 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 bg-gray-50 hover:bg-white transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 absolute left-4 top-1/2 transform -translate-y-1/2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                </div>
                <button type="submit" class="px-6 py-3 bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 hover:to-emerald-800 text-white rounded-lg shadow-md hover:shadow-lg transition-all duration-200 font-medium flex items-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                    搜索
                </button>
            </form>
        </div>
    </div>

    <!-- 统计信息 -->
    <div class="mb-6 text-center">
        <span class="inline-flex items-center px-4 py-2 rounded-full bg-emerald-100 text-emerald-700 text-sm font-medium">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
            </svg>
            共 {{ total_count }} 个分支机构
        </span>
    </div>

    {% if branches %}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        {% for branch in branches %}
        <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-emerald-100 hover:shadow-2xl transition-all duration-300 group">
            <div class="p-5 bg-gradient-to-r from-emerald-50 to-teal-50 border-b border-emerald-100">
                <h2 class="text-lg font-bold text-gray-900 mb-2">{{ branch.name }}</h2>
                <a href="{% url 'branch-detail' branch.id %}" class="inline-flex items-center text-emerald-600 hover:text-emerald-800 text-sm font-medium transition-colors">
                    查看分支机构详情
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </a>
            </div>

            <!-- 设备间图片 -->
            <div class="p-4 bg-gray-50">
                <div class="flex items-center gap-2 mb-3">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                    <span class="text-sm font-semibold text-gray-700">设备间图片</span>
                </div>
                {% if branch.equipment_images.exists %}
                    <div class="grid grid-cols-2 gap-2">
                        {% for image in branch.equipment_images.all %}
                            <img src="{{ image.image.url }}" alt="{{ branch.name }}设备间图片"
                                 class="h-[80px] w-full object-cover rounded-lg cursor-pointer hover:scale-105 transition-transform duration-300"
                                 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-24 bg-gray-100 rounded-lg">
                        <div class="text-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-300 mx-auto mb-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                            </svg>
                            <span class="text-gray-400 text-xs">无图片</span>
                        </div>
                    </div>
                {% endif %}
            </div>

            <!-- 图纸显示区域 -->
            <div class="p-4 bg-gray-50 border-t border-gray-100">
                <div class="flex items-center gap-2 mb-3">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0121 18.382V7.618a1 1 0 01-.553-.894L15 7m0 13V7" />
                    </svg>
                    <span class="text-sm font-semibold text-gray-700">图纸</span>
                </div>
                {% if branch.drawings.exists %}
                    <div class="grid grid-cols-2 gap-2">
                        {% for drawing in branch.drawings.all %}
                            <img src="{{ drawing.image.url }}" alt="{{ branch.name }}图纸"
                                 class="h-[80px] w-full object-cover rounded-lg cursor-pointer hover:scale-105 transition-transform duration-300"
                                 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-24 bg-gray-100 rounded-lg">
                        <div class="text-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-300 mx-auto mb-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0121 18.382V7.618a1 1 0 01-.553-.894L15 7m0 13V7" />
                            </svg>
                            <span class="text-gray-400 text-xs">无图纸</span>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- 分页控件 -->
    <div class="mt-10 flex justify-center">
        <nav class="inline-flex rounded-xl shadow-lg overflow-hidden border border-emerald-100">
            {% if branches.has_previous %}
            <a href="?page=1" class="relative inline-flex items-center px-4 py-3 bg-white text-sm font-medium text-gray-700 hover:bg-emerald-50 transition-colors border-r border-gray-100">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
                </svg>
                首页
            </a>
            <a href="?page={{ branches.previous_page_number }}" class="relative inline-flex items-center px-4 py-3 bg-white text-sm font-medium text-gray-700 hover:bg-emerald-50 transition-colors border-r border-gray-100">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                </svg>
                上一页
            </a>
            {% endif %}

            <span class="relative inline-flex items-center px-6 py-3 bg-gradient-to-r from-emerald-50 to-teal-50 text-sm font-bold text-emerald-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-3 bg-white text-sm font-medium text-gray-700 hover:bg-emerald-50 transition-colors border-l border-gray-100">
                下一页
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
            </a>
            <a href="?page={{ branches.paginator.num_pages }}" class="relative inline-flex items-center px-4 py-3 bg-white text-sm font-medium text-gray-700 hover:bg-emerald-50 transition-colors border-l border-gray-100">
                末页
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
                </svg>
            </a>
            {% endif %}
        </nav>
    </div>
    {% else %}
    <div class="text-center py-12 bg-white rounded-2xl shadow-lg border border-emerald-100">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-300 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
        </svg>
        <p class="text-gray-500 text-lg">暂无分支机构设备间图片数据</p>
    </div>
    {% endif %}
</div>

<!-- 分隔线 -->
<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-emerald-400 to-transparent"></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 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>

</div>
{% endblock %}