fix: 能源管理修正顯示的日期區間

src/views/energyManagement/components/ImmediateDemandChart.vue

@@ -66,21 +66,35 @@ watch(
   () => elecDay_data.value,
   (newData) => {
     if (newData.length > 0) {
+      // 將資料依時間排序（假設 time 欄位格式為 YYYY-MM-DD HH:mm:ss）
+      const sortedData = [...newData].sort(
+        (a, b) => new Date(a.time) - new Date(b.time)
+      );
+
+      // 取出最近 7 筆（假設資料為每天一筆）
+      const recent7Data = sortedData.slice(-7);
+
       const categories = [];
       const seriesData = [];
 
-      newData.forEach((item) => {
-        categories.push(item.time.split(" ")[0]);
-        const dailyUsage =(item.degreePeak + item.degreeHalfPeak + item.degreeOffPeak).toFixed(1);
+      recent7Data.forEach((item) => {
+        categories.push(item.time.split(" ")[0]); // 取日期部分當 x 軸刻度
+        const dailyUsage = (
+          item.degreePeak +
+          item.degreeHalfPeak +
+          item.degreeOffPeak
+        ).toFixed(1);
         seriesData.push(dailyUsage);
       });
+
+      // 更新圖表資料
       demand_chart.value.chart.setOption({
         xAxis: {
           data: categories,
         },
-        series:{
+        series: {
           data: seriesData,
-        }
+        },
       });
 
       todayUsage.value = seriesData[seriesData.length - 1];
@@ -98,7 +112,7 @@ watch(
   >
     <div class="card-body">
       <h2 class="card-title">
-        {{$t("energy.latest_elec_consumption")}}
+        {{ $t("energy.latest_elec_consumption") }}
         <p>{{ todayUsage }} kWh</p>
       </h2>
       <LineChart

src/views/energyManagement/components/UsageInformation.vue

@@ -17,6 +17,28 @@ const daysInMonth = (month) => {
 watch(
   () => elecMonth_data.value,
   (newData) => {
+    // 🔍 Log 1：整個資料
+    console.log("📦 elecMonth_data 原始資料：", newData);
+    const latestData = newData[newData.length - 1];
+    // 🔍 Log 2：最新一筆資料
+    console.log("🧾 latestData（用於 IntervalElecBills 的來源）:", latestData);
+
+    // 🔍 Log 3：各段電費
+    console.log("💰 各時段費用：", {
+      costPeak: latestData.costPeak,
+      costHalfPeak: latestData.costHalfPeak,
+      costOffPeak: latestData.costOffPeak,
+      costBase: latestData.costBase,
+    });
+
+    // 🔍 Log 4：總電費計算（原始值）
+    const rawIntervalElec =
+      latestData.costPeak +
+      latestData.costHalfPeak +
+      latestData.costOffPeak +
+      latestData.costBase;
+    console.log("💵 IntervalElecBills 原始總額（未格式化）:", rawIntervalElec);
+
     // 計算總電費與用電度數
     totalElecBills.value = newData
       .reduce((sum, item) => {
@@ -36,7 +58,7 @@ watch(
       .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 
     // 計算區間電費與用電度數，取最新一筆數據
-    const latestData = newData[newData.length - 1];
+
     IntervalElecBills.value = (
       latestData.costPeak +
       latestData.costHalfPeak +
@@ -52,12 +74,15 @@ watch(
     )
       .toFixed(2)
       .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-    const monthDays = latestData.time ? daysInMonth(latestData.time) : 0;
+    const today = new Date();
+    const todayStr = today.toISOString().split("T")[0];
     IntervalDate.value = latestData.time
-      ? `${latestData.time}-01~${latestData.time}-${monthDays}`
+      ? `${latestData.time}-01 ~ ${todayStr}`
       : "";
 
-    totalDate.value = `${newData[0].time}-01 ~ ${latestData.time}-${monthDays}`;
+    // totalDate 還是顯示從 1 月 1 日起
+    const startYear = newData[0]?.time?.split("-")[0] ?? "";
+    totalDate.value = startYear ? `${startYear}-01-01 ~ ${todayStr}` : "";
   },
   { deep: true }
 );