feat：添加 block 折叠功能

src/views/charts/ChartHeader.vue

@@ -1,8 +1,13 @@
 <template>
   <div class="chart-header" :class="{'chart-header--title-chart': isTitle}">
-    <div class="chart-header__title" v-if="!isCurrentTable" :class="{'chart-header__title--block': isBlock}">{{chartInfo.name}}</div>
+    <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>
+      {{chartInfo.name}}
+    </div>
+    <div class="chart-header__title" v-else-if="!isCurrentTable" :class="{'chart-header__title--block': isBlock}">{{chartInfo.name}}</div>
     <template v-if="isCurrentTable">
       <div class="chart-header__title">
+<!--        -->
         <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</span>
         <span
             v-if="chartInfo.params && chartInfo.params.as"
@@ -85,11 +90,11 @@
 </template>
 
 <script>
-import {isTitle, isTabs, isBlock, isTable, isActiveIpTable, isCurrentTable} from './charts/tools'
+import { isTitle, isTabs, isBlock, isTable, isActiveIpTable, isCurrentTable, isGroup } from './charts/tools'
 import ChartError from '@/components/charts/ChartError'
 import { getNowTime } from '@/utils/date-util'
 import { ref } from 'vue'
-import {chartTableTopOptions, chartActiveIpTableOrderOptions} from "@/utils/constants";
+import { chartTableTopOptions, chartActiveIpTableOrderOptions } from '@/utils/constants'
 
 export default {
   name: 'ChartHeader',
@@ -139,7 +144,7 @@ export default {
             num: 345
           }
         ] // table的所有数据
-      },
+      }
     }
   },
   methods: {
@@ -155,6 +160,10 @@ export default {
     reload (s, e, v) {
       this.dateTimeRangeChange(s, e, v)
     },
+    groupShow () {
+      console.log(123)
+      this.emitter.emit('groupShow', this.chartInfo)
+    },
     dateTimeRangeChange (s, e, v) {
       this.chartTimeFilter = { startTime: s, endTime: e, dateRangeValue: v }
     },
@@ -180,6 +189,7 @@ export default {
       isTable: isTable(props.chartInfo.type),
       isCurrentTable: isCurrentTable(props.chartInfo.type),
       isActiveIpTable: isActiveIpTable(props.chartInfo.type),
+      isGroup: isGroup(props.chartInfo.type)
     }
   }
 }

src/views/charts/Panel.vue

@@ -6,9 +6,11 @@
         <time-refresh class="date-time-range" @change="timeRefreshChange" :end-time="timeFilter.endTime"/>
       </div>
       <panel-chart-list
+          ref="panelChartList"
           :time-filter="timeFilter"
           :data-list="chartList"
           :panel-lock="panelLock"
+          :entity="entity"
       >
       </panel-chart-list>
     </div>
@@ -17,6 +19,7 @@
     <div class="entity-detail__body">
       <div class="cn-panel2" id="cn-panel">
         <panel-chart-list
+            ref="panelChartList"
             :time-filter="timeFilter"
             :data-list="chartList"
             :panel-lock="panelLock"
@@ -62,6 +65,7 @@ export default {
     }
   },
   async mounted () {
+    this.emitter.on('groupShow', this.groupShow)
     this.isCryptocurrency = this.$route.path.indexOf('cryptocurrency') > -1
     await this.init()
     if (!this.$_.isEmpty(this.detailTabs)) {
@@ -137,6 +141,10 @@ export default {
       this.chartList.forEach(chart => {
         this.$refs[`chart-${chart.id}`] && this.$refs[`chart-${chart.id}`].reloadChart()
       })
+    },
+    groupShow (chart) {
+      console.log( this.$refs.panelChartList,chart)
+      this.$refs.panelChartList.groupShow(chart)
     }
   }
 }

src/views/charts/PanelChart.vue

@@ -22,7 +22,7 @@
     <!-- 数据查询后传入chart组件，chart组件内不查询，只根据接传递的数据来渲染 -->
     <chart
         ref="chart"
-        v-if="(!isGroup || !(chartInfo.params && chartInfo.params.collapse)) && !isTitle"
+        v-if="((!isBlock) || !(chartInfo.params && chartInfo.params.collapse)) && !isTitle"
         :chart-data="chartData"
         :result-type="resultType"
         :chart-info="chartInfo"

src/views/charts/PanelChartList.vue

@@ -8,7 +8,7 @@
         :is-draggable="!panelLock"
         :is-resizable="!panelLock"
         :margin="[10, 10]"
-        :row-height="40"
+        :row-height="rowHeight"
         :vertical-compact="true"
         :use-css-transforms="false"
     >
@@ -86,6 +86,7 @@ export default {
     return {
       gridLayoutLoading: false,
       gridLayoutShow: false,
+      rowHeight: 40,
       copyDataList: [],
       noData: false, // no data
       tempDom: { height: '', width: '' },
@@ -111,6 +112,20 @@ export default {
     showFullscreen (show, chartInfo) {
       this.fullscreen.chartInfo = chartInfo
       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
+          }
+        }
+      })
+      this.copyDataList = [...this.copyDataList]
     }
   },
   computed: {
@@ -132,202 +147,18 @@ export default {
         this.gridLayoutShow = false
         this.gridLayoutLoading = true
         this.noData = !n || n.length < 1
-        /*const nn = JSON.parse(`
-            [
-  {
-    "id": 1,
-    "name": "Sessions",
-    "i18n": "overall.sessions",
-    "panelId": 1,
-    "pid": 0,
-    "type": 11,
-    "x": 20,
-    "y": 1,
-    "w": 10,
-    "h": 5,
-    "params": "{\\"url\\":\\"/interface/traffic/sessions?startTime={{startTime}}&endTime={{endTime}}\\",\\"unitType\\":\\"number\\"}",
-    "remark": "",
-    "state": 1,
-    "buildIn": 0,
-    "children": [],
-    "parent": null,
-    "panel": {
-      "id": 1
-    }
-  },
-  {
-    "id": 2,
-    "name": "Traffic summary",
-    "i18n": "trafficSummary.trafficSummary",
-    "panelId": 1,
-    "pid": 0,
-    "type": 93,
-    "x": 0,
-    "y": 0,
-    "w": 30,
-    "h": 1,
-    "params": "",
-    "remark": "",
-    "state": 1,
-    "buildIn": 0,
-    "children": [],
-    "parent": null,
-    "panel": {
-      "id": 1
-    }
-  },
-  {
-    "id": 3,
-    "name": "Active list",
-    "i18n": "trafficSummary.activeList",
-    "panelId": 1,
-    "pid": 0,
-    "type": 93,
-    "x": 0,
-    "y": 16,
-    "w": 30,
-    "h": 1,
-    "params": "",
-    "remark": "",
-    "state": 1,
-    "buildIn": 0,
-    "children": [],
-    "parent": null,
-    "panel": {
-      "id": 1
-    }
-  },
-  {
-    "id": 4,
-    "name": "Domain analysis statistics",
-    "i18n": "trafficSummary.domainStatistics",
-    "panelId": 1,
-    "pid": 0,
-    "type": 93,
-    "x": 0,
-    "y": 35,
-    "w": 30,
-    "h": 1,
-    "params": "",
-    "remark": "",
-    "state": 1,
-    "buildIn": 0,
-    "children": [],
-    "parent": null,
-    "panel": {
-      "id": 1
-    }
-  },
-  {
-    "id": 6,
-    "name": "Packets",
-    "i18n": "overall.packets",
-    "panelId": 1,
-    "pid": 0,
-    "type": 11,
-    "x": 20,
-    "y": 6,
-    "w": 10,
-    "h": 5,
-    "params": "{\\"url\\":\\"/interface/traffic/packets?startTime={{startTime}}&endTime={{endTime}}\\",\\"unitType\\":\\"number\\"}",
-    "remark": "",
-    "state": 1,
-    "buildIn": 0,
-    "children": [],
-    "parent": null,
-    "panel": {
-      "id": 1
-    }
-  },
-  {
-    "id": 9,
-    "name": "Throughput",
-    "i18n": "trafficSummary.throughput",
-    "panelId": 1,
-    "pid": 0,
-    "type": 11,
-    "x": 20,
-    "y": 11,
-    "w": 10,
-    "h": 5,
-    "params": "{\\"url\\":\\"/interface/traffic/throughput?startTime={{startTime}}&endTime={{endTime}}\\",\\"unitType\\":\\"byte\\"}",
-    "remark": "packets",
-    "state": 1,
-    "buildIn": 0,
-    "children": [],
-    "parent": null,
-    "panel": {
-      "id": 1
-    }
-  },
-  {
-    "id": 10,
-    "name": "Active client",
-    "i18n": "trafficSummary.activeClient",
-    "panelId": 1,
-    "pid": 0,
-    "type": 61,
-    "x": 0,
-    "y": 17,
-    "w": 10,
-    "h": 9,
-    "params": "{\\"url\\":\\"/interface/traffic/activeClientIP?startTime={{startTime}}&endTime={{endTime}}&order={{order}}&limit={{limit}}\\"}",
-    "remark": "",
-    "state": 1,
-    "buildIn": 0,
-    "children": [],
-    "parent": null,
-    "panel": {
-      "id": 1
-    }
-  },
-  {
-    "id": 11,
-    "name": "Domain category",
-    "i18n": "trafficSummary.domainCategory",
-    "panelId": 1,
-    "pid": 0,
-    "type": 31,
-    "x": 0,
-    "y": 36,
-    "w": 15,
-    "h": 13,
-    "params": "{\\"url\\":\\"/interface/traffic/topDomainCategories?startTime={{startTime}}&endTime={{endTime}}&limit={{limit}}\\",\\"nameColumn\\":\\"fqdnCategoryName\\",\\"valueColumn\\":\\"uniqDomains\\",\\"tableNameColumn\\":\\"domain\\",\\"urlTable\\":\\"/interface/traffic/activeDomainCategories?startTime={{startTime}}&endTime={{endTime}}&fqdnCategoryName={{fqdnCategoryName}}&limit={{limit}}&order={{order}}\\",\\"urlChildrenTable\\":\\"/interface/traffic/domainCategoryServerIpList?startTime={{startTime}}&endTime={{endTime}}&order={{order}}&limit={{limit}}&domain={{domain}}\\"}",
-    "remark": "",
-    "state": 1,
-    "buildIn": 0,
-    "panel": {
-      "id": 1
-    }
-  },
-  {
-        "id": 12,
-        "name": "Traffic map",
-        "i18n": "trafficSummary.trafficMap",
-        "panelId": 1,
-        "pid": 0,
-        "type": 2,
-        "x": 0,
-        "y": 1,
-        "w": 20,
-        "h": 15,
-        "params": "{\\"url\\":\\"/interface/traffic/map?startTime={{startTime}}&endTime={{endTime}}&country={{country}}&province={{province}}&city={{city}}\\",\\"unitType\\":\\"byte\\",\\"valueColumn\\":\\"bytes\\"}",
-        "remark": "traffic summaryyy",
-        "state": 1,
-        "buildIn": 0,
-        "children": [],
-        "parent": null,
-        "panel": {
-          "id": 1
-        }
-      }
-]
-          `)*/
         const tempList = n.map(item => {
-          const height = item.h
           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 {
             ...item,
             i: item.id,