当前位置: 首页 > news >正文

数字化工厂中央控制室驾驶舱系统 - Windows 部署笔记

数字化工厂中央控制室驾驶舱系统 - Windows 部署笔记

环境准备

这篇笔记记录了我在 Windows 10/11 上部署数字化工厂中央控制室驾驶舱系统的全过程,包括各种常见问题的解决方法。部署过程中使用了国内镜像源来加快下载速度。

前置需求

  • Python:3.8 到 3.11 版本(我用的是 3.11.4)
  • Node.js:v16 LTS 或 v18 LTS(我用的是 v18.19.0)
  • VSCode:代码编辑和终端使用

步骤一:系统解压与目录设置

  1. DigitalFactoryDashboard.zip 解压到合适的路径

    例如:C:\Projects\DigitalFactoryDashboard
    
  2. 打开 VSCode,选择 “File” > “Open Folder”,选择解压出来的 DigitalFactoryDashboard 文件夹

步骤二:后端环境配置

  1. 打开 VSCode 中的终端(快捷键:Ctrl + `)

  2. 进入后端目录

    cd DigitalFactoryDashboard/backend
    
  3. 创建并激活 Python 虚拟环境(推荐,但不强制)

    python -m venv venv
    # 激活虚拟环境
    venv\Scripts\activate
    

    激活后你会看到终端提示符前面多了 (venv),表示已进入虚拟环境。

  4. 使用清华源配置 pip(加速依赖下载)

    pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple
    
  5. 安装后端依赖

    pip install -r requirements.txt
    

    可能出现的问题和解决方法

    • 问题1:找不到某些包

      ERROR: Could not find a version that satisfies the requirement...
      

      解决方法:尝试单独安装关键包

      pip install fastapi==0.103.1 uvicorn==0.23.2 sqlalchemy==2.0.20 pandas==2.1.0 python-socketio==5.8.0
      
    • 问题2:下载超时

      ReadTimeoutError: HTTPSConnectionPool(host='pypi.org'...
      

      解决方法:增加超时时间重试

      pip install -r requirements.txt --timeout 300
      
    • 问题3:依赖冲突
      解决方法:创建新的虚拟环境,确保干净的安装环境

      deactivate  # 如果在虚拟环境中
      rd /s /q venv  # 删除旧虚拟环境
      python -m venv venv  # 创建新虚拟环境
      venv\Scripts\activate
      pip install -r requirements.txt
      

步骤三:前端环境配置

  1. 打开一个新的 VSCode 终端,进入前端目录

    cd DigitalFactoryDashboard/frontend
    
  2. 配置 npm 使用淘宝镜像源(加速依赖下载)

    npm config set registry https://registry.npmmirror.com
    
  3. 安装前端依赖

    npm install
    

    可能出现的问题和解决方法

    • 问题1:node_modules 损坏或依赖冲突

      Error: Cannot find module 'xxx'
      

      解决方法:清除缓存并重新安装

      # 删除 node_modules 和 lock 文件
      rmdir /s /q node_modules
      del package-lock.json# 清理 npm 缓存
      npm cache clean --force# 重新安装
      npm install
      
    • 问题2:tapable 模块丢失

      Error: Cannot find module 'C:\...\node_modules\tapable\lib\index.js'
      

      解决方法:单独安装 tapable 模块

      npm install tapable
      

      然后重新安装所有依赖

      npm install
      
    • 问题3:Node.js 版本不兼容
      解决方法:使用 Node.js v16 LTS 或 v18 LTS 版本,避免使用 v17 或最新的 v20 版本,因为有些依赖可能尚未兼容

    • 问题4:Yarn 替代方案
      如果 npm 安装反复出错,可以尝试 Yarn:

      npm install -g yarn
      yarn
      

步骤四:启动后端服务

  1. 在 VSCode 终端中,确保你在后端目录,并且虚拟环境已激活

    cd DigitalFactoryDashboard/backend
    venv\Scripts\activate  # 如果还没有激活虚拟环境
    
  2. 启动后端服务

    python run.py
    

    成功启动后,你会看到类似以下输出:

    INFO:     Started server process [12345]
    INFO:     Waiting for application startup.
    INFO:     Application startup complete.
    INFO:     Uvicorn running on http://0.0.0.0:8000 (Press CTRL+C to quit)
    

    注意:保持这个终端窗口运行,不要关闭它。

    可能出现的问题和解决方法

    • 问题1:端口冲突

      ERROR: [Errno 10013] Permission denied
      

      解决方法:可能是端口 8000 被占用,修改 run.py 文件中的端口号

      # 约在文件末尾找到这行
      uvicorn.run(app, host="0.0.0.0", port=8000)# 改为其他端口,例如
      uvicorn.run(app, host="0.0.0.0", port=8001)
      
    • 问题2:模块引入错误

      ModuleNotFoundError: No module named 'xxx'
      

      解决方法:检查是否忘记安装某些依赖,或者尝试单独安装缺失模块

      pip install 模块名
      

步骤五:启动前端服务

  1. 在 VSCode 中打开新终端,进入前端目录

    cd DigitalFactoryDashboard/frontend
    
  2. 启动前端开发服务器

    npm start
    

    成功启动后,浏览器会自动打开 http://localhost:3000,展示应用界面。

    可能出现的问题和解决方法

    • 问题1:与后端连接失败
      如果前端无法连接到后端服务,检查 package.json 文件中的 proxy 设置:

      "proxy": "http://localhost:8000"
      

      确保这里的端口号与后端运行的端口一致。

    • 问题2:JavaScript 堆内存不足

      FATAL ERROR: Reached heap limit
      

      解决方法:增加 Node.js 内存限制

      set NODE_OPTIONS=--max_old_space_size=4096
      npm start
      
    • 问题3:缺少浏览器兼容性文件

      Error: Cannot find module 'browserslist'
      

      解决方法

      npx browserslist@latest --update-db
      

性能优化建议

  1. 降低 3D 和动画密度:如果系统运行缓慢,可在 src/components/charts/ 目录下相关文件中调整参数

  2. 关闭 ESLint 警告:如果开发阶段遇到大量 ESLint 警告,可以在 .eslintrc.js 添加规则:

    rules: {'no-unused-vars': 'off','react-hooks/exhaustive-deps': 'off'
    }
    
  3. 使用生产构建:实际部署环境使用生产构建而非开发服务器

    cd frontend
    npm run build
    # 然后使用 serve 或其他静态文件服务器
    npx serve -s build
    

测试系统

前后端都启动后,访问 http://localhost:3000,你应该能看到系统仪表盘。测试以下功能确认系统正常工作:

  1. 实时数据刷新
  2. 设备状态监控
  3. 生产线效率图表
  4. 报警信息显示

常见问题总结

  1. 前后端无法连接

    • 检查后端是否正常运行在 http://localhost:8000
    • 检查前端 package.json 中 proxy 设置是否正确
    • 检查Windows防火墙是否阻止了通信
  2. 页面加载速度慢

    • 检查网络连接
    • 可能是首次加载资源较多,刷新后应该会加快
    • 尝试减少 3D 模型和动画效果
  3. 数据不更新

    • 检查后端控制台是否有错误信息
    • 可能是 WebSocket 连接失败,检查网络设置
  4. 打包和部署问题

    • 生产环境部署时,如需修改后端地址,须在前端构建前修改 .env 文件

更新日志

最后更新于 2025-05-05

http://www.xdnf.cn/news/293527.html

相关文章:

  • 计算机体系结构 第九章
  • 不小心把当前的环境变量路径覆盖掉怎么办
  • Gemini 解释蓝图节点的提示词
  • Lesson 15 Good news
  • 功率放大器设计
  • 大模型基础(五):transformers库(下):快速分词器、自动配置类、快速微调
  • pytorch checkpointing
  • 交换机工作原理(MAC地址表、VLAN)
  • P4168 [Violet] 蒲公英 Solution
  • 生物化学笔记:神经生物学概论10 运动节律的控制 运动时脑内活动 运动系统疾病及其治疗(帕金森、亨廷顿)
  • 【OSPF协议深度解析】从原理到企业级网络部署
  • 第15章:双星入侵与时间的迷雾
  • AIGC工具平台-图片转换线稿
  • 「OC」源码学习——对象的底层探索
  • 混搭文化数字社会学家解读,创新理解AI社会学网络社会学与数字人类学最新研究进展社会结构社会分层数字文化数字经济
  • 网络编程套接字(一)
  • PriorityQueue
  • 使用 Semantic Kernel 快速对接国产大模型实战指南(DeepSeek/Qwen/GLM)
  • Web前端开发:Grid 布局(网格布局)
  • ts学习(1)
  • 2024年408真题及答案
  • C++ 外观模式详解
  • php8 枚举使用教程
  • 稀疏性预测算法初步
  • 健康养生:从微小改变开始
  • 【YOLO11改进】改进Conv、颈部网络STFEN、以及引入PIOU用于小目标检测!
  • 基于Vue3开发:打造高性能个人博客与在线投票平台
  • 【MATLAB例程】基于RSSI原理的Wi-Fi定位程序,N个锚点(数量可自适应)、三维空间,轨迹使用UKF进行滤波,附代码下载链接
  • 反射-探索
  • CASS 3D使用等高线修改插件导致修后等高线高程变化的问题