55 lines
1.5 KiB
Vue
55 lines
1.5 KiB
Vue
<script setup>
|
|
import ImmediateDemandChart from "./components/ImmediateDemandChart.vue";
|
|
import ElecConsumption from "./components/ElecConsumption.vue";
|
|
import UsageInformation from "./components/UsageInformation.vue";
|
|
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>
|
|
<div class="flex flex-wrap items-center mb-4">
|
|
<div class="w-full xl:w-5/12 lg:w-1/2">
|
|
<ElecConsumption />
|
|
</div>
|
|
<div class="w-full xl:w-7/12 lg:w-1/2">
|
|
<ImmediateDemandChart />
|
|
</div>
|
|
<div class="w-full xl:w-1/3 px-3">
|
|
<UsageInformation />
|
|
</div>
|
|
<div class="w-full xl:w-1/3 px-3">
|
|
<MonthlyElecBillChart />
|
|
</div>
|
|
<div class="w-full xl:w-1/3 px-3">
|
|
<CarbonEmissionChart />
|
|
</div>
|
|
<div class="w-full xl:w-1/3 px-3">
|
|
<BillingDegreeChart />
|
|
</div>
|
|
<div class="w-full xl:w-2/3 px-3">
|
|
<IntervalBillChart />
|
|
</div>
|
|
</div>
|
|
<div class="grid gap-4 grid-cols-3"></div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|