改进事件的显示效果

This commit is contained in:
2025-12-03 15:42:35 +08:00
parent 551128cd09
commit ddad32b481
5 changed files with 898 additions and 878 deletions

View File

@@ -1,292 +1,305 @@
{% extends 'base.html' %}
{% load custom_filters %}
{% block content %}
<div class="w-full max-w-4xl mx-auto p-6">
<div class="relative">
<!-- 时间线 -->
<div class="absolute top-1/2 left-0 right-0 h-0.5 bg-blue-500 transform -translate-y-1/2"></div>
<div class="relative z-10 flex justify-between items-center">
<!-- 第一个卡片 -->
<div class="w-[calc(50%-2rem)] bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
<div class="p-6 flex flex-col h-full">
<div class="flex-grow">
<div class="text-xs font-semibold text-blue-600 mb-2">最初活动</div>
<h3 class="text-xl font-bold mb-3 text-gray-800">{{ earliest_act.branch }}{{ earliest_act.name }}</h3>
<p class="text-sm text-gray-600 mb-4">
{{ earliest_act.description }}
</p>
</div>
<div class="flex justify-end">
<span class="inline-flex items-center rounded-full bg-blue-100 px-3 py-1 text-xs font-medium text-blue-800 whitespace-nowrap">
<svg xmlns="http://www.w3.org/2000/svg" class="mr-1.5 h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
{{ earliest_act.start_time|format_chinese_full_date }}
</span>
</div>
</div>
</div>
<!-- 中间的箭头 -->
<div class="bg-white rounded-full p-3 shadow-md z-20">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</div>
<!-- 第二个卡片 -->
<div class="w-[calc(50%-2rem)] bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
<div class="p-6 flex flex-col h-full">
<div class="flex-grow">
<div class="text-xs font-semibold text-blue-600 mb-2">最后活动</div>
<h3 class="text-xl font-bold mb-3 text-gray-800">{{ latest_act.branch }}{{ latest_act.name }}</h3>
<p class="text-sm text-gray-600 mb-4">
{{ latest_act.description }}
</p>
</div>
<div class="flex justify-end">
<span class="inline-flex items-center rounded-full bg-blue-100 px-3 py-1 text-xs font-medium text-blue-800 whitespace-nowrap">
<svg xmlns="http://www.w3.org/2000/svg" class="mr-1.5 h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
{{ latest_act.start_time|format_chinese_full_date }} </span>
</div>
</div>
</div>
</div>
<!-- 装饰元素 -->
<div class="absolute top-1/2 left-0 w-4 h-4 bg-blue-500 rounded-full transform -translate-y-1/2 border-4 border-white"></div>
<div class="absolute top-1/2 right-0 w-4 h-4 bg-blue-500 rounded-full transform -translate-y-1/2 border-4 border-white"></div>
</div>
</div>
<table class="items-center bg-transparent w-full border-collapse ">
<thead>
<tr class="bg-gray-100">
<th class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-base uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
分支机构名称
<br>
新建-搬迁-装修
</th>
<th class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-base uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-right">
活动的总数量
</th>
<th class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-base uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-right">
活动进行中的数量
</th>
</tr>
</thead>
<tbody>
{% for item in branches %}
<!-- 这里是其他行的处理逻辑 -->
<tr class="{% if forloop.counter|divisibleby:2 %}bg-gray-100{% else %}bg-white{% endif %}">
<td class="px-6 py-4 whitespace-no-wrap text-left border-b border-gray-200">
<a href="{% url 'branch-detail' item.branch.pk %}"
class="bg-transparent hover:bg-blue-900 hover:text-white p-2 rounded-md">
{{ item.branch.name }}
</a>
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-right">
{{ item.total_count }}
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-right">
{{ item.onging_count }}
</td>
</tr>
{% endfor %}
<!-- 这里是最后一行的处理逻辑 -->
<tr>
<td class="px-6 py-4 whitespace-no-wrap text-left border-b border-gray-200 font-bold text-center">
总计: {{ total_branch_count }}
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-right">
{{ total_activities }}
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-right">
{{ ongoing_activities_count }}
</td>
</tr>
</tbody>
</table>
<hr class="h-px my-8 bg-red-500 border-1 dark:bg-red-700">
<!--插入事件-->
<div class="p-5 border border-gray-100 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
<time class="text-lg font-semibold text-gray-900 dark:text-white">事件</time>
<ol class="mt-3 divide-y divider-gray-200 dark:divide-gray-700">
{% for event in ongoing_events %}
<li>
<div href="#" class="items-center block p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="text-gray-600 dark:text-gray-400">
<span class="inline-flex items-center text-xs font-normal text-gray-400 dark:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9"/>
</svg>
开始时间 {{ event.start_time| date:"Y年m月d日" }}
</span>
<div class="text-base font-normal">
<span class="font-medium text-gray-900 dark:text-white">
{% if not event.end_time %}
<span class="text-lg font-semibold text-red-900 dark:text-white">
{{ event.name }}-未完成
</span>
{% else %}
<span class="text-lg font-semibold text-blue-900 dark:text-white">
{{ event.name }}
</span>
{% endif %}
</span>
</div>
<div class="text-sm font-normal">
{{ event.description }}
</div>
<span class="inline-flex items-center text-xs font-normal text-gray-400 dark:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9"/>
</svg>
结束时间 {{ event.end_time| date:"Y年m月d日" }}
</span>
</div>
</div>
</li>
{% endfor %}
</ol>
</div>
<hr class="h-px my-8 bg-red-500 border-1 dark:bg-red-700">
<div class="p-5 border border-gray-100 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
<time class="text-lg font-semibold text-gray-900 dark:text-white">活动中的</time>
<ol class="mt-3 divide-y divider-gray-200 dark:divide-gray-700">
{% for huodong in ongoing_activities %}
<li>
<div href="#" class="items-center block p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="text-gray-600 dark:text-gray-400">
<span class="inline-flex items-center text-xs font-normal text-gray-400 dark:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9"/>
</svg>
开始时间 {{ huodong.start_time| date:"Y年m月d日" }}
</span>
<div class="text-base font-normal">
<span class="font-medium text-gray-900 dark:text-white">
{% if not huodong.end_time %}
<span class="text-lg font-semibold text-red-900 dark:text-white">
<a href="{% url 'branch-detail' huodong.branch.pk %}"
class="bg-transparent hover:bg-blue-900 hover:text-white p-2 rounded-md">
{{ huodong.branch }}
</a>
{{ huodong.name }}-未完成
</span>
{% endif %}
</span>
</div>
<div class="text-sm font-normal">
{{ huodong.description }}
</div>
</div>
</div>
</li>
{% endfor %}
</ol>
</div>
<hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
{% for scope, scope_data in grouped_activities.items %}
<div class="p-5 border border-gray-100 rounded-lg dark:bg-gray-800 dark:border-gray-700">
<time class="text-lg font-semibold text-gray-900 dark:text-white">今年的{{ scope }}(共{{ scope_data.branch_count }}个分支机构)</time>
<ol class="mt-3 divide-y divider-gray-200 dark:divide-gray-700">
{% for activity in scope_data.activities %}
<li style= "background-color: {{ activity.branch.background_color }};" >
<div class="items-center block p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="text-gray-600 dark:text-gray-400">
<span class="inline-flex items-center text-xs font-normal text-gray-400 dark:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor"
class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9"/>
</svg>
开始时间 {{ activity.start_time| date:"Y年m月d日" }}
</span>
<div class="text-base font-normal">
<span class="font-medium text-gray-900 dark:text-white">
{% if not activity.end_time %}
<span class="text-lg font-semibold text-red-900 dark:text-white">
<a href="{% url 'branch-detail' activity.branch.pk %}"
class="bg-transparent hover:bg-blue-900 hover:text-white p-2 rounded-md">
{{ activity.branch }}
</a>
{{ activity.name }}-未完成
</span>
{% else %}
<span class="text-lg font-semibold text-gray-900 dark:text-white">
<a href="{% url 'branch-detail' activity.branch.pk %}"
class="bg-transparent hover:bg-blue-900 hover:text-white p-2 rounded-md">
{{ activity.branch }}
</a>
{{ activity.name }}
</span>
{% endif %}
</span>
</div>
<div class="text-sm font-normal">
{{ activity.description }}
</div>
<span class="inline-flex items-center text-xs font-normal text-gray-400 dark:text-gray-400">
<svg class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="currentColor" viewBox="0 0 20 20">
<path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
</svg>
结束时间 {{ activity.end_time| date:"Y年m月d日" }}
</span>
</div>
</div>
</li>
{% endfor %}
</ol>
</div>
<hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
{% endfor %}
<time class="text-lg font-semibold text-gray-900 dark:text-white">
今年的
{% for scope, scope_data in grouped_activities.items %}
{{ scope }}{{ scope_data.branch_count }}个{% if forloop.last %}。{% else %}{% endif %}
{% endfor %}
</time>
<hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
<!-- 历年活动统计 -->
{% for year in historical_years %}
{% with year_data=historical_grouped_activities|get_item:year %}
{% if year_data %}
<time class="text-lg font-semibold text-gray-900 dark:text-white">
{{ year }}年的
{% for scope, scope_data in year_data.items %}
{{ scope }}{{ scope_data.branch_count }}个{% if forloop.last %}。{% else %}{% endif %}
{% endfor %}
</time>
<hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
{% endif %}
{% endwith %}
{% endfor %}
{% endblock %}
{% extends 'base.html' %}
{% load custom_filters %}
{% block content %}
<div class="w-full max-w-4xl mx-auto p-6">
<div class="relative">
<!-- 时间线 -->
<div class="absolute top-1/2 left-0 right-0 h-0.5 bg-blue-500 transform -translate-y-1/2"></div>
<div class="relative z-10 flex justify-between items-center">
<!-- 第一个卡片 -->
<div class="w-[calc(50%-2rem)] bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
<div class="p-6 flex flex-col h-full">
<div class="flex-grow">
<div class="text-xs font-semibold text-blue-600 mb-2">最初活动</div>
<h3 class="text-xl font-bold mb-3 text-gray-800">{{ earliest_act.branch }}{{ earliest_act.name }}</h3>
<p class="text-sm text-gray-600 mb-4">
{{ earliest_act.description }}
</p>
</div>
<div class="flex justify-end">
<span class="inline-flex items-center rounded-full bg-blue-100 px-3 py-1 text-xs font-medium text-blue-800 whitespace-nowrap">
<svg xmlns="http://www.w3.org/2000/svg" class="mr-1.5 h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
{{ earliest_act.start_time|format_chinese_full_date }}
</span>
</div>
</div>
</div>
<!-- 中间的箭头 -->
<div class="bg-white rounded-full p-3 shadow-md z-20">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</div>
<!-- 第二个卡片 -->
<div class="w-[calc(50%-2rem)] bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
<div class="p-6 flex flex-col h-full">
<div class="flex-grow">
<div class="text-xs font-semibold text-blue-600 mb-2">最后活动</div>
<h3 class="text-xl font-bold mb-3 text-gray-800">{{ latest_act.branch }}{{ latest_act.name }}</h3>
<p class="text-sm text-gray-600 mb-4">
{{ latest_act.description }}
</p>
</div>
<div class="flex justify-end">
<span class="inline-flex items-center rounded-full bg-blue-100 px-3 py-1 text-xs font-medium text-blue-800 whitespace-nowrap">
<svg xmlns="http://www.w3.org/2000/svg" class="mr-1.5 h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
{{ latest_act.start_time|format_chinese_full_date }} </span>
</div>
</div>
</div>
</div>
<!-- 装饰元素 -->
<div class="absolute top-1/2 left-0 w-4 h-4 bg-blue-500 rounded-full transform -translate-y-1/2 border-4 border-white"></div>
<div class="absolute top-1/2 right-0 w-4 h-4 bg-blue-500 rounded-full transform -translate-y-1/2 border-4 border-white"></div>
</div>
</div>
<table class="items-center bg-transparent w-full border-collapse ">
<thead>
<tr class="bg-gray-100">
<th class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-base uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
分支机构名称
<br>
新建-搬迁-装修
</th>
<th class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-base uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-right">
活动的总数量
</th>
<th class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-base uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-right">
活动进行中的数量
</th>
</tr>
</thead>
<tbody>
{% for item in branches %}
<!-- 这里是其他行的处理逻辑 -->
<tr class="{% if forloop.counter|divisibleby:2 %}bg-gray-100{% else %}bg-white{% endif %}">
<td class="px-6 py-4 whitespace-no-wrap text-left border-b border-gray-200">
<a href="{% url 'branch-detail' item.branch.pk %}"
class="bg-transparent hover:bg-blue-900 hover:text-white p-2 rounded-md">
{{ item.branch.name }}
</a>
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-right">
{{ item.total_count }}
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-right">
{{ item.onging_count }}
</td>
</tr>
{% endfor %}
<!-- 这里是最后一行的处理逻辑 -->
<tr>
<td class="px-6 py-4 whitespace-no-wrap text-left border-b border-gray-200 font-bold text-center">
总计: {{ total_branch_count }}
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-right">
{{ total_activities }}
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-right">
{{ ongoing_activities_count }}
</td>
</tr>
</tbody>
</table>
<hr class="h-px my-8 bg-red-500 border-1 dark:bg-red-700">
<!--插入事件-->
<div class="p-5 border border-gray-100 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
<time class="text-lg font-semibold text-gray-900 dark:text-white">事件</time>
<ol class="mt-3 divide-y divider-gray-200 dark:divide-gray-700">
{% for event in ongoing_events %}
<li>
<div href="#" class="items-center block p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="text-gray-600 dark:text-gray-400">
<span class="inline-flex items-center text-xs font-normal text-gray-400 dark:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9"/>
</svg>
开始时间 {{ event.start_time| date:"Y年m月d日" }}
</span>
<div class="text-base font-normal">
<span class="font-medium text-gray-900 dark:text-white">
{% if not event.end_time %}
<span class="text-lg font-semibold text-red-900 dark:text-white">
{{ event.name }}-未完成
</span>
{% else %}
<span class="text-lg font-semibold text-blue-900 dark:text-white">
{{ event.name }}
</span>
{% endif %}
</span>
</div>
<div class="text-sm font-normal">
{{ event.description }}
</div>
<div class="text-sm font-normal">
{% with branch_count=event.branches.count %}
{% if branch_count == all_branch_count %}
涉及分支机构:全辖分支机构
{% elif branch_count == 1 %}
涉及分支机构:{{ event.branches.first.name }}
{% elif branch_count > 1 %}
涉及分支机构:{{ event.branches.all.0.name }}、{{ event.branches.all.1.name }}等{{ branch_count }}个营业部
{% else %}
涉及分支机构:暂无
{% endif %}
{% endwith %}
</div>
<span class="inline-flex items-center text-xs font-normal text-gray-400 dark:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9"/>
</svg>
结束时间 {{ event.end_time| date:"Y年m月d日" }}
</span>
</div>
</div>
</li>
{% endfor %}
</ol>
</div>
<hr class="h-px my-8 bg-red-500 border-1 dark:bg-red-700">
<div class="p-5 border border-gray-100 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
<time class="text-lg font-semibold text-gray-900 dark:text-white">活动中的</time>
<ol class="mt-3 divide-y divider-gray-200 dark:divide-gray-700">
{% for huodong in ongoing_activities %}
<li>
<div href="#" class="items-center block p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="text-gray-600 dark:text-gray-400">
<span class="inline-flex items-center text-xs font-normal text-gray-400 dark:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9"/>
</svg>
开始时间 {{ huodong.start_time| date:"Y年m月d日" }}
</span>
<div class="text-base font-normal">
<span class="font-medium text-gray-900 dark:text-white">
{% if not huodong.end_time %}
<span class="text-lg font-semibold text-red-900 dark:text-white">
<a href="{% url 'branch-detail' huodong.branch.pk %}"
class="bg-transparent hover:bg-blue-900 hover:text-white p-2 rounded-md">
{{ huodong.branch }}
</a>
{{ huodong.name }}-未完成
</span>
{% endif %}
</span>
</div>
<div class="text-sm font-normal">
{{ huodong.description }}
</div>
</div>
</div>
</li>
{% endfor %}
</ol>
</div>
<hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
{% for scope, scope_data in grouped_activities.items %}
<div class="p-5 border border-gray-100 rounded-lg dark:bg-gray-800 dark:border-gray-700">
<time class="text-lg font-semibold text-gray-900 dark:text-white">今年的{{ scope }}(共{{ scope_data.branch_count }}个分支机构)</time>
<ol class="mt-3 divide-y divider-gray-200 dark:divide-gray-700">
{% for activity in scope_data.activities %}
<li style= "background-color: {{ activity.branch.background_color }};" >
<div class="items-center block p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="text-gray-600 dark:text-gray-400">
<span class="inline-flex items-center text-xs font-normal text-gray-400 dark:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor"
class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9"/>
</svg>
开始时间 {{ activity.start_time| date:"Y年m月d日" }}
</span>
<div class="text-base font-normal">
<span class="font-medium text-gray-900 dark:text-white">
{% if not activity.end_time %}
<span class="text-lg font-semibold text-red-900 dark:text-white">
<a href="{% url 'branch-detail' activity.branch.pk %}"
class="bg-transparent hover:bg-blue-900 hover:text-white p-2 rounded-md">
{{ activity.branch }}
</a>
{{ activity.name }}-未完成
</span>
{% else %}
<span class="text-lg font-semibold text-gray-900 dark:text-white">
<a href="{% url 'branch-detail' activity.branch.pk %}"
class="bg-transparent hover:bg-blue-900 hover:text-white p-2 rounded-md">
{{ activity.branch }}
</a>
{{ activity.name }}
</span>
{% endif %}
</span>
</div>
<div class="text-sm font-normal">
{{ activity.description }}
</div>
<span class="inline-flex items-center text-xs font-normal text-gray-400 dark:text-gray-400">
<svg class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="currentColor" viewBox="0 0 20 20">
<path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
</svg>
结束时间 {{ activity.end_time| date:"Y年m月d日" }}
</span>
</div>
</div>
</li>
{% endfor %}
</ol>
</div>
<hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
{% endfor %}
<time class="text-lg font-semibold text-gray-900 dark:text-white">
今年的
{% for scope, scope_data in grouped_activities.items %}
{{ scope }}{{ scope_data.branch_count }}个{% if forloop.last %}。{% else %}{% endif %}
{% endfor %}
</time>
<hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
<!-- 历年活动统计 -->
{% for year in historical_years %}
{% with year_data=historical_grouped_activities|get_item:year %}
{% if year_data %}
<time class="text-lg font-semibold text-gray-900 dark:text-white">
{{ year }}年的
{% for scope, scope_data in year_data.items %}
{{ scope }}{{ scope_data.branch_count }}个{% if forloop.last %}。{% else %}{% endif %}
{% endfor %}
</time>
<hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
{% endif %}
{% endwith %}
{% endfor %}
{% endblock %}

View File

@@ -1,145 +1,149 @@
{% extends 'base.html' %}
{% block content %}
<!-- Component starts here -->
<h2 class="flex flex-row flex-nowrap items-center my-8">
<span class="flex-grow block border-t border-black" aria-hidden="true" role="presentation"></span>
<span class="flex-none block mx-4 px-4 py-2.5 text-base leading-none font-medium uppercase bg-black text-white">
{{ branch.name }}
</span>
<span class="flex-grow block border-t border-black" aria-hidden="true" role="presentation"></span>
</h2>
<!-- Component ends here -->
<div class="bg-white rounded-lg shadow-md p-4 mb-6">
<h2 class="text-2xl font-bold mb-4">基本信息</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<p class="text-gray-700"><strong>信息系统分类:</strong> {{ branch.category|default:"暂无" }}</p>
<p class="text-gray-700"><strong>联系人:</strong> {{ branch.contact_person|default:"暂无" }}</p>
<p class="text-gray-700"><strong>联系电话:</strong> {{ branch.contact_phone|default:"暂无" }}</p>
</div>
<div>
<p class="text-gray-700"><strong>地址:</strong> {{ branch.address|default:"暂无" }}</p>
<p class="text-gray-700"><strong>成立时间:</strong> {{ branch.established_date|date:"Y-m-d"|default:"暂无" }}</p>
</div>
</div>
</div>
<!-- 事件信息 -->
<div class="bg-white rounded-lg shadow-md p-4 mb-6">
<h2 class="text-2xl font-bold mb-4">关联事件</h2>
{% if events %}
<div class="space-y-3">
{% for event in events %}
<div class="border-l-4 border-blue-500 pl-4 py-2 bg-blue-50 rounded">
<h3 class="font-semibold text-lg">{{ event.name }}</h3>
<p class="text-sm text-gray-600">
{{ event.start_time|date:"Y-m-d H:i" }} - {{ event.end_time|date:"Y-m-d H:i"|default:"进行中" }}
</p>
<p class="mt-1 text-gray-700">{{ event.description|truncatechars:100 }}</p>
</div>
{% endfor %}
</div>
{% else %}
<p class="text-gray-500 italic">暂无事件记录</p>
{% endif %}
</div>
<!-- 设备间图片 -->
<div class="bg-white rounded-lg shadow-md p-4 mb-6">
<h2 class="text-2xl font-bold mb-4">设备间图片</h2>
{% if equipment_images %}
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
{% for image in equipment_images %}
<div class="overflow-hidden rounded-lg shadow">
<img src="{{ image.image.url }}" alt="设备间图片" class="w-full h-48 object-cover">
<div class="p-2 bg-gray-50">
<p class="text-sm text-gray-700">{{ image.description|default:"无描述" }}</p>
<p class="text-xs text-gray-500 mt-1">{{ image.upload_date|date:"Y-m-d" }}</p>
</div>
</div>
{% endfor %}
</div>
{% else %}
<p class="text-gray-500 italic">暂无设备间图片</p>
{% endif %}
</div>
<!-- 公共电子屏 -->
<div class="bg-white rounded-lg shadow-md p-4 mb-6">
<h2 class="text-2xl font-bold mb-4">公共电子屏</h2>
{% if public_screens %}
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">描述</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">最后演练</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">更新时间</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
{% for screen in public_screens %}
<tr>
<td class="px-6 py-4 whitespace-nowrap">{{ screen.get_screen_type_display }}</td>
<td class="px-6 py-4">{{ screen.description|default:"无" }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ screen.last_drill.date|date:"Y-m-d"|default:"未演练" }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ screen.updated_at|date:"Y-m-d H:i" }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<p class="text-gray-500 italic">暂无公共电子屏信息</p>
{% endif %}
</div>
{% for scope, activities in grouped_activities.items %}
<div class="p-5 border border-gray-100 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
<time class="text-lg font-semibold text-gray-900 dark:text-white">{{ scope }}</time>
<ol class="mt-3 divide-y divider-gray-200 dark:divide-gray-700">
{% for huodong in activities %}
<li style="background-color: {{ huodong.branch.background_color }};">
<div class="items-center block p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="text-gray-600 dark:text-gray-400">
<span class="inline-flex items-center text-xs font-normal text-gray-400 dark:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9" />
</svg>
开始时间 {{ huodong.start_time| date:"Y年m月d日" }}
</span>
<div class="text-base font-normal">
<span class="font-medium text-gray-900 dark:text-white">
{% if not huodong.end_time %}
<span class="text-lg font-semibold text-red-900 dark:text-white">
{{ huodong.name }}-未完成
</span>
{% else %}
<span class="text-lg font-semibold text-gray-900 dark:text-white">
{{ huodong.name }}
</span>
{% endif %}
</span>
</div>
<div class="text-sm font-normal">
{{ huodong.description }}
</div>
<span class="inline-flex items-center text-xs font-normal text-gray-400 dark:text-gray-400">
<svg class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
</svg>
结束时间 {{ huodong.end_time| date:"Y年m月d日" }}
</span>
</div>
</div>
</li>
{% endfor %}
</ol>
</div>
<hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
{% endfor %}
{% endblock %}
{% extends 'base.html' %}
{% block content %}
<!-- Component starts here -->
<h2 class="flex flex-row flex-nowrap items-center my-8">
<span class="flex-grow block border-t border-black" aria-hidden="true" role="presentation"></span>
<span class="flex-none block mx-4 px-4 py-2.5 text-base leading-none font-medium uppercase bg-black text-white">
{{ branch.name }}
</span>
<span class="flex-grow block border-t border-black" aria-hidden="true" role="presentation"></span>
</h2>
<!-- Component ends here -->
<div class="bg-white rounded-lg shadow-md p-4 mb-6">
<h2 class="text-2xl font-bold mb-4">基本信息</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<p class="text-gray-700"><strong>信息系统分类:</strong> {{ branch.category|default:"暂无" }}</p>
<p class="text-gray-700"><strong>联系人:</strong> {{ branch.contact_person|default:"暂无" }}</p>
<p class="text-gray-700"><strong>联系电话:</strong> {{ branch.contact_phone|default:"暂无" }}</p>
</div>
<div>
<p class="text-gray-700"><strong>地址:</strong> {{ branch.address|default:"暂无" }}</p>
<p class="text-gray-700"><strong>成立时间:</strong> {{ branch.established_date|date:"Y-m-d"|default:"暂无" }}</p>
</div>
</div>
</div>
<!-- 事件信息 -->
<div class="bg-white rounded-lg shadow-md p-4 mb-6">
<h2 class="text-2xl font-bold mb-4">关联事件</h2>
{% if events %}
<div class="space-y-3">
{% for event in events %}
<div class="border-l-4 border-blue-500 pl-4 py-2 bg-blue-50 rounded">
<h3 class="font-semibold text-lg">{{ event.name }}</h3>
<p class="text-sm text-gray-600">
{% if event.end_time %}
开始日期{{ event.start_time|date:"Y年m月d日" }} 结束日期{{ event.end_time|date:"Y年m月d日" }}
{% else %}
开始日期{{ event.start_time|date:"Y年m月d日" }},现在进行中
{% endif %}
</p>
<p class="mt-1 text-gray-700">{{ event.description|truncatechars:100 }}</p>
</div>
{% endfor %}
</div>
{% else %}
<p class="text-gray-500 italic">暂无事件记录</p>
{% endif %}
</div>
<!-- 设备间图片 -->
<div class="bg-white rounded-lg shadow-md p-4 mb-6">
<h2 class="text-2xl font-bold mb-4">设备间图片</h2>
{% if equipment_images %}
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
{% for image in equipment_images %}
<div class="overflow-hidden rounded-lg shadow">
<img src="{{ image.image.url }}" alt="设备间图片" class="w-full h-48 object-cover">
<div class="p-2 bg-gray-50">
<p class="text-sm text-gray-700">{{ image.description|default:"无描述" }}</p>
<p class="text-xs text-gray-500 mt-1">{{ image.upload_date|date:"Y-m-d" }}</p>
</div>
</div>
{% endfor %}
</div>
{% else %}
<p class="text-gray-500 italic">暂无设备间图片</p>
{% endif %}
</div>
<!-- 公共电子屏 -->
<div class="bg-white rounded-lg shadow-md p-4 mb-6">
<h2 class="text-2xl font-bold mb-4">公共电子屏</h2>
{% if public_screens %}
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">描述</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">最后演练</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">更新时间</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
{% for screen in public_screens %}
<tr>
<td class="px-6 py-4 whitespace-nowrap">{{ screen.get_screen_type_display }}</td>
<td class="px-6 py-4">{{ screen.description|default:"无" }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ screen.last_drill.date|date:"Y-m-d"|default:"未演练" }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ screen.updated_at|date:"Y-m-d H:i" }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<p class="text-gray-500 italic">暂无公共电子屏信息</p>
{% endif %}
</div>
{% for scope, activities in grouped_activities.items %}
<div class="p-5 border border-gray-100 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
<time class="text-lg font-semibold text-gray-900 dark:text-white">{{ scope }}</time>
<ol class="mt-3 divide-y divider-gray-200 dark:divide-gray-700">
{% for huodong in activities %}
<li style="background-color: {{ huodong.branch.background_color }};">
<div class="items-center block p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="text-gray-600 dark:text-gray-400">
<span class="inline-flex items-center text-xs font-normal text-gray-400 dark:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9" />
</svg>
开始时间 {{ huodong.start_time| date:"Y年m月d日" }}
</span>
<div class="text-base font-normal">
<span class="font-medium text-gray-900 dark:text-white">
{% if not huodong.end_time %}
<span class="text-lg font-semibold text-red-900 dark:text-white">
{{ huodong.name }}-未完成
</span>
{% else %}
<span class="text-lg font-semibold text-gray-900 dark:text-white">
{{ huodong.name }}
</span>
{% endif %}
</span>
</div>
<div class="text-sm font-normal">
{{ huodong.description }}
</div>
<span class="inline-flex items-center text-xs font-normal text-gray-400 dark:text-gray-400">
<svg class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
</svg>
结束时间 {{ huodong.end_time| date:"Y年m月d日" }}
</span>
</div>
</div>
</li>
{% endfor %}
</ol>
</div>
<hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
{% endfor %}
{% endblock %}