CN109656654A - 大屏场景的编辑方法及计算机可读存储介质 - Google Patents

Abstract

本发明公开了一种大屏场景的编辑方法及计算机可读存储介质，方法包括：根据大屏幕的分辨率以及编辑端的分辨率，调整画布操作面板的大小；创建组件模板对象；在画布中通过选取组件模板对象新增组件，将新增的组件加入到组件列表的尾部，并将新增的组件的层级属性值赋值为组件列表当前的长度值；对组件列表中的组件的层级顺序进行调整，并根据调整后的组件在组件列表中的层级顺序，对组件的层级属性值进行重新赋值；对画布中组件的组件属性进行编辑；若编辑的属性为预设的交互属性，则相应修改其他组件中交互属性的值。本发明可降低大屏的适配难度，缩短大屏场景的开发周期，可很好地体现数据关系。

Description

大屏场景的编辑方法及计算机可读存储介质

技术领域

本发明涉及显示编辑技术领域，尤其涉及一种大屏场景的编辑方法及计算机可读存储介质。

背景技术

通常展示的大屏的分辨率很大，但编辑的时候在常规PC端编辑，而PC端分辨率小，所以编辑的时候针对大屏的分辨率编辑展示和操作都很困难。

并且，现有的产品都是一些报表类型的展示，只关心数据而不关系数据之间的关系及展现方式。

因此，现有技术中，大屏场景的展示和编辑存在以下几个缺点：1、大屏场景开发周期长；2、体现数据关系难；3、大屏适配难；4、数据展现枯燥；5、纯数据展现体现不出场景与数据之间的关系。

发明内容

本发明所要解决的技术问题是：提供一种大屏场景的编辑方法及计算机可读存储介质，可降低大屏的适配难度，缩短大屏场景的开发周期，并可很好地体现数据关系。

为了解决上述技术问题，本发明采用的技术方案为：一种大屏场景的编辑方法，包括：

根据大屏幕的分辨率以及编辑端的分辨率，调整画布操作面板的大小，所述画布操作面板包括画布操作面板外层、画布操作面板内层和画布；

创建组件模板对象；

在画布中通过选取组件模板对象新增组件，将新增的组件加入到组件列表的尾部，并将新增的组件的层级属性值赋值为所述组件列表当前的长度值；

对所述组件列表中的组件的层级顺序进行调整，并根据调整后的组件在组件列表中的层级顺序，对组件的层级属性值进行重新赋值；

对画布中组件的组件属性进行编辑；

若编辑的属性为预设的交互属性，则相应修改其他组件中所述交互属性的值。

本发明还涉及一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现以下步骤：

根据大屏幕的分辨率以及编辑端的分辨率，调整画布操作面板的大小，所述画布操作面板包括画布操作面板外层、画布操作面板内层和画布；

创建组件模板对象；

在画布中通过选取组件模板对象新增组件，将新增的组件加入到组件列表的尾部，并将新增的组件的层级属性值赋值为所述组件列表当前的长度值；

对所述组件列表中的组件的层级顺序进行调整，并根据调整后的组件在组件列表中的层级顺序，对组件的层级属性值进行重新赋值；

对画布中组件的组件属性进行编辑；

若编辑的属性为预设的交互属性，则相应修改其他组件中所述交互属性的值。

本发明的有益效果在于：通过适应调整画布操作面板的大小，解决大屏适配难的问题；通过创建组件模板对象，并通过对组件模板对象进行选取、编辑，可快速配置大屏场景，解决大屏场景开发周期长的问题；通过配置组件之间的交互属性，使得组件与组件之间可以相互订阅组件事件，体现数据关系，从而解决体现数据关系难的问题。本发明可降低大屏的适配难度，缩短大屏场景的开发周期，并可很好地体现数据关系。

附图说明

图1为本发明的一种大屏场景的编辑方法的流程图；

图2为本发明实施例一的方法流程图；

图3为本发明实施例一的步骤S1的方法流程图。

具体实施方式

为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图详予说明。

本发明最关键的构思在于：调整画布操作面板的大小以适配大屏分辨率；动态配置组件属性；组件与组件之间配置交互属性。

请参阅图1，一种大屏场景的编辑方法，包括：

根据大屏幕的分辨率以及编辑端的分辨率，调整画布操作面板的大小，所述画布操作面板包括画布操作面板外层、画布操作面板内层和画布；

创建组件模板对象；

在画布中通过选取组件模板对象新增组件，将新增的组件加入到组件列表的尾部，并将新增的组件的层级属性值赋值为所述组件列表当前的长度值；

对所述组件列表中的组件的层级顺序进行调整，并根据调整后的组件在组件列表中的层级顺序，对组件的层级属性值进行重新赋值；

对画布中组件的组件属性进行编辑；

若编辑的属性为预设的交互属性，则相应修改其他组件中所述交互属性的值。

从上述描述可知，本发明的有益效果在于：可降低大屏的适配难度，缩短大屏场景的开发周期，并可很好地体现数据关系。

进一步地，所述根据大屏幕的分辨率以及编辑端的分辨率，调整画布操作面板的大小具体为：

自适应调整画布操作面板外层的宽度和高度；

根据编辑端的分辨率，计算所述画布操作面板外层的宽度和高度，并将画布操作面板内层的宽度和高度分别赋值为计算得到的宽度和高度；

将画布的宽度和高度分别赋值为大屏幕的宽度和高度；

若大屏幕的宽度大于画布操作面板内层的宽度且大屏幕的高度大于画布操作面板内层的高度，则计算画布操作面板内层的宽度与大屏幕的宽度的比例，得到第一比例；

计算画布操作面板内层的高度与大屏幕的高度的比例，得到第二比例；

获取第一比例和第二比例中数值较小的比例，并根据所述比例对所述画布的宽度和高度进行缩小。

由上述描述可知，通过适应调整画布操作面板的大小，解决大屏适配难的问题。

进一步地，所述创建组件模板对象具体为：

配置组件的基本信息，所述基本信息包括类型、编号、名称以及层级属性值；

配置组件的展示封面图片；

配置组件的属性列表。

由上述描述可知，通过创建组件模板对象，后续可通过组件模板对象快速新增组件，解决大屏场景开发周期长的问题。

进一步地，所述若编辑的属性为预设的交互属性，则相应修改其他组件中所述交互属性的值具体为：

配置组件之间的交互属性，并为所述交互属性分配唯一的标识符；

配置所述交互属性的启闭状态；

若所述交互属性处于开启状态，且监听到一组件的所述交互属性的值发生改变，则搜索包含所述交互属性的组件，并将搜索到的组件中所述交互属性的值进行相应修改。

由上述描述可知，通过配置组件之间的交互属性，体现组件之间的数据关系。

进一步地，所述组件包括文字类型组件、素材类型组件、图表类型组件、地图组件、功能组件和第三方拓展组件。

由上述描述可知，可通过不同类型的组件生动地模拟业务场景，动态地展示数据交互，直观地展现场景及数据之间的关系。

本发明还提出一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现以下步骤：

根据大屏幕的分辨率以及编辑端的分辨率，调整画布操作面板的大小，所述画布操作面板包括画布操作面板外层、画布操作面板内层和画布；

创建组件模板对象；

在画布中通过选取组件模板对象新增组件，将新增的组件加入到组件列表的尾部，并将新增的组件的层级属性值赋值为所述组件列表当前的长度值；

对所述组件列表中的组件的层级顺序进行调整，并根据调整后的组件在组件列表中的层级顺序，对组件的层级属性值进行重新赋值；

对画布中组件的组件属性进行编辑；

若编辑的属性为预设的交互属性，则相应修改其他组件中所述交互属性的值。

进一步地，所述根据大屏幕的分辨率以及编辑端的分辨率，调整画布操作面板的大小具体为：

自适应调整画布操作面板外层的宽度和高度；

根据编辑端的分辨率，计算所述画布操作面板外层的宽度和高度，并将画布操作面板内层的宽度和高度分别赋值为计算得到的宽度和高度；

将画布的宽度和高度分别赋值为大屏幕的宽度和高度；

若大屏幕的宽度大于画布操作面板内层的宽度且大屏幕的高度大于画布操作面板内层的高度，则计算画布操作面板内层的宽度与大屏幕的宽度的比例，得到第一比例；

计算画布操作面板内层的高度与大屏幕的高度的比例，得到第二比例；

获取第一比例和第二比例中数值较小的比例，并根据所述比例对所述画布的宽度和高度进行缩小。

进一步地，所述创建组件模板对象具体为：

配置组件的基本信息，所述基本信息包括类型、编号、名称以及层级属性值；

配置组件的展示封面图片；

配置组件的属性列表。

进一步地，所述若编辑的属性为预设的交互属性，则相应修改其他组件中所述交互属性的值具体为：

配置组件之间的交互属性，并为所述交互属性分配唯一的标识符；

配置所述交互属性的启闭状态；

若所述交互属性处于开启状态，且监听到一组件的所述交互属性的值发生改变，则搜索包含所述交互属性的组件，并将搜索到的组件中所述交互属性的值进行相应修改。

进一步地，所述组件包括文字类型组件、素材类型组件、图表类型组件、地图组件、功能组件和第三方拓展组件。

实施例一

请参照图2-3，本发明的实施例一为：一种大屏场景的编辑方法，如图2所示，包括如下步骤：

S1：根据大屏幕的分辨率以及编辑端的分辨率，调整画布操作面板的大小；其中，画布操作面板dom元素分为画布操作面板外层、画布操作面板内层以及画布canvas。

S2：创建组件模板对象；大屏编辑人员可在组件管理模块中通过组件模板编辑面板进行组件基本信息、组件属性信息的编辑并新增。

具体地，配置组件的基本信息，所述基本信息包括类型、编号、名称以及层级属性值；配置组件的展示封面图片；配置组件的属性列表，每个组件对象都有一个组件属性对象，属性对象是一个深度嵌套的json对象，并以字符串的形式进行16进制的编码，在数据库中以bigblob(blob为二进制大型对象，是一个可以存储大量数据的容器，它能容纳不同大小的数据)形式保存。

深度嵌套对象的形式使得组件属性的拓展性很强，16进制编码的方式使blob(binary large object，二进制大对象)类型数据不需要进行二进制流的解析，也不需要关注数据是否存在特殊符号，bigblob类型的保存使得属性对象可以是复杂结构的json对象。

S3：在画布中通过选取组件模板对象新增组件，将新增的组件加入到组件列表的尾部，并将新增的组件的层级属性值赋值为所述组件列表当前的长度值。通过步骤S2的配置，编辑器中的组件新增面板就多了组件对象，大屏编辑人员可通过组件新增面板在画布中新增组件，对组件模板对象的组件基本信息和组件属性进行16进制的解码，新增的组件会加入到组件列表尾部，并将组件的层级属性值z-index赋值为组件列表当前的长度值。

S4：对所述组件列表中的组件的层级顺序进行调整，并根据调整后的组件在组件列表中的层级顺序，对组件的层级属性值进行重新赋值。大屏编辑人员可通过层管理面板拖动组件顺序或点击上移下移按钮对组件层级进行调整，程序会按照调整后的组件在组件列表中的位置，对组件的层级属性值进行重新赋值。

S5：对画布中组件的组件属性进行编辑；大屏编辑人员可通过选中画布中的组件在属性操作面板对组件属性进行编辑。

S6：判断编辑的属性是否为预设的交互属性，且所述交互属性是否处于开启状态，若是，则执行步骤S7。

S7：相应修改其他组件中所述交互属性的值；具体地，搜索包含所述交互属性的组件，并将搜索到的组件中所述交互属性的值进行相应修改。

本实施例是基于vue开发的，拥有数据双向绑定的特性，通过对组件属性对象深度监听就能实时改变展现效果。例如监听css属性实时改变组件css属性，监听数据交互属性实时获取数据。

本实施例中，组件与组件的交互采用观察者模式以及数据双向绑定的设计思想实现编码。首先通过组件管理模块对交互属性进行配置。交互属性可设置别名(id-value)，设置的别名需在当前项目唯一。在组件编辑操作面板可配置交互属性是否开启，若开启则会将交互属性加入到全局状态管理交互属性队列对象中进行属性监听。在其他组件编辑数据api属性或者url属性时，当属性字符串带有‘${’字符串时会弹出交互属性列表供选择，选择完之后url属性变成如下格式：127.0.0.1/xx/xx？id-value＝${id-value}的格式。当全局状态管理监听到交互属性值改变时，则搜索所有带有${id-value}表达式的组件，并触发数据刷新回调事件，即将所有的交互属性的值进行数据同步。

进一步地，对于步骤S1，如图3所示，包括如下步骤：

S101：自适应调整画布操作面板外层的宽度和高度；具体地，通过flex布局(弹性布局)方式自适应宽高，即画布操作面板外层的父元素样式属性为display:flex，画布操作面板外层的样式属性为flex:1。

其中，本实施例中宽度表示水平方向的像素数量，高度表示竖直方向上的像素数量，因此，宽高即相当于分辨率。

S102：根据编辑端的分辨率，计算所述画布操作面板外层的宽度和高度，并将画布操作面板内层的宽度和高度分别赋值为计算得到的宽度和高度；即通过监听浏览器窗口大小事件，计算画布操作面板外层的宽高，并将计算的值赋给画布操作面板内层。在实际应用场景中，可在浏览器窗口大小事件中通过获取画布操作面板dom元素对象的clientHeight和clientWidth属性的值，来获取到画布操作面板外层的宽度和高度。

S103：将画布的宽度和高度分别赋值为大屏幕的宽度和高度；画布canvas的宽高即为真实的大屏幕的分辨率。

S104：判断大屏幕的宽度和高度是否分别大于画布操作面板内层的宽度和高度，即是否大屏幕的宽度大于画布操作面板内层的宽度且大屏幕的高度大于画布操作面板内层的高度，若是，则表示将画布放在操作面板内层会超出内层范围，则需对画布进行缩小操作，即执行步骤S105，若否，即大屏幕的宽高分别小于或等于画布操作面板内层的宽高，则不对画布进行缩放操作。

S105：计算画布操作面板内层的宽度与大屏幕的宽度的比例，得到第一比例；

S106：计算画布操作面板内层的高度与大屏幕的高度的比例，得到第二比例；

S107：获取第一比例和第二比例中数值较小的比例，并根据所述比例对所述画布的宽度和高度进行缩小。

例如，假设大屏幕的分辨率为3920*1920，大屏编辑人员所用的编辑端的分辨率为1920*1080，赋值后的画布操作面板内层的宽高也为1920*1080，缩放前的画布大小为3920*1920；由于画布操作面板内层的宽高均小于大屏幕的宽高，则计算得到第一比例为1920/3920，第二比例为1080/1920；由于第一比例1920/3920小于第二比例1080/1920，因此，将画布按照第一比例1920/3920进行缩小。优选地，实际场景中，采用css3的transform:scale进行缩放。

进一步地，由于整体缩小不利于对细节部分进行处理，因此在画布下方可集成一个可缩放画布大小的滑块，当将滑块拖动到最后边的时候，将会把画布canvas缩放到原尺寸3920*1920，通过滚动条拖拉到具***置以调整细节。

进一步地，本实施例中，组件包括文字类型组件、素材类型组件、图表类型组件、地图组件、功能组件和第三方拓展组件。

其中，地图组件封装了第三方GIS库，地图组件通过地图组件管理工具可以对地图基础样式进行编辑，在组件管理模块进行组件新增。地图组件控制面板可以进行子组件的添加。每个地图组件需要实现与子组件交互的API接口。子组件通过在属性编辑面板设置交互属性，并添加与地图组件的交互事件，同时设置交互参数，通过对子组件交互属性实现监听，并在监听函数里面调用对应的地图组件的交互事件及传入参数完成交互。

因此，本实施例中，数据可以GIS，三维动画，图表，图片，文字等形式综合展现，且在场景的基础上数据之间的关系及业务逻辑以可视化的动画效果体现，直观的把数据统计、关系、交互等信息转化成可视化信息的产品。

本实施例中，为了解决大屏场景开发周期长的问题，结合现有的业务设计多套可用的大屏业务场景模板，如果模板无法满足业务要求也可以通过可视化方式在线编辑，用庞大的组件库快速拖拉编辑组件属性快速布局，快速配置业务场景。

为了解决体现数据关系难的问题，扩展大量第三方图表组件，组件之间可以相互配置交互动态体现数据关系。

为了解决大屏适配难的问题，结合flex，transform，rem(用于实现自适应布局)等多种技术响应式适配大屏。

为了直观生动地展现数据及场景与数据之间关系，结合GIS，三维动画，图表生动地模拟业务场景，动态地展示数据交互。

实施例二

本实施例是实施例一的一具体应用场景。

本实施例中，编辑端中集成有编辑器，编辑器一共由四个部分组成，分别为新增组件和保存预览场景操作面板、页面管理和图层操作面板、组件编辑操作面板、画布操作面板。

由于大屏分辨率很大，编辑大屏的时候通常都在分辨率比较正常的PC端上进行，但大屏分辨率又比PC端分辨率大很多，所以画布面板在设计上采用自适应布局+动态缩放的方式。具体地，菜单栏、图层面板、操作面板采用fixed+flex局部方式，采用transform缩放进行画布布局，以达到既能按照大屏分辨率处理细节布局，又可以缩小画布看整体布局。

编辑器通过在画布新增各种组件完成大屏场景的编辑。组件以图层的方式进行管理，通过图层管理操作面板可以改变图层顺序。选中画布中的组件可以对组件进行复制，删除，拖动等基本操作，选中的同时会出现对应组件编辑操作面板，通过对属性的设置实时改变组件信息。其中GIS组件可在组件编辑操作面板添加GIS子组件。

通过组件管理模块动态配置组件属性，开发中实现组件的规范接口即可完成组件编码部分。组件与组件的交互采用观察者模式以及数据双向绑定的设计思想实现编码。组件与组件之间可以相互订阅组件事件，其中交互的事件必须实现组件交互的相关接口，并暴露交互参数到全局状态管理对象中进行监听，当交互参数发生变化时，监听事件触发交互事件。

本实施例可提供丰富的组件库、多种业务模板库、素材库；采用拖拽式自由布局，无需编码，全图形化编辑，快速打造专业可视化展示功能。

实施例三

本实施例是对应上述实施例的一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现以下步骤：

根据大屏幕的分辨率以及编辑端的分辨率，调整画布操作面板的大小，所述画布操作面板包括画布操作面板外层、画布操作面板内层和画布；

创建组件模板对象；

在画布中通过选取组件模板对象新增组件，将新增的组件加入到组件列表的尾部，并将新增的组件的层级属性值赋值为所述组件列表当前的长度值；

对所述组件列表中的组件的层级顺序进行调整，并根据调整后的组件在组件列表中的层级顺序，对组件的层级属性值进行重新赋值；

对画布中组件的组件属性进行编辑；

若编辑的属性为预设的交互属性，则相应修改其他组件中所述交互属性的值。

进一步地，所述根据大屏幕的分辨率以及编辑端的分辨率，调整画布操作面板的大小具体为：

自适应调整画布操作面板外层的宽度和高度；

根据编辑端的分辨率，计算所述画布操作面板外层的宽度和高度，并将画布操作面板内层的宽度和高度分别赋值为计算得到的宽度和高度；

将画布的宽度和高度分别赋值为大屏幕的宽度和高度；

若大屏幕的宽度大于画布操作面板内层的宽度且大屏幕的高度大于画布操作面板内层的高度，则计算画布操作面板内层的宽度与大屏幕的宽度的比例，得到第一比例；

计算画布操作面板内层的高度与大屏幕的高度的比例，得到第二比例；

获取第一比例和第二比例中数值较小的比例，并根据所述比例对所述画布的宽度和高度进行缩小。

进一步地，所述创建组件模板对象具体为：

配置组件的基本信息，所述基本信息包括类型、编号、名称以及层级属性值；

配置组件的展示封面图片；

配置组件的属性列表。

进一步地，所述若编辑的属性为预设的交互属性，则相应修改其他组件中所述交互属性的值具体为：

配置组件之间的交互属性，并为所述交互属性分配唯一的标识符；

配置所述交互属性的启闭状态；

若所述交互属性处于开启状态，且监听到一组件的所述交互属性的值发生改变，则搜索包含所述交互属性的组件，并将搜索到的组件中所述交互属性的值进行相应修改。

进一步地，所述组件包括文字类型组件、素材类型组件、图表类型组件、地图组件、功能组件和第三方拓展组件。

综上所述，本发明提供的一种大屏场景的编辑方法及计算机可读存储介质，通过适应调整画布操作面板的大小，解决大屏适配难的问题；通过创建组件模板对象，并通过对组件模板对象进行选取、编辑，可快速配置大屏场景，解决大屏场景开发周期长的问题；通过配置组件之间的交互属性，使得组件与组件之间可以相互订阅组件事件，体现数据关系，从而解决体现数据关系难的问题；通过不同类型的组件生动地模拟业务场景，动态地展示数据交互，直观地展现场景及数据之间的关系。本发明可降低大屏的适配难度，缩短大屏场景的开发周期，可很好地体现数据关系，并可直观生动地展现数据以及场景与数据之间的关系。

以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种大屏场景的编辑方法，其特征在于，包括：

根据大屏幕的分辨率以及编辑端的分辨率，调整画布操作面板的大小，所述画布操作面板包括画布操作面板外层、画布操作面板内层和画布；

创建组件模板对象；

在画布中通过选取组件模板对象新增组件，将新增的组件加入到组件列表的尾部，并将新增的组件的层级属性值赋值为所述组件列表当前的长度值；

对所述组件列表中的组件的层级顺序进行调整，并根据调整后的组件在组件列表中的层级顺序，对组件的层级属性值进行重新赋值；

对画布中组件的组件属性进行编辑；

若编辑的属性为预设的交互属性，则相应修改其他组件中所述交互属性的值。

2.根据权利要求1所述的大屏场景的编辑方法，其特征在于，所述根据大屏幕的分辨率以及编辑端的分辨率，调整画布操作面板的大小具体为：

自适应调整画布操作面板外层的宽度和高度；

根据编辑端的分辨率，计算所述画布操作面板外层的宽度和高度，并将画布操作面板内层的宽度和高度分别赋值为计算得到的宽度和高度；

将画布的宽度和高度分别赋值为大屏幕的宽度和高度；

若大屏幕的宽度大于画布操作面板内层的宽度且大屏幕的高度大于画布操作面板内层的高度，则计算画布操作面板内层的宽度与大屏幕的宽度的比例，得到第一比例；

计算画布操作面板内层的高度与大屏幕的高度的比例，得到第二比例；

获取第一比例和第二比例中数值较小的比例，并根据所述比例对所述画布的宽度和高度进行缩小。

3.根据权利要求1所述的大屏场景的编辑方法，其特征在于，所述创建组件模板对象具体为：

配置组件的基本信息，所述基本信息包括类型、编号、名称以及层级属性值；

配置组件的展示封面图片；

配置组件的属性列表。

4.根据权利要求1所述的大屏场景的编辑方法，其特征在于，所述若编辑的属性为预设的交互属性，则相应修改其他组件中所述交互属性的值具体为：

配置组件之间的交互属性，并为所述交互属性分配唯一的标识符；

配置所述交互属性的启闭状态；

若所述交互属性处于开启状态，且监听到一组件的所述交互属性的值发生改变，则搜索包含所述交互属性的组件，并将搜索到的组件中所述交互属性的值进行相应修改。

5.根据权利要求1-4任一项所述的大屏场景的编辑方法，其特征在于，所述组件包括文字类型组件、素材类型组件、图表类型组件、地图组件、功能组件和第三方拓展组件。

6.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现以下步骤：

根据大屏幕的分辨率以及编辑端的分辨率，调整画布操作面板的大小，所述画布操作面板包括画布操作面板外层、画布操作面板内层和画布；

创建组件模板对象；

在画布中通过选取组件模板对象新增组件，将新增的组件加入到组件列表的尾部，并将新增的组件的层级属性值赋值为所述组件列表当前的长度值；

对所述组件列表中的组件的层级顺序进行调整，并根据调整后的组件在组件列表中的层级顺序，对组件的层级属性值进行重新赋值；

对画布中组件的组件属性进行编辑；

若编辑的属性为预设的交互属性，则相应修改其他组件中所述交互属性的值。

7.根据权利要求6所述的计算机可读存储介质，其特征在于，所述根据大屏幕的分辨率以及编辑端的分辨率，调整画布操作面板的大小具体为：

自适应调整画布操作面板外层的宽度和高度；

根据编辑端的分辨率，计算所述画布操作面板外层的宽度和高度，并将画布操作面板内层的宽度和高度分别赋值为计算得到的宽度和高度；

将画布的宽度和高度分别赋值为大屏幕的宽度和高度；

若大屏幕的宽度大于画布操作面板内层的宽度且大屏幕的高度大于画布操作面板内层的高度，则计算画布操作面板内层的宽度与大屏幕的宽度的比例，得到第一比例；

计算画布操作面板内层的高度与大屏幕的高度的比例，得到第二比例；

获取第一比例和第二比例中数值较小的比例，并根据所述比例对所述画布的宽度和高度进行缩小。

8.根据权利要求6所述的计算机可读存储介质，其特征在于，所述创建组件模板对象具体为：

配置组件的基本信息，所述基本信息包括类型、编号、名称以及层级属性值；

配置组件的展示封面图片；

配置组件的属性列表。

9.根据权利要求6所述的计算机可读存储介质，其特征在于，所述若编辑的属性为预设的交互属性，则相应修改其他组件中所述交互属性的值具体为：

配置组件之间的交互属性，并为所述交互属性分配唯一的标识符；

配置所述交互属性的启闭状态；

若所述交互属性处于开启状态，且监听到一组件的所述交互属性的值发生改变，则搜索包含所述交互属性的组件，并将搜索到的组件中所述交互属性的值进行相应修改。

10.根据权利要求6-9任一项所述的计算机可读存储介质，其特征在于，所述组件包括文字类型组件、素材类型组件、图表类型组件、地图组件、功能组件和第三方拓展组件。