# phenocam_web

**Repository Path**: calways/phenocam_web

## Basic Information

- **Project Name**: phenocam_web
- **Description**: 物候监测网络页面
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-18
- **Last Updated**: 2026-01-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Phenocam Web

基于 Vue 3 和 Vite 的现代化前端模板，适用于快速构建高性能的 Web 应用。


Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).

## Tools 页面（物候预测）

本项目已将 `test_ok.html` 的“物候预测系统”重构为 Vue 组件，页面位于 `src/pages/Tools.vue`。

- 界面功能：
	- 位置选择：预设站点或经纬度输入
	- 年份设置：历史年份与目标年份
	- 物候期选择与模型多选
	- 运行预测并以 Chart.js 折线图展示结果

- 依赖：
	- `chart.js` 已添加到 `package.json`
	- 图标样式通过 `index.html` 的 Font Awesome CDN 注入

- 后端 API 约定（请根据实际接口调整 `src/utils/api.js`）：
	- `GET /api/phenology/stations` 返回站点列表：`[{ id, name, lat, lon }]`
	- `POST /api/phenology/predict` 请求体：
		```json
		{
			"mode": "station|coords",
			"stations": [{"id":1, "lat":39.9, "lon":116.4}],
			"coords": {"lat":39.9, "lon":116.4} | null,
			"historyYear": 2023,
			"targetYear": 2024,
			"phenophase": "leaf|flower|fruit",
			"models": ["LSTM", "RF"]
		}
		```
	- 期望响应（示例）：
		```json
		{
			"labels": ["2024-01-01", "2024-01-02"],
			"series": [
				{"name": "LSTM", "values": [0.2, 0.3]},
				{"name": "RF", "values": [0.25, 0.28]}
			]
		}
		```

如后端接口不同，可修改 `src/utils/api.js` 的 `getPhenologyStations` 与 `runPhenologyPrediction`。
=======
## 项目简介

本项目是一个基于 Vue 3 和 Vite 的前端模板，使用 Vue 3 的 `<script setup>` 语法，适合快速开发和构建现代 Web 应用。项目集成了 CesiumJS，用于构建三维地理空间可视化应用。

## 技术栈

- **Vue 3**：使用 Composition API 和 `<script setup>` 语法
- **Vite**：快速的前端构建工具
- **CesiumJS**：用于三维地理空间数据可视化
- **Vue Router**：实现页面路由
- **模块化架构**：组件化开发，便于维护和扩展

## 功能模块

- **地图可视化**：通过 `CesiumMap.vue` 组件集成 CesiumJS，实现三维地图展示。
- **用户界面**：包含导航栏、用户头像、登录弹窗、页脚等通用组件。
- **页面路由**：支持首页、新闻、项目展示、下载、工具、资源、详情等多个页面。
- **响应式设计**：适配不同设备，提供良好的用户体验。

## 项目结构

```
├── public/                  # 静态资源文件
├── src/
│   ├── assets/              # 项目样式和图片资源
│   ├── components/          # Vue 组件
│   ├── pages/               # 页面组件
│   ├── router/              # 路由配置
│   ├── store/               # 状态管理
│   ├── utils/               # 工具类函数
│   ├── main.js              # 入口文件
│   └── style.css            # 全局样式
├── Dockerfile               # Docker 构建文件
├── nginx.conf               # Nginx 配置文件
├── package.json             # 项目依赖和脚本
└── README.md                # 项目说明文档
```

## 安装与部署

### 本地开发

1. 安装依赖：

```bash
npm install
```

2. 启动开发服务器：

```bash
npm run dev
```

### 构建生产环境

```bash
npm run build
```

### 使用 Docker 部署

1. 构建 Docker 镜像：

```bash
docker build -t phenocam_web .
```

2. 运行容器：

```bash
docker run -d -p 80:80 phenocam_web
```

## 开发指南

- 所有页面组件位于 `src/pages/` 目录。
- 组件复用请放置在 `src/components/` 目录。
- 样式文件统一管理在 `src/assets/global.css` 和 `src/style.css`。
- API 请求封装在 `src/utils/api.js` 中，便于统一管理接口请求。

## 贡献指南

欢迎贡献代码和改进项目。请遵循以下步骤：

1. Fork 项目
2. 创建新分支 (`git checkout -b feature/new-feature`)
3. 提交更改 (`git commit -am 'Add new feature'`)
4. 推送分支 (`git push origin feature/new-feature`)
5. 创建 Pull Request

## 许可证

本项目采用 MIT 许可证。详情请查看 [LICENSE](LICENSE) 文件。