开源框架模块详解｜码云开源EIP低代码平台
仓库地址：https://gitee.com/sunzewei/eip_lowcode

摘要

大屏设计是EIP低代码平台中用于实现数据可视化展示的重要模块。它支持通过拖拽式配置，将业务系统中的数据、图表、表格、地图、指标卡片等内容组合成可视化大屏，适用于指挥中心、运营看板、项目总览、数据驾驶舱、企业门户首页等场景。

一、功能概述

在企业数字化系统中，很多业务数据分散在各个表单和视图中，管理人员很难快速获得全局视角。大屏设计模块就是为了解决这个问题：将关键数据集中展示，形成一目了然的业务看板。

传统开发模式下，做一个大屏通常需要前端页面开发、接口开发、数据适配、样式调整，周期长、成本高。而在EIP低代码平台中，管理员可以直接在可视化设计器中配置数据源、拖拽组件、调整样式，快速完成大屏页面搭建。

访问路径：系统管理 → 自动化构建 / 大屏设计 → 进入大屏设计模块

---

二、大屏设计的核心能力

1. 可视化拖拽设计

大屏设计模块提供类似低代码页面编辑器的操作体验：
左侧是组件列表，中间是画布区域，右侧是属性配置面板。管理员可以直接将图表、文本、表格、指标卡、图片、地图等组件拖入画布，并调整位置、大小、颜色和样式。

2. 多组件支持

常见支持组件包括：

组件类型	典型用途
指标卡片	展示关键数字，如项目总数、客户数量、合同金额
折线图	展示趋势变化，如销售额、回款趋势、进度变化
柱状图	展示对比数据，如各区域项目数量、部门完成情况
饼图 / 环形图	展示占比关系，如客户分类、项目状态占比
数据表格	展示明细列表，如待办事项、最新单据、异常数据
地图组件	展示点位分布，如客户分布、项目地点、巡检位置
文本组件	展示标题、说明、公告信息
图片组件	展示Logo、背景图、业务示意图
iframe / 链接组件	集成其他系统页面或外部资源

3. 数据源绑定

大屏组件不是静态展示，而是可以绑定业务数据。
支持选择不同工作表作为数据源，并通过筛选条件控制展示范围。

例如：

• 项目总数：绑定项目表，统计全部项目数量
• 合同金额：绑定合同表，汇总合同金额字段
• 待办事项：绑定任务表，筛选状态为待办的数据
• 区域分布：绑定客户表，按地区字段分组统计

4. 样式与布局配置

右侧属性面板支持调整组件外观，包括：

• 标题文字
• 字体大小
• 颜色主题
• 背景样式
• 边框圆角
• 阴影效果
• 图表配色
• 数据标签显示
• 图例位置
• 卡片尺寸

通过这些配置，可以快速统一大屏风格，使其适配企业门户、深色大屏、浅色报表、运营驾驶舱等不同展示场景。

---

三、大屏设计典型使用流程

第一步：创建大屏页面

进入大屏设计模块，点击新增大屏，填写大屏名称、选择布局模板或空白画布。

建议根据使用场景选择模板：

• 企业首页：适合展示欢迎信息、公告、关键指标
• 数据驾驶舱：适合展示核心指标、趋势图、分布图
• 项目总览：适合展示项目数量、进度、状态统计
• 指挥大屏：适合展示地图、实时数据、预警信息

第二步：添加组件

从左侧组件库中拖拽需要的组件到画布中。

常用组合建议：

场景	推荐组件组合
企业门户首页	欢迎文本、公告栏、待办表格、快捷入口
项目管理大屏	项目总数卡片、项目状态环形图、项目列表
销售运营大屏	金额指标卡、趋势折线图、区域柱状图
客户管理大屏	客户总数、客户分类占比、地图分布、客户列表
巡检运维大屏	地图点位、异常数量、待办任务、最近记录

第三步：绑定数据源

选择组件后，在右侧配置数据源。

例如配置一个“项目总数”指标卡：

1. 选择工作表：项目表
2. 选择统计字段：项目ID或项目名称
3. 选择统计方式：计数
4. 添加筛选条件：项目状态不等于已删除
5. 设置展示标题：项目总数

保存后，组件会自动读取业务数据并展示。

第四步：调整样式

根据页面风格调整颜色、字体、背景和布局。

如果是深色大屏，建议使用：

• 深蓝 / 黑灰背景
• 高亮蓝绿数据色
• 发光边框
• 半透明卡片
• 清晰标题层级

如果是企业门户首页，建议使用：

• 浅色背景
• 简洁卡片
• 统一图标
• 柔和配色
• 信息分区清晰

第五步：预览与发布

设计完成后点击预览，查看大屏在不同屏幕下的展示效果。
确认无误后发布使用。

---

四、大屏设计适用业务场景

1. 企业门户首页

适合展示系统欢迎语、公告通知、待办事项、常用功能入口、关键业务指标。

2. 数据驾驶舱

适合展示企业经营数据、销售数据、项目数据、财务数据、客户数据等全局概览。

3. 项目管理大屏

适合展示项目总数、进行中项目、已完成项目、延期项目、项目进度统计。

4. 客户运营大屏

适合展示客户数量、客户分类、区域分布、跟进状态、签约情况。

5. 指挥中心大屏

适合展示地图点位、实时任务、异常预警、巡检记录、设备状态。

6. 移动端 / 首页工作台

也可以作为系统首页或工作台入口，让用户登录后快速看到自己的待办、通知和常用数据。

---

五、模块核心价值

1. 降低可视化开发成本

传统大屏开发需要前端、后端、接口、样式等多角色配合。
通过低代码大屏设计，管理员可以直接配置数据和页面，大幅降低开发成本。

2. 业务数据集中展示

大屏设计可以把分散在不同表单中的数据集中展示，帮助管理者快速了解业务全局状态。

3. 灵活适配多种场景

同一个平台能力可以适配企业门户、项目看板、运营驾驶舱、指挥大屏等多种业务场景。

4. 无需编码即可完成页面调整

业务需求变化时，可以直接修改组件、数据源和样式，不需要重新开发页面。

5. 提升系统使用体验

相比纯表单列表和数据表格，大屏设计更适合做首页入口、数据总览和领导查看页面，系统视觉体验更好。

---

六、总结

大屏设计是EIP低代码平台中非常实用的可视化能力。
它不是简单的页面装饰，而是将业务数据、组件布局、样式表达和用户体验结合起来，帮助企业快速搭建数据看板和系统首页。

通过大屏设计模块，管理员可以：

• 快速创建企业门户首页
• 搭建数据驾驶舱
• 展示项目、客户、财务、巡检等业务数据
• 提升系统首页视觉效果
• 降低可视化页面开发成本
• 灵活应对业务变化