349 lines
12 KiB
Vue
349 lines
12 KiB
Vue
<template>
|
|
<v-container>
|
|
<!-- Tabs para alternar entre Usuários e Câmeras -->
|
|
<v-tabs v-model="tab" grow>
|
|
<v-tab value="usuarios">Usuários</v-tab>
|
|
<v-tab value="cameras">Câmeras</v-tab>
|
|
</v-tabs>
|
|
|
|
<v-window v-model="tab">
|
|
<!-- Aba Usuários -->
|
|
<v-window-item value="usuarios">
|
|
<v-container>
|
|
<v-text-field v-model="searchUser" label="Buscar usuário" prepend-inner-icon="mdi-magnify"></v-text-field>
|
|
<v-btn color="primary" class="mb-3" @click="exportUsersPDF">Exportar PDF</v-btn>
|
|
|
|
<v-data-table :headers="userHeaders" :items="filteredUsers" item-value="id">
|
|
<template v-slot:item.actions="{ item }">
|
|
<v-btn icon="mdi-pencil" size="small" color="info" variant="text" density="compact" @click="openUserEdit(item)">
|
|
</v-btn>
|
|
<v-btn icon="mdi-delete" size="small" color="error" variant="text" density="compact" @click="deleteUser(item)">
|
|
</v-btn>
|
|
</template>
|
|
</v-data-table>
|
|
|
|
<!-- Diálogo de Edição de Usuário -->
|
|
<v-dialog v-model="showUserEdit" max-width="600px">
|
|
<v-card>
|
|
<v-card-title>
|
|
<span class="text-h5">Editar Usuário</span>
|
|
</v-card-title>
|
|
<v-card-text>
|
|
<v-container>
|
|
<v-row>
|
|
<v-col cols="12">
|
|
<v-text-field
|
|
v-model="editedUser.name"
|
|
label="Nome"
|
|
required
|
|
></v-text-field>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<v-text-field
|
|
v-model="editedUser.email"
|
|
label="E-mail"
|
|
required
|
|
></v-text-field>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<v-select
|
|
v-model="editedUser.role"
|
|
:items="['Administrador', 'Usuário']"
|
|
label="Cargo"
|
|
required
|
|
></v-select>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<v-select
|
|
v-model="editedUser.group"
|
|
:items="['Alfa', 'Beta', 'Omega']"
|
|
label="Grupo"
|
|
required
|
|
></v-select>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="blue-darken-1" variant="text" @click="closeUserEdit">
|
|
Cancelar
|
|
</v-btn>
|
|
<v-btn color="blue-darken-1" variant="text" @click="saveUserEdit">
|
|
Salvar
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</v-container>
|
|
</v-window-item>
|
|
|
|
<!-- Aba Câmeras -->
|
|
<v-window-item value="cameras">
|
|
<v-container>
|
|
<v-text-field v-model="searchCamera" label="Buscar câmera" prepend-inner-icon="mdi-magnify"></v-text-field>
|
|
<v-btn color="primary" class="mb-3" @click="exportCamerasPDF">Exportar PDF</v-btn>
|
|
|
|
<v-data-table :headers="cameraHeaders" :items="filteredCameras" item-value="model">
|
|
<template v-slot:item.view="{ item }">
|
|
<v-chip
|
|
:color="getStreamTypeColor(item.view)"
|
|
size="small"
|
|
class="text-caption"
|
|
>
|
|
{{ getStreamType(item.view) }}
|
|
</v-chip>
|
|
<v-btn icon="mdi-video" size="small" color="primary" variant="text" density="compact" @click="openCameraView(item)" class="ml-2">
|
|
</v-btn>
|
|
</template>
|
|
<template v-slot:item.actions="{ item }">
|
|
<v-btn icon="mdi-pencil" size="small" color="info" variant="text" density="compact" @click="editCamera(item)">
|
|
</v-btn>
|
|
<v-btn icon="mdi-delete" size="small" color="error" variant="text" density="compact" @click="deleteCamera(item)">
|
|
</v-btn>
|
|
</template>
|
|
</v-data-table>
|
|
|
|
<!-- Diálogo de Edição de Câmera -->
|
|
<v-dialog v-model="showCameraEdit" max-width="600px">
|
|
<v-card>
|
|
<v-card-title>
|
|
<span class="text-h5">Editar Câmera</span>
|
|
</v-card-title>
|
|
<v-card-text>
|
|
<v-form ref="form" v-model="validForm">
|
|
<v-text-field
|
|
v-model="editedCamera.model"
|
|
label="Modelo"
|
|
required
|
|
:rules="[v => !!v || 'Modelo é obrigatório']"
|
|
class="mb-4"
|
|
></v-text-field>
|
|
|
|
<v-text-field
|
|
v-model="editedCamera.description"
|
|
label="Descrição"
|
|
required
|
|
:rules="[v => !!v || 'Descrição é obrigatória']"
|
|
class="mb-4"
|
|
></v-text-field>
|
|
|
|
<v-text-field
|
|
v-model="editedCamera.view"
|
|
label="URL do Stream"
|
|
required
|
|
:rules="[
|
|
v => !!v || 'URL é obrigatória',
|
|
v => isValidStreamUrl(v) || 'URL deve começar com http:// ou rtsp://'
|
|
]"
|
|
class="mb-4"
|
|
></v-text-field>
|
|
|
|
<v-select
|
|
v-model="editedCamera.status"
|
|
:items="['Ativa', 'Inativa', 'Manutenção']"
|
|
label="Status"
|
|
required
|
|
:rules="[v => !!v || 'Status é obrigatório']"
|
|
class="mb-4"
|
|
></v-select>
|
|
</v-form>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="error" variant="text" @click="closeCameraEdit">
|
|
Cancelar
|
|
</v-btn>
|
|
<v-btn color="success" variant="text" @click="saveCameraEdit">
|
|
Salvar
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
<!-- Diálogo de Visualização de Câmera -->
|
|
<v-dialog v-model="showCameraView" fullscreen hide-overlay>
|
|
<v-card>
|
|
<v-toolbar dark color="primary">
|
|
<v-btn icon dark @click="closeCameraView">
|
|
<v-icon>mdi-close</v-icon>
|
|
</v-btn>
|
|
<v-toolbar-title>Visualização da Câmera</v-toolbar-title>
|
|
</v-toolbar>
|
|
<v-card-text>
|
|
<div class="camera-container">
|
|
<div v-if="isRTSP" class="video-player">
|
|
<v-alert
|
|
type="info"
|
|
title="Stream RTSP"
|
|
text="Conectando ao stream RTSP. Por favor, aguarde..."
|
|
class="mb-4"
|
|
></v-alert>
|
|
<video-js
|
|
ref="videoPlayer"
|
|
class="vjs-custom-skin"
|
|
controls
|
|
preload="auto"
|
|
width="100%"
|
|
height="100%"
|
|
>
|
|
<source :src="rtspToHls(selectedCameraUrl)" type="application/x-mpegURL">
|
|
</video-js>
|
|
</div>
|
|
<div v-else-if="isHTTP" class="video-player">
|
|
<video-js
|
|
ref="videoPlayer"
|
|
class="vjs-custom-skin"
|
|
controls
|
|
preload="auto"
|
|
width="100%"
|
|
height="100%"
|
|
>
|
|
<source :src="selectedCameraUrl" :type="getVideoType(selectedCameraUrl)">
|
|
</video-js>
|
|
</div>
|
|
<div v-else class="error-message">
|
|
<v-alert
|
|
type="error"
|
|
title="Erro"
|
|
text="Formato de URL não suportado. Use URLs que comecem com http:// ou rtsp://"
|
|
></v-alert>
|
|
</div>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-dialog>
|
|
</v-container>
|
|
</v-window-item>
|
|
</v-window>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted } from "vue";
|
|
import { jsPDF } from "jspdf";
|
|
import "jspdf-autotable";
|
|
import VideoPlayer from 'vue-video-player';
|
|
import 'video.js/dist/video-js.css';
|
|
|
|
// Estado dos tabs
|
|
const tab = ref("usuarios");
|
|
|
|
// Estado dos diálogos
|
|
const showUserEdit = ref(false);
|
|
const showCameraView = ref(false);
|
|
const editedUser = ref({});
|
|
const selectedCameraUrl = ref('');
|
|
|
|
// **Usuários**
|
|
const userHeaders = [
|
|
{ title: "ID", key: "id" },
|
|
{ title: "Nome", key: "name" },
|
|
{ title: "E-mail", key: "email" },
|
|
{ title: "Cargo", key: "role" },
|
|
{ title: "Grupo", key: "group" },
|
|
{ title: "Ações", key: "actions", sortable: false }
|
|
];
|
|
|
|
const users = ref([
|
|
{ id: 1, name: "Alice", email: "alice@email.com", role: "Administrador", group: "Alfa" },
|
|
{ id: 2, name: "Bob", email: "bob@email.com", role: "Usuário", group: "Omega" },
|
|
{ id: 3, name: "Lucca", email: "lucca@email.com", role: "Usuário", group: "Omega" },
|
|
{ id: 4, name: "Claudia", email: "claudia@email.com", role: "Usuário", group: "Beta" }
|
|
]);
|
|
|
|
const searchUser = ref("");
|
|
const filteredUsers = computed(() =>
|
|
users.value.filter(user =>
|
|
Object.values(user).some(value =>
|
|
String(value).toLowerCase().includes(searchUser.value.toLowerCase())
|
|
)
|
|
)
|
|
);
|
|
|
|
// **Câmeras**
|
|
const cameraHeaders = [
|
|
{ title: "Modelo", key: "model" },
|
|
{ title: "Descrição", key: "description" },
|
|
{ title: "Visualização", key: "view" },
|
|
{ title: "Status", key: "status" },
|
|
{ title: "Ações", key: "actions", sortable: false }
|
|
];
|
|
|
|
const cameras = ref([
|
|
{ model: "AXIS Q6128", description: "Câmera HD", view: "https://stream-akamai.castr.com/5b9352dbda7b8c769937e459/live_2361c920455111ea85db6911fe397b9e/index.fmp4.m3u8", status: "Ativa" },
|
|
{ model: "Hikvision DS-2CD", description: "Câmera IP", view: "rtsp://admin:706726do@farmacia1111.ddns-intelbras.com.br:58589/cam/realmonitor?channel=1&subtype=0", status: "Ativa" },
|
|
{ model: "AK-31548", description: "Câmera IP", view: "rtsp://admin:706726do@farmacia1111.ddns-intelbras.com.br:58589/cam/realmonitor?channel=3&subtype=0", status: "Ativa" }
|
|
]);
|
|
|
|
// Funções auxiliares para identificação do tipo de stream
|
|
const getStreamType = (url) => {
|
|
if (url.toLowerCase().startsWith('rtsp://')) return 'RTSP';
|
|
if (url.toLowerCase().startsWith('http')) return 'HTTP';
|
|
return 'Desconhecido';
|
|
};
|
|
|
|
const getStreamTypeColor = (url) => {
|
|
if (url.toLowerCase().startsWith('rtsp://')) return 'purple';
|
|
if (url.toLowerCase().startsWith('http')) return 'blue';
|
|
return 'gray';
|
|
};
|
|
|
|
const searchCamera = ref("");
|
|
const filteredCameras = computed(() =>
|
|
cameras.value.filter(camera =>
|
|
Object.values(camera).some(value =>
|
|
String(value).toLowerCase().includes(searchCamera.value.toLowerCase())
|
|
)
|
|
)
|
|
);
|
|
|
|
// Computed properties para o player de vídeo
|
|
const isRTSP = computed(() => selectedCameraUrl.value.toLowerCase().startsWith('rtsp://'));
|
|
const isHTTP = computed(() => selectedCameraUrl.value.toLowerCase().startsWith('http'));
|
|
|
|
const playerOptions = computed(() => ({
|
|
autoplay: true,
|
|
controls: true,
|
|
sources: [{
|
|
src: selectedCameraUrl.value,
|
|
type: 'application/x-mpegURL'
|
|
}]
|
|
}));
|
|
|
|
// [Resto do código permanece o mesmo...]
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.camera-container {
|
|
width: 100%;
|
|
height: calc(100vh - 64px);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #000;
|
|
}
|
|
|
|
.video-player {
|
|
width: 100%;
|
|
height: 100%;
|
|
max-height: calc(100vh - 64px);
|
|
}
|
|
|
|
.error-message {
|
|
padding: 20px;
|
|
text-align: center;
|
|
color: red;
|
|
}
|
|
|
|
.video-js {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.vjs-custom-skin {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style> |