CN115237403A - 一种数据可视化处理***及方法 - Google Patents

Abstract

本发明公开了一种数据可视化处理***及方法，组件代码解析模块，所述组件代码解析模块确保页面表格布局支持***用户管理员调整字段显示列数和合并单元格操作，并针对不同单元格合并方式对组件代码进行解析；代码优化模块，所述代码优化模块针对已经完成配置的页面元素字段摆放和表单布局样式，支持***管理员页面预览功能，并根据配置结果对页面代码进行调整和优化。本发明涉及计算机技术领域，本发明采用动态灵活拖拽表单元素及样式调整，而且可灵活调整元素字段数据类型、获取方式(包含数据统计后数据)，以满足数据填报表单页面快速响应需求变更和新增字段类型的多样化功能,同时也可以节省研发成本提高工作效率。

Description

一种数据可视化处理***及方法

技术领域

本发明涉及计算机技术领域，具体为一种数据可视化处理***及方法。

背景技术

在数据填报方面，传统技术公司目前基本都是使用前端技术如jsp，JavaScript、Jquery或H5等技术来进行开发传统页面表单，页面表单上元素字段(输入框，下拉框、文本域和日期字段)和页面布局样式都是根据实际业务需求进行定制开发的，页面字段和样式颜色都固定，如有业务需求变更都需要研发人员在原有项目代码基础上进行二次定制研发；***用户管理员不能根据业务变更灵活动态对页面元素字段调整和优化。

现有的数据可视化处理***存在较大的缺陷，当业务页面元素字段无法实现联动效果，需要对样式逐个进行修改，后续维护人员的熟悉研究和学习成本很高；同时前端页面经过多次迭代需求版本后，页面代码规则会存在多种前端技术及编码规则和思路，后期代码可读性和维护性很差。

发明内容

本发明的目的在于提供一种数据可视化处理***及方法，以解决上述背景技术中提出的问题。

为了解决上述技术问题，本发明提供如下技术方案：一种数据可视化处理方法，所述方法包括以下步骤：

S1、定义页面字段数据类型组件库，所述页面字段数据类型组件库包括文本输入框、金额输入框、数字输入框、文本域、下拉框、日期输入框、多选框和复选框；

S2、定义页面常用表单的布局样式；并且提供布局样式自定义操作；

S3、针对页面字段数据类型组件中不同组件内的数据内容，采用不同的数据获取方式；

S4、页面表格布局支持***用户管理员调整字段显示列数和合并单元格操作，并针对不同单元格合并方式对组件代码进行解析；

S5、针对已经完成配置的页面元素字段摆放和表单布局样式，支持***管理员页面预览功能，并根据配置结果对页面代码进行调整和优化。

进一步的，所述S2中定义页面常用表单的布局样式为数据库中预制的表单布局样式模板，所述页面常用表单的布局样式模板为多个，且不同的页面常用表单的布局样式模板对应的布局样式存在差异，

每个页面常用表单的布局样式模板由多个单元格构成，每个单元格对应一个页面字段数据类型组件；

本发明在页面常用表单布局样式模板中设置单元格，其目的是为了对表单中定义的组件对应位置区域进行限制，进而实现对表单中定义的组件布局的调整及规划，在代码解析阶段，本发明只对表单布局样式中的组件进行解析，而不对表单布局中的单元格进行解析，进而根据解析后的代码实际生成表单不包含单元格对应的线段。

所述S2中提供布局样式自定义操作包括：对页面布局样式中页面字段数据类型组件中的每种组件对应的个数进行增加及减少，对每个组件页面字段数据类型组件的位置进行修改；

所述布局样式自定义操作还包括对页面常用表单的布局样式模板中的单元格大小进行调整，及对单元格的个数进行增减。

本发明中预制表单布局样式模板，是为了便于用户根据自身喜好或需求进行选择；设置布局样式自定义操作，是考虑到不同用户的需求不同，选用的组件会存在较大的差异，同时组件内的字段信息存在差别，进而对组件占用空间的大小及占用空间的位置会有较大区别；同时，设置自定义操作能够便于用户对表单布局样式进行快速修改，减少了用户对代码的修改时间。

进一步的，所述S3中针对页面字段数据类型组件中不同组件内的数据内容，采用的数据获取方式包括：

(1)针对页面字段数据类型组件中下拉框内的数据内容，配置固定下拉选项内容和通过发起服务URL请求后台服务动态加载下拉框选项内容；

(2)页面上多选框的内容支持配置固定选项内容和通过发起服务URL请求后台服务动态加载多选项框的选项内容；

(3)页面表单列表数据内容支持通过发起服务URL请求后台服务动态加载数据内容。

本发明在组件获取数据的过程中，采用动态加载数据内容的方式，能够使组件内容在显示过程中更有条理，还增加了布局的美观性。

进一步的，所述S4中对单元格内页面字段数据类型组件对应的代码进行解析时，获取组件内的字段信息，识别获取的字段信息中的换行符位置，

当页面字段数据类型组件为文本输入框、金额输入框、数字输入框、文本域、下拉框及日期输入框中的一个时，组件内相应的字段信息为组件内填写内容格式提示信息，将获取的字段信息作为一个整体录入到相应组件的代码中，

当页面字段数据类型组件为多选框或复选框时，组件内相应的字段信息为组件内各个选项的文本信息且不同选项的文本信息通过换行符隔开，以换行符为参照样本对获取的字段信息进行分割，得到换行符个数加1个分割结果，并按顺序逐个将分割结果录入到多选框或复选框中每个选项对应的代码中，一个分割结果对应多选框或复选框中的一个选项；

所述S4中在合并单元格时对组件代码进行解析时，获取合并前的多个单元格中分别对应的组件类型及组件内的字段信息，通过鼠标控制选择合并的多个单元格，获取选择合并单元格时鼠标的起始点，记为第一标记点，

获取合并前的多个单元格中每个单元格中心点分别与第一标记点之间的距离，选取存在组件且距离最小的单元格中的组件类型，记为第一组件类型，

将合并前的多个单元格中各个组件内且信息数据不为空的字段信息通过换行符进行拼接，得到拼接字段信息，

拼接过程中，字段信息对应的优先级为：同一行左边单元格对应的字段信息优先级＞同一行右边单元格对应的字段信息优先级＞下一行单元格对应的字段信息优先级，按照优先级从小到大的顺序对各个字段信息进行排列并拼接，

若第一组件类型为文本输入框、金额输入框、数字输入框、文本域、下拉框及日期输入框中的一个时，将拼接字段信息作为一个整体录入到相应组件的代码中，

若第一组件类型为多选框或复选框，以换行符为参照样本对拼接字段信息进行分割，得到换行符个数加1个分割结果，并按顺序逐个将分割结果录入到多选框或复选框中每个选项对应的代码中。

本发明获取组件内的字段信息，识别获取的字段信息中的换行符位置，是为了便于合并单元格时确定拼接后的字段信息，并根据拼接后的字段信息对拼接后的字段信息进行分割，得到多选框或复选框中每个选项对应的内容；获取第一标记点，是为了确定合并后的单元格中对应组件的类型，组件类型决定了对合并后的单元格中组件代码的解析方式。

进一步的，所述S5中获取已经完成配置的表单布局样式，获取表单布局样式中每个单元格对应的页面字段数据类型组件及组件中的字段信息，

对表单布局样式中的每个单元格进行编号，获取表单中单元格的行数及每行对应的单元格的个数，将第i行第j个单元格的编号记为Bij，

将每个单元格对应的组件代码进行封装，并将封装后的代码与单元格对应的编号进行关联，

获取每个单元格中组件的大小与相应单元格的大小相同，获取每个单元格在页面中所处的位置信息，所述位置信息为(c1，c2，c3，c4)，

其中，c3表示单元格在页面中的上边距与页面高度的比值，

c4表示单元格在页面中的下边距与页面高度的比值，

c1表示单元格在页面中的左边距与页面宽度的比值，

c2表示单元格在页面中的右边距与页面宽度的比值，

根据单元格在页面中的位置信息生成单元格内组件的位置渲染信息，将单元格内组件的位置渲染信息与单元格的编号进行关联，

得到每个单元格对应的页面综合信息：{单元格编号，单元格编号关联的封装代码，单元格编号关联的位置渲染信息}，

将i值相同的不同单元格编号关联的位置渲染信息中的c3建立硬联系，c4也建立硬联系，当建立硬联系的任一个位置渲染信息中C5发生变化，其余位置渲染信息中C5也相应改变，所述C5包括c3或c4；

将i值相差1的不同单元格编号关联的位置渲染信息中，i值小的位置渲染信息中c4与i值大的位置渲染信息中c3建立软联系，当建立软联系的i值编号小的位置渲染信息中c4发生变化，且变量为d时，i值编号大的位置渲染信息中c3的变量为-d；

将i值相同且j值相差1的不同单元格编号关联的位置渲染信息中，j值小的位置渲染信息中c2与j值大的位置渲染信息中c1建立软联系，当建立软联系的j值编号小的位置渲染信息中c2发生变化，且变量为d1时，j值编号大的位置渲染信息中c1的变量为-d1；

获取已经完成配置的页面代码时，按页面中单元格编号的优先级从大到小的顺序获取各个单元格对应组件的封装代码及位置渲染代码，并将获取的组件封装代码进行汇总，得到页面封装代码，将获取的组件位置渲染代码进行汇总，得到页面渲染代码，所述页面代码包括页面封装代码及页面渲染代码。

本发明对表单布局样式中的每个单元格进行编号，是为了按顺序对表单布局样式中的各个单元格相应组件的代码进行解析及整理，使得表单布局样式中的组件代码分布有条理，现有技术中，在多次对表单布局样式进行调整的情况下，会使新增的代码分布比较杂乱，进而出现代码顺序比较乱的情况，进而降低代码的可读性，对后续表单代码的维护造成一定的影响，在前端代码中，页面代码主要分为两个部分：主体代码及渲染代码，主体代码指的是能够实现组件基本功能的代码，渲染代码属于主体代码的附加部分，其作用是对组件的分布位置进行渲染，在删除渲染代码的情况下，主体代码对应的组件默认呈现列分布，一行对应一个组件。

进一步的，所述S5中获取页面代码后，比较页面封装代码中不同组件封装代码之间共有的代码行片段，所述共有的代码行片段为不同组件封装代码中字符完整相同的整行代码，所述共有的代码行片段包括一行或多行代码，统计获取的各个共有代码行片段信息，对获取的各个共有代码行片段信息进行编号，

所述共有代码行片段信息包括共有代码行片段对应的字符总个数、含有该共有代码行片段的组件封装代码个数，及含有该共有代码行片段且字符最少的组件封装代码的字符总量，

将第k个共有代码行片段信息中，共有代码行片段对应的字符总个数记为kH1，含有该共有代码行片段的组件封装代码个数记为kH2，kH2≥2，含有该共有代码行片段的第n个组件封装代码的字符总量记为kH3_n，1≤n≤kH2；

计算第k个共有代码行片段信息的信息简化值GHk，

其中，e表示共有代码行片段对应的替代函数名称中对应的字符个数，e为数据库中预制的常数；

当GHk小于第一阈值时，则不对编号为k的共有代码行片段进行简化，所述第一阈值为数据库中预制的常数，

当GHk大于等于第一阈值时，则提取编号为k的共有代码行片段封装成一个独立函数，并在含有第k个共有代码行片段的组件封装代码中引用该封装的独立函数，替代第k个共有的代码行片段，

对封装成独立函数的各个共有代码行片段进行二次编号，比较任意两个独立函数中代码之间的关系，

若一个独立函数中的代码完全包含另一个独立函数中的代码，则判定代码总数少的独立函数是代码总数多的独立函数的子集，

若一个独立函数中的代码不完全包含另一个独立函数中的代码，则判定这两个独立函数不存在包含关系；

将二次编号中第r个独立函数的每个子集对应共有代码行片段信息的信息简化值之和，记为SGr，将二次编号中第r个独立函数对应共有代码行片段信息的信息简化值记为FGr，

当二次编号中第r个独立函数不存在子集时，则判定SGr＝0，

当SGr*β-FGr≥0时，则删除二次编号中第r个独立函数，所述β表示第一权重系数，所述β为数据库中预制的常数；

当SGr*β-FGr＜0时，则删除二次编号中第r个独立函数的所有子集；

得到页面封装代码的优化结果，记为第一代码；

对已经完成配置的表单布局样式重新进行修改时，会将相应的第一代码重新转换成优化前的页面封装代码。

本发明比较页面封装代码中不同组件封装代码之间共有的代码行片段，是为了分析各个组件代码中的相同的代码行片段之间的关系，便于后续过程中对页面代码进行调整及优化；计算第k个共有代码行片段信息的信息简化值GHk，是为了判断共有的行代码片段部分是否需要进行优化，GHK对应的值越大，则相应的行代码片段越具有优化的价值；计算SGr及FGr，是为了进一步分析优化的行代码片段之间的关系，进而对优化的行代码片段对应独立函数进行筛选，避免出现多个关联的独立函数，如：多个不同的独立函数中的行代码片段均为某一个独立函数中的行代码片段的子集，则说明多个子集对应的独立函数与这个独立函数存在关联，该情况严重阻碍了对页面代码的优化，且在一定程度上增加了页面代码的臃肿程度。

一种数据可视化处理***，所述***包括以下模块：

组件库定义模块，所述组件库定义模块定义页面字段数据类型组件库，所述页面字段数据类型组件库包括文本输入框、金额输入框、数字输入框、文本域、下拉框、日期输入框、多选框和复选框；

布局样式自定义模块，所述布局样式自定义模块定义页面常用表单的布局样式，并且提供布局样式自定义操作；

数据获取模块，所述数据获取模块针对页面字段数据类型组件中不同组件内的数据内容，采用不同的数据获取方式；

组件代码解析模块，所述组件代码解析模块确保页面表格布局支持***用户管理员调整字段显示列数和合并单元格操作，并针对不同单元格合并方式对组件代码进行解析；

代码优化模块，所述代码优化模块针对已经完成配置的页面元素字段摆放和表单布局样式，支持***管理员页面预览功能，并根据配置结果对页面代码进行调整和优化。

进一步的，所述数据获取模块针对页面字段数据类型组件中下拉框内的数据内容，配置固定下拉选项内容和通过发起服务URL请求后台服务动态加载下拉框选项内容；

所述数据获取模块中的页面上多选框的内容支持配置固定选项内容和通过发起服务URL请求后台服务动态加载多选项框的选项内容；

所述数据获取模块中的页面表单列表数据内容支持通过发起服务URL请求后台服务动态加载数据内容。

进一步的，所述布局样式自定义模块中定义页面常用表单的布局样式为数据库中预制的表单布局样式模板，所述页面常用表单的布局样式模板为多个，且不同的页面常用表单的布局样式模板对应的布局样式存在差异，

每个页面常用表单的布局样式模板由多个单元格构成，每个单元格对应一个页面字段数据类型组件；

所述布局样式自定义模块中提供布局样式自定义操作包括：对页面布局样式中页面字段数据类型组件中的每种组件对应的个数进行增加及减少，对每个组件页面字段数据类型组件的位置进行修改；

所述布局样式自定义操作还包括对页面常用表单的布局样式模板中的单元格大小进行调整，及对单元格的个数进行增减。

与现有技术相比，本发明所达到的有益效果是：本发明采用动态灵活拖拽表单元素及样式调整，而且可灵活调整元素字段数据类型、获取方式(包含数据统计后数据)，以满足数据填报表单页面快速响应需求变更和新增字段类型的多样化功能,同时也可以节省研发成本提高工作效率；

相比于现有技术，本发明存在以下优点：

①新增页面元素字段、修改字段数据和删除字段均可在页面灵活实现动态元素组装；

②页面表单元素布局样式均可在页面配置灵活实现动态配置样式；

③用户可直接对页面上元素字段和显示布局样式进行调整，且无需研发人员参与；

④页面上数据字段和布局样式可实时直接显示页面显示效果，无需部署到服务器；

⑤页面上元素字段代码规范统一和代码布局样式统一，便于后期统一代码维护和提升代码可读性。

附图说明

附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例一起用于解释本发明，并不构成对本发明的限制。在附图中：

图1是本发明一种数据可视化处理***的结构示意图；

图2是本发明一种数据可视化处理方法的流程示意图；

图3是本发明一种数据可视化处理***页面设计的示意图；

图4是本发明一种数据可视化处理***自定义一个文本输入框的示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

请参阅图1-图4，本发明提供技术方案：一种数据可视化处理方法，所述方法包括以下步骤：

S1、定义页面字段数据类型组件库，所述页面字段数据类型组件库包括文本输入框、金额输入框、数字输入框、文本域、下拉框、日期输入框、多选框和复选框；

本实施例中组件库还包括地区组件、组合下拉组件、功能按钮组件(可编辑按钮功能，例如保存、编辑)、单选框组件及时间区间组件等。

S2、定义页面常用表单的布局样式；并且提供布局样式自定义操作；

S3、针对页面字段数据类型组件中不同组件内的数据内容，采用不同的数据获取方式；

S4、页面表格布局支持***用户管理员调整字段显示列数和合并单元格操作，并针对不同单元格合并方式对组件代码进行解析；

S5、针对已经完成配置的页面元素字段摆放和表单布局样式，支持***管理员页面预览功能，并根据配置结果对页面代码进行调整和优化。

所述S2中定义页面常用表单的布局样式为数据库中预制的表单布局样式模板，所述页面常用表单的布局样式模板为多个，且不同的页面常用表单的布局样式模板对应的布局样式存在差异，

本实施例中页面常用表单的布局样式模板为5个。

每个页面常用表单的布局样式模板由多个单元格构成，每个单元格对应一个页面字段数据类型组件；

所述S2中提供布局样式自定义操作包括：对页面布局样式中页面字段数据类型组件中的每种组件对应的个数进行增加及减少，对每个组件页面字段数据类型组件的位置进行修改；

所述布局样式自定义操作还包括对页面常用表单的布局样式模板中的单元格大小进行调整，及对单元格的个数进行增减。

本实施例中在进行布局样式自定义操作时，用户可以在页面字段数据类型组件库中选择页面字段数据类型组件并拖拽到表单的布局样式模板中，实现对布局样式的自定义修改，拖拽的每个页面字段数据类型组件默认由三部分组成：组件名称提示信息、组件内字段信息及组件类型，如：拖拽了一个文本输入框，该文本输入框的组件名称提示信息定义为“姓名”，该文本输入框内的字段信息定义为“请输入中文名称”，如图4所示。

同时，在选择组件类型后，组件内的字段信息是通过用户自定义设置的，若用户未定义组件内的字段信息，则该组件内字段信息为空。

本实施例页面字段数据类型组件库中的每个页面字段数据类型组件对应的组件名称提示信息可以由用户自定义设置，也可以由用户从数据库中选择设置，数据库中每个页面字段数据类型组件提前预制有多个不同的组件名称提示信息。

所述S3中针对页面字段数据类型组件中不同组件内的数据内容，采用的数据获取方式包括：

(1)针对页面字段数据类型组件中下拉框内的数据内容，配置固定下拉选项内容和通过发起服务URL请求后台服务动态加载下拉框选项内容；

(2)页面上多选框的内容支持配置固定选项内容和通过发起服务URL请求后台服务动态加载多选项框的选项内容；

(3)页面表单列表数据内容支持通过发起服务URL请求后台服务动态加载数据内容。

所述S4中对单元格内页面字段数据类型组件对应的代码进行解析时，获取组件内的字段信息，识别获取的字段信息中的换行符位置，

当页面字段数据类型组件为文本输入框、金额输入框、数字输入框、文本域、下拉框及日期输入框中的一个时，组件内相应的字段信息为组件内填写内容格式提示信息，将获取的字段信息作为一个整体录入到相应组件的代码中，

当页面字段数据类型组件为多选框或复选框时，组件内相应的字段信息为组件内各个选项的文本信息且不同选项的文本信息通过换行符隔开，以换行符为参照样本对获取的字段信息进行分割，得到换行符个数加1个分割结果，并按顺序逐个将分割结果录入到多选框或复选框中每个选项对应的代码中，一个分割结果对应多选框或复选框中的一个选项；

所述S4中在合并单元格时对组件代码进行解析时，获取合并前的多个单元格中分别对应的组件类型及组件内的字段信息，通过鼠标控制选择合并的多个单元格，获取选择合并单元格时鼠标的起始点，记为第一标记点，

获取合并前的多个单元格中每个单元格中心点分别与第一标记点之间的距离，选取存在组件且距离最小的单元格中的组件类型，记为第一组件类型，

将合并前的多个单元格中各个组件内且信息数据不为空的字段信息通过换行符进行拼接，得到拼接字段信息，

拼接过程中，字段信息对应的优先级为：同一行左边单元格对应的字段信息优先级＞同一行右边单元格对应的字段信息优先级＞下一行单元格对应的字段信息优先级，按照优先级从小到大的顺序对各个字段信息进行排列并拼接，

若第一组件类型为文本输入框、金额输入框、数字输入框、文本域、下拉框及日期输入框中的一个时，将拼接字段信息作为一个整体录入到相应组件的代码中，

若第一组件类型为多选框或复选框，以换行符为参照样本对拼接字段信息进行分割，得到换行符个数加1个分割结果，并按顺序逐个将分割结果录入到多选框或复选框中每个选项对应的代码中。

所述S5中获取已经完成配置的表单布局样式，获取表单布局样式中每个单元格对应的页面字段数据类型组件及组件中的字段信息，

对表单布局样式中的每个单元格进行编号，获取表单中单元格的行数及每行对应的单元格的个数，将第i行第j个单元格的编号记为Bij，

将每个单元格对应的组件代码进行封装，并将封装后的代码与单元格对应的编号进行关联，

获取每个单元格中组件的大小与相应单元格的大小相同，获取每个单元格在页面中所处的位置信息，所述位置信息为(c1，c2，c3，c4)，

其中，c3表示单元格在页面中的上边距与页面高度的比值，

c4表示单元格在页面中的下边距与页面高度的比值，

c1表示单元格在页面中的左边距与页面宽度的比值，

c2表示单元格在页面中的右边距与页面宽度的比值，

根据单元格在页面中的位置信息生成单元格内组件的位置渲染信息，将单元格内组件的位置渲染信息与单元格的编号进行关联，

得到每个单元格对应的页面综合信息：{单元格编号，单元格编号关联的封装代码，单元格编号关联的位置渲染信息}，

将i值相同的不同单元格编号关联的位置渲染信息中的c3建立硬联系，c4也建立硬联系，当建立硬联系的任一个位置渲染信息中C5发生变化，其余位置渲染信息中C5也相应改变，所述C5包括c3或c4；

将i值相差1的不同单元格编号关联的位置渲染信息中，i值小的位置渲染信息中c4与i值大的位置渲染信息中c3建立软联系，当建立软联系的i值编号小的位置渲染信息中c4发生变化，且变量为d时，i值编号大的位置渲染信息中c3的变量为-d；

将i值相同且j值相差1的不同单元格编号关联的位置渲染信息中，j值小的位置渲染信息中c2与j值大的位置渲染信息中c1建立软联系，当建立软联系的j值编号小的位置渲染信息中c2发生变化，且变量为d1时，j值编号大的位置渲染信息中c1的变量为-d1；

获取已经完成配置的页面代码时，按页面中单元格编号的优先级从大到小的顺序获取各个单元格对应组件的封装代码及位置渲染代码，并将获取的组件封装代码进行汇总，得到页面封装代码，将获取的组件位置渲染代码进行汇总，得到页面渲染代码，所述页面代码包括页面封装代码及页面渲染代码。

所述S5中获取页面代码后，比较页面封装代码中不同组件封装代码之间共有的代码行片段，所述共有的代码行片段为不同组件封装代码中字符完整相同的整行代码，所述共有的代码行片段包括一行或多行代码，统计获取的各个共有代码行片段信息，对获取的各个共有代码行片段信息进行编号，

所述共有代码行片段信息包括共有代码行片段对应的字符总个数、含有该共有代码行片段的组件封装代码个数，及含有该共有代码行片段且字符最少的组件封装代码的字符总量，

将第k个共有代码行片段信息中，共有代码行片段对应的字符总个数记为kH1，含有该共有代码行片段的组件封装代码个数记为kH2，kH2≥2，含有该共有代码行片段的第n个组件封装代码的字符总量记为kH3_n，1≤n≤kH2；

计算第k个共有代码行片段信息的信息简化值GHk，

其中，e表示共有代码行片段对应的替代函数名称中对应的字符个数，e为数据库中预制的常数；

本实施例中e为15，

若第1个共有代码片段对应的字符总个数为60，含有该共有代码行片段的组件封装代码个数记为2，含有该共有代码行片段的第1个组件封装代码的字符总量为300，含有该共有代码行片段的第1个组件封装代码的字符总量为400，

则第1个共有代码行片段信息的信息简化值GH1＝(60-15)*(60÷300+60÷400)＝15.75。

当GHk小于第一阈值时，则不对编号为k的共有代码行片段进行简化，所述第一阈值为数据库中预制的常数，

本实施例中第一阈值为20。

当GHk大于等于第一阈值时，则提取编号为k的共有代码行片段封装成一个独立函数，并在含有第k个共有代码行片段的组件封装代码中引用该封装的独立函数，替代第k个共有的代码行片段，

对封装成独立函数的各个共有代码行片段进行二次编号，比较任意两个独立函数中代码之间的关系，

若一个独立函数中的代码完全包含另一个独立函数中的代码，则判定代码总数少的独立函数是代码总数多的独立函数的子集，

若一个独立函数中的代码不完全包含另一个独立函数中的代码，则判定这两个独立函数不存在包含关系；

将二次编号中第r个独立函数的每个子集对应共有代码行片段信息的信息简化值之和，记为SGr，将二次编号中第r个独立函数对应共有代码行片段信息的信息简化值记为FGr，

当二次编号中第r个独立函数不存在子集时，则判定SGr＝0，

当SGr*β-FGr≥0时，则删除二次编号中第r个独立函数，所述β表示第一权重系数，所述β为数据库中预制的常数；

本实施例中β为1.3。

当SGr*β-FGr＜0时，则删除二次编号中第r个独立函数的所有子集；

得到页面封装代码的优化结果，记为第一代码；

对已经完成配置的表单布局样式重新进行修改时，会将相应的第一代码重新转换成优化前的页面封装代码。

本实施例中针对以下三个场景对传统的页面表单元素字段开发方式与本发明中的开发方式进行比较，

传统的业务***只做到了固定页面表单元素和固定页面元素展示布局样式：

场景一：当业务发生变更，页面元素字段改变，则***中的页面元素字段前端业务代码就要进行重新开发代码；

场景二：当业务页面元素字段涉及联动效果样式修改，则后续维护人员的熟悉研究和学习成本很高；

场景三：前端页面经过多次迭代需求版本后，页面代码规则会存在多种前端技术及编码规则和思路，后期代码可读性和维护性很差；

目前如使用本发明中的整套技术方案，可很快速方便解决上述问题，具体情况如下：

在场景一中，***维护人员只需要根据实际业务需求可快速调整页面元素；

在场景二中，***维护人员只需针对之前表单样式直接调整优化即可实现；

在场景三中，只需维护一套页面组件和页面布局样式，这样前端代码编码规范统一和技术统一，后期代码维护和迭代变得简单，这样代码可读性高和维护性高，提升工作效率。

一种数据可视化处理***，所述***包括以下模块：

组件库定义模块，所述组件库定义模块定义页面字段数据类型组件库，所述页面字段数据类型组件库包括文本输入框、金额输入框、数字输入框、文本域、下拉框、日期输入框、多选框和复选框；

布局样式自定义模块，所述布局样式自定义模块定义页面常用表单的布局样式，并且提供布局样式自定义操作；

数据获取模块，所述数据获取模块针对页面字段数据类型组件中不同组件内的数据内容，采用不同的数据获取方式；

组件代码解析模块，所述组件代码解析模块确保页面表格布局支持***用户管理员调整字段显示列数和合并单元格操作，并针对不同单元格合并方式对组件代码进行解析；

代码优化模块，所述代码优化模块针对已经完成配置的页面元素字段摆放和表单布局样式，支持***管理员页面预览功能，并根据配置结果对页面代码进行调整和优化。

所述数据获取模块针对页面字段数据类型组件中下拉框内的数据内容，配置固定下拉选项内容和通过发起服务URL请求后台服务动态加载下拉框选项内容；

所述数据获取模块中的页面上多选框的内容支持配置固定选项内容和通过发起服务URL请求后台服务动态加载多选项框的选项内容；

所述数据获取模块中的页面表单列表数据内容支持通过发起服务URL请求后台服务动态加载数据内容。

所述布局样式自定义模块中定义页面常用表单的布局样式为数据库中预制的表单布局样式模板，所述页面常用表单的布局样式模板为多个，且不同的页面常用表单的布局样式模板对应的布局样式存在差异，

每个页面常用表单的布局样式模板由多个单元格构成，每个单元格对应一个页面字段数据类型组件；

所述布局样式自定义模块中提供布局样式自定义操作包括：对页面布局样式中页面字段数据类型组件中的每种组件对应的个数进行增加及减少，对每个组件页面字段数据类型组件的位置进行修改；

所述布局样式自定义操作还包括对页面常用表单的布局样式模板中的单元格大小进行调整，及对单元格的个数进行增减。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。

最后应说明的是：以上所述仅为本发明的优选实施例而已，并不用于限制本发明，尽管参照前述实施例对本发明进行了详细的说明，对于本领域的技术人员来说，其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (9)

1.一种数据可视化处理方法，其特征在于，所述方法包括以下步骤：

S1、定义页面字段数据类型组件库，所述页面字段数据类型组件库包括文本输入框、金额输入框、数字输入框、文本域、下拉框、日期输入框、多选框和复选框；

S2、定义页面常用表单的布局样式，并且提供布局样式自定义操作；

S3、针对页面字段数据类型组件中不同组件内的数据内容，采用不同的数据获取方式；

S4、页面表格布局支持***用户管理员调整字段显示列数和合并单元格操作，并针对不同单元格合并方式对组件代码进行解析；

S5、针对已经完成配置的页面元素字段摆放和表单布局样式，支持***管理员页面预览功能，并根据配置结果对页面代码进行调整和优化。

2.根据权利要求1所述的一种数据可视化处理方法，其特征在于：所述S2中定义页面常用表单的布局样式为数据库中预制的表单布局样式模板，所述页面常用表单的布局样式模板为多个，且不同的页面常用表单的布局样式模板对应的布局样式存在差异，

每个页面常用表单的布局样式模板由多个单元格构成，每个单元格对应一个页面字段数据类型组件；

所述S2中提供布局样式自定义操作包括：对页面布局样式中页面字段数据类型组件中的每种组件对应的个数进行增加及减少，对每个组件页面字段数据类型组件的位置进行修改；

所述布局样式自定义操作还包括对页面常用表单的布局样式模板中的单元格大小进行调整，及对单元格的个数进行增减。

3.根据权利要求1所述的一种数据可视化处理方法，其特征在于：所述S3中针对页面字段数据类型组件中不同组件内的数据内容，采用的数据获取方式包括：

(1)针对页面字段数据类型组件中下拉框内的数据内容，配置固定下拉选项内容和通过发起服务URL请求后台服务动态加载下拉框选项内容；

(2)页面上多选框的内容支持配置固定选项内容和通过发起服务URL请求后台服务动态加载多选项框的选项内容；

(3)页面表单列表数据内容支持通过发起服务URL请求后台服务动态加载数据内容。

4.根据权利要求1所述的一种数据可视化处理方法，其特征在于：所述S4中对单元格内页面字段数据类型组件对应的代码进行解析时，获取组件内的字段信息，识别获取的字段信息中的换行符位置，

当页面字段数据类型组件为文本输入框、金额输入框、数字输入框、文本域、下拉框及日期输入框中的一个时，组件内相应的字段信息为组件内填写内容格式提示信息，将获取的字段信息作为一个整体录入到相应组件的代码中，

当页面字段数据类型组件为多选框或复选框时，组件内相应的字段信息为组件内各个选项的文本信息且不同选项的文本信息通过换行符隔开，以换行符为参照样本对获取的字段信息进行分割，得到换行符个数加1个分割结果，并按顺序逐个将分割结果录入到多选框或复选框中每个选项对应的代码中，一个分割结果对应多选框或复选框中的一个选项；

所述S4中在合并单元格时对组件代码进行解析时，获取合并前的多个单元格中分别对应的组件类型及组件内的字段信息，通过鼠标控制选择合并的多个单元格，获取选择合并单元格时鼠标的起始点，记为第一标记点，

获取合并前的多个单元格中每个单元格中心点分别与第一标记点之间的距离，选取存在组件且距离最小的单元格中的组件类型，记为第一组件类型，

将合并前的多个单元格中各个组件内且信息数据不为空的字段信息通过换行符进行拼接，得到拼接字段信息，

拼接过程中，字段信息对应的优先级为：同一行左边单元格对应的字段信息优先级＞同一行右边单元格对应的字段信息优先级＞下一行单元格对应的字段信息优先级，按照优先级从小到大的顺序对各个字段信息进行排列并拼接，

若第一组件类型为文本输入框、金额输入框、数字输入框、文本域、下拉框及日期输入框中的一个时，将拼接字段信息作为一个整体录入到相应组件的代码中，

若第一组件类型为多选框或复选框，以换行符为参照样本对拼接字段信息进行分割，得到换行符个数加1个分割结果，并按顺序逐个将分割结果录入到多选框或复选框中每个选项对应的代码中。

5.根据权利要求1所述的一种数据可视化处理方法，其特征在于：所述S5中获取已经完成配置的表单布局样式，获取表单布局样式中每个单元格对应的页面字段数据类型组件及组件中的字段信息，

对表单布局样式中的每个单元格进行编号，获取表单中单元格的行数及每行对应的单元格的个数，将第i行第j个单元格的编号记为Bij，

将每个单元格对应的组件代码进行封装，并将封装后的代码与单元格对应的编号进行关联，

获取每个单元格中组件的大小与相应单元格的大小相同，获取每个单元格在页面中所处的位置信息，所述位置信息为(c1，c2，c3，c4)，

其中，c3表示单元格在页面中的上边距与页面高度的比值，

c4表示单元格在页面中的下边距与页面高度的比值，

c1表示单元格在页面中的左边距与页面宽度的比值，

c2表示单元格在页面中的右边距与页面宽度的比值，

根据单元格在页面中的位置信息生成单元格内组件的位置渲染信息，将单元格内组件的位置渲染信息与单元格的编号进行关联，

得到每个单元格对应的页面综合信息：{单元格编号，单元格编号关联的封装代码，单元格编号关联的位置渲染信息}，

将i值相同的不同单元格编号关联的位置渲染信息中的c3建立硬联系，c4也建立硬联系，当建立硬联系的任一个位置渲染信息中C5发生变化，其余位置渲染信息中C5也相应改变，所述C5包括c3或c4；

将i值相差1的不同单元格编号关联的位置渲染信息中，i值小的位置渲染信息中c4与i值大的位置渲染信息中c3建立软联系，当建立软联系的i值编号小的位置渲染信息中c4发生变化，且变量为d时，i值编号大的位置渲染信息中c3的变量为-d；

将i值相同且j值相差1的不同单元格编号关联的位置渲染信息中，j值小的位置渲染信息中c2与j值大的位置渲染信息中c1建立软联系，当建立软联系的j值编号小的位置渲染信息中c2发生变化，且变量为d1时，j值编号大的位置渲染信息中c1的变量为-d1；

获取已经完成配置的页面代码时，按页面中单元格编号的优先级从大到小的顺序获取各个单元格对应组件的封装代码及位置渲染代码，并将获取的组件封装代码进行汇总，得到页面封装代码，将获取的组件位置渲染代码进行汇总，得到页面渲染代码，所述页面代码包括页面封装代码及页面渲染代码。

6.根据权利要求5所述的一种数据可视化处理方法，其特征在于：所述S5中获取页面代码后，比较页面封装代码中不同组件封装代码之间共有的代码行片段，所述共有的代码行片段为不同组件封装代码中字符完整相同的整行代码，所述共有的代码行片段包括一行或多行代码，统计获取的各个共有代码行片段信息，对获取的各个共有代码行片段信息进行编号，

所述共有代码行片段信息包括共有代码行片段对应的字符总个数、含有该共有代码行片段的组件封装代码个数，及含有该共有代码行片段且字符最少的组件封装代码的字符总量，

将第k个共有代码行片段信息中，共有代码行片段对应的字符总个数记为kH1，含有该共有代码行片段的组件封装代码个数记为kH2，kH2≥2，含有该共有代码行片段的第n个组件封装代码的字符总量记为kH3_n，1≤n≤kH2；

计算第k个共有代码行片段信息的信息简化值GHk，

其中，e表示共有代码行片段对应的替代函数名称中对应的字符个数，e为数据库中预制的常数；

当GHk小于第一阈值时，则不对编号为k的共有代码行片段进行简化，所述第一阈值为数据库中预制的常数，

当GHk大于等于第一阈值时，则提取编号为k的共有代码行片段封装成一个独立函数，并在含有第k个共有代码行片段的组件封装代码中引用该封装的独立函数，替代第k个共有的代码行片段，

对封装成独立函数的各个共有代码行片段进行二次编号，比较任意两个独立函数中代码之间的关系，

若一个独立函数中的代码完全包含另一个独立函数中的代码，则判定代码总数少的独立函数是代码总数多的独立函数的子集，

若一个独立函数中的代码不完全包含另一个独立函数中的代码，则判定这两个独立函数不存在包含关系；

将二次编号中第r个独立函数的每个子集对应共有代码行片段信息的信息简化值之和，记为SGr，将二次编号中第r个独立函数对应共有代码行片段信息的信息简化值记为FGr，

当二次编号中第r个独立函数不存在子集时，则判定SGr＝0，

当SGr*β-FGr≥0时，则删除二次编号中第r个独立函数，所述β表示第一权重系数，所述β为数据库中预制的常数；

当SGr*β-FGr＜0时，则删除二次编号中第r个独立函数的所有子集；

得到页面封装代码的优化结果，记为第一代码；

对已经完成配置的表单布局样式重新进行修改时，会将相应的第一代码重新转换成优化前的页面封装代码。

7.一种数据可视化处理***，其特征在于，所述***包括以下模块：

组件库定义模块，所述组件库定义模块定义页面字段数据类型组件库，所述页面字段数据类型组件库包括文本输入框、金额输入框、数字输入框、文本域、下拉框、日期输入框、多选框和复选框；

布局样式自定义模块，所述布局样式自定义模块定义页面常用表单的布局样式，并且提供布局样式自定义操作；

数据获取模块，所述数据获取模块针对页面字段数据类型组件中不同组件内的数据内容，采用不同的数据获取方式；

组件代码解析模块，所述组件代码解析模块确保页面表格布局支持***用户管理员调整字段显示列数和合并单元格操作，并针对不同单元格合并方式对组件代码进行解析；

代码优化模块，所述代码优化模块针对已经完成配置的页面元素字段摆放和表单布局样式，支持***管理员页面预览功能，并根据配置结果对页面代码进行调整和优化。

8.根据权利要求7所述的一种数据可视化处理***，其特征在于：所述数据获取模块针对页面字段数据类型组件中下拉框内的数据内容，配置固定下拉选项内容和通过发起服务URL请求后台服务动态加载下拉框选项内容；

所述数据获取模块中的页面上多选框的内容支持配置固定选项内容和通过发起服务URL请求后台服务动态加载多选项框的选项内容；

所述数据获取模块中的页面表单列表数据内容支持通过发起服务URL请求后台服务动态加载数据内容。

9.根据权利要求7所述的一种数据可视化处理***，其特征在于：所述布局样式自定义模块中定义页面常用表单的布局样式为数据库中预制的表单布局样式模板，所述页面常用表单的布局样式模板为多个，且不同的页面常用表单的布局样式模板对应的布局样式存在差异，

每个页面常用表单的布局样式模板由多个单元格构成，每个单元格对应一个页面字段数据类型组件；

所述布局样式自定义模块中提供布局样式自定义操作包括：对页面布局样式中页面字段数据类型组件中的每种组件对应的个数进行增加及减少，对每个组件页面字段数据类型组件的位置进行修改；

所述布局样式自定义操作还包括对页面常用表单的布局样式模板中的单元格大小进行调整，及对单元格的个数进行增减。

Images