# 大陆架零部件智能生产线数字孪生系统 - 技术文档 ## 项目概述 ### 项目名称 大陆架零部件智能生产线数字孪生系统（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