dorm-power-monitor/static/app.js

// 宿舍电费监控 - 前端逻辑
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);