生产管理系统前端 - 更新瓦力提交的产品原型到参考目录
This commit is contained in:
216
src/MANUAL_UPDATE_REQUIRED.md
Normal file
216
src/MANUAL_UPDATE_REQUIRED.md
Normal file
@@ -0,0 +1,216 @@
|
||||
# ⚠️ 需要手动更新 - 几何计算地图选点功能
|
||||
|
||||
## 📋 现状
|
||||
|
||||
由于 `/components/field/FieldSpatialQuery.tsx` 文件较大（约1900行），且存在重复的TabsContent结构，自动修改工具无法精确定位需要修改的代码块。
|
||||
|
||||
**已完成的工作：**
|
||||
- ✅ 创建了 `MapPointPicker` 组件 (`/components/field/MapPointPicker.tsx`)
|
||||
- ✅ 添加了必要的状态管理
|
||||
- ✅ 导入了必要的组件和图标
|
||||
|
||||
**需要手动完成：**
|
||||
- ⚠️ 修改对话框中的5个 TabsContent 部分
|
||||
|
||||
---
|
||||
|
||||
## 🔧 手动修改步骤
|
||||
|
||||
### 步骤1: 打开文件
|
||||
|
||||
打开 `/components/field/FieldSpatialQuery.tsx` 文件
|
||||
|
||||
### 步骤2: 定位到对话框
|
||||
|
||||
搜索 `{/* 几何计算对话框 */}`（约第1435行）
|
||||
|
||||
### 步骤3: 修改5个TabsContent
|
||||
|
||||
#### 3.1 面积计算（约第1470行）
|
||||
|
||||
**找到：**
|
||||
```tsx
|
||||
{/* 面积计算 */}
|
||||
<TabsContent value="area" className="space-y-4">
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3>多边形坐标点</h3>
|
||||
...
|
||||
```
|
||||
|
||||
**替换为：**
|
||||
```tsx
|
||||
{/* 面积计算 */}
|
||||
<TabsContent value="area" className="space-y-4">
|
||||
{/* 选择方式切换 */}
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant={mapPickMode === 'polygon' ? 'default' : 'outline'}
|
||||
onClick={() => setMapPickMode(mapPickMode === 'polygon' ? null : 'polygon')}
|
||||
className="flex-1"
|
||||
>
|
||||
<MousePointer2 className="w-4 h-4 mr-2" />
|
||||
{mapPickMode === 'polygon' ? '正在使用地图选点' : '地图选点'}
|
||||
</Button>
|
||||
<Button
|
||||
variant={mapPickMode === null ? 'default' : 'outline'}
|
||||
onClick={() => setMapPickMode(null)}
|
||||
className="flex-1"
|
||||
>
|
||||
<Edit3 className="w-4 h-4 mr-2" />
|
||||
手动输入坐标
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{mapPickMode === 'polygon' ? (
|
||||
<MapPointPicker
|
||||
points={geomPoints}
|
||||
mode="polygon"
|
||||
onPointsChange={setGeomPoints}
|
||||
height="400px"
|
||||
title="在地图上选择多边形顶点"
|
||||
/>
|
||||
) : (
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3>多边形坐标点</h3>
|
||||
...原有的手动输入代码保持不变...
|
||||
```
|
||||
|
||||
注意：保留原有的：
|
||||
- 所有坐标输入框代码
|
||||
- 添加点/删除点按钮
|
||||
- 结果显示部分
|
||||
|
||||
#### 3.2 周长计算（约第1550行）
|
||||
|
||||
使用相同的模式修改
|
||||
|
||||
#### 3.3 中心点计算（约第1610行）
|
||||
|
||||
使用相同的模式修改
|
||||
|
||||
#### 3.4 包围盒计算（约最后一个多边形计算）
|
||||
|
||||
使用相同的模式修改
|
||||
|
||||
#### 3.5 距离计算（在 "distance" TabsContent中）
|
||||
|
||||
这个需要为两个点分别添加地图选择：
|
||||
|
||||
```tsx
|
||||
{/* 距离计算 */}
|
||||
<TabsContent value="distance" className="space-y-4">
|
||||
{/* 点1选择 */}
|
||||
<Card className="p-6">
|
||||
<h3 className="mb-4">点1坐标</h3>
|
||||
|
||||
<div className="flex gap-2 mb-4">
|
||||
<Button
|
||||
variant={mapPickMode === 'distance-p1' ? 'default' : 'outline'}
|
||||
onClick={() => setMapPickMode(mapPickMode === 'distance-p1' ? null : 'distance-p1')}
|
||||
className="flex-1"
|
||||
>
|
||||
<MousePointer2 className="w-4 h-4 mr-2" />
|
||||
{mapPickMode === 'distance-p1' ? '正在使用地图选点' : '地图选点'}
|
||||
</Button>
|
||||
<Button
|
||||
variant={mapPickMode !== 'distance-p1' ? 'default' : 'outline'}
|
||||
onClick={() => setMapPickMode(null)}
|
||||
className="flex-1"
|
||||
>
|
||||
<Edit3 className="w-4 h-4 mr-2" />
|
||||
手动输入坐标
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{mapPickMode === 'distance-p1' ? (
|
||||
<MapPointPicker
|
||||
points={[distPoint1]}
|
||||
mode="single"
|
||||
onPointsChange={(points) => setDistPoint1(points[0] || distPoint1)}
|
||||
height="300px"
|
||||
title="在地图上选择点1位置"
|
||||
/>
|
||||
) : (
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-sm text-muted-foreground">纬度</label>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.000001"
|
||||
value={distPoint1.lat}
|
||||
onChange={(e) => setDistPoint1({ ...distPoint1, lat: parseFloat(e.target.value) || 0 })}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm text-muted-foreground">经度</label>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.000001"
|
||||
value={distPoint1.lng}
|
||||
onChange={(e) => setDistPoint1({ ...distPoint1, lng: parseFloat(e.target.value) || 0 })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* 点2选择 - 类似结构，使用 mapPickMode === 'distance-p2' */}
|
||||
...
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📝 详细示例
|
||||
|
||||
完整的修改示例已保存在：
|
||||
- `/GEOMETRY_MAP_PICKER_IMPLEMENTATION.md` - 完整实现指南
|
||||
- `/MAP_POINT_PICKER_GUIDE.md` - 用户使用指南
|
||||
|
||||
---
|
||||
|
||||
## ✅ 验证清单
|
||||
|
||||
修改完成后，测试以下功能：
|
||||
|
||||
### 面积计算
|
||||
- [ ] 切换到地图选点模式
|
||||
- [ ] 在地图上点击添加4个点
|
||||
- [ ] 验证多边形自动绘制
|
||||
- [ ] 切换回手动输入模式
|
||||
- [ ] 验证坐标保留
|
||||
- [ ] 计算面积成功
|
||||
|
||||
### 周长、中心点、包围盒
|
||||
- [ ] 使用相同测试流程
|
||||
|
||||
### 距离计算
|
||||
- [ ] 点1使用地图选择
|
||||
- [ ] 点2使用地图选择
|
||||
- [ ] 计算距离成功
|
||||
|
||||
---
|
||||
|
||||
## 🎯 关键点
|
||||
|
||||
1. **保留原有代码**：只在前面添加地图/手动切换按钮和地图组件，不要删除原有的手动输入代码
|
||||
2. **条件渲染**：使用 `mapPickMode` 状态来控制显示地图还是手动输入
|
||||
3. **计算按钮**：保留在外面，无论哪种模式都可以使用
|
||||
4. **结果显示**：保持原样不变
|
||||
|
||||
---
|
||||
|
||||
## 📞 需要帮助？
|
||||
|
||||
如果在修改过程中遇到问题：
|
||||
|
||||
1. 参考 `/GEOMETRY_MAP_PICKER_IMPLEMENTATION.md` 中的完整代码示例
|
||||
2. 查看 MapPointPicker 组件的 Props 定义
|
||||
3. 确保所有导入都已正确添加
|
||||
|
||||
---
|
||||
|
||||
**创建日期：** 2025-10-18
|
||||
**状态：** 等待手动修改
|
||||
**预计时间：** 15-20分钟
|
||||
Reference in New Issue
Block a user