控件库 (36 个 `<darra-*>`)

Name: Darra Software PLC
Author: Darra

Darra HMI 提供36 个自定义 HTML 元素, 全部以 <darra-*> 开头, 由 darra-controls.js / darra-devextreme.js / darra-user.js 注册。它们既是 GrapesJS 设计器的 Block, 也是运行时的 Alpine.js Custom Element, 真正做到"设计即运行"。

通用属性: 所有控件都支持 var / x-show / x-bind:class / style / id / class。本文档只列特有 Trait。

基础控件 (5)

`<darra-button>` — 按钮

<darra-button var="M0.0" mode="toggle">启动</darra-button>
<darra-button var="M0.1" mode="momentary">点动</darra-button>

Trait	默认值	说明
`var`	(必填)	绑定 PLC 位变量
`mode`	`toggle`	`toggle` 翻转 / `momentary` 按下即松 (200ms 后自动置 0)
`label`	子节点文本	按钮文字
`color`	—	按下颜色

`<darra-led>` — 指示灯

<darra-led var="M0.2" color-on="#00FF00" color-off="#666"></darra-led>

Trait	默认值	说明
`var`	(必填)	绑定位变量
`color-on`	`#00FF00`	ON 颜色
`color-off`	`#FF0000`	OFF 颜色
`size`	`40px`	圆形直径
`blink`	`false`	true 时 ON 态闪烁

`<darra-numeric>` — 数字显示

<darra-numeric var="DB1.Temperature" format="0.00" unit="℃"></darra-numeric>

Trait	默认值	说明
`var`	(必填)	绑定字/双字/浮点变量
`format`	`0`	`0.00` 等, 小数点后位数
`unit`	`""`	单位后缀
`color`	`#333`	文本颜色

`<darra-input>` — 输入框 (双向)

<darra-input var="DB2.Setpoint" min="0" max="100" step="0.1"></darra-input>

Trait	默认值	说明
`var`	(必填)	绑定可写变量
`type`	`number`	`number` / `text` / `password`
`min` / `max` / `step`	—	number 校验
`placeholder`	`""`	占位提示

`<darra-label>` — 静态文字

<darra-label>欢迎使用 Darra</darra-label>

图表控件 (5)

`<darra-gauge>` — 仪表盘 (Chart.js)

<darra-gauge var="DB1.Pressure" min="0" max="10" unit="MPa"
             warn="7" critical="9"></darra-gauge>

Trait	默认值	说明
`var`	(必填)	数值变量
`min` / `max`	`0` / `100`	量程
`warn` / `critical`	—	警告/严重阈值 (显示黄/红段)
`unit`	`""`	量程单位

`<darra-trend>` — 趋势图 (Chart.js)

<darra-trend vars="DB1.T1,DB1.T2" max-points="300"
             colors="#00F,#F00" unit="℃"></darra-trend>

Trait	默认值	说明
`vars`	(必填)	逗号分隔多变量
`max-points`	`200`	滚动窗口长度
`colors`	自动	每条曲线颜色
`update-rate`	`500`	采样周期 ms

`<darra-chart>` — 通用图表

属性 type: bar / line / pie / doughnut / radar / scatter。数据源通过 data-var 绑定到数组变量。

`<darra-progress-bar>` — 进度条

<darra-progress-bar var="DB1.Progress" max="100" color="#1E90FF"></darra-progress-bar>

`<darra-slider>` — 滑块 (可写)

<darra-slider var="DB2.Speed" min="0" max="3000" step="10"></darra-slider>

工业控件 (4)

`<darra-tank>` — 储罐 (含液位动画)

<darra-tank var="DB1.Level" max="100" color="#1E90FF" show-label></darra-tank>

Trait	默认值	说明
`var`	(必填)	液位变量 (0-max)
`max`	`100`	满量程
`color`	`#1E90FF`	液体颜色
`show-label`	`false`	显示百分比

`<darra-pipe>` — 管道

<darra-pipe flow-var="DB1.Flow" direction="right" color="#888"></darra-pipe>

有流量时显示流体动画 (CSS keyframes)。

`<darra-motor>` — 电机

<darra-motor run-var="M10.0" fault-var="M10.1"></darra-motor>

运行时绿色旋转, 故障时红色闪烁。

`<darra-valve>` — 阀门

<darra-valve open-var="M11.0" closed-var="M11.1"></darra-valve>

open-var=true → 绿色开, closed-var=true → 红色关, 两者皆 false → 黄色过渡态。

系统控件 (4)

`<darra-alarm-list>` — 报警列表

<darra-alarm-list max-rows="10" level-filter="warn,error"></darra-alarm-list>

订阅 Service HmiBroadcaster 的 alarm 事件, 自动滚动显示新报警, 含时间/级别/来源/消息/确认列。

`<darra-image-toggle>` — 图片切换

<darra-image-toggle var="M0.1" src-on="/img/on.svg" src-off="/img/off.svg"></darra-image-toggle>

`<darra-nav-button>` — 页面导航

<darra-nav-button route="/reactor">反应釜</darra-nav-button>

`<darra-panel>` — 面板容器 (可拖子控件)

<darra-panel title="1# 釜" border="1px solid #ccc">
  <darra-led var="M0.0"></darra-led>
</darra-panel>

运动控制 (3)

`<darra-axis>` — 伺服轴状态

<darra-axis axis-id="0" show="pos,vel,trq,enabled,alarm"></darra-axis>

Trait	说明
`axis-id`	轴号 (对应 Motion SDK)
`show`	显示字段列表

`<darra-jog-panel>` — 点动面板

<darra-jog-panel axis-id="0" speed-var="DB3.JogSpeed"></darra-jog-panel>

含 Jog+ / Jog- / 回零 / 使能 / 急停按钮, 所有操作走 /api/hmi/motion/*。

`<darra-motion-path>` — 轨迹预览

<darra-motion-path points-var="DB3.Path" width="600" height="400"></darra-motion-path>

支持 2D (XY 平面) / 3D (XYZ, 基于 Three.js)。mode="2d" / mode="3d"。

机器人 (3)

`<darra-robot-status>` — 机器人状态

<darra-robot-status robot-id="0"></darra-robot-status>

显示 6 个关节角 / TCP 位姿 / 模式 (T1/T2/Auto) / 程序名 / 速度。

`<darra-robot-jog>` — 机器人手动

<darra-robot-jog robot-id="0" jog-mode="joint"></darra-robot-jog>

jog-mode: joint (关节) / cart (笛卡尔) / tool (工具) / user (用户)。

`<darra-robot-3d>` — 3D 视图

<darra-robot-3d robot-id="0" model="/static/models/ur5.glb"></darra-robot-3d>

基于 Three.js + glTF, 实时同步 PLC 中关节角。

视觉 (2)

`<darra-camera-view>` — 相机画面

<!-- stream 指向外部相机/视觉系统的 HTTP 流 URL (MJPEG/HLS), Service 不自带视频流服务 -->
<darra-camera-view stream="http://cam1.plant.local/stream.mjpg"
                   overlay-var="DB10.VisionOverlay"></darra-camera-view>

DarraRT 不内置视频流服务器, stream 属性接受外部视觉/相机的 MJPEG/HLS URL (可配合 /api/hmi/proxy/* 转发绕 CORS)。overlay-var 绑定 PLC 里视觉算法输出的检测框 JSON 数组。

`<darra-vision-result>` — 检测结果

<darra-vision-result result-var="DB10.VisionResult"></darra-vision-result>

显示 OK/NG + 坐标 + 角度 + 置信度。

边缘/通讯 (3)

`<darra-comm-status>` — 通讯状态

<darra-comm-status channel="EtherCAT"></darra-comm-status>

显示连接数 / 收发字节 / 延迟 / 错误率。

`<darra-device-list>` — 设备列表

显示 EtherCAT 从站 / Modbus 节点 / OPC UA 连接, 在线/离线/报警指示。

`<darra-data-logger>` — 实时日志流

<darra-data-logger source="service" level="info" max-lines="200"></darra-data-logger>

订阅 /ws 的 log 消息, 滚动显示。

用户管理 (3)

`<darra-login-panel>` — 登录

<darra-login-panel redirect-on-success="/home"></darra-login-panel>

POST /api/hmi/login → 成功后返回 JWT, 控件自动写入 Cookie darra-token 并刷新页面。

`<darra-user-badge>` — 用户徽章

<darra-user-badge show-role show-logout></darra-user-badge>

`<darra-permission-gate>` — 权限门控

<darra-permission-gate role="admin">
  <darra-button var="M100.0">危险操作</darra-button>
</darra-permission-gate>

role 可填 admin / engineer / operator / viewer, 或用 permission="motion.write"。不满足时子节点隐藏。

布局 (3)

`<darra-separator>` — 分隔线

<darra-separator direction="horizontal" color="#ccc"></darra-separator>

`<darra-tab-container>` — Tab 容器

<darra-tab-container>
  <darra-tab title="概览">...</darra-tab>
  <darra-tab title="趋势">...</darra-tab>
</darra-tab-container>

`<darra-group-box>` — 分组框

<darra-group-box title="供水系统">
  <darra-tank var="DB1.Level"></darra-tank>
</darra-group-box>

DevExtreme 封装 (10)

所有 DevExtreme 控件通过 <darra-dx-*> 元素封装, 自动初始化 DevExtreme JS 实例并绑定 PLC 变量。

`<darra-dx-grid>` — 表格 (DataGrid)

<darra-dx-grid var="DB100.OrderList"
               columns="id:编号,name:名称,qty:数量,state:状态"
               filter-row="true" paging="20"></darra-dx-grid>

`<darra-dx-tree>` — 树形列表 (TreeList)

<darra-dx-tree var="DB100.Bom" parent-field="parent_id"
               columns="id,name,qty"></darra-dx-tree>

`<darra-dx-scheduler>` — 调度器

<darra-dx-scheduler var="DB100.ShiftPlan"
                    views="day,week,month"></darra-dx-scheduler>

`<darra-dx-pivot>` — 透视表

<darra-dx-pivot var="DB100.SalesData"
                rows="region" cols="month"
                values="amount:sum"></darra-dx-pivot>

`<darra-dx-form>` — 自动表单

<darra-dx-form var="DB1.MotorParams"></darra-dx-form>

根据 darra.describeDB() 返回的字段自动生成表单。

`<darra-dx-speedometer>` — 速度表

<darra-dx-speedometer var="DB3.RPM" min="0" max="3000"></darra-dx-speedometer>

`<darra-dx-linear-gauge>` — 温度计样式

<darra-dx-linear-gauge var="DB1.Temp" min="-20" max="150" unit="℃"></darra-dx-linear-gauge>

`<darra-dx-bar-gauge>` — 多值条形

<darra-dx-bar-gauge vars="DB1.V1,DB1.V2,DB1.V3"
                    labels="X,Y,Z" min="0" max="100"></darra-dx-bar-gauge>

`<darra-dx-bullet>` — 子弹图

<darra-dx-bullet var="DB1.Actual" target-var="DB1.Target"
                 min="0" max="100"></darra-dx-bullet>

`<darra-dx-sparkline>` — 迷你图

<darra-dx-sparkline var="DB1.Last60"></darra-dx-sparkline>

适合放在表格单元格内作为单行趋势。

通用 Trait (所有控件共有)

Trait	说明
`id`	DOM id, JS 可查
`class`	CSS class, 叠加皮肤
`style`	行内 CSS
`x-show="..."`	Alpine 条件显隐 (表达式)
`x-bind:class="..."`	Alpine 动态类
`data-*`	自定义数据属性, 可在 JsCode 读取
`hidden`	HTML 原生隐藏

基础控件 (5)​

<darra-button> — 按钮​

<darra-led> — 指示灯​

<darra-numeric> — 数字显示​

<darra-input> — 输入框 (双向)​

<darra-label> — 静态文字​

图表控件 (5)​

<darra-gauge> — 仪表盘 (Chart.js)​

<darra-trend> — 趋势图 (Chart.js)​

<darra-chart> — 通用图表​

<darra-progress-bar> — 进度条​

<darra-slider> — 滑块 (可写)​

工业控件 (4)​

<darra-tank> — 储罐 (含液位动画)​

<darra-pipe> — 管道​

<darra-motor> — 电机​

<darra-valve> — 阀门​

系统控件 (4)​

<darra-alarm-list> — 报警列表​

<darra-image-toggle> — 图片切换​

<darra-nav-button> — 页面导航​

<darra-panel> — 面板容器 (可拖子控件)​

运动控制 (3)​

<darra-axis> — 伺服轴状态​

<darra-jog-panel> — 点动面板​

<darra-motion-path> — 轨迹预览​

机器人 (3)​

<darra-robot-status> — 机器人状态​

<darra-robot-jog> — 机器人手动​

<darra-robot-3d> — 3D 视图​

视觉 (2)​

<darra-camera-view> — 相机画面​

<darra-vision-result> — 检测结果​

边缘/通讯 (3)​

<darra-comm-status> — 通讯状态​

<darra-device-list> — 设备列表​

<darra-data-logger> — 实时日志流​

用户管理 (3)​

<darra-login-panel> — 登录​

<darra-user-badge> — 用户徽章​

<darra-permission-gate> — 权限门控​

布局 (3)​

<darra-separator> — 分隔线​

<darra-tab-container> — Tab 容器​

<darra-group-box> — 分组框​

DevExtreme 封装 (10)​

<darra-dx-grid> — 表格 (DataGrid)​

<darra-dx-tree> — 树形列表 (TreeList)​

<darra-dx-scheduler> — 调度器​

<darra-dx-pivot> — 透视表​

<darra-dx-form> — 自动表单​

<darra-dx-speedometer> — 速度表​

<darra-dx-linear-gauge> — 温度计样式​

<darra-dx-bar-gauge> — 多值条形​

<darra-dx-bullet> — 子弹图​

<darra-dx-sparkline> — 迷你图​

通用 Trait (所有控件共有)​

相关文档​