DeXun/screen
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
6cfa8faa48d5b70d10657fd0dd9346b8df3a2f50
screen/启动指南.md

5.0 KiB
Raw Blame History

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

📁 项目结构

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
    • 确保数据库配置正确：
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

  1. 运行启动类：

    • 找到 klp-admin/src/main/java/com/klp/KlpAdminApplication.java
    • 右键运行 Run 'KlpAdminApplication'

  2. 验证后端服务：

第二步：启动前端服务（Vue）

  1. 打开命令行（PowerShell 或 CMD）
  2. 进入前端目录：
cd d:\klp-oa\screen
  1. 安装依赖（首次运行）：
npm install
  1. 启动开发服务器：
npm run dev
  1. 访问前端页面：

🌐 访问地址

页面 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 文件：

# 默认连接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 接口对接位置：

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

📞 技术支持

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