一种基于制造技术

本发明专利技术公开了一种基于

【技术实现步骤摘要】
一种基于Vue的大屏看板自定义配置方法


[0001]本专利技术涉及看板配置
，具体涉及一种基于
Vue
的大屏看板自定义配置方法
。

技术介绍

[0002]随着计算机技术发展
、
快节奏开发模式的出现，对软件行业的开发要求越来越高，如何提升开发效率
、
降低开发成本
、
提高开发质量已经成为整个行业追求的目标
。
高效的开发效率，既可以快速完成项目目标，又可以节约成本降低能耗
。
通过一种新的方式分解开发过程中可复用
、
低耦合
、
高安全的模块的工具已经迫在眉睫
。
[0003]现有的大屏设计方案是软件开发过程中把对针对的数据类型对看板进行整体设计开发，并不会对看板自定义配置方案的设置更加独立化的开发过程，开发方案可复用性底，难以适应多种数据源的大屏看板的自定义配置
。

技术实现思路

[0004]本专利技术的目的在于提供一种基于
Vue
的大屏看板自定义配置方法，解决以下技术问题：
[0005]现有的大屏设计技术，开发方案可复用性底，难以适应多种数据源的大屏看板的自定义配置
。
[0006]本专利技术的目的可以通过以下技术方案实现：
[0007]一种基于
Vue
的大屏看板自定义配置方法，包括以下步骤：
[0008]S1
：通过
Vue
大屏工具包对前端环境进行搭建，在
Linux
系统环境下搭建后端环境；
[0009]S2
：为大屏看板前端环境的界面配置数据源，并通过大屏看板配置数据源配置大屏看板数据集；
[0010]S3
：对大屏看板数据集进行转换，将转换完成后的数据集作为格式数据；
[0011]S4
：对界面报表进行设计，根据需求对整个面板的界面报表进行布局和尺寸定义；
[0012]S5
：从大屏设计界面的工具栏中选择元素组件，并对元素组件进行设置；
[0013]S6
：将格式数据加载到经过设置的元素组件中，对元素组件进行数据填充；
[0014]S7
：元素组件设计和数据填充后，通过配置属性栏对元素组件进行大小
、
颜色和样式的调整，完成大屏看板的自定义配置
。
[0015]作为本专利技术进一步的方案：所述步骤
S1
，包括以下步骤：
[0016]安装前端搭建环境的
Vue
大屏工具包，对前端进行编译后获取布署包；根据前端环境的配置，部署后端连接和基础性配置，并通过
NGINX
做转发，完成前端环境的搭建；
[0017]在
Linux
系统环境下安装构建工具
ApacheMaven3.5
，部署
JavaScript
的运行环境
Node.jsv14.16.0
，安装
Java
开发工具包
JDK1.8
；
[0018]对后端进行编译后通过打包指令
MavenPackage
，获取布署包，完成后端环境配置数据库和基础性的配置，并上传到
Linux
系统并启动服务，完成后端环境的搭建
。
[0019]作为本专利技术进一步的方案：所述步骤
S2
，为大屏看板前端环境的界面配置数据源，包括以下步骤：
[0020]将数据源的驱动包上传到目录，然后重新启动服务，在前端页面填上对应的驱动类
、
连接串和用户名密码，完成数据源与大屏看板的数据库的连接，并建立数据源选项
。
[0021]作为本专利技术进一步的方案：所述步骤
S2
，通过大屏看板配置数据源配置大屏看板数据集，包括以下步骤：
[0022]选择数据源选项；其中，数据源选项表示数据属于哪个数据库；
[0023]通过选择的数据源选项的字段和限制性条件，在数据源的驱动下，采用查询
Sql
的方式得到大屏看板数据集
。
[0024]作为本专利技术进一步的方案：所述步骤
S2
，通过大屏看板配置数据源配置大屏看板数据集，包括以下步骤：
[0025]在大屏看板配置数据源的数据基础上，通过
HTTP
协议和相应的
API
创建单独存在的数据集；
[0026]其中，大屏看板配置数据源的配置的工具支持动态扩展
。
[0027]作为本专利技术进一步的方案：所述步骤
S3
中，大屏看板数据集进行转换的转换方式包括：
JS
脚本转换
、Java
脚本转换和字典项转换
。
[0028]作为本专利技术进一步的方案：所述步骤
S4
中，根据需求对整个面板的界面报表进行布局和尺寸定义后，进行选择和上传看板背景；选择和上传看板背景，包括以下步骤：
[0029]选择背景图片作为大屏看板背景，上传背景图片，并导入到整个面板中
。
[0030]作为本专利技术进一步的方案：所述步骤
S5
中的大屏设计界面包括：工具栏
、
图层栏
、
设计区域和配置属性栏；
[0031]工具栏中包括多种元素组件；
[0032]图层栏，用于对拖拽的元素进行分列展示；
[0033]设计区域，通过可视化的模型对整个大屏看板进行详细布局；
[0034]配置属性栏，用于元素组件的大小
、
颜色
、
样式和数据填充的设置内容
。
[0035]作为本专利技术进一步的方案：所述步骤
S5
，包括以下步骤：
[0036]从大屏设计界面的工具栏中选择元素组件，并拖拽到设计区域，通过配置属性栏完成对选择的元素组件的设计
。
[0037]作为本专利技术进一步的方案：所述步骤
S7
中，完成大屏看板的自定义配置后，需要在其它场景下使用时，通过分享
URL
的方式进行大屏看板的展示，同时通过密钥的方式实现数据安全的目标
。
[0038]本专利技术的有益效果：
[0039]本专利技术通过连接数据源完成对数据集的配置，利用可视化工具实现看板数据转换编辑和自定义界面报表设计，接着通过简单的报表元素组件拖拽实现界面布局，然后填充元素组件数据内容和调整看板样式，完成大屏看板的自定义配置，整个过程完全独立并且自定义性强
。
通过依托前后端环境搭架，完成自定义工具的布署，通过数据库数据获取
、
转换
、
载入的方式实现大屏报表的元素组件加载，开发过程清晰独立，本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.
一种基于
Vue
的大屏看板自定义配置方法，其特征在于，包括以下步骤：
S1
：通过
Vue
大屏工具包对前端环境进行搭建，在
Linux
系统环境下搭建后端环境；
S2
：为大屏看板前端环境的界面配置数据源，并通过大屏看板配置数据源配置大屏看板数据集；
S3
：对大屏看板数据集进行转换，将转换完成后的数据集作为格式数据；
S4
：对界面报表进行设计，根据需求对整个面板的界面报表进行布局和尺寸定义；
S5
：从大屏设计界面的工具栏中选择元素组件，并对元素组件进行设置；
S6
：将格式数据加载到经过设置的元素组件中，对元素组件进行数据填充；
S7
：元素组件设计和数据填充后，通过配置属性栏对元素组件进行大小
、
颜色和样式的调整，完成大屏看板的自定义配置
。2.
根据权利要求1所述的一种基于
Vue
的大屏看板自定义配置方法
,
其特征在于，所述步骤
S1
，包括以下步骤：安装前端搭建环境的
Vue
大屏工具包，对前端进行编译后获取布署包；根据前端环境的配置，部署后端连接和基础性配置，并通过
NGINX
做转发，完成前端环境的搭建；在
Linux
系统环境下安装构建工具
Apache Maven 3.5
，部署
JavaScript
的运行环境
Node.js v14.16.0
，安装
Java
开发工具包
JDK1.8
；对后端进行编译后通过打包指令
Maven Package
，获取布署包，完成后端环境配置数据库和基础性的配置，并上传到
Linux
系统并启动服务，完成后端环境的搭建
。3.
根据权利要求1所述的一种基于
Vue
的大屏看板自定义配置方法
,
其特征在于，所述步骤
S2
，为大屏看板前端环境的界面配置数据源，包括以下步骤：将数据源的驱动包上传到目录，然后重新启动服务，在前端页面填上对应的驱动类
、
连接串和用户名密码，完成数据源与大屏看板的数据库的连接，并建立数据源选项
。4.
根据权利要求3所述的一种基于
Vue
的大屏看板自定义配置方法
,
其特征在于，所述步骤
S2
，通过大屏看板配置数据源配置大屏看板数据集，包括以下步骤：选择数...

【专利技术属性】
技术研发人员：赵成亮，汪彬彬，李凯，唐飞，莫申林，刘成龙，李志学，李环寰，汪志发，孙晓伟，杨良闯，胡佳伟，高嘉伟，苏翔，胡鸿超，张伟，邹倩，李欣，汪辉，
申请(专利权)人：四创电子股份有限公司，
类型：发明
国别省市：