40 lines
1.0 KiB
Vue
40 lines
1.0 KiB
Vue
<script setup>
|
|
import { ref, onMounted, watch, markRaw } from "vue";
|
|
import { useRoute } from "vue-router";
|
|
|
|
import EnergyChart from "./components/EnergyChart/EnergyChart.vue";
|
|
import EnergyHistoryTable from "./components/EnergyHistoryTable/EnergyHistoryTable.vue";
|
|
import EnergyReport from "./components/EnergyReport/EnergyReport.vue";
|
|
|
|
const route = useRoute();
|
|
const currentComponent = ref(null);
|
|
|
|
const updateComponent = () => {
|
|
const { main_system_id, sub_system_id } = route.params;
|
|
|
|
if (main_system_id === "energy_chart") {
|
|
if (sub_system_id === "chart") {
|
|
currentComponent.value = markRaw(EnergyChart);
|
|
} else {
|
|
currentComponent.value = markRaw(EnergyHistoryTable);
|
|
}
|
|
} else if (main_system_id === "energy_report") {
|
|
currentComponent.value = markRaw(EnergyReport);
|
|
} else {
|
|
currentComponent.value = null;
|
|
}
|
|
};
|
|
|
|
onMounted(updateComponent);
|
|
|
|
watch(
|
|
() => route.params,
|
|
() => {
|
|
updateComponent();
|
|
}
|
|
);
|
|
</script>
|
|
<template>
|
|
<component :is="currentComponent" />
|
|
</template>
|