function SystemStatus
({}
) {
// 创建左侧互联网、中间路由器、右侧设备的网络拓扑图 SVG
const networkTopologySVG = `
<svg xmlns="http
://www.w
3.org/2000/svg" viewBox="0 0 600
300" class="w
-full h
-full">
<!
-- 左侧：互联网图标
-->
<g transform="translate
(50, 100
)">
<path d="M0,
30 Q20,10 40,
30 Q60,10 80,
30 Q100,10 120,
30 Q
140,10 160,
30"
stroke="#
3B82F6" stroke
-width="2" fill="none"/>
<path d="M0,
30 Q20,50 40,
30 Q60,50 80,
30 Q100,50 120,
30 Q
140,50 160,
30"
stroke="#
3B82F6" stroke
-width="2" fill="none"/>
<text x="80" y="20" text
-anchor="middle" font
-size="12" fill="#1E40AF">互联网</text>
</g>
<!
-- 互联网到路由器的连接线
-->
<line x1="160" y1="1
30" x2="240" y2="1
30" stroke="#9CA
3AF" stroke
-width="2" stroke
-dasharray="5,5"/>
<!
-- 中间：路由器图标
-->
<g transform="translate
(240, 100
)">
<rect x="0" y="0" width="120" height="60" rx="5" fill="#
3B82F6" stroke="#1E40AF" stroke
-width="2"/>
<circle cx="20" y="15" r="4" fill="#10B981"/>
<circle cx="40" y="15" r="4" fill="#10B981"/>
<circle cx="60" y="15" r="4" fill="#10B981"/>
<circle cx="80" y="15" r="4" fill="#10B981"/>
<circle cx="100" y="15" r="4" fill="#10B981"/>
<rect x="15" y="
30" width="90" height="20" rx="
3" fill="#1E40AF"/>
<text x="60" y="45" text
-anchor="middle" font
-size="10" fill="white">路由器</text>
</g>
<!
-- 路由器到设备的连接线
-->
<line x1="
360" y1="1
30" x2="400" y2="1
30" stroke="#6EE7B7" stroke
-width="2"/>
<line x1="
360" y1="1
30" x2="400" y2="80" stroke="#60A5FA" stroke
-width="2"/>
<line x1="
360" y1="1
30" x2="400" y2="180" stroke="#F87171" stroke
-width="2"/>
<!
-- 右侧：路由器下挂设备
-->
<!
-- 笔记本电脑
-->
<g transform="translate
(400, 50
)">
<rect x="0" y="0" width="80" height="50" rx="5" fill="#E5E7EB"/>
<rect x="15" y="5" width="50" height="
30" rx="
3" fill="#D1D5DB"/>
<rect x="20" y="10" width="40" height="20" fill="#F9FAFB"/>
<rect x="
30" y="
35" width="20" height="10" fill="#9CA
3AF"/>
<text x="40" y="70" text
-anchor="middle" font
-size="10" fill="#4B556
3">笔记本电脑</text>
</g>
<!
-- 智能手机
-->
<g transform="translate
(400, 120
)">
<rect x="0" y="0" width="40" height="60" rx="5" fill="#F9FAFB" stroke="#9CA
3AF" stroke
-width="2"/>
<rect x="5" y="5" width="
30" height="40" fill="#D1D5DB"/>
<circle cx="20" y="55" r="
3" fill="#9CA
3AF"/>
<text x="20" y="80" text
-anchor="middle" font
-size="10" fill="#4B556
3">智能手机</text>
</g>
<!
-- 台式电脑
-->
<g transform="translate
(400, 190
)">
<rect x="0" y="0" width="50" height="40" rx="
3" fill="#E5E7EB"/>
<rect x="5" y="5" width="40" height="25" fill="#F9FAFB"/>
<rect x="15" y="40" width="20" height="25" fill="#9CA
3AF"/>
<rect x="55" y="10" width="5" height="20" fill="#9CA
3AF"/>
<rect x="50" y="0" width="25" height="
30" rx="2" fill="#D1D5DB"/>
<text x="40" y="70" text
-anchor="middle" font
-size="10" fill="#4B556
3">台式电脑</text>
</g>
</svg>
`;
// 模拟初始系统状态数据
const initialStatusData = {
uploadRate
: "1.2 Mbps",
downloadRate
: "15.8 Mbps",
wanStatus
: {
status
: "已联网",
ipv4
: "122.77.241.10",
subnetMask
: "255.255.255.0",
gateway
: "122.77.241.1",
dns1
: "8.8.8.8",
dns2
: "8.8.4.4"
},
systemStatus
: {
model
: "FAST FW
300R",
hostname
: "Home
-Router",
cpuUsage
: "24%",
memoryUsage
: "512MB / 1GB
(51%
)",
uptime
: "
3天12小时45分钟",
version
: "V1.2.0"
},
connectionStatus
: {
onlineDevices
: 8,
networkConnections
: 24
}
};
const [status, setStatus] = useState
(null
);
const [refreshTime, setRefreshTime] = useState
(new Date
());
// 模拟获取系统状态
const refresh =
() => {
return new Promise
(resolve => {
setTimeout
(() => {
setStatus
({
...initialStatusData,
connectionStatus
: {
onlineDevices
: Math.floor
(Math.random
() * 5
) + 6,
networkConnections
: Math.floor
(Math.random
() * 20
) + 20
}
}
);
setRefreshTime
(new Date
());
resolve
();
},
300
);
}
);
};
useEffect
(() => {
refresh
();
const interval = setInterval
(refresh, 60000
);
return
() => clearInterval
(interval
);
}, []
);
if
(!status
) return html`<div class="flex justify
-center items
-center h
-32">加载中...</div>`;
return html`
<div class="m
-4 grid grid
-cols
-1 gap
-4">
<div class="py
-1 divide
-y border rounded bg
-white flex flex
-col">
<div class="flex items
-center justify
-between px
-4 py
-2">
<div class="font
-light uppercase text
-gray
-600">网络拓扑状态</div>
<div class="text
-xs text
-gray
-500">
最后更新
: ${refreshTime.toLocaleTimeString
()}
<button
class="ml
-2 text
-blue
-600 hover
:text
-blue
-800"
onClick=${refresh}
>
刷新
</button>
</div>
</div>
<div class="py
-2 px
-5 flex
-1 flex flex
-col">
<div class="grid grid
-cols
-1 md
:grid
-cols
-3 gap
-4">
<!
-- 网络拓扑视图
-->
<div class="border rounded p
-3 flex flex
-col items
-center col
-span
-1 md
:col
-span
-3">
<h
3 class="text
-sm font
-medium text
-gray
-700 mb
-2">网络拓扑视图</h
3>
<div
class="w
-full h
-64 object
-contain"
dangerouslySetInnerHTML=${{ __html
: networkTopologySVG }}
></div>
</div>
<!
-- WAN口状态
-->
<div class="border rounded p
-3">
<h
3 class="text
-sm font
-medium text
-gray
-700 mb
-2">WAN口状态</h
3>
<div class="space
-y
-2">
<div class="flex justify
-between">
<span class="text
-sm text
-gray
-600">状态</span>
<span class="text
-sm font
-medium text
-green
-600">${status.wanStatus.status}</span>
</div>
<div class="flex justify
-between">
<span class="text
-sm text
-gray
-600">IPv4地址</span>
<span class="text
-sm font
-medium">${status.wanStatus.ipv4}</span>
</div>
<div class="flex justify
-between">
<span class="text
-sm text
-gray
-600">子网掩码</span>
<span class="text
-sm font
-medium">${status.wanStatus.subnetMask}</span>
</div>
<div class="flex justify
-between">
<span class="text
-sm text
-gray
-600">网关</span>
<span class="text
-sm font
-medium">${status.wanStatus.gateway}</span>
</div>
<div class="flex justify
-between">
<span class="text
-sm text
-gray
-600">DNS1</span>
<span class="text
-sm font
-medium">${status.wanStatus.dns1}</span>
</div>
<div class="flex justify
-between">
<span class="text
-sm text
-gray
-600">DNS2</span>
<span class="text
-sm font
-medium">${status.wanStatus.dns2}</span>
</div>
</div>
</div>
<!
-- 系统状态
-->
<div class="border rounded p
-3">
<h
3 class="text
-sm font
-medium text
-gray
-700 mb
-2">系统状态</h
3>
<div class="space
-y
-2">
<div class="flex justify
-between">
<span class="text
-sm text
-gray
-600">型号</span>
<span class="text
-sm font
-medium">${status.systemStatus.model}</span>
</div>
<div class="flex justify
-between">
<span class="text
-sm text
-gray
-600">主机名</span>
<span class="text
-sm font
-medium">${status.systemStatus.hostname}</span>
</div>
<div class="flex justify
-between">
<span class="text
-sm text
-gray
-600">固件版本</span>
<span class="text
-sm font
-medium">${status.systemStatus.version}</span>
</div>
<div class="flex justify
-between">
<span class="text
-sm text
-gray
-600">CPU使用率</span>
<span class="text
-sm font
-medium">${status.systemStatus.cpuUsage}</span>
</div>
<div class="flex justify
-between">
<span class="text
-sm text
-gray
-600">内存占用</span>
<span class="text
-sm font
-medium">${status.systemStatus.memoryUsage}</span>
</div>
<div class="flex justify
-between">
<span class="text
-sm text
-gray
-600">运行时间</span>
<span class="text
-sm font
-medium">${status.systemStatus.uptime}</span>
</div>
</div>
</div>
<!
-- 连接状态
-->
<div class="border rounded p
-3">
<h
3 class="text
-sm font
-medium text
-gray
-700 mb
-2">连接状态</h
3>
<div class="space
-y
-3">
<div class="flex justify
-between items
-center">
<span class="text
-sm text
-gray
-600">上传速率</span>
<span class="text
-sm font
-medium">${status.uploadRate}</span>
</div>
<div class="w
-full bg
-gray
-200 rounded
-full h
-2">
<div class="bg
-blue
-500 h
-2 rounded
-full" style="width
: 30%"></div>
</div>
<div class="flex justify
-between items
-center mt
-2">
<span class="text
-sm text
-gray
-600">下载速率</span>
<span class="text
-sm font
-medium">${status.downloadRate}</span>
</div>
<div class="w
-full bg
-gray
-200 rounded
-full h
-2">
<div class="bg
-green
-500 h
-2 rounded
-full" style="width
: 70%"></div>
</div>
<div class="grid grid
-cols
-2 gap
-4 mt
-4">
<div class="bg
-blue
-50 rounded p
-3 text
-center">
<div class="text
-2xl font
-bold">${status.connectionStatus.onlineDevices}</div>
<div class="text
-sm text
-gray
-600">在线终端</div>
</div>
<div class="bg
-green
-50 rounded p
-3 text
-center">
<div class="text
-2xl font
-bold">${status.connectionStatus.networkConnections}</div>
<div class="text
-sm text
-gray
-600">网络连接数</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>`;
}
互联网那里图片是个地球转动，然后中间是我们路由器，但是不要写路由器这三个字，右边是路由器接入设备，这三者直接间隔距离大一点
最低0.47元/天 解锁文章
扫一扫
1277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
