Commit b80fdf7e authored by Developer's avatar Developer

docs: 更新设计文档-图表uPlot迁移+参数类型系统

parent cb2c87cb
......@@ -13,6 +13,7 @@ EPLAN Visualizer 是一个基于 Web 的可视化原理图编辑器,面向工
| 框架 | React 19 + Vite 7 |
| 图引擎 | @xyflow/react (React Flow v12) |
| 状态管理 | Zustand |
| 图表渲染 | uPlot (Canvas) |
| 布局算法 | Dagre |
| 数据导入 | xlsx (SheetJS) |
| 模型导出 | 自研 Modelica 代码生成器 |
......@@ -117,6 +118,37 @@ EPLAN Visualizer 是一个基于 Web 的可视化原理图编辑器,面向工
- 导出当前原理图为 JSON 格式(含节点位置、参数、连接关系)
- 从 JSON 恢复原理图
### 3.9 仿真结果可视化
基于 **uPlot** (Canvas 渲染) 的高性能图表系统,替代原 Recharts (SVG),支持万级数据点流畅渲染。
**三个图表组件**
| 组件 | 用途 | 特性 |
|------|------|------|
| SimResultsModal | 仿真结果弹窗查看 | 拖拽框选缩放、滚轮缩放、工具栏(放大/缩小/撤销/重置)、空格智能裁剪、导出PNG |
| LiveChart | HIL实时数据流 | 实时追加数据(`setData()`增量更新)、硬件操控面板(开关/滑块) |
| SimResultsPage | 独立结果页 | 变量选择、基本缩放浏览 |
**核心技术方案**
- **数据格式**:列式数组 `[[time...], [v1...], [v2...]]`,适配 uPlot 原生格式
- **悬浮 Tooltip**:自研 `uplotTooltipPlugin.js` 插件,鼠标位置显示暗色主题浮窗
- **框选高亮**:CSS 样式化 `.u-select` 元素,半透明蓝色区域
- **导出 PNG**:直接调用 `canvas.toDataURL()`,无需 SVG 序列化
- **变量名翻译**:自动将 Modelica 变量名映射为中文标签(电容1 电压(V) 等)
- **响应式**:ResizeObserver 监听容器尺寸变化,自动调整图表
### 3.10 参数类型系统
为元器件参数增加类型修饰,支持 `bool``int``real``string` 四种类型:
- `constants.js` 中所有内置组件参数带 `type` 字段
- `coerceParamValue()` 工具函数:创建/编辑时自动做类型转换
- 自定义组件编辑器:参数行含类型下拉框(bool/int/real/string,默认 real)
- bool 类型:编辑器默认值为 true/false 下拉框,属性面板渲染为可点击按钮
- PropertiesPanel:根据参数类型渲染不同输入控件
---
## 4. 待开发功能规划
......@@ -273,12 +305,14 @@ eplan_gui/
hooks/
useFlowStore.js # 画布状态管理 (Zustand)
useComponentLibrary.js # 符号库状态管理 (Zustand)
useUPlot.js # uPlot 实例生命周期管理 hook
utils/
constants.js # 内置符号定义 + 端口类型 + 常量
modelicaExporter.js # .mo 模型代码生成
modelMapping.js # 符号 → Modelica 映射表
xlsxParser.js # EPLAN xlsx 解析
layoutEngine.js # Dagre 自动布局
uplotTooltipPlugin.js # uPlot 悬浮 Tooltip 插件
docs/
design.md # 本文档
设计文档.md # 本文档
```
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment