一种数据可视化处理系统及方法技术方案

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

【技术实现步骤摘要】
一种数据可视化处理系统及方法


[0001]本专利技术涉及计算机
，具体为一种数据可视化处理系统及方法。

技术介绍

[0002]在数据填报方面，传统技术公司目前基本都是使用前端技术如jsp，JavaScript、Jquery或H5等技术来进行开发传统页面表单，页面表单上元素字段(输入框，下拉框、文本域和日期字段)和页面布局样式都是根据实际业务需求进行定制开发的，页面字段和样式颜色都固定，如有业务需求变更都需要研发人员在原有项目代码基础上进行二次定制研发；系统用户管理员不能根据业务变更灵活动态对页面元素字段调整和优化。
[0003]现有的数据可视化处理系统存在较大的缺陷，当业务页面元素字段无法实现联动效果，需要对样式逐个进行修改，后续维护人员的熟悉研究和学习成本很高；同时前端页面经过多次迭代需求版本后，页面代码规则会存在多种前端技术及编码规则和思路，后期代码可读性和维护性很差。

技术实现思路

[0004]本专利技术的目的在于提供一种数据可视化处理系统及方法，以解决上述
技术介绍
中提出的问题。
[0005]为了解决上述技术问题，本专利技术提供如下技术方案：一种数据可视化处理方法，所述方法包括以下步骤：
[0006]S1、定义页面字段数据类型组件库，所述页面字段数据类型组件库包括文本输入框、金额输入框、数字输入框、文本域、下拉框、日期输入框、多选框和复选框；
[0007]S2、定义页面常用表单的布局样式；并且提供布局样式自定义操作；
[0008]S3、针对页面字段数据类型组件中不同组件内的数据内容，采用不同的数据获取方式；
[0009]S4、页面表格布局支持系统用户管理员调整字段显示列数和合并单元格操作，并针对不同单元格合并方式对组件代码进行解析；
[0010]S5、针对已经完成配置的页面元素字段摆放和表单布局样式，支持系统管理员页面预览功能，并根据配置结果对页面代码进行调整和优化。
[0011]进一步的，所述S2中定义页面常用表单的布局样式为数据库中预制的表单布局样式模板，所述页面常用表单的布局样式模板为多个，且不同的页面常用表单的布局样式模板对应的布局样式存在差异，
[0012]每个页面常用表单的布局样式模板由多个单元格构成，每个单元格对应一个页面字段数据类型组件；
[0013]本专利技术在页面常用表单布局样式模板中设置单元格，其目的是为了对表单中定义的组件对应位置区域进行限制，进而实现对表单中定义的组件布局的调整及规划，在代码解析阶段，本专利技术只对表单布局样式中的组件进行解析，而不对表单布局中的单元格进行
解析，进而根据解析后的代码实际生成表单不包含单元格对应的线段。
[0014]所述S2中提供布局样式自定义操作包括：对页面布局样式中页面字段数据类型组件中的每种组件对应的个数进行增加及减少，对每个组件页面字段数据类型组件的位置进行修改；
[0015]所述布局样式自定义操作还包括对页面常用表单的布局样式模板中的单元格大小进行调整，及对单元格的个数进行增减。
[0016]本专利技术中预制表单布局样式模板，是为了便于用户根据自身喜好或需求进行选择；设置布局样式自定义操作，是考虑到不同用户的需求不同，选用的组件会存在较大的差异，同时组件内的字段信息存在差别，进而对组件占用空间的大小及占用空间的位置会有较大区别；同时，设置自定义操作能够便于用户对表单布局样式进行快速修改，减少了用户对代码的修改时间。
[0017]进一步的，所述S3中针对页面字段数据类型组件中不同组件内的数据内容，采用的数据获取方式包括：
[0018](1)针对页面字段数据类型组件中下拉框内的数据内容，配置固定下拉选项内容和通过发起服务URL请求后台服务动态加载下拉框选项内容；
[0019](2)页面上多选框的内容支持配置固定选项内容和通过发起服务URL请求后台服务动态加载多选项框的选项内容；
[0020](3)页面表单列表数据内容支持通过发起服务URL请求后台服务动态加载数据内容。
[0021]本专利技术在组件获取数据的过程中，采用动态加载数据内容的方式，能够使组件内容在显示过程中更有条理，还增加了布局的美观性。
[0022]进一步的，所述S4中对单元格内页面字段数据类型组件对应的代码进行解析时，获取组件内的字段信息，识别获取的字段信息中的换行符位置，
[0023]当页面字段数据类型组件为文本输入框、金额输入框、数字输入框、文本域、下拉框及日期输入框中的一个时，组件内相应的字段信息为组件内填写内容格式提示信息，将获取的字段信息作为一个整体录入到相应组件的代码中，
[0024]当页面字段数据类型组件为多选框或复选框时，组件内相应的字段信息为组件内各个选项的文本信息且不同选项的文本信息通过换行符隔开，以换行符为参照样本对获取的字段信息进行分割，得到换行符个数加1个分割结果，并按顺序逐个将分割结果录入到多选框或复选框中每个选项对应的代码中，一个分割结果对应多选框或复选框中的一个选项；
[0025]所述S4中在合并单元格时对组件代码进行解析时，获取合并前的多个单元格中分别对应的组件类型及组件内的字段信息，通过鼠标控制选择合并的多个单元格，获取选择合并单元格时鼠标的起始点，记为第一标记点，
[0026]获取合并前的多个单元格中每个单元格中心点分别与第一标记点之间的距离，选取存在组件且距离最小的单元格中的组件类型，记为第一组件类型，
[0027]将合并前的多个单元格中各个组件内且信息数据不为空的字段信息通过换行符进行拼接，得到拼接字段信息，
[0028]拼接过程中，字段信息对应的优先级为：同一行左边单元格对应的字段信息优先
级＞同一行右边单元格对应的字段信息优先级＞下一行单元格对应的字段信息优先级，按照优先级从小到大的顺序对各个字段信息进行排列并拼接，
[0029]若第一组件类型为文本输入框、金额输入框、数字输入框、文本域、下拉框及日期输入框中的一个时，将拼接字段信息作为一个整体录入到相应组件的代码中，
[0030]若第一组件类型为多选框或复选框，以换行符为参照样本对拼接字段信息进行分割，得到换行符个数加1个分割结果，并按顺序逐个将分割结果录入到多选框或复选框中每个选项对应的代码中。
[0031]本专利技术获取组件内的字段信息，识别获取的字段信息中的换行符位置，是为了便于合并单元格时确定拼接后的字段信息，并根据拼接后的字段信息对拼接后的字段信息进行分割，得到多选框或复选框中每个选项对应的内容；获取第一标记点，是为了确定合并后的单元格中对应组件的类型，组件类型决定了对合并后的单元格中组件代码的解析方式。
[0032]进一步的，所述S5中获取已经完成配置的表单布局样式，获取表单布局样式中每个单元格对应的页面字段数据类型组件及组件中的字段信息，
[0033]对表单布局样式中的每个单元格进行编号，获取表单中单元格的行数及每行对应的单元格的个数，将第i行第j个单元格的编号记本文档来自技高网...

【技术保护点】

【技术特征摘要】
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建立软联...

【专利技术属性】
技术研发人员：李松，赵术妘，陈政，朱锦，岳冬艳，
申请(专利权)人：江苏金农股份有限公司，
类型：发明
国别省市：