用电量监控系统

·用电集抄

企业

能源类型

站点名称

开始时间时分

结束时间时分

有功总电能

显示用电量

显示用电（为冲线回路）

回路名称	2025-03-27 00:00 示数	2025-03-27 11:10 示数	用电量(kW·h)
主6进线	8343522	8344188	666
新增分立柜总表	3166116.25	3166682	565.75
一层南	70517.01	70523.2	6.19
一层研发室	242195.41	242210.72	15.31
二层南	195809.63	195843.41	33.78
二层北-AEW	0	0	0
三层南-AEW	0	0	0
三层南	261331.34	261364.45	33.11
三层北-AEW	0	0	0
四层北	137786.31	137805.75	19.44
五层南	79977.76	79985.77	8.01
四层南	123726.81	123739	12.19
连线合计	8343522.00	8344188.00	666.00

const hourTab = document.getElementById('hourTab'); const hourContent = document.getElementById('hourContent'); const closeHourContent = document.getElementById('closeHourContent'); const dayTab = document.getElementById('dayTab'); const dayContent = document.getElementById('dayContent'); const closeDayContent = document.getElementById('closeDayContent'); const monthTab = document.getElementById('monthTab'); const monthContent = document.getElementById('monthContent'); const closeMonthContent = document.getElementById('closeMonthContent'); function hideAllPanels() { document.getElementById('hourContent').classList.add('hidden'); document.getElementById('dayContent').classList.add('hidden'); document.getElementById('monthContent').classList.add('hidden'); } hourTab.addEventListener('click', function(e) { e.stopPropagation(); hideAllPanels(); document.getElementById('hourContent').classList.remove('hidden'); }); dayTab.addEventListener('click', function(e) { e.stopPropagation(); hideAllPanels(); document.getElementById('dayContent').classList.remove('hidden'); }); monthTab.addEventListener('click', function(e) { e.stopPropagation(); hideAllPanels(); document.getElementById('monthContent').classList.remove('hidden'); }); document.addEventListener('click', function(e) { if (!e.target.closest('#hourContent') && !e.target.closest('#hourTab') && !e.target.closest('#dayContent') && !e.target.closest('#dayTab') && !e.target.closest('#monthContent') && !e.target.closest('#monthTab')) { hideAllPanels(); } }); closeHourContent.addEventListener('click', hideAllPanels); closeDayContent.addEventListener('click', hideAllPanels); closeMonthContent.addEventListener('click', hideAllPanels); searchBtn.addEventListener('click', async function() { const searchIcon = document.getElementById('searchIcon'); const searchText = document.getElementById('searchText'); let startDate, endDate, startHour, startMinute, endHour, endMinute; // Get start and end dates startDate = document.querySelector('input[type="date"]:first-of-type').value; endDate = document.querySelector('input[type="date"]:last-of-type').value; // Get start and end times startHour = document.querySelector('select:nth-of-type(1)').value; startMinute = document.querySelector('select:nth-of-type(2)').value; endHour = document.querySelector('select:nth-of-type(3)').value; endMinute = document.querySelector('select:nth-of-type(4)').value; // Validate inputs if (!startDate || !endDate) { showToast('请选择完整的时间范围', 'error'); return; } // Convert dates to timestamps for comparison const startTimestamp = new Date(`${startDate} ${startHour}:${startMinute}`).getTime(); const endTimestamp = new Date(`${endDate} ${endHour}:${endMinute}`).getTime(); if (endTimestamp <= startTimestamp) { showToast('结束时间必须大于开始时间', 'error'); return; } // Update button state searchBtn.disabled = true; searchIcon.className = 'ri-loader-4-line animate-spin'; searchText.textContent = '查询中...'; searchBtn.disabled = true; searchIcon.className = 'ri-loader-4-line animate-spin'; searchText.textContent = '查询中...'; try { await new Promise(resolve => setTimeout(resolve, 1500)); const tableRows = document.querySelectorAll('tbody tr:not(:last-child)'); tableRows.forEach(row => { const cells = row.querySelectorAll('td'); if(cells.length >= 4) { const randomStart = Math.floor(Math.random() * 1000000); const randomEnd = randomStart + Math.floor(Math.random() * 1000); const diff = randomEnd - randomStart; cells[1].textContent = randomStart.toFixed(2); cells[2].textContent = randomEnd.toFixed(2); cells[3].textContent = diff.toFixed(2); } }); const totalRow = document.querySelector('tbody tr:last-child'); if(totalRow) { let totalStart = 0; let totalEnd = 0; let totalDiff = 0; tableRows.forEach(row => { const cells = row.querySelectorAll('td'); if(cells.length >= 4) { totalStart += parseFloat(cells[1].textContent); totalEnd += parseFloat(cells[2].textContent); totalDiff += parseFloat(cells[3].textContent); } }); const totalCells = totalRow.querySelectorAll('td'); if(totalCells.length >= 4) { totalCells[1].textContent = totalStart.toFixed(2); totalCells[2].textContent = totalEnd.toFixed(2); totalCells[3].textContent = totalDiff.toFixed(2); } } } catch (error) { console.error('查询失败:', error); showToast('查询失败，请重试', 'error'); } finally { // Reset button state searchBtn.disabled = false; searchIcon.className = 'ri-search-line'; searchText.textContent = '查询'; } // Show success message showToast('查询成功', 'success'); }); function showToast(message, type = 'success') { const toast = document.getElementById('toast'); // Clear any existing timeout if (window.toastTimeout) { clearTimeout(window.toastTimeout); } // Update toast content toast.innerHTML = `

${message} `; // Show toast with animation toast.style.transform = 'translateX(0)'; toast.style.opacity = '1'; // Hide toast after delay window.toastTimeout = setTimeout(() => { toast.style.transform = 'translateX(100%)'; toast.style.opacity = '0'; }, 3000); } }); hourTab.addEventListener('click', function() { hourContent.classList.toggle('hidden'); }); closeHourContent.addEventListener('click', function() { hourContent.classList.add('hidden'); }); document.addEventListener('click', function(event) { if (!hourContent.contains(event.target) && !hourTab.contains(event.target)) { hourContent.classList.add('hidden'); } if (!dayContent.contains(event.target) && !dayTab.contains(event.target)) { dayContent.classList.add('hidden'); } if (!monthContent.contains(event.target) && !monthTab.contains(event.target)) { monthContent.classList.add('hidden'); } }); dayTab.addEventListener('click', function() { dayContent.classList.toggle('hidden'); hourContent.classList.add('hidden'); }); closeDayContent.addEventListener('click', function() { dayContent.classList.add('hidden'); }); monthTab.addEventListener('click', function() { monthContent.classList.toggle('hidden'); hourContent.classList.add('hidden'); dayContent.classList.add('hidden'); }); closeMonthContent.addEventListener('click', function() { monthContent.classList.add('hidden'); }); });