废危车辆修改提交

src/pages/Home/index.vue

@@ -198,9 +198,12 @@
             <img src="@/assets/image/liuliang.png" class="xcdimg" alt="">
             <span class="scdlist_tit">微功率雷达监测</span>
           </div>
-          <div class="scdlist" @click="switchIcon('vehicle')">
+          <!-- 危废车辆信息按钮 - 点击切换显示/隐藏 -->
+          <div class="scdlist" :class="{ 'scdlist-active': showVehiclePoints }" @click="switchIcon('vehicle')">
             <img src="@/assets/image/vehicle.png" class="xcdimg" alt="">
             <span class="scdlist_tit">危废车辆信息</span>
+            <span v-if="showVehiclePoints" class="vehicle-status-dot active-dot">●</span>
+            <span v-else class="vehicle-status-dot inactive-dot">○</span>
           </div>
         </div>
         
@@ -432,7 +435,7 @@
         </div>
       </el-dialog>
       
-      <!-- 危废车辆菜单 - 自定义点击伸缩 -->
+      <!-- 危废车辆菜单 - 只保留车辆列表，去掉全部点位和关闭点位 -->
       <div class="vehicle-dropdown-wrapper">
         <div class="vehicle-dropdown-btn-dark" @click.stop="toggleVehicleDropdown">
           <span>危废车辆 ({{ vehicleList.length }})</span>
@@ -440,21 +443,6 @@
         </div>
         
         <div v-show="isVehicleDropdownOpen" class="vehicle-dropdown-menu-dark">
-          <!-- 全部点位选项 -->
-          <div class="vehicle-dropdown-item-dark" @click="showAllVehiclePoints">
-            <span class="vehicle-dot-dark all-dot">●</span>
-            <span style="flex:1; color: #FFD700;">📍 全部点位</span>
-            <span style="font-size:12px;color:#4a8ba8;">({{ vehicleList.length }})</span>
-          </div>
-          
-          <!-- 关闭点位选项 -->
-          <div class="vehicle-dropdown-item-dark" @click="hideAllVehiclePoints">
-            <span class="vehicle-dot-dark close-dot">●</span>
-            <span style="flex:1; color: #ff6b6b;">✕ 关闭点位</span>
-          </div>
-          
-          <div class="vehicle-dropdown-divider"></div>
-          
           <!-- 车辆列表 -->
           <div 
             v-for="(item, index) in vehicleList"
@@ -528,8 +516,9 @@ export default {
       markersOther: [],
       markersFlowmeter: [],
       markersVehicle: [],
-      vehicleMarkerMap: new Map(), // 存储车辆id和marker的映射
+      vehicleMarkerMap: new Map(),
       lastClickIcon: '',
+      showVehiclePoints: false, // 控制危废车辆点位显示
       urlimg: 'https://fxnsp.sxcooh.com/lh-api/sys/common/static/',
       mapTypeFlag: true,
       nowTime: '',
@@ -664,16 +653,29 @@ export default {
       this.isVehicleDropdownOpen = !this.isVehicleDropdownOpen;
     },
     
-    // 显示全部点位 - 使用veLat和veLong
+    // ==================== 危废车辆位置相关方法 ====================
+    
+    // 切换危废车辆点位显示/隐藏（通过图例按钮触发）
+    toggleVehiclePoints() {
+      this.showVehiclePoints = !this.showVehiclePoints;
+      if (this.showVehiclePoints) {
+        this.showAllVehiclePoints();
+      } else {
+        this.hideAllVehiclePoints();
+        // 恢复地图视图到显示其他所有标记
+        this.resetMapView();
+      }
+    },
+    
+    // 显示全部点位
     showAllVehiclePoints() {
-      // 先清除之前的所有车辆标记
+      // 清除之前的所有车辆标记
       this.markersVehicle.forEach(marker => {
         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.showVehiclePoints = false;
-            this.showAllVehiclePoints();
-          });
         } 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': '微功率雷达监测点',
+          'flowmeter': '微功率雷达监测点'
-          'vehicle': '危废车辆'
         };
         this.$message.success(`找到 ${arr.length} 个${typeNames[flag] || '标记点'}`);
       } else {
@@ -1532,8 +1553,7 @@ export default {
           'orient': '农田污染监测站',
           'watershed': '小流域监测站',
           'soil': '长期定位监测站',
-          'flowmeter': '微功率雷达监测点',
+          'flowmeter': '微功率雷达监测点'
-          'vehicle': '危废车辆'
         };
         this.$message.warning(`暂无${typeNames[flag] || '标记点'}数据`);
       }
@@ -2034,9 +2054,9 @@ a:hover {
 /* ========== 危废车辆下拉菜单样式 ========== */
 .vehicle-dropdown-wrapper {
   position: fixed;
-  bottom: 2vw;
+  bottom: 17vw;
-  right: 2vw;
+  right: 24%;
-  z-index: 999;
+  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 {
+.scdlist-active .scdlist_tit {
-  color: #ff6b6b;
+  color: #00d4ff !important;
 }
 
-.vehicle-dropdown-divider {
+.vehicle-status-dot {
-  height: 1px;
+  font-size: 14px;
-  margin: 4px 12px;
+  margin-left: 4px;
-  background: rgba(0, 212, 255, 0.1);
+}
+
+.active-dot {
+  color: #00ff88;
+}
+
+.inactive-dot {
+  color: #666;
 }
 </style>