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

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

@ -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],
},
}));
// 更新圖表