96 lines
3.0 KiB
HTML
96 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>设备列表</title>
|
||
<link rel="stylesheet" href="css/variables.css">
|
||
<link rel="stylesheet" href="css/style.css">
|
||
</head>
|
||
<body>
|
||
<div class="app">
|
||
<!-- 顶栏 -->
|
||
<header class="top-bar">
|
||
<a href="index.html" class="top-bar-back">‹</a>
|
||
<h1 class="top-bar-title">设备列表</h1>
|
||
</header>
|
||
|
||
<!-- 子Tab -->
|
||
<div class="sub-tabs" id="subTabs">
|
||
<button class="sub-tab active" data-type="">全部</button>
|
||
<button class="sub-tab" data-type="tower_crane">塔吊</button>
|
||
<button class="sub-tab" data-type="elevator">升降机</button>
|
||
</div>
|
||
|
||
<!-- 设备卡片网格 -->
|
||
<div class="device-grid" id="deviceGrid"></div>
|
||
|
||
<!-- 底部Tab栏 -->
|
||
<nav class="tab-bar">
|
||
<a href="index.html" class="tab-item">
|
||
<span class="tab-icon">🏠</span>
|
||
<span class="tab-label">首页</span>
|
||
</a>
|
||
<a href="devices.html" class="tab-item active">
|
||
<span class="tab-icon">📋</span>
|
||
<span class="tab-label">设备</span>
|
||
</a>
|
||
<a href="capture.html" class="tab-item">
|
||
<span class="tab-icon">📷</span>
|
||
<span class="tab-label">随手拍</span>
|
||
</a>
|
||
<a href="log.html" class="tab-item">
|
||
<span class="tab-icon">📝</span>
|
||
<span class="tab-label">日志</span>
|
||
</a>
|
||
</nav>
|
||
</div>
|
||
|
||
<script src="js/variables.js"></script>
|
||
<script src="js/api.js"></script>
|
||
<script src="js/mock.js"></script>
|
||
<script src="js/app.js"></script>
|
||
<script>
|
||
requireAuth();
|
||
|
||
let currentType = '';
|
||
|
||
function renderDevices(devices) {
|
||
const grid = document.getElementById('deviceGrid');
|
||
if (devices.length === 0) {
|
||
grid.innerHTML = '<div class="empty-tip">暂无设备</div>';
|
||
return;
|
||
}
|
||
grid.innerHTML = devices.map(d => `
|
||
<a href="device.html?id=${d.id}" class="device-card">
|
||
<div class="device-card-header">
|
||
<span class="device-card-icon">${getDeviceIcon(d.type)}</span>
|
||
<span class="device-card-status ${getStatusClass(d.status)}"></span>
|
||
</div>
|
||
<div class="device-card-name">${d.name}</div>
|
||
<div class="device-card-model">${d.model}</div>
|
||
<div class="device-card-location">📍 ${d.location}</div>
|
||
</a>
|
||
`).join('');
|
||
}
|
||
|
||
async function loadDevices(type = '') {
|
||
currentType = type;
|
||
const res = await apiGetDevices({ type });
|
||
renderDevices(res.data.items);
|
||
}
|
||
|
||
// 子Tab点击事件
|
||
document.getElementById('subTabs').addEventListener('click', e => {
|
||
const tab = e.target.closest('.sub-tab');
|
||
if (!tab) return;
|
||
document.querySelectorAll('.sub-tab').forEach(t => t.classList.remove('active'));
|
||
tab.classList.add('active');
|
||
loadDevices(tab.dataset.type);
|
||
});
|
||
|
||
loadDevices();
|
||
</script>
|
||
</body>
|
||
</html>
|