Application Eagle Eye pour cimenterie

4.0

4/4/2025

Technologie

surveillance

cimenterie

application

النص التوجيهي

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

النتيجة المولدة

```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

Application Eagle Eye pour cimenterie

النص التوجيهي

النتيجة المولدة

المزيد من التوصيات

Créer une app web détaillée

创建Web应用指南

应用展示计算机史

Histoire Informatique App

Slatracker: KPIs Facebook Messenger