monolito_djanco_poonto/src/views/TestingView.vue
Thaís Ferreira cb4a5ab5ab versão 14h21
2025-02-06 14:21:55 -03:00

116 lines
2.8 KiB
Vue

<template>
<div class="testing-view">
<v-container>
<v-row class="mb-4">
<!-- Filtro de Data/Hora -->
<v-col cols="12" md="4">
<v-text-field
v-model="filters.date"
label="Data/Hora"
type="datetime-local"
></v-text-field>
</v-col>
<!-- Filtro de Câmera ID -->
<v-col cols="12" md="4">
<v-text-field
v-model="filters.cameraId"
label="Câmera ID"
clearable
></v-text-field>
</v-col>
<!-- Campo de Pesquisa -->
<v-col cols="12" md="4">
<v-text-field
v-model="filters.search"
label="Pesquisar"
append-icon="mdi-magnify"
clearable
></v-text-field>
</v-col>
</v-row>
<!-- Botões de Treino e Integração -->
<v-row class="mb-4">
<v-col class="d-flex justify-end">
<v-btn color="primary" class="mr-2" @click="trainModels">
Treinar Modelos
</v-btn>
<v-btn color="success" @click="integrateModels">
Integrar Modelos
</v-btn>
</v-col>
</v-row>
<!-- Lista de Modelos de Teste -->
<v-row>
<v-col>
<v-data-table
:headers="headers"
:items="models"
item-value="id"
class="elevation-1"
>
<template #top>
<v-toolbar flat>
<v-toolbar-title>Modelos de Teste</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
</template>
<template #item_actions="{ item }">
<v-btn icon color="primary" @click="viewDetails(item)">
<v-icon>mdi-eye</v-icon>
</v-btn>
</template>
</v-data-table>
</v-col>
</v-row>
</v-container>
</div>
</template>
<script>
export default {
name: "TestingView",
data() {
return {
filters: {
date: "",
cameraId: "",
search: "",
},
headers: [
{ text: "ID", value: "id" },
{ text: "Nome", value: "name" },
{ text: "Status", value: "status" },
{ text: "Ações", value: "actions", sortable: false },
],
models: [
{ id: 1, name: "Modelo A", status: "Pronto" },
{ id: 2, name: "Modelo B", status: "Em Execução" },
{ id: 3, name: "Modelo C", status: "Concluído" },
],
};
},
methods: {
trainModels() {
alert("Iniciando treinamento dos modelos...");
},
integrateModels() {
alert("Integrando modelos...");
},
viewDetails(item) {
alert(`Visualizando detalhes do modelo: ${item.name}`);
},
},
};
</script>
<style scoped>
.testing-view {
background: #f9f9f9;
min-height: 100vh;
}
</style>