feat: Python 参考实现(server.py)
- 零依赖 HTTP 服务器 + SQLite 存储 - 与 Go 版功能等价的历史/参考实现 Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
153
static/app.js
Normal file
153
static/app.js
Normal file
@@ -0,0 +1,153 @@
|
||||
// 宿舍电费监控 - 前端逻辑
|
||||
const POLL_INTERVAL = 30000; // 自动刷新间隔 30s
|
||||
let usageChart = null;
|
||||
|
||||
const $ = (id) => document.getElementById(id);
|
||||
|
||||
// ---------- 工具 ----------
|
||||
function formatTime(ts) {
|
||||
if (!ts) return "--";
|
||||
const d = new Date(ts * 1000);
|
||||
return d.toLocaleString("zh-CN", { hour12: false });
|
||||
}
|
||||
|
||||
function formatDateStr(dateStr) {
|
||||
const d = new Date(dateStr);
|
||||
return d.toLocaleDateString("zh-CN", { month: "numeric", day: "numeric" });
|
||||
}
|
||||
|
||||
function setBadge(state, text) {
|
||||
const el = $("statusBadge");
|
||||
el.className = "status-badge " + state;
|
||||
el.textContent = text;
|
||||
}
|
||||
|
||||
// ---------- 当前电费 ----------
|
||||
async function fetchCurrent() {
|
||||
setBadge("loading", "查询中...");
|
||||
try {
|
||||
const resp = await fetch("/api/electric");
|
||||
const data = await resp.json();
|
||||
if (data.ok) {
|
||||
$("surplusValue").textContent = data.surplus.toFixed(2);
|
||||
$("amountValue").textContent = data.amount.toFixed(2);
|
||||
$("updateTime").textContent = formatTime(data.time);
|
||||
$("roomInfo").textContent = "🏠 " + data.room;
|
||||
setBadge("ok", "实时");
|
||||
} else {
|
||||
setBadge("err", "查询失败");
|
||||
$("roomInfo").textContent = "⚠️ " + (data.error || "查询失败");
|
||||
}
|
||||
} catch (e) {
|
||||
setBadge("err", "网络错误");
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 历史记录 ----------
|
||||
function renderChart(daily) {
|
||||
$("chartEmpty").style.display = daily.length ? "none" : "block";
|
||||
if (!daily.length) return;
|
||||
|
||||
const labels = daily.map((d) => formatDateStr(d.date));
|
||||
const usage = daily.map((d) => d.usage);
|
||||
const surplus = daily.map((d) => d.surplus);
|
||||
|
||||
const ctx = $("usageChart").getContext("2d");
|
||||
if (usageChart) usageChart.destroy();
|
||||
usageChart = new Chart(ctx, {
|
||||
data: {
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
type: "bar",
|
||||
label: "日耗电(度)",
|
||||
data: usage,
|
||||
backgroundColor: "rgba(255, 167, 38, 0.75)",
|
||||
borderRadius: 6,
|
||||
yAxisID: "y",
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
label: "剩余电量(度)",
|
||||
data: surplus,
|
||||
borderColor: "#4fc3f7",
|
||||
backgroundColor: "rgba(79, 195, 247, 0.15)",
|
||||
tension: 0.3,
|
||||
pointRadius: 4,
|
||||
yAxisID: "y1",
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
interaction: { mode: "index", intersect: false },
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: { color: "#e8edf2", usePointStyle: true },
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: { ticks: { color: "#9fb3c8" }, grid: { color: "rgba(255,255,255,0.05)" } },
|
||||
y: {
|
||||
position: "left",
|
||||
title: { display: true, text: "耗电(度)", color: "#ffa726" },
|
||||
ticks: { color: "#9fb3c8" },
|
||||
grid: { color: "rgba(255,255,255,0.05)" },
|
||||
},
|
||||
y1: {
|
||||
position: "right",
|
||||
title: { display: true, text: "剩余(度)", color: "#4fc3f7" },
|
||||
ticks: { color: "#9fb3c8" },
|
||||
grid: { drawOnChartArea: false },
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function renderHistory(records) {
|
||||
const body = $("historyBody");
|
||||
if (!records.length) {
|
||||
body.innerHTML = '<tr><td colspan="4" class="empty-td">暂无记录</td></tr>';
|
||||
return;
|
||||
}
|
||||
body.innerHTML = records
|
||||
.map((r) => {
|
||||
const usageTxt = r.usage >= 0 ? r.usage.toFixed(2) : "--";
|
||||
const tagCls = r.source === "auto" ? "auto" : "manual";
|
||||
const tagTxt = r.source === "auto" ? "自动" : "手动";
|
||||
return `<tr>
|
||||
<td>${formatDateStr(r.date)}</td>
|
||||
<td>${r.surplus.toFixed(2)}</td>
|
||||
<td>${usageTxt}</td>
|
||||
<td><span class="tag ${tagCls}">${tagTxt}</span></td>
|
||||
</tr>`;
|
||||
})
|
||||
.join("");
|
||||
}
|
||||
|
||||
async function fetchHistory() {
|
||||
try {
|
||||
const resp = await fetch("/api/history");
|
||||
const data = await resp.json();
|
||||
renderChart(data.daily || []);
|
||||
renderHistory(data.records || []);
|
||||
} catch (e) {
|
||||
console.error("history fetch error", e);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 主流程 ----------
|
||||
async function refreshAll() {
|
||||
await Promise.all([fetchCurrent(), fetchHistory()]);
|
||||
}
|
||||
|
||||
$("refreshBtn").addEventListener("click", () => {
|
||||
$("refreshBtn").disabled = true;
|
||||
refreshAll().finally(() => {
|
||||
$("refreshBtn").disabled = false;
|
||||
});
|
||||
});
|
||||
|
||||
refreshAll();
|
||||
setInterval(refreshAll, POLL_INTERVAL);
|
||||
63
static/index.html
Normal file
63
static/index.html
Normal file
@@ -0,0 +1,63 @@
|
||||
<!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="/static/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>⚡ 宿舍电费监控</h1>
|
||||
<div class="room-info" id="roomInfo">加载中...</div>
|
||||
</header>
|
||||
|
||||
<section class="card current-card">
|
||||
<div class="card-header">
|
||||
<span class="label">当前剩余电量</span>
|
||||
<span class="status-badge" id="statusBadge">--</span>
|
||||
</div>
|
||||
<div class="surplus-display">
|
||||
<span class="surplus-value" id="surplusValue">--</span>
|
||||
<span class="surplus-unit">度</span>
|
||||
</div>
|
||||
<div class="sub-info">
|
||||
<span>预估金额: ¥<span id="amountValue">--</span></span>
|
||||
<span>更新于: <span id="updateTime">--</span></span>
|
||||
</div>
|
||||
<button id="refreshBtn" class="refresh-btn">🔄 立即刷新</button>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<div class="card-header">
|
||||
<span class="label">近 7 天耗电量</span>
|
||||
</div>
|
||||
<canvas id="usageChart" height="220"></canvas>
|
||||
<div class="chart-empty" id="chartEmpty">暂无历史数据</div>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<div class="card-header">
|
||||
<span class="label">每日电费记录</span>
|
||||
</div>
|
||||
<table class="history-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>日期</th>
|
||||
<th>剩余电量(度)</th>
|
||||
<th>日耗电(度)</th>
|
||||
<th>记录方式</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="historyBody">
|
||||
<tr><td colspan="4" class="empty-td">加载中...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
||||
<script src="/static/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
200
static/style.css
Normal file
200
static/style.css
Normal file
@@ -0,0 +1,200 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
|
||||
"Microsoft YaHei", sans-serif;
|
||||
background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
|
||||
min-height: 100vh;
|
||||
color: #e8edf2;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
padding: 24px 16px 48px;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
background: linear-gradient(90deg, #ffd700, #ffaa00);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.room-info {
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
color: #9fb3c8;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: #9fb3c8;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 3px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-badge.ok {
|
||||
background: rgba(46, 204, 113, 0.2);
|
||||
color: #2ecc71;
|
||||
}
|
||||
|
||||
.status-badge.err {
|
||||
background: rgba(231, 76, 60, 0.2);
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.status-badge.loading {
|
||||
background: rgba(241, 196, 15, 0.2);
|
||||
color: #f1c40f;
|
||||
}
|
||||
|
||||
.surplus-display {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
padding: 16px 0 8px;
|
||||
}
|
||||
|
||||
.surplus-value {
|
||||
font-size: 64px;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(90deg, #4fc3f7, #00e5ff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.surplus-unit {
|
||||
font-size: 20px;
|
||||
color: #9fb3c8;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.sub-info {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
font-size: 13px;
|
||||
color: #9fb3c8;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(90deg, #00b4d8, #0096c7);
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s, opacity 0.15s;
|
||||
}
|
||||
|
||||
.refresh-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.refresh-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.chart-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chart-empty {
|
||||
display: none;
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
color: #9fb3c8;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.history-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.history-table th,
|
||||
.history-table td {
|
||||
padding: 10px 8px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.history-table th {
|
||||
color: #9fb3c8;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.history-table td:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.empty-td {
|
||||
color: #9fb3c8;
|
||||
text-align: center !important;
|
||||
padding: 24px 0 !important;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.tag.auto {
|
||||
background: rgba(0, 180, 216, 0.2);
|
||||
color: #4fc3f7;
|
||||
}
|
||||
|
||||
.tag.manual {
|
||||
background: rgba(241, 196, 15, 0.2);
|
||||
color: #f1c40f;
|
||||
}
|
||||
|
||||
.tag.cache {
|
||||
background: rgba(46, 204, 113, 0.2);
|
||||
color: #2ecc71;
|
||||
}
|
||||
Reference in New Issue
Block a user