92 lines
2.4 KiB
Markdown
92 lines
2.4 KiB
Markdown
# 宜春市袁州区小区装维人员地图系统
|
||
|
||
## 项目介绍
|
||
|
||
这是一个基于Vue 3和高德地图API开发的小区装维人员地图标点系统，用于宜春市袁州区的小区装维人员管理。系统主要功能包括：
|
||
|
||
1. 在地图上显示小区位置标点
|
||
2. 鼠标悬停或点击小区标点时显示对应装维人员信息
|
||
3. 装维人员信息管理（添加、编辑、删除）
|
||
4. 小区信息管理（添加、编辑、删除）
|
||
5. 支持CSV格式数据导入
|
||
|
||
## 技术栈
|
||
|
||
- Vue 3 + Vite
|
||
- Element Plus UI组件库
|
||
- 高德地图JavaScript API
|
||
- Pinia状态管理
|
||
- Vue Router路由管理
|
||
|
||
## 安装与运行
|
||
|
||
### 前提条件
|
||
|
||
- Node.js 14.0+
|
||
- 高德地图API密钥（需要自行申请）
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 配置高德地图API密钥
|
||
|
||
在 `src/views/Home.vue` 文件中，找到以下代码行：
|
||
|
||
```javascript
|
||
const AMap = await AMapLoader.load({
|
||
key: '您的高德地图API密钥', // 需要替换为实际的高德地图API密钥
|
||
version: '2.0',
|
||
plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType', 'AMap.Geolocation']
|
||
})
|
||
```
|
||
|
||
将 `'您的高德地图API密钥'` 替换为您申请的高德地图API密钥。
|
||
|
||
### 开发环境运行
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
### 构建生产版本
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
## 使用说明
|
||
|
||
### 地图页面
|
||
|
||
- 地图页面显示宜春市袁州区地图，并标记所有已添加的小区位置
|
||
- 鼠标悬停在小区标记上时，会显示小区名称和对应装维人员信息
|
||
- 点击小区标记可查看更详细的装维人员信息
|
||
- 点击右上角的"管理系统"按钮可进入管理页面
|
||
|
||
### 管理页面
|
||
|
||
#### 装维人员管理
|
||
|
||
- 可添加、编辑、删除装维人员信息
|
||
- 支持通过CSV文件批量导入装维人员数据
|
||
- CSV文件格式要求：必须包含name和phone列，可选包含position列
|
||
|
||
#### 小区管理
|
||
|
||
- 可添加、编辑、删除小区信息
|
||
- 可为小区分配装维人员
|
||
- 支持通过CSV文件批量导入小区数据
|
||
- CSV文件格式要求：必须包含name、longitude和latitude列，可选包含address和staffid列
|
||
|
||
## 数据存储
|
||
|
||
系统使用浏览器的localStorage存储数据，数据会保存在用户的浏览器中。如需持久化存储或多用户共享数据，需要进一步开发后端服务。
|
||
|
||
## 注意事项
|
||
|
||
1. 使用前请确保已正确配置高德地图API密钥
|
||
2. 添加小区时，请确保经纬度坐标准确
|
||
3. 导入数据时，请确保CSV文件格式符合要求 |