废危车辆修改提交
This commit is contained in:
978184212@qq.com
parent
5e63145598
commit
d4636bc3f3
|
|
@ -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.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;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue