169 lines
4.3 KiB
Vue
169 lines
4.3 KiB
Vue
|
<!-- =============================================================================
|
|||
|
|
// 企微IT智能服务台 — 风险提示组件
|
|||
|
|
// =============================================================================
|
|||
|
|
// 说明：显示系统当前已知故障/风险信息
|
|||
|
|
// 第一步：显示"当前无已知故障"占位
|
|||
|
|
// 预留接口，后续从后端获取故障列表
|
|||
|
|
// 红色警告样式预留
|
|||
|
|
// ============================================================================= -->
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div class="risk-alert-wrapper">
|
|||
|
|
<!-- 正常状态（无故障） -->
|
|||
|
|
<div class="risk-alert-ok">
|
|||
|
|
<div class="risk-alert-ok__icon">✅</div>
|
|||
|
|
<div class="risk-alert-ok__title">当前无已知故障</div>
|
|||
|
|
<div class="risk-alert-ok__desc">
|
|||
|
|
所有系统正常运行
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 预留的故障列表区域 -->
|
|||
|
|
<!--
|
|||
|
|
后续步骤会从后端获取故障数据，结构如下：
|
|||
|
|
<div v-for="alert in alerts" class="risk-alert-card">
|
|||
|
|
<div class="risk-alert-level">{{ alert.level }}</div>
|
|||
|
|
<div class="risk-alert-title">{{ alert.title }}</div>
|
|||
|
|
<div class="risk-alert-desc">{{ alert.description }}</div>
|
|||
|
|
<div class="risk-alert-time">{{ alert.time }}</div>
|
|||
|
|
</div>
|
|||
|
|
-->
|
|||
|
|
|
|||
|
|
<!-- 风险监控说明 -->
|
|||
|
|
<div class="risk-alert-scope">
|
|||
|
|
<div class="risk-alert-scope__title">
|
|||
|
|
📋 风险监控范围
|
|||
|
|
</div>
|
|||
|
|
<ul class="risk-alert-scope__list">
|
|||
|
|
<li>VPN 网关连通性</li>
|
|||
|
|
<li>邮件系统服务状态</li>
|
|||
|
|
<li>AD 域控制器状态</li>
|
|||
|
|
<li>网络核心设备告警</li>
|
|||
|
|
<li>业务系统可用性</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 红色警告样式预留（注释形式，后续启用） -->
|
|||
|
|
<!--
|
|||
|
|
<div class="risk-alert-danger">
|
|||
|
|
<div class="risk-alert-danger__header">
|
|||
|
|
<span class="risk-alert-danger__icon">🔴</span>
|
|||
|
|
<span class="risk-alert-danger__title">VPN 网关异常</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="risk-alert-danger__desc">
|
|||
|
|
VPN 网关 B 节点响应超时，影响华南地区员工连接。
|
|||
|
|
网络组正在排查，预计 30 分钟内修复。
|
|||
|
|
</div>
|
|||
|
|
<div class="risk-alert-danger__time">
|
|||
|
|
🕐 发现时间：2025-01-15 10:30
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
-->
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
// ============================================================================
|
|||
|
|
// 风险提示组件 — 第一步为静态占位
|
|||
|
|
// ============================================================================
|
|||
|
|
// 后续步骤需要：
|
|||
|
|
// 1. 从后端 GET /api/system-alerts 获取故障列表
|
|||
|
|
// 2. 定期轮询（每30秒）
|
|||
|
|
// 3. 有故障时显示红色警告卡片
|
|||
|
|
// 4. 按严重程度排序（P0 > P1 > P2）
|
|||
|
|
// ============================================================================
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.risk-alert-wrapper {
|
|||
|
|
padding: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 正常状态（无故障） */
|
|||
|
|
.risk-alert-ok {
|
|||
|
|
padding: 20px;
|
|||
|
|
text-align: center;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
background-color: var(--success-soft);
|
|||
|
|
border: 1px solid var(--success-soft);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.risk-alert-ok__icon {
|
|||
|
|
font-size: 36px;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.risk-alert-ok__title {
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: var(--color-success);
|
|||
|
|
font-size: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.risk-alert-ok__desc {
|
|||
|
|
color: var(--text-tertiary);
|
|||
|
|
font-size: 12px;
|
|||
|
|
margin-top: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 风险监控说明 */
|
|||
|
|
.risk-alert-scope {
|
|||
|
|
margin-top: 16px;
|
|||
|
|
padding: 12px;
|
|||
|
|
background-color: var(--bg-tertiary);
|
|||
|
|
border-radius: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.risk-alert-scope__title {
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
font-size: 13px;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.risk-alert-scope__list {
|
|||
|
|
padding-left: 20px;
|
|||
|
|
color: var(--text-tertiary);
|
|||
|
|
font-size: 12px;
|
|||
|
|
line-height: 2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 红色警告样式预留 */
|
|||
|
|
/*
|
|||
|
|
.risk-alert-danger {
|
|||
|
|
padding: 16px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
background-color: var(--danger-soft);
|
|||
|
|
border: 1px solid var(--danger-soft);
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.risk-alert-danger__header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.risk-alert-danger__icon {
|
|||
|
|
font-size: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.risk-alert-danger__title {
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--color-danger);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.risk-alert-danger__desc {
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
font-size: 13px;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.risk-alert-danger__time {
|
|||
|
|
color: var(--text-tertiary);
|
|||
|
|
font-size: 12px;
|
|||
|
|
margin-top: 8px;
|
|||
|
|
}
|
|||
|
|
*/
|
|||
|
|
</style>
|