From b78b29398a080a57808b9b51f727bfcbc8f03b76 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 16:29:44 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-421=20perf:=20overview=E5=9C=B0=E5=9B=BE?=
 =?UTF-8?q?=E6=82=AC=E6=B5=AE=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../page/dashboard/overview/chartConfig.vue   |  40 ++-
 .../page/dashboard/overview/overview2.scss    | 181 ++++++++++
 .../page/dashboard/overview/overview2.vue     | 315 +++++++-----------
 3 files changed, 334 insertions(+), 202 deletions(-)

diff --git a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
index 9c110ee89..151697b60 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
@@ -442,6 +442,43 @@
       },
       series: null,
     };
+    const tooltipPieOption = {
+      color: ["#60C6B4", "#EEA694"],
+      title: {
+        show: true,
+        textStyle: {
+          color: "#333333",
+          fontSize: 14,
+        },
+        top: 8,
+        left: 8
+      },
+      legend: {
+        data: [],
+        show: true,
+        left: 70,
+        top: 44,
+        icon: "circle",
+        itemHeight: 4,
+        orient: "vertical",
+        itemGap: 6,
+        textStyle: {
+          fontSize: 12,
+          padding: [0, 0, 0, -10]
+        },
+      },
+      series: [
+        {
+          type: "pie",
+          center: [40, 63],
+          radius: [14, 22],
+          data: [],
+          label: {
+            show: false
+          }
+        }
+      ]
+    };
     function createTempTimes(){
       let times=[];
       for(let i=0;i<10;i++){
@@ -460,10 +497,11 @@
       ruleBar: {name: 'ruleMessage', option: alertMessageBarByRule},
       assetBar: {name: 'assetMessage', option: alertMessageBarByAsset},
       noData:{name:'noData',option:noDataOption},
+      tooltipPie: {option: tooltipPieOption},
     };
     export default {
       getOption:function(type){
-        return Object.assign({},chartTypes[type].option);
+        return JSON.parse(JSON.stringify(chartTypes[type].option));
       },
       setMap:function(map){
         mapOptions.geo.map=map
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
index e7ee564ac..b220a4114 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
@@ -366,3 +366,184 @@
   top: -5px;
   left: 0px;
 }
+
+.tooltip{
+  opacity: 0.99;
+  background: rgba(255,255,255,0.94);
+  border-radius: 2px;
+  padding: 10px 20px;
+  box-sizing: border-box;
+  width: 390px;
+  height: 285px;
+}
+.tooltip--title {
+  color: #333333;
+  font-size: 14px;
+  font-weight: 600;
+  padding-bottom: 10px;
+}
+.tooltip--row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  position: relative;
+
+  .legend-value {
+    font-size: 12px;
+    color: #333333;
+    position: absolute;
+    left: 132px;
+    top: 45px;
+  }
+  .legend-value + .legend-value {
+    left: 310px;
+  }
+
+  .tooltip-asset {
+    width: 240px;
+    height: 124px;
+    border: 1px solid #DEDEDE;
+    border-radius: 2px;
+
+    .tooltip-asset--title {
+      padding: 0 10px;
+      height: 24px;
+      line-height: 24px;
+      font-size: 14px;
+      color: #333333;
+      display: flex;
+      justify-content: space-between;
+      border-bottom: 1px solid #DEDEDE;
+      box-sizing: border-box;
+    }
+    .tooltip-asset--title span:first-of-type {
+      font-weight: 600;
+    }
+
+    .tooltip-asset--row {
+      display: flex;
+      height: 50px;
+      box-sizing: border-box;
+      border-bottom: 1px solid #DEDEDE;
+    }
+    .tooltip-asset--row + .tooltip-asset--row {
+      border-bottom: none;
+    }
+    .tooltip-asset--row>div {
+      line-height: 25px;
+    }
+    .tooltip-asset--row>div:first-of-type {
+      width: 70px;
+      padding-left: 10px;
+      line-height: 50px;
+      font-size: 14px;
+      border-right: 1px solid #DEDEDE;
+      color: #333333;
+      box-sizing: border-box;
+    }
+    .tooltip-asset--sub-row {
+      padding-left: 10px;
+      font-size: 13px;
+      color: #333333;
+      line-height: 25px;
+      display: flex;
+
+      .sub-row--label {
+        width: 94px;
+      }
+      .sub-row--value {
+        position: relative;
+
+        .sign {
+          position: absolute;
+          height: 5px;
+          width: 5px;
+          border-radius: 50%;
+          top: 50%;
+          transform: translateY(-50%);
+          left: 0;
+        }
+        .red-sign {
+          background-color: $danger-color;
+        }
+        .green-sign {
+          background-color: $success-color;
+        }
+
+        span {
+          position: absolute;
+          left: 11px;
+        }
+      }
+    }
+  }
+  .tooltip-alert {
+    width: 96px;
+    height: 125px;
+    box-shadow: 1px 2px 4px 0 rgba(0,0,0,0.12), -1px 1px 4px -1px rgba(205,205,205,0.47);
+
+    .tooltip-alert--title {
+      height: 36px;
+      line-height: 36px;
+      font-size: 14px;
+      padding: 0 10px;
+    }
+    .tooltip-alert--title span:first-of-type {
+      font-weight: 600;
+    }
+    .tooltip-alert--title span:last-of-type {
+      padding-left: 10px;
+    }
+    .tooltip-alert--row {
+      padding: 0 10px;
+      margin-bottom: 10px;
+      height: 20px;
+      font-size: 12px;
+      display: flex;
+
+      .row--label {
+        width: 36px;
+        border-radius: 4px 0 0 4px;
+        color: white;
+        text-align: center;
+      }
+      .row--label__p1 {
+        background-color: #F2866E;
+        border-color: #F2866E;
+      }
+      .row--label__p2 {
+        background-color: #F89984;
+        border-color: #F89984;
+      }
+      .row--label__p3 {
+        background-color: #F7BA78;
+        border-color: #F7BA78;
+      }
+      .row--value {
+        width: 40px;
+        border: 1px solid;
+        border-radius: 0 4px 4px 0;
+        text-align: center;
+      }
+      .row--value__p1 {
+        color: #F2866E;
+        border-color: #F2866E;
+      }
+      .row--value__p2 {
+        color: #F89984;
+        border-color: #F89984;
+      }
+      .row--value__p3 {
+        color: #F7BA78;
+        border-color: #F7BA78;
+      }
+    }
+  }
+
+  .tooltip-chart {
+    width: calc(50% - 7px);
+    height: 100px;
+    box-shadow: 1px 2px 4px 0 rgba(0,0,0,0.12), -1px 1px 4px -1px rgba(205,205,205,0.47);
+  }
+}
+
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
index c831b4f69..55bfcdb0f 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
@@ -115,6 +115,8 @@
           <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>
@@ -199,8 +201,14 @@
   import * as L from 'leaflet'
   import icon from 'leaflet/dist/images/marker-icon.png';
   import iconShadow from 'leaflet/dist/images/marker-shadow.png';
+  import echarts from "echarts";
+  import chartConfig from './chartConfig'
 
   var timeout; //第三行第三个图的dropdown下拉菜单timeout
+
+  var tooltipEndpointChart;
+  var tooltipPrometheusChart;
+
   export default {
     name: "overview2",
     components:{
@@ -312,7 +320,6 @@
           this.queryAlertMessageData(),
           this.queryAlertRuleData(),
           this.queryAlertTrendData(),
-          // this.queryMapChartGeoJson();
           this.initMap(),
           this.queryAlertStatByRule(),
           this.queryAlertStatByAsset(),
@@ -730,10 +737,37 @@
           if(mapConfig&&this.map){
             loadPromise=this.loadDataCenterMapData()
           }
-        })
+        });
         return loadPromise;
       },
+      initTooltipChart(param) {
+        let data = param.tooltip.options.data;
+        //console.info(data);
+        tooltipEndpointChart = echarts.init(document.querySelector("#tooltip-chart--endpoint"));
+        tooltipPrometheusChart = echarts.init(document.querySelector("#tooltip-chart--prometheus"));
+        let endpointOption = chartConfig.getOption("tooltipPie"),
+            prometheusOption = chartConfig.getOption("tooltipPie");
+        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].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}
+        ];
+        prometheusOption.title.text = "Prometheus";
+        prometheusOption.legend.data = [this.$t("dashboard.overview.asset.pingUp"), this.$t("dashboard.overview.asset.pingDown")];
+        tooltipEndpointChart.setOption(endpointOption, true);
+        tooltipPrometheusChart.setOption(prometheusOption, true);
+        /*setTimeout(function() {
+          tooltipEndpointChart.setOption(endpointOption);
+          tooltipPrometheusChart.setOption(prometheusOption);
+        }, 100);*/
+      },
       loadMapConfig:function(){
+        let vm = this;
         return new Promise(resolve => {
           let DefaultIcon = L.icon({
             iconUrl: icon,
@@ -750,6 +784,10 @@
                 attributionControl:false,
                 zoomControl:false,
               }).setView([mapConfig.longitude,mapConfig.latitude],mapConfig.zoom);
+              map.createPane("myPane", document.querySelector(".my-pane"));
+              map.on("tooltipopen", function(param) {
+                vm.initTooltipChart(param);
+              });
               this.map = map;
 
               L.tileLayer(
@@ -856,9 +894,8 @@
                     let hasAlert=dcStat.alertP1!=0||dcStat.alertP2!=0||dcStat.alertP3!=0||dcStat.assetPingDown!=0||dcStat.endpointDown!=0||dcStat.promDown!=0;
 
                     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:true})
-                    marker.addTo(this.map)
-
+                    marker.bindTooltip(this.mapTooltipFormatter(dcStat), {sticky: false, pane: "myPane", direction: "left", data: dcStat});
+                    marker.addTo(this.map);
                   }
                 }
               }
@@ -1112,31 +1149,6 @@
           this.queryAlertStatByRule();
         }
       },
-      /*selectDatacenter(dc) {
-        let index = this.trendSearchParam.dc.indexOf(parseInt(dc.id));
-        if (index == -1) {
-          this.trendSearchParam.dc.push(parseInt(dc.id));
-        } else {
-          this.trendSearchParam.dc.splice(index, 1);
-        }
-        this.queryAlertTrendData();
-      },
-      selectTag(tag) {
-        let index = -1;
-        this.trendSearchParam.tag.some((item, i) => {
-          if (item.name == tag.name && item.value == tag.value) {
-            index = i;
-            return true;
-          }
-          return false;
-        });
-        if (index == -1) {
-          this.trendSearchParam.tag.push(tag);
-        } else {
-          this.trendSearchParam.tag.splice(index, 1);
-        }
-        this.queryAlertTrendData();
-      },*/
       alertMessageChange(type) {
         this.bottom3DropdownShow = false;
         this.alertMessageShow = type;
@@ -1150,79 +1162,66 @@
       },
 
       mapTooltipFormatter(dcStat){
-        let tooltip=`
-            <div class="tooltip">
-                <div style="margin-left: 12px; color: black">${dcStat.name}</div>
-                <div class="flex-box">
-                   <div style="width: 60%;">
-                        <table  style="width: 100%;" class="tooltip-table">
-                            <tr ><td colspan="3"><div style="display: flex;justify-content: space-between"><div>${this.$t('dashboard.overview.mapTooltip.asset')}</div><div>${this.$t('dashboard.overview.mapTooltip.total')}: ${dcStat.assetTotal}</div></div></td></tr>
-                            <tr>
-                                <td rowspan="2">${this.$t('dashboard.overview.mapTooltip.state')}</td>
-                                <td >${this.$t('dashboard.overview.mapTooltip.inStock')}</td>
-                                <td >${dcStat.assetInStock}</td>
-                            </tr>
-                            <tr>
-                                <td >${this.$t('dashboard.overview.mapTooltip.outStock')}</td>
-                                <td >${dcStat.assetOutStock}</td>
-                            </tr>
-                            <tr>
-                                <td rowspan="2">${this.$t('dashboard.overview.mapTooltip.ping')}</td>
-                                <td >${this.$t('dashboard.overview.mapTooltip.active')}</td>
-                                <td >${dcStat.assetPingUp}</td>
-                            </tr>
-                            <tr>
-                                <td >${this.$t('dashboard.overview.mapTooltip.inactive')}</td>
-                                <td ><span class="${dcStat.assetPingDown!=0?'error-color':''}">${dcStat.assetPingDown}</span></td>
-                            </tr>
-                            <tr>
-                                <td rowspan="3">${this.$t('dashboard.overview.mapTooltip.alert')}</td>
-                                <td >${this.$t('dashboard.overview.mapTooltip.P1')}</td>
-                                <td ><span class="${dcStat.alertP1!=0?'error-color':''}">${dcStat.alertP1}</span></td>
-                            </tr>
-                            <tr>
-                                <td >${this.$t('dashboard.overview.mapTooltip.P2')}</td>
-                                <td ><span class="${dcStat.alertP2!=0?'error-color':''}">${dcStat.alertP2}</span></td>
-                            </tr>
-                            <tr>
-                                <td >${this.$t('dashboard.overview.mapTooltip.P3')}</td>
-                                <td ><span class="${dcStat.alertP3!=0?'error-color':''}">${dcStat.alertP3}</span></td>
-                            </tr>
-                        </table>
-                   </div>
-                   <div style="width: 30%;" class="flex-box column-box">
-                      <div  >
-                        <table style="width: 100%;" class="tooltip-table">
-                            <tr><td colspan="2"><div style="display: flex;justify-content: space-between"><div>${this.$t('dashboard.overview.mapTooltip.endpoint')}</div><div>${this.$t('dashboard.overview.mapTooltip.total')}: ${dcStat.endpointTotal}</div></div></td></tr>
-                            <tr>
-                                <td>${this.$t('dashboard.overview.mapTooltip.up')}</td>
-                                <td>${dcStat.endpointUp}</td>
-                            </tr>
-                            <tr>
-                                <td>${this.$t('dashboard.overview.mapTooltip.down')}</td>
-                                <td><span class="${dcStat.endpointDown!=0?'error-color':''}">${dcStat.endpointDown}</span></td>
-                            </tr>
-                        </table>
-                      </div>
-                       <div >
-                           <table style="width: 100%;" class="tooltip-table">
-                            <tr><td colspan="2"><div style="display: flex;justify-content: space-between"><div>${this.$t('dashboard.overview.mapTooltip.prometheus')}</div><div>${this.$t('dashboard.overview.mapTooltip.total')}: ${dcStat.promTotal}</div></div></td></tr>
-                            <tr>
-                                <td>${this.$t('dashboard.overview.mapTooltip.up')}</td>
-                                <td>${dcStat.promUp}</td>
-                            </tr>
-                            <tr>
-                                <td>${this.$t('dashboard.overview.mapTooltip.down')}</td>
-                                <td><span class="${dcStat.promDown!=0?'error-color':''}">${dcStat.promDown}</span></td>
-                            </tr>
-                           </table>
-                        </div>
-                    </div>
+        return `<div class="tooltip">
+          <div class="tooltip--title">${dcStat.name}</div>
+          <div class="tooltip--row">
+            <div class="tooltip-asset">
+              <div class="tooltip-asset--title"><span>${this.$t('asset.asset')}</span><span>Total：${dcStat.assetTotal}</span></div>
+              <div class="tooltip-asset--row">
+                <div>${this.$t('asset.state')}</div>
+                <div class="tooltip-asset--sub-rows">
+                  <div class="tooltip-asset--sub-row">
+                    <div class="sub-row--label">${this.$t("asset.inStock")}</div>
+                    <div class="sub-row--value"><div class="sign green-sign"></div><span>${dcStat.assetInStock}</span></div>
+                  </div>
+                  <div class="tooltip-asset--sub-row">
+                    <div class="sub-row--label">${this.$t("asset.notInStock")}</div>
+                    <div class="sub-row--value"><div class="sign red-sign"></div><span>${dcStat.assetOutStock}</span></div>
+                  </div>
                 </div>
+              </div>
+              <div class="tooltip-asset--row">
+                <div>${this.$t('asset.left.ping')}</div>
+                <div class="tooltip-asset--sub-rows">
+                  <div class="tooltip-asset--sub-row">
+                    <div class="sub-row--label">${this.$t("dashboard.overview.asset.pingUp")}</div>
+                    <div class="sub-row--value"><div class="sign green-sign"></div><span>${dcStat.assetPingUp}</span></div>
+                  </div>
+                  <div class="tooltip-asset--sub-row">
+                    <div class="sub-row--label">${this.$t("dashboard.overview.asset.pingDown")}</div>
+                    <div class="sub-row--value"><div class="sign red-sign"></div><span>${dcStat.assetPingDown}</span></div>
+                  </div>
+                </div>
+              </div>
             </div>
-        `;
+            <div class="tooltip-alert">
+              <div class="tooltip-alert--title"><span>${this.$t("dashboard.overview.asset.alert")}</span><span>${dcStat.alertTotal}</span></div>
+              <div class="tooltip-alert--row">
+                <div class="row--label row--label__p1">P1</div><div class="row--value row--value__p1">${dcStat.alertP1}</div>
+              </div>
+              <div class="tooltip-alert--row">
+                <div class="row--label row--label__p2">P2</div><div class="row--value row--value__p2">${dcStat.alertP2}</div>
+              </div>
+              <div class="tooltip-alert--row">
+                <div class="row--label row--label__p3">P3</div><div class="row--value row--value__p3">${dcStat.alertP3}</div>
+              </div>
+            </div>
+          </div>
+          <div class="tooltip--row">
+            <div class="legend-value">
+              <div>${dcStat.endpointUp}</div>
+              <div>${dcStat.endpointDown}</div>
+            </div>
+            <div class="legend-value">
+              <div>${dcStat.promUp}</div>
+              <div>${dcStat.promDown}</div>
+            </div>
+            <div class="tooltip-chart" id="tooltip-chart--endpoint"></div>
+            <div class="tooltip-chart" id="tooltip-chart--prometheus"></div>
+          </div>
+        </div>`;
 
-        return tooltip;
+        //return tooltip;
       },
       simpleFormatter(params) {
         return `<div class="tooltip" style="min-width: unset;">${params.name}:&nbsp;${params.value}</div>`;
@@ -1458,70 +1457,7 @@
     },
     watch: {
       "trendSearchParam.select": function(n, o) {
-        /*console.info("n", n);
-        console.info("o", o);*/
         this.queryAlertTrendData();
-        /*let tempN = JSON.parse(JSON.stringify(n));
-        if (n.length == o.length || !this.trendSearchParam.watch) {
-          this.trendSearchParam.watch = true;
-          return false;
-        }
-        let isAdd = tempN.length > o.length ? true : false; //true是新增，false是减少
-        let difference = isAdd ? this.trendTool('difference', o, tempN) : this.trendTool('difference', tempN, o);
-        console.info("difference", difference);
-        if (difference[0][0].length == 1) {
-
-        } else if (difference[0][0].length == 2) {
-          if (isAdd) { //二级选中，三级全取消则全选中
-            let level3 = this.trendTool('sameLevel', difference[0][0], this.trafficData, 3);
-            if (level3.length > 0) {
-              let level2Index = this.trendTool('containArray', difference[0][0], tempN, 2); //二级的index
-              if (level2Index[0] != -1) {
-                for (let i = level3.length-1; i >= 0; i--) {
-                  tempN.splice(difference[0][1]+1, 0, level3[i]);
-                }
-                this.trendSearchParam.watch = false;
-              }
-            }
-          } else { //二级取消，三级有选中则全取消，无选中不变
-            let temp = JSON.parse(JSON.stringify(difference[0][0]));
-            temp.push("temp");
-            let indexes = this.trendTool('sameLevelActive', temp, tempN, 3);
-            //console.info("indexes", indexes);
-            if (indexes.length > 0) {
-              for (let i = indexes.length-1; i >= 0; i--) {
-                tempN.splice(indexes[i], 1);
-              }
-              this.trendSearchParam.watch = false;
-            }
-          }
-        } else if (difference[0][0].length == 3) {
-          if (isAdd) { //三级选中，二级取消则选中
-            let index = this.trendTool('containArray', [difference[0][0][0], difference[0][0][1]], tempN, 2); //二级的index
-            console.info("index", index);
-            if (index[0] == -1) {
-              tempN.splice(difference[0][1], 0, [difference[0][0][0], difference[0][0][1]]); //插入二级
-              //let afterIndex = this.trendTool('containArray', [difference[0][0][0], difference[0][0][1]], tempN, 2); //插入后的index
-              //console.info("afterIndex", afterIndex);
-              //this.trendTool('active', 2, index[1], true); //dom处理
-              this.trendSearchParam.watch = false;
-            }
-          } else { //三级取消，若同级全取消则二级取消
-            let indexes = this.trendTool('sameLevelActive', difference[0][0], tempN, 3);
-            //console.info("indexes", indexes);
-            if (indexes.length == 0) {
-              let level2Index = this.trendTool('containArray', [difference[0][0][0], difference[0][0][1]], tempN, 2);
-              //console.info("level2Index", level2Index);
-              if (level2Index[0] > -1) {
-                this.trendTool('active', 2, level2Index[1], false);
-                tempN.splice(level2Index[0], 1);
-                this.trendSearchParam.watch = false;
-              }
-            }
-          }
-        }
-        this.trendSearchParam.select = JSON.parse(JSON.stringify(tempN));
-        this.queryAlertTrendData();*/
       }
     },
     mounted() {
@@ -1531,11 +1467,12 @@
         this.setFreshDataTimer();
       })
 
-      /*window.onresize = () => {
+      window.onresize = () => {
+        let vm = this;
         setTimeout(() => {
-          this.$parent.$parent.update();
-        }, 100);
-      }*/
+          //vm.map.
+        }, 500);
+      }
     },
     destroyed() {
       clearInterval(this.freshDataTimer)
@@ -1546,40 +1483,7 @@
 
 <style lang="scss">
   @import "./overview2.scss";
-  .tooltip{
-    padding: 5px;
-    min-width: 500px;
-    background-color: rgba(255, 255, 255, 0.7);
-    box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);
-  }
-  .tooltip-table{
-    border-spacing: 0;
-    border-collapse: collapse;
-  }
-  .tooltip-table tr{
-    display: table-row;
-    vertical-align: inherit;
-  }
-  .tooltip-table td{
-    min-width: 0;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    text-overflow: ellipsis;
-    vertical-align: middle;
-    text-align: left;
-    border: 1px solid #ccc;
-    display: table-cell;
-    padding: 0 5px ;
-    color: black;
-  }
-  .flex-box{
-    display: flex;
-    justify-content: space-around;
-  }
-  .column-box{
-    flex-direction: column;
-    justify-content: space-between !important;
-  }
+
   .leaflet-control-zoom{
     border: 1px solid #E7EAED !important;
     box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77) !important;
@@ -1605,4 +1509,13 @@
   .error-color{
 
   }
+  .my-pane {
+    position: fixed;
+    width: 1px;
+    z-index: 9999;
+    height: 1px;
+    left: 0;
+    top: 9px;
+    background-color: transparent;
+  }
 </style>