webtopo
Opened this issue · 1 comments
CL799807906 commented
webtopo
CL799807906 commented
WEB组态
基于若依框架的web组态
物联云组态地址:http://81.68.197.219:10071/index github 123456
功能清单
功能 | 状态 |
---|---|
面板标尺 | 完成 |
拖曳添加组件 | 完成 |
位置移动-鼠标 | 完成 |
位置移动-方向键 | 完成 |
位置移动-批量 | 完成 |
拖动位置磁性吸附 | 未完成 |
尺寸锚点(8个) | 完成 |
旋转锚点 | 完成 |
选中效果 | 完成 |
层叠控制 | 完成 |
面板比例缩放 | 完成 |
CTRL+C/V复制黏贴 | 完成 |
CTRL+A多选 | 完成 |
鼠标框选 | 完成 |
DELETE删除(支持删除多个) | 完成 |
样式配置(文字、大小、位置、边框、颜色、旋转) | 完成 |
组件继承体系 | 完成 |
DOM组件(文字、图片) | 完成 |
canvas组件(圆形、三角形、矩形、线条、箭头线条) | 完成 |
折线箭头 | 部分完成 |
echarts组件 | 完成 |
SVG组件 | 完成 |
组件同步/异步数据加载 | 完成 |
通讯机制-事件总线 | 完成 |
通讯机制-VUEX | 完成 |
事件总线-WebSocket | 完成 |
事件总线-MQTT | 完成 |
VUEX-WebSocket | 完成 |
VUEX-MQTT | 完成 |
高级功能
功能 | 状态 |
---|---|
批量编辑属性 | 完成 |
对齐工具 | 完成 |
撤销和恢复 | 有限支持 |
容器组件 | 完成 |
动画 | 完成 |
撤销和恢复支持操作列表
命令码 | 操作 | 撤销 | 恢复 |
---|---|---|---|
add | 新增 | 支持 | 支持 |
del | 删除 | 支持 | 支持 |
move | 移动 | 支持 | 支持 |
select | 选择 | 完成 | 完成 |
-- | 反选 | 未完成 | 未完成 |
resize | 形变 | 完成 | 完成 |
copy-add | 多项复制 | 完成 | 完成 |
-- | 属性修改 | 完成 | 完成 |
存在问题
- 目前的属性面板的鼠标编辑是硬编码的,这样初期拓展简单但是维护麻烦,更好的方法是每个属性定义完整的属性元数据,属性面板根据每个属性的元数据动态生成编辑,并支持属性分组
如何拓展控件
- 定义数据文件(参见 \src\components\topo\data-toolbox下的json文件)
- 新增控件,根据数据文件的数据自己实现显示方式(在\src\components\topo\control下新增控件,继承组件,可参考其他组件实现方式,整个**就是利用第一步的数据绘制dom节点或canvas图像)
- 注册控件到工具栏(在TopoToolbox.vue中)
- 注册控件(在TopoBase.vue中)
npm install --registry=https://registry.npmmirror.com
npm run dev
npm run build