96 lines
2.8 KiB
HTML
96 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>房间 {{ room_id }} - 用电详情</title>
|
|
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<!-- ECharts -->
|
|
<script src="/static/js/echarts.min.js"></script>
|
|
|
|
</head>
|
|
|
|
<body class="bg-gray-100 text-gray-800">
|
|
|
|
<div class="max-w-5xl mx-auto p-6 space-y-8">
|
|
|
|
<h2 class="text-2xl font-bold text-center">
|
|
房间 {{ room_id }} 最近用电情况
|
|
</h2>
|
|
|
|
<div id="eleChart" class="w-full h-80 bg-white rounded-xl shadow"></div>
|
|
|
|
<!-- 表格 -->
|
|
<div class="bg-white rounded-xl shadow p-6 overflow-x-auto">
|
|
<table class="min-w-full text-sm text-left">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-4 py-3">记录时间</th>
|
|
<th class="px-4 py-3">剩余电量 (度)</th>
|
|
<th class="px-4 py-3">剩余金额 (元)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for i in data %}
|
|
<tr class="border-t hover:bg-gray-50 transition">
|
|
<td class="px-4 py-3">{{ i.created_at | datetime }}</td>
|
|
<td class="px-4 py-3">{{ i.left_ele }}</td>
|
|
<td class="px-4 py-3">{{ i.left_money }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<a href="/" class="text-blue-600 hover:underline">返回首页</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
const raw = {{ data | tojson }};
|
|
const labels = raw.map(i => new Date(i.created_at).toLocaleString());
|
|
const values = raw.map(i => i.left_ele);
|
|
|
|
const chartDom = document.getElementById('eleChart');
|
|
const myChart = echarts.init(chartDom);
|
|
|
|
const option = {
|
|
tooltip: { trigger: 'axis' },
|
|
|
|
// 🔥支持区域缩放：鼠标拖动 & 下方滑块
|
|
dataZoom: [
|
|
{ type: 'inside' }, // 鼠标滚轮缩放 + 拖动
|
|
{
|
|
type: 'slider', // 底部滑块
|
|
height: 20,
|
|
bottom: 0,
|
|
}
|
|
],
|
|
|
|
xAxis: {
|
|
type: 'category',
|
|
data: labels,
|
|
boundaryGap: false
|
|
},
|
|
yAxis: { type: 'value' },
|
|
|
|
series: [{
|
|
data: values,
|
|
type: 'line',
|
|
smooth: true,
|
|
areaStyle: {
|
|
opacity: 0.3
|
|
},
|
|
lineStyle: { width: 2 }
|
|
}]
|
|
}
|
|
myChart.setOption(option);
|
|
</script>
|
|
</body>
|
|
|
|
</html> |