From 03f11c8283084f875247dbdd01584bc8c1056f12 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Mon, 13 Dec 2021 20:30:33 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=B7=BB=E5=8A=A0=20chart-group?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/chart/chart/chartGroup.vue |  3 +-
 .../chart/chart/chartTimeSeries.vue           |  3 +
 .../chart/chart/options/chartTreemap.js       |  1 +
 .../src/components/chart/chart/tools.js       | 24 ++++++++
 .../src/components/chart/chartHeader.vue      | 10 ++-
 .../src/components/chart/chartList.vue        | 61 ++++++++++++++++++-
 .../src/components/chart/chartMixin.js        |  1 +
 .../src/components/chart/panelChart.vue       | 36 ++++++++++-
 .../common/rightBox/chart/chartRightBox.vue   |  3 +
 .../rightBox/chart/otherChartConfig.vue       |  3 +-
 nezha-fronted/src/store/panel.js              | 18 +++++-
 11 files changed, 157 insertions(+), 6 deletions(-)

diff --git a/nezha-fronted/src/components/chart/chart/chartGroup.vue b/nezha-fronted/src/components/chart/chart/chartGroup.vue
index d7c6980e1..922ffa0dd 100644
--- a/nezha-fronted/src/components/chart/chart/chartGroup.vue
+++ b/nezha-fronted/src/components/chart/chart/chartGroup.vue
@@ -10,6 +10,7 @@
       :panel-lock="panelLock"
       :isGroup="true"
       :time-range="searchTime"
+      :groupInfo="chartInfo"
       @on-refresh-time="refreshTime"
       :loading="chartListLoading"
     ></chartList>
@@ -23,7 +24,7 @@ import chartFormat from '@/components/chart/chartFormat'
 export default {
   name: 'chart-group',
   props: {
-    panelLock: Boolean
+    panelLock: Boolean,
   },
   mixins: [chartMixin, chartFormat],
   computed: {
diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
index 229871576..80cba2f29 100644
--- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
@@ -244,6 +244,9 @@ export default {
         option.tooltip[0].formatter = self.tooltipFormatter(self.isStack)
         myChart.setOption(option)
       }
+    },
+    resize () {
+      getChart(this.chartId).resize()
     }
   },
   mounted () {
diff --git a/nezha-fronted/src/components/chart/chart/options/chartTreemap.js b/nezha-fronted/src/components/chart/chart/options/chartTreemap.js
index 55e8eec04..ef10ffeea 100644
--- a/nezha-fronted/src/components/chart/chart/options/chartTreemap.js
+++ b/nezha-fronted/src/components/chart/chart/options/chartTreemap.js
@@ -22,6 +22,7 @@ const chartTreemapOption = {
       type: 'treemap',
       visibleMin: 40,
       childrenVisibleMin: 40,
+      nodeClick: false,
       label: {
         show: true,
         position: 'inside',
diff --git a/nezha-fronted/src/components/chart/chart/tools.js b/nezha-fronted/src/components/chart/chart/tools.js
index 803dad732..567fb4214 100644
--- a/nezha-fronted/src/components/chart/chart/tools.js
+++ b/nezha-fronted/src/components/chart/chart/tools.js
@@ -83,6 +83,30 @@ export function isGroup (type) {
   return type === chartType.group
 }
 
+export function getGroupHeight (arr) {
+  if (arr.length) {
+    let lastItem = []
+    let maxY = 0
+    arr.forEach((children, index) => {
+      if (maxY == children.y) {
+        lastItem.push(children)
+      } else {
+        maxY = children.y
+        lastItem = [children]
+      }
+    })
+    let maxHeight = 0
+    lastItem.forEach(last => {
+      if (maxHeight < last.height) {
+        maxHeight = last.height
+      }
+    })
+    return maxHeight + maxY
+  } else {
+    return 1
+  }
+}
+
 export function initColor (colorNum = 20) {
   const colorList = [
     '#FF5200', '#3685FF', '#FF8D00', '#00DCA2',
diff --git a/nezha-fronted/src/components/chart/chartHeader.vue b/nezha-fronted/src/components/chart/chartHeader.vue
index fc85f7ee9..8e5cde1de 100644
--- a/nezha-fronted/src/components/chart/chartHeader.vue
+++ b/nezha-fronted/src/components/chart/chartHeader.vue
@@ -1,6 +1,7 @@
 <template>
   <div :class="{'chart-header--float': !chartInfo.param.showHeader}" class="chart-header">
-    <div class="chart-header__title">{{chartInfo.name}}</div>
+    <div class="chart-header__title" v-if="!isGroup">{{chartInfo.name}}</div>
+    <div class="chart-header__title" v-else @click="groupShow"> > {{chartInfo.name}}</div>
     <div class="chart-header__tools">
       <span v-if="chartInfo.remark" class="chart-header__tool">
         <el-tooltip :content="chartInfo.remark" effect="light" placement="top">
@@ -51,6 +52,10 @@ export default {
   props: {
     chartInfo: Object,
     from: String,
+    isGroup: {
+      type: Boolean,
+      default: false
+    },
     error: {
       type: String,
       default: ''
@@ -90,6 +95,9 @@ export default {
     },
     clickos () {
       this.dropdownMenuShow = false
+    },
+    groupShow () {
+      this.$emit('groupShow', !this.chartInfo.param.collapse)
     }
   }
 }
diff --git a/nezha-fronted/src/components/chart/chartList.vue b/nezha-fronted/src/components/chart/chartList.vue
index be781c6a0..242324b41 100644
--- a/nezha-fronted/src/components/chart/chartList.vue
+++ b/nezha-fronted/src/components/chart/chartList.vue
@@ -1,7 +1,7 @@
 <template>
   <div :id='`chartList${(isGroup ? "Group" : "") + timestamp}`' class="chart-list" :loading="gridLayoutLoading">
     <grid-layout
-      v-if="gridLayoutShow"
+      ref="layout"
       :col-num="12"
       :is-draggable="!panelLock"
       :is-resizable="!panelLock"
@@ -19,10 +19,13 @@
         :w="item.w"
         :x="item.x"
         :y="item.y"
+        :minH="headerH"
         dragAllowFrom=".chart-header"
         dragIgnoreFrom=".chart-header__tools"
         @resize="resizeEvent"
         @resized="resizedEvent"
+        @moveEvent="moveEvent"
+        @movedEvent="movedEvent"
         @container-resized="containerResizedEvent"
       >
         <panel-chart
@@ -66,7 +69,9 @@
 <script>
 import VueGridLayout from 'vue-grid-layout'
 import { fromRoute } from '@/components/common/js/constants'
+import { getGroupHeight } from './chart/tools'
 import panelChart from '@/components/chart/panelChart'
+import bus from '@/libs/bus'
 
 export default {
   name: 'chartList',
@@ -77,6 +82,7 @@ export default {
     timeRange: Array, // 时间范围
     panelLock: { type: Boolean, default: true },
     isGroup: { type: Boolean, default: false },
+    groupInfo: {},
     dataList: Array // 看板中所有图表信息
   },
   components: {
@@ -84,6 +90,14 @@ export default {
     GridItem: VueGridLayout.GridItem,
     panelChart
   },
+  computed: {
+    headerH () {
+      return this.$store.getters.getHeaderH
+    },
+    headerHPadding () {
+      return this.$store.getters.getHeaderHPadding
+    }
+  },
   data () {
     return {
       fromRoute,
@@ -112,6 +126,11 @@ export default {
       }
       if (dom) {
         this.stepWidth = Math.floor(dom.offsetWidth / 12)
+        if (!this.isGroup) {
+          const headerH = 40 / this.stepWidth
+          const headerHPadding = 50 / this.stepWidth
+          this.$store.commit('setHeaderH', { headerH, headerHPadding })
+        }
         const span = document.querySelector('.temp-dom')
         this.tempDom.width = span.offsetWidth
       }
@@ -128,6 +147,17 @@ export default {
         this.$refs['chart' + i][0].resize()
       }, 100)
     },
+    moveEvent (i, newX, newY) {
+      console.log(i)
+      if (this.isGroup) {
+
+      }
+    },
+    movedEvent (i, newX, newY) {
+      if (this.isGroup) {
+        bus.$emit('groupMove', this.copyDataList)
+      }
+    },
     containerResizedEvent (i, newH, newW, newHPx, newWPx) {
       // TODO 重新渲染图表
       // this.$refs['chart' + i].resize()
@@ -137,12 +167,31 @@ export default {
       this.fullscreen.chartInfo = chartInfo
       this.fullscreen.visible = show
     },
+    changeGroupHeight (copyList, group, flag) {
+      const height = getGroupHeight(copyList)
+      console.log(this.$refs.layout)
+      const groupFind = this.copyDataList.find(item => item.id === group.id)
+      if (group) {
+        groupFind.height = groupFind.h = height + this.headerHPadding
+        this.copyDataList = [...this.copyDataList]
+      }
+      if (flag) {
+        this.copyDataList = [...this.copyDataList]
+        this.$refs.layout.layoutUpdate()
+      }
+    },
     cleanData () {
 
     }
+  },
+  created () {
+
   },
   mounted () {
     this.init()
+    if (!this.isGroup) {
+      bus.$on('groupMove', this.changeGroupHeight)
+    }
   },
   watch: {
     dataList: {
@@ -176,6 +225,15 @@ export default {
           this.gridLayoutLoading = false
         })
       }
+    },
+    copyDataList: {
+      deep: true,
+      handler (n) {
+        console.log(n)
+        if (this.isGroup) {
+          bus.$emit('groupMove', n, this.groupInfo)
+        }
+      }
     }
   }
 }
@@ -184,5 +242,6 @@ export default {
 <style scoped>
 .chart-list {
   height: 100%;
+  width: 100%;
 }
 </style>
diff --git a/nezha-fronted/src/components/chart/chartMixin.js b/nezha-fronted/src/components/chart/chartMixin.js
index b3d20bf27..ed6393f82 100644
--- a/nezha-fronted/src/components/chart/chartMixin.js
+++ b/nezha-fronted/src/components/chart/chartMixin.js
@@ -184,6 +184,7 @@ export default {
     this.chartId = `${this.chartInfo.id}${this.isFullscreen ? '-fullscreen' : ''}`
   },
   beforeDestroy () {
+    getChart(this.chartId) && getChart(this.chartId).dispose()
     setChart(this.chartId, null)
   }
 }
diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue
index f115e80a3..76c1b20c3 100644
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/nezha-fronted/src/components/chart/panelChart.vue
@@ -4,9 +4,11 @@
     <!-- title和工具栏，支持浮动 -->
     <chart-header
       v-if="!isFullscreen"
+      :is-group="isGroup(chartInfo.type)"
       :chart-info="chartInfo"
       @edit-chart="$emit('edit-chart', chartInfo)"
       @refresh="refresh"
+      @groupShow="groupShow"
       @showFullscreen="showFullscreen"
     ></chart-header>
     <!-- chart -->
@@ -18,6 +20,7 @@
       :panelLock="panelLock"
       :is-fullscreen="isFullscreen"
       :loading="loading"
+      v-if="!isGroup(chartInfo.type) || chartInfo.param.collapse"
     ></chart>
   </div>
 </template>
@@ -25,7 +28,7 @@
 <script>
 import chartHeader from '@/components/chart/chartHeader'
 import chart from '@/components/chart/chart'
-import { isChartPie, isTimeSeries } from './chart/tools'
+import { isChartPie, isTimeSeries, getGroupHeight, isGroup } from './chart/tools'
 import { chartType, fromRoute } from '@/components/common/js/constants'
 import bus from '@/libs/bus'
 import axios from 'axios'
@@ -50,7 +53,16 @@ export default {
       loading: true
     }
   },
+  computed: {
+    headerH () {
+      return this.$store.getters.getHeaderH
+    },
+    headerHPadding () {
+      return this.$store.getters.getHeaderHPadding
+    }
+  },
   methods: {
+    isGroup,
     // 参数 isRefresh 标识是否是刷新操作
     getChartData (isRefresh) {
       this.loading = true
@@ -144,6 +156,7 @@ export default {
               this.chartData = [this.chartInfo.param.topo]
             }
             if (this.chartInfo.type === 'group') {
+              this.groupInit()
               this.chartData = [...this.chartInfo.children]
             }
             break
@@ -193,8 +206,29 @@ export default {
         })
       })
     },
+    groupInit () {
+      const height = getGroupHeight(this.chartInfo.children)
+      if (!this.chartInfo.param.collapse) {
+        this.chartInfo.height = this.headerH
+        this.chartInfo.h = this.headerH
+        return
+      }
+      if (this.chartInfo.children.length) {
+        this.chartInfo.height = height + this.headerHPadding
+        this.chartInfo.h = height + this.headerHPadding
+      } else {
+        console.log(this.headerH)
+        this.chartInfo.height = this.headerH + height
+        this.chartInfo.h = this.headerH + height
+      }
+    },
     showFullscreen (show) {
       this.$emit('showFullscreen', show, this.chartInfo)
+    },
+    groupShow (flag) {
+      this.chartInfo.param.collapse = flag
+      this.groupInit()
+      bus.$emit('groupMove', '', '', true)
     }
   },
   watch: {
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
index 6d3e89fc9..1aa936a38 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
@@ -163,6 +163,9 @@ export default {
       Promise.all(arr).then(res => {
         this.editChart.panelId = this.panelId
         const params = JSON.parse(JSON.stringify(this.editChart))
+        if (params.type === 'group') {
+          params.height = 1
+        }
         if (!params.groupId) {
           params.groupId = 0
         }
diff --git a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
index 81856583e..9bcad0425 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
@@ -43,6 +43,7 @@
                      v-model="chartConfig.param.collapse"
                      :active-value="true"
                      :inactive-value="false"
+                     @change="change"
                      size="small"/>
         </el-form-item>
       </div>
@@ -177,7 +178,7 @@ export default {
         case 'group':
           this.chartConfig.span = 12
           this.chartConfig.param = {
-            collapse: false
+            collapse: true
           }
           break
         case 'text':
diff --git a/nezha-fronted/src/store/panel.js b/nezha-fronted/src/store/panel.js
index 94c9abadc..79b1ee0f6 100644
--- a/nezha-fronted/src/store/panel.js
+++ b/nezha-fronted/src/store/panel.js
@@ -6,7 +6,9 @@ const panel = {
     groupId: '',
     type: '',
     timeRange: [],
-    nowTimeType: {}
+    nowTimeType: {},
+    headerH: 0.5,
+    headerHPadding: 0.5
   },
   mutations: {
     setShowRightBox (state, flag) {
@@ -30,6 +32,11 @@ const panel = {
     setPanelNowTimeType (state, nowTimeType) {
       state.nowTimeType = nowTimeType
     },
+    setHeaderH (state, h) {
+      console.log(h)
+      state.headerH = h.headerH
+      state.headerHPadding = h.headerHPadding
+    },
     cleanPanel (state) {
       state.showRightBox = false
       state.chart = ''
@@ -59,6 +66,12 @@ const panel = {
     },
     getDelChart (state) {
       return state.delChart
+    },
+    getHeaderH (state) {
+      return state.headerH
+    },
+    getHeaderHPadding (state) {
+      return state.headerHPadding
     }
   },
   actions: {
@@ -82,6 +95,9 @@ const panel = {
       store.commit('setChart', playload.chart)
       store.commit('setType', playload.type)
     },
+    dispatchHeaderH (store, playload) {
+      store.commit('setHeaderH', playload.headerH)
+    },
     clearPanel (store) {
       store.commit('cleanPanel')
     }