可视化与组态二开
大约 3 分钟
可视化与组态二开
一、二开范围
可视化与组态相关源码主要分布在 Vue3 管理端的可视化、固定大屏、拖拽编辑器和组件目录中。
| 功能 | 目录 |
|---|---|
| 可视化大屏 | vue3/src/views/visualBigScreen |
| 固定大屏 | vue3/src/views/fixedBigScreen |
| 拖拽编辑器 | vue3/src/views/dragEditor |
| 组态/拖拽组件 | vue3/src/views/dragEditor/components |
| IoT 产品应用配置 | vue3/src/views/iot/product |
| 设备运行状态 | vue3/src/views/iot/device |
二、组件开发流程
三、配置项设计
组件配置项建议分层：
| 分组 | 示例 |
|---|---|
| 基础样式 | 宽高、颜色、字体、边框、背景 |
| 数据来源 | 物模型、场景变量、公共接口、模拟数据 |
| 显示规则 | 单位、小数位、枚举映射、颜色阈值 |
| 交互事件 | 点击、跳转、下发、显隐、脚本 |
| 高级配置 | 刷新频率、缓存、异常展示、权限 |
配置项越稳定，后续页面兼容成本越低。不要把临时项目字段直接写死在通用组件里。
四、变量绑定
变量绑定要注意：
- 运行态数据结构与设计态配置一致。
- 设备离线或无数据时有默认显示。
- 数组、对象、枚举、布尔值统一转换。
- 高频数据不要引起组件重复重绘。
- 多设备页面要明确当前设备上下文。
五、事件与脚本
二开事件时建议保持平台通用动作：
- 打开链接。
- 打开弹窗。
- 显示或隐藏组件。
- 下发设备指令。
- 刷新数据。
- 执行脚本。
- 切换视频通道。
业务规则建议放在规则引擎或后端，不要过度依赖前端脚本。
六、图片和素材
素材维护建议：
- 按模块二级归档，不把所有图片放在同一目录。
- 文件名使用英文、数字和短横线。
- 大体积 PNG 优先压缩或改为 WebP。
- 同一素材多语言共用，不重复复制。
- 删除未引用素材前先做引用扫描。
七、性能建议
| 问题 | 建议 |
|---|---|
| 页面卡顿 | 减少高频刷新组件，合并接口请求 |
| 大屏首屏慢 | 压缩图片，懒加载非首屏资源 |
| 图表重绘频繁 | 控制刷新间隔，避免深度监听大对象 |
| 视频占用高 | 控制同时播放路数，离屏及时关流 |
| 移动端错位 | 使用独立移动端布局或响应式约束 |
八、验收清单
- 设计态可拖拽、缩放、复制、删除。
- 运行态变量可刷新。
- 离线和空数据有默认状态。
- 点击事件可执行。
- 权限不足时不会显示危险操作。
- 页面刷新后配置不丢失。
- PC 和移动端显示正常。
- 构建无报错，控制台无关键错误。