topology-gcf

topology-gcf

安装依赖

npm install

启动服务

npm run dev

声明

本项目为个人测试项目，内部使用资源文件后续可能删除，如需使用，请联系本人

联系我

微信： guocf9523

手机： 13588745281

设计思想

工具化、与业务解耦

核心功能

动态图例（支持png、svg、gif、文字、线条多种图例，多态图例与设备状态实时联动） 自由定制（用户可自定义图片、连线、文字、节点样式） 离线存储（离线储存画布，多项目可直接复用） 高性能低耦合（画布分层渲染，单画布支持千级节点；完全解耦业务，适合多场景使用）

待完成

• 图片上传
• 音频、视频嵌入播放

需源码支持

• 节点组合动画
• 修改节点cursor样式

完成功能点

画布配置

• 底图配置
• 禁用滚轮缩放
• 还原画布大小
• 缩放适配画布

节点

• 位置坐标、大小（宽高）
• 边框属性（样式、颜色、宽度）
• 背景色
• 透明度
• 多节点对齐

线条

• 连接样式（直线、曲线、线段）
• 起始点箭头样式
• 起始点位置
• 连线颜色、宽度
• 边框颜色、宽度
• 整体透明度

图片

• 图片修改（本地）
• 使用svg文件
• gif图
• 水槽液位变化
• 设备状态切换

文字

• 颜色
• 字号
• 样式（加粗、倾斜）
• 对齐（水平、垂直）

动画效果

• 旋转（顺时针、逆时针）
• 告警
• 自定义
• 水流（流速、颜色可修改）
• 圆点移动

媒体

• iframe 嵌入

定制需求

• 水管绘制
• 电梯运行
• 组件化导入导出，多图例组合图形，导出备用
• 液位变化，自动计算百分比

设备图例对应的五种状态： 告警： alarm : #ff4a4a 故障： fault: #ffb300 离线： offline: #9655ff 运行： running: #00dc94 正常： normal: #999

五种挡位： 0-4

设备图例： legendType:

变配电： 'electricity' iconfont 改变颜色，大小 平面图图标： 'plane' iconfont 改变颜色，大小 多态图片： 'statusImg' 改变图片，修改资源后缀为对应的5种状态 多档图片： 'enumImg' 改变图片，修改资源后缀为对应的5种档位 普通图片： 'normalImg' 无状态改变 电梯： 'elevator' 无状态改变 文字： 'text' 改变颜色和内容