diff --git a/src/views/energyManagement/components/EnergyReport/EnergyReportTable.vue b/src/views/energyManagement/components/EnergyReport/EnergyReportTable.vue index eda12c3..4cc8c73 100644 --- a/src/views/energyManagement/components/EnergyReport/EnergyReportTable.vue +++ b/src/views/energyManagement/components/EnergyReport/EnergyReportTable.vue @@ -35,9 +35,23 @@ const columns = computed(() => { if (tableData.value && tableData.value.length > 0) { const firstDataItem = tableData.value[0]; if (firstDataItem && firstDataItem.data) { - firstDataItem.data.forEach((item, index) => { + + const sortedData = [...firstDataItem.data].sort((a, b) => + dayjs(a.time).valueOf() - dayjs(b.time).valueOf() + ); + + sortedData.forEach((item, index) => { let formatString = "MM/DD"; // 預設格式 switch (route.params.type) { + case "1": + formatString = "MM/DD"; + break; + case "2": + // 取得該週的開始與結束日期 + const startOfWeek = dayjs(item.time).startOf('week'); + const endOfWeek = dayjs(item.time).endOf('week'); + formatString = `${startOfWeek.format("MM/DD")}-${endOfWeek.format("MM/DD")}`; + break; case "3": formatString = "YYYY/MM"; break; @@ -45,7 +59,7 @@ const columns = computed(() => { formatString = "YYYY"; break; default: - formatString = "MM/DD"; // case 1 和 case 2 都是 "MM-DD" + formatString = "MM/DD "; break; } const formattedTime = dayjs(item.time).format(formatString); @@ -73,8 +87,13 @@ const dataSource = computed(() => { return tableData.value.map((item) => { let subtotalValue = 0; const newData = {}; // 用於儲存 data 的值,方便 Table 組件讀取 - if (item.data && item.data.length > 0) { - item.data.forEach((dataItem, index) => { + + const sortedData = [...item.data].sort((a, b) => + dayjs(a.time).valueOf() - dayjs(b.time).valueOf() + ); + + if (sortedData && sortedData.length > 0) { + sortedData.forEach((dataItem, index) => { const value = parseFloat(dataItem.value || 0); subtotalValue += value; // 將值儲存在 newData 中,key 與 columns 中的 key 對應