From f5abbaeef92208bf3e67e7a98e3be64d16dd6375 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Fri, 21 Jan 2022 15:35:09 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9Agroup=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=8A=98=E5=8F=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/charts/Chart2.vue         |  9 ++++++++-
 src/views/charts/ChartHeader.vue    |  7 +++----
 src/views/charts/Panel.vue          | 18 ++++++++++++++----
 src/views/charts/PanelChart.vue     |  8 ++++++--
 src/views/charts/PanelChartList.vue | 25 +++++++++++++++----------
 src/views/charts/charts/tools.js    |  4 ++--
 6 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/src/views/charts/Chart2.vue b/src/views/charts/Chart2.vue
index 448d1453..2e51e59d 100644
--- a/src/views/charts/Chart2.vue
+++ b/src/views/charts/Chart2.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="cn-chart">
-    <loading :loading="loading && !isTabs && !isBlock"></loading>
+    <loading :loading="loading && !isTabs && !isBlock && !isGroup"></loading>
     <chart-no-data v-if="isNoData"></chart-no-data>
     <template v-else>
 
@@ -35,6 +35,13 @@
         :entity="entity"
       ></chart-block>
 
+      <chart-block
+              v-else-if="isGroup"
+              :chart-info="chartInfo"
+              :chart-data="chartData"
+              :entity="entity"
+      ></chart-block>
+
       <ip-basic-info
         v-else-if="isIpBasicInfo"
         :chart-info="chartInfo"
diff --git a/src/views/charts/ChartHeader.vue b/src/views/charts/ChartHeader.vue
index 96a67fda..dbc85163 100644
--- a/src/views/charts/ChartHeader.vue
+++ b/src/views/charts/ChartHeader.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="chart-header" :class="{'chart-header--title-chart': isTitle}">
-    <div class="chart-header__title" v-if="!isCurrentTable&&(isGroup||isBlock)" :class="{'chart-header__title--block': isBlock}">
-      <span @click="groupShow"> <i class="cn-icon" :class="chartInfo.params&&chartInfo.params.collapse ? 'cn-icon-arrow-right': 'cn-icon-arrow-down'"></i></span>
+    <div class="chart-header__title" v-if="!isCurrentTable&&(isGroup)" :class="{'chart-header__title--block': isBlock}">
+      <span @click="groupShow"> <i class="cn-icon" :class="chartInfo.params&&chartInfo.params.collpase ? 'cn-icon-arrow-right': 'cn-icon-arrow-down'"></i></span>
       {{chartInfo.name}}
     </div>
     <div class="chart-header__title" v-else-if="!isCurrentTable" :class="{'chart-header__title--block': isBlock}">{{chartInfo.name}}</div>
@@ -161,8 +161,7 @@ export default {
       this.dateTimeRangeChange(s, e, v)
     },
     groupShow () {
-      console.log(123)
-      this.emitter.emit('groupShow', this.chartInfo)
+      this.$emit('groupShow', this.chartInfo)
     },
     dateTimeRangeChange (s, e, v) {
       this.chartTimeFilter = { startTime: s, endTime: e, dateRangeValue: v }
diff --git a/src/views/charts/Panel.vue b/src/views/charts/Panel.vue
index 51224ceb..0ef1985f 100644
--- a/src/views/charts/Panel.vue
+++ b/src/views/charts/Panel.vue
@@ -45,6 +45,7 @@ import { ref } from 'vue'
 import { panelTypeAndRouteMapping } from '@/utils/constants'
 import { api, getPanelList, getChartList } from '@/utils/api'
 import { getNowTime } from '@/utils/date-util'
+import {getGroupHeight, getTypeCategory} from "@/views/charts/charts/tools";
 
 export default {
   name: 'Panel',
@@ -65,7 +66,7 @@ export default {
     }
   },
   async mounted () {
-    this.emitter.on('groupShow', this.groupShow)
+    this.emitter.on('groupParentCalcHeight', this.groupParentCalcHeight)
     this.isCryptocurrency = this.$route.path.indexOf('cryptocurrency') > -1
     await this.init()
     if (!this.$_.isEmpty(this.detailTabs)) {
@@ -113,6 +114,16 @@ export default {
     },
     recursionParamsConvert (chart) {
       chart.params = chart.params ? JSON.parse(chart.params) : null
+      if (chart.type === 94) {
+        chart.oldH = chart.h
+        chart.params = {
+          collpase: false
+        }
+        chart.h = getGroupHeight(chart.children) + 2
+        if (chart.params.collpase) {
+          chart.h = 1
+        }
+      }
       if (!this.$_.isEmpty(chart.children)) {
         chart.children.forEach(c => {
           this.recursionParamsConvert(c)
@@ -142,9 +153,8 @@ export default {
         this.$refs[`chart-${chart.id}`] && this.$refs[`chart-${chart.id}`].reloadChart()
       })
     },
-    groupShow (chart) {
-      console.log( this.$refs.panelChartList,chart)
-      this.$refs.panelChartList.groupShow(chart)
+    groupParentCalcHeight (params) {
+      this.$refs.panelChartList.groupParentCalcHeight(params.chart, params.childrenList)
     }
   }
 }
diff --git a/src/views/charts/PanelChart.vue b/src/views/charts/PanelChart.vue
index ffc5620d..c0397827 100644
--- a/src/views/charts/PanelChart.vue
+++ b/src/views/charts/PanelChart.vue
@@ -15,6 +15,7 @@
         :table="table"
         @loadMore="loadMore"
         @refresh="refresh"
+        @groupShow="groupShow"
         @showFullscreen="showFullscreen"
         @tableChange="tableChange"
     ></chart-header>
@@ -22,7 +23,7 @@
     <!-- 数据查询后传入chart组件，chart组件内不查询，只根据接传递的数据来渲染 -->
     <chart
         ref="chart"
-        v-if="((!isBlock) || !(chartInfo.params && chartInfo.params.collapse)) && !isTitle"
+        v-if="(!isGroup) || !(chartInfo.params && chartInfo.params.collpase) && !isTitle"
         :chart-data="chartData"
         :result-type="resultType"
         :chart-info="chartInfo"
@@ -306,7 +307,10 @@ export default {
     },
     getTargetPageData (pageNum, pageSize, tableData) {
       return this.$_.slice(tableData, (pageNum - 1) * pageSize, pageNum * pageSize)
-    }
+    },
+    groupShow (chartInfo) {
+      this.$emit('groupShow',chartInfo)
+    },
   },
   mounted () {
     this.showLoading(true)
diff --git a/src/views/charts/PanelChartList.vue b/src/views/charts/PanelChartList.vue
index 99a52179..faac211a 100644
--- a/src/views/charts/PanelChartList.vue
+++ b/src/views/charts/PanelChartList.vue
@@ -33,6 +33,7 @@
             :show-header="true"
             :time-filter="timeFilter"
             :entity="entity"
+            @groupShow="groupShow"
             @showFullscreen="showFullscreen"
         ></panel-chart>
       </grid-item>
@@ -65,7 +66,7 @@
 <script>
 import PanelChart from '@/views/charts/PanelChart'
 import VueGridLayout from 'vue-grid-layout'
-import { getTypeCategory } from './charts/tools'
+import { getGroupHeight, getTypeCategory } from './charts/tools'
 import _ from 'lodash'
 
 export default {
@@ -114,18 +115,28 @@ export default {
       this.fullscreen.visible = show
     },
     groupShow (chart) {
-      console.log(chart, this.copyDataList)
       this.copyDataList.forEach((item, index) => {
         if (item.id === chart.id) {
           item.params.collpase = !item.params.collpase
           if (item.params.collpase) {
             item.h = 1
           } else {
-            item.h = item.oldH
+            item.h = getGroupHeight(item.children) + 2
           }
         }
       })
       this.copyDataList = [...this.copyDataList]
+      this.emitter.emit('groupParentCalcHeight', { chart, childrenList: this.copyDataList })
+    },
+    groupParentCalcHeight (chart, childrenList) {
+      setTimeout(() => {
+        const parent = this.copyDataList.find(chartitem => chartitem.id === chart.parent.id)
+        const children = parent.children.find(item => item.id === chart.id)
+        children.h = chart.h
+        children.params = chart.params
+        parent.h = getGroupHeight(childrenList) + 2
+        this.copyDataList = [...this.copyDataList]
+      }, 100)
     }
   },
   computed: {
@@ -146,17 +157,11 @@ export default {
       handler (n, o) {
         this.gridLayoutShow = false
         this.gridLayoutLoading = true
+        // const arr = this.$_.cloneDeep(n)
         this.noData = !n || n.length < 1
         const tempList = n.map(item => {
           if (item.params) {
             item.params.showHeader = true
-            if (item.type === 95 || item.type === 94) {
-              item.oldH = item.h
-              item.params.collpase = false
-            }
-            if (item.params.collpase) {
-              item.h = this.rowHeight
-            }
           }
           const height = item.h
           return {
diff --git a/src/views/charts/charts/tools.js b/src/views/charts/charts/tools.js
index 9b0d111e..c70ea32e 100644
--- a/src/views/charts/charts/tools.js
+++ b/src/views/charts/charts/tools.js
@@ -213,8 +213,8 @@ export function getGroupHeight (arr) {
     })
     let maxHeight = 0
     lastItem.forEach(last => {
-      if (maxHeight < last.height) {
-        maxHeight = last.height
+      if (maxHeight < last.h) {
+        maxHeight = last.h
       }
     })
     if (maxY < 0) {