49 lines
1.2 KiB
Vue
49 lines
1.2 KiB
Vue
<template>
|
|
<div class="h-screen flex flex-col bg-monokai-bg">
|
|
<!-- Header -->
|
|
<AppHeader />
|
|
|
|
<!-- Layout 3 colonnes selon consigne-design_webui.md -->
|
|
<div class="flex-1 flex overflow-hidden">
|
|
<!-- Colonne gauche: Détails IP -->
|
|
<div class="w-80 flex-shrink-0">
|
|
<IPDetails />
|
|
</div>
|
|
|
|
<!-- Colonne centrale: Grille d'IP organisée en arbre -->
|
|
<div class="flex-1">
|
|
<IPGridTree />
|
|
</div>
|
|
|
|
<!-- Colonne droite: Nouvelles détections -->
|
|
<div class="w-80 flex-shrink-0">
|
|
<NewDetections />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, onUnmounted } from 'vue'
|
|
import { useIPStore } from '@/stores/ipStore'
|
|
import AppHeader from '@/components/AppHeader.vue'
|
|
import IPDetails from '@/components/IPDetails.vue'
|
|
import IPGridTree from '@/components/IPGridTree.vue'
|
|
import NewDetections from '@/components/NewDetections.vue'
|
|
|
|
const ipStore = useIPStore()
|
|
|
|
onMounted(async () => {
|
|
// Charger les données initiales
|
|
await ipStore.fetchIPs()
|
|
|
|
// Connecter WebSocket
|
|
ipStore.connectWebSocket()
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
// Déconnecter WebSocket
|
|
ipStore.disconnectWebSocket()
|
|
})
|
|
</script>
|