# 智能充电桩

**Repository Path**: learn_Pro/YD_chargingpile

## Basic Information

- **Project Name**: 智能充电桩
- **Description**: uniapp 智能充电桩.  转化成H5和小程序
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-03
- **Last Updated**: 2026-03-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 智能充电桩管理系统

> 基于 uni-app 开发的多端应用（H5 + 微信小程序）

## 项目简介

智能充电桩管理系统是一款集充电服务、运营管理、数据统计于一体的综合性平台。用户可以通过扫码快速启动充电,运营商可以实时监控设备状态、管理收益和用户。

## 技术栈

- **框架**: uni-app + Vue.js 2.x
- **UI 组件**: Vant 2.10.3（H5）、@vant/weapp 1.10.0（微信小程序）
- **地图服务**: 腾讯地图 API
- **数据可视化**: ECharts + u-charts
- **即时通讯**: WebSocket
- **支付**: 微信支付（JS-SDK）

## 项目结构

```
YD_chargingpile/
├── pages/                    # 页面目录（82个页面）
│   ├── login/               # 登录页（启动页）
│   ├── smcharging/          # 扫码充电
│   ├── index/               # 个人中心
│   ├── chargingzhong/       # 充电中列表
│   ├── operator_management/ # 运营管理
│   └── ...
├── components/              # 公共组件（14个）
│   ├── tabBar/             # 底部导航栏
│   ├── tou_hand/           # 通用头部
│   ├── mpvue-echarts/      # 图表组件
│   └── ...
├── common/                  # 公共工具类
│   ├── Base.js             # 核心工具类（API请求、微信支付等）
│   ├── Config.js           # 接口配置
│   └── formatDate.js       # 日期格式化
├── static/                  # 静态资源
│   ├── tabBarimg/          # 图标资源（137个）
│   ├── geolocation.min.js  # 腾讯地图定位
│   └── index2.css          # 全局样式
├── manifest.json            # 应用配置
├── pages.json              # 路由配置
├── main.js                 # 应用入口
└── package.json            # 依赖管理
```

## 核心功能

### 用户端功能

#### 充电服务
- **扫码充电**: 扫描设备二维码快速启动充电
- **远程充电**: 输入端口号远程控制充电
- **充电监控**: 实时查看充电状态、电流、电压、功率
- **附近电站**: 基于地理位置查找附近充电站
- **故障报修**: 设备故障一键报修

#### 账户管理
- **账户充值**: 支持微信支付充值
- **余额查询**: 实时查看账户余额
- **充值记录**: 历史充值记录查询
- **消费记录**: 充电消费明细
- **退款管理**: 申请退款、查看退款进度

#### 电卡服务
- **电卡绑定**: 绑定 NFC 电卡
- **电卡管理**: 查看和管理已绑定的电卡
- **购买包月**: 包月套餐购买和续费

#### 其他功能
- **个人资料**: 修改头像、昵称、手机号
- **消息通知**: 充电完成、异常通知
- **使用帮助**: 常见问题和操作指引
- **合作加盟**: 站点报装申请

### 运营端功能

#### 项目管理
- **小区管理**: 添加/修改/查看小区信息
- **充电区管理**: 添加充电区、设置费率
- **设备管理**: 设备清单、端口管理
- **管理员管理**: 添加/修改管理员权限

#### 费率管理
- **常用费率**: 日常充电费率设置
- **临时费率**: 特殊时段费率
- **包月费率**: 包月套餐费率配置
- **费率绑定**: 费率与充电区绑定

#### 用户管理
- **用户查询**: 搜索和筛选用户
- **用户详情**: 查看用户充值/消费记录
- **添加用户**: 后台添加用户
- **账户充值**: 为用户充值

#### 统计分析
- **收益统计**: 按日/月统计收益数据
- **充值统计**: 用户充值金额统计
- **消费统计**: 用户消费金额统计
- **用户统计**: 新增用户、活跃用户统计
- **设备统计**: 设备使用率、异常统计
- **未结算订单**: 待结算订单管理

#### 财务管理
- **提现管理**: 运营商提现申请和记录
- **预警设置**: 余额预警、设备异常预警

#### 信息发布
- **通知公告**: 发布系统通知
- **消息推送**: 给用户推送消息
- **操作指引**: 发布使用指南

## API 架构

### 接口地址

```javascript
// 用户端接口
const USER_API = 'https://hcd.qhuijie.cn/h5/'

// 运营端接口
const MANAGER_API = 'https://hcd.qhuijie.cn/manager/'

// WebSocket（实时通信）
const WS_URL = 'wss://hcd.qhuijie.cn/ws/device/ws/'

// 图片CDN
const IMAGE_CDN = 'http://hcd.qhuijie.cn/image/'
```

### 请求封装

所有 API 请求统一在 `common/Base.js` 中封装:

```javascript
// 用户端请求
Base.request(url, data, callback)

// 运营端请求
Base.request1(url, data, callback)
```

**特性:**
- 自动携带 Authorization Token（Bearer）
- 统一超时处理（15秒）
- 401 自动跳转登录
- 错误提示统一处理

### 响应格式

```json
{
  "code": 200,
  "data": {},
  "msg": "success"
}
```

## 关键技术实现

### 微信授权登录

```javascript
// 1. 获取微信授权code
// 2. 后端换取 access_token
// 3. 获取用户信息
// 4. 返回 JWT Token
// 5. 本地存储 token 和用户信息
```

### 实时充电监控

基于 WebSocket 实现:
- 连接设备 WebSocket
- 实时接收电流、电压、功率数据
- 充电状态变化推送
- 异常断开重连机制

### 微信支付集成

```javascript
// 调用微信支付
Base.wxPay(payParams, successCallback, failCallback)
```

**流程:**
1. 后端生成支付参数
2. 调用 WeixinJSBridge.invoke()
3. 支付成功回调
4. 更新账户余额

### 地图定位

基于腾讯地图 API:
- 获取当前位置
- 搜索附近充电站
- 计算距离和导航

## 配置说明

### manifest.json

```json
{
  "name": "Chargingpile",
  "appid": "__UNI__E1B5681",
  "mp-weixin": {
    "appid": "wxae5fa7af84bd76e1"
  },
  "h5": {
    "title": "智能充电桩",
    "router": {
      "mode": "hash"
    }
  }
}
```

### pages.json

- **全局配置**: 所有页面使用自定义导航栏
- **启动页**: `pages/login/login`
- **底部导航**: tabBar 配置（首页/充电中/我的）

## 开发指南

### 安装依赖

```bash
npm install
# 或
yarn install
```

### 运行项目

```bash
# H5
npm run dev:h5

# 微信小程序
npm run dev:mp-weixin

# App
npm run dev:app
```

### 构建发布

```bash
# 构建 H5
npm run build:h5

# 构建微信小程序
npm run build:mp-weixin

# 构建 App
npm run build:app
```

### 环境变量

在 `common/Config.js` 中配置:
- API 接口地址
- WebSocket 地址
- 图片 CDN 地址
- 腾讯地图 Key

## 项目规模

- **总页面数**: 82 个
- **组件数量**: 14 个
- **图标资源**: 137 个
- **代码文件**: 约 3,178 个
- **项目类型**: 中大型应用

## 核心依赖

```json
{
  "vant": "^2.10.3",
  "@vant/weapp": "^1.10.0",
  "babel-polyfill": "^6.26.0",
  "jweixin-module": "^1.6.0",
  "qrcode-decoder": "^0.1.2"
}
```

## 浏览器兼容性

- Chrome >= 60
- Firefox >= 60
- Safari >= 11
- Edge >= 79
- 微信内置浏览器 >= 6.7.2

## 开发规范

### 命名规范
- 页面目录: 小写下划线（`user_detail`）
- 组件文件: 小写中划线（`tou-hand`）
- 变量/方法: 小驼峰（`getUserInfo`）

### 代码组织
- 页面逻辑不超过 500 行
- 公共方法抽取到 `common/Base.js`
- 组件复用优先于代码复制

### API 调用
```javascript
// ✅ 推荐
Base.request('user/info', {}, res => {
  console.log(res.data)
})

// ❌ 不推荐：直接使用 uni.request
```

## 常见问题

### Q: 如何切换测试/生产环境？
A: 修改 `common/Config.js` 中的接口地址。

### Q: 微信支付调试失败？
A: 确保在微信开发者工具中开启"不校验合法域名"。

### Q: H5 页面分享功能无效？
A: 需要配置微信 JS-SDK 并调用 `wx.updateAppMessageShareData()`。

### Q: 如何添加新页面？
A:
1. 在 `pages/` 下创建页面目录
2. 在 `pages.json` 中注册路由
3. 使用 `uni.navigateTo()` 跳转

### Q: 图标资源如何管理？
A: 所有图标放在 `static/tabBarimg/` 目录,引用使用相对路径。

## 维护与支持

### 版本记录

- **2026-02-03**: 最新版本
- **2025-12-29**: 功能更新
- **2025-12-**: 项目初始化

### 联系方式

- **企业微信客服**: `https://work.weixin.qq.com/kfid/kfcd58339076c0a6a8d`

## License

Copyright © 2025 智能充电桩管理系统