ФПК РЖД

<template> <h1>Басқару тақтасының бөлімшесі</h1> <div class="dashboards-wrapper"> <button class="btn" v-for="(dashboard,ind) in dashboardArr" :key="ind" @click="switchDashboard(dashboard)"> {{ dashboard }} </button> </div> <div v-if="crntDashboard==='Жүктөлгөн жөө жүргүнчүлөрдүн панел'"> <passengers-dashboard :props="dataToDashboards"/> </div> <div v-else-if="crntDashboard==='Поезддар боюнча аналитика'"> <trains-dashboard :props="dataToDashboards"/> </div> <div v-else-if="crntDashboard==='Жүктөлгөн мысыкчалардын мониторинг'"> <cats-dashboard :props="dataToDashboards"/> </div> </template> <script setup> const dashboardArr = ['Жүктөлгөн жөө жүргүнчүлөрдүн панел', 'Поезддар боюнча аналитика', 'Жүктөлгөн мысыкчалардын мониторинг'] const crntDashboard = ref('') function switchDashboard(dashboardName) { crntDashboard.value = dashboardName switch (dashboardName) { case 'Жүктөлгөн жөө жүргүнчүлөрдүн панел': dataToDashboards.value = getDataToPassengers() break case 'Поезддар боюнча аналитика': dataToDashboards.value = getDataToTrains() break case 'Жүктөлгөн мысыкчалардын мониторинг': dataToDashboards.value = getDataToCats() break } } const dataToDashboards = ref() async function getDataToPassengers() { const _data = await $fetch(`/app/passengers`) return _data } async function getDataToTrains() { const _data = await $fetch(`/app/trains`) return _data } async function getDataToCats() { const _data = await $fetch(`/app/cats`) return _data } </script>