From c5345db4629580782122b21eb9b66ffc956937c5 Mon Sep 17 00:00:00 2001
From: ko1234 <ko.ko@mjmtech.com.tw>
Date: Mon, 4 Nov 2024 18:11:13 +0800
Subject: [PATCH] =?UTF-8?q?=E8=83=BD=E6=BA=90=E7=AE=A1=E7=90=86api?=
 =?UTF-8?q?=E4=B8=B2=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/energy/api.js                        |   2 +
 src/apis/energy/index.js                      |  24 ++
 src/config/cn.json                            |   9 +-
 src/config/tw.json                            |   9 +-
 src/config/us.json                            |   9 +-
 .../energyManagement/EnergyManagement.vue     |  16 ++
 .../components/BillingDegreeChart.vue         |  65 +++---
 .../components/CarbonEmissionChart.vue        |  51 ++---
 .../components/IntervalBillChart.vue          | 213 ++++++++++--------
 .../components/MonthlyElecBillChart.vue       |  87 +++----
 .../components/UsageInformation.vue           |  75 ++++--
 11 files changed, 354 insertions(+), 206 deletions(-)
 create mode 100644 src/apis/energy/api.js
 create mode 100644 src/apis/energy/index.js

diff --git a/src/apis/energy/api.js b/src/apis/energy/api.js
new file mode 100644
index 0000000..1932442
--- /dev/null
+++ b/src/apis/energy/api.js
@@ -0,0 +1,2 @@
+export const GET_ELECUSE_DAY_API = `/api/Energe/GetElecUseDay`;
+export const GET_TAI_POWER_API = `/api/Energe/GetTaipower`;
\ No newline at end of file
diff --git a/src/apis/energy/index.js b/src/apis/energy/index.js
new file mode 100644
index 0000000..9c30d97
--- /dev/null
+++ b/src/apis/energy/index.js
@@ -0,0 +1,24 @@
+import {
+  GET_ELECUSE_DAY_API,
+  GET_TAI_POWER_API,
+} from "./api";
+import instance from "@/util/request";
+import apihandler from "@/util/apihandler";
+
+export const getElecUseDay = async () => {
+  const res = await instance.post(GET_ELECUSE_DAY_API);
+
+  return apihandler(res.code, res.data, {
+    msg: res.msg,
+    code: res.code,
+  });
+};
+
+export const getTaipower = async () => {
+  const res = await instance.post(GET_TAI_POWER_API);
+
+  return apihandler(res.code, res.data, {
+    msg: res.msg,
+    code: res.code,
+  });
+};
\ No newline at end of file
diff --git a/src/config/cn.json b/src/config/cn.json
index 9ed1f53..26b3711 100644
--- a/src/config/cn.json
+++ b/src/config/cn.json
@@ -61,7 +61,14 @@
     "monthly_elec_consumption": "每月用电分析",
     "monthly_carbon_emission_and_reduction": "每月碳排当量 (kgCO2e)",
     "monthly_bill_power": "每月计费度数 (kWh)",
-    "interval_bill_degree": "区间计费度数"
+    "interval_bill_degree": "区间计费度数",
+    "peak": "尖峰",
+    "semi_peak": "半尖峰",
+    "off_peak": "离峰",
+    "var_elec_cost": "流动电费",
+    "fixed_elec_cost": "基本电费",
+    "total_elec_cost": "总电费",
+    "carbon_equivalent": "碳排当量"
   },
   "alarm": {
     "title": "显示警告",
diff --git a/src/config/tw.json b/src/config/tw.json
index 81c4a60..1414899 100644
--- a/src/config/tw.json
+++ b/src/config/tw.json
@@ -61,7 +61,14 @@
     "monthly_elec_consumption": "每月用電分析",
     "monthly_carbon_emission_and_reduction": "每月碳排當量 (kgCO2e)",
     "monthly_bill_power": "每月計費度數 (kWh)",
-    "interval_bill_degree": "區間計費度數"
+    "interval_bill_degree": "區間計費度數",
+    "peak": "尖峰",
+    "semi_peak": "半尖峰",
+    "off_peak": "離峰",
+    "var_elec_cost": "流動電費",
+    "fixed_elec_cost": "基本電費",
+    "total_elec_cost": "總電費",
+    "carbon_equivalent": "碳排當量"
   },
   "alarm": {
     "title": "顯示警告",
diff --git a/src/config/us.json b/src/config/us.json
index f4e198c..566bcc6 100644
--- a/src/config/us.json
+++ b/src/config/us.json
@@ -61,7 +61,14 @@
     "monthly_elec_consumption": "Monthly electricity consumption analysis",
     "monthly_carbon_emission_and_reduction": "Monthly carbon emission equivalent (kgCO2e)",
     "monthly_bill_power": "Monthly billing power (kWh)",
-    "interval_bill_degree": "Interval billing degree"
+    "interval_bill_degree": "Interval billing degree",
+    "peak": "Peak",
+    "semi_peak": "Semi-Peak",
+    "off_peak": "Off-Peak",
+    "var_elec_cost": "Var. Elec. Cost",
+    "fixed_elec_cost": "Fixed Elec. Cost",
+    "total_elec_cost": "Total Elec. Cost",
+    "carbon_equivalent": "Carbon Equivalent"
   },
   "alarm": {
     "title": "Warning",
diff --git a/src/views/energyManagement/EnergyManagement.vue b/src/views/energyManagement/EnergyManagement.vue
index 6072a78..4e397ca 100644
--- a/src/views/energyManagement/EnergyManagement.vue
+++ b/src/views/energyManagement/EnergyManagement.vue
@@ -6,6 +6,22 @@ import MonthlyElecBillChart from "./components/MonthlyElecBillChart.vue";
 import CarbonEmissionChart from "./components/CarbonEmissionChart.vue";
 import BillingDegreeChart from "./components/BillingDegreeChart.vue";
 import IntervalBillChart from "./components/IntervalBillChart.vue";
+import { getTaipower } from "@/apis/energy";
+import { ref, onMounted, provide } from "vue";
+
+const taipower_data = ref([]);
+const getData = async () => {
+  const res = await getTaipower();
+  if (res.isSuccess) {
+    taipower_data.value = res.data;
+  }
+};
+
+onMounted(() => {
+  getData();
+});
+
+provide("energy_data", { taipower_data });
 </script>
 
 <template>
diff --git a/src/views/energyManagement/components/BillingDegreeChart.vue b/src/views/energyManagement/components/BillingDegreeChart.vue
index 021e9aa..6a2b412 100644
--- a/src/views/energyManagement/components/BillingDegreeChart.vue
+++ b/src/views/energyManagement/components/BillingDegreeChart.vue
@@ -1,6 +1,10 @@
 <script setup>
 import BarChart from "@/components/chart/BarChart.vue";
-import { ref, onMounted } from "vue";
+import { ref, onMounted, inject, watch } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t, locale } = useI18n();
+const { taipower_data } = inject("energy_data");
 
 const defaultChartOption = ref({
   tooltip: {
@@ -10,7 +14,7 @@ const defaultChartOption = ref({
     },
   },
   legend: {
-    data: ["Peak", "Semi-Peak", "Off-Peak"],
+    data: [ t("energy.peak"), t("energy.semi_peak"), t("energy.off_peak")],
     textStyle: {
       color: "#ffffff",
       fontSize: 14,
@@ -21,26 +25,13 @@ const defaultChartOption = ref({
   grid: {
     top: "5%",
     left: "0%",
-    right: "0%",
+    right: "2%",
     bottom: "15%",
     containLabel: true,
   },
   xAxis: {
     type: "category",
-    data: [
-      "Jan",
-      "Feb",
-      "Mar",
-      "Apr",
-      "May",
-      "Jun",
-      "Jul",
-      "Aug",
-      "Sep",
-      "Oct",
-      "Nov",
-      "Dec",
-    ],
+    data: [],
     axisLabel: {
       color: "#ffffff",
     },
@@ -53,35 +44,28 @@ const defaultChartOption = ref({
   },
   series: [
     {
-      name: "Peak",
+      name: t("energy.peak"),
       type: "bar",
       stack: "total",
-      data: [
-        5000, 5500, 7000, 7500, 9000, 9500, 11000, 11500, 11000, 7500, 6500,
-        5500,
-      ],
+      data: [],
       itemStyle: {
         color: "#45f4ef",
       },
     },
     {
-      name: "Semi-Peak",
+      name: t("energy.semi_peak"),
       type: "bar",
       stack: "total",
-      data: [
-        3000, 3200, 4500, 4800, 5200, 5800, 6000, 6100, 6200, 5300, 4500, 4000,
-      ],
+      data: [],
       itemStyle: {
         color: "#ffd345",
       },
     },
     {
-      name: "Off-Peak",
+      name: t("energy.off_peak"),
       type: "bar",
       stack: "total",
-      data: [
-        2000, 2500, 3500, 4000, 4500, 5000, 5200, 5300, 5400, 4500, 4000, 3500,
-      ],
+      data: [],
       itemStyle: {
         color: "#64ed81",
       },
@@ -89,9 +73,24 @@ const defaultChartOption = ref({
   ],
 });
 
-onMounted(() => {
-  //
-});
+// 監聽 taipower_data，並更新圖表數據
+watch(
+  taipower_data,
+  () => {
+    // 提取資料並更新圖表
+    const months = taipower_data.value.map(item => item.month);
+    const kWhPeak = taipower_data.value.map((item) => item.kWhPeak);
+    const kWhHalfPeak = taipower_data.value.map((item) => item.kWhHalfPeak);
+    const kWhOffPeak = taipower_data.value.map((item) => item.kWhOffPeak);
+
+    // 更新圖表數據
+    defaultChartOption.value.xAxis.data = months;
+    defaultChartOption.value.series[0].data = kWhPeak;
+    defaultChartOption.value.series[1].data = kWhHalfPeak;
+    defaultChartOption.value.series[2].data = kWhOffPeak;
+  },
+  { deep: true }
+);
 </script>
 
 <template>
diff --git a/src/views/energyManagement/components/CarbonEmissionChart.vue b/src/views/energyManagement/components/CarbonEmissionChart.vue
index 7ada7d9..17f3cb5 100644
--- a/src/views/energyManagement/components/CarbonEmissionChart.vue
+++ b/src/views/energyManagement/components/CarbonEmissionChart.vue
@@ -1,6 +1,10 @@
 <script setup>
 import BarChart from "@/components/chart/BarChart.vue";
-import { ref, onMounted } from "vue";
+import { ref, inject, watch } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t, locale } = useI18n();
+const { taipower_data } = inject("energy_data");
 
 const defaultChartOption = ref({
   tooltip: {
@@ -10,7 +14,7 @@ const defaultChartOption = ref({
     },
   },
   legend: {
-    data: ["Carbon Equivalent"],
+    data: [t("energy.carbon_equivalent")],
     textStyle: {
       color: "#ffffff",
       fontSize: 14,
@@ -21,26 +25,13 @@ const defaultChartOption = ref({
   grid: {
     top: "5%",
     left: "0%",
-    right: "0%",
+    right: "2%",
     bottom: "15%",
     containLabel: true,
   },
   xAxis: {
     type: "category",
-    data: [
-      "Jan",
-      "Feb",
-      "Mar",
-      "Apr",
-      "May",
-      "Jun",
-      "Jul",
-      "Aug",
-      "Sep",
-      "Oct",
-      "Nov",
-      "Dec",
-    ],
+    data: [], 
     axisLabel: {
       color: "#ffffff",
     },
@@ -53,22 +44,30 @@ const defaultChartOption = ref({
   },
   series: [
     {
-      name: "Carbon Equivalent",
+      name: t("energy.carbon_equivalent"),
       type: "bar",
-      data: [
-        5400, 6500, 7200, 7500, 9800, 9500, 11200, 11500, 11800, 7500, 6500,
-        5500,
-      ],
+      data: [], 
       itemStyle: {
         color: "#45f4ef",
       },
-    }
+    },
   ],
 });
 
-onMounted(() => {
-  //
-});
+// 監聽 taipower_data 的變化
+watch(
+  taipower_data,
+  () => {
+    // 提取月份和碳排放數據
+    const months = taipower_data.value.map(item => item.month);
+    const carbonTotal = taipower_data.value.map(item => item.carbon);
+
+    // 更新圖表的 xAxis 和 series
+    defaultChartOption.value.xAxis.data = months;
+    defaultChartOption.value.series[0].data = carbonTotal;
+  },
+  { deep: true }
+);
 </script>
 
 <template>
diff --git a/src/views/energyManagement/components/IntervalBillChart.vue b/src/views/energyManagement/components/IntervalBillChart.vue
index 5058628..facb883 100644
--- a/src/views/energyManagement/components/IntervalBillChart.vue
+++ b/src/views/energyManagement/components/IntervalBillChart.vue
@@ -1,107 +1,144 @@
 <script setup>
 import BarChart from "@/components/chart/BarChart.vue";
-import { ref, onMounted } from "vue";
+import { ref, onMounted, computed } from "vue";
+import { getElecUseDay } from "@/apis/energy";
+import { useI18n } from "vue-i18n";
 
-const generateDateRange = () => {
-  const dates = [];
-  for (let day = 1; day <= 15; day++) {
-    const formattedDay = day < 10 ? `0${day}` : day;
-    dates.push(`11 / ${formattedDay}`);
-  }
-  return dates;
-};
-
-const defaultChartOption = ref({
-  tooltip: {
-    trigger: "axis",
-    axisPointer: {
-      type: "shadow",
-    },
-  },
-  legend: {
-    data: ["Peak", "Semi-Peak", "Off-Peak"],
-    textStyle: {
-      color: "#ffffff",
-      fontSize: 14,
-    },
-    orient: "horizontal",
-    bottom: "0%",
-  },
-  grid: {
-    top: "5%",
-    left: "0%",
-    right: "0%",
-    bottom: "15%",
-    containLabel: true,
-  },
-  xAxis: {
-    type: "category",
-    data: generateDateRange(), 
-    axisLabel: {
-      color: "#ffffff",
-    },
-  },
-  yAxis: {
-    type: "value",
-    axisLabel: {
-      color: "#ffffff",
-    },
-  },
-  series: [
-    {
-      name: "Peak",
-      type: "bar",
-      stack: "total",
-      data: [
-        5000, 5500, 7000, 7500, 9000, 9500, 11000, 11500, 11000, 7500, 6500,
-        5500, 6000, 6200, 5800,
-      ],
-      itemStyle: {
-        color: "#3c50e0",
-      },
-    },
-    {
-      name: "Semi-Peak",
-      type: "bar",
-      stack: "total",
-      data: [
-        3000, 3200, 4500, 4800, 5200, 5800, 6000, 6100, 6200, 5300, 4500, 4000,
-        4200, 4300, 4100,
-      ],
-      itemStyle: {
-        color: "#6577f3",
-      },
-    },
-    {
-      name: "Off-Peak",
-      type: "bar",
-      stack: "total",
-      data: [
-        2000, 2500, 3500, 4000, 4500, 5000, 5200, 5300, 5400, 4500, 4000, 3500,
-        3700, 3800, 3600,
-      ],
-      itemStyle: {
-        color: "#8fd0ef",
-      },
-    },
-  ],
+const { t } = useI18n();
+const dataSource = ref([]);
+const dateRange = ref({
+  min: null,
+  max: null,
 });
 
+// 圖表配置
+const chartConfig = {
+  colors: {
+    peak: "#3c50e0",
+    semiPeak: "#6577f3",
+    offPeak: "#8fd0ef",
+  },
+  textColor: "#ffffff",
+  fontSize: 14,
+};
+
+const processedData = computed(() => {
+  if (!dataSource.value.length) return null;
+
+  const dates = dataSource.value.map((d) => {
+    const [year, month, day] = d.time.split(" ")[0].split("-");
+    return `${month}-${day}`;
+  });
+
+  return {
+    dates,
+    peak: dataSource.value.map((d) => d.degreePeak),
+    semiPeak: dataSource.value.map((d) => d.degreeHalfPeak),
+    offPeak: dataSource.value.map((d) => d.degreeOffPeak),
+  };
+});
+
+const chartOption = computed(() => {
+  if (!processedData.value) return {};
+
+  return {
+    tooltip: {
+      trigger: "axis",
+      axisPointer: { type: "shadow" },
+    },
+    legend: {
+      data: [t("energy.peak"), t("energy.semi_peak"), t("energy.off_peak")],
+      textStyle: {
+        color: chartConfig.textColor,
+        fontSize: chartConfig.fontSize,
+      },
+      orient: "horizontal",
+      bottom: "0%",
+    },
+    grid: {
+      top: "5%",
+      left: "0%",
+      right: "0%",
+      bottom: "15%",
+      containLabel: true,
+    },
+    xAxis: {
+      type: "category",
+      data: processedData.value.dates,
+      axisLabel: {
+        color: chartConfig.textColor,
+      },
+    },
+    yAxis: {
+      type: "value",
+      axisLabel: {
+        color: chartConfig.textColor,
+      },
+    },
+    series: [
+      {
+        name: t("energy.peak"),
+        type: "bar",
+        stack: "total",
+        data: processedData.value.peak,
+        itemStyle: {
+          color: chartConfig.colors.peak,
+        },
+      },
+      {
+        name: t("energy.semi_peak"),
+        type: "bar",
+        stack: "total",
+        data: processedData.value.semiPeak,
+        itemStyle: {
+          color: chartConfig.colors.semiPeak,
+        },
+      },
+      {
+        name: t("energy.off_peak"),
+        type: "bar",
+        stack: "total",
+        data: processedData.value.offPeak,
+        itemStyle: {
+          color: chartConfig.colors.offPeak,
+        },
+      },
+    ],
+  };
+});
+
+const loadData = async () => {
+  const res = await getElecUseDay();
+  if (res.isSuccess) {
+    dataSource.value = res.data.map((d) => ({ ...d, key: d.id }));
+
+    const dates = res.data.map((d) => d.time.split(" ")[0]);
+    dateRange.value = {
+      min: dates[0],
+      max: dates[dates.length - 1],
+    };
+  }
+};
+
 onMounted(() => {
-  //
+  loadData();
 });
 </script>
 
 <template>
   <div class="bg-slate-700 p-3">
-    <div class="text-white mb-3 text-base">
-      {{ $t("energy.interval_bill_degree") }} 2024 / 11 / 01 ~ 2024 / 11 / 15
+    <div
+      class="text-white mb-3 text-base"
+      v-if="dateRange.min && dateRange.max"
+    >
+      {{ $t("energy.interval_bill_degree") }} {{ dateRange.min }} ~
+      {{ dateRange.max }}
     </div>
     <div class="bar-box">
       <BarChart
         id="billing_degree_chart"
         class="min-h-[200px] w-full h-full"
-        :option="defaultChartOption"
+        :option="chartOption"
         ref="degree_chart"
       />
     </div>
diff --git a/src/views/energyManagement/components/MonthlyElecBillChart.vue b/src/views/energyManagement/components/MonthlyElecBillChart.vue
index a31d1e7..7da663d 100644
--- a/src/views/energyManagement/components/MonthlyElecBillChart.vue
+++ b/src/views/energyManagement/components/MonthlyElecBillChart.vue
@@ -1,7 +1,12 @@
 <script setup>
 import BarChart from "@/components/chart/BarChart.vue";
-import { ref, onMounted } from "vue";
+import { ref, onMounted, inject, watch } from "vue";
+import { useI18n } from "vue-i18n";
 
+const { t, locale } = useI18n();
+const { taipower_data } = inject("energy_data");
+
+// 初始化圖表配置
 const defaultChartOption = ref({
   tooltip: {
     trigger: "axis",
@@ -10,7 +15,11 @@ const defaultChartOption = ref({
     },
   },
   legend: {
-    data: ["Var. Elec. Cost", "Fixed Elec. Cost", "Total Elec. Cost"],
+    data: [
+      t("energy.fixed_elec_cost"),
+      t("energy.var_elec_cost"),
+      t("energy.total_elec_cost"),
+    ],
     textStyle: {
       color: "#ffffff",
       fontSize: 14,
@@ -21,26 +30,13 @@ const defaultChartOption = ref({
   grid: {
     top: "5%",
     left: "0%",
-    right: "0%",
+    right: "2%",
     bottom: "15%",
     containLabel: true,
   },
   xAxis: {
     type: "category",
-    data: [
-      "Jan",
-      "Feb",
-      "Mar",
-      "Apr",
-      "May",
-      "Jun",
-      "Jul",
-      "Aug",
-      "Sep",
-      "Oct",
-      "Nov",
-      "Dec",
-    ],
+    data: [],
     axisLabel: {
       color: "#ffffff",
     },
@@ -53,38 +49,28 @@ const defaultChartOption = ref({
   },
   series: [
     {
-      name: "Var. Elec. Cost",
+      name: t("energy.fixed_elec_cost"),
       type: "bar",
       stack: "total",
-      data: [
-        15000, 16000, 20000, 21000, 25000, 26000, 30000, 31000, 35000, 27600,
-        16500, 15000,
-      ],
+      data: [],
+      itemStyle: {
+        color: "#ffd345",
+      },
+    },
+    {
+      name: t("energy.var_elec_cost"),
+      type: "bar",
+      stack: "total",
+      data: [],
       itemStyle: {
         color: "#45f4ef",
       },
     },
     {
-      name: "Fixed Elec. Cost",
+      name: t("energy.total_elec_cost"),
       type: "bar",
       stack: "total",
-      data: [
-        5000, 5500, 7000, 7500, 9000, 9500, 11000, 11500, 11000, 7500, 6500,
-        5500,
-      ],
-      itemStyle: {
-        color: "#ffd345",
-      },
-    },
-
-    {
-      name: "Total Elec. Cost",
-      type: "bar",
-      stack: "total",
-      data: [
-        3000, 3000, 4000, 5000, 12000, 17000, 20000, 20000, 12000, 12000, 5000,
-        0,
-      ],
+      data: [],
       itemStyle: {
         color: "#64ed81",
       },
@@ -92,9 +78,24 @@ const defaultChartOption = ref({
   ],
 });
 
-onMounted(() => {
-  //
-});
+// 監聽 taipower_data，並更新圖表數據
+watch(
+  taipower_data,
+  () => {
+    // 提取資料並更新圖表
+    const months = taipower_data.value.map(item => item.month);
+    const costTotal = taipower_data.value.map((item) => item.costTotal);
+    const costBase = taipower_data.value.map((item) => item.costBase);
+    const costChange = taipower_data.value.map((item) => item.costChange);
+
+    // 更新圖表數據
+    defaultChartOption.value.xAxis.data = months;
+    defaultChartOption.value.series[0].data = costBase;
+    defaultChartOption.value.series[1].data = costChange;
+    defaultChartOption.value.series[2].data = costTotal;
+  },
+  { deep: true }
+);
 </script>
 
 <template>
diff --git a/src/views/energyManagement/components/UsageInformation.vue b/src/views/energyManagement/components/UsageInformation.vue
index f372275..b660170 100644
--- a/src/views/energyManagement/components/UsageInformation.vue
+++ b/src/views/energyManagement/components/UsageInformation.vue
@@ -1,33 +1,82 @@
 <script setup>
-import { ref, watch } from "vue";
+import { ref, watch, inject } from "vue";
 import { twMerge } from "tailwind-merge";
 import { useI18n } from "vue-i18n";
-const { t, locale } = useI18n();
 
-const updateDataItems = () => {
+const { t, locale } = useI18n();
+const { taipower_data } = inject("energy_data");
+
+const daysInMonth = (month) => {
+  const [year, monthNumber] = month.split("-");
+  return new Date(year, monthNumber, 0).getDate(); // 返回該月份的天數
+};
+
+// 函數用來計算所有數據
+const calculateData = () => {
+  const currentYear = new Date().getFullYear().toString(); // 獲取當前年份
+  // 過濾出當年的資料
+  const filteredData = taipower_data.value.filter((item) =>
+    item.month.startsWith(currentYear)
+  );
+
+  const totalElecBills = filteredData.reduce((sum, item) => sum + item.kWh, 0);
+  const latestMonthData = filteredData[filteredData.length - 1];
+  const latestMonth = latestMonthData ? latestMonthData.month : "";
+  const monthDays = latestMonth ? daysInMonth(latestMonth) : 0;
+  const monthTxt = latestMonth
+    ? `${latestMonth}-01~${latestMonth}-${monthDays}`
+    : "";
+
+  const totalCarbonEmission = filteredData.reduce(
+    (sum, item) => sum + item.carbon,
+    0
+  );
+  const totalElecConsumption = filteredData.reduce(
+    (sum, item) => sum + item.kWh,
+    0
+  );
+
   return [
-    { title: t("energy.elec_bills"), data: "3,255,458" },
-    { title: t("energy.interval_elec_charges"), data: "205,110" },
-    { title: t("energy.year_carbon_emission"), data: "455,128" },
+    { title: t("energy.elec_bills"), data: totalElecBills.toLocaleString() },
+    {
+      title: t("energy.interval_elec_charges"),
+      time: monthTxt,
+      data: latestMonthData ? latestMonthData.costTotal.toLocaleString() : 0,
+    },
+    {
+      title: t("energy.year_carbon_emission"),
+      data: totalCarbonEmission.toLocaleString(),
+    },
     {
       title: t("energy.interval_carbon_emission"),
-      time: "2023-11-01~2023-11-19",
-      data: "25,351",
+      time: monthTxt,
+      data: latestMonthData ? latestMonthData.carbon.toLocaleString() : 0,
+    },
+    {
+      title: t("energy.year_elec_consumption"),
+      data: totalElecConsumption.toLocaleString(),
     },
-    { title: t("energy.year_elec_consumption"), data: "864,830" },
     {
       title: t("energy.interval_elec_consumption"),
-      time: "2023-11-01~2023-11-19",
-      data: "50,355",
+      time: monthTxt,
+      data: latestMonthData ? latestMonthData.kWh.toLocaleString() : 0,
     },
   ];
 };
 
-const dataItems = ref(updateDataItems());
+const dataItems = ref(calculateData());
 
 watch(locale, () => {
-  dataItems.value = updateDataItems();
+  dataItems.value = calculateData();
 });
+
+watch(
+  taipower_data,
+  () => {
+    dataItems.value = calculateData();
+  },
+  { deep: true }
+);
 </script>
 
 <template>