diff --git a/src/views/energyManagement/components/ImmediateDemandChart.vue b/src/views/energyManagement/components/ImmediateDemandChart.vue index 02c007f..c2f6ac3 100644 --- a/src/views/energyManagement/components/ImmediateDemandChart.vue +++ b/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( >

- {{$t("energy.latest_elec_consumption")}} + {{ $t("energy.latest_elec_consumption") }}

{{ todayUsage }} kWh

{ 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 } );