19 KiB
19 KiB
LandInformation 模块页面结构示例
基于 navigation.ts 中的 fieldMenus，为 LandInformation 模块创建完整的页面目录结构。
1. 地块档案管理 (FieldArchive) 模块
1.1 地块信息录入与维护 (FieldEntryMaintenance)
pages/LandInformation/Archive/FieldEntryMaintenance/
├── 📄 index.jsx # 主组件
├── 📄 index.css # 主样式文件
├── 📄 index.types.ts # 类型定义
├── 📂 hooks/ # 页面专用Hooks
│ ├── 📄 usePageData.tsx # 数据管理Hook
│ ├── 📄 usePageActions.tsx # 操作Hook
│ └── 📄 useFieldForm.tsx # 地块表单Hook
├── 📂 utils/ # 工具函数
│ ├── 📄 pageHelpers.tsx # 页面工具函数
│ ├── 📄 coordinateUtils.tsx # 坐标处理工具
│ ├── 📄 areaCalculators.tsx # 面积计算工具
│ └── 📄 validators.tsx # 验证函数
├── 📄 constants.tsx # 常量定义
└── 📂 components/ # 子组件目录
├── 📂 FieldForm/ # 地块表单组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 FieldList/ # 地块列表组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 FieldTable/ # 地块表格组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 FieldMap/ # 地块地图组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 CoordinateInput/ # 坐标输入组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 AreaDisplay/ # 面积显示组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 SoilInfo/ # 土壤信息组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 FieldFilter/ # 地块筛选组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
└── 📂 FieldDetails/ # 地块详情组件
├── 📄 index.jsx
├── 📄 index.css
└── 📄 types.ts
1.2 地块分类与标签管理 (FieldClassificationTags)
pages/LandInformation/Archive/FieldClassificationTags/
├── 📄 index.jsx
├── 📄 index.css
├── 📄 index.types.ts
├── 📂 hooks/
│ ├── 📄 usePageData.js
│ ├── 📄 usePageActions.js
│ └── 📄 useClassification.js
├── 📂 utils/
│ ├── 📄 pageHelpers.js
│ └── 📄 categoryHelpers.js
├── 📂 constants.js
└── 📂 components/
├── 📂 FieldCategoryTree/ # 地块分类树组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 FieldTagManager/ # 地块标签管理组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 CategoryForm/ # 分类表单组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 TagForm/ # 标签表单组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 FieldTagSelector/ # 地块标签选择器
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
└── 📂 CategoryStats/ # 分类统计组件
├── 📄 index.jsx
├── 📄 index.css
└── 📄 types.ts
2. 地块数字化与地图管理 (FieldMap) 模块
2.1 GIS地图管理 (FieldGISMap)
pages/LandInformation/Map/GISMap/
├── 📄 index.jsx
├── 📄 index.css
├── 📄 index.types.ts
├── 📂 hooks/
│ ├── 📄 usePageData.js
│ ├── 📄 usePageActions.js
│ ├── 📄 useGISMap.js
│ └── 📄 useMapLayers.js
├── 📂 utils/
│ ├── 📄 pageHelpers.js
│ ├── 📄 mapUtils.js
│ ├── 📄 layerUtils.js
│ └── 📄 coordinateTransform.js
├── 📂 constants.js
└── 📂 components/
├── 📂 GISMapView/ # GIS地图视图组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 LayerControl/ # 图层控制组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 MapToolbar/ # 地图工具栏组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 LayerManager/ # 图层管理器组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 BaseMapSelector/ # 底图选择器组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 MapScale/ # 地图比例尺组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
└── 📂 MapOverview/ # 地图鹰眼组件
├── 📄 index.jsx
├── 📄 index.css
└── 📄 types.ts
2.2 数字化绘制与编辑 (FieldDrawEdit)
pages/LandInformation/Map/DrawEdit/
├── 📄 index.jsx
├── 📄 index.css
├── 📄 index.types.ts
├── 📂 hooks/
│ ├── 📄 usePageData.js
│ ├── 📄 usePageActions.js
│ ├── 📄 useDrawTools.js
│ └── 📄 useGeometryEditor.js
├── 📂 utils/
│ ├── 📄 pageHelpers.js
│ ├── 📄 drawUtils.js
│ ├── 📄 geometryUtils.js
│ └── 📄 editUtils.js
├── 📂 constants.js
└── 📂 components/
├── 📂 DrawTools/ # 绘制工具组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 EditTools/ # 编辑工具组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 GeometryEditor/ # 几何编辑器组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 VertexEditor/ # 顶点编辑器组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 StyleEditor/ # 样式编辑器组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 AttributeEditor/ # 属性编辑器组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
└── 📂 DrawPreview/ # 绘制预览组件
├── 📄 index.jsx
├── 📄 index.css
└── 📄 types.ts
2.3 空间数据管理 (FieldSpatialQuery)
pages/LandInformation/Map/SpatialQuery/
├── 📄 index.jsx
├── 📄 index.css
├── 📄 index.types.ts
├── 📂 hooks/
│ ├── 📄 usePageData.js
│ ├── 📄 usePageActions.js
│ ├── 📄 useSpatialQuery.js
│ └── 📄 useDataLayers.js
├── 📂 utils/
│ ├── 📄 pageHelpers.js
│ ├── 📄 spatialUtils.js
│ ├── 📄 queryUtils.js
│ └── 📄 dataUtils.js
├── 📂 constants.js
└── 📂 components/
├── 📂 SpatialQueryBuilder/ # 空间查询构建器
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 QueryResult/ # 查询结果组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 DataLayerManager/ # 数据图层管理器
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 AttributeQuery/ # 属性查询组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 BufferAnalysis/ # 缓冲区分析组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 OverlayAnalysis/ # 叠加分析组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
└── 📂 SpatialStatistics/ # 空间统计组件
├── 📄 index.jsx
├── 📄 index.css
└── 📄 types.ts
2.4 地块影像 (FieldSatellite)
pages/LandInformation/Map/Satellite/
├── 📄 index.jsx
├── 📄 index.css
├── 📄 index.types.ts
├── 📂 hooks/
│ ├── 📄 usePageData.js
│ ├── 📄 usePageActions.js
│ ├── 📄 useSatelliteImage.js
│ └── 📄 useImageAnalysis.js
├── 📂 utils/
│ ├── 📄 pageHelpers.js
│ ├── 📄 imageUtils.js
│ ├── 📄 rasterUtils.js
│ └── 📄 analysisUtils.js
├── 📂 constants.js
└── 📂 components/
├── 📂 SatelliteViewer/ # 卫星影像查看器
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📄 ImageTimeline/ # 影像时间轴组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📄 ImageLayerControl/ # 影像图层控制
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📄 ImageComparison/ # 影像对比组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📄 NDVIAnalysis/ # 植被指数分析组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📄 ImageExport/ # 影像导出组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
└── 📄 ImageMetadata/ # 影像元数据组件
├── 📄 index.jsx
├── 📄 index.css
└── 📄 types.ts
3. 空间分析与决策支持 (FieldAnalysis) 模块
3.1 土壤基础数据 (SoilData)
pages/LandInformation/Analysis/SoilData/
├── 📄 index.jsx
├── 📄 index.css
├── 📄 index.types.ts
├── 📂 hooks/
│ ├── 📄 usePageData.js
│ ├── 📄 usePageActions.js
│ ├── 📄 useSoilData.js
│ └── 📄 useSoilAnalysis.js
├── 📂 utils/
│ ├── 📄 pageHelpers.js
│ ├── 📄 soilUtils.js
│ ├── 📄 analysisUtils.js
│ └── 📄 formatters.js
├── 📂 constants.js
└── 📂 components/
├── 📂 SoilDataForm/ # 土壤数据表单组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 SoilDataTable/ # 土壤数据表格组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 SoilMap/ # 土壤地图组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 SoilChart/ # 土壤图表组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📄 NutrientAnalysis/ # 养分分析组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📄 PhAnalysis/ # pH值分析组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
└── 📄 TextureAnalysis/ # 质地分析组件
├── 📄 index.jsx
├── 📄 index.css
└── 📄 types.ts
3.2 分层采样分析 (LayerSampling)
pages/LandInformation/Analysis/LayerSampling/
├── 📄 index.jsx
├── 📄 index.css
├── 📄 index.types.ts
├── 📂 hooks/
│ ├── 📄 usePageData.js
│ ├── 📄 usePageActions.js
│ ├── 📄 useSampling.js
│ └── 📄 useLayerAnalysis.js
├── 📂 utils/
│ ├── 📄 pageHelpers.js
│ ├── 📄 samplingUtils.js
│ ├── 📄 layerUtils.js
│ └── 📄 statisticsUtils.js
├── 📂 constants.js
└── 📂 components/
├── 📂 SamplingPlan/ # 采样计划组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 SamplingPoints/ # 采样点组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📂 LayerDataForm/ # 分层数据表单
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📄 LayerProfile/ # 土层剖面组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📄 LayerComparison/ # 土层对比组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📄 SamplingReport/ # 采样报告组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
└── 📄 LayerStatistics/ # 土层统计组件
├── 📄 index.jsx
├── 📄 index.css
└── 📄 types.ts
3.3 土壤质量评价 (SoilQuality)
pages/LandInformation/Analysis/SoilQuality/
├── 📄 index.jsx
├── 📄 index.css
├── 📄 index.types.ts
├── 📂 hooks/
│ ├── 📄 usePageData.js
│ ├── 📄 usePageActions.js
│ ├── 📄 useQualityEvaluation.js
│ └── 📄 useQualityModels.js
├── 📂 utils/
│ ├── 📄 pageHelpers.js
│ ├── 📄 qualityUtils.js
│ ├── 📄 evaluationUtils.js
│ └── 📄 indicatorUtils.js
├── 📂 constants.js
└── 📂 components/
├── 📂 QualityIndicators/ # 质量指标组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📄 EvaluationModel/ # 评价模型组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📄 QualityScore/ # 质量评分组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📄 QualityMap/ # 质量地图组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📄 QualityTrend/ # 质量趋势组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
├── 📄 ImprovementSuggestions/ # 改进建议组件
│ ├── 📄 index.jsx
│ ├── 📄 index.css
│ └── 📄 types.ts
└── 📄 QualityReport/ # 质量报告组件
├── 📄 index.jsx
├── 📄 index.css
└── 📄 types.ts
4. 主要类型定义示例
4.1 地块基础类型 (FieldEntryMaintenance/index.types.ts)
export interface FieldRecord {
id: string;
name: string;
code: string;
area: number;
areaUnit: AreaUnit;
coordinates: Coordinate[];
soilType: SoilType;
landUse: LandUseType;
status: FieldStatus;
owner: string;
description?: string;
createdAt: string;
updatedAt: string;
// ... 其他字段
}
export type AreaUnit = 'mu' | 'hectare' | 'square_meter';
export type SoilType = 'sandy' | 'clay' | 'loam' | 'silt';
export type LandUseType = 'cultivated' | 'forest' | 'grassland' | 'water';
export type FieldStatus = 'active' | 'inactive' | 'leased' | 'reserved';
export interface Coordinate {
longitude: number;
latitude: number;
altitude?: number;
}
export interface SoilInfo {
ph: number;
organicMatter: number;
nitrogen: number;
phosphorus: number;
potassium: number;
texture: string;
drainage: DrainageType;
}
export type DrainageType = 'good' | 'moderate' | 'poor';
export interface FieldFilters {
name?: string;
code?: string;
soilType?: SoilType;
landUse?: LandUseType;
status?: FieldStatus;
owner?: string;
areaRange?: [number, number];
}
4.2 空间分析类型 (FieldSpatialQuery/index.types.ts)
export interface SpatialQuery {
id: string;
name: string;
type: QueryType;
geometry: Geometry;
attributes?: AttributeQuery[];
layers: string[];
createdAt: string;
}
export type QueryType = 'point' | 'line' | 'polygon' | 'buffer' | 'intersection' | 'union';
export interface Geometry {
type: 'Point' | 'LineString' | 'Polygon';
coordinates: number[] | number[][] | number[][][];
}
export interface AttributeQuery {
field: string;
operator: '=' | '!=' | '>' | '<' | '>=' | '<=' | 'like' | 'in';
value: any;
logicalOperator?: 'AND' | 'OR';
}
export interface QueryResult {
id: string;
queryId: string;
features: Feature[];
totalCount: number;
executionTime: number;
createdAt: string;
}
export interface Feature {
id: string;
geometry: Geometry;
properties: Record<string, any>;
layerName: string;
}
export interface DataLayer {
id: string;
name: string;
type: LayerType;
url?: string;
visible: boolean;
opacity: number;
style: LayerStyle;
metadata: LayerMetadata;
}
export type LayerType = 'vector' | 'raster' | 'wms' | 'wmts' | 'xyz';
export interface LayerStyle {
fillColor?: string;
strokeColor?: string;
strokeWidth?: number;
fillOpacity?: number;
strokeOpacity?: number;
}
export interface LayerMetadata {
description?: string;
source?: string;
crs?: string;
fields?: FieldInfo[];
createdAt?: string;
updatedAt?: string;
}
export interface FieldInfo {
name: string;
type: 'string' | 'number' | 'date' | 'boolean';
description?: string;
}
这个结构为 LandInformation 模块提供了完整的页面组织架构，每个页面都包含主组件、样式文件、类型定义、专用Hooks、工具函数和拆分后的子组件，严格遵循了开发规范。