feat(ui): 优化多个页面的UI设计和交互体验
重构公共电子屏、分支机构信息、设备间图片和活动统计页面的UI设计 - 添加渐变背景、阴影和悬停效果提升视觉体验 - 使用图标增强信息展示和交互提示 - 改进表格和卡片布局提高可读性 - 统一各页面的设计风格和交互模式 - 添加CSS组件类支持新的UI效果
This commit is contained in:
Binary file not shown.
@@ -1,3 +1,37 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer components {
|
||||
.card-gradient {
|
||||
@apply bg-gradient-to-br from-white via-blue-50/30 to-blue-100/50;
|
||||
}
|
||||
|
||||
.card-gradient-early {
|
||||
@apply bg-gradient-to-br from-emerald-50 via-white to-teal-100/50;
|
||||
}
|
||||
|
||||
.card-gradient-latest {
|
||||
@apply bg-gradient-to-br from-amber-50 via-white to-orange-100/50;
|
||||
}
|
||||
|
||||
.table-header-gradient {
|
||||
@apply bg-gradient-to-r from-blue-600 via-blue-700 to-indigo-700;
|
||||
}
|
||||
|
||||
.hover-lift {
|
||||
@apply transition-all duration-300 hover:-translate-y-1 hover:shadow-xl;
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
@apply absolute top-1/2 w-5 h-5 rounded-full transform -translate-y-1/2 border-4 border-white shadow-lg;
|
||||
}
|
||||
|
||||
.glass-effect {
|
||||
@apply backdrop-blur-sm bg-white/80;
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
@apply h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-blue-400 to-transparent;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -2,304 +2,479 @@
|
||||
{% 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="w-full max-w-5xl mx-auto p-6">
|
||||
<div class="relative py-8">
|
||||
<!-- 时间线背景 -->
|
||||
<div class="absolute top-1/2 left-0 right-0 h-1 bg-gradient-to-r from-emerald-400 via-blue-500 to-amber-400 rounded-full transform -translate-y-1/2 shadow-sm"></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="relative z-10 flex justify-between items-center gap-6">
|
||||
<!-- 第一个卡片 - 最初活动 -->
|
||||
<div class="w-[calc(50%-2.5rem)] group">
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden transition-all duration-500 hover:shadow-2xl hover:-translate-y-2 border border-emerald-100">
|
||||
<div class="h-1.5 bg-gradient-to-r from-emerald-400 to-teal-500"></div>
|
||||
<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">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-emerald-100 text-emerald-600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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>
|
||||
<span class="text-xs font-bold text-emerald-600 uppercase tracking-wider">最初活动</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">
|
||||
<h3 class="text-lg font-bold mb-2 text-gray-800 group-hover:text-emerald-700 transition-colors">{{ earliest_act.branch }}{{ earliest_act.name }}</h3>
|
||||
<p class="text-sm text-gray-600 mb-4 line-clamp-3">
|
||||
{{ earliest_act.description }}
|
||||
</p>
|
||||
<div class="mt-auto pt-3 border-t border-emerald-100">
|
||||
<span class="inline-flex items-center text-xs font-medium text-emerald-700 bg-emerald-50 px-3 py-1.5 rounded-full">
|
||||
<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" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
{{ latest_act.start_time|format_chinese_full_date }} </span>
|
||||
{{ earliest_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 class="flex-shrink-0 bg-white rounded-full p-4 shadow-lg z-20 border-2 border-blue-100 hover:scale-110 transition-transform duration-300">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 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%-2.5rem)] group">
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden transition-all duration-500 hover:shadow-2xl hover:-translate-y-2 border border-amber-100">
|
||||
<div class="h-1.5 bg-gradient-to-r from-amber-400 to-orange-500"></div>
|
||||
<div class="p-6 flex flex-col h-full">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-amber-100 text-amber-600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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>
|
||||
</span>
|
||||
<span class="text-xs font-bold text-amber-600 uppercase tracking-wider">最后活动</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold mb-2 text-gray-800 group-hover:text-amber-700 transition-colors">{{ latest_act.branch }}{{ latest_act.name }}</h3>
|
||||
<p class="text-sm text-gray-600 mb-4 line-clamp-3">
|
||||
{{ latest_act.description }}
|
||||
</p>
|
||||
<div class="mt-auto pt-3 border-t border-amber-100">
|
||||
<span class="inline-flex items-center text-xs font-medium text-amber-700 bg-amber-50 px-3 py-1.5 rounded-full">
|
||||
<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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
{{ latest_act.start_time|format_chinese_full_date }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 装饰元素 -->
|
||||
<div class="absolute top-1/2 left-0 w-6 h-6 bg-gradient-to-br from-emerald-400 to-emerald-600 rounded-full transform -translate-y-1/2 -translate-x-1/2 border-4 border-white shadow-lg"></div>
|
||||
<div class="absolute top-1/2 right-0 w-6 h-6 bg-gradient-to-br from-amber-400 to-orange-500 rounded-full transform -translate-y-1/2 translate-x-1/2 border-4 border-white shadow-lg"></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 }}-未完成
|
||||
<!-- 统计表格 -->
|
||||
<div class="w-full max-w-5xl mx-auto p-6">
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-100">
|
||||
<div class="px-6 py-4 bg-gradient-to-r from-blue-600 via-blue-700 to-indigo-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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
分支机构活动统计
|
||||
</h2>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-gradient-to-r from-slate-50 to-gray-100 border-b-2 border-blue-200">
|
||||
<th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-blue-500" 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>
|
||||
分支机构名称
|
||||
<span class="text-xs font-normal text-gray-500 normal-case">(新建-搬迁-装修)</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="px-6 py-4 text-right text-sm font-bold text-gray-700 uppercase tracking-wider">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||
</svg>
|
||||
活动总数
|
||||
</div>
|
||||
</th>
|
||||
<th class="px-6 py-4 text-right text-sm font-bold text-gray-700 uppercase tracking-wider">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-green-500" 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>
|
||||
进行中
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
{% for item in branches %}
|
||||
<tr class="{% if forloop.counter|divisibleby:2 %}bg-slate-50/50{% else %}bg-white{% endif %} hover:bg-blue-50 transition-colors duration-200 group">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<a href="{% url 'branch-detail' item.branch.pk %}"
|
||||
class="inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium text-gray-700 bg-gray-100 hover:bg-blue-600 hover:text-white transition-all duration-200 group-hover:shadow-md">
|
||||
{{ item.branch.name }}
|
||||
</a>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right">
|
||||
<span class="inline-flex items-center justify-center min-w-[2rem] px-2.5 py-1 rounded-full text-sm font-semibold {% if item.total_count > 0 %}bg-blue-100 text-blue-700{% else %}bg-gray-100 text-gray-500{% endif %}">
|
||||
{{ item.total_count }}
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="text-lg font-semibold text-blue-900 dark:text-white">
|
||||
{{ event.name }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right">
|
||||
<span class="inline-flex items-center justify-center min-w-[2rem] px-2.5 py-1 rounded-full text-sm font-semibold {% if item.onging_count > 0 %}bg-green-100 text-green-700{% else %}bg-gray-100 text-gray-500{% endif %}">
|
||||
{{ item.onging_count }}
|
||||
</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>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
<!-- 总计行 -->
|
||||
<tr class="bg-gradient-to-r from-blue-50 to-indigo-50 border-t-2 border-blue-200">
|
||||
<td class="px-6 py-4 whitespace-nowrap font-bold text-gray-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
|
||||
</svg>
|
||||
总计 ({{ total_branch_count }} 个分支机构)
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right">
|
||||
<span class="inline-flex items-center justify-center min-w-[2.5rem] px-3 py-1.5 rounded-full text-base font-bold bg-blue-600 text-white shadow-md">
|
||||
{{ total_activities }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right">
|
||||
<span class="inline-flex items-center justify-center min-w-[2.5rem] px-3 py-1.5 rounded-full text-base font-bold {% if ongoing_activities_count > 0 %}bg-green-500 text-white{% else %}bg-gray-400 text-white{% endif %} shadow-md">
|
||||
{{ ongoing_activities_count }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="h-px my-8 bg-red-500 border-1 dark:bg-red-700">
|
||||
<!-- 分隔线 -->
|
||||
<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-purple-400 to-transparent"></div>
|
||||
|
||||
|
||||
<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 }}-未完成
|
||||
<!-- 事件列表 -->
|
||||
<div class="w-full max-w-5xl mx-auto p-6">
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-purple-100">
|
||||
<div class="px-6 py-4 bg-gradient-to-r from-purple-600 via-purple-700 to-indigo-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="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
事件列表
|
||||
<span class="ml-auto text-sm font-normal bg-white/20 px-3 py-1 rounded-full">{{ ongoing_events|length }} 个事件</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="divide-y divide-gray-100">
|
||||
{% for event in ongoing_events %}
|
||||
<div class="p-5 hover:bg-purple-50/50 transition-colors duration-200 group">
|
||||
<div class="flex flex-col sm:flex-row sm:items-start gap-4">
|
||||
<!-- 时间轴标记 -->
|
||||
<div class="flex-shrink-0 flex flex-col items-center">
|
||||
<div class="w-10 h-10 rounded-full {% if not event.end_time %}bg-gradient-to-br from-red-400 to-red-600{% else %}bg-gradient-to-br from-purple-400 to-purple-600{% endif %} flex items-center justify-center text-white shadow-md">
|
||||
<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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 内容 -->
|
||||
<div class="flex-grow min-w-0">
|
||||
<div class="flex flex-wrap items-center gap-2 mb-2">
|
||||
<h3 class="text-lg font-bold {% if not event.end_time %}text-red-700{% else %}text-gray-800{% endif %} group-hover:text-purple-700 transition-colors">
|
||||
{{ event.name }}{% if not event.end_time %}<span class="ml-2 text-sm font-medium text-red-500 bg-red-100 px-2 py-0.5 rounded-full">进行中</span>{% endif %}
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 mb-3 line-clamp-2">{{ event.description }}</p>
|
||||
<div class="flex flex-wrap items-center gap-4 text-xs text-gray-500">
|
||||
<span class="inline-flex items-center gap-1 bg-blue-50 text-blue-700 px-2.5 py-1 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
{{ event.start_time|date:"Y年m月d日" }}
|
||||
</span>
|
||||
{% if event.end_time %}
|
||||
<span class="inline-flex items-center gap-1 bg-green-50 text-green-700 px-2.5 py-1 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
{{ event.end_time|date:"Y年m月d日" }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-sm font-normal">
|
||||
{{ huodong.description }}
|
||||
</div>
|
||||
<div class="mt-3 text-sm text-gray-600">
|
||||
{% with branch_count=event.branches.count %}
|
||||
{% if branch_count == all_branch_count %}
|
||||
<span class="inline-flex items-center gap-1 text-purple-700 bg-purple-50 px-2.5 py-1 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" 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>
|
||||
涉及：全辖分支机构
|
||||
</span>
|
||||
{% elif branch_count == 1 %}
|
||||
<span class="inline-flex items-center gap-1 text-blue-700 bg-blue-50 px-2.5 py-1 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" 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>
|
||||
涉及：{{ event.branches.first.name }}
|
||||
</span>
|
||||
{% elif branch_count > 1 %}
|
||||
<span class="inline-flex items-center gap-1 text-blue-700 bg-blue-50 px-2.5 py-1 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" 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>
|
||||
涉及：{{ event.branches.all.0.name }}、{{ event.branches.all.1.name }}等{{ branch_count }}个营业部
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="inline-flex items-center gap-1 text-gray-500 bg-gray-100 px-2.5 py-1 rounded-full">
|
||||
涉及：暂无
|
||||
</span>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
{% empty %}
|
||||
<div class="p-8 text-center text-gray-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-3 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
暂无事件
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
|
||||
<!-- 分隔线 -->
|
||||
<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-orange-400 to-transparent"></div>
|
||||
|
||||
<!-- 活动中的列表 -->
|
||||
<div class="w-full max-w-5xl mx-auto p-6">
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-orange-100">
|
||||
<div class="px-6 py-4 bg-gradient-to-r from-orange-500 via-orange-600 to-red-600">
|
||||
<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="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
进行中的活动
|
||||
<span class="ml-auto text-sm font-normal bg-white/20 px-3 py-1 rounded-full">{{ ongoing_activities|length }} 个活动</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="divide-y divide-gray-100">
|
||||
{% for huodong in ongoing_activities %}
|
||||
<div class="p-5 hover:bg-orange-50/50 transition-colors duration-200 group">
|
||||
<div class="flex flex-col sm:flex-row sm:items-start gap-4">
|
||||
<!-- 状态标记 -->
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-red-400 to-red-600 flex items-center justify-center text-white shadow-md">
|
||||
<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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 内容 -->
|
||||
<div class="flex-grow min-w-0">
|
||||
<div class="flex flex-wrap items-center gap-2 mb-2">
|
||||
<a href="{% url 'branch-detail' huodong.branch.pk %}"
|
||||
class="inline-flex items-center px-2.5 py-1 rounded-lg text-sm font-medium bg-orange-100 text-orange-700 hover:bg-orange-600 hover:text-white transition-colors">
|
||||
{{ huodong.branch }}
|
||||
</a>
|
||||
<h3 class="text-lg font-bold text-red-700 group-hover:text-red-800 transition-colors">
|
||||
{{ huodong.name }}
|
||||
</h3>
|
||||
<span class="text-xs font-medium text-white bg-red-500 px-2 py-0.5 rounded-full">未完成</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 mb-3 line-clamp-2">{{ huodong.description }}</p>
|
||||
<div class="flex flex-wrap items-center gap-4 text-xs text-gray-500">
|
||||
<span class="inline-flex items-center gap-1 bg-blue-50 text-blue-700 px-2.5 py-1 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
开始时间：{{ huodong.start_time|date:"Y年m月d日" }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% empty %}
|
||||
<div class="p-8 text-center text-gray-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-3 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
暂无进行中的活动
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-teal-400 to-transparent"></div>
|
||||
|
||||
<!-- 今年活动分类展示 -->
|
||||
{% 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">
|
||||
<div class="w-full max-w-5xl mx-auto p-6">
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-teal-100">
|
||||
<div class="px-6 py-4 bg-gradient-to-r from-teal-500 via-teal-600 to-cyan-600">
|
||||
<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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||
</svg>
|
||||
今年的{{ scope }}
|
||||
<span class="ml-auto text-sm font-normal bg-white/20 px-3 py-1 rounded-full">{{ scope_data.branch_count }} 个分支机构</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="divide-y divide-gray-100">
|
||||
{% for activity in scope_data.activities %}
|
||||
<div class="p-5 hover:bg-teal-50/50 transition-colors duration-200 group" style="background-color: {{ activity.branch.background_color }};">
|
||||
<div class="flex flex-col sm:flex-row sm:items-start gap-4">
|
||||
<!-- 状态标记 -->
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-10 h-10 rounded-full {% if not activity.end_time %}bg-gradient-to-br from-red-400 to-red-600{% else %}bg-gradient-to-br from-teal-400 to-teal-600{% endif %} flex items-center justify-center text-white shadow-md">
|
||||
{% 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>
|
||||
<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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
{% 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>
|
||||
<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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 内容 -->
|
||||
<div class="flex-grow min-w-0">
|
||||
<div class="flex flex-wrap items-center gap-2 mb-2">
|
||||
<a href="{% url 'branch-detail' activity.branch.pk %}"
|
||||
class="inline-flex items-center px-2.5 py-1 rounded-lg text-sm font-medium bg-teal-100 text-teal-700 hover:bg-teal-600 hover:text-white transition-colors">
|
||||
{{ activity.branch }}
|
||||
</a>
|
||||
<h3 class="text-lg font-bold {% if not activity.end_time %}text-red-700{% else %}text-gray-800{% endif %} group-hover:text-teal-700 transition-colors">
|
||||
{{ activity.name }}
|
||||
</h3>
|
||||
{% if not activity.end_time %}
|
||||
<span class="text-xs font-medium text-white bg-red-500 px-2 py-0.5 rounded-full">未完成</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 mb-3 line-clamp-2">{{ activity.description }}</p>
|
||||
<div class="flex flex-wrap items-center gap-4 text-xs text-gray-500">
|
||||
<span class="inline-flex items-center gap-1 bg-blue-50 text-blue-700 px-2.5 py-1 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
{{ activity.start_time|date:"Y年m月d日" }}
|
||||
</span>
|
||||
{% if activity.end_time %}
|
||||
<span class="inline-flex items-center gap-1 bg-green-50 text-green-700 px-2.5 py-1 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
{{ activity.end_time|date:"Y年m月d日" }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
</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>
|
||||
{% empty %}
|
||||
<div class="p-8 text-center text-gray-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-3 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||
</svg>
|
||||
暂无活动
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
|
||||
{% 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">
|
||||
<!-- 今年统计汇总 -->
|
||||
<div class="w-full max-w-5xl mx-auto p-6">
|
||||
<div class="bg-gradient-to-r from-teal-50 to-cyan-50 rounded-xl p-6 border border-teal-200">
|
||||
<h3 class="text-lg font-bold text-teal-800 mb-3 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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
今年统计
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
{% for scope, scope_data in grouped_activities.items %}
|
||||
<span class="inline-flex items-center px-4 py-2 rounded-full bg-white shadow-sm border border-teal-100">
|
||||
<span class="w-2 h-2 rounded-full bg-teal-500 mr-2"></span>
|
||||
<span class="font-medium text-gray-700">{{ scope }}</span>
|
||||
<span class="ml-2 text-teal-600 font-bold">{{ scope_data.branch_count }}个</span>
|
||||
</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-indigo-400 to-transparent"></div>
|
||||
|
||||
<!-- 历年活动统计 -->
|
||||
{% 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 %}
|
||||
<div class="w-full max-w-5xl mx-auto p-6">
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-indigo-100">
|
||||
<div class="px-6 py-4 bg-gradient-to-r from-indigo-500 via-indigo-600 to-purple-600">
|
||||
<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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
历年活动统计
|
||||
</h2>
|
||||
</div>
|
||||
<div class="p-6 space-y-4">
|
||||
{% for year in historical_years %}
|
||||
{% with year_data=historical_grouped_activities|get_item:year %}
|
||||
{% if year_data %}
|
||||
<div class="bg-gradient-to-r from-indigo-50 to-purple-50 rounded-xl p-5 border border-indigo-100">
|
||||
<h3 class="text-lg font-bold text-indigo-800 mb-3 flex items-center gap-2">
|
||||
<span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-indigo-600 text-white text-sm font-bold">{{ year }}</span>
|
||||
<span>年统计</span>
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
{% for scope, scope_data in year_data.items %}
|
||||
<span class="inline-flex items-center px-4 py-2 rounded-full bg-white shadow-sm border border-indigo-100">
|
||||
<span class="w-2 h-2 rounded-full bg-indigo-500 mr-2"></span>
|
||||
<span class="font-medium text-gray-700">{{ scope }}</span>
|
||||
<span class="ml-2 text-indigo-600 font-bold">{{ scope_data.branch_count }}个</span>
|
||||
</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
|
||||
@@ -2,51 +2,73 @@
|
||||
|
||||
{% 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="w-full max-w-6xl 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-blue-500 to-transparent"></div>
|
||||
<div class="relative z-10 bg-gradient-to-r from-blue-600 to-indigo-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="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>
|
||||
{{ branch.name }}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 投入预算表 -->
|
||||
<div class="bg-white rounded-lg shadow-md p-4 mb-6">
|
||||
<h2 class="text-2xl font-bold mb-4">投入预算表</h2>
|
||||
<p class="text-gray-700 mb-4">分支机构项目的预算表，包括设备和基础设施明细</p>
|
||||
<div class="w-full max-w-6xl mx-auto p-6">
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-blue-100">
|
||||
<div class="px-6 py-4 bg-gradient-to-r from-blue-600 via-blue-700 to-indigo-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="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
|
||||
</svg>
|
||||
投入预算表
|
||||
</h2>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<p class="text-gray-600 mb-6">分支机构项目的预算表，包括设备和基础设施明细</p>
|
||||
|
||||
<!-- 预算模板导入功能 -->
|
||||
{% if budget_templates %} <!-- 只有当有模板时才显示导入功能 -->
|
||||
<div class="mb-6 p-4 bg-blue-50 rounded-lg">
|
||||
<h3 class="text-lg font-semibold mb-2">预算模板导入</h3>
|
||||
<p class="text-sm text-gray-600 mb-3">从模板一键导入预算，快速生成预算表</p>
|
||||
|
||||
<form method="POST" action="{% url 'import-budget-template' branch.id %}">
|
||||
{% csrf_token %}
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label for="template" class="block text-sm font-medium text-gray-700 mb-1">选择模板</label>
|
||||
<select id="template" name="template" class="w-full p-2 border border-gray-300 rounded-md">
|
||||
{% for template in budget_templates %}
|
||||
<option value="{{ template.id }}">{{ template.name }}{% if template.is_default %} (默认){% endif %}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="budget_name" class="block text-sm font-medium text-gray-700 mb-1">预算名称</label>
|
||||
<input type="text" id="budget_name" name="budget_name" placeholder="请输入预算名称" class="w-full p-2 border border-gray-300 rounded-md">
|
||||
</div>
|
||||
<div class="flex items-end">
|
||||
<button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">
|
||||
一键导入
|
||||
</button>
|
||||
</div>
|
||||
<!-- 预算模板导入功能 -->
|
||||
{% if budget_templates %}
|
||||
<div class="mb-6 p-5 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border border-blue-200">
|
||||
<h3 class="text-lg font-semibold mb-2 text-blue-800 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
|
||||
</svg>
|
||||
预算模板导入
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 mb-4">从模板一键导入预算，快速生成预算表</p>
|
||||
|
||||
<form method="POST" action="{% url 'import-budget-template' branch.id %}">
|
||||
{% csrf_token %}
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label for="template" class="block text-sm font-medium text-gray-700 mb-1">选择模板</label>
|
||||
<select id="template" name="template" class="w-full p-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all">
|
||||
{% for template in budget_templates %}
|
||||
<option value="{{ template.id }}">{{ template.name }}{% if template.is_default %} (默认){% endif %}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="budget_name" class="block text-sm font-medium text-gray-700 mb-1">预算名称</label>
|
||||
<input type="text" id="budget_name" name="budget_name" placeholder="请输入预算名称" class="w-full p-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all">
|
||||
</div>
|
||||
<div class="flex items-end">
|
||||
<button type="submit" class="w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white px-6 py-2.5 rounded-lg font-medium shadow-md hover:shadow-lg transition-all duration-200 flex items-center justify-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
|
||||
</svg>
|
||||
一键导入
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if budgets %}
|
||||
{% for budget in budgets %}
|
||||
@@ -54,215 +76,438 @@
|
||||
<h3 class="text-lg font-semibold mb-3">{{ budget.name }} - 总预算: ￥{{ budget.total_budget }}</h3>
|
||||
|
||||
<!-- 设备预算部分 -->
|
||||
<div class="mb-4">
|
||||
<h4 class="text-md font-semibold mb-2">设备预算明细</h4>
|
||||
<div class="mb-6">
|
||||
<h4 class="text-md font-bold mb-3 text-gray-800 flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
|
||||
</svg>
|
||||
设备预算明细
|
||||
</h4>
|
||||
{% if budget.equipment_budgets.all %}
|
||||
<div class="overflow-x-auto">
|
||||
<div class="overflow-x-auto rounded-xl border border-gray-200">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<thead class="bg-gradient-to-r from-slate-50 to-gray-100">
|
||||
<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>
|
||||
<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-bold text-gray-700 uppercase tracking-wider">项目</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">型号</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">单价</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">采购方式</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">数量</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">小计</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
<tbody class="bg-white divide-y divide-gray-100">
|
||||
{% for equipment in budget.equipment_budgets.all %}
|
||||
<tr>
|
||||
<td class="px-6 py-4 whitespace-nowrap">{{ equipment.project }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">{{ equipment.model }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">￥{{ equipment.unit_price }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">{{ equipment.get_procurement_method_display }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">{{ equipment.quantity }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">￥{{ equipment.subtotal }}</td>
|
||||
<tr class="hover:bg-blue-50/50 transition-colors">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">{{ equipment.project }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ equipment.model }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">￥{{ equipment.unit_price }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ equipment.get_procurement_method_display }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">{{ equipment.quantity }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-600">￥{{ equipment.subtotal }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-gray-500 italic">暂无设备预算明细</p>
|
||||
<div class="p-6 text-center bg-gray-50 rounded-xl border border-gray-200">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-3 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
|
||||
</svg>
|
||||
<p class="text-gray-500">暂无设备预算明细</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- 基础设施预算部分 -->
|
||||
<div>
|
||||
<h4 class="text-md font-semibold mb-2">基础设施预算明细</h4>
|
||||
<h4 class="text-md font-bold mb-3 text-gray-800 flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-teal-500" 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>
|
||||
基础设施预算明细
|
||||
</h4>
|
||||
{% if budget.infrastructure_budgets.all %}
|
||||
<div class="overflow-x-auto">
|
||||
<div class="overflow-x-auto rounded-xl border border-gray-200">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<thead class="bg-gradient-to-r from-slate-50 to-gray-100">
|
||||
<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>
|
||||
<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-bold text-gray-700 uppercase tracking-wider">名称</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">备注</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">单价</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">单位</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">数量</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">小计</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">说明</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
<tbody class="bg-white divide-y divide-gray-100">
|
||||
{% for infrastructure in budget.infrastructure_budgets.all %}
|
||||
<tr>
|
||||
<td class="px-6 py-4 whitespace-nowrap">{{ infrastructure.name }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">{{ infrastructure.remarks }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">￥{{ infrastructure.unit_price }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">{{ infrastructure.unit }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">{{ infrastructure.quantity }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">￥{{ infrastructure.subtotal }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">{{ infrastructure.description }}</td>
|
||||
<tr class="hover:bg-teal-50/50 transition-colors">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">{{ infrastructure.name }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ infrastructure.remarks }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">￥{{ infrastructure.unit_price }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ infrastructure.unit }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">{{ infrastructure.quantity }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-600">￥{{ infrastructure.subtotal }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ infrastructure.description }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-gray-500 italic">暂无基础设施预算明细</p>
|
||||
<div class="p-6 text-center bg-gray-50 rounded-xl border border-gray-200">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-3 text-gray-300" 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>
|
||||
<p class="text-gray-500">暂无基础设施预算明细</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<p class="text-gray-500 italic">暂无预算信息</p>
|
||||
<div class="p-8 text-center bg-gray-50 rounded-xl border border-gray-200">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto mb-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<p class="text-gray-500 text-lg">暂无预算信息</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<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 class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-cyan-400 to-transparent"></div>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<div class="w-full max-w-6xl mx-auto p-6">
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-cyan-100">
|
||||
<div class="px-6 py-4 bg-gradient-to-r from-cyan-500 via-cyan-600 to-teal-600">
|
||||
<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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
基本信息
|
||||
</h2>
|
||||
</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 class="p-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3 p-4 bg-gray-50 rounded-xl">
|
||||
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 mb-1">信息系统分类</p>
|
||||
<p class="text-base font-medium text-gray-800">{{ branch.category|default:"暂无" }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-sm font-normal">
|
||||
{{ huodong.description }}
|
||||
<div class="flex items-start gap-3 p-4 bg-gray-50 rounded-xl">
|
||||
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 mb-1">联系人</p>
|
||||
<p class="text-base font-medium text-gray-800">{{ branch.contact_person|default:"暂无" }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 p-4 bg-gray-50 rounded-xl">
|
||||
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 mb-1">联系电话</p>
|
||||
<p class="text-base font-medium text-gray-800">{{ branch.contact_phone|default:"暂无" }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3 p-4 bg-gray-50 rounded-xl">
|
||||
<div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 mb-1">地址</p>
|
||||
<p class="text-base font-medium text-gray-800">{{ branch.address|default:"暂无" }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 p-4 bg-gray-50 rounded-xl">
|
||||
<div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-pink-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 mb-1">成立时间</p>
|
||||
<p class="text-base font-medium text-gray-800">{{ branch.established_date|date:"Y年m月d日"|default:"暂无" }}</p>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-purple-400 to-transparent"></div>
|
||||
|
||||
<!-- 事件信息 -->
|
||||
<div class="w-full max-w-6xl mx-auto p-6">
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-purple-100">
|
||||
<div class="px-6 py-4 bg-gradient-to-r from-purple-600 via-purple-700 to-indigo-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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
关联事件
|
||||
</h2>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
{% if events %}
|
||||
<div class="space-y-4">
|
||||
{% for event in events %}
|
||||
<div class="p-5 bg-gradient-to-r from-purple-50 to-indigo-50 rounded-xl border-l-4 border-purple-500 hover:shadow-md transition-shadow">
|
||||
<h3 class="font-bold text-lg text-purple-800 mb-2">{{ event.name }}</h3>
|
||||
<div class="flex flex-wrap items-center gap-3 mb-3">
|
||||
<span class="inline-flex items-center gap-1 text-xs bg-white px-2.5 py-1 rounded-full text-purple-700 shadow-sm">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
{{ event.start_time|date:"Y年m月d日" }}
|
||||
</span>
|
||||
{% if event.end_time %}
|
||||
<span class="inline-flex items-center gap-1 text-xs bg-green-100 px-2.5 py-1 rounded-full text-green-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
{{ event.end_time|date:"Y年m月d日" }}
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="inline-flex items-center gap-1 text-xs bg-red-100 px-2.5 py-1 rounded-full text-red-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" 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>
|
||||
进行中
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<p class="text-gray-700">{{ event.description|truncatechars:100 }}</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="p-8 text-center bg-gray-50 rounded-xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto mb-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<p class="text-gray-500 text-lg">暂无事件记录</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-emerald-400 to-transparent"></div>
|
||||
|
||||
<!-- 设备间图片 -->
|
||||
<div class="w-full max-w-6xl mx-auto p-6">
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-emerald-100">
|
||||
<div class="px-6 py-4 bg-gradient-to-r from-emerald-500 via-emerald-600 to-teal-600">
|
||||
<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="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>
|
||||
设备间图片
|
||||
</h2>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
{% if equipment_images %}
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
|
||||
{% for image in equipment_images %}
|
||||
<div class="overflow-hidden rounded-xl shadow-lg hover:shadow-xl transition-shadow group">
|
||||
<div class="relative overflow-hidden">
|
||||
<img src="{{ image.image.url }}" alt="设备间图片" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
|
||||
</div>
|
||||
<div class="p-4 bg-gray-50">
|
||||
<p class="text-sm font-medium text-gray-800">{{ image.description|default:"无描述" }}</p>
|
||||
<p class="text-xs text-gray-500 mt-2 flex items-center gap-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
{{ image.upload_date|date:"Y年m月d日" }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="p-8 text-center bg-gray-50 rounded-xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto mb-4 text-gray-300" 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>
|
||||
</div>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-amber-400 to-transparent"></div>
|
||||
|
||||
<!-- 公共电子屏 -->
|
||||
<div class="w-full max-w-6xl mx-auto p-6">
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-amber-100">
|
||||
<div class="px-6 py-4 bg-gradient-to-r from-amber-500 via-amber-600 to-orange-600">
|
||||
<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="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
公共电子屏
|
||||
</h2>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
{% if public_screens %}
|
||||
<div class="overflow-x-auto rounded-xl border border-gray-200">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gradient-to-r from-slate-50 to-gray-100">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">类型</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">描述</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">最后演练</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">更新时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-100">
|
||||
{% for screen in public_screens %}
|
||||
<tr class="hover:bg-amber-50/50 transition-colors">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-800">
|
||||
{{ screen.get_screen_type_display }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-gray-700">{{ screen.description|default:"无" }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
||||
{% if screen.last_drill %}
|
||||
<span class="inline-flex items-center gap-1 text-green-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
{{ screen.last_drill.date|date:"Y-m-d" }}
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="text-gray-400">未演练</span>
|
||||
{% endif %}
|
||||
</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 %}
|
||||
<div class="p-8 text-center bg-gray-50 rounded-xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto mb-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<p class="text-gray-500 text-lg">暂无公共电子屏信息</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-teal-400 to-transparent"></div>
|
||||
|
||||
<!-- 活动列表 -->
|
||||
{% for scope, activities in grouped_activities.items %}
|
||||
<div class="w-full max-w-6xl mx-auto p-6">
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-teal-100">
|
||||
<div class="px-6 py-4 bg-gradient-to-r from-teal-500 via-teal-600 to-cyan-600">
|
||||
<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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||
</svg>
|
||||
{{ scope }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="divide-y divide-gray-100">
|
||||
{% for huodong in activities %}
|
||||
<div class="p-5 hover:bg-teal-50/50 transition-colors duration-200" style="background-color: {{ huodong.branch.background_color }};">
|
||||
<div class="flex flex-col sm:flex-row sm:items-start gap-4">
|
||||
<!-- 状态标记 -->
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-10 h-10 rounded-full {% if not huodong.end_time %}bg-gradient-to-br from-red-400 to-red-600{% else %}bg-gradient-to-br from-teal-400 to-teal-600{% endif %} flex items-center justify-center text-white shadow-md">
|
||||
{% if not huodong.end_time %}
|
||||
<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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
{% else %}
|
||||
<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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 内容 -->
|
||||
<div class="flex-grow min-w-0">
|
||||
<div class="flex flex-wrap items-center gap-2 mb-2">
|
||||
<h3 class="text-lg font-bold {% if not huodong.end_time %}text-red-700{% else %}text-gray-800{% endif %}">
|
||||
{{ huodong.name }}
|
||||
</h3>
|
||||
{% if not huodong.end_time %}
|
||||
<span class="text-xs font-medium text-white bg-red-500 px-2 py-0.5 rounded-full">未完成</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 mb-3">{{ huodong.description }}</p>
|
||||
<div class="flex flex-wrap items-center gap-4 text-xs text-gray-500">
|
||||
<span class="inline-flex items-center gap-1 bg-blue-50 text-blue-700 px-2.5 py-1 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
{{ huodong.start_time|date:"Y年m月d日" }}
|
||||
</span>
|
||||
{% if huodong.end_time %}
|
||||
<span class="inline-flex items-center gap-1 bg-green-50 text-green-700 px-2.5 py-1 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
{{ huodong.end_time|date:"Y年m月d日" }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% empty %}
|
||||
<div class="p-8 text-center text-gray-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-3 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||
</svg>
|
||||
暂无活动
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
|
||||
{% endfor %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,76 +1,140 @@
|
||||
{% extends 'base.html' %}
|
||||
|
||||
|
||||
{% block content %}
|
||||
|
||||
<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">
|
||||
所在省份
|
||||
</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-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-left">
|
||||
信息系统类别
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for province, branches in branches_by_province.items %}
|
||||
{% for item in branches %}
|
||||
<tr class="{% if forloop.parentloop.counter|divisibleby:2 %}bg-gray-100{% else %}bg-white{% endif %}">
|
||||
{% if forloop.first %}
|
||||
<td class="px-6 py-4 whitespace-no-wrap text-left border-b border-gray-200" rowspan="{{ branches|length }}">
|
||||
{{ province }}
|
||||
</td>
|
||||
{% endif %}
|
||||
<td class="px-6 py-4 whitespace-no-wrap text-left border-b border-gray-200">
|
||||
<a href="{% url 'branch-detail' item.pk %}"
|
||||
class="bg-transparent hover:bg-blue-900 hover:text-white p-2 rounded-md">
|
||||
{{ item.name }}
|
||||
</a>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-no-wrap text-left border-b border-gray-200">
|
||||
{{ item.category }}
|
||||
</td>
|
||||
<!-- 页面标题 -->
|
||||
<div class="w-full max-w-6xl 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-indigo-500 to-transparent"></div>
|
||||
<div class="relative z-10 bg-gradient-to-r from-indigo-600 to-purple-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="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>
|
||||
分支机构信息
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
<tr class="bg-gray-200 font-bold">
|
||||
<td class="px-6 py-4 whitespace-no-wrap text-left border-b border-gray-200">
|
||||
分支机构类别统计
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-no-wrap text-left border-b border-gray-200" colspan="2">
|
||||
A型: {{ type_a_count }}家 | B型: {{ type_b_count }}家 | C型: {{ type_c_count }}家
|
||||
</td>
|
||||
</tr>
|
||||
<tfoot>
|
||||
<tr class="bg-gray-50">
|
||||
<td colspan="3" class="px-6 py-4 text-right border-b border-gray-200">
|
||||
<div class="flex justify-end space-x-3">
|
||||
<a href="{% url 'export-branches-xls' %}" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-black font-medium rounded-lg shadow-md transition duration-150 ease-in-out transform hover:scale-105">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
<!-- 分支机构列表 -->
|
||||
<div class="w-full max-w-6xl mx-auto p-6">
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-indigo-100">
|
||||
<div class="px-6 py-4 bg-gradient-to-r from-indigo-600 via-indigo-700 to-purple-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="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>
|
||||
分支机构列表
|
||||
</h2>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-gradient-to-r from-slate-50 to-gray-100 border-b-2 border-indigo-200">
|
||||
<th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
所在省份
|
||||
</div>
|
||||
</th>
|
||||
<th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-indigo-500" 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>
|
||||
分支机构名称
|
||||
</div>
|
||||
</th>
|
||||
<th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
|
||||
</svg>
|
||||
信息系统类别
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
{% for province, branches in branches_by_province.items %}
|
||||
{% for item in branches %}
|
||||
<tr class="{% if forloop.parentloop.counter|divisibleby:2 %}bg-slate-50/50{% else %}bg-white{% endif %} hover:bg-indigo-50/50 transition-colors duration-200">
|
||||
{% if forloop.first %}
|
||||
<td class="px-6 py-4 whitespace-nowrap text-left font-medium text-gray-800" rowspan="{{ branches|length }}">
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full bg-indigo-100 text-indigo-700 text-sm">
|
||||
{{ province }}
|
||||
</span>
|
||||
</td>
|
||||
{% endif %}
|
||||
<td class="px-6 py-4 whitespace-nowrap text-left">
|
||||
<a href="{% url 'branch-detail' item.pk %}"
|
||||
class="inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium text-gray-700 bg-gray-100 hover:bg-indigo-600 hover:text-white transition-all duration-200">
|
||||
{{ item.name }}
|
||||
</a>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-left">
|
||||
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium {% if item.category == 'A型' %}bg-blue-100 text-blue-700{% elif item.category == 'B型' %}bg-green-100 text-green-700{% elif item.category == 'C型' %}bg-orange-100 text-orange-700{% else %}bg-gray-100 text-gray-700{% endif %}">
|
||||
{{ item.category }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
<!-- 统计行 -->
|
||||
<tr class="bg-gradient-to-r from-indigo-50 to-purple-50 border-t-2 border-indigo-200">
|
||||
<td class="px-6 py-4 whitespace-nowrap font-bold text-gray-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
分支机构类别统计
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap" colspan="2">
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<span class="inline-flex items-center px-3 py-1.5 rounded-full bg-blue-100 text-blue-700 text-sm font-medium">
|
||||
<span class="w-2 h-2 rounded-full bg-blue-500 mr-2"></span>
|
||||
A型: {{ type_a_count }}家
|
||||
</span>
|
||||
<span class="inline-flex items-center px-3 py-1.5 rounded-full bg-green-100 text-green-700 text-sm font-medium">
|
||||
<span class="w-2 h-2 rounded-full bg-green-500 mr-2"></span>
|
||||
B型: {{ type_b_count }}家
|
||||
</span>
|
||||
<span class="inline-flex items-center px-3 py-1.5 rounded-full bg-orange-100 text-orange-700 text-sm font-medium">
|
||||
<span class="w-2 h-2 rounded-full bg-orange-500 mr-2"></span>
|
||||
C型: {{ type_c_count }}家
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 导出按钮 -->
|
||||
<div class="px-6 py-4 bg-gray-50 border-t border-gray-100">
|
||||
<div class="flex justify-end gap-3">
|
||||
<a href="{% url 'export-branches-xls' %}" class="inline-flex items-center px-5 py-2.5 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-medium rounded-lg shadow-md hover:shadow-lg transition-all duration-200">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
导出为XLS
|
||||
</a>
|
||||
<a href="{% url 'export-branches-pdf' %}" class="inline-flex items-center px-4 py-2 bg-purple-600 hover:bg-purple-800 text-black font-medium rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
<a href="{% url 'export-branches-pdf' %}" class="inline-flex items-center px-5 py-2.5 bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 text-white font-medium rounded-lg shadow-md hover:shadow-lg transition-all duration-200">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
导出为PDF
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-purple-400 to-transparent"></div>
|
||||
|
||||
<hr class="h-px my-8 bg-red-500 border-1 dark:bg-red-700">
|
||||
{% endblock %}
|
||||
@@ -1,147 +1,240 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto p-4">
|
||||
<h2 class="text-xl font-bold mb-4">联系人信息</h2>
|
||||
|
||||
<!-- 新增筛选表单 -->
|
||||
<form method="GET" class="mb-4 p-4 bg-gray-100 rounded-lg" id="filterForm">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<!-- 分支机构筛选（带搜索的多选下拉框） -->
|
||||
<div class="flex flex-col w-full md:w-1/2">
|
||||
<label class="text-sm font-medium">分支机构（可多选）</label>
|
||||
<div class="relative" id="branchSelectContainer">
|
||||
<!-- 选择框主体 -->
|
||||
<div class="relative">
|
||||
<input
|
||||
type="text"
|
||||
id="branchSearchInput"
|
||||
class="w-full pl-4 pr-10 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-300 focus:border-blue-500 outline-none text-sm"
|
||||
placeholder="点击选择分支机构（可多选）..."
|
||||
readonly
|
||||
onclick="toggleBranchDropdown()"
|
||||
>
|
||||
<span class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 transition-transform duration-200" id="branchArrowIcon">
|
||||
<i class="fa fa-chevron-down"></i>
|
||||
</span>
|
||||
<!-- 选中的机构显示 -->
|
||||
<div id="selectedBranches" class="absolute z-5 mt-1 w-full bg-white rounded-lg shadow-md hidden max-h-32 overflow-y-auto">
|
||||
<div class="p-2">
|
||||
<div class="flex flex-wrap gap-1" id="branchTags"></div>
|
||||
<!-- 页面标题 -->
|
||||
<div class="w-full max-w-6xl 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-teal-500 to-transparent"></div>
|
||||
<div class="relative z-10 bg-gradient-to-r from-teal-600 to-cyan-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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
</svg>
|
||||
联系人信息
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full max-w-6xl mx-auto p-6">
|
||||
<!-- 筛选表单 -->
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-teal-100 mb-6">
|
||||
<div class="px-6 py-4 bg-gradient-to-r from-teal-600 via-teal-700 to-cyan-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="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||
</svg>
|
||||
筛选条件
|
||||
</h2>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<form method="GET" id="filterForm">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<!-- 分支机构筛选（带搜索的多选下拉框） -->
|
||||
<div class="flex flex-col w-full md:w-1/2">
|
||||
<label class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-teal-500" 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>
|
||||
分支机构（可多选）
|
||||
</label>
|
||||
<div class="relative" id="branchSelectContainer">
|
||||
<!-- 选择框主体 -->
|
||||
<div class="relative">
|
||||
<input
|
||||
type="text"
|
||||
id="branchSearchInput"
|
||||
class="w-full pl-4 pr-10 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-teal-300 focus:border-teal-500 outline-none text-sm bg-gray-50 hover:bg-white transition-colors"
|
||||
placeholder="点击选择分支机构（可多选）..."
|
||||
readonly
|
||||
onclick="toggleBranchDropdown()"
|
||||
>
|
||||
<span class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 transition-transform duration-200" id="branchArrowIcon">
|
||||
<i class="fa fa-chevron-down"></i>
|
||||
</span>
|
||||
<!-- 选中的机构显示 -->
|
||||
<div id="selectedBranches" class="absolute z-5 mt-1 w-full bg-white rounded-lg shadow-md hidden max-h-32 overflow-y-auto">
|
||||
<div class="p-2">
|
||||
<div class="flex flex-wrap gap-1" id="branchTags"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 下拉内容 -->
|
||||
<div id="branchDropdownContent" class="absolute z-10 mt-1 w-full bg-white rounded-lg shadow-lg overflow-hidden hidden border border-gray-100">
|
||||
<!-- 搜索输入框 -->
|
||||
<div class="p-2 border-b border-gray-100">
|
||||
<input
|
||||
type="text"
|
||||
id="branchFilterInput"
|
||||
class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-1 focus:ring-teal-300 focus:border-teal-500 outline-none text-sm"
|
||||
placeholder="搜索分支机构..."
|
||||
oninput="filterBranchOptions()"
|
||||
autofocus
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- 选项列表 -->
|
||||
<div id="branchOptionsList" class="max-h-60 overflow-y-auto">
|
||||
<ul>
|
||||
{% for branch in branches %}
|
||||
<li class="branch-option px-4 py-2.5 hover:bg-teal-50 cursor-pointer text-sm transition-colors flex items-center"
|
||||
data-id="{{ branch.id }}"
|
||||
data-name="{{ branch.name }}">
|
||||
<input type="checkbox" class="mr-2 branch-checkbox rounded text-teal-600 focus:ring-teal-500" value="{{ branch.id }}">
|
||||
{{ branch.name }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="p-2 border-t border-gray-100 flex gap-2">
|
||||
<button type="button" class="flex-1 px-3 py-1 text-xs bg-teal-500 text-white rounded hover:bg-teal-600 transition-colors" onclick="selectAllBranches()">全选</button>
|
||||
<button type="button" class="flex-1 px-3 py-1 text-xs bg-red-500 text-white rounded hover:bg-red-600 transition-colors" onclick="clearAllBranches()">清空</button>
|
||||
</div>
|
||||
|
||||
<!-- 独立的清空全部选择按钮 -->
|
||||
<div class="p-2 border-t border-gray-100">
|
||||
<button type="button" class="w-full px-3 py-2 text-sm bg-orange-500 text-white rounded-lg hover:bg-orange-600 font-medium transition-colors" onclick="clearAllBranches()" title="清空所有机构选择">
|
||||
<i class="fa fa-refresh mr-1"></i>清空全部选择
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 无结果提示 -->
|
||||
<div id="branchNoResult" class="px-4 py-4 text-center text-gray-500 text-sm hidden">
|
||||
没有找到匹配的分支机构
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 联系人类别筛选 -->
|
||||
<div class="flex flex-col w-full md:w-1/3">
|
||||
<label class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-teal-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
|
||||
</svg>
|
||||
联系人类别
|
||||
</label>
|
||||
<input type="text" name="category" class="mt-1 p-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-teal-300 focus:border-teal-500 outline-none text-sm bg-gray-50 hover:bg-white transition-colors" placeholder="输入类别名称筛选" value="{{ selected_category|default:'' }}">
|
||||
</div>
|
||||
|
||||
<!-- 联系人姓名筛选 -->
|
||||
<div class="flex flex-col w-full md:w-1/3">
|
||||
<label class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-teal-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
联系人姓名
|
||||
</label>
|
||||
<input type="text" name="contact_name" class="mt-1 p-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-teal-300 focus:border-teal-500 outline-none text-sm bg-gray-50 hover:bg-white transition-colors" placeholder="输入联系人姓名筛选" value="{{ selected_contact_name|default:'' }}">
|
||||
</div>
|
||||
|
||||
<!-- 下拉内容 -->
|
||||
<div id="branchDropdownContent" class="absolute z-10 mt-1 w-full bg-white rounded-lg shadow-md overflow-hidden hidden">
|
||||
<!-- 搜索输入框 -->
|
||||
<div class="p-2 border-b border-gray-100">
|
||||
<input
|
||||
type="text"
|
||||
id="branchFilterInput"
|
||||
class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-1 focus:ring-blue-300 focus:border-blue-500 outline-none text-sm"
|
||||
placeholder="搜索分支机构..."
|
||||
oninput="filterBranchOptions()"
|
||||
autofocus
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- 选项列表 -->
|
||||
<div id="branchOptionsList" class="max-h-60 overflow-y-auto">
|
||||
<ul>
|
||||
{% for branch in branches %}
|
||||
<li class="branch-option px-4 py-2.5 hover:bg-gray-100 cursor-pointer text-sm transition-colors flex items-center"
|
||||
data-id="{{ branch.id }}"
|
||||
data-name="{{ branch.name }}">
|
||||
<input type="checkbox" class="mr-2 branch-checkbox" value="{{ branch.id }}">
|
||||
{{ branch.name }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="p-2 border-t border-gray-100 flex gap-2">
|
||||
<button type="button" class="flex-1 px-3 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600" onclick="selectAllBranches()">全选</button>
|
||||
<button type="button" class="flex-1 px-3 py-1 text-xs bg-red-500 text-white rounded hover:bg-red-600" onclick="clearAllBranches()">清空</button>
|
||||
</div>
|
||||
|
||||
<!-- 独立的清空全部选择按钮 -->
|
||||
<div class="p-2 border-t border-gray-100">
|
||||
<button type="button" class="w-full px-3 py-2 text-sm bg-orange-500 text-white rounded-lg hover:bg-orange-600 font-medium" onclick="clearAllBranches()" title="清空所有机构选择">
|
||||
<i class="fa fa-refresh mr-1"></i>清空全部选择
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 无结果提示 -->
|
||||
<div id="branchNoResult" class="px-4 py-4 text-center text-gray-500 text-sm hidden">
|
||||
没有找到匹配的分支机构
|
||||
</div>
|
||||
<div class="flex items-end gap-2">
|
||||
<button type="submit" class="px-5 py-2.5 bg-gradient-to-r from-teal-600 to-teal-700 hover:from-teal-700 hover:to-teal-800 text-white rounded-lg shadow-md hover:shadow-lg transition-all duration-200 font-medium">
|
||||
<i class="fa fa-search mr-1"></i>筛选
|
||||
</button>
|
||||
<button type="button" class="px-5 py-2.5 bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white rounded-lg shadow-md hover:shadow-lg transition-all duration-200 font-medium" onclick="clearFilters()">
|
||||
<i class="fa fa-times mr-1"></i>清空筛选
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 联系人类别筛选（保持原结构） -->
|
||||
<div class="flex flex-col w-full md:w-1/3">
|
||||
<label class="text-sm font-medium">联系人类别</label>
|
||||
<input type="text" name="category" class="mt-1 p-2 border rounded" placeholder="输入类别名称筛选" value="{{ selected_category|default:'' }}">
|
||||
</div>
|
||||
|
||||
<!-- 联系人姓名筛选（保持原结构） -->
|
||||
<div class="flex flex-col w-full md:w-1/3">
|
||||
<label class="text-sm font-medium">联系人姓名</label>
|
||||
<input type="text" name="contact_name" class="mt-1 p-2 border rounded" placeholder="输入联系人姓名筛选" value="{{ selected_contact_name|default:'' }}">
|
||||
</div>
|
||||
|
||||
<div class="flex items-end gap-2">
|
||||
<button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">筛选</button>
|
||||
<button type="button" class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition-colors duration-200 font-medium" onclick="clearFilters()">
|
||||
<i class="fa fa-times mr-1"></i>清空筛选
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 隐藏的分支机构ID输入框（用于表单提交） -->
|
||||
<input type="hidden" name="branches" id="selectedBranchesInput">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- 隐藏的分支机构ID输入框（用于表单提交） -->
|
||||
<input type="hidden" name="branches" id="selectedBranchesInput">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<table class="min-w-full border-collapse border border-gray-300">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="p-2 border border-gray-300 bg-gray-100">分支机构</th>
|
||||
<th class="p-2 border border-gray-300 bg-gray-100">分类</th>
|
||||
<th class="p-2 border border-gray-300 bg-gray-100">姓名</th>
|
||||
<th class="p-2 border border-gray-300 bg-gray-100">电话</th>
|
||||
<th class="p-2 border border-gray-300 bg-gray-100">邮箱</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for contact in contacts %}
|
||||
<tr class="{% cycle 'bg-white' 'bg-gray-50' %}">
|
||||
<td class="p-2 border border-gray-300">{{ contact.branch.name }}</td>
|
||||
<td class="p-2 border border-gray-300">{{ contact.category|default:"" }}</td>
|
||||
<td class="p-2 border border-gray-300">{{ contact.name|default:"" }}</td>
|
||||
<td class="p-2 border border-gray-300">{{ contact.phone|default:"" }}</td>
|
||||
<td class="p-2 border border-gray-300">{{ contact.email|default:"" }}</td>
|
||||
</tr>
|
||||
{% empty %}
|
||||
<tr>
|
||||
<td colspan="5" class="p-4 text-center text-gray-500">没有找到匹配的联系人</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- 联系人列表 -->
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-teal-100">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-gradient-to-r from-teal-50 to-cyan-50 border-b-2 border-teal-200">
|
||||
<th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-teal-500" 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>
|
||||
分支机构
|
||||
</div>
|
||||
</th>
|
||||
<th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-teal-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
|
||||
</svg>
|
||||
分类
|
||||
</div>
|
||||
</th>
|
||||
<th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-teal-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
姓名
|
||||
</div>
|
||||
</th>
|
||||
<th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-teal-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||
</svg>
|
||||
电话
|
||||
</div>
|
||||
</th>
|
||||
<th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-teal-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
邮箱
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
{% for contact in contacts %}
|
||||
<tr class="{% cycle 'bg-white' 'bg-slate-50/50' %} hover:bg-teal-50/50 transition-colors duration-200">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 font-medium">{{ contact.branch.name }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ contact.category|default:"-" }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">{{ contact.name|default:"-" }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ contact.phone|default:"-" }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ contact.email|default:"-" }}</td>
|
||||
</tr>
|
||||
{% empty %}
|
||||
<tr>
|
||||
<td colspan="5" class="px-6 py-8 text-center text-gray-500">
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>没有找到匹配的联系人</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex justify-end">
|
||||
<a href="{% url 'export-contacts-pdf' %}{% if request.GET.urlencode %}?{{ request.GET.urlencode }}{% endif %}" class="inline-flex items-center px-4 py-2 bg-purple-600 hover:bg-purple-800 text-white font-medium rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
<!-- 导出按钮 -->
|
||||
<div class="mt-6 flex justify-end">
|
||||
<a href="{% url 'export-contacts-pdf' %}{% if request.GET.urlencode %}?{{ request.GET.urlencode }}{% endif %}" class="inline-flex items-center px-5 py-2.5 bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 text-white font-medium rounded-lg shadow-md hover:shadow-lg transition-all duration-200">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
导出为PDF
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-teal-400 to-transparent"></div>
|
||||
|
||||
<script>
|
||||
// 选中的分支机构
|
||||
let selectedBranches = new Set();
|
||||
|
||||
@@ -1,66 +1,186 @@
|
||||
{% 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">
|
||||
<!-- 页面标题 -->
|
||||
<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>
|
||||
</div>
|
||||
</form>
|
||||
</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>
|
||||
<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">
|
||||
<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-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">
|
||||
查看分支机构详情 →
|
||||
<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="bg-gray-100 p-2">
|
||||
|
||||
<!-- 设备间图片 -->
|
||||
<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 sm:grid-cols-3 md:grid-cols-4 gap-2">
|
||||
<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-[100px] md:h-[150px] lg:h-[200px] w-auto object-cover cursor-pointer"
|
||||
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-48 bg-gray-200">
|
||||
<span class="text-gray-400 text-sm">无图片</span>
|
||||
<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="bg-gray-100 p-2 mt-4">
|
||||
<h3 class="text-lg font-semibold mb-2">图纸</h3>
|
||||
<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 sm:grid-cols-3 md:grid-cols-4 gap-2">
|
||||
<div class="grid grid-cols-2 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"
|
||||
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-48 bg-gray-200">
|
||||
<span class="text-gray-400 text-sm">无图纸</span>
|
||||
<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">
|
||||
@@ -135,9 +255,7 @@ document.getElementById('imageModal').addEventListener('click', function(e) {
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 分页控件 -->
|
||||
<div class="mt-10 flex justify-center">
|
||||
@@ -165,10 +283,6 @@ document.getElementById('imageModal').addEventListener('click', function(e) {
|
||||
{% 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 %}
|
||||
@@ -2,78 +2,146 @@
|
||||
{% load static %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto p-4">
|
||||
<h1 class="text-2xl font-bold mb-6">公共电子屏列表</h1>
|
||||
<!-- 页面标题 -->
|
||||
<div class="w-full max-w-6xl 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-cyan-500 to-transparent"></div>
|
||||
<div class="relative z-10 bg-gradient-to-r from-cyan-600 to-blue-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="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
公共电子屏列表
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full max-w-6xl mx-auto p-6">
|
||||
<!-- 筛选区域 -->
|
||||
<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 class="bg-white rounded-2xl shadow-lg overflow-hidden border border-cyan-100 mb-6">
|
||||
<div class="px-6 py-4 bg-gradient-to-r from-cyan-600 via-cyan-700 to-blue-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="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||
</svg>
|
||||
筛选条件
|
||||
</h2>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<form method="get" class="flex flex-col md:flex-row gap-4 items-end">
|
||||
<div class="flex flex-col w-full md:w-48">
|
||||
<label class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-cyan-500" 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>
|
||||
分支机构
|
||||
</label>
|
||||
<select name="branch" class="p-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-cyan-300 focus:border-cyan-500 outline-none text-sm bg-gray-50 hover:bg-white transition-colors">
|
||||
<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 class="flex flex-col w-full md:w-48">
|
||||
<label class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-cyan-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
屏幕类型
|
||||
</label>
|
||||
<select name="screen_type" class="p-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-cyan-300 focus:border-cyan-500 outline-none text-sm bg-gray-50 hover:bg-white transition-colors">
|
||||
<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="flex items-center gap-2">
|
||||
<button type="submit" class="px-5 py-2.5 bg-gradient-to-r from-cyan-600 to-cyan-700 hover:from-cyan-700 hover:to-cyan-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-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||
</svg>
|
||||
筛选
|
||||
</button>
|
||||
{% if request.GET.branch or request.GET.screen_type %}
|
||||
<a href="{% url 'public-screens' %}" class="px-4 py-2.5 text-gray-600 hover:text-cyan-600 hover:bg-cyan-50 rounded-lg transition-colors font-medium">
|
||||
清除筛选
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</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="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 border border-cyan-100 group">
|
||||
<div class="relative">
|
||||
{% if screen.image %}
|
||||
<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 }}')">
|
||||
<img src="{{ screen.image.url }}" alt="{{ screen.get_screen_type_display }}" class="w-full h-[180px] object-cover cursor-pointer group-hover:scale-105 transition-transform duration-500" onclick="openModal('{{ screen.image.url }}')">
|
||||
{% else %}
|
||||
<div class="w-full h-[150px] bg-gray-200 flex items-center justify-center">
|
||||
<span class="text-gray-500">暂无图片</span>
|
||||
<div class="w-full h-[180px] bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center">
|
||||
<div class="text-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-400 mx-auto mb-2" 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-500 text-sm">暂无图片</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded text-sm">
|
||||
<div class="absolute top-3 right-3 bg-gradient-to-r from-cyan-600 to-blue-600 text-white px-3 py-1 rounded-full text-xs font-medium shadow-md">
|
||||
{{ screen.get_screen_type_display }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h3 class="font-semibold text-lg mb-2">{{ screen.branch.name }}</h3>
|
||||
<div class="p-5">
|
||||
<h3 class="font-bold text-lg mb-2 text-gray-800">{{ screen.branch.name }}</h3>
|
||||
{% if screen.description %}
|
||||
<p class="text-gray-700 mb-2">{{ screen.description|truncatechars:100 }}</p>
|
||||
<p class="text-gray-600 mb-3 text-sm leading-relaxed">{{ screen.description|truncatechars:100 }}</p>
|
||||
{% endif %}
|
||||
<div class="text-sm text-gray-500">
|
||||
<div class="text-sm space-y-1">
|
||||
{% if screen.last_drill %}
|
||||
<p>最后演练: {{ screen.last_drill.date|date:"Y-m-d H:i" }}</p>
|
||||
<p class="flex items-center gap-2 text-gray-600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
最后演练: {{ screen.last_drill.date|date:"Y-m-d H:i" }}
|
||||
</p>
|
||||
{% else %}
|
||||
<p class="text-yellow-500">暂无演练记录</p>
|
||||
<p class="flex items-center gap-2 text-amber-600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
暂无演练记录
|
||||
</p>
|
||||
{% endif %}
|
||||
<p>更新时间: {{ screen.updated_at|date:"Y-m-d H:i" }}</p>
|
||||
<p class="flex items-center gap-2 text-gray-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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>
|
||||
更新时间: {{ 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 class="col-span-full text-center py-12">
|
||||
<div class="bg-white rounded-2xl shadow-lg p-8 border border-cyan-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="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<p class="text-gray-500 text-lg">暂无公共电子屏记录</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-cyan-400 to-transparent"></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>
|
||||
|
||||
@@ -1,79 +1,189 @@
|
||||
{% extends "base.html" %}
|
||||
{% load custom_filters %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto p-4">
|
||||
<!-- 筛选表单 -->
|
||||
<form method="GET" class="mb-8 p-4 bg-gray-100 rounded-lg">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<!-- 年份选择 -->
|
||||
<div class="flex flex-col">
|
||||
<label class="text-sm font-medium">选择年份</label>
|
||||
<select name="year" class="mt-1 p-2 border rounded">
|
||||
<option value="all">全部年份</option>
|
||||
<option value="2023" {% if selected_year == '2023' %}selected{% endif %}>2023年</option>
|
||||
<option value="2024" {% if selected_year == '2024' %}selected{% endif %}>2024年</option>
|
||||
<option value="2025" {% if selected_year == '2025' %}selected{% endif %}>2025年</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 分支机构选择 -->
|
||||
<div class="flex flex-col">
|
||||
<label class="text-sm font-medium">分支机构</label>
|
||||
<select name="branch" class="mt-1 p-2 border rounded">
|
||||
<option value="all" {% if selected_branch == 'all' %}selected{% endif %}>全部分支机构</option>
|
||||
{% for branch in branches %}
|
||||
<option value="{{ branch.id }}" {% if selected_branch == branch.id|stringformat:"s" %}selected{% endif %}>
|
||||
{{ branch.name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 状态选择 -->
|
||||
<div class="flex flex-col">
|
||||
<label class="text-sm font-medium">活动状态</label>
|
||||
<select name="status" class="mt-1 p-2 border rounded">
|
||||
<option value="completed" {% if selected_status == 'completed' %}selected{% endif %}>已完成</option>
|
||||
<option value="ongoing" {% if selected_status == 'ongoing' %}selected{% endif %}>未完成</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="self-end px-4 py-2 bg-blue-200 text-white rounded hover:bg-blue-700">
|
||||
筛选
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- 统计结果展示 -->
|
||||
<div class="mt-4">
|
||||
<h2 class="text-xl font-bold mb-4">活动统计结果（共{{ activities.count }}条）</h2>
|
||||
<table class="min-w-full border-collapse border border-gray-300">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="p-2 border border-gray-300 bg-gray-100">活动名称</th>
|
||||
<th class="p-2 border border-gray-300 bg-gray-100">分支机构</th>
|
||||
<th class="p-2 border border-gray-300 bg-gray-100">活动分类</th>
|
||||
<th class="p-2 border border-gray-300 bg-gray-100">开始时间</th>
|
||||
<th class="p-2 border border-gray-300 bg-gray-100">结束时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for activity in activities %}
|
||||
<tr>
|
||||
<td class="p-2 border border-gray-300">{{ activity.name }}</td>
|
||||
<td class="p-2 border border-gray-300">{{ activity.branch.name }}</td>
|
||||
<td class="p-2 border border-gray-300">{{ activity.scope }}</td>
|
||||
<td class="p-2 border border-gray-300">{{ activity.start_time|format_chinese_full_date }}</td>
|
||||
<td class="p-2 border border-gray-300">{{ activity.end_time|format_chinese_full_date|default:"未结束" }}</td>
|
||||
</tr>
|
||||
{% empty %}
|
||||
<tr>
|
||||
<td class="p-2 border border-gray-300 text-center" colspan="4">无符合条件的活动记录</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{% extends "base.html" %}
|
||||
{% load custom_filters %}
|
||||
|
||||
{% block content %}
|
||||
<!-- 页面标题 -->
|
||||
<div class="w-full max-w-6xl 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-rose-500 to-transparent"></div>
|
||||
<div class="relative z-10 bg-gradient-to-r from-rose-600 to-pink-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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
活动统计
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full max-w-6xl mx-auto p-6">
|
||||
<!-- 筛选表单 -->
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-rose-100 mb-6">
|
||||
<div class="px-6 py-4 bg-gradient-to-r from-rose-600 via-rose-700 to-pink-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="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||
</svg>
|
||||
筛选条件
|
||||
</h2>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<form method="GET" class="flex flex-wrap gap-4 items-end">
|
||||
<!-- 年份选择 -->
|
||||
<div class="flex flex-col">
|
||||
<label class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-rose-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
选择年份
|
||||
</label>
|
||||
<select name="year" class="mt-1 p-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-rose-300 focus:border-rose-500 outline-none text-sm bg-gray-50 hover:bg-white transition-colors">
|
||||
<option value="all">全部年份</option>
|
||||
<option value="2023" {% if selected_year == '2023' %}selected{% endif %}>2023年</option>
|
||||
<option value="2024" {% if selected_year == '2024' %}selected{% endif %}>2024年</option>
|
||||
<option value="2025" {% if selected_year == '2025' %}selected{% endif %}>2025年</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 分支机构选择 -->
|
||||
<div class="flex flex-col">
|
||||
<label class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-rose-500" 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>
|
||||
分支机构
|
||||
</label>
|
||||
<select name="branch" class="mt-1 p-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-rose-300 focus:border-rose-500 outline-none text-sm bg-gray-50 hover:bg-white transition-colors">
|
||||
<option value="all" {% if selected_branch == 'all' %}selected{% endif %}>全部分支机构</option>
|
||||
{% for branch in branches %}
|
||||
<option value="{{ branch.id }}" {% if selected_branch == branch.id|stringformat:"s" %}selected{% endif %}>
|
||||
{{ branch.name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 状态选择 -->
|
||||
<div class="flex flex-col">
|
||||
<label class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-rose-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
活动状态
|
||||
</label>
|
||||
<select name="status" class="mt-1 p-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-rose-300 focus:border-rose-500 outline-none text-sm bg-gray-50 hover:bg-white transition-colors">
|
||||
<option value="completed" {% if selected_status == 'completed' %}selected{% endif %}>已完成</option>
|
||||
<option value="ongoing" {% if selected_status == 'ongoing' %}selected{% endif %}>未完成</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="px-5 py-2.5 bg-gradient-to-r from-rose-600 to-rose-700 hover:from-rose-700 hover:to-rose-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-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||
</svg>
|
||||
筛选
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 统计结果展示 -->
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-rose-100">
|
||||
<div class="px-6 py-4 bg-gradient-to-r from-rose-50 to-pink-50 border-b-2 border-rose-200">
|
||||
<h2 class="text-lg font-bold text-gray-800 flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-rose-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||
</svg>
|
||||
活动统计结果
|
||||
<span class="ml-2 px-3 py-1 bg-rose-100 text-rose-700 rounded-full text-sm font-medium">共 {{ activities.count }} 条</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-gradient-to-r from-rose-50 to-pink-50 border-b-2 border-rose-200">
|
||||
<th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-rose-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
活动名称
|
||||
</div>
|
||||
</th>
|
||||
<th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-rose-500" 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>
|
||||
分支机构
|
||||
</div>
|
||||
</th>
|
||||
<th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-rose-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
|
||||
</svg>
|
||||
活动分类
|
||||
</div>
|
||||
</th>
|
||||
<th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-rose-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
开始时间
|
||||
</div>
|
||||
</th>
|
||||
<th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-rose-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
结束时间
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
{% for activity in activities %}
|
||||
<tr class="{% cycle 'bg-white' 'bg-rose-50/30' %} hover:bg-rose-50/50 transition-colors duration-200">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 font-medium">{{ activity.name }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ activity.branch.name }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
|
||||
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-rose-100 text-rose-700">
|
||||
{{ activity.scope }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ activity.start_time|format_chinese_full_date }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
|
||||
{% if activity.end_time %}
|
||||
{{ activity.end_time|format_chinese_full_date }}
|
||||
{% else %}
|
||||
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-700">
|
||||
未结束
|
||||
</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% empty %}
|
||||
<tr>
|
||||
<td colspan="5" class="px-6 py-8 text-center text-gray-500">
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>无符合条件的活动记录</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-rose-400 to-transparent"></div>
|
||||
{% endblock %}
|
||||
@@ -1,94 +1,178 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto p-4">
|
||||
<h2 class="text-xl font-bold mb-4">视频设备终端列表</h2>
|
||||
|
||||
<!-- 筛选表单 -->
|
||||
<form method="GET" class="mb-4 p-4 bg-gray-100 rounded-lg">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<!-- 分支机构筛选 -->
|
||||
<div class="flex flex-col w-full md:w-1/3">
|
||||
<label class="text-sm font-medium">分支机构</label>
|
||||
<div x-data="{ open: false, search: '{{ selected_branch_name|default:'' }}', selectedId: '{{ selected_branch|default:'' }}', branches: [{% for branch in branches %}{id: {{ branch.id }}, name: '{{ branch.name }}'}{% if not forloop.last %},{% endif %}{% endfor %}] }" class="relative">
|
||||
<input type="text"
|
||||
x-model="search"
|
||||
@focus="open = true"
|
||||
@input.debounce.300ms="open = true"
|
||||
@click.away="open = false"
|
||||
placeholder="搜索分支机构..."
|
||||
class="mt-1 p-2 border rounded w-full"
|
||||
x-on:keydown.backspace="if (!search) selectedId = ''; search = ''"
|
||||
>
|
||||
<div x-show="open" class="absolute z-10 mt-1 w-full bg-white border rounded shadow-lg max-h-60 overflow-y-auto">
|
||||
<div @click="selectedId = ''; search = ''; open = false" class="p-2 hover:bg-gray-100 cursor-pointer">全部分支机构</div>
|
||||
<div x-for="branch in branches.filter(b => b.name.toLowerCase().includes(search.toLowerCase()))"
|
||||
:key="branch.id"
|
||||
@click="selectedId = branch.id; search = branch.name; open = false"
|
||||
class="p-2 hover:bg-gray-100 cursor-pointer"
|
||||
x-text="branch.name"
|
||||
></div>
|
||||
</div>
|
||||
<input type="hidden" name="branch" x-model="selectedId">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 设备类型筛选 -->
|
||||
<div class="flex flex-col w-full md:w-1/3">
|
||||
<label class="text-sm font-medium">设备类型</label>
|
||||
<div x-data="{ open: false, search: '{{ selected_type_name|default:'' }}', selectedCode: '{{ selected_type|default:'' }}', types: [{% for type_code, type_name in terminal_types %}{code: '{{ type_code }}', name: '{{ type_name }}'}{% if not forloop.last %},{% endif %}{% endfor %}] }" class="relative">
|
||||
<input type="text"
|
||||
x-model="search"
|
||||
@focus="open = true"
|
||||
@input.debounce.300ms="open = true"
|
||||
@click.away="open = false"
|
||||
placeholder="搜索设备类型..."
|
||||
class="mt-1 p-2 border rounded w-full"
|
||||
x-on:keydown.backspace="if (!search) selectedCode = ''; search = ''"
|
||||
>
|
||||
<div x-show="open" class="absolute z-10 mt-1 w-full bg-white border rounded shadow-lg max-h-60 overflow-y-auto">
|
||||
<div @click="selectedCode = ''; search = ''; open = false" class="p-2 hover:bg-gray-100 cursor-pointer">全部类型</div>
|
||||
<div x-for="type in types.filter(t => t.name.toLowerCase().includes(search.toLowerCase()))"
|
||||
:key="type.code"
|
||||
@click="selectedCode = type.code; search = type.name; open = false"
|
||||
class="p-2 hover:bg-gray-100 cursor-pointer"
|
||||
x-text="type.name"
|
||||
></div>
|
||||
</div>
|
||||
<input type="hidden" name="type" x-model="selectedCode">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-end">
|
||||
<button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">筛选</button>
|
||||
</div>
|
||||
<!-- 页面标题 -->
|
||||
<div class="w-full max-w-6xl 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-violet-500 to-transparent"></div>
|
||||
<div class="relative z-10 bg-gradient-to-r from-violet-600 to-purple-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="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
||||
</svg>
|
||||
视频设备终端列表
|
||||
</h1>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full max-w-6xl mx-auto p-6">
|
||||
<!-- 筛选表单 -->
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-violet-100 mb-6">
|
||||
<div class="px-6 py-4 bg-gradient-to-r from-violet-600 via-violet-700 to-purple-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="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||
</svg>
|
||||
筛选条件
|
||||
</h2>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<form method="GET" class="flex flex-wrap gap-4 items-end">
|
||||
<!-- 分支机构筛选 -->
|
||||
<div class="flex flex-col w-full md:w-1/3">
|
||||
<label class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-violet-500" 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>
|
||||
分支机构
|
||||
</label>
|
||||
<div x-data="{ open: false, search: '{{ selected_branch_name|default:'' }}', selectedId: '{{ selected_branch|default:'' }}', branches: [{% for branch in branches %}{id: {{ branch.id }}, name: '{{ branch.name }}'}{% if not forloop.last %},{% endif %}{% endfor %}] }" class="relative">
|
||||
<input type="text"
|
||||
x-model="search"
|
||||
@focus="open = true"
|
||||
@input.debounce.300ms="open = true"
|
||||
@click.away="open = false"
|
||||
placeholder="搜索分支机构..."
|
||||
class="w-full p-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-violet-300 focus:border-violet-500 outline-none text-sm bg-gray-50 hover:bg-white transition-colors"
|
||||
x-on:keydown.backspace="if (!search) selectedId = ''; search = ''"
|
||||
>
|
||||
<div x-show="open" class="absolute z-10 mt-1 w-full bg-white border border-gray-100 rounded-lg shadow-lg max-h-60 overflow-y-auto">
|
||||
<div @click="selectedId = ''; search = ''; open = false" class="p-2 hover:bg-violet-50 cursor-pointer">全部分支机构</div>
|
||||
<div x-for="branch in branches.filter(b => b.name.toLowerCase().includes(search.toLowerCase()))"
|
||||
:key="branch.id"
|
||||
@click="selectedId = branch.id; search = branch.name; open = false"
|
||||
class="p-2 hover:bg-violet-50 cursor-pointer"
|
||||
x-text="branch.name"
|
||||
></div>
|
||||
</div>
|
||||
<input type="hidden" name="branch" x-model="selectedId">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 设备类型筛选 -->
|
||||
<div class="flex flex-col w-full md:w-1/3">
|
||||
<label class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-violet-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
|
||||
</svg>
|
||||
设备类型
|
||||
</label>
|
||||
<div x-data="{ open: false, search: '{{ selected_type_name|default:'' }}', selectedCode: '{{ selected_type|default:'' }}', types: [{% for type_code, type_name in terminal_types %}{code: '{{ type_code }}', name: '{{ type_name }}'}{% if not forloop.last %},{% endif %}{% endfor %}] }" class="relative">
|
||||
<input type="text"
|
||||
x-model="search"
|
||||
@focus="open = true"
|
||||
@input.debounce.300ms="open = true"
|
||||
@click.away="open = false"
|
||||
placeholder="搜索设备类型..."
|
||||
class="w-full p-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-violet-300 focus:border-violet-500 outline-none text-sm bg-gray-50 hover:bg-white transition-colors"
|
||||
x-on:keydown.backspace="if (!search) selectedCode = ''; search = ''"
|
||||
>
|
||||
<div x-show="open" class="absolute z-10 mt-1 w-full bg-white border border-gray-100 rounded-lg shadow-lg max-h-60 overflow-y-auto">
|
||||
<div @click="selectedCode = ''; search = ''; open = false" class="p-2 hover:bg-violet-50 cursor-pointer">全部类型</div>
|
||||
<div x-for="type in types.filter(t => t.name.toLowerCase().includes(search.toLowerCase()))"
|
||||
:key="type.code"
|
||||
@click="selectedCode = type.code; search = type.name; open = false"
|
||||
class="p-2 hover:bg-violet-50 cursor-pointer"
|
||||
x-text="type.name"
|
||||
></div>
|
||||
</div>
|
||||
<input type="hidden" name="type" x-model="selectedCode">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-end">
|
||||
<button type="submit" class="px-5 py-2.5 bg-gradient-to-r from-violet-600 to-violet-700 hover:from-violet-700 hover:to-violet-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-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||
</svg>
|
||||
筛选
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 终端列表表格 -->
|
||||
<table class="min-w-full border-collapse border border-gray-300">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="p-2 border border-gray-300 bg-gray-100">分支机构</th>
|
||||
<th class="p-2 border border-gray-300 bg-gray-100">设备类型</th>
|
||||
<th class="p-2 border border-gray-300 bg-gray-100">设备描述</th>
|
||||
<th class="p-2 border border-gray-300 bg-gray-100">创建时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for terminal in terminals %}
|
||||
<tr class="{% cycle 'bg-white' 'bg-gray-50' %}">
|
||||
<td class="p-2 border border-gray-300">{{ terminal.branch.name }}</td>
|
||||
<td class="p-2 border border-gray-300">{{ terminal.get_terminal_type_display }}</td>
|
||||
<td class="p-2 border border-gray-300">{{ terminal.description|default:"" }}</td>
|
||||
<td class="p-2 border border-gray-300">{{ terminal.created_at|date:"Y-m-d H:i" }}</td>
|
||||
</tr>
|
||||
{% empty %}
|
||||
<tr>
|
||||
<td colspan="4" class="p-4 text-center text-gray-500">没有找到匹配的视频设备终端</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-violet-100">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-gradient-to-r from-violet-50 to-purple-50 border-b-2 border-violet-200">
|
||||
<th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-violet-500" 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>
|
||||
分支机构
|
||||
</div>
|
||||
</th>
|
||||
<th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-violet-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
|
||||
</svg>
|
||||
设备类型
|
||||
</div>
|
||||
</th>
|
||||
<th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-violet-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
设备描述
|
||||
</div>
|
||||
</th>
|
||||
<th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-violet-500" 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>
|
||||
创建时间
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
{% for terminal in terminals %}
|
||||
<tr class="{% cycle 'bg-white' 'bg-violet-50/30' %} hover:bg-violet-50/50 transition-colors duration-200">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 font-medium">{{ terminal.branch.name }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
|
||||
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-violet-100 text-violet-700">
|
||||
{{ terminal.get_terminal_type_display }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ terminal.description|default:"-" }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ terminal.created_at|date:"Y-m-d H:i" }}</td>
|
||||
</tr>
|
||||
{% empty %}
|
||||
<tr>
|
||||
<td colspan="4" class="px-6 py-8 text-center text-gray-500">
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>没有找到匹配的视频设备终端</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-violet-400 to-transparent"></div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user