生产管理系统前端 - 更新瓦力提交的产品原型到参考目录
This commit is contained in:
277
src/GEOMETRY_MAP_INTEGRATION_MANUAL_FIX.md
Normal file
277
src/GEOMETRY_MAP_INTEGRATION_MANUAL_FIX.md
Normal file
@@ -0,0 +1,277 @@
|
||||
# 几何计算地图选点功能 - 手动修复指南
|
||||
|
||||
## 问题描述
|
||||
`/components/field/FieldSpatialQuery.tsx` 文件包含重复的代码结构：
|
||||
- 页面主体部分有一套几何计算代码
|
||||
- **对话框**（Dialog）中有另一套几何计算代码（第1457-1914行）
|
||||
|
||||
需要为**对话框中**的以下3个Tab添加地图选点功能：
|
||||
1. 中心点计算 (centroid) - 第1692-1750行
|
||||
2. 距离计算 (distance) - 第1754-1836行
|
||||
3. 包围盒计算 (bbox) - 第1840-1910行
|
||||
|
||||
## 修复步骤
|
||||
|
||||
### 步骤1：修改中心点计算Tab（第1692-1750行左右）
|
||||
|
||||
**查找位置**：在对话框中找到以下代码（约第1692行）：
|
||||
```tsx
|
||||
{/* 中心点计算 */}
|
||||
<TabsContent value="centroid" className="space-y-4">
|
||||
<Card className="p-6">
|
||||
<h3 className="mb-4">多边形坐标点</h3>
|
||||
```
|
||||
|
||||
**替换为**：
|
||||
```tsx
|
||||
{/* 中心点计算 */}
|
||||
<TabsContent value="centroid" 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">
|
||||
<h3 className="mb-4">多边形坐标点</h3>
|
||||
```
|
||||
|
||||
**继续替换按钮部分**：
|
||||
找到（约第1720行）：
|
||||
```tsx
|
||||
<Button
|
||||
onClick={handleCalculateCentroid}
|
||||
className="w-full mt-4 bg-purple-600 hover:bg-purple-700"
|
||||
>
|
||||
```
|
||||
|
||||
替换为：
|
||||
```tsx
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Button
|
||||
onClick={handleCalculateCentroid}
|
||||
className="w-full bg-purple-600 hover:bg-purple-700"
|
||||
>
|
||||
```
|
||||
|
||||
### 步骤2：修改距离计算Tab（第1754-1836行左右）
|
||||
|
||||
**查找位置**：在对话框中找到以下代码（约第1754行）：
|
||||
```tsx
|
||||
{/* 距离计算 */}
|
||||
<TabsContent value="distance" className="space-y-4">
|
||||
<Card className="p-6">
|
||||
<h3 className="mb-4">两点坐标</h3>
|
||||
```
|
||||
|
||||
**替换为**：
|
||||
```tsx
|
||||
{/* 距离计算 */}
|
||||
<TabsContent value="distance" className="space-y-4">
|
||||
{/* 选择方式切换 */}
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant={mapPickMode === 'distance-p1' || mapPickMode === 'distance-p2' ? 'default' : 'outline'}
|
||||
onClick={() => {
|
||||
if (mapPickMode === 'distance-p1' || mapPickMode === 'distance-p2') {
|
||||
setMapPickMode(null);
|
||||
} else {
|
||||
setMapPickMode('distance-p1');
|
||||
}
|
||||
}}
|
||||
className="flex-1"
|
||||
>
|
||||
<MousePointer2 className="w-4 h-4 mr-2" />
|
||||
{(mapPickMode === 'distance-p1' || mapPickMode === 'distance-p2') ? '正在使用地图选点' : '地图选点'}
|
||||
</Button>
|
||||
<Button
|
||||
variant={mapPickMode === null ? 'default' : 'outline'}
|
||||
onClick={() => setMapPickMode(null)}
|
||||
className="flex-1"
|
||||
>
|
||||
<Edit3 className="w-4 h-4 mr-2" />
|
||||
手动输入坐标
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{(mapPickMode === 'distance-p1' || mapPickMode === 'distance-p2') ? (
|
||||
<div className="space-y-4">
|
||||
<Card className="p-4 bg-orange-50 border-orange-200">
|
||||
<p className="text-sm text-orange-800">
|
||||
💡 当前模式：选择{mapPickMode === 'distance-p1' ? '点1' : '点2'}坐标
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
<MapPointPicker
|
||||
points={mapPickMode === 'distance-p1' ? [distPoint1] : [distPoint2]}
|
||||
mode="single"
|
||||
onPointsChange={(points) => {
|
||||
if (points.length > 0) {
|
||||
if (mapPickMode === 'distance-p1') {
|
||||
setDistPoint1(points[0]);
|
||||
} else {
|
||||
setDistPoint2(points[0]);
|
||||
}
|
||||
}
|
||||
}}
|
||||
height="400px"
|
||||
title={`在地图上选择${mapPickMode === 'distance-p1' ? '点1' : '点2'}位置`}
|
||||
/>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="flex-1"
|
||||
onClick={() => setMapPickMode('distance-p1')}
|
||||
disabled={mapPickMode === 'distance-p1'}
|
||||
>
|
||||
选择点1
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="flex-1"
|
||||
onClick={() => setMapPickMode('distance-p2')}
|
||||
disabled={mapPickMode === 'distance-p2'}
|
||||
>
|
||||
选择点2
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Card className="p-6">
|
||||
<h3 className="mb-4">两点坐标</h3>
|
||||
```
|
||||
|
||||
**继续替换按钮部分**：
|
||||
找到（约第1808行）：
|
||||
```tsx
|
||||
<Button
|
||||
onClick={handleCalculateDistance}
|
||||
className="w-full mt-4 bg-orange-600 hover:bg-orange-700"
|
||||
>
|
||||
```
|
||||
|
||||
替换为：
|
||||
```tsx
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Button
|
||||
onClick={handleCalculateDistance}
|
||||
className="w-full bg-orange-600 hover:bg-orange-700"
|
||||
>
|
||||
```
|
||||
|
||||
### 步骤3：修改包围盒计算Tab（第1840-1910行左右）
|
||||
|
||||
**查找位置**：在对话框中找到以下代码（约第1840行）：
|
||||
```tsx
|
||||
{/* 包围盒计算 */}
|
||||
<TabsContent value="bbox" className="space-y-4">
|
||||
<Card className="p-6">
|
||||
<h3 className="mb-4">多边形坐标点</h3>
|
||||
```
|
||||
|
||||
**替换为**：
|
||||
```tsx
|
||||
{/* 包围盒计算 */}
|
||||
<TabsContent value="bbox" 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">
|
||||
<h3 className="mb-4">多边形坐标点</h3>
|
||||
```
|
||||
|
||||
**继续替换按钮部分**：
|
||||
找到（约第1868行）：
|
||||
```tsx
|
||||
<Button
|
||||
onClick={handleCalculateBBox}
|
||||
className="w-full mt-4 bg-indigo-600 hover:bg-indigo-700"
|
||||
>
|
||||
```
|
||||
|
||||
替换为：
|
||||
```tsx
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Button
|
||||
onClick={handleCalculateBBox}
|
||||
className="w-full bg-indigo-600 hover:bg-indigo-700"
|
||||
>
|
||||
```
|
||||
|
||||
## 验证
|
||||
|
||||
修改完成后，请验证：
|
||||
|
||||
1. ✅ 打开几何计算对话框
|
||||
2. ✅ 切换到"中心点"Tab，可以看到"地图选点"和"手动输入坐标"两个按钮
|
||||
3. ✅ 点击"地图选点"按钮，应该显示地图组件
|
||||
4. ✅ 在地图上点击可以添加坐标点
|
||||
5. ✅ 切换到"距离"Tab，可以分别选择点1和点2
|
||||
6. ✅ 切换到"包围盒"Tab，可以使用地图选点
|
||||
|
||||
## 注意事项
|
||||
|
||||
- 确保只修改**对话框中**的代码（第1457-1914行区域）
|
||||
- 不要修改页面主体部分的代码
|
||||
- MapPointPicker组件已经存在，无需创建
|
||||
- 高德地图SDK已经在组件中加载（第79-93行）
|
||||
|
||||
## 修复完成后
|
||||
|
||||
删除此文件，地图选点功能已集成完毕。
|
||||
Reference in New Issue
Block a user