cavin/smart-crop-ui
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

生产管理系统前端 - 瓦力0.73原型图提交

Browse Source
This commit is contained in:
peng
2025-10-28 19:51:17 +08:00
parent 58f5ca7f22
commit e3829d2fcc
154 changed files with 24913 additions and 9377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

620
src/ENVIRONMENT_MONITORING_UPGRADED.html Normal file
View File

@@ -0,0 +1,620 @@
<!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: 1200px;
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;
}
code {
background: #1f2937;
color: #10b981;
padding: 3px 8px;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 14px;
}
pre {
background: #1f2937;
color: #e5e7eb;
padding: 15px;
border-radius: 8px;
overflow-x: auto;
margin: 15px 0;
}
pre code {
background: none;
padding: 0;
color: inherit;
}
.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;
}
.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;
}
.comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 20px 0;
}
.comparison-item {
background: #f9fafb;
border: 2px solid #e5e7eb;
border-radius: 8px;
padding: 15px;
}
.comparison-item.before {
border-color: #f87171;
}
.comparison-item.after {
border-color: #34d399;
}
.comparison-item h4 {
margin-top: 0;
}
</style>
</head>
<body>
<div class="container">
<h1>🌿 环境监测模块升级完成</h1>
<div class="success">
<h3>✅ 升级完成</h3>
<p><strong>地块环境监测 - 环境监测</strong> 模块已成功升级！</p>
<ul class="feature-list">
<li>✅ 移除了导出数据按钮</li>
<li>✅ 添加设备弹窗已升级：去掉设备名称输入，改为从物联设备数据接入中选择</li>
<li>✅ 设备数据源自AI作物模型精准决策系统-全域数据感知中心-物联设备数据接入维护</li>
<li>✅ 自动更新设备绑定状态</li>
</ul>
</div>
<div class="info">
<h3>📋 主要修改内容</h3>
<h4>1. 移除导出数据按钮</h4>
<div class="comparison">
<div class="comparison-item before">
<h4>🔴 修改前</h4>
<pre><code><Button onClick={handleExportData}>
<Download />
导出数据
</Button>
<Button onClick={handleAddDevice}>
<Plus />
添加设备
</Button></code></pre>
</div>
<div class="comparison-item after">
<h4>🟢 修改后</h4>
<pre><code><Button onClick={handleAddDevice}>
<Plus />
添加设备
</Button></code></pre>
</div>
</div>
<h4>2. 添加设备弹窗升级</h4>
<div class="comparison">
<div class="comparison-item before">
<h4>🔴 修改前</h4>
<ul class="feature-list">
<li>❌ 手动输入设备名称</li>
<li>❌ 从本地设备库选择设备类型</li>
<li>❌ 设备数据孤立</li>
</ul>
</div>
<div class="comparison-item after">
<h4>🟢 修改后</h4>
<ul class="feature-list">
<li>✅ 从物联设备数据接入中选择设备</li>
<li>✅ 显示设备编码、名称、厂商、型号</li>
<li>✅ 自动同步设备信息</li>
<li>✅ 自动更新绑定状态</li>
</ul>
</div>
</div>
</div>
<div class="feature">
<h3>🎯 核心功能升级</h3>
<h4>📡 物联设备数据源集成</h4>
<ul class="feature-list">
<li>✅ <strong>数据源</strong>：从 <code>localStorage</code> 读取 <code>smart_agriculture_ai_iot_devices</code></li>
<li>✅ <strong>设备筛选</strong>：只显示 <code>type === '环境监测站'</code> 且 <code>bindingStatus === '未绑定'</code> 的设备</li>
<li>✅ <strong>实时加载</strong>：每次打开添加设备弹窗时重新加载可用设备列表</li>
<li>✅ <strong>设备信息</strong>：显示设备编码、名称、厂商、型号等完整信息</li>
</ul>
<h4>🔄 设备绑定状态自动更新</h4>
<ul class="feature-list">
<li>✅ 添加设备后，自动更新AI数据中心的设备绑定状态</li>
<li>✅ 设置 <code>bindingStatus = '已绑定'</code></li>
<li>✅ 记录 <code>bindingSystem = '地块环境监测-环境监测'</code></li>
<li>✅ 已绑定的设备不再出现在可选列表中</li>
</ul>
<h4>📝 表单字段变化</h4>
<table>
<thead>
<tr>
<th>字段</th>
<th>修改前</th>
<th>修改后</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>设备名称</strong></td>
<td>❌ 手动输入</td>
<td>✅ 从选择的设备自动获取</td>
</tr>
<tr>
<td><strong>选择设备</strong></td>
<td>❌ 本地设备类型库</td>
<td>✅ AI数据中心物联设备</td>
</tr>
<tr>
<td><strong>选择地块</strong></td>
<td>✅ 保持不变</td>
<td>✅ 保持不变</td>
</tr>
<tr>
<td><strong>安装位置</strong></td>
<td>✅ 保持不变</td>
<td>✅ 保持不变</td>
</tr>
</tbody>
</table>
</div>
<div class="info">
<h3>💻 技术实现细节</h3>
<h4>1. 新增接口类型</h4>
<pre><code>interface IoTDevice {
id: string;
code: string;
name: string;
type: string;
deviceTypeId?: string;
manufacturer: string;
model: string;
location: string;
fieldId: string;
fieldName: string;
protocol: string;
status: string;
bindingStatus: '未绑定' | '已绑定';
bindingSystem?: string;
batteryLevel?: number;
signalStrength?: number;
sensors: Array<{...}>;
}</code></pre>
<h4>2. 加载物联设备</h4>
<pre><code>useEffect(() => {
const loadIoTDevices = () => {
const data = localStorage.getItem('smart_agriculture_ai_iot_devices');
if (data) {
const devices: IoTDevice[] = JSON.parse(data);
// 只显示环境监测站类型且未绑定的设备
const environmentDevices = devices.filter(
d => d.type === '环境监测站' && d.bindingStatus === '未绑定'
);
setAvailableIoTDevices(environmentDevices);
}
};
loadIoTDevices();
}, [showDeviceDialog]);</code></pre>
<h4>3. 设备选择下拉框</h4>
<pre><code><Select value={deviceForm.iotDeviceId}
onValueChange={(value) =>
setDeviceForm({ ...deviceForm, iotDeviceId: value })
}>
<SelectTrigger>
<SelectValue placeholder="请从物联设备数据接入中选择" />
</SelectTrigger>
<SelectContent>
{availableIoTDevices.length === 0 ? (
<div className="p-4 text-sm text-muted-foreground text-center">
暂无可用设备<br/>
请先在AI系统-全域数据感知中心-物联设备数据接入中
添加环境监测站设备
</div>
) : (
availableIoTDevices.map((device) => (
<SelectItem key={device.id} value={device.id}>
{device.code} - {device.name}
({device.manufacturer} {device.model})
</SelectItem>
))
)}
</SelectContent>
</Select></code></pre>
<h4>4. 保存设备并更新绑定状态</h4>
<pre><code>// 添加新设备
const newDevice: SensorDevice = {
id: `device-${Date.now()}`,
name: iotDevice.code, // 使用设备编码
type: iotDevice.type, // 使用设备类型
location: deviceForm.location,
fieldId: deviceForm.fieldId,
fieldName: field.name,
status: 'online',
battery: iotDevice.batteryLevel || 100,
lastUpdate: new Date().toLocaleString('zh-CN'),
sensors: { ... },
};
// 更新AI数据中心的设备绑定状态
const allIoTDevices = localStorage.getItem('smart_agriculture_ai_iot_devices');
if (allIoTDevices) {
const devices: IoTDevice[] = JSON.parse(allIoTDevices);
const updatedDevices = devices.map(d =>
d.id === deviceForm.iotDeviceId
? {
...d,
bindingStatus: '已绑定',
bindingSystem: '地块环境监测-环境监测'
}
: d
);
localStorage.setItem('smart_agriculture_ai_iot_devices',
JSON.stringify(updatedDevices));
}</code></pre>
</div>
<div class="feature">
<h3>🎨 界面变化</h3>
<h4>修改前的添加设备弹窗：</h4>
<pre><code>┌─────────────────────────────────────┐
│ 添加设备 │
├──────────<EFBFBD><EFBFBD>──────────────────────────┤
│ 设备名称: [_______________] │
│ 选择地块: [下拉选择地块] │
│ 选择设备: [本地设备类型库] │
│ 安装位置: [_______________] │
│ │
│ [取消] [保存] │
└─────────────────────────────────────┘</code></pre>
<h4>修改后的添加设备弹窗：</h4>
<pre><code>┌─────────────────────────────────────────────┐
│ 添加设备 │
│ 从物联设备数据接入中选择设备并配置 │
├─────────────────────────────────────────────┤
│ 选择设备: [WS-2024-001 - 1号气象站 │
│ (华为 HW-WS-Pro) ▼] │
│ │
│ 选择地块: [下拉选择地块] │
│ 安装位置: [_______________] │
│ │
│ [取消] [保存] │
└─────────────────────────────────────────────┘</code></pre>
</div>
<div class="warning">
<h3>⚠️ 重要说明</h3>
<ul class="feature-list">
<li>⚠️ <strong>数据源要求</strong>：需要先在AI系统-全域数据感知中心-物联设备数据接入中添加环境监测站设备</li>
<li>⚠️ <strong>设备类型筛选</strong>：只显示 <code>type === '环境监测站'</code> 的设备</li>
<li>⚠️ <strong>绑定状态</strong>：只显示 <code>bindingStatus === '未绑定'</code> 的设备</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>：在AI系统-全域数据感知中心-物联设备数据接入中添加环境监测站设备
</div>
<div class="step">
<strong>步骤2</strong>：设备保存到 <code>localStorage</code> 的 <code>smart_agriculture_ai_iot_devices</code> 中，<code>bindingStatus = '未绑定'</code>
</div>
<div class="step">
<strong>步骤3</strong>：在地块环境监测-环境监测中点击"添加设备"
</div>
<div class="step">
<strong>步骤4</strong>：系统从 <code>smart_agriculture_ai_iot_devices</code> 读取未绑定的环境监测站设备
</div>
<div class="step">
<strong>步骤5</strong>：用户选择设备、地块和安装位置
</div>
<div class="step">
<strong>步骤6</strong>：保存设备到本地环境监测设备列表
</div>
<div class="step">
<strong>步骤7</strong>：更新 <code>smart_agriculture_ai_iot_devices</code> 中对应设备的 <code>bindingStatus = '已绑定'</code>
</div>
<div class="step">
<strong>步骤8</strong>：该设备不再出现在可选设备列表中
</div>
</div>
</div>
<div class="feature">
<h3>🔍 如何测试</h3>
<h4>测试步骤1：添加物联设备（前置条件）</h4>
<div class="steps">
<div class="step">进入：AI作物模型精准决策系统</div>
<div class="step">点击：全域数据感知中心</div>
<div class="step">选择：物联设备数据接入</div>
<div class="step">点击：添加设备</div>
<div class="step">设备类型选择：环境监测站</div>
<div class="step">填写设备信息并保存</div>
</div>
<h4>测试步骤2：在环境监测中使用设备</h4>
<div class="steps">
<div class="step">进入：田块地图管理系统 → 数据采集与监测 → 环境监测</div>
<div class="step">点击右上角的"添加设备"按钮</div>
<div class="step">在"选择设备"下拉框中，应该能看到刚才添加的环境监测站设备</div>
<div class="step">设备显示格式：<code>设备编码 - 设备名称 (厂商 型号)</code></div>
<div class="step">选择设备、选择地块、填写安装位置</div>
<div class="step">点击保存</div>
<div class="step">设备应该出现在设备列表中</div>
<div class="step">再次打开"添加设备"弹窗，刚才选择的设备应该不在列表中（已绑定）</div>
</div>
<h4>测试步骤3：验证绑定状态</h4>
<div class="steps">
<div class="step">返回：AI系统 → 全域数据感知中心 → 物联设备数据接入</div>
<div class="step">在设备列表中找到刚才绑定的设备</div>
<div class="step">绑定状态应该显示为"已绑定"</div>
<div class="step">绑定系统应该显示为"地块环境监测-环境监测"</div>
</div>
</div>
<div class="success">
<h3>✅ 功能对比总结</h3>
<table>
<thead>
<tr>
<th>功能</th>
<th>修改前</th>
<th>修改后</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>导出数据按钮</strong></td>
<td>✅ 有</td>
<td>❌ 已移除</td>
</tr>
<tr>
<td><strong>设备名称</strong></td>
<td>✅ 手动输入</td>
<td>❌ 自动获取（去掉输入框）</td>
</tr>
<tr>
<td><strong>设备数据源</strong></td>
<td>本地设备库</td>
<td>AI数据中心物联设备</td>
</tr>
<tr>
<td><strong>设备筛选</strong></td>
<td>显示所有类型</td>
<td>只显示环境监测站且未绑定</td>
</tr>
<tr>
<td><strong>设备信息</strong></td>
<td>只有类型名称</td>
<td>编码+名称+厂商+型号</td>
</tr>
<tr>
<td><strong>绑定状态</strong></td>
<td>无</td>
<td>自动更新并同步</td>
</tr>
<tr>
<td><strong>数据一致性</strong></td>
<td>各系统独立</td>
<td>统一数据源</td>
</tr>
</tbody>
</table>
</div>
<div class="info">
<h3>📊 代码变更统计</h3>
<table>
<thead>
<tr>
<th>变更类型</th>
<th>内容</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>删除</strong></td>
<td>Download图标导入</td>
<td>1行</td>
</tr>
<tr>
<td><strong>删除</strong></td>
<td>导出数据按钮</td>
<td>4行</td>
</tr>
<tr>
<td><strong>删除</strong></td>
<td>handleExportData函数</td>
<td>3行</td>
</tr>
<tr>
<td><strong>删除</strong></td>
<td>本地设备库常量</td>
<td>7行</td>
</tr>
<tr>
<td><strong>新增</strong></td>
<td>IoTDevice接口定义</td>
<td>23行</td>
</tr>
<tr>
<td><strong>新增</strong></td>
<td>物联设备加载逻辑</td>
<td>15行</td>
</tr>
<tr>
<td><strong>修改</strong></td>
<td>设备表单结构</td>
<td>10行</td>
</tr>
<tr>
<td><strong>修改</strong></td>
<td>添加设备弹窗</td>
<td>30行</td>
</tr>
<tr>
<td><strong>修改</strong></td>
<td>保存设备逻辑</td>
<td>25行</td>
</tr>
</tbody>
</table>
</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>
<div class="success">
<h3>⚡ 立即查看</h3>
<p><strong>步骤1：清除浏览器缓存并刷新</strong></p>
<p><strong>步骤2：准备物联设备（如果还没有）</strong></p>
<ul class="feature-list">
<li>进入：AI作物模型精准决策系统 → 全域数据感知中心 → 物联设备数据接入</li>
<li>添加几个"环境监测站"类型的设备</li>
</ul>
<p><strong>步骤3：测试环境监测</strong></p>
<ul class="feature-list">
<li>进入：田块地图管理系统 → 数据采集与监测 → 环境监测</li>
<li>确认右上角只有"添加设备"按钮，没有"导出数据"按钮</li>
<li>点击"添加设备"，查看新的设备选择界面</li>
<li>选择一个物联设备，填写信息并保存</li>
<li>验证设备成功添加到列表中</li>
</ul>
<p><strong>步骤4：验证绑定状态</strong></p>
<ul class="feature-list">
<li>返回AI系统查看设备绑定状态已更新</li>
<li>再次打开添加设备弹窗，已绑定设备不在列表中</li>
</ul>
</div>
<div class="feature">
<h3>🎯 升级总结</h3>
<ul class="feature-list">
<li>✅ <strong>界面简化</strong>：移除导出数据按钮</li>
<li>✅ <strong>数据统一</strong>：设备数据源统一为AI数据中心</li>
<li>✅ <strong>自动填充</strong>：去掉设备名称输入，从选择的设备自动获取</li>
<li>✅ <strong>智能筛选</strong>：只显示环境监测站类型且未绑定的设备</li>
<li>✅ <strong>状态同步</strong>：添加设备后自动更新绑定状态</li>
<li>✅ <strong>用户体验</strong>：提供友好的提示信息</li>
<li>✅ <strong>数据一致</strong>：避免数据重复维护和不一致问题</li>
</ul>
</div>
</div>
</body>
</html>