加載效果 | 電價改成存進fallback
This commit is contained in:
parent
756cbd3b7a
commit
c4f175d379
3
components.d.ts
vendored
3
components.d.ts
vendored
@ -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']
|
||||
}
|
||||
}
|
||||
|
||||
@ -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: [] };
|
||||
}
|
||||
|
||||
|
||||
@ -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" },
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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: "流動電費",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user