調整圖表格式化邏輯 | 根據 Type 動態決定時間格式 | 僅顯示整數刻度的 y 軸標籤

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,7 +72,8 @@ const columns = [
 
 // 格式化數據
 const formatChartData = (data) => {
-  return data.reduce((acc, { building_name, device_name, points, timestamp, value }) => {
+  return data.reduce(
+    (acc, { building_name, device_name, points, timestamp, value }) => {
       // 檢查並轉換 "無資料" 為 null
       const numericValue = value == "無資料" ? null : parseFloat(value);
 
@@ -65,17 +81,21 @@ const formatChartData = (data) => {
       if (value === "true" || value === "false") return acc;
 
       // 構建唯一的 series key (building_name + device_name + points)
-    const seriesKey = `${building_name || ''} ${device_name || ''} ${points}`;
+      const seriesKey = `${building_name || ""} ${device_name || ""} ${points}`;
 
       if (!acc[seriesKey]) {
         acc[seriesKey] = { timestamps: [], values: [] };
       }
 
-    acc[seriesKey].timestamps.push(dayjs(timestamp).format("YYYY-MM-DD HH:mm"));
+      acc[seriesKey].timestamps.push(
+        dayjs(timestamp).format("YYYY-MM-DD HH:mm")
+      );
       acc[seriesKey].values.push(numericValue);
 
       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],
+        },
       }));
 
       // 更新圖表