|
|
@@ -70,6 +70,9 @@ export default {
|
|
|
isComponentDestroyed: false,
|
|
|
drawSeq: 0,
|
|
|
driving: null,
|
|
|
+ infoCloseTimer: null,
|
|
|
+ activeInfoWindowId: null,
|
|
|
+ isInfoWindowHovered: false,
|
|
|
// 状态类型配置
|
|
|
statusConfig: [
|
|
|
{ name: "中心计划", color: "#004CDE", type: "normal" },
|
|
|
@@ -156,6 +159,12 @@ export default {
|
|
|
// 5. 清理其他引用
|
|
|
this.AMap = null;
|
|
|
this.driving = null;
|
|
|
+ if (this.infoCloseTimer) {
|
|
|
+ clearTimeout(this.infoCloseTimer);
|
|
|
+ this.infoCloseTimer = null;
|
|
|
+ }
|
|
|
+ this.activeInfoWindowId = null;
|
|
|
+ this.isInfoWindowHovered = false;
|
|
|
},
|
|
|
computed: {
|
|
|
isAllSelected() {
|
|
|
@@ -683,11 +692,21 @@ export default {
|
|
|
|
|
|
marker.on('click', (e) => {
|
|
|
if (!this.isComponentDestroyed) {
|
|
|
- this.openLightInfo(e.target.getExtData(), e.lnglat);
|
|
|
this.$emit('map-crossing-click', e.target.getExtData(), e.lnglat);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
+ marker.on('mouseover', (e) => {
|
|
|
+ if (this.isComponentDestroyed) return;
|
|
|
+ this.cancelCloseInfoWindow();
|
|
|
+ this.openLightInfo(e.target.getExtData(), e.lnglat);
|
|
|
+ });
|
|
|
+
|
|
|
+ marker.on('mouseout', () => {
|
|
|
+ if (this.isComponentDestroyed) return;
|
|
|
+ this.scheduleCloseInfoWindow();
|
|
|
+ });
|
|
|
+
|
|
|
return marker;
|
|
|
} catch (e) {
|
|
|
console.warn('创建标记时出错:', e);
|
|
|
@@ -699,6 +718,7 @@ export default {
|
|
|
if (!this.isMapReady()) return;
|
|
|
|
|
|
const infoWindowId = `info-window-${Date.now()}`;
|
|
|
+ this.activeInfoWindowId = infoWindowId;
|
|
|
const isAbnormal = ["离线", "降级", "故障"].includes(data.name);
|
|
|
const deviceStatusText = isAbnormal ? data.name : '正常';
|
|
|
const alarmInfoText = isAbnormal ? this.getAlarmInfoText(data.name) : '';
|
|
|
@@ -749,17 +769,48 @@ export default {
|
|
|
this.infoWindow.setContent(content);
|
|
|
this.infoWindow.open(this.map, position);
|
|
|
|
|
|
- // 添加关闭按钮事件监听器
|
|
|
setTimeout(() => {
|
|
|
+ if (this.activeInfoWindowId !== infoWindowId) return;
|
|
|
const closeBtn = document.querySelector(`#${infoWindowId} .close-btn`);
|
|
|
if (closeBtn) {
|
|
|
closeBtn.addEventListener('click', () => {
|
|
|
if (this.infoWindow) this.infoWindow.close();
|
|
|
});
|
|
|
}
|
|
|
+
|
|
|
+ const root = document.querySelector(`#${infoWindowId}`);
|
|
|
+ if (root) {
|
|
|
+ root.addEventListener('mouseenter', () => {
|
|
|
+ if (this.activeInfoWindowId !== infoWindowId) return;
|
|
|
+ this.isInfoWindowHovered = true;
|
|
|
+ this.cancelCloseInfoWindow();
|
|
|
+ });
|
|
|
+ root.addEventListener('mouseleave', () => {
|
|
|
+ if (this.activeInfoWindowId !== infoWindowId) return;
|
|
|
+ this.isInfoWindowHovered = false;
|
|
|
+ this.scheduleCloseInfoWindow();
|
|
|
+ });
|
|
|
+ }
|
|
|
}, 100);
|
|
|
},
|
|
|
|
|
|
+ cancelCloseInfoWindow() {
|
|
|
+ if (this.infoCloseTimer) {
|
|
|
+ clearTimeout(this.infoCloseTimer);
|
|
|
+ this.infoCloseTimer = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ scheduleCloseInfoWindow() {
|
|
|
+ this.cancelCloseInfoWindow();
|
|
|
+ this.infoCloseTimer = setTimeout(() => {
|
|
|
+ if (this.isComponentDestroyed) return;
|
|
|
+ if (this.isInfoWindowHovered) return;
|
|
|
+ if (this.infoWindow) this.infoWindow.close();
|
|
|
+ this.activeInfoWindowId = null;
|
|
|
+ }, 160);
|
|
|
+ },
|
|
|
+
|
|
|
getAlarmInfoText(statusName) {
|
|
|
if (statusName === '离线') return '通讯中断设备离线';
|
|
|
if (statusName === '降级') return '降级定周期控制';
|