NEZ-3389 fix: 当 Chart 位于dashboard 最后时，无法通过拖动调整高度rel-24.01.02

3 files changed, 15 insertions, 2 deletions

diff --git a/nezha-fronted/src/assets/css/components/chart/chart.scss b/nezha-fronted/src/assets/css/components/chart/chart.scss
index 4ccb9eec9..b3f366e5d 100644
--- a/nezha-fronted/src/assets/css/components/chart/chart.scss
+++ b/nezha-fronted/src/assets/css/components/chart/chart.scss
@@ -259,6 +259,7 @@
 
     .chart__canvas {
       flex: 1;
+      overflow: hidden;
     }
     &.nz-chart__component--bottom {
       flex-direction: column;
diff --git a/nezha-fronted/src/components/chart/chart/grid/GridItem.vue b/nezha-fronted/src/components/chart/chart/grid/GridItem.vue
index 8b15dca54..f0be6fccc 100644
--- a/nezha-fronted/src/components/chart/chart/grid/GridItem.vue
+++ b/nezha-fronted/src/components/chart/chart/grid/GridItem.vue
@@ -514,6 +514,7 @@ export default {
           newSize.height = pos.height
           this.resizing = newSize
           this.isResizing = true
+          this.$emit('resizestart')
           break
         }
         case 'resizemove': {
@@ -538,6 +539,7 @@ export default {
           //                        console.log("### resize end => " + JSON.stringify(newSize));
           this.resizing = null
           this.isResizing = false
+          this.$emit('resizeend')
           break
         }
       }
diff --git a/nezha-fronted/src/components/chart/chartList.vue b/nezha-fronted/src/components/chart/chartList.vue
index 8f6e19a5f..a11647594 100644
--- a/nezha-fronted/src/components/chart/chartList.vue
+++ b/nezha-fronted/src/components/chart/chartList.vue
@@ -17,7 +17,8 @@
       :vertical-compact="true"
       :use-css-transforms="false"
       :style="{
-        'margin-top': layoutMargintop
+        'margin-top': layoutMargintop,
+        'paddingBottom': layoutPaddingBottom,
       }"
     >
       <grid-item
@@ -45,6 +46,8 @@
         @moveEvent="moveEvent"
         @moved="movedEvent"
         @container-resized="containerResizedEvent"
+        @resizestart="resizestart"
+        @resizeend="resizeend"
       >
         <panel-chart
           :variablesInit="variablesInit"
@@ -192,7 +195,8 @@ export default {
       // 变量比较结果 图表是否显示/隐藏
       showHidden: {},
       tempList: [],
-      isPhone: false
+      isPhone: false,
+      layoutPaddingBottom: '20px'
     }
   },
   methods: {
@@ -250,6 +254,12 @@ export default {
         this.onScroll(this.scrollTop)
       }, 100)
     },
+    resizestart () {
+      this.layoutPaddingBottom = '80px'
+    },
+    resizeend () {
+      this.layoutPaddingBottom = '20px'
+    },
     moveEvent (i, newX, newY) {
       if (this.isGroup) {