From 8593ea8857ce5ac4aa78a9c4d82879cfccd3624b Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Mon, 14 Feb 2022 10:19:31 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-1559=20=20fix=EF=BC=9A=20v3.1=E7=89=88?=
 =?UTF-8?q?=E6=9C=ACoverview=20=E5=85=AD=E8=BE=B9=E5=9B=BE=20=E4=BD=8E?=
 =?UTF-8?q?=E5=88=86=E8=BE=A8=E7=8E=87=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/honeycomb/hexagonFigureSvg.vue     | 42 ++++++++++++++++++-
 1 file changed, 40 insertions(+), 2 deletions(-)

diff --git a/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue b/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue
index 6e02566d3..602ee8c34 100644
--- a/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue
+++ b/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue
@@ -266,8 +266,9 @@ export default {
           hexagonSvg.on('panStart', this.hexagonSvgPanStart)
           hexagonSvg.on('mousemove', this.hexagonMove)
           hexagonSvg.on('panEnd', this.hexagonSvgPanEnd)
-          let Rate = (this.$refs.box.offsetWidth / this.defaultBoxWidth)
-          Rate = (Rate > 0.2 ? Rate : 0.2)
+          this.getLayout()
+          const Rate = (this.$refs.box.offsetWidth / this.defaultBoxWidth)
+          // Rate = (Rate > 0.2 ? Rate : 0.2)
           this.windowRate = Rate
           this.hexagonEdge = (this.hexagonEdge / this.defaultRate) * Rate
           const fontSize = ((this.fontSize / this.defaultRate) * Rate)
@@ -294,6 +295,43 @@ export default {
         })
       })
     },
+    getLayout () {
+      this.boxWidth = this.$refs.box.offsetWidth
+      this.boxHeight = this.$refs.box.offsetHeight
+      return new Promise(resolve => {
+        let radius = 0
+        let col = 0
+        let row = 0
+        for (let i = 1; i <= this.hexagonData.length; i++) {
+          const cols = Math.ceil(this.hexagonData.length / i)
+          const hexaRadiusY = Math.ceil((this.boxHeight * 2) / (3 * i + 1))
+          let hexaRadiusX = ''
+          if (i === 1) {
+            hexaRadiusX = Math.ceil(this.boxWidth / (Math.sqrt(3) * cols))
+          } else {
+            hexaRadiusX = Math.ceil(this.boxWidth / (Math.sqrt(3) * cols + Math.sqrt(3) / 2))
+          }
+          const rateMax = hexaRadiusX > hexaRadiusY ? hexaRadiusY : hexaRadiusX
+          if (rateMax > radius) {
+            radius = rateMax
+            col = cols
+            row = i
+          }
+        }
+        if (this.hexagonData.length) {
+          while (col * row >= this.hexagonData.length) { // 避免出现空白
+            row--
+          }
+        }
+        row++
+        if (col === 1 || row === 1) { // 行 或 列有一个为1时 需要调换位置 显示才会好看
+          const temp = col
+          col = row
+          row = temp
+        }
+        resolve({ col, row, radius: radius })
+      })
+    },
     reload () {
       if (!document.hidden) {
         this.init()