From 047fc4a1a752bd8f897ea858eecbd82d0787550d Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Thu, 16 Sep 2021 21:19:48 +0800
Subject: [PATCH] =?UTF-8?q?CN-141=20feat:=20group=E7=B1=BB=E5=9E=8B?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E5=BC=80=E5=8F=91=EF=BC=88=E6=9C=AA=E5=AE=9E?=
 =?UTF-8?q?=E7=8E=B0=E6=8A=98=E5=8F=A0=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/charts/chart-options.js |  4 ++++
 src/components/charts/panel.scss       | 23 +++++++++++++++++++++--
 src/views/charts/Chart.vue             | 20 ++++++++++++++++++++
 src/views/charts/Panel.vue             |  4 +++-
 4 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/src/components/charts/chart-options.js b/src/components/charts/chart-options.js
index 4e36265a..f9b9f639 100644
--- a/src/components/charts/chart-options.js
+++ b/src/components/charts/chart-options.js
@@ -396,6 +396,10 @@ export function isIpOpenPort (type) {
 export function isIpHostedDomain (type) {
   return type === 33
 }
+/* 组 */
+export function isGroup (type) {
+  return type === 94
+}
 export function getOption (type) {
   const mapping = typeOptionMappings.find(m => m.value === type)
   return mapping && mapping.option ? _.cloneDeep(mapping.option) : null
diff --git a/src/components/charts/panel.scss b/src/components/charts/panel.scss
index 60081c26..218f26f0 100644
--- a/src/components/charts/panel.scss
+++ b/src/components/charts/panel.scss
@@ -86,7 +86,7 @@
   font-weight:normal;
 }
 
-.cn-panel, .cn-panel>.cn-chart__tabs>.el-tabs__content>.el-tab-pane {
+.cn-panel, .cn-panel>.cn-chart__tabs>.el-tabs__content>.el-tab-pane, .cn-chart__group .cn-chart__body {
   display: grid;
   grid-template-columns: repeat(30, 1fr);
   grid-auto-flow: row;
@@ -121,7 +121,7 @@
     }
   }
 
-  &>.cn-chart__echarts, &>.cn-chart__table, &>.cn-chart__map {
+  &>.cn-chart__echarts, &>.cn-chart__table, &>.cn-chart__map, &>.cn-chart__group {
     display: flex;
     flex-direction: column;
     .cn-chart__header {
@@ -145,6 +145,17 @@
       flex: auto;
     }
   }
+  &>.cn-chart__group {
+    .cn-chart__header {
+      border-bottom: 1px solid $--content-right-background-color;
+    }
+    .cn-chart__body {
+      padding: 0 20px;
+      .cn-chart {
+        border: none;
+      }
+    }
+  }
   &>.cn-chart__single-value.cn-chart__single-value--icon-left {
     display: flex;
     align-items: center;
@@ -607,6 +618,14 @@
     .cn-panel {
       padding: 20px;
       grid-gap: 20px;
+
+      &>.cn-chart>.cn-chart__header {
+        border-bottom: 1px solid $--content-right-background-color;
+        .header__title {
+          color: #333;
+          font-size: 16px;
+        }
+      }
     }
   }
 }
diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue
index b590a36e..65e0b312 100644
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -194,6 +194,21 @@
       ></chart-table-pagination>
     </template>
   </chart-table>
+  <!-- group -->
+  <div
+      v-else-if="isGroup"
+      class="cn-chart cn-chart__group"
+      :style="computePosition"
+  >
+    <div class="cn-chart__header">
+      <div class="header__title">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</div>
+    </div>
+    <div class="cn-chart__body">
+      <template v-for="chart in chartInfo.children" :key="chart.id">
+        <chart :chart="chart" :time-filter="timeFilter" :ref="`chart-${chart.id}`" :entity="entity"></chart>
+      </template>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -219,6 +234,7 @@ import {
   isSingleValueWithEcharts,
   isRelationShip,
   isTabs,
+  isGroup,
   getChartColor
 } from '@/components/charts/chart-options'
 import ChartError from '@/components/charts/ChartError'
@@ -308,6 +324,8 @@ export default {
               this.initEchartsWithStatistics(chartParams)
             } else if (this.isRelationShip) {
               this.initRelationShip(chartParams)
+            } else if (this.isGroup) {
+
             } else {
               this.initECharts(chartParams)
             }
@@ -1039,6 +1057,7 @@ export default {
   },
   setup (props) {
     const chartInfo = JSON.parse(JSON.stringify(props.chart))
+    console.info(chartInfo)
     chartInfo.category = getTypeCategory(props.chart.type)
     return {
       chartInfo,
@@ -1057,6 +1076,7 @@ export default {
       isMapLine: isMapLine(props.chart.type),
       isMapBlock: isMapBlock(props.chart.type),
       isTabs: isTabs(props.chart.type),
+      isGroup: isGroup(props.chart.type),
       layout: getLayout(props.chart.type),
       myChart: shallowRef(null)
     }
diff --git a/src/views/charts/Panel.vue b/src/views/charts/Panel.vue
index 77058d8e..0c682d0c 100644
--- a/src/views/charts/Panel.vue
+++ b/src/views/charts/Panel.vue
@@ -93,7 +93,9 @@ export default {
   },
   async mounted () {
     await this.init()
-    this.currentTab = this.detailTabs[0].id + ''
+    if (!this.$_.isEmpty(this.detailTabs)) {
+      this.currentTab = this.detailTabs[0].id + ''
+    }
   },
   setup (props, ctx) {
     // data