# PumpRoomAutomationScreen

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

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-15
- **Last Updated**: 2026-04-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 泵房自动化大屏系统

## 项目说明

这是泵房自动化系统的数据大屏展示应用，用于实时监控泵房运行状态。

## 功能特性

- ✅ **统一登录界面**：与 PumpRoomAutomationClient 共享相同的登录组件设计
- ✅ **权限控制**：仅允许 admin 账号登录访问大屏系统
- ✅ **实时数据展示**：12个泵站的实时监控数据
- ✅ **视频直播**：支持高并发的 SRS 流媒体直播（FFmpeg + SRS + FLV.js）
- ✅ **响应式缩放**：自动适应不同屏幕尺寸
- ✅ **自动刷新**：数据每5秒自动更新

## 技术栈

- Vue 3 + TypeScript
- Vue Router 4 - 路由管理
- Pinia - 状态管理
- Axios - HTTP 请求
- ECharts - 数据可视化
- flv.js - FLV 视频播放
- Vite - 构建工具

## 快速开始

### 1. 配置环境变量

首次使用需要配置 SRS 流媒体服务器地址：

```bash
# 复制环境变量示例文件
cp .env.example .env.development

# 编辑配置文件，修改 SRS 服务器地址
# VITE_SRS_BASE_URL=http://你的SRS服务器IP:8081
```

**环境变量说明**：

- `VITE_API_BASE_URL` - 后端 API 地址（默认 `/api`）
- `VITE_SRS_BASE_URL` - SRS 流媒体服务器地址（如 `http://192.168.1.100:8081`）

**重要提示**：
- `.env.development` - 开发环境配置
- `.env.production` - 生产环境配置
- `.env` 文件已被 `.gitignore` 忽略，不会提交到 Git

### 2. 安装依赖

```bash
npm install
```

### 3. 开发运行

```bash
npm run dev
```

默认运行在 http://localhost:5174

## 构建生产版本

```bash
npm run build
```

## 预览生产版本

```bash
npm run preview
```

## 视频直播配置

大屏支持高并发的视频直播功能，详细配置请参考 [STREAM_SETUP.md](./STREAM_SETUP.md)

**架构**：
```
摄像头 RTSP → FFmpeg → SRS RTMP服务器 → HTTP-FLV → 前端播放器
```

**优势**：
- ✅ 天然支持高并发（数千人同时观看）
- ✅ 服务器压力小（主要消耗带宽）
- ✅ 低延迟（1-3秒）
- ✅ 易扩展（可加 CDN）

## 登录权限说明

⚠️ **重要提示**：

- 大屏系统仅限 **admin** 账号访问
- 使用其他账号登录时，即使认证成功也会被拒绝访问
- 如果非 admin 账号尝试访问，会显示提示信息并要求重新登录

## 项目结构

```
src/
├── components/         # 组件
│   ├── PumpCard.vue   # 泵站卡片
│   ├── PowerTable.vue # 功率表格
│   └── DailyWeight.vue # 日产量图表
├── views/             # 页面
│   ├── Login.vue      # 登录页面
│   └── Screen.vue     # 大屏页面
├── router/            # 路由配置
│   └── index.ts
├── services/          # API服务
│   └── api.ts
├── config/            # 配置文件
│   └── stream.config.ts # 视频流配置
├── styles/            # 样式文件
│   └── global.css
├── App.vue           # 根组件
└── main.ts           # 入口文件
```

## API 配置

默认使用 Vite 代理转发请求到后端：

- 后端API：`/api` → `http://localhost:8080/api`
- SRS视频流：`/live` → `http://你的SRS服务器IP:8081/live`

可以通过环境变量自定义地址。

## 生产环境部署

### 方案1：使用 Nginx 代理（推荐）

```nginx
server {
    listen 80;
    server_name your-domain.com;

    # 前端静态文件
    location / {
        root /var/www/screen/dist;
        try_files $uri $uri/ /index.html;
    }

    # 后端 API
    location /api/ {
        proxy_pass http://localhost:8080;
    }

    # SRS 视频流
    location /live/ {
        proxy_pass http://你的SRS服务器IP:8081;
        proxy_buffering off;
        proxy_cache off;
    }
}
```

配置 `.env.production`：
```bash
VITE_SRS_BASE_URL=
```

### 方案2：直接配置 SRS 地址

配置 `.env.production`：
```bash
VITE_SRS_BASE_URL=http://你的SRS服务器IP:8081
```

确保 SRS 启用 CORS。

## 与 PumpRoomAutomationClient 的区别

| 特性 | PumpRoomAutomationClient | PumpRoomAutomationScreen |
|------|-------------------------|-------------------------|
| 用途 | 日常管理控制台 | 数据大屏展示 |
| 登录权限 | 所有已注册用户 | 仅限 admin 账号 |
| 功能 | 全功能管理系统 | 只读数据监控 |
| 端口 | 3000 | 5174 |
| 路由 | /dashboard, /video 等 | /screen |
| 视频方案 | WebSocket + MJPEG | SRS + HTTP-FLV |

## 开发说明

1. 登录组件 (`Login.vue`) 与 PumpRoomAutomationClient 保持一致的UI设计
2. API服务 (`api.ts`) 是简化版，仅包含大屏所需的接口
3. 路由守卫会验证用户权限，确保只有 admin 能访问大屏
4. 视频流配置在 `src/config/stream.config.ts`，支持多摄像头扩展

## 常见问题

**Q: 为什么我登录成功后还是被跳转回登录页？**

A: 大屏系统仅限 admin 账号访问。请使用 admin 账号登录。

**Q: 如何修改 SRS 服务器地址？**

A: 编辑 `.env.development` 或 `.env.production` 文件中的 `VITE_SRS_BASE_URL` 变量。

**Q: 视频无法播放怎么办？**

A: 
1. 检查 SRS 服务是否运行：`curl http://你的SRS服务器IP:8081/api/v1/versions`
2. 检查后端推流服务是否启动
3. 查看浏览器控制台错误信息
4. 参考 [STREAM_SETUP.md](./STREAM_SETUP.md) 故障排查部分

**Q: 如何支持多个摄像头？**

A: 参考 [STREAM_SETUP.md](./STREAM_SETUP.md) 中的"多摄像头配置"章节。

**Q: 大屏显示比例不对怎么办？**

A: 大屏采用 1920x1080 的设计尺寸，会自动缩放适配。如需修改设计尺寸，编辑 `src/views/Screen.vue` 中的 `designWidth` 和 `designHeight` 常量。

## 更新日志

### v1.1.0 (2024-12-XX)

- ✅ 集成 SRS 流媒体服务，支持高并发视频直播
- ✅ 添加环境变量配置，支持灵活部署
- ✅ 优化视频播放性能，降低延迟
- ✅ 添加多摄像头支持

### v1.0.0 (2024-12-10)

- ✅ 添加登录功能，与 PumpRoomAutomationClient 统一登录界面
- ✅ 实现权限控制，仅允许 admin 账号访问
- ✅ 集成路由管理系统
- ✅ 集成后端 API 服务
- ✅ 保留原有大屏展示功能

## 许可证

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