127 lines
3.9 KiB
Vue
127 lines
3.9 KiB
Vue
<template>
|
|
<v-card class="card" max-width="2000" flat>
|
|
<!-- Hero Section -->
|
|
<v-row align="center" no-gutters>
|
|
<v-col>
|
|
<v-list-item title="Centro de Controle TARS" subtitle="Plataforma avançada de monitoramento e análise de segurança"></v-list-item>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- Quick Stats -->
|
|
<v-row>
|
|
<v-col v-for="stat in quickStats" :key="stat.title" cols="12" sm="6" md="3">
|
|
<v-card :color="stat.color" variant="tonal" class="rounded-lg h-100 stats-card">
|
|
<v-card-text>
|
|
<div class="d-flex flex-column align-center text-center pa-4">
|
|
<v-icon :icon="stat.icon" size="48" class="mb-4" />
|
|
<div class="text-h3 font-weight-bold mb-2">{{ stat.value }}</div>
|
|
<div class="text-subtitle-1">{{ stat.title }}</div>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- Features -->
|
|
<v-row>
|
|
<v-col v-for="feature in features" :key="feature.title" cols="12" md="4">
|
|
<v-card class="rounded-lg feature-card">
|
|
<v-card-text>
|
|
<div class="d-flex align-center mb-4">
|
|
<v-icon :icon="feature.icon" size="36" :color="feature.color" class="mr-4" />
|
|
<h2 class="text-h5 font-weight-bold">{{ feature.title }}</h2>
|
|
</div>
|
|
<p class="text-body-1 mb-4">{{ feature.description }}</p>
|
|
<v-list>
|
|
<v-list-item v-for="item in feature.items" :key="item" class="px-0">
|
|
<template v-slot:prepend>
|
|
<v-icon icon="mdi-check-circle" color="success" size="small" />
|
|
</template>
|
|
{{ item }}
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'DashboardCard',
|
|
data() {
|
|
return {
|
|
quickStats: [
|
|
{ title: 'Câmeras Ativas', value: 0, icon: 'mdi-cctv', color: 'success' },
|
|
{ title: 'Modelos', value: 0, icon: 'mdi-brain', color: 'primary' },
|
|
{ title: 'Alertas 24h', value: 0, icon: 'mdi-bell', color: 'warning' },
|
|
{ title: 'Usuários', value: 0, icon: 'mdi-account-group', color: 'info' }
|
|
],
|
|
features: [
|
|
{
|
|
title: 'Monitoramento Inteligente',
|
|
description: 'Sistema avançado de vigilância com análise em tempo real',
|
|
icon: 'mdi-security',
|
|
color: 'primary',
|
|
items: [
|
|
'Detecção de EPI em tempo real',
|
|
'Análise de fluxo de pessoas',
|
|
'Detecção de invasão de área',
|
|
'Reconhecimento de comportamentos'
|
|
]
|
|
},
|
|
{
|
|
title: 'Analytics & Relatórios',
|
|
description: 'Análise detalhada e geração de insights automáticos',
|
|
icon: 'mdi-chart-box',
|
|
color: 'success',
|
|
items: [
|
|
'Dashboards personalizados',
|
|
'Relatórios automatizados',
|
|
'Exportação de dados',
|
|
'Métricas de performance'
|
|
]
|
|
},
|
|
{
|
|
title: 'Gestão & Configuração',
|
|
description: 'Controle total sobre o sistema e suas funcionalidades',
|
|
icon: 'mdi-cog',
|
|
color: 'info',
|
|
items: [
|
|
'Gerenciamento de usuários',
|
|
'Configuração de câmeras',
|
|
'Ajuste de modelos AI',
|
|
'Políticas de segurança'
|
|
]
|
|
}
|
|
]
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.card {
|
|
color: black;
|
|
border-radius: 35px;
|
|
background: linear-gradient(145deg, #eeeded, #ffffff);
|
|
box-shadow: 20px 20px 60px #d9d9d9, -20px -20px 60px #ffffff;
|
|
padding: 20px;
|
|
}
|
|
|
|
.stats-card {
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.stats-card:hover {
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
.feature-card {
|
|
background: white;
|
|
border-radius: 20px;
|
|
box-shadow: 10px 10px 30px #d9d9d9, -10px -10px 30px #ffffff;
|
|
padding: 15px;
|
|
}
|
|
</style> |