145 lines
5.1 KiB
HTML
145 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
<title>预警详情</title>
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/weui@2.5.4/dist/style/weui.min.css">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.min.css">
|
||
<link rel="stylesheet" href="css/style.css">
|
||
</head>
|
||
<body>
|
||
<div class="page">
|
||
<!-- 顶栏 page-hd -->
|
||
<header class="page-hd">
|
||
<a href="alerts.html" class="hd-back">
|
||
<i class="ri-arrow-left-s-line"></i>
|
||
</a>
|
||
<div class="hd-title">预警详情</div>
|
||
</header>
|
||
|
||
<div class="page-bd">
|
||
<!-- 预警头部 -->
|
||
<div id="alertHeader" class="alert-detail-header"></div>
|
||
|
||
<!-- 信息卡片 weui-panel -->
|
||
<div class="weui-panel">
|
||
<div class="weui-panel__hd">预警信息</div>
|
||
<div class="weui-panel__bd">
|
||
<div id="infoGrid" class="info-grid"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 处理操作区 -->
|
||
<div id="actionArea" class="action-area"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="js/mock.js"></script>
|
||
<script src="js/api.js"></script>
|
||
<script src="js/app.js"></script>
|
||
<script>
|
||
requireAuth();
|
||
|
||
var alertId = getQueryParam('id');
|
||
if (!alertId) location.href = 'alerts.html';
|
||
|
||
function loadAlert() {
|
||
var res = apiGetAlertDetail(alertId);
|
||
var a = res.data;
|
||
if (!a) {
|
||
showToast('预警不存在');
|
||
location.href = 'alerts.html';
|
||
return;
|
||
}
|
||
|
||
var levelText = {
|
||
danger: '危险',
|
||
warning: '警告',
|
||
handled: '已处理',
|
||
ignored: '已忽略'
|
||
};
|
||
|
||
var iconClass = a.level === 'danger' ? 'ri-error-warning-line' : 'ri-alert-line';
|
||
var levelClass = a.level === 'danger' ? 'danger' : 'warning';
|
||
|
||
// 预警头部
|
||
document.getElementById('alertHeader').innerHTML =
|
||
'<div class="alert-icon-wrap ' + levelClass + ' alert-icon-wrap--lg">' +
|
||
'<i class="' + iconClass + '"></i>' +
|
||
'</div>' +
|
||
'<div class="alert-level-text ' + levelClass + '">' + levelText[a.level] + '</div>' +
|
||
'<div class="alert-message">' + a.message + '</div>';
|
||
|
||
// 信息网格 2列
|
||
document.getElementById('infoGrid').innerHTML =
|
||
'<div class="info-grid-item">' +
|
||
'<div class="info-grid-label">设备名称</div>' +
|
||
'<div class="info-grid-value">' + a.deviceName + '</div>' +
|
||
'</div>' +
|
||
'<div class="info-grid-item">' +
|
||
'<div class="info-grid-label">发生时间</div>' +
|
||
'<div class="info-grid-value">' + a.createdAt + '</div>' +
|
||
'</div>' +
|
||
'<div class="info-grid-item">' +
|
||
'<div class="info-grid-label">触发指标</div>' +
|
||
'<div class="info-grid-value">' + a.metric + '</div>' +
|
||
'</div>' +
|
||
'<div class="info-grid-item">' +
|
||
'<div class="info-grid-label">当前值</div>' +
|
||
'<div class="info-grid-value">' + (a.value || '-') + '</div>' +
|
||
'</div>';
|
||
|
||
// 处理操作区
|
||
if (a.status === 'unread') {
|
||
document.getElementById('actionArea').innerHTML =
|
||
'<div class="weui-btn-area">' +
|
||
'<a href="javascript:;" class="weui-btn weui-btn_danger" onclick="handleAlert(\'handled\')">' +
|
||
'<i class="ri-check-line"></i> 确认处理' +
|
||
'</a>' +
|
||
'<a href="javascript:;" class="weui-btn weui-btn_plain-primary" onclick="handleAlert(\'ignored\')">' +
|
||
'<i class="ri-forbid-line"></i> 忽略' +
|
||
'</a>' +
|
||
'</div>' +
|
||
'<div class="weui-cells__title">处理备注</div>' +
|
||
'<div class="weui-cells weui-cells_form">' +
|
||
'<div class="weui-cell">' +
|
||
'<div class="weui-cell__bd">' +
|
||
'<textarea class="weui-textarea" id="handleNote" placeholder="选填" rows="3"></textarea>' +
|
||
'</div>' +
|
||
'</div>' +
|
||
'</div>';
|
||
} else {
|
||
var actionText = a.status === 'handled' ? '处理' : '忽略';
|
||
var noteText = a.handleNote ? '：' + a.handleNote : '';
|
||
document.getElementById('actionArea').innerHTML =
|
||
'<div class="weui-form-preview">' +
|
||
'<div class="weui-form-preview__bd">' +
|
||
'<div class="weui-form-preview__item">' +
|
||
'<label class="weui-form-preview__label">处理结果</label>' +
|
||
'<span class="weui-form-preview__value">' + actionText + noteText + '</span>' +
|
||
'</div>' +
|
||
'</div>' +
|
||
'</div>';
|
||
}
|
||
}
|
||
|
||
function handleAlert(action) {
|
||
var note = document.getElementById('handleNote');
|
||
var noteValue = note ? note.value : '';
|
||
var res = apiHandleAlert(alertId, action, noteValue);
|
||
if (res.code === 0) {
|
||
showToast('操作成功');
|
||
setTimeout(function() {
|
||
location.href = 'alerts.html';
|
||
}, 500);
|
||
} else {
|
||
showToast(res.message || '操作失败');
|
||
}
|
||
}
|
||
|
||
loadAlert();
|
||
</script>
|
||
</body>
|
||
</html>
|