From ce819cce8e411e78e188e31645b0d7c8c2382784 Mon Sep 17 00:00:00 2001
From: sgj <1442489573@qq.com>
Date: 星期五, 12 十二月 2025 09:40:00 +0800
Subject: [PATCH] 巡更轨迹查看修改
---
fzzy-igdss-web/src/main/resources/static/security/patrol/patrolRecord-style.css | 259 +++++------------
fzzy-igdss-web/src/main/resources/static/security/patrol/patrolRecord.js | 412 ++++++++++-----------------
fzzy-igdss-web/src/main/resources/templates/security/patrol/patrolRecord/patrolRecord.html | 156 ++-------
fzzy-igdss-web/src/main/java/com/fzzy/sys/controller/security/PatrolRecordController.java | 38 +-
4 files changed, 286 insertions(+), 579 deletions(-)
diff --git a/fzzy-igdss-web/src/main/java/com/fzzy/sys/controller/security/PatrolRecordController.java b/fzzy-igdss-web/src/main/java/com/fzzy/sys/controller/security/PatrolRecordController.java
index 60eb116..1a06e2a 100644
--- a/fzzy-igdss-web/src/main/java/com/fzzy/sys/controller/security/PatrolRecordController.java
+++ b/fzzy-igdss-web/src/main/java/com/fzzy/sys/controller/security/PatrolRecordController.java
@@ -35,31 +35,25 @@
@GetMapping("/{patrolId}")
public String getPatrolRecordById(@PathVariable("patrolId") String patrolId, Model model) {
IgdsBaseParam param = new IgdsBaseParam();
- param.setPage(1);
- param.setLimit(6);
- param.setKey(patrolId);
- Page<PatrolRecord> records = patrolRecordManager.pageData(param);
- model.addAttribute("patrolRecordList", records.getRecords());
- model.addAttribute("currentPage", records.getCurrent());
- model.addAttribute("totalItems", records.getTotal());
- model.addAttribute("pageSize", records.getSize());
- model.addAttribute("patrolId", patrolId);
- return prefix + "/patrolRecord";
- }
-
- /**
- * 鑾峰彇杞ㄨ抗鍥鹃〉闈�
- */
- @GetMapping("trajectoryMap/{patrolId}")
- public String showTrajectoryMap(@PathVariable("patrolId") String patrolId, Model model) {
-
- IgdsBaseParam param = new IgdsBaseParam();
param.setKey(patrolId);
List<PatrolRecord> trackPoints = patrolRecordManager.listAll(param);
- model.addAttribute("trackPoints", trackPoints);
-
- return prefix + "/trajectoryMap";
+ model.addAttribute("patrolRecordList", trackPoints);
+ return prefix + "/patrolRecord";
}
+//
+// /**
+// * 鑾峰彇杞ㄨ抗鍥鹃〉闈�
+// */
+// @GetMapping("trajectoryMap/{patrolId}")
+// public String showTrajectoryMap(@PathVariable("patrolId") String patrolId, Model model) {
+//
+// IgdsBaseParam param = new IgdsBaseParam();
+// param.setKey(patrolId);
+// List<PatrolRecord> trackPoints = patrolRecordManager.listAll(param);
+// model.addAttribute("trackPoints", trackPoints);
+//
+// return prefix + "/trajectoryMap";
+// }
/**
* 鍒嗛〉鑾峰彇鏁版嵁
diff --git a/fzzy-igdss-web/src/main/resources/static/security/patrol/patrolRecord-style.css b/fzzy-igdss-web/src/main/resources/static/security/patrol/patrolRecord-style.css
index 268a484..0f5430b 100644
--- a/fzzy-igdss-web/src/main/resources/static/security/patrol/patrolRecord-style.css
+++ b/fzzy-igdss-web/src/main/resources/static/security/patrol/patrolRecord-style.css
@@ -1,203 +1,96 @@
-/* 鍥剧墖棰勮灞傛牱寮� */
-.img-preview {
- display: none;
+
+#map {
+ width: 100vw;
+ height: 100vh;
position: fixed;
top: 0;
left: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0, 0, 0, 0.9);
- z-index: 1000;
- justify-content: center;
- align-items: center;
+ z-index: 1;
}
-
-.preview-content {
- max-width: 90%;
- max-height: 90%;
- position: relative;
-}
-
-.preview-img {
- max-width: 100%;
- max-height: 90vh;
- border-radius: 4px;
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-}
-
-.close-preview {
- position: absolute;
- top: -40px;
- right: -10px;
- color: white;
- font-size: 2rem;
- cursor: pointer;
- background: rgba(0, 0, 0, 0.5);
- width: 40px;
- height: 40px;
- border-radius: 50%;
- display: flex;
- justify-content: center;
- align-items: center;
- transition: all 0.3s ease;
-}
-
-.close-preview:hover {
- background: rgba(255, 255, 255, 0.2);
- transform: scale(1.1);
-}
-
-/* 鍥剧墖缃戞牸鏍峰紡 */
-.gallery-grid {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
- gap: 20px;
- margin-bottom: 5px;
-}
-
-.gallery-item {
- background: white;
+/* 鍙充晶杞ㄨ抗鍗＄墖鎮诞灞� */
+.track-card-panel {
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ bottom: 20px;
+ width: 380px;
+ background: #fff;
border-radius: 8px;
- overflow: hidden;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
- transition: all 0.3s ease;
-}
-
-.gallery-item:hover {
- transform: translateY(-5px);
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
-}
-
-.gallery-img {
- width: 100%;
- height: 240px;
- object-fit: cover;
- cursor: pointer;
- transition: all 0.3s ease;
-}
-
-.gallery-img:hover {
- opacity: 0.95;
-}
-
-.gallery-info {
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+ z-index: 10; /* 灞傜骇楂樹簬鍦板浘 */
padding: 15px;
+ overflow-y: auto; /* 绾靛悜婊氬姩 */
+ overflow-x: hidden; /* 闅愯棌妯悜婊氬姩 */
}
-
-.gallery-header {
+/* 鍗＄墖闈㈡澘鏍囬 */
+.panel-title {
+ font-size: 18px;
+ font-weight: 600;
+ color: #333;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #e6e6e6;
+ margin-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: center;
- margin-bottom: 10px;
}
-
-.gallery-title {
- font-size: 1.5rem;
- font-weight: 600;
+.panel-title .count {
+ font-size: 14px;
+ color: #1890ff;
+ font-weight: normal;
+}
+/* 鍗曚釜杞ㄨ抗鍗＄墖 */
+.track-card {
+ padding: 12px;
+ border: 1px solid #f0f0f0;
+ border-radius: 6px;
+ margin-bottom: 10px;
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+.track-card:hover {
+ border-color: #1890ff;
+ background: #f5f8ff;
+ transform: translateX(-2px);
+}
+.track-card.active {
+ border-color: #1890ff;
+ background: #e6f7ff;
+}
+/* 鍗＄墖鍐呬俊鎭 */
+.card-row {
+ display: flex;
+ margin-bottom: 6px;
+ font-size: 14px;
+ line-height: 1.5;
+}
+.card-row:last-child {
+ margin-bottom: 0;
+}
+.card-row .label {
+ width: 80px;
+ color: #666;
+ flex-shrink: 0;
+}
+.card-row .value {
color: #333;
- margin: 0;
flex: 1;
- white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
+ white-space: nowrap;
}
-
-.gallery-meta {
- display: flex;
- flex-direction: column;
- gap: 2px;
+/* 婊氬姩鏉＄編鍖� */
+.track-card-panel::-webkit-scrollbar {
+ width: 6px;
}
-
-.meta-item {
- display: flex;
- align-items: center;
- font-size: 1.3rem;
- color: #666;
+.track-card-panel::-webkit-scrollbar-track {
+ background: #f5f5f5;
+ border-radius: 3px;
}
-
-.meta-item i {
- width: 16px;
- margin-right: 6px;
- color: #999;
- font-size: 1.25rem;
+.track-card-panel::-webkit-scrollbar-thumb {
+ background: #d9d9d9;
+ border-radius: 3px;
}
-
-.gallery-filename i {
- margin-right: 5px;
- font-size: 0.7rem;
-}
-
-/* 鏍囩鏍峰紡 */
-.gallery-tags {
- display: flex;
- flex-wrap: wrap;
- margin-left: auto;
- gap: 3px;
- /*margin: 12px 0;*/
-}
-
-
-/* 鍒嗛〉鏍峰紡 */
-.pagination-container {
- display: flex;
- justify-content: flex-end;
- width: 100%;
- /*margin-top: 40px;*/
-}
-
-/* 绌虹姸鎬佹牱寮� */
-.empty-state {
- grid-column: 1 / -1;
- text-align: center;
- padding: 60px 20px;
- color: #999;
-}
-
-.empty-state i {
- font-size: 4rem;
- margin-bottom: 20px;
- color: #ddd;
-}
-
-.empty-state h3 {
- font-size: 1.5rem;
- margin-bottom: 10px;
- color: #666;
-}
-
-/* 鍝嶅簲寮忚璁� */
-@media (max-width: 992px) {
- .gallery-grid {
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
- gap: 25px;
- }
-}
-
-@media (max-width: 768px) {
-
-
- .main-nav li {
- margin: 0 10px;
- }
-
- .gallery-grid {
- grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
- gap: 20px;
- }
-
- .gallery-img {
- height: 180px;
- }
-
-}
-
-@media (max-width: 576px) {
- .gallery-grid {
- grid-template-columns: 1fr;
- }
-
- .gallery-img {
- height: 200px;
- }
-
+.track-card-panel::-webkit-scrollbar-thumb:hover {
+ background: #1890ff;
}
\ No newline at end of file
diff --git a/fzzy-igdss-web/src/main/resources/static/security/patrol/patrolRecord.js b/fzzy-igdss-web/src/main/resources/static/security/patrol/patrolRecord.js
index a5d57e7..97ead98 100644
--- a/fzzy-igdss-web/src/main/resources/static/security/patrol/patrolRecord.js
+++ b/fzzy-igdss-web/src/main/resources/static/security/patrol/patrolRecord.js
@@ -1,281 +1,169 @@
var layer;
-var laypage;
-$(function () {
- // 鍒濆鍖栧垎椤�
- layui.use(['laypage', 'layer'], function () {
+$(document).ready(function () {
+ layui.use(['layer'], function () {
layer = layui.layer;
- laypage = layui.laypage;
-
- // 鍒濆鍖栧垎椤电粍浠�
- initPagination();
});
-
- // 鍒濆鍖栧浘鐗囬瑙堝姛鑳�
- initImagePreview();
});
-
-/**
- * 鍒濆鍖栧垎椤电粍浠�
- */
-function initPagination() {
- laypage.render({
- elem: 'pagination',
- count: typeof totalItems !== 'undefined' ? totalItems : 0,
- limit: typeof pageSize !== 'undefined' ? pageSize : 6,
- curr: typeof currentPage !== 'undefined' ? currentPage : 1,
- layout: ['prev', 'page', 'next', 'refresh', 'skip'],
- jump: function (obj, first) {
- if (!first) {
- searchRecord(obj.curr, obj.limit)
- }
- }
- });
-}
-
-/**
- * 閲嶆柊鍒濆鍖栧垎椤电粍浠�
- * @param {number} totalCount - 鎬昏褰曟暟
- * @param {number} pageSize - 姣忛〉澶у皬
- * @param {number} currentPage - 褰撳墠椤电爜
- */
-function reinitPagination(totalCount, pageSize, currentPage) {
- laypage.render({
- elem: 'pagination',
- count: totalCount,
- limit: pageSize,
- curr: currentPage,
- layout: ['prev', 'page', 'next', 'refresh', 'skip'],
- jump: function (obj, first) {
- if (!first) {
- searchRecord(obj.curr, obj.limit)
- }
- }
- });
-}
-
-/**
- * 鑾峰彇宸℃璁板綍鏁版嵁
- * @param {Object} params - 鏌ヨ鍙傛暟瀵硅薄
- * @param {Function} callback - 鍥炶皟鍑芥暟
- */
-function fetchPatrolRecordData(params, callback) {
- $.ajax({
- url: '../../patrol/patrolRecord/pageData',
- type: 'POST',
- dataType: "json",
- contentType: "application/json;charset=UTF-8",
- data: JSON.stringify(params),
- success: function (response) {
- if (response.code === '0000') {
- callback(null, response.data);
- } else {
- callback(new Error(response.msg || '鏁版嵁鍔犺浇澶辫触'), null);
- }
- },
- error: function (xhr, status, error) {
- callback(new Error('璇锋眰澶辫触锛岃绋嶅悗閲嶈瘯'), null);
- }
- });
-}
-
-/**
- * 鏋勫缓鏌ヨ鍙傛暟
- * @param {number} page - 椤电爜
- * @param {number} size - 姣忛〉澶у皬
- * @returns {Object} 鏌ヨ鍙傛暟瀵硅薄
- */
-function buildQueryParams(page, size) {
- var params = {
- page: page,
- limit: size,
- key: patrolId //涓昏〃id鏌ヨ
- };
- // 娣诲姞琛ㄥ崟鏌ヨ鏉′欢
- var form = document.getElementById('patrolRecord-form');
- if (form) {
- var inputs = form.querySelectorAll('input[name], select[name]');
- inputs.forEach(function(input) {
- if (input.value) { // 鍙坊鍔犻潪绌哄��
- params[input.name] = input.value;
- }
- });
- }
-
- return params;
-}
-
-/**
- * 鏇存柊宸℃璁板綍鐢诲粖鍐呭
- * @param {Array} records - 宸℃璁板綍鏁版嵁
- */
-function updateGallery(records) {
- var container = document.getElementById('gallery-container');
- if (!container) return;
-
- // 娓呯┖鐜版湁鍐呭
- container.innerHTML = '';
-
- if (!records || records.length === 0) {
- // 鏄剧ず绌虹姸鎬�
- container.innerHTML = `
- <div class="empty-state">
- <i class="fa-solid fa-clipboard-list"></i>
- <h3>鏆傛棤宸℃璁板綍</h3>
- <p>褰撳墠娌℃湁鍙睍绀虹殑宸℃璁板綍鏁版嵁</p>
- </div>
- `;
- // 闅愯棌鍒嗛〉
- $('.pagination-container').hide();
+function initMap() {
+ // 鍙垹闄や唬鐮佸紑濮�
+ // 妫�鏌ョ櫨搴﹀湴鍥続PI鏄惁鍔犺浇鎴愬姛
+ if (typeof BMapGL === 'undefined') {
+ layer.msg("鍦板浘鍔犺浇澶辫触锛岃妫�鏌ョ綉缁滆繛鎺ワ紒", {icon: 2});
return;
}
- // 鏄剧ず鍒嗛〉
- $('.pagination-container').show();
+ // 妫�鏌ュ鍣ㄦ槸鍚﹀瓨鍦�
+ var mapContainer = document.getElementById("map");
+ if (!mapContainer) {
+ layer.msg("鍦板浘瀹瑰櫒鏈壘鍒帮紒", {icon: 2});
+ return;
+ }
- // 鐢熸垚宸℃璁板綍鍗＄墖
- var html = '';
- records.forEach(function(record) {
- html += `
- <div class="gallery-item">
- <img src="${record.imgName || '/logo-sm.png'}" alt="${record.id}"
- data-url="${record.imgName || '/logo-sm.png'}" data-id="${record.id}"
- class="gallery-img" onclick="showPatrolRecordPreview(this.getAttribute('data-url'))">
- <div class="gallery-info">
- <div class="gallery-header">
- <h3 class="gallery-title">${record.pointName || record.id}</h3>
- <!--
- <div class="gallery-tags">
- <span class="tag-person">
- <i class="layui-icon layui-icon-user"></i>
- <span>'鏈煡'</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>${record.longitude || ''}</span>
- </div>
- <div class="meta-item">
- <i class="layui-icon layui-icon-location"></i>
- <span>${record.latitude || ''}</span>
- </div>
- </div>
- <div class="meta-item" style="width: 50%">
- <i class="layui-icon layui-icon-date"></i>
- <span>${formatDate(record.createTime)}</span>
- </div>
- </div>
+ // 妫�鏌ユ暟鎹�
+ if (!patrolRecordList || patrolRecordList.length === 0) {
+ layer.msg("鏆傛棤杞ㄨ抗鏁版嵁锛�", {icon: 2});
+ var defaultPoint = new BMapGL.Point(116.404, 39.915);
+ map.centerAndZoom(defaultPoint, 12);
+ map.enableScrollWheelZoom(true);
+ return;
+ }
+ //鍙垹闄や唬鐮佺粨鏉�
+
+ // ========== 鐧惧害鍦板浘鍒濆鍖栦笌杞ㄨ抗娓叉煋 ==========
+ // 1. 鍒濆鍖栧湴鍥�
+ var map = new BMapGL.Map("map");
+ // 2. 鑾峰彇杞ㄨ抗鐐规暟鎹�
+ if (patrolRecordList.length === 0) {
+ layer.msg("鏆傛棤杞ㄨ抗鏁版嵁锛�", {icon: 2});
+ var defaultPoint = new BMapGL.Point(116.404, 39.915);
+ map.centerAndZoom(defaultPoint, 14);
+ map.enableScrollWheelZoom(true);
+ return;
+ }
+
+
+ // 3. 鏋勯�犺建杩圭偣鏁扮粍鍜屾爣璁扮偣鏁扮粍
+ var points = []; // 杞ㄨ抗鎶樼嚎鐐�
+ var markers = []; // 鍦板浘鏍囪鐐�
+ var cardElements = document.querySelectorAll('.track-card'); // 鎵�鏈夊崱鐗囧厓绱�
+
+
+
+ patrolRecordList.forEach(function (record, index) {
+ var lng = record.longitude;
+ var lat = record.latitude;
+ var point = new BMapGL.Point(lng, lat);
+ points.push(point);
+
+ // 鍒涘缓鍦板浘鏍囪鐐�
+ var marker = new BMapGL.Marker(point);
+ markers.push(marker);
+
+ // 鏍囪鐐瑰脊绐椾俊鎭�
+ var infoWindow = new BMapGL.InfoWindow(`
+ <div style="font-size: 12px; line-height: 1.8;">
+ <p><strong>鐐逛綅鍚嶇О锛�</strong>${record.pointName}</p>
+ <p><strong>宸℃浜猴細</strong>${record.createBy}</p>
+ <p><strong>宸℃鏃堕棿锛�</strong>${new Date(record.createTime).toLocaleString()}</p>
+ <p><strong>缁忕含搴︼細</strong>${lat}, ${lng}</p>
+ <p><strong>杞ㄨ抗鐐笽D锛�</strong>${record.id}</p>
</div>
- </div>
- `;
+ `);
+
+ // 鏍囪鐐圭偣鍑讳簨浠讹細楂樹寒瀵瑰簲鍗＄墖 + 鏄剧ず寮圭獥
+ marker.addEventListener("click", function () {
+ // 绉婚櫎鎵�鏈夊崱鐗囩殑active鏍峰紡
+ cardElements.forEach(el => el.classList.remove('active'));
+ // 楂樹寒褰撳墠鍗＄墖
+ cardElements[index].classList.add('active');
+ // 婊氬姩鍒板綋鍓嶅崱鐗�
+ cardElements[index].scrollIntoView({behavior: 'smooth', block: 'center'});
+ // 鏄剧ず寮圭獥
+ this.openInfoWindow(infoWindow);
+ });
+
+ // 鍗＄墖鐐瑰嚮浜嬩欢锛氬畾浣嶅埌瀵瑰簲鏍囪鐐� + 楂樹寒鍗＄墖
+ cardElements[index].addEventListener("click", function () {
+ // 绉婚櫎鎵�鏈夊崱鐗囩殑active鏍峰紡
+ cardElements.forEach(el => el.classList.remove('active'));
+ // 楂樹寒褰撳墠鍗＄墖
+ this.classList.add('active');
+ // 鍦板浘涓績瀹氫綅鍒板綋鍓嶆爣璁扮偣
+ map.centerAndZoom(point, 15);
+ // 鏄剧ず鏍囪鐐瑰脊绐�
+ marker.openInfoWindow(infoWindow);
+ // 杞诲井鍔ㄧ敾鏁堟灉
+ marker.setAnimation(BMAP_ANIMATION_BOUNCE);
+ setTimeout(() => marker.setAnimation(null), 1500);
+ });
+
+ map.addOverlay(marker);
});
- container.innerHTML = html;
-}
+ // 瀵绘壘points涓棿鐨勭偣浣�
+ var midIndex = Math.floor(points.length / 2);
+ const centerPoint = points[midIndex] || new BMapGL.Point(116.404, 39.915);
+ map.centerAndZoom(centerPoint, 13); // 14涓哄湴鍥剧缉鏀剧骇鍒�
-/**
- * 鏍煎紡鍖栨棩鏈�
- * @param {string|number} date - 鏃ユ湡瀛楃涓叉垨鏃堕棿鎴�
- */
-function formatDate(date) {
- if (!date) return '';
- var d = new Date(date);
- return d.getFullYear() + '-' +
- String(d.getMonth() + 1).padStart(2, '0') + '-' +
- String(d.getDate()).padStart(2, '0') + ' ' +
- String(d.getHours()).padStart(2, '0') + ':' +
- String(d.getMinutes()).padStart(2, '0') ;
-}
-
-/**
- * 鍒濆鍖栧浘鐗囬瑙堝姛鑳�
- */
-function initImagePreview() {
- var preview = document.getElementById('imgPreview');
- var previewImg = document.getElementById('previewImg');
- var closeBtn = document.getElementById('closePreview');
-
- // 濡傛灉棰勮鍏冪礌涓嶅瓨鍦紝鍒欎笉鍒濆鍖�
- if (!preview || !previewImg) {
- return;
- }
-
- // 鍏抽棴鎸夐挳鐐瑰嚮浜嬩欢
- if (closeBtn) {
- closeBtn.addEventListener('click', closePreview);
- }
-
- // 鐐瑰嚮棰勮鍖哄煙澶栧叧闂�
- preview.addEventListener('click', function (e) {
- if (e.target === preview) {
- closePreview();
- }
+ // 4. 缁樺埗杞ㄨ抗鎶樼嚎
+ var polyline = new BMapGL.Polyline(points, {
+ strokeColor: "#1890ff", // 涓昏壊璋冿細钃濊壊
+ strokeWeight: 6, // 鎶樼嚎瀹藉害
+ strokeOpacity: 0.8, // 閫忔槑搴�
+ strokeStyle: 'solid' // 瀹炵嚎
});
+ map.addOverlay(polyline);
- // 閿洏浜嬩欢鐩戝惉
- document.addEventListener('keydown', function (e) {
- if (e.key === 'Escape' && preview.style.display === 'flex') {
- closePreview();
- }
- });
+ // // 5. 璧风偣/缁堢偣鐗规畩鏍囪
+ // // 璧风偣鏍囪
+ // var startMarker = new BMapGL.Marker(points[0], {
+ // icon: new BMapGL.Icon("http://api.map.baidu.com/img/markers.png", new BMapGL.Size(25, 34), {
+ // offset: new BMapGL.Size(12, 34),
+ // imageOffset: new BMapGL.Size(0, 0) // 璧风偣鍥炬爣
+ // })
+ // });
+ // map.addOverlay(startMarker);
+ // // startMarker.setLabel(new BMapGL.Label("璧风偣锛�" + patrolRecordList[0].pointName, {
+ // // offset: new BMapGL.Size(30, -15),
+ // // styles: {fontSize: '12px', color: '#fff', background: '#52c41a', padding: '0px 14px', borderRadius: '3px'}
+ // // }));
+ // startMarker.setLabel(new BMapGL.Label("璧风偣锛�" + patrolRecordList[0].pointName, {
+ // offset: new BMapGL.Size(30, -15),
+ // styles: {
+ // fontSize: '12px',
+ // color: '#fff',
+ // background: '#52c41a',
+ // padding: '8px 8px', // 宸﹀彸padding淇濇寔涓�鑷达紙14px锛夛紝淇濊瘉鑳屾櫙涓や晶绌洪棿瀵圭О
+ // borderRadius: '3px',
+ // textAlign: 'center' // 鏂板锛氬己鍒舵枃瀛楀湪鑳屾櫙鍐呮按骞冲眳涓�
+ // }
+ // }));
+ //
+ // // 缁堢偣鏍囪
+ // var endMarker = new BMapGL.Marker(points[points.length - 1], {
+ // icon: new BMapGL.Icon("http://api.map.baidu.com/img/markers.png", new BMapGL.Size(25, 34), {
+ // offset: new BMapGL.Size(12, 34),
+ // imageOffset: new BMapGL.Size(-114, 0) // 缁堢偣鍥炬爣
+ // })
+ // });
+ // map.addOverlay(endMarker);
+ // endMarker.setLabel(new BMapGL.Label("缁堢偣锛�" + patrolRecordList[patrolRecordList.length - 1].pointName, {
+ // offset: new BMapGL.Size(30, -15),
+ // styles: {fontSize: '12px', color: '#fff', background: '#ff4d4f', padding: '0px 14px', borderRadius: '3px'}
+ // }));
- // 鍏抽棴棰勮鍑芥暟
- function closePreview() {
- preview.style.display = 'none';
- previewImg.src = '';
- }
-}
+ // 6. 鍦板浘鑷�傚簲鎵�鏈夎建杩圭偣
+ map.enableScrollWheelZoom(true); // 寮�鍚粴杞缉鏀�
+ map.setViewport(points); // 閫傞厤鎵�鏈夎建杩圭偣
-/**
- * 鏄剧ず鍥剧墖棰勮
- * @param {string} imgUrl 鍥剧墖URL
- */
-function showPatrolRecordPreview(imgUrl) {
- var preview = document.getElementById('imgPreview');
- var previewImg = document.getElementById('previewImg');
-
- if (preview && previewImg) {
- previewImg.src = imgUrl;
- preview.style.display = 'flex';
- }
-}
-
-/**
- * 璇诲彇宸℃璁板綍
- */
-function searchRecord(page , size) {
- var pageNumber = 1;
- var sizeNumber = 6;
- if (pageSize && pageSize > 0){
- size = pageSize;
- }
-
- if (size && size > 0){
- sizeNumber = size;
- }
- if (page && page > 0){
- pageNumber = page;
- }
- // 鏋勯�犳煡璇㈠弬鏁帮紝浠庣涓�椤靛紑濮�
- var queryParams = buildQueryParams(pageNumber, sizeNumber);
- // 鏄剧ずloading
- var loadingIndex = layer.load(1, {shade: [0.1, '#fff']});
- // 璋冪敤鏁版嵁璇锋眰鏂规硶
- fetchPatrolRecordData(queryParams, function(error, data) {
- // 鍏抽棴loading
- layer.close(loadingIndex);
- if (error) {
- layer.msg(error.message);
- return;
- }
-
- // 鏇存柊椤甸潰鏁版嵁
- updateGallery(data.records);
- // 閲嶆柊鍒濆鍖栧垎椤电粍浠�
- reinitPagination(data.total, data.size, data.current);
+ // 7. 鍒濆鎻愮ず
+ layer.msg("杞ㄨ抗鍔犺浇瀹屾垚锛佺偣鍑诲崱鐗囧彲瀹氫綅鍒板搴旂偣浣�", {
+ icon: 1,
+ time: 3000,
+ offset: ['20px', '20px']
});
}
+
+// 椤甸潰鍔犺浇瀹屾垚鍚庡垵濮嬪寲鍦板浘
+window.onload = initMap;
\ No newline at end of file
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