thingspanel / thingspanel-backend-vue

Frontend for ThingsPanel.

English | 中文

项目介绍

ThingsPanel是一款轻量级、组件化的开源物联网应用支撑平台，旨在通过可复用的插件，减少开发工作，加速物联网项目构建。

ThingsPanel的插件主要有如下几类，分别是：

• 设备功能模板：整合物模型与图表。
• 设备配置模板：整合设备功能模板、协议插件。
• 协议接入插件：解决各类协议接入的问题。
• 服务接入插件：通过第三方平台接入设备。
• 看板卡片：扩展看板展示能力
• 可视化插件：扩展可视化大屏功能
• 依赖型插件：行业解决方案积木

通过以上插件的复用，可以大大提高研发效率。

使用示例

1. 有人M300网关接温湿度传感器使用MQTT接入ThingsPanel-v1.0.0
2. Fox-Shifu 接入 ThingsPanel
3. Fox-Edge灵狐物联网边缘计算平台对接ThingsPanel
4. ThingsPanel通过ESP8266遥控风扇转速
5. 使用ESP-8266和BMP280传感器测量大气压-ThingsPanel

产品截图

演示

地址：http://demo.thingspanel.cn

账户：[email protected]

密码：123456

产品用途

• 设备统一管理
• 物联网中台
• 设备商设备管理后台

解决问题

• 爱好者：开放的架构释放创造的乐趣。
• 集成商：一套平台交付所有智能化项目。
• 方案商：节省时间和成本快速实现业务目的。
• 设备商：实现目的只需要做好设备，不再需要关注软件。
• 最终客户：一套平台实现所有设备接入，实现物联网数据中台。

独特优势

• 易用性：简化了物联网，让物联网更容易理解。
• 兼容性：兼容各类设备协议，降低系统扩展成本。
• 组件化：开放架构，多种组件设计、快速搭建。

功能概要

• 多租户功能： 超级管理员管理、租户账户管理业务系统、租户用户管理设备查看数据
• 设备接入： 编辑创建项目、按照分组添加管理设备、查看设备推送状态、设备插件接入、网关与子设备接入、Modbus RTU/TCP协议接入、TCP协议接入、GB28181安防摄像头接入、自定- 义协议插件接入
• 监控看板： 设备添加后的监控图表、可设置看板为菜单或首页，创建多个看板。
• 设备功能模板：设置物模型、Web和App图表，可导出JSON。
• 设备配置模板：关联设备、属性与功能、协议配置、数据处理、自动化、告警、扩展信息、设备设置、一型一密设置
• 设备地图： 根据项目与分组筛选设备、设备类型筛选
• 可视化： 可视化编辑基本功能、开放式架构、预绑定数据图表、添加自己的图元、和系统松耦合，支持组态、大屏、3D、Three.js
• 产品管理： 创建产品、批量管理、二维码数据、手动激活、预注册管理
• 固件升级： 为产品添加固件、创建升级任务、固件升级报表
• 自动化： 场景联动、场景日志、定时触发、设备触发、多种触发
• 告警信息： 根据项目和分组显示告警、时间段筛选
• 通知功能：短信、邮件、电话、webhook多种通知方式
• 系统日志： IP访问路径、设备操作记录
• 应用管理： 设备插件管理、插件生成器、插件安装、应用市场
• 协议接入： 开发自定义协议配置、配置后的接入参数
• 服务接入： 通过第三方平台接入设备
• 用户管理： Casbin方案、页面权限控制、项目权限控制、多角色定义
• 规则引擎： 数据转发第三方、接收设备数据并转换、接入各种协议、实时数据计算
• 数据网关：OpenAPI，数据库SQL-to-HTTP，对接三方系统，限制IP与数据范围，授权读取
• 系统设置： 更换Logo、更换系统标题、更换主题风格
• 物联网APP： Uniapp开发、扫码添加设备、查看监测值、切换项目和设备分组、手动控制、设置控制策略、查看操作日志、个人账号管理、手机验证码登录
• 依赖型插件： 依赖型插件为行业解决方案、基于设备插件和其他功能与数据、可视化调用、iframe代码引入、插件复用

前端技术栈

• TypeScript：JavaScript的超集，强类型编程语言
• Vue.js(3)：简单易上手的前端框架
• Vite：前端开发和构建工具
• vue-router：Vue.js官方的路由管理器
• pinia：新一代的Vue.js状态管理库，提供了比Vuex更简洁和易用的API
• naive-ui：Vue3 UI组件库
• vue-echarts：Echarts的Vue组件，集成了百度的ECharts图表库
• @antv/g2：数据可视化图表库
• @vicons：多种图标库的Vue组件封装，支持Ant Design、Carbon、Fluent、Ionicons等图标库
• axios：HTTP请求库
• socket.io-client：提供WebSocket封装

前端开发者指南

1. 推荐开发IDE：VSCode。安装以下插件以增强开发体验：
   • Vetur：Vue.js 的语法高亮和智能提示插件
   • ESLint： JavaScript 和 TypeScript 代码检查插件
   • Prettier：代码格式化工具
   • Volar：Vue3 支持的增强插件
   • Vite：Vite 工具链的相关支持插件
2. 克隆本项目。
3. 安装依赖。 安装node和pnpm： npm install -g pnpm； 安装项目依赖： pnpm install。
4. 启动服务。 pnpm dev 或 npm run dev。
5. 从主分支拉取一个分支进行开发。
6. 本地代码检查。 提交代码时会自动触发代码检查，也可以自己手动进行代码检查：
   • pnpm lint 运行ESLint进行代码检查；
   • pnpm typecheck 运行TypeScript类型检查；
   • pnpm format 格式化代码。
7. 项目使用Github Actions进行CI/CD，需检查CI/CD是否通过，并做出相应修改。
8. 代码提交后提交PR，等待审核。
9. 代码审核通过后会被合并到主分支。
10. 主分支代码会自动部署到生产环境。

API文档链接

https://docs.qq.com/doc/DZVZKc2FCTE1EblBX

许可和商用授权

ThingsPanel是在GNU Affero General Public License version 3 (AGPLv3)下发布的，这意味着您可以下载、使用和修改代码，前提是任何修改后的版本也必须在同一许可证下发布，并且如果您通过网络运行修改后的程序，您必须向网络用户提供源代码。

对于希望在商业环境中使用ThingsPanel的用户，我们提供商用授权选项。商用授权允许您在不完全遵守AGPLv3开源许可要求的情况下使用ThingsPanel，例如在不向最终用户公开源代码的情况下使用ThingsPanel。这为企业提供了更大的灵活性和保密性。

如果您对商用授权感兴趣，或者需要更多信息，请通过以下联系方式与我们沟通：商业授权查询，或者加入微信群、QQ群与我们的商务联系。我们将提供详细的授权选项，以满足您的商业需求。

社区与支持

qq群①：260150504（已满）
qq群②：371794256

致谢

感谢您对ThingsPanel的贡献! 感谢paddy235开发的ThingsPanel仿真测试脚本,可用于仿真和压力测试，脚本地址是：https://gitee.com/paddy235/thingspanel_simulation_python

thingspanel-backend-vue's Issues

前端响应速度很慢，演示地址和自行搭建的如此

在刷新页面或者进入页面的时候很慢，但是进入之后操作不慢

多层nginx代理遇到ws代理问题

WS连接能否使用8080端口统一经过代理进行转发到后端9999端口。

关于自行搭建问题

解决了

Add Support for HTTPS and WebSocket Secure (WSS)

Description

Hello, and first of all, thank you for maintaining this fantastic project. It has been incredibly useful in my work. However, I've encountered a limitation regarding the use of the project in secure environments. Currently, the project lacks support for HTTPS and WebSocket Secure (WSS), which is increasingly becoming a standard requirement for web communication to ensure data is encrypted and secure during transit.

Feature Request

I would like to request the addition of HTTPS and WSS support within the project. This feature would not only enhance the security of the project but also make it viable for a wider range of applications, especially those that require secure connections due to sensitive data or compliance with security policies.

Expected Benefits

Security: With HTTPS and WSS, data transmitted between clients and servers will be encrypted, significantly improving the security of communications.
Compliance: Many sectors require secure connections for compliance with data protection regulations. Adding HTTPS and WSS support would make the project usable in these scenarios.
Wider Adoption: By supporting secure protocols, the project can be adopted by users and organizations that require or prefer secure communications, thus expanding its user base.
Considerations

I understand that implementing these features may involve complexities, such as handling SSL/TLS certificates and possibly impacting performance. However, the benefits of having secure communication options could outweigh these challenges. It could also be implemented as an optional feature that users can enable as needed.

Conclusion

Adding HTTPS and WSS support would greatly enhance the project's applicability in secure environments and demonstrate a commitment to security and privacy. I, and likely many others in the community, would greatly appreciate your consideration of this feature request.

Thank you for your time and consideration.