262 lines
8.7 KiB
JavaScript
262 lines
8.7 KiB
JavaScript
let currentDbPath = '/home/zjk/project/H100/H100PowerManger/data/power_data.db';
|
|
|
|
// 数据库下载功能
|
|
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;
|
|
a.download = 'power_data.db';
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
window.URL.revokeObjectURL(url);
|
|
|
|
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;
|
|
let reconnectAttempts = 0;
|
|
const maxReconnectAttempts = 5;
|
|
const reconnectDelay = 5000;
|
|
|
|
// 初始化WebSocket连接
|
|
function initWebSocket() {
|
|
ws = new WebSocket('ws://' + window.location.host + '/ws/state');
|
|
|
|
ws.onopen = () => {
|
|
console.log('WebSocket连接已建立');
|
|
reconnectAttempts = 0;
|
|
};
|
|
|
|
ws.onmessage = (event) => {
|
|
const data = JSON.parse(event.data);
|
|
updateUI(data);
|
|
};
|
|
|
|
ws.onclose = () => {
|
|
console.log('WebSocket连接已关闭');
|
|
if (reconnectAttempts < maxReconnectAttempts) {
|
|
setTimeout(() => {
|
|
reconnectAttempts++;
|
|
console.log(`尝试重新连接 (${reconnectAttempts}/${maxReconnectAttempts})`);
|
|
initWebSocket();
|
|
}, reconnectDelay);
|
|
}
|
|
};
|
|
|
|
ws.onerror = (error) => {
|
|
console.error('WebSocket错误:', error);
|
|
ws.close();
|
|
};
|
|
}
|
|
|
|
// 更新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}`;
|
|
}
|
|
|
|
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>`;
|
|
}
|
|
}
|
|
|
|
// 更新状态机面板
|
|
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);
|
|
|
|
// 更新CCU状态
|
|
// document.getElementById('ccu-state').textContent = JSON.stringify(data.status.ccuState, null, 2);
|
|
|
|
// 更新进程消息面板
|
|
console.log('Received WebSocket message:', data);
|
|
if (data && data.processes && data.processes.list) {
|
|
console.log('Updating processes:', data.processes);
|
|
updateProcesses(data.processes);
|
|
} else {
|
|
console.warn('Invalid processes data received:', data);
|
|
}
|
|
|
|
// 更新运行日志
|
|
document.getElementById('log-data').textContent = data.status.logs.join('\n');
|
|
}
|
|
|
|
// 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);
|
|
|
|
// 初始化WebSocket连接
|
|
initWebSocket();
|
|
|
|
// 更新进程列表
|
|
function updateProcesses(processes) {
|
|
const processList = document.getElementById('process-list');
|
|
processList.innerHTML = ''; // 清空现有内容
|
|
|
|
const totalCount = document.getElementById('process-count');
|
|
totalCount.textContent = processes.count;
|
|
|
|
processes.list.forEach(process => {
|
|
const processElement = document.createElement('div');
|
|
processElement.className = 'process-card';
|
|
|
|
const header = document.createElement('div');
|
|
header.className = 'process-header';
|
|
header.innerHTML = `
|
|
<span class="process-name">${process.name}</span>
|
|
<span class="topic-count">订阅:${process.subscribed.length} 发布:${process.published.length}</span>
|
|
`;
|
|
|
|
const body = document.createElement('div');
|
|
body.className = 'process-body';
|
|
body.innerHTML = `
|
|
<div class="topic-group">
|
|
<h4>订阅主题</h4>
|
|
<ul class="subscribed-list">${process.subscribed.map(t => `<li>${t}</li>`).join('')}</ul>
|
|
</div>
|
|
<div class="topic-group">
|
|
<h4>发布主题</h4>
|
|
<ul class="published-list">${process.published.map(t => `<li>${t}</li>`).join('')}</ul>
|
|
</div>
|
|
`;
|
|
|
|
processElement.appendChild(header);
|
|
processElement.appendChild(body);
|
|
processList.appendChild(processElement);
|
|
});
|
|
}
|
|
|
|
// 渲染单个进程信息
|
|
function renderProcess(process) {
|
|
const template = document.getElementById('process-template');
|
|
const clone = document.importNode(template.content, true);
|
|
|
|
const processEntry = clone.querySelector('.process-entry');
|
|
processEntry.querySelector('.process-name').textContent = process.name;
|
|
|
|
const subscribedList = processEntry.querySelector('.subscribed-list');
|
|
process.subscribed.forEach(topic => {
|
|
const li = document.createElement('li');
|
|
li.textContent = topic;
|
|
subscribedList.appendChild(li);
|
|
});
|
|
|
|
const publishedList = processEntry.querySelector('.published-list');
|
|
process.published.forEach(topic => {
|
|
const li = document.createElement('li');
|
|
li.textContent = topic;
|
|
publishedList.appendChild(li);
|
|
});
|
|
|
|
return processEntry;
|
|
}
|
|
|
|
// 清空进程列表
|
|
function clearProcessList() {
|
|
const processLog = document.getElementById('log-data');
|
|
while (processLog.firstChild && processLog.firstChild.tagName !== 'TEMPLATE') {
|
|
processLog.removeChild(processLog.firstChild);
|
|
}
|
|
}
|