From 2907f4485b21163b82675ab826450fe78bd4bf61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com> Date: Wed, 7 Jun 2023 14:21:02 +0800 Subject: [PATCH] =?UTF-8?q?CN-988=20fix:=20=E5=AE=9E=E4=BD=93=E8=AF=A6?= =?UTF-8?q?=E6=83=85--=E5=AE=89=E5=85=A8=E4=BA=8B=E4=BB=B6=E5=92=8C?= =?UTF-8?q?=E6=80=A7=E8=83=BD=E4=BA=8B=E4=BB=B6tab=E6=B7=BB=E5=8A=A0warn?= =?UTF-8?q?=E5=9B=BE=E6=A0=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/charts2/entityDetailTabs.scss | 6 +++ .../charts/entityDetail/EntityDetailTabs.vue | 50 +++++++++++++++++-- .../entityDetail/tabs/PerformanceEvent.vue | 2 +- 3 files changed, 52 insertions(+), 6 deletions(-) diff --git a/src/assets/css/components/views/charts2/entityDetailTabs.scss b/src/assets/css/components/views/charts2/entityDetailTabs.scss index 36b8bc8e..a53a00f0 100644 --- a/src/assets/css/components/views/charts2/entityDetailTabs.scss +++ b/src/assets/css/components/views/charts2/entityDetailTabs.scss @@ -66,6 +66,12 @@ height: 100%; overflow: auto; } + .tab-pane-warn--icon { + width: 16px; + color: #E48F3E; + margin-left: 10px; + margin-right: 0 !important; + } } .entity-detail-event-border { diff --git a/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue b/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue index 3ac69edf..96fcf22c 100644 --- a/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue +++ b/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue @@ -10,6 +10,7 @@ @@ -26,7 +27,7 @@ import chartMixin from '@/views/charts2/chart-mixin' import i18n from '@/i18n' import { entityDetailTabsName } from '@/utils/constants' -import { ref } from 'vue' +import { reactive, ref } from 'vue' import InformationAggregation from '@/views/charts2/charts/entityDetail/tabs/InformationAggregation' import DomainNameResolution from '@/views/charts2/charts/entityDetail/tabs/DomainNameResolution' import SecurityEvent from '@/views/charts2/charts/entityDetail/tabs/SecurityEvent' @@ -35,6 +36,9 @@ import OpenPort from '@/views/charts2/charts/entityDetail/tabs/OpenPort' import DigitalCertificate from '@/views/charts2/charts/entityDetail/tabs/DigitalCertificate' import { overwriteUrl, urlParamsHandler } from '@/utils/tools' import { useRoute } from 'vue-router' +import { getSecond } from '@/utils/date-util' +import axios from '_axios@0.21.4@axios' +import { api } from '@/utils/api' export default { name: 'EntityDetailTabs', @@ -69,18 +73,19 @@ export default { this.timer = setTimeout(() => { this.handleActiveBar(this.activeTab) }, 200) + this.initData() }, setup (props) { // eslint-disable-next-line vue/no-setup-props-destructure const entityType = props.entity.entityType - const tabs = [ + const tabs = reactive([ { name: entityDetailTabsName.domainNameResolution, label: i18n.global.t('entities.domainNameResolution'), icon: 'cn-icon cn-icon-domain-name-resolution' }, { name: entityDetailTabsName.openPort, label: i18n.global.t('entities.openPort'), icon: 'cn-icon cn-icon-open-port' }, // { name: entityDetailTabsName.digitalCertificate, label: i18n.global.t('entities.digitalCertificate'), icon: 'cn-icon cn-icon-digital-certificate' }, - { name: entityDetailTabsName.securityEvent, label: i18n.global.t('overall.securityEvent'), icon: 'cn-icon cn-icon-security-event' }, - { name: entityDetailTabsName.performanceEvent, label: i18n.global.t('overall.performanceEvent'), icon: 'cn-icon cn-icon-a-PerformanceEvent' } - ] + { name: entityDetailTabsName.securityEvent, label: i18n.global.t('overall.securityEvent'), icon: 'cn-icon cn-icon-security-event', warnIcon: 'cn-icon cn-icon-warn', warnFlag: false }, + { name: entityDetailTabsName.performanceEvent, label: i18n.global.t('overall.performanceEvent'), icon: 'cn-icon cn-icon-a-PerformanceEvent', warnIcon: 'cn-icon cn-icon-warn', warnFlag: false } + ]) if (entityType !== 'app') { tabs.unshift({ name: entityDetailTabsName.informationAggregation, label: i18n.global.t('entities.informationAggregation'), icon: 'cn-icon cn-icon-information-aggregation' }) } @@ -100,6 +105,41 @@ export default { } }, methods: { + initData () { + const params = { + resource: this.entity.entityName, + startTime: getSecond(this.oneDayTimeFilter.startTime), + endTime: getSecond(this.oneDayTimeFilter.endTime) + } + + const security = axios.get(`${api.entity.security}/${this.entity.entityType}`, { params: params }) + const performance = axios.get(`${api.entity.performance}/${this.entityType}`, { params: params }) + + Promise.all([security, performance]).then(response => { + if (response[0].data.code === 200 && response[1].data.code === 200) { + let index1 = 0 + let index2 = 0 + const name1 = entityDetailTabsName.securityEvent + const name2 = entityDetailTabsName.performanceEvent + + // 为了避免tabs其中某项被注释或删除，导致index不对导致icon显示错误 + const obj1 = this.tabs.find((t, i) => { + index1 = i + return t.name === name1 + }) + const obj2 = this.tabs.find((t, i) => { + index2 = i + return t.name === name2 + }) + if (obj1) { + this.tabs[index1].warnFlag = response[0].data.data.result.length > 0 + } + if (obj2) { + this.tabs[index2].warnFlag = response[1].data.data.result.length > 0 + } + } + }) + }, handleActiveBar (name) { const tabDom = document.getElementById('tab-' + name) if (tabDom) { diff --git a/src/views/charts2/charts/entityDetail/tabs/PerformanceEvent.vue b/src/views/charts2/charts/entityDetail/tabs/PerformanceEvent.vue index 5164708d..658e1e16 100644 --- a/src/views/charts2/charts/entityDetail/tabs/PerformanceEvent.vue +++ b/src/views/charts2/charts/entityDetail/tabs/PerformanceEvent.vue @@ -76,7 +76,7 @@ export default { setup () { const { query } = useRoute() const entityType = query.entityType - const entityName = query.entityName + const entityName = query.name || query.entityName return { entityType,