一种图表配置元素数据模型的二次编辑方法

摘要

本发明涉及一种图表配置元素数据模型的二次编辑方法，方法包括以下步骤：用户通过登录平台后，通过填写简单的基本信息进行项目的创建，然后根据个性化的需求配置整体的项目菜单结构，项目菜单完成的同时，我们可以对菜单结构中每一级菜单以拖拽的形式进行按需丰富web页面。平台中提供了丰富的静态配置元素，本发明采用直接对单个元素进行二次编辑，可以实现对静态元素的样式编辑以及数据编辑，此外本发明还提供了以二次编码的形式更准确的操作元素。本发明允许在配置过程中根据用户需求对元素样式和数据进行及时调整，更高效、更准确、更灵活、易用性也更高。

说明书

技术领域

本发明涉及一种图表配置元素数据模型的二次编辑方法，属于工业制造生产领域。

背景技术

随着计算机技术的飞速发展和计算机网络的大面积普及，企业信息化建设逐步深入，企业内部以及企业内部与外部建立起越来越多的业务应用系统，如何整合企业的现有IT资源，使企业中计算机孤岛式的应用向集体协作的方向发展，发挥资源效益的最大化，降低企业成本，正在逐渐成为企业关注的重要问题。用户希望企业内所有系统集成在一个平台上，操作统一，以节省培训时间。

传统代码的开发和测试周期都很长，往往不能准时提交订单，开发好的系统也需要一段时间来磨合才能稳定。而这从零开始的的开发模式对开发人员的要求是非常高的，需要精通编程语言、数据库和各种开发技术的人才。由于对开发人员要求高及开发时间长，所以开发成本是比较高的。由于整个系统代码纯手撸，出错率也是非常高的，后期的维护是相当麻烦，成本也高。

业务需求千变万化，企业的不断发展要求软件能轻松更新，以满足企业不断变化的需要。而传统软件往往一经开发完成，不能作太多变动，重新开发或购买软件劳财伤力，而且周期长。因此，用户希望软件系统提供简单可行、快捷的二次开发平台，以便他们自己开发新的应用或修改现有应用，以满足不断发展变化的业务需要。

快速开发平台配置式开发方式，一天可以开发十几套模板，且测试简单，性能稳定不需要磨合。平台内的各个功能都已经开发好了，只要懂一些数据库知识就可以上手，所以对开发人员要求就比较低，非常适合一些小白程序员或没有程序员的企业，而且也有非常高的学习价值。整个平台的代码经过开发人员和用户不断的反馈和调整，安全系数是有保障的，维护起来也是很方便的。

发明内容

本发明主要解决的技术问题是，针对大多数无代码平台提供的配置元素均为静态元素，修改相关操作比较局限的问题。提出了一种图表配置元素数据模型的二次编辑方法，即在系统配置过程中，根据用户不同场景下需求不同，可以个性化定制配置样式以及元素数据的更改，以最优的方式最方便、准确的操作元素来实现个性的定制化开发

本发明为实现上述目的所采用的技术方案是：一种图表配置元素数据模型的二次编辑方法，包括以下步骤：

在配置页面上插入元素数据模型；

对元素数据模型的样式和数据进行配置，采用以下方式中的至少一种：

通过获取元素数据模型的属性数据配置；

通过模态框的形式获取元素数据模型的源代码配置。

所述元素数据模型包括：图标类元素、表格类元素、地图类元素、文本类元素、树形菜单元素，图片类元素、iframe元素中的至少一种。

通过获取元素数据模型的属性数据对元素数据模型的样式进行配置，包括以下步骤：

当元素数据模型接受到视图展示命令时，从元素库中获取该元素数据模型ID，通过ID匹配获取该模型的Json数据，通过Json数据进行渲染形成属性窗口，并在配置页面上显示；

获取属性窗口上被选择的属性以其属性值，在配置文件中对该属性进行查询；当查询到的该属性时，对该属性进行赋值操作，将获取的属性值替换原有属性值；

通过onchange方式实时更新元素数据模型的样式。

通过获取元素数据模型的属性数据对元素数据模型的数据进行配置，包括以下步骤：

元素数据模型的数据源包括数据库和自定义两种：

当数据库为数据源时，选择数据库中的数据表，编辑页面从数据表中获取全部字段，用于用户选择；当用户选择字段拖入元素数据模型对应的配置项中，编辑页面从数据表中获取对应字段内所有数据并填入元素数据模型的配置项中，并实时更新；

当自定义为数据源时，在配置项中输入元素数据模型对应的配置项数据；编辑页面对数据进行解析得到元素数据模型需要的格式，并存入元素数据模型的配置项中，在元素数据模型中显示。

通过模态框的形式获取元素数据模型的源代码配置，包括以下步骤：

当编辑页面接收到触发命令时，获取元素数据模型的源代码并显示在模态框中；

在模态框中，根据配置需要进行修改并保存；

根据保存的源代码通过setvalue方法更新元素数据模型。

进行样式和数据的配置之前，预先建立项目，包括：

获取项目名称插入项目列表中；

根据项目列表通过可视化方式建立项目路由；

利用元素填充项目路由中对应的页面；

对所述页面的元素进行样式和数据的配置。

所述项目列表包括项目名称，项目属性，多级子菜单结构，每个子菜单内置元素数据。

所述通过可视化方式建立项目路由，包括以下步骤：

建立多个节点构成节点树；

根据项目列表中的项目名称生成项目主体节点；

建立用于对用户的输入信息进行校验的登陆节点，当校验通过时，则跳转至项目主体节点；

根据用户输入的多级子菜单结构信息按照树形结构存入对应项目主体节点，并生成子菜单节点。

所述利用元素填充项目路由中对应的页面，包括以下步骤：

项目路由建立完成后，将项目主体节点中的多级子菜单结构传入用于配置项目的可视编辑器；在可视编辑器插入预设的元素。

所述元素为图表类元素及其组合，所述图表类元素设有配置项，包括样式和数据。

所述对所述页面的元素进行样式和数据的配置，包括以下步骤：

通过可配置项配置所选元素的样式；元素的数据源包括数据库和自定义两种。

所述对所述页面的元素进行样式和数据的配置完成后，将编辑器中所有元素配置项数据存入到项目列表的相应子菜单内置元素数据字段中。

本发明具有以下有益效果及优点：

1.本发明采用更为丰富的编辑形式来操作配置元素，可以以点击或局部代码编辑的方式快速的更改元素

2.本发明可以在配置过程中根据不同场景实时的做出元素调整，灵活的更高、操作更方便、准确度更高

3.本发明规避了原始开发方式中在IDE中找到对应的元素逻辑再进行修改，再到保存代码解析加载的过程。该方法可以直接一键在Web页面中加载编译器，直接调取所要修改元素的代码，更准确、更直接、更方便以及更高效的方式完成操作

附图说明

图1为本发明系统示意图。

图2为本发明方法流程图。

具体实施方式

为了使本发明的目的、技术方案以及优点等更加清楚明确，在这里举出实际例子并参考附图进行进一步的说明。

一种图表配置元素数据模型的二次编辑方法，包括以下步骤：

首先需要梳理下进入二次编辑配置元素的整个流程，主要分为用户通过已授权的账号ID和密码登录平台，填写项目的基本信息完成项目创建，完成项目的基本信息后需要设置项目的层级关系，层级关系搭建好后需要对每个层级下的每个子节点进行页面元素配置，按需配置页面元素并且用户可以根据需求对提供好的静态元素进行二次编辑样式及数据等，并可以对元素按需要进行实时的增删改查等操作，最后通过多个元素组建完成子节点页面搭建，整个搭建过程就需要通过以上六个步骤；

用户通过已授权的账号ID进行登录平台，即用户需要首先获得使用平台的权限，平台对账号进行授权后，发放给用户，用户才能通过发放的账户进行登录平台，并进行相关的创建项目、修改和配置项目等一系列操作。

填写基本项目信息完成项目创建，即用户登录平台后，需要创建属于自己的专属项目，项目的基本信息具体包括，项目名称、项目描述、项目分类、项目的LOGO，项目名称以一个必填项的形式标记，要求用户必须为项目设置一个专属的名称，为后续更加丰富的项目做基本的标识，项目描述即对该项目可以备注一些相关的信息，让其他用户可以通过描述更加快速直观的了解项目的功能等信息，项目分类可以给我们所创建的项目进行归类，后续创建的项目多了，方便管理，可以根据自己的需要创建新的分类等，项目LOGO我们可以根据自己的需求进行上传相关具有体现项目特色意义的图片，丰富项目的美观度和辨识度等。通过AJAX技术将相关数据发送到后端。

项目的层级关系，即项目的菜单结构，这里我们通过可视化的结构图来创建项目菜单，结构图可以一览项目的整体结构关系，更清晰更方便，该操作可以将系统清楚的划分为几个模块，每个模块下分为哪几个子节点，一般来说反映一个项目的整体结构关系我们通常会以菜单导航的方式进行展现，这也是所有项目都有一个导航菜单的原因。

对每个子节点进行页面元素配置，即系统菜单的下拉子菜单，每个子菜单则对应一个页面，一个页面由若干元素组成，组成页面这些元素，通常来说都是分块的进行代码编写实现，但是在无代码平台中都是提供好丰富的组成页面的静态元素，以点击和拖拽的形式快速的按需配置出来的。这里举例说明的该无代码平台是以点击左侧元素库中提供好的元素，然后中间的视图区域生产相同的配置元素，用户可以按需要配置出自己的页面。

对静态元素进行二次编辑样式及数据等，即用户根据需求对所有配置的静态元素进行二次编辑样式和数据配置，这里以图表举例，点击左侧组件区域折线图，在中间视图区域则展示平台提供好的静态折线图组件，因为需求的原因该折线图的样式、数据等可能不是用户所需要的，这时就需要用户对该元素进行一个二次的编辑，按照具体的需求去改变元素的样式和数据等配置项。本发明在视图区的右侧提供了对元素样式以及数据的配置区域，用户可以点击右侧提供的丰富配置选项进行操作折线图的每条线的颜色、是否需要标题及标题名称、标题的字体颜色、标题的对齐方式、Y轴添加单位、是否需要图例、图例字体颜色、图例的摆放位置、是否给折线增加区域覆盖、是否设置为直角折线、是否显示轴线、X轴及字体颜色、Y轴及字体颜色、以及四周的留白设置等丰富的样式操作，对于样式的二次编辑后，切换右侧菜单到数据项，则可以根据需求从数据库中选取需要的数据进行展示，也可以自定义的方式手动的输入X、Y对应的数据。在此种配置方式外、本发明又增加了一种视图内植入代码编辑器的方式、进行对样式和数据以编码的方式进行操作，该方式可以更加直接、更准确的对样式和数据进行二次编辑。

最后通过多个元素组建完成子节点页面搭建，即用户按照需求对多个元素进行相关的增删改查操作后，最终留下的配置项点击保存后即可生成一个完整的页面，重复以上操作，即可按需求定制出一套符合个性化需求的子系统。

参见图1,这是软件系统的整体架构图。

当用户登录平台后，可以选择新建项目或者在项目列表中选择已有的项目进行配置，这里选择新建项目，用户通过填写项目基本信息后，配置好项目的菜单后，即可进入项目进行页面的配置，该平台一共为用户准备的五大类组件库，分别为图表库、通用库、扩展库、组态库、模板库等。

图表库，即常规的图表，柱状图、折线图、饼状图、散点图、雷达图等等。

通用库，即文本、表格、图片、时间、地图、iframe、数字滚动、卡片等。

扩展库，即用户根据自己的需求进行元素组合，然后生成新的组合元素，支持自定义扩展。

组态库，即工业流程图、用户可以模拟出一套生产流程图。

模板库，即平台提供了若干种风格的页面模板，可以供用户使用。

用户选择相应的组件库中的元素，点击要选择元素即可在中间的视图区展示相应的元素、本发明能够解决平台中提供元素的局限性、提高元素的灵活行，本发明支持用户在配置过程中实时更改元素的样式及数据等操作，这里用柱状图举例说明，用户点击图表库中的柱状图元素，在页面中间视图展示区域即可生成相应的柱状图图表，同时页面右侧则展示对应图表的样式和数据配置区域，在这里我们可以对柱状图的样式和数据进行再次的编辑，具体的操作如下步骤：

1、样式配置区：

(1)我们可以给该元素选择是否设置题目以及用户自定义题目

(2)修改该元素的背景颜色，背景支持用户上传图片作为背景

(3)可以用户自定义柱状图柱子的颜色

(4)可以选择性的为柱状图设置标题、标题的颜色、标题的对齐方式

(5)可以选择为Y轴数据添加自定义单位

(6)选择是否保留图例组件、图例字体颜色、图例的对齐方式等

(7)选择是否保留默认的刻度线以及刻度线的颜色

(8)X、Y轴的字体及轴线颜色设置

(9)图表的四周留白设置等

2、数据配置区：

(一)数据库配置数据：

(1)在数据表中选取数据源，通过数据源获得对应的返回字段

(2)通过返回的字段以拖拽的形式配置X、Y轴数据

(二)自定义配置数据：

(1)手动输入X轴数据可以选择性为Y轴命名

(2)手动输入Y轴数据可以增加多个Y轴并命名Y轴

本发明特别添加了以代码的方式进行二次编辑数据和样式，具体操作如下

点击柱状图模块标题区域，鼠标滑过标题框会出现编辑和删除图标，点击编辑图标则会以弹出框的形式获取该元素的对应代码以及代码的标准格式，上述所提到更改都可以以代码的方式支持更改样式和数据。

如图2所示，为本发明方法流程图。

综上所述，本发明的方法，针对无代码平台内置的配置元素可编辑的局限性进行了优化，提高了平台生成页面的效率，进一步提升了用户体验。本发明操作简单、对技术无特殊要求，适合大众人群。本发明有效的提高无代码平台的开发效率、更准确、更直接、更方便，以及它的灵活性更高，易用性更友好，适合推广使用。

当项目建立完成后，进入到元素配置页面，根据需求选取对应的元素数据模型进行二次编辑。事例如下：

当选取柱状图时，柱状图元素数据模型接受到视图展示命令时，从元素库中获取柱状图元素数据模型ID，通过ID匹配获取柱状图模型的Json数据，我们可以基于这段JSON利用canvas技术将JSON的组织结构绘制成图表，并在配置页面上显示。

当柱状体展示到配置页面中，在配置页面的右侧会通过匹配柱状图的Json数据格式展示对应的样式属性配置项(标题名称、标题位置、标题颜色、图表的图例、图例朝向、图例位置、图例颜色、图例字体颜色、刻度线、轴线颜色、X轴颜色、Y轴颜色，以及四周留白等)。

当通过颜色块选择器选取对应的标题颜色时、颜色选择器会保存当前颜色的色值，通过setOption方法将保存的色值进行替换原有的颜色值进行替换、重新渲染新的柱状图元素数据模块。

根据以上方法可以实现二次编辑所有对应的样式属性配置项。

当切换数据配置时，所有的元素数据模型的数据配置方式有两种：

(1)数据源配置

数据源配置即当以数据源方式配置柱状图元素数据模型时，通过封装好的axios方式请求数据库，将所有返回的数据展示到数据表中，选取对应的数据表，再次发送axios请求，在字段的textarea中将所有返回的字段进行展示，通过拖拽的方式将对应的字段分别拖放到对应的X、Y轴输入框中后，触发输入框中的onchange方法，实时将对应的X、Y轴数据保存到柱状图的option数据中，再次通过setOption的方法绘制新的柱状图元素数据模型。

(2)自定义配置

自定义配置即用户手动输入标准的数据格式到对应的X、Y轴输入框中，触发onchange方法，实时将对应的X、Y轴数据保存到柱状图的option数据中，通过setOption的方法绘制新的柱状图元素数据模型。

当在配置页面的右侧触发详细配置按钮时，同时发出弹出模态框指令，配置页面接收到该指令后，页面弹出模态框的同时，模态框中的codemirror同时通过setValue的方法获取到当前柱状图元素模型数据的option数据源代码并展示到模态框中的编辑器内；当用户通过编辑代码的方式修改了codemirror中的源代码并保存时，codemirror会将保存后的源代码进行内部的编辑，再次转化为新的option的数据格式，替换config配置页面中原有的option，再次通过setOption的方法将新的option数据加载到页面中，渲染新的柱状图元素数据模型。