From dd7ba10a3398b18164123428555c37fadf93bd2f Mon Sep 17 00:00:00 2001 From: wangwenrui Date: Wed, 11 Nov 2020 19:13:01 +0800 Subject: [PATCH] =?UTF-8?q?fix:=E6=89=A9=E5=A4=A7overview=E5=9C=B0?= =?UTF-8?q?=E5=9B=BE=E9=BC=A0=E6=A0=87=E7=9A=84=E6=82=AC=E6=B5=AE=E8=8C=83?= =?UTF-8?q?=E5=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../page/dashboard/overview/overview2.vue | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue index ced71c315..04c6814db 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue +++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue @@ -881,23 +881,26 @@ }else{ symbolSize=smallScatter; } + let shadowMarker=null; let marker=null; if(dcInfo.state==='ON'){ let hasAlert=dcStat.alertP1!=0||dcStat.alertP2!=0||dcStat.alertP3!=0||dcStat.assetPingDown!=0||dcStat.endpointDown!=0||dcStat.promDown!=0; - marker=L.circleMarker([dcInfo.latitude,dcInfo.longitude], {color: hasAlert?'#DE5D3F':'#23BF9A',opacity:0.42,fillColor: hasAlert?'#DE5D3F':'#23BF9A',fillOpacity: 0.5, radius: symbolSize,className:hasAlert?'error-item':''}); - marker.bindTooltip(this.mapTooltipFormatter(dcStat), {sticky: false, pane: "myPane", direction: "left", data: dcStat}); + shadowMarker=L.circleMarker([dcInfo.latitude,dcInfo.longitude], {opacity:0,fillOpacity: 0, radius: symbolSize+10}); + marker=L.circleMarker([dcInfo.latitude,dcInfo.longitude], {interactive:false,color: hasAlert?'#DE5D3F':'#23BF9A',opacity:0.42,fillColor: hasAlert?'#DE5D3F':'#23BF9A',fillOpacity: 0.5, radius: symbolSize,className:hasAlert?'real-marker error-item':'real-marker '}); + shadowMarker.bindTooltip(this.mapTooltipFormatter(dcStat), {sticky: false, pane: "myPane", direction: "left", data: dcStat}); } else{ - marker=L.circleMarker([dcInfo.latitude,dcInfo.longitude], {color: '#010101',opacity:0.35,fillColor: '#010101',fillOpacity: 0.35, radius: symbolSize}); + marker=L.circleMarker([dcInfo.latitude,dcInfo.longitude], {color: '#010101',opacity:0.35,fillColor: '#010101',fillOpacity: 0.35, radius: symbolSize+5}); marker.bindTooltip(this.mapTooltipFormatter(dcStat), {sticky: false, pane: "myPane", direction: "left", data: dcStat}); } - marker.on("mouseover", (param) => { + shadowMarker.on("mouseover", (param) => { //console.info(param); let pane = document.querySelector(".leaflet-pane.leaflet-my-pane"); let point = param.containerPoint; let event = param.originalEvent; - this.tooltip.x = event.clientX+point.x-event.layerX; + this.tooltip.x = event.clientX+point.x-event.layerX - 5; this.tooltip.y = event.clientY+point.y-event.layerY; }); + shadowMarker.addTo(this.map) marker.addTo(this.map); } } @@ -1510,6 +1513,9 @@ animation: error-animation 1s infinite ease-in-out; animation-direction:normal; } + .real-marker{ + pointer-events: none; + } .error-color{ }