@@ -202,6 +203,8 @@
var marker_state = 3; // 1:all; 2:orange; 3:red
var allFeatures = []; // 存储所有设备标记，用于搜索功能
var currentSearchedDevice = null; // 当前搜索的设备ID
+ var myLocationFeature = null; // 存储"我的位置"标记
+ var myLocationInterval; // 存储定时更新位置的interval对象
// 天地图 API 密钥（fengyarnom@gmail.com）
var TIANDITU_KEY = '0c260b8a094a4e0bc507808812cefdac';
@@ -353,16 +356,51 @@
addDeviceMarkers();
myLocation();
+ startLocationUpdates(); // 启动位置定时更新
}
function switchMapType(mapType) {
console.log('切换地图类型到:', mapType);
map.removeLayer(currentBaseLayer);
currentBaseLayer = mapLayers[mapType];
map.getLayers().insertAt(0, currentBaseLayer);
+
+ // 更新我的位置标记，使用正确的坐标系
+ updateMyLocationForMapType(mapType);
+
+ // 更新设备标记
addDeviceMarkers();
}
+
+ // 根据地图类型更新我的位置标记
+ function updateMyLocationForMapType(mapType) {
+ if (myLocationFeature) {
+ // 获取原始坐标
+ var originalCoords = myLocationFeature.get('originalCoords');
+ if (originalCoords) {
+ var lat = originalCoords.lat;
+ var lon = originalCoords.lon;
+ var coordinates;
+
+ // 根据地图类型进行坐标转换
+ if (mapType === 'amap' || mapType === 'amap_satellite') {
+ // 高德地图使用GCJ-02坐标系，需要转换
+ var gcjCoord = transform(lat, lon);
+ coordinates = ol.proj.fromLonLat([gcjCoord.lon, gcjCoord.lat]);
+ } else {
+ // 天地图使用CGCS2000/WGS84坐标系，直接使用
+ coordinates = ol.proj.fromLonLat([lon, lat]);
+ }
+
+ // 更新位置标记的几何坐标
+ myLocationFeature.getGeometry().setCoordinates(coordinates);
+ }
+ }
+ }
function addDeviceMarkers() {
+ // 保存我的位置标记
+ var savedMyLocationFeature = myLocationFeature;
+
// 清除现有标记
vectorSource.clear();
greenFeatures = [];
@@ -422,11 +460,13 @@
vectorSource.addFeature(feature);
}
- // 根据当前搜索状态显示或隐藏设备
+ if (savedMyLocationFeature) {
+ vectorSource.addFeature(savedMyLocationFeature);
+ }
+
if (currentSearchedDevice) {
filterByDeviceId(currentSearchedDevice);
} else {
- // 恢复当前过滤状态
if (marker_state === 2) {
hideGreen();
hideRed();
@@ -442,10 +482,27 @@
navigator.geolocation.getCurrentPosition(function(position) {
var lon = position.coords.longitude;
var lat = position.coords.latitude;
- var coordinates = ol.proj.fromLonLat([lon, lat]);
+ var currentMapType = document.getElementById('mapTypeSelect').value;
+ var coordinates;
+
+ if (currentMapType === 'amap' || currentMapType === 'amap_satellite') {
+ // 高德地图使用GCJ-02坐标系，需要转换
+ var gcjCoord = transform(lat, lon);
+ coordinates = ol.proj.fromLonLat([gcjCoord.lon, gcjCoord.lat]);
+ } else {
+ // 天地图使用CGCS2000/WGS84坐标系，直接使用
+ coordinates = ol.proj.fromLonLat([lon, lat]);
+ }
- var feature = new ol.Feature({
- geometry: new ol.geom.Point(coordinates)
+ // 如果已经存在位置标记，则先移除
+ if (myLocationFeature) {
+ vectorSource.removeFeature(myLocationFeature);
+ }
+
+ myLocationFeature = new ol.Feature({
+ geometry: new ol.geom.Point(coordinates),
+ isMyLocation: true,
+ originalCoords: {lat: lat, lon: lon}
});
var style = new ol.style.Style({
@@ -456,74 +513,99 @@
})
});
- feature.setStyle(style);
- vectorSource.addFeature(feature);
+ myLocationFeature.setStyle(style);
+ vectorSource.addFeature(myLocationFeature);
map.getView().setCenter(coordinates);
});
}
}
+ function startLocationUpdates() {
+ if (myLocationInterval) {
+ clearInterval(myLocationInterval);
+ }
+
+ myLocationInterval = setInterval(function() {
+ myLocation();
+ }, 10 * 60 * 1000); // 10 min = 10 * 60 * 1000ms
+ }
+
function showAll() {
- // 更新按钮样式
document.getElementById('btn-all').classList.add('active');
document.getElementById('btn-warning1').classList.remove('active');
document.getElementById('btn-warning2').classList.remove('active');
-
- if (marker_state == 2) {
- showGreen();
- showRed();
- marker_state = 1;
- } else if (marker_state == 3) {
- showGreen();
- showOrange();
- marker_state = 1;
- }
-
- // 如果有搜索，清除搜索条件
+ document.getElementById('btn-device-locate').classList.remove('active');
+ document.getElementById('btn-device-locate').style.display = 'none';
+
currentSearchedDevice = null;
document.getElementById('deviceSearch').value = '';
+ var savedMyLocationFeature = myLocationFeature;
+
+ vectorSource.clear();
+
+ if (savedMyLocationFeature) {
+ vectorSource.addFeature(savedMyLocationFeature);
+ }
+
+ for (var i = 0; i < allFeatures.length; i++) {
+ vectorSource.addFeature(allFeatures[i]);
+ }
+
+ marker_state = 1;
}
function showWarning1() {
- // 更新按钮样式
document.getElementById('btn-all').classList.remove('active');
document.getElementById('btn-warning1').classList.add('active');
document.getElementById('btn-warning2').classList.remove('active');
-
- if (marker_state == 1) {
- hideGreen();
- hideRed();
- marker_state = 2;
- } else if (marker_state == 3) {
- hideRed();
- showOrange();
- marker_state = 2;
- }
-
- // 如果有搜索，清除搜索条件
+ document.getElementById('btn-device-locate').classList.remove('active');
+ document.getElementById('btn-device-locate').style.display = 'none';
+
currentSearchedDevice = null;
document.getElementById('deviceSearch').value = '';
+
+ var savedMyLocationFeature = myLocationFeature;
+
+ vectorSource.clear();
+
+ if (savedMyLocationFeature) {
+ vectorSource.addFeature(savedMyLocationFeature);
+ }
+
+ for (var i = 0; i < allFeatures.length; i++) {
+ vectorSource.addFeature(allFeatures[i]);
+ }
+
+ hideGreen();
+ hideRed();
+ marker_state = 2;
}
function showWarning2() {
- // 更新按钮样式
document.getElementById('btn-all').classList.remove('active');
document.getElementById('btn-warning1').classList.remove('active');
document.getElementById('btn-warning2').classList.add('active');
-
- if (marker_state == 1) {
- hideGreen();
- hideOrange();
- marker_state = 3;
- } else if (marker_state == 2) {
- hideOrange();
- showRed();
- marker_state = 3;
- }
-
- // 如果有搜索，清除搜索条件
+ document.getElementById('btn-device-locate').classList.remove('active');
+ document.getElementById('btn-device-locate').style.display = 'none';
+
currentSearchedDevice = null;
document.getElementById('deviceSearch').value = '';
+
+ var savedMyLocationFeature = myLocationFeature;
+
+ vectorSource.clear();
+
+ if (savedMyLocationFeature) {
+ vectorSource.addFeature(savedMyLocationFeature);
+ }
+
+ for (var i = 0; i < allFeatures.length; i++) {
+ vectorSource.addFeature(allFeatures[i]);
+ }
+
+ hideGreen();
+ hideOrange();
+ marker_state = 3;
}
function showGreen() {
@@ -567,21 +649,18 @@
vectorSource.removeFeature(redFeatures[i]);
}
}
-
- // 搜索设备函数
+
function searchDevice() {
var deviceId = document.getElementById('deviceSearch').value.trim();
if (!deviceId) {
- // 如果搜索框为空，则显示所有设备（根据当前过滤状态）
currentSearchedDevice = null;
vectorSource.clear();
for (var i = 0; i < allFeatures.length; i++) {
vectorSource.addFeature(allFeatures[i]);
}
-
- // 恢复过滤状态
+
if (marker_state === 2) {
hideGreen();
hideRed();
@@ -589,6 +668,9 @@
hideGreen();
hideOrange();
}
+
+ document.getElementById('btn-device-locate').style.display = 'none';
+ updateFilterButtonsState(marker_state);
return;
}
@@ -596,33 +678,76 @@
currentSearchedDevice = deviceId;
filterByDeviceId(deviceId);
}
-
- // 根据设备ID过滤显示
+
+ function locateDeviceOnMap(deviceId, latitude, longitude) {
+ currentSearchedDevice = deviceId;
+ filterByDeviceId(deviceId);
+
+ var layerIndex = layer.index;
+ layer.close(layerIndex);
+
+ layer.msg('已定位到设备: ' + deviceId);
+ }
+
+ function updateFilterButtonsState(state) {
+ document.getElementById('btn-all').classList.remove('active');
+ document.getElementById('btn-warning1').classList.remove('active');
+ document.getElementById('btn-warning2').classList.remove('active');
+
+ if (state === 1) {
+ document.getElementById('btn-all').classList.add('active');
+ } else if (state === 2) {
+ document.getElementById('btn-warning1').classList.add('active');
+ } else if (state === 3) {
+ document.getElementById('btn-warning2').classList.add('active');
+ }
+ }
+
function filterByDeviceId(deviceId) {
+ var savedMyLocationFeature = myLocationFeature;
+
vectorSource.clear();
+
+ if (savedMyLocationFeature) {
+ vectorSource.addFeature(savedMyLocationFeature);
+ }
- var foundFeature = null;
-
- // 查找匹配的设备
+ var found = false;
+
for (var i = 0; i < allFeatures.length; i++) {
var feature = allFeatures[i];
- var featureDeviceId = feature.get('deviceInfo').deviceid;
+ var deviceInfo = feature.get('deviceInfo');
- // 部分匹配，包含搜索字符串即可
- if (featureDeviceId.indexOf(deviceId) !== -1) {
+ if (deviceInfo && deviceInfo.deviceid.includes(deviceId)) {
vectorSource.addFeature(feature);
- foundFeature = feature;
+ found = true;
+
+ // 将地图中心移动到该设备位置
+ var geometry = feature.getGeometry();
+ var deviceCoord = geometry.getCoordinates();
+ map.getView().setCenter(deviceCoord);
+ map.getView().setZoom(15);
}
}
- // 如果找到设备，则将地图中心设置到该设备位置
- if (foundFeature) {
- var geometry = foundFeature.getGeometry();
- var coordinate = geometry.getCoordinates();
+ if (!found) {
+ layer.msg('未找到设备: ' + deviceId);
- map.getView().setCenter(coordinate);
- map.getView().setZoom(15); // 放大到适当级别
+ if (marker_state === 1) {
+ showAll();
+ } else if (marker_state === 2) {
+ showWarning1();
+ } else if (marker_state === 3) {
+ showWarning2();
+ }
}
+
+ document.getElementById('current-device-id').textContent = deviceId;
+ document.getElementById('btn-device-locate').style.display = 'block';
+ document.getElementById('btn-device-locate').classList.add('active');
+ document.getElementById('btn-all').classList.remove('active');
+ document.getElementById('btn-warning1').classList.remove('active');
+ document.getElementById('btn-warning2').classList.remove('active');
}
layui.use(['form'], function(){
var form = layui.form;
@@ -632,7 +757,6 @@
initialize();
- // 初始化页面时，默认显示"严重告警"
showWarning2();
});
diff --git a/sec-beidou/src/main/resources/templates/page/table/gnss_status_list.html b/sec-beidou/src/main/resources/templates/page/table/gnss_status_list.html
index 81ea3658..4c3297bf 100644
--- a/sec-beidou/src/main/resources/templates/page/table/gnss_status_list.html
+++ b/sec-beidou/src/main/resources/templates/page/table/gnss_status_list.html
@@ -12,6 +12,65 @@
body {
background-color: #ffffff;
}
+ .layui-btn-normal {
+ background-color: #1aa094;
+ }
+ .icon-btn {
+ /* width: 30px; */
+ height: 26px;
+ padding: 0;
+ }
+ .layui-table-fixed-l .layui-table-body {
+ box-shadow: none !important;
+ }
+ .layui-btn-normal:hover {
+ background-color: #148e83;
+ }
+ .layui-table-fixed-l .layui-table-body {
+ box-shadow: none !important;
+ }
+ .layui-table-cell {
+ height: auto;
+ line-height: 28px;
+ padding: 6px 15px;
+ position: relative;
+ box-sizing: border-box;
+ }
+ .layui-btn-xs {
+ padding: 0 8px;
+ font-size: 12px;
+ height: 26px;
+ line-height: 24px;
+ }
+ .device-id-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: #4b97d5f5;
+ color: white;
+ border-radius: 5px;
+ padding: 3px 10px;
+ cursor: pointer;
+ transition: background-color 0.3s;
+ width: 100%;
+ }
+ .device-id-btn:hover {
+ background-color: #339af0;
+ }
+ .device-id-btn i {
+ margin-right: 5px;
+ }
+ .icon-only-btn {
+ background: none;
+ border: none;
+ padding: 0;
+ cursor: pointer;
+ font-size: 16px;
+ color: #1aa094;
+ }
+ .icon-only-btn:hover {
+ color: #148e83;
+ }
@@ -28,34 +87,49 @@
form = layui.form,
table = layui.table;
var iframeIndex = parent.layer.getFrameIndex(window.name);
- /**
- * 初始化表单，要加上，不然刷新部分组件可能会不加载
- */
form.render();
table.render({
elem: '#currentTableId',
url: '/gnss/q_status/list',
cols: [[
- {field: 'deviceid', title: '设备号', sort: true},
- {field: 'devicetype', title: '设备类型',templet: '#typeTrans'},
- {field: 'project_id', title: '项目号'},
- {field: 'name', title: '工点'},
- {field: 'updatetime', title: '更新时间', templet: "
{{layui.util.toDateString(d.updatetime, 'yyyy-MM-dd HH:mm:ss')}}
"},
- {field: 'state', title: '状态',templet: '#stateTrans'},
- {field: 'warning', title: '告警',templet: '#warningTrans'},
- {field: 'voltage', title: '电压'},
- {field: 'temperature', title: '温度'},
- {field: 'humidity', title: '湿度'},
- {field: 'rssi', title: '信号'},
- {field: 'pitch', title: 'x倾角'},
- {field: 'roll', title: 'y倾角'},
- {field: 'satelliteinuse', title: '使用卫星数'}
+ {field: 'deviceid', title: '设备号', width: 120, templet: '#deviceIdTpl', align: 'center',sort: true},
+ {field: 'devicetype', title: '设备类型', templet: '#typeTrans', width: 100},
+ {field: 'project_id', title: '项目号', width: 100},
+ {field: 'name', title: '工点', width: 150},
+ {field: 'updatetime', title: '更新时间', templet: "
{{layui.util.toDateString(d.updatetime, 'yyyy-MM-dd HH:mm:ss')}}
", width: 170},
+ {field: 'state', title: '状态', templet: '#stateTrans', width: 80, align: 'center'},
+ {field: 'warning', title: '告警', templet: '#warningTrans', width: 80, align: 'center'},
+ {field: 'voltage', title: '电压', width: 80},
+ {field: 'temperature', title: '温度', width: 80},
+ {field: 'humidity', title: '湿度', width: 80},
+ {field: 'rssi', title: '信号', width: 80},
+ {field: 'pitch', title: 'x倾角', width: 80},
+ {field: 'roll', title: 'y倾角', width: 80},
+ {field: 'satelliteinuse', title: '使用卫星数', width: 110},
+ {field: 'latitude', title: '纬度', hide: true},
+ {field: 'longitude', title: '经度', hide: true}
]],
limits: [10, 15, 20, 25, 50, 100],
limit: 15,
page: true,
- skin: 'line'
+ skin: 'line',
+ even: true,
+ loading: true,
+ text: {
+ none: '暂无符合条件的设备'
+ }
+ });
+
+ table.on('tool(currentTableFilter)', function(obj) {
+ var data = obj.data;
+ if (obj.event === 'locate') {
+ if (data.latitude && data.longitude) {
+ parent.locateDeviceOnMap(data.deviceid, data.latitude, data.longitude);
+ } else {
+ layer.msg('设备无经纬度信息，无法定位');
+ }
+ }
});
});
@@ -92,5 +166,11 @@
{{# } }}
+
+