Application Eagle Eye pour cimenterie

4.0

4/4/2025

Technologie

surveillance

cimenterie

application

Prompt

créé une application complète pour la surveillance des ateliers d'une cimenterie. Voici les principales fonctionnalités :

Interface utilisateur intuitive avec :

En-tête avec logo
Sélecteur de zones de l'usine
Liste des tâches à vérifier
Zones principales couvertes :

Broyeur Cru
Four Rotatif
Refroidisseur
Broyeur Ciment
Fonctionnalités pour chaque tâche :

Marquage comme complétée/non-complétée
Ajout de commentaires
Horodatage automatique
Description détaillée
Organisation du code :

Types TypeScript pour la sécurité du code
Composants React réutilisables
Données de démonstration incluses
Style moderne avec Tailwind CSS
Nouvelle organisation des zones par secteur :

Secteur Cru : Broyeur Cru 1 (BC1) et Broyeur Cru 2 (BC2)
Secteur Cuisson : Four 1 et Four 2
Secteur Ciment : BK1, BK2 et BK3
Zones regroupées par secteur
Sélecteur plus clair avec titres de sections
Meilleure organisation visuelle
Mise à jour des types pour inclure le secteur dans la structure des données
 nommer l application :eagle eye
rendre en francais
 je veux faire la page principale  avec les 3 secteur : cru, cuisson, ciment . puis en  appuyant sur chaque  secteur une page s ouvre avec les sous secteur
elminer le mot secteur
Une page principale avec 3 cartes représentant les secteurs (Cru, Cuisson, Ciment)
Chaque secteur a son propre icône et une description
En cliquant sur un secteur, on accède à une vue détaillée avec :
La liste des zones du secteur sélectionné
La possibilité de sélectionner une zone pour voir ses tâches
Un bouton retour dans le header pour revenir à la sélection des secteurs
chaque sous secteur dois avoir des taches
faire revenir le nom de l app

Résultat Généré

```javascript
import React, { useState } from 'react';
import './App.css';

const App = () => {
  const [selectedSector, setSelectedSector] = useState(null);
  const [selectedZone, setSelectedZone] = useState(null);

  const sectors = [
    {
      name: 'Cru',
      icon: 'https://placehold.co/100X100',
      description: 'Secteur dédié au broyage des matières premières.',
      zones: ['Broyeur Cru 1 (BC1)', 'Broyeur Cru 2 (BC2)']
    },
    {
      name: 'Cuisson',
      icon: 'https://placehold.co/100X100',
      description: 'Secteur dédié à la cuisson des matières premières.',
      zones: ['Four 1', 'Four 2']
    },
    {
      name: 'Ciment',
      icon: 'https://placehold.co/100X100',
      description: 'Secteur dédié au broyage du ciment.',
      zones: ['BK1', 'BK2', 'BK3']
    }
  ];

  const tasks = {
    'Broyeur Cru 1 (BC1)': ['Vérifier les vibrations', 'Contrôler la température'],
    'Broyeur Cru 2 (BC2)': ['Vérifier les vibrations', 'Contrôler la température'],
    'Four 1': ['Vérifier la flamme', 'Contrôler la pression'],
    'Four 2': ['Vérifier la flamme', 'Contrôler la pression'],
    'BK1': ['Vérifier la finesse du produit', 'Contrôler le débit'],
    'BK2': ['Vérifier la finesse du produit', 'Contrôler le débit'],
    'BK3': ['Vérifier la finesse du produit', 'Contrôler le débit']
  };

  const handleSectorClick = (sector) => {
    setSelectedSector(sector);
    setSelectedZone(null);
  };

  const handleZoneClick = (zone) => {
    setSelectedZone(zone);
  };

  const handleBackClick = () => {
    setSelectedSector(null);
    setSelectedZone(null);
  };

  return (
    <div className='App'>
      <header className='bg-blue-600 text-white p-4'>
        <h1 className='text-2xl font-bold'>Eagle Eye</h1>
      </header>
      {!selectedSector && (
        <div className='p-4 grid grid-cols-1 md:grid-cols-3 gap-4'>
          {sectors.map((sector, index) => (
            <div key={index} className='bg-white shadow-lg rounded-lg p-6 cursor-pointer hover:shadow-xl transition-shadow' onClick={() => handleSectorClick(sector)}>
              <img src={sector.icon} alt={sector.name} className='w-20 h-20 mx-auto' />
              <h2 className='text-xl font-semibold mt-4 text-center'>{sector.name}</h2>
              <p className='text-gray-600 mt-2 text-center'>{sector.description}</p>
            </div>
          ))}
        </div>
      )}
      {selectedSector && !selectedZone && (
        <div className='p-4'>
          <button onClick={handleBackClick} className='mb-4 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors'>Retour</button>
          <h2 className='text-2xl font-bold mb-4'>{selectedSector.name}</h2>
          <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'>
            {selectedSector.zones.map((zone, index) => (
              <div key={index} className='bg-white shadow-lg rounded-lg p-6 cursor-pointer hover:shadow-xl transition-shadow' onClick={() => handleZoneClick(zone)}>
                <h3 className='text-xl font-semibold mb-2'>{zone}</h3>
                <p className='text-gray-600'>Cliquez pour voir les tâches</p>
              </div>
            ))}
          </div>
        </div>
      pronto }
      {selectedZone && (
        <div className='p-4'>
          <button onClick={handleBackClick} className='mb-4 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors'>Retour</button>
          <h2 className='text-2xl font-bold mb-4'>{selectedZone}</h2>
          <div className='space-y-4'>
            {tasks[selectedZone].map((task, index) => (
              <div key={index} className='bg-white shadow-lg rounded-lg p-6'>
                <div className='flex items-center justify-between'>
                  <input type='checkbox' className='w-6 h-6' />
                  <span className='text-lg font-semibold'>{task}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default App;
```

Open Sandbox

Plus de Recommandations

Voir Tout

Application Eagle Eye pour cimenterie

Prompt

Résultat Généré

Plus de Recommandations

Système de paiement VB

Gestion des paiements

Gestion des paiements quotidiens

Gestion des paiements journaliers

GitHub 是什么及其用途

Créer une app GPS avec Google Maps en HTML