| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
| <title>MES System</title> |
| <script src="https://cdn.tailwindcss.com "></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css "/> |
| <script src="https://cdn.jsdelivr.net/npm/sweetalert2 @11"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js "></script> |
| <style> |
| .notification-badge { |
| position: absolute; |
| top: 0; right: 0; |
| font-size: 0.625rem; line-height: 1.25rem; |
| width: 1.25rem; height: 1.25rem; |
| display: flex; align-items: center; justify-content: center; |
| border-radius: 9999px; |
| } |
| .has-event:hover { background-color: #BFDBFE !important; } |
| .hidden { display: none; } |
| </style> |
| </head> |
| <body class="bg-gray-100 text-gray-900"> |
|
|
| |
| <div id="loginModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50"> |
| <div class="bg-white rounded-lg shadow-lg w-full max-w-md p-6"> |
| <h3 class="text-xl font-bold mb-4">Вход в систему</h3> |
| <form id="loginForm" class="space-y-4"> |
| <input type="text" id="loginUsername" placeholder="Имя пользователя" required class="w-full px-4 py-2 border rounded-lg"> |
| <input type="password" id="loginPassword" placeholder="Пароль" required class="w-full px-4 py-2 border rounded-lg"> |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg">Войти</button> |
| </form> |
| </div> |
| </div> |
|
|
| |
| <div id="sidebar" class="fixed top-0 left-0 h-full bg-blue-800 text-white w-64 p-4 hidden"> |
| <div class="flex items-center justify-between mb-6"> |
| <h1 class="text-xl font-bold">MES System</h1> |
| <button onclick="toggleSidebar()" class="text-white hover:text-blue-200"><i class="fas fa-bars"></i></button> |
| </div> |
|
|
| <nav> |
| <ul class="space-y-2"> |
| <li><button onclick="showTab('dashboard')" class="tab-btn active w-full text-left px-4 py-2 rounded-lg bg-blue-700"><i class="fas fa-tachometer-alt mr-2"></i> Главная</button></li> |
| <li><button onclick="showTab('schedule')" class="tab-btn w-full text-left px-4 py-2 rounded-lg hover:bg-blue-700"><i class="fas fa-calendar-alt mr-2"></i> График ТО</button></li> |
| <li><button onclick="showTab('equipment')" class="tab-btn w-full text-left px-4 py-2 rounded-lg hover:bg-blue-700"><i class="fas fa-tools mr-2"></i> Оборудование</button></li> |
| <li><button onclick="showTab('repairs')" class="tab-btn w-full text-left px-4 py-2 rounded-lg hover:bg-blue-700"><i class="fas fa-wrench mr-2"></i> Ремонт</button></li> |
| <li><button onclick="showTab('maintenance')" class="tab-btn w-full text-left px-4 py-2 rounded-lg hover:bg-blue-700"><i class="fas fa-clipboard-check mr-2"></i> Техобслуживание</button></li> |
| <li><button onclick="showTab('reports')" class="tab-btn w-full text-left px-4 py-2 rounded-lg hover:bg-blue-700"><i class="fas fa-chart-line mr-2"></i> Отчеты</button></li> |
| <li><button onclick="showTab('users')" class="tab-btn w-full text-left px-4 py-2 rounded-lg hover:bg-blue-700"><i class="fas fa-users-cog mr-2"></i> Пользователи</button></li> |
| </ul> |
| </nav> |
| </div> |
|
|
| |
| <div id="mainContent" class="ml-64 p-6 min-h-screen hidden"> |
| |
| <header class="bg-white shadow-sm p-4 rounded-lg mb-6 flex justify-between items-center"> |
| <h1 id="page-title" class="text-2xl font-semibold">Главная панель</h1> |
| <div class="flex space-x-4"> |
| <button class="p-2 rounded-full hover:bg-gray-100 relative"> |
| <i class="fas fa-bell text-gray-600"></i> |
| <span class="notification-badge bg-red-500 text-white">3</span> |
| </button> |
| <div class="relative"> |
| <input type="text" id="searchInput" oninput="filterEquipment()" placeholder="Поиск..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
| </div> |
| <button onclick="logout()" class="text-red-600 hover:text-red-800">Выход</button> |
| </div> |
| </header> |
|
|
| |
| <div id="content" class="bg-white rounded-lg shadow p-6"> |
| |
| |
| <div id="dashboard" class="tab-content active"> |
| <h2 class="text-2xl font-bold mb-6">Главная панель</h2> |
| |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
| <div class="bg-white rounded-lg shadow p-6 border-l-4 border-blue-500"> |
| <h4 class="font-medium text-gray-500">Всего оборудования</h4> |
| <p id="total-equipment" class="text-2xl font-bold">0</p> |
| </div> |
| <div class="bg-white rounded-lg shadow p-6 border-l-4 border-green-500"> |
| <h4 class="font-medium text-gray-500">Выполнено ТО</h4> |
| <p id="completed-maintenance" class="text-2xl font-bold">0</p> |
| </div> |
| <div class="bg-white rounded-lg shadow p-6 border-l-4 border-yellow-500"> |
| <h4 class="font-medium text-gray-500">Просрочено ТО</h4> |
| <p id="overdue-maintenance" class="text-2xl font-bold">0</p> |
| </div> |
| <div class="bg-white rounded-lg shadow p-6 border-l-4 border-red-500"> |
| <h4 class="font-medium text-gray-500">Текущие ремонты</h4> |
| <p id="current-repairs" class="text-2xl font-bold">0</p> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-lg shadow overflow-hidden"> |
| <div class="p-4 border-b flex justify-between items-center"> |
| <h2 class="text-lg font-semibold">Оборудование</h2> |
| <button onclick="showTab('equipment')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg"> |
| Перейти к оборудованию |
| </button> |
| </div> |
| <div class="overflow-x-auto"> |
| <table id="dashboard-table" class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th class="px-6 py-3 text-left text-xs uppercase tracking-wider">ID</th> |
| <th class="px-6 py-3 text-left text-xs uppercase tracking-wider">Название</th> |
| <th class="px-6 py-3 text-left text-xs uppercase tracking-wider">Статус</th> |
| <th class="px-6 py-3 text-left text-xs uppercase tracking-wider">Последнее ТО</th> |
| </tr> |
| </thead> |
| <tbody id="dashboard-body" class="bg-white divide-y divide-gray-200"></tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="equipment" class="tab-content hidden"> |
| <div class="mb-4 flex justify-between items-center"> |
| <h2 class="text-2xl font-bold">Оборудование</h2> |
| <button onclick="openAddEquipmentModal()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> |
| <i class="fas fa-plus mr-2"></i> Добавить оборудование |
| </button> |
| </div> |
|
|
| <div class="mb-4 flex space-x-4"> |
| <select id="statusFilter" onchange="filterEquipment()" class="border rounded-lg px-4 py-2"> |
| <option value="">Все статусы</option> |
| <option value="active">Активно</option> |
| <option value="maintenance">ТО</option> |
| <option value="repair">Ремонт</option> |
| </select> |
| <select id="typeFilter" onchange="filterEquipment()" class="border rounded-lg px-4 py-2"> |
| <option value="">Все типы</option> |
| <option>Станок</option> |
| <option>Конвейер</option> |
| <option>Компрессор</option> |
| <option>Генератор</option> |
| <option>Насос</option> |
| </select> |
| <input type="text" id="inventoryFilter" oninput="filterEquipment()" placeholder="Инвентарный номер" class="border rounded-lg px-4 py-2 w-1/4"> |
| <div class="flex items-center space-x-2"> |
| <input type="date" id="dateFrom" oninput="filterEquipment()" class="border rounded-lg px-4 py-2"> |
| <span>-</span> |
| <input type="date" id="dateTo" oninput="filterEquipment()" class="border rounded-lg px-4 py-2"> |
| </div> |
| </div> |
|
|
| <div class="bg-white rounded-lg shadow overflow-hidden"> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th class="px-6 py-3 text-left text-xs uppercase tracking-wider">ID</th> |
| <th class="px-6 py-3 text-left text-xs uppercase tracking-wider">Название</th> |
| <th class="px-6 py-3 text-left text-xs uppercase tracking-wider">Тип</th> |
| <th class="px-6 py-3 text-left text-xs uppercase tracking-wider">Статус</th> |
| <th class="px-6 py-3 text-left text-xs uppercase tracking-wider">Действия</th> |
| </tr> |
| </thead> |
| <tbody id="equipment-list" class="bg-white divide-y divide-gray-200"></tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="reports" class="tab-content hidden"> |
| <h2 class="text-2xl font-bold mb-6">Отчеты</h2> |
| <div class="mb-4 flex justify-end space-x-4"> |
| <button onclick="exportToExcel()" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg flex items-center"> |
| <i class="fas fa-file-pdf mr-2"></i> Экспорт в PDF |
| </button> |
| <button onclick="exportFilteredToExcel()" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center"> |
| <i class="fas fa-filter mr-2"></i> Экспорт с фильтром |
| </button> |
| </div> |
| <div class="bg-white rounded-lg shadow p-6"> |
| <canvas id="equipmentStatusChart" width="400" height="250"></canvas> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="addEquipmentModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> |
| <div class="bg-white rounded-lg shadow-lg w-full max-w-2xl"> |
| <div class="p-4 border-b flex justify-between items-center"> |
| <h3 class="text-lg font-semibold">Добавить новое оборудование</h3> |
| <button onclick="closeAddEquipmentModal()" class="text-gray-500 hover:text-gray-700">×</button> |
| </div> |
| <form id="equipmentForm" class="p-6 space-y-4"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Название</label> |
| <input type="text" name="name" required class="w-full border rounded-lg px-4 py-2"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Тип</label> |
| <select name="type" required class="w-full border rounded-lg px-4 py-2"> |
| <option value="">Выберите тип</option> |
| <option>Станок</option> |
| <option>Конвейер</option> |
| <option>Компрессор</option> |
| <option>Генератор</option> |
| <option>Насос</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Серийный номер</label> |
| <input type="text" name="serial" required class="w-full border rounded-lg px-4 py-2"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Инвентарный номер</label> |
| <input type="text" name="inventory" required class="w-full border rounded-lg px-4 py-2"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Дата ввода в эксплуатацию</label> |
| <input type="date" name="commissionDate" required class="w-full border rounded-lg px-4 py-2"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Периодичность ТО (дни)</label> |
| <input type="number" name="interval" required min="1" class="w-full border rounded-lg px-4 py-2"> |
| </div> |
| <div class="md:col-span-2"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Описание</label> |
| <textarea name="description" rows="3" class="w-full border rounded-lg px-4 py-2"></textarea> |
| </div> |
| </div> |
| <div class="mt-4 flex justify-end space-x-2"> |
| <button type="button" onclick="closeAddEquipmentModal()" class="border px-4 py-2 rounded hover:bg-gray-100">Отмена</button> |
| <button type="button" onclick="saveEquipment()" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Сохранить</button> |
| </div> |
| </form> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const API_URL = "https://jsonplaceholder.typicode.com/posts "; |
| let equipmentData = []; |
| |
| function saveToLocalStorage() { |
| localStorage.setItem("equipment", JSON.stringify(equipmentData)); |
| } |
| |
| function loadFromLocalStorage() { |
| const saved = localStorage.getItem("equipment"); |
| if (saved) equipmentData = JSON.parse(saved); |
| } |
| |
| async function login(username, password) { |
| |
| const response = await fetch(`https://jsonplaceholder.typicode.com/users?email= ${username}@example.com`); |
| const users = await response.json(); |
| if (users.length > 0 && password === "123456") { |
| localStorage.setItem("token", btoa(`${username}:${password}`)); |
| return true; |
| } |
| return false; |
| } |
| |
| async function logout() { |
| localStorage.removeItem("token"); |
| location.reload(); |
| } |
| |
| async function fetchEquipment() { |
| try { |
| const response = await fetch(API_URL); |
| equipmentData = await response.json(); |
| renderAll(); |
| } catch (e) { |
| console.error("Ошибка загрузки данных:", e); |
| } |
| } |
| |
| function updateDashboardStats() { |
| document.getElementById("total-equipment").textContent = equipmentData.length; |
| document.getElementById("completed-maintenance").textContent = equipmentData.filter(e => e.lastMaintenance).length; |
| document.getElementById("overdue-maintenance").textContent = equipmentData.filter(e => new Date(e.nextMaintenance) < new Date()).length; |
| document.getElementById("current-repairs").textContent = equipmentData.filter(e => e.status === "repair").length; |
| } |
| |
| function filterEquipment() { |
| const status = document.getElementById("statusFilter").value; |
| const type = document.getElementById("typeFilter").value; |
| const inventory = document.getElementById("inventoryFilter").value.toLowerCase(); |
| const dateFrom = document.getElementById("dateFrom").value; |
| const dateTo = document.getElementById("dateTo").value; |
| |
| const tbody = document.getElementById("equipment-list"); |
| tbody.innerHTML = ''; |
| |
| equipmentData.filter(eq => { |
| return (!status || eq.status === status) && |
| (!type || eq.type === type) && |
| (!inventory || eq.inventory?.toLowerCase().includes(inventory)) && |
| (!dateFrom || eq.nextMaintenance >= dateFrom) && |
| (!dateTo || eq.nextMaintenance <= dateTo); |
| }).forEach(eq => { |
| const row = document.createElement("tr"); |
| row.innerHTML = ` |
| <td class="px-6 py-4">${eq.id}</td> |
| <td class="px-6 py-4">${eq.name}</td> |
| <td class="px-6 py-4">${eq.type}</td> |
| <td class="px-6 py-4"> |
| <span class="px-2 py-1 rounded-full text-xs font-semibold ${eq.status === 'active' ? 'bg-green-100 text-green-800' : eq.status === 'maintenance' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800'}"> |
| ${eq.status === 'active' ? 'Активно' : eq.status === 'maintenance' ? 'ТО' : 'Ремонт'} |
| </span> |
| </td> |
| <td class="px-6 py-4"> |
| <button onclick="editEquipment(${eq.id})" class="text-blue-600 hover:text-blue-800 mr-3"><i class="fas fa-edit"></i></button> |
| <button onclick="deleteEquipment(${eq.id})" class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button> |
| </td> |
| `; |
| tbody.appendChild(row); |
| }); |
| } |
| |
| function formatDate(dateStr) { |
| if (!dateStr) return ""; |
| const d = new Date(dateStr); |
| return `${d.getDate()}.${d.getMonth()+1}.${d.getFullYear()}`; |
| } |
| |
| function calculateNextMaintenanceDate(commissionDate, intervalDays) { |
| if (!commissionDate) return ''; |
| const nextDate = new Date(new Date(commissionDate).getTime() + parseInt(intervalDays)*24*60*60*1000); |
| return nextDate.toISOString().split('T')[0]; |
| } |
| |
| function openAddEquipmentModal() { |
| document.getElementById("addEquipmentModal").classList.remove("hidden"); |
| } |
| |
| function closeAddEquipmentModal() { |
| document.getElementById("addEquipmentModal").classList.add("hidden"); |
| document.getElementById("equipmentForm").reset(); |
| } |
| |
| async function saveEquipment() { |
| const form = document.getElementById("equipmentForm"); |
| const formData = new FormData(form); |
| const name = formData.get("name"); |
| const type = formData.get("type"); |
| const serial = formData.get("serial"); |
| const inventory = formData.get("inventory"); |
| const commissionDate = formData.get("commissionDate"); |
| const interval = formData.get("interval"); |
| const description = formData.get("description"); |
| |
| if (!name || !type || !serial || !inventory || !commissionDate || !interval) { |
| Swal.fire({ title: 'Ошибка', text: 'Заполните все обязательные поля', icon: 'error' }); |
| return; |
| } |
| |
| const newEq = { |
| name, type, serial, inventory, |
| status: "active", |
| lastMaintenance: "", |
| nextMaintenance: calculateNextMaintenanceDate(commissionDate, interval), |
| maintenanceInterval: interval, |
| description |
| }; |
| |
| |
| const response = await fetch(API_URL, { |
| method: "POST", |
| headers: { "Content-Type": "application/json" }, |
| body: JSON.stringify(newEq) |
| }); |
| |
| if (response.ok) { |
| const data = await response.json(); |
| equipmentData.push(data); |
| closeAddEquipmentModal(); |
| renderAll(); |
| Swal.fire({ title: 'Успешно', text: 'Оборудование добавлено', icon: 'success' }); |
| } else { |
| Swal.fire({ title: 'Ошибка', text: 'Не удалось сохранить оборудование', icon: 'error' }); |
| } |
| } |
| |
| function editEquipment(id) { |
| window.location.href = `#edit-${id}`; |
| alert("Редактирование не реализовано в этом примере для упрощения"); |
| } |
| |
| async function deleteEquipment(id) { |
| Swal.fire({ |
| title: 'Удалить?', text: 'Это действие нельзя отменить', icon: 'warning', |
| showCancelButton: true, confirmButtonText: 'Да, удалить', cancelButtonText: 'Отмена' |
| }).then(async result => { |
| if (result.isConfirmed) { |
| const response = await fetch(`${API_URL}/${id}`, { method: "DELETE" }); |
| if (response.ok) { |
| equipmentData = equipmentData.filter(eq => eq.id !== id); |
| renderAll(); |
| Swal.fire('Удалено!', 'Оборудование удалено', 'success'); |
| } |
| } |
| }); |
| } |
| |
| function exportToExcel() { |
| const ws = XLSX.utils.aoa_to_sheet([ |
| ["ID", "Название", "Тип", "Статус", "Инвентарный номер"], |
| ...equipmentData.map(eq => [eq.id, eq.name, eq.type, eq.status, eq.inventory]) |
| ]); |
| const wb = XLSX.utils.book_new(); |
| XLSX.utils.book_append_sheet(wb, ws, "Оборудование"); |
| XLSX.writeFile(wb, "equipment-report.xlsx"); |
| } |
| |
| function exportFilteredToExcel() { |
| const filtered = equipmentData.filter(eq => { |
| const status = document.getElementById("statusFilter").value; |
| const type = document.getElementById("typeFilter").value; |
| const inventory = document.getElementById("inventoryFilter").value.toLowerCase(); |
| const dateFrom = document.getElementById("dateFrom").value; |
| const dateTo = document.getElementById("dateTo").value; |
| |
| return (!status || eq.status === status) && |
| (!type || eq.type === type) && |
| (!inventory || eq.inventory?.toLowerCase().includes(inventory)) && |
| (!dateFrom || eq.nextMaintenance >= dateFrom) && |
| (!dateTo || eq.nextMaintenance <= dateTo); |
| }); |
| |
| const ws = XLSX.utils.aoa_to_sheet([ |
| ["ID", "Название", "Тип", "Статус", "Инвентарный номер"], |
| ...filtered.map(eq => [eq.id, eq.name, eq.type, eq.status, eq.inventory]) |
| ]); |
| |
| const wb = XLSX.utils.book_new(); |
| XLSX.utils.book_append_sheet(wb, ws, "Фильтрованное оборудование"); |
| XLSX.writeFile(wb, "filtered-equipment.xlsx"); |
| } |
| |
| function initApp() { |
| const token = localStorage.getItem("token"); |
| if (!token) { |
| document.getElementById("loginModal").classList.remove("hidden"); |
| } else { |
| document.getElementById("loginModal").remove(); |
| document.getElementById("mainContent").classList.remove("hidden"); |
| document.getElementById("sidebar").classList.remove("hidden"); |
| loadFromLocalStorage(); |
| fetchEquipment(); |
| } |
| } |
| |
| document.getElementById("loginForm")?.addEventListener("submit", async function(e) { |
| e.preventDefault(); |
| const username = document.getElementById("loginUsername").value; |
| const password = document.getElementById("loginPassword").value; |
| |
| const success = await login(username, password); |
| if (success) { |
| fetchEquipment(); |
| initCharts(); |
| } else { |
| Swal.fire({ title: 'Ошибка', text: 'Неверный логин или пароль', icon: 'error' }); |
| } |
| }); |
| |
| function renderAll() { |
| filterEquipment(); |
| updateDashboardStats(); |
| } |
| |
| function initCharts() { |
| const statusCtx = document.getElementById('equipmentStatusChart').getContext('2d'); |
| new Chart(statusCtx, { |
| type: 'doughnut', |
| data: { |
| labels: ['Активно', 'На ТО', 'В ремонте'], |
| datasets: [{ |
| data: [ |
| equipmentData.filter(e => e.status === 'active').length, |
| equipmentData.filter(e => e.status === 'maintenance').length, |
| equipmentData.filter(e => e.status === 'repair').length |
| ], |
| backgroundColor: ['#10B981','#F59E0B','#EF4444'] |
| }] |
| }, |
| options: { responsive: true, plugins: { legend: { position: 'right' } } |
| }); |
| } |
| |
| function toggleSidebar() { |
| const sidebar = document.getElementById("sidebar"); |
| const isCollapsed = sidebar.classList.contains("collapsed"); |
| sidebar.classList.toggle("collapsed", !isCollapsed); |
| document.querySelector(".ml-64").classList.toggle("ml-16", !isCollapsed); |
| } |
| |
| function showTab(tabId) { |
| document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden')); |
| document.getElementById(tabId).classList.remove('hidden'); |
| document.getElementById('page-title').innerText = tabId.charAt(0).toUpperCase() + tabId.slice(1); |
| |
| document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('bg-blue-700')); |
| event.target.classList.add('bg-blue-700'); |
| } |
| |
| window.onload = () => { |
| initApp(); |
| }; |
| </script> |
|
|
| </body> |
| </html> |
