61 lines
1.8 KiB
JavaScript
61 lines
1.8 KiB
JavaScript
|
import React, { useState, useEffect } from 'react';
|
|||
|
|
import axios from 'axios';
|
|||
|
|
|
|||
|
|
const API_BASE = 'http://localhost:8000/api';
|
|||
|
|
|
|||
|
|
function Dashboard() {
|
|||
|
|
const [lobsters, setLobsters] = useState([]);
|
|||
|
|
const [loading, setLoading] = useState(true);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
fetchLobsters();
|
|||
|
|
const interval = setInterval(fetchLobsters, 5000);
|
|||
|
|
return () => clearInterval(interval);
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const fetchLobsters = async () => {
|
|||
|
|
try {
|
|||
|
|
const response = await axios.get(`${API_BASE}/lobsters/`);
|
|||
|
|
setLobsters(response.data);
|
|||
|
|
setLoading(false);
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('获取龙虾状态失败:', error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (loading) {
|
|||
|
|
return <div className="loading">加载中...</div>;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="dashboard">
|
|||
|
|
<h1>🦞 龙虾舰队监控中心</h1>
|
|||
|
|
<div className="lobster-grid">
|
|||
|
|
{lobsters.map(lobster => (
|
|||
|
|
<div key={lobster.id} className="lobster-card">
|
|||
|
|
<div className="lobster-header">
|
|||
|
|
<span className="lobster-name">{lobster.emoji} {lobster.name}</span>
|
|||
|
|
<span className={`status status-${lobster.status}`}>{lobster.status}</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="lobster-info">
|
|||
|
|
<p>专长：{lobster.specialty}</p>
|
|||
|
|
<p>端口：{lobster.port}</p>
|
|||
|
|
<p>容器：{lobster.container}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="lobster-actions">
|
|||
|
|
<button onClick={() => window.location.href = `/lobster/${lobster.id}`}>
|
|||
|
|
📊 详情
|
|||
|
|
</button>
|
|||
|
|
<button onClick={() => window.location.href = `/lobster/${lobster.id}/memory`}>
|
|||
|
|
🧠 记忆
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default Dashboard;
|