npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

topology-sdvdxl

v0.0.1

Published

智慧建筑web组态前端可视化解决方案

Downloads

5

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' 改变颜色和内容