92 lines
3.6 KiB
HTML
92 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>预警详情</title>
|
||
<link rel="stylesheet" href="css/variables.css">
|
||
<link rel="stylesheet" href="css/style.css">
|
||
</head>
|
||
<body>
|
||
<div class="app">
|
||
<!-- 顶栏 -->
|
||
<header class="top-bar">
|
||
<a href="alerts.html" class="top-bar-back">‹</a>
|
||
<h1 class="top-bar-title">预警详情</h1>
|
||
</header>
|
||
|
||
<!-- 内容区 -->
|
||
<div id="alertContent"></div>
|
||
</div>
|
||
|
||
<script src="js/mock.js"></script>
|
||
<script src="js/api.js"></script>
|
||
<script src="js/app.js"></script>
|
||
<script>
|
||
requireAuth();
|
||
|
||
const alertId = getQueryParam('id');
|
||
if (!alertId) location.href = 'alerts.html';
|
||
|
||
async function loadAlert() {
|
||
const res = await apiGetAlertDetail(alertId);
|
||
const a = res.data;
|
||
if (!a) { showToast('预警不存在'); location.href = 'alerts.html'; return; }
|
||
|
||
const levelText = { danger: '危险', warning: '警告', handled: '已处理', ignored: '已忽略' };
|
||
|
||
// 未读状态: 显示"确认处理"和"忽略"两个按钮 + 处理备注textarea
|
||
// 已处理/已忽略: 只显示状态和备注信息
|
||
const handledArea = a.status === 'unread' ? `
|
||
<div class="action-area">
|
||
<button class="btn btn-danger" onclick="handleAlert('handled')">确认处理</button>
|
||
<button class="btn btn-secondary" onclick="handleAlert('ignored')">忽略</button>
|
||
</div>
|
||
<div style="padding:0 16px 16px">
|
||
<div class="form-group mb-2">
|
||
<label class="form-label">处理备注</label>
|
||
<textarea class="form-input" id="handleNote" placeholder="选填"></textarea>
|
||
</div>
|
||
</div>
|
||
` : `
|
||
<div class="action-area">
|
||
<div style="flex:1;text-align:center;color:var(--color-text-secondary);font-size:13px;padding:10px">
|
||
已${a.status === 'handled' ? '处理' : '忽略'}${a.handleNote ? '：' + a.handleNote : ''}
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
document.getElementById('alertContent').innerHTML = `
|
||
<div class="alert-detail-header">
|
||
<div class="alert-detail-icon ${a.level === 'danger' ? 'danger' : a.level === 'warning' ? 'warning' : 'handled'}">${getAlertIcon(a.level)}</div>
|
||
<div class="alert-detail-level ${a.level}">${levelText[a.level] || a.level}</div>
|
||
</div>
|
||
<div class="card mb-3" style="border-radius:0">
|
||
<div style="font-size:15px;font-weight:600;margin-bottom:12px">${a.message}</div>
|
||
<div class="info-grid">
|
||
<div class="info-item"><div class="info-label">设备</div><div class="info-value">${a.deviceName}</div></div>
|
||
<div class="info-item"><div class="info-label">发生时间</div><div class="info-value">${a.createdAt}</div></div>
|
||
<div class="info-item"><div class="info-label">触发指标</div><div class="info-value">${a.metric}</div></div>
|
||
<div class="info-item"><div class="info-label">当前值</div><div class="info-value">${a.value || '-'}</div></div>
|
||
</div>
|
||
</div>
|
||
${handledArea}
|
||
`;
|
||
}
|
||
|
||
async function handleAlert(action) {
|
||
const note = document.getElementById('handleNote')?.value || '';
|
||
const res = await apiHandleAlert(alertId, action, note);
|
||
if (res.code === 0) {
|
||
showToast('操作成功');
|
||
setTimeout(() => location.href = 'alerts.html', 500);
|
||
} else {
|
||
showToast(res.message || '操作失败');
|
||
}
|
||
}
|
||
|
||
loadAlert();
|
||
</script>
|
||
</body>
|
||
</html>
|