94 lines
5.1 KiB
HTML
94 lines
5.1 KiB
HTML
|
{% 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>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<!-- 终端列表表格 -->
|
||
|
|
<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>
|
||
|
|
{% endblock %}
|