优化了web界面,下载功能等

bin/static/script.js

@@ -1,15 +1,28 @@
 let currentDbPath = '/home/zjk/project/H100/H100PowerManger/data/power_data.db';
 
 // 数据库下载功能
-document.getElementById('download-db').addEventListener('click', function() {
-    fetch('/api/download-db')
-        .then(response => {
-            if (!response.ok) {
-                throw new Error('下载失败：' + response.statusText);
-            }
-            return response.blob();
-        })
-        .then(blob => {
+function downloadDatabase() {
+    const downloadBtn = document.getElementById('download-db');
+    const progressBar = document.getElementById('download-progress');
+    
+    downloadBtn.disabled = true;
+    progressBar.style.display = 'block';
+    progressBar.value = 0;
+
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', '/api/download-db', true);
+    xhr.responseType = 'blob';
+
+    xhr.onprogress = function(event) {
+        if (event.lengthComputable) {
+            const percentComplete = (event.loaded / event.total) * 100;
+            progressBar.value = percentComplete;
+        }
+    };
+
+    xhr.onload = function() {
+        if (this.status === 200) {
+            const blob = this.response;
             const url = window.URL.createObjectURL(blob);
             const a = document.createElement('a');
             a.href = url;
@@ -17,12 +30,28 @@ document.getElementById('download-db').addEventListener('click', function() {
             document.body.appendChild(a);
             a.click();
             window.URL.revokeObjectURL(url);
-        })
-        .catch(error => {
-            console.error('下载数据库失败:', error);
-            alert('下载数据库失败：' + error.message);
-        });
-});
+            
+            progressBar.value = 100;
+            setTimeout(() => {
+                progressBar.style.display = 'none';
+                downloadBtn.disabled = false;
+            }, 500);
+        } else {
+            throw new Error('下载失败：' + this.statusText);
+        }
+    };
+
+    xhr.onerror = function() {
+        console.error('下载数据库失败:', this.statusText);
+        alert('下载数据库失败：' + this.statusText);
+        progressBar.style.display = 'none';
+        downloadBtn.disabled = false;
+    };
+
+    xhr.send();
+}
+
+document.getElementById('download-db').addEventListener('click', downloadDatabase);
 
 // WebSocket连接
 let ws = null;
@@ -61,40 +90,44 @@ function initWebSocket() {
     };
 }
 
-    // 更新UI
-    function updateUI(data) {
-        // 更新数据库状态
-        if (data.db_status) {
-            const dbStatus = document.getElementById('db-status');
-            if (dbStatus) {
-                dbStatus.className = data.db_status.connected ? 'db-status connected' : 'db-status disconnected';
-                dbStatus.innerHTML = `<i class="fas fa-database"></i><span>已连接到数据库：${data.db_status.database}</span>`;
-            }
+// 更新UI
+function updateUI(data) {
+    // 更新数据库状态
+    if (data.db_status) {
+        const dbStatus = document.getElementById('db-status');
+        const dbSizeElement = document.querySelector('#db-size .size-value');
+        
+        if (dbStatus) {
+            dbStatus.className = data.db_status.connected ? 'db-status connected' : 'db-status disconnected';
+            dbStatus.innerHTML = `<i class="fas fa-database"></i><span>已连接到数据库：${data.db_status.database}`;
         }
         
-        // 更新MOOS数据库状态
-        if (data.moos_db_status) {
-            const moosDbStatus = document.getElementById('moos-db-status');
-            if (data.moos_db_status.connected) {
-                moosDbStatus.className = 'db-status connected';
-                moosDbStatus.innerHTML = `<i class="fas fa-database"></i><span>已连接到MOOS数据库:${data.moos_db_status.host}:${data.moos_db_status.port}</span>`;
-            } else {
-                moosDbStatus.className = 'db-status disconnected';
-                moosDbStatus.innerHTML = `<i class="fas fa-database"></i><span>MOOS数据库连接失败</span>`;
-            }
+        if (dbSizeElement && data.db_status.size) {
+            const sizeInMB = (data.db_status.size / 1024 / 1024).toFixed(2);
+            dbSizeElement.textContent = `${sizeInMB} MB`;
         }
+    }
+    
+    // 更新MOOS数据库状态
+    if (data.moos_db_status) {
+        const moosDbStatus = document.getElementById('moos-db-status');
+        if (data.moos_db_status.connected) {
+            moosDbStatus.className = 'db-status connected';
+            moosDbStatus.innerHTML = `<i class="fas fa-database"></i><span>已连接到MOOS数据库:${data.moos_db_status.host}:${data.moos_db_status.port}</span>`;
+        } else {
+            moosDbStatus.className = 'db-status disconnected';
+            moosDbStatus.innerHTML = `<i class="fas fa-database"></i><span>MOOS数据库连接失败</span>`;
+        }
+    }
 
-        // 更新状态机面板
-        const stateInfo = `
-<span>更新时间</span> ${data.state.time}
-<span>状态ID</span> ${data.state.state_id}
-<span>状态名称</span> ${data.state.state_name}
-<span>事件</span> ${data.state.event}
-<span>事件ID</span> ${data.state.event_id}
-<span>故障代码</span> ${data.state.fault_code}
-<span>备注</span> ${data.state.note}
-`;
-    document.getElementById('state-machine-state').innerHTML = stateInfo;
+    // 更新状态机面板
+    document.getElementById('state-time').textContent = data.state.time;
+    document.getElementById('state-id').textContent = data.state.state_id;
+    document.getElementById('state-name').textContent = data.state.state_name;
+    document.getElementById('state-event').textContent = data.state.event;
+    document.getElementById('state-event-id').textContent = data.state.event_id;
+    document.getElementById('state-fault-code').textContent = data.state.fault_code;
+    document.getElementById('state-note').textContent = data.state.note;
 
     // 更新DIS系统状态
     document.getElementById('dis-sys-state').textContent = JSON.stringify(data.status.disSys, null, 2);
@@ -146,5 +179,3 @@ document.getElementById('moos-send-btn').addEventListener('click', sendMoosNotif
 
 // 初始化WebSocket连接
 initWebSocket();
-
-// 删除旧的定时检查，现在通过WebSocket实时更新