From bdeb478a24bf25a76d80b4f316a4fffbe9da24f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=8A=B2=E6=9D=BE?= <chenjinsong@zdjizhi.com>
Date: Mon, 18 Jan 2021 19:47:21 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dpanel=E6=9C=80?=
 =?UTF-8?q?=E5=BA=95=E4=B8=8Bchart=E4=BA=92=E5=8A=A8=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E4=B8=8D=E5=85=A8=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/charts/chart-alert-list.vue    |  3 +++
 .../src/components/charts/chart-list.vue      | 27 +++++++++++++++++--
 .../components/charts/chart-single-stat.vue   |  6 ++++-
 .../src/components/charts/chart-table.vue     |  6 ++++-
 .../src/components/charts/chart-url.vue       |  5 ++++
 .../components/charts/line-chart-block.vue    |  6 ++++-
 .../src/components/charts/text-chart.vue      |  6 ++++-
 7 files changed, 53 insertions(+), 6 deletions(-)

diff --git a/nezha-fronted/src/components/charts/chart-alert-list.vue b/nezha-fronted/src/components/charts/chart-alert-list.vue
index dcfb2152a..5b52219f9 100644
--- a/nezha-fronted/src/components/charts/chart-alert-list.vue
+++ b/nezha-fronted/src/components/charts/chart-alert-list.vue
@@ -318,6 +318,9 @@ export default {
         handler(n,o){
           this.panelIdInner=n
         }
+      },
+      dropdownMenuShow(n) {
+        this.$emit("dropmenu-change", n);
       }
     },
     methods: {
diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index b7bfc11eb..94368a21c 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -47,7 +47,7 @@
   }
 </style>
 <template>
-  <div class="list-width"  id="listContainer"><!--v-drag-->
+  <div class="list-width"  id="listContainer" ref="listContainer"><!--v-drag-->
 
     <span class="temp-dom"></span>
 
@@ -66,7 +66,7 @@
                  animation: 150,
                  handle: '.chart-title'
                }"  >
-      <div v-for="(item, index) in dataList" :key="item.id" :id="'chart-' + item.id" :name="item.title" :class="{'drag-disabled': !draggable,'chartBox':true}" v-show="!item.isHide">
+      <div :class="{'drag-disabled': !draggable,'chartBox':true}" :id="'chart-' + item.id" :key="item.id" :name="item.title" :ref="'chart' + item.id" :style="{marginBottom: extraMarginBottom}" v-for="(item, index) in dataList" v-show="!item.isHide">
         <line-chart-block v-if="item.type === 'line' || item.type === 'bar' ||item.type == 'stackArea' || item.type === 4" :key="'inner' + item.id"
                           :from="from" :ref="'editChart'+item.id" :temp-dom="tempDom"
                           @on-refresh-data="refreshChart"
@@ -77,6 +77,7 @@
                           :panel-id="filter.panelId"
                           :is-lock="panelLock"
                           :chart-index="index"
+                          @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
                           :chart-data="item"></line-chart-block>
 
         <chart-single-stat  :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'singleStat'"
@@ -89,6 +90,7 @@
                      :chart-data="item"
                      :is-lock="panelLock"
                      :panel-id="filter.panelId"
+                     @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
                      :chart-index="index"></chart-single-stat>
 
         <chart-table  :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'table'"
@@ -101,6 +103,7 @@
                       :is-lock="panelLock"
                       :panel-id="filter.panelId"
                       :chart-data="item"
+                      @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
                       :chart-index="index"></chart-table>
 
         <chart-url  :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'url'"
@@ -113,6 +116,7 @@
                      @on-edit-chart-block="editData"
                      :panel-id="filter.panelId"
                      :chart-data="item"
+                      @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
                      :chart-index="index"></chart-url>
 
         <chart-detail  v-if="item.type === 'assetInfo' || item.type == 'projectInfo' || item.type == 'endpointInfo' || item.type == 'alertRuleInfo'" :ref="'editChart'+item.id" :key="'inner' + item.id"
@@ -121,6 +125,7 @@
                           @on-refresh-data="refreshChart"
                           :is-lock="panelLock"
                           :chart-data="item"
+                          @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
                           :editChartId="'editChartId' + item.id"
         ></chart-detail>
 
@@ -130,6 +135,7 @@
                     @on-duplicate-chart-block="duplicateChart"
                     @on-drag-chart="editChartForDrag"
                     @on-edit-chart-block="editData"
+                    @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
                     :is-lock="panelLock"
                     :panel-id="filter.panelId"
                     :chart-data="item"
@@ -149,6 +155,7 @@
                           @on-duplicate-chart-block="duplicateChart"
                           @on-drag-chart="editChartForDrag"
                           @on-edit-chart-block="editData"
+                          @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
         ></chart-alert-list>
       </div>
    </draggable>
@@ -201,6 +208,7 @@
           start: '',
           end: '',
         },
+        extraMarginBottom: 0, //dom额外的margin
         panelId: '',
         timer: null,
         dataTotalList:[],//懒加载：总记录数
@@ -218,6 +226,21 @@
       };
     },
     methods: {
+      dropmenuChange(id, show) {
+        if (show) {
+          let chart = this.$refs["chart" + id][0];
+          let container = this.$refs.listContainer;
+          let heightDifference = container.offsetHeight - chart.offsetTop;
+          if (heightDifference < 235) {
+            this.extraMarginBottom = 235-heightDifference;
+            this.$nextTick(() => {
+              container.scrollTop = container.offsetHeight;
+            });
+          }
+        } else {
+          this.extraMarginBottom = 0;
+        }
+      },
       tempDomInit() {
         let span = document.querySelector(".temp-dom");
         this.tempDom.width = span.offsetWidth;
diff --git a/nezha-fronted/src/components/charts/chart-single-stat.vue b/nezha-fronted/src/components/charts/chart-single-stat.vue
index 987f3581e..7e194167e 100644
--- a/nezha-fronted/src/components/charts/chart-single-stat.vue
+++ b/nezha-fronted/src/components/charts/chart-single-stat.vue
@@ -143,7 +143,11 @@ export default {
   created() {
   },
   computed: {},
-    watch: {},
+    watch: {
+      dropdownMenuShow(n) {
+        this.$emit("dropmenu-change", n);
+      }
+    },
     methods: {
       startResize(e) {
         let vm = this;
diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue
index 60a549ff6..0cb2d9a67 100644
--- a/nezha-fronted/src/components/charts/chart-table.vue
+++ b/nezha-fronted/src/components/charts/chart-table.vue
@@ -225,7 +225,11 @@
       this.screenPageObj.pageSize = this.pageSizes[0];
     },
     computed: {},
-    watch: {},
+    watch: {
+      dropdownMenuShow(n) {
+        this.$emit("dropmenu-change", n);
+      }
+    },
     methods: {
       pageNo(val) {
         this.pageObj.pageNo = val;
diff --git a/nezha-fronted/src/components/charts/chart-url.vue b/nezha-fronted/src/components/charts/chart-url.vue
index cf94d8d08..56d4d55ed 100644
--- a/nezha-fronted/src/components/charts/chart-url.vue
+++ b/nezha-fronted/src/components/charts/chart-url.vue
@@ -291,6 +291,11 @@ export default {
       });
     },
   },
+  watch: {
+    dropdownMenuShow(n) {
+      this.$emit("dropmenu-change", n);
+    }
+  },
   mounted() {
     this.firstLoad = false;
   },
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index f5a018892..311747015 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -299,7 +299,11 @@
         screenLegendOptions:[],*/
       };
     },
-    watch: {},
+    watch: {
+      dropdownMenuShow(n) {
+        this.$emit("dropmenu-change", n);
+      }
+    },
     methods: {
       startResize(e) {
         let vm = this;
diff --git a/nezha-fronted/src/components/charts/text-chart.vue b/nezha-fronted/src/components/charts/text-chart.vue
index 9b85226a6..e0abb2952 100644
--- a/nezha-fronted/src/components/charts/text-chart.vue
+++ b/nezha-fronted/src/components/charts/text-chart.vue
@@ -108,7 +108,11 @@
     created() {
     },
     computed: {},
-    watch: {},
+    watch: {
+      dropdownMenuShow(n) {
+        this.$emit("dropmenu-change", n);
+      }
+    },
     methods: {
       startResize(e) {
         let vm = this;