289 lines
6.5 KiB
Vue
289 lines
6.5 KiB
Vue
<!-- 告警配置组件 -->
|
|
<template>
|
|
<div class="alert-config">
|
|
<el-form-item label="告警配置" required>
|
|
<el-select
|
|
v-model="localValue"
|
|
placeholder="请选择告警配置"
|
|
filterable
|
|
clearable
|
|
@change="handleChange"
|
|
class="w-full"
|
|
:loading="loading"
|
|
>
|
|
<el-option
|
|
v-for="config in alertConfigs"
|
|
:key="config.id"
|
|
:label="config.name"
|
|
:value="config.id"
|
|
>
|
|
<div class="alert-option">
|
|
<div class="option-content">
|
|
<div class="option-name">{{ config.name }}</div>
|
|
<div class="option-desc">{{ config.description }}</div>
|
|
</div>
|
|
<el-tag :type="config.enabled ? 'success' : 'danger'" size="small">
|
|
{{ config.enabled ? '启用' : '禁用' }}
|
|
</el-tag>
|
|
</div>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<!-- 告警配置详情 -->
|
|
<div v-if="selectedConfig" class="alert-details">
|
|
<div class="details-header">
|
|
<Icon icon="ep:bell" class="details-icon" />
|
|
<span class="details-title">{{ selectedConfig.name }}</span>
|
|
<el-tag :type="selectedConfig.enabled ? 'success' : 'danger'" size="small">
|
|
{{ selectedConfig.enabled ? '启用' : '禁用' }}
|
|
</el-tag>
|
|
</div>
|
|
<div class="details-content">
|
|
<div class="detail-item">
|
|
<span class="detail-label">描述：</span>
|
|
<span class="detail-value">{{ selectedConfig.description }}</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-label">通知方式：</span>
|
|
<span class="detail-value">{{ getNotifyTypeName(selectedConfig.notifyType) }}</span>
|
|
</div>
|
|
<div v-if="selectedConfig.receivers" class="detail-item">
|
|
<span class="detail-label">接收人：</span>
|
|
<span class="detail-value">{{ selectedConfig.receivers.join(', ') }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 验证结果 -->
|
|
<div v-if="validationMessage" class="validation-result">
|
|
<el-alert
|
|
:title="validationMessage"
|
|
:type="isValid ? 'success' : 'error'"
|
|
:closable="false"
|
|
show-icon
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useVModel } from '@vueuse/core'
|
|
|
|
/** 告警配置组件 */
|
|
defineOptions({ name: 'AlertConfig' })
|
|
|
|
interface Props {
|
|
modelValue?: number
|
|
}
|
|
|
|
interface Emits {
|
|
(e: 'update:modelValue', value?: number): void
|
|
(e: 'validate', result: { valid: boolean; message: string }): void
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
const emit = defineEmits<Emits>()
|
|
|
|
const localValue = useVModel(props, 'modelValue', emit)
|
|
|
|
// 状态
|
|
const loading = ref(false)
|
|
const alertConfigs = ref<any[]>([])
|
|
const validationMessage = ref('')
|
|
const isValid = ref(true)
|
|
|
|
// 计算属性
|
|
const selectedConfig = computed(() => {
|
|
return alertConfigs.value.find(config => config.id === localValue.value)
|
|
})
|
|
|
|
// 工具函数
|
|
const getNotifyTypeName = (type: number) => {
|
|
const typeMap = {
|
|
1: '邮件通知',
|
|
2: '短信通知',
|
|
3: '微信通知',
|
|
4: '钉钉通知'
|
|
}
|
|
return typeMap[type] || '未知'
|
|
}
|
|
|
|
// 事件处理
|
|
const handleChange = () => {
|
|
updateValidationResult()
|
|
}
|
|
|
|
const updateValidationResult = () => {
|
|
if (!localValue.value) {
|
|
isValid.value = false
|
|
validationMessage.value = '请选择告警配置'
|
|
emit('validate', { valid: false, message: validationMessage.value })
|
|
return
|
|
}
|
|
|
|
const config = selectedConfig.value
|
|
if (!config) {
|
|
isValid.value = false
|
|
validationMessage.value = '告警配置不存在'
|
|
emit('validate', { valid: false, message: validationMessage.value })
|
|
return
|
|
}
|
|
|
|
if (!config.enabled) {
|
|
isValid.value = false
|
|
validationMessage.value = '选择的告警配置已禁用'
|
|
emit('validate', { valid: false, message: validationMessage.value })
|
|
return
|
|
}
|
|
|
|
// 验证通过
|
|
isValid.value = true
|
|
validationMessage.value = '告警配置验证通过'
|
|
emit('validate', { valid: true, message: validationMessage.value })
|
|
}
|
|
|
|
// API 调用
|
|
const getAlertConfigs = async () => {
|
|
loading.value = true
|
|
try {
|
|
// 这里应该调用真实的API获取告警配置
|
|
// 暂时使用模拟数据
|
|
alertConfigs.value = [
|
|
{
|
|
id: 1,
|
|
name: '设备异常告警',
|
|
description: '设备状态异常时发送告警',
|
|
enabled: true,
|
|
notifyType: 1,
|
|
receivers: ['admin@example.com', 'operator@example.com']
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '温度超限告警',
|
|
description: '温度超过阈值时发送告警',
|
|
enabled: true,
|
|
notifyType: 2,
|
|
receivers: ['13800138000', '13900139000']
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '系统故障告警',
|
|
description: '系统发生故障时发送告警',
|
|
enabled: false,
|
|
notifyType: 3,
|
|
receivers: ['技术支持群']
|
|
}
|
|
]
|
|
} catch (error) {
|
|
console.error('获取告警配置失败:', error)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
// 监听值变化
|
|
watch(() => localValue.value, () => {
|
|
updateValidationResult()
|
|
})
|
|
|
|
// 初始化
|
|
onMounted(() => {
|
|
getAlertConfigs()
|
|
if (localValue.value) {
|
|
updateValidationResult()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.alert-config {
|
|
width: 100%;
|
|
}
|
|
|
|
.alert-option {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.option-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.option-name {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--el-text-color-primary);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.option-desc {
|
|
font-size: 12px;
|
|
color: var(--el-text-color-secondary);
|
|
}
|
|
|
|
.alert-details {
|
|
margin-top: 12px;
|
|
padding: 12px;
|
|
background: var(--el-fill-color-light);
|
|
border-radius: 6px;
|
|
border: 1px solid var(--el-border-color-lighter);
|
|
}
|
|
|
|
.details-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.details-icon {
|
|
color: var(--el-color-warning);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.details-title {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--el-text-color-primary);
|
|
}
|
|
|
|
.details-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
margin-left: 22px;
|
|
}
|
|
|
|
.detail-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
}
|
|
|
|
.detail-label {
|
|
font-size: 12px;
|
|
color: var(--el-text-color-secondary);
|
|
min-width: 60px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.detail-value {
|
|
font-size: 12px;
|
|
color: var(--el-text-color-primary);
|
|
flex: 1;
|
|
}
|
|
|
|
.validation-result {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
:deep(.el-select-dropdown__item) {
|
|
height: auto;
|
|
padding: 8px 20px;
|
|
}
|
|
</style>
|