From c4f175d3794f0b2613f35ae13a59fb82f8a1291c Mon Sep 17 00:00:00 2001
From: huliang <1539398430@qq.com>
Date: Fri, 9 May 2025 18:12:16 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E8=BC=89=E6=95=88=E6=9E=9C=20|=20?=
 =?UTF-8?q?=E9=9B=BB=E5=83=B9=E6=94=B9=E6=88=90=E5=AD=98=E9=80=B2fallback?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                  |   3 +
 src/components/PdfContent.vue    | 431 +++++++++++++++++--------------
 src/stores/useElecPriceStore.ts  |   4 +-
 src/stores/useElecReportStore.ts |   2 -
 src/views/EnergyChart.vue        | 142 +++++-----
 5 files changed, 312 insertions(+), 270 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 2c07aec..368ab70 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -36,4 +36,7 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }
diff --git a/src/components/PdfContent.vue b/src/components/PdfContent.vue
index cf99ee1..bde66db 100644
--- a/src/components/PdfContent.vue
+++ b/src/components/PdfContent.vue
@@ -1,202 +1,206 @@
 <template>
-  <el-row :gutter="20">
-    <el-col :span="7">
-      <el-descriptions class="margin-top" title="報表資訊" :column="1" border>
-        <el-descriptions-item>
-          <template #label>
-            <div class="cell-item">報表名稱</div>
-          </template>
-          {{ props.form?.name }}
-        </el-descriptions-item>
-        <el-descriptions-item>
-          <template #label>
-            <div class="cell-item">報表期間</div>
-          </template>
-          {{ dayjs(props.form?.date).format("YYYY/MM") }}
-        </el-descriptions-item>
-        <el-descriptions-item>
-          <template #label>
-            <div class="cell-item">編製日期</div>
-          </template>
-          {{ dayjs().format("YYYY/MM/DD") }}
-        </el-descriptions-item>
-        <el-descriptions-item>
-          <template #label>
-            <div class="cell-item">編製人員</div>
-          </template>
-          {{ props.form?.staff }}
-        </el-descriptions-item>
-      </el-descriptions>
-    </el-col>
-    <el-col :span="11">
-      <el-descriptions
-        class="margin-top"
-        :title="priceTitle"
-        :column="2"
-        border
-      >
-        <el-descriptions-item>
-          <template #label>
-            <div class="cell-item">基本電費-三相</div>
-          </template>
-          {{ Three_Phase }}
-        </el-descriptions-item>
-        <el-descriptions-item v-if="isSummerMonth">
-          <template #label>
-            <div class="cell-item">基本電費-經常契約</div>
-          </template>
-          {{ Regular_Contract_Summer }}
-        </el-descriptions-item>
-        <el-descriptions-item v-if="!isSummerMonth">
-          <template #label>
-            <div class="cell-item">基本電費-經常契約</div>
-          </template>
-          {{ Regular_Contract_Non_Summer }}
-        </el-descriptions-item>
-        <el-descriptions-item v-if="isSummerMonth">
-          <template #label>
-            <div class="cell-item">流動電價-平日尖峰單價</div>
-          </template>
-          {{ Summer_Peak_Prices }}
-        </el-descriptions-item>
-        <el-descriptions-item>
-          <template #label>
-            <div class="cell-item">流動電價-平日半尖峰單價</div>
-          </template>
-          {{
-            isSummerMonth
-              ? Summer_HalfPeak_Prices_Weekday
-              : Non_Summer_HalfPeak_Prices_Weekday
-          }}
-        </el-descriptions-item>
-        <el-descriptions-item>
-          <template #label>
-            <div class="cell-item">流動電價-平日離峰單價</div>
-          </template>
-          {{
-            isSummerMonth
-              ? Summer_Off_Prices_Weekday
-              : Non_Summer_Off_Prices_Weekday
-          }}
-        </el-descriptions-item>
-        <el-descriptions-item>
-          <template #label>
-            <div class="cell-item">流動電價-週六半尖峰單價</div>
-          </template>
-          {{
-            isSummerMonth
-              ? Summer_HalfPeak_Prices_Saturday
-              : Non_Summer_HalfPeak_Prices_Saturday
-          }}
-        </el-descriptions-item>
-        <el-descriptions-item>
-          <template #label>
-            <div class="cell-item">流動電價-週六離峰單價</div>
-          </template>
-          {{
-            isSummerMonth
-              ? Summer_Off_Prices_Saturday
-              : Non_Summer_Off_Prices_Saturday
-          }}
-        </el-descriptions-item>
-        <el-descriptions-item>
-          <template #label>
-            <div class="cell-item">流動電價-週日離峰單價</div>
-          </template>
-          {{ isSummerMonth ? Summer_Off_Prices : Non_Summer_Off_Prices }}
-        </el-descriptions-item>
-      </el-descriptions>
-    </el-col>
-    <el-col :span="6">
-      <el-descriptions class="margin-top" title="總計" :column="1" border>
-        <el-descriptions-item>
-          <template #label>
-            <div class="cell-item">基本電費</div>
-          </template>
-          {{ totalStandCost.toFixed(2) }}
-        </el-descriptions-item>
-        <el-descriptions-item>
-          <template #label>
-            <div class="cell-item">流動電費</div>
-          </template>
-          {{ totalFlowCost.toFixed(2) }}
-        </el-descriptions-item>
-        <el-descriptions-item>
-          <template #label>
-            <div class="cell-item">總費用</div>
-          </template>
-          {{ totalCost.toFixed(2) }}
-        </el-descriptions-item>
-      </el-descriptions>
-    </el-col>
-  </el-row>
-  <el-row :gutter="20">
-    <el-col :span="24">
-      <table>
-        <thead>
-          <tr>
-            <th colspan="2" class="bg-info">基本資料</th>
-            <th colspan="3" class="bg-orange">前期比較</th>
-            <th colspan="4" class="bg-green">用電量(kWh)</th>
-            <th colspan="4" class="bg-yellow">費用(NTD)</th>
-          </tr>
-          <tr>
-            <th class="bg-info">電表編號</th>
-            <th class="bg-info">區域/用途</th>
-            <th class="bg-orange">上月用電量(kWh)</th>
-            <th class="bg-orange">用電變化量(kWh)</th>
-            <th class="bg-orange">用電變化率(%)</th>
-            <th class="bg-green">總用電量</th>
-            <th class="bg-green">尖峰用電</th>
-            <th class="bg-green">半尖峰用電</th>
-            <th class="bg-green">離峰用電</th>
-            <th class="bg-yellow">尖峰費用</th>
-            <th class="bg-yellow">半尖峰費用</th>
-            <th class="bg-yellow">離峰費用</th>
-            <th class="bg-yellow">小計</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            v-for="meterData in formattedElecCostSummary"
-            :key="meterData.name"
-          >
-            <td>{{ meterData.name }}</td>
-            <td>{{ meterData.area }}</td>
-            <td>{{ meterData.lastMonthUsage.toFixed(2) }}</td>
-            <td>{{ meterData.usageChange.toFixed(2) }}</td>
-            <td>{{ meterData.usageChangeRate.toFixed(2) }}</td>
-            <td>{{ meterData.totalUsage.toFixed(2) }}</td>
-            <td>{{ meterData.peakUsage.toFixed(2) }}</td>
-            <td>{{ meterData.halfPeakUsage.toFixed(2) }}</td>
-            <td>{{ meterData.offPeakUsage.toFixed(2) }}</td>
-            <td>{{ meterData.peakCost.toFixed(2) }}</td>
-            <td>{{ meterData.halfPeakCost.toFixed(2) }}</td>
-            <td>{{ meterData.offPeakCost.toFixed(2) }}</td>
-            <td>{{ meterData.totalCost.toFixed(2) }}</td>
-          </tr>
-        </tbody>
-      </table>
-    </el-col>
-  </el-row>
-  <el-row :gutter="20">
-    <el-col :span="12">
-      <el-card style="border-radius: 8px; height: 100%">
-        <h3 class="">各電表用電量比較(kWh)</h3>
-        <EnergyBar
-          :chartData="elecUsageData"
-        />
-      </el-card>
-    </el-col>
-    <el-col :span="12">
-      <el-card style="border-radius: 8px; height: 100%">
-        <h3 class="">各電表總費用佔比</h3>
-        <EnergyPie
-          :chartData="elecCostData"
-        />
-      </el-card>
-    </el-col>
-  </el-row>
+  <div v-loading="loading" element-loading-text="資料加載中...">
+    <el-row :gutter="20">
+      <el-col :span="7">
+        <el-descriptions class="margin-top" title="報表資訊" :column="1" border>
+          <el-descriptions-item>
+            <template #label>
+              <div class="cell-item">報表名稱</div>
+            </template>
+            {{ props.form?.name }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template #label>
+              <div class="cell-item">報表期間</div>
+            </template>
+            {{ dayjs(props.form?.date).format("YYYY/MM") }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template #label>
+              <div class="cell-item">編製日期</div>
+            </template>
+            {{ dayjs().format("YYYY/MM/DD") }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template #label>
+              <div class="cell-item">編製人員</div>
+            </template>
+            {{ props.form?.staff }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-col>
+      <el-col :span="11">
+        <el-descriptions
+          class="margin-top"
+          :title="priceTitle"
+          :column="2"
+          border
+        >
+          <el-descriptions-item>
+            <template #label>
+              <div class="cell-item">基本電費-三相</div>
+            </template>
+            {{ Three_Phase }}
+          </el-descriptions-item>
+          <el-descriptions-item v-if="isSummerMonth">
+            <template #label>
+              <div class="cell-item">基本電費-經常契約</div>
+            </template>
+            {{ Regular_Contract_Summer }}
+          </el-descriptions-item>
+          <el-descriptions-item v-if="!isSummerMonth">
+            <template #label>
+              <div class="cell-item">基本電費-經常契約</div>
+            </template>
+            {{ Regular_Contract_Non_Summer }}
+          </el-descriptions-item>
+          <el-descriptions-item v-if="isSummerMonth">
+            <template #label>
+              <div class="cell-item">流動電價-平日尖峰單價</div>
+            </template>
+            {{ Summer_Peak_Prices }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template #label>
+              <div class="cell-item">流動電價-平日半尖峰單價</div>
+            </template>
+            {{
+              isSummerMonth
+                ? Summer_HalfPeak_Prices_Weekday
+                : Non_Summer_HalfPeak_Prices_Weekday
+            }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template #label>
+              <div class="cell-item">流動電價-平日離峰單價</div>
+            </template>
+            {{
+              isSummerMonth
+                ? Summer_Off_Prices_Weekday
+                : Non_Summer_Off_Prices_Weekday
+            }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template #label>
+              <div class="cell-item">流動電價-週六半尖峰單價</div>
+            </template>
+            {{
+              isSummerMonth
+                ? Summer_HalfPeak_Prices_Saturday
+                : Non_Summer_HalfPeak_Prices_Saturday
+            }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template #label>
+              <div class="cell-item">流動電價-週六離峰單價</div>
+            </template>
+            {{
+              isSummerMonth
+                ? Summer_Off_Prices_Saturday
+                : Non_Summer_Off_Prices_Saturday
+            }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template #label>
+              <div class="cell-item">流動電價-週日離峰單價</div>
+            </template>
+            {{ isSummerMonth ? Summer_Off_Prices : Non_Summer_Off_Prices }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template #label>
+              <div class="cell-item">契約容量</div>
+            </template>
+            {{ ContractUse }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-col>
+      <el-col :span="6">
+        <el-descriptions class="margin-top" title="總計" :column="1" border>
+          <el-descriptions-item>
+            <template #label>
+              <div class="cell-item">基本電費</div>
+            </template>
+            {{ totalStandCost.toFixed(2) }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template #label>
+              <div class="cell-item">流動電費</div>
+            </template>
+            {{ totalFlowCost.toFixed(2) }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template #label>
+              <div class="cell-item">總費用</div>
+            </template>
+            {{ totalCost.toFixed(2) }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <table>
+          <thead>
+            <tr>
+              <th colspan="2" class="bg-info">基本資料</th>
+              <th colspan="3" class="bg-orange">前期比較</th>
+              <th colspan="4" class="bg-green">用電量(kWh)</th>
+              <th colspan="4" class="bg-yellow">費用(NTD)</th>
+            </tr>
+            <tr>
+              <th class="bg-info">電表編號</th>
+              <th class="bg-info">區域/用途</th>
+              <th class="bg-orange">上月用電量(kWh)</th>
+              <th class="bg-orange">用電變化量(kWh)</th>
+              <th class="bg-orange">用電變化率(%)</th>
+              <th class="bg-green">總用電量</th>
+              <th class="bg-green">尖峰用電</th>
+              <th class="bg-green">半尖峰用電</th>
+              <th class="bg-green">離峰用電</th>
+              <th class="bg-yellow">尖峰費用</th>
+              <th class="bg-yellow">半尖峰費用</th>
+              <th class="bg-yellow">離峰費用</th>
+              <th class="bg-yellow">小計</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="meterData in formattedElecCostSummary"
+              :key="meterData.name"
+            >
+              <td>{{ meterData.name }}</td>
+              <td>{{ meterData.area }}</td>
+              <td>{{ meterData.lastMonthUsage.toFixed(2) }}</td>
+              <td>{{ meterData.usageChange.toFixed(2) }}</td>
+              <td>{{ meterData.usageChangeRate.toFixed(2) }}</td>
+              <td>{{ meterData.totalUsage.toFixed(2) }}</td>
+              <td>{{ meterData.peakUsage.toFixed(2) }}</td>
+              <td>{{ meterData.halfPeakUsage.toFixed(2) }}</td>
+              <td>{{ meterData.offPeakUsage.toFixed(2) }}</td>
+              <td>{{ meterData.peakCost.toFixed(2) }}</td>
+              <td>{{ meterData.halfPeakCost.toFixed(2) }}</td>
+              <td>{{ meterData.offPeakCost.toFixed(2) }}</td>
+              <td>{{ meterData.totalCost.toFixed(2) }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-card style="border-radius: 8px; height: 100%">
+          <h3 class="">各電表用電量比較(kWh)</h3>
+          <EnergyBar :chartData="elecUsageData" />
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card style="border-radius: 8px; height: 100%">
+          <h3 class="">各電表總費用佔比</h3>
+          <EnergyPie :chartData="elecCostData" />
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -205,6 +209,8 @@ import EnergyPie from "../components/EnergyPie.vue";
 import EnergyBar from "../components/EnergyBar.vue";
 import useElecPriceStore from "../stores/useElecPriceStore";
 import useElecReportStore from "../stores/useElecReportStore";
+import useElecDemandStore from "../stores/useElecDemandStore";
+
 import getRandomColor from "../utils/getRandomColor";
 import dayjs from "dayjs";
 
@@ -215,7 +221,22 @@ const props = defineProps({
 });
 const storeElecPrice = useElecPriceStore();
 const storeElecReport = useElecReportStore();
+const storeDemand = useElecDemandStore();
+
 const elecPrices = storeElecPrice.elecData;
+const elecDemand = storeDemand.elecData;
+
+const loading = computed(() => {
+  const summaryThisMonth = storeElecReport.elecCostSummary.thisMonth;
+  if (
+    !summaryThisMonth ||
+    Object.keys(summaryThisMonth).length === 0 ||
+    Object.values(summaryThisMonth).every((value) => value === undefined)
+  ) {
+    return true;
+  }
+  return false;
+});
 
 const isSummerMonth = computed(() => {
   const month = dayjs(props.form?.date).month(); // month() 返回 0-11，代表一月到十二月
@@ -336,10 +357,16 @@ const Non_Summer_Off_Prices_Saturday =
 const Non_Summer_Off_Prices =
   elecPrices.find((item: any) => item.displayName === "流動週日離峰非夏月")
     ?.out || 0;
+const ContractUse =
+  elecDemand.find((item: any) => item.name === "Engel")?.out || 0;
 
 const elecUsageData = computed(() => {
   const summaryThisMonth = storeElecReport.elecCostSummary.thisMonth;
-  if (!summaryThisMonth) {
+  if (
+    !summaryThisMonth ||
+    Object.keys(summaryThisMonth).length === 0 ||
+    Object.values(summaryThisMonth).every((value) => value === undefined)
+  ) {
     return {
       categories: [],
       series: [],
@@ -383,7 +410,11 @@ const elecUsageData = computed(() => {
 });
 const elecCostData = computed(() => {
   const summaryThisMonth = storeElecReport.elecCostSummary.thisMonth;
-  if (!summaryThisMonth) {
+  if (
+    !summaryThisMonth ||
+    Object.keys(summaryThisMonth).length === 0 ||
+    Object.values(summaryThisMonth).every((value) => value === undefined)
+  ) {
     return { series: [] };
   }
 
diff --git a/src/stores/useElecPriceStore.ts b/src/stores/useElecPriceStore.ts
index 8a0736d..1c3360d 100644
--- a/src/stores/useElecPriceStore.ts
+++ b/src/stores/useElecPriceStore.ts
@@ -105,9 +105,9 @@ const useElecPriceStore = defineStore("elecPriceData", () => {
   const updatePrice = async (slotPath: string, out: number) => {
     const domain = window.location.origin;
     try {
-      console.log("updatePrice",`${domain}/obix/config/${slotPath}/in2/value`)
+      console.log("updatePrice",`${domain}/obix/config/${slotPath}/fallback/value`)
       const res = await axios.put(
-        `${domain}/obix/config/${slotPath}/in2/value`,
+        `${domain}/obix/config/${slotPath}/fallback/value`,
         `<real name="in" val="${out}"/> `,
         {
           headers: { "Content-Type": "text/xml" },
diff --git a/src/stores/useElecReportStore.ts b/src/stores/useElecReportStore.ts
index eb0224d..e36e304 100644
--- a/src/stores/useElecReportStore.ts
+++ b/src/stores/useElecReportStore.ts
@@ -4,8 +4,6 @@ import dayjs from "dayjs";
 import type { ElecCostSummaryMap } from "../utils/types";
 import { CalcuEleCost, CalcuEleStandCost } from "../utils/CalcuEleCost";
 
-
-
 const useElecReportStore = defineStore("elecReportData", () => {
   const elecData = ref<any[]>([]);
   // @ts-ignore
diff --git a/src/views/EnergyChart.vue b/src/views/EnergyChart.vue
index 0866531..421cedd 100644
--- a/src/views/EnergyChart.vue
+++ b/src/views/EnergyChart.vue
@@ -1,67 +1,69 @@
 <template>
-  <el-row :gutter="20">
-    <el-col :span="10">
-      <el-card style="border-radius: 8px">
-        <h3 class="">用電即時分佈 (kwh)</h3>
-        <EnergySankey />
-      </el-card>
-    </el-col>
-    <el-col :span="14">
-      <h3 class="" style="margin-top: 15px">即時需量</h3>
-      <EnergyLine />
-    </el-col>
-  </el-row>
-  <el-row :gutter="20">
-    <el-col :span="8">
-      <el-row style="padding-right: 15px">
-        <el-col :span="12" v-for="(item, index) in statisticData">
-          <el-card
-            style="
-              width: 100%;
-              padding: 5px;
-              max-width: 480px;
-              border-radius: 0;
-            "
-            :key="index"
-            :class="{ 'bg-info': index == 0 || index == 3 || index == 4 }"
-            shadow="hover"
-          >
-            <el-statistic
-              :title="item.title"
-              :value="item.value"
-              :suffix="item.unit"
-            />
-          </el-card>
-        </el-col>
-      </el-row>
-    </el-col>
-    <el-col :span="8">
-      <el-card style="border-radius: 8px; height: 100%">
-        <h3 class="">每月用電分析</h3>
-        <EnergyBar :chartData="monthlyElectricityData" />
-      </el-card>
-    </el-col>
-    <el-col :span="8">
-      <el-card style="border-radius: 8px; height: 100%">
-        <h3 class="">每月碳排當量 (kgCO2e)</h3>
-        <EnergyBar :chartData="monthlyCarbonData" />
-      </el-card>
-    </el-col>
-  </el-row>
-  <el-row :gutter="20">
-    <el-col :span="8">
-      <el-card style="border-radius: 8px; height: 100%">
-        <h3 class="">每月計費度數 (kWh)</h3>
-        <EnergyBar :chartData="monthlyBillingData" />
-      </el-card>
-    </el-col>
-    <el-col :span="16">
-      <el-card style="border-radius: 8px">
-        <h3 class="">區間計費度數 {{ billingDateRange }}</h3>
-        <EnergyBar :chartData="areaBillingData" />
-      </el-card>
-    </el-col>
-  </el-row>
+  <div v-loading="loading" element-loading-text="資料加載中...">
+    <el-row :gutter="20">
+      <el-col :span="10">
+        <el-card style="border-radius: 8px">
+          <h3 class="">用電即時分佈 (kwh)</h3>
+          <EnergySankey />
+        </el-card>
+      </el-col>
+      <el-col :span="14">
+        <h3 class="" style="margin-top: 15px">即時需量</h3>
+        <EnergyLine />
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <el-row style="padding-right: 15px">
+          <el-col :span="12" v-for="(item, index) in statisticData">
+            <el-card
+              style="
+                width: 100%;
+                padding: 5px;
+                max-width: 480px;
+                border-radius: 0;
+              "
+              :key="index"
+              :class="{ 'bg-info': index == 0 || index == 3 || index == 4 }"
+              shadow="hover"
+            >
+              <el-statistic
+                :title="item.title"
+                :value="item.value"
+                :suffix="item.unit"
+              />
+            </el-card>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="8">
+        <el-card style="border-radius: 8px; height: 100%">
+          <h3 class="">每月用電分析</h3>
+          <EnergyBar :chartData="monthlyElectricityData" />
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card style="border-radius: 8px; height: 100%">
+          <h3 class="">每月碳排當量 (kgCO2e)</h3>
+          <EnergyBar :chartData="monthlyCarbonData" />
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <el-card style="border-radius: 8px; height: 100%">
+          <h3 class="">每月計費度數 (kWh)</h3>
+          <EnergyBar :chartData="monthlyBillingData" />
+        </el-card>
+      </el-col>
+      <el-col :span="16">
+        <el-card style="border-radius: 8px">
+          <h3 class="">區間計費度數 {{ billingDateRange }}</h3>
+          <EnergyBar :chartData="areaBillingData" />
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script setup>
@@ -104,6 +106,14 @@ onUnmounted(() => {
   storeElecTotal.stopTimer();
 });
 
+const loading = computed(() => {
+  const summaryFlowCost = storeElecTotal.elecFlowCostSummary?.dailyResults;
+  if (!summaryFlowCost) {
+    return true;
+  }
+  return false;
+});
+
 const statisticData = computed(() => {
   const currentMonth = dayjs().format("YYYY-MM");
 
@@ -187,12 +197,12 @@ const monthlyElectricityData = computed(() => {
     dayjs().month(month).valueOf()
   );
 
-  const baseElecData = storeElecTotal.elecStandCostSummary.StandCost;
+  const baseElecData = storeElecTotal.elecStandCostSummary.StandResults.map(item => item.StandCost); 
   const flowElecData = sortedCategories.map(
     (month) => groupedData[month].totalCost
   );
   const totalElecData = sortedCategories.map((month, index) => {
-    return baseElecData + (flowElecData[index] || 0);
+    return (baseElecData[index] || 0) + (flowElecData[index] || 0);
   });
 
   return {
@@ -201,7 +211,7 @@ const monthlyElectricityData = computed(() => {
       {
         name: "基本電費",
         type: "bar",
-        data: Array(sortedCategories.length).fill(baseElecData),
+        data: baseElecData,
       },
       {
         name: "流動電費",