加載效果 | 電價改成存進fallback

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']
+  }
 }

src/components/PdfContent.vue

@@ -1,4 +1,5 @@
 <template>
+  <div v-loading="loading" element-loading-text="資料加載中...">
     <el-row :gutter="20">
       <el-col :span="7">
         <el-descriptions class="margin-top" title="報表資訊" :column="1" border>
@@ -105,6 +106,12 @@
             </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">
@@ -183,20 +190,17 @@
       <el-col :span="12">
         <el-card style="border-radius: 8px; height: 100%">
           <h3 class="">各電表用電量比較(kWh)</h3>
-        <EnergyBar
-          :chartData="elecUsageData"
-        />
+          <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"
-        />
+          <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: [] };
   }
 

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" },

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

src/views/EnergyChart.vue

@@ -1,4 +1,5 @@
 <template>
+  <div v-loading="loading" element-loading-text="資料加載中...">
     <el-row :gutter="20">
       <el-col :span="10">
         <el-card style="border-radius: 8px">
@@ -62,6 +63,7 @@
         </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: "流動電費",