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)

• 站点列表：显示所有可用站点
• 搜索功能：按名称、地点搜索
• 选中状态：清晰标识当前选中站点

数据模型

闸口站点

interface GateStation {
  id: string
  name: string
  location: string
  coordinates: {
    latitude: number
    longitude: number
  }
  description: string
  status: 'active' | 'inactive' | 'maintenance'
}

数据记录

interface GateDataRecordVO {
  id: string
  stationId: string
  stationName: string
  flowValue: number
  images: string[]
  location: Coordinates
  remark?: string
  createTime: string
  status: 'pending' | 'approved' | 'rejected'
}

开发指南

运行项目

# 安装依赖
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