From f571f9d6c95f743be2f008be6e9dd88e0e8e50ab Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Tue, 14 Dec 2021 17:05:59 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BC=98=E5=8C=96panel=20chart=20?=
 =?UTF-8?q?=E7=9A=84=E6=98=BE=E7=A4=BA=E4=BB=A5=E5=8F=8Agroup=E5=86=85?=
 =?UTF-8?q?=E9=83=A8=E9=AB=98=E5=BA=A6=E6=9C=AA=E6=92=91=E5=BC=80=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/chart/chart/tools.js       | 31 ++++++++++++++++++-
 .../src/components/chart/chartList.vue        | 26 +++++++++++++---
 .../src/components/chart/chartMixin.js        |  3 ++
 nezha-fronted/src/store/panel.js              |  8 +++--
 4 files changed, 60 insertions(+), 8 deletions(-)

diff --git a/nezha-fronted/src/components/chart/chart/tools.js b/nezha-fronted/src/components/chart/chart/tools.js
index 9d2a9b3b1..ae71eddd1 100644
--- a/nezha-fronted/src/components/chart/chart/tools.js
+++ b/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 = [
diff --git a/nezha-fronted/src/components/chart/chartList.vue b/nezha-fronted/src/components/chart/chartList.vue
index 4c0b67594..07be13144 100644
--- a/nezha-fronted/src/components/chart/chartList.vue
+++ b/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
         })
       }
diff --git a/nezha-fronted/src/components/chart/chartMixin.js b/nezha-fronted/src/components/chart/chartMixin.js
index 67abf3396..31acead6b 100644
--- a/nezha-fronted/src/components/chart/chartMixin.js
+++ b/nezha-fronted/src/components/chart/chartMixin.js
@@ -168,6 +168,9 @@ export default {
           })
         }, 300)
       }
+    },
+    resize () {
+      getChart(this.chartId) && getChart(this.chartId).resize()
     }
   },
   watch: {
diff --git a/nezha-fronted/src/store/panel.js b/nezha-fronted/src/store/panel.js
index 79b1ee0f6..ad364714e 100644
--- a/nezha-fronted/src/store/panel.js
+++ b/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: {