CN115469869B - 一种应用界面数据可视化编辑开发工作方法 - Google Patents

Abstract

本发明提出了一种应用界面数据可视化编辑开发工作方法，包括如下步骤：S1，获取应用界面的运行参数，对于能够进行可视化展示的应用界面进行图形化构建选取对应组件的过程；S2，图形化构建选取之后，对构建选取的组件数据的进行组件参数配置，配置过程中进行组合策略推荐；S3，在组合策略推荐的过程中通过计算判断组件在应用界面的显示评估值，根据设定的条件进行可视化界面参数调整，完成应用界面编辑展示操作。

Description

一种应用界面数据可视化编辑开发工作方法

技术领域

本发明涉及软件开发界面领域，尤其涉及一种应用界面数据可视化编辑开发工作方法。

背景技术

传统的数据可视化，都需要通过编码的方式实现。对于前端页面，需要通过编码方式构建可视化界面，集成数据可视化组件，在代码中对页面属性、组件属性、样式、数据源以及组件之间的交互动作进行配置。同样，对于后端来说，需要对各种前端可视化所需的数据接口进行定制化开发，通过编码的方式，构造数据可视化数据源。编码过程复杂，调试周期过长；

热更新是在服务不停机的情况下对软件进行升级的机制。对于传统的数据可视化开发方法来说，由于需要大量编码工作，因此，不具备热更新的能力。停机更新的方式，在一定程度上对用户使用会造成一定的影响。根据系统升级的必要性和紧迫性进行评估，在工作时间还是非工作时间对系统进行升级。

数据可视化系统中，数据来源千变万化。随着业务的发展，会对数据来源进行新增或删减。数据源包括；静态数据源和动态数据源，动态数据源又包含：数据库和三方接口。在传统的数据可视化方案中，通过硬编码方式实现数据源绑定，无法对多数据源实现动态适配。

在传统的通过硬编码方式实现的数据可视化方案中，存在大量的对技术人员的依赖，对用户来说，存在很高的无法在短时间内逾越的技术壁垒。用户无法实现对现有系统的自主可控。因此，面对模糊多变，时间紧任务重的业务需求，传统方式显得力不从心，成本高昂，对原有系统的改造还存在系统性的技术风险。在当前的时代背景下，用户的需求往往具备易变、不确定、复杂、模糊等特性。用户迫切希望数据可视化系统能够从容应对现有复杂多变的业务需求，希望有一种自主可控的数据可视化系统可以助力信息化建设的提质增效，真正实现自主可控。

发明内容

本发明旨在至少解决现有技术中存在的技术问题，特别创新地提出了一种应用界面数据可视化编辑开发工作方法。

为了实现本发明的上述目的，本发明提供了一种应用界面数据可视化编辑开发工作方法，包括如下步骤：

S1，获取应用界面的运行参数，对于能够进行可视化展示的应用界面进行图形化构建选取对应组件的过程；

S2，图形化构建选取之后，对构建选取的组件数据进行组件参数配置，配置过程中进行组合策略推荐；

S3，在组合策略推荐的过程中通过计算判断组件在应用界面的显示占用度，根据设定的条件进行可视化界面参数调整，完成应用界面编辑展示操作。

根据上述技术方案优选的，所述S1包括：

S1-1，对应用界面获取运行参数，根据应用界面的展示区域对可视化布局进行组件调用，全部组件形成组件数据库，根据应用界面的业务内容，对组件进行扩展选择；

S1-2，对组件选择过程中，对选定的组件放入画布区域，在画布区中对组件位置、大小以拖拉拽的方式进行设置；

S1-3，在画布区域设置工具栏区、页面绘制区、图层区；对选中的组件根据相应的功能通过工具栏区的功能属性进行功能调整，对该组件定位相应的坐标(x,y)，在页面绘制区根据画布的缩放比例，自适应变更坐标标尺间隔；如果为若干组件形成多图层重叠的组件，调整最上层图形完毕之后，依次调节被堆叠的下层组件。

根据上述技术方案优选的，所述S2包括：

S2-1，选择的组件在应用界面进行页面配置，设置页面的初始界面，生成初始界面后对界面进行上传操作，基于当前页面的预览效果，上传初始界面作为页面的封面；

S2-2，对应用界面的表头进行设置，从而控制表头的隐藏与显示，然后对文字显示进行设置，包含溢出隐藏与自动换行，同时针对不同的组件调整为相同的行高、大小以及粗细；对于文字位置、字体、间距和表头背景颜色设置；

S2-3，在应用界面加入表格时，需要进行边框设置，同时显示的表格中需要通过控制表格边框隐藏与显示功能，完成表格显示的动态属性、竖线显示、边框颜色、边框粗细和外层边框显示设置。

根据上述技术方案优选的，所述S2还包括：

S2-4，对应用界面组件进行构建后，如果设置分页属性，在显示过程中，控制分页栏隐藏与显示，在应用界面设置的组件中呈现的页数显示、页面跳转显示、每页数据切换、初始数据条数设置；

S2-5，对应用界面的动态设置，根据应用界面中组件的属性判断是否启用动态设置；根据应用界面中组件的属性选择动态类型；

S2-6，通过应用界面组件配置的属性进行定时更新数据；在设置扩展工具栏时，实时显示和树表移动显示同时启动，在应用界面中进行组件合并设置：根据组件的属性如果产生行属性相同情况，则进行行合并，如果产生列属性相同情况，则进行列合并；

S2-7，对应用界面的组件根据配置的条件搜索表单选择组件的样式，设置的条件为字体大小、控件尺寸、标签文本色、空间背景色、空间文本色、空间边框色设置；搜索按钮、按钮图标、按钮背景色、按钮文本设置；重置按钮，设置搜索表单重置。

根据上述技术方案优选的，在组件组合策略推荐过程中，需要进行组件数据源的静态配置和动态配置；

S2-A，应用界面的组件配置在静态数据区域时，录入满足json规范的静态数据；对字段配置：字段配置完成后执行对齐指令，判断所设置的列文本对齐方式，包括左对齐、居中对齐、右对齐三种方式；对齐之后执行提示指令，设置列提示信息；自定义模板，如果应用界面的组件之间对齐完成，则对组件之间间距进行操作，通过上移、下移、删除多余边框进行组件之间的排列调整；

S2-B，应用界面的组件配置中静态数据配置完成后，通过动态数据配置完成组件之间的组合和调整，根据组件的数据视图，进行组件配置；设置三方接口的数据配置过程；对于组件的请求方式使用GET、POST指令；在组件的接口路径选择组件视图的数据来源，将对应的组件进行属性匹配；如果应用界面的组件在同一页面无法完全显示，判断执行分页指令，控制接口请求数据，对两页组件内容进行配置，每页的组件数量，控制每页显示组件的数量，并对每页的组件参数进行配置，配置参数名、含义、默认值、条件搜索、权限、控件类型、空间配置；

S2-C，对每个组件进行配置数据重构，提供自定义脚本入口，将组件配置的相关数据传入脚本，根据脚本的执行逻辑对组件配置数据进行重构处理，其中对组件字段配置，提供字段获取功能；树形数据开关、关联字段选择、多级表头开关、复选列开关配置；支持配置字段名、列标题、列宽、合计列、合计列显示、列显示开关、数值精度、文本颜色、对齐方式、提示、自定义模板配置。

根据上述技术方案优选的，所述S3包括：

S3-1，组件配置中对每一个组件的边框进行特征点的边框识别，通过边框识别对每个组件进行应用界面的像素分配；根据每个组件的特征点估值进行组件编辑；

其中S_xi为组件在X轴方向的特征点估值，x_i为组件X轴起始点任意像素，m_i为组件在x轴的像素截止点，i为任意正整数，n为应用界面像素最大值序号；

其中S_yi为组件在Y轴方向的特征点估值，y_i为组件Y轴起始点任意像素，k_i为组件在Y轴的像素截止点。

根据上述技术方案优选的，所述S3还包括：

S3-2，进行应用界面组件编辑时，根据X轴和Y轴方向特征点估值，进行组件占用度计算，如果占用度在应用界面中的数值变大，则将该组件排列在高优先级，在应用界面的首页显示，依次计算相应组件的占用度，根据计算数值从大到小排列；

占用度计算为：

其中

为特征点估值面积，M_j为组件编辑中第j个应用界面像素的大小特征；λ为组件编辑中占有像素的调节阈值，μ_j为组件编辑中第j个应用界面像素的匹配度，η_j为组件编辑中第j个应用界面的定制像素预估参数。

根据上述技术方案优选的，所述S3还包括：

S3-3，对于占用度的计算，通过下述公式条件判断应用界面所耗费的像素比例，在该比例范围内进行组件编辑能够符合应用界面的综合定制要求，从而输出预览效果；

H为应用界面的展示比例；β为组件平均像素值；V为组件像素占用系数。

综上所述，由于采用了上述技术方案，本发明的有益效果是：

通过此发明创造，为数据可视化系统带来了如下优势：

通过本发明创造，能将不可见的数据转化为可见的图形符号，能将错综复杂、看起来没法解释和关联的数据，建立起联系和关联，发现规律和特征，获得商业价值。使用图表来总结复杂的数据，这种方式也使业务人员能够更快地理解和处理他们的信息。按照本发明特有的方式构建业务应用和数据可视化系统，在交付过程中，可以灵活应对客户需求的变更并及时做出响应。可以有效减少系统缺陷，企业收集到的系统用户行为的数据，通过使用大数据可视化来监控关键指标，及时发现问题第一时间做出应对。通过可视化技术展示各个平台的资源利用、任务成功率、实时数据量等。企业领导可以更容易发现各种大数据集的市场变化和趋势。数据可视化的主要好处是它及时带来了风险变化。交互式数据通过模型计算能够对界面布局起到更加合理的推荐作用。

通过可视化的设计方式实现数据的渲染，是用户体验最好、最直观的实现的方式。用户在设计过程中所见及所得，可以根据页面实时效果对页面进行灵活调整。传统的数据可视化方案并未提供可视化设计，用户需要通过开发、配置、发布、预览等一些列环节，才能看到相关页面的设计效果。

本发明的附加方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。

附图说明

本发明的上述和/或附加的方面和优点从结合下面附图对实施例的描述中将变得明显和容易理解，其中：

图1是本发明总体示意图；

图2是本发明实施效果图；

图3是本发明另一实施效果图；

图4是本发明另一实施效果图；

图5是本发明另一实施效果图；

图6是本发明工作流程图。

具体实施方式

下面详细描述本发明的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本发明，而不能理解为对本发明的限制。

如图1至图6所示，本发明公开一种应用界面数据可视化编辑开发工作方法，包括如下步骤：

S1，获取应用界面的运行参数，对于能够进行可视化展示的应用界面进行图形化构建选取对应组件的过程；

S2，图形化构建选取之后，对构建选取的组件数据进行组件参数配置，配置过程中进行组合策略推荐；

S3，在组合策略推荐的过程中通过计算判断组件在应用界面的显示占用度，根据设定的条件进行可视化界面参数调整，完成应用界面编辑展示操作。

根据上述技术方案优选的，所述S1包括：

S1-1，对应用界面获取运行参数，根据应用界面的展示区域对可视化布局进行组件调用，全部组件形成组件数据库，根据应用界面的业务内容，对组件进行扩展选择；

S1-2，对组件选择过程中，对选定的组件放入画布区域，在画布区中对组件位置、大小以拖拉拽的方式进行设置；

S1-3，在画布区域设置工具栏区、页面绘制区、图层区；对选中的组件根据相应的功能通过工具栏区的功能属性进行功能调整，对该组件定位相应的坐标(x,y)，在页面绘制区根据画布的缩放比例，自适应变更坐标标尺间隔；如果为若干组件形成多图层重叠的组件，调整最上层图形完毕之后，依次调节被堆叠的下层组件。

根据上述技术方案优选的，所述S2包括：

S2-1，选择的组件在应用界面进行页面配置，设置页面的初始界面，生成初始界面后对界面进行上传操作，基于当前页面的预览效果，上传初始界面作为页面的封面；

S2-2，对应用界面的表头进行设置，从而控制表头的隐藏与显示，然后对文字显示进行设置，包含溢出隐藏与自动换行，同时针对不同的组件调整为相同的行高、大小以及粗细；对于文字位置、字体、间距和表头背景颜色设置；

S2-3，在应用界面加入表格时，需要进行边框设置，同时显示的表格中需要通过控制表格边框隐藏与显示功能，完成表格显示的动态属性、竖线显示、边框颜色、边框粗细和外层边框显示设置；

S2-4，对应用界面组件进行构建后，如果设置分页属性，在显示过程中，控制分页栏隐藏与显示，在应用界面设置的组件中呈现的页数显示、页面跳转显示、每页数据切换、初始数据条数设置；

S2-5，对应用界面的动态设置，根据应用界面中组件的属性判断是否启用动态设置；根据应用界面中组件的属性选择动态类型；

S2-6，通过应用界面组件配置的属性进行定时更新数据；在设置扩展工具栏时，实时显示和树表移动显示同时启动，在应用界面中进行组件合并设置：根据组件的属性如果产生行属性相同情况，则进行行合并，如果产生列属性相同情况，则进行列合并；

S2-7，对应用界面的组件根据配置的条件搜索表单选择组件的样式，设置的条件为字体大小、控件尺寸、标签文本色、空间背景色、空间文本色、空间边框色设置；搜索按钮、按钮图标、按钮背景色、按钮文本设置；重置按钮，设置搜索表单重置。

在组件组合策略推荐过程中，需要进行组件数据源的静态配置和动态配置；

S2-A，应用界面的组件配置在静态数据区域时，录入满足json规范的静态数据；对字段配置：字段配置完成后执行对齐指令，判断所设置的列文本对齐方式，包括左对齐、居中对齐、右对齐三种方式；对齐之后执行提示指令，设置列提示信息；自定义模板，如果应用界面的组件之间对齐完成，则对组件之间间距进行操作，通过上移、下移、删除多余边框进行组件之间的排列调整；

S2-B，应用界面的组件配置中静态数据配置完成后，通过动态数据配置完成组件之间的组合和调整，根据组件的数据视图，进行组件配置；设置三方接口的数据配置过程；对于组件的请求方式使用GET、POST指令；在组件的接口路径选择组件视图的数据来源，将对应的组件进行属性匹配；如果应用界面的组件在同一页面无法完全显示，判断执行分页指令，控制接口请求数据，对两页组件内容进行配置，每页的组件数量，控制每页显示组件的数量，并对每页的组件参数进行配置，配置参数名、含义、默认值、条件搜索、权限、控件类型、空间配置；

S2-C，对每个组件进行配置数据重构，提供自定义脚本入口，将组件配置的相关数据传入脚本，根据脚本的执行逻辑对组件配置数据进行重构处理，其中对组件字段配置，提供字段获取功能；树形数据开关、关联字段选择、多级表头开关、复选列开关配置；支持配置字段名、列标题、列宽、合计列、合计列显示、列显示开关、数值精度、文本颜色、对齐方式、提示、自定义模板配置。

聚合方式，聚合字段、聚合方式、数值比例设置。

默认条件，自定义录入条件语句。

排序字段，字段、排序方式设置。

对组件配置数据进行管理，设置操作名称、组件按钮样式、按钮图标、显示提示、类型、遮罩层、弹窗标题、弹窗宽度、弹窗位置、参数/权限配置。

根据上述技术方案优选的，所述S3包括：

S3-1，组件配置中对每一个组件的边框进行特征点的边框识别，通过边框识别对每个组件进行应用界面的像素分配；根据每个组件的特征点估值进行组件编辑；

其中S_xi为组件在X轴方向的特征点估值，x_i为组件X轴起始点任意像素，m_i为组件在x轴的像素截止点，i为任意正整数，n为应用界面像素最大值序号；

其中S_yi为组件在Y轴方向的特征点估值，y_i为组件Y轴起始点任意像素，k_i为组件在Y轴的像素截止点；

S3-2，进行应用界面组件编辑时，根据X轴和Y轴方向特征点估值，进行组件占用度计算，如果占用度在应用界面中的数值变大，则将该组件排列在高优先级，在应用界面的首页显示，依次计算相应组件的占用度，根据计算数值从大到小排列；

占用度计算为：

其中

为特征点估值面积，M_j为组件编辑中第j个应用界面像素的大小特征；λ为组件编辑中占有像素的调节阈值，μ_j为组件编辑中第j个应用界面像素的匹配度，η_j为组件编辑中第j个应用界面的定制像素预估参数；

S3-3，对于占用度的计算，通过下述公式条件判断应用界面所耗费的像素比例，在该比例范围内进行组件编辑能够符合应用界面的综合定制要求，从而输出预览效果；

式中，H为应用界面的展示比例；β为组件平均像素值；V为组件像素占用系数。

本次发明实现了一款数据可视化设计器，设计器总体划为三大区域：

组件区：

组件区位于设计器的最左侧提供页面设计过程中用到的各种组件，组件区可根据实际业务场景，对组件进行无限扩展。

在组件区中，根据组件的使用场景，将组件划分为八个类别：图表组件、数据组件、表单组件、地图组件、天气组件、修饰组件、交互组件、其他组件。

画布区：

画布区位于设计器的中心位置，用户可以从组件区中将组件拖拽至画布区，同时，可以在画布区中对组件位置、大小等以拖拉拽的方式进行设置。

画布区划分为三个子区域：快捷工具栏区、页面绘制区、图层区。各个子区域功能如下：

快捷工具栏位于画布区的最顶部，提供如下功能：左对齐、水平居中、右对齐、顶部对齐、垂直居中、底部对齐、组件复制、设置组件X坐标、设置组件Y坐标、页面比例缩放条、页面比例恢复。

页面绘制区位于画布区的左侧，作为数据可视化设计的核心区域。用户通过拖拉拽的方式，从组件区选中组件拖入绘制区，在绘制区可以灵活调整组件位置、大小，结合配置区对组件属性、样式、数据以及各个组件之间的交互进行配置。在绘制区中设计了坐标体系，可以根据画布的缩放比例，自适应变更坐标标尺间隔，页面缩放小于等于50％时，坐标标尺间隔为100，页面缩放比例大于50％时，坐标标尺间隔为50。

图层区位于画布区的右侧。组件拖入页面绘制区后，将作为一个新的图层，设计器自动给组件对应图层生成授予具有唯一性的图层编号。图层编号的大小决定图层Z坐标，直接影响各个图层的覆盖关系。在同一个区域，图层编号越大的组件图层，Z坐标越大，在绘制区中处于越上层位置，覆盖图层编号较小的组件图层。

配置区：

配置区位于设计器的最右侧，提供了对页面组件的各种配置。包括：页面配置、组件属性配置、组件数据源配置以及组件交互配置。所有配置修改后立即生效，所见即所得。

页面配置

页面配置包括：

背景设置，包括两种背景设置方式：图片、颜色。

缩放模式，包括四种缩放模式：宽度铺满、高度铺满、宽高均铺满、页面实际大小。

高度，设置页面高度，单位：像素。

宽度，设置页面宽度，单位：像素。

参数配置，设置页面参数，用于接收外部参数。

初始化脚本，配置页面初始化时需要执行的脚本。

封面图片，设置页面的封面图片，包括两种方式：生成、上传。生成：基于当前页面的预览效果，自动生成页面封面；上传：上传图片作为页面的封面。

组件属性配置

组件属性配置包括：

位置大小：设置组件的X坐标、Y坐标、宽度、高度。

图层名称：设置组件对应的图层名称。

显示：设置组件的隐藏与显示。

背景设置：设置组件的背景，包括两种形式：1、通过上传图片设置表格背景；2、设置表格背景颜色。

表头设置：显示，控制表头的隐藏与显示；文字显示：包含溢出隐藏与自动换行；最小行高、大小、粗细设置；文字位置、字体、间距设置；表头背景颜色设置。

行设置：文字显示：包含溢出隐藏与自动换行；行高设置；字体大小、粗细、位置、字体、间距配置；行背景颜色、高亮、高亮背景设置。

表格边框设置：显示，控制表格边框隐藏与显示；竖线显示、边框颜色、边框粗细、外层边框显示设置。

分页设置：显示，控制分页栏隐藏与显示；总页数显示、页面跳转显示、每页数据切换、初始数据条数设置；字体颜色、大小设置；整体位置、边框颜色、页码选中颜色设置。

动态设置：是否启用设置；动态类型设置，包括数据滚动和自动翻页；每5秒(行)设置，设置每隔5秒滚动多少行。

定时更新数据：是否启用，配置是否启用定时更新；周期，配置数据更新周期。

扩展工具栏：显示设置；显示类型，包括：一直显示和树表移动显示；背景颜色、工具栏高度、宽度设置；图标大小、颜色、功能组件设置。

合并设置：行合并、列合并

条件搜索表单样式：字体大小、控件尺寸、标签文本色、空间背景色、空间文本色、空间边框色设置；搜索按钮、按钮图标、按钮背景色、按钮文本设置；重置按钮，设置搜索表单重置功能。

组件交互配置

组件交互配置划分为两大区域：触发事件、交互配置。

触发事件配置如下：

触发方式，包括：表格行点击事件、表格双击事件、组件初始化事件设置。

交互配置如下：

交互动作，配置交互动作类型。在本发明中设计了五种交互动作类型：组件联动、跳转、自定义、显示/隐藏、条件重置。各交互动作详细配置如下：

组件联动

联动组件，当前事件需要联动的组件。

参数配置，配置组件之间的传参。组件名称、传入参数、联动对应参数、参数顺序上升、下降、删除配置。

跳转

跳转类型，包括项目内页面和项目外页面。

页面打开方式，包括当前页面打开和新页面打开。

跳转页面，如果跳转类型时项目内页面，通过下拉选项选择项目内页面作为目标跳转页面；如果跳转类型是项目外页面，录入目标跳转页面的URL地址。

自定义

配置自定义条件脚本。

显示/隐藏

控制，配置显示和隐藏。

联动组件，显示与隐藏控制的目标组件。

条件重置

联动组件，条件重置联动的目标组件。

具体实施过程为：组件区位于设计器的最左侧，提供页面设计过程中用到的各种组件，组件区可根据实际业务场景，对组件进行无限扩展。

画布区位于设计器的中心位置，用户可以从组件区中将组件拖拽至画布区，同时，可以在画布区中对组件位置、大小等以拖拉拽的方式进行设置。

配置区位于设计器的最右侧，提供了对页面组件的各种配置。包括：页面配置、组件属性样式、组件数据源、组件交互配置等。所有配置修改后立即生效，所见即所得。

本发明采用特定的数据源方案。组件数据源，按照数据来源划分为两种类型：静态数据源，动态数据源。

静态数据源符合json规范。在静态数据区域，录入满足json规范的静态数据。

字段配置：列显示，控制对应列的隐藏与显示；文本颜色，列文本显示颜色；对齐方式，设置列文本对齐方式，包括左对齐、居中对齐、右对齐三种方式；提示，设置列提示信息；自定义模板，可以自定义设置模板，控制列文本显示；操作栏，包括上移、下移、删除功能。

动态数据源配置

本发明中，有两种动态数据源获取方式：三方接口、数据视图。两种数据源配置方式，存在个性和共性的地方。

在个性方面

通过三方接口配置数据源，需要做如下配置：

请求方式，支持GET、POST两种方式。

接口路径，配置三方接口端点地址。

通过数据视图配置数据源，需要做如下配置：

选择对应数据视图，即可完成数据视图个性配置。

在共性方面，本发明中，动态数据源都支持做如下配置：

是否分页，控制接口请求数据时，是否分页。

每页数量，控制每页显示数据的数量。

参数配置，配置参数名、含义、默认值、条件搜索、权限、控件类型、空间配置。

数据重构，提供自定义脚本入口，可以将相关数据传入脚本，根据脚本的执行逻辑对数据进行重构处理。

字段配置，提供字段获取功能；树形数据开关、关联字段选择、多级表头开关、复选列开关配置；支持配置字段名、列标题、列宽、合计列、合计列显示、列显示开关、数值精度、文本颜色、对齐方式、提示、自定义模板配置。

聚合方式，聚合字段、聚合方式、数值比例设置。

默认条件，自定义录入条件语句。

排序字段，字段、排序方式设置。

操作管理，固定列，包括左边固定和右边固定；列宽，设置通用列宽度；按钮大小，包括默认、中等、小型、超小。字体设置，设置字体大小。操作名称、按钮样式、按钮图标、显示提示、类型、遮罩层、弹窗标题、弹窗宽度、弹窗位置、参数/权限配置。

尽管已经示出和描述了本发明的实施例，本领域的普通技术人员可以理解：在不脱离本发明的原理和宗旨的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由权利要求及其等同物限定。

Claims (4)

1.一种应用界面数据可视化编辑开发工作方法，其特征在于，包括如下步骤：

S1，获取应用界面的运行参数，对于能够进行可视化展示的应用界面进行图形化构建选取对应组件的过程；

S2，图形化构建选取之后，对构建选取的组件数据进行组件参数配置，配置过程中进行组合策略推荐；

在组件组合策略推荐过程中，需要进行组件数据源的静态配置和动态配置；

S2-A，应用界面的组件配置在静态数据区域时，录入满足json规范的静态数据；对字段配置：字段配置完成后执行对齐指令，判断所设置的列文本对齐方式，包括左对齐、居中对齐、右对齐三种方式；对齐之后执行提示指令，设置列提示信息；自定义模板，如果应用界面的组件之间对齐完成，则对组件之间间距进行操作，通过上移、下移、删除多余边框进行组件之间的排列调整；

S2-B，应用界面的组件配置中静态数据配置完成后，通过动态数据配置完成组件之间的组合和调整，根据组件的数据视图，进行组件配置；设置三方接口的数据配置过程；对于组件的请求方式使用GET、POST指令；在组件的接口路径选择组件视图的数据来源，将对应的组件进行属性匹配；如果应用界面的组件在同一页面无法完全显示，判断执行分页指令，控制接口请求数据，对两页组件内容进行配置，每页的组件数量，控制每页显示组件的数量，并对每页的组件参数进行配置，配置参数名、含义、默认值、条件搜索、权限、控件类型、空间配置；

S2-C，对每个组件进行配置数据重构，提供自定义脚本入口，将组件配置的相关数据传入脚本，根据脚本的执行逻辑对组件配置数据进行重构处理，其中对组件字段配置，提供字段获取功能；树形数据开关、关联字段选择、多级表头开关、复选列开关配置；支持配置字段名、列标题、列宽、合计列、合计列显示、列显示开关、数值精度、文本颜色、对齐方式、提示、自定义模板配置；

S3，在组合策略推荐的过程中通过计算判断组件在应用界面的显示占用度，根据设定的条件进行可视化界面参数调整，完成应用界面编辑展示操作；

所述S3包括：

S3-1，组件配置中对每一个组件的边框进行特征点的边框识别，通过边框识别对每个组件进行应用界面的像素分配；根据每个组件的特征点估值进行组件编辑；

其中

为组件在X轴方向的特征点估值，x_i为组件X轴起始点任意像素，m_i为组件在x轴的像素截止点，i为任意正整数，n为应用界面像素最大值序号；

其中

为组件在Y轴方向的特征点估值，y_i为组件Y轴起始点任意像素，k_i为组件在Y轴的像素截止点；

S3-2，进行应用界面组件编辑时，根据X轴和Y轴方向特征点估值，进行组件占用度计算，如果占用度在应用界面中的数值变大，则将该组件排列在高优先级，在应用界面的首页显示，依次计算相应组件的占用度，根据计算数值从大到小排列；

占用度计算为：

其中

为特征点估值面积，M_j为组件编辑中第j个应用界面像素的大小特征；λ为组件编辑中占有像素的调节阈值，μ_j为组件编辑中第j个应用界面像素的匹配度，η_j为组件编辑中第j个应用界面的定制像素预估参数；

S3-3，对于占用度的计算，通过下述公式条件判断应用界面所耗费的像素比例，在该比例范围内进行组件编辑能够符合应用界面的综合定制要求，从而输出预览效果；

H为应用界面的展示比例；β为组件平均像素值；V为组件像素占用系数。

2.根据权利要求1所述的应用界面数据可视化编辑开发工作方法，其特征在于，所述S1包括：

S1-1，对应用界面获取运行参数，根据应用界面的展示区域对可视化布局进行组件调用，全部组件形成组件数据库，根据应用界面的业务内容，对组件进行扩展选择；

S1-2，对组件选择过程中，对选定的组件放入画布区域，在画布区中对组件位置、大小以拖拉拽的方式进行设置；

S1-3，在画布区域设置工具栏区、页面绘制区、图层区；对选中的组件根据相应的功能通过工具栏区的功能属性进行功能调整，对该组件定位相应的坐标(x,y)，在页面绘制区根据画布的缩放比例，自适应变更坐标标尺间隔；如果为若干组件形成多图层重叠的组件，调整最上层图形完毕之后，依次调节被堆叠的下层组件。

3.根据权利要求1所述的应用界面数据可视化编辑开发工作方法，其特征在于，所述S2包括：

S2-1，选择的组件在应用界面进行页面配置，设置页面的初始界面，生成初始界面后对界面进行上传操作，基于当前页面的预览效果，上传初始界面作为页面的封面；

S2-2，对应用界面的表头进行设置，从而控制表头的隐藏与显示，然后对文字显示进行设置，包含溢出隐藏与自动换行，同时针对不同的组件调整为相同的行高、大小以及粗细；对于文字位置、字体、间距和表头背景颜色设置；

S2-3，在应用界面加入表格时，需要进行边框设置，同时显示的表格中需要通过控制表格边框隐藏与显示功能，完成表格显示的动态属性、竖线显示、边框颜色、边框粗细和外层边框显示设置。

4.根据权利要求3所述的应用界面数据可视化编辑开发工作方法，其特征在于，所述S2还包括：

S2-4，对应用界面组件进行构建后，如果设置分页属性，在显示过程中，控制分页栏隐藏与显示，在应用界面设置的组件中呈现的页数显示、页面跳转显示、每页数据切换、初始数据条数设置；

S2-5，对应用界面的动态设置，根据应用界面中组件的属性判断是否启用动态设置；根据应用界面中组件的属性选择动态类型；

S2-6，通过应用界面组件配置的属性进行定时更新数据；在设置扩展工具栏时，实时显示和树表移动显示同时启动，在应用界面中进行组件合并设置：根据组件的属性如果产生行属性相同情况，则进行行合并，如果产生列属性相同情况，则进行列合并；

S2-7，对应用界面的组件根据配置的条件搜索表单选择组件的样式，设置的条件为字体大小、控件尺寸、标签文本色、空间背景色、空间文本色、空间边框色设置；搜索按钮、按钮图标、按钮背景色、按钮文本设置；重置按钮，设置搜索表单重置。

Images