|
|
<!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> |
|
|
<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; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 text-gray-900"> |
|
|
|
|
|
|
|
|
<div id="sidebar" class="fixed top-0 left-0 h-full bg-blue-800 text-white w-64 p-4 transition-all duration-300 z-10"> |
|
|
<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 class="ml-64 p-6 min-h-screen"> |
|
|
|
|
|
<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">5</span> |
|
|
</button> |
|
|
<div class="relative"> |
|
|
<input type="text" 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> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div id="content" class="bg-white rounded-lg shadow p-6"> |
|
|
|
|
|
|
|
|
<div id="dashboard" class="tab-content active"> |
|
|
<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="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> |
|
|
<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="schedule" class="tab-content hidden"> |
|
|
<h2 class="text-2xl font-bold mb-6">График ТО</h2> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h3 class="text-lg font-semibold mb-4">Календарь ТО</h3> |
|
|
<div class="grid grid-cols-7 gap-1 mb-2"> |
|
|
<div class="text-center text-sm font-medium text-gray-500">Пн</div> |
|
|
<div class="text-center text-sm font-medium text-gray-500">Вт</div> |
|
|
<div class="text-center text-sm font-medium text-gray-500">Ср</div> |
|
|
<div class="text-center text-sm font-medium text-gray-500">Чт</div> |
|
|
<div class="text-center text-sm font-medium text-gray-500">Пт</div> |
|
|
<div class="text-center text-sm font-medium text-gray-500">Сб</div> |
|
|
<div class="text-center text-sm font-medium text-gray-500">Вс</div> |
|
|
</div> |
|
|
<div id="calendar" class="grid grid-cols-7 gap-1 h-64 overflow-y-auto"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="repairs" class="tab-content hidden"> |
|
|
<h2 class="text-2xl font-bold mb-6">Ремонтные работы</h2> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<p>Здесь будет информация о ремонтных работах.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="maintenance" class="tab-content hidden"> |
|
|
<h2 class="text-2xl font-bold mb-6">Техническое обслуживание</h2> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<p>Здесь будет информация о техническом обслуживании.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="reports" class="tab-content hidden"> |
|
|
<h2 class="text-2xl font-bold mb-6">Отчеты</h2> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<p>Здесь будут отчеты по работе системы.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="users" class="tab-content hidden"> |
|
|
<h2 class="text-2xl font-bold mb-6">Пользователи</h2> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<p>Здесь будет список пользователей.</p> |
|
|
</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> |
|
|
<div class="p-6"> |
|
|
<form id="equipmentForm"> |
|
|
<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 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</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 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<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 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</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 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</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 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</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 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</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 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> |
|
|
</div> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
<div class="p-4 border-t flex justify-end space-x-2"> |
|
|
<button onclick="closeAddEquipmentModal()" class="border px-4 py-2 rounded hover:bg-gray-100">Отмена</button> |
|
|
<button onclick="saveEquipment()" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Сохранить</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
let equipmentData = [ |
|
|
{id: 1, name: "5-ти осевой фрезерный центр Nmill 1400", type: "Станок", serial: "CNC2000-001", inventory: "INV-1001", status: "active", lastMaintenance: "2023-05-15", nextMaintenance: "2023-06-15", maintenanceInterval: 30, description: "5-ти осевой фрезерный центр"}, |
|
|
{id: 2, name: "3-х осевой фрезерный центр Mikron HPM 600HD", type: "Станок", serial: "CONV-A12-045", inventory: "INV-1042", status: "active", lastMaintenance: "2023-05-20", nextMaintenance: "2023-06-20", maintenanceInterval: 30, description: "3-х осевой фрезерный центр"}, |
|
|
{id: 3, name: "5-ти осевой фрезерный центр Versa 645 Linear", type: "Станок", serial: "COMP-V50-112", inventory: "INV-1078", status: "maintenance", lastMaintenance: "2023-04-10", nextMaintenance: "2023-06-10", maintenanceInterval: 60, description: "5-ти осевой фрезерный центр"} |
|
|
]; |
|
|
|
|
|
const maintenanceEvents = [ |
|
|
{ equipmentId: 1, date: "2023-06-15", status: "planned", responsible: "Иванов А.П." }, |
|
|
{ equipmentId: 2, date: "2023-06-20", status: "planned", responsible: "Петров И.С." }, |
|
|
{ equipmentId: 3, date: "2023-06-10", status: "overdue", responsible: "Сидоров В.М." } |
|
|
]; |
|
|
|
|
|
let currentEditingEquipmentId = null; |
|
|
|
|
|
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 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'); |
|
|
} |
|
|
|
|
|
function openAddEquipmentModal() { |
|
|
document.getElementById("addEquipmentModal").classList.remove("hidden"); |
|
|
} |
|
|
|
|
|
function closeAddEquipmentModal() { |
|
|
document.getElementById("addEquipmentModal").classList.add("hidden"); |
|
|
document.getElementById("equipmentForm").reset(); |
|
|
} |
|
|
|
|
|
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 = { |
|
|
id: equipmentData.length ? Math.max(...equipmentData.map(e => e.id)) + 1 : 1, |
|
|
name, type, serial, inventory, commissionDate, maintenanceInterval: interval, description, |
|
|
status: "active", |
|
|
lastMaintenance: "", |
|
|
nextMaintenance: calculateNextMaintenanceDate(commissionDate, interval) |
|
|
}; |
|
|
equipmentData.push(newEq); |
|
|
closeAddEquipmentModal(); |
|
|
renderEquipmentTable(); |
|
|
updateDashboardStats(); |
|
|
Swal.fire({ title: 'Успешно', text: 'Оборудование добавлено', icon: 'success' }); |
|
|
} |
|
|
|
|
|
function deleteEquipment(id) { |
|
|
if (confirm("Удалить это оборудование?")) { |
|
|
equipmentData = equipmentData.filter(eq => eq.id !== id); |
|
|
renderEquipmentTable(); |
|
|
updateDashboardStats(); |
|
|
} |
|
|
} |
|
|
|
|
|
function editEquipment(id) { |
|
|
const equipment = equipmentData.find(eq => eq.id === id); |
|
|
if (!equipment) return; |
|
|
|
|
|
document.getElementById("editName").value = equipment.name; |
|
|
document.getElementById("editType").value = equipment.type; |
|
|
document.getElementById("editSerial").value = equipment.serial; |
|
|
document.getElementById("editInventory").value = equipment.inventory; |
|
|
document.getElementById("editCommissionDate").value = equipment.commissionDate; |
|
|
document.getElementById("editMaintenanceInterval").value = equipment.maintenanceInterval; |
|
|
document.getElementById("editDescription").value = equipment.description; |
|
|
currentEditingEquipmentId = id; |
|
|
document.getElementById("editEquipmentModal").classList.remove("hidden"); |
|
|
} |
|
|
|
|
|
function saveEdit() { |
|
|
const equipment = equipmentData.find(eq => eq.id === currentEditingEquipmentId); |
|
|
const form = document.getElementById("editEquipmentForm"); |
|
|
const formData = new FormData(form); |
|
|
if (!formData.get("name") || !formData.get("type") || !formData.get("serial") || !formData.get("inventory") || !formData.get("commissionDate") || !formData.get("interval")) { |
|
|
Swal.fire({ title: 'Ошибка', text: 'Пожалуйста, заполните все обязательные поля', icon: 'error' }); |
|
|
return; |
|
|
} |
|
|
|
|
|
equipment.name = formData.get("name"); |
|
|
equipment.type = formData.get("type"); |
|
|
equipment.serial = formData.get("serial"); |
|
|
equipment.inventory = formData.get("inventory"); |
|
|
equipment.commissionDate = formData.get("commissionDate"); |
|
|
equipment.maintenanceInterval = formData.get("interval"); |
|
|
equipment.description = formData.get("description"); |
|
|
equipment.nextMaintenance = calculateNextMaintenanceDate(equipment.commissionDate, equipment.maintenanceInterval); |
|
|
|
|
|
closeEditModal(); |
|
|
renderEquipmentTable(); |
|
|
updateDashboardStats(); |
|
|
Swal.fire({ title: 'Успешно', text: 'Оборудование обновлено', icon: 'success' }); |
|
|
} |
|
|
|
|
|
function renderEquipmentTable() { |
|
|
const tbody = document.getElementById("equipment-list"); |
|
|
const dashboardTbody = document.getElementById("dashboard-body"); |
|
|
tbody.innerHTML = ''; |
|
|
dashboardTbody.innerHTML = ''; |
|
|
|
|
|
equipmentData.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">${eq.inventory || '-'}</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); |
|
|
|
|
|
const dashRow = document.createElement("tr"); |
|
|
dashRow.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"> |
|
|
<span class="px-2 py-1 rounded-full text-xs font-semibold ${eq.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'}"> |
|
|
${eq.status === 'active' ? 'Активно' : 'ТО'} |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4">${formatDate(eq.lastMaintenance)}</td> |
|
|
`; |
|
|
dashboardTbody.appendChild(dashRow); |
|
|
}); |
|
|
} |
|
|
|
|
|
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 generateCalendar() { |
|
|
const calendar = document.getElementById("calendar"); |
|
|
const today = new Date(); |
|
|
const year = today.getFullYear(); |
|
|
const month = today.getMonth(); |
|
|
const firstDay = new Date(year, month, 1).getDay(); |
|
|
const daysInMonth = new Date(year, month + 1, 0).getDate(); |
|
|
|
|
|
calendar.innerHTML = ''; |
|
|
for (let i = 0; i < 42; i++) { |
|
|
const day = i - firstDay + 1; |
|
|
const cell = document.createElement("div"); |
|
|
if (day > 0 && day <= daysInMonth) { |
|
|
const dateStr = `${year}-${String(month+1).padStart(2,'0')}-${String(day).padStart(2,'0')}`; |
|
|
cell.textContent = day; |
|
|
cell.className = "h-10 flex items-center justify-center border rounded cursor-pointer"; |
|
|
if (maintenanceEvents.some(ev => ev.date === dateStr)) { |
|
|
cell.style.backgroundColor = "#BFDBFE"; |
|
|
cell.onclick = () => alert(`На ${day} ${monthNames[month]} ${year} запланировано ТО`); |
|
|
} |
|
|
} else { |
|
|
cell.textContent = ""; |
|
|
} |
|
|
calendar.appendChild(cell); |
|
|
} |
|
|
} |
|
|
|
|
|
const monthNames = ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь']; |
|
|
|
|
|
function initApp() { |
|
|
renderEquipmentTable(); |
|
|
updateDashboardStats(); |
|
|
generateCalendar(); |
|
|
} |
|
|
|
|
|
window.onload = initApp; |
|
|
</script> |
|
|
|
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Karmashek/ver3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
|
|
|
