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

fzjgact/huodong/templates/public_screens.html

@@ -0,0 +1,94 @@
+{% extends 'base.html' %}
+{% load static %}
+
+{% block content %}
+<div class="container mx-auto p-4">
+    <h1 class="text-2xl font-bold mb-6">公共电子屏列表</h1>
+
+    <!-- 筛选区域 -->
+    <div class="bg-gray-100 p-4 rounded-lg mb-6">
+        <form method="get" class="flex flex-col md:flex-row gap-4">
+            <div>
+                <label class="block mb-2">分支机构</label>
+                <select name="branch" class="border rounded p-2 w-full md:w-48">
+                    <option value="">所有分支机构</option>
+                    {% for branch in branches %}
+                        <option value="{{ branch.id }}" {% if request.GET.branch == branch.id|stringformat:"i" %}selected{% endif %}>{{ branch.name }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+            <div>
+                <label class="block mb-2">屏幕类型</label>
+                <select name="screen_type" class="border rounded p-2 w-full md:w-48">
+                    <option value="">所有类型</option>
+                    <option value="marquee" {% if request.GET.screen_type == 'marquee' %}selected{% endif %}>跑马灯</option>
+                    <option value="advertisement" {% if request.GET.screen_type == 'advertisement' %}selected{% endif %}>广告屏</option>
+                    <option value="information" {% if request.GET.screen_type == 'information' %}selected{% endif %}>信息发布屏</option>
+                </select>
+            </div>
+            <div class="self-end">
+                <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded">筛选</button>
+                {% if request.GET.branch or request.GET.screen_type %}
+                    <a href="{% url 'public-screens' %}" class="ml-2 text-gray-600">清除筛选</a>
+                {% endif %}
+            </div>
+        </form>
+    </div>
+
+    <!-- 电子屏列表 -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {% for screen in public_screens %}
+            <div class="border rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow">
+                <div class="relative">
+                    <img src="{{ screen.image.url }}" alt="{{ screen.get_screen_type_display }}" class="w-full h-[150px] object-cover cursor-pointer" onclick="openModal('{{ screen.image.url }}')">
+                    <div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded text-sm">
+                        {{ screen.get_screen_type_display }}
+                    </div>
+                </div>
+                <div class="p-4">
+                    <h3 class="font-semibold text-lg mb-2">{{ screen.branch.name }}</h3>
+                    {% if screen.description %}
+                        <p class="text-gray-700 mb-2">{{ screen.description|truncatechars:100 }}</p>
+                    {% endif %}
+                    <div class="text-sm text-gray-500">
+                        {% if screen.last_drill %}
+                            <p>最后演练: {{ screen.last_drill.date|date:"Y-m-d H:i" }}</p>
+                        {% else %}
+                            <p class="text-yellow-500">暂无演练记录</p>
+                        {% endif %}
+                        <p>更新时间: {{ screen.updated_at|date:"Y-m-d H:i" }}</p>
+                    </div>
+                </div>
+            </div>
+        {% empty %}
+            <div class="col-span-full text-center py-10">
+                <p class="text-gray-500">暂无公共电子屏记录</p>
+            </div>
+        {% endfor %}
+    </div>
+</div>
+
+<!-- 图片预览模态框 -->
+<div id="imageModal" class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center hidden z-50">
+    <button onclick="closeModal()" class="absolute top-4 right-4 text-white text-2xl">&times;</button>
+    <img id="modalImage" src="" alt="大图预览" class="max-w-[90%] max-h-[90vh]">
+</div>
+
+<script>
+function openModal(imageUrl) {
+    document.getElementById('modalImage').src = imageUrl;
+    document.getElementById('imageModal').classList.remove('hidden');
+    document.body.style.overflow = 'hidden';
+}
+
+function closeModal() {
+    document.getElementById('imageModal').classList.add('hidden');
+    document.body.style.overflow = 'auto';
+}
+
+// 点击模态框背景关闭
+document.getElementById('imageModal').addEventListener('click', function(e) {
+    if (e.target === this) closeModal();
+});
+</script>
+{% endblock %}