Fiche Descriptive Complète
🔷 INFORMATIONS GÉNÉRALES
Champ Détail
Nom du template ecometrics_pro_station_de_mesure.html
Version 1.0.0
Date de création 18/03/2026
Auteur / Designer Refoia Jeremy Tech
Type de page Dashboard de Monitoring Environnemental
Objectif principal Visualisation en temps réel des données de qualité de l’air et gestion des relevés.
🎯 DESCRIPTION FONCTIONNELLE
📌 Que fait ce template ?
Ce template propose une interface de tableau de bord analytique dédiée à la surveillance environnementale. Il permet de :
Visualiser les indicateurs clés (PM2.5, NO2, CO2, Température) via des cartes de score (Scorecards).
Suivre l’état des capteurs (Normal, Alerte, Stable) grâce à un code couleur sémantique.
Consulter un historique détaillé des prélèvements sous forme de tableaux structurés.
Interagir via un bouton d’action principal pour créer de nouveaux relevés et une modale de confirmation de synchronisation.
📌 Public cible (Persona)
👤 Techniciens de maintenance : Surveillance de l’état des capteurs sur le terrain.
👤 Analystes environnementaux : Consultation des données historiques pour rapports.
👤 Responsables HSE : Suivi des seuils d’alerte en zone industrielle.
⚙️ SPÉCIFICATIONS TECHNIQUES
🌐 Environnement & Compatibilité
Élément Valeur
Standard HTML HTML5 (Sémantique)
Framework CSS Tailwind CSS (CDN)
Framework JS Vanilla JS (Interactions modale/boutons)
Browsers ciblés Chrome ✅ Firefox ✅ Safari ✅ Edge ✅
Responsive ✅ Oui (Grilles adaptatives md:grid-cols-2, lg:grid-cols-4)
📦 Dépendances / Assets
HTML
📥 ENTRÉES — CONTENU DYNAMIQUE
# Nom de la variable Type Obligatoire Description
1 station_id str ✅ Oui ID unique de la station (ex: #FR-IDF-94)
2 val_pm25 float ✅ Oui Valeur numérique des particules fines
3 val_no2 float ✅ Oui Valeur numérique du Dioxyde d’Azote
4 history_list array ✅ Oui Liste des derniers prélèvements (Horodatage, Polluant, Valeur)
📤 INTERACTIONS & SORTIES
🖱️ Événements Utilisateur
✅ Clic sur [Nouveau Relevé] → Déclenche l’ouverture de la modale de succès (simulation).
✅ Clic sur [Refresh Icon] → Animation de rotation (360°) de l’icône de synchronisation.
✅ Hover sur [Stat Cards] → Transition douce de l’ombre portée (hover:shadow-md).
✅ Clic sur [Fermer] → Fermeture de la modale avec transition d’opacité.
📂 Formulaires / Envois
Type Destination Méthode Description
Action Relevé /api/measure POST Enregistrement d’un nouveau point de mesure.
Refresh /api/sync GET Mise à jour des données du tableau de bord.
🧱 STRUCTURE DU FICHIER — DOM
ecometrics_pro_station_de_mesure.html
📌
: Configuration Tailwind, polices Inter et styles personnalisés (gradient).📌
🏗️
