From d4636bc3f32bc9cc35a2bf14e8a44bb35c32d8fc Mon Sep 17 00:00:00 2001 From: "978184212@qq.com" <978184212@qq.com> Date: Wed, 5 Aug 2026 15:25:50 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BA=9F=E5=8D=B1=E8=BD=A6=E8=BE=86=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Home/index.vue | 183 ++++++++++++++++++++++++++------------- 1 file changed, 123 insertions(+), 60 deletions(-) diff --git a/src/pages/Home/index.vue b/src/pages/Home/index.vue index a104988..24259a8 100644 --- a/src/pages/Home/index.vue +++ b/src/pages/Home/index.vue @@ -198,9 +198,12 @@ 微功率雷达监测 -
+ +
危废车辆信息 + ● + ○
@@ -432,7 +435,7 @@ - +
危废车辆 ({{ vehicleList.length }}) @@ -440,21 +443,6 @@
- -
- ● - 📍 全部点位 - ({{ vehicleList.length }}) -
- - -
- ● - ✕ 关闭点位 -
- -
-
{ marker.setMap(null); }); this.markersVehicle = []; this.vehicleMarkerMap.clear(); - // 重新从vehicleList添加所有车辆点位 let addedCount = 0; this.vehicleList.forEach(item => { const lat = parseFloat(item.veLat); @@ -692,11 +694,9 @@ export default { extData: { vehicleInfo: item } }); - // 点击标记弹出信息窗口 marker.on('click', (e) => { const data = e.target.getExtData(); if (data && data.vehicleInfo) { - // 先获取车辆位置点 const point = { jingdu: data.vehicleInfo.veLong, weidu: data.vehicleInfo.veLat, @@ -714,12 +714,10 @@ export default { }); if (addedCount > 0) { - this.aMap.setFitView(this.markersVehicle, false, [200, 500, 360, 360], 16); - this.$message.success(`显示全部 ${addedCount} 个危废车辆点位`); + this.$message.success(`显示 ${addedCount} 个危废车辆点位`); } else { this.$message.warning('暂无有效的危废车辆点位数据'); } - this.isVehicleDropdownOpen = false; }, // 关闭点位显示 @@ -729,22 +727,38 @@ export default { }); this.markersVehicle = []; this.vehicleMarkerMap.clear(); - // 同时清除车辆位置标记 this.clearVehicleMarker(); - this.$message.info('已关闭危废车辆点位显示'); - this.isVehicleDropdownOpen = false; }, - // ==================== 危废车辆位置相关方法 ==================== + // 重置地图视图 - 显示其他所有标记 + resetMapView() { + if (!this.aMap) return; + // 收集所有其他类型的标记 + let allMarkers = []; + allMarkers = allMarkers.concat(this.markersOrient); + allMarkers = allMarkers.concat(this.markersSoil); + allMarkers = allMarkers.concat(this.markersFlowmeter); + + if (allMarkers.length > 0) { + this.aMap.setFitView(allMarkers, false, [130, 380, 480, 480], 16); + } else { + this.aMap.setFitView(null, false, [130, 380, 480, 480], 16); + } + }, // 危化车辆点击 - 从下拉列表选择 handleVehicleSelect(item) { this.currentVehicleInfo = item; - // 清除之前的标记 + // 如果车辆点位没有显示，先显示 + if (!this.showVehiclePoints) { + this.showVehiclePoints = true; + this.showAllVehiclePoints(); + } + this.clearVehicleMarker(); - const vehicleName = item.vePlate || item.plateNumber || '车辆'; + const vehicleName = item.veNotes || item.vePlate || item.plateNumber || '车辆'; // 如果有经纬度直接定位 if (item.veLat && item.veLong) { @@ -951,7 +965,6 @@ export default { if (infoWindowEl) { infoWindowEl.addEventListener('click', (e) => { if (e.target.closest('.vehicle-info-window')) { - // 获取车辆GPS数据 this.getVehicleGpsData(vehicleInfo); } }); @@ -973,7 +986,6 @@ export default { return; } - // 构建车辆数据 const vehicleData = { gpsId: vehicleInfo.gpsId, veNotes: vehicleInfo.veNotes || vehicleInfo.vePlate || '车辆', @@ -1051,10 +1063,8 @@ export default { }).then(res => { if (res.code === 200 && res.result) { this.vehicleList = res.result.records || []; - // 默认显示全部点位 - this.$nextTick(() => { - this.showAllVehiclePoints(); - }); + // 默认不显示点位 + this.showVehiclePoints = false; } else { this.vehicleList = []; } @@ -1489,10 +1499,23 @@ export default { }, switchIcon(flag) { let that = this; + + // 处理危废车辆的特殊逻辑 - 切换显示/隐藏 + if (flag === 'vehicle') { + this.toggleVehiclePoints(); + // 更新lastClickIcon用于样式 + if (this.showVehiclePoints) { + this.lastClickIcon = 'vehicle'; + } else { + this.lastClickIcon = ''; + } + return; + } + + // 其他图例的处理逻辑 let arr = []; if (this.lastClickIcon == flag) { this.lastClickIcon = '' - // 取消选中，恢复视图 that.aMap.setFitView(null, false, [100, 400, 360, 360], 16); return; } else { @@ -1507,10 +1530,9 @@ export default { arr = this.markersSoil; } else if (flag == 'flowmeter') { arr = this.markersFlowmeter; - } else if (flag == 'vehicle') { - arr = this.markersVehicle; } } + if (arr && arr.length > 0) { arr.map(item => { item.setzIndex((that.lastZIndex+=2)); @@ -1521,8 +1543,7 @@ export default { 'orient': '农田污染监测站', 'watershed': '小流域监测站', 'soil': '长期定位监测站', - 'flowmeter': '微功率雷达监测点', - 'vehicle': '危废车辆' + 'flowmeter': '微功率雷达监测点' }; this.$message.success(`找到 ${arr.length} 个${typeNames[flag] || '标记点'}`); } else { @@ -1532,8 +1553,7 @@ export default { 'orient': '农田污染监测站', 'watershed': '小流域监测站', 'soil': '长期定位监测站', - 'flowmeter': '微功率雷达监测点', - 'vehicle': '危废车辆' + 'flowmeter': '微功率雷达监测点' }; this.$message.warning(`暂无${typeNames[flag] || '标记点'}数据`); } @@ -2034,9 +2054,9 @@ a:hover { /* ========== 危废车辆下拉菜单样式 ========== */ .vehicle-dropdown-wrapper { position: fixed; - bottom: 2vw; - right: 2vw; - z-index: 999; + bottom: 17vw; + right: 24%; + z-index: 9; width: 220px; } @@ -2077,23 +2097,55 @@ a:hover { border-radius: 8px; padding: 6px 0; max-height: 300px; - overflow-y: auto; + overflow-y: scroll !important; /* 强制显示滚动条 */ backdrop-filter: blur(10px); box-shadow: 0 0 40px rgba(0, 0, 0, 0.5); } +/* 滚动条整体样式 */ .vehicle-dropdown-menu-dark::-webkit-scrollbar { - width: 4px; + width: 10px; + height: 10px; + background: rgba(0, 20, 40, 0.5); + border-radius: 4px; } +/* 滚动条轨道 */ .vehicle-dropdown-menu-dark::-webkit-scrollbar-track { - background: rgba(0, 212, 255, 0.05); + background: rgba(0, 20, 40, 0.6); border-radius: 4px; + margin: 4px 2px; } +/* 滚动条滑块 */ .vehicle-dropdown-menu-dark::-webkit-scrollbar-thumb { - background: rgba(0, 212, 255, 0.3); + background: rgba(0, 212, 255, 0.6); border-radius: 4px; + border: 1px solid rgba(0, 212, 255, 0.3); + min-height: 50px; + transition: all 0.3s ease; +} + +/* 滚动条滑块悬停 */ +.vehicle-dropdown-menu-dark::-webkit-scrollbar-thumb:hover { + background: rgba(0, 212, 255, 0.9); + box-shadow: 0 0 20px rgba(0, 212, 255, 0.4); +} + +/* 滚动条滑块激活 */ +.vehicle-dropdown-menu-dark::-webkit-scrollbar-thumb:active { + background: #00d4ff; +} + +/* 滚动条角落 */ +.vehicle-dropdown-menu-dark::-webkit-scrollbar-corner { + background: transparent; +} + +/* Firefox 滚动条样式 */ +.vehicle-dropdown-menu-dark { + scrollbar-width: thin; + scrollbar-color: rgba(0, 212, 255, 0.6) rgba(0, 20, 40, 0.6); } .vehicle-dropdown-item-dark { @@ -2118,18 +2170,29 @@ a:hover { margin-right: 4px; } -.vehicle-dropdown-item-dark .all-dot { - color: #FFD700; +/* ========== 图例按钮激活状态 ========== */ +.scdlist-active { + background: rgba(0, 212, 255, 0.2) !important; + border: 1px solid #00d4ff !important; + border-radius: 4px; + box-shadow: 0 0 20px rgba(0, 212, 255, 0.3); } -.vehicle-dropdown-item-dark .close-dot { - color: #ff6b6b; +.scdlist-active .scdlist_tit { + color: #00d4ff !important; } -.vehicle-dropdown-divider { - height: 1px; - margin: 4px 12px; - background: rgba(0, 212, 255, 0.1); +.vehicle-status-dot { + font-size: 14px; + margin-left: 4px; +} + +.active-dot { + color: #00ff88; +} + +.inactive-dot { + color: #666; }