feat: 添加网页进行访问查询

2025-12-27 00:12:28 +08:00
parent 04fe771e8f
commit 3fbb216aa9
6 changed files with 245 additions and 5 deletions
--- a/templates/index.html
+++ b/templates/index.html
@@ -0,0 +1,96 @@
+<!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>