44 lines
1.7 KiB
Vue
44 lines
1.7 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: 'status', label: 'Status' },
|
|
{ key: 'name', label: 'Name' },
|
|
{ key: 'ip', label: 'IP' },
|
|
]" :rows="pending ? [] : data?.data" :ui="{
|
|
td: {
|
|
padding: 'px-2 md:px-4 py-2 md:py-4',
|
|
},
|
|
}">
|
|
<template #status-data="{ row }">
|
|
<span class="flex align-baseline justify-center gap-1">
|
|
<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>
|
|
</span>
|
|
</template>
|
|
<template #name-data="{ row }">
|
|
<div class="text-wrap">
|
|
{{ row.sn }} -
|
|
{{ row.name }}
|
|
</div>
|
|
</template>
|
|
<template #ip-data="{ row }">
|
|
<span v-if="row.ip !== 'Unknown'">{{ row.ip }}</span>
|
|
<span v-else>-</span>
|
|
</template>
|
|
</UTable>
|
|
</template> |