Files

DaLuJia Developer 2abd286d42 Initial commit: 大陆架零部件智能生产线数字孪生系统

- 实现TV1和TV2双大屏展示
- 集成ECharts数据可视化
- 实现实时数据刷新机制
- 添加刀具寿命管理模块
- 添加工单加工时长统计模块
- 添加加工中心7日工作时长统计模块
- 添加OEE分析、设备状态监控等功能
- 创建技术文档和使用说明书

2026-05-21 09:19:09 +08:00

15 KiB

Raw Blame History

大陆架零部件智能生产线数字孪生系统 - 技术文档

项目概述

项目名称

大陆架零部件智能生产线数字孪生系统（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大屏模块

左侧面板
- 日产量统计（折线图）
- OEE分析（仪表盘）
- 零部件智能预测性维护（柱状图）
- 设备状态表格
右侧面板
- 实时状态（无缝滚动列表）
- 刀具寿命管理（无缝滚动列表+进度条）
- 故障统计（柱状图）
中央区域
- 生产任务信息
- 3D模型展示（iframe）
- 设备运行履历（甘特图）

TV2大屏模块

左侧面板
- 生产任务信息
- 工单加工时长统计（横向柱状图）
- 设备状态表格
右侧面板
- 加工中心7日工作时长统计（柱状图）
- 实时状态（无缝滚动列表）
中央区域
- 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) - 单位：分钟

业务逻辑:

-- 获取近七日的日期范围
-- 统计每天的记录条数（一条记录=1分钟）
-- 按日期升序排序

2. 历史_工位设备状态每分钟记录_工单查询

功能: 统计离最新日期最近的五个工单号的工作时长（分钟数）

输入参数: 无

返回字段:

订单号 (NVARCHAR)
工作时长 (INT) - 单位：分钟

业务逻辑:

-- 按订单号分组统计记录条数
-- 按最新创建时间降序排序
-- 取前5条记录

3. 基础_工位_查询

功能: 查询所有工位的基本信息和当前状态

返回字段:

工位号
工位名称
状态代码
OEE相关指标

4. 当前_设备数据_查询

功能: 查询设备的实时数据

返回字段:

TagName (标签名称)
TagValue (标签值)

5. 历史_过站记录_日产量查询

功能: 查询近七日的日产量数据

返回字段:

日期
产量

6. 零部件智能预测性维护_查询

功能: 查询零部件的维护预测数据

返回字段:

名称
制定（预测时间）
已用（使用时间）
剩余（剩余时间）

7. 历史_刀具状态每分钟记录_查询

功能: 查询刀具的使用状态记录

返回字段:

刀具号
设定时长
使用时长

8. 报警_记录_历史_查询_简化版

功能: 查询过去24小时的报警记录

返回字段:

报警内容
工位号
报警数量

9. 接口_生产任务_实时_查询

功能: 查询当前的生产任务信息

返回字段:

计划号
物料号
数量

核心功能实现

1. 实时数据刷新机制

系统采用定时轮询机制实现数据实时刷新：

// 不同模块的刷新频率
- 设备状态: 2秒刷新一次
- 实时状态: 2秒刷新一次
- 生产任务: 2秒刷新一次
- OEE数据: 2秒刷新一次
- 设备运行履历: 60秒刷新一次
- 日产量/工作时长统计: 60秒刷新一次
- 刀具寿命管理: 60秒刷新一次
- 故障统计: 60秒刷新一次

2. 数据可视化实现

ECharts图表配置

系统使用ECharts实现多种图表类型：

柱状图示例（加工中心工作时长）:

{
  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分析）:

{
  type: 'gauge',
  radius: '100%',
  min: 0,
  max: 100,
  axisLine: {
    lineStyle: {
      width: 8,
      color: [
        [0.3, '#91c7ae'],
        [0.7, '#63869e'],
        [1, '#c23531']
      ]
    }
  }
}

甘特图示例（设备运行履历）:

{
  type: 'custom',
  renderItem: function(params, api) {
    // 自定义渲染逻辑
    // 绘制时间段矩形
  }
}

3. 无缝滚动实现

使用vue-seamless-scroll组件实现数据无缝滚动：

scrollOption: {
  step: 0.5,              // 滚动速度
  limitMoveNum: 6,        // 开始滚动的数据量
  hoverStop: true,        // 鼠标悬停暂停
  direction: 1,           // 向上滚动
  openTouch: false,       // 禁用触摸
  singleHeight: 40,       // 单行高度
  waitTime: 1000,         // 等待时间
  autoPlay: true          // 自动播放
}

4. 响应式布局

系统采用固定尺寸（1920x1080）设计，通过缩放适配不同屏幕：

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. 数据处理与格式化

日期格式化

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}`
}

数据聚合

// 按日期汇总产量数据
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. 状态管理

设备状态映射

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. 错误处理

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

15 KiB Raw Blame History Unescape Escape

大陆架零部件智能生产线数字孪生系统 - 技术文档

项目概述

项目名称

项目简介

核心功能

技术架构

前端技术栈

核心框架

UI组件库

数据可视化

工具库

后端技术栈

开发工具

系统架构设计

整体架构

模块划分

TV1大屏模块

TV2大屏模块

数据库设计

核心数据表

1. 历史_工位设备状态每分钟记录

存储过程

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

2. 历史_工位设备状态每分钟记录_工单查询

3. 基础_工位_查询

4. 当前_设备数据_查询

5. 历史_过站记录_日产量查询

6. 零部件智能预测性维护_查询

7. 历史_刀具状态每分钟记录_查询

8. 报警_记录_历史_查询_简化版

9. 接口_生产任务_实时_查询

核心功能实现

1. 实时数据刷新机制

2. 数据可视化实现

ECharts图表配置

3. 无缝滚动实现

4. 响应式布局

关键技术点

1. 数据处理与格式化

日期格式化

数据聚合

2. 状态管理

设备状态映射

3. 性能优化

防抖与节流

图表优化

4. 错误处理

项目结构

浏览器兼容性

性能指标

安全性

数据安全

访问控制

扩展性

模块化设计

可配置性

维护与监控

日志管理

监控指标

版本历史

v0.1.0 (当前版本)

技术支持

15 KiB

Raw Blame History