/** * 机器人管理仪表盘交互脚本 */ document.addEventListener('DOMContentLoaded', function() { // 初始化机器人卡片动效 initRobotCards(); // 初始化搜索和过滤功能 initSearchAndFilter(); // 初始化刷新动效 initRefreshAnimation(); // 初始化状态统计 updateStatusCounts(); }); /** * 初始化机器人卡片交互效果 */ function initRobotCards() { const robotCards = document.querySelectorAll('.robot-card'); robotCards.forEach(card => { // 添加悬停效果 card.addEventListener('mouseenter', function() { this.classList.add('transform', 'scale-102'); }); card.addEventListener('mouseleave', function() { this.classList.remove('transform', 'scale-102'); }); // 为删除按钮添加确认对话框 const deleteBtn = card.querySelector('.delete-robot'); if (deleteBtn) { deleteBtn.addEventListener('click', async function(e) { e.preventDefault(); const robotName = this.dataset.robotName || '此机器人'; const confirmed = await confirmDialog( `确定要删除 ${robotName} 吗?此操作不可恢复!`, { type: 'danger', title: '确认删除' } ); if (confirmed) { window.location.href = this.getAttribute('href'); } }); } }); } /** * 初始化搜索和过滤功能 */ function initSearchAndFilter() { const searchInput = document.getElementById('robot-search'); const filterButtons = document.querySelectorAll('.filter-btn'); const robotCards = document.querySelectorAll('.robot-card'); if (!searchInput) return; let currentFilter = 'all'; // 搜索功能 searchInput.addEventListener('input', function() { filterRobots(); }); // 过滤功能 filterButtons.forEach(button => { button.addEventListener('click', function() { filterButtons.forEach(btn => { btn.classList.remove('bg-indigo-600', 'text-white'); btn.classList.add('bg-white', 'text-gray-700', 'border', 'border-gray-300'); }); this.classList.remove('bg-white', 'text-gray-700', 'border', 'border-gray-300'); this.classList.add('bg-indigo-600', 'text-white'); currentFilter = this.dataset.filter; filterRobots(); }); }); function filterRobots() { const searchTerm = searchInput.value.toLowerCase(); robotCards.forEach(card => { const robotName = card.querySelector('.robot-name').textContent.toLowerCase(); const robotStatus = card.dataset.status; const matchesSearch = robotName.includes(searchTerm); const matchesFilter = currentFilter === 'all' || robotStatus === currentFilter; if (matchesSearch && matchesFilter) { card.classList.remove('hidden'); } else { card.classList.add('hidden'); } }); // 更新过滤后的计数 updateFilteredCounts(); } function updateFilteredCounts() { const visibleCards = document.querySelectorAll('.robot-card:not(.hidden)'); document.getElementById('filtered-count').textContent = visibleCards.length; } } /** * 更新状态计数 */ function updateStatusCounts() { const robotCards = document.querySelectorAll('.robot-card'); let onlineCount = 0; let offlineCount = 0; let errorCount = 0; robotCards.forEach(card => { const status = card.dataset.status; if (status === 'online') { onlineCount++; } else if (status === 'error') { errorCount++; } else { offlineCount++; } }); // 更新计数显示 const onlineCounter = document.getElementById('online-count'); const offlineCounter = document.getElementById('offline-count'); const errorCounter = document.getElementById('error-count'); if (onlineCounter) onlineCounter.textContent = onlineCount; if (offlineCounter) offlineCounter.textContent = offlineCount; if (errorCounter) errorCounter.textContent = errorCount; } /** * 初始化刷新动画 */ function initRefreshAnimation() { const refreshButton = document.getElementById('refresh-dashboard'); if (!refreshButton) return; refreshButton.addEventListener('click', function() { // 添加旋转动画 const icon = this.querySelector('i'); icon.classList.add('animate-spin'); // 模拟加载延迟 setTimeout(() => { window.location.reload(); }, 500); }); }