fallensigh
f9d9d04db1
- 实时电费卡片 + 月度汇总卡 - 月份选择器导航 + Chart.js 图表 Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
77 lines
3.0 KiB
HTML
77 lines
3.0 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="/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">耗电量统计</span>
|
|
<div class="month-selector">
|
|
<input type="month" id="monthPicker" value="">
|
|
<button id="prevMonthBtn" class="mini-btn">◀</button>
|
|
<button id="nextMonthBtn" class="mini-btn">▶</button>
|
|
</div>
|
|
</div>
|
|
<div class="summary-grid" id="summaryGrid">
|
|
<div class="summary-item"><div class="summary-value" id="sRecordCount">--</div><div class="summary-label">记录天数</div></div>
|
|
<div class="summary-item"><div class="summary-value" id="sTotalUsage">--</div><div class="summary-label">月总耗电(度)</div></div>
|
|
<div class="summary-item"><div class="summary-value" id="sAvgUsage">--</div><div class="summary-label">日均耗电(度)</div></div>
|
|
<div class="summary-item"><div class="summary-value" id="sRecharge">--</div><div class="summary-label">疑似充值(天)</div></div>
|
|
<div class="summary-item"><div class="summary-value" id="sStartSurplus">--</div><div class="summary-label">月初电量(度)</div></div>
|
|
<div class="summary-item"><div class="summary-value" id="sEndSurplus">--</div><div class="summary-label">月末电量(度)</div></div>
|
|
</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>
|