175 lines
5.0 KiB
Markdown
175 lines
5.0 KiB
Markdown
# 数据大屏管理系统 - 启动指南
|
||
|
||
## 📁 项目结构
|
||
|
||
```
|
||
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. 禁用浏览器扩展后重试
|
||
|
||
## 📞 技术支持
|
||
|
||
如有其他问题，请联系开发人员。
|