CN114385228B - 一种可视化产品的实施方法、装置、服务器和存储介质 - Google Patents

Abstract

本申请涉及一种可视化产品的实施方法、装置、服务器和存储介质，属于可视化项目搭建技术领域，所述方法包括：在目标可视化项目搭建完成后，加载预设的项目打包模板；根据目标可视化项目包含的目标页面，获取目标页面的所有配置数据所需的数据、必要插件和图片；将数据、必要插件和图片，分别填充至项目打包模板；在填充完所述目标可视化项目的所有页面的数据后，生成并公布目标可视化项目的打包文件，以使用户获取打包文件，基于打包文件部署目标可视化项目。采用本申请，可以简化可视化页面的访问过程，增强可视化页面相对用户的归属感。

Description

一种可视化产品的实施方法、装置、服务器和存储介质

技术领域

本申请涉及可视化项目搭建技术领域，尤其涉及一种可视化产品的实施方法、装置、服务器和存储介质。

背景技术

数据可视化是指通过图表、图形从多维度展示数据内容，以更为明确、有效地展示数据中蕴含的信息。数据可视化产品一般是指基于上述数据展示目的，对数据进行整理分析后，以特定形式显示给用户的计算机应用程序或者网络服务页面。

目前用户可以在可视化产品平台上，利用平台提供的可视化产品搭建工具搭建数据可视化项目。之后，用户可以通过可视化项目所对应的固定的URL，访问上述已搭建好的可视化项目中的页面，从而可以基于其中显示出的数据图表、图形开展后续数据相关的分析汇总等处理。

在实现本申请的过程中，发明人发现上述技术至少存在以下问题：

可视化项目是基于可视化产品平台搭建的，每次访问可视化项目中的页面时，均需要先访问可视化产品平台，然后通过可视化产品平台的内部链接跳转至对应的页面，一来整个页面访问过程比较繁琐，二来可视化项目的归属感不明确。

发明内容

为了简化可视化项目中页面的访问过程，增强可视化项目相对用户的归属感，本申请实施例提供了一种可视化产品的实施方法、装置、服务器和存储介质。所述技术方案如下：

第一方面，本申请实施例提供了一种可视化产品的实施方法，所述方法包括：

在目标可视化项目搭建完成后，加载预设的项目打包模板，所述项目打包模板至少包括项目通用数据、数据存储区、图片存储区、插件存储区和页面框架数据；

根据所述目标可视化项目包含的目标页面，在所述数据存储区中创建所述目标页面对应的页面数据、静态数据和交互节点的空白的js文件；

根据所述页面框架数据生成所述目标页面的页面index文件，并将所述目标页面对应的三个所述js文件的文件路径填充至所述页面index文件；

获取所述目标页面的所有配置数据，其中所述配置数据包括页面基础信息、组件信息和交互数据；

根据所述配置数据，获取页面数据、组件静态数据、交互节点数据，以及页面所需的必要插件和图片；

将所述页面数据、所述组件静态数据和所述交互节点数据分别填充至三个所述js文件中，并将所述必要插件和所述图片分别填充至所述插件存储区和所述图片存储区；

在填充完所述目标可视化项目的所有页面的数据后，生成并公布所述目标可视化项目的打包文件，以使用户获取所述打包文件，基于所述打包文件部署所述目标可视化项目。

基于上述技术方案，可视化产品平台搭建可视化项目后，用户可以通过打包文件在本地部署可视化项目，因此可以直接通过用户侧网络设备完成可视化项目中页面的访问，简化了页面访问过程，同时可以增强可视化项目相对用户的归属感。

可选的，所述方法还包括：

接收针对所述目标可视化项目的修改请求，确定所述修改请求关联的数据内容；

在所述目标可视化项目的打包文件中确定所述数据内容的关联存储位置；

反馈携带有所述关联存储位置的页面修改指示信息。

基于上述技术方案，用户需要对可视化项目进行修改时，可视化产品平台可以指出打包文件中需要修改的数据的存储位置，便于用户对可视化项目进行准确高效的修改。

可选的，所述方法还包括：

接收针对所述目标可视化项目的修改请求，确定所述修改请求关联的数据内容；

基于所述数据内容在修改前后所对应的数据、必要插件和图片，对所述目标可视化项目的打包文件进行更新；

公布更新后的打包文件，以使用户获取更新后的打包文件，并基于更新后的打包文件重新部署目标可视化项目。

基于上述技术方案，用户需要对可视化项目进行修改时，可视化产品平台可以直接在打包文件中完成修改操作，并将修改后的打包文件重新提供给用户，这样既可以保证可视化项目的修改准确无误，又可以简化用户对可视化项目的修改过程。

可选的，所述方法还包括：

在目标可视化项目搭建完成后，基于可视化平台数据库部署所述目标可视化项目；

记录部署过程中所述可视化平台数据库的资源调取数据量；

在所述打包文件生成后，统计所述数据存储区、所述图片存储区和所述插件存储区中的总数据量；

若所述总数据量与所述资源调取数据量的差值大于预设阈值，则重新执行项目打包模板的数据填充处理。

基于上述技术方案，通过比对资源调取数据量和项目打包模板中的数据填充量，可以对数据填充的完整性和准确性进行有效检测。

可选的，所述项目打包模板还包括公共插件存储区；

所述在目标可视化项目搭建完成后，加载预设的项目打包模板，包括：

在目标可视化项目搭建完成后，确定目标可视化项目所属的项目类型，加载预设的所述项目类型对应的项目打包模板，所述项目打包模板的公共插件存储区内存储有所述项目类型对应的公共插件。

基于上述技术方案，针对不同项目类型在项目打包模板设置对应的公共插件存储区，并预先存储项目类型下所有可视化产品的公共插件，可以提高可视化产品的数据打包效率。

可选的，所述方法还包括：

统计所述页面数据、所述组件静态数据、所述交互节点数据，以及所述必要插件和图片中数据量最大的多份数据元素；

确定所述目标可视化项目的产品接收端中已存储的目标数据元素，获取所述产品接收端中所述目标数据元素的存储路径；

从所述页面数据、所述组件静态数据、所述交互节点数据，以及所述必要插件和图片中剔除所述目标数据元素，并将所述目标数据元素的存储路径填充至对应的页面index文件。

基于上述技术方案，在对可视化产品进行数据打包时，可以结合产品接收端的数据存储情况，省去部分数据量较大的数据元素，可以提高数据打包的速度，减少后续的数据传输量。

可选的，所述方法还包括：

在更新所述目标可视化项目时，确定项目更新内容；

获取可视化平台数据库中所述项目更新内容对应的更新数据、更新插件和更新图片的存储路径；

根据所述项目更新内容和所述存储路径调整所述目标可视化项目的页面index文件，并将所述页面index文件发送至所述目标可视化项目的产品接收端。

基于上述技术方案，可视化产品平台通过更新并发布页面index文件实现可视化产品的更新，可以简化可视化产品的更新过程，提高可视化产品的更新效率。

第二方面，本申请实施例提供了一种可视化产品的实施装置，所述装置包括：

打包模板加载模块，用于在目标可视化项目搭建完成后，加载预设的项目打包模板，所述项目打包模板至少包括项目通用数据、数据存储区、图片存储区、插件存储区和页面框架数据；

js文件创建模块，用于根据所述目标可视化项目包含的目标页面，在所述数据存储区中创建所述目标页面对应的页面数据、静态数据和交互节点的空白的js文件；

index文件配置模块，用于根据所述页面框架数据生成所述目标页面的页面index文件，并将所述目标页面对应的三个所述js文件的文件路径填充至所述页面index文件中；

配置数据获取模块，用于获取所述目标页面的所有配置数据，其中所述配置数据包括页面基础信息、组件信息和交互数据，根据所述配置数据，获取页面数据、组件静态数据、交互节点数据，以及页面所需的必要插件和图片；

模板数据填充模块，用于将所述页面数据、所述组件静态数据和所述交互节点数据分别填充至三个所述js文件中，并将所述必要插件和所述图片分别填充至所述插件存储区和所述图片存储区；

打包文件公布模块，用于在填充完所述目标可视化项目的所有页面的数据后，生成并公布所述目标可视化项目的打包文件，以使用户获取所述打包文件，基于所述打包文件部署所述目标可视化项目。

可选的，所述装置还包括页面更新模块，用于：

接收针对所述目标可视化项目的修改请求，确定所述修改请求关联的数据内容；

在所述目标可视化项目的打包文件中确定所述数据内容的关联存储位置；

反馈携带有所述关联存储位置的修改指示信息。

可选的，所述装置还包括页面更新模块，用于：

接收针对所述目标可视化项目的修改请求，确定所述修改请求关联的数据内容；

基于所述数据内容在修改前后所对应的数据、必要插件和图片，对所述目标可视化项目的打包文件进行更新；

公布更新后的打包文件，以使用户获取更新后的打包文件，并基于更新后的打包文件重新部署目标可视化项目。

可选的，所述装置还包括打包检测模块，用于：

在目标可视化项目搭建完成后，基于可视化平台数据库部署所述目标可视化项目；

记录部署过程中所述可视化平台数据库的资源调取数据量；

在所述打包文件生成后，统计所述数据存储区、所述图片存储区和所述插件存储区中的总数据量；

若所述总数据量与所述资源调取数据量的差值大于预设阈值，则重新执行项目打包模板的数据填充处理。

可选的，所述项目打包模板还包括公共插件存储区；

所述打包模板加载模块，具体用于：

在目标可视化项目搭建完成后，确定目标可视化项目所属的项目类型，加载预设的所述项目类型对应的项目打包模板，所述项目打包模板的公共插件存储区内存储有所述项目类型对应的公共插件。

可选的，所述装置还包括数据去重模块，用于：

统计所述页面数据、所述组件静态数据、所述交互节点数据，以及所述必要插件和图片中数据量最大的多份数据元素；

确定所述目标可视化项目的产品接收端中已存储的目标数据元素，获取所述产品接收端中所述目标数据元素的存储路径；

从所述页面数据、所述组件静态数据、所述交互节点数据，以及所述必要插件和图片中剔除所述目标数据元素，并将所述目标数据元素的存储路径填充至对应的页面index文件。

可选的，所述装置还包括页面更新模块，用于：

在更新所述目标可视化项目时，确定项目更新内容；

获取可视化平台数据库中所述项目更新内容对应的更新数据、更新插件和更新图片的存储路径；

根据所述项目更新内容和所述存储路径调整所述目标可视化项目的页面index文件，并将所述页面index文件发送至所述目标可视化项目的产品接收端。

第三方面，本申请实施例提供了一种服务器，所述服务器包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如第一方面所述的可视化产品的实施方法。

第四方面，本申请实施例提供了一种计算机可读存储介质，所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由处理器加载并执行以实现如第一方面所述的可视化产品的实施方法。

综上所述，本申请具有以下有益效果：

采用本申请公开的可视化产品的实施方法，可视化产品平台基于HTML文件搭建项目打包模板，在可视化项目搭建完成后，可以在项目打包模板中填充可视化项目的配置数据，生成可视化项目的打包文件。之后，用户可以从可视化产品平台处下载可视化项目的打包文件，并基于打包文件在用户侧网络设备上部署可视化项目。这样，可视化产品平台搭建可视化项目后，用户可以通过打包文件在本地部署可视化项目，因此可以直接通过用户侧网络设备完成可视化项目中页面的访问，简化了页面访问过程，同时可以增强可视化项目相对于用户的归属感。

附图说明

图1为本申请实施例中可视化产品的实施方法流程图；

图2为本申请实施例中项目打包模板的结构示意图；

图3为本申请实施例中可视化产品的修改流程图；

图4为本申请实施例中可视化产品的修改流程图；

图5为本申请实施例中可视化产品的实施装置结构示意图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图1-5及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本申请，并不用于限定本申请。

本申请实施例提供了一种可视化产品的实施方法，该方法的执行主体可以是可视化产品平台的后台服务器，可视化产品平台可以用于对数据进行收集、整合、分析，以图表图形的形式对外输出数据内容，从而实现数据的可视化展示。可视化产品平台可以具备数据接收、处理以及显示的功能，在接收到待展示的数据后，可视化产品平台基于其内置的数据处理逻辑对待展示的数据进行整理分析，再按照预设的展示形式对外输出可视化产品，以使用户通过可视化产品了解数据所包含的多维信息和规律。

下面将结合具体实施方式，对图1所示的处理流程进行详细的说明，内容可以如下：

步骤101，在目标可视化项目搭建完成后，加载预设的项目打包模板。

其中，项目打包模板至少包括项目通用数据、数据存储区、图片存储区、插件存储区和页面框架数据。

在实施中，可视化产品平台在创建可视化产品的过程中，可以基于HTML文件的基础框架，搭建项目打包模板。该项目打包模板可以是用于对可视化产品进行打包的通用模板，尤其可以是针对可视化项目中页面的打包模板，其中可以包含部署可视化项目中页面呈现所需的全部数据内容。具体的，参考HTML文件的内容构成，项目打包模板可以包括项目通用数据、数据存储区、图片存储区、插件存储区和页面框架数据，如图2所示，项目通用数据可以存储在“common”文件夹中，其中“css”文件可以用于记录项目中页面整体样式，“fonts”文件可以用于记录项目中的文字样式，“iconfont”文件可以用于记录项目中的图标样式，“images-back”文件可以用于记录项目中页面背景图片的相关数据，“js”文件可以用于记录项目中的基础脚本；数据存储区“data”文件、图片存储区“image”文件和插件存储区“plugin”文件可以分别用于存储项目中各页面的数据、图片和插件；页面框架数据可以存储在“index.html”文件中。这样，可视化产品平台在搭建了一个可视化项目（如目标可视化项目）之后，可以利用上述已搭建的项目打包模板，对可视化项目进行打包，即加载预设的项目打包模板。

步骤102，根据目标可视化项目包含的目标页面，在数据存储区中创建目标页面对应的页面数据、静态数据和交互节点的空白的js文件。

其中，目标页面可以是目标可视化项目中包含的任一页面。

在实施中，可视化产品平台加载了项目打包模板之后，可以统计目标可视化项目包含的页面，然后对于其中的每个页面（如目标页面），可以在数据存储区中创建目标页面对应的页面数据、静态数据和交互节点对应的空白的js文件，分别用于存储目标页面的页面基础信息、组件静态数据和交互节点数据。此处，每个页面均可以单独对应一个页面数据的js文件、一个静态数据对应的js文件和一个交互节点的js文件。

步骤103，根据页面框架数据生成目标页面的页面index文件，并将目标页面对应的三个js文件的文件路径填充至页面index文件中。

在实施中，可视化产品平台可以将index.html文件中的页面框架数据存入indexStr变量中，再由indexStr变量生成目标页面的页面index文件，并将步骤102中创建的目标页面对应的三个js文件的文件路径填充至目标页面的页面index文件中，即将页面index文件的数据索引设置为数据存储区中页面、静态数据和交互节点对应的三个js文件。同理，对于目标可视化项目的其它页面，可视化产品平台也可以先生成每个其它页面的页面index文件，然后将对应的js文件的文件路径填充至页面index文件中。

步骤104，获取目标页面的所有配置数据。

其中，配置数据包括页面基础信息、组件信息和交互数据。

在实施中，在创建目标页面对应的空白的js文件后，可视化产品平台可以根据目标页面的标识信息，在平台数据库中查询目标页面的所有配置数据，该配置数据可以包括页面基础信息、组件信息和交互数据。其中，页面基础信息可以包含页面ID、页面名称、页面主题、页面预览图等信息，组件信息可以包含组件ID、组件名称、组件位置、组件尺寸、组件数据、组件配置、组件版本等信息，交互数据可以包含交互事件和交互动作相关的数据。

步骤105，根据配置数据，获取页面数据、组件静态数据、交互节点数据，以及页面所需的必要插件和图片。

在实施中，可视化产品平台获取到的目标页面的配置数据可以采用pagelist的形式记录，基于此，可视化产品平台可以循环pagelist，依序获取目标页面的页面数据、组件静态数据、交互节点数据，以及页面所需的必要插件和图片。其中，组件静态数据可以为配置在组件中的静态数据。

步骤106，将页面数据、组件静态数据和交互节点数据分别填充至三个js文件中，并将必要插件和图片分别填充至插件存储区和图片存储区。

在实施中，可视化产品平台可以将页面数据、组件静态数据和交互节点数据分别填充至目标页面对应的三个js文件中，并将必要插件和图片分别填充至插件存储区和图片存储区内，并将页面index文件中数据、插件和图片的下载地址更改为在上述项目打包模板中对应的存储路径。值得一提的是，在数据存储区中，目标可视化项目的所有页面的数据可以以js文件的形式分别存储，即不同页面的数据不相互交叉混合，在图片存储区和插件存储区中，目标可视化项目的所有页面所涉及的图片和插件共同混合存储在一起，未明确地按照页面进行划分。同时，在图片存储区和插件存储区中存储的一份数据元素，可能会被目标可视化项目中的多个页面共同引用，相应的，在图片存储区和插件存储区内填充数据时，可以执行数据去重处理。

步骤107，在填充完目标可视化项目的所有页面的数据后，生成并公布目标可视化项目的打包文件，以使用户获取打包文件，基于打包文件部署目标可视化项目。

在实施中，可视化产品平台在项目打包模板中存储完目标可视化项目的所有页面的数据、必要插件和图片后，可以对填充数据后的项目打包模板进行压缩，从而生成目标可视化项目的打包文件。之后，可视化产品平台可以公布打包文件，从而目标可视化项目的产品需求方（即用户）可以从可视化产品平台处下载打包文件，并基于打包文件在用户侧网络设备上部署目标可视化项目。

可选的，对可视化项目进行修改时，至少可以存在如下两种流程：

流程一，可以参考图3所示：

步骤301，接收针对目标可视化项目的修改请求，确定修改请求关联的数据内容。

在实施中，用户需要对目标可视化项目进行修改时，可以标记需要修改的数据内容，并可以通过用户侧网络设备向可视化产品平台发送带有上述标记的修改请求。相应的，可视化产品平台可以接收到针对目标可视化项目的修改请求，并可以进一步根据修改请求中的标记确定关联的数据内容，即需要进行修改的数据内容。

步骤302，在目标可视化项目的打包文件中确定数据内容的关联存储位置。

在实施中，可视化产品平台在确定了需要修改的数据内容后，可以在项目打包模板中确定出这些数据内容的关联存储位置。例如，需要修改的数据内容为组件A，那么可以先确定组件A所关联的数据内容，包含数据X、插件a1-a3、图片1-3，再查找数据X在数据存储区中的存储位置，插件a1-a3在插件存储区中的存储位置以及图片1-3在图片存储区中的存储位置。

步骤303，反馈携带有关联存储位置的修改指示信息。

在实施中，可视化产品平台在确定数据内容的关联存储位置后，可以向用户侧网络设备反馈携带有关联存储位置的修改指示信息，以用来指示用户在用户侧网络设备上对已部署的打包文件进行对应修改。这样，用户侧网络设备接收到修改指示信息后，可以参照其中的关联存储位置，对目标可视化项目的打包文件进行针对性地修改。

流程二，可以参考图4所示：

步骤401，接收针对目标可视化项目的修改请求，确定修改请求关联的数据内容。

此处的详细处理具体可以参考步骤301。

步骤402，基于数据内容在修改前后所对应的数据、必要插件和图片，对目标可视化项目的打包文件进行更新。

在实施中，可视化产品平台在确定了需要修改的数据内容后，可以在目标可视化项目的打包文件中查找数据内容修改前对应的原数据、原必要插件和原图片（可称为原数据内容），并同时可以获取数据内容修改后对应的新数据、新必要插件和新图片（可称为新数据内容）。之后，可视化产品平台可以基于上述数据内容对目标可视化项目的打包文件进行更新，即利用新数据内容对原数据内容一一进行替换。可以理解，区别于图3所示流程，该流程的修改请求中可以携带有修改后的数据内容，从而可视化产品平台可以直接从修改请求中获取更新打包文件所需的数据内容。当然，可视化产品平台也可以基于修改请求，在本地数据库中调取修改所需的新数据内容。

步骤403，公布更新后的打包文件，以使用户获取更新后的打包文件，并基于更新后的打包文件重新部署目标可视化项目。

在实施中，可视化产品平台对目标可视化项目的打包文件进行更新后，可以公布更新后的打包文件。继而，用户可以通过可视化产品平台下载更新后的打包文件，并基于更新后的打包文件重新在用户侧网络设备上部署目标可视化项目。

值得一提的是，上述两种目标可视化项目的更新流程可以视可视化产品平台是否能够获取到修改后的新数据内容而定，即可视化产品平台接收到目标可视化项目的修改请求后，如果可以通过修改请求获知修改所需的新数据内容，且可以获取到新数据内容，则可以执行图4所示流程，否则按照图3所示流程执行。

可选的，可视化产品完成后，可以利用在线搭建+数据统计的方式，检测数据打包的完整性和准确度，相应的处理可以如下：在目标可视化项目搭建完成后，基于可视化平台数据库部署目标可视化项目；记录部署过程中可视化平台数据库的资源调取数据量；在打包文件生成后，统计数据存储区、图片存储区和插件存储区中的总数据量；若总数据量与资源调取数据量的差值大于预设阈值，则重新执行项目打包模板的数据填充处理。

在实施中，在搭建完成目标可视化项目后，可视化产品平台可以先基于可视化平台数据库在平台内部署目标可视化项目，同时可以记录在目标可视化项目的部署过程中平台对于数据库中数据资源的调取量，即资源调取数据量。这样，在生成打包文件后，可视化产品平台可以统计打包文件的数据存储区、图片存储区和插件存储区三者中的总数据量，并将总数据量与上述资源调取数据量进行比对。如果总数据量与资源调取数据量的差值大于预设阈值，则可以推定对目标可视化项目打包的过程中，存在数据遗漏或者数据重复的情况，因此可视化产品平台可以重新执行针对目标可视化项目的项目打包模板的数据填充处理。需要说明的是，在可视化产品平台的服务体系中，平台框架可以大致分为前端和后端两大部分，项目打包模板可以由前端开发人员提供，其中数据存储区、插件存储区和图片存储区中的内容需要从后端获取对应资源进行填充，故而，可以利用在线项目访问过程中后端的资源调取量来评估项目打包模板的数据填充情况。

可选的，在项目打包模板中可以针对公共插件设置专用的公共插件存储区，相应的，步骤101的处理可以如下：在目标可视化项目搭建完成后，确定目标可视化项目所属的项目类型，加载预设的项目类型对应的项目打包模板，项目打包模板的公共插件存储区内存储有项目类型对应的公共插件。

在实施中，可视化产品平台可以支持不同项目类型下的不同产品的搭建，其中多个产品按照实际功能又可以归属于同一项目类型，每个项目类型可以对应一个项目打包模板，该项目打包模板中可以设置有公共插件存储区，公共插件存储区内可以存储有该项目类型下所有可视化项目均需调用的公共插件。因此，在目标可视化项目搭建完成后，且在对目标可视化项目进行打包前，可视化产品平台可以先确定目标可视化项目所属的项目类型，然后加载预设的该项目类型对应的项目打包模板。这样，提前将公共插件部署在项目打包模板中，可以提高后续的打包文件的生成效率，简化打包过程。

可选的，可以基于不同用户侧网络设备上的数据存储情况，调整可视化产品的打包文件生成过程，相应的可以存在如下处理：统计页面数据、组件静态数据、交互节点数据，以及必要插件和图片中数据量最大的多份数据元素；确定目标可视化项目的产品接收端中已存储的目标数据元素，获取产品接收端中目标数据元素的存储路径；从页面数据、组件静态数据、交互节点数据，以及必要插件和图片中剔除目标数据元素，并将目标数据元素的存储路径填充至对应的页面index文件。

其中，目标数据元素可以是任一数据元素。

在实施中，可视化产品平台根据目标可视化项目的配置数据，确定了需要打包的所有页面数据、组件静态数据、交互节点数据，以及必要插件和图片中（此处可统一称为数据元素）后，可以选取出数据量最大的多份数据元素，或者选取出数据量大于预设阈值的所有数据元素。之后，可视化产品平台可以检测目标可视化项目的产品接收端（即前述用户侧网络设备）中是否已存储有上述数据元素中的一个或多个。如果确定产品接收端中存储有目标数据元素，可视化产品平台可以获取目标数据元素的存储路径，并将目标数据元素在产品接收端中的存储路径填充至目标数据元素所属页面的页面index文件中。同时，可视化产品平台可以从步骤105中已获取的数据内容中剔除目标数据元素，从而可以在步骤106中将其余数据内容填充至项目打包模板中。这样，对于数据量较大的数据元素，预先检测用户侧网络设备中是否存储有这些数据元素，并取消在项目打包模板中重复填充用户侧网络设备已存储的数据元素，一者可以缩减打包文件的数据量，提高数据打包的速度，减少后续的数据传输量，再者可以减少用户侧网络设备处出现重复存储大量相同数据的情况，提升了存储空间的利用率。

可选的，可视化产品平台可以通过更新页面index文件的方式，实现可视化产品的更新迭代，相应的，可以存在如下处理：在更新目标可视化项目时，确定项目更新内容；获取可视化平台数据库中项目更新内容对应的更新数据、更新插件和更新图片的存储路径；根据项目更新内容和存储路径调整目标可视化项目的页面index文件，并将页面index文件发送至目标可视化项目的产品接收端。

在实施中，可视化产品平台可以定期检测可视化产品是否存在更新需求，如可视化产品中的数据是否需要修改，或者插件是否需要升级，或者图片是否需要调整等。如果确定存在更新需求，以目标可视化项目为例，可视化产品平台可以先确定目标可视化项目的项目更新内容，然后从可视化平台数据库中查找本次更新所需的数据内容，可分别称为更新数据、更新插件和更新图片。进一步的，可视化产品平台可以获取该数据内容的存储路径，再根据存储路径和项目更新内容对目标可视化项目的页面index文件进行调整，即将页面index文件中涉及项目更新内容的数据加载索引修改为上述存储路径，并最终可以将调整后的页面index文件发送至目标可视化项目的产品接收端。这样，产品接收端接收到调整后的页面index文件后，可以覆盖本地已存储的页面index文件，并基于调整后的页面index文件重新部署目标可视化项目。

值得一提的是，当用户在使用可视化项目时，若发现某一可视化页面无法正常显示，则可以控制用户侧网络设备向可视化产品平台发送携带有该可视化页面的页面ID的页面报错信息。继而，可视化产品平台可以基于该页面ID，重新生成可视化页面对应的js文件，并确定可视化页面的专用插件和专用图片，从而可以将js文件、专用插件和专用图片一并打包后发送至用户侧网络设备，以使用户侧网络设备重新部署可视化项目。而可视化产品平台若接收到携带有多个页面ID的页面报错信息，则可以先确定多个页面ID所对应的多个可视化页面的共用插件或图片，然后向用户侧网络设备发送共用插件或图片，以使用户侧网络设备重新部署可视化项目。

采用本申请公开的可视化产品的实施方法，可视化产品平台基于HTML文件搭建项目打包模板，在可视化项目搭建完成后，可以在项目打包模板中填充可视化项目的配置数据，生成可视化项目的打包文件。之后，用户可以从可视化产品平台处下载可视化项目的打包文件，并基于打包文件在用户侧网络设备上部署可视化项目。这样，可视化产品平台搭建可视化项目后，用户可以通过打包文件在本地部署可视化项目，因此可以直接通过用户侧网络设备完成可视化项目中页面的访问，简化了页面访问过程，同时可以增强可视化项目相对于用户的归属感。

基于相同的技术构思，本申请实施例还提供了一种可视化产品的实施装置，如图5所示，所述装置包括：

打包模板加载模块501，用于在目标可视化项目搭建完成后，加载预设的项目打包模板，所述项目打包模板至少包括项目通用数据、数据存储区、图片存储区、插件存储区和页面框架数据；

Js文件创建模块502，用于根据所述目标可视化项目包含的目标页面，在所述数据存储区中创建所述目标页面对应的页面数据、静态数据和交互节点的空白的js文件；

index文件配置模块503，用于根据所述页面框架数据生成所述目标页面的页面index文件，并将所述目标页面对应的js文件的文件路径填充至所述页面index文件中；

配置数据获取模块504，用于获取所述目标页面的所有配置数据，其中所述配置数据包括页面基础信息、组件信息和交互数据，根据所述配置数据，获取页面数据、组件静态数据、交互节点数据，以及页面所需的必要插件和图片；

模板数据填充模块505，用于将所述页面数据、所述组件静态数据和所述交互节点数据分别填充至三个所述js文件中，并将所述必要插件和所述图片分别填充至所述插件存储区和所述图片存储区；

打包文件公布模块506，用于在填充完所述目标可视化项目的所有页面的数据后，生成并公布所述目标可视化项目的打包文件，以使用户获取所述打包文件，基于所述打包文件部署所述目标可视化项目。

可选的，所述装置还包括页面更新模块，用于：

接收针对所述目标可视化项目的修改请求，确定所述修改请求关联的数据内容；

在所述目标可视化项目的打包文件中确定所述数据内容的关联存储位置；

反馈携带有所述关联存储位置的修改指示信息。

可选的，所述装置还包括页面更新模块，用于：

接收针对所述目标可视化项目的修改请求，确定所述修改请求关联的数据内容；

基于所述数据内容在修改前后所对应的数据、必要插件和图片，对所述目标可视化项目的打包文件进行更新；

公布更新后的打包文件，以使用户获取更新后的打包文件，并基于更新后的打包文件重新部署目标可视化项目。

可选的，所述装置还包括打包检测模块，用于：

在目标可视化项目搭建完成后，基于可视化平台数据库部署所述目标可视化项目；

记录部署过程中所述可视化平台数据库的资源调取数据量；

在所述打包文件生成后，统计所述数据存储区、所述图片存储区和所述插件存储区中的总数据量；

若所述总数据量与所述资源调取数据量的差值大于预设阈值，则重新执行项目打包模板的数据填充处理。

可选的，所述项目打包模板还包括公共插件存储区；

所述打包模板加载模块501，具体用于：

在目标可视化项目搭建完成后，确定目标可视化项目所属的项目类型，加载预设的所述项目类型对应的项目打包模板，所述项目打包模板的公共插件存储区内存储有所述项目类型对应的公共插件。

可选的，所述装置还包括数据去重模块，用于：

统计所述页面数据、所述组件静态数据、所述交互节点数据，以及所述必要插件和图片中数据量最大的多份数据元素；

确定所述目标可视化项目的产品接收端中已存储的目标数据元素，获取所述产品接收端中所述目标数据元素的存储路径；

从所述页面数据、所述组件静态数据、所述交互节点数据，以及所述必要插件和图片中剔除所述目标数据元素，并将所述目标数据元素的存储路径填充至对应的页面index文件。

可选的，所述装置还包括页面更新模块，用于：

在更新所述目标可视化项目时，确定项目更新内容；

获取可视化平台数据库中所述项目更新内容对应的更新数据、更新插件和更新图片的存储路径；

根据所述项目更新内容和所述存储路径调整所述目标可视化项目的页面index文件，并将所述页面index文件发送至所述目标可视化项目的产品接收端。

本申请实施例还提供了一种服务器，所述服务器包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如步骤101-步骤107所述的可视化产品的实施方法。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上均为本申请的较佳实施例，并非依此限制本申请的保护范围，本说明书（包括摘要和附图）中公开的任一特征，除非特别叙述，均可被其它等效或者具有类似目的的替代特征加以替换。即，除非特别叙述，每个特征只是一系列等效或类似特征中的一个例子而已。

Claims (10)

1.一种可视化产品的实施方法，其特征在于，所述方法包括：

在目标可视化项目搭建完成后，加载预设的项目打包模板，所述项目打包模板基于HTML文件的基础框架搭建，至少包括项目通用数据、数据存储区、图片存储区、插件存储区和页面框架数据；

根据所述目标可视化项目包含的目标页面，在所述数据存储区中创建所述目标页面对应的页面数据、静态数据和交互节点的空白的js文件，其中，每个页面均单独对应一个页面数据的js文件、一个静态数据对应的js文件和一个交互节点的js文件；

将index.html文件中的页面框架数据存入indexStr变量中，由indexStr变量生成目标页面的页面index文件，并将所述目标页面对应的三个所述js文件的文件路径填充至所述页面index文件；

获取所述目标页面的所有配置数据，其中所述配置数据包括页面基础信息、组件信息和交互数据；

根据所述配置数据，获取页面数据、组件静态数据、交互节点数据，以及页面所需的必要插件和图片；

将所述页面数据、所述组件静态数据和所述交互节点数据分别填充至三个所述js文件中，并将所述必要插件和所述图片分别填充至所述插件存储区和所述图片存储区，其中，在数据存储区中，目标可视化项目的所有页面的数据以js文件的形式分别存储，在图片存储区和插件存储区中，目标可视化项目的所有页面所涉及的图片和插件共同混合存储在一起；

在填充完所述目标可视化项目的所有页面的数据后，生成并公布所述目标可视化项目的打包文件，以使用户获取所述打包文件，基于所述打包文件部署所述目标可视化项目；

所述方法还包括：

当接收到携带可视化页面的页面ID的页面报错信息时，基于所述页面ID，重新生成可视化页面对应的js文件，并确定可视化页面的专用插件和专用图片，将js文件、专用插件和专用图片一并打包后发送至用户侧网络设备，以使用户侧网络设备重新部署可视化项目；

若接收到携带有多个页面ID的页面报错信息，则确定多个页面ID所对应的多个可视化页面的共用插件或图片，向用户侧网络设备发送共用插件或图片，以使用户侧网络设备重新部署可视化项目。

2.根据权利要求1所述的方法，其特征在于，所述方法还包括：

接收针对所述目标可视化项目的修改请求，确定所述修改请求关联的数据内容；

在所述目标可视化项目的打包文件中确定所述数据内容的关联存储位置；

反馈携带有所述关联存储位置的修改指示信息。

3.根据权利要求1所述的方法，其特征在于，所述方法还包括：

接收针对所述目标可视化项目的修改请求，确定所述修改请求关联的数据内容；

基于所述数据内容在修改前后所对应的数据、必要插件和图片，对所述目标可视化项目的打包文件进行更新；

公布更新后的打包文件，以使用户获取更新后的打包文件，并基于更新后的打包文件重新部署目标可视化项目。

4.根据权利要求1所述的方法，其特征在于，所述方法还包括：

在目标可视化项目搭建完成后，基于可视化平台数据库部署所述目标可视化项目；

记录部署过程中所述可视化平台数据库的资源调取数据量；

在所述打包文件生成后，统计所述数据存储区、所述图片存储区和所述插件存储区中的总数据量；

若所述总数据量与所述资源调取数据量的差值大于预设阈值，则重新执行项目打包模板的数据填充处理。

5.根据权利要求1所述的方法，其特征在于，所述项目打包模板还包括公共插件存储区；

所述在目标可视化项目搭建完成后，加载预设的项目打包模板，包括：

在目标可视化项目搭建完成后，确定目标可视化项目所属的项目类型，加载预设的所述项目类型对应的项目打包模板，所述项目打包模板的公共插件存储区内存储有所述项目类型对应的公共插件。

6.根据权利要求1所述的方法，其特征在于，所述方法还包括：

统计所述页面数据、所述组件静态数据、所述交互节点数据，以及所述必要插件和图片中数据量最大的多份数据元素；

确定所述目标可视化项目的产品接收端中已存储的目标数据元素，获取所述产品接收端中所述目标数据元素的存储路径；

从所述页面数据、所述组件静态数据、所述交互节点数据，以及所述必要插件和图片中剔除所述目标数据元素，并将所述目标数据元素的存储路径填充至对应的页面index文件。

7.根据权利要求1所述的方法，其特征在于，所述方法还包括：

在更新所述目标可视化项目时，确定项目更新内容；

获取可视化平台数据库中所述项目更新内容对应的更新数据、更新插件和更新图片的存储路径；

根据所述项目更新内容和所述存储路径调整所述目标可视化项目的页面index文件，并将所述页面index文件发送至所述目标可视化项目的产品接收端。

8.一种可视化产品的实施装置，其特征在于，所述装置包括：

打包模板加载模块，用于在目标可视化项目搭建完成后，加载预设的项目打包模板，所述项目打包模板基于HTML文件的基础框架搭建，至少包括项目通用数据、数据存储区、图片存储区、插件存储区和页面框架数据；

js文件创建模块，用于根据所述目标可视化项目包含的目标页面，在所述数据存储区中创建所述目标页面对应的页面数据、静态数据和交互节点的空白的js文件，其中，每个页面均单独对应一个页面数据的js文件、一个静态数据对应的js文件和一个交互节点的js文件；

index文件配置模块，用于将index.html文件中的页面框架数据存入indexStr变量中，由indexStr变量生成目标页面的页面index文件，并将所述目标页面对应的三个所述js文件的文件路径填充至所述页面index文件中；

配置数据获取模块，用于获取所述目标页面的所有配置数据，其中所述配置数据包括页面基础信息、组件信息和交互数据，根据所述配置数据，获取页面数据、组件静态数据、交互节点数据，以及页面所需的必要插件和图片；

模板数据填充模块，用于将所述页面数据、所述组件静态数据和所述交互节点数据分别填充至三个所述js文件中，并将所述必要插件和所述图片分别填充至所述插件存储区和所述图片存储区，其中，在数据存储区中，目标可视化项目的所有页面的数据以js文件的形式分别存储，在图片存储区和插件存储区中，目标可视化项目的所有页面所涉及的图片和插件共同混合存储在一起；

打包文件公布模块，用于在填充完所述目标可视化项目的所有页面的数据后，生成并公布所述目标可视化项目的打包文件，以使用户获取所述打包文件，基于所述打包文件部署所述目标可视化项目；

打包文件公布模块，还用于当接收到携带可视化页面的页面ID的页面报错信息时，基于所述页面ID，重新生成可视化页面对应的js文件，并确定可视化页面的专用插件和专用图片，将js文件、专用插件和专用图片一并打包后发送至用户侧网络设备，以使用户侧网络设备重新部署可视化项目；若接收到携带有多个页面ID的页面报错信息，则确定多个页面ID所对应的多个可视化页面的共用插件或图片，向用户侧网络设备发送共用插件或图片，以使用户侧网络设备重新部署可视化项目。

9.一种服务器，其特征在于，所述服务器包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如权利要求1至7任一所述的可视化产品的实施方法。

10.一种计算机可读存储介质，其特征在于，所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由处理器加载并执行以实现如权利要求1至7任一所述的可视化产品的实施方法。

Images