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.js | 412 +++++++++++++++++++++-------------------------------------
1 files changed, 150 insertions(+), 262 deletions(-)
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
--
Gitblit v1.9.3