cuihongwei/QingAnVue2TV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update config, vue component, and add new html page

Browse Source
This commit is contained in:
Cui Hongwei
2026-06-24 14:38:25 +08:00
parent 9bacfd9ee4
commit 26cb102efa
6 changed files with 2351 additions and 4511 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist.7z
View File

Binary file not shown.

674
docs/使用说明书.md
View File

@@ -1,674 +0,0 @@
# 大陆架零部件智能生产线数字孪生系统 - 使用说明书
## 目录
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官网](https://nodejs.org/)
2. 下载并安装LTS版本
3. 验证安装：
```bash
node -v
npm -v
```
#### 1.2 安装Vue CLI（可选）
```bash
npm install -g @vue/cli
```
### 步骤2: 获取项目代码
#### 2.1 克隆或下载项目
```bash
# 如果使用Git
git clone <repository-url>
# 或直接解压项目压缩包到目标目录
```
#### 2.2 进入项目目录
```bash
cd DaLuJiaVue2TV
```
### 步骤3: 安装依赖
```bash
npm install
```
**注意**: 如果安装速度慢，可以使用国内镜像：
```bash
npm install --registry=https://registry.npmmirror.com
```
### 步骤4: 数据库配置
#### 4.1 创建数据库
在SQL Server中创建数据库：
```sql
CREATE DATABASE DDV_DLJ;
```
#### 4.2 创建数据表
执行以下SQL脚本创建核心数据表：
```sql
-- 创建历史_工位设备状态每分钟记录表
-- 参考项目中的SQL脚本
```
#### 4.3 创建存储过程
执行项目中的SQL脚本：
```bash
sql/历史_工位设备状态每分钟记录_加工中心查询.sql
sql/历史_工位设备状态每分钟记录_工单查询.sql
```
在SQL Server Management Studio中执行：
```sql
-- 打开并执行 历史_工位设备状态每分钟记录_加工中心查询.sql
-- 打开并执行 历史_工位设备状态每分钟记录_工单查询.sql
```
### 步骤5: 配置文件设置
#### 5.1 配置数据库连接
编辑配置文件，设置数据库连接信息：
```javascript
// 配置数据库连接参数
const dbConfig = {
server: 'localhost',
database: 'DDV_DLJ',
user: 'your_username',
password: 'your_password'
}
```
#### 5.2 配置iframe地址
如果需要显示3D模型，配置iframe地址：
```javascript
window.dt_Config = {
iframeAddress: 'http://your-3d-model-url'
}
```
### 步骤6: 启动项目
#### 6.1 开发模式
```bash
npm run serve
```
启动成功后，访问：
```
http://localhost:8080
```
#### 6.2 生产模式
```bash
# 构建生产版本
npm run build
# 构建完成后，dist目录包含所有静态文件
# 将dist目录部署到Web服务器（如Nginx、IIS）
```
### 步骤7: 部署到生产环境
#### 7.1 使用Nginx部署
```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. 启动网站
---
## 系统配置
### 数据刷新频率配置
在代码中可以调整各模块的刷新频率：
```javascript
// 2秒刷新一次
startWorkstationStatusRefresh() {
this.workstationStatusTimer = setInterval(() => {
this.loadWorkstationStatus()
}, 2000) // 修改此值调整刷新频率
}
// 60秒刷新一次
startDailyOutputHistoryRefresh() {
this.dailyOutputRefreshTimer = setInterval(() => {
this.loadDailyOutputHistory()
}, 60 * 1000) // 修改此值调整刷新频率
}
```
### 图表样式配置
#### 修改颜色主题
```javascript
// 柱状图颜色
itemStyle: {
color: {
type: 'linear',
colorStops: [
{ offset: 0, color: 'rgba(79, 195, 232, 0.10)' }, // 起始颜色
{ offset: 0.55, color: '#4fc3e8' }, // 中间颜色
{ offset: 1, color: '#dff8ff' } // 结束颜色
]
}
}
```
#### 修改字体大小
```javascript
axisLabel: {
color: '#fff',
fontSize: 12, // 修改字体大小
}
```
### 布局配置
#### 调整容器高度
```css
.daily-output-box {
height: 300px; /* 修改容器高度 */
}
```
#### 调整图表边距
```javascript
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. **定期备份数据库**
```sql
BACKUP DATABASE DDV_DLJ
TO DISK = 'D:\Backup\DDV_DLJ.bak'
```
2. **清理历史数据**
```sql
-- 删除3个月前的历史记录
DELETE FROM 历史_工位设备状态每分钟记录
WHERE 创建时间 < DATEADD(MONTH, -3, GETDATE())
```
3. **重建索引**
```sql
-- 重建表索引
ALTER INDEX ALL ON 历史_工位设备状态每分钟记录 REBUILD
```
#### 应用维护
1. **清理日志文件**
- 定期清理浏览器缓存
- 清理服务器日志文件
2. **更新依赖包**
```bash
# 检查过时的包
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

549
docs/技术文档.md
View File

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

2
public/config.js
View File

@@ -1,6 +1,6 @@
window.dt_Config = {
titleText: '智能制造数字孪生系统',
iframeAddress: 'http://127.0.0.1:10061/#?transparent=true',
iframeAddress: 'http://localhost:10061/',
serverAddress: 'http://127.0.0.1:10057/submit/MESCommonBase.ashx'
}

1542
public/看板画面.html Normal file
View File

File diff suppressed because it is too large Load Diff

4095
src/views/DaLuJiaTV1.vue
View File

File diff suppressed because it is too large Load Diff