NEZ-1821 perf : 告警详情页面 样式优化
This commit is contained in:
likexuan
@@ -54,9 +54,9 @@
|
|||||||
height: 61.8%;
|
height: 61.8%;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
||||||
// .alert-label-header-title {
|
.alert-label-header-title3 {
|
||||||
// // display: none;
|
display: none;
|
||||||
// }
|
}
|
||||||
|
|
||||||
.alert-rule-box {
|
.alert-rule-box {
|
||||||
margin-bottom: 25px;
|
margin-bottom: 25px;
|
||||||
|
|||||||
874
nezha-fronted/src/components/common/alert/alertLabel3.vue
Normal file
874
nezha-fronted/src/components/common/alert/alertLabel3.vue
Normal file
@@ -0,0 +1,874 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
:class="calcHeight(that.position, that)"
|
||||||
|
:style="calcPosition(that.position, that)"
|
||||||
|
class="alert-label__border"
|
||||||
|
ref="alertLabels"
|
||||||
|
>
|
||||||
|
<div class="alert-label-header-title3">
|
||||||
|
<div
|
||||||
|
class="alert-label-header-circle"
|
||||||
|
:style="`background: ${alertColor}`"
|
||||||
|
>
|
||||||
|
<i class="nz-icon" :class="selectIcon(type)"></i>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-header-name">
|
||||||
|
{{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="alert-label-info"
|
||||||
|
v-if="type === 'asset'"
|
||||||
|
v-my-loading="loading"
|
||||||
|
>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">ID</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
{{ alertLabelData && alertLabelData.id ? alertLabelData.id : "--" }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box name-labe">
|
||||||
|
<div class="alert-label-title">{{$t('overall.name')}}</div>
|
||||||
|
<div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="alert-label-box name-labe">
|
||||||
|
<div class="alert-label-title">Name</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
{{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">{{ $t("overall.manageIp") }}</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
{{
|
||||||
|
alertLabelData && alertLabelData.manageIp
|
||||||
|
? alertLabelData.manageIp
|
||||||
|
: "--"
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">{{ $t("overall.type") }}</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
{{
|
||||||
|
alertLabelData && alertLabelData.type && alertLabelData.type.name
|
||||||
|
? alertLabelData.type.name
|
||||||
|
: "--"
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">{{ $t("overall.state") }}</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
{{
|
||||||
|
alertLabelData && alertLabelData.state && alertLabelData.state.name
|
||||||
|
? alertLabelData.state.name
|
||||||
|
: "--"
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">Ping</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
<div
|
||||||
|
v-if="alertLabelData"
|
||||||
|
:class="{
|
||||||
|
'green-bg':
|
||||||
|
alertLabelData &&
|
||||||
|
alertLabelData.pingInfo &&
|
||||||
|
alertLabelData.pingInfo.status === 1,
|
||||||
|
'red-bg':
|
||||||
|
alertLabelData &&
|
||||||
|
alertLabelData.pingInfo &&
|
||||||
|
alertLabelData.pingInfo.status === 0,
|
||||||
|
}"
|
||||||
|
class="active-icon"
|
||||||
|
></div>
|
||||||
|
<span v-if="alertLabelData">{{
|
||||||
|
alertLabelData &&
|
||||||
|
alertLabelData.pingInfo &&
|
||||||
|
alertLabelData.pingInfo.rtt
|
||||||
|
? alertLabelData.pingInfo.rtt + "ms"
|
||||||
|
: ""
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">{{ $t("overall.dc") }}</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
{{
|
||||||
|
alertLabelData && alertLabelData.dc && alertLabelData.dc.name
|
||||||
|
? alertLabelData.dc.name
|
||||||
|
: "--"
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">{{ $t("overall.cabinet") }}</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
{{
|
||||||
|
alertLabelData &&
|
||||||
|
alertLabelData.cabinet &&
|
||||||
|
alertLabelData.cabinet.name
|
||||||
|
? alertLabelData.cabinet.name
|
||||||
|
: "--"
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">{{ $t("overall.brand") }}</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
{{
|
||||||
|
alertLabelData && alertLabelData.brand && alertLabelData.brand.name
|
||||||
|
? alertLabelData.brand.name
|
||||||
|
: "--"
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">{{ $t("overall.model") }}</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
{{
|
||||||
|
alertLabelData && alertLabelData.model && alertLabelData.model.name
|
||||||
|
? alertLabelData.model.name
|
||||||
|
: "--"
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">{{ $t("overall.alert") }}</div>
|
||||||
|
<div class="alert-label-value" v-if="alertLabelData">
|
||||||
|
<i
|
||||||
|
:class="alertLabelData.alertNum ? 'red' : 'green'"
|
||||||
|
class="nz-icon nz-icon-overview-alert vertical-align-top;"
|
||||||
|
@mouseenter="tooltipHover('', true, $event)"
|
||||||
|
@mouseleave="tooltipHover('', false, $event)"
|
||||||
|
></i>
|
||||||
|
<div
|
||||||
|
v-if="alertNumtooltipShow"
|
||||||
|
class="alert-days-info-tooltip"
|
||||||
|
:style="{ left: position.left + 'px', top: position.top + 'px' }"
|
||||||
|
>
|
||||||
|
<div class="tooltip-title">
|
||||||
|
{{ $t("project.topology.alert") }}({{ $t("asset.pingActive") }})
|
||||||
|
</div>
|
||||||
|
<div class="severity-info" style="justify-content: space-between">
|
||||||
|
<div class="severity-name">{{ $t("overall.result.total") }}</div>
|
||||||
|
<div class="severity-value">{{ alertLabelData.alertNum }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<alertDaysInfo
|
||||||
|
v-show="!trendLoading"
|
||||||
|
:alertDaysData="alertDaysData"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">{{ $t("asset.endpoint") }}</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
<i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>
|
||||||
|
<span>{{
|
||||||
|
alertLabelData && alertLabelData.endpointNum
|
||||||
|
? alertLabelData.endpointNum
|
||||||
|
: 0
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="alert-label-info"
|
||||||
|
v-if="type === 'module'"
|
||||||
|
v-my-loading="loading"
|
||||||
|
>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">ID</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
{{ alertLabelData && alertLabelData.id ? alertLabelData.id : "--" }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box name-labe">
|
||||||
|
<div class="alert-label-title">{{$t('overall.name')}}</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
{{ alertLabelData && alertLabelData.Name ? alertLabelData.Name : "--" }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">{{ $t("overall.project") }}</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
{{
|
||||||
|
alertLabelData &&
|
||||||
|
alertLabelData.project &&
|
||||||
|
alertLabelData.project.name
|
||||||
|
? alertLabelData.project.name
|
||||||
|
: "--"
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">{{ $t("asset.endpoint") }}</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
<i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>
|
||||||
|
<span>{{
|
||||||
|
alertLabelData && alertLabelData.endpointNum
|
||||||
|
? alertLabelData.endpointNum
|
||||||
|
: 0
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">{{ $t("overall.asset") }}</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
<i
|
||||||
|
class="nz-icon nz-icon-overview-project monitorColor color23BF9A"
|
||||||
|
/>
|
||||||
|
<span>{{
|
||||||
|
alertLabelData && alertLabelData.assetNum
|
||||||
|
? alertLabelData.assetNum
|
||||||
|
: 0
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">{{ $t("overall.alert") }}</div>
|
||||||
|
<div class="alert-label-value" v-if="alertLabelData">
|
||||||
|
<i
|
||||||
|
:class="alertLabelData.alertNum ? 'red' : 'green'"
|
||||||
|
class="nz-icon nz-icon-overview-alert vertical-align-top;"
|
||||||
|
@mouseenter="tooltipHover('', true, $event)"
|
||||||
|
@mouseleave="tooltipHover('', false, $event)"
|
||||||
|
></i>
|
||||||
|
<div
|
||||||
|
v-if="alertNumtooltipShow"
|
||||||
|
class="alert-days-info-tooltip"
|
||||||
|
:style="{ left: position.left + 'px', top: position.top + 'px' }"
|
||||||
|
>
|
||||||
|
<div class="tooltip-title">
|
||||||
|
{{ $t("project.topology.alert") }}({{ $t("asset.pingActive") }})
|
||||||
|
</div>
|
||||||
|
<div class="severity-info" style="justify-content: space-between">
|
||||||
|
<div class="severity-name">{{ $t("overall.result.total") }}</div>
|
||||||
|
<div class="severity-value">{{ alertLabelData.alertNum }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<alertDaysInfo
|
||||||
|
v-show="!trendLoading"
|
||||||
|
:alertDaysData="alertDaysData"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">{{ $t("overall.remark") }}</div>
|
||||||
|
<div class="alert-label-value alert-label-remark">
|
||||||
|
{{
|
||||||
|
alertLabelData && alertLabelData.remark
|
||||||
|
? alertLabelData.remark
|
||||||
|
: "--"
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="alert-label-info"
|
||||||
|
v-if="type === 'project'"
|
||||||
|
v-my-loading="loading"
|
||||||
|
>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">ID</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
{{ alertLabelData && alertLabelData ? alertLabelData.id : "--" }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box name-labe">
|
||||||
|
<div class="alert-label-title">{{$t('overall.name')}}</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
{{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">{{ $t("overall.module") }}</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
<i
|
||||||
|
style="cursor: pointer"
|
||||||
|
class="nz-icon nz-icon-overview-module monitorColor"
|
||||||
|
/>
|
||||||
|
<span>{{
|
||||||
|
alertLabelData && alertLabelData.moduleNum
|
||||||
|
? alertLabelData.moduleNum
|
||||||
|
: "--"
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">Endpoint</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
<i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>
|
||||||
|
<span>{{
|
||||||
|
alertLabelData && alertLabelData.endpointNum
|
||||||
|
? alertLabelData.endpointNum
|
||||||
|
: 0
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">{{ $t("overall.asset") }}</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
<i
|
||||||
|
class="nz-icon nz-icon-overview-project monitorColor color23BF9A"
|
||||||
|
/>
|
||||||
|
<span>{{
|
||||||
|
alertLabelData && alertLabelData.assetNum
|
||||||
|
? alertLabelData.assetNum
|
||||||
|
: 0
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">{{ $t("overall.alert") }}</div>
|
||||||
|
<div class="alert-label-value" v-if="alertLabelData">
|
||||||
|
<i
|
||||||
|
:class="alertLabelData.alertNum ? 'red' : 'green'"
|
||||||
|
class="nz-icon nz-icon-overview-alert vertical-align-top;"
|
||||||
|
@mouseenter="tooltipHover('', true, $event)"
|
||||||
|
@mouseleave="tooltipHover('', false, $event)"
|
||||||
|
></i>
|
||||||
|
<div
|
||||||
|
v-if="alertNumtooltipShow"
|
||||||
|
class="alert-days-info-tooltip"
|
||||||
|
:style="{ left: position.left + 'px', top: position.top + 'px' }"
|
||||||
|
>
|
||||||
|
<div class="tooltip-title">
|
||||||
|
{{ $t("project.topology.alert") }}({{ $t("asset.pingActive") }})
|
||||||
|
</div>
|
||||||
|
<div class="severity-info" style="justify-content: space-between">
|
||||||
|
<div class="severity-name">{{ $t("overall.result.total") }}</div>
|
||||||
|
<div class="severity-value">{{ alertLabelData.alertNum }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<alertDaysInfo
|
||||||
|
v-show="!trendLoading"
|
||||||
|
:alertDaysData="alertDaysData"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">{{ $t("overall.remark") }}</div>
|
||||||
|
<div class="alert-label-value alert-label-remark">
|
||||||
|
{{
|
||||||
|
alertLabelData && alertLabelData.remark
|
||||||
|
? alertLabelData.remark
|
||||||
|
: "--"
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="alert-label-info"
|
||||||
|
v-if="type === 'endpoint'"
|
||||||
|
v-my-loading="loading"
|
||||||
|
>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">ID</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
{{ alertLabelData && alertLabelData.id ? alertLabelData.id : "--" }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box name-labe">
|
||||||
|
<div class="alert-label-title">{{$t('overall.name')}}</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
{{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">{{ $t("overall.project") }}</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
{{
|
||||||
|
alertLabelData &&
|
||||||
|
alertLabelData.project &&
|
||||||
|
alertLabelData.project.name
|
||||||
|
? alertLabelData.project.name
|
||||||
|
: "--"
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">{{ $t("overall.module") }}</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
<i
|
||||||
|
style="cursor: pointer"
|
||||||
|
class="nz-icon nz-icon-overview-module monitorColor"
|
||||||
|
/>
|
||||||
|
<span>{{
|
||||||
|
alertLabelData &&
|
||||||
|
alertLabelData.module &&
|
||||||
|
alertLabelData.module.name
|
||||||
|
? alertLabelData.module.name
|
||||||
|
: "--"
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">{{ $t("overall.asset") }}</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
<i
|
||||||
|
class="nz-icon nz-icon-overview-project monitorColor color23BF9A"
|
||||||
|
></i
|
||||||
|
>
|
||||||
|
<span>{{
|
||||||
|
alertLabelData && alertLabelData.asset.name
|
||||||
|
? alertLabelData.asset.name
|
||||||
|
: "--"
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">{{ $t("overall.alert") }}</div>
|
||||||
|
<div class="alert-label-value" v-if="alertLabelData">
|
||||||
|
<i
|
||||||
|
:class="alertLabelData.alertNum ? 'red' : 'green'"
|
||||||
|
class="nz-icon nz-icon-overview-alert vertical-align-top;"
|
||||||
|
@mouseenter="tooltipHover('', true, $event)"
|
||||||
|
@mouseleave="tooltipHover('', false, $event)"
|
||||||
|
></i>
|
||||||
|
<div
|
||||||
|
v-if="alertNumtooltipShow"
|
||||||
|
class="alert-days-info-tooltip"
|
||||||
|
:style="{ left: position.left + 'px', top: position.top + 'px' }"
|
||||||
|
>
|
||||||
|
<div class="tooltip-title">
|
||||||
|
{{ $t("project.topology.alert") }}({{ $t("asset.pingActive") }})
|
||||||
|
</div>
|
||||||
|
<div class="severity-info" style="justify-content: space-between">
|
||||||
|
<div class="severity-name">{{ $t("overall.result.total") }}</div>
|
||||||
|
<div class="severity-value">{{ alertLabelData.alertNum }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<alertDaysInfo
|
||||||
|
v-show="!trendLoading"
|
||||||
|
:alertDaysData="alertDaysData"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">{{ $t("overall.state") }}</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
<span style="width: auto">
|
||||||
|
<span class="endpoint-cell-left"
|
||||||
|
><i class="nz-icon nz-icon-Metrics active" />
|
||||||
|
{{ $t("project.endpoint.metrics") }}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
v-if="alertLabelData && alertLabelData.configs[0].state === 0"
|
||||||
|
>
|
||||||
|
<span class="active-icon red-bg inline-block"></span>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
v-else-if="
|
||||||
|
alertLabelData && alertLabelData.configs[0].state === 1
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<span class="active-icon green-bg inline-block"></span>
|
||||||
|
</span>
|
||||||
|
<span v-else-if="alertLabelData && alertLabelData.configs[0].state">
|
||||||
|
<span class="active-icon gray-bg inline-block"></span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<span style="width: auto">
|
||||||
|
<span class="endpoint-cell-left" style="margin-left: 10px"
|
||||||
|
><i class="nz-icon nz-icon-logs active" />
|
||||||
|
{{ $t("project.endpoint.logs") }}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
v-if="alertLabelData && alertLabelData.configs[1].state === 0"
|
||||||
|
>
|
||||||
|
<span class="active-icon red-bg inline-block"></span>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
v-else-if="
|
||||||
|
alertLabelData && alertLabelData.configs[1].state === 1
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<span class="active-icon green-bg inline-block"></span>
|
||||||
|
</span>
|
||||||
|
<span v-else-if="alertLabelData && alertLabelData.configs[1].state">
|
||||||
|
<span class="active-icon gray-bg inline-block"></span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="alert-label-info" v-if="type === 'dc'" v-my-loading="loading">
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">ID</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
{{ alertLabelData && alertLabelData.id ? alertLabelData.id : "--" }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box name-labe">
|
||||||
|
<div class="alert-label-title">{{$t('overall.name')}}</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
{{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">{{ $t("overall.location") }}</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
{{
|
||||||
|
alertLabelData && alertLabelData.location && alertLabelData.location
|
||||||
|
? alertLabelData.location
|
||||||
|
: "--"
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">{{ $t("overall.cabinet") }}</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
<i
|
||||||
|
v-if="alertLabelData"
|
||||||
|
class="nz-icon nz-icon-cabinet monitorColor"
|
||||||
|
:class="
|
||||||
|
alertLabelData && alertLabelData.cabinetNum > 0
|
||||||
|
? 'color23BF9A'
|
||||||
|
: 'colorEF7458'
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<span>{{
|
||||||
|
alertLabelData && alertLabelData.cabinetNum
|
||||||
|
? alertLabelData.cabinetNum
|
||||||
|
: 0
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">{{ $t("overall.asset") }}</div>
|
||||||
|
<div class="alert-label-value">
|
||||||
|
<i
|
||||||
|
class="nz-icon nz-icon-overview-project monitorColor color23BF9A"
|
||||||
|
/>
|
||||||
|
<span>{{
|
||||||
|
alertLabelData && alertLabelData.assetNum && alertLabelData.assetNum
|
||||||
|
? alertLabelData.assetNum
|
||||||
|
: 0
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">{{ $t("overall.alert") }}</div>
|
||||||
|
<div class="alert-label-value" v-if="alertLabelData">
|
||||||
|
<i
|
||||||
|
:class="alertLabelData.alertNum ? 'red' : 'green'"
|
||||||
|
class="nz-icon nz-icon-overview-alert vertical-align-top;"
|
||||||
|
@mouseenter="tooltipHover('', true, $event)"
|
||||||
|
@mouseleave="tooltipHover('', false, $event)"
|
||||||
|
></i>
|
||||||
|
<div
|
||||||
|
v-if="alertNumtooltipShow"
|
||||||
|
class="alert-days-info-tooltip"
|
||||||
|
:style="{ left: position.left + 'px', top: position.top + 'px' }"
|
||||||
|
>
|
||||||
|
<div class="tooltip-title">
|
||||||
|
{{ $t("project.topology.alert") }}({{ $t("asset.pingActive") }})
|
||||||
|
</div>
|
||||||
|
<div class="severity-info" style="justify-content: space-between">
|
||||||
|
<div class="severity-name">{{ $t("overall.result.total") }}</div>
|
||||||
|
<div class="severity-value">{{ alertLabelData.alertNum }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<alertDaysInfo
|
||||||
|
v-show="!trendLoading"
|
||||||
|
:alertDaysData="alertDaysData"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-box">
|
||||||
|
<div class="alert-label-title">{{ $t("overall.state") }}</div>
|
||||||
|
<div class="alert-label-value" style="margin-left: 3px">
|
||||||
|
<div
|
||||||
|
v-if="alertLabelData"
|
||||||
|
:class="{
|
||||||
|
'green-bg': alertLabelData && alertLabelData.state === 'ON',
|
||||||
|
'red-bg': alertLabelData && alertLabelData.state === 'OFF',
|
||||||
|
}"
|
||||||
|
class="active-icon"
|
||||||
|
></div>
|
||||||
|
<span v-if="alertLabelData && alertLabelData.state === 'ON'">{{
|
||||||
|
$t("overall.enabled")
|
||||||
|
}}</span>
|
||||||
|
<span v-if="alertLabelData && alertLabelData.state === 'OFF'">{{
|
||||||
|
$t("overall.disabled")
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import trendMixin from './trendMixins'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'alertLabel',
|
||||||
|
mixins: [trendMixin],
|
||||||
|
props: {
|
||||||
|
id: {},
|
||||||
|
type: {},
|
||||||
|
// labelLoading:{},
|
||||||
|
that: {},
|
||||||
|
detailList: Boolean,
|
||||||
|
alertTableDialog: Boolean
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
alertLabelData: null,
|
||||||
|
loading: true,
|
||||||
|
heightList: 0,
|
||||||
|
boxWidth: 0,
|
||||||
|
severityDataWeight: this.$store.getters.severityDataWeight,
|
||||||
|
alertColor: '#23bf9a'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
id: {
|
||||||
|
immediate: true,
|
||||||
|
deep: true,
|
||||||
|
handler (n) {
|
||||||
|
this.init()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
that: {
|
||||||
|
immediate: true,
|
||||||
|
deep: true,
|
||||||
|
handler (n) {}
|
||||||
|
},
|
||||||
|
LRTriangle: {
|
||||||
|
immediate: true,
|
||||||
|
deep: true,
|
||||||
|
handler (n) {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
calcPosition () {
|
||||||
|
return function (position) {
|
||||||
|
const clientHeight =
|
||||||
|
document.body.clientHeight < document.documentElement.clientHeight
|
||||||
|
? document.body.clientHeight
|
||||||
|
: document.documentElement.clientHeight
|
||||||
|
const clientWidth =
|
||||||
|
document.body.clientWidth < document.documentElement.clientWidth
|
||||||
|
? document.body.clientWidth
|
||||||
|
: document.documentElement.clientWidth
|
||||||
|
let leftOffSetView = 0
|
||||||
|
let leftOffSet = this.detailList ? -80 : 10
|
||||||
|
let topOffSet = this.detailList ? 60 : 22
|
||||||
|
let topOffSetView = 0
|
||||||
|
let labelPosition = {
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0
|
||||||
|
}
|
||||||
|
if (this.alertTableDialog) {
|
||||||
|
let dialog = document.querySelector(
|
||||||
|
'#dialog-alert-massage .el-dialog'
|
||||||
|
)
|
||||||
|
if (!dialog) {
|
||||||
|
dialog = document.querySelector('#viewGraphDialog .el-dialog')
|
||||||
|
}
|
||||||
|
const dialogHeight = dialog.getBoundingClientRect()
|
||||||
|
leftOffSet = leftOffSet - 3 * dialogHeight.x
|
||||||
|
leftOffSetView = dialogHeight.x
|
||||||
|
topOffSet = topOffSet - dialogHeight.y
|
||||||
|
topOffSetView = topOffSet
|
||||||
|
}
|
||||||
|
if (position.top > clientHeight / 2) {
|
||||||
|
labelPosition = {
|
||||||
|
left: `${position.left + position.width + leftOffSet}px`,
|
||||||
|
top: `${position.top - this.heightList - topOffSetView}px`
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
labelPosition = {
|
||||||
|
left: `${position.left + position.width + leftOffSet}px`,
|
||||||
|
top: `${position.top + topOffSet}px`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (position.left > clientWidth / 2) {
|
||||||
|
delete labelPosition.left
|
||||||
|
|
||||||
|
labelPosition.right =
|
||||||
|
clientWidth - position.left - leftOffSetView + 'px'
|
||||||
|
}
|
||||||
|
return labelPosition
|
||||||
|
}
|
||||||
|
},
|
||||||
|
calcHeight () {
|
||||||
|
const self = this
|
||||||
|
return function (position) {
|
||||||
|
const clientHeight =
|
||||||
|
document.body.clientHeight < document.documentElement.clientHeight
|
||||||
|
? document.body.clientHeight
|
||||||
|
: document.documentElement.clientHeight
|
||||||
|
const elHeight =
|
||||||
|
self.type === 'asset' ? 318 : self.type === 'project' ? 70 : 70
|
||||||
|
if (position.top + elHeight > clientHeight) {
|
||||||
|
return 'alert-labelUp'
|
||||||
|
} else {
|
||||||
|
return 'alert-label'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init () {
|
||||||
|
this.loading = true
|
||||||
|
if (this.type === 'asset') {
|
||||||
|
this.$get('asset/asset/' + this.id).then((res) => {
|
||||||
|
if (res.msg === 'success') {
|
||||||
|
this.loading = false
|
||||||
|
this.alertLabelData = res.data
|
||||||
|
this.alertColor = this.returnColor(res.data.alert)
|
||||||
|
} else {
|
||||||
|
this.$message.error(res.msg)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (this.type === 'project') {
|
||||||
|
this.$get('monitor/project/' + this.id).then((res) => {
|
||||||
|
if (res.msg === 'success') {
|
||||||
|
this.loading = false
|
||||||
|
this.alertLabelData = res.data
|
||||||
|
this.alertColor = this.returnColor(res.data.alert)
|
||||||
|
} else {
|
||||||
|
this.$message.error(res.msg)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (this.type === 'module') {
|
||||||
|
this.$get('monitor/module/' + this.id).then((res) => {
|
||||||
|
if (res.msg === 'success') {
|
||||||
|
this.loading = false
|
||||||
|
this.alertLabelData = res.data
|
||||||
|
this.alertColor = this.returnColor(res.data.alert)
|
||||||
|
} else {
|
||||||
|
this.$message.error(res.msg)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (this.type === 'endpoint') {
|
||||||
|
this.$get('monitor/endpoint/' + this.id).then((res) => {
|
||||||
|
if (res.msg === 'success') {
|
||||||
|
this.loading = false
|
||||||
|
this.alertLabelData = res.data
|
||||||
|
this.alertColor = this.returnColor(res.data.alert)
|
||||||
|
} else {
|
||||||
|
this.$message.error(res.msg)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (this.type === 'dc') {
|
||||||
|
this.$get('dc/' + this.id).then((res) => {
|
||||||
|
if (res.msg === 'success') {
|
||||||
|
this.loading = false
|
||||||
|
this.alertLabelData = res.data
|
||||||
|
this.alertColor = this.returnColor(res.data.alert)
|
||||||
|
} else {
|
||||||
|
this.$message.error(res.msg)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const weekDays = this.getWeeksTime()
|
||||||
|
if (this.trendTimer) {
|
||||||
|
clearTimeout(this.trendTimer)
|
||||||
|
this.trendTimer = null
|
||||||
|
}
|
||||||
|
this.trendTimer = setTimeout(() => {
|
||||||
|
this.trendLoading = true
|
||||||
|
const params = {
|
||||||
|
type: 'total',
|
||||||
|
dimension: 'priority',
|
||||||
|
step: 'd'
|
||||||
|
}
|
||||||
|
params[this.type + 'Id'] = this.id
|
||||||
|
this.$get('/stat/alertMessage/trend', params).then((res) => {
|
||||||
|
if (!res.data) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const alertDaysData = res.data.result
|
||||||
|
? res.data.result[0].values
|
||||||
|
: []
|
||||||
|
const newWeekDays = JSON.parse(JSON.stringify(weekDays))
|
||||||
|
alertDaysData.forEach((item) => {
|
||||||
|
item.values.forEach((time) => {
|
||||||
|
const findItem = newWeekDays.find((days) => days.time == time[0])
|
||||||
|
if (findItem) {
|
||||||
|
findItem[item.metric.priority] = time[1]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
setTimeout(() => {
|
||||||
|
this.alertDaysData = newWeekDays
|
||||||
|
this.trendLoading = false
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
alertActiveStr () {
|
||||||
|
return this.$t('overall.active')
|
||||||
|
},
|
||||||
|
alertStateStr (num) {
|
||||||
|
if (num == 1) {
|
||||||
|
return this.$t('asset.inStock')
|
||||||
|
} else {
|
||||||
|
return this.$t('asset.notInStock')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
selectIcon (type) {
|
||||||
|
switch (type) {
|
||||||
|
case 'asset':
|
||||||
|
return 'nz-icon-overview-project'
|
||||||
|
case 'dc':
|
||||||
|
return 'nz-icon-Datacenter2'
|
||||||
|
case 'project':
|
||||||
|
return 'nz-icon-project'
|
||||||
|
case 'module':
|
||||||
|
return 'nz-icon-overview-module'
|
||||||
|
case 'endpoint':
|
||||||
|
return 'nz-icon-overview-endpoint'
|
||||||
|
case 'alertrule':
|
||||||
|
return 'nz-icon-Alertrule'
|
||||||
|
}
|
||||||
|
return 'nz-icon-module5'
|
||||||
|
},
|
||||||
|
returnColor (obj) {
|
||||||
|
let color = ''
|
||||||
|
if (!obj) {
|
||||||
|
return '#23bf9a'
|
||||||
|
} else {
|
||||||
|
this.severityDataWeight.forEach((severity) => {
|
||||||
|
const num = obj.find((alert) => alert.priority === severity.name)
|
||||||
|
if (num && !color && num.num > 0) {
|
||||||
|
color = severity.color
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if (!color) {
|
||||||
|
color = '#23bf9a'
|
||||||
|
}
|
||||||
|
return color
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
if (this.$refs.alertLabels) {
|
||||||
|
this.heightList = this.$refs.alertLabels.getBoundingClientRect().height
|
||||||
|
this.boxWidth = this.$refs.alertLabels.getBoundingClientRect().width
|
||||||
|
} else {
|
||||||
|
this.heightList = 0
|
||||||
|
this.boxWidth = 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy () {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
@@ -40,8 +40,8 @@
|
|||||||
<script>
|
<script>
|
||||||
import alertMessageInfoDetail from '@/components/common/alert/alertMessageInfoDetail'
|
import alertMessageInfoDetail from '@/components/common/alert/alertMessageInfoDetail'
|
||||||
import searchItemInfo from '@/components/common/globalSearch/searchItemInfo'
|
import searchItemInfo from '@/components/common/globalSearch/searchItemInfo'
|
||||||
import alertLabel from '@/components/common/alert/alertLabel'
|
import alertLabel from '@/components/common/alert/alertLabel3'
|
||||||
import alertRuleInfo from '@/components/common/alert/alertRuleInfo'
|
import alertRuleInfo from '@/components/common/alert/alertRuleInfo2'
|
||||||
// import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
|
// import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
|
||||||
export default {
|
export default {
|
||||||
name: 'alertMessageInfoTab',
|
name: 'alertMessageInfoTab',
|
||||||
|
|||||||
221
nezha-fronted/src/components/common/alert/alertRuleInfo2.vue
Normal file
221
nezha-fronted/src/components/common/alert/alertRuleInfo2.vue
Normal file
@@ -0,0 +1,221 @@
|
|||||||
|
<template>
|
||||||
|
<div :style="calcPosition(that.position,that)" class="alert-label__border alert-label" v-my-loading="loading" ref="alertLabels">
|
||||||
|
<div class="alert-label-header-title3">
|
||||||
|
<div class="alert-label-header-circle" :style="`background: ${alertColor}`">
|
||||||
|
<i class="nz-icon nz-icon-Alertrule"></i>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-header-name">
|
||||||
|
{{alertRuleData && alertRuleData.name ? alertRuleData.name : '--'}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-rule-nfo" >
|
||||||
|
<div class="alert-rule-box">
|
||||||
|
<div class="alert-rule-title">ID</div>
|
||||||
|
<div class="alert-rule-value">{{alertRuleData.id ? alertRuleData.id : '--'}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-rule-box name-labe">
|
||||||
|
<div class="alert-rule-title">{{$t('overall.name')}}</div>
|
||||||
|
<div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="alert-rule-box">-->
|
||||||
|
<!-- <div class="alert-rule-title">{{$t('alert.name')}}</div>-->
|
||||||
|
<!-- <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<div class="alert-rule-box">
|
||||||
|
<div class="alert-rule-title">{{$t('alert.type')}}</div>
|
||||||
|
<div class="alert-rule-value">
|
||||||
|
<span v-if="alertRuleData.type === 1">
|
||||||
|
{{$t('project.metrics.metrics')}}
|
||||||
|
</span>
|
||||||
|
<span v-else-if="alertRuleData.type === 2">
|
||||||
|
{{$t('overall.logs')}}
|
||||||
|
</span>
|
||||||
|
<span v-else-if="alertRuleData.type === 3">SNMP trap</span>
|
||||||
|
<span v-else>--</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-rule-box">
|
||||||
|
<div class="alert-rule-title">{{$t('alert.severity')}}</div>
|
||||||
|
<div class="alert-rule-value"><i class="nz-icon nz-icon-circle" :style="{color:severityColor,'font-size':'12px','margin-right':'5px'}"></i>{{alertRuleData.severityId ? severityData.find(s => alertRuleData.severityId === s.id).name : '--'}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-rule-box">
|
||||||
|
<div class="alert-rule-title">{{$t('alert.config.expr')}}</div>
|
||||||
|
<div class="alert-rule-value">{{alertRuleData.expr ? (alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)) : '--'}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-rule-box">
|
||||||
|
<div class="alert-rule-title">{{$t('alert.alertNum')}}</div>
|
||||||
|
<div class="alert-rule-value" v-if="alertRuleData">
|
||||||
|
<i :class="alertRuleData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
|
||||||
|
<div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
|
||||||
|
<div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
|
||||||
|
<div class="severity-info" style='justify-content: space-between'>
|
||||||
|
<div class="severity-name">{{$t('overall.result.total')}}</div>
|
||||||
|
<div class="severity-value">{{alertRuleData.alertNum}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<alertDaysInfo
|
||||||
|
v-show="!trendLoading"
|
||||||
|
:alertDaysData="alertDaysData"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-rule-box">
|
||||||
|
<div class="alert-rule-title">{{$t('alert.config.trbShot')}}</div>
|
||||||
|
<div class="alert-rule-value" @click="trbShotShow"><i class="nz-icon nz-icon-guzhangshuju"></i></div>
|
||||||
|
</div>
|
||||||
|
<div class="alert-rule-box">
|
||||||
|
<div class="alert-rule-title">{{$t('alert.state')}}</div>
|
||||||
|
<div class="alert-rule-value" style="margin-left: 3px">
|
||||||
|
<div v-if="alertRuleData.state === 1">
|
||||||
|
<i class="active-icon green-bg inline-block"></i>
|
||||||
|
{{ $t('overall.enabled') }}
|
||||||
|
</div>
|
||||||
|
<div v-else-if="alertRuleData.state === 0">
|
||||||
|
<i class="active-icon gray-bg inline-block"></i>
|
||||||
|
{{ $t('overall.disabled') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import chartDataFormat from '../../chart/chartDataFormat'
|
||||||
|
import trendMixins from '@/components/common/alert/trendMixins'
|
||||||
|
export default {
|
||||||
|
name: 'alert-rule-info',
|
||||||
|
mixins: [trendMixins],
|
||||||
|
props: {
|
||||||
|
id: {},
|
||||||
|
messageLoad: {},
|
||||||
|
detailList: Boolean,
|
||||||
|
that: {},
|
||||||
|
severityData: Array
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
loading: true,
|
||||||
|
alertRuleData: '',
|
||||||
|
severityColor: '',
|
||||||
|
severityDataWeight: this.$store.getters.severityDataWeight,
|
||||||
|
alertColor: '#23bf9a'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
calcPosition () {
|
||||||
|
return function (position) {
|
||||||
|
if (!position) {
|
||||||
|
return {
|
||||||
|
left: '0px',
|
||||||
|
top: '0px'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
|
||||||
|
// const windowWidth = window.innerWidth
|
||||||
|
const boxHeight = this.$refs.alertLabels ? this.$refs.alertLabels.offsetHeight : 231
|
||||||
|
const windowHeight = window.innerHeight
|
||||||
|
const leftOffSetView = this.detailList ? -80 : 10
|
||||||
|
if (position.top > windowHeight / 2) {
|
||||||
|
return {
|
||||||
|
left: `${position.left + position.width + leftOffSetView}px`,
|
||||||
|
top: `${position.top - boxHeight}px`
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
left: `${position.left + position.width + leftOffSetView}px`,
|
||||||
|
top: `${position.top}px`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
formatThreshold (value, unit) {
|
||||||
|
const unitMethod = chartDataFormat.getUnit(unit)
|
||||||
|
if (unitMethod && value) {
|
||||||
|
return unitMethod.compute(value, null, 2)
|
||||||
|
} else {
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
trbShotShow () {
|
||||||
|
this.$emit('showText')
|
||||||
|
},
|
||||||
|
severityDataColor () {
|
||||||
|
this.severityData.forEach(item => {
|
||||||
|
if (this.alertRuleData.severityId === item.id) {
|
||||||
|
this.severityColor = item.color
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
returnColor (obj) {
|
||||||
|
let color = ''
|
||||||
|
if (!obj) {
|
||||||
|
color = '#23bf9a'
|
||||||
|
return color
|
||||||
|
} else {
|
||||||
|
this.severityDataWeight.forEach(severity => {
|
||||||
|
const num = obj.find(alert => alert.priority === severity.name)
|
||||||
|
if (num && !color && num.num > 0) {
|
||||||
|
color = severity.color
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if (!color) {
|
||||||
|
color = '#23bf9a'
|
||||||
|
}
|
||||||
|
return color
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.$get('/alert/rule/' + this.id).then((res) => {
|
||||||
|
if (res.msg === 'success') {
|
||||||
|
this.loading = false
|
||||||
|
this.alertRuleData = res.data
|
||||||
|
this.severityDataColor()
|
||||||
|
this.alertColor = this.returnColor(res.data.alert)
|
||||||
|
const weekDays = this.getWeeksTime()
|
||||||
|
if (this.trendTimer) {
|
||||||
|
clearTimeout(this.trendTimer)
|
||||||
|
this.trendTimer = null
|
||||||
|
}
|
||||||
|
this.trendTimer = setTimeout(() => {
|
||||||
|
this.trendLoading = true
|
||||||
|
const params = {
|
||||||
|
type: 'total',
|
||||||
|
dimension: 'priority',
|
||||||
|
step: 'd'
|
||||||
|
}
|
||||||
|
params['rule' + 'Id'] = this.id
|
||||||
|
this.$get('/stat/alertMessage/trend', params).then((res) => {
|
||||||
|
if (!res.data) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const alertDaysData = res.data.result ? res.data.result[0].values : []
|
||||||
|
const newWeekDays = JSON.parse(JSON.stringify(weekDays))
|
||||||
|
alertDaysData.forEach(item => {
|
||||||
|
item.values.forEach(time => {
|
||||||
|
const findItem = newWeekDays.find(days => days.time == time[0])
|
||||||
|
if (findItem) {
|
||||||
|
findItem[item.metric.priority] = time[1]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
setTimeout(() => {
|
||||||
|
this.alertDaysData = newWeekDays
|
||||||
|
this.trendLoading = false
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.$message.error(res.msg)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
Reference in New Issue
Block a user