diff --git a/bin/static/script.js b/bin/static/script.js new file mode 100644 index 0000000..e231491 --- /dev/null +++ b/bin/static/script.js @@ -0,0 +1,153 @@ +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 => { + const url = window.URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = 'power_data.db'; + document.body.appendChild(a); + a.click(); + window.URL.revokeObjectURL(url); + }) + .catch(error => { + console.error('下载数据库失败:', error); + alert('下载数据库失败：' + error.message); + }); +}); + +// 更新页面数据的函数 +function updateData() { + // 获取状态机数据 + fetch('/api/state') + .then(response => response.json()) + .then(stateData => { + // 更新状态机面板 + const stateInfo = ` +更新时间 ${stateData.time} +状态ID ${stateData.state_id} +状态名称 ${stateData.state_name} +事件 ${stateData.event} +事件ID ${stateData.event_id} +故障代码 ${stateData.fault_code} +备注 ${stateData.note} +`; + document.getElementById('state-machine-state').innerHTML = stateInfo; + }) + .catch(error => console.error('Error fetching state data:', error)); + + // 获取其他系统状态 + fetch('/api/status') + .then(response => response.json()) + .then(data => { + // 更新DIS系统状态 + document.getElementById('dis-sys-state').textContent = JSON.stringify(data.disSys, null, 2); + + // 更新CCU状态 + document.getElementById('ccu-state').textContent = JSON.stringify(data.ccuState, null, 2); + + // 更新运行日志 + document.getElementById('log-data').textContent = data.logs.join('\n'); + }) + .catch(error => console.error('Error fetching system data:', error)); +} + +// 检查MOOS数据库连接状态 +function checkMoosDbConnection() { + fetch('/api/moos-db') + .then(response => response.json()) + .then(data => { + const moosDbStatus = document.getElementById('moos-db-status'); + if (data.connected) { + moosDbStatus.className = 'db-status connected'; + moosDbStatus.innerHTML = `已连接到MOOS数据库:${data.host}:${data.port}`; + } else { + moosDbStatus.className = 'db-status disconnected'; + moosDbStatus.innerHTML = `MOOS数据库连接失败`; + } + }) + .catch(error => { + const moosDbStatus = document.getElementById('moos-db-status'); + moosDbStatus.className = 'db-status disconnected'; + moosDbStatus.innerHTML = `MOOS数据库连接错误`; + }); +} + +// 检查本地数据库连接状态 +function checkDbConnection() { + fetch('/api/db-status') + .then(response => response.json()) + .then(data => { + const dbStatus = document.getElementById('db-status'); + if (data.connected) { + dbStatus.className = 'db-status connected'; + dbStatus.innerHTML = `已连接到数据库：${data.database}`; + } else { + dbStatus.className = 'db-status disconnected'; + dbStatus.innerHTML = `数据库连接失败`; + } + }) + .catch(error => { + const dbStatus = document.getElementById('db-status'); + dbStatus.className = 'db-status disconnected'; + dbStatus.innerHTML = `数据库连接错误`; + }); +} + +// MOOS通知功能 +function sendMoosNotify() { + const varValue = document.getElementById('moos-var').value.trim(); + const keyValue = document.getElementById('moos-key').value.trim(); + + if (!varValue || !keyValue) { + alert('请填写Var和Key值'); + return; + } + + const payload = { + var: varValue, + key: keyValue + }; + + fetch('/api/moos-notify', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(payload) + }) + .then(response => response.json()) + .then(data => { + if (data.success) { + alert('发送成功'); + } else { + alert('发送失败: ' + data.message); + } + }) + .catch(error => { + console.error('Error:', error); + alert('发送请求失败'); + }); +} + +document.getElementById('moos-send-btn').addEventListener('click', sendMoosNotify); + +// 每1秒更新一次数据 +setInterval(updateData, 1000); +updateData(); // 初始加载 + +// 每3秒检查一次数据库连接状态 +setInterval(() => { + checkDbConnection(); + checkMoosDbConnection(); +}, 3000); +checkDbConnection(); // 初始检查 +checkMoosDbConnection(); // 初始检查 diff --git a/bin/static/style.css b/bin/static/style.css new file mode 100644 index 0000000..7fd9e1d --- /dev/null +++ b/bin/static/style.css @@ -0,0 +1,246 @@ +/* 全局样式 */ +body { + font-family: 'Arial', sans-serif; + background-color: #282c34; + color: #ffffff; + margin: 0; + padding: 20px; + height: 100vh; + display: grid; + grid-template-rows: auto auto 1fr 1fr; + grid-template-columns: 1fr 1fr; + gap: 20px; +} + +.db-status-panel { + grid-column: 1 / -1; + background-color: #333; + border: 1px solid #61dafb; + border-radius: 8px; + padding: 20px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.control-panel { + grid-column: 1 / -1; + display: flex; + gap: 20px; + padding: 20px; + background-color: #333; + border: 1px solid #61dafb; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.db-status { + display: flex; + align-items: center; + gap: 10px; + font-size: 16px; +} + +.db-status i { + font-size: 20px; +} + +.db-status.connected { + color: #4caf50; +} + +.db-status.disconnected { + color: #f44336; +} + +.control-panel button { + flex: 1; + padding: 15px 20px; + background: linear-gradient(145deg, #61dafb, #4fa8c7); + border: none; + border-radius: 6px; + color: #282c34; + cursor: pointer; + font-weight: bold; + font-size: 14px; + text-align: left; + display: flex; + align-items: center; + gap: 10px; + transition: all 0.3s ease; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); +} + +.control-panel button:hover { + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); + background: linear-gradient(145deg, #4fa8c7, #61dafb); +} + +.control-panel button i { + font-size: 18px; +} + +.panel { + background-color: #333; + border: 1px solid #61dafb; + border-radius: 8px; + padding: 20px; + overflow: auto; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.panel h2 { + color: #61dafb; + margin-top: 0; + margin-bottom: 15px; + font-size: 18px; +} + +.status-columns { + display: flex; + gap: 20px; +} + +.status-column { + flex: 1; +} + +.status-column h3 { + color: #61dafb; + margin-top: 0; + margin-bottom: 10px; + font-size: 14px; +} + +.log-panel { + grid-column: 1; + grid-row: 4; +} + +.ccu-state-panel { + grid-column: 2; + grid-row: 3; +} + +.dis-sys-panel { + grid-column: 1; + grid-row: 3; +} + +.state-machine-panel { + grid-column: 2; + grid-row: 4; + display: flex; + flex-direction: column; + gap: 15px; + min-height: 400px; + max-height: 600px; +} + +.state-machine-panel h2 { + display: flex; + align-items: center; + gap: 8px; +} + +.state-machine-panel h2::before { + content: ''; + display: inline-block; + width: 12px; + height: 12px; + border-radius: 50%; + background: #61dafb; + box-shadow: 0 0 8px #61dafb; +} + +.state-machine-panel pre { + margin: 0; + white-space: pre-wrap; + word-wrap: break-word; + font-size: 13px; + line-height: 1.4; + background-color: #3a3f4b; + padding: 15px; + border-radius: 6px; + border-left: 4px solid #61dafb; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.state-machine-panel pre span { + display: block; + margin-bottom: 8px; + color: #61dafb; + font-weight: bold; +} + +.state-machine-panel pre span::after { + content: ':'; + margin-left: 4px; +} + +.file-input { + display: none; +} + +.file-label { + display: inline-block; + padding: 10px 15px; + background: #61dafb; + color: #282c34; + border-radius: 4px; + cursor: pointer; + margin-left: 10px; +} + +/* MOOS通知面板样式 */ +.moos-notify-panel { + margin-top: 20px; + padding: 15px; + background-color: #3a3f4b; + border: 1px solid #61dafb; + border-radius: 6px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.moos-notify-panel .input-group { + margin-bottom: 15px; +} + +.moos-notify-panel label { + display: block; + margin-bottom: 5px; + color: #61dafb; + font-size: 14px; +} + +.moos-notify-panel input { + width: 80%; + padding: 8px 8px; + background-color: #282c34; + border: 1px solid #61dafb; + border-radius: 4px; + color: #ffffff; + font-size: 14px; +} + +.moos-notify-panel input:focus { + outline: none; + border-color: #4fa8c7; + box-shadow: 0 0 0 2px rgba(97, 218, 251, 0.2); +} + +.moos-notify-panel button { + width: 80%; + padding: 8px; + background: linear-gradient(145deg, #61dafb, #4fa8c7); + border: none; + border-radius: 4px; + color: #282c34; + font-weight: bold; + cursor: pointer; + transition: all 0.3s ease; +} + +.moos-notify-panel button:hover { + transform: translateY(-1px); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); +} diff --git a/bin/templates/index.html b/bin/templates/index.html index 0d7ec8c..0e4e1c8 100644 --- a/bin/templates/index.html +++ b/bin/templates/index.html @@ -6,259 +6,11 @@ 电源管理 - +
-

MOOSDB

@@ -329,162 +81,7 @@ 
正在加载...
- + diff --git a/src/appPowerMangerWebUI/main.cpp b/src/appPowerMangerWebUI/main.cpp index 692bb68..e1569ff 100644 --- a/src/appPowerMangerWebUI/main.cpp +++ b/src/appPowerMangerWebUI/main.cpp @@ -19,18 +19,20 @@ using namespace std; ccuState ccustate; StateData stateData; - int main() { crow::SimpleApp app; SQLiteDB db("/home/zjk/project/H100/H100PowerManger/data/power_data.db"); MOOS::MOOSAsyncCommClient moosClient; moosClient.Run("localhost", 9000, "appPowerMangerWebUI"); + + std::cout << " Current Path -> " << std::system("pwd") << std::endl; + // 定义路由，处理根路径的请求 CROW_ROUTE(app, "/")([]() { auto page = crow::mustache::load_text("index.html"); return page; }); - + // 定义路由，处理 /api/power-data 的请求 CROW_ROUTE(app, "/api/db-status") ([&db]() { @@ -97,6 +99,9 @@ int main() { } return response; }); + + + // 定义路由，处理 /api/moos-notify 的请求（POST） CROW_ROUTE(app, "/api/moos-notify").methods("POST"_method) ([&moosClient](const crow::request& req) {