帮助中心

Appearance

1 大屏设计 ​

大屏中心是通过使用显示设备将复杂多样的业务数据以图形化方式集中展示的信息系统，集数据读取、处理、可视化于一体，有效提升信息传达效率和决策支持能力。

1.1 流程图 ​

image.png

1.2 使用分类 ​

按大屏日常使用场景，分为数据看板类、驾驶舱类。
数据看板类：适用于简单的数据展示环境，例如：车床工位数据展示、生产工序节点数据展示等简单数据应用场景。
驾驶舱类：与数据看板不同，反映了不同业务数据信息综合性展示，对展示效果、数据展示内容、数据关联性要求更丰富，对数据驾驶舱大屏的设计提出更高要求，需进行整体效果设计。

1.3 使用案例 ​

1.3.1 案例公用功能 ​

大屏中心提供大屏可视化设计操作，对于大屏设计工作中，存在一些公用的操作功能，如：“导入模版”、“导出为模版”、“数据源设计”，以下分别对公用功能做详细说明，公用功能如下图：
image.png

  • 导入模版
    可以将其他项目或者工程中大屏设计做为模版导入到本项目中，导入时模版文件为“*.zip”文件，文件中，包括大屏的布局结构、大屏结构数据、图片、大屏数据源等信息。
    image.png
    如果导入的不是大屏zip格式，系统进行校核，并提示错误信息。
    image.png

  • 导出为模版
    可将其他使用“麦杰工业数据管理平台”的大屏项目通过“导出为模版”功能进行导出，以方便大屏的复用。点击“导出为模版”按钮，系统自动弹窗进行下载。
    image.png

  • 数据源设计
    提供对当前大屏中所有组件数据源的管理功能，包括：通用数据集、API两种类型，可以分别在不同分类里面创建多个不同数据源，用于不同业务。
    image.png
    上图中，左侧是数据集目录树，选择点击不同数据集，右侧显示对应数据源SQL语句。如果SQL语句需要调整，可在“运行”按钮下方重新选择数据源及数据表进行SQL重新设计。
    对于数据源设置的详细功能可参照本章《数据集》小节介绍。

  • 预览
    大屏设计结束后，可直接点击“预览”按钮查看整体效果。

  • 应用
    在进行大屏设计过程中，可以通过点击“应用”按钮对设计的内容进行保存，以防止设计的内容丢失。

  • 保存
    功能上为“应用+关闭”操作，如果大屏设计完成，要回到大屏列表页面，点“保存”按钮即可。

1.3.2 数据看板 ​

数据看板适用于简单的数据展示环境，例如：车床工位数据展示、生产工序节点数据展示等数据应用场景。
数据看板中主要使用柱状图、折线图、饼图、表格等直接展示单点业务场景数据，便于直观查看数据变化趋势。
image.png

数据看板大屏中控件使用比较简单，直接在组件列表中选择需要使用的数据展示组件，拖放到右侧大屏画布中，以上图柱状图为例，点击柱状图控件，右侧显示控件相应属性及数据设置标签。
image.png

可以对控件定制属性进行相应设置，包括：标题、基础属性、X轴、Y轴、柱状图数据、数据处理等信息。
点击“数据”标签，页面显示数据相关的属性信息，包括：数据来源、数据刷新间隔、X轴、Y轴、数据显示别名信息、数据操作（导入（json/txt）：可对下载的数据进行编辑后再导入。下载：下载静态数据，可对数据进行编辑，用于制作demo演示）。
数据来源：包括静态数据、数据集。
静态数据主要用于页面demo数据展示，可进行下载/导入操作来维护处理数据。
数据集：可对控件数据进行关联设置，具体操作细节可参考本章节数据集小节内容。
显示如下图：
image.png

数据联动：用于两个控件的关联操作，需要两个控件的数据集存在有关联的动态参数，数据联动时通过相应设置的参数进行关联操作。
以下用两个控件进行关联设置。
image.png

第一个控件，选中后点击设置数据来源，在数据集中选择“通用数据集/query_person”（数据来源需要先到“数据源设计”中进行设计，参考“数据源设计”功能。）进行数据集设置（如上图）。数据集中SQL参数设置。
image.png

第二个控件设置操作如下图：
image.png
设置完成后，进行预览可查看设置效果，右侧控件未点击前。
image.png
点击右侧控件第一个坐标轴数据，左侧控件进行相应关联。
image.png

页面中其它控件的数据设置使用与上述一样，控件间的数据的关联，需要通过“数据联动”进行设置来完成。

1.3.3 驾驶舱 ​

数据驾驶舱与数据看板不同，反映了不同业务数据信息综合性展示，对展示效果、数据展示内容、数据关联性要求更丰富，由此对数据驾驶舱大屏的设计会提出更高要求。
以下用一个燃机数据监测中心为例，整体效果如下图：
image.png

驾驶舱整体效果设计需要有设计元素进行支撑，包括：整体效果图、单个图形元素（背景图、标题图、主题图、单个小图等）、字体、颜色要求等。
大屏中各组件数据设置方式与数据看板中数据设置方法一样。
驾驶舱大屏涉及到页面的跳转，页面间的跳转通过控件的属性“大屏切换”进行设置。
image.png

1.4 添加数据源 ​

1.4.1 数据源类型选择 ​

在左侧的菜单栏中找到【系统配置】-> 【外部数据源配置】。
打开的列表页面中点击【新增】按钮，在弹框中选择自己需要的数据源类型。点击【开始创建】。 !image.png

1.4.2 数据源信息 ​

打开的页面即为数据源信息配置页面，输入连接数据源需要的基本信息，点击【确定】即可完成创建。
如不确定连接信息是否正确，可使用【连接测试】功能检查数据源是否可以连接。
image.png

1.5 创建大屏 ​

在左侧的菜单栏中找到【大屏中心】->【大屏设计】。
打开的列表页面中点击【新增】按钮，在打开的页面中输入大屏基本信息，点击【确定】即可。 !image.png

1.6 设计大屏 ​

大屏创建完成后会自动跳转至大屏列表页面，点击列表数据右侧的【设计】按钮即可打开大屏设计器进行大屏设计。
下面着重介绍大屏设计器中的常用功能。

1.6.1 大屏设计器介绍 ​

image.png
大屏设计器由四个模块组成。

  1. 大屏组件
  2. 组件图层
  3. 大屏设计器
  4. 属性面板

1.6.2 大屏组件 ​

  • 含义：大屏组件是构成大屏展示内容的基本元素，是用户与数据进行交互和展示的载体，涵盖了各种图表、图形、文本框、按钮等。
  • 功能- 数据展示：不同类型的图表组件，如柱状图、折线图、饼图等，可将数据以直观的可视化形式呈现，帮助用户快速理解数据的趋势、分布和关系。
  • 交互操作：按钮组件可用于触发特定操作，如切换页面、筛选数据、展开详细信息等，增强用户与大屏的交互性。
  • 信息呈现：文本框组件用于展示标题、注释、说明性文字等，使大屏内容更完整、易懂。
  • 特点- 丰富多样：为满足不同的展示需求，大屏组件具有多种类型和样式，用户可根据实际情况选择合适的组件来展示数据和信息。
  • 可定制化：大多数组件支持自定义设置，包括颜色、尺寸、样式、数据绑定等，用户能根据自身喜好和业务需求进行个性化配置。

大屏组件目前分为五类：图表、信息、列表、小组件、多媒体。

  1. 图表组件
    图表组件包括：柱状图、折线图、饼图、地图、更多。
  • 柱状图
    分为6种类型：柱状图、横行柱状图、3D柱状图、类电池柱状图、柱状图&折线图、双Y轴柱状图。
    image.png
    组件拖入画布后，需要设置组件的属性及数据，通过右侧的定制、数据、事件标签进行设置。
    image.png

可以对控件定制属性进行相应设置，包括：标题、基础属性、X轴、Y轴、柱状图数据、数据处理等信息。
点击“数据”标签，页面显示数据相关的属性信息，包括：数据来源、X轴、Y轴、数据显示别名信息、数据操作（导入（json/txt）：可对下载的数据进行编辑后再导入。下载：下载静态数据，可对数据进行编辑，用于制作demo演示）。
数据来源：包括静态数据、数据集、自定义api。
静态数据主要用于页面demo数据展示，可进行下载/导入操作来维护处理数据。
数据集：可对控件数据进行关联设置，具体操作细节可参考本章节数据集小节内容。
自定义API：通过api接口可调用其他接口数据，具体操作可参考本章节自定义api小节内容。
显示如下图：
image.png

数据联动：用于两个控件的关联操作，需要两个控件的数据集存在有关联的动态参数，数据联动时通过相应设置的参数进行关联操作。

  • 折线图
    画布展示如下图，属性及数据设置与柱状图类似，参考柱状图进行设置。
    image.png

  • 饼图
    分为4种类型：饼图、圆环图、玫瑰图、渐变图。属性与数据设置与柱状图类似，参考柱状图进行设置。
    image.png

  • 更多
    更多分类里面包含了：词云、水球图、仪表盘、漏斗图、雷达图、进度条。属性与数据设置与柱状图类似，参考柱状图进行设置。
    image.png

  1. 信息组件
    分为文本、控件、更多三种类型。
  • 文本
    文本分为：当前时间、弹幕文字、普通文字、动态文本、激变文字、超链接。文本属性设置操作比较简便，可点击组件后，在右侧进行组件属性设置。
    image.png
  • 控件
    控件分为：时间选择器、输入框、按钮组、tab选择、弹出框列表。文本属性设置操作比较简便，可点击组件后，在右侧进行组件属性及数据设置。
  • 更多
    可以在大屏中嵌入远程网页信息，要确保大屏中心与远程网页使用完全一致的访问协议（比如都使用http,或者都使用https）。

  1. 列表组件
    列表组件包含：滚动排名列表、基础分页表格、轮播列表、信息介绍，属性及数据设置参考前面小节进行设置。

  2. 小组件
    小组件中包括：边框、装饰、更多三类，小组件主要用于页面的装饰，小组件属性设置操作比较简便。
    image.png

1.6.3 组件图层 ​

  • 含义：组件图层可以理解为一个分层管理的机制，用于组织和管理大屏中各个组件的显示顺序和堆叠关系。
  • 功能- 控制显示顺序：通过调整组件所在的图层顺序，用户可以决定哪些组件显示在前面，哪些在后面，避免组件之间的遮挡，确保重要信息优先展示。
  • 实现复杂布局：利用图层，可将不同组件放置在不同图层上，通过对各图层的位置、透明度等属性进行设置，实现复杂的页面布局和效果，如创建透明遮罩层、悬浮层等。
  • 特点- 可视化操作：用户可以在设计界面中直观地看到各个图层及其包含的组件，通过简单的拖拽、排序等操作即可完成图层和组件的管理。
  • 灵活调整：在大屏设计过程中，可随时根据需要新增、删除图层或调整组件在图层中的位置，具有很高的灵活性。

1.6.4 大屏设计器 ​

  • 含义：大屏设计器是整个工具的核心模块，是用户进行大屏设计的主要操作平台，它提供了一个可视化的设计环境，让用户能够通过直观的操作来创建和编辑大屏页面。
  • 功能- 页面布局：用户可通过拖拽、拉伸等操作自由调整组件的位置和大小，以适应不同的大屏尺寸和分辨率要求，实现理想的页面布局效果。
  • 数据绑定：连接到各种数据源，如数据库、API 接口等，将数据与相应的组件进行绑定，使组件能够实时展示最新的数据信息。
  • 交互设计：提供交互设计功能，用户可设置组件的交互行为，如鼠标悬停、点击、滑动等事件触发的效果，为大屏添加交互逻辑，提升用户体验。
  • 预览与发布：支持实时预览大屏效果，方便用户及时查看设计成果并进行调整。完成设计后，可将大屏发布到指定的平台或服务器上，供用户访问和使用。
  • 特点- 所见即所得：用户在设计器中进行的操作和设置，能够立即在预览窗口中看到效果，无需复杂的代码编写和编译过程，降低了大屏设计的门槛。
  • 集成化操作：将页面布局、数据绑定、交互设计等多种功能集成在一个平台上，用户无需在多个工具之间切换，提高了设计效率。

1.6.5 属性面板 ​

  • 含义：属性面板是用于显示和设置所选组件属性的模块，它与大屏组件紧密相关，为用户提供了对组件进行详细配置的界面。
  • 功能- 组件属性设置：针对不同类型的组件，属性面板会显示相应的可配置属性，如图表组件的颜色、数据格式、坐标轴标签，文本框组件的字体、字号、颜色、对齐方式等，用户可根据需求进行精确设置。
  • 样式调整：用户可通过属性面板调整组件的外观样式，如边框样式、阴影效果、透明度等，使组件更符合整体设计风格。
  • 交互属性配置：对于具有交互功能的组件，属性面板提供了设置交互属性的选项，如按钮的点击事件、链接跳转目标等，实现组件的交互逻辑配置。
  • 特点- 动态更新：当用户在大屏设计界面中选择不同的组件时，属性面板会实时更新，显示当前所选组件的属性信息，方便用户进行针对性的设置。
  • 精细化控制：属性面板提供了丰富的属性选项，用户可以对组件的各个方面进行精细化控制，实现个性化的设计效果。
  1. 大屏属性面板
    image.png
  • 设计器的宽
  • 设计器的高
  • 背景图片,背景色
  • 适配方式
    铺满: 会按照渲染区域进行缩放,大屏内可能会进行拉伸变形。
    自适应等比缩放: 会按照渲染区域进行等比缩放,大屏可能不会铺满整个区域,但大屏内组件不会进行 拉伸变形。
    不缩放: 按照设计的宽,高进行渲染。
  • 主题颜色
    给图表进行的统一设计的主题色,支持自定义主题色
  1. 组件属性面板

  • 基础属性
    image.png

  • 宽: 组件的宽

  • 高: 组件的高

  • 左: 组件距离设计器左边的距离

  • 上: 组件距离设计器顶部的距离

  • 快速对其方式：
    左边对齐
    顶部对齐
    右边对齐
    底部对齐
    水平居中对齐
    垂直居中对齐

  • 组件独有属性
    image.png

  • 定制
    控制组件显示的属性控制
    大屏切换image.png
    可以进行不同大屏的切换,并在切换时向对应组件传递参数。

  • 数据
    静态属性image.png
    支持静态数据模版下载和上传。
    通用数据集
    image.png

数据需要进行数据集设计
根据数据集设计的数据进行数据绑定
API接口
image.png

直接对接接口API
根据接口的返回数据进行解析出数据列,然后进行数据绑定
数据联动

  • 事件
    组件能支持自定义js
    image.png

1.7 数据源设计 ​

在上方的大屏功能中，在页面上方的按钮区域选择点击【数据源设计】按钮，弹出数据源设置组件，左侧为通用数据集与API接口设置，右侧为对应数据集设置界面。
image.png

1.7.1 通用数据集 ​

左侧为数据源，中间上方为sql编辑区，中间下方为数据展示区，右侧为DeepSeek-R1协助区域，中间顶部有SQL设计按钮操作和常见SQL公式参考。
在左侧选择数据源和数据库，可以查看数据库下所有表结构信息。
在中间的sql编辑区写入对应的查询sql。

  • sql编辑支持动态参数功能
    可在sql中输入name用以动态替换sql中的查询参数。sql编辑还支持使用标签，完成查询字段的动态替换功能。
    sql编辑器的下方为动态参数设置区域，可以为sql中输入的动态参数添加默认值，此默认值也将同时展示在报表的渲染结果中。
  • 右侧为DeepSeek-R1协助区域
    会将左侧选择的表结合输入的查询逻辑进行思考帮助回答。
  • sql设计模式
    中间sql设计器,中间底部SQL的一些参数配置,右侧设计器生成的SQL语句。
    需左侧表加载完表结构后才可以拖入到设计器中。
    点击确定会将生成的sql编辑的区域。
    image.png
    image.png

1.7.2 API接口 ​

在数据源设置页面，选择左侧的API，点击设计API按钮,弹出自定义API设计组件。如下图：
image.png

  • 名称
    api接口名称。
  • 请求地址
    接口请求地址。
  • 请求方式
    请求接口的方式,目前支持GET和POST。
  • 动态参数
    接口请求参数,最后请求时构造成key/value的形式作为接口的参数。
  • 返回值处理
    由于接口的返回值结构多样性，所以这里需要对返回值进行处理,要使用js的语法进行数据处理，返回符合规范的数据结构。
    image.png

1.8 大屏发布 ​

在大屏列表页面中，选择需要发布的大屏，点击“发布”按钮即可打开大屏发布页面。
image.png

大屏发布由两个部分组成。
大屏权限设置。可以选择允许查看此大屏的角色及角色拥有的权限范围。
image.png

选择一个已有的应用发布，或创建一个新的应用发布。
image.png

刷新页面重新获取菜单栏，即可查看发布的大屏。操作【内容区域全屏】可以让大屏进行全屏展示。
image.png

全屏如下图所示：
image.png