Advertisement

基于Vue的物联网云组态,轻松拖拽创建大屏。

  •  5星
  •     浏览量: 0
  •     大小:None
  •      文件类型:None


简介:
本产品采用Vue框架构建,提供物联网云组态服务,支持用户通过简单拖拽操作便捷地制作和管理复杂的大屏界面。 基于Vue的云组态源码使用Quasar框架编译,并嵌入ElementUI框架。通过MQTT实现实时通讯与毫秒级响应速度。 项目特点如下: 1. 框架依赖于若依框架,满足中小企业开发需求。 2. 微信小程序和安卓APP基于UniApp构建。 3. 云组态的2D部分使用Vue开发,并集成ElementUI,符合大众开发者习惯。 4. 3D云组态编辑器采用ThreeJS技术栈开发,要求团队成员具备相关经验。 功能包括: 1. 复制、粘贴和删除操作 2. 置顶管理 3. 对象的旋转、对齐、组合及锁定 4. 导入导出能力以及撤销/恢复操作 5. 预览模式,支持自定义大屏构建与拖拽功能。 6. 通过MQTT技术实现设备到云组态之间的即时通讯和控制指令下发。 7. 内置3D模拟器,兼容ThreeJS渲染需求。 8. 提供超过五千种工业图形模板选择。 9. 集成设备地图、设备管理、报警通知处理、工单追踪以及短信服务等功能模块,并设有图库管理和数据中心。 此外还具备: 10. 自定义报警设置 11. 个性化短信配置选项 12. 用户自定义图库设定 13. 协议解析引擎的定制化开发 数据库方面,项目使用MySQL和Taos时序型数据库来存储数据,适合处理大量信息。

全部评论 (0)

还没有任何评论哟~
客服
客服
  • Vue
    优质
    本产品采用Vue框架构建,提供物联网云组态服务,支持用户通过简单拖拽操作便捷地制作和管理复杂的大屏界面。 基于Vue的云组态源码使用Quasar框架编译,并嵌入ElementUI框架。通过MQTT实现实时通讯与毫秒级响应速度。 项目特点如下: 1. 框架依赖于若依框架,满足中小企业开发需求。 2. 微信小程序和安卓APP基于UniApp构建。 3. 云组态的2D部分使用Vue开发,并集成ElementUI,符合大众开发者习惯。 4. 3D云组态编辑器采用ThreeJS技术栈开发,要求团队成员具备相关经验。 功能包括: 1. 复制、粘贴和删除操作 2. 置顶管理 3. 对象的旋转、对齐、组合及锁定 4. 导入导出能力以及撤销/恢复操作 5. 预览模式,支持自定义大屏构建与拖拽功能。 6. 通过MQTT技术实现设备到云组态之间的即时通讯和控制指令下发。 7. 内置3D模拟器,兼容ThreeJS渲染需求。 8. 提供超过五千种工业图形模板选择。 9. 集成设备地图、设备管理、报警通知处理、工单追踪以及短信服务等功能模块,并设有图库管理和数据中心。 此外还具备: 10. 自定义报警设置 11. 个性化短信配置选项 12. 用户自定义图库设定 13. 协议解析引擎的定制化开发 数据库方面,项目使用MySQL和Taos时序型数据库来存储数据,适合处理大量信息。
  • Table件(ant-design-vue).vue
    优质
    这是一款基于Ant Design Vue框架开发的高度灵活且易于使用的可拖拽Table组件,支持数据行的自由排序与编辑。 ant-design-vue 可拖拽表格的实现代码位于名为 `ant-design-vue-draggable-table.vue` 的文件中。
  • Vue-Drag-Tree:Vue织树
    优质
    Vue-Drag-Tree是一款基于Vue.js框架开发的组件库,提供了一种直观、灵活的方式来构建和操作可拖拽的组织结构树。该工具支持自定义节点内容与样式,适合用于项目管理、文件系统等场景中复杂的层级数据展示和编辑需求。 安装vue-drag-tree-org 使用npm: ``` npm install vue-drag-tree-org ``` 或者使用yarn: ``` yarn add vue-drag-tree-org ``` 使用方法: ```javascript import VueDragTreeOrg from vue-drag-tree-org Vue.use(VueDragTreeOrg) // 或者在组件中直接引入 components: { VueDragTreeOrg } ``` CDN: 添加css样式(具体路径请参考官方文档) 添加js脚本(具体路径请参考官方文档)
  • Axure,实现简单设计
    优质
    使用Axure软件可以便捷地创建和编辑简单的网页设计,通过直观的拖拽功能快速构建原型,适合初学者和专业设计师。 用于拖拽设计简单网页的工具可以帮助用户轻松创建美观且功能齐全的网站界面。这类工具通常提供丰富的模板、组件以及直观的操作方式,使非专业开发者也能快速上手并实现自己的创意。通过简单的拖放操作,用户可以自由调整布局和样式,无需编写复杂的代码就能完成页面的设计与构建工作。
  • SpringBoot和Vue可视化编辑项目
    优质
    本项目是一款采用Spring Boot与Vue技术栈开发的可视化大屏应用,用户可以自由地进行界面元素的拖拽和编辑,适用于数据展示、监控等多种场景。 大屏设计是一个可视化拖拽编辑的工具,具备直观、酷炫且充满科技感的特点。该项目完全开源,并内置了多项基础功能,包括数据源管理、数据集配置以及报表管理等。它支持多种数据源,如MySQL、Elasticsearch和Kudu驱动程序,并允许用户自定义数据集以省去接口开发的步骤。此外,该工具还提供了17种大屏组件供用户选择使用。 即便是没有编程经验的人,只要按照设计稿也可以轻松完成大屏的设计工作。整个过程只需三个简单的步骤:配置数据源、编写SQL语句来设置数据集以及通过拖拽的方式进行大屏的布局调整,并最终保存和发布即可。
  • Vue源代码
    优质
    这段内容包含了一个Vue框架下的可拖拽功能实现的源代码,为开发者提供了便捷的方式来添加和编辑具有拖放交互元素的网页应用。 Vue 拖拽组件源码提供了一个详细的实现示例,帮助开发者理解和应用拖放功能到他们的项目中。这段代码展示了如何在 Vue 应用程序内创建可交互的界面元素,并提供了对 DOM 的动态操作能力,使用户能够通过简单的鼠标或触摸操作来移动和重新排列页面上的内容。 Vue 拖拽组件的核心在于监听用户的输入事件(如mousedown、touchstart等),并根据这些事件触发相应的DOM更新。这不仅增强了用户体验,也简化了开发者处理复杂UI需求的工作量。此外,源码中还包括了一些最佳实践的示例代码和注释说明,帮助用户更好地理解和定制该功能。 通过阅读这份详细的文档与源码实现,不仅可以学习到如何在Vue项目中集成拖拽组件的基本步骤和技术要点,还能了解到更多关于事件监听、DOM操作以及响应式系统方面的知识。
  • Vue-Page-Design:实现页面功能(Vue
    优质
    Vue-Page-Design是一款基于Vue框架开发的设计工具,旨在提供一种直观的方式来创建和编辑复杂的网页布局。它支持将各种UI组件以拖放的方式添加到设计画布中,并通过实时预览功能即时查看更改效果。此插件使得无需编写代码即可构建灵活、响应式的页面成为可能。 可视化页面装修功能是基于 Vue 和 Ant-Design 以及 vue-draggable 实现的。该系统支持自由拖拽组件,并能够实现 PC/M 端布局(PC 模式后续会继续优化)。此外,它还具备实时预览和所见即所得的功能特性,并且可以嵌套使用组件(此功能后期将得到进一步完善)。 当前已支持使用的组件列表: - 安装:请运行 $ npm install。 - 开发模式下启动项目:$ npm run dev。 自定义组件配置项参考: 针对特定的组件 U000001,其目录作用如下所示: ./U000001/m/form/index.js 文件中包含了当前组件的所有字段以及所有模版注册信息; 模板一展示字段请参见 ./U000001/m/form/template1.js; 模板二的展示字段则位于 ./U000001/m/form/template2.js。 在 index.js 中配置了数据类型如下: ```javascript const datas = { field1, field2, field... ``` 以上就是对可视化页面装修功能及其组件使用介绍。
  • Vue流程图:支持和箭头连接
    优质
    这是一款基于Vue.js开发的流程图绘制工具,用户可以轻松地通过拖拽方式创建节点并用箭头进行连接,非常适合用于制作工作流、业务流程等图表。 vue流程图支持拖拽创建,并可以画箭头连接元素。
  • Vue件vuedraggable API选项实现盒子间排序
    优质
    本项目介绍如何使用Vue.js插件vuedraggable进行组件间拖拽操作,并详细解释其实现盒子之间拖拽排序的功能及API配置。 本段落主要介绍了如何使用vue拖拽组件vuedraggable及其API options来实现盒子之间的相互拖拽、排序以及克隆clone功能,并通过实例代码进行了详细的讲解,具有一定的参考价值。
  • Vue.js式树
    优质
    简介:本项目是一款基于Vue.js框架开发的交互性强、易于使用的拖拽式树形结构管理组件,适用于各类需要灵活组织和展示层级数据的应用场景。 一个基于Vue.js的可拖拽分析树级组件,兼容Chrome、Firefox和IE Edge浏览器。