# CityBugs

**Repository Path**: cmygis/city-bugs

## Basic Information

- **Project Name**: CityBugs
- **Description**: 共同关注城市设施中的漏洞，共创美好城市
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-14
- **Last Updated**: 2026-03-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 城市公共设施问题反馈平台

一个基于 Vue3 + JavaScript + CSS3 的城市公共设施问题反馈系统，集成了高德地图和 ECharts 可视化图表。

## 功能特点

### 用户端功能
- 📝 **问题提交**：用户可以提交城市公共设施问题
- 📍 **位置获取**：自动获取用户当前地理位置
- 📷 **图片上传**：支持上传问题现场图片（最多5张）
- 🗺️ **地图展示**：在高德地图上查看所有问题位置
- 🔍 **问题筛选**：按状态和类型筛选问题
- 📊 **统计信息**：首页显示问题统计数据

### 管理员端功能
- 🔐 **登录系统**：管理员登录认证
- 📋 **问题管理**：查看和处理所有问题
- ✅ **状态更新**：将问题标记为处理中或已完成
- 📸 **结果上传**：上传处理结果图片
- 📈 **数据统计**：ECharts 图表展示问题统计信息
- 🗑️ **问题删除**：删除不需要的问题记录

## 技术栈

- **前端框架**: Vue 3 (Composition API)
- **构建工具**: Vite
- **路由**: Vue Router 4
- **状态管理**: Pinia
- **地图组件**: 高德地图 JavaScript API
- **图表组件**: ECharts 5
- **HTTP客户端**: Axios
- **样式**: CSS3 + CSS变量

## 项目结构

```
mapdemo/
├── public/                 # 静态资源
│   └── images/
├── src/
│   ├── assets/            # 资源文件
│   ├── components/        # 组件
│   ├── views/             # 页面
│   │   ├── Home.vue              # 首页
│   │   ├── SubmitProblem.vue    # 提交问题
│   │   ├── ProblemMap.vue        # 问题地图
│   │   ├── AdminDashboard.vue    # 管理员后台
│   │   └── Login.vue             # 登录页面
│   ├── router/            # 路由配置
│   ├── store/             # 状态管理
│   ├── api/               # API 接口
│   ├── utils/             # 工具函数
│   ├── styles/            # 样式文件
│   ├── App.vue            # 根组件
│   └── main.js            # 入口文件
├── index.html             # HTML 模板
├── package.json           # 依赖配置
└── vite.config.js         # Vite 配置
```

## 安装和运行

### 1. 安装依赖

```bash
npm install
```

### 2. 配置高德地图 API 密钥

在 `index.html` 中替换 `YOUR_AMAP_KEY` 为你的高德地图 API 密钥：

```html
<script src="https://webapi.amap.com/maps?v=2.0&key=YOUR_AMAP_KEY"></script>
```

在 `src/utils/mapUtils.js` 中也需要替换相关 API 密钥：

```javascript
const AMAP_KEY = 'YOUR_AMAP_KEY'
```

### 3. 启动开发服务器

```bash
npm run dev
```

项目将在 `http://localhost:3000` 启动。

### 4. 构建生产版本

```bash
npm run build
```

构建后的文件将在 `dist` 目录中。

## 使用说明

### 用户使用流程

1. **查看首页**：浏览问题统计数据和最新问题
2. **提交问题**：
   - 点击"提交问题"按钮
   - 填写问题标题和描述
   - 选择问题类型
   - 点击"获取当前位置"获取地理坐标
   - 上传问题图片
   - 提交问题
3. **查看地图**：在地图上查看所有问题的位置和状态

### 管理员使用流程

1. **登录系统**：
   - 点击导航栏的"管理员"
   - 输入用户名和密码（默认：admin / 123456）
2. **查看统计**：首页展示问题统计概览
3. **处理问题**：
   - 在问题列表中查看所有问题
   - 点击"开始处理"将问题状态改为"处理中"
   - 处理完成后点击"标记完成"
   - 上传处理结果图片
4. **查看图表**：右侧展示问题状态和类型的统计图表

## 问题类型

- 道路问题
- 照明问题
- 环境卫生
- 园林绿化
- 交通设施
- 公共建筑
- 给排水
- 电力设施
- 通信设施
- 其他问题

## 状态说明

- **待处理**：新提交的问题，等待处理
- **处理中**：正在处理的问题
- **已完成**：已处理完成的问题

## 数据存储

项目使用 `localStorage` 进行数据持久化，适合演示和小规模使用。在生产环境中，建议：

1. 使用后端 API 替换当前的模拟 API
2. 使用真实的数据库存储数据
3. 添加用户认证和权限管理
4. 实现文件上传到云存储服务

## 浏览器兼容性

- Chrome (推荐)
- Firefox
- Safari
- Edge

需要支持：
- ES6+ 语法
- 地理定位 API
- FileReader API

## 开发说明

### 添加新功能

1. 在 `src/store/` 中添加状态管理逻辑
2. 在 `src/api/` 中添加 API 接口
3. 在 `src/views/` 中创建新的页面组件
4. 在 `src/router/` 中配置路由

### 修改样式

全局样式在 `src/styles/main.css` 中定义，使用了 CSS 变量便于主题定制。

### 自定义地图

地图配置在 `src/views/ProblemMap.vue` 中，可以根据需要调整地图样式和交互。

## 许可证

MIT License

## 贡献

欢迎提交 Issue 和 Pull Request！

## 联系方式

如有问题或建议，请通过以下方式联系：
- 提交 Issue
- 发送邮件