初始化：静态菜单版数据大屏管理系统，对接KLPL3数据库

2026-05-15 18:18:51 +08:00
commit 39fed2c08c
58 changed files with 12751 additions and 0 deletions
--- a/启动指南.md
+++ b/启动指南.md
@@ -0,0 +1,174 @@
+# 数据大屏管理系统 - 启动指南
+
+## 📁 项目结构
+
+```
+klp-oa/
+├── klp-oa/                    # Java后端项目（已存在）
+│   ├── klp-admin/             # 启动模块
+│   ├── klp-wms/               # 仓储管理模块（新增大屏接口）
+│   ├── klp-framework/         # 框架核心
+│   └── pom.xml                # Maven配置
+└── screen/                    # Vue前端项目
+    ├── src/
+    │   ├── modules/dashboardBig/  # 大屏模块
+    │   ├── views/                 # 管理页面
+    │   ├── router/                # 路由配置
+    │   └── api/                   # API封装
+    ├── server/                    # Node.js模拟后端
+    └── package.json               # npm依赖
+```
+
+## 🚀 启动步骤
+
+### 第一步：启动后端服务（Java）
+
+1. **打开 IDE**（IntelliJ IDEA 或 Eclipse）
+2. **导入项目**：打开 `klp-oa/klp-oa/` 目录
+3. **配置数据库连接**：
+   - 编辑 `klp-admin/src/main/resources/application-dev.yml`
+   - 确保数据库配置正确：
+
+```yaml
+spring:
+  datasource:
+    dynamic:
+      datasource:
+        master:
+          url: jdbc:mysql://140.143.206.120:13306/klp-oa-test?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai
+          username: klp
+          password: KeLunPu@123
+          driver-class-name: com.mysql.cj.jdbc.Driver
+        acid:
+          url: jdbc:mysql://140.143.206.120:13306/klp_pocketfactory?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai
+          username: klp
+          password: KeLunPu@123
+          driver-class-name: com.mysql.cj.jdbc.Driver
+```
+
+4. **运行启动类**：
+   - 找到 `klp-admin/src/main/java/com/klp/KlpAdminApplication.java`
+   - 右键运行 `Run 'KlpAdminApplication'`
+
+5. **验证后端服务**：
+   - 访问 http://localhost:8080/api/wms/product/dashboard/overview
+   - 应该返回 JSON 数据
+
+### 第二步：启动前端服务（Vue）
+
+1. **打开命令行**（PowerShell 或 CMD）
+2. **进入前端目录**：
+```bash
+cd d:\klp-oa\screen
+```
+
+3. **安装依赖**（首次运行）：
+```bash
+npm install
+```
+
+4. **启动开发服务器**：
+```bash
+npm run dev
+```
+
+5. **访问前端页面**：
+   - 打开浏览器访问 http://localhost:5173/
+
+## 🌐 访问地址
+
+| 页面 | URL |
+|------|-----|
+| **系统首页** | http://localhost:5173/ |
+| **主数据大屏** | http://localhost:5173/dashboard |
+| **订单大屏** | http://localhost:5173/dashboard/order |
+| **成本大屏** | http://localhost:5173/dashboard/cost |
+| **能源大屏** | http://localhost:5173/dashboard/energy |
+
+## 🔗 API接口地址
+
+| 接口 | URL |
+|------|-----|
+| 大屏概览 | http://localhost:8080/api/wms/product/dashboard/overview |
+| 产品排行 | http://localhost:8080/api/wms/productSalesScript/dashboard/ranking |
+| 生产计划 | http://localhost:8080/api/wms/business/dashboard/currentPlan |
+| 工艺参数 | http://localhost:8080/api/wms/business/dashboard/currentProcess |
+| 酸轧产出报表 | http://localhost:8080/api/wms/acid-rolling/report/output |
+| 酸轧停机报表 | http://localhost:8080/api/wms/acid-rolling/report/stop |
+
+## ⚙️ 配置说明
+
+### 前端API配置
+
+编辑 `screen/.env` 文件：
+
+```env
+# 默认连接Java后端
+VUE_APP_API_BASE_URL=http://localhost:8080/api
+
+# 备用：连接Node.js模拟后端
+# VUE_APP_API_BASE_URL=http://localhost:3000/api
+```
+
+### 大屏数据来源
+
+当前系统使用模拟数据，如需连接真实的 KLPL3 接口：
+
+1. 在后端 `DashboardController.java` 中修改接口实现
+2. 调用 KLPL3 真实接口获取数据
+3. 注意接口地址和认证方式
+
+## 📋 功能清单
+
+### 已实现功能
+
+- ✅ 系统首页（统计卡片、图表、活动列表）
+- ✅ 大屏管理（大屏列表、启动/停止）
+- ✅ 酸轧数据大屏（生产监控）
+- ✅ 订单大屏
+- ✅ 成本大屏
+- ✅ 能源大屏
+- ✅ 酸轧产出报表
+- ✅ 酸轧停机报表
+- ✅ 数据源配置
+- ✅ 系统设置
+
+### 预留接口位置
+
+在 `DashboardController.java` 中预留了 KLPL3 接口对接位置：
+
+```java
+// TODO: 对接KLPL3真实接口
+// @GetMapping("/wms/product/dashboard/overview")
+// public R<DashboardOverviewVO> getDashboardOverview() {
+//     // 调用KLPL3接口
+//     // return klpL3Service.getDashboardData();
+// }
+```
+
+## 🐛 常见问题
+
+### Q1: 前端页面空白？
+
+**解决方案**：
+1. 检查浏览器控制台（F12）查看错误信息
+2. 确保后端服务正常运行
+3. 清除浏览器缓存（Ctrl+Shift+Delete）
+
+### Q2: 数据库连接失败？
+
+**解决方案**：
+1. 检查数据库配置文件中的地址、端口、用户名、密码
+2. 确保数据库服务正常运行
+3. 检查网络连接（是否能访问数据库服务器）
+
+### Q3: 大屏页面显示异常？
+
+**解决方案**：
+1. 确保浏览器窗口分辨率足够（建议1920×1080）
+2. 检查浏览器是否支持 WebGL（ECharts需要）
+3. 禁用浏览器扩展后重试
+
+## 📞 技术支持
+
+如有其他问题，请联系开发人员。