ko.ko/pccv_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
koko1108 2025-10-28 18:09:57 +08:00
parent 8d8349a251
commit 3329c581f6
1 changed files with 42 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/views/history/components/HistoryModal.vue
View File

@ -2,9 +2,11 @@
import { ref, computed, inject, watch } from "vue"; import { ref, computed, inject, watch } from "vue";
import Table from "@/components/customUI/Table.vue"; import Table from "@/components/customUI/Table.vue";
import LineChart from "@/components/chart/LineChart.vue"; import LineChart from "@/components/chart/LineChart.vue";
import useSearchParam from "@/hooks/useSearchParam";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { SECOND_CHART_COLOR } from "@/constant"; import { SECOND_CHART_COLOR } from "@/constant";
const { searchParams } = useSearchParam();
// 注入數據 // 注入數據
const { tableData, loading } = inject("history_table_data"); const { tableData, loading } = inject("history_table_data");
@ -35,14 +37,27 @@ const defaultChartOption = {
splitLine: { show: false }, splitLine: { show: false },
axisLabel: { axisLabel: {
color: "#ffffff", 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: [], data: [],
}, },
yAxis: { yAxis: {
type: "value", type: "value",
splitLine: { show: false }, splitLine: { show: false },
axisLabel: { color: "#ffffff" }, axisLabel: {
color: "#ffffff",
formatter: function (value) {
// 僅顯示整數刻度，非整數則顯示空字串
return Number.isInteger(value) ? value : "";
},
},
min: "dataMin",
max: "dataMax",
}, },
series: [], series: [],
}; };
@ -57,7 +72,8 @@ const columns = [
// 格式化數據 // 格式化數據
const formatChartData = (data) => { 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 // 檢查並轉換 "無資料" 為 null
const numericValue = value == "無資料" ? null : parseFloat(value); const numericValue = value == "無資料" ? null : parseFloat(value);
@ -65,17 +81,21 @@ const formatChartData = (data) => {
if (value === "true" || value === "false") return acc; if (value === "true" || value === "false") return acc;
// 構建唯一的 series key (building_name + device_name + points) // 構建唯一的 series key (building_name + device_name + points)
const seriesKey = `${building_name || ''} ${device_name || ''} ${points}`; const seriesKey = `${building_name || ""} ${device_name || ""} ${points}`;
if (!acc[seriesKey]) { if (!acc[seriesKey]) {
acc[seriesKey] = { timestamps: [], values: [] }; 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); acc[seriesKey].values.push(numericValue);
return acc; return acc;
}, {}); },
{}
);
}; };
// 排序時間 // 排序時間
@ -101,7 +121,9 @@ watch(
groupedData.value[seriesKey].timestamps = sortedData.map( groupedData.value[seriesKey].timestamps = sortedData.map(
(item) => item.timestamp (item) => item.timestamp
); );
groupedData.value[seriesKey].values = sortedData.map((item) => item.value); groupedData.value[seriesKey].values = sortedData.map(
(item) => item.value
);
}); });
// 構建 series // 構建 series
@ -110,7 +132,9 @@ watch(
type: "line", type: "line",
data: groupedData.value[seriesKey].values, data: groupedData.value[seriesKey].values,
showSymbol: false, showSymbol: false,
itemStyle: { color: SECOND_CHART_COLOR[index % SECOND_CHART_COLOR.length] }, itemStyle: {
color: SECOND_CHART_COLOR[index % SECOND_CHART_COLOR.length],
},
})); }));
// 更新圖表 // 更新圖表