94 lines
4.4 KiB
HTML
94 lines
4.4 KiB
HTML
{% 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">×</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 %} |