From 8093f4bf934b03927c1ae6eb8a9c0880edcb4607 Mon Sep 17 00:00:00 2001 From: chenjinsong <523037378@qq.com> Date: Wed, 15 Sep 2021 12:19:13 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20entity=E8=AF=A6=E6=83=85=EF=BC=88?= =?UTF-8?q?=E6=9C=AA=E5=AE=8C=E6=88=90=EF=BC=89=E3=80=81=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E4=B8=80=E4=BA=9B=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/charts/ChartMap.vue | 2 +- src/components/charts/panel.scss | 93 ++++++++++++++++-- src/components/entities/EntityDetail.vue | 60 ++++++++++++ src/components/entities/EntityList.vue | 10 +- src/components/layout/Header.vue | 17 +--- src/store/index.js | 6 +- src/utils/constants.js | 7 +- src/views/charts/Chart.vue | 29 ++++-- src/views/charts/Panel.vue | 116 ++++++++++------------- src/views/entities/EntityExplorer.vue | 23 ++--- 10 files changed, 239 insertions(+), 124 deletions(-) create mode 100644 src/components/entities/EntityDetail.vue diff --git a/src/components/charts/ChartMap.vue b/src/components/charts/ChartMap.vue index a09d27d2..4a597711 100644 --- a/src/components/charts/ChartMap.vue +++ b/src/components/charts/ChartMap.vue @@ -2,7 +2,7 @@
-
+
diff --git a/src/components/charts/panel.scss b/src/components/charts/panel.scss index eb2472d2..4fba703a 100644 --- a/src/components/charts/panel.scss +++ b/src/components/charts/panel.scss @@ -23,11 +23,8 @@ max-width: 280px !important; } -.chart-title-width{ - width:100%; -} .chart-header-position{ - position:relative; + position: relative; } .chart-error-popper.el-popper.is-light { @@ -105,6 +102,7 @@ position: absolute; right: 20px; top: 10px; + z-index: 1; display: flex; } @@ -133,14 +131,14 @@ flex-shrink: 0; padding: 10px 20px 10px 18px; height: 50px; - font-size: 16px; - color: #333333; - font-weight: bold; + .cn-chart__title { + font-size: 16px; + color: #333333; + font-weight: bold; + } .header__operations { - .cn-icon-more-light { - color: #999; - } + color: #999; } } .cn-chart__body { @@ -517,6 +515,77 @@ border-bottom: none; } } + +.cn-entity-detail { + height: 100%; + width: 100%; + overflow: hidden; + .entity-detail__header { + display: flex; + justify-content: end; + height: 70px; + padding-right: 20px; + background-color: #F7F9FB; + & > .el-tabs > .el-tabs__header { // header背景色 + margin: 0; + & > .el-tabs__nav-wrap > .el-tabs__nav-scroll > .el-tabs__nav { + & > .el-tabs__item.is-active { // 激活的tab上边框和背景色 + background-color: white; + border-top: 2px solid #0091ff; + } + & > .el-tabs__active-bar { + display: none; + } + & > div:last-of-type { + padding-right: 20px; + } + & > div:nth-of-type(2) { + padding-left: 20px; + } + } + } + & > .el-tabs > .el-tabs__header > .el-tabs__nav-wrap::after { // 去掉tabs下方边框 + height: 0 !important; + } + &>.el-tabs { // 底部对齐 + display: flex; + align-items: end; + } + } + .entity-detail__body { + height: calc(100% - 90px); + width: 100%; + overflow: auto; + &>div { + display: grid; + grid-template-columns: repeat(30, 1fr); + grid-auto-flow: row; + grid-auto-rows: var(--chart-height-unit); + grid-gap: 10px; + } + .cn-panel { + padding: 20px; + grid-gap: 20px; + } + } +} +.el-overlay { + overflow: hidden !important; +} +.entity-detail__dialog { + height: 90vh; + overflow: hidden; + .el-dialog__header { + display: none; + } + .el-dialog__body { + height: 100%; + padding: 0; + .panel__time { + display: none; + } + } +} .option-popper { .el-select-dropdown__item { height: 24px; @@ -524,6 +593,10 @@ font-size: 12px; } } +.header__operation-btn { + margin-left: 12px; + cursor: pointer; +} //.cn-chart-select{ // display: flex; // align-items: center; diff --git a/src/components/entities/EntityDetail.vue b/src/components/entities/EntityDetail.vue new file mode 100644 index 00000000..d1a9ebce --- /dev/null +++ b/src/components/entities/EntityDetail.vue @@ -0,0 +1,60 @@ + + + diff --git a/src/components/entities/EntityList.vue b/src/components/entities/EntityList.vue index c1d96a86..fa69f8af 100644 --- a/src/components/entities/EntityList.vue +++ b/src/components/entities/EntityList.vue @@ -35,7 +35,7 @@
{{d.asn || '-'}}
{{$t('overall.detail')}}>
+ @click="entityDetail({name: d.ip, type: 4})">{{$t('overall.detail')}}>
@@ -162,8 +162,8 @@ export default { wraps.scrollTop = 0 }) }, - entityDetail (params, tabs = []) { - this.$emit('showDetail', params, tabs) + entityDetail (params) { + this.$emit('showDetail', { ...params, icon: this.iconClass }) } } } diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue index 41387605..72c015de 100644 --- a/src/components/layout/Header.vue +++ b/src/components/layout/Header.vue @@ -1,6 +1,5 @@ - @@ -84,6 +82,7 @@ import { useRoute } from 'vue-router' import { get, put } from '@/utils/http' import { entityType, storageKey } from '@/utils/constants' + export default { name: 'Header', data () { @@ -151,11 +150,7 @@ export default { computed: { breadcrumb () { const breadcrumb = this.breadcrumbMap.find(b => this.path === b.path) - const breadcrumbArray = breadcrumb ? [breadcrumb.parentName, breadcrumb.name] : [] - if (breadcrumbArray.length > 0 && breadcrumb.childName) { - breadcrumbArray.push(breadcrumb.childName) - } - return breadcrumbArray + return breadcrumb ? [breadcrumb.parentName, breadcrumb.name] : [] }, path () { const { path } = useRoute() @@ -167,9 +162,6 @@ export default { isShrink () { return this.$store.getters.getIsShrink }, - entityName () { - return this.$store.getters.entityName - }, storeFrom () { return this.$store.getters.from } @@ -182,10 +174,6 @@ export default { if (this.from !== n) { this.from = n } - }, - entityName (n) { - const breadcrumb = this.breadcrumbMap.find(b => b.path === '/entityExplorer') - breadcrumb.childName = n } }, mounted () { @@ -203,7 +191,6 @@ export default { changeLocal (lang) { if (lang !== localStorage.getItem('cn-language')) { localStorage.setItem('cn-language', lang) - // this.$i18n.locale = lang window.location.reload() } }, diff --git a/src/store/index.js b/src/store/index.js index 9570b0d2..aa844b9e 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -11,8 +11,7 @@ const store = createStore({ i18n: false, showEntityTypeSelector: false, // 在entity explore页面时，控制header显示实体类型选择框 - from: '', // entity type - entityName: '' // entity名称，用于header顶部面包屑展示 + from: '' // entity type } }, getters: { @@ -44,9 +43,6 @@ const store = createStore({ }, showEntityTypeSelector (state, show) { state.showEntityTypeSelector = show - }, - setEntityName (state, entityName) { - state.entityName = entityName } } }) diff --git a/src/utils/constants.js b/src/utils/constants.js index 1563f7f2..3e63a9f4 100644 --- a/src/utils/constants.js +++ b/src/utils/constants.js @@ -33,15 +33,14 @@ export const fromRoute = { galaxyProxy: 'galaxyProxy' } -/* panel类别和路由之间的映射 */ +/* panel类别和名称之间的映射 */ export const panelTypeAndRouteMapping = { trafficSummary: 1, networkAppPerformance: 2, dnsServiceInsights: 3, - ipEntityDetail: 4, // 此为clientIP + ipEntityDetail: 4, domainEntityDetail: 5, - appEntityDetail: 6, - serverIpEntityDetail: 7 + appEntityDetail: 6 } export const position = { diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue index 2b5fea17..b590a36e 100644 --- a/src/views/charts/Chart.vue +++ b/src/views/charts/Chart.vue @@ -39,8 +39,12 @@