# PumpRoomAutomationClient

**Repository Path**: console123/pump-room-automation-client

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-31
- **Last Updated**: 2026-05-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 泵房自动化系统 - 前端客户端

> Pump Room Automation System - Frontend Client

基于Vue3构建的现代化泵房自动化监控系统前端界面。

## 功能特性

- ✨ 现代化的登录界面设计
- 🎯 响应式布局，支持移动端访问
- 🔐 用户认证和会话管理
- 📊 实时监控仪表板
- 🎨 美观的UI设计和动画效果
- 🚀 基于Vue3 + Vite构建

## 技术栈

- **前端框架**: Vue 3
- **构建工具**: Vite
- **路由管理**: Vue Router 4
- **状态管理**: Pinia
- **HTTP客户端**: Axios
- **样式**: 原生CSS + 现代化设计

## 快速开始

### 1. 安装依赖

```bash
cd PumpRoomAutomationClient
npm install
```

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

```bash
npm run dev
```

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

### 3. 构建生产版本

```bash
npm run build
```

## 登录信息

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

## 项目结构

```
PumpRoomAutomationClient/
├── public/                 # 静态资源
├── src/
│   ├── views/             # 页面组件
│   │   ├── Login.vue      # 登录页面
│   │   └── Dashboard.vue  # 仪表板页面
│   ├── router/            # 路由配置
│   │   └── index.js
│   ├── App.vue            # 根组件
│   ├── main.js            # 应用入口
│   └── style.css          # 全局样式
├── index.html             # HTML模板
├── vite.config.js         # Vite配置
└── package.json           # 项目配置
```

## 功能模块介绍

### 登录页面 (`/login`)
- 用户名/密码登录
- 记住我功能
- 密码显示/隐藏切换
- 响应式设计
- 美观的动画效果

### 系统监控模块
1. **总览** - 系统状态总览、设备监控、快速操作面板
2. **操作** - 泵机控制、水位管理、系统操作控制
3. **趋势曲线** - 实时数据趋势图表、多参数对比、数据统计

### 数据管理模块
4. **数据查询** - 高级数据查询、条件筛选、数据导出
5. **报警信息** - 报警统计、报警列表、报警管理操作

### 视频监控模块
6. **机内视频** - 机内摄像头监控、视频录制、截图功能
7. **全局视频** - 多路视频监控、视频切换、全局监控

### 系统配置模块
8. **参数设定** - 系统参数、泵机参数、水位参数配置
9. **报警配置** - 报警规则设置、通知配置、规则管理
10. **用户管理** - 用户账户管理、角色权限、用户操作

## 开发说明

### 路由守卫
系统实现了基础的路由守卫功能：
- 未登录用户访问受保护页面将重定向到登录页
- 登录状态通过localStorage中的token判断

### 样式设计
- 采用现代化的渐变背景和毛玻璃效果
- 支持暗色主题适配
- 完全响应式设计，适配移动端

### 组件化开发
- 页面组件采用Vue3 Composition API
- 响应式数据管理
- 模块化的CSS样式

## 后续开发计划

- [ ] 集成WebSocket实时数据
- [ ] 添加图表组件显示监控数据
- [ ] 实现用户权限管理
- [ ] 添加设备控制功能
- [ ] 增加多语言支持
- [ ] 优化移动端体验

## 联系信息

如有问题或建议，请联系开发团队。

---

© 2025 泵房自动化系统. 保留所有权利.