CN-141 feat: group类型图表开发（未实现折叠）

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

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;
+        }
+      }
     }
   }
 }

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)
     }

src/views/charts/Panel.vue

@@ -93,7 +93,9 @@ export default {
   },
   async mounted () {
     await this.init()
+    if (!this.$_.isEmpty(this.detailTabs)) {
       this.currentTab = this.detailTabs[0].id + ''
+    }
   },
   setup (props, ctx) {
     // data