模板与皮肤
Darra HMI 提供 7 套项目模板 和 2 套内置皮肤, 覆盖常见场景; 用户也可新建 HMISkinDef 覆写 CSS 变量实现品牌化定制。
项目模板
IDE 菜单 HMI → 新建 HMI 项目 时可选择以下模板, 模板内容来自 Darra_Software_PLC/Darra_PLC_Service/HMI/Static/templates/*.html:
| 文件 | 模板名 | 适用 |
|---|---|---|
template-modern.html | 现代仪表盘 | 数据大屏 / 工厂总览 |
template-industrial.html | 工业风 SCADA | 化工 / 水处理 / 过程控制 |
template-motion.html | 运动控制工作站 | 伺服调试 / 多轴联动 |
template-robot.html | 机器人示教器 | 工业机器人 / 码垛 / 上下料 |
template-vision.html | 视觉检测站 | 相机 + 检测结果展示 |
template-gateway.html | 边缘网关 | 协议转换 / 设备接入监控 |
template-usermgmt.html | 用户管理 | 登录 / 权限 / 审计 |
wizard-welcome.html | 欢迎向导 | 首次打开引导 |
新建后, 模板会被拷贝到 HMIProjectDef.Pages[0] 的 HtmlCode/CssCode/JsCode 字段, 用户可自由修改, 不影响原模板。
使用模板的步骤
HMI → 新建项目→ 选择 "现代仪表盘"- 向导展示预览图, 点 "创建"
- IDE 打开设计器, 画布已填充模板
- 替换所有
var="..."为真实 PLC 变量
模板 JSON 示意 (modern)
{
"Name": "现代仪表盘",
"Type": "Local",
"Settings": {
"DesignWidth": 1920,
"DesignHeight": 1080,
"AspectRatio": "16:9",
"ScaleMode": "FitRatio"
},
"ActiveSkin": "modern",
"Pages": [
{
"Name": "总览",
"Route": "/",
"IsHome": true,
"HtmlCode": "<!-- 见 template-modern.html -->"
}
],
"SourceTemplate": "modern"
}
内置皮肤 (ActiveSkin)
皮肤 = 一组 CSS 变量 + 基础样式, 定义颜色、字体、圆角、阴影。切换皮肤 = 改 <body class="theme-modern"> → <body class="theme-industrial">, 所有 <darra-*> 自动跟随。
theme-modern (现代深色)
body.theme-modern {
--darra-bg: #1A1D23;
--darra-panel-bg: #23272E;
--darra-text: #E6E8EB;
--darra-primary: #4F7CFF;
--darra-success: #22C55E;
--darra-warning: #F59E0B;
--darra-danger: #EF4444;
--darra-border: #333942;
--darra-radius: 8px;
--darra-font: 'MiSans', 'Segoe UI', sans-serif;
--darra-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
theme-industrial (工业浅色 + 绿底黑字)
body.theme-industrial {
--darra-bg: #E8EDF2;
--darra-panel-bg: #FFFFFF;
--darra-text: #1A1A1A;
--darra-primary: #005A9E;
--darra-success: #2E7D32;
--darra-warning: #ED6C02;
--darra-danger: #C62828;
--darra-border: #B0BEC5;
--darra-radius: 2px;
--darra-font: 'MiSans', Arial, sans-serif;
--darra-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
切换皮肤
方法 1: JS API 运行时切换
darra.setTheme('industrial') // 保存到 localStorage, 刷新后仍生效
darra.getTheme() // 'industrial'
方法 2: 项目级默认
修改 HMIProjectDef.ActiveSkin = "industrial", 保存后重新发布。
方法 3: 用户按钮
<button @click="darra.setTheme('modern')">现代</button>
<button @click="darra.setTheme('industrial')">工业</button>
自定义皮肤 (HMISkinDef)
在 HMIProjectDef.CustomSkins 添加:
{
"Name": "brandRed",
"DisplayName": "公司红",
"Variables": {
"--darra-primary": "#D7263D",
"--darra-bg": "#FFF5F5",
"--darra-panel-bg": "#FFFFFF",
"--darra-radius": "4px"
},
"ExtraCss": ".my-hero { background: linear-gradient(90deg,#D7263D,#F46036); }"
}
然后 ActiveSkin = "brandRed", Service 在发送 /local/... 响应时自动注入:
body.theme-brandRed {
--darra-primary: #D7263D;
--darra-bg: #FFF5F5;
/* ... */
}
.my-hero { background: linear-gradient(90deg,#D7263D,#F46036); }
CSS 变量 (可覆盖)
| 变量 | 用途 |
|---|---|
--darra-bg | 页面底色 |
--darra-panel-bg | 面板/卡片底色 |
--darra-text | 主文本 |
--darra-text-muted | 次要文本 |
--darra-primary | 主色 (按钮/链接/图表主线) |
--darra-success | 成功 (绿 LED) |
--darra-warning | 警告 (黄) |
--darra-danger | 危险 (红) |
--darra-border | 边框 |
--darra-radius | 默认圆角 |
--darra-font | 字体族 |
--darra-shadow | 默认阴影 |
--darra-grid-gap | 网格布局间距 |
--darra-gauge-bg | 仪表盘背景 |
母版页 / 公共导航
HMIProjectDef.Navigation 定义全局导航栏, 所有页面共用:
{
"Position": "Top",
"Items": [
{ "Label": "总览", "Route": "/", "Icon": "home" },
{ "Label": "反应釜", "Route": "/reactor", "Icon": "beaker" },
{ "Label": "报警", "Route": "/alarm", "Icon": "alert" }
]
}
Position: Top / Left / Bottom / Hidden。Service 在每个页面 HTML 外包裹导航 DOM。
全局 CSS (GlobalCss)
HMIProjectDef.GlobalCss 会被注入到所有页面 <head>, 用于:
- 统一字体
@font-face - 覆盖
<darra-*>默认样式 - 公司 LOGO 背景
@font-face {
font-family: 'CompanyBrand';
src: url('/static/fonts/brand.woff2') format('woff2');
}
body { font-family: 'CompanyBrand', 'MiSans', sans-serif; }
.page-header { background-image: url('/static/img/logo.svg'); }
模板最佳实践
- 不要直接改模板源文件 (会影响新建项目); 修改副本
HMIProjectDef.Pages[0].HtmlCode - 变量命名统一: 所有模板用
DB1.Tx/DB1.Px占位, 新建后批量替换 - 皮肤不存颜色, 只存变量: 这样切皮肤才能即时生效
- 自定义皮肤命名加前缀:
brandRed而非red, 避免与未来内置皮肤冲突 - 预览必测两种皮肤: 深色/浅色下都要保证对比度