可视化组态编辑器产品系统

在工业制造和能源管理场景中，企业需要直观展示生产设备、能源管线及运行状态。传统业务系统往往依赖固定页面进行信息展示，设备布局调整和可视化页面修改需要重复开发。本项目面向工业能源可视化需求，设计可拖拽的组态编辑工具，使用户能够自主配置设备、仪表、能源管线及数据展示组件，减少重复页面开发工作，提高业务页面的配置灵活性。

项目提供完整的可视化组态编辑工作台，主要包含以下功能：

1. 组件拖拽：支持设备、仪表、文本、标签、数据卡片及能源管线等组件，通过拖拽自由配置页面布局。
2. 画布编辑：支持画布缩放、组件移动、尺寸调整、复制、删除、撤销与重做等操作。
3. 管线绘制：支持水、电、气能源管线的编辑，能够调整管线路径、增加或删除折点，并配置管线样式。
4. 图层与属性管理：支持能源类型及逻辑图层筛选，可调整组件位置、层级和显示属性。
5. 数据绑定：支持选择模拟设备及其采集参数、虚拟参数，将设备数据与可视化组件关联。
6. 编辑与预览：支持草稿保存、发布版本管理及运行态预览，演示模拟数据刷新和设备交互。
7. 配置导入导出：通过 JSON 配置保存页面结构，支持导入、导出及页面配置复用。

项目采用本地模拟数据，提供可直接体验的独立交互演示。

项目采用 Vue3 + TypeScript + Vite 构建前端工程，使用 Pinia 管理编辑器状态，Element Plus 实现工作台及属性配置界面。

核心画布基于 SVG 和 Pointer Events 实现自由坐标编辑，支持设备组件、能源管线、图层层级及折点交互。通过 PageSchema 定义页面配置结构，将设备、组件属性、坐标和数据绑定统一管理。

设计草稿与发布版本分离的状态机制，编辑态和运行态复用统一场景渲染组件，降低展示逻辑重复开发的成本。使用 localStorage 模拟本地保存与发布，并支持 JSON 配置导入导出。

本人负责整体技术方案设计、核心编辑交互、组件状态管理和前端工程实现，重点解决自由布局、复杂组件交互、管线编辑以及配置数据与页面渲染之间的协同问题。

该作品为独立开发的脱敏技术演示，不包含企业内部源码及真实客户数据，后端数据交互使用 Mock 模拟。