160 lines
4.0 KiB
Vue
160 lines
4.0 KiB
Vue
<script setup>
|
|
import { ref, computed, provide, watch } from "vue";
|
|
import ImmediateDemandChart from "./ImmediateDemandChart.vue";
|
|
import ElecConsumption from "./ElecConsumption.vue";
|
|
import UsageInformation from "./UsageInformation.vue";
|
|
import MonthlyElecBillChart from "./MonthlyElecBillChart.vue";
|
|
import CarbonEmissionChart from "./CarbonEmissionChart.vue";
|
|
import BillingDegreeChart from "./BillingDegreeChart.vue";
|
|
import IntervalBillChart from "./IntervalBillChart.vue";
|
|
import useActiveBtn from "@/hooks/useActiveBtn";
|
|
import { getTaipower } from "@/apis/energy";
|
|
import useBuildingStore from "@/stores/useBuildingStore";
|
|
|
|
const storeBuild = useBuildingStore();
|
|
// 選樓層
|
|
const {
|
|
items: sysFloorItems,
|
|
changeActiveBtn: changeFloorActiveBtn,
|
|
setItems: setFloorItems,
|
|
selectedBtn: selectedFloorItems,
|
|
} = useActiveBtn("multiple");
|
|
// 選部門
|
|
const {
|
|
items: sysDeptItems,
|
|
changeActiveBtn: changeDeptActiveBtn,
|
|
setItems: setDeptItems,
|
|
selectedBtn: selectedDeptItems,
|
|
} = useActiveBtn("multiple");
|
|
|
|
const taipower_data = ref([]);
|
|
const carbonValue = ref(null);
|
|
const search_data = computed(() => {
|
|
return {
|
|
coefficient: carbonValue.value,
|
|
building_guid: storeBuild.selectedBuilding?.building_guid || null,
|
|
department_id_list: selectedDeptItems.value.map((item) => item.key),
|
|
floor_guid_list: selectedFloorItems.value.map((item) => item.key),
|
|
};
|
|
});
|
|
|
|
const getData = async (value) => {
|
|
const res = await getTaipower(value);
|
|
if (res.isSuccess) {
|
|
taipower_data.value = res.data
|
|
? res.data.sort((a, b) => a.month.localeCompare(b.month))
|
|
: [];
|
|
}
|
|
};
|
|
|
|
watch(
|
|
search_data,
|
|
(newValue, oldValue) => {
|
|
if (
|
|
newValue.building_guid &&
|
|
newValue.coefficient &&
|
|
JSON.stringify(newValue) !== JSON.stringify(oldValue)
|
|
) {
|
|
getData(newValue);
|
|
}
|
|
},
|
|
{
|
|
immediate: true,
|
|
deep: true,
|
|
}
|
|
);
|
|
|
|
watch(
|
|
() => storeBuild.floorList,
|
|
(newValue) => {
|
|
if (newValue) {
|
|
const floorList = newValue.map((d) => ({
|
|
...d,
|
|
active: true,
|
|
}));
|
|
setFloorItems(floorList);
|
|
}
|
|
},
|
|
{
|
|
immediate: true,
|
|
}
|
|
);
|
|
|
|
watch(
|
|
() => storeBuild.deptList,
|
|
(newValue) => {
|
|
if (newValue) {
|
|
const deptList = newValue.map((d) => ({
|
|
...d,
|
|
active: true,
|
|
}));
|
|
setDeptItems(deptList);
|
|
}
|
|
},
|
|
{
|
|
immediate: true,
|
|
}
|
|
);
|
|
|
|
provide("energy_data", { taipower_data, search_data, carbonValue });
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-wrap items-center mb-4">
|
|
<div class="w-full border border-info px-4 py-2 rounded mt-3">
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-md font-extrabold">{{ $t("energy.floor") }} :</span>
|
|
<ButtonGroup
|
|
:items="sysFloorItems"
|
|
:withLine="true"
|
|
className="btn-xs rounded-md"
|
|
:onclick="
|
|
(e, item) => {
|
|
changeFloorActiveBtn(item);
|
|
}
|
|
"
|
|
/>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-md font-extrabold"
|
|
>{{ $t("assetManagement.department") }} :</span
|
|
>
|
|
<ButtonGroup
|
|
:items="sysDeptItems"
|
|
:withLine="true"
|
|
className="btn-xs rounded-md"
|
|
:onclick="
|
|
(e, item) => {
|
|
changeDeptActiveBtn(item);
|
|
}
|
|
"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<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>
|