workGit/数字孪生可视化大屏vue源码/DaLuJiaVue2TV/docs/使用说明书.md

大陆架零部件智能生产线数字孪生系统 - 使用说明书

目录

1. 系统简介
2. 环境要求
3. 安装部署
4. 系统配置
5. 功能使用指南
6. 常见问题
7. 故障排查
8. 维护指南

---

系统简介

系统概述

大陆架零部件智能生产线数字孪生系统是一个实时监控和可视化平台，用于展示生产线的运行状态、设备数据、生产任务等信息。系统提供两个可视化大屏（TV1和TV2），支持多维度数据展示。

主要功能

• ✅ 实时设备状态监控
• ✅ 生产任务管理
• ✅ 工单加工时长统计
• ✅ 加工中心工作时长分析
• ✅ 刀具寿命管理
• ✅ OEE分析
• ✅ 设备运行履历
• ✅ 故障统计
• ✅ 零部件预测性维护

系统特点

• 🎯 实时数据刷新（2秒/60秒）
• 📊 多种图表展示（柱状图、折线图、仪表盘、甘特图）
• 🔄 无缝滚动显示
• 📱 响应式布局
• 🎨 现代化UI设计

---

环境要求

硬件要求

• CPU: 双核及以上
• 内存: 4GB及以上
• 硬盘: 10GB可用空间
• 显示器: 1920x1080分辨率（推荐）

软件要求

开发环境

• Node.js: 10.x 或更高版本
• npm: 6.x 或更高版本
• Vue CLI: 3.x 或更高版本

数据库

• SQL Server: 2012 或更高版本

浏览器

• Chrome 60+（推荐）
• Firefox 55+
• Safari 11+
• Edge 79+

网络要求

• 局域网连接
• 稳定的网络环境
• 数据库服务器可访问

---

安装部署

步骤1: 环境准备

1.1 安装Node.js

1. 访问 Node.js官网
2. 下载并安装LTS版本
3. 验证安装：

node -v
npm -v

1.2 安装Vue CLI（可选）

npm install -g @vue/cli

步骤2: 获取项目代码

2.1 克隆或下载项目

# 如果使用Git
git clone <repository-url>

# 或直接解压项目压缩包到目标目录

2.2 进入项目目录

cd DaLuJiaVue2TV

步骤3: 安装依赖

npm install

注意: 如果安装速度慢，可以使用国内镜像：

npm install --registry=https://registry.npmmirror.com

步骤4: 数据库配置

4.1 创建数据库

在SQL Server中创建数据库：

CREATE DATABASE DDV_DLJ;

4.2 创建数据表

执行以下SQL脚本创建核心数据表：

-- 创建历史_工位设备状态每分钟记录表
-- 参考项目中的SQL脚本

4.3 创建存储过程

执行项目中的SQL脚本：

sql/历史_工位设备状态每分钟记录_加工中心查询.sql
sql/历史_工位设备状态每分钟记录_工单查询.sql

在SQL Server Management Studio中执行：

-- 打开并执行 历史_工位设备状态每分钟记录_加工中心查询.sql
-- 打开并执行 历史_工位设备状态每分钟记录_工单查询.sql

步骤5: 配置文件设置

5.1 配置数据库连接

编辑配置文件，设置数据库连接信息：

// 配置数据库连接参数
const dbConfig = {
  server: 'localhost',
  database: 'DDV_DLJ',
  user: 'your_username',
  password: 'your_password'
}

5.2 配置iframe地址

如果需要显示3D模型，配置iframe地址：

window.dt_Config = {
  iframeAddress: 'http://your-3d-model-url'
}

步骤6: 启动项目

6.1 开发模式

npm run serve

启动成功后，访问：

http://localhost:8080

6.2 生产模式

# 构建生产版本
npm run build

# 构建完成后，dist目录包含所有静态文件
# 将dist目录部署到Web服务器（如Nginx、IIS）

步骤7: 部署到生产环境

7.1 使用Nginx部署

server {
    listen 80;
    server_name your-domain.com;
    
    root /path/to/dist;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
}

7.2 使用IIS部署

1. 打开IIS管理器
2. 创建新网站
3. 设置物理路径为dist目录
4. 配置应用程序池（.NET CLR版本：无托管代码）
5. 启动网站

---

系统配置

数据刷新频率配置

在代码中可以调整各模块的刷新频率：

// 2秒刷新一次
startWorkstationStatusRefresh() {
  this.workstationStatusTimer = setInterval(() => {
    this.loadWorkstationStatus()
  }, 2000)  // 修改此值调整刷新频率
}

// 60秒刷新一次
startDailyOutputHistoryRefresh() {
  this.dailyOutputRefreshTimer = setInterval(() => {
    this.loadDailyOutputHistory()
  }, 60 * 1000)  // 修改此值调整刷新频率
}

图表样式配置

修改颜色主题

// 柱状图颜色
itemStyle: {
  color: {
    type: 'linear',
    colorStops: [
      { offset: 0, color: 'rgba(79, 195, 232, 0.10)' },  // 起始颜色
      { offset: 0.55, color: '#4fc3e8' },                // 中间颜色
      { offset: 1, color: '#dff8ff' }                    // 结束颜色
    ]
  }
}

修改字体大小

axisLabel: {
  color: '#fff',
  fontSize: 12,  // 修改字体大小
}

布局配置

调整容器高度

.daily-output-box {
  height: 300px;  /* 修改容器高度 */
}

调整图表边距

grid: {
  left: '30%',    // 左边距
  right: '6%',    // 右边距
  bottom: '12%',  // 下边距
  top: '8%'       // 上边距
}

---

功能使用指南

TV1大屏使用

访问TV1

在浏览器中访问：

http://your-domain.com/

功能模块说明

1. 日产量统计（左上）

• 显示近7日的日产量趋势
• 折线图展示
• 自动标注最大值
• 每60秒自动刷新

2. OEE分析（左侧中上）

• 显示OEE、时间利用率、性能利用率、良品率
• 仪表盘展示
• 支持手动编辑数值（点击数值区域）
• 每2秒自动刷新

3. 零部件智能预测性维护（左侧中下）

• 显示零部件的预测时间、使用时间、剩余时间
• 横向柱状图展示
• 最多显示5个零部件
• 每60秒自动刷新

4. 设备状态（左下）

• 显示各工位的实时状态
• 表格形式展示
• 状态包括：运行、待机、报警、离线
• 每2秒自动刷新

5. 实时状态（右上）

• 显示设备的实时数据
• 无缝滚动展示
• 包含设备状态指示灯
• 每2秒自动刷新

6. 刀具寿命管理（右侧中）

• 显示刀具的计划使用时长和实际使用时长
• 无缝滚动列表+进度条展示
• 鼠标悬停显示详细信息
• 鼠标悬停时暂停滚动
• 每60秒自动刷新

7. 故障统计（右下）

• 显示过去24小时的报警统计
• 柱状图展示
• 每60秒自动刷新

8. 生产任务（中央上方）

• 显示当前生产任务信息
• 包括订单号、物料号、数量
• 每2秒自动刷新

9. 设备运行履历（中央下方）

• 显示过去24小时的设备运行状态
• 甘特图展示
• 不同颜色表示不同状态
• 每60秒自动刷新

操作说明

切换到TV2

• 点击左上角"切换TV2"按钮

编辑OEE数值

1. 点击时间利用率、性能利用率或良品率的数值
2. 输入新的数值（0-100）
3. 按Enter键或点击其他区域保存

查看刀具详情

• 将鼠标悬停在刀具行上
• 显示刀具号、设定时长、使用时长
• 移开鼠标后提示框消失

TV2大屏使用

访问TV2

在浏览器中访问：

http://your-domain.com/#/TV2

或从TV1点击"切换TV2"按钮

功能模块说明

1. 生产任务（左上）

• 显示当前生产任务信息
• 包括订单号、物料号、数量
• 每2秒自动刷新

2. 工单加工时长统计（左侧中）

• 显示最近5个工单的加工时长
• 横向柱状图展示
• 订单号分两行显示
• 每60秒自动刷新

3. 设备状态（左下）

• 显示各工位的实时状态
• 表格形式展示
• 每2秒自动刷新

4. 加工中心7日工作时长统计（右上）

• 显示OP1010工位近7日的工作时长
• 柱状图展示
• 单位：分钟
• 每60秒自动刷新

5. 实时状态（右下）

• 显示设备的实时数据
• 无缝滚动展示
• 每2秒自动刷新

6. 设备运行履历（中央下方）

• 显示过去24小时的设备运行状态
• 甘特图展示
• 每60秒自动刷新

操作说明

切换到TV1

• 点击左上角"切换TV1"按钮

查看图表详情

• 将鼠标悬停在图表上
• 显示详细数值信息

---

常见问题

Q1: 页面无法访问

问题: 浏览器显示"无法访问此网站"

解决方案:

1. 检查服务是否启动：npm run serve
2. 检查端口是否被占用
3. 检查防火墙设置
4. 尝试使用http://localhost:8080访问

Q2: 数据不显示

问题: 页面加载正常，但数据显示为"--"或空白

解决方案:

1. 检查数据库连接是否正常
2. 检查存储过程是否创建成功
3. 打开浏览器控制台查看错误信息
4. 检查数据表中是否有数据

Q3: 图表显示异常

问题: 图表显示不完整或重叠

解决方案:

1. 刷新页面（F5）
2. 清除浏览器缓存
3. 调整浏览器窗口大小
4. 检查浏览器兼容性

Q4: 数据不刷新

问题: 数据长时间不更新

解决方案:

1. 检查网络连接
2. 检查数据库服务是否运行
3. 打开浏览器控制台查看是否有错误
4. 刷新页面重新加载

Q5: OEE数值无法编辑

问题: 点击OEE数值后无法输入

解决方案:

1. 确保点击的是数值区域（不是仪表盘）
2. 等待页面完全加载后再操作
3. 刷新页面重试

Q6: 刀具寿命提示框不显示

问题: 鼠标悬停时没有显示提示框

解决方案:

1. 确保鼠标悬停在刀具行上
2. 检查是否有数据
3. 刷新页面重试

Q7: 订单号显示不完整

问题: 工单统计中订单号被截断

解决方案:

• 系统已自动将长订单号分两行显示
• 如果仍有问题，调整图表左边距配置

Q8: 页面布局错乱

问题: 页面元素位置不正确

解决方案:

1. 确保浏览器窗口为全屏
2. 推荐使用1920x1080分辨率
3. 按F11进入全屏模式
4. 刷新页面

Q9: 构建失败

问题: 执行npm run build时报错

解决方案:

1. 删除node_modules文件夹
2. 重新执行npm install
3. 检查Node.js版本是否符合要求
4. 查看错误信息并修复代码问题

Q10: 性能问题

问题: 页面运行缓慢或卡顿

解决方案:

1. 关闭其他占用资源的程序
2. 使用Chrome浏览器（性能最佳）
3. 检查数据库查询性能
4. 适当增加数据刷新间隔

---

故障排查

日志查看

浏览器控制台

1. 按F12打开开发者工具
2. 切换到Console标签
3. 查看错误信息和警告

网络请求

1. 按F12打开开发者工具
2. 切换到Network标签
3. 刷新页面
4. 查看API请求状态

常见错误代码

404 Not Found

• 原因：请求的资源不存在
• 解决：检查API地址是否正确

500 Internal Server Error

• 原因：服务器内部错误
• 解决：检查数据库连接和存储过程

CORS错误

• 原因：跨域请求被阻止
• 解决：配置服务器允许跨域请求

Network Error

• 原因：网络连接失败
• 解决：检查网络连接和服务器状态

性能分析

使用Chrome DevTools

1. 按F12打开开发者工具
2. 切换到Performance标签
3. 点击Record按钮
4. 操作页面
5. 停止录制并分析结果

内存泄漏检查

1. 按F12打开开发者工具
2. 切换到Memory标签
3. 拍摄堆快照
4. 操作页面后再次拍摄
5. 对比两次快照查找泄漏

---

维护指南

日常维护

数据库维护

1. 定期备份数据库

BACKUP DATABASE DDV_DLJ 
TO DISK = 'D:\Backup\DDV_DLJ.bak'

2. 清理历史数据

-- 删除3个月前的历史记录
DELETE FROM 历史_工位设备状态每分钟记录
WHERE 创建时间 < DATEADD(MONTH, -3, GETDATE())

3. 重建索引

-- 重建表索引
ALTER INDEX ALL ON 历史_工位设备状态每分钟记录 REBUILD

应用维护

1. 清理日志文件

   • 定期清理浏览器缓存
   • 清理服务器日志文件

2. 更新依赖包

# 检查过时的包
npm outdated

# 更新包（谨慎操作）
npm update

3. 代码备份
   • 定期备份项目代码
   • 使用版本控制系统（Git）

系统升级

升级前准备

1. 备份数据库
2. 备份项目代码
3. 记录当前配置
4. 在测试环境验证

升级步骤

1. 停止服务
2. 更新代码
3. 安装新依赖
4. 执行数据库迁移脚本
5. 测试功能
6. 启动服务

回滚方案

1. 停止服务
2. 恢复代码备份
3. 恢复数据库备份
4. 启动服务

监控建议

系统监控

• CPU使用率
• 内存使用率
• 磁盘空间
• 网络流量

应用监控

• 页面加载时间
• API响应时间
• 错误率
• 用户访问量

数据库监控

• 查询性能
• 连接数
• 死锁情况
• 表大小

安全建议

访问控制

• 设置强密码
• 限制IP访问
• 使用HTTPS协议
• 定期更换密码

数据安全

• 定期备份数据
• 加密敏感信息
• 防止SQL注入
• 验证用户输入

系统安全

• 及时更新补丁
• 关闭不必要的端口
• 配置防火墙
• 监控异常访问

---

技术支持

联系方式

如遇到技术问题，请联系开发团队获取支持。

反馈建议

欢迎提供使用反馈和改进建议，帮助我们不断优化系统。

---

文档版本: v1.0
最后更新: 2026-05-19
适用版本: v0.1.0