优化了前端文件的机构
This commit is contained in:
@@ -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 = `
|
||||
<span>更新时间</span> ${stateData.time}
|
||||
<span>状态ID</span> ${stateData.state_id}
|
||||
<span>状态名称</span> ${stateData.state_name}
|
||||
<span>事件</span> ${stateData.event}
|
||||
<span>事件ID</span> ${stateData.event_id}
|
||||
<span>故障代码</span> ${stateData.fault_code}
|
||||
<span>备注</span> ${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 = `<i class="fas fa-database"></i><span>已连接到MOOS数据库:${data.host}:${data.port}</span>`;
|
||||
} else {
|
||||
moosDbStatus.className = 'db-status disconnected';
|
||||
moosDbStatus.innerHTML = `<i class="fas fa-database"></i><span>MOOS数据库连接失败</span>`;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
const moosDbStatus = document.getElementById('moos-db-status');
|
||||
moosDbStatus.className = 'db-status disconnected';
|
||||
moosDbStatus.innerHTML = `<i class="fas fa-database"></i><span>MOOS数据库连接错误</span>`;
|
||||
});
|
||||
}
|
||||
|
||||
// 检查本地数据库连接状态
|
||||
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 = `<i class="fas fa-database"></i><span>已连接到数据库：${data.database}</span>`;
|
||||
} else {
|
||||
dbStatus.className = 'db-status disconnected';
|
||||
dbStatus.innerHTML = `<i class="fas fa-database"></i><span>数据库连接失败</span>`;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
const dbStatus = document.getElementById('db-status');
|
||||
dbStatus.className = 'db-status disconnected';
|
||||
dbStatus.innerHTML = `<i class="fas fa-database"></i><span>数据库连接错误</span>`;
|
||||
});
|
||||
}
|
||||
|
||||
// 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(); // 初始检查
|
||||
@@ -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);
|
||||
}
|
||||
+2
-405
@@ -6,259 +6,11 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>电源管理</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
<style>
|
||||
/* 全局样式 */
|
||||
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);
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="db-status-panel">
|
||||
<!-- <h2>连接状态</h2> -->
|
||||
<div class="status-columns">
|
||||
<div class="status-column">
|
||||
<h3>MOOSDB</h3>
|
||||
@@ -329,162 +81,7 @@
|
||||
<pre id="state-machine-state">正在加载...</pre>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
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 = `
|
||||
<span>更新时间</span> ${stateData.time}
|
||||
<span>状态ID</span> ${stateData.state_id}
|
||||
<span>状态名称</span> ${stateData.state_name}
|
||||
<span>事件</span> ${stateData.event}
|
||||
<span>事件ID</span> ${stateData.event_id}
|
||||
<span>故障代码</span> ${stateData.fault_code}
|
||||
<span>备注</span> ${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 = `<i class="fas fa-database"></i><span>已连接到MOOS数据库:${data.host}:${data.port}</span>`;
|
||||
} else {
|
||||
moosDbStatus.className = 'db-status disconnected';
|
||||
moosDbStatus.innerHTML = `<i class="fas fa-database"></i><span>MOOS数据库连接失败</span>`;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
const moosDbStatus = document.getElementById('moos-db-status');
|
||||
moosDbStatus.className = 'db-status disconnected';
|
||||
moosDbStatus.innerHTML = `<i class="fas fa-database"></i><span>MOOS数据库连接错误</span>`;
|
||||
});
|
||||
}
|
||||
|
||||
// 检查本地数据库连接状态
|
||||
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 = `<i class="fas fa-database"></i><span>已连接到数据库：${data.database}</span>`;
|
||||
} else {
|
||||
dbStatus.className = 'db-status disconnected';
|
||||
dbStatus.innerHTML = `<i class="fas fa-database"></i><span>数据库连接失败</span>`;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
const dbStatus = document.getElementById('db-status');
|
||||
dbStatus.className = 'db-status disconnected';
|
||||
dbStatus.innerHTML = `<i class="fas fa-database"></i><span>数据库连接错误</span>`;
|
||||
});
|
||||
}
|
||||
|
||||
// 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: isNaN(keyValue) ? keyValue : Number(keyValue)
|
||||
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(); // 初始检查
|
||||
</script>
|
||||
<script src="/static/script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user