topology-gcf-plus-new
v1.1.3
Published
智慧建筑web组态前端可视化解决方案
Downloads
2
Readme
topology-gcf
安装依赖
npm install
启动服务
npm run dev
友情链接
该项目核心功能来自 开源项目Topology 官网地址 文档地址
设计思想
工具化、与业务解耦
核心功能
动态图例(支持png、svg、gif、文字、线条多种图例,多态图例与设备状态实时联动) 自由定制(用户可自定义图片、连线、文字、节点样式) 离线存储(离线储存画布,多项目可直接复用) 高性能低耦合(画布分层渲染,单画布支持千级节点;完全解耦业务,适合多场景使用)
资源路径
地址:http://113.31.118.32:9000/minio/test/
账号:RSIO50V1FSVK1KOJVSE8
密码:CggoFHWyxKu9LDLk04kKHoDJkWTTHPu9KBXf8DB+
如需修改资源引用地址: 修改services --> config.js中的baseUrl
待完成
- [ ] 图片上传
- [ ] 音频、视频嵌入播放
需源码支持
- [ ] 节点组合动画
- [ ] 修改节点cursor样式
完成功能点
画布配置
- [x] 底图配置
- [x] 禁用滚轮缩放
- [x] 还原画布大小
- [x] 缩放适配画布
节点
- [x] 位置坐标、大小(宽高)
- [x] 边框属性(样式、颜色、宽度)
- [x] 背景色
- [x] 透明度
- [x] 多节点对齐
线条
- [x] 连接样式(直线、曲线、线段)
- [x] 起始点箭头样式
- [x] 起始点位置
- [x] 连线颜色、宽度
- [x] 边框颜色、宽度
- [x] 整体透明度
图片
- [x] 图片修改(本地)
- [x] 使用svg文件
- [x] gif图
- [x] 水槽液位变化
- [x] 设备状态切换
文字
- [x] 颜色
- [x] 字号
- [x] 样式(加粗、倾斜)
- [x] 对齐(水平、垂直)
动画效果
- [x] 旋转(顺时针、逆时针)
- [x] 告警
- [x] 自定义
- [x] 水流(流速、颜色可修改)
- [x] 圆点移动
媒体
- [x] iframe 嵌入
定制需求
- [x] 水管绘制
- [x] 电梯运行
- [x] 组件化导入导出,多图例组合图形,导出备用
- [x] 液位变化,自动计算百分比
设备图例对应的五种状态: 告警: alarm : #ff4a4a 故障: fault: #ffb300 离线: offline: #9655ff 运行: running: #00dc94 正常: normal: #999
五种挡位: 0-4
设备图例: legendType:
变配电: 'electricity' iconfont 改变颜色,大小 平面图图标: 'plane' iconfont 改变颜色,大小 多态图片: 'statusImg' 改变图片,修改资源后缀为对应的5种状态 多档图片: 'enumImg' 改变图片,修改资源后缀为对应的5种档位 普通图片: 'normalImg' 无状态改变 电梯: 'elevator' 无状态改变 文字: 'text' 改变颜色和内容