应用监控水泥厂车间

import React, { useState } from 'react';

const Zones = {
  Cru: ['Broyeur Cru 1 (BC1)', 'Broyeur Cru 2 (BC2)'],
  Cuisson: ['Four 1', 'Four 2'],
  Ciment: ['BK1', 'BK2', 'BK3']
};

const App = () => {
  const [selectedZone, setSelectedZone] = useState('Cru');
  const [tasks, setTasks] = useState([
    { id: 1, name: 'Check temperature', completed: false },
    { id: 2, name: 'Inspect pressure', completed: false }
  ]);

  const toggleTaskCompletion = taskId => {
    setTasks(tasks.map(task => 
      task.id === taskId ? { ...task, completed: !task.completed } : task
    ));
  };

  return (
    <div className="min-h-screen bg-gray-100">
      <header className="bg-blue-600 text-white p-4">
        <h1 className="text-2xl">Cement Plant Monitoring</h1>
      </header>
      <div className="p-4">
        <select className="mb-4 p-2" onChange={e => setSelectedZone(e.target.value)} value={selectedZone}>
          {Object.keys(Zones).map(zone => (
            <option key={zone} value={zone}>{zone}</option>
          ))}
        </select>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {tasks.map(task => (
            <div key={task.id} className="bg-white p-4 rounded shadow">
              <h2 className="text-xl">{task.name}</h2>
              <button onClick={() => toggleTaskCompletion(task.id)} className={`mt-2 px-4 py-2 rounded ${task.completed ? 'bg-green-500' : 'bg-red-500'} text-white`}>
                {task.completed ? 'Completed' : 'Mark Complete'}
              </button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default App;