Přeskočit na hlavní obsah

Dashboard

Megio panel obsahuje zcela prázdný dashboard - ten můžete nahradit svým vlastním, který bude obsahovat ty nejdůležitější informace, jež je potřeba mít na očích.

Megio panel

Instalace vitejs/plugin-vue​

Pokud jste doposud nepracovali se soubory .vue, tak nyní je potřeba provést menší konfiguraci - postupujte prosím podle následujících kroků v kapitole práce s assety - vue a teprve poté pokračujte dále.

1. Vytvoření view​

assets/panel/views/Dashboard.vue
<script lang="ts" setup>
import { useComponents, useVuetify } from 'megio-panel'

const { VBtn } = useVuetify()
const { MLayout } = useComponents()
</script>

<template>
    <MLayout>
        <div class="pa-7">
            <p class="my-3">Toto je můj vlastní dashboard.</p>
            <VBtn variant="tonal">Test BTN</VBtn>
        </div>
    </MLayout>
</template>

2. Registrace routy​

assets/panel.ts
import 'megio-panel/styles'
import { createMegioPanel, useGlobals } from 'megio-panel'
import { RouteRecordRaw } from 'megio-panel/types'

const { routes } = useGlobals()
const exclude: string[] = ['megio.view.dashboard'] // Vyloučení výchozího dashboardu
const customRoutes = [...routes].filter(r => !exclude.includes(r.name as string))

const ownRoutes: RouteRecordRaw[] = [
    ...customRoutes,
    // Přidání vlastního dashboardu
    {
        path: '/dashboard',
        name: 'megio.view.dashboard', // Název routy musí být stejný jako výchozí
        component: () => import('@/assets/panel/views/Dashboard.vue')
    }
]

// Mount panelu na DOM
createMegioPanel('http://localhost:8090/', { routes: ownRoutes })

3. Build projektu​

yarn build