cuihongwei/QingAnVue2TV

Fork 0

Files

Cui Hongwei 56a0c6bc82 chore: snapshot before iframe transparency fix

2026-06-24 14:42:30 +08:00

22 KiB

Raw Blame History

产线通讯信号可视化看板设计说明

1. 设计目标

本看板用于把 通讯变量列表.xlsx 中的产线通讯信号转化为一块可视化大屏的信息架构。设计重点不是绘制具体页面，而是定义大屏应包含的模块、指标、数据来源、状态规则和内容呈现方式，便于后续直接交给前端开发或低代码平台实现。

大屏核心视觉为中间三维模型区，通过 iframe 嵌入三维产线模型。当前占位 URL 使用：

https://www.baidu.com

后续替换为实际三维模型地址即可。

2. 数据范围

Excel 中包含 4 类数据表：

数据表	主要对象	用途
线体状态	长地轨、短地轨、关节	判断各单元是否在线、是否自动、是否允许接收任务、是否急停
任务数据	长地轨、短地轨、关节机器人	展示任务编号、起点、终点、配方、托盘、零件类型、执行反馈
物料库数据	长地轨、短地轨、关节物料库	展示各库位是否有件，统计库位占用率
设备数据	F500、L2000LSY、L2100SY、新日、MAZAK、YKD5132H、打标机、清洗机、测量仪	展示设备运行、报警、上下料、程序号、打标、清洗和测量状态

3. 整体布局建议

3.1 页面结构

建议采用 16:9 大屏布局，适配 1920x1080、2560x1440 等分辨率。

页面由以下区域组成：

区域	位置	内容
顶部标题栏	页面顶部	系统名称、当前时间、通讯状态、在线单元数量、报警数量
左侧运行态势区	左侧纵向	线体状态、任务流转、机器人反馈
中央三维模型区	页面中心	iframe 三维模型、透明浮层状态标签、任务路径提示
右侧设备监控区	右侧纵向	加工设备、打标机、清洗机、测量仪状态
底部物料与事件区	页面底部	物料库位矩阵、报警事件、任务日志、节拍指标

3.2 中央 iframe 三维模型区

中央区域为视觉焦点，应放置三维产线模型 iframe。

实现要求：

iframe 铺满中央模型容器，默认 URL 为 https://www.baidu.com。
iframe 上方叠加图表和状态标签时，图表容器应使用半透明背景，不能完全遮挡三维模型。
图表、设备标签、任务路线应作为 HUD 浮层覆盖在 iframe 上方。
对只展示信息、不需要点击的浮层，可设置 pointer-events: none，避免阻挡三维模型交互。
对需要点击的设备标签、报警弹窗、任务详情按钮，应单独设置 pointer-events: auto。
中央区域不要再画静态产线平面图，三维模型是主画面，其他模块只做透明叠加或周边信息面板。

建议层级：

层级	内容	说明
底层	iframe 三维模型	实际三维产线场景
中层	设备状态点位、任务路径、库位占用提示	半透明 HUD
上层	选中设备详情、报警弹窗、任务卡片	可交互信息层

4. 顶部标题栏模块

4.1 系统标题

标题建议：

产线通讯信号可视化监控看板

副标题可展示：

长地轨 / 短地轨 / 关节机器人 / 加工设备 / 物料库联动监控

4.2 全局状态 KPI

顶部建议展示 6 个核心指标：

指标	数据来源	计算规则
在线单元	PCS_RUN	长地轨、短地轨、关节中 PCS_RUN=1 的数量
自动模式	AUTO_ACTIVE	AUTO_ACTIVE=1 的单元数量
可接收任务	ALLOW_TASK	ALLOW_TASK=1 的单元数量
急停数量	EMG	EMG=1 的单元数量
执行中任务	BUSY	机器人反馈 BUSY=1 的任务数
当前报警	ERROR / ALARM	机器人 ERROR=1 或设备 ALARM=1 的数量

4.3 状态色规则

状态	颜色建议	说明
正常 / 在线 / 完成	绿色	PCS_RUN、READY、COMPLETE、IDLE
运行中 / 忙碌	蓝色	BUSY、自动运行中、打标中
等待 / 未触发	灰色	默认 0 或无任务
预警 / 不一致	黄色	目标程序号与实际程序号不一致
报警 / 急停 / 错误	红色	EMG、ERROR、ALARM

5. 左侧运行态势区

5.1 线体状态总览模块

展示对象：

长地轨
短地轨
关节

每个单元展示 4 个状态灯：

中文名称	英文名称	地址示例	展示方式
PCS运行	PCS_RUN	长地轨 DB47.DBX169.2；短地轨 DB28.DBX10.0；关节 DB47.DBX204.0	在线 / 离线状态灯
允许接收任务	ALLOW_TASK	长地轨 DB47.DBX168.0；短地轨 DB28.DBX0.4；关节 DB47.DBX200.3	任务准入标识
自动模式	AUTO_ACTIVE	长地轨 DB47.DBX168.1；短地轨 DB28.DBX0.1；关节 DB47.DBX200.1	自动 / 手动标识
急停激活	EMG	长地轨 DB47.DBX168.2；短地轨 DB28.DBX0.2；关节 DB47.DBX200.2	红色急停告警

模块内容建议：

三行单元卡片，每行一个单元。
左侧为单元名称，中间为四个状态灯，右侧为综合状态。
综合状态优先级：急停 > 离线 > 不允许任务 > 手动模式 > 正常。
当 ALLOW_TASK=1 且 AUTO_ACTIVE=1 且 EMG=0 时，显示“可派发任务”。

5.2 机器人任务监控模块

展示对象：

长地轨机器人任务
短地轨机器人任务
关节机器人任务

展示字段：

字段	英文名称	类型	展示建议
任务编号	TASK_NO	Short	当前任务主编号
起始位置	START_POS	Short	显示为起点编号，可在三维模型中高亮
结束位置	END_POS	Short	显示为终点编号，可在三维模型中高亮
配方号	RECIPE_CODE	String	显示当前加工/搬运配方
托盘类型	PALLET_TYPE	Short	转换为托盘类型标签
零件类型	PART_KIND	Short	1=长轴，2=短轴；长地轨无该字段可显示“-”
启动	FLAG	Boolean	显示任务启动信号是否已下发

模块内容建议：

使用三张任务卡片分别展示长地轨、短地轨、关节。
卡片顶部显示任务编号和执行状态。
中部显示“起点 -> 终点”的流向。
底部显示配方、托盘类型、零件类型。
当 START_POS 或 END_POS 有效时，在中央三维模型浮层中同步显示任务路径提示。

5.3 机器人反馈状态模块

机器人反馈字段：

字段	中文名称	展示规则
READY	准备好	绿色“就绪”
BUSY	忙碌	蓝色“执行中”
ERROR	错误	红色“异常”
COMPLETE	完成	绿色“已完成”

综合状态判定：

条件	状态文案
ERROR=1	异常
BUSY=1	执行中
READY=1 且 BUSY=0	就绪
COMPLETE=1	已完成
全部为 0	待机 / 未连接

建议用横向流程条展示：

任务下发 FLAG -> READY -> BUSY -> COMPLETE

如果 ERROR=1，流程条中断并高亮错误节点。

6. 中央三维模型透明叠加区

6.1 iframe 模型容器

容器描述：

中央主区域占页面宽度约 48%-56%。
高度从顶部标题栏下方延伸到底部信息区上方。
内嵌 iframe 占满容器。
iframe 初始地址使用 https://www.baidu.com。

前端实现建议：

<div class="model-stage">
  <iframe src="https://www.baidu.com" class="model-frame"></iframe>
  <div class="hud-layer">
    <!-- 透明图表、设备标签、任务路径 -->
  </div>
</div>

透明叠加样式建议：

.model-stage {
  position: relative;
  overflow: hidden;
}

.model-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.hud-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hud-panel {
  background: rgba(8, 18, 32, 0.42);
  border: 1px solid rgba(120, 210, 255, 0.35);
  backdrop-filter: blur(4px);
}

.hud-panel.interactive {
  pointer-events: auto;
}

6.2 三维模型浮动标签

建议在三维模型上按设备位置叠加状态标签：

标签对象	显示内容
长地轨	PCS运行、自动模式、允许任务、当前任务编号
短地轨	PCS运行、自动模式、允许任务、当前任务编号
关节	PCS运行、自动模式、允许任务、当前任务编号
F500	程序号、自动运行中、上料完成、下料完成、报警
L2000LSY	程序号、自动运行中、上料完成、下料完成、报警
L2100SY	程序号、自动运行中、上料完成、下料完成、报警
新日	程序号、上料就绪、下料就绪、自动运行中、报警
MAZAK	上料就绪、下料就绪、自动运行中、报警
YKD5132H	上料就绪、下料就绪、自动运行中、报警
打标机	开机中、开始打标、打标中、待机中
清洗机	运行中、错误、上料就绪、下料就绪
测量仪	运行中、错误、上料就绪、下料就绪

标签设计：

默认显示小型状态点和设备名称。
鼠标悬停或点击后展开信号详情。
报警设备标签闪烁红边，但不遮挡 iframe 主体。
任务相关设备可显示动态连线或箭头方向。

6.3 任务路径叠加

当任务数据中的 START_POS、END_POS 有值时，在三维模型上展示搬运路径：

起始位置 START_POS -> 结束位置 END_POS

建议内容：

路径线使用半透明蓝色。
当前任务执行中时，路径上显示流动光点。
任务完成时路径短暂变绿后淡出。
任务错误时路径变红，并在错误位置显示机器人名称。

7. 右侧设备监控区

7.1 加工设备状态模块

设备分组：

单元	设备
长地轨	F500、L2000LSY、L2100SY
短地轨	新日、MAZAK
关节	YKD5132H

展示字段：

字段	中文名称	展示建议
D_PROG_NO	目标程序号	显示为“目标程序”
A_PROG_NO	实际程序号	显示为“实际程序”
UPLOAD_COMPLETE	上料完成	长地轨设备使用
UNLOAD_COMPLETE	下料完成	长地轨设备使用
UPLOAD_READY	上料就绪	短地轨、关节设备使用
UNLOAD_READY	下料就绪	短地轨、关节设备使用
BUSY	自动运行中	蓝色运行状态
ALARM	报警	红色报警状态

模块内容建议：

设备以紧凑列表展示，每台设备一行。
每行包含设备名称、程序号、上下料状态、运行状态、报警状态。
D_PROG_NO 与 A_PROG_NO 不一致时显示黄色“程序待同步”。
ALARM=1 时整行红色高亮，并推送到底部事件列表。

7.2 打标机状态模块

覆盖对象：

长地轨打标机
短地轨打标机
关节打标机

字段：

字段	中文名称	说明
NORMAL	开机中	设备开机状态
START	开始打标	可作为动作触发信号
BUSY	打标中	正在执行打标
IDLE	待机中	可接收打标任务

展示建议：

使用小型工序卡片展示三台打标机。
状态优先级：打标中 > 开始打标 > 待机中 > 开机中 > 离线。
短地轨备注中提到 START 为 1 秒脉冲，前端需要做状态保持或事件记录，避免脉冲太短看不到。
短地轨 BUSY 备注为打标完成后一直为 1，建议页面文案不要简单写“打标中”，可结合 IDLE 或事件时间显示为“打标完成/保持信号”。

7.3 清洗机与测量仪模块

关节单元包含清洗机和测量仪。

字段：

设备	字段	中文名称
清洗机	BUSY	运行中
清洗机	ERROR	错误
清洗机	UPLOAD_READY	上料就绪
清洗机	UNLOAD_READY	下料就绪
测量仪	BUSY	运行中
测量仪	ERROR	错误
测量仪	UPLOAD_READY	上料就绪
测量仪	UNLOAD_READY	下料就绪

展示建议：

用两个并列状态卡片展示。
卡片顶部显示设备名称和综合状态。
中部显示“上料就绪 / 运行中 / 下料就绪”的流程。
如果 ERROR=1，流程变红，并在事件区生成异常记录。

8. 底部物料与事件区

8.1 物料库位矩阵模块

物料库信号：

长地轨：S1_YES 至 S9_YES，共 9 个库位。
短地轨：S1_YES 至 S9_YES，共 9 个库位。
关节：S1_YES 至 S6_YES，共 6 个库位。

展示建议：

单元	库位数量	展示方式
长地轨	9	3x3 库位矩阵
短地轨	9	3x3 库位矩阵
关节	6	2x3 库位矩阵

库位状态：

信号值	状态	显示
1	有件	绿色/蓝色实心块
0	空位	暗色空框

统计指标：

总库位数：24。
有件数量：所有 S*_YES=1 的数量。
空库位数量：总库位数 - 有件数量。
库位占用率：有件数量 / 总库位数。

交互建议：

点击库位显示所属单元、库位编号、信号地址、当前状态。
库位状态变化时可短暂闪烁，提示物料流转。
中央三维模型上可同步高亮对应库位。

8.2 报警与异常事件模块

事件来源：

事件类型	触发信号
急停事件	EMG=1
机器人错误	ERROR=1
加工设备报警	ALARM=1
清洗机/测量仪错误	ERROR=1
程序不一致	D_PROG_NO != A_PROG_NO
任务异常	FLAG=1 后长时间未 READY、BUSY 或 COMPLETE

事件列表字段：

时间
单元
设备
事件级别
事件内容
信号名称
信号地址
当前值

事件级别：

级别	条件
严重	EMG=1、ALARM=1、ERROR=1
警告	程序号不一致、任务超时
提示	状态切换、任务完成、库位变化

8.3 任务日志模块

基于任务数据记录关键节点：

节点	触发条件
任务创建	TASK_NO 变化
任务启动	FLAG=1
机器人就绪	READY=1
任务执行中	BUSY=1
任务完成	COMPLETE=1
任务异常	ERROR=1

日志内容建议：

10:21:08 长地轨 任务#1024 起点 1 -> 终点 6 配方 RCP-01 已启动
10:21:11 长地轨 机器人进入 BUSY
10:22:03 长地轨 任务#1024 COMPLETE

9. 数据映射明细

9.1 线体状态映射

单元	PCS运行	允许接收任务	自动模式	急停激活
长地轨	PCS_RUN / DB47.DBX169.2	ALLOW_TASK / DB47.DBX168.0	AUTO_ACTIVE / DB47.DBX168.1	EMG / DB47.DBX168.2
短地轨	PCS_RUN / DB28.DBX10.0	ALLOW_TASK / DB28.DBX0.4	AUTO_ACTIVE / DB28.DBX0.1	EMG / DB28.DBX0.2
关节	PCS_RUN / DB47.DBX204.0	ALLOW_TASK / DB47.DBX200.3	AUTO_ACTIVE / DB47.DBX200.1	EMG / DB47.DBX200.2

9.2 任务数据映射

单元	任务字段	反馈字段
长地轨	TASK_NO、START_POS、END_POS、RECIPE_CODE、PALLET_TYPE、FLAG	READY、BUSY、ERROR、COMPLETE
短地轨	TASK_NO、START_POS、END_POS、RECIPE_CODE、PALLET_TYPE、PART_KIND、FLAG	READY、BUSY、ERROR、COMPLETE
关节	TASK_NO、START_POS、END_POS、RECIPE_CODE、PALLET_TYPE、PART_KIND、FLAG	READY、BUSY、ERROR、COMPLETE

9.3 物料库映射

单元	库位信号	地址范围
长地轨	S1_YES 至 S9_YES	DB50.DBX101.0 至 DB50.DBX109.0
短地轨	S1_YES 至 S9_YES	DB50.DBX101.0 至 DB50.DBX109.0
关节	S1_YES 至 S6_YES	DB17.DBX0.0、DB17.DBX0.3、DB17.DBX0.6、DB17.DBX1.1、DB17.DBX1.4、DB17.DBX1.7

9.4 设备数据映射

单元	设备	核心信号
长地轨	F500	D_PROG_NO、A_PROG_NO、UPLOAD_COMPLETE、UNLOAD_COMPLETE、BUSY、ALARM
长地轨	L2000LSY	D_PROG_NO、A_PROG_NO、UPLOAD_COMPLETE、UNLOAD_COMPLETE、BUSY、ALARM
长地轨	L2100SY	D_PROG_NO、A_PROG_NO、UPLOAD_COMPLETE、UNLOAD_COMPLETE、BUSY、ALARM
长地轨	打标机	NORMAL、START、BUSY、IDLE
短地轨	新日	D_PROG_NO、A_PROG_NO、UPLOAD_READY、UNLOAD_READY、BUSY、ALARM
短地轨	MAZAK	D_PROG_NO、A_PROG_NO、UPLOAD_READY、UNLOAD_READY、BUSY、ALARM
短地轨	打标机	NORMAL、START、BUSY、IDLE
关节	YKD5132H	D_PROG_NO、A_PROG_NO、UPLOAD_READY、UNLOAD_READY、BUSY、ALARM
关节	打标机	NORMAL、START、BUSY、IDLE
关节	清洗机	BUSY、ERROR、UPLOAD_READY、UNLOAD_READY
关节	测量仪	BUSY、ERROR、UPLOAD_READY、UNLOAD_READY

10. 页面模块清单

模块编号	模块名称	位置	主要内容
M01	顶部总览 KPI	顶部	在线单元、自动模式、允许任务、急停、执行中任务、报警数量
M02	线体状态总览	左上	长地轨、短地轨、关节状态灯
M03	机器人任务卡片	左中	任务编号、起点、终点、配方、托盘、零件类型
M04	机器人反馈流程	左下	FLAG、READY、BUSY、COMPLETE、ERROR
M05	三维模型 iframe	中央	iframe 嵌入三维产线，当前使用百度 URL
M06	模型透明 HUD	中央叠加	设备标签、任务路径、报警点位、库位提示
M07	加工设备状态	右上	F500、L2000LSY、L2100SY、新日、MAZAK、YKD5132H
M08	辅助设备状态	右中	打标机、清洗机、测量仪
M09	物料库位矩阵	底部左	长地轨 9 格、短地轨 9 格、关节 6 格
M10	报警事件列表	底部中	急停、错误、报警、程序不一致
M11	任务日志	底部右	任务创建、启动、执行、完成、异常

11. 关键交互设计

11.1 单元联动

点击长地轨、短地轨或关节任意模块时：

左侧任务卡片高亮对应单元。
中央三维模型高亮对应区域。
右侧设备列表筛选对应单元设备。
底部事件列表优先显示该单元事件。

11.2 设备详情弹窗

点击设备标签或设备列表行时，弹出设备详情：

设备名称
所属单元
综合状态
全部信号当前值
信号地址
最近状态变化时间
最近报警时间

11.3 报警定位

当出现 EMG=1、ERROR=1 或 ALARM=1：

顶部报警数增加。
对应模块红色高亮。
中央三维模型设备标签出现红色告警标识。
底部报警事件列表新增记录。
点击事件可定位到中央模型上的对应设备。

11.4 任务追踪

当 TASK_NO 变化：

创建新的任务日志。
左侧任务卡片更新。
中央模型显示起点和终点。
FLAG=1 后显示“已启动”。
BUSY=1 后显示“执行中”。
COMPLETE=1 后显示“已完成”。
ERROR=1 后显示“异常中断”。

12. 内容文案建议

12.1 状态文案

原始信号	页面文案
PCS_RUN=1	PCS运行
PCS_RUN=0	PCS未运行
ALLOW_TASK=1	允许接收任务
ALLOW_TASK=0	禁止接收任务
AUTO_ACTIVE=1	自动模式
AUTO_ACTIVE=0	非自动模式
EMG=1	急停激活
READY=1	机器人就绪
BUSY=1	执行中
ERROR=1	发生错误
COMPLETE=1	任务完成
ALARM=1	设备报警

12.2 空数据文案

场景	文案
无任务	暂无任务
无报警	暂无报警
无物料	空库位
信号未接入	信号未接入
地址为空	地址待确认

13. 前端实现注意事项

iframe 需要独立层级，图表和状态层作为透明 HUD 覆盖。
周边面板可以使用半透明深色背景，但中央三维模型区域应尽量保持通透。
报警、急停、错误类信号必须优先展示，不能被任务状态覆盖。
START 等脉冲信号建议在前端或服务端记录边沿事件，否则大屏刷新周期可能捕捉不到。
D_PROG_NO 和 A_PROG_NO 可做程序一致性校验。
Excel 中部分地址为空或写有“不需要”，页面应显示为“地址待确认”或“不接入”，不要误判为异常。
长地轨和短地轨物料库地址目前相同，开发前需要确认是否确实共用地址或只是模板复制。
所有 Boolean 信号建议统一转换为 0/1、false/true 两种可识别格式，避免前端状态判断不一致。
看板建议保留数据刷新时间，例如“最后刷新：HH:mm:ss”。
三维模型 iframe 如果跨域，前端不能直接读取 iframe 内部对象，只能通过外部信号数据驱动浮层。

14. 推荐数据刷新策略

数据类型	刷新周期	说明
线体状态	1 秒	用于快速发现急停、离线、自动模式变化
任务状态	1 秒	用于展示任务流转
设备状态	1-2 秒	用于加工设备状态展示
物料库位	1-3 秒	用于库位变化展示
报警事件	实时 / 1 秒	建议后端生成事件流
历史统计	30-60 秒	用于节拍、占用率、趋势统计

15. 后续可扩展内容

后续如果有更多数据源，可以继续增加：

产量统计：当前班次完成数、日完成数、合格数、不良数。
节拍分析：单任务平均耗时、最长等待环节、设备利用率。
OEE 指标：可用率、性能、质量、综合效率。
能耗监控：设备用电、气压、液压、温度等。
维护提醒：报警频次、设备运行时长、保养倒计时。
任务回放：按时间轴回放任务路径和信号变化。

16. 交付结论

本设计将 Excel 中的通讯变量拆解为“线体状态、机器人任务、物料库位、设备状态、报警事件、任务日志”六类核心信息，并以中央 iframe 三维模型为主画面，通过透明 HUD 叠加图表和状态标签。

后续开发时，只需要把 https://www.baidu.com 替换为真实三维模型地址，并将各模块绑定到 Excel 中定义的信号地址，即可形成完整的产线通讯信号可视化看板。

22 KiB Raw Blame History Unescape Escape

产线通讯信号可视化看板设计说明

1. 设计目标

2. 数据范围

3. 整体布局建议

3.1 页面结构

3.2 中央 iframe 三维模型区

4. 顶部标题栏模块

4.1 系统标题

4.2 全局状态 KPI

4.3 状态色规则

5. 左侧运行态势区

5.1 线体状态总览模块

5.2 机器人任务监控模块

5.3 机器人反馈状态模块

6. 中央三维模型透明叠加区

6.1 iframe 模型容器

6.2 三维模型浮动标签

6.3 任务路径叠加

7. 右侧设备监控区

7.1 加工设备状态模块

7.2 打标机状态模块

7.3 清洗机与测量仪模块

8. 底部物料与事件区

8.1 物料库位矩阵模块

8.2 报警与异常事件模块

8.3 任务日志模块

9. 数据映射明细

9.1 线体状态映射

9.2 任务数据映射

9.3 物料库映射

9.4 设备数据映射

10. 页面模块清单

11. 关键交互设计

11.1 单元联动

11.2 设备详情弹窗

11.3 报警定位

11.4 任务追踪

12. 内容文案建议

12.1 状态文案

12.2 空数据文案

13. 前端实现注意事项

14. 推荐数据刷新策略

15. 后续可扩展内容

16. 交付结论

22 KiB

Raw Blame History