From cebe5361216c94d06ca11ece4f136cdd629d317d Mon Sep 17 00:00:00 2001
From: zhilv <zhilv666@qq.com>
Date: Mon, 29 Dec 2025 10:01:30 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=9F=B1=E7=8A=B6?=
 =?UTF-8?q?=E5=9B=BE=EF=BC=8C=E6=98=BE=E7=A4=BA=E6=AF=8F=E5=B0=8F=E6=97=B6?=
 =?UTF-8?q?=E5=B9=B3=E5=9D=87=E7=94=A8=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/index.html | 139 ++++++++++++++++++++++++++++++++-----------
 1 file changed, 105 insertions(+), 34 deletions(-)
diff --git a/templates/index.html b/templates/index.html
index 3209a1e..7d05690 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -9,21 +9,21 @@
     <script src="https://cdn.tailwindcss.com"></script>
 
     <!-- ECharts -->
-    <script src="static/js/echarts.min.js"></script>
-
+    <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 id="hourlyBarChart" 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">
@@ -33,19 +33,20 @@
                         <th class="px-4 py-3">剩余金额 (元)</th>
                     </tr>
                 </thead>
-                <tbody>
-                    {% for i in data[::-1] %}
-                    <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 id="table-body"></tbody>
             </table>
+
+            <!-- 分页控制 -->
+            <div class="flex justify-between items-center mt-4 text-sm">
+                <button id="prevBtn" class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">上一页</button>
+                <span id="pageInfo"></span>
+                <button id="nextBtn" class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">下一页</button>
+            </div>
         </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);
@@ -53,38 +54,108 @@
         const chartDom = document.getElementById('eleChart');
         const myChart = echarts.init(chartDom);
 
-        const option = {
+        myChart.setOption({
             tooltip: { trigger: 'axis' },
-
-            // 🔥支持区域缩放：鼠标拖动 & 下方滑块
-            dataZoom: [
-                { type: 'inside' },  // 鼠标滚轮缩放 + 拖动
-                {
-                    type: 'slider',   // 底部滑块
-                    height: 20,
-                    bottom: 0,
-                }
-            ],
-
-            xAxis: {
-                type: 'category',
-                data: labels,
-                boundaryGap: false
-            },
+            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
-                },
+                areaStyle: { opacity: 0.3 },
                 lineStyle: { width: 2 }
             }]
+        });
+
+
+        // raw 已经是后端传来的数据，保持正序
+        const dailyData = raw.slice();
+
+        const hourSum = Array(24).fill(0);
+        const hourCount = Array(24).fill(0);
+
+        for (let i = 1; i < dailyData.length; i++) {
+            const prev = dailyData[i - 1];
+            const curr = dailyData[i];
+
+            const diff = prev.left_ele - curr.left_ele;  // 前一条减后一条
+            if (diff <= 0) continue;
+
+            const h = new Date(curr.created_at).getHours();
+            hourSum[h] += diff;
+            hourCount[h] += 1;
         }
-        myChart.setOption(option);
+
+        const avgUsage = hourSum.map((sum, h) => hourCount[h] > 0 ? (sum / hourCount[h]).toFixed(2) : 0);
+
+
+        // X 轴显示 0:00~23:00
+        const hours = Array.from({ length: 24 }, (_, i) => i + ":00");
+
+        // 渲染柱状图
+        const hourlyDom = document.getElementById("hourlyBarChart");
+        const hourlyChart = echarts.init(hourlyDom);
+
+        hourlyChart.setOption({
+            title: { text: "一天24小时平均用电量", left: "center" },
+            tooltip: { trigger: 'axis' },
+            xAxis: { type: 'category', data: hours, boundaryGap: true },
+            yAxis: { type: 'value', name: "度" },
+            series: [{
+                type: 'bar',
+                data: avgUsage,
+                barWidth: '50%',
+                itemStyle: { opacity: 0.9 }
+            }]
+        });
+
+
+
+        // ===== 分页（前端渲染）=====
+        const pageSize = 10;  // 每页10条
+        let currentPage = 1;
+        const reversed = raw.slice().reverse(); // 倒序
+
+        function renderTable() {
+            const tbody = document.getElementById("table-body");
+            tbody.innerHTML = "";
+
+            const start = (currentPage - 1) * pageSize;
+            const end = start + pageSize;
+            const pageData = reversed.slice(start, end);
+
+            for (const row of pageData) {
+                tbody.innerHTML += `
+                    <tr class="border-t hover:bg-gray-50 transition">
+                        <td class="px-4 py-3">${new Date(row.created_at).toLocaleString()}</td>
+                        <td class="px-4 py-3">${row.left_ele}</td>
+                        <td class="px-4 py-3">${row.left_money}</td>
+                    </tr>
+                `;
+            }
+
+            document.getElementById("pageInfo").textContent =
+                `第 ${currentPage} / ${Math.ceil(reversed.length / pageSize)} 页`;
+        }
+
+        document.getElementById("prevBtn").onclick = () => {
+            if (currentPage > 1) {
+                currentPage--;
+                renderTable();
+            }
+        };
+        document.getElementById("nextBtn").onclick = () => {
+            const total = Math.ceil(reversed.length / pageSize);
+            if (currentPage < total) {
+                currentPage++;
+                renderTable();
+            }
+        };
+
+        renderTable();
     </script>
+
 </body>
 
 </html>
\ No newline at end of file
