From 51faf3e9c3c613e7fb12db6c88356946f2429e0c Mon Sep 17 00:00:00 2001
From: czt <czt18638530771@163.com>
Date: 星期五, 12 十二月 2025 17:35:30 +0800
Subject: [PATCH] 调整安防视频页面及逻辑
---
fzzy-igdss-web/src/main/resources/templates/security/patrol/patrolRecord/patrolRecord.html | 156 ++++++++++++++-------------------------------------
1 files changed, 44 insertions(+), 112 deletions(-)
diff --git a/fzzy-igdss-web/src/main/resources/templates/security/patrol/patrolRecord/patrolRecord.html b/fzzy-igdss-web/src/main/resources/templates/security/patrol/patrolRecord/patrolRecord.html
index e178b82..eb0d1db 100644
--- a/fzzy-igdss-web/src/main/resources/templates/security/patrol/patrolRecord/patrolRecord.html
+++ b/fzzy-igdss-web/src/main/resources/templates/security/patrol/patrolRecord/patrolRecord.html
@@ -1,132 +1,64 @@
<!DOCTYPE html>
-<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<html lang="zh-CN" 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">
+ <meta charset="UTF-8">
+ <title>宸℃杞ㄨ抗灞曠ず</title>
+ <!-- Layui CSS锛堢敤浜庡熀纭�鏍峰紡锛� -->
<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/patrol/patrolRecord-style.css}">
+ <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=R3FfyIEbBAWNckTqRSopHQktdkgp924F"></script>
</head>
-<body class="gray-bg">
+<body>
<div class="container-div">
<div class="row">
- <div class="col-sm-12 search-collapse"
- style="display: flex; justify-content: space-between; align-items: center;">
- <form id="patrolRecord-form">
- <div class="select-list">
- <ul>
- <li>
- 宸℃洿鐐癸細<input type="text" name="name"/>
- </li>
- <li>
- <a class="btn btn-primary btn-rounded btn-sm" onclick="searchRecord()"><i
- class="fa fa-search"></i> 鎼滅储</a>
- <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
- class="fa fa-refresh"></i> 閲嶇疆</a>
- </li>
- </ul>
- </div>
- </form>
- <div class="btn-group-sm" role="group">
- <!-- 濡傛灉闇�瑕佹坊鍔犳寜閽彲浠ユ斁鍦ㄨ繖閲� -->
- <a class="btn btn-success" onclick="openTrajectoryMap()" >
- <i class="fa fa-search"></i> 杞ㄨ抗鍥炬煡鐪�
- </a>
+ <!-- 鐧惧害鍦板浘瀹瑰櫒 -->
+ <div id="map"></div>
+ <!-- 鍙充晶杞ㄨ抗鍗＄墖鎮诞灞� -->
+ <div class="track-card-panel">
+ <div class="panel-title">
+ 宸℃杞ㄨ抗鐐�
+ <span class="count" th:text="'鍏� ' + ${#lists.size(patrolRecordList)} + ' 涓偣浣�'"></span>
</div>
- </div>
-
-
- <div class="col-sm-12 " style="padding-top: 10px;">
- <!-- 宸℃璁板綍缃戞牸 -->
- <div class="gallery-grid" id="gallery-container">
- <!-- 璁板綍涓虹┖鏃舵樉绀� -->
- <div th:if="${#lists.isEmpty(patrolRecordList)}" class="empty-state">
- <i class="fa-solid fa-clipboard-list"></i>
- <h3>鏆傛棤宸℃璁板綍</h3>
- <p>褰撳墠娌℃湁鍙睍绀虹殑宸℃璁板綍鏁版嵁</p>
+ <!-- 杞ㄨ抗鍗＄墖鍒楄〃锛圱hymeleaf寰幆娓叉煋锛� -->
+ <div th:each="record,stat : ${patrolRecordList}" class="track-card" data-index="${stat.index}">
+ <div class="card-row">
+ <span class="label">搴忓彿锛�</span>
+ <span class="value" th:text="${stat.index + 1}"></span>
</div>
- <!-- 璁板綍鍗＄墖 -->
- <div th:each="patrolRecord : ${patrolRecordList}" class="gallery-item">
- <img th:src="${patrolRecord.imgName ?: '/logo-sm.png'}" th:alt="${patrolRecord.id}"
- th:data-url="${patrolRecord.imgName ?: '/logo-sm.png'}" th:data-id="${patrolRecord.id}"
- class="gallery-img" onclick="showPatrolRecordPreview(this.getAttribute('data-url'))">
- <div class="gallery-info">
- <div class="gallery-header">
- <h3 class="gallery-title" th:text="${patrolRecord.pointName ?: patrolRecord.id}"></h3>
- <!-- 鏍囩鍒楄〃 -->
-<!-- <div class="gallery-tags">-->
-<!-- <span class="tag-person">-->
-<!-- <i class="layui-icon layui-icon-user"></i>-->
-<!-- <span th:text="'鏈煡'"></span>-->
-<!-- </span>-->
-<!-- </div>-->
- </div>
-
- <div class="gallery-meta">
- <div style="display: flex; align-items: center; gap: 15px;width: 100%">
- <div class="meta-item" style="width: 50%">
- <i class="layui-icon layui-icon-location"></i>
- <span th:text="${patrolRecord.longitude ?: ''}"></span>
- </div>
- <div class="meta-item" style="width: 50%">
- <i class="layui-icon layui-icon-location"></i>
- <span th:text="${patrolRecord.latitude ?: ''}"></span>
- </div>
- </div>
- <div class="meta-item" >
- <i class="layui-icon layui-icon-date"></i>
- <span th:text="${#dates.format(patrolRecord.createTime, 'yyyy-MM-dd HH:mm')}"></span>
- </div>
- </div>
- </div>
+ <div class="card-row">
+ <span class="label">鐐逛綅鍚嶇О锛�</span>
+ <span class="value" th:text="${record.pointName}"></span>
</div>
- </div>
-
- <!-- 鍒嗛〉鎺т欢 -->
- <div class="pagination-container" th:if="${not #lists.isEmpty(patrolRecordList)}">
- <div id="pagination"></div>
- </div>
-
- </div>
- </div>
- <!-- 鍥剧墖棰勮灞� -->
- <div class="img-preview" id="imgPreview">
- <div class="preview-content">
- <img src="" alt="棰勮鍥剧墖" class="preview-img" id="previewImg">
- <div class="close-preview" id="closePreview">
- <i class="layui-icon layui-icon-clear"></i>
+ <div class="card-row">
+ <span class="label">宸℃浜猴細</span>
+ <span class="value" th:text="${record.createBy}"></span>
+ </div>
+ <div class="card-row">
+ <span class="label">宸℃鏃堕棿锛�</span>
+ <span class="value" th:text="${#dates.format(record.createTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
+ </div>
+ <div class="card-row">
+ <span class="label">缁忕含搴︼細</span>
+ <span class="value" th:text="${record.latitude} + ', ' + ${record.longitude}"></span>
+ </div>
+ <div class="card-row">
+ <span class="label">杞ㄨ抗鐐笽D锛�</span>
+ <span class="value" th:text="${record.id}"></span>
+ </div>
</div>
</div>
</div>
</div>
+
+
+
+<!-- 寮曞叆Layui JS -->
<th:block th:include="include :: footer"/>
<script th:src="@{/ajax/libs/layui-ruoyi/layui.js}"></script>
<script th:src="@{/security/patrol/patrolRecord.js}"></script>
-<script th:inline="javascript">
- var prefix = ctx + "security/patrol/patrolRecord";
-
- var currentPage = [[${currentPage}]];
- var totalItems = [[${totalItems}]];
- var pageSize = [[${pageSize}]];
- var patrolId = [[${patrolId}]];
-
- function openTrajectoryMap() {
- var url = prefix + '/trajectoryMap/'+patrolId ;
- var options = {
- title: "杞ㄨ抗鍥�",
- width: 500,
- height: 500,
- url: url,
- btn: 0,
- yes: function (index, layero) {
- $.modal.close(index);
- }
- };
- $.modal.openOptions(options);
- }
+<script th:inline="javascript">
+ var patrolRecordList = [[${patrolRecordList}]];
</script>
-
</body>
-</html>
+</html>
\ No newline at end of file
--
Gitblit v1.9.3