350 lines
15 KiB
HTML
350 lines
15 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>
|
||
<style>
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||
max-width: 1000px;
|
||
margin: 50px auto;
|
||
padding: 20px;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
min-height: 100vh;
|
||
}
|
||
.container {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 40px;
|
||
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||
}
|
||
h1 {
|
||
color: #2d3748;
|
||
border-bottom: 3px solid #667eea;
|
||
padding-bottom: 15px;
|
||
margin-bottom: 25px;
|
||
}
|
||
.success {
|
||
background: #d1fae5;
|
||
border-left: 4px solid #10b981;
|
||
padding: 20px;
|
||
margin: 25px 0;
|
||
border-radius: 6px;
|
||
}
|
||
.info {
|
||
background: #dbeafe;
|
||
border-left: 4px solid #3b82f6;
|
||
padding: 20px;
|
||
margin: 25px 0;
|
||
border-radius: 6px;
|
||
}
|
||
.warning {
|
||
background: #fef3c7;
|
||
border-left: 4px solid #f59e0b;
|
||
padding: 20px;
|
||
margin: 25px 0;
|
||
border-radius: 6px;
|
||
}
|
||
.feature {
|
||
background: #f0fdf4;
|
||
border-left: 4px solid #22c55e;
|
||
padding: 15px;
|
||
margin: 15px 0;
|
||
border-radius: 6px;
|
||
}
|
||
.steps {
|
||
background: #f9fafb;
|
||
padding: 25px;
|
||
border-radius: 8px;
|
||
margin: 20px 0;
|
||
}
|
||
.step {
|
||
margin: 15px 0;
|
||
padding-left: 30px;
|
||
position: relative;
|
||
}
|
||
.step:before {
|
||
content: "✓";
|
||
position: absolute;
|
||
left: 0;
|
||
color: #10b981;
|
||
font-weight: bold;
|
||
font-size: 20px;
|
||
}
|
||
code {
|
||
background: #1f2937;
|
||
color: #10b981;
|
||
padding: 3px 8px;
|
||
border-radius: 4px;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 14px;
|
||
}
|
||
.feature-list {
|
||
margin: 15px 0;
|
||
padding-left: 20px;
|
||
}
|
||
.feature-list li {
|
||
margin: 10px 0;
|
||
line-height: 1.6;
|
||
}
|
||
.highlight {
|
||
background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
|
||
padding: 2px 6px;
|
||
border-radius: 3px;
|
||
font-weight: 600;
|
||
}
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin: 20px 0;
|
||
}
|
||
th, td {
|
||
padding: 12px;
|
||
text-align: left;
|
||
border-bottom: 1px solid #e5e7eb;
|
||
}
|
||
th {
|
||
background: #f9fafb;
|
||
font-weight: 600;
|
||
}
|
||
.badge {
|
||
display: inline-block;
|
||
padding: 4px 12px;
|
||
border-radius: 12px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
margin: 0 4px;
|
||
}
|
||
.badge-new {
|
||
background: #10b981;
|
||
color: white;
|
||
}
|
||
.badge-enhanced {
|
||
background: #3b82f6;
|
||
color: white;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>🚀 负载管理模块全面升级</h1>
|
||
|
||
<div class="success">
|
||
<h3>✅ 升级完成</h3>
|
||
<p><strong>农机负载管理 - 负载管理</strong> 模块已全面升级！</p>
|
||
<p>新增农机设备清单视图，深度集成设备实时监控数据，提供更直观的管理体验。</p>
|
||
<p class="highlight">请立即清除浏览器缓存并刷新页面查看新功能！</p>
|
||
</div>
|
||
|
||
<div class="info">
|
||
<h3>🎯 核心升级内容</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>功能</th>
|
||
<th>状态</th>
|
||
<th>说明</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>农机设备清单视图</strong></td>
|
||
<td><span class="badge badge-new">新增</span></td>
|
||
<td>为每台农机维护独立的挂载设备清单</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>设备监控集成</strong></td>
|
||
<td><span class="badge badge-new">新增</span></td>
|
||
<td>实时显示挂载设备的监控数据</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>详细时间记录</strong></td>
|
||
<td><span class="badge badge-enhanced">增强</span></td>
|
||
<td>记录挂载时间、拆卸时间（精确到秒）</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>传感器数据展示</strong></td>
|
||
<td><span class="badge badge-new">新增</span></td>
|
||
<td>显示设备传感器的实时数据</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>设备状态指示器</strong></td>
|
||
<td><span class="badge badge-new">新增</span></td>
|
||
<td>信号强度、电池电量、工作时长等</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="feature">
|
||
<h3>✨ 新增功能详解</h3>
|
||
|
||
<h4>1. 农机设备清单视图</h4>
|
||
<ul class="feature-list">
|
||
<li>📋 <strong>左右分栏布局</strong>：左侧农机列表，右侧该农机的挂载设备清单</li>
|
||
<li>🔍 <strong>快速搜索</strong>：可搜索农机名称、编号</li>
|
||
<li>📊 <strong>设备计数</strong>：显示每台农机已挂载的设备数量</li>
|
||
<li>🎯 <strong>选中高亮</strong>：当前选中的农机会有明显的视觉反馈</li>
|
||
</ul>
|
||
|
||
<h4>2. 设备监控深度集成</h4>
|
||
<ul class="feature-list">
|
||
<li>📡 <strong>实时数据更新</strong>：每5秒自动更新监控数据</li>
|
||
<li>📈 <strong>设备状态卡片</strong>：显示信号强度、电池电量、工作时长等</li>
|
||
<li>🔬 <strong>传感器数据</strong>：实时显示温度、速度、油耗等传感器读数</li>
|
||
<li>⚠️ <strong>状态预警</strong>：异常数据会有颜色标识（正常/警告/错误）</li>
|
||
<li>📊 <strong>进度条可视化</strong>：电量和信号强度使用进度条直观展示</li>
|
||
</ul>
|
||
|
||
<h4>3. 详细时间记录</h4>
|
||
<ul class="feature-list">
|
||
<li>🕐 <strong>挂载时间</strong>：记录日期（YYYY-MM-DD）+ 时间（HH:MM:SS）</li>
|
||
<li>🕑 <strong>拆卸时间</strong>：记录卸载的精确日期和时间</li>
|
||
<li>👤 <strong>操作人记录</strong>：记录挂载人和卸载人</li>
|
||
<li>📝 <strong>备注信息</strong>：支持添加挂载说明</li>
|
||
</ul>
|
||
|
||
<h4>4. 设备详情对话框</h4>
|
||
<ul class="feature-list">
|
||
<li>📑 <strong>双标签页设计</strong>：挂载信息 + 监控数据</li>
|
||
<li>📊 <strong>监控数据标签页</strong>：展示完整的设备监控信息</li>
|
||
<li>📈 <strong>传感器数据表格</strong>：列表展示所有传感器的实时读数</li>
|
||
<li>🎨 <strong>状态可视化</strong>：使用颜色和进度条展示设备状态</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="info">
|
||
<h3>🔄 使用流程</h3>
|
||
<div class="steps">
|
||
<div class="step"><strong>步骤1：</strong>在左侧农机列表中选择一台农机</div>
|
||
<div class="step"><strong>步骤2：</strong>右侧会显示该农机的挂载设备清单</div>
|
||
<div class="step"><strong>步骤3：</strong>查看每个设备的实时监控数据（信号、电量、传感器等）</div>
|
||
<div class="step"><strong>步骤4：</strong>点击"挂载设备"添加新设备到当前农机</div>
|
||
<div class="step"><strong>步骤5：</strong>点击眼睛图标查看设备详情和完整监控数据</div>
|
||
<div class="step"><strong>步骤6：</strong>点击垃圾桶图标卸载设备（会记录卸载时间）</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="feature">
|
||
<h3>📊 监控数据项</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>数据类型</th>
|
||
<th>显示位置</th>
|
||
<th>说明</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>信号强度</td>
|
||
<td>设备卡片 + 详情页</td>
|
||
<td>实时信号质量，带进度条</td>
|
||
</tr>
|
||
<tr>
|
||
<td>电池电量</td>
|
||
<td>设备卡片 + 详情页</td>
|
||
<td>剩余电量百分比，带进度条</td>
|
||
</tr>
|
||
<tr>
|
||
<td>工作时长</td>
|
||
<td>设备卡片 + 详情页</td>
|
||
<td>设备累计工作时间（小时）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>数据上报次数</td>
|
||
<td>设备卡片 + 详情页</td>
|
||
<td>设备累计上报数据的次数</td>
|
||
</tr>
|
||
<tr>
|
||
<td>设备温度</td>
|
||
<td>详情页</td>
|
||
<td>设备工作温度（°C）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>传感器数据</td>
|
||
<td>设备卡片 + 详情页</td>
|
||
<td>各类传感器的实时读数</td>
|
||
</tr>
|
||
<tr>
|
||
<td>最后更新时间</td>
|
||
<td>详情页</td>
|
||
<td>数据最后更新的时间戳</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="info">
|
||
<h3>💡 界面特性</h3>
|
||
<ul class="feature-list">
|
||
<li>🎨 <strong>渐变色统计卡片</strong>：顶部3个统计卡片，展示全局数据</li>
|
||
<li>🔄 <strong>自动刷新</strong>：监控数据每5秒自动更新，无需手动刷新</li>
|
||
<li>🌓 <strong>Dark模式支持</strong>：完美适配深色主题</li>
|
||
<li>📱 <strong>响应式设计</strong>：支持各种屏幕尺寸</li>
|
||
<li>🎯 <strong>状态颜色编码</strong>：在线(绿)、离线(灰)、故障(红)、维护(黄)</li>
|
||
<li>📊 <strong>进度条可视化</strong>：电量和信号强度使用进度条展示</li>
|
||
<li>⚡ <strong>实时状态指示</strong>：传感器异常会有颜色警告</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="warning">
|
||
<h3>🔗 与设备监控模块的集成</h3>
|
||
<ul class="feature-list">
|
||
<li>📡 <strong>数据同步</strong>：从设备实时监控模块获取监控数据</li>
|
||
<li>🔄 <strong>实时更新</strong>：监控数据自动同步更新</li>
|
||
<li>📊 <strong>数据关联</strong>：通过设备ID关联挂载记录和监控数据</li>
|
||
<li>🎯 <strong>状态联动</strong>：设备状态变化会实时反映在清单中</li>
|
||
<li>📈 <strong>历史追踪</strong>：记录设备从挂载到卸载的完整时间线</li>
|
||
</ul>
|
||
<p><strong>注意：</strong>监控数据目前为模拟数据，实际部署时需要对接真实的物联网设备数据接口。</p>
|
||
</div>
|
||
|
||
<div class="steps">
|
||
<h3>🔄 如何清除缓存并刷新？</h3>
|
||
<div class="step">Windows / Linux: 按 <code>Ctrl + Shift + R</code> 或 <code>Ctrl + F5</code></div>
|
||
<div class="step">Mac: 按 <code>Cmd + Shift + R</code></div>
|
||
<div class="step">或者：右键点击刷新按钮 → 选择"清空缓存并硬性重新加载"</div>
|
||
<div class="step">Chrome: F12 打开开发者工具 → 右键刷新按钮 → 清空缓存并硬性重新加载</div>
|
||
</div>
|
||
|
||
<div class="success">
|
||
<h3>⚡ 立即体验</h3>
|
||
<p><strong>1. 清除浏览器缓存</strong></p>
|
||
<p><strong>2. 刷新页面</strong></p>
|
||
<p><strong>3. 进入 智能农机管理系统 → 农机负载管理 → 负载管理</strong></p>
|
||
<p><strong>4. 选择一台农机查看其设备清单</strong></p>
|
||
<p><strong>5. 观察设备的实时监控数据</strong></p>
|
||
<p><strong>6. 点击眼睛图标查看完整的监控数据</strong></p>
|
||
</div>
|
||
|
||
<div class="info">
|
||
<h3>📝 数据存储</h3>
|
||
<ul class="feature-list">
|
||
<li><code>smart_agriculture_load_mount_records</code> - 挂载记录数据</li>
|
||
<li><code>smart_agriculture_iot_devices</code> - 物联设备数据（来自全域数据感知中心）</li>
|
||
<li>挂载记录包含：农机ID、设备ID、挂载日期时间、操作人、卸载日期时间、状态、备注</li>
|
||
<li>监控数据通过设备ID与挂载记录关联，实现深度集成</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature">
|
||
<h3>🎯 技术亮点</h3>
|
||
<ul class="feature-list">
|
||
<li>✅ 左右分栏布局，清单式管理</li>
|
||
<li>✅ 实时监控数据集成</li>
|
||
<li>✅ 自动数据更新机制</li>
|
||
<li>✅ 设备状态可视化</li>
|
||
<li>✅ 传感器数据实时展示</li>
|
||
<li>✅ 完整的时间线记录</li>
|
||
<li>✅ 响应式设计</li>
|
||
<li>✅ Dark模式支持</li>
|
||
<li>✅ 友好的用户交互</li>
|
||
<li>✅ 数据关联和联动</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|