screen/启动指南.md

# 数据大屏管理系统 - 启动指南

## 📁 项目结构

```
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. 禁用浏览器扩展后重试

## 📞 技术支持

如有其他问题，请联系开发人员。