# JKFX

**Repository Path**: soft-open-learning/jkfx

## Basic Information

- **Project Name**: JKFX
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-04
- **Last Updated**: 2026-06-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 农田可视化平台

> 面向标准化农田、智慧农业示范基地和农业园区的物联网可视化系统，集中展示土壤、气象、虫情、孢子、视频、设备状态和基地基础数据，帮助客户实现基地可视、风险可预警、设备可运维、成果可展示。

## 项目概述

### 项目背景

- 客户在日常管理中上传数据，判断"这片田现在是否正常、哪里有风险、该不该灌溉、能不能喷药"。
- 项目希望通过农业可视化平台，把基地空间、设备点位、实时数据、预警事件和视频画面统一呈现，形成可参观、可指挥、可运维的智慧农业展示中心。

### 项目目标

- [x] 建设一套农田情况展示平台，集中展示基地、地块、设备和农情环境数据。
- [x] 通过手动输入土壤、气象、虫情、孢子数据，展示不同模块情况。
- [x] 建立土壤、气象、虫情、孢子、视频、设备状态等数据的统一展示和预警机制。
- [ ] 为客户提供领导参观、项目汇报、日常监管、设备运维四类核心使用场景。

## 技术栈

### 前端

- 技术：Vue 3 + TypeScript + Vite
- 图表：ECharts + vue-echarts
- 路由：vue-router 4
- 用途：构建管理系统风格的现代响应式网页系统，提供土壤、气象、虫情、孢子四个独立模块的手动输入和动态可视化展示。

### 后端

- 技术：Spring Boot
- 用途：提供设备数据接入、实时数据查询、历史数据查询、预警规则计算
- 状态：待开发。

### 数据库

- 技术：MySQL 8.0+
- 用途：存储基地、地块、设备、传感器数据、告警记录等。
- 状态：脚本已就绪（`database/init.sql`）。

## 工程结构

```text
农田可视化平台/
  docs/                        # 项目方案、需求说明
  frontend/                    # 前端项目
    src/
      api/                     # API 服务层（当前为 Mock 实现）
      composables/             # Vue Composables（共享状态管理）
      components/              # 通用组件（StatusCard, TrendChart）
      router/                  # 路由配置
      types/                   # TypeScript 类型定义
      views/                   # 页面视图（4个 Input + 4个 View）
      App.vue                  # 主布局（左侧30%输入 + 右侧70%可视化）
      main.ts                  # 入口文件
  backend/                     # 后端接口与数据服务（待开发）
  database/                    # 数据库初始化脚本
    init.sql                   # 建表语句与测试数据
  README.md                    # 项目说明与进度追踪
  agent.md                     # Agent 任务记忆和协作记录
```

## 功能实现进度

### 4.1 基础工程

- [x] 初始化项目结构
- [x] 初始化前端项目
- [x] 初始化后端服务项目
- [x] 配置数据库
- [ ] 配置环境变量
- [x] 编写基础 README

### 4.2 用户模块

- [ ] 用户登录
- [ ] 用户退出登录
- [ ] 用户信息查看
- [ ] 用户信息修改

### 4.3 数据可视化模块

- [x] 土壤数据输入与展示（含 ECharts 趋势图 + 预警）
- [x] 气象数据输入与展示（含 ECharts 趋势图 + 预警）
- [x] 虫情数据输入与展示（含 ECharts 趋势图 + 预警）
- [x] 孢子数据输入与展示（含 ECharts 趋势图 + 预警）
- [x] 预警事件自动触发与展示
- [x] 一键生成历史波动数据

### 4.5 测试与优化

- [ ] 测试前端页面是否能正常访问
- [ ] 测试后端接口是否能正常返回
- [ ] 测试数据库读写是否正常
- [ ] 测试数据输入是否正常
- [ ] 优化前端视觉样式和动效
- [ ] 补充运行说明和部署说明

## 接口文档

当前前端使用 Mock API 实现（`frontend/src/api/index.ts`），后端开发完成后需替换为真实接口。

| 接口路径 | 方法 | 说明 |
|---------|------|------|
| `/api/bases` | GET | 获取基地列表 |
| `/api/plots?baseId=` | GET | 获取地块列表 |
| `/api/soil?plotId=` | GET | 获取土壤数据 |
| `/api/soil` | POST | 提交土壤数据 |
| `/api/weather?plotId=` | GET | 获取气象数据 |
| `/api/weather` | POST | 提交气象数据 |
| `/api/pest?plotId=` | GET | 获取虫情数据 |
| `/api/pest` | POST | 提交虫情数据 |
| `/api/spore?plotId=` | GET | 获取孢子数据 |
| `/api/spore` | POST | 提交孢子数据 |
| `/api/alarms?plotId=&type=` | GET | 获取预警事件 |
| `/api/generate-history` | POST | 生成模拟历史数据 |

## 数据库设计

详见 `database/init.sql`，包含以下表：
- `base_info` - 基地表
- `plot_info` - 地块表
- `soil_data` - 土壤数据表
- `weather_data` - 气象数据表
- `pest_data` - 虫情数据表
- `spore_data` - 孢子数据表
- `alarm_event` - 预警事件表

## 运行方式

### 环境要求

- **前端**：Node.js 18.x LTS+，npm 或 pnpm
- **后端**：JDK 17+，Maven 3.6+
- **数据库**：MySQL 8.0+

### 前端运行

```bash
cd frontend
npm install
npm run dev
```

### 后端运行

```bash
cd backend
mvn spring-boot:run
```

### 数据库初始化

在 MySQL 中创建 `agri_iot` 数据库，执行 `database/init.sql`。

## 测试记录

- [ ] 前端页面访问测试：待测试。
- [ ] 后端接口测试：待测试。
- [ ] 数据库迁移测试：待测试。
- [ ] 前端总览数据测试：待测试。
- [ ] 土壤数据输入测试：待测试。
- [ ] 气象数据输入测试：待测试。
- [ ] 虫情输入展示测试：待测试。
- [ ] 孢子数据输入测试：待测试。
- [ ] 构建测试：待测试。

## 已完成功能记录

### 功能名称：项目初始化与前端核心模块
- 完成时间：2026-05-30
- 涉及文件：`frontend/` 全部源码，`database/init.sql`
- 实现内容：
  1. 初始化 Vue 3 + TypeScript + Vite 前端工程
  2. 创建项目目录结构（docs, frontend, backend, database）
  3. 实现 100vh 满屏布局：左侧30%数据输入面板 + 右侧70%可视化区域
  4. 实现土壤、气象、虫情、孢子四个数据模块的输入表单
  5. 实现 ECharts 折线图/柱状图实时趋势展示
  6. 实现预警系统：数据越界自动触发预警，呼吸闪烁红色警铃提示
  7. 实现 Mock API 层：含阈值检测和预警事件生成
  8. 创建数据库初始化脚本（7张表 + 测试数据）
- 验证方式：启动 `npm run dev` 访问页面测试。

### 功能名称：项目 README 初始化
- 完成时间：2026-05-30
- 涉及文件：`README.md`
- 实现内容：编写项目说明文档，包含项目概述、技术栈、工程结构、功能进度、接口文档、数据库设计、运行方式。
- 验证方式：人工检查文档结构和内容完整性。

## 下一步计划

- [ ] 初始化后端 Spring Boot 项目
- [ ] 将 Mock API 替换为真实后端接口
- [ ] 用户登录模块
- [ ] 前端构建测试