# smartwater

**Repository Path**: sharpqian/smartwater

## Basic Information

- **Project Name**: smartwater
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-09
- **Last Updated**: 2025-12-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 智能水务监控系统

基于Vue 3 + Vuetify 3 + Pinia + 高德地图(Amap JS API)的水务监控系统。

## 功能特性

1. **用户认证系统**
   - 登录界面
   - 用户权限管理
   - 记住登录状态

2. **地图监控**
   - 高德地图集成
   - 传感器/执行器在地图上显示
   - 点击设备弹出详情窗口
   - 实时数据展示

3. **设备管理**
   - 传感器监控（压力、流量、PH值、温度等）
   - 执行器控制（阀门、水泵等）
   - 实时状态更新
   - 设备告警

4. **地图编辑**
   - 动态添加/删除设备
   - 拖拽调整设备位置
   - 设备类型图标自定义

5. **厂站管理**
   - 多厂站切换
   - 厂站设备统计
   - 地理位置管理

6. **控制功能**
   - 远程控制指令发送
   - 设备状态切换
   - 自动/手动控制模式

## 技术栈

- **前端框架**: Vue 3 (Composition API)
- **UI框架**: Vuetify 3 (通过CDN)
- **状态管理**: Pinia
- **路由**: Vue Router
- **地图**: 高德地图 JS API
- **构建工具**: Vite

## 项目结构

```
smartwater/
├── src/
│   ├── components/          # 公共组件
│   │   ├── map/            # 地图组件
│   │   ├── DeviceDetail.vue # 设备详情弹窗
│   │   └── StationSwitcher.vue # 厂站切换
│   ├── views/              # 页面组件
│   │   ├── Login.vue       # 登录页面
│   │   ├── Dashboard.vue   # 主仪表盘
│   │   └── MapEdit.vue     # 地图编辑
│   ├── stores/             # Pinia状态管理
│   │   ├── auth.js         # 认证状态
│   │   └── devices.js      # 设备状态
│   ├── types/              # 类型定义
│   │   ├── device.js       # 设备类型
│   │   └── global.d.ts     # 全局类型
│   ├── App.vue             # 根组件
│   └── main.js             # 应用入口
├── index.html              # HTML模板
├── vite.config.js          # Vite配置
├── package.json            # 项目依赖
└── README.md               # 项目说明
```

## 快速开始

### 1. 安装依赖
```bash
npm install
```

### 2. 配置高德地图
在 `index.html` 中替换高德地图API密钥：
```html
<script src="https://webapi.amap.com/maps?v=2.0&key=您的高德地图key"></script>
```

### 3. 启动开发服务器
```bash
npm run dev
```

### 4. 访问应用
打开浏览器访问：http://localhost:3000

### 5. 默认登录账号
- 用户名: `admin`
- 密码: `admin123`

## 主要功能说明

### 登录页面
- 用户认证
- 记住密码功能
- 响应式设计

### 主仪表盘
- 设备统计卡片
- 实时地图监控
- 泵站状态列表
- 传感器数据图表
- 厂站切换功能

### 地图监控
- 设备标记显示
- 点击查看详情
- 实时数据刷新
- 设备状态颜色标识

### 设备详情弹窗
- 设备基本信息
- 实时数据展示
- 控制指令发送
- 历史记录查看

### 地图编辑
- 添加/删除设备
- 拖拽调整位置
- 设备属性编辑
- 地图标记管理

### 厂站管理
- 多厂站切换
- 设备分配
- 地理位置管理

## 设备类型

### 传感器类型
- 压力传感器 (pressure)
- 流量计 (flow)
- 温度传感器 (temperature)
- PH值传感器 (ph)
- 浊度传感器 (turbidity)
- 余氯传感器 (chlorine)
- 液位传感器 (level)

### 执行器类型
- 阀门 (valve)
- 水泵 (pump)
- 开关 (switch)
- 继电器 (relay)

## 设备状态

- **online**: 在线，运行正常
- **offline**: 离线，无法连接
- **alarm**: 告警，数据异常
- **maintenance**: 维护中

## 控制模式

- **auto**: 自动控制，根据预设逻辑运行
- **manual**: 手动控制，需要人工操作

## 开发说明

### 添加新设备类型
1. 在 `src/types/device.js` 中定义新类型
2. 在 `src/stores/devices.js` 中添加示例数据
3. 在相关组件中添加UI支持

### 自定义地图样式
修改 `src/components/map/AmapComponent.vue` 中的地图配置：
```javascript
map.value = new AMap.Map(mapContainer.value, {
  zoom: props.zoom,
  center: props.center,
  mapStyle: 'amap://styles/light', // 修改地图样式
  viewMode: '2D'
})
```

### 添加新页面
1. 在 `src/views/` 中创建新组件
2. 在 `src/main.js` 中添加路由配置
3. 在导航菜单中添加链接

## 注意事项

1. **高德地图API密钥**: 需要申请自己的密钥并替换
2. **生产环境**: 建议使用环境变量管理敏感信息
3. **安全性**: 实际项目中需要后端API支持
4. **性能**: 设备数量较多时考虑虚拟滚动和地图聚合

## 扩展建议

1. **后端集成**: 连接真实设备API
2. **实时通信**: 使用WebSocket实时推送数据
3. **历史数据**: 添加数据查询和图表分析
4. **报表导出**: 支持数据导出功能
5. **移动端**: 响应式适配移动设备
6. **多语言**: 国际化支持

## 许可证

MIT License