diff --git a/src/views/history/components/HistoryModal.vue b/src/views/history/components/HistoryModal.vue index 1dc6365..866fca2 100644 --- a/src/views/history/components/HistoryModal.vue +++ b/src/views/history/components/HistoryModal.vue @@ -2,9 +2,11 @@ import { ref, computed, inject, watch } from "vue"; import Table from "@/components/customUI/Table.vue"; import LineChart from "@/components/chart/LineChart.vue"; +import useSearchParam from "@/hooks/useSearchParam"; import dayjs from "dayjs"; import { SECOND_CHART_COLOR } from "@/constant"; +const { searchParams } = useSearchParam(); // 注入數據 const { tableData, loading } = inject("history_table_data"); @@ -35,14 +37,27 @@ const defaultChartOption = { splitLine: { show: false }, axisLabel: { color: "#ffffff", - formatter: (value) => dayjs(value).format("HH:mm"), // 格式化為時間 + formatter: function (value) { + // 根據 Type 動態決定格式 + return searchParams.value.Type == 1 + ? dayjs(value).format("MM-DD") + : dayjs(value).format("HH:mm"); + }, // 格式化為時間 }, data: [], }, yAxis: { type: "value", splitLine: { show: false }, - axisLabel: { color: "#ffffff" }, + axisLabel: { + color: "#ffffff", + formatter: function (value) { + // 僅顯示整數刻度,非整數則顯示空字串 + return Number.isInteger(value) ? value : ""; + }, + }, + min: "dataMin", + max: "dataMax", }, series: [], }; @@ -57,25 +72,30 @@ const columns = [ // 格式化數據 const formatChartData = (data) => { - return data.reduce((acc, { building_name, device_name, points, timestamp, value }) => { - // 檢查並轉換 "無資料" 為 null - const numericValue = value == "無資料" ? null : parseFloat(value); + return data.reduce( + (acc, { building_name, device_name, points, timestamp, value }) => { + // 檢查並轉換 "無資料" 為 null + const numericValue = value == "無資料" ? null : parseFloat(value); - // 濾掉 "true" 或 "false",但不濾掉 null - if (value === "true" || value === "false") return acc; + // 濾掉 "true" 或 "false",但不濾掉 null + if (value === "true" || value === "false") return acc; - // 構建唯一的 series key (building_name + device_name + points) - const seriesKey = `${building_name || ''} ${device_name || ''} ${points}`; + // 構建唯一的 series key (building_name + device_name + points) + const seriesKey = `${building_name || ""} ${device_name || ""} ${points}`; - if (!acc[seriesKey]) { - acc[seriesKey] = { timestamps: [], values: [] }; - } + if (!acc[seriesKey]) { + acc[seriesKey] = { timestamps: [], values: [] }; + } - acc[seriesKey].timestamps.push(dayjs(timestamp).format("YYYY-MM-DD HH:mm")); - acc[seriesKey].values.push(numericValue); + acc[seriesKey].timestamps.push( + dayjs(timestamp).format("YYYY-MM-DD HH:mm") + ); + acc[seriesKey].values.push(numericValue); - return acc; - }, {}); + return acc; + }, + {} + ); }; // 排序時間 @@ -101,7 +121,9 @@ watch( groupedData.value[seriesKey].timestamps = sortedData.map( (item) => item.timestamp ); - groupedData.value[seriesKey].values = sortedData.map((item) => item.value); + groupedData.value[seriesKey].values = sortedData.map( + (item) => item.value + ); }); // 構建 series @@ -110,7 +132,9 @@ watch( type: "line", data: groupedData.value[seriesKey].values, showSymbol: false, - itemStyle: { color: SECOND_CHART_COLOR[index % SECOND_CHART_COLOR.length] }, + itemStyle: { + color: SECOND_CHART_COLOR[index % SECOND_CHART_COLOR.length], + }, })); // 更新圖表