init 全新仓库，清除全部历史

2026-07-09 09:54:43 +08:00
commit 0c2fe393df
154 changed files with 56586 additions and 0 deletions
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>告警邮件统计看板</title>
+<script src="/static/js/echarts.min.js"></script>
+<script src="/static/js/jquery.min.js"></script>
+<style>
+*{box-sizing:border-box;margin:0;padding:0;}
+body{background:#f3f4f6;padding:20px;font-family:Microsoft Yahei}
+.head{display:flex;gap:20px;margin-bottom:20px}
+.card{background:#fff;padding:20px;border-radius:8px;width:24%;box-shadow:0 1px 3px #ddd}
+.chart-box{display:flex;gap:20px;margin-bottom:20px}
+.chart{width:50%;height:360px;background:#fff;padding:15px;border-radius:8px}
+table{width:100%;background:#fff;border-radius:8px;padding:15px;border-collapse:collapse}
+th,td{border:1px solid #eee;padding:10px;text-align:center}
+th{background:#2f3542;color:#fff}
+.type1{color:#e74c3c;font-weight:bold}
+.type2{color:#27ae60;font-weight:bold}
+</style>
+</head>
+<body>
+<h1>当日告警邮件统计看板</h1>
+<div class="head">
+    <div class="card">
+        <h3>今日触发告警总数</h3>
+        <p id="fire" style="font-size:32px;color:red">0</p>
+    </div>
+    <div class="card">
+        <h3>今日恢复告警总数</h3>
+        <p id="resolve" style="font-size:32px;color:green">0</p>
+    </div>
+    <div class="card">
+        <h3>涉及故障实例数</h3>
+        <p id="instance" style="font-size:32px;color:#2980b9">0</p>
+    </div>
+</div>
+<div class="chart-box">
+    <div class="chart" id="chart1"></div>
+</div>
+<table>
+    <thead>
+        <tr>
+            <th>类型</th>
+            <th>告警名称</th>
+            <th>实例</th>
+            <th>级别</th>
+            <th>故障开始</th>
+            <th>恢复时间</th>
+            <th>邮件接收时间</th>
+        </tr>
+    </thead>
+    <tbody id="table-body"></tbody>
+</table>
+
+<script>
+// 改成你自己的服务器IP端口
+const api = "http://10.150.117.190:8080/api";
+// 1、顶部统计卡片
+$.getJSON(api+"?act=day_total",res=>{
+    $("#fire").text(res.fire_count);
+    $("#resolve").text(res.resolve_count);
+    $("#instance").text(res.instance_num);
+})
+// 2、TOP告警柱状图
+$.getJSON(api+"?act=top_alert",list=>{
+    let chart = echarts.init(document.getElementById("chart1"));
+    let name = [],cnt=[];
+    list.forEach(item=>{name.push(item.alert_name);cnt.push(item.cnt)})
+    chart.setOption({
+        title:{text:"今日告警次数TOP10"},
+        xAxis:{type:"category",data:name,axisLabel:{rotate:30}},
+        yAxis:{type:"value"},
+        series:[{type:"bar",data:cnt,color:"#3498db"}]
+    })
+})
+// 3、告警明细表格
+$.getJSON(api+"?act=log_list",list=>{
+    let html = "";
+    list.forEach(row=>{
+        let typeText = row.alert_type == 1 ? "<span class='type1'>触发</span>" : "<span class='type2'>恢复</span>";
+        html += `<tr>
+            <td>${typeText}</td>
+            <td>${row.alert_name}</td>
+            <td>${row.instance}</td>
+            <td>${row.severity}</td>
+            <td>${row.starts_at || '-'}</td>
+            <td>${row.ends_at || '-'}</td>
+            <td>${row.receive_time}</td>
+        </tr>`
+    })
+    $("#table-body").html(html);
+})
+</script>
+</body>
+</html>
+