feat: 优化页面
This commit is contained in:
parent
a4cf6130c3
commit
4425fcd7e6
@ -67,39 +67,9 @@
|
||||
ul li {
|
||||
list-style: none;
|
||||
}
|
||||
.btn-wrap {
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
margin-left: 1rem;
|
||||
padding: .5rem .5rem;
|
||||
border-radius: .25rem;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
|
||||
}
|
||||
.btn {
|
||||
width: 75px;
|
||||
height: 30px;
|
||||
float: left;
|
||||
background-color: #fff;
|
||||
color: rgba(27, 142, 236, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(27, 142, 236, 1);
|
||||
border-radius: 5px;
|
||||
margin: 0 5px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.btn:hover, .btn.active {
|
||||
background-color: rgba(27, 142, 236, 0.8);
|
||||
color: #fff;
|
||||
}
|
||||
/* 页面布局优化 */
|
||||
|
||||
.layuimini-main {
|
||||
height: calc(100vh - 40px);
|
||||
height: 96vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@ -129,65 +99,7 @@
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
.map-control-card {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 1000;
|
||||
background: white;
|
||||
padding: 10px;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||||
min-width: 220px;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.map-control-card .title {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
color: #1aa094;
|
||||
}
|
||||
.search-box {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
.search-box input {
|
||||
flex: 1;
|
||||
border: 1px solid #e6e6e6;
|
||||
height: 30px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.search-box button {
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
background-color: #1aa094;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.search-box button:hover {
|
||||
background-color: #148e83;
|
||||
}
|
||||
.map-controls select {
|
||||
width: 100%;
|
||||
border: 1px solid #e6e6e6;
|
||||
height: 30px;
|
||||
}
|
||||
.switch-box {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.switch-box .layui-form-item {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.switch-box .layui-form-switch {
|
||||
margin-top: 0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
|
||||
/* 设备总览条样式 */
|
||||
.device-overview-bar {
|
||||
@ -200,6 +112,86 @@
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 地图顶部功能条样式 */
|
||||
.map-toolbar {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1000;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 12px;
|
||||
padding: 8px 16px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width:auto;
|
||||
max-width: 95vw;
|
||||
}
|
||||
|
||||
.toolbar-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.toolbar-label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.toolbar-select {
|
||||
border: 1px solid rgba(230, 230, 230, 0.8);
|
||||
border-radius: 6px;
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
min-width: 120px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.toolbar-input {
|
||||
border: 1px solid rgba(230, 230, 230, 0.8);
|
||||
border-radius: 6px;
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
width: 140px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.toolbar-btn {
|
||||
background: rgba(26, 160, 148, 0.9);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 4px 12px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
height: 28px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.toolbar-btn:hover {
|
||||
background: rgba(26, 160, 148, 1);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.toolbar-divider {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: rgba(230, 230, 230, 0.6);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.overview-stats {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@ -283,11 +275,7 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.map-control-card {
|
||||
position: static;
|
||||
display: block;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
|
||||
.device-overview-bar {
|
||||
padding: 8px 12px;
|
||||
@ -329,12 +317,55 @@
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn-wrap {
|
||||
|
||||
|
||||
/* 移动端工具栏适配 */
|
||||
.map-toolbar {
|
||||
position: static;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
transform: none;
|
||||
left: auto;
|
||||
margin: 8px;
|
||||
margin-bottom: 8px;
|
||||
flex-shrink: 0;
|
||||
min-width: auto;
|
||||
max-width: none;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.toolbar-item {
|
||||
gap: 4px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.toolbar-label {
|
||||
font-size: 10px;
|
||||
display: none; /* 隐藏标签节省空间 */
|
||||
}
|
||||
|
||||
|
||||
|
||||
.toolbar-select,
|
||||
.toolbar-input {
|
||||
font-size: 11px;
|
||||
height: 24px;
|
||||
min-width: 80px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.toolbar-btn {
|
||||
font-size: 11px;
|
||||
height: 24px;
|
||||
padding: 2px 8px;
|
||||
}
|
||||
|
||||
.toolbar-divider {
|
||||
display: none; /* 隐藏分隔线 */
|
||||
}
|
||||
|
||||
#toolbar-device-locate span:not(.toolbar-label) {
|
||||
font-size: 10px;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -393,18 +424,12 @@
|
||||
|
||||
<div class="map-wrapper">
|
||||
<div class="map-card">
|
||||
<ul class="btn-wrap" style="z-index: 99;">
|
||||
<li class="light btn" id="btn-all" onclick="showAll()">全部</li>
|
||||
<li class="night btn" id="btn-warning1" onclick="showWarning1()">一般告警</li>
|
||||
<li class="night btn active" id="btn-warning2" onclick="showWarning2()">严重告警</li>
|
||||
<li class="night btn" id="btn-device-locate" style="display: none; min-width: 120px;"> 设备定位: <span id="current-device-id"></span> </li>
|
||||
</ul>
|
||||
|
||||
<div id="map-container">
|
||||
<div class="map-control-card">
|
||||
<div class="map-controls">
|
||||
<form class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<select id="mapTypeSelect" lay-filter="mapType">
|
||||
<!-- 新的地图工具栏 -->
|
||||
<div class="map-toolbar">
|
||||
<div class="toolbar-item">
|
||||
<select id="mapTypeSelectNew" class="toolbar-select" lay-filter="mapTypeNew" onchange="onMapTypeChange()">
|
||||
<option value="tianditu_terrain_hybrid" selected>天地图-地形混合</option>
|
||||
<option value="tianditu_satellite">天地图-卫星影像</option>
|
||||
<option value="tianditu_normal">天地图-矢量</option>
|
||||
@ -413,21 +438,42 @@
|
||||
<option value="amap">高德-矢量</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="toolbar-divider"></div>
|
||||
|
||||
<div class="toolbar-item">
|
||||
<input type="text" id="deviceSearchNew" class="toolbar-input" placeholder="搜索设备编号">
|
||||
<button class="toolbar-btn" onclick="searchDeviceNew()">搜索</button>
|
||||
</div>
|
||||
<div class="search-box">
|
||||
<input type="text" id="deviceSearch" placeholder="输入设备编号搜索">
|
||||
<button onclick="searchDevice()">搜索</button>
|
||||
|
||||
<div class="toolbar-divider"></div>
|
||||
|
||||
<div class="toolbar-item">
|
||||
<select id="warningFilter" class="toolbar-select" onchange="onWarningFilterChange()">
|
||||
<option value="all">全部设备</option>
|
||||
<option value="warning1">一般告警</option>
|
||||
<option value="warning2" selected>严重告警</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="switch-box">
|
||||
<form class="layui-form">
|
||||
<div class="layui-form-item" style="margin-bottom: 0;">
|
||||
<input type="checkbox" name="showDeviceId" lay-skin="switch" lay-text="显示设备信息" lay-filter="showDeviceId" checked>
|
||||
<input type="checkbox" name="showCluster" lay-skin="switch" lay-text="设备集群显示" lay-filter="showCluster" checked>
|
||||
|
||||
<div class="toolbar-divider"></div>
|
||||
|
||||
<div class="toolbar-item">
|
||||
<select id="displayOptions" class="toolbar-select" onchange="onDisplayOptionsChange()">
|
||||
<option value="both" selected>信息+集群</option>
|
||||
<option value="device">仅设备信息</option>
|
||||
<option value="cluster">仅集群显示</option>
|
||||
<option value="none">隐藏标签</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="toolbar-item" id="toolbar-device-locate" style="display: none;">
|
||||
<span id="current-device-id-new" style="background: rgba(26, 160, 148, 0.1); padding: 4px 8px; border-radius: 4px; font-size: 12px; color: #1aa094; font-weight: bold;"></span>
|
||||
<button class="toolbar-btn" onclick="clearDeviceSearch()" style="padding: 2px 6px; font-size: 11px;">清除</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -753,7 +799,7 @@
|
||||
}
|
||||
});
|
||||
|
||||
var initialMapType = document.getElementById('mapTypeSelect').value;
|
||||
var initialMapType = document.getElementById('mapTypeSelectNew').value;
|
||||
currentBaseLayer = mapLayers[initialMapType];
|
||||
|
||||
map = new ol.Map({
|
||||
@ -875,7 +921,7 @@
|
||||
for (var i = 0; i < deviceList.length; i++) {
|
||||
var device = deviceList[i];
|
||||
var mapCoordinates;
|
||||
var currentMapType = document.getElementById('mapTypeSelect').value;
|
||||
var currentMapType = document.getElementById('mapTypeSelectNew').value;
|
||||
if (currentMapType === 'amap' || currentMapType === 'amap_satellite') {
|
||||
// 高德地图 WGS84 转换为 GCJ-02
|
||||
var gcjCoord = transform(device.latitude, device.longitude);
|
||||
@ -922,6 +968,65 @@
|
||||
vectorLayer.changed();
|
||||
}
|
||||
|
||||
|
||||
|
||||
function onMapTypeChange() {
|
||||
var mapType = document.getElementById('mapTypeSelectNew').value;
|
||||
switchMapType(mapType);
|
||||
}
|
||||
|
||||
function searchDeviceNew() {
|
||||
var deviceId = document.getElementById('deviceSearchNew').value.trim();
|
||||
|
||||
if (!deviceId) {
|
||||
currentSearchedDevice = null;
|
||||
vectorSource.clear();
|
||||
|
||||
for (var i = 0; i < allFeatures.length; i++) {
|
||||
vectorSource.addFeature(allFeatures[i]);
|
||||
}
|
||||
|
||||
var filterValue = document.getElementById('warningFilter').value;
|
||||
if (filterValue === 'warning1') {
|
||||
hideGreen();
|
||||
hideRed();
|
||||
} else if (filterValue === 'warning2') {
|
||||
hideGreen();
|
||||
hideOrange();
|
||||
}
|
||||
|
||||
document.getElementById('btn-device-locate').style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
currentSearchedDevice = deviceId;
|
||||
filterByDeviceId(deviceId);
|
||||
|
||||
// 更新过滤器为显示所有设备，因为搜索时需要显示匹配的设备
|
||||
document.getElementById('warningFilter').value = 'all';
|
||||
|
||||
// 显示设备定位信息
|
||||
document.getElementById('current-device-id-new').textContent = deviceId;
|
||||
document.getElementById('toolbar-device-locate').style.display = 'flex';
|
||||
}
|
||||
|
||||
function clearDeviceSearch() {
|
||||
currentSearchedDevice = null;
|
||||
// document.getElementById('deviceSearch').value = '';
|
||||
document.getElementById('deviceSearchNew').value = '';
|
||||
document.getElementById('toolbar-device-locate').style.display = 'none';
|
||||
|
||||
// 根据当前过滤器状态重新显示设备
|
||||
var filterValue = document.getElementById('warningFilter').value;
|
||||
if (filterValue === 'all') {
|
||||
showAll();
|
||||
} else if (filterValue === 'warning1') {
|
||||
showWarning1();
|
||||
} else if (filterValue === 'warning2') {
|
||||
showWarning2();
|
||||
}
|
||||
}
|
||||
|
||||
function myLocation() {
|
||||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(function(position) {
|
||||
@ -976,14 +1081,17 @@
|
||||
}
|
||||
|
||||
function showAll() {
|
||||
document.getElementById('btn-all').classList.add('active');
|
||||
document.getElementById('btn-warning1').classList.remove('active');
|
||||
document.getElementById('btn-warning2').classList.remove('active');
|
||||
document.getElementById('btn-device-locate').classList.remove('active');
|
||||
document.getElementById('btn-device-locate').style.display = 'none';
|
||||
// 注释掉原有按钮操作
|
||||
// document.getElementById('btn-all').classList.add('active');
|
||||
// document.getElementById('btn-warning1').classList.remove('active');
|
||||
// document.getElementById('btn-warning2').classList.remove('active');
|
||||
// document.getElementById('btn-device-locate').classList.remove('active');
|
||||
// document.getElementById('btn-device-locate').style.display = 'none';
|
||||
|
||||
currentSearchedDevice = null;
|
||||
document.getElementById('deviceSearch').value = '';
|
||||
// document.getElementById('deviceSearch').value = '';
|
||||
document.getElementById('deviceSearchNew').value = '';
|
||||
document.getElementById('toolbar-device-locate').style.display = 'none';
|
||||
var savedMyLocationFeature = myLocationFeature;
|
||||
|
||||
vectorSource.clear();
|
||||
@ -1000,14 +1108,16 @@
|
||||
}
|
||||
|
||||
function showWarning1() {
|
||||
document.getElementById('btn-all').classList.remove('active');
|
||||
document.getElementById('btn-warning1').classList.add('active');
|
||||
document.getElementById('btn-warning2').classList.remove('active');
|
||||
document.getElementById('btn-device-locate').classList.remove('active');
|
||||
document.getElementById('btn-device-locate').style.display = 'none';
|
||||
// 注释掉原有按钮操作
|
||||
// document.getElementById('btn-all').classList.remove('active');
|
||||
// document.getElementById('btn-warning1').classList.add('active');
|
||||
// document.getElementById('btn-warning2').classList.remove('active');
|
||||
// document.getElementById('btn-device-locate').classList.remove('active');
|
||||
// document.getElementById('btn-device-locate').style.display = 'none';
|
||||
|
||||
currentSearchedDevice = null;
|
||||
document.getElementById('deviceSearch').value = '';
|
||||
// document.getElementById('deviceSearch').value = '';
|
||||
document.getElementById('deviceSearchNew').value = '';
|
||||
|
||||
var savedMyLocationFeature = myLocationFeature;
|
||||
|
||||
@ -1027,14 +1137,16 @@
|
||||
}
|
||||
|
||||
function showWarning2() {
|
||||
document.getElementById('btn-all').classList.remove('active');
|
||||
document.getElementById('btn-warning1').classList.remove('active');
|
||||
document.getElementById('btn-warning2').classList.add('active');
|
||||
document.getElementById('btn-device-locate').classList.remove('active');
|
||||
document.getElementById('btn-device-locate').style.display = 'none';
|
||||
// 注释掉原有按钮操作
|
||||
// document.getElementById('btn-all').classList.remove('active');
|
||||
// document.getElementById('btn-warning1').classList.remove('active');
|
||||
// document.getElementById('btn-warning2').classList.add('active');
|
||||
// document.getElementById('btn-device-locate').classList.remove('active');
|
||||
// document.getElementById('btn-device-locate').style.display = 'none';
|
||||
|
||||
currentSearchedDevice = null;
|
||||
document.getElementById('deviceSearch').value = '';
|
||||
// document.getElementById('deviceSearch').value = '';
|
||||
document.getElementById('deviceSearchNew').value = '';
|
||||
|
||||
var savedMyLocationFeature = myLocationFeature;
|
||||
|
||||
@ -1114,8 +1226,8 @@
|
||||
hideOrange();
|
||||
}
|
||||
|
||||
document.getElementById('btn-device-locate').style.display = 'none';
|
||||
updateFilterButtonsState(marker_state);
|
||||
// document.getElementById('btn-device-locate').style.display = 'none';
|
||||
// updateFilterButtonsState(marker_state);
|
||||
|
||||
return;
|
||||
}
|
||||
@ -1135,17 +1247,18 @@
|
||||
}
|
||||
|
||||
function updateFilterButtonsState(state) {
|
||||
document.getElementById('btn-all').classList.remove('active');
|
||||
document.getElementById('btn-warning1').classList.remove('active');
|
||||
document.getElementById('btn-warning2').classList.remove('active');
|
||||
// 注释掉原有按钮操作
|
||||
// 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');
|
||||
}
|
||||
// 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) {
|
||||
@ -1187,42 +1300,52 @@
|
||||
}
|
||||
}
|
||||
|
||||
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');
|
||||
// 注释掉原有按钮操作
|
||||
// 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');
|
||||
|
||||
// 更新新工具栏中的设备定位信息
|
||||
document.getElementById('current-device-id-new').textContent = deviceId;
|
||||
document.getElementById('toolbar-device-locate').style.display = 'flex';
|
||||
}
|
||||
layui.use(['form'], function(){
|
||||
var form = layui.form;
|
||||
|
||||
form.on('select(mapType)', function(data){
|
||||
// 注释掉原有表单控件事件
|
||||
// form.on('select(mapType)', function(data){
|
||||
// switchMapType(data.value);
|
||||
// });
|
||||
|
||||
form.on('select(mapTypeNew)', function(data){
|
||||
switchMapType(data.value);
|
||||
});
|
||||
|
||||
form.on('switch(showDeviceId)', function(data){
|
||||
showDeviceId = data.elem.checked;
|
||||
vectorLayer.changed();
|
||||
});
|
||||
// form.on('switch(showDeviceId)', function(data){
|
||||
// showDeviceId = data.elem.checked;
|
||||
// vectorLayer.changed();
|
||||
// });
|
||||
|
||||
// 聚合显示
|
||||
form.on('switch(showCluster)', function(data){
|
||||
showCluster = data.elem.checked;
|
||||
if (showCluster) {
|
||||
var zoom = map.getView().getZoom();
|
||||
if (zoom < maxZoomForClustering) {
|
||||
clusterLayer.setVisible(true);
|
||||
vectorLayer.setVisible(false);
|
||||
} else {
|
||||
clusterLayer.setVisible(false);
|
||||
vectorLayer.setVisible(true);
|
||||
}
|
||||
} else {
|
||||
clusterLayer.setVisible(false);
|
||||
vectorLayer.setVisible(true);
|
||||
}
|
||||
});
|
||||
// // 聚合显示
|
||||
// form.on('switch(showCluster)', function(data){
|
||||
// showCluster = data.elem.checked;
|
||||
// if (showCluster) {
|
||||
// var zoom = map.getView().getZoom();
|
||||
// if (zoom < maxZoomForClustering) {
|
||||
// clusterLayer.setVisible(true);
|
||||
// vectorLayer.setVisible(false);
|
||||
// } else {
|
||||
// clusterLayer.setVisible(false);
|
||||
// vectorLayer.setVisible(true);
|
||||
// }
|
||||
// } else {
|
||||
// clusterLayer.setVisible(false);
|
||||
// vectorLayer.setVisible(true);
|
||||
// }
|
||||
// });
|
||||
|
||||
initialize();
|
||||
showAll();
|
||||
@ -1241,6 +1364,73 @@
|
||||
content: '../page/gnss_q_status?query=' + status_type,
|
||||
});
|
||||
}
|
||||
|
||||
// 新工具栏的事件处理函数
|
||||
function onWarningFilterChange() {
|
||||
var filterValue = document.getElementById('warningFilter').value;
|
||||
|
||||
// 重置按钮状态 (注释掉原有按钮操作)
|
||||
// document.getElementById('btn-all').classList.remove('active');
|
||||
// document.getElementById('btn-warning1').classList.remove('active');
|
||||
// document.getElementById('btn-warning2').classList.remove('active');
|
||||
// document.getElementById('btn-device-locate').classList.remove('active');
|
||||
// document.getElementById('btn-device-locate').style.display = 'none';
|
||||
|
||||
// 清除搜索状态
|
||||
currentSearchedDevice = null;
|
||||
// document.getElementById('deviceSearch').value = '';
|
||||
document.getElementById('deviceSearchNew').value = '';
|
||||
document.getElementById('toolbar-device-locate').style.display = 'none';
|
||||
|
||||
if (filterValue === 'all') {
|
||||
showAll();
|
||||
} else if (filterValue === 'warning1') {
|
||||
showWarning1();
|
||||
} else if (filterValue === 'warning2') {
|
||||
showWarning2();
|
||||
}
|
||||
}
|
||||
|
||||
function onDisplayOptionsChange() {
|
||||
var optionValue = document.getElementById('displayOptions').value;
|
||||
|
||||
switch(optionValue) {
|
||||
case 'both':
|
||||
showDeviceId = true;
|
||||
showCluster = true;
|
||||
break;
|
||||
case 'device':
|
||||
showDeviceId = true;
|
||||
showCluster = false;
|
||||
break;
|
||||
case 'cluster':
|
||||
showDeviceId = false;
|
||||
showCluster = true;
|
||||
break;
|
||||
case 'none':
|
||||
showDeviceId = false;
|
||||
showCluster = false;
|
||||
break;
|
||||
}
|
||||
|
||||
// 更新图层可见性
|
||||
var zoom = map.getView().getZoom();
|
||||
if (showCluster) {
|
||||
if (zoom >= maxZoomForClustering) {
|
||||
clusterLayer.setVisible(false);
|
||||
vectorLayer.setVisible(true);
|
||||
} else {
|
||||
clusterLayer.setVisible(true);
|
||||
vectorLayer.setVisible(false);
|
||||
}
|
||||
} else {
|
||||
clusterLayer.setVisible(false);
|
||||
vectorLayer.setVisible(true);
|
||||
}
|
||||
|
||||
// 强制更新样式
|
||||
vectorLayer.changed();
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user