cl-uniapp/README_GATE.md

# 闸口数据管理小程序

基于 UniApp + Vue 3 + TypeScript 开发的微信小程序，用于水利、交通等场景的闸口监测管理。

## 功能特性

### 核心功能
- ✅ **闸口数据上传**：支持图片上传、测流值记录、GPS定位
- ✅ **历史数据查询**：数据列表展示、筛选查看、详情预览
- ✅ **闸口站点管理**：多个站点切换、站点信息展示

### 技术实现
- 🚀 **图片上传**：使用微信小程序 `wx.chooseImage` API，支持最多3张图片
- 📍 **精准定位**：使用 `gcj02` 坐标系，支持高精度定位
- 📊 **数据管理**：Pinia 状态管理，响应式数据更新
- 🎨 **UI 组件**：UnoCSS 原子化样式 + uview-plus UI 组件

## 项目结构

```
src/
├── @api/           # API 接口定义
├── @layout/        # 布局组件
├── components/     # 通用组件
├── common/         # 常量和工具函数
├── hooks/          # 组合式函数
├── pages/          # 页面文件
│   ├── index/      # 首页（闸口选择）
│   └── gate/       # 闸口相关页面
│       ├── list.vue     # 闸口站点列表
│       ├── upload.vue   # 数据上传
│       ├── history.vue  # 历史数据
│       └── detail.vue   # 数据详情
├── stores/         # 状态管理
├── types/          # TypeScript 类型定义
│   ├── dto/        # 数据传输对象
│   └── vo/         # 值对象
└── utils/          # 工具函数
```

## 页面说明

### 1. 首页 (`pages/index/index.vue`)
- 闸口站点卡片展示
- 快捷操作按钮
- 支持站点选择和跳转

### 2. 数据上传 (`pages/gate/upload.vue`)
- **当前闸口信息**：显示选中站点，支持切换
- **图片上传**：最多3张，支持预览和删除
- **测流数据**：数字输入，单位 m³/s
- **定位信息**：自动获取当前位置，支持重新定位
- **备注信息**：可选文字描述，最多200字
- **数据验证**：确保必填项完整后提交

### 3.  (`pages/gate/history.vue`)
- **筛选功能**：按闸口、时间筛选
- **统计信息**：总记录数、今日记录数
- **数据列表**：展示记录摘要，支持下拉刷新
- **图片预览**：缩略图展示，支持点击预览

### 4. 数据详情 (`pages/gate/detail.vue`)
- **完整信息展示**：站点、时间、测流值、定位
- **图片查看**：全屏预览，支持滑动切换
- **地图定位**：点击位置信息打开微信内置地图

### 5. 闸口选择 (`pages/gate/list.vue`)
- **站点列表**：显示所有可用站点
- **搜索功能**：按名称、地点搜索
- **选中状态**：清晰标识当前选中站点

## 数据模型

### 闸口站点
```typescript
interface GateStation {
  id: string
  name: string
  location: string
  coordinates: {
    latitude: number
    longitude: number
  }
  description: string
  status: 'active' | 'inactive' | 'maintenance'
}
```

### 数据记录
```typescript
interface GateDataRecordVO {
  id: string
  stationId: string
  stationName: string
  flowValue: number
  images: string[]
  location: Coordinates
  remark?: string
  createTime: string
  status: 'pending' | 'approved' | 'rejected'
}
```

## 开发指南

### 运行项目
```bash
# 安装依赖
pnpm install

# 微信小程序开发
pnpm run dev:mp-weixin
```

### 技术栈
- **框架**：UniApp 3.x + Vue 3
- **语言**：TypeScript
- **构建**：Vite
- **状态管理**：Pinia
- **样式**：UnoCSS + SCSS
- **UI 组件**：uview-plus
- **图标**：Tabler Icons (UnoCSS)

## 注意事项

### 权限管理
- 位置权限：首次使用时需要用户授权
- 相机权限：图片上传时需要用户授权

### 数据存储
- 当前使用假数据进行演示
- 实际项目中需要配置后端API接口

### 性能优化
- 图片支持压缩上传
- 列表数据分页加载
- 定位信息适当缓存

## 扩展功能建议

1. **数据导出**：支持Excel导出
2. **数据可视化**：集成图表展示流量变化趋势
3. **离线模式**：支持离线数据存储和同步
4. **消息推送**：异常情况告警通知
5. **权限管理**：多角色用户权限控制

## License

MIT License