# nrsp-admin-web

**Repository Path**: lightwind_e/nrsp-admin-web

## Basic Information

- **Project Name**: nrsp-admin-web
- **Description**: 无人机耕地巡检
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2026-02-05
- **Last Updated**: 2026-02-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 自然资源监控管理平台 Web

## 项目背景

随着自然资源管理需求的日益增长，为了实现对自然资源的高效、智能监管，开发了本自然资源监控管理平台。该平台基于 PIGCLOUD 微服务开发平台构建，采用前后端分离架构，本仓库为前端项目，使用 Vue 3 等现代前端技术栈，旨在为自然资源管理部门提供便捷、稳定的管理工具。

## 项目概述

本项目是衡水市自然资源智能监管平台的前端部分，与后端微服务协同工作，实现了地图展示、流程管理、微信素材管理、数据统计等核心功能。借助先进的前端技术，为用户提供了流畅、美观的操作界面。

## 技术栈

### 核心框架

- **Vue 3**：用于构建用户界面的渐进式 JavaScript 框架。
- **Vite**：下一代前端构建工具，提供了快速的开发体验。

### UI 库

- **Element Plus**：基于 Vue 3 的桌面端组件库，提供丰富的 UI 组件。

### 地图相关

- **OpenLayers**：用于地图展示、交互和分析的开源 JavaScript 库。
- **Cesium**：用于创建基于 WebGL 的三维地理信息系统（GIS）应用。

### 数据可视化

- **Echarts**：强大的数据可视化库，支持多种图表类型。

### 其他工具

- **FormCreate**：快速生成表单的工具，提高表单开发效率。
- **Axios**：基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。

## 项目结构

```plaintext
nrsp-admin-web/
├── .cursor/               # 游标相关配置
├── .env                   # 环境变量配置文件
├── .env.development       # 开发环境变量配置文件
├── .eslintignore          # ESLint 忽略文件配置
├── .eslintrc.js           # ESLint 配置文件
├── .github/               # GitHub 工作流配置
├── .gitignore             # Git 忽略文件配置
├── .prettierrc.js         # Prettier 代码格式化配置
├── README.md              # 项目说明文档
├── docker/                # Docker 相关配置
├── index.html             # 项目入口 HTML 文件
├── package.json           # 项目依赖和脚本配置
├── postcss.config.js      # PostCSS 配置文件
├── public/                # 公共资源目录
├── src/                   # 源代码目录
│   ├── api/               # API 请求封装
│   ├── assets/            # 静态资源
│   ├── components/        # 公共组件
│   ├── views/             # 页面视图
│   ├── router/            # 路由配置
│   ├── stores/            # 状态管理
│   └── ...
├── tailwind.config.js     # Tailwind CSS 配置文件
├── tsconfig.json          # TypeScript 配置文件
└── vite.config.ts         # Vite 配置文件

## 对应的后台版本
### 对应的后台PIGX的5.8版本
## 开发环境搭建
### 前置条件
- Node.js ：建议使用版本 16 及以上，可从 Node.js 官网 下载安装。
- npm 或 yarn ：npm 随 Node.js 一起安装，yarn 可通过 npm install -g yarn 安装。

## 步骤

安装依赖： npm install 或 yarn install

启动开发服务器 ：npm run dev 或 yarn dev

构建生产版本 ：npm run build


## 功能模块
1. 地图展示
• 底图切换：支持多种底图切换，如衡水市影像图、天地图标注等。
• 设备定位：在地图上展示摄像头、告警点等设备的位置信息。
• 告警标注：对自然资源相关的告警信息进行标注，方便用户及时查看。
2. 流程管理
• 流程发起：用户可以根据需求发起不同类型的流程，如审批流程、整改流程等。
• 流程审批：审批人员可以对流程进行审批操作，支持多级审批。
• 流程终止：在必要情况下，可对正在进行的流程进行终止操作。
• 流程查看：用户可以查看流程的详细信息、审批历史等。
 3. 微信素材管理
 • 素材上传：支持图片、语音、视频、图文等素材的上传。
 • 素材编辑：可以对已上传的素材进行编辑操作，如修改标题、描述等。
 • 素材删除：对不再需要的素材进行删除操作。
 • 素材搜索：支持按名称、类型等条件搜索素材。
 4. 数据统计
 • 用户分析：展示用户的增长趋势、活跃度等数据。
 • 接口分析：对系统接口的调用情况进行统计分析。
 • 消息分析：统计消息的发送量、接收量等信息。

## 环境配置
项目使用 .env 和 .env.development 文件进行环境变量配置，以下是部分常用配置项：
# 接口地址
VITE_API_BASE_URL = https://api.example.com

# 地图服务地址
VITE_MAP_URL = https://map.example.com

## 代码规范
### ESLint
项目使用 ESLint 进行代码质量检查，配置文件为 .eslintrc.js 。在开发过程中，请确保代码通过 ESLint 检查，可执行以下命令进行检查和修复：
npm run lint:eslint

### Prettier
项目使用 Prettier 进行代码格式化，配置文件为 .prettierrc.js 。可执行以下命令对代码进行格式化：
npm run prettier

## 常见问题解决
### 依赖安装失败
如果在执行 npm install 时出现依赖安装失败的情况，可尝试以下解决方案：

1. 清除 npm 缓存： npm cache clean --force
2. 更换 npm 镜像源： npm config set registry https://registry.npmmirror.com
3. 重新执行 npm install
### 开发服务器启动失败
如果开发服务器启动失败，请检查以下事项：

1. Node.js 版本是否符合要求。
2. 环境变量配置是否正确。
3. 端口是否被占用，可修改 vite.config.ts 中的端口配置。
## 版本控制
项目使用 Git 进行版本控制，建议遵循以下 Git 工作流：

1. 从 main 分支拉取最新代码。
2. 创建新的开发分支： git checkout -b feature/your-feature-name
3. 在新分支上进行开发和提交。
4. 开发完成后，将代码推送到远程仓库： git push origin feature/your-feature-name
5. 创建 Pull Request，经过代码审查后合并到 main 分支。
```