From 46ff3533f3c4f44e58c7e29f9ccab164e0a190f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=8A=B2=E6=9D=BE?= <chenjinsong@zdjizhi.com>
Date: Wed, 21 Oct 2020 18:43:47 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-421=20perf:=20=E4=BF=AE=E5=A4=8D=E6=82=AC?=
 =?UTF-8?q?=E6=B5=AE=E6=A1=86=E4=BD=8D=E7=BD=AE=EF=BC=9B=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=9C=86=E5=BF=83=E6=95=B0=E6=8D=AE=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../page/dashboard/overview/chartConfig.vue   |  5 ++-
 .../page/dashboard/overview/overview2.scss    |  9 +++++
 .../page/dashboard/overview/overview2.vue     | 38 ++++++++++++++-----
 3 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
index 151697b60..781dccecc 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
@@ -474,7 +474,10 @@
           radius: [14, 22],
           data: [],
           label: {
-            show: false
+            show: true,
+            formatter: "",
+            color: "#666666",
+            position: "center",
           }
         }
       ]
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
index b220a4114..512595c78 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
@@ -376,6 +376,15 @@
   width: 390px;
   height: 285px;
 }
+.leaflet-pane.leaflet-my-pane {
+  position: absolute;
+  top: -150px;
+  left: -420px;
+
+  .leaflet-tooltip {
+    transform: unset !important;
+  }
+}
 .tooltip--title {
   color: #333333;
   font-size: 14px;
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
index 55bfcdb0f..e8cdf9106 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
@@ -1,5 +1,7 @@
 <template>
   <div class="overview" style="background-color: #f9f9f9;">
+    <!--自定义地图鼠标悬浮提示dom，避免被overflow：hidden裁剪-->
+    <div class="my-pane" :style="{'left': `${tooltip.x}px`, 'top': `${tooltip.y}px`}"></div>
     <!--标题-->
     <div class="overview-content-header">
       <div class="header-title" :class="{'hide-div':!isFullScreen}">{{systemName&&systemName != 'undefined'&&systemName != null?systemName: $t('dashboard.overview.contentTitle')}}</div>
@@ -115,8 +117,7 @@
           <div class="content-col-content">
             <!--<chart-box chart-type="map" :tooltip-formatter="mapTooltipFormatter" :map="map" ref="dataCenterMap" @is-loading="(isLoading)=>{this.mapLoading = isLoading}"></chart-box>-->
             <div id="map" style="height: 100%; width: 100%"></div>
-            <!--自定义地图鼠标悬浮提示dom，避免被overflow：hidden裁剪-->
-            <div class="my-pane"></div>
+
             <!--<div class="right-bottom-zoom">
               <div class="zoom-option" style="border-bottom: 1px solid #c5c8cb;" @click="zoomMap(1)"><span><i class="nz-icon nz-icon-enlarge"></i></span></div>
               <div class="zoom-option" @click="zoomMap(-1)"><span><i class="nz-icon nz-icon-narrow"></i></span></div>
@@ -268,7 +269,12 @@
         },
         system_server_time:null,
         freshDateTimer:null,
-        freshDataTimer:null
+        freshDataTimer:null,
+
+        tooltip: {
+          x: 0,
+          y: 0
+        }
       }
     },
     filters: {
@@ -747,12 +753,14 @@
         tooltipPrometheusChart = echarts.init(document.querySelector("#tooltip-chart--prometheus"));
         let endpointOption = chartConfig.getOption("tooltipPie"),
             prometheusOption = chartConfig.getOption("tooltipPie");
+        endpointOption.series[0].label.formatter = data.endpointTotal + "";
         endpointOption.series[0].data = [
           {name: this.$t("dashboard.overview.asset.pingUp"), value: data.endpointUp ? data.endpointUp : 0},
           {name: this.$t("dashboard.overview.asset.pingDown"), value: data.endpointDown ? data.endpointDown : 0}
         ];
         endpointOption.title.text = this.$t("project.endpoint.endpoint");
         endpointOption.legend.data = [this.$t("dashboard.overview.asset.pingUp"), this.$t("dashboard.overview.asset.pingDown")];
+        prometheusOption.series[0].label.formatter = data.promTotal + "";
         prometheusOption.series[0].data = [
           {name: this.$t("dashboard.overview.asset.pingUp"), value: data.promUp ? data.promUp : 0},
           {name: this.$t("dashboard.overview.asset.pingDown"), value: data.promDown ? data.promDown : 0}
@@ -788,6 +796,10 @@
               map.on("tooltipopen", function(param) {
                 vm.initTooltipChart(param);
               });
+              map.on("tooltipclose", function(param) {
+                tooltipEndpointChart && tooltipEndpointChart.clear();
+                tooltipPrometheusChart && tooltipPrometheusChart.clear();
+              });
               this.map = map;
 
               L.tileLayer(
@@ -895,6 +907,14 @@
 
                     let marker=L.circleMarker([areaInfo.latitude,areaInfo.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});
+                    marker.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.y = event.clientY+point.y-event.layerY;
+                    });
                     marker.addTo(this.map);
                   }
                 }
@@ -1453,7 +1473,7 @@
             }
           }
         }
-      }
+      },
     },
     watch: {
       "trendSearchParam.select": function(n, o) {
@@ -1472,11 +1492,11 @@
         setTimeout(() => {
           //vm.map.
         }, 500);
-      }
+      };
     },
     destroyed() {
-      clearInterval(this.freshDataTimer)
-      clearInterval(this.freshDateTimer)
+      clearInterval(this.freshDataTimer);
+      clearInterval(this.freshDateTimer);
     }
   }
 </script>
@@ -1512,10 +1532,8 @@
   .my-pane {
     position: fixed;
     width: 1px;
-    z-index: 9999;
+    z-index: 99999;
     height: 1px;
-    left: 0;
-    top: 9px;
     background-color: transparent;
   }
 </style>