2829 lines
104 KiB
Markdown
2829 lines
104 KiB
Markdown
# Crop-X 项目完整技术架构方案
|
||
|
||
**Session Date:** 2025-10-16
|
||
**Facilitator:** Business Analyst Mary
|
||
**Project:** 智慧农业系统 crop-x 重构
|
||
|
||
---
|
||
|
||
## 项目概述
|
||
|
||
基于现有的智慧农业生产管理系统，在根目录下创建全新的 `crop-x` 项目，采用 React 19 + Zustand + shadcn + Tailwind CSS 技术栈，实现现代化的路由系统、用户认证模块、API管理系统和完整的业务架构。
|
||
|
||
## 技术栈
|
||
|
||
- **前端框架**: React 19 + TypeScript
|
||
- **构建工具**: Vite
|
||
- **状态管理**: Zustand
|
||
- **UI框架**: shadcn/ui + Tailwind CSS
|
||
- **路由**: React Router v6
|
||
- **HTTP客户端**: Axios
|
||
- **图标**: Lucide React
|
||
- **提示组件**: Sonner
|
||
|
||
## 新项目目录结构
|
||
|
||
```
|
||
D:\code\repotest\smart-crop-x\ # 原项目（保留不变）
|
||
├── 📂 crop-x/ # 🆕 全新的重构项目
|
||
│ ├── 📂 config/ # 🆕 特性优先配置系统
|
||
│ │ ├── 📂 types/ # 配置类型定义
|
||
│ │ │ └── 📄 config.types.ts # 完整的配置类型系统
|
||
│ │ ├── 📂 environments/ # 环境配置
|
||
│ │ │ ├── 📄 development.ts # 开发环境配置
|
||
│ │ │ ├── 📄 test.ts # 测试环境配置
|
||
│ │ │ ├── 📄 uat.ts # 用户测试环境配置
|
||
│ │ │ ├── 📄 production.ts # 生产环境配置
|
||
│ │ │ └── 📄 index.ts # 环境配置入口
|
||
│ │ ├── 📂 features/ # 特性配置
|
||
│ │ │ ├── 📄 agricultural-machinery.ts # 农机管理特性配置
|
||
│ │ │ ├── 📄 land-information.ts # 地块信息特性配置
|
||
│ │ │ ├── 📄 farming-operation.ts # 农事操作特性配置
|
||
│ │ │ ├── 📄 agricultural-asset.ts # 农业资产特性配置
|
||
│ │ │ ├── 📄 ai-crop-model.ts # AI作物模型特性配置
|
||
│ │ │ ├── 📄 irrigation-control.ts # 灌溉控制特性配置
|
||
│ │ │ ├── 📄 central-config.ts # 配置管理特性配置
|
||
│ │ │ └── 📄 index.ts # 特性配置入口
|
||
│ │ ├── 📂 services/ # 服务配置（预留）
|
||
│ │ ├── 📂 build/ # 构建配置（预留）
|
||
│ │ ├── 📄 config-manager.ts # 配置管理器
|
||
│ │ ├── 📄 index.ts # 配置系统入口
|
||
│ │ └── 📄 README.md # 配置系统使用文档
|
||
│ ├── 📂 router/ # 路由管理核心
|
||
│ │ ├── 📄 agriculturalMachineryRoutes.js # 🚙 智能农机管理系统
|
||
│ │ ├── 📄 landInformationRoutes.js # 🌾 地块信息管理系统
|
||
│ │ ├── 📄 farmingOperationRoutes.js # 📋 农事操作管理系统
|
||
│ │ ├── 📄 agriculturalAssetRoutes.js # 📦 农业资产管理系统
|
||
│ │ ├── 📄 aiCropModelRoutes.js # 🤖 AI作物模型精准决策系统
|
||
│ │ ├── 📄 waterFertilizerControlRoutes.js # 💧 水肥一体化控制系统
|
||
│ │ ├── 📄 centralConfigRoutes.js # ⚙️ 中心配置管理系统
|
||
│ │ ├── 📄 index.js # 路由汇总和导出
|
||
│ │ └── 📄 guard.js # 路由守卫
|
||
│ ├── 📂 apis/ # 🆕 API管理系统
|
||
│ │ ├── 📄 index.js # API统一入口，环境配置
|
||
│ │ ├── 📄 interceptor.js # 请求拦截器，认证处理
|
||
│ │ └── 📂 subModules/ # 7大业务模块API
|
||
│ │ ├── 📄 agriculturalMachinery.js # 🚙 农机系统API
|
||
│ │ ├── 📄 landInformation.js # 🌾 地块信息API
|
||
│ │ ├── 📄 farmingOperation.js # 📋 农事操作API
|
||
│ │ ├── 📄 agriculturalAsset.js # 📦 农业资产API
|
||
│ │ ├── 📄 aiCropModel.js # 🤖 AI作物模型API
|
||
│ │ ├── 📄 waterFertilizerControl.js # 💧 水肥控制API
|
||
│ │ └── 📄 centralConfig.js # ⚙️ 配置管理API
|
||
│ ├── 📂 stores/ # Zustand状态管理
|
||
│ │ ├── 📄 authStore.js # 认证状态管理
|
||
│ │ ├── 📂 agriculturalMachinery/ # 🚙 智能农机管理系统状态
|
||
│ │ │ ├── 📄 machineryStore.js # 农机档案状态
|
||
│ │ │ ├── 📄 driverStore.js # 驾驶员档案状态
|
||
│ │ │ ├── 📄 loadStore.js # 负载管理状态
|
||
│ │ │ ├── 📄 monitoringStore.js # 实时监控状态
|
||
│ │ │ ├── 📄 faultStore.js # 故障诊断状态
|
||
│ │ │ ├── 📄 operationStore.js # 精准作业状态
|
||
│ │ │ ├── 📄 analysisStore.js # 数据分析状态
|
||
│ │ │ ├── 📄 schedulingStore.js # 调度管理状态
|
||
│ │ │ └── 📄 securityStore.js # 安全安防状态
|
||
│ │ ├── 📂 landInformation/ # 🌾 地块信息管理系统状态
|
||
│ │ │ ├── 📄 fieldStore.js # 地块档案状态
|
||
│ │ │ ├── 📄 mapStore.js # 地图管理状态
|
||
│ │ │ ├── 📄 analysisStore.js # 空间分析状态
|
||
│ │ │ ├── 📄 monitoringStore.js # 环境监测状态
|
||
│ │ │ ├── 📄 suitabilityStore.js # 适宜性评价状态
|
||
│ │ │ ├── 📄 comparisonStore.js # 对比分析状态
|
||
│ │ │ └── 📄 riskStore.js # 风险预警状态
|
||
│ │ ├── 📂 farmingOperation/ # 📋 农事操作管理系统状态
|
||
│ │ │ ├── 📄 planningStore.js # 农事计划状态
|
||
│ │ │ ├── 📄 taskStore.js # 农事任务状态
|
||
│ │ │ ├── 📄 executionStore.js # 农事执行状态
|
||
│ │ │ ├── 📄 calendarStore.js # 农事日历状态
|
||
│ │ │ ├── 📄 archiveStore.js # 农事档案状态
|
||
│ │ │ ├── 📄 knowledgeStore.js # 知识库状态
|
||
│ │ │ ├── 📄 performanceStore.js # 绩效管理状态
|
||
│ │ │ └── 📄 issueStore.js # 问题协同状态
|
||
│ │ ├── 📂 agriculturalAsset/ # 📦 农业资产管理系统状态
|
||
│ │ │ ├── 📄 basicStore.js # 基础信息状态
|
||
│ │ │ ├── 📄 purchaseStore.js # 采购管理状态
|
||
│ │ │ ├── 📄 inventoryStore.js # 库存管理状态
|
||
│ │ │ ├── 📄 requisitionStore.js # 物资领用状态
|
||
│ │ │ ├── 📄 returnStore.js # 物资归还状态
|
||
│ │ │ ├── 📄 equipmentStore.js # 农资农具状态
|
||
│ │ │ └── 📄 reportStore.js # 可视化报表状态
|
||
│ │ ├── 📂 aiCropModel/ # 🤖 AI作物模型精准决策系统状态
|
||
│ │ │ ├── 📄 dataCenterStore.js # 数据感知中心状态
|
||
│ │ │ ├── 📄 modelIntegrationStore.js # 模型接入集成状态
|
||
│ │ │ ├── 📄 modelApplicationStore.js # 模型应用中心状态
|
||
│ │ │ ├── 📄 decisionStore.js # 智能决策生成状态
|
||
│ │ │ ├── 📄 supportStore.js # 智能决策支持状态
|
||
│ │ │ ├── 📄 applicationStore.js # 决策应用状态
|
||
│ │ │ ├── 📄 knowledgeStore.js # AI知识库状态
|
||
│ │ │ └── 📄 monitoringStore.js # 监控中心状态
|
||
│ │ ├── 📂 waterFertilizerControl/ # 💧 水肥一体化控制系统状态
|
||
│ │ │ ├── 📄 managementStore.js # 水肥机管理状态
|
||
│ │ │ ├── 📄 irrigationStore.js # 智能灌溉状态
|
||
│ │ │ ├── 📄 formulaStore.js # 施肥配方管理状态
|
||
│ │ │ ├── 📄 controlStore.js # 水肥控制状态
|
||
│ │ │ └── 📄 monitoringStore.js # 实时监测与预警状态
|
||
│ │ └── 📂 centralConfig/ # ⚙️ 中心配置管理系统状态
|
||
│ │ ├── 📄 tenantStore.js # 租户管理状态
|
||
│ │ ├── 📄 userStore.js # 用户管理状态
|
||
│ │ ├── 📄 systemStore.js # 系统参数状态
|
||
│ │ ├── 📄 monitorStore.js # 系统监控状态
|
||
│ │ └── 📄 messageStore.js # 消息中心状态
|
||
│ ├── 📂 pages/ # 🆕 页面组件 - 7大业务模块完整层级结构
|
||
│ │ ├── 📂 AgriculturalMachinery/ # 🚙 智能农机管理系统页面
|
||
│ │ │ ├── 📂 Archive/ # B级：农机档案
|
||
│ │ │ │ ├── 📂 MachineryEntry/ # C级：农机档案录入与维护
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 ClassificationManagement/ # C级：农机分类与标签管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 QRCodeManagement/ # C级：农机二维码管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 DriverArchive/ # B级：驾驶员档案
|
||
│ │ │ │ ├── 📂 DriverInfoManagement/ # C级：驾驶员信息管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 DriverTaskManagement/ # C级：驾驶员任务管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 LoadManagement/ # B级：负载管理
|
||
│ │ │ │ ├── 📂 LoadDeviceManagement/ # C级：负载管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 LoadTypeManagement/ # C级：负载类型
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 LoadParameterManagement/ # C级：负载参数
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 Monitoring/ # B级：设备实时监控与定位
|
||
│ │ │ │ ├── 📂 RealTimeLocationTracking/ # C级：实时位置追踪
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 WorkStatusMonitoring/ # C级：工作状态监控
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 OperationDataMonitoring/ # C级：作业数据监控
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 FaultDiagnosis/ # B级：远程诊断与故障预警
|
||
│ │ │ │ ├── 📂 FaultWarning/ # C级：故障诊断与预警
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 HealthAssessment/ # C级：健康评估
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 ParameterMonitoring/ # C级：运行参数监测
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 PrecisionOperation/ # B级：精准作业管理与支持
|
||
│ │ │ │ ├── 📂 OperationRecord/ # C级：作业数据记录
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 RoutePlanning/ # C级：作业路线规划
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 PlanDispatch/ # C级：作业方案下发
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 DrivingCockpit/ # C级：农机驾驶舱
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 DataAnalysis/ # B级：数据管理与分析报告
|
||
│ │ │ │ ├── 📂 OperationAnalysis/ # C级：作业数据分析
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 HistoricalDataComparison/ # C级：历史数据查询与对比
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 Scheduling/ # B级：农机管理与调度
|
||
│ │ │ │ ├── 📂 TaskAssignment/ # C级：任务分配
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 RealTimeDispatch/ # C级：实时调度监控
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 TrackPlayback/ # C级：农机作业轨迹回放
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ └── 📂 Security/ # B级：安全与安防
|
||
│ │ │ └── 📂 GeoFence/ # C级：电子围栏
|
||
│ │ │ └── 📄 index.jsx
|
||
│ │ ├── 📂 LandInformation/ # 🌾 地块信息管理系统页面
|
||
│ │ │ ├── 📂 FieldManagement/ # B级：地块档案管理
|
||
│ │ │ │ ├── 📂 FieldEntry/ # C级：地块信息录入
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 ClassificationManagement/ # C级：地块分类管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 BatchOperation/ # C级：批量操作
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 MapManagement/ # B级：地图管理
|
||
│ │ │ │ ├── 📂 GISData/ # C级：GIS数据管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 DigitalDrawing/ # C级：数字化绘制
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 SpatialQuery/ # C级：空间查询
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 SatelliteImagery/ # C级：卫星影像管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 SpatialAnalysis/ # B级：空间分析
|
||
│ │ │ │ ├── 📂 SoilData/ # C级：土壤数据分析
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 LayeredSampling/ # C级：分层采样分析
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 QualityEvaluation/ # C级：质量评价
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 EnvironmentalMonitoring/ # B级：环境监测
|
||
│ │ │ │ ├── 📂 WeatherData/ # C级：气象数据监测
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 SensorData/ # C级：环境传感器数据
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 MonitoringHistory/ # C级：监测历史记录
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 SuitabilityEvaluation/ # B级：适宜性评价
|
||
│ │ │ │ ├── 📂 ComprehensiveEvaluation/ # C级：综合评价分析
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 BatchAnalysis/ # C级：批量分析
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 CropRecommendation/ # C级：作物推荐分析
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 WeightConfiguration/ # C级：权重配置管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 ComparativeAnalysis/ # B级：对比分析
|
||
│ │ │ │ ├── 📂 MultiDimensionalMetrics/ # C级：多维指标分析
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 ChartAnalysis/ # C级：图表分析展示
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 ReportGeneration/ # C级：报告生成管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ └── 📂 RiskWarning/ # B级：风险预警
|
||
│ │ │ ├── 📂 RealTimeMonitoring/ # C级：实时监测预警
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 EarlyWarningPush/ # C级：预警信息推送
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ └── 📂 DisposalTracking/ # C级：处置情况跟踪
|
||
│ │ │ └── 📄 index.jsx
|
||
│ │ ├── 📂 FarmingOperation/ # 📋 农事操作管理系统页面
|
||
│ │ │ ├── 📂 FarmPlanning/ # B级：农事计划管理
|
||
│ │ │ │ ├── 📂 PlanFormulation/ # C级：计划制定
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 ResourceAllocation/ # C级：资源分配管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 ProgressTracking/ # C级：进度跟踪管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 TaskManagement/ # B级：农事任务管理
|
||
│ │ │ │ ├── 📂 TaskCreation/ # C级：任务创建管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 TaskAssignment/ # C级：任务分配派发
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 TaskStatusMonitoring/ # C级：任务状态监控
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 TaskHistoryStatistics/ # C级：任务历史统计
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 OperationExecution/ # B级：农事执行管理
|
||
│ │ │ │ ├── 📂 OperationTypeManagement/ # C级：操作类型管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 OperationRecording/ # C级：操作记录管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 OperationLogQuery/ # C级：操作日志查询
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 FarmingCalendar/ # B级：农事日历管理
|
||
│ │ │ │ ├── 📂 CalendarVisualization/ # C级：日历可视化视图
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 GanttChartManagement/ # C级：甘特图管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 ProgressVisualization/ # C级：进度可视化
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 OperationArchive/ # B级：农事档案管理
|
||
│ │ │ │ ├── 📂 ArchiveGeneration/ # C级：档案归集生成
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 FullDimensionView/ # C级：全维视图管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 TraceabilityTracking/ # C级：追踪溯源管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 KnowledgeBase/ # B级：知识库管理
|
||
│ │ │ │ ├── 📂 ContentManagement/ # C级：内容管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 ClassificationTagging/ # C级：分类标签管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 IntelligentSearch/ # C级：智能检索功能
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 PerformanceManagement/ # B级：绩效管理
|
||
│ │ │ │ ├── 📂 PersonnelManagement/ # C级：人员管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 WorkHourRecording/ # C级：工时记录管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 StatisticalReports/ # C级：统计报表管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 SchedulingManagement/ # C级：排班管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ └── 📂 IssueCollaboration/ # B级：问题协同管理
|
||
│ │ │ ├── 📂 IssueReporting/ # C级：问题上报管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 ProcessingAssignment/ # C级：处理分派管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ └── 📂 OnlineCollaboration/ # C级：在线协作功能
|
||
│ │ │ └── 📄 index.jsx
|
||
│ │ ├── 📂 AgriculturalAsset/ # 📦 农业资产管理系统页面
|
||
│ │ │ ├── 📂 BasicInformation/ # B级：基础信息管理
|
||
│ │ │ │ ├── 📂 AssetEntry/ # C级：资产信息录入
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 AssetClassification/ # C级：资产分类管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 AssetLabeling/ # C级：资产标签管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 ProcurementManagement/ # B级：采购管理
|
||
│ │ │ │ ├── 📂 ProcurementPlanning/ # C级：采购计划制定
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 SupplierManagement/ # C级：供应商管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 ProcurementTracking/ # C级：采购跟踪管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 InventoryManagement/ # B级：库存管理
|
||
│ │ │ │ ├── 📂 StockMonitoring/ # C级：库存监控管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 StockAdjustment/ # C级：库存调整管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 InventoryReport/ # C级：库存报表管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 MaterialRequisition/ # B级：物资领用管理
|
||
│ │ │ │ ├── 📂 RequisitionApplication/ # C级：领用申请管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 ApprovalWorkflow/ # C级：审批流程管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 RequisitionTracking/ # C级：领用跟踪管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 MaterialReturn/ # B级：物资归还管理
|
||
│ │ │ │ ├── 📂 ReturnApplication/ # C级：归还申请管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 ReturnApproval/ # C级：归还审批管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 ReturnTracking/ # C级：归还跟踪管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 AgriculturalSupplies/ # B级：农资农具管理
|
||
│ │ │ │ ├── 📂 ToolManagement/ # C级：农具管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 MaterialManagement/ # C级：农资管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 MaintenanceTracking/ # C级：维护跟踪管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ └── 📂 VisualizationReports/ # B级：可视化报表
|
||
│ │ │ ├── 📂 AssetStatement/ # C级：资产报表管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 InventoryStatement/ # C级：库存报表管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ └── 📂 CostAnalysis/ # C级：成本分析管理
|
||
│ │ │ └── 📄 index.jsx
|
||
│ │ ├── 📂 AICropModel/ # 🤖 AI作物模型精准决策系统页面
|
||
│ │ │ ├── 📂 DataPerceptionCenter/ # B级：数据感知中心
|
||
│ │ │ │ ├── 📂 RealTimeDataCollection/ # C级：实时数据采集
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 HistoricalDataAnalysis/ # C级：历史数据分析
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 MultiSourceDataFusion/ # C级：多源数据融合
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 ModelIntegrationCenter/ # B级：模型接入集成中心
|
||
│ │ │ │ ├── 📂 ModelAccessManagement/ # C级：模型接入管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 ModelVersionControl/ # C级：模型版本控制
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 APIServiceIntegration/ # C级：API服务集成
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 ModelApplicationCenter/ # B级：模型应用中心
|
||
│ │ │ │ ├── 📂 PredictionAnalysis/ # C级：预测分析管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 OptimizationRecommendation/ # C级：优化建议管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📄 ScenarioSimulation/ # C级：场景模拟管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 IntelligentDecisionGeneration/ # B级：智能决策生成
|
||
│ │ │ │ ├── 📂 DecisionEngine/ # C级：决策引擎管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 RuleConfiguration/ # C级：规则配置管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📄 DecisionOptimization/ # C级：决策优化管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 IntelligentDecisionSupport/ # B级：智能决策支持
|
||
│ │ │ │ ├── 📂 DecisionVisualization/ # C级：决策可视化
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 ImpactAssessment/ # C级：影响评估管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 DecisionTracking/ # C级：决策跟踪管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 DecisionApplication/ # B级：决策应用
|
||
│ │ │ │ ├── 📂 AutomaticExecution/ # C级：自动执行管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 ManualAdjustment/ # C级：手动调整管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 FeedbackCollection/ # C级：反馈收集管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 AIKnowledgeBase/ # B级：AI知识库
|
||
│ │ │ │ ├── 📂 ModelDocumentation/ # C级：模型文档管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 CaseDatabase/ # C级：案例数据库管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 ExpertSystem/ # C级：专家系统管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ └── 📂 MonitoringCenter/ # B级：监控中心
|
||
│ │ │ ├── 📂 ModelPerformance/ # C级：模型性能监控
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 DecisionQuality/ # C级：决策质量监控
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ └── 📂 SystemHealth/ # C级：系统健康监控
|
||
│ │ │ └── 📄 index.jsx
|
||
│ │ ├── 📂 WaterFertilizerControl/ # 💧 水肥一体化控制系统页面
|
||
│ │ │ ├── 📂 IrrigationSystemManagement/ # B级：水肥机管理
|
||
│ │ │ │ ├── 📂 DeviceRegistration/ # C级：设备注册管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 StatusMonitoring/ # C级：状态监控管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 MaintenanceManagement/ # C级：维护管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 SmartIrrigation/ # B级：智能灌溉
|
||
│ │ │ │ ├── 📂 IrrigationPlanning/ # C级：灌溉计划管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 AutomatedControl/ # C级：自动控制管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 IrrigationOptimization/ # C级：灌溉优化管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 FertilizerFormulaManagement/ # B级：施肥配方管理
|
||
│ │ │ │ ├── 📂 FormulaConfiguration/ # C级：配方配置管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 CropSpecificFormulas/ # C级：作物专用配方
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 FormulaOptimization/ # C级：配方优化管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 IntegratedControl/ # B级：水肥一体化控制
|
||
│ │ │ │ ├── 📂 SynchronizedControl/ # C级：同步控制管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 PrecisionApplication/ # C级：精准施用管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 RealTimeAdjustment/ # C级：实时调整管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ └── 📂 RealTimeMonitoring/ # B级：实时监测与预警
|
||
│ │ │ ├── 📂 ParameterDisplay/ # C级：参数显示管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 WarningSystem/ # C级：预警系统管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ └── 📂 HistoricalAnalysis/ # C级：历史分析管理
|
||
│ │ │ └── 📄 index.jsx
|
||
│ │ ├── 📂 CentralConfig/ # ⚙️ 中心配置管理系统页面
|
||
│ │ │ ├── 📂 TenantManagement/ # B级：租户管理
|
||
│ │ │ │ ├── 📂 TenantCreation/ # C级：租户创建管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 TenantConfiguration/ # C级：租户配置管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 TenantAuthorization/ # C级：租户授权管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 UserManagement/ # B级：用户管理
|
||
│ │ │ │ ├── 📂 UserAccountManagement/ # C级：用户账号管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 RolePermissionManagement/ # C级：角色权限管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 UserBehaviorTracking/ # C级：用户行为跟踪
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 SystemParameters/ # B级：系统参数
|
||
│ │ │ │ ├── 📂 BasicConfiguration/ # C级：基础配置管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 BusinessRuleSettings/ # C级：业务规则设置
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 InterfaceConfiguration/ # C级：接口配置管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 SystemMonitoring/ # B级：系统监控
|
||
│ │ │ │ ├── 📂 PerformanceMonitoring/ # C级：性能监控管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 LogManagement/ # C级：日志管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 ExceptionHandling/ # C级：异常处理管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ └── 📂 MessageCenter/ # B级：消息中心
|
||
│ │ │ ├── 📂 MessagePushManagement/ # C级：消息推送管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 NotificationSettings/ # C级：通知设置管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ └── 📄 FeedbackManagement/ # C级：反馈管理
|
||
│ │ │ └── 📄 index.jsx
|
||
│ │ ├── 📂 Auth/ # 🔐 认证页面
|
||
│ │ │ ├── 📄 Login.jsx # 登录页面
|
||
│ │ │ └── 📄 Register.jsx # 注册页面
|
||
│ │ └── 📂 Error/ # 🚨 错误页面
|
||
│ │ └── 📄 NotFound404.jsx # 404页面
|
||
│ ├── 📂 components/ # 组件库
|
||
│ │ ├── 📂 ui/ # 基础UI组件(shadcn)
|
||
│ │ ├── 📂 layout/ # 布局组件
|
||
│ │ │ ├── 📄 Header.jsx # 顶部导航
|
||
│ │ │ ├── 📄 Sidebar.jsx # 侧边栏
|
||
│ │ │ └── 📄 Layout.jsx # 主布局
|
||
│ │ ├── 📂 common/ # 通用业务组件
|
||
│ │ └── 📂 business/ # 业务组件
|
||
│ ├── 📂 hooks/ # 自定义Hooks
|
||
│ │ ├── 📄 useAuth.js # 认证Hook
|
||
│ │ ├── 📄 usePermission.js # 权限Hook
|
||
│ │ └── 📄 useRouter.js # 路由Hook
|
||
│ ├── 📂 utils/ # 工具函数
|
||
│ │ ├── 📄 authUtils.js # 认证工具
|
||
│ │ ├── 📄 routeUtils.js # 路由工具
|
||
│ │ └── 📄 formatUtils.js # 格式化工具
|
||
│ ├── 📂 types/ # TypeScript类型
|
||
│ │ ├── 📄 auth.ts # 认证类型
|
||
│ │ ├── 📄 router.ts # 路由类型
|
||
│ │ └── 📄 business.ts # 业务类型
|
||
│ ├── 📂 public/ # 🆕 静态资源目录
|
||
│ │ ├── 📄 favicon.ico # 网站图标
|
||
│ │ ├── 📄 logo.png # 应用Logo
|
||
│ │ ├── 📄 manifest.json # PWA配置文件
|
||
│ │ └── 📂 images/ # 图片资源
|
||
│ ├── 📂 assets/ # 🆕 编译时静态资源
|
||
│ │ ├── 📂 images/ # 图片资源
|
||
│ │ ├── 📂 icons/ # 图标资源
|
||
│ │ ├── 📂 fonts/ # 字体文件
|
||
│ │ └── 📂 data/ # 静态数据文件
|
||
│ ├── 📂 styles/ # 样式文件
|
||
│ │ ├── 📄 globals.css # 全局样式
|
||
│ │ ├── 📄 components.css # 组件样式
|
||
│ │ └── 📄 variables.css # CSS变量
|
||
│ ├── 📄 package.json # 项目配置
|
||
│ ├── 📄 vite.config.js # Vite配置
|
||
│ ├── 📄 tailwind.config.js # Tailwind配置
|
||
│ ├── 📄 tsconfig.json # TypeScript配置
|
||
│ ├── 📄 .eslintrc.js # ESLint配置
|
||
│ ├── 📄 .prettierrc # Prettier配置
|
||
│ ├── 📄 App.jsx # 主应用组件
|
||
│ ├── 📄 main.jsx # 应用入口
|
||
│ └── 📄 index.html # HTML模板
|
||
```
|
||
|
||
## 特性优先配置系统架构
|
||
|
||
### 配置系统设计原则
|
||
|
||
基于业界最佳实践，设计了特性优先的配置系统，具备以下特点：
|
||
|
||
1. **类型安全**: 完整的TypeScript类型定义
|
||
2. **环境隔离**: 开发、测试、UAT、生产环境独立配置
|
||
3. **特性开关**: 细粒度的功能开关管理
|
||
4. **权限控制**: 基于配置的权限验证
|
||
5. **开发友好**: 便捷的API和丰富的工具函数
|
||
|
||
### 配置系统核心架构
|
||
|
||
```typescript
|
||
// 配置系统分层架构 (位于 crop-x/config/ 下)
|
||
crop-x/config/
|
||
├── types/ # 类型定义层
|
||
├── environments/ # 环境配置层
|
||
├── features/ # 特性配置层
|
||
├── services/ # 服务配置层
|
||
├── build/ # 构建配置层
|
||
├── config-manager.ts # 配置管理层
|
||
└── index.ts # 统一入口层
|
||
```
|
||
|
||
### 配置类型系统
|
||
|
||
完整的TypeScript类型定义确保配置的类型安全：
|
||
|
||
```typescript
|
||
// 核心配置类型
|
||
export interface Config {
|
||
environment: Environment;
|
||
app: AppConfig; // 应用基础配置
|
||
api: ApiConfig; // API配置
|
||
features: FeatureConfig; // 功能开关配置
|
||
map: MapConfig; // 地图服务配置
|
||
upload: UploadConfig; // 文件上传配置
|
||
websocket: WebSocketConfig; // WebSocket配置
|
||
cache: CacheConfig; // 缓存配置
|
||
thirdParty: ThirdPartyConfig; // 第三方服务配置
|
||
security: SecurityConfig; // 安全配置
|
||
featureFlags: FeatureFlags; // 特性开关配置
|
||
build: BuildConfig; // 构建配置
|
||
}
|
||
|
||
// 特性开关配置
|
||
export interface FeatureFlags {
|
||
agriculturalMachinery: {
|
||
enabled: boolean;
|
||
realTimeTracking: boolean;
|
||
faultDiagnosis: boolean;
|
||
precisionFarming: boolean;
|
||
};
|
||
landInformation: {
|
||
enabled: boolean;
|
||
gisMapping: boolean;
|
||
spatialAnalysis: boolean;
|
||
soilAnalysis: boolean;
|
||
};
|
||
// ... 其他特性配置
|
||
}
|
||
```
|
||
|
||
### 环境配置系统
|
||
|
||
每个环境都有独立的配置文件，支持环境差异化：
|
||
|
||
```typescript
|
||
// 开发环境配置示例
|
||
export const developmentConfig: Partial<Config> = {
|
||
environment: 'development',
|
||
app: {
|
||
title: '智慧农业生产管理系统',
|
||
version: '1.0.0',
|
||
port: 3001,
|
||
host: 'localhost'
|
||
},
|
||
api: {
|
||
baseURL: 'http://localhost:8080',
|
||
timeout: 10000,
|
||
isMock: true, // 开发环境默认开启Mock数据
|
||
enableLog: true
|
||
},
|
||
features: {
|
||
mock: true,
|
||
devtools: true,
|
||
consoleLog: true,
|
||
sourceMap: true
|
||
},
|
||
// 开发环境特性开关：全开
|
||
featureFlags: {
|
||
agriculturalMachinery: {
|
||
enabled: true,
|
||
realTimeTracking: true,
|
||
faultDiagnosis: true,
|
||
precisionFarming: true
|
||
},
|
||
// ... 其他特性
|
||
}
|
||
};
|
||
```
|
||
|
||
### 特性配置系统
|
||
|
||
特性配置支持复杂的业务逻辑和权限控制：
|
||
|
||
```typescript
|
||
// 农机管理特性配置示例
|
||
export const agriculturalMachineryConfig = {
|
||
meta: {
|
||
name: '智能农机管理系统',
|
||
version: '1.0.0',
|
||
icon: '🚙',
|
||
order: 1
|
||
},
|
||
modules: {
|
||
archive: {
|
||
enabled: true,
|
||
permissions: {
|
||
view: ['agricultural:machinery:view'],
|
||
create: ['agricultural:machinery:create'],
|
||
edit: ['agricultural:machinery:edit']
|
||
},
|
||
features: {
|
||
qrCode: true,
|
||
classification: true,
|
||
batchImport: true
|
||
}
|
||
},
|
||
monitoring: {
|
||
enabled: true,
|
||
permissions: {
|
||
view: ['agricultural:monitoring:view'],
|
||
control: ['agricultural:monitoring:control']
|
||
},
|
||
settings: {
|
||
updateInterval: 5000,
|
||
maxMarkers: 1000
|
||
}
|
||
}
|
||
},
|
||
businessRules: {
|
||
workingHours: { start: '06:00', end: '20:00' },
|
||
maintenance: { interval: { engine: 200 } },
|
||
fuelConsumption: { thresholds: { low: 10 } }
|
||
}
|
||
};
|
||
```
|
||
|
||
### 配置管理器
|
||
|
||
统一的配置管理器提供便捷的配置访问API：
|
||
|
||
```typescript
|
||
class ConfigManager {
|
||
// 获取完整配置
|
||
public getConfig(): Config
|
||
|
||
// 环境判断
|
||
public getEnvironment(): Environment
|
||
public isDevelopment(): boolean
|
||
public isProduction(): boolean
|
||
|
||
// 特性开关检查
|
||
public isFeatureEnabled(feature: keyof FeatureFlags): boolean
|
||
public isSubFeatureEnabled(feature: string, subFeature: string): boolean
|
||
|
||
// 配置获取器
|
||
public getAppConfig(): AppConfig
|
||
public getApiConfig(): ApiConfig
|
||
public getFeatureFlags(): FeatureFlags
|
||
|
||
// 权限检查
|
||
public checkPermission(feature: string, module: string, action: string, permissions: string[]): boolean
|
||
}
|
||
```
|
||
|
||
### 配置使用示例
|
||
|
||
```typescript
|
||
import { config, isFeatureEnabled, features, api } from '@/config';
|
||
|
||
// 环境判断
|
||
if (config.environment === 'development') {
|
||
console.log('开发环境');
|
||
}
|
||
|
||
// 特性开关检查
|
||
if (isFeatureEnabled('agriculturalMachinery')) {
|
||
// 显示农机管理模块
|
||
}
|
||
|
||
// 子特性检查
|
||
if (features.agriculturalMachinery.realTimeTracking()) {
|
||
// 启用实时追踪功能
|
||
}
|
||
|
||
// API配置访问
|
||
const response = await fetch(api.baseURL() + '/machinery/list');
|
||
|
||
// 权限检查
|
||
const canEdit = configManager.checkPermission(
|
||
'agriculturalMachinery',
|
||
'archive',
|
||
'edit',
|
||
userPermissions
|
||
);
|
||
```
|
||
|
||
### 配置系统优势
|
||
|
||
1. **类型安全**: 完整的TypeScript类型支持，编译时错误检查
|
||
2. **环境隔离**: 每个环境独立配置，避免配置冲突
|
||
3. **特性优先**: 按业务特性组织配置，提高代码可维护性
|
||
4. **权限集成**: 配置与权限系统集成，实现动态权限控制
|
||
5. **开发友好**: 提供丰富的工具函数和便捷API
|
||
6. **扩展性强**: 支持动态添加新的特性和配置项
|
||
|
||
### 配置系统实施计划
|
||
|
||
1. **Phase 1**: 创建配置类型定义和基础架构
|
||
2. **Phase 2**: 实现环境配置系统
|
||
3. **Phase 3**: 实现特性配置系统
|
||
4. **Phase 4**: 开发配置管理器
|
||
5. **Phase 5**: 集成到现有代码中
|
||
6. **Phase 6**: 文档和测试完善
|
||
|
||
## 静态资源管理架构
|
||
|
||
### Vite项目静态资源标准
|
||
|
||
基于Vite构建工具的标准项目结构，设计了完整的静态资源管理方案：
|
||
|
||
#### 1. Public目录 (public/)
|
||
|
||
```bash
|
||
crop-x/public/
|
||
├── favicon.ico # 网站图标
|
||
├── logo.png # 应用Logo
|
||
├── manifest.json # PWA配置文件
|
||
├── robots.txt # 搜索引擎爬虫配置
|
||
├── humans.txt # 人类可读的项目信息
|
||
└── images/ # 静态图片资源
|
||
├── logos/ # 各种尺寸的Logo
|
||
├── icons/ # 应用图标
|
||
├── banners/ # 横幅图片
|
||
└── backgrounds/ # 背景图片
|
||
```
|
||
|
||
**Public目录特点：**
|
||
- ✅ 直接复制到构建输出目录
|
||
- ✅ 支持子目录访问
|
||
- ✅ 适合大型静态资源
|
||
- ✅ 可以通过根路径直接访问
|
||
|
||
#### 2. Assets目录 (src/assets/)
|
||
|
||
```bash
|
||
crop-x/src/assets/
|
||
├── images/ # 项目图片资源
|
||
│ ├── common/ # 通用图片
|
||
│ ├── components/ # 组件专用图片
|
||
│ └── pages/ # 页面专用图片
|
||
├── icons/ # 图标资源
|
||
│ ├── svg/ # SVG图标
|
||
│ ├── png/ # PNG图标
|
||
│ └── favicon/ # 网站图标变体
|
||
├── fonts/ # 字体文件
|
||
│ ├── chinese/ # 中文字体
|
||
│ └── english/ # 英文字体
|
||
├── data/ # 静态数据文件
|
||
│ ├── mock/ # Mock数据文件
|
||
│ ├── config/ # 配置文件
|
||
│ └── dictionaries/ # 字典数据
|
||
└── media/ # 多媒体资源
|
||
├── videos/ # 视频文件
|
||
└── audio/ # 音频文件
|
||
```
|
||
|
||
**Assets目录特点：**
|
||
- ✅ 支持构建时处理（压缩、优化）
|
||
- ✅ 支持版本控制和缓存破坏
|
||
- ✅ 支持模块化导入
|
||
- ✅ 支持TypeScript类型检查
|
||
|
||
#### 3. 静态资源使用示例
|
||
|
||
```typescript
|
||
// Public目录资源使用 (直接通过绝对路径访问)
|
||
const logoUrl = '/logo.png';
|
||
const faviconUrl = '/favicon.ico';
|
||
|
||
// Assets目录资源使用 (通过模块导入)
|
||
import logoImage from '@/assets/images/logo.png';
|
||
import iconSvg from '@/assets/icons/svg/menu.svg';
|
||
import chineseFont from '@/assets/fonts/chinese/NotoSansCJK-Regular.woff2';
|
||
|
||
// 动态导入资源
|
||
const loadImage = async (imageName: string) => {
|
||
const module = await import(`@/assets/images/${imageName}.png`);
|
||
return module.default;
|
||
};
|
||
|
||
// CSS中引用资源
|
||
.my-component {
|
||
background-image: url('@/assets/images/background.jpg');
|
||
font-family: 'Noto Sans CJK', sans-serif;
|
||
}
|
||
```
|
||
|
||
#### 4. 静态资源优化策略
|
||
|
||
```typescript
|
||
// vite.config.js 静态资源配置
|
||
export default {
|
||
build: {
|
||
assetsInlineLimit: 4096, // 小于4kb的资源内联为base64
|
||
rollupOptions: {
|
||
output: {
|
||
assetFileNames: 'assets/[name].[hash].[ext]', // 资源文件命名
|
||
chunkFileNames: 'js/[name].[hash].js',
|
||
entryFileNames: 'js/[name].[hash].js'
|
||
}
|
||
}
|
||
},
|
||
// 静态资源服务配置
|
||
server: {
|
||
fs: {
|
||
allow: ['..'] // 允许访问上级目录的静态资源
|
||
}
|
||
}
|
||
};
|
||
```
|
||
|
||
#### 5. 图片资源管理
|
||
|
||
```typescript
|
||
// 图片组件封装
|
||
import { lazy } from 'react';
|
||
|
||
const ImageWithFallback = lazy(() => import('@/components/common/ImageWithFallback'));
|
||
|
||
// 使用示例
|
||
<ImageWithFallback
|
||
src="/images/machinery/default.jpg"
|
||
fallback="/images/machinery/placeholder.jpg"
|
||
alt="农机图片"
|
||
className="w-full h-48 object-cover"
|
||
loading="lazy"
|
||
/>
|
||
```
|
||
|
||
#### 6. 字体资源管理
|
||
|
||
```css
|
||
/* globals.css */
|
||
@font-face {
|
||
font-family: 'CropX Chinese';
|
||
src: url('@/assets/fonts/chinese/NotoSansCJK-Regular.woff2') format('woff2');
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-display: swap; /* 优化字体加载性能 */
|
||
}
|
||
|
||
/* 响应式字体大小 */
|
||
:root {
|
||
--font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
|
||
--font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
|
||
--font-size-base: clamp(1rem, 0.925rem + 0.375vw, 1.125rem);
|
||
--font-size-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
|
||
}
|
||
```
|
||
|
||
#### 7. PWA资源配置
|
||
|
||
```json
|
||
// public/manifest.json
|
||
{
|
||
"name": "智慧农业生产管理系统",
|
||
"short_name": "智慧农业",
|
||
"description": "Smart Agriculture Production Management System",
|
||
"start_url": "/",
|
||
"display": "standalone",
|
||
"background_color": "#ffffff",
|
||
"theme_color": "#10b981",
|
||
"icons": [
|
||
{
|
||
"src": "/images/icons/icon-72x72.png",
|
||
"sizes": "72x72",
|
||
"type": "image/png"
|
||
},
|
||
{
|
||
"src": "/images/icons/icon-192x192.png",
|
||
"sizes": "192x192",
|
||
"type": "image/png"
|
||
},
|
||
{
|
||
"src": "/images/icons/icon-512x512.png",
|
||
"sizes": "512x512",
|
||
"type": "image/png"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
#### 8. 静态资源性能优化
|
||
|
||
- **图片优化**: WebP格式支持、响应式图片、懒加载
|
||
- **字体优化**: 字体子集化、font-display策略
|
||
- **资源压缩**: Gzip/Brotli压缩、资源合并
|
||
- **缓存策略**: 长期缓存、版本控制
|
||
- **CDN支持**: 静态资源CDN分发
|
||
|
||
## 路由命名映射
|
||
|
||
基于实际业务名称的路由映射：
|
||
|
||
```javascript
|
||
// 导航系统实际名称 → 路由名称
|
||
智能农机管理系统 → /AgriculturalMachinery
|
||
地块信息管理系统 → /LandInformation
|
||
农事操作管理系统 → /FarmingOperation
|
||
农业资产管理系统 → /AgriculturalAsset
|
||
AI作物模型精准决策系统 → /AICropModel
|
||
水肥一体化控制系统 → /WaterFertilizerControl
|
||
中心配置管理系统 → /CentralConfig
|
||
```
|
||
|
||
## 三级路由结构设计
|
||
|
||
### 示例：智能农机管理系统 (/AgriculturalMachinery)
|
||
|
||
```javascript
|
||
/AgriculturalMachinery/ // A级：系统主入口
|
||
├── /Archive/ // B级：农机档案模块
|
||
│ ├── /MachineryEntry // C级：农机档案录入与维护
|
||
│ ├── /ClassificationManagement // C级：农机分类与标签管理
|
||
│ └── /QRCodeManagement // C级：农机二维码管理
|
||
├── /DriverArchive/ // B级：驾驶员档案模块
|
||
│ ├── /DriverInfoManagement // C级：驾驶员信息管理
|
||
│ └── /DriverTaskManagement // C级：驾驶员任务管理
|
||
├── /LoadManagement/ // B级：负载管理模块
|
||
│ ├── /LoadDeviceManagement // C级：负载管理
|
||
│ ├── /LoadTypeManagement // C级：负载类型
|
||
│ └── /LoadParameterManagement // C级：负载参数
|
||
├── /Monitoring/ // B级：实时监控模块
|
||
│ ├── /RealTimeLocationTracking // C级：实时位置追踪
|
||
│ ├── /WorkStatusMonitoring // C级：工作状态监控
|
||
│ └── /OperationDataMonitoring // C级：作业数据监控
|
||
├── /FaultDiagnosis/ // B级：故障诊断模块
|
||
│ ├── /FaultWarning // C级：故障诊断与预警
|
||
│ ├── /HealthAssessment // C级：健康评估
|
||
│ └── /ParameterMonitoring // C级：运行参数监测
|
||
├── /PrecisionOperation/ // B级：精准作业模块
|
||
│ ├── /OperationRecord // C级：作业数据记录
|
||
│ ├── /RoutePlanning // C级：作业路线规划
|
||
│ ├── /PlanDispatch // C级：作业方案下发
|
||
│ └── /DrivingCockpit // C级：农机驾驶舱
|
||
├── /DataAnalysis/ // B级：数据分析模块
|
||
│ ├── /OperationAnalysis // C级：作业数据分析
|
||
│ └── /HistoricalDataComparison // C级：历史数据查询与对比
|
||
├── /Scheduling/ // B级：调度管理模块
|
||
│ ├── /TaskAssignment // C级：任务分配
|
||
│ ├── /RealTimeDispatch // C级：实时调度监控
|
||
│ └── /TrackPlayback // C级：农机作业轨迹回放
|
||
└── /Security/ // B级：安全安防模块
|
||
└── /GeoFence // C级：电子围栏
|
||
```
|
||
|
||
## 权限数组设计
|
||
|
||
### 权限检查逻辑
|
||
|
||
```javascript
|
||
// 路由权限配置示例
|
||
{
|
||
path: '/AgriculturalMachinery/Archive/MachineryEntry',
|
||
component: MachineryEntry,
|
||
auth: [
|
||
'system:admin',
|
||
'agricultural:machinery:admin',
|
||
'agricultural:machinery:operator'
|
||
]
|
||
}
|
||
|
||
// 权限检查函数
|
||
const hasAuth = (userAuths, requiredAuths) => {
|
||
if (!requiredAuths || requiredAuths.length === 0) return true;
|
||
return requiredAuths.some(auth => userAuths.includes(auth));
|
||
};
|
||
```
|
||
|
||
### 完整权限体系
|
||
|
||
```javascript
|
||
// 系统级权限
|
||
const SYSTEM_PERMISSIONS = [
|
||
'system:admin', // 系统管理员
|
||
'system:operator', // 系统操作员
|
||
'system:view' // 系统查看者
|
||
];
|
||
|
||
// 农机系统权限
|
||
const AGRICULTURAL_PERMISSIONS = [
|
||
'agricultural:machinery:admin', // 农机管理员
|
||
'agricultural:machinery:operator', // 农机操作员
|
||
'agricultural:machinery:driver', // 驾驶员
|
||
'agricultural:machinery:monitor', // 监控员
|
||
'agricultural:machinery:analyst' // 分析员
|
||
];
|
||
|
||
// 地块系统权限
|
||
const LAND_PERMISSIONS = [
|
||
'land:information:admin',
|
||
'land:information:manager',
|
||
'land:information:analyst',
|
||
'land:monitoring:operator'
|
||
];
|
||
|
||
// 农事系统权限
|
||
const FARMING_PERMISSIONS = [
|
||
'farming:operation:admin',
|
||
'farming:operation:manager',
|
||
'farming:operation:staff',
|
||
'farming:planning:analyst'
|
||
];
|
||
|
||
// 资产系统权限
|
||
const ASSET_PERMISSIONS = [
|
||
'asset:management:admin',
|
||
'asset:procurement:manager',
|
||
'asset:inventory:keeper',
|
||
'asset:report:viewer'
|
||
];
|
||
|
||
// AI系统权限
|
||
const AI_PERMISSIONS = [
|
||
'ai:model:admin',
|
||
'ai:model:operator',
|
||
'ai:decision:analyst',
|
||
'ai:monitoring:viewer'
|
||
];
|
||
|
||
// 灌溉系统权限
|
||
const IRRIGATION_PERMISSIONS = [
|
||
'irrigation:control:admin',
|
||
'irrigation:control:operator',
|
||
'irrigation:monitoring:staff'
|
||
];
|
||
|
||
// 配置系统权限
|
||
const CONFIG_PERMISSIONS = [
|
||
'config:system:admin',
|
||
'config:user:manager',
|
||
'config:tenant:admin',
|
||
'config:monitoring:viewer'
|
||
];
|
||
```
|
||
|
||
## 路由拦截器实现
|
||
|
||
### 路由守卫组件
|
||
|
||
```javascript
|
||
// crop-x/src/router/guard.js
|
||
import { Navigate, useLocation } from 'react-router-dom';
|
||
import { useAuthStore } from '../stores/authStore';
|
||
|
||
export const RouteGuard = ({ children, routeConfig }) => {
|
||
const { permissions, isAuthenticated } = useAuthStore();
|
||
const location = useLocation();
|
||
|
||
// 1. 检查认证状态
|
||
if (!isAuthenticated && routeConfig?.auth?.length > 0) {
|
||
return <Navigate to="/login" replace state={{ from: location }} />;
|
||
}
|
||
|
||
// 2. 检查路由是否存在
|
||
if (!routeConfig) {
|
||
return <Navigate to="/404" replace state={{ from: location }} />;
|
||
}
|
||
|
||
// 3. 检查权限
|
||
if (routeConfig.auth && routeConfig.auth.length > 0) {
|
||
const hasPermission = routeConfig.auth.some(
|
||
requiredAuth => permissions.includes(requiredAuth)
|
||
);
|
||
|
||
if (!hasPermission) {
|
||
return <Navigate to="/404" replace state={{ reason: 'permission' }} />;
|
||
}
|
||
}
|
||
|
||
return children;
|
||
};
|
||
```
|
||
|
||
### 404页面设计
|
||
|
||
```javascript
|
||
// crop-x/src/pages/Error/NotFound404.jsx
|
||
import { Button } from '@/components/ui/button';
|
||
import { useNavigate, useLocation } from 'react-router-dom';
|
||
import { AlertTriangle, Home, ArrowLeft } from 'lucide-react';
|
||
|
||
export const NotFound404 = () => {
|
||
const navigate = useNavigate();
|
||
const location = useLocation();
|
||
const isPermissionDenied = location.state?.reason === 'permission';
|
||
|
||
return (
|
||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||
<div className="text-center max-w-md mx-auto p-6">
|
||
{/* 404图案 */}
|
||
<div className="mb-8">
|
||
<div className="w-32 h-32 mx-auto bg-red-100 rounded-full flex items-center justify-center">
|
||
<AlertTriangle className="w-16 h-16 text-red-500" />
|
||
</div>
|
||
</div>
|
||
|
||
<h1 className="text-4xl font-bold text-gray-900 mb-2">404</h1>
|
||
|
||
{isPermissionDenied ? (
|
||
<>
|
||
<h2 className="text-xl font-semibold text-red-600 mb-4">
|
||
您没有权限访问此页面
|
||
</h2>
|
||
<p className="text-gray-600 mb-6">
|
||
请联系管理员获取相应权限，或返回首页
|
||
</p>
|
||
<div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg mb-6">
|
||
<p className="text-sm text-yellow-800">
|
||
<strong>提示：</strong>如果这是系统错误，请联系技术支持
|
||
</p>
|
||
</div>
|
||
</>
|
||
) : (
|
||
<>
|
||
<h2 className="text-xl font-semibold text-gray-700 mb-4">
|
||
页面不存在
|
||
</h2>
|
||
<p className="text-gray-600 mb-6">
|
||
您访问的页面可能已被删除、移动或暂时不可用
|
||
</p>
|
||
</>
|
||
)}
|
||
|
||
<div className="space-y-3">
|
||
<Button onClick={() => navigate(-1)} className="w-full">
|
||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||
返回上一页
|
||
</Button>
|
||
<Button variant="outline" onClick={() => navigate('/')} className="w-full">
|
||
<Home className="w-4 h-4 mr-2" />
|
||
返回首页
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
```
|
||
|
||
## 主路由配置
|
||
|
||
```javascript
|
||
// crop-x/src/router/index.js
|
||
import { createBrowserRouter, Navigate } from 'react-router-dom';
|
||
import { Layout } from '@/components/layout/Layout';
|
||
import { RouteGuard } from './guard';
|
||
import { NotFound404 } from '@/pages/Error/NotFound404';
|
||
|
||
// 导入各系统路由
|
||
import { agriculturalMachineryRoutes } from './agriculturalMachineryRoutes';
|
||
import { landInformationRoutes } from './landInformationRoutes';
|
||
import { farmingOperationRoutes } from './farmingOperationRoutes';
|
||
import { agriculturalAssetRoutes } from './agriculturalAssetRoutes';
|
||
import { aiCropModelRoutes } from './aiCropModelRoutes';
|
||
import { waterFertilizerControlRoutes } from './waterFertilizerControlRoutes';
|
||
import { centralConfigRoutes } from './centralConfigRoutes';
|
||
|
||
// 导入认证页面
|
||
import { Login } from '@/pages/Auth/Login';
|
||
import { Register } from '@/pages/Auth/Register';
|
||
|
||
export const router = createBrowserRouter([
|
||
{
|
||
path: '/',
|
||
element: <Layout />,
|
||
children: [
|
||
{ index: true, element: <Navigate to="/AgriculturalMachinery" replace /> },
|
||
|
||
// 7大业务系统路由
|
||
...agriculturalMachineryRoutes, // 智能农机管理系统
|
||
...landInformationRoutes, // 地块信息管理系统
|
||
...farmingOperationRoutes, // 农事操作管理系统
|
||
...agriculturalAssetRoutes, // 农业资产管理系统
|
||
...aiCropModelRoutes, // AI作物模型精准决策系统
|
||
...waterFertilizerControlRoutes, // 水肥一体化控制系统
|
||
...centralConfigRoutes, // 中心配置管理系统
|
||
]
|
||
},
|
||
|
||
// 认证路由（不需要布局）
|
||
{
|
||
path: '/login',
|
||
element: <Login />
|
||
},
|
||
{
|
||
path: '/register',
|
||
element: <Register />
|
||
},
|
||
|
||
// 错误页面
|
||
{
|
||
path: '/404',
|
||
element: <NotFound404 />
|
||
},
|
||
{
|
||
path: '*',
|
||
element: <Navigate to="/404" replace />
|
||
}
|
||
]);
|
||
```
|
||
|
||
## 农机系统路由示例
|
||
|
||
```javascript
|
||
// crop-x/src/router/agriculturalMachineryRoutes.js
|
||
import { lazy } from 'react';
|
||
|
||
// 懒加载页面组件
|
||
const MachineryEntry = lazy(() => import('@/pages/AgriculturalMachinery/Archive/MachineryEntry'));
|
||
const ClassificationManagement = lazy(() => import('@/pages/AgriculturalMachinery/Archive/ClassificationManagement'));
|
||
const QRCodeManagement = lazy(() => import('@/pages/AgriculturalMachinery/Archive/QRCodeManagement'));
|
||
// ... 其他页面组件
|
||
|
||
// 路由配置
|
||
export const agriculturalMachineryRoutes = [
|
||
{
|
||
path: '/AgriculturalMachinery',
|
||
auth: ['system:admin', 'agricultural:machinery:admin', 'agricultural:machinery:operator', 'agricultural:machinery:view'],
|
||
children: [
|
||
// 档案管理模块
|
||
{
|
||
path: '/Archive',
|
||
auth: ['system:admin', 'agricultural:machinery:admin', 'agricultural:machinery:operator'],
|
||
children: [
|
||
{
|
||
path: '/MachineryEntry',
|
||
element: <RouteGuard routeConfig={{ auth: ['system:admin', 'agricultural:machinery:admin', 'agricultural:machinery:operator'] }}>
|
||
<MachineryEntry />
|
||
</RouteGuard>
|
||
},
|
||
{
|
||
path: '/ClassificationManagement',
|
||
element: <RouteGuard routeConfig={{ auth: ['system:admin', 'agricultural:machinery:admin'] }}>
|
||
<ClassificationManagement />
|
||
</RouteGuard>
|
||
},
|
||
{
|
||
path: '/QRCodeManagement',
|
||
element: <RouteGuard routeConfig={{ auth: ['system:admin', 'agricultural:machinery:admin', 'agricultural:machinery:operator'] }}>
|
||
<QRCodeManagement />
|
||
</RouteGuard>
|
||
}
|
||
]
|
||
},
|
||
|
||
// 监控模块
|
||
{
|
||
path: '/Monitoring',
|
||
auth: ['system:admin', 'agricultural:machinery:admin', 'agricultural:machinery:operator', 'agricultural:machinery:monitor'],
|
||
children: [
|
||
{
|
||
path: '/RealTimeLocationTracking',
|
||
element: <RouteGuard routeConfig={{ auth: ['system:admin', 'agricultural:machinery:admin', 'agricultural:machinery:operator', 'agricultural:machinery:monitor'] }}>
|
||
<RealTimeLocationTracking />
|
||
</RouteGuard>
|
||
},
|
||
// ... 其他监控页面
|
||
]
|
||
},
|
||
|
||
// ... 其他模块
|
||
]
|
||
}
|
||
];
|
||
```
|
||
|
||
## 实施计划
|
||
|
||
### Phase 1: 基础架构搭建（3-5天）
|
||
|
||
1. **创建项目骨架**
|
||
```bash
|
||
# 在根目录下创建新项目
|
||
mkdir crop-x
|
||
cd crop-x
|
||
|
||
# 初始化新项目
|
||
npm create vite@latest . -- --template react-ts
|
||
npm install
|
||
|
||
# 安装核心依赖
|
||
npm install zustand react-router-dom lucide-react
|
||
npm install -D tailwindcss postcss autoprefixer @types/node
|
||
npx tailwindcss init -p
|
||
```
|
||
|
||
2. **配置开发环境**
|
||
- 配置 Tailwind CSS
|
||
- 设置 TypeScript 严格模式
|
||
- 配置 Vite 开发服务器
|
||
- 设置 shadcn/ui 组件库
|
||
|
||
3. **创建基础目录结构**
|
||
- router/、stores/、pages/、components/、hooks/、utils/、types/
|
||
- 建立基础的文件结构
|
||
|
||
### Phase 2: 路由系统实现（3-4天）
|
||
|
||
1. **实现路由核心**
|
||
- 创建 router/guard.js 路由守卫
|
||
- 实现 router/index.js 主路由配置
|
||
- 创建 7 个业务系统的路由文件
|
||
|
||
2. **实现权限系统**
|
||
- 设计权限数组验证逻辑
|
||
- 创建权限检查工具函数
|
||
- 实现权限数据管理
|
||
|
||
3. **创建错误页面**
|
||
- 设计 404 权限提示页面
|
||
- 实现路由拦截机制
|
||
- 添加错误边界组件
|
||
|
||
### Phase 3: 用户认证模块（4-5天）
|
||
|
||
1. **状态管理**
|
||
- 创建 authStore.js
|
||
- 实现用户登录/注册逻辑
|
||
- 管理权限数据
|
||
|
||
2. **认证页面**
|
||
- 实现登录页面 UI
|
||
- 实现注册页面 UI
|
||
- 添加表单验证
|
||
|
||
3. **认证流程**
|
||
- 实现登录认证流程
|
||
- 添加 token 管理
|
||
- 实现自动登录功能
|
||
|
||
### Phase 4: 布局组件开发（3-4天）
|
||
|
||
1. **主布局组件**
|
||
- 创建 Layout.jsx 主布局
|
||
- 实现响应式设计
|
||
- 集成路由守卫
|
||
|
||
2. **导航组件**
|
||
- 创建 Header.jsx 顶部导航
|
||
- 实现 Sidebar.jsx 侧边栏
|
||
- 添加用户菜单和通知
|
||
|
||
3. **UI组件库**
|
||
- 配置 shadcn/ui 基础组件
|
||
- 创建通用业务组件
|
||
- 建立设计规范
|
||
|
||
### Phase 5: 业务页面开发（1-2周）
|
||
|
||
1. **农机系统页面**（优先级最高）
|
||
- 档案管理页面
|
||
- 监控页面
|
||
- 作业管理页面
|
||
|
||
2. **其他系统页面**
|
||
- 按优先级依次实现其他6个系统
|
||
- 保持UI一致性和交互规范
|
||
|
||
### Phase 6: 测试和优化（3-5天）
|
||
|
||
1. **功能测试**
|
||
- 路由跳转测试
|
||
- 权限控制测试
|
||
- 用户认证测试
|
||
|
||
2. **性能优化**
|
||
- 代码分割优化
|
||
- 组件懒加载
|
||
- 状态管理优化
|
||
|
||
3. **文档和部署**
|
||
- API文档编写
|
||
- 部署配置
|
||
- 上线准备
|
||
|
||
## 技术特性
|
||
|
||
### React 19 特性集成
|
||
- **并发特性**: 使用 useTransition 和 useDeferredValue
|
||
- **Suspense**: 实现组件懒加载和错误边界
|
||
- **服务器组件**: 为未来SSR做准备
|
||
|
||
### Zustand 状态管理
|
||
- **轻量级**: 相比 Redux 更简洁
|
||
- **TypeScript友好**: 完整的类型支持
|
||
- **中间件支持**: 持久化、开发工具等
|
||
|
||
### shadcn/ui 设计系统
|
||
- **现代化设计**: 基于 Radix UI 的无障碍组件
|
||
- **高度可定制**: 配合 Tailwind CSS
|
||
- **开发体验**: 优秀的开发工具和文档
|
||
|
||
### 权限系统特性
|
||
- **数组权限**: 支持多权限验证
|
||
- **细粒度控制**: 页面级和功能级权限
|
||
- **动态权限**: 支持权限动态更新
|
||
|
||
## API 系统架构设计
|
||
|
||
### 环境配置管理
|
||
|
||
```javascript
|
||
// crop-x/apis/index.js - 环境配置和API统一入口
|
||
const ENV_CONFIG = {
|
||
development: {
|
||
baseURL: 'http://localhost:8080',
|
||
timeout: 10000,
|
||
enableLogging: true,
|
||
isMock: true // 开发环境默认开启Mock数据
|
||
},
|
||
test: {
|
||
baseURL: 'http://test-api.smart-crop.com',
|
||
timeout: 15000,
|
||
enableLogging: true,
|
||
isMock: false // 测试环境使用真实接口
|
||
},
|
||
production: {
|
||
baseURL: 'https://api.smart-crop.com',
|
||
timeout: 20000,
|
||
enableLogging: false,
|
||
isMock: false // 生产环境使用真实接口
|
||
}
|
||
};
|
||
```
|
||
|
||
### API 统一导出
|
||
|
||
```javascript
|
||
// 统一导出所有模块API
|
||
export const API = {
|
||
// 7大业务系统
|
||
agriculturalMachinery: agriculturalMachineryAPI(api),
|
||
landInformation: landInformationAPI(api),
|
||
farmingOperation: farmingOperationAPI(api),
|
||
agriculturalAsset: agriculturalAssetAPI(api),
|
||
aiCropModel: aiCropModelAPI(api),
|
||
waterFertilizerControl: waterFertilizerControlAPI(api),
|
||
centralConfig: centralConfigAPI(api),
|
||
|
||
// 认证API
|
||
auth: {
|
||
login: (credentials) => api.post('/auth/login', credentials),
|
||
register: (userInfo) => api.post('/auth/register', userInfo),
|
||
logout: () => api.post('/auth/logout'),
|
||
// ... 其他认证接口
|
||
},
|
||
|
||
// 通用API
|
||
common: {
|
||
uploadFile: (fileData) => api.post('/common/upload', fileData),
|
||
downloadFile: (fileId) => api.get(`/common/download/${fileId}`),
|
||
// ... 其他通用接口
|
||
}
|
||
};
|
||
```
|
||
|
||
### 请求拦截器设计
|
||
|
||
```javascript
|
||
// crop-x/apis/interceptor.js - 请求拦截器
|
||
// 核心功能：
|
||
// 1. 为除登录接口外的所有请求添加身份信息
|
||
// 2. 自动刷新token机制
|
||
// 3. 统一错误处理
|
||
// 4. 请求/响应日志记录
|
||
// 5. Mock数据开关控制
|
||
|
||
// 身份信息字段
|
||
// auth: JWT token
|
||
// user_id: 用户ID（手机号码）
|
||
|
||
// Mock数据控制
|
||
// isMock: true/false - 控制是否使用Mock数据
|
||
```
|
||
|
||
### Mock数据系统设计
|
||
|
||
```javascript
|
||
// crop-x/apis/mockManager.js - Mock数据管理器
|
||
export const createMockManager = (config) => {
|
||
const { isMock } = config;
|
||
|
||
// Mock数据获取函数
|
||
const getMockData = async (mockPath) => {
|
||
try {
|
||
// 动态导入Mock数据文件
|
||
const mockModule = await import(`../mocks/${mockPath}`);
|
||
return mockModule.default || mockModule;
|
||
} catch (error) {
|
||
console.error(`Mock数据文件不存在: ${mockPath}`, error);
|
||
throw new Error(`Mock数据文件不存在: ${mockPath}`);
|
||
}
|
||
};
|
||
|
||
return {
|
||
// 判断是否使用Mock数据
|
||
shouldUseMock: () => isMock,
|
||
|
||
// 获取Mock数据
|
||
getMockData,
|
||
|
||
// 模拟延迟（模拟网络请求）
|
||
mockDelay: (min = 100, max = 500) =>
|
||
new Promise(resolve => setTimeout(resolve, Math.random() * (max - min) + min))
|
||
};
|
||
};
|
||
```
|
||
|
||
### Mock数据文件命名规范
|
||
|
||
```javascript
|
||
// Mock数据文件命名规则：
|
||
// 1. 与pages目录结构完全一致
|
||
// 2. 文件名前缀加"Mock"四个字母
|
||
// 3. 每个页面对应一个Mock数据文件
|
||
|
||
// 示例：
|
||
// pages/AgriculturalMachinery/Archive/MachineryEntry/index.jsx
|
||
// 对应：
|
||
// mocks/AgriculturalMachinery/Archive/MachineryEntry/MockMachineryEntry.js
|
||
|
||
// Mock数据文件结构示例：
|
||
export default {
|
||
code: 200,
|
||
message: '获取成功',
|
||
data: {
|
||
list: [
|
||
{
|
||
id: 'machinery_001',
|
||
name: '约翰迪尔拖拉机 JD-001',
|
||
type: '拖拉机',
|
||
brand: '约翰迪尔',
|
||
model: 'JD-001',
|
||
status: '运行中',
|
||
// ... 其他字段
|
||
}
|
||
// ... 更多数据
|
||
],
|
||
pagination: {
|
||
current: 1,
|
||
pageSize: 10,
|
||
total: 50
|
||
}
|
||
}
|
||
};
|
||
```
|
||
|
||
### API请求与Mock数据集成
|
||
|
||
```javascript
|
||
// crop-x/apis/interceptor.js - 请求拦截器增强版
|
||
import { createMockManager } from './mockManager';
|
||
|
||
// 在请求拦截器中集成Mock数据
|
||
api.interceptors.request.use(
|
||
async (config) => {
|
||
const mockManager = createMockManager(envConfig);
|
||
|
||
// 如果开启Mock数据且非登录接口
|
||
if (mockManager.shouldUseMock() && !config.url?.includes('/auth/')) {
|
||
// 拦截请求，返回Mock数据
|
||
const mockPath = config.mockPath || generateMockPath(config.url);
|
||
const mockData = await mockManager.getMockData(mockPath);
|
||
await mockManager.mockDelay(); // 模拟网络延迟
|
||
|
||
// 直接返回Mock数据，不发送真实请求
|
||
return Promise.reject({
|
||
__mock: true,
|
||
data: mockData,
|
||
config
|
||
});
|
||
}
|
||
|
||
// 正常请求流程
|
||
return config;
|
||
},
|
||
(error) => {
|
||
return Promise.reject(error);
|
||
}
|
||
);
|
||
|
||
// 响应拦截器处理Mock数据
|
||
api.interceptors.response.use(
|
||
(response) => {
|
||
return response;
|
||
},
|
||
(error) => {
|
||
// 如果是Mock数据请求，返回Mock数据
|
||
if (error.__mock) {
|
||
return {
|
||
data: error.data,
|
||
status: 200,
|
||
statusText: 'OK',
|
||
headers: {},
|
||
config: error.config,
|
||
request: {}
|
||
};
|
||
}
|
||
|
||
// 正常错误处理
|
||
return Promise.reject(error);
|
||
}
|
||
);
|
||
```
|
||
|
||
### 模块化API设计
|
||
|
||
每个业务模块的API都采用函数式设计，接收axios实例并返回模块化的API对象：
|
||
|
||
```javascript
|
||
// 示例：农机管理API结构
|
||
export const agriculturalMachineryAPI = (api) => ({
|
||
// 农机档案
|
||
archive: {
|
||
getMachineryList: (params) => api.get('/agricultural/machinery/archive/list', { params }),
|
||
createMachinery: (data) => api.post('/agricultural/machinery/archive/create', data),
|
||
// ... 其他档案接口
|
||
},
|
||
|
||
// 驾驶员档案
|
||
driver: {
|
||
getDriverList: (params) => api.get('/agricultural/driver/archive/list', { params }),
|
||
createDriver: (data) => api.post('/agricultural/driver/archive/create', data),
|
||
// ... 其他驾驶员接口
|
||
},
|
||
|
||
// 其他模块...
|
||
});
|
||
```
|
||
|
||
### API 使用示例
|
||
|
||
```javascript
|
||
import { API } from '@/apis';
|
||
|
||
// 使用农机管理API
|
||
const machineryList = await API.agriculturalMachinery.archive.getMachineryList();
|
||
const newMachinery = await API.agriculturalMachinery.archive.createMachinery(data);
|
||
|
||
// 使用认证API
|
||
const loginResult = await API.auth.login({ username, password });
|
||
|
||
// 使用通用API
|
||
const uploadResult = await API.common.uploadFile(formData);
|
||
```
|
||
|
||
## API 模块详细设计
|
||
|
||
### 1. 智能农机管理系统 API (agriculturalMachinery.js)
|
||
- **农机档案管理**: CRUD、分类管理、QR码管理
|
||
- **驾驶员档案管理**: 信息管理、任务分配
|
||
- **负载管理**: 设备管理、类型管理、参数配置
|
||
- **实时监控**: 位置追踪、状态监控、数据获取
|
||
- **故障诊断**: 故障报告、健康评估、参数监测
|
||
- **精准作业**: 作业记录、路线规划、方案下发、驾驶舱
|
||
- **数据分析**: 作业分析、历史对比、统计报表
|
||
- **调度管理**: 任务分配、实时调度、轨迹回放
|
||
- **安全安防**: 电子围栏管理
|
||
|
||
### 2. 地块信息管理系统 API (landInformation.js)
|
||
- **地块档案管理**: 地块CRUD、分类标签、批量操作
|
||
- **地图管理**: GIS数据、数字化绘制、空间查询、卫星影像
|
||
- **空间分析**: 土壤数据、分层采样、质量评价
|
||
- **环境监测**: 气象数据、环境传感器、监测历史
|
||
- **适宜性评价**: 综合评价、批量分析、作物推荐、权重配置
|
||
- **对比分析**: 多维指标、图表分析、报告生成
|
||
- **风险预警**: 实时监测、预警推送、处置跟踪
|
||
|
||
### 3. 农事操作管理系统 API (farmingOperation.js)
|
||
- **农事计划**: 计划制定、资源分配、进度跟踪
|
||
- **农事任务**: 任务管理、分配派发、状态监控、历史统计
|
||
- **农事执行**: 类型管理、操作录入、日志查询
|
||
- **农事日历**: 可视化视图、甘特图、进度可视化
|
||
- **农事档案**: 归集生成、全维视图、追踪溯源
|
||
- **知识库**: 内容管理、分类标签、智能检索
|
||
- **绩效管理**: 人员管理、工时记录、统计报表、排班管理
|
||
- **问题协同**: 问题上报、处理分派、在线协作
|
||
|
||
### 4-7. 其他系统API (agriculturalAsset.js, aiCropModel.js, waterFertilizerControl.js, centralConfig.js)
|
||
- 采用相同的模块化设计结构
|
||
- 每个模块包含完整的CRUD操作和业务特定接口
|
||
- 支持文件上传、数据导出、批量操作等通用功能
|
||
|
||
## 技术特性
|
||
|
||
### API拦截器特性
|
||
- **智能认证**: 自动为所有非认证接口添加JWT token和用户ID
|
||
- **token刷新**: 自动检测token过期并刷新
|
||
- **错误处理**: 统一的HTTP错误处理和用户提示
|
||
- **日志记录**: 开发环境下的完整请求/响应日志
|
||
- **性能监控**: 请求耗时统计和分析
|
||
- **Mock数据控制**: 智能切换Mock/真实数据，支持开发调试
|
||
|
||
### Mock数据系统特性
|
||
- **目录结构一致性**: Mock目录与pages目录完全对应
|
||
- **命名规范统一**: 文件名前缀"Mock"四个字母
|
||
- **动态加载**: 按需动态导入Mock数据文件
|
||
- **网络模拟**: 自动模拟网络请求延迟
|
||
- **数据格式统一**: Mock数据与真实接口返回格式一致
|
||
- **环境切换**: 通过isMock字段灵活控制Mock开关
|
||
|
||
### 环境管理特性
|
||
- **多环境支持**: development/test/production环境自动切换
|
||
- **配置灵活**: 每个环境独立的域名、端口、超时配置
|
||
- **调试友好**: 开发环境详细日志，生产环境性能优化
|
||
|
||
### 模块化特性
|
||
- **高度解耦**: 每个业务模块独立API设计
|
||
- **类型安全**: 完整的TypeScript类型定义
|
||
- **易于维护**: 清晰的API结构和命名规范
|
||
- **扩展性强**: 支持动态添加新的业务模块
|
||
|
||
## 环境架构设计
|
||
|
||
### Vite环境变量管理
|
||
|
||
在根目录下创建 `viteEnv/` 文件夹，包含4个环境配置文件：
|
||
|
||
```bash
|
||
viteEnv/
|
||
├── .env.development # 开发环境
|
||
├── .env.test # 测试环境
|
||
├── .env.uat # 用户测试环境
|
||
└── .env.production # 生产环境
|
||
```
|
||
|
||
### 环境配置详情
|
||
|
||
#### 1. 开发环境 (.env.development)
|
||
```bash
|
||
# 应用配置
|
||
VITE_APP_TITLE=智慧农业生产管理系统
|
||
VITE_APP_VERSION=1.0.0
|
||
VITE_NODE_ENV=development
|
||
VITE_APP_ENV=dev
|
||
|
||
# API配置
|
||
VITE_API_BASE_URL=http://localhost:8080
|
||
VITE_API_TIMEOUT=10000
|
||
|
||
# 功能开关
|
||
VITE_ENABLE_MOCK=true
|
||
VITE_ENABLE_DEVTOOLS=true
|
||
VITE_ENABLE_CONSOLE_LOG=true
|
||
VITE_ENABLE_API_LOG=true
|
||
|
||
# 应用端口
|
||
VITE_APP_PORT=3001
|
||
VITE_APP_HOST=localhost
|
||
```
|
||
|
||
#### 2. 测试环境 (.env.test)
|
||
```bash
|
||
# 应用配置
|
||
VITE_APP_TITLE=智慧农业生产管理系统
|
||
VITE_NODE_ENV=production
|
||
VITE_APP_ENV=test
|
||
|
||
# API配置
|
||
VITE_API_BASE_URL=http://test-api.smart-crop.com
|
||
VITE_API_TIMEOUT=15000
|
||
|
||
# 功能开关
|
||
VITE_ENABLE_MOCK=false
|
||
VITE_ENABLE_DEVTOOLS=false
|
||
VITE_ENABLE_CONSOLE_LOG=true
|
||
VITE_ENABLE_API_LOG=true
|
||
```
|
||
|
||
#### 3. 用户测试环境 (.env.uat)
|
||
```bash
|
||
# 应用配置
|
||
VITE_APP_TITLE=智慧农业生产管理系统
|
||
VITE_NODE_ENV=production
|
||
VITE_APP_ENV=uat
|
||
|
||
# API配置
|
||
VITE_API_BASE_URL=http://uat-api.smart-crop.com
|
||
VITE_API_TIMEOUT=15000
|
||
|
||
# 功能开关
|
||
VITE_ENABLE_MOCK=false
|
||
VITE_ENABLE_DEVTOOLS=false
|
||
VITE_ENABLE_CONSOLE_LOG=true
|
||
VITE_ENABLE_API_LOG=false
|
||
```
|
||
|
||
#### 4. 生产环境 (.env.production)
|
||
```bash
|
||
# 应用配置
|
||
VITE_APP_TITLE=智慧农业生产管理系统
|
||
VITE_NODE_ENV=production
|
||
VITE_APP_ENV=production
|
||
|
||
# API配置
|
||
VITE_API_BASE_URL=https://api.smart-crop.com
|
||
VITE_API_TIMEOUT=20000
|
||
|
||
# 功能开关
|
||
VITE_ENABLE_MOCK=false
|
||
VITE_ENABLE_DEVTOOLS=false
|
||
VITE_ENABLE_CONSOLE_LOG=false
|
||
VITE_ENABLE_API_LOG=false
|
||
```
|
||
|
||
### Package.json 构建命令
|
||
|
||
```json
|
||
{
|
||
"scripts": {
|
||
"dev": "vite --mode development",
|
||
"build:dev": "vite build --mode development",
|
||
"build:test": "vite build --mode test",
|
||
"build:uat": "vite build --mode uat",
|
||
"build:prod": "vite build --mode production",
|
||
"preview": "vite preview"
|
||
}
|
||
}
|
||
```
|
||
|
||
### 环境配置特性
|
||
|
||
#### 配置分类
|
||
- **应用基础配置**: 标题、版本、描述等
|
||
- **环境标识**: 环境类型和节点环境
|
||
- **API配置**: 基础URL、超时时间、重试次数
|
||
- **功能开关**: Mock、开发工具、日志等
|
||
- **第三方服务**: 地图、监控、分析工具
|
||
- **安全配置**: CSP、报告URL等
|
||
- **性能配置**: 源码映射、包分析等
|
||
|
||
#### 环境差异化配置
|
||
- **开发环境**: 本地API、开发工具、详细日志
|
||
- **测试环境**: 测试API、基础日志、部分监控
|
||
- **用户测试环境**: 准生产API、简化日志、完整监控
|
||
- **生产环境**: 生产API、关闭日志、性能优化
|
||
|
||
#### 配置使用方式
|
||
```javascript
|
||
// 在代码中使用环境变量
|
||
const config = {
|
||
apiUrl: import.meta.env.VITE_API_BASE_URL,
|
||
appTitle: import.meta.env.VITE_APP_TITLE,
|
||
enableMock: import.meta.env.VITE_ENABLE_MOCK === 'true',
|
||
timeout: parseInt(import.meta.env.VITE_API_TIMEOUT)
|
||
};
|
||
|
||
// 条件性功能开启
|
||
if (import.meta.env.VITE_ENABLE_DEVTOOLS) {
|
||
// 开启开发工具
|
||
}
|
||
```
|
||
|
||
#### 构建命令说明
|
||
- `npm run dev` - 启动开发服务器
|
||
- `npm run build:dev` - 开发环境构建
|
||
- `npm run build:test` - 测试环境构建
|
||
- `npm run build:uat` - 用户测试环境构建
|
||
- `npm run build:prod` - 生产环境构建
|
||
|
||
### 环境管理优势
|
||
|
||
1. **配置隔离**: 每个环境独立配置，避免相互影响
|
||
2. **安全性**: 生产环境敏感信息与开发环境分离
|
||
3. **灵活性**: 支持根据环境开启不同功能
|
||
4. **可维护性**: 配置文件化管理，易于维护和更新
|
||
5. **部署便利**: 一键构建不同环境的部署包
|
||
|
||
## Mock数据系统完整规范
|
||
|
||
### Mock数据设计原则
|
||
|
||
1. **真实性**: 数据符合实际业务场景，包含合理的业务逻辑
|
||
2. **随机性**: 每次请求返回不同数据，模拟真实环境变化
|
||
3. **多样性**: 提供5组固定的数据集，覆盖不同业务场景
|
||
4. **完整性**: 包含完整的字段结构和关联关系
|
||
5. **性能优化**: 合理的数据量和响应延迟
|
||
|
||
### Mock数据文件结构规范
|
||
|
||
```javascript
|
||
// 每个Mock数据文件的标准结构
|
||
export default {
|
||
code: 200, // 响应状态码
|
||
message: '获取成功', // 响应消息
|
||
timestamp: Date.now(), // 响应时间戳
|
||
data: {
|
||
// 主要数据内容
|
||
},
|
||
// 分页信息（如适用）
|
||
pagination: {
|
||
current: 1,
|
||
pageSize: 10,
|
||
total: 50
|
||
}
|
||
};
|
||
```
|
||
|
||
### 1. 智能农机管理系统 Mock数据规范
|
||
|
||
#### 1.1 农机档案录入与维护 (MockMachineryEntry.js)
|
||
|
||
```javascript
|
||
// 农机品牌池
|
||
const MACHINERY_BRANDS = [
|
||
'约翰迪尔', '久保田', '福田雷沃', '中国一拖', '时风集团',
|
||
'五征集团', '常州东风', '江苏悦达', '山东临工', '柳工机械'
|
||
];
|
||
|
||
// 农机类型池
|
||
const MACHINERY_TYPES = [
|
||
'拖拉机', '收割机', '播种机', '插秧机', '施肥机',
|
||
'喷药机', '灌溉设备', '耕地机械', '植保无人机', '粮食烘干机'
|
||
];
|
||
|
||
// 状态池
|
||
const STATUS_OPTIONS = ['运行中', '维护中', '故障', '闲置', '作业中'];
|
||
|
||
// 5组农机数据集
|
||
const MACHINERY_DATA_SETS = [
|
||
// 数据集1: 大型农机
|
||
[
|
||
{
|
||
id: 'JD001',
|
||
name: '约翰迪尔拖拉机 JD-8R-412',
|
||
type: '拖拉机',
|
||
brand: '约翰迪尔',
|
||
model: 'JD-8R-412',
|
||
serialNumber: 'JD8R4122024001',
|
||
purchaseDate: '2024-01-15',
|
||
purchasePrice: 680000,
|
||
status: '运行中',
|
||
location: { lat: 31.2304, lng: 121.4737, address: '上海市浦东新区农场路1号' },
|
||
specifications: {
|
||
power: '412马力',
|
||
weight: '12.5吨',
|
||
fuelType: '柴油',
|
||
fuelCapacity: '400升'
|
||
},
|
||
maintenance: {
|
||
lastMaintenanceDate: '2024-09-15',
|
||
nextMaintenanceDate: '2024-12-15',
|
||
maintenanceInterval: '2000小时',
|
||
totalHours: 1850
|
||
},
|
||
operator: {
|
||
id: 'driver001',
|
||
name: '张师傅',
|
||
phone: '13812345678',
|
||
experience: '8年'
|
||
}
|
||
}
|
||
],
|
||
// 数据集2: 中型农机
|
||
[
|
||
{
|
||
id: 'KT002',
|
||
name: '久保田收割机 PRO-488',
|
||
type: '收割机',
|
||
brand: '久保田',
|
||
model: 'PRO-488',
|
||
serialNumber: 'KTP4882024002',
|
||
purchaseDate: '2024-03-20',
|
||
purchasePrice: 450000,
|
||
status: '作业中',
|
||
location: { lat: 30.2741, lng: 120.1551, address: '浙江省杭州市余杭区农业园' },
|
||
specifications: {
|
||
power: '88马力',
|
||
cuttingWidth: '4.8米',
|
||
fuelType: '柴油',
|
||
fuelCapacity: '180升'
|
||
}
|
||
}
|
||
],
|
||
// 数据集3: 小型农机
|
||
[
|
||
{
|
||
id: 'FL003',
|
||
name: '福田雷沃播种机 2BQ-8',
|
||
type: '播种机',
|
||
brand: '福田雷沃',
|
||
model: '2BQ-8',
|
||
serialNumber: 'FL2BQ82024003',
|
||
purchaseDate: '2024-05-10',
|
||
purchasePrice: 120000,
|
||
status: '闲置',
|
||
location: { lat: 32.0603, lng: 118.7969, address: '江苏省南京市江宁区' }
|
||
}
|
||
],
|
||
// 数据集4: 无人机设备
|
||
[
|
||
{
|
||
id: 'DJI004',
|
||
name: '大疆植保无人机 T40',
|
||
type: '植保无人机',
|
||
brand: '大疆创新',
|
||
model: 'T40',
|
||
serialNumber: 'DJI402024004',
|
||
purchaseDate: '2024-06-25',
|
||
purchasePrice: 85000,
|
||
status: '运行中',
|
||
location: { lat: 22.5431, lng: 114.0579, address: '广东省深圳市龙岗区' },
|
||
specifications: {
|
||
payload: '40公斤',
|
||
flightTime: '18分钟',
|
||
sprayWidth: '9米',
|
||
batteryCapacity: '20000mAh'
|
||
}
|
||
}
|
||
],
|
||
// 数据集5: 灌溉设备
|
||
[
|
||
{
|
||
id: 'IR005',
|
||
name: '智能灌溉系统 IR-2000',
|
||
type: '灌溉设备',
|
||
brand: '中国一拖',
|
||
model: 'IR-2000',
|
||
serialNumber: 'YTOIR20002024005',
|
||
purchaseDate: '2024-04-15',
|
||
purchasePrice: 220000,
|
||
status: '维护中',
|
||
location: { lat: 34.3416, lng: 108.9398, address: '陕西省西安市未央区' }
|
||
}
|
||
]
|
||
];
|
||
|
||
export default {
|
||
code: 200,
|
||
message: '获取农机档案列表成功',
|
||
timestamp: Date.now(),
|
||
data: {
|
||
list: MACHINERY_DATA_SETS[Math.floor(Math.random() * MACHINERY_DATA_SETS.length)],
|
||
pagination: {
|
||
current: Math.floor(Math.random() * 5) + 1,
|
||
pageSize: 10,
|
||
total: Math.floor(Math.random() * 50) + 20
|
||
}
|
||
}
|
||
};
|
||
```
|
||
|
||
#### 1.2 驾驶员信息管理 (MockDriverInfoManagement.js)
|
||
|
||
```javascript
|
||
const DRIVER_NAMES = ['张师傅', '李师傅', '王师傅', '陈师傅', '刘师傅', '赵师傅', '孙师傅', '周师傅'];
|
||
const LICENSE_TYPES = ['A1', 'A2', 'B1', 'B2', 'C1'];
|
||
const SKILL_LEVELS = ['初级', '中级', '高级', '特级'];
|
||
|
||
const DRIVER_DATA_SETS = [
|
||
// 数据集1: 资深驾驶员
|
||
[
|
||
{
|
||
id: 'driver001',
|
||
name: '张建国',
|
||
phone: '13812345678',
|
||
idCard: '320102198001011234',
|
||
licenseType: 'A2',
|
||
licenseNumber: '320102198001011234',
|
||
licenseExpiry: '2025-12-31',
|
||
experience: '12年',
|
||
skillLevel: '特级',
|
||
specialSkills: ['大型拖拉机操作', '精准农业设备', '故障排查'],
|
||
status: '在职',
|
||
hireDate: '2020-03-15',
|
||
salary: 8500,
|
||
performance: {
|
||
totalHours: 8760,
|
||
accidentCount: 0,
|
||
efficiency: 98.5,
|
||
rating: 4.9
|
||
},
|
||
currentAssignment: {
|
||
machineryId: 'JD001',
|
||
machineryName: '约翰迪尔拖拉机 JD-8R-412',
|
||
taskType: '耕地作业',
|
||
field: 'A区-1号地块'
|
||
}
|
||
}
|
||
],
|
||
// 数据集2: 中级驾驶员
|
||
[
|
||
{
|
||
id: 'driver002',
|
||
name: '李明华',
|
||
phone: '13923456789',
|
||
idCard: '310101198502022345',
|
||
licenseType: 'B2',
|
||
licenseNumber: '310101198502022345',
|
||
licenseExpiry: '2026-06-30',
|
||
experience: '7年',
|
||
skillLevel: '高级',
|
||
specialSkills: ['收割机操作', '播种设备'],
|
||
status: '在职',
|
||
hireDate: '2022-08-20',
|
||
salary: 7200,
|
||
performance: {
|
||
totalHours: 5110,
|
||
accidentCount: 1,
|
||
efficiency: 96.2,
|
||
rating: 4.6
|
||
}
|
||
}
|
||
],
|
||
// 数据集3: 新手驾驶员
|
||
[
|
||
{
|
||
id: 'driver003',
|
||
name: '王小军',
|
||
phone: '13634567890',
|
||
idCard: '440101199203033456',
|
||
licenseType: 'B1',
|
||
licenseNumber: '440101199203033456',
|
||
licenseExpiry: '2027-03-15',
|
||
experience: '2年',
|
||
skillLevel: '初级',
|
||
specialSkills: ['小型拖拉机'],
|
||
status: '在职',
|
||
hireDate: '2023-06-01',
|
||
salary: 5500,
|
||
performance: {
|
||
totalHours: 1460,
|
||
accidentCount: 0,
|
||
efficiency: 91.5,
|
||
rating: 4.2
|
||
}
|
||
}
|
||
],
|
||
// 数据集4: 无人机飞手
|
||
[
|
||
{
|
||
id: 'driver004',
|
||
name: '陈志强',
|
||
phone: '13745678901',
|
||
idCard: '510101199204044567',
|
||
licenseType: 'C1',
|
||
licenseNumber: '510101199204044567',
|
||
licenseExpiry: '2028-04-20',
|
||
experience: '5年',
|
||
skillLevel: '高级',
|
||
specialSkills: ['植保无人机操作', '航拍测绘', '精准施药'],
|
||
status: '在职',
|
||
hireDate: '2021-11-10',
|
||
salary: 7800,
|
||
performance: {
|
||
totalHours: 3650,
|
||
accidentCount: 0,
|
||
efficiency: 97.8,
|
||
rating: 4.7
|
||
}
|
||
}
|
||
],
|
||
// 数据集5: 多技能驾驶员
|
||
[
|
||
{
|
||
id: 'driver005',
|
||
name: '刘德明',
|
||
phone: '13856789012',
|
||
idCard: '330101198005055678',
|
||
licenseType: 'A1',
|
||
licenseNumber: '330101198005055678',
|
||
licenseExpiry: '2025-05-25',
|
||
experience: '15年',
|
||
skillLevel: '特级',
|
||
specialSkills: ['全系列农机操作', '设备维修', '新设备培训'],
|
||
status: '在职',
|
||
hireDate: '2019-02-01',
|
||
salary: 9200,
|
||
performance: {
|
||
totalHours: 10950,
|
||
accidentCount: 2,
|
||
efficiency: 99.2,
|
||
rating: 4.95
|
||
}
|
||
}
|
||
]
|
||
];
|
||
|
||
export default {
|
||
code: 200,
|
||
message: '获取驾驶员列表成功',
|
||
timestamp: Date.now(),
|
||
data: {
|
||
list: DRIVER_DATA_SETS[Math.floor(Math.random() * DRIVER_DATA_SETS.length)],
|
||
pagination: {
|
||
current: Math.floor(Math.random() * 3) + 1,
|
||
pageSize: 10,
|
||
total: Math.floor(Math.random() * 30) + 15
|
||
}
|
||
}
|
||
};
|
||
```
|
||
|
||
#### 1.3 实时位置追踪 (MockRealTimeLocationTracking.js)
|
||
|
||
```javascript
|
||
const LOCATION_DATA_SETS = [
|
||
// 数据集1: 上海地区农机
|
||
[
|
||
{
|
||
machineryId: 'JD001',
|
||
machineryName: '约翰迪尔拖拉机 JD-8R-412',
|
||
driverId: 'driver001',
|
||
driverName: '张建国',
|
||
location: {
|
||
lat: 31.2304 + (Math.random() - 0.5) * 0.01,
|
||
lng: 121.4737 + (Math.random() - 0.5) * 0.01,
|
||
address: '上海市浦东新区农场路1号',
|
||
accuracy: 5
|
||
},
|
||
status: '作业中',
|
||
speed: Math.random() * 10 + 2,
|
||
heading: Math.random() * 360,
|
||
altitude: Math.random() * 50 + 5,
|
||
timestamp: Date.now(),
|
||
battery: Math.floor(Math.random() * 30) + 70,
|
||
fuel: Math.floor(Math.random() * 40) + 30,
|
||
engineHours: Math.floor(Math.random() * 1000) + 500,
|
||
workArea: 'A区-1号地块',
|
||
workProgress: Math.floor(Math.random() * 100),
|
||
taskType: '耕地作业',
|
||
estimatedCompletion: new Date(Date.now() + Math.random() * 3600000 * 4).toISOString()
|
||
}
|
||
],
|
||
// 数据集2: 杭州地区农机
|
||
[
|
||
{
|
||
machineryId: 'KT002',
|
||
machineryName: '久保田收割机 PRO-488',
|
||
driverId: 'driver002',
|
||
driverName: '李明华',
|
||
location: {
|
||
lat: 30.2741 + (Math.random() - 0.5) * 0.01,
|
||
lng: 120.1551 + (Math.random() - 0.5) * 0.01,
|
||
address: '浙江省杭州市余杭区农业园',
|
||
accuracy: 8
|
||
},
|
||
status: '收割作业',
|
||
speed: Math.random() * 6 + 1,
|
||
heading: Math.random() * 360,
|
||
altitude: Math.random() * 30 + 2,
|
||
timestamp: Date.now(),
|
||
battery: Math.floor(Math.random() * 25) + 75,
|
||
fuel: Math.floor(Math.random() * 35) + 25,
|
||
engineHours: Math.floor(Math.random() * 800) + 200,
|
||
workArea: 'B区-3号地块',
|
||
workProgress: Math.floor(Math.random() * 100),
|
||
taskType: '水稻收割',
|
||
estimatedCompletion: new Date(Date.now() + Math.random() * 3600000 * 2).toISOString()
|
||
}
|
||
],
|
||
// 数据集3: 南京地区农机
|
||
[
|
||
{
|
||
machineryId: 'FL003',
|
||
machineryName: '福田雷沃播种机 2BQ-8',
|
||
driverId: 'driver003',
|
||
driverName: '王小军',
|
||
location: {
|
||
lat: 32.0603 + (Math.random() - 0.5) * 0.01,
|
||
lng: 118.7969 + (Math.random() - 0.5) * 0.01,
|
||
address: '江苏省南京市江宁区',
|
||
accuracy: 6
|
||
},
|
||
status: '移动中',
|
||
speed: Math.random() * 15 + 5,
|
||
heading: Math.random() * 360,
|
||
altitude: Math.random() * 40 + 3,
|
||
timestamp: Date.now(),
|
||
battery: Math.floor(Math.random() * 20) + 80,
|
||
fuel: Math.floor(Math.random() * 50) + 20,
|
||
engineHours: Math.floor(Math.random() * 600) + 100,
|
||
workArea: 'C区-2号地块',
|
||
workProgress: Math.floor(Math.random() * 100),
|
||
taskType: '玉米播种',
|
||
estimatedCompletion: new Date(Date.now() + Math.random() * 3600000 * 3).toISOString()
|
||
}
|
||
],
|
||
// 数据集4: 深圳地区无人机
|
||
[
|
||
{
|
||
machineryId: 'DJI004',
|
||
machineryName: '大疆植保无人机 T40',
|
||
driverId: 'driver004',
|
||
driverName: '陈志强',
|
||
location: {
|
||
lat: 22.5431 + (Math.random() - 0.5) * 0.01,
|
||
lng: 114.0579 + (Math.random() - 0.5) * 0.01,
|
||
address: '广东省深圳市龙岗区',
|
||
accuracy: 2
|
||
},
|
||
status: '飞行作业',
|
||
speed: Math.random() * 8 + 4,
|
||
heading: Math.random() * 360,
|
||
altitude: Math.random() * 20 + 30,
|
||
timestamp: Date.now(),
|
||
battery: Math.floor(Math.random() * 40) + 40,
|
||
fuel: Math.floor(Math.random() * 60) + 10,
|
||
engineHours: Math.floor(Math.random() * 300) + 50,
|
||
workArea: 'D区-1号果园',
|
||
workProgress: Math.floor(Math.random() * 100),
|
||
taskType: '果树病虫害防治',
|
||
estimatedCompletion: new Date(Date.now() + Math.random() * 3600000 * 1.5).toISOString()
|
||
}
|
||
],
|
||
// 数据集5: 西安地区灌溉设备
|
||
[
|
||
{
|
||
machineryId: 'IR005',
|
||
machineryName: '智能灌溉系统 IR-2000',
|
||
driverId: 'driver005',
|
||
driverName: '刘德明',
|
||
location: {
|
||
lat: 34.3416 + (Math.random() - 0.5) * 0.01,
|
||
lng: 108.9398 + (Math.random() - 0.5) * 0.01,
|
||
address: '陕西省西安市未央区',
|
||
accuracy: 3
|
||
},
|
||
status: '灌溉作业',
|
||
speed: 0,
|
||
heading: 0,
|
||
altitude: 0,
|
||
timestamp: Date.now(),
|
||
battery: Math.floor(Math.random() * 15) + 85,
|
||
fuel: 0,
|
||
engineHours: Math.floor(Math.random() * 2000) + 1000,
|
||
workArea: 'E区-4号大棚',
|
||
workProgress: Math.floor(Math.random() * 100),
|
||
taskType: '自动灌溉',
|
||
estimatedCompletion: new Date(Date.now() + Math.random() * 3600000 * 6).toISOString()
|
||
}
|
||
]
|
||
];
|
||
|
||
export default {
|
||
code: 200,
|
||
message: '获取实时位置数据成功',
|
||
timestamp: Date.now(),
|
||
data: {
|
||
locations: LOCATION_DATA_SETS[Math.floor(Math.random() * LOCATION_DATA_SETS.length)],
|
||
summary: {
|
||
totalMachinery: Math.floor(Math.random() * 20) + 10,
|
||
activeMachinery: Math.floor(Math.random() * 15) + 5,
|
||
idleMachinery: Math.floor(Math.random() * 5) + 2,
|
||
maintenanceMachinery: Math.floor(Math.random() * 3) + 1
|
||
}
|
||
}
|
||
};
|
||
```
|
||
|
||
#### 1.4 故障诊断与预警 (MockFaultWarning.js)
|
||
|
||
```javascript
|
||
const FAULT_TYPES = ['发动机故障', '液压系统故障', '电气系统故障', '传动系统故障', '控制系统故障'];
|
||
const FAULT_LEVELS = ['轻微', '一般', '严重', '紧急'];
|
||
const FAULT_STATUSES = ['待处理', '处理中', '已解决', '已关闭'];
|
||
|
||
const FAULT_DATA_SETS = [
|
||
// 数据集1: 发动机故障
|
||
[
|
||
{
|
||
id: 'fault001',
|
||
machineryId: 'JD001',
|
||
machineryName: '约翰迪尔拖拉机 JD-8R-412',
|
||
faultType: '发动机故障',
|
||
faultCode: 'E001',
|
||
faultLevel: '严重',
|
||
description: '发动机温度过高，冷却系统异常',
|
||
detail: '发动机水温达到95°C，超出正常工作温度范围，冷却风扇转速异常',
|
||
status: '待处理',
|
||
reportTime: '2024-10-16 14:30:00',
|
||
reporter: '张建国',
|
||
reporterPhone: '13812345678',
|
||
location: {
|
||
lat: 31.2304,
|
||
lng: 121.4737,
|
||
address: '上海市浦东新区农场路1号'
|
||
},
|
||
impact: {
|
||
workStoppage: true,
|
||
estimatedDowntime: '4小时',
|
||
economicLoss: 2000
|
||
},
|
||
diagnosis: {
|
||
possibleCauses: ['冷却液不足', '冷却水泵故障', '散热器堵塞', '温度传感器故障'],
|
||
recommendedActions: ['检查冷却液位', '检查冷却水泵', '清理散热器', '更换温度传感器']
|
||
},
|
||
assignedTechnician: {
|
||
id: 'tech001',
|
||
name: '技术员王师傅',
|
||
phone: '13987654321',
|
||
estimatedArrival: '2024-10-16 15:00:00'
|
||
}
|
||
}
|
||
],
|
||
// 数据集2: 液压系统故障
|
||
[
|
||
{
|
||
id: 'fault002',
|
||
machineryId: 'KT002',
|
||
machineryName: '久保田收割机 PRO-488',
|
||
faultType: '液压系统故障',
|
||
faultCode: 'H002',
|
||
faultLevel: '一般',
|
||
description: '液压系统压力不足，升降机构动作缓慢',
|
||
detail: '液压系统压力仅为15MPa，低于正常工作压力25MPa',
|
||
status: '处理中',
|
||
reportTime: '2024-10-16 10:15:00',
|
||
location: { lat: 30.2741, lng: 120.1551 },
|
||
diagnosis: {
|
||
possibleCauses: ['液压泵磨损', '液压油泄漏', '溢流阀故障'],
|
||
recommendedActions: ['检查液压泵', '查找泄漏点', '调整溢流阀压力']
|
||
}
|
||
}
|
||
],
|
||
// 数据集3: 电气系统故障
|
||
[
|
||
{
|
||
id: 'fault003',
|
||
machineryId: 'DJI004',
|
||
machineryName: '大疆植保无人机 T40',
|
||
faultType: '电气系统故障',
|
||
faultCode: 'E003',
|
||
faultLevel: '轻微',
|
||
description: '电池管理系统报警，电池容量显示异常',
|
||
status: '已解决',
|
||
reportTime: '2024-10-16 08:45:00',
|
||
resolvedTime: '2024-10-16 09:30:00'
|
||
}
|
||
],
|
||
// 数据集4: 传动系统故障
|
||
[
|
||
{
|
||
id: 'fault004',
|
||
machineryId: 'FL003',
|
||
machineryName: '福田雷沃播种机 2BQ-8',
|
||
faultType: '传动系统故障',
|
||
faultCode: 'T004',
|
||
faultLevel: '紧急',
|
||
description: '传动链条断裂，播种作业中断',
|
||
status: '待处理',
|
||
reportTime: '2024-10-16 16:20:00'
|
||
}
|
||
],
|
||
// 数据集5: 控制系统故障
|
||
[
|
||
{
|
||
id: 'fault005',
|
||
machineryId: 'IR005',
|
||
machineryName: '智能灌溉系统 IR-2000',
|
||
faultType: '控制系统故障',
|
||
faultCode: 'C005',
|
||
faultLevel: '一般',
|
||
description: 'PLC控制器通讯异常，部分区域无法正常灌溉',
|
||
status: '处理中',
|
||
reportTime: '2024-10-16 12:00:00'
|
||
}
|
||
]
|
||
];
|
||
|
||
export default {
|
||
code: 200,
|
||
message: '获取故障预警数据成功',
|
||
timestamp: Date.now(),
|
||
data: {
|
||
list: FAULT_DATA_SETS[Math.floor(Math.random() * FAULT_DATA_SETS.length)],
|
||
statistics: {
|
||
totalFaults: Math.floor(Math.random() * 20) + 5,
|
||
pendingFaults: Math.floor(Math.random() * 8) + 2,
|
||
processingFaults: Math.floor(Math.random() * 5) + 1,
|
||
resolvedFaults: Math.floor(Math.random() * 10) + 3,
|
||
emergencyFaults: Math.floor(Math.random() * 3)
|
||
}
|
||
}
|
||
};
|
||
```
|
||
|
||
### 2. 地块信息管理系统 Mock数据规范
|
||
|
||
#### 2.1 地块档案管理 (MockFieldManagement.js)
|
||
|
||
```javascript
|
||
const CROP_TYPES = ['水稻', '小麦', '玉米', '大豆', '棉花', '蔬菜', '果树', '茶叶'];
|
||
const SOIL_TYPES = ['沙壤土', '黏土', '壤土', '砂土', '泥炭土'];
|
||
const IRRIGATION_TYPES = ['漫灌', '喷灌', '滴灌', '微喷', '渗灌'];
|
||
|
||
const FIELD_DATA_SETS = [
|
||
// 数据集1: 大型水稻田
|
||
[
|
||
{
|
||
id: 'field001',
|
||
name: '东区1号地块',
|
||
code: 'E-001',
|
||
area: 125.6,
|
||
areaUnit: '亩',
|
||
shape: '不规则多边形',
|
||
coordinates: [
|
||
{ lat: 31.2304, lng: 121.4737 },
|
||
{ lat: 31.2314, lng: 121.4747 },
|
||
{ lat: 31.2309, lng: 121.4757 },
|
||
{ lat: 31.2299, lng: 121.4747 }
|
||
],
|
||
centerPoint: { lat: 31.2307, lng: 121.4747 },
|
||
elevation: 12.5,
|
||
soilType: '黏土',
|
||
phValue: 6.8,
|
||
organicMatter: 2.3,
|
||
irrigationType: '漫灌',
|
||
drainageCondition: '良好',
|
||
currentCrop: '水稻',
|
||
cropVariety: '东北大米',
|
||
plantingDate: '2024-05-15',
|
||
expectedHarvest: '2024-10-20',
|
||
growthStage: '灌浆期',
|
||
owner: {
|
||
id: 'farmer001',
|
||
name: '李农户',
|
||
phone: '13512345678',
|
||
contractStart: '2024-01-01',
|
||
contractEnd: '2024-12-31'
|
||
},
|
||
infrastructure: {
|
||
irrigation: '有',
|
||
drainage: '有',
|
||
electricity: '有',
|
||
road: '水泥路',
|
||
storage: '简易仓库'
|
||
},
|
||
yieldHistory: [
|
||
{ year: 2021, crop: '水稻', yield: 520, unit: 'kg/亩' },
|
||
{ year: 2022, crop: '水稻', yield: 535, unit: 'kg/亩' },
|
||
{ year: 2023, crop: '水稻', yield: 548, unit: 'kg/亩' }
|
||
]
|
||
}
|
||
],
|
||
// 数据集2: 蔬菜大棚
|
||
[
|
||
{
|
||
id: 'field002',
|
||
name: '西区蔬菜大棚A区',
|
||
code: 'W-GA-001',
|
||
area: 8.5,
|
||
areaUnit: '亩',
|
||
shape: '矩形',
|
||
coordinates: [
|
||
{ lat: 30.2741, lng: 120.1551 },
|
||
{ lat: 30.2751, lng: 120.1551 },
|
||
{ lat: 30.2751, lng: 120.1561 },
|
||
{ lat: 30.2741, lng: 120.1561 }
|
||
],
|
||
soilType: '壤土',
|
||
currentCrop: '西红柿',
|
||
cropVariety: '粉冠王',
|
||
growthStage: '结果期',
|
||
infrastructure: {
|
||
greenhouse: '钢结构大棚',
|
||
irrigation: '滴灌',
|
||
heating: '有',
|
||
ventilation: '自动通风'
|
||
}
|
||
}
|
||
],
|
||
// 数据集3: 果园
|
||
[
|
||
{
|
||
id: 'field003',
|
||
name: '南区苹果园',
|
||
code: 'S-003',
|
||
area: 45.2,
|
||
areaUnit: '亩',
|
||
currentCrop: '苹果',
|
||
cropVariety: '红富士',
|
||
treeAge: '8年',
|
||
plantingDensity: '56株/亩',
|
||
infrastructure: {
|
||
irrigation: '喷灌',
|
||
frostProtection: '防霜冻系统',
|
||
supportSystem: '支架系统'
|
||
}
|
||
}
|
||
],
|
||
// 数据集4: 茶园
|
||
[
|
||
{
|
||
id: 'field004',
|
||
name: '北区生态茶园',
|
||
code: 'N-004',
|
||
area: 28.8,
|
||
areaUnit: '亩',
|
||
currentCrop: '茶叶',
|
||
cropVariety: '龙井43号',
|
||
teaPlantAge: '5年',
|
||
terrain: '丘陵地',
|
||
slope: '15-25度'
|
||
}
|
||
],
|
||
// 数据集5: 实验田
|
||
[
|
||
{
|
||
id: 'field005',
|
||
name: '科研实验田',
|
||
code: 'R-005',
|
||
area: 12.3,
|
||
areaUnit: '亩',
|
||
purpose: '新品种试验',
|
||
experimentType: '品种对比试验',
|
||
testCrops: ['新品种小麦A', '新品种小麦B', '对照品种'],
|
||
researchInstitution: '农业科学院',
|
||
principalInvestigator: '王研究员'
|
||
}
|
||
]
|
||
];
|
||
|
||
export default {
|
||
code: 200,
|
||
message: '获取地块档案成功',
|
||
timestamp: Date.now(),
|
||
data: {
|
||
list: FIELD_DATA_SETS[Math.floor(Math.random() * FIELD_DATA_SETS.length)],
|
||
summary: {
|
||
totalFields: Math.floor(Math.random() * 50) + 20,
|
||
totalArea: Math.floor(Math.random() * 2000) + 500,
|
||
cultivatedArea: Math.floor(Math.random() * 1800) + 400,
|
||
averageYield: Math.floor(Math.random() * 200) + 300
|
||
}
|
||
}
|
||
};
|
||
```
|
||
|
||
### 3. 认证系统 Mock数据规范
|
||
|
||
#### 3.1 用户登录 (MockLogin.js)
|
||
|
||
```javascript
|
||
const USER_DATA_SETS = [
|
||
// 数据集1: 系统管理员
|
||
{
|
||
user: {
|
||
id: 'user001',
|
||
username: 'admin',
|
||
phone: '13800000001',
|
||
email: 'admin@smart-crop.com',
|
||
name: '系统管理员',
|
||
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=admin',
|
||
role: 'system_admin',
|
||
department: '信息技术部',
|
||
position: '系统管理员',
|
||
status: 'active',
|
||
lastLoginTime: '2024-10-16 08:30:00',
|
||
createTime: '2020-01-01 00:00:00'
|
||
},
|
||
permissions: [
|
||
'system:admin',
|
||
'agricultural:machinery:admin',
|
||
'land:information:admin',
|
||
'farming:operation:admin',
|
||
'asset:management:admin',
|
||
'ai:model:admin',
|
||
'irrigation:control:admin',
|
||
'config:system:admin'
|
||
],
|
||
token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.admin.token.mock',
|
||
refreshToken: 'refresh.token.admin.mock',
|
||
expiresIn: 7200
|
||
},
|
||
// 数据集2: 农机管理员
|
||
{
|
||
user: {
|
||
id: 'user002',
|
||
username: 'machinery_manager',
|
||
phone: '13800000002',
|
||
name: '农机管理员',
|
||
role: 'machinery_manager',
|
||
department: '农机管理部',
|
||
position: '农机管理员'
|
||
},
|
||
permissions: [
|
||
'agricultural:machinery:admin',
|
||
'agricultural:machinery:operator',
|
||
'land:information:view'
|
||
],
|
||
token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.machinery.token.mock',
|
||
refreshToken: 'refresh.token.machinery.mock',
|
||
expiresIn: 7200
|
||
},
|
||
// 数据集3: 普通操作员
|
||
{
|
||
user: {
|
||
id: 'user003',
|
||
username: 'operator001',
|
||
phone: '13800000003',
|
||
name: '操作员张三',
|
||
role: 'operator',
|
||
department: '田间作业部',
|
||
position: '农机操作员'
|
||
},
|
||
permissions: [
|
||
'agricultural:machinery:operator',
|
||
'land:information:view',
|
||
'farming:operation:staff'
|
||
],
|
||
token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.operator.token.mock',
|
||
refreshToken: 'refresh.token.operator.mock',
|
||
expiresIn: 7200
|
||
}
|
||
];
|
||
|
||
export default {
|
||
code: 200,
|
||
message: '登录成功',
|
||
timestamp: Date.now(),
|
||
data: USER_DATA_SETS[Math.floor(Math.random() * USER_DATA_SETS.length)]
|
||
};
|
||
```
|
||
|
||
### Mock数据使用指南
|
||
|
||
#### 1. 数据随机化策略
|
||
|
||
每个Mock数据文件都包含多个数据集，通过以下方式实现随机性：
|
||
|
||
```javascript
|
||
// 随机选择数据集
|
||
const selectedData = DATA_SETS[Math.floor(Math.random() * DATA_SETS.length)];
|
||
|
||
// 随机生成分页信息
|
||
const pagination = {
|
||
current: Math.floor(Math.random() * 5) + 1,
|
||
pageSize: 10,
|
||
total: Math.floor(Math.random() * 50) + 20
|
||
};
|
||
|
||
// 随机生成位置偏移（模拟实时移动）
|
||
const location = {
|
||
lat: baseLat + (Math.random() - 0.5) * 0.01,
|
||
lng: baseLng + (Math.random() - 0.5) * 0.01
|
||
};
|
||
```
|
||
|
||
#### 2. 数据关联性
|
||
|
||
不同Mock数据文件之间通过ID保持关联性：
|
||
|
||
```javascript
|
||
// 农机数据中的operatorId与驾驶员数据中的id对应
|
||
// 位置数据中的machineryId与农机数据中的id对应
|
||
// 故障数据中的machineryId与农机数据中的id对应
|
||
```
|
||
|
||
#### 3. 业务逻辑模拟
|
||
|
||
Mock数据包含真实的业务逻辑：
|
||
|
||
```javascript
|
||
// 农机状态影响作业数据
|
||
// 驾驶员技能影响作业效率
|
||
// 地块属性影响产量预测
|
||
// 故障类型影响维修时间和成本
|
||
```
|
||
|
||
#### 4. 性能优化
|
||
|
||
- 合理控制数据量，避免返回过多数据
|
||
- 模拟真实的网络延迟（100-500ms）
|
||
- 支持分页和筛选功能
|
||
- 提供统计数据用于图表展示
|
||
|
||
---
|
||
|
||
*本文档基于 Mary 的头脑风暴分析结果生成，为 crop-x 项目提供完整的技术架构方案，包括路由系统、API管理、认证机制、环境配置、业务架构设计和详细的Mock数据规范。* |