2abd286d42
- 实现TV1和TV2双大屏展示 - 集成ECharts数据可视化 - 实现实时数据刷新机制 - 添加刀具寿命管理模块 - 添加工单加工时长统计模块 - 添加加工中心7日工作时长统计模块 - 添加OEE分析、设备状态监控等功能 - 创建技术文档和使用说明书
550 lines
15 KiB
Markdown
550 lines
15 KiB
Markdown
# 大陆架零部件智能生产线数字孪生系统 - 技术文档
|
||
|
||
## 项目概述
|
||
|
||
### 项目名称
|
||
大陆架零部件智能生产线数字孪生系统（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
|