dorm-power-monitor/go/static/app.js

// 宿舍电费监控 - 前端逻辑
const POLL_INTERVAL = 30000; // 自动刷新间隔 30s
let usageChart = null;
let availableMonths = [];   // 后端返回的可用月份列表
let currentMonth = "";      // 当前选中的月份 (YYYY-MM)

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 renderSummary(s) {
  if (!s || !s.record_count) {
    const empty = "--";
    ["sRecordCount", "sTotalUsage", "sAvgUsage", "sRecharge", "sRechargeKwh", "sRechargeMoney", "sStartSurplus", "sEndSurplus"].forEach((id) => {
      $(id).textContent = empty;
    });
    return;
  }
  $("sRecordCount").textContent = s.record_count + " 天";
  $("sTotalUsage").textContent = s.total_usage != null ? s.total_usage.toFixed(2) : "--";
  $("sAvgUsage").textContent = s.avg_usage != null ? s.avg_usage.toFixed(2) : "--";
  $("sRecharge").textContent = s.recharge_days != null ? s.recharge_days + " 次" : "--";
  $("sRechargeKwh").textContent = s.recharge_kwh != null ? s.recharge_kwh.toFixed(2) : "--";
  $("sRechargeMoney").textContent = s.recharge_money != null ? s.recharge_money.toFixed(2) : "--";
  $("sStartSurplus").textContent = s.start_surplus != null ? s.start_surplus.toFixed(2) : "--";
  $("sEndSurplus").textContent = s.end_surplus != null ? s.end_surplus.toFixed(2) : "--";
}

// ---------- 历史记录 ----------
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(daily) {
  const body = $("historyBody");
  if (!daily.length) {
    body.innerHTML = '<tr><td colspan="5" class="empty-td">暂无记录</td></tr>';
    return;
  }
  // daily 是升序，表格显示降序（新→旧）
  const rows = [...daily].reverse();
  body.innerHTML = rows
    .map((d) => {
      const usageTxt = d.usage != null && d.usage >= 0 ? d.usage.toFixed(2) : "--";
      const rechargeTxt = d.recharge != null && d.recharge > 0
        ? `<span class="tag auto">+${d.recharge.toFixed(2)}</span>`
        : "--";
      return `<tr>
        <td>${formatDateStr(d.date)}</td>
        <td>${d.surplus.toFixed(2)}</td>
        <td>${usageTxt}</td>
        <td>${rechargeTxt}</td>
        <td><span class="tag auto">自动</span></td>
      </tr>`;
    })
    .join("");
}

async function fetchHistory() {
  try {
    const params = currentMonth ? "?month=" + encodeURIComponent(currentMonth) : "";
    const resp = await fetch("/api/history" + params);
    const data = await resp.json();

    // 初始化可用月份与选择器
    if (data.months && data.months.length) {
      availableMonths = data.months;
      if (!currentMonth || !availableMonths.includes(currentMonth)) {
        currentMonth = availableMonths[0];
        $("monthPicker").value = currentMonth;
      }
    }
    if (currentMonth) $("monthPicker").value = currentMonth;

    renderSummary(data.summary);
    renderChart(data.daily || []);
    renderHistory(data.daily || []);
  } catch (e) {
    console.error("history fetch error", e);
  }
}

// ---------- 月份导航 ----------
function setMonth(month) {
  if (!month) return;
  currentMonth = month;
  $("monthPicker").value = month;
  fetchHistory();
}

function monthOffset(month, delta) {
  const [y, m] = month.split("-").map(Number);
  const d = new Date(y, m - 1 + delta, 1);
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
}

$("monthPicker").addEventListener("change", (e) => {
  if (e.target.value) {
    currentMonth = e.target.value;
    fetchHistory();
  }
});

$("prevMonthBtn").addEventListener("click", () => {
  setMonth(monthOffset(currentMonth || new Date().toISOString().slice(0, 7), -1));
});

$("nextMonthBtn").addEventListener("click", () => {
  setMonth(monthOffset(currentMonth || new Date().toISOString().slice(0, 7), 1));
});

// ---------- 主流程 ----------
async function refreshAll() {
  await Promise.all([fetchCurrent(), fetchHistory()]);
}

$("refreshBtn").addEventListener("click", () => {
  $("refreshBtn").disabled = true;
  refreshAll().finally(() => {
    $("refreshBtn").disabled = false;
  });
});

refreshAll();
setInterval(refreshAll, POLL_INTERVAL);