102 lines
2.1 KiB
Vue
102 lines
2.1 KiB
Vue
<script setup>
|
|
import BarChart from "@/components/chart/BarChart.vue";
|
|
import { ref, onMounted, inject, watch } from "vue";
|
|
import { useI18n } from "vue-i18n";
|
|
|
|
const { t } = useI18n();
|
|
const { elecMonth_data } = inject("energy_data");
|
|
const defaultChartOption = ref({
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
},
|
|
legend: {
|
|
data: [t("energy.fixed_elec_cost"), t("energy.var_elec_cost")],
|
|
textStyle: {
|
|
color: "#ffffff",
|
|
fontSize: 16,
|
|
},
|
|
orient: "horizontal",
|
|
bottom: "0%",
|
|
},
|
|
grid: {
|
|
top: "5%",
|
|
left: "0%",
|
|
right: "0%",
|
|
bottom: "10%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: [],
|
|
axisLabel: {
|
|
color: "#ffffff",
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
// max: 500,
|
|
min: 0,
|
|
axisLabel: {
|
|
color: "#ffffff",
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: t("energy.fixed_elec_cost"),
|
|
type: "bar",
|
|
stack: "total",
|
|
data: [],
|
|
itemStyle: {
|
|
color: "#37c640",
|
|
},
|
|
// barWidth: "20px",
|
|
},
|
|
{
|
|
name: t("energy.var_elec_cost"),
|
|
type: "bar",
|
|
stack: "total",
|
|
data: [],
|
|
itemStyle: {
|
|
color: "#8ee894",
|
|
},
|
|
// barWidth: "20px",
|
|
},
|
|
],
|
|
});
|
|
|
|
watch(
|
|
() => elecMonth_data.value,
|
|
(newData) => {
|
|
const times = newData.map((item) => item.time);
|
|
const costBase = newData.map((item) => item.costBase);
|
|
const costDemand = newData.map((item) =>
|
|
(item.costPeak + item.costHalfPeak + item.costOffPeak).toFixed(2)
|
|
);
|
|
|
|
defaultChartOption.value.xAxis.data = times;
|
|
defaultChartOption.value.series[0].data = costBase;
|
|
defaultChartOption.value.series[1].data = costDemand;
|
|
},
|
|
{ deep: true }
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="card bg-normal w-full h-full border border-cyan-300/50 rounded-md"
|
|
>
|
|
<div class="card-body">
|
|
<h2 class="card-title">{{ $t("energy.monthly_elec_bill") }}</h2>
|
|
<BarChart
|
|
id="electricity_bill_chart"
|
|
class="min-h-[250px] max-h-fit"
|
|
:option="defaultChartOption"
|
|
ref="bill_chart"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|