3.4、AI页面助手
AI页面助手通过自然语言描述需求，自动生成布局专业、元素齐全的工业监控页面、HMI 操控页面与数据看板。生成范围可选择单页面，也可生成包含页面跳转的多页面系统；生成前还能设置风格偏好，让同一工程的页面保持统一风格。对于产线总览、流程监控等场景，还可生成符合工艺关系的流程图，并在保存时拆解为可继续编辑的 CMS 设备图片、管道、标签和测点组件。生成结果支持预览、微调、保存为 CMS 页面，并可衔接智能绑定完成变量接入，帮助工程师快速完成监控页面类工程开发。
3.4.1、功能说明
- 多模态输入构建页面：支持通过自然语言描述页面 "主题（用途）、视觉风格（可选）、核心内容（需展示的数据 / 元素）" ，也可以上传需求附件或参考图、选择页面模版、选择素材资源。AI会参考模版、图片和素材信息生成页面。
- 风格偏好设置：生成前可选择页面风格，选择后会自动沿用到后续生成的页面，无需重复描述，确保所有页面生成保持风格的一致性。
- 双模式按需生成：
- 快速模式：AI 智能补全上下文缺失细节，提供快速的页面生成体验。适用于方案前期的快速构思、概念验证与原型探索。
- 引导模式：基于可视化卡片交互智能引导用户完善配置，并在生成前提供方案确认与调整环节，确保交付结果与业务意图精准对齐。适用于标准严格、需求明确的工程交付场景。
- 生成范围可控：生成前可选择单页面或多页面。单页面只生成一个主页面，速度更快、消耗更低，适合快速体验、方案验证或在现有工程中扩展页面；多页面可根据需求生成一个或多个页面及页面跳转，适合搭建完整系统。生成范围在首次发送需求后锁定，避免 AI 因“系统”“平台”“操控台”等描述误判生成页数。
- 多类型页面生成：AI页面助手可根据用户需求，混搭图表、控制、显示、状态四大类组件生成页面，支持分析看板、HMI 、报表以及多种组件组合的复合页面。
- 工艺流程图生成与组件化转换：当用户明确提出“工艺流程图”“产线总览”“流程监控”，页面助手可识别行业、工艺、设备、管道、介质与流向，生成流程图并应用到页面中。保存到 CMS 时，可进一步拆解为设备图片、管道、文字标签和测点占位等可编辑组件；
- 素材资源引用：生成页面时可直接引用用户已选择的素材资源，包括设备图、3D 模型等。
- 智能局部重构：支持对已生成页面进行精细化调整。用户可自由框选页面内的特定区域，通过自然语言指令驱动 AI 快速完成局部组件的定向重构与样式优化。
- 无缝对接生产环境：生成的页面涵盖实时数据展示（如电流、电压、生产计数）、设备状态反馈、控制交互元素和素材资源展示，可从 HTML 预览保存并转换为 CMS 页面组件。工程师仅需根据实际工程需求进行简单微调（如组件位置、颜色调整、变量绑定确认）即可投入使用。
3.4.2、核心优势
1. 工程效率跃升
监控页面设计周期从传统 "小时级" 缩短至 "分钟级"，大幅加快工程交付进度。
效率对比：
| 页面类型 | 传统开发 | AI生成 | 积分消耗 | 效率提升 |
|---|---|---|---|---|
| 简单监控页（10-20个组件） | 2-3小时 | 3-5分钟 | 20积分/次 | 提升95% |
| 标准看板（30-50个组件） | 4-6小时 | 5-10分钟 | 20积分/次 | 提升96% |
| 复杂大屏（50+个组件） | 1-2天 | 10-20分钟 | 30积分/次 | 提升97% |
按人工成本计算，节省1小时的开发时间价值远超20积分的成本。AI生成不仅提升效率，更能显著降低项目成本。
2. 开发零门槛
OT工程师无需掌握UI设计或前端开发技能，仅通过自然语言描述需求即可完成专业页面开发。
传统方式 vs AI方式：
传统方式：
学习UI设计 → 学习组件库 → 手动拖拽布局 → 调整样式 → 配置属性
需要：设计能力 + 技术能力 + 大量时间
AI方式：
描述需求 → AI生成 → 简单微调
需要：清晰表达需求的能力
3. 页面风格统一
生成前可设置风格偏好，一次选择即可在后续生成中持续生效，减少页面之间的明暗、主色和组件样式漂移。当需求中存在多处风格信息时，按 "用户输入框中的明确要求 ＞ 风格偏好 ＞ 页面模板 ＞ 参考图 ＞ AI 自动补全" 的顺序合并。
4. 从页面预览到工程落地
AI页面助手不只生成静态效果图，还支持将页面预览中的组件转换为 CMS 原生组件，并与变量智能绑定衔接。对于 HMI 操控页，显示类、控制类 和状态类组件可以进入后续绑定流程，减少从设计稿到可运行页面之间的重复配置。
3.4.3、典型使用场景
场景一：工程方案快速验证
背景：项目投标阶段需向客户展示界面原型，或内部评审新看板布局。
传统方式：
- 设计师出设计稿：1-2天
- 开发人员实现原型：2-3天
- 总计：3-5天
AI方式：
- 输入需求："创建产线整体看板，包含OEE、产量趋势和设备状态列表"
- AI生成高保真页面：5分钟
- 微调优化：10-20分钟
- 总计：30分钟内
价值：助力工程方案快速沟通与迭代，提升投标成功率。
场景二：复杂页面工程快速启动
背景：开发含工艺计算、多数据处理的功能页面。
策略：
-
先用AI生成页面"骨架"：
创建配方管理页面，包含：- 左侧：配方列表（表格）- 中间：参数输入区（10个输入框）- 右侧：实时数据显示区（5个数值框）- 底部：保存、加载、删除按钮 -
AI生成基础布局和组件
-
工程师专注于后台逻辑和功能实现
价值：减少前端布局耗时，让工程师聚焦核心业务逻辑。
场景三：多页面工程标准化构建
背景：为生产车间创建数个同类设备监控页。
步骤：
-
在首次发送需求前，将生成范围选择为“多页面”
-
准备统一的"风格提示词"：
工业灰风格，高亮色为青色，卡片式布局，标题字体18px，数据字体24px加粗 -
在提示词中明确页面清单，并包含统一风格描述：
工业灰风格，高亮色为青色，卡片式布局，标题字体18px，数据字体24px加粗。创建注塑车间首页，以及注塑机1号、2号、3号监控页，每个设备页面包含温度、压力、周期时间、产量计数，页面上设计导航栏可以相互跳转 -
在预览中检查页面数量、页面跳转和视觉一致性
效果：
- 大部分页面布局、字体、颜色保持一致
- 5个页面从1天缩短到1小时
- 降低工程标准化成本
场景四：HMI 操控页面快速生成
背景：设备操作页面需要同时包含参数显示、状态指示、操作按钮和报警信息，传统方式需要工程师逐个拖拽组件并配置样式。
AI方式：
- 输入需求："生成一张注塑机 HMI 操控页面，包含参数监控、运行监控、系统操作、当前报警和手动调试区"
- AI 自动混搭显示、控制、状态类组件
- 在预览中确认布局后保存为 CMS 页面
- 使用智能绑定完成读写变量绑定
价值：快速搭建可继续配置的 HMI 页面骨架，减少组件选择、布局和基础样式配置时间。
场景五：工艺流程总览页面生成
背景：水处理、氢能、空压站、锅炉或冷站等项目需要展示设备连接、管道流向、介质颜色、工艺段和关键测点，传统方式需要逐个绘制设备与管线。
AI方式：
-
输入工艺关系，或上传现有流程图作为参考：
创建一张水处理系统的 SCADA 工艺总览页面，工艺流程为原水池 → 原水泵 → 多介质过滤器 → 活性炭过滤器 → 清水池。用蓝色管道表示原水和清水，标注流向，展示各水池液位、泵运行状态、进出口压力和瞬时流量，右侧增加当前报警和系统启停操作区。 -
AI 识别设备、主管线、介质、流向和测点，生成流程图及完整页面
-
在预览中核对工艺关系、设备位置、管道颜色和流向
-
保存到 CMS，将流程图拆解为设备图片、管道、标签和测点组件
价值：减少工业流程图从需求梳理、设备排布、管线绘制到 CMS 组件重建的重复工作，快速获得可继续配置的工艺总览页面。
3.4.4、5分钟快速上手
步骤1：打开AI页面助手
在页面编辑器中，点击右上角的"AI助手"按钮，或在新建页面时选择"AI生成"。
步骤2：明确生成范围、需求与模式
首次发送需求前，先选择快速模式（AI自动补齐需求）或引导模式（AI卡片交互提问补充需求）。 在对话框中输入页面需求，也可以上传需求附件或参考图、选择页面模版、选择素材资源。例如：
创建一个注塑机监控页面，深色科技风格，
包含：
- 实时温度曲线图
- 压力仪表盘
- 生产计数显示
- 设备状态指示灯
- 启动/停止按钮
选择生成模式：
然后选择页面生成范围：
- 单页面：只生成一个主页面，速度快、消耗低，适合快速体验、方案验证或页面扩展
- 多页面：根据需求生成一个或多个页面和跳转关系，适合完整系统
发送第一条需求后，当前会话的生成范围会被锁定。如需切换，请关闭当前窗口并开启新会话后重新选择。
生成前还可以设置风格偏好：
- 风格预设：从风格示例中选择符合自己需求的页面风格
- 选择后会沿用到后续生成的页面，无需重复设置
单个页面如果对颜色有特殊要求，直接在需求输入框中说明即可，不会改变整体的风格偏好。
也可根据需求上传参考图、选择参考模版或选择设备资源：
如果需要生成工艺流程图，建议在需求中明确工艺对象、设备上下游关系、管道介质、流向、关键测点和控制区域；也可以上传已有 P&ID、SCADA 截图或工艺示意图作为参考。
步骤3：等待AI生成
AI会在30～60秒内分析需求并生成页面，生成过程中会显示进度提示。若已选择素材资源，AI 会在页面中引用并生成对应展示区域。涉及工艺流程图时，AI 还会识别工艺关系、生成流程图并组织配套的状态、控制、报警和参数区域，请根据进度提示耐心等待。
步骤4：预览和微调
- 查看生成的页面效果
- 如需调整，可以：
- 选中指定区域，通过对话的方式让AI修改
- 选中素材资源区域，让AI调整位置、尺寸或展示方式
- 或继续与AI对话进行整体优化
步骤5：保存为 CMS 页面
确认预览效果后，将页面保存为 CMS 页面。页面中的 HTML 预览内容会转换为可继续编辑的 CMS 页面组件。工艺流程图页面保存时会显示转换进度，并将设备、管道、标签和测点拆解为 CMS 组件；转换期间页面和相关按钮暂时不可操作。
步骤6：智能绑定数据
点击"开始智能绑定"，让AI自动匹配变量到组件，详见AI智能绑定。
3.4.5、提问技巧（快速生成优质页面）
技巧一：基础标准页面生成公式
公式：主题（页面用途）+ 风格（可选）+ 核心内容（需展示的数据 / 元素）
示例1 - 简单监控页：
创建一个机器人焊接工作站的监控页，
深色科技风格，
包含实时焊接电流图表、电压曲线、生产计数显示和设备状态指示灯。
示例2 - 生产看板：
创建一个产线整体看板，
卡片式布局，蓝色主题，
包含OEE仪表盘、产量趋势折线图、设备状态列表、报警信息滚动条。
示例3 - 数据分析页：
创建一个能耗分析页面，
浅色简洁风格，
包含日/月/年能耗对比柱状图、各设备能耗占比饼图、
实时功率曲线、能耗排名表格。
技巧二：大屏定制页面生成公式
公式：主题 + 风格 + 布局结构（屏幕分区）+ 详细元素（每个区域的图表 / 数据）
示例 - 1920x1080大屏：
为1920x1080屏幕设计一个冲压机监控页，
工业灰风格，高亮色为橙色；
页面分为左、中、右三列：
- 左侧（宽度30%）：用仪表盘显示OEE，下方显示设备状态卡片
- 中间（宽度40%）：顶部显示设备名称，中间用折线图显示实时压力曲线，
底部显示当前工单信息
- 右侧（宽度30%）：用表格显示历史故障记录，最多显示10条
所有文字使用微软雅黑，标题18px，数据24px加粗。
技巧三：使用参考风格
如果有喜欢的页面风格，可以描述参考对象：
创建一个类似特斯拉工厂监控风格的页面，
极简黑白配色，科技感强，
包含已选设备资源展示、实时数据流动效果、
关键指标大数字显示
技巧四：生成 HMI 操控页面
公式：设备对象 + HMI 功能区 + 读写组件 + 状态和报警要求
示例 - HMI 操控页：
创建一张 1920x1080 的注塑机 HMI 操控页面，
深色工业风格，
包含参数监控、运行监控、系统操作、当前报警、手动调试、参数设置。
参数监控中展示温度、压力、速度、产量等实时数值；
系统操作区包含启动、停止、复位、清零、报警解除按钮；
状态区用指示灯显示运行、停止、故障状态；
参数设置区包含温度设定和速度设定输入框。
3.4.6、常见问题
Q1: AI生成的页面不符合预期怎么办？
A: 可以尝试：
- 重新描述需求：使用更具体、更清晰的语言
- 分步骤生成：先生成基础布局，再逐步完善
- 提供参考：描述类似的页面风格或参考对象
- 手动微调：在AI生成的基础上手动调整
Q2: 如何让多个页面保持统一风格？
A:
- 第一次生成时，详细描述风格要求
- 保存这段"风格提示词"
- 后续生成其他页面时，复用这段提示词
- 只修改具体内容部分，保持风格描述不变
Q3: AI生成的组件可以修改吗？
A: 完全可以。如果对生成的页面不满意，您可以选中指定区域，通过对话的方式让AI直接进行修改。此外，AI生成的页面也是标准的CMS页面，您还可以手动进行：
- 拖拽调整组件位置和大小
- 修改组件属性（颜色、字体、样式等）
- 添加或删除组件
- 修改数据绑定
Q4: 生成的页面可以保存为模板吗？
A: 可以。生成并优化好的页面可以保存为模板，供后续项目复用。
Q5: AI支持生成移动端页面吗？
A: 支持。在描述需求时，指定"移动端"或"手机端"，并说明屏幕尺寸，AI会生成适配移动端的页面布局。
Q6: AI支持生成 HMI 操控页面吗？
A: 支持。您可以明确描述需要的功能区和组件类型，例如参数监控、运行监控、系统操作、手动调试、参数设置、报警记录等。AI会根据需求组合显示类、控制类和状态类组件，生成可继续转换和绑定的页面。
Q7: 素材资源怎么放到生成页面里？
A: 在输入需求时，通过"选择素材"选择需要引用的资源即可，例如设备图、3D 模型等。AI会将已选择的素材资源应用到生成页面中。
Q8: HTML 预览和 CMS 页面是什么关系？
A: AI会先生成可预览的页面效果。确认后保存为 CMS 页面时，页面内容会转换为 CMS 原生组件。转换后可以继续编辑组件属性、调整布局，并配合智能绑定完成变量绑定。
Q9: 什么情况下会生成工艺流程图？
A: 当您明确要求生成工艺流程图、产线总览或流程监控页面，选择 HMI 操作界面、SCADA 组态总览等页面类型，或描述了设备上下游连接关系时，AI 会生成工艺流程图。普通看板或无流程关系的页面不会被强制添加流程图。
Q10: 工艺流程图保存后还能编辑吗？
A: 可以。保存到 CMS 时，系统会尽量将设备、管道、标签和测点转换为独立组件，便于调整位置、样式和数据绑定；同时保留整张流程图作为兜底背景。保存后应人工核对设备连接、管道流向、介质颜色和组件拆解结果。
Q11: 如何控制只生成一个页面或生成多个页面？
A: 在首次发送需求前选择生成范围。选择“单页面”时，即使需求中包含多个页面，AI 也只生成一个主页面，并优先识别首页、总览、大屏、工作台或最具代表性的业务入口；选择“多页面”时，页面助手才会根据需求生成多个页面和页面跳转。首次发送后生成范围会被锁定，如需切换请关闭当前窗口并开启新会话。
3.4.7、最佳实践
1. 先简单后复杂
第一次使用时，从简单页面开始，熟悉AI的能力和风格后，再尝试复杂页面。这样既能快速上手，也能避免在复杂需求上浪费积分。
2. 建立提示词库
将常用的、效果好的提示词保存下来，建立团队的提示词库，提升团队整体效率。
3. 首次发送前确认生成范围
快速验证一个页面时选择单页面；需要完整系统、多个功能模块和页面跳转时选择多页面。生成范围在首次发送后会被锁定，因此提交需求前应先确认，避免因页面数量不符合预期而增加等待时间和积分消耗。
4. 善用迭代优化
如果一次生成不满意，可以继续与AI对话进行调整。但要注意，每次对话都会消耗20/30积分，建议：
- 尽量在第一次就描述清楚完整 需求
- 如果需要调整，一次性说明所有修改点：
"请做以下调整：
1. 把左侧的图表改为仪表盘
2. 增加一个报警信息滚动条
3. 调整为深色主题"
- 避免多次单独修改，节省积分
5. 结合智能绑定
页面生成后，立即使用AI智能绑定完成变量绑定，实现端到端的快速开发。
6. 测试验证
生成的页面在投入生产前，务必在测试环境中验证：
- 检查布局在不同分辨率下的显示效果
- 验证数据绑定是否正确
- 验证控制类组件是否只绑定到正确的写入变量
- 检查引用的素材资源在运行态是否正常显示
- 对工艺流程图页面，核对设备上下游关系、主管线与支路、介质颜色、流向和关键测点是否符合现场工艺
- 检查流程图拆解后的设备图片、管道、标签和测点组件是否完整，整图兜底背景是否正常
- 测试交互功能是否正常