monolito_djanco_poonto/src/views/TrainingView.vue

<template>
  <app-layout>
    <v-container>
      <v-card>
        <v-tabs v-model="activeTab">
          <v-tab>Cadastro</v-tab>
          <v-tab>Pesquisar</v-tab>
          <v-tab>Treino</v-tab>
          <v-tab>Lista de Nomes</v-tab>
        </v-tabs>

        <v-card-text>
          <!-- Cadastro Tab -->
          <v-form v-if="activeTab === 0" @submit.prevent="registerCameraModel">
            <v-row>
              <v-col cols="12" md="4">
                <v-text-field v-model="cameraModel.name" label="Nome do Modelo" required></v-text-field>
              </v-col>
              <v-col cols="12" md="4">
                <v-text-field v-model="cameraModel.responsible" label="Responsável pelo Cadastro" required></v-text-field>
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field v-model="cameraModel.description" label="Descrição" required></v-text-field>
              </v-col>
              <v-col cols="12" md="3">
                <v-text-field type="date" v-model="cameraModel.creationDate" label="Data de Criação" required></v-text-field>
              </v-col>
              <v-col cols="12" md="3">
                <v-text-field type="time" v-model="cameraModel.creationTime" label="Hora de Criação" required></v-text-field>
              </v-col>
              <v-col cols="12">
                <v-btn type="submit" color="primary">Cadastrar Modelo</v-btn>
              </v-col>
            </v-row>
          </v-form>

          <!-- Pesquisar Tab -->
          <v-form v-if="activeTab === 1" @submit.prevent="searchCameraModels">
            <v-row>
              <v-col cols="12" md="6">
                <v-text-field v-model="searchCriteria.name" label="Nome do Modelo"></v-text-field>
              </v-col>
              <v-col cols="12">
                <v-btn type="submit" color="primary">Pesquisar</v-btn>
              </v-col>
            </v-row>
          </v-form>

          <!-- Treino Tab -->
          <v-row v-if="activeTab === 2">
            <v-col>
              <v-card outlined>
                <v-card-title>Treinamento de Modelo de Câmera</v-card-title>
                <v-card-text>
                  <v-row>
                    <v-col cols="12" md="8">
                      <v-select
                        :items="untrainedCameras"
                        v-model="selectedCameraForTraining"
                        label="Selecionar Câmera"
                        item-text="name"
                        return-object
                      ></v-select>
                    </v-col>
                    <v-col cols="12" md="4" class="d-flex">
                      <v-btn 
                        color="primary" 
                        class="mr-2"
                        @click="startTraining"
                        :disabled="!selectedCameraForTraining"
                      >
                        Iniciar Treinamento
                      </v-btn>
                      <v-btn 
                        color="success" 
                        @click="integrateModel"
                        :disabled="!trainingComplete"
                      >
                        Integrar
                      </v-btn>
                    </v-col>
                  </v-row>
                </v-card-text>
              </v-card>
            </v-col>
          </v-row>

          <!-- Lista de Nomes Tab -->
          <v-row v-if="activeTab === 3" class="mt-4">
            <v-col md="6" sm="12">
              <v-card outlined>
                <v-card-title class="subtitle-1">Rostos Identificados</v-card-title>
                <v-card-text>
                  <v-list>
                    <v-list-item v-for="(face, index) in identifiedFaces" :key="index">
                      <v-list-item-avatar>
                        <v-icon large>mdi-account-circle</v-icon>
                      </v-list-item-avatar>
                      <v-list-item-content>
                        {{ face.name }} 
                        <v-chip small :color="face.isActive ? 'success' : 'error'">
                          {{ face.isActive ? 'Ativo' : 'Inativo' }}
                        </v-chip>
                      </v-list-item-content>
                    </v-list-item>
                  </v-list>
                </v-card-text>
              </v-card>
            </v-col>
          </v-row>
        </v-card-text>
      </v-card>
    </v-container>
  </app-layout>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0,
      cameraModel: {
        name: '',
        id: '',
        description: '',
        registrationDate: null
      },
      searchCriteria: {
        id: '',
        name: ''
      },
      selectedCameraForTraining: null,
      isTraining: false,
      trainingComplete: false,
      trainingProgress: 0,
      trainingMessage: '',
      untrainedCameras: [
        { id: 'CAM003', name: 'Câmera Estacionamento', brand: 'Dahua' }
      ],
      cameras: [
        { id: 'CAM001', name: 'Câmera Principal', description: 'Câmera frontal do prédio', isActive: true, registrationDate: '2025-02-03T08:30', isTrained: true },
        { id: 'CAM002', name: 'Câmera Corredor', description: 'Câmera do corredor principal', isActive: false, registrationDate: '2025-01-28T14:00', isTrained: false }
      ],
      searchResults: [],
      identifiedFaces: [
        { 
          id: 'USER001', 
          name: 'João Silva', 
          isActive: true 
        },
        { 
          id: 'USER002', 
          name: 'Maria Souza', 
          isActive: true 
        }
      ],
      unidentifiedFaces: [
        { selectedUser: null },
        { selectedUser: null }
      ],
      registeredUsers: ['João Silva', 'Maria Souza', 'Pedro Santos', 'Ana Oliveira']
    };
  },
  methods: {
    registerCameraModel() {
      console.log('Registrando modelo de câmera:', this.cameraModel);
      this.cameraModel = { 
        name: '', 
        id: '', 
        description: '', 
        registrationDate: null 
      };
    },
    searchCameraModels() {
      console.log('Critérios de pesquisa:', this.searchCriteria);
      this.searchResults = this.cameras.filter(camera => 
        (camera.id.includes(this.searchCriteria.id) || camera.name.includes(this.searchCriteria.name)) &&
        (!this.searchCriteria.status || (this.searchCriteria.status === 'Ativo' && camera.isActive) || (this.searchCriteria.status === 'Inativo' && !camera.isActive))
      );
    },
    startTraining() {
      if (this.selectedCameraForTraining) {
        this.isTraining = true;
        this.trainingProgress = 0;
        this.trainingMessage = 'Iniciando treinamento...';
        
        const simulateTraining = setInterval(() => {
          this.trainingProgress += 20;
          
          switch(this.trainingProgress) {
            case 20:
              this.trainingMessage = 'Carregando modelos de reconhecimento...';
              break;
            case 40:
              this.trainingMessage = 'Processando imagens de treinamento...';
              break;
            case 60:
              this.trainingMessage = 'Ajustando parâmetros do modelo...';
              break;
            case 80:
              this.trainingMessage = 'Finalizando treinamento...';
              break;
            case 100:
              this.trainingMessage = 'Treinamento concluído!';
              this.trainingComplete = true;
              clearInterval(simulateTraining);
              break;
          }
        }, 1000);
      }
    },
    integrateModel() {
      console.log('Integrando modelo:', this.selectedCameraForTraining);
      this.trainingComplete = false;
      this.isTraining = false;
    },
    confirmAssignments() {
      console.log('Atribuições confirmadas:', this.unidentifiedFaces);
    },
    editFaceName(face) {
      console.log('Editando rosto:', face);
    }
  }
}
</script>