数据大屏远程配置系统

这是一个基于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. 启动后端服务

cd Java
mvn spring-boot:run

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

2. 启动前端服务

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. 支持路由嵌套和动态切换

部署说明

后端部署

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

前端部署

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

注意事项

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

扩展功能

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