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 @@ > + +
+
+
{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}
+
+
+ +
+