fix：优化panel chart 的显示以及group内部高度未撑开的问题

nezha-fronted/src/components/chart/chart/tools.js

@@ -9,7 +9,7 @@ import {
   chartTimeSeriesAreaOption
 } from './options/chartTimeSeries'
 import chartTreemapOption from './options/chartTreemap'
-import {randomcolor} from "@/components/common/js/radomcolor/randomcolor";
+import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
 
 export function getOption (type) {
   let chartOption = null
@@ -109,6 +109,35 @@ export function getGroupHeight (arr) {
     return 1
   }
 }
+export function getLayoutPosition (arr) {
+  if (arr.length) {
+    let lastItem = []
+    let maxY = 0
+    arr.forEach((children, index) => {
+      if (maxY == children.y) {
+        lastItem.push(children)
+      } else if (maxY < children.y) {
+        maxY = children.y
+        lastItem = [children]
+      }
+    })
+    let maxX = 0
+    lastItem.forEach(last => {
+      if (maxX < last.x) {
+        maxX = last.x
+      }
+    })
+    return {
+      x: maxX,
+      y: maxY
+    }
+  } else {
+    return {
+      x: 0,
+      y: 0
+    }
+  }
+}
 
 export function initColor (colorNum = 20) {
   const colorList = [

nezha-fronted/src/components/chart/chartList.vue

@@ -2,6 +2,7 @@
   <div :id='`chartList${(isGroup ? "Group" : "") + timestamp}`' class="chart-list" :loading="gridLayoutLoading">
     <grid-layout
       ref="layout"
+      v-if="gridLayoutShow"
       :col-num="12"
       :maxRows="12"
       :is-draggable="!panelLock"
@@ -111,13 +112,16 @@ export default {
     },
     headerHPadding () {
       return this.$store.getters.getHeaderHPadding
+    },
+    rowHeight () {
+      return this.$store.getters.getRowHeight
     }
   },
   data () {
     return {
       fromRoute,
       gridLayoutLoading: false,
-      gridLayoutShow: true,
+      gridLayoutShow: false,
       filter: {}, // chart列表查询条件
       copyDataList: [],
       noData: false, // no data
@@ -144,7 +148,9 @@ export default {
         if (!this.isGroup) {
           const headerH = 50 / this.stepWidth
           const headerHPadding = 50 / this.stepWidth
-          this.$store.commit('setHeaderH', { headerH, headerHPadding })
+          this.$store.commit('setHeaderH', { headerH, headerHPadding, rowHeight: this.stepWidth })
+        } else {
+          this.stepWidth = this.rowHeight - (10 / 12)
         }
         const span = document.querySelector('.temp-dom')
         this.tempDom.width = span.offsetWidth
@@ -160,16 +166,24 @@ export default {
       // TODO 重新渲染图表，向后端发送put请求
       setTimeout(() => {
         this.$refs['chart' + i][0].resize()
+        // if (!this.isGroup) {
+        //   this.moveChart()
+        // } else {
+        //   bus.$emit('groupMove', this.copyDataList, this.groupInfo)
+        // }
+        this.$put('/visual/panel/chart/modify', {
+          id: i,
+          span: newW,
+          height: newH
+        })
       }, 100)
     },
     moveEvent (i, newX, newY) {
-      console.log(i)
       if (this.isGroup) {
 
       }
     },
     movedEvent (i, newX, newY) {
-      console.log(i)
       if (!this.isGroup) {
         this.moveChart()
       }
@@ -299,7 +313,9 @@ export default {
         }
         this.$nextTick(() => {
           this.copyDataList = JSON.parse(JSON.stringify(tempList))
-          this.gridLayoutShow = true
+          setTimeout(() => {
+            this.gridLayoutShow = true
+          })
           this.gridLayoutLoading = false
         })
       }

nezha-fronted/src/components/chart/chartMixin.js

@@ -168,6 +168,9 @@ export default {
           })
         }, 300)
       }
+    },
+    resize () {
+      getChart(this.chartId) && getChart(this.chartId).resize()
     }
   },
   watch: {

nezha-fronted/src/store/panel.js

@@ -8,7 +8,8 @@ const panel = {
     timeRange: [],
     nowTimeType: {},
     headerH: 0.5,
-    headerHPadding: 0.5
+    headerHPadding: 0.5,
+    rowHeight: 150
   },
   mutations: {
     setShowRightBox (state, flag) {
@@ -33,9 +34,9 @@ const panel = {
       state.nowTimeType = nowTimeType
     },
     setHeaderH (state, h) {
-      console.log(h)
       state.headerH = h.headerH
       state.headerHPadding = h.headerHPadding
+      state.rowHeight = h.rowHeight
     },
     cleanPanel (state) {
       state.showRightBox = false
@@ -72,6 +73,9 @@ const panel = {
     },
     getHeaderHPadding (state) {
       return state.headerHPadding
+    },
+    getRowHeight (state) {
+      return state.rowHeight
     }
   },
   actions: {