sgj
3 天以前 00135bb6a8477a574aeb6ec6c7883f5c8e770e21
fzzy-igdss-web/src/main/resources/templates/security/snap/snapRecord/snapRecord.html
@@ -1,35 +1,42 @@
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <th:block th:include="include :: header('智能抓拍')" />
    <th:block th:include="include :: header('智能抓拍')"/>
    <link rel="stylesheet" type="text/css" th:href="@{/ajax/libs/layui-ruoyi/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/security/snap/snapRecord-style.css}">
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
        <div class="col-sm-12 search-collapse"
             style="display: flex; justify-content: space-between; align-items: center;">
            <form id="snapRecord-form">
                <div class="select-list">
                    <ul>
                        <li>
                            所属仓库:<input type="text" name="deptId"/>
                        <li class="select-time">
                            <label style="width: 100px">抓拍时间: </label>
                            <input type="text" class="time-input" id="start" placeholder="开始时间" name="start"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="end" placeholder="结束时间" name="end"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="searchRecord()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            标签:<input type="text" name="key"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="searchRecord()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="col-sm-12 " style="padding-top: 5px">
            <div class="btn-group-sm"  role="group" >
                <a class="btn btn-success" onclick="openConf()" shiro:hasPermission="system:user:add">
            <div class="btn-group-sm" role="group">
                <a class="btn btn-success" onclick="openConf()">
                    <i class="fa fa-plus"></i> 抓拍配置
                </a>
            </div>
@@ -52,32 +59,45 @@
                         class="gallery-img" onclick="showSnapRecordPreview(this.getAttribute('data-url'))">
                    <div class="gallery-info">
                        <div class="gallery-header">
                            <h3 class="gallery-title" th:text="${snapRecord.id}"></h3>
                            <!--                            <h3 class="gallery-title" th:text="${snapRecord.id}"></h3>-->
                            <!-- 标签列表 -->
                            <div class="gallery-tags">
                                <span th:each="tag : ${#strings.arraySplit(snapRecord.tags, ',')}" class="tag-person">
                                    <i class="layui-icon layui-icon-note"></i>
                                    <span th:text="${tag}"></span>
                                </span>
                            </div>
                        </div>
                        <div class="gallery-meta">
                            <div class="meta-item">
                                <i class="layui-icon layui-icon-home"></i>
                                <span th:text="${snapRecord.deptId}"></span>
                            </div>
                            <div class="meta-item">
                                <i class="layui-icon layui-icon-video"></i>
                                <span th:text="${snapRecord.cameraId}"></span>
                            </div>
                            <div class="meta-item">
                                <i class="layui-icon layui-icon-date"></i>
                                <span th:text="${#dates.format(snapRecord.snapTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
                            </div>
                        </div>
                            <div style="display: flex; align-items: center; gap: 15px;width: 100%">
                                <div class="meta-item" style="width: 50%">
                                    <i class="layui-icon layui-icon-video"></i>
                                    <!-- 使用标志变量记录是否已匹配 -->
                                    <th:block th:with="matchedCameras=${cameraList.?[id == #root.snapRecord.cameraId]}">
                                        <!-- 如果有匹配项,显示第一个匹配的摄像头名称 -->
                                        <th:block th:if="${!#lists.isEmpty(matchedCameras)}">
                                            <span th:text="${matchedCameras[0].name}"></span>
                                        </th:block>
                                        <!-- 如果没有匹配项,显示原始ID -->
                                        <th:block th:if="${#lists.isEmpty(matchedCameras)}">
                                            <span th:text="${snapRecord.cameraId}"></span>
                                        </th:block>
                                    </th:block>
                                </div>
                        <!-- 标签列表 -->
                        <div class="gallery-tags">
                            <span class="tag-person">
                                <i class="layui-icon layui-icon-face-smile"></i>
                                <span>测试标签</span>
                            </span>
                        </div>
                                <div class="meta-item" style="width: 50%">
                                    <i class="layui-icon layui-icon-date"></i>
                                    <span th:text="${snapRecord.snapTime != null ? #dates.format(snapRecord.snapTime, 'yyyy-MM-dd HH:mm') : '无时间'}"></span>                                </div>
                            </div>
                            <!--                            <div class="meta-item">-->
                            <!--                                <i class="layui-icon layui-icon-home"></i>-->
                            <!--                                <span th:text="${snapRecord.deptId}"></span>-->
                            <!--                            </div>-->
                        </div>
                    </div>
                </div>
            </div>
@@ -86,6 +106,7 @@
            <div class="pagination-container" th:if="${not #lists.isEmpty(snapRecordList)}">
                <div id="pagination"></div>
            </div>
        </div>
    </div>
    <!-- 图片预览层 -->
@@ -98,13 +119,15 @@
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: footer"/>
<script th:src="@{/ajax/libs/layui-ruoyi/layui.js}"></script>
<script th:src="@{/security/snap/snapRecord.js}"></script>
<script th:inline="javascript">
    var cameraList = [[${cameraList}]];
    var currentPage = [[${currentPage}]];
    var totalItems = [[${totalItems}]];
    var pageSize = [[${pageSize}]];
</script>
</body>