# 宜春市袁州区小区装维人员地图系统

## 项目介绍

这是一个基于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文件格式符合要求