智能门户实现可视化拖拽搭建门户页面的方案

导语

随着数字化和智能化的快速发展，智能门户作为一种一站式智能化统一平台，在各行业和领域得到广泛应用。智能门户结合了数字技术、行业理解和实践经验，旨在打破技术壁垒和系统数据之间的割裂感。它能够实现政府和企业内部信息的流通联动，确保数据的安全性，并为提升效率、降低IT成本、加快数智化进程提供支持。

本期文章小编给大家讲解一下智能门户是如何实现可视化拖拽搭建门户页面——以道一云智能门户（七星Portal）为例。

道一云智能门户（七星Portal）是集“自定义门户+综合管理后台+OA场景轻应用”为一体的综合平台型产品，助力客户打造企业多端个性化工作台。通过搭配定制化的业务模块及多样化组件满足自定义配置、个性化运营及丰富多样化场景交互需求，快速搭建千人千面工作台，提升业务场景交互和用户体验，同时通过统一待办聚合各应用系统的待办与信息，业务及应用统一界面展示及统一待办处理，实现跨平台的高效协同，提高办公效率，缩减管理成本，助力企业数字化办公转型。

产品主要优势有以下几点：

1.深度融合腾讯企业微信平台生态

道一云作为腾讯企业微信的深度合作伙伴，产品设计模式与企业微信生态紧密结合，产品能力基于企业微信作为客户端办公入口，鉴权认证、用户登录、通讯录管理等基础能力均以企业微信底层能力来构建，快捷高效实现应用生态能力拓展与运营。通过无缝与企业微信融合集成，有效连接组织内外部用户，以随时随地通畅地进行业务交互流动为产品理念，工作将更加轻松高效，提升办公效率，并降低沟通成本。

2.适应大中型组织企业的复杂组织结构

智能门户（七星Portal）基于企业组织架构设计用户与权限模型，支持分级分权下派管理，也支持上级组织监管下级组织数据权限，不同维度地满足各类中大型企业内部复杂的权限业务和管理场景，确保可真正的落地实施与应用。并且前台业务应用与管理后台帐号体系分离，不仅架构上解耦，还可以通过换绑成员就可满足“临时换岗”等各类特殊场景。

3.构建以用户为中心的统一门户满足企业千人千面的诉求

智能门户（七星Portal）通过设置不同门户页面的可见权限，灵活适应不同业务的门户需求，例如可以按企业内部组织单元，各组织单元搭建分配自己的个性化门户；也可以按企业内业务线条，按岗位角色设置门户；还可以搭建统一门户后用户各人按使用习惯自行改造门户内的部分组件设置，达到千人千面的展示效果。

技术方案

移动端门户页面：
采用拖拽插件，跨多个容器对元素进行排序。每个容器都可以维护自己的一组规则，使得基础组件和自定义组件能够灵活的拖拽到画布中。

代码里分为可拖拽的组件模块区域、页面画布区域：

效果如下：

PC端门户页面：
使用插件vue-grid-layout，可以将页面画布划分为珊格，能够根据页面的宽度来计算组件的宽度，使页面兼容不同大小屏幕下的展示，避免布局的错乱。

代码里分为可拖拽的组件模块区域、页面画布区域：

效果如下：

画布布局技术栈文档vue-grid-layout

本文章介绍了道一云智能门户（七星Portal）的部分功能和优势，以及实现可视化拖拽门户页设计器的相关技术方案，接下来还会陆续带来更多智能门户和低代码结合的内容，敬请期待，也希望感兴趣的大家多多关注。

作者介绍：
道一云 ，成立于2004年，是中国低代码领域的领导厂商、腾讯战略投资企业、腾讯生态核心合作伙伴。拥有自主知识产权管理软件产品百余项，涵盖数字化应用构建低代码平台-七巧、全场景智能业务分析BI-七析、千人千面、数智化办公企业级门户-七星以及30多款开箱即用的场景应用。

欢迎关注：
公众号：道一云低代码（do1info）
官网： https://www.do1.com.cn/