基于vue+quasar的web组态,核心代码基于vue,quasar仅仅是为了方便构建
预览地址:http://42.192.126.212/WebTopo/dist/spa/
github预览地址:https://phynos.github.io/WebTopo/dist/spa
功能 | 状态 |
---|---|
面板标尺 | 完成 |
拖曳添加组件 | 完成 |
位置移动-鼠标 | 完成 |
位置移动-方向键 | 完成 |
位置移动-批量 | 完成 |
拖动位置磁性吸附 | 未完成 |
尺寸锚点(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 | 多项复制 | 未完成 | 未完成 |
-- | 属性修改 | 未完成 | 未完成 |
其实整体思想很简单,就是定义一些数据,然后自己新增vue组件根据这些数据控制渲染和行为,其他的一些组态编辑操作是公共的。
3种机制:独立http、VUEX、事件总线(基于一个消息中心,订阅和发布消息的模式)
每个组件独立使用http接口和定时器实现,适用于少量组件的应用(组件太多会导致过多连接和定时器)
参见/src/assets/libs/simpleEventBus.js和ViewRect.vue组件的演示代码(直接进入预览可看见矩形变色)
未开始
未开始
未开始
准备中
未开始
更多构建功能请参考quasar官网,以下是一些常用的构建命令
$ quasar dev
$ quasar dev -p 9090
$ quasar dev -m pwa
$ quasar dev -m cordova
$ quasar dev -m electron
注意:Electron应用等请参考官网配置相应的开发环境
安装yarn:npm install -g yarn
设置yarn镜像:yarn config set registry http://registry.npm.taobao.org/
安装electron:yarn add --dev electron@^7.0.0 electron-debug@^3.0.0 electron-devtools-installer@^2.2.4 devtron@^1.4.0
安装环境:cnpm install --global windows-build-tools
在打包过程中会从github下载文件,如果下载不了,可以直接百度网盘下载,网盘地址: https://pan.baidu.com/s/1RiHHBDJMeiXLubaFzryTAw
quasar build
quasar build -m electron
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。