jesxion/smart-project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重建 device.html 使用 WeUI + Remix Icon

Browse Source 
- 顶栏使用 page-hd + ri-arrow-left-s-line 图标
- 基本信息卡片使用 weui-panel
- 设备图标使用 ri-hammer-line (塔吊) / ri-arrow-up-down-line (升降机), 48px
- 状态标签使用 weui-badge 在线(绿色)/离线(灰色)
- 实时数据使用 data-grid 2列布局
- 告警使用 ri-error-warning-line (危险/橙色) / ri-alert-line (警告/黄色)
- 刷新栏显示更新时间 + ri-refresh-line 按钮
- 底部 Tabbar 使用 weui-tabbar, 设备高亮 ri-archive-fill
- JS: getQueryParam('id'), loadRealtime(), 30秒自动刷新
This commit is contained in:
Jesxion
2026-04-14 12:56:52 +08:00
parent e80c0465c0
commit 31bc478b1a
1 changed files with 97 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
h5/device.html
View File

@@ -2,83 +2,104 @@
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>设备详情</title>
<link rel="stylesheet" href="css/variables.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/weui@2.5.4/dist/style/weui.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="app">
<!-- 顶栏 -->
<header class="top-bar">
<a href="devices.html" class="top-bar-back">‹</a>
<h1 class="top-bar-title" id="pageTitle">设备详情</h1>
<span class="top-bar-empty"></span>
<div class="page">
<!-- 顶栏 page-hd -->
<header class="page-hd">
<a href="devices.html" class="page-hd__back">
<i class="ri-arrow-left-s-line"></i>
</a>
<div class="page-hd__title" id="pageTitle">设备详情</div>
<span class="page-hd__empty"></span>
</header>
<!-- 页面内容 -->
<div class="page-content">
<!-- 基本信息卡片 -->
<div class="card" id="infoCard">
<div class="device-info">
<div class="device-info-left">
<span class="device-info-icon" id="deviceIcon">🏗️</span>
<div class="device-info-text">
<div class="device-info-name" id="deviceName">加载中...</div>
<div class="device-info-model" id="deviceModel">-</div>
<div class="device-info-location" id="deviceLocation">-</div>
<div class="page-bd">
<!-- 基本信息卡片 weui-panel -->
<div class="weui-panel">
<div class="weui-panel__bd">
<div class="device-info">
<div class="device-info-left">
<div class="device-info-icon" id="deviceIcon">
<i class="ri-hammer-line" style="font-size: 48px;"></i>
</div>
<div class="device-info-text">
<div class="device-info-name" id="deviceName">加载中...</div>
<div class="device-info-model" id="deviceModel">-</div>
<div class="device-info-location" id="deviceLocation">
<i class="ri-map-pin-line"></i>
<span id="locationText">-</span>
</div>
</div>
</div>
<div class="device-info-right">
<span class="weui-badge" id="statusBadge">-</span>
<div class="device-last-seen" id="lastSeen">-</div>
</div>
</div>
<div class="device-info-right">
<span class="device-status-badge" id="statusBadge">-</span>
<div class="device-last-seen" id="lastSeen">-</div>
</div>
</div>
</div>
<!-- 告警Banner -->
<div class="alert-banner hidden" id="alertBanner">
<span class="alert-banner-icon" id="alertIcon">⚠️</span>
<i class="alert-banner-icon" id="alertIcon"></i>
<span class="alert-banner-msg" id="alertMsg"></span>
</div>
<!-- 实时数据卡片 -->
<div class="card">
<div class="card-title">实时数据</div>
<div class="data-grid" id="dataGrid"></div>
<!-- 实时数据卡片 weui-panel -->
<div class="weui-panel">
<div class="weui-panel__hd">实时数据</div>
<div class="weui-panel__bd">
<div class="data-grid" id="dataGrid"></div>
</div>
</div>
<!-- 刷新栏 -->
<div class="refresh-bar">
<span class="refresh-time" id="refreshTime">-</span>
<button class="btn btn-secondary btn-sm" id="refreshBtn">手动刷新</button>
<span class="refresh-time" id="refreshTime">更新时间: --:--</span>
<button class="btn btn-secondary btn-sm" id="refreshBtn">
<i class="ri-refresh-line"></i>
<span>刷新</span>
</button>
</div>
</div>
<!-- 底部Tab栏 -->
<nav class="tab-bar">
<a href="index.html" class="tab-item">
<span class="tab-icon">🏠</span>
<span class="tab-label">首页</span>
<!-- 底部Tabbar weui-tabbar -->
<div class="weui-tabbar">
<a href="index.html" class="weui-tabbar__item">
<div class="weui-tabbar__icon">
<i class="ri-home-line"></i>
</div>
<p class="weui-tabbar__label">首页</p>
</a>
<a href="devices.html" class="tab-item active">
<span class="tab-icon">📋</span>
<span class="tab-label">设备</span>
<a href="devices.html" class="weui-tabbar__item weui-bar__item_on">
<div class="weui-tabbar__icon">
<i class="ri-archive-fill"></i>
</div>
<p class="weui-tabbar__label">设备</p>
</a>
<a href="capture.html" class="tab-item">
<span class="tab-icon">📷</span>
<span class="tab-label">随手拍</span>
<a href="report.html" class="weui-tabbar__item">
<div class="weui-tabbar__icon">
<i class="ri-camera-line"></i>
</div>
<p class="weui-tabbar__label">随手拍</p>
</a>
<a href="log.html" class="tab-item">
<span class="tab-icon">📝</span>
<span class="tab-label">日志</span>
<a href="logs.html" class="weui-tabbar__item">
<div class="weui-tabbar__icon">
<i class="ri-file-list-3-line"></i>
</div>
<p class="weui-tabbar__label">日志</p>
</a>
</nav>
</div>
</div>
<script src="js/variables.js"></script>
<script src="js/api.js"></script>
<script src="js/mock.js"></script>
<script src="js/api.js"></script>
<script src="js/app.js"></script>
<script>
requireAuth();
@@ -97,7 +118,7 @@
const ELEVATOR_FIELDS = [
{ key: 'realtimeWeight', label: '载重', unit: 't' },
{ key: 'realtimeSpeed', label: '运行速度', unit: 'm/s' },
{ key: 'realtimeHeight', label: '当前楼层', unit: '层' },
{ key: 'realtimeHeight', label: '当前楼层', unit: 'm' },
{ key: 'realtimeDipX', label: 'X轴倾角', unit: '°' },
{ key: 'realtimeDipY', label: 'Y轴倾角', unit: '°' },
{ key: 'outDoorStatus', label: '门状态', unit: '' }
@@ -106,7 +127,6 @@
const DOOR_STATUS_MAP = { '0': '关闭', '1': '打开' };
const id = getQueryParam('id');
const deviceId = id; // alias for clarity
if (!id) location.href = 'devices.html';
let deviceInfo = null;
@@ -123,12 +143,21 @@
if (data.alert && data.alertMsg) {
alertBanner.classList.remove('hidden');
alertBanner.className = 'alert-banner alert-' + data.alert;
alertBanner.querySelector('.alert-banner-icon').textContent = data.alert === 'danger' ? '🔴' : '🟡';
alertBanner.querySelector('.alert-banner-msg').textContent = data.alertMsg;
const alertIcon = document.getElementById('alertIcon');
if (data.alert === 'danger') {
alertIcon.className = 'alert-banner-icon ri-error-warning-line';
} else {
alertIcon.className = 'alert-banner-icon ri-alert-line';
}
document.getElementById('alertMsg').textContent = data.alertMsg;
} else {
alertBanner.classList.add('hidden');
}
document.getElementById('refreshTime').textContent = '刷新时间: ' + formatTime(new Date().toLocaleString('zh-CN'));
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
document.getElementById('refreshTime').textContent = '更新时间: ' + hours + ':' + minutes;
}
async function loadRealtime() {
@@ -136,13 +165,25 @@
if (!deviceInfo) {
deviceInfo = devRes.data.items.find(d => d.id === id);
if (!deviceInfo) { location.href = 'devices.html'; return; }
document.getElementById('pageTitle').textContent = deviceInfo.name;
document.getElementById('deviceIcon').textContent = getDeviceIcon(deviceInfo.type);
document.getElementById('deviceName').textContent = deviceInfo.name;
document.getElementById('deviceModel').textContent = deviceInfo.model;
document.getElementById('deviceLocation').textContent = '📍 ' + deviceInfo.location;
document.getElementById('statusBadge').textContent = getStatusText(deviceInfo.status);
document.getElementById('statusBadge').className = 'device-status-badge ' + getStatusClass(deviceInfo.status);
document.getElementById('locationText').textContent = deviceInfo.location;
// Set device icon based on type
const iconEl = document.getElementById('deviceIcon');
if (deviceInfo.type === 'tower_crane') {
iconEl.innerHTML = '<i class="ri-hammer-line" style="font-size: 48px;"></i>';
} else {
iconEl.innerHTML = '<i class="ri-arrow-up-down-line" style="font-size: 48px;"></i>';
}
// Set status badge
const badge = document.getElementById('statusBadge');
badge.textContent = deviceInfo.status === 'online' ? '在线' : '离线';
badge.className = 'weui-badge ' + (deviceInfo.status === 'online' ? 'weui-badge_success' : 'weui-badge_gray');
document.getElementById('lastSeen').textContent = '最后在线: ' + formatTime(deviceInfo.lastSeen);
}
renderRealtime(rtRes.data, deviceInfo.type);