feat: 优化页面
This commit is contained in:
parent
a4cf6130c3
commit
4425fcd7e6
@ -67,39 +67,9 @@
|
|||||||
ul li {
|
ul li {
|
||||||
list-style: none;
|
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 {
|
.layuimini-main {
|
||||||
height: calc(100vh - 40px);
|
height: 96vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
@ -129,65 +99,7 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
position: relative;
|
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 {
|
.device-overview-bar {
|
||||||
@ -200,6 +112,86 @@
|
|||||||
color: #333;
|
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 {
|
.overview-stats {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
@ -283,11 +275,7 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.map-control-card {
|
|
||||||
position: static;
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.device-overview-bar {
|
.device-overview-bar {
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
@ -329,12 +317,55 @@
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-wrap {
|
|
||||||
|
|
||||||
|
/* 移动端工具栏适配 */
|
||||||
|
.map-toolbar {
|
||||||
position: static;
|
position: static;
|
||||||
margin: 0;
|
transform: none;
|
||||||
padding: 8px;
|
left: auto;
|
||||||
|
margin: 8px;
|
||||||
margin-bottom: 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>
|
</style>
|
||||||
@ -393,18 +424,12 @@
|
|||||||
|
|
||||||
<div class="map-wrapper">
|
<div class="map-wrapper">
|
||||||
<div class="map-card">
|
<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 id="map-container">
|
||||||
<div class="map-control-card">
|
<!-- 新的地图工具栏 -->
|
||||||
<div class="map-controls">
|
<div class="map-toolbar">
|
||||||
<form class="layui-form">
|
<div class="toolbar-item">
|
||||||
<div class="layui-form-item">
|
<select id="mapTypeSelectNew" class="toolbar-select" lay-filter="mapTypeNew" onchange="onMapTypeChange()">
|
||||||
<select id="mapTypeSelect" lay-filter="mapType">
|
|
||||||
<option value="tianditu_terrain_hybrid" selected>天地图-地形混合</option>
|
<option value="tianditu_terrain_hybrid" selected>天地图-地形混合</option>
|
||||||
<option value="tianditu_satellite">天地图-卫星影像</option>
|
<option value="tianditu_satellite">天地图-卫星影像</option>
|
||||||
<option value="tianditu_normal">天地图-矢量</option>
|
<option value="tianditu_normal">天地图-矢量</option>
|
||||||
@ -413,21 +438,42 @@
|
|||||||
<option value="amap">高德-矢量</option>
|
<option value="amap">高德-矢量</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</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>
|
||||||
<div class="search-box">
|
|
||||||
<input type="text" id="deviceSearch" placeholder="输入设备编号搜索">
|
<div class="toolbar-divider"></div>
|
||||||
<button onclick="searchDevice()">搜索</button>
|
|
||||||
|
<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>
|
||||||
<div class="switch-box">
|
|
||||||
<form class="layui-form">
|
<div class="toolbar-divider"></div>
|
||||||
<div class="layui-form-item" style="margin-bottom: 0;">
|
|
||||||
<input type="checkbox" name="showDeviceId" lay-skin="switch" lay-text="显示设备信息" lay-filter="showDeviceId" checked>
|
<div class="toolbar-item">
|
||||||
<input type="checkbox" name="showCluster" lay-skin="switch" lay-text="设备集群显示" lay-filter="showCluster" checked>
|
<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>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -753,7 +799,7 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
var initialMapType = document.getElementById('mapTypeSelect').value;
|
var initialMapType = document.getElementById('mapTypeSelectNew').value;
|
||||||
currentBaseLayer = mapLayers[initialMapType];
|
currentBaseLayer = mapLayers[initialMapType];
|
||||||
|
|
||||||
map = new ol.Map({
|
map = new ol.Map({
|
||||||
@ -875,7 +921,7 @@
|
|||||||
for (var i = 0; i < deviceList.length; i++) {
|
for (var i = 0; i < deviceList.length; i++) {
|
||||||
var device = deviceList[i];
|
var device = deviceList[i];
|
||||||
var mapCoordinates;
|
var mapCoordinates;
|
||||||
var currentMapType = document.getElementById('mapTypeSelect').value;
|
var currentMapType = document.getElementById('mapTypeSelectNew').value;
|
||||||
if (currentMapType === 'amap' || currentMapType === 'amap_satellite') {
|
if (currentMapType === 'amap' || currentMapType === 'amap_satellite') {
|
||||||
// 高德地图 WGS84 转换为 GCJ-02
|
// 高德地图 WGS84 转换为 GCJ-02
|
||||||
var gcjCoord = transform(device.latitude, device.longitude);
|
var gcjCoord = transform(device.latitude, device.longitude);
|
||||||
@ -922,6 +968,65 @@
|
|||||||
vectorLayer.changed();
|
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() {
|
function myLocation() {
|
||||||
if (navigator.geolocation) {
|
if (navigator.geolocation) {
|
||||||
navigator.geolocation.getCurrentPosition(function(position) {
|
navigator.geolocation.getCurrentPosition(function(position) {
|
||||||
@ -976,14 +1081,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function showAll() {
|
function showAll() {
|
||||||
document.getElementById('btn-all').classList.add('active');
|
// 注释掉原有按钮操作
|
||||||
document.getElementById('btn-warning1').classList.remove('active');
|
// document.getElementById('btn-all').classList.add('active');
|
||||||
document.getElementById('btn-warning2').classList.remove('active');
|
// document.getElementById('btn-warning1').classList.remove('active');
|
||||||
document.getElementById('btn-device-locate').classList.remove('active');
|
// document.getElementById('btn-warning2').classList.remove('active');
|
||||||
document.getElementById('btn-device-locate').style.display = 'none';
|
// document.getElementById('btn-device-locate').classList.remove('active');
|
||||||
|
// document.getElementById('btn-device-locate').style.display = 'none';
|
||||||
|
|
||||||
currentSearchedDevice = null;
|
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;
|
var savedMyLocationFeature = myLocationFeature;
|
||||||
|
|
||||||
vectorSource.clear();
|
vectorSource.clear();
|
||||||
@ -1000,14 +1108,16 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function showWarning1() {
|
function showWarning1() {
|
||||||
document.getElementById('btn-all').classList.remove('active');
|
// 注释掉原有按钮操作
|
||||||
document.getElementById('btn-warning1').classList.add('active');
|
// document.getElementById('btn-all').classList.remove('active');
|
||||||
document.getElementById('btn-warning2').classList.remove('active');
|
// document.getElementById('btn-warning1').classList.add('active');
|
||||||
document.getElementById('btn-device-locate').classList.remove('active');
|
// document.getElementById('btn-warning2').classList.remove('active');
|
||||||
document.getElementById('btn-device-locate').style.display = 'none';
|
// document.getElementById('btn-device-locate').classList.remove('active');
|
||||||
|
// document.getElementById('btn-device-locate').style.display = 'none';
|
||||||
|
|
||||||
currentSearchedDevice = null;
|
currentSearchedDevice = null;
|
||||||
document.getElementById('deviceSearch').value = '';
|
// document.getElementById('deviceSearch').value = '';
|
||||||
|
document.getElementById('deviceSearchNew').value = '';
|
||||||
|
|
||||||
var savedMyLocationFeature = myLocationFeature;
|
var savedMyLocationFeature = myLocationFeature;
|
||||||
|
|
||||||
@ -1027,14 +1137,16 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function showWarning2() {
|
function showWarning2() {
|
||||||
document.getElementById('btn-all').classList.remove('active');
|
// 注释掉原有按钮操作
|
||||||
document.getElementById('btn-warning1').classList.remove('active');
|
// document.getElementById('btn-all').classList.remove('active');
|
||||||
document.getElementById('btn-warning2').classList.add('active');
|
// document.getElementById('btn-warning1').classList.remove('active');
|
||||||
document.getElementById('btn-device-locate').classList.remove('active');
|
// document.getElementById('btn-warning2').classList.add('active');
|
||||||
document.getElementById('btn-device-locate').style.display = 'none';
|
// document.getElementById('btn-device-locate').classList.remove('active');
|
||||||
|
// document.getElementById('btn-device-locate').style.display = 'none';
|
||||||
|
|
||||||
currentSearchedDevice = null;
|
currentSearchedDevice = null;
|
||||||
document.getElementById('deviceSearch').value = '';
|
// document.getElementById('deviceSearch').value = '';
|
||||||
|
document.getElementById('deviceSearchNew').value = '';
|
||||||
|
|
||||||
var savedMyLocationFeature = myLocationFeature;
|
var savedMyLocationFeature = myLocationFeature;
|
||||||
|
|
||||||
@ -1114,8 +1226,8 @@
|
|||||||
hideOrange();
|
hideOrange();
|
||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById('btn-device-locate').style.display = 'none';
|
// document.getElementById('btn-device-locate').style.display = 'none';
|
||||||
updateFilterButtonsState(marker_state);
|
// updateFilterButtonsState(marker_state);
|
||||||
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -1135,17 +1247,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function updateFilterButtonsState(state) {
|
function updateFilterButtonsState(state) {
|
||||||
document.getElementById('btn-all').classList.remove('active');
|
// 注释掉原有按钮操作
|
||||||
document.getElementById('btn-warning1').classList.remove('active');
|
// document.getElementById('btn-all').classList.remove('active');
|
||||||
document.getElementById('btn-warning2').classList.remove('active');
|
// document.getElementById('btn-warning1').classList.remove('active');
|
||||||
|
// document.getElementById('btn-warning2').classList.remove('active');
|
||||||
|
|
||||||
if (state === 1) {
|
// if (state === 1) {
|
||||||
document.getElementById('btn-all').classList.add('active');
|
// document.getElementById('btn-all').classList.add('active');
|
||||||
} else if (state === 2) {
|
// } else if (state === 2) {
|
||||||
document.getElementById('btn-warning1').classList.add('active');
|
// document.getElementById('btn-warning1').classList.add('active');
|
||||||
} else if (state === 3) {
|
// } else if (state === 3) {
|
||||||
document.getElementById('btn-warning2').classList.add('active');
|
// document.getElementById('btn-warning2').classList.add('active');
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
function filterByDeviceId(deviceId) {
|
function filterByDeviceId(deviceId) {
|
||||||
@ -1187,42 +1300,52 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById('current-device-id').textContent = deviceId;
|
// 注释掉原有按钮操作
|
||||||
document.getElementById('btn-device-locate').style.display = 'block';
|
// document.getElementById('current-device-id').textContent = deviceId;
|
||||||
document.getElementById('btn-device-locate').classList.add('active');
|
// document.getElementById('btn-device-locate').style.display = 'block';
|
||||||
document.getElementById('btn-all').classList.remove('active');
|
// document.getElementById('btn-device-locate').classList.add('active');
|
||||||
document.getElementById('btn-warning1').classList.remove('active');
|
// document.getElementById('btn-all').classList.remove('active');
|
||||||
document.getElementById('btn-warning2').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(){
|
layui.use(['form'], function(){
|
||||||
var form = layui.form;
|
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);
|
switchMapType(data.value);
|
||||||
});
|
});
|
||||||
|
|
||||||
form.on('switch(showDeviceId)', function(data){
|
// form.on('switch(showDeviceId)', function(data){
|
||||||
showDeviceId = data.elem.checked;
|
// showDeviceId = data.elem.checked;
|
||||||
vectorLayer.changed();
|
// vectorLayer.changed();
|
||||||
});
|
// });
|
||||||
|
|
||||||
// 聚合显示
|
// // 聚合显示
|
||||||
form.on('switch(showCluster)', function(data){
|
// form.on('switch(showCluster)', function(data){
|
||||||
showCluster = data.elem.checked;
|
// showCluster = data.elem.checked;
|
||||||
if (showCluster) {
|
// if (showCluster) {
|
||||||
var zoom = map.getView().getZoom();
|
// var zoom = map.getView().getZoom();
|
||||||
if (zoom < maxZoomForClustering) {
|
// if (zoom < maxZoomForClustering) {
|
||||||
clusterLayer.setVisible(true);
|
// clusterLayer.setVisible(true);
|
||||||
vectorLayer.setVisible(false);
|
// vectorLayer.setVisible(false);
|
||||||
} else {
|
// } else {
|
||||||
clusterLayer.setVisible(false);
|
// clusterLayer.setVisible(false);
|
||||||
vectorLayer.setVisible(true);
|
// vectorLayer.setVisible(true);
|
||||||
}
|
// }
|
||||||
} else {
|
// } else {
|
||||||
clusterLayer.setVisible(false);
|
// clusterLayer.setVisible(false);
|
||||||
vectorLayer.setVisible(true);
|
// vectorLayer.setVisible(true);
|
||||||
}
|
// }
|
||||||
});
|
// });
|
||||||
|
|
||||||
initialize();
|
initialize();
|
||||||
showAll();
|
showAll();
|
||||||
@ -1241,6 +1364,73 @@
|
|||||||
content: '../page/gnss_q_status?query=' + status_type,
|
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>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user