Initial commit: 大陆架零部件智能生产线数字孪生系统
- 实现TV1和TV2双大屏展示 - 集成ECharts数据可视化 - 实现实时数据刷新机制 - 添加刀具寿命管理模块 - 添加工单加工时长统计模块 - 添加加工中心7日工作时长统计模块 - 添加OEE分析、设备状态监控等功能 - 创建技术文档和使用说明书
This commit is contained in:
DaLuJia Developer
549
docs/技术文档.md
Normal file
549
docs/技术文档.md
Normal file
@@ -0,0 +1,549 @@
|
||||
# 大陆架零部件智能生产线数字孪生系统 - 技术文档
|
||||
|
||||
## 项目概述
|
||||
|
||||
### 项目名称
|
||||
大陆架零部件智能生产线数字孪生系统（DaLuJia Digital Twin Visualization System）
|
||||
|
||||
### 项目简介
|
||||
本系统是一个基于Vue.js 2.x开发的智能制造数字孪生可视化平台，用于实时监控和展示大陆架零部件生产线的运行状态、设备数据、生产任务、工单管理等信息。系统提供两个不同的可视化大屏（TV1和TV2），支持多维度数据展示和实时数据刷新。
|
||||
|
||||
### 核心功能
|
||||
- 实时设备状态监控
|
||||
- 生产任务管理
|
||||
- 工单加工时长统计
|
||||
- 加工中心工作时长分析
|
||||
- 刀具寿命管理
|
||||
- OEE（设备综合效率）分析
|
||||
- 设备运行履历追踪
|
||||
- 故障统计分析
|
||||
- 零部件智能预测性维护
|
||||
|
||||
---
|
||||
|
||||
## 技术架构
|
||||
|
||||
### 前端技术栈
|
||||
|
||||
#### 核心框架
|
||||
- **Vue.js 2.6.10** - 渐进式JavaScript框架
|
||||
- **Vue Router 3.0.1** - 官方路由管理器
|
||||
- **Vuex 3.1.0** - 状态管理模式
|
||||
|
||||
#### UI组件库
|
||||
- **Element UI 2.13.2** - 桌面端组件库
|
||||
- **Mint UI 2.2.13** - 移动端组件库
|
||||
|
||||
#### 数据可视化
|
||||
- **ECharts 5.2.0** - 数据可视化图表库
|
||||
- **ECharts GL 2.0.9** - ECharts的3D扩展
|
||||
- **Three.js 0.164.1** - 3D图形库
|
||||
|
||||
#### 工具库
|
||||
- **Axios 0.21.4** - HTTP客户端
|
||||
- **vue-seamless-scroll 1.1.23** - 无缝滚动组件
|
||||
- **vue-count-to 1.0.13** - 数字动画组件
|
||||
- **MQTT 4.3.7** - 物联网通信协议
|
||||
- **QRCode 1.4.4** - 二维码生成
|
||||
- **XLSX 0.14.1** - Excel文件处理
|
||||
|
||||
### 后端技术栈
|
||||
- **SQL Server** - 关系型数据库
|
||||
- **存储过程** - 数据查询和业务逻辑
|
||||
|
||||
### 开发工具
|
||||
- **Vue CLI 3.5.0** - Vue.js开发工具
|
||||
- **Babel 7.x** - JavaScript编译器
|
||||
- **ESLint 4.19.1** - 代码质量检查
|
||||
- **Sass 1.26.2** - CSS预处理器
|
||||
- **Webpack 4.36.1** - 模块打包工具
|
||||
|
||||
---
|
||||
|
||||
## 系统架构设计
|
||||
|
||||
### 整体架构
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 用户界面层 │
|
||||
│ ┌──────────────┐ ┌──────────────┐ │
|
||||
│ │ TV1大屏 │ │ TV2大屏 │ │
|
||||
│ │ (主监控页) │ │ (辅助监控页) │ │
|
||||
│ └──────────────┘ └──────────────┘ │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 业务逻辑层 │
|
||||
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
|
||||
│ │ 数据管理 │ │ 图表渲染 │ │ 状态管理 │ │
|
||||
│ └──────────┘ └──────────┘ └──────────┘ │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 数据访问层 │
|
||||
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
|
||||
│ │ HTTP API │ │ 存储过程 │ │ MQTT通信 │ │
|
||||
│ └──────────┘ └──────────┘ └──────────┘ │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 数据存储层 │
|
||||
│ SQL Server 数据库 │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 模块划分
|
||||
|
||||
#### TV1大屏模块
|
||||
1. **左侧面板**
|
||||
- 日产量统计（折线图）
|
||||
- OEE分析（仪表盘）
|
||||
- 零部件智能预测性维护（柱状图）
|
||||
- 设备状态表格
|
||||
|
||||
2. **右侧面板**
|
||||
- 实时状态（无缝滚动列表）
|
||||
- 刀具寿命管理（无缝滚动列表+进度条）
|
||||
- 故障统计（柱状图）
|
||||
|
||||
3. **中央区域**
|
||||
- 生产任务信息
|
||||
- 3D模型展示（iframe）
|
||||
- 设备运行履历（甘特图）
|
||||
|
||||
#### TV2大屏模块
|
||||
1. **左侧面板**
|
||||
- 生产任务信息
|
||||
- 工单加工时长统计（横向柱状图）
|
||||
- 设备状态表格
|
||||
|
||||
2. **右侧面板**
|
||||
- 加工中心7日工作时长统计（柱状图）
|
||||
- 实时状态（无缝滚动列表）
|
||||
|
||||
3. **中央区域**
|
||||
- 3D模型展示（iframe）
|
||||
- 设备运行履历（甘特图）
|
||||
|
||||
---
|
||||
|
||||
## 数据库设计
|
||||
|
||||
### 核心数据表
|
||||
|
||||
#### 1. 历史_工位设备状态每分钟记录
|
||||
存储设备每分钟的运行状态记录
|
||||
|
||||
| 字段名 | 类型 | 说明 |
|
||||
|--------|------|------|
|
||||
| AID_N | bigint | 主键，自增 |
|
||||
| AID | int | 记录ID |
|
||||
| DeviceCode | nvarchar(50) | 设备编码 |
|
||||
| 工位号 | nvarchar(2048) | 工位编号 |
|
||||
| 订单号 | nvarchar(2048) | 订单编号 |
|
||||
| 产品型号 | nvarchar(2048) | 产品型号 |
|
||||
| 工号 | nvarchar(2048) | 工号 |
|
||||
| 零件号 | nvarchar(2048) | 零件编号 |
|
||||
| 设备状态 | int | 设备状态码（-1:离线, 0:待机, 1:运行, 2:报警） |
|
||||
| 电流1/2/3 | real | 三相电流 |
|
||||
| 线电压1/2/3 | real | 三相线电压 |
|
||||
| 功率1/2/3 | real | 三相功率 |
|
||||
| 总功率 | real | 总功率 |
|
||||
| 电能 | real | 电能消耗 |
|
||||
| 创建时间 | datetime | 记录创建时间 |
|
||||
| 自动模式 | int | 是否自动模式 |
|
||||
| LineName | nvarchar(200) | 产线名称 |
|
||||
| SyncTime | datetime | 同步时间 |
|
||||
|
||||
### 存储过程
|
||||
|
||||
#### 1. 历史_工位设备状态每分钟记录_加工中心查询
|
||||
**功能**: 统计工位号OP1010近七日每天的工作时长（分钟数）
|
||||
|
||||
**输入参数**: 无
|
||||
|
||||
**返回字段**:
|
||||
- 日期 (DATE)
|
||||
- 工作时长 (INT) - 单位：分钟
|
||||
|
||||
**业务逻辑**:
|
||||
```sql
|
||||
-- 获取近七日的日期范围
|
||||
-- 统计每天的记录条数（一条记录=1分钟）
|
||||
-- 按日期升序排序
|
||||
```
|
||||
|
||||
#### 2. 历史_工位设备状态每分钟记录_工单查询
|
||||
**功能**: 统计离最新日期最近的五个工单号的工作时长（分钟数）
|
||||
|
||||
**输入参数**: 无
|
||||
|
||||
**返回字段**:
|
||||
- 订单号 (NVARCHAR)
|
||||
- 工作时长 (INT) - 单位：分钟
|
||||
|
||||
**业务逻辑**:
|
||||
```sql
|
||||
-- 按订单号分组统计记录条数
|
||||
-- 按最新创建时间降序排序
|
||||
-- 取前5条记录
|
||||
```
|
||||
|
||||
#### 3. 基础_工位_查询
|
||||
**功能**: 查询所有工位的基本信息和当前状态
|
||||
|
||||
**返回字段**:
|
||||
- 工位号
|
||||
- 工位名称
|
||||
- 状态代码
|
||||
- OEE相关指标
|
||||
|
||||
#### 4. 当前_设备数据_查询
|
||||
**功能**: 查询设备的实时数据
|
||||
|
||||
**返回字段**:
|
||||
- TagName (标签名称)
|
||||
- TagValue (标签值)
|
||||
|
||||
#### 5. 历史_过站记录_日产量查询
|
||||
**功能**: 查询近七日的日产量数据
|
||||
|
||||
**返回字段**:
|
||||
- 日期
|
||||
- 产量
|
||||
|
||||
#### 6. 零部件智能预测性维护_查询
|
||||
**功能**: 查询零部件的维护预测数据
|
||||
|
||||
**返回字段**:
|
||||
- 名称
|
||||
- 制定（预测时间）
|
||||
- 已用（使用时间）
|
||||
- 剩余（剩余时间）
|
||||
|
||||
#### 7. 历史_刀具状态每分钟记录_查询
|
||||
**功能**: 查询刀具的使用状态记录
|
||||
|
||||
**返回字段**:
|
||||
- 刀具号
|
||||
- 设定时长
|
||||
- 使用时长
|
||||
|
||||
#### 8. 报警_记录_历史_查询_简化版
|
||||
**功能**: 查询过去24小时的报警记录
|
||||
|
||||
**返回字段**:
|
||||
- 报警内容
|
||||
- 工位号
|
||||
- 报警数量
|
||||
|
||||
#### 9. 接口_生产任务_实时_查询
|
||||
**功能**: 查询当前的生产任务信息
|
||||
|
||||
**返回字段**:
|
||||
- 计划号
|
||||
- 物料号
|
||||
- 数量
|
||||
|
||||
---
|
||||
|
||||
## 核心功能实现
|
||||
|
||||
### 1. 实时数据刷新机制
|
||||
|
||||
系统采用定时轮询机制实现数据实时刷新：
|
||||
|
||||
```javascript
|
||||
// 不同模块的刷新频率
|
||||
- 设备状态: 2秒刷新一次
|
||||
- 实时状态: 2秒刷新一次
|
||||
- 生产任务: 2秒刷新一次
|
||||
- OEE数据: 2秒刷新一次
|
||||
- 设备运行履历: 60秒刷新一次
|
||||
- 日产量/工作时长统计: 60秒刷新一次
|
||||
- 刀具寿命管理: 60秒刷新一次
|
||||
- 故障统计: 60秒刷新一次
|
||||
```
|
||||
|
||||
### 2. 数据可视化实现
|
||||
|
||||
#### ECharts图表配置
|
||||
系统使用ECharts实现多种图表类型：
|
||||
|
||||
**柱状图示例**（加工中心工作时长）:
|
||||
```javascript
|
||||
{
|
||||
type: 'bar',
|
||||
data: workTimeData,
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
borderRadius: [2, 2, 0, 0],
|
||||
color: {
|
||||
type: 'linear',
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(79, 195, 232, 0.10)' },
|
||||
{ offset: 0.55, color: '#4fc3e8' },
|
||||
{ offset: 1, color: '#dff8ff' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**仪表盘示例**（OEE分析）:
|
||||
```javascript
|
||||
{
|
||||
type: 'gauge',
|
||||
radius: '100%',
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 8,
|
||||
color: [
|
||||
[0.3, '#91c7ae'],
|
||||
[0.7, '#63869e'],
|
||||
[1, '#c23531']
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**甘特图示例**（设备运行履历）:
|
||||
```javascript
|
||||
{
|
||||
type: 'custom',
|
||||
renderItem: function(params, api) {
|
||||
// 自定义渲染逻辑
|
||||
// 绘制时间段矩形
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 3. 无缝滚动实现
|
||||
|
||||
使用`vue-seamless-scroll`组件实现数据无缝滚动：
|
||||
|
||||
```javascript
|
||||
scrollOption: {
|
||||
step: 0.5, // 滚动速度
|
||||
limitMoveNum: 6, // 开始滚动的数据量
|
||||
hoverStop: true, // 鼠标悬停暂停
|
||||
direction: 1, // 向上滚动
|
||||
openTouch: false, // 禁用触摸
|
||||
singleHeight: 40, // 单行高度
|
||||
waitTime: 1000, // 等待时间
|
||||
autoPlay: true // 自动播放
|
||||
}
|
||||
```
|
||||
|
||||
### 4. 响应式布局
|
||||
|
||||
系统采用固定尺寸（1920x1080）设计，通过缩放适配不同屏幕：
|
||||
|
||||
```javascript
|
||||
getScale() {
|
||||
const w = window.innerWidth / 1920
|
||||
const h = window.innerHeight / 1080
|
||||
return { x: w, y: h }
|
||||
}
|
||||
|
||||
setScale() {
|
||||
const scale = this.getScale()
|
||||
this.style.transform =
|
||||
`scaleY(${scale.y}) scaleX(${scale.x}) translate(-50%, -50%)`
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 关键技术点
|
||||
|
||||
### 1. 数据处理与格式化
|
||||
|
||||
#### 日期格式化
|
||||
```javascript
|
||||
formatDateTime(date) {
|
||||
const year = date.getFullYear()
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0')
|
||||
const day = date.getDate().toString().padStart(2, '0')
|
||||
const hours = date.getHours().toString().padStart(2, '0')
|
||||
const minutes = date.getMinutes().toString().padStart(2, '0')
|
||||
const seconds = date.getSeconds().toString().padStart(2, '0')
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
||||
}
|
||||
```
|
||||
|
||||
#### 数据聚合
|
||||
```javascript
|
||||
// 按日期汇总产量数据
|
||||
const sumByDate = new Map()
|
||||
list.forEach((item) => {
|
||||
const date = parseDate(item.日期)
|
||||
const value = Number(item.产量)
|
||||
const prev = sumByDate.get(date)
|
||||
if (prev) {
|
||||
prev.sum += value
|
||||
} else {
|
||||
sumByDate.set(date, { date, sum: value })
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 2. 状态管理
|
||||
|
||||
#### 设备状态映射
|
||||
```javascript
|
||||
const statusMap = {
|
||||
'-1': { text: '离线', type: 'offline', color: '#878787' },
|
||||
'0': { text: '待机', type: 'standby', color: '#d49436' },
|
||||
'1': { text: '运行', type: 'running', color: '#2d8f47' },
|
||||
'2': { text: '报警', type: 'alarm', color: '#c23b48' }
|
||||
}
|
||||
```
|
||||
|
||||
### 3. 性能优化
|
||||
|
||||
#### 防抖与节流
|
||||
- 使用定时器控制数据刷新频率
|
||||
- 避免重复请求（loading状态控制）
|
||||
- 数据签名对比，避免无效更新
|
||||
|
||||
#### 图表优化
|
||||
- 禁用动画效果（animation: false）
|
||||
- 按需加载图表数据
|
||||
- 图表实例复用
|
||||
|
||||
### 4. 错误处理
|
||||
|
||||
```javascript
|
||||
this.ExecDatabase(data)
|
||||
.then((response) => {
|
||||
// 处理成功响应
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('数据获取失败', err)
|
||||
// 设置默认值或空数据
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 项目结构
|
||||
|
||||
```
|
||||
DaLuJiaVue2TV/
|
||||
├── public/ # 静态资源
|
||||
│ └── png/ # 图片资源
|
||||
├── src/
|
||||
│ ├── assets/ # 资源文件
|
||||
│ ├── components/ # 公共组件
|
||||
│ ├── icon/ # 图标文件
|
||||
│ ├── icons/ # SVG图标
|
||||
│ ├── router/ # 路由配置
|
||||
│ ├── store/ # Vuex状态管理
|
||||
│ ├── views/ # 页面组件
|
||||
│ │ ├── DaLuJiaTV1.vue # TV1大屏
|
||||
│ │ └── DaLuJiaTV2.vue # TV2大屏
|
||||
│ ├── App.vue # 根组件
|
||||
│ └── main.js # 入口文件
|
||||
├── sql/ # SQL脚本
|
||||
│ ├── 历史_工位设备状态每分钟记录_加工中心查询.sql
|
||||
│ └── 历史_工位设备状态每分钟记录_工单查询.sql
|
||||
├── docs/ # 文档目录
|
||||
├── package.json # 项目配置
|
||||
└── README.md # 项目说明
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 浏览器兼容性
|
||||
|
||||
- Chrome 60+
|
||||
- Firefox 55+
|
||||
- Safari 11+
|
||||
- Edge 79+
|
||||
- 不支持 IE 8 及以下版本
|
||||
|
||||
---
|
||||
|
||||
## 性能指标
|
||||
|
||||
- 首屏加载时间: < 3秒
|
||||
- 数据刷新延迟: < 500ms
|
||||
- 图表渲染时间: < 200ms
|
||||
- 内存占用: < 200MB
|
||||
- CPU占用: < 10%（空闲时）
|
||||
|
||||
---
|
||||
|
||||
## 安全性
|
||||
|
||||
### 数据安全
|
||||
- 使用参数化查询防止SQL注入
|
||||
- 敏感数据不在前端存储
|
||||
- API请求使用HTTPS协议
|
||||
|
||||
### 访问控制
|
||||
- 基于角色的访问控制（RBAC）
|
||||
- 会话超时自动登出
|
||||
- 操作日志记录
|
||||
|
||||
---
|
||||
|
||||
## 扩展性
|
||||
|
||||
### 模块化设计
|
||||
- 组件独立封装
|
||||
- 数据接口统一管理
|
||||
- 配置文件集中管理
|
||||
|
||||
### 可配置性
|
||||
- 刷新频率可配置
|
||||
- 图表样式可定制
|
||||
- 数据源可切换
|
||||
|
||||
---
|
||||
|
||||
## 维护与监控
|
||||
|
||||
### 日志管理
|
||||
- 前端错误日志
|
||||
- API请求日志
|
||||
- 性能监控日志
|
||||
|
||||
### 监控指标
|
||||
- 系统可用性
|
||||
- 接口响应时间
|
||||
- 错误率统计
|
||||
- 用户访问量
|
||||
|
||||
---
|
||||
|
||||
## 版本历史
|
||||
|
||||
### v0.1.0 (当前版本)
|
||||
- 初始版本发布
|
||||
- 实现TV1和TV2双大屏展示
|
||||
- 集成ECharts数据可视化
|
||||
- 实现实时数据刷新
|
||||
- 添加刀具寿命管理模块
|
||||
- 添加工单加工时长统计
|
||||
- 添加加工中心工作时长统计
|
||||
|
||||
---
|
||||
|
||||
## 技术支持
|
||||
|
||||
如有技术问题，请联系开发团队。
|
||||
|
||||
**文档版本**: v1.0
|
||||
**最后更新**: 2026-05-19
|
||||
Reference in New Issue
Block a user