生产管理系统前端 - 更新瓦力提交的产品原型到参考目录
This commit is contained in:
352
src/TEMP_DIALOG_TABS_FIX.txt
Normal file
352
src/TEMP_DIALOG_TABS_FIX.txt
Normal file
@@ -0,0 +1,352 @@
|
||||
{/* 中心点计算 */}
|
||||
<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>
|
||||
|
||||
<div className="space-y-3 max-h-96 overflow-y-auto">
|
||||
{geomPoints.map((point, index) => (
|
||||
<div key={index} className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="w-16">点 {index + 1}</Badge>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.000001"
|
||||
value={point.lat}
|
||||
onChange={(e) => handleUpdateGeomPoint(index, 'lat', e.target.value)}
|
||||
placeholder="纬度"
|
||||
className="flex-1"
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.000001"
|
||||
value={point.lng}
|
||||
onChange={(e) => handleUpdateGeomPoint(index, 'lng', e.target.value)}
|
||||
placeholder="经度"
|
||||
className="flex-1"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Button
|
||||
onClick={handleCalculateCentroid}
|
||||
className="w-full bg-purple-600 hover:bg-purple-700"
|
||||
>
|
||||
<MapPin className="w-4 h-4 mr-2" />
|
||||
计算中心点 (ST_Centroid)
|
||||
</Button>
|
||||
|
||||
{geomResult && geomResult.type === 'centroid' && (
|
||||
<Card className="p-6 bg-purple-50 border-purple-200">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<CheckCircle2 className="w-5 h-5 text-purple-600" />
|
||||
<h3 className="text-purple-900">几何中心坐标</h3>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="p-4 bg-white rounded-lg">
|
||||
<div className="text-sm text-muted-foreground">纬度</div>
|
||||
<div className="text-xl text-purple-600 mt-1 font-mono">
|
||||
{geomResult.centroid.lat.toFixed(6)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 bg-white rounded-lg">
|
||||
<div className="text-sm text-muted-foreground">经度</div>
|
||||
<div className="text-xl text-purple-600 mt-1 font-mono">
|
||||
{geomResult.centroid.lng.toFixed(6)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
{/* 距离计算 */}
|
||||
<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>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<div className="mb-2 font-medium">点1坐标</div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="mb-2 font-medium">点2坐标</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-sm text-muted-foreground">纬度</label>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.000001"
|
||||
value={distPoint2.lat}
|
||||
onChange={(e) => setDistPoint2({ ...distPoint2, lat: parseFloat(e.target.value) || 0 })}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm text-muted-foreground">经度</label>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.000001"
|
||||
value={distPoint2.lng}
|
||||
onChange={(e) => setDistPoint2({ ...distPoint2, lng: parseFloat(e.target.value) || 0 })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Button
|
||||
onClick={handleCalculateDistance}
|
||||
className="w-full bg-orange-600 hover:bg-orange-700"
|
||||
>
|
||||
<MapIcon className="w-4 h-4 mr-2" />
|
||||
计算距离 (ST_Distance)
|
||||
</Button>
|
||||
|
||||
{geomResult && geomResult.type === 'distance' && (
|
||||
<Card className="p-6 bg-orange-50 border-orange-200">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<CheckCircle2 className="w-5 h-5 text-orange-600" />
|
||||
<h3 className="text-orange-900">两点间距离</h3>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="p-4 bg-white rounded-lg">
|
||||
<div className="text-sm text-muted-foreground">米</div>
|
||||
<div className="text-2xl text-orange-600 mt-1">{geomResult.distance}</div>
|
||||
<div className="text-xs text-muted-foreground mt-1">m</div>
|
||||
</div>
|
||||
<div className="p-4 bg-white rounded-lg">
|
||||
<div className="text-sm text-muted-foreground">千米</div>
|
||||
<div className="text-2xl text-orange-600 mt-1">{geomResult.distanceKm}</div>
|
||||
<div className="text-xs text-muted-foreground mt-1">km</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
{/* 包围盒计算 */}
|
||||
<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>
|
||||
|
||||
<div className="space-y-3 max-h-96 overflow-y-auto">
|
||||
{geomPoints.map((point, index) => (
|
||||
<div key={index} className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="w-16">点 {index + 1}</Badge>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.000001"
|
||||
value={point.lat}
|
||||
onChange={(e) => handleUpdateGeomPoint(index, 'lat', e.target.value)}
|
||||
placeholder="纬度"
|
||||
className="flex-1"
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.000001"
|
||||
value={point.lng}
|
||||
onChange={(e) => handleUpdateGeomPoint(index, 'lng', e.target.value)}
|
||||
placeholder="经度"
|
||||
className="flex-1"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Button
|
||||
onClick={handleCalculateBBox}
|
||||
className="w-full bg-indigo-600 hover:bg-indigo-700"
|
||||
>
|
||||
<Circle className="w-4 h-4 mr-2" />
|
||||
计算包围盒 (ST_Envelope)
|
||||
</Button>
|
||||
|
||||
{geomResult && geomResult.type === 'bbox' && (
|
||||
<Card className="p-6 bg-indigo-50 border-indigo-200">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<CheckCircle2 className="w-5 h-5 text-indigo-600" />
|
||||
<h3 className="text-indigo-900">包围盒坐标</h3>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="p-4 bg-white rounded-lg">
|
||||
<div className="text-sm text-muted-foreground">最小纬度</div>
|
||||
<div className="text-lg text-indigo-600 mt-1 font-mono">
|
||||
{geomResult.bbox.minLat.toFixed(6)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 bg-white rounded-lg">
|
||||
<div className="text-sm text-muted-foreground">最大纬度</div>
|
||||
<div className="text-lg text-indigo-600 mt-1 font-mono">
|
||||
{geomResult.bbox.maxLat.toFixed(6)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 bg-white rounded-lg">
|
||||
<div className="text-sm text-muted-foreground">最小经度</div>
|
||||
<div className="text-lg text-indigo-600 mt-1 font-mono">
|
||||
{geomResult.bbox.minLng.toFixed(6)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 bg-white rounded-lg">
|
||||
<div className="text-sm text-muted-foreground">最大经度</div>
|
||||
<div className="text-lg text-indigo-600 mt-1 font-mono">
|
||||
{geomResult.bbox.maxLng.toFixed(6)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</TabsContent>
|
||||
Reference in New Issue
Block a user