# ScreenRouter

**Repository Path**: flysem/ScreenRouter

## Basic Information

- **Project Name**: ScreenRouter
- **Description**: 这是一个基于WebSocket的数据大屏远程配置系统，支持实时远程控制大屏的显示模式和页面切换。

- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2025-08-11
- **Last Updated**: 2025-08-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 数据大屏远程配置系统

这是一个基于WebSocket的数据大屏远程配置系统，支持实时远程控制大屏的显示模式和页面切换。

## 功能特性

- **远程控制**: 通过WebSocket实现实时远程控制
- **模式切换**: 支持自动切换和手动切换两种模式
- **时间配置**: 可配置自动切换的时间间隔
- **页面切换**: 支持手动点击切换页面
- **路由大屏**: 支持多路由页面，每个页面独立路径
- **实时状态**: 实时显示连接状态和当前配置
- **美观界面**: 现代化的UI设计，支持响应式布局
- **全屏模式**: 支持一键进入/退出全屏模式

## 技术栈

### 后端 (Java文件夹)
- Spring Boot 2.7.14
- Spring WebSocket
- Maven

### 前端 (Vue文件夹)
- Vue 3.3.4
- Vite 4.4.9
- Element Plus 2.3.9
- Pinia 2.1.6
- WebSocket (SockJS + WebStomp)

## 快速开始

### 1. 启动后端服务

```bash
cd Java
mvn spring-boot:run
```

后端服务将在 `http://localhost:8080` 启动

### 2. 启动前端服务

```bash
cd Vue
npm install
npm run dev
```

前端服务将在 `http://localhost:3000` 启动

### 3. 访问系统

- **控制面板**: `http://localhost:3000/control` - 用于远程控制大屏
- **大屏显示**: `http://localhost:3000/screen` - 单页面切换模式
- **路由大屏**: `http://localhost:3000/router` - 多路由页面模式

## 使用说明

### 控制面板功能

1. **模式控制**
   - 自动模式：系统按照设定的时间间隔自动切换页面
   - 手动模式：需要手动点击页面名称进行切换

2. **间隔时间设置**
   - 在自动模式下，可以设置页面切换的时间间隔（5-60秒）
   - 手动模式下此设置无效

3. **页面切换**
   - 点击对应的页面名称按钮即可立即切换到该页面
   - 当前页面会高亮显示

4. **实时状态**
   - 显示当前模式、间隔时间、当前页面和连接状态
   - 实时更新最后操作时间

5. **页面访问**
   - 大屏显示：单页面切换模式，适合传统大屏展示
   - 路由大屏：多路由页面模式，支持远程路由切换

### 大屏显示功能

1. **单页面展示**
   - 首页：欢迎页面和基础统计信息
   - 数据概览：图表展示和数据分析
   - 实时监控：系统资源监控
   - 统计分析：详细的数据统计表格
   - 系统设置：系统配置信息

2. **自动切换**
   - 在自动模式下，页面会按照设定的时间间隔自动切换
   - 右下角显示倒计时，提示下次切换时间

3. **实时响应**
   - 通过WebSocket实时接收控制指令
   - 页面切换和配置更新都是实时的

### 路由大屏功能

1. **多路由页面**
   - 每个页面都有独立的URL路径
   - 支持远程路由切换
   - 页面内容通过router-view动态加载

2. **路由页面**
   - `/router/home` - 首页
   - `/router/overview` - 数据概览
   - `/router/monitor` - 实时监控
   - `/router/statistics` - 统计分析
   - `/router/settings` - 系统设置

3. **大屏功能**
   - 大屏模式按钮：一键进入/退出全屏
   - 刷新按钮：刷新当前页面
   - 页面指示器：显示当前页面位置
   - 自动切换倒计时：显示下次切换时间

4. **远程控制**
   - 通过控制面板可以远程切换路由页面
   - 支持自动和手动两种切换模式
   - 实时同步页面状态

## API接口

### HTTP接口

- `GET /api/screen/config` - 获取当前配置
- `POST /api/screen/config` - 更新配置
- `POST /api/screen/switch/{pageName}` - 切换页面
- `POST /api/screen/mode/{mode}` - 设置模式
- `POST /api/screen/interval/{interval}` - 设置间隔时间

### WebSocket接口

- `/topic/screen-config` - 配置更新广播
- `/topic/screen-switch` - 页面切换广播
- `/topic/screen-status` - 状态更新广播

## 项目结构

```
ScreenRouter/
├── Java/                          # 后端项目
│   ├── src/main/java/com/screenrouter/
│   │   ├── ScreenRouterApplication.java    # 主启动类
│   │   ├── config/                        # 配置类
│   │   │   └── WebSocketConfig.java       # WebSocket配置
│   │   ├── controller/                    # 控制器
│   │   │   └── ScreenController.java      # 大屏控制器
│   │   ├── model/                         # 数据模型
│   │   │   ├── ScreenConfig.java          # 大屏配置模型
│   │   │   └── WebSocketMessage.java      # WebSocket消息模型
│   │   └── service/                       # 服务层
│   │       └── ScreenService.java         # 大屏服务
│   ├── src/main/resources/
│   │   └── application.yml                # 配置文件
│   └── pom.xml                           # Maven配置
├── Vue/                           # 前端项目
│   ├── src/
│   │   ├── views/                         # 页面组件
│   │   │   ├── ControlPanel.vue           # 控制面板
│   │   │   ├── ScreenDisplay.vue          # 大屏显示
│   │   │   ├── ScreenRouter.vue           # 路由大屏
│   │   │   └── screen/                    # 路由页面组件
│   │   │       ├── HomePage.vue           # 首页
│   │   │       ├── OverviewPage.vue       # 数据概览
│   │   │       ├── MonitorPage.vue        # 实时监控
│   │   │       ├── StatisticsPage.vue     # 统计分析
│   │   │       └── SettingsPage.vue       # 系统设置
│   │   ├── stores/                        # 状态管理
│   │   │   └── screenStore.js             # 大屏状态管理
│   │   ├── utils/                         # 工具类
│   │   │   ├── websocket.js               # WebSocket工具
│   │   │   └── polyfills.js               # 兼容性处理
│   │   ├── router/                        # 路由配置
│   │   │   └── index.js                   # 路由定义
│   │   ├── App.vue                        # 根组件
│   │   └── main.js                        # 主入口
│   ├── index.html                         # HTML模板
│   ├── package.json                       # 依赖配置
│   └── vite.config.js                     # Vite配置
└── README.md                             # 项目说明
```

## 开发说明

### 后端开发

1. 使用Spring Boot框架，支持热重载
2. WebSocket配置支持跨域访问
3. 使用Lombok简化代码
4. 支持JSON格式的数据传输

### 前端开发

1. 使用Vue 3 Composition API
2. 使用Pinia进行状态管理
3. 使用Element Plus组件库
4. 支持响应式设计
5. 支持路由嵌套和动态切换

## 部署说明

### 后端部署

```bash
cd Java
mvn clean package
java -jar target/screen-router-backend-1.0.0.jar
```

### 前端部署

```bash
cd Vue
npm run build
# 将dist目录部署到Web服务器
```

## 注意事项

1. 确保后端服务在8080端口运行
2. 前端开发服务器配置了代理，会自动转发API请求到后端
3. WebSocket连接需要确保网络通畅
4. 建议在生产环境中配置HTTPS
5. 路由大屏支持浏览器前进后退功能

## 扩展功能

- 支持更多页面类型
- 添加用户认证和权限控制
- 支持多屏同步显示
- 添加数据可视化图表
- 支持自定义主题和样式
- 支持页面内容动态配置