diff --git a/auto-imports.d.ts b/auto-imports.d.ts index 9d24007..51fd248 100644 --- a/auto-imports.d.ts +++ b/auto-imports.d.ts @@ -6,5 +6,6 @@ // biome-ignore lint: disable export {} declare global { - + const ElLoading: typeof import('element-plus/es')['ElLoading'] + const ElMessage: typeof import('element-plus/es')['ElMessage'] } diff --git a/index.html b/index.html index 166a1b3..7b9eee2 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + EMS diff --git a/src/components/EnergyBar.vue b/src/components/EnergyBar.vue index 0ad5647..93cf80f 100644 --- a/src/components/EnergyBar.vue +++ b/src/components/EnergyBar.vue @@ -41,8 +41,7 @@ const initChart = () => { type: "value", }, series: props.chartData.series.map((item) => ({ - ...item, - stack: "total", + ...item })), }; @@ -63,8 +62,11 @@ watch( }, series: newChartData.series.map((item) => ({ ...item, - stack: "total", })), + legend: { + data: newChartData.series.map((item) => item.name), + bottom: "0%", + }, }); } }, diff --git a/src/components/EnergyLine.vue b/src/components/EnergyLine.vue index 4fac865..171abfb 100644 --- a/src/components/EnergyLine.vue +++ b/src/components/EnergyLine.vue @@ -18,6 +18,9 @@ const seriesData = ref({ kWAlarmRest: [], // 復歸值 }); +// 限制資料筆數 +const MAX_DATA_LENGTH = 10; + // 使用 dayjs 生成當前時間戳（格式：HH:mm:ss） const getCurrentTimestamp = () => { return dayjs().format("HH:mm:ss"); @@ -55,6 +58,14 @@ const updateChartData = (elecData) => { } }); + // 限制資料筆數 + if (categories.value.length > MAX_DATA_LENGTH) { + categories.value.shift(); // 移除第一個元素 + Object.keys(seriesData.value).forEach((key) => { + seriesData.value[key].shift(); // 移除第一個元素 + }); + } + // 更新圖表 if (chartInstance) { chartInstance.setOption({ diff --git a/src/components/EnergySankey.vue b/src/components/EnergySankey.vue index 04f6a2d..d20415d 100644 --- a/src/components/EnergySankey.vue +++ b/src/components/EnergySankey.vue @@ -14,17 +14,25 @@ const updateChart = (elecData) => { } // 總用電量 - // const totalElectricity = elecData.reduce((sum, item) => sum + item.out, 0); + const totalElectricity = elecData.reduce((sum, item) => sum + item.out, 0); // 動態生成 data 和 links const chartData = [ { name: "總用電", itemStyle: { color: "#038a77" } }, - ...elecData.map((item) => ({ name: item.displayName })), + ...elecData.map((item) => { + const percentage = ((item.out / totalElectricity) * 100).toFixed(2); + return { + name: `${item.displayName} (${percentage}%)`, // 顯示百分比 + }; + }), ]; const chartLinks = elecData.map((item) => ({ source: "總用電", - target: item.displayName, + target: `${item.displayName} (${( + (item.out / totalElectricity) * + 100 + ).toFixed(2)}%)`, value: Number(item.out), })); diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue index 7bf0e31..ee6c365 100644 --- a/src/components/Navbar.vue +++ b/src/components/Navbar.vue @@ -5,36 +5,33 @@ mode="horizontal" @select="handleSelect" > - 能源圖表 + 能源圖表 電價表 能源報表 - + \ No newline at end of file diff --git a/src/components/PdfContent.vue b/src/components/PdfContent.vue index bde66db..70c8021 100644 --- a/src/components/PdfContent.vue +++ b/src/components/PdfContent.vue @@ -1,7 +1,7 @@