| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Neurobox AI - Контроль Качества</title> |
| <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> |
| <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> |
| <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| body { |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="root"></div> |
|
|
| <script type="text/babel"> |
| const { useState, useEffect, useRef } = React; |
| |
| |
| const Camera = ({ size = 24, className = "" }) => ( |
| <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}> |
| <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/> |
| <circle cx="12" cy="13" r="4"/> |
| </svg> |
| ); |
| |
| const AlertTriangle = ({ size = 24, className = "" }) => ( |
| <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}> |
| <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/> |
| <line x1="12" y1="9" x2="12" y2="13"/> |
| <line x1="12" y1="17" x2="12.01" y2="17"/> |
| </svg> |
| ); |
| |
| const CheckCircle = ({ size = 24, className = "" }) => ( |
| <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}> |
| <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/> |
| <polyline points="22 4 12 14.01 9 11.01"/> |
| </svg> |
| ); |
| |
| const Activity = ({ size = 24, className = "" }) => ( |
| <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}> |
| <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/> |
| </svg> |
| ); |
| |
| const Clock = ({ size = 24, className = "" }) => ( |
| <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}> |
| <circle cx="12" cy="12" r="10"/> |
| <polyline points="12 6 12 12 16 14"/> |
| </svg> |
| ); |
| |
| const TrendingUp = ({ size = 24, className = "" }) => ( |
| <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}> |
| <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/> |
| <polyline points="17 6 23 6 23 12"/> |
| </svg> |
| ); |
| |
| const Play = ({ size = 24, className = "" }) => ( |
| <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}> |
| <polygon points="5 3 19 12 5 21 5 3"/> |
| </svg> |
| ); |
| |
| const Pause = ({ size = 24, className = "" }) => ( |
| <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}> |
| <rect x="6" y="4" width="4" height="16"/> |
| <rect x="14" y="4" width="4" height="16"/> |
| </svg> |
| ); |
| |
| const QualityControlDashboard = () => { |
| const [currentTime, setCurrentTime] = useState(new Date()); |
| const [inspectedCount, setInspectedCount] = useState(4512); |
| const [defectsFound, setDefectsFound] = useState(28); |
| const [isRunning, setIsRunning] = useState(true); |
| const [events, setEvents] = useState([ |
| { id: 77812, time: '10:32:04', type: 'defect', defectType: 'Царапина', severity: 'high' }, |
| { id: 77811, time: '10:31:55', type: 'ok', defectType: null, severity: null }, |
| { id: 77810, time: '10:31:48', type: 'defect', defectType: 'Непрокрас', severity: 'medium' }, |
| { id: 77809, time: '10:31:41', type: 'ok', defectType: null, severity: null }, |
| { id: 77808, time: '10:31:34', type: 'defect', defectType: 'Скол', severity: 'high' }, |
| ]); |
| |
| const [currentItem, setCurrentItem] = useState({ id: 77813, status: 'checking' }); |
| const [defectStats, setDefectStats] = useState({ |
| 'Царапина': 15, |
| 'Скол': 9, |
| 'Непрокрас': 4 |
| }); |
| |
| const canvasRef = useRef(null); |
| |
| useEffect(() => { |
| const timer = setInterval(() => { |
| setCurrentTime(new Date()); |
| }, 1000); |
| return () => clearInterval(timer); |
| }, []); |
| |
| useEffect(() => { |
| if (!isRunning) return; |
| |
| const interval = setInterval(() => { |
| const newId = currentItem.id + 1; |
| const isDefective = Math.random() < 0.0062; |
| |
| setInspectedCount(prev => prev + 1); |
| |
| if (isDefective) { |
| setDefectsFound(prev => prev + 1); |
| const defectTypes = ['Царапина', 'Скол', 'Непрокрас']; |
| const severities = ['high', 'medium', 'low']; |
| const defectType = defectTypes[Math.floor(Math.random() * defectTypes.length)]; |
| const severity = severities[Math.floor(Math.random() * severities.length)]; |
| |
| setDefectStats(prev => ({ |
| ...prev, |
| [defectType]: (prev[defectType] || 0) + 1 |
| })); |
| |
| const newEvent = { |
| id: newId, |
| time: new Date().toLocaleTimeString('ru-RU'), |
| type: 'defect', |
| defectType, |
| severity |
| }; |
| |
| setEvents(prev => [newEvent, ...prev.slice(0, 9)]); |
| setCurrentItem({ id: newId, status: 'defect', defectType }); |
| } else { |
| const newEvent = { |
| id: newId, |
| time: new Date().toLocaleTimeString('ru-RU'), |
| type: 'ok', |
| defectType: null, |
| severity: null |
| }; |
| |
| setEvents(prev => [newEvent, ...prev.slice(0, 9)]); |
| setCurrentItem({ id: newId, status: 'ok' }); |
| } |
| }, 3000); |
| |
| return () => clearInterval(interval); |
| }, [isRunning, currentItem.id]); |
| |
| useEffect(() => { |
| const canvas = canvasRef.current; |
| if (!canvas) return; |
| |
| const ctx = canvas.getContext('2d'); |
| let animationFrame; |
| let offset = 0; |
| |
| const animate = () => { |
| const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height); |
| gradient.addColorStop(0, '#ffffff'); |
| gradient.addColorStop(1, '#f0f9ff'); |
| ctx.fillStyle = gradient; |
| ctx.fillRect(0, 0, canvas.width, canvas.height); |
| |
| ctx.strokeStyle = 'rgba(59, 130, 246, 0.1)'; |
| ctx.lineWidth = 1; |
| for (let i = 0; i < 5; i++) { |
| ctx.beginPath(); |
| ctx.moveTo(0, 50 + i * 60); |
| ctx.lineTo(canvas.width, 50 + i * 60); |
| ctx.stroke(); |
| } |
| |
| const lightGradient = ctx.createRadialGradient(canvas.width / 2, 100, 50, canvas.width / 2, 100, 300); |
| lightGradient.addColorStop(0, 'rgba(59, 130, 246, 0.15)'); |
| lightGradient.addColorStop(1, 'rgba(59, 130, 246, 0)'); |
| ctx.fillStyle = lightGradient; |
| ctx.fillRect(0, 0, canvas.width, 300); |
| |
| const beltGradient = ctx.createLinearGradient(0, canvas.height - 80, 0, canvas.height); |
| beltGradient.addColorStop(0, '#64748b'); |
| beltGradient.addColorStop(0.5, '#475569'); |
| beltGradient.addColorStop(1, '#64748b'); |
| ctx.fillStyle = beltGradient; |
| ctx.fillRect(0, canvas.height - 80, canvas.width, 80); |
| |
| ctx.fillStyle = '#94a3b8'; |
| ctx.fillRect(0, canvas.height - 82, canvas.width, 2); |
| ctx.fillRect(0, canvas.height, canvas.width, 2); |
| |
| ctx.strokeStyle = '#cbd5e1'; |
| ctx.lineWidth = 2; |
| for (let i = -20; i < canvas.width; i += 40) { |
| ctx.beginPath(); |
| ctx.moveTo(i + offset, canvas.height - 80); |
| ctx.lineTo(i + offset, canvas.height); |
| ctx.stroke(); |
| } |
| |
| for (let x of [50, canvas.width - 50]) { |
| ctx.fillStyle = '#94a3b8'; |
| ctx.beginPath(); |
| ctx.arc(x, canvas.height - 40, 15, 0, Math.PI * 2); |
| ctx.fill(); |
| ctx.strokeStyle = '#475569'; |
| ctx.lineWidth = 2; |
| ctx.stroke(); |
| } |
| |
| const itemX = canvas.width / 2 - 50; |
| const itemY = canvas.height - 180; |
| |
| ctx.fillStyle = 'rgba(0, 0, 0, 0.2)'; |
| ctx.beginPath(); |
| ctx.ellipse(itemX + 50, itemY + 110, 55, 15, 0, 0, Math.PI * 2); |
| ctx.fill(); |
| |
| const productGradient = ctx.createLinearGradient(itemX, itemY, itemX, itemY + 100); |
| |
| if (currentItem.status === 'defect') { |
| productGradient.addColorStop(0, '#fca5a5'); |
| productGradient.addColorStop(0.5, '#f87171'); |
| productGradient.addColorStop(1, '#ef4444'); |
| } else if (currentItem.status === 'ok') { |
| productGradient.addColorStop(0, '#6ee7b7'); |
| productGradient.addColorStop(0.5, '#34d399'); |
| productGradient.addColorStop(1, '#10b981'); |
| } else { |
| productGradient.addColorStop(0, '#93c5fd'); |
| productGradient.addColorStop(0.5, '#60a5fa'); |
| productGradient.addColorStop(1, '#3b82f6'); |
| } |
| |
| ctx.fillStyle = productGradient; |
| |
| ctx.fillRect(itemX + 35, itemY, 30, 15); |
| ctx.fillRect(itemX + 20, itemY + 15, 60, 85); |
| |
| ctx.fillStyle = 'rgba(255, 255, 255, 0.6)'; |
| ctx.fillRect(itemX + 25, itemY + 20, 15, 70); |
| |
| ctx.fillStyle = currentItem.status === 'defect' ? '#dc2626' : '#2563eb'; |
| ctx.fillRect(itemX + 25, itemY + 40, 50, 30); |
| ctx.fillStyle = '#ffffff'; |
| ctx.font = 'bold 10px Arial'; |
| ctx.fillText('NEURO', itemX + 32, itemY + 52); |
| ctx.fillText('PRODUCT', itemX + 28, itemY + 64); |
| |
| ctx.fillStyle = '#334155'; |
| ctx.fillRect(itemX + 32, itemY - 8, 36, 8); |
| ctx.fillStyle = '#475569'; |
| ctx.fillRect(itemX + 35, itemY - 5, 30, 5); |
| |
| ctx.strokeStyle = '#334155'; |
| ctx.lineWidth = 2; |
| ctx.strokeRect(itemX + 20, itemY + 15, 60, 85); |
| ctx.strokeRect(itemX + 35, itemY, 30, 15); |
| |
| if (currentItem.status === 'defect') { |
| ctx.strokeStyle = '#ef4444'; |
| ctx.lineWidth = 5; |
| ctx.setLineDash([10, 5]); |
| ctx.strokeRect(itemX + 10, itemY - 20, 80, 130); |
| ctx.setLineDash([]); |
| |
| if (currentItem.defectType === 'Царапина') { |
| ctx.strokeStyle = '#dc2626'; |
| ctx.lineWidth = 4; |
| ctx.beginPath(); |
| ctx.moveTo(itemX + 30, itemY + 35); |
| ctx.lineTo(itemX + 45, itemY + 50); |
| ctx.stroke(); |
| } else if (currentItem.defectType === 'Скол') { |
| ctx.fillStyle = '#dc2626'; |
| ctx.beginPath(); |
| ctx.moveTo(itemX + 75, itemY + 60); |
| ctx.lineTo(itemX + 80, itemY + 55); |
| ctx.lineTo(itemX + 80, itemY + 65); |
| ctx.fill(); |
| } else if (currentItem.defectType === 'Непрокрас') { |
| ctx.fillStyle = 'rgba(220, 38, 38, 0.7)'; |
| ctx.beginPath(); |
| ctx.arc(itemX + 40, itemY + 70, 12, 0, Math.PI * 2); |
| ctx.fill(); |
| } |
| |
| ctx.fillStyle = '#ef4444'; |
| ctx.beginPath(); |
| ctx.arc(itemX + 85, itemY - 10, 20, 0, Math.PI * 2); |
| ctx.fill(); |
| |
| ctx.fillStyle = '#ffffff'; |
| ctx.font = 'bold 24px Arial'; |
| ctx.fillText('!', itemX + 80, itemY - 1); |
| |
| ctx.fillStyle = '#dc2626'; |
| ctx.font = 'bold 18px Arial'; |
| ctx.fillText('БРАК ОБНАРУЖЕН', itemX - 30, itemY - 35); |
| } else if (currentItem.status === 'ok') { |
| ctx.strokeStyle = '#10b981'; |
| ctx.lineWidth = 5; |
| ctx.beginPath(); |
| ctx.arc(itemX + 50, itemY - 30, 20, 0, Math.PI * 2); |
| ctx.stroke(); |
| |
| ctx.strokeStyle = '#10b981'; |
| ctx.lineWidth = 5; |
| ctx.beginPath(); |
| ctx.moveTo(itemX + 40, itemY - 30); |
| ctx.lineTo(itemX + 47, itemY - 23); |
| ctx.lineTo(itemX + 62, itemY - 38); |
| ctx.stroke(); |
| |
| ctx.fillStyle = '#059669'; |
| ctx.font = 'bold 16px Arial'; |
| ctx.fillText('✓ ГОДЕН', itemX + 20, itemY - 35); |
| } |
| |
| ctx.fillStyle = 'rgba(51, 65, 85, 0.9)'; |
| ctx.fillRect(itemX + 15, itemY + 105, 70, 20); |
| ctx.fillStyle = '#FFFFFF'; |
| ctx.font = 'bold 13px monospace'; |
| ctx.fillText(`ID: ${currentItem.id}`, itemX + 20, itemY + 118); |
| |
| const scanY = (Date.now() / 10) % 200 + itemY - 30; |
| ctx.strokeStyle = 'rgba(59, 130, 246, 0.8)'; |
| ctx.lineWidth = 3; |
| ctx.beginPath(); |
| ctx.moveTo(itemX - 20, scanY); |
| ctx.lineTo(itemX + 120, scanY); |
| ctx.stroke(); |
| |
| ctx.fillStyle = 'rgba(59, 130, 246, 0.3)'; |
| ctx.fillRect(itemX - 20, scanY - 2, 140, 5); |
| |
| const drawBackgroundProduct = (x, y, scale, opacity) => { |
| ctx.globalAlpha = opacity; |
| ctx.fillStyle = '#94a3b8'; |
| ctx.fillRect(x + 35 * scale, y, 30 * scale, 15 * scale); |
| ctx.fillRect(x + 20 * scale, y + 15 * scale, 60 * scale, 85 * scale); |
| ctx.strokeStyle = '#64748b'; |
| ctx.lineWidth = 1; |
| ctx.strokeRect(x + 20 * scale, y + 15 * scale, 60 * scale, 85 * scale); |
| ctx.globalAlpha = 1; |
| }; |
| |
| drawBackgroundProduct(150, itemY + 80, 0.6, 0.6); |
| drawBackgroundProduct(550, itemY + 90, 0.5, 0.5); |
| |
| if (isRunning) { |
| offset = (offset + 2) % 40; |
| } |
| |
| animationFrame = requestAnimationFrame(animate); |
| }; |
| |
| animate(); |
| return () => cancelAnimationFrame(animationFrame); |
| }, [currentItem, isRunning]); |
| |
| const defectRate = ((defectsFound / inspectedCount) * 100).toFixed(2); |
| |
| const getSeverityColor = (severity) => { |
| switch(severity) { |
| case 'high': return 'bg-red-100 text-red-700 border-red-400'; |
| case 'medium': return 'bg-yellow-100 text-yellow-700 border-yellow-400'; |
| case 'low': return 'bg-blue-100 text-blue-700 border-blue-400'; |
| default: return 'bg-gray-100 text-gray-700 border-gray-400'; |
| } |
| }; |
| |
| const getSeverityText = (severity) => { |
| switch(severity) { |
| case 'high': return 'Высокая'; |
| case 'medium': return 'Средняя'; |
| case 'low': return 'Низкая'; |
| default: return ''; |
| } |
| }; |
| |
| return ( |
| <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50 p-6"> |
| <div className="max-w-7xl mx-auto"> |
| <div className="bg-gradient-to-r from-blue-500 to-indigo-600 rounded-xl shadow-xl p-6 mb-6 border-2 border-blue-300"> |
| <div className="flex justify-between items-center"> |
| <div className="flex items-center gap-4"> |
| <div className="bg-white p-2 rounded-lg"> |
| <Camera size={32} className="text-blue-600" /> |
| </div> |
| <div> |
| <h1 className="text-3xl font-bold text-white">Дашборд контроля качества</h1> |
| <p className="text-blue-50 text-sm font-medium">Линия 3 • Neurobox AI System</p> |
| </div> |
| </div> |
| <div className="flex items-center gap-6"> |
| <button |
| onClick={() => setIsRunning(!isRunning)} |
| className="flex items-center gap-2 bg-white text-blue-600 px-5 py-2.5 rounded-lg hover:bg-blue-50 transition-all font-bold shadow-lg hover:shadow-xl" |
| > |
| {isRunning ? <Pause size={20} /> : <Play size={20} />} |
| {isRunning ? 'Пауза' : 'Запуск'} |
| </button> |
| <div className="flex items-center gap-2 bg-white px-4 py-2 rounded-lg shadow-md"> |
| <Activity size={20} className={isRunning ? 'text-green-500 animate-pulse' : 'text-gray-400'} /> |
| <span className={`font-bold ${isRunning ? 'text-green-600' : 'text-gray-600'}`}> |
| {isRunning ? 'Работа' : 'Остановлено'} |
| </span> |
| </div> |
| <div className="flex items-center gap-2 bg-white px-4 py-2 rounded-lg shadow-md"> |
| <Clock size={20} className="text-indigo-600" /> |
| <span className="font-mono text-lg text-gray-800 font-semibold"> |
| {currentTime.toLocaleTimeString('ru-RU')} {currentTime.toLocaleDateString('ru-RU')} |
| </span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div className="grid grid-cols-3 gap-6"> |
| <div className="col-span-2 space-y-6"> |
| <div className="bg-white rounded-xl shadow-xl p-6 border-2 border-blue-200"> |
| <div className="flex items-center justify-between mb-4"> |
| <h2 className="text-xl font-bold text-gray-800 flex items-center gap-2"> |
| <Camera className="text-blue-500" /> |
| Прямая трансляция с камеры |
| </h2> |
| <span className="text-green-600 flex items-center gap-2 text-sm font-semibold bg-green-50 px-3 py-1 rounded-full border border-green-200"> |
| <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span> |
| В эфире |
| </span> |
| </div> |
| <div className="bg-gradient-to-br from-gray-50 to-blue-50 rounded-lg overflow-hidden border-2 border-gray-300 shadow-inner"> |
| <canvas |
| ref={canvasRef} |
| width={800} |
| height={400} |
| className="w-full" |
| /> |
| </div> |
| </div> |
| |
| <div className="bg-white rounded-xl shadow-xl p-6 border-2 border-blue-200"> |
| <h2 className="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2"> |
| <TrendingUp className="text-green-500" /> |
| Статистика за смену |
| </h2> |
| <div className="grid grid-cols-3 gap-4"> |
| <div className="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl p-5 shadow-lg border-2 border-blue-300"> |
| <p className="text-blue-50 text-sm mb-1 font-semibold">Проверено изделий</p> |
| <p className="text-4xl font-bold text-white">{inspectedCount.toLocaleString('ru-RU')}</p> |
| </div> |
| <div className="bg-gradient-to-br from-red-500 to-red-600 rounded-xl p-5 shadow-lg border-2 border-red-300"> |
| <p className="text-red-50 text-sm mb-1 font-semibold">Выявлено брака</p> |
| <p className="text-4xl font-bold text-white">{defectsFound} <span className="text-xl">({defectRate}%)</span></p> |
| </div> |
| <div className="bg-gradient-to-br from-green-500 to-green-600 rounded-xl p-5 shadow-lg border-2 border-green-300"> |
| <p className="text-green-50 text-sm mb-1 font-semibold">Годных изделий</p> |
| <p className="text-4xl font-bold text-white">{(inspectedCount - defectsFound).toLocaleString('ru-RU')}</p> |
| </div> |
| </div> |
| |
| <div className="mt-6 bg-gradient-to-br from-gray-50 to-blue-50 rounded-xl p-5 border-2 border-gray-200 shadow-inner"> |
| <h3 className="text-gray-800 font-bold mb-3 text-lg">Основные дефекты:</h3> |
| <div className="space-y-3"> |
| {Object.entries(defectStats).map(([defect, count]) => ( |
| <div key={defect} className="flex items-center justify-between bg-white p-3 rounded-lg shadow-sm border border-gray-200"> |
| <span className="text-gray-700 font-semibold">{defect}</span> |
| <div className="flex items-center gap-3"> |
| <div className="w-48 bg-gray-200 rounded-full h-3 overflow-hidden border border-gray-300"> |
| <div |
| className="bg-gradient-to-r from-red-500 to-red-600 h-full rounded-full transition-all duration-500 shadow-sm" |
| style={{ width: `${(count / defectsFound) * 100}%` }} |
| ></div> |
| </div> |
| <span className="text-gray-800 font-bold w-12 text-right text-lg">{count}</span> |
| </div> |
| </div> |
| ))} |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div className="col-span-1"> |
| <div className="bg-white rounded-xl shadow-xl p-6 h-full border-2 border-blue-200"> |
| <h2 className="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2"> |
| <Activity className="text-yellow-500" /> |
| Журнал событий |
| <span className="text-sm text-gray-500 font-normal ml-auto">Последние 10 мин</span> |
| </h2> |
| <div className="space-y-3 overflow-y-auto max-h-[calc(100vh-200px)] pr-2"> |
| {events.map((event, index) => ( |
| <div |
| key={`${event.id}-${index}`} |
| className={`rounded-lg p-4 border-2 transition-all duration-300 shadow-md ${ |
| event.type === 'defect' |
| ? 'bg-red-50 border-red-400 hover:shadow-lg' |
| : 'bg-green-50 border-green-400 hover:shadow-lg' |
| } ${index === 0 ? 'ring-2 ring-blue-400 shadow-xl' : ''}`} |
| > |
| <div className="flex items-start justify-between mb-2"> |
| <span className="text-gray-700 font-mono text-sm font-semibold bg-white px-2 py-1 rounded border border-gray-300">{event.time}</span> |
| {event.type === 'defect' ? ( |
| <AlertTriangle size={22} className="text-red-600" /> |
| ) : ( |
| <CheckCircle size={22} className="text-green-600" /> |
| )} |
| </div> |
| <div className="flex items-center justify-between mb-2"> |
| <span className={`font-bold text-lg ${event.type === 'defect' ? 'text-red-700' : 'text-green-700'}`}> |
| {event.type === 'defect' ? `Дефект: ${event.defectType}` : 'OK'} |
| </span> |
| <span className="text-gray-600 text-sm font-semibold bg-white px-2 py-1 rounded border border-gray-300">ID: {event.id}</span> |
| </div> |
| {event.type === 'defect' && ( |
| <div className="mt-2"> |
| <span className={`inline-block px-3 py-1 rounded-full text-xs font-bold border-2 ${getSeverityColor(event.severity)}`}> |
| Срочность: {getSeverityText(event.severity)} |
| </span> |
| </div> |
| )} |
| {event.type === 'defect' && ( |
| <div className="mt-3 bg-white rounded-lg p-3 h-24 flex items-center justify-center border-2 border-gray-300 shadow-inner"> |
| <div className="w-20 h-20 bg-gradient-to-br from-red-400 to-red-600 rounded-lg border-2 border-red-500 flex items-center justify-center shadow-md"> |
| <span className="text-white text-xs font-bold">ФОТО</span> |
| </div> |
| </div> |
| )} |
| </div> |
| ))} |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div className="mt-6 bg-white rounded-xl shadow-xl p-6 border-2 border-blue-200"> |
| <div className="grid grid-cols-3 gap-6 text-center"> |
| <div className="bg-gradient-to-br from-green-50 to-emerald-50 p-5 rounded-xl border-2 border-green-300 shadow-md"> |
| <p className="text-gray-700 text-sm font-semibold mb-1">Снижение брака</p> |
| <p className="text-4xl font-bold text-green-600">↓ 90%</p> |
| </div> |
| <div className="bg-gradient-to-br from-blue-50 to-indigo-50 p-5 rounded-xl border-2 border-blue-300 shadow-md"> |
| <p className="text-gray-700 text-sm font-semibold mb-1">Увеличение скорости линии</p> |
| <p className="text-4xl font-bold text-blue-600">↑ 15%</p> |
| </div> |
| <div className="bg-gradient-to-br from-purple-50 to-pink-50 p-5 rounded-xl border-2 border-purple-300 shadow-md"> |
| <p className="text-gray-700 text-sm font-semibold mb-1">Режим работы</p> |
| <p className="text-4xl font-bold text-purple-600">24/7</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| ); |
| }; |
| |
| const root = ReactDOM.createRoot(document.getElementById('root')); |
| root.render(<QualityControlDashboard />); |
| </script> |
| </body> |
| </html> |
|
|
