34 lines
1.4 KiB
Vue
34 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
const config = useRuntimeConfig()
|
|
const route = useRoute()
|
|
interface APIBody {
|
|
data: any[],
|
|
status: 'success' | 'error'
|
|
}
|
|
|
|
const { data, pending, error, status } = await useLazyFetch<APIBody>(`${config.public.apiBase}/api/vtk/${route.params.slug}`, { server: false })
|
|
</script>
|
|
<template>
|
|
<UAlert v-if="status == 'error'" :title="`Произошла ошибка ${error?.statusCode}`"
|
|
:description="error?.data && error.data.detail ? error.data.detail : error?.statusMessage" />
|
|
|
|
<UTable v-else :loading="pending" :columns="[
|
|
{ key: 'sn', label: 'Serial Number' },
|
|
{ key: 'name', label: 'Name' },
|
|
{ key: 'ip', label: 'IP' },
|
|
{ key: 'last_online', label: 'Last Online' }
|
|
]" :rows="pending ? [] : data?.data">
|
|
<template #last_online-data="{ row }">
|
|
<UIcon name="i-heroicons-check-circle" class="text-green-500 text-xl" v-if="row.last_online == -1" />
|
|
<span class="flex align-baseline gap-1" v-else>
|
|
<UIcon name="i-heroicons-x-circle" class="text-red-500 text-xl" />
|
|
{{ new Date(row.last_online).toLocaleTimeString('ru-RU') }}
|
|
</span>
|
|
</template>
|
|
<template #name-data="{ row }">
|
|
<div class="text-wrap">
|
|
{{ row.name }}
|
|
</div>
|
|
</template>
|
|
</UTable>
|
|
</template> |