本发明涉及用于物联网平台的设备图形组态技术领域，尤其是涉及一种实现设备模板图元的方法。
背景技术：
vue.js：是一套用于构建用户界面的渐进式javascript框架，与其它大型框架不同的是，vue被设计为自底向上的逐层应用。vue的核心库只关注视图层，方便与第三方库或既有项目整合。
http接口：是一种超文本传输协议，是一种w3c协会定义的请求和应答标准的tcp协议，http接口指基于http协议的接口。
svg：(scalablevectorgraphics)可缩放矢量图形缩写，用于描述二维矢量图形的一种图形格式，是一个开放的标准。
配置工具：是物联网平台用于设备数据，图形，报警事件等配置的一套软件工具。
设备模板：是同一类设备抽象出来的关于属性点，控制点，图形以及报警事件等的描述集合。
表达式：指属性点与预期值的关系，例如：转速>100。
属性点：设备的状态点，例如，空调的温度，风速，模式等。
控制点：设备的开关控制点，例如空调的开关，设置模式。
数据接口，控制接口：物联网平台数据获取及控制下发的接口。
图元：图元就是组成图像的基本单元，组态过程中用于描述各种设备轮廓或样式。
动态：是指静止的图形根据不同的特定条件展现出不同的动画。
组态：是指用户通过类似“搭积木”的简单方式来完成自己所需要的软件功能，而不需要编写计算机程序，也就是所谓的“组态”。
在传统的软件开发中，几乎都是组态软件开发商自行决定图形格式，使软件的灵活性和开放性受到限制。由于不同的组态软件开发商都有各自独立的标准，图形格式多样，使用很不方便，并且存在兼容性差的问题。传统的组态软件的图形的变化往往都以绑定点来实现动态，即使相同类型的设备，由于设备的属性点命名不同，需要重复的绑定，复杂的图形可能绑定的点比较多，过程繁琐并且容易出现错误。
最近在互联网企业里兴起的物联网解决方案，监控的页面需要面向不同设备终端，需要实现监控页面的web化，可以满足不同行业不同环境的需求。大多数的web化监控页面对流程图的实现基本都采用基本html语言代码 javascript实现，对实现页面的要求比较高，并且实现的页面不能重复利用，针对不同的项目都需要重新编写。
技术实现要素：
本发明的发明目的是为了克服现有技术中的web化监控页面流程图采用基本html语言代码 javascript实现，不能重复利用，针对不同的项目需要重新编写的不足，提供了一种实现设备模板图元的方法。
为了实现上述目的，本发明采用以下技术方案：
一种实现设备模板图元的方法，包括如下步骤：
(1-1)配置设备模板属性点和控制点；
(1-2)配置设备图形资源文件；
(1-3)解析设备模板配置，生成内部数据；
(1-4)生成vue组件文件；
(1-5)发布网页。
本发明通过设备数据建模，存储设备模型数据，并转化设备模型数据为vue组件实现设备图元模板。
解决了物联网平台中设备的图形化表示的问题，经过后台转化组件后，能轻松实现流程图上动态展示设备的状态。同时vue组件包含了设备的状态点和控制点，物联网平台提供了设备属性点获取和控制点下发的http接口，实现了从数据到图形的设备模型。通过一次建模，相同设备的图形可以复用，减少了流程图组态过程，设备仅需绑定设备id，不需要传统的具体点绑定过程，减少工作量以及组态的错误率。
不仅实现了设备图组态的web化，同时通过设备模型的建立，使流程图组态方便，减少了组态错误的发生，可以通过简单的测试代码单独测试设备模板的组态是否符合预期。对于组态人员来说只需要简单的配置条件以及图形，后台服务可以直接生成可用的组件，再配上模板直接发布成最终的web化页面。
作为优选，(1-1)包括如下步骤：
(1-1-1)配置设备模板的m个属性点，m大于1；
(1-1-2)配置设备模板的l个控制点，l大于1；
将各个属性点和各个控制点存储为json格式的设备模板.json文件。
作为优选，(1-2)包括如下步骤：
预先设定设备需要展现n种设备状态，使设备在界面上展现的图形形态分成n类，n类图形形态分别与n种设备状态相对应，对n种图形形态进行描述，设置每类图形形态产生的条件；n大于1；
用至少一个属性点描述每个图形形态和其对应的条件，形成图形状态描述和属性点的对应关系；
在图形资源库中，根据每个图形状态描述查找对应的图形资源文件，图形资源文件为采用svg格式的矢量图形，将图形资源文件通过文本文件以json格式描述并存储到后台配置库，得到json格式的数据模型结构文件，将json格式的数据模型结构文件更新到设备模板.json文件中。
作为优选，(1-3)包括如下步骤：
devclsanaly解析程序获取设备模板.json文件；
devclsanaly解析程序通过搜索json结构中的“attributes”字段，整理出属性点的配置，存储到内部数据中；
devclsanaly解析程序通过搜索json结构中的“control”字段，整理出控制点的配置，存储到解析程序的内部数据中；
devclsanaly解析程序通过搜索json结构中的“graph”字段，整理出图形形态产生的条件及对应的图形资源文件，存储到解析程序的内部数据中。
作为优选，(1-4)包括如下步骤：
devclsgene生成程序找到内部数据中图形变化的配置，生成vue组件格式中<template>标签中的数据，对数据中的每个一个表达式添加<image>标签，并且在标签中添加”v-if＝xxx表达式的方式”，再添加”href＝“xxxx.svg路径”；
devclsgene生成程序找到内部数据中各个属性点和各个控制点的数据，利用各个属性点和各个控制点的数据生成vue组件data()部分数据；
devclsgene生成程序给vue组件添加固定的获取数据和控制下发的函数。
作为优选，所述属性点为5个，5个属性点分别为运行状态、停止状态、远方模式、就地模式和故障状态；控制点为4个，4个控制点分别为打开控制命令、停止控制命令、转速设置命令和模式设置命令。
作为优选，(1-5)包括如下步骤：
通过vue语言编写的前端代码加载vue组件，经过编译后发布成网页，接入实际数据后可看到设备图形的变化，通过网页下发控制命令。
作为优选，devclsanaly解析程序采用nodejs开发，采用文本解析模块，通过对设备类模板.json文件读取，分析js0n格式字符串，解析其中的″attributes″、″control″、″graph″字段，并将结果保存到内部数据中，同时提供接口供外部调用获取内部数据。
作为优选，devclsgene生成程序采用nodejs开发，通过调用devclsanaly.exe解析程序接口获取内部数据，对内部数据添加vue格式标签字段，例如<template>，data()等，采用写文本模块，将结果写入并生成到.vue后缀的文件中。
因此，本发明具有如下有益效果：设计了一套集设备数据，图形一体的设备模板模型，可重复使用，方便组态；
组态的图形动态采用替换显示方案，图形文件兼容多种文件格式，放宽对图形绘制的限制；
采用目前前端流行的vue技术实现web化展示，编写调试以及实现前端页面更加方便，vue技术的各种优点可以体现；
实现了数据，图形变化的一体化建模，对于实施方来说，只需要在平台配置不同表达式下的图形文件，后台即可提供完整的设备模板组件。组件集成了从物联网平台获取数据，图形状态变化，以及控制下发到物联网平台的所有交互功能。后续物联网平台的流程图组态功能，其中设备的组态在此基础上进行；
实现了监控页面的web化展示，将数据获取与设备变化过程通过组件化的方式实现，web页面只需要简单的调用即可。
附图说明
图1为本发明的一种流程图。
具体实施方式
下面结合附图和具体实施方式对本发明做进一步的描述。
如图1所示的实施例是一种实现设备模板图元的方法，包括如下步骤：
步骤一：配置设备模板属性点和控制点
在设备监控项目或者物联网项目中，本发明对于同一种设备采取设备抽象模板化。对于设备需要在上位机需要监控的每种状态设定为属性点，设备在上位机可以下发的控制命令设定为控制点。配置设备模板属性点和控制点过程实际是对需要配置的设备取别名，然后取属性点和控制点别名以及值的类型(布尔量，数值量)，以及每个点的描述。将这些信息通过json格式存储。
以一种风机设备为例，风机设备取名为fj，分别配置风机设备的属性点和控制点：
一：配置属性点
1.风机的运行状态，取名为running，表述风机是否处于运行状态，值的类型为布尔量；
值为true表示风机处于运行状态，值为false表示风机不处于运行状态。存储为json格式：{″attributes″：{″running″：{″description″：″运行状态″，″type″：″bool″}}。
2.风机的停止状态，取名为stopped，表述风机是否处于停止状态，值的类型为布尔量；
值为true表示风机处于停止状态，值为false表示风机不处于停止状态。存储为json格式：{″attributes″：{″stopped″：{″description″：″停止状态″，″type″：″boo1″}}。
3.风机的远方模式，取名为yfms，表述风机是否处于远方模式，值的类型为布尔量；
值为true表示风机处于远方模式，值为false表示风机不处于远方模式。存储为json格式：{″attributes″：{″yfms″：{″description″：″远方模式″，″type″：″bool″}}。
4.风机的就地模式，取名为jdms，表述风机是否处于就地模式，值的类型为布尔量；
值为true表示风机处于就地模式，值为false表示风机不处于就地模式。存储为json格式：{″attributes″：{″jdms″：{″description″：″就地模式″，″type″：″bool″}}。
5.风机的故障状态，取名为fault，表述风机是否处于故障状态，值的类型为布尔量；
值为true表示风机处于故障状态，值为false表示风机不处于故障状态。存储为json格式：{″attributes″：{″fault″：{″description″：″故障，″type″：″bool″}}。
二：配置控制点
1.风机打开控制命令，取名为start，值的类型为布尔量，将该值改为true，表示下发打开风机命令。存储为json格式：{″control″：{″start″：{″description″：″打开，″type″：″bool″}}。
2.风机停止控制命令，取名为stop，值的类型为布尔量，将该值改为true，表示下发停止风机命令。存储为json格式：{″control″：{″stop″：{″description″：″停止，″type″：″boo1″}}。
3.风机转速设置命令，取名为speed，值的类型为数值量，将该值改为对应数字，表示下发转速为所设数字命令。存储为json格式：{″control″：{″speed″：{″description″：″转速设置，″type″：″number″}}。
4.风机模式设置命令，取名为mode，值的类型为数值量，将该值改为对应数字，表示下发模式为所设数字对应的模式命令。{″control″：{″mode″：{″description″：″控制模式，″type″：″number″}}。
步骤二：配置设备模板的图形资源文件；
该步骤通过设备需要表现的形态与该形态需要的达到的条件，抽象出设备的图形变化配置，具体可以分为如下几步：
预先设定设备需要展现n种设备状态，使设备在界面上展现的图形形态分成n类，n类图形形态分别与n种设备状态相对应，对n种图形形态进行描述，设置每类图形形态产生的条件；n大于1；
用至少一个属性点描述每个图形形态和其对应的条件，形成图形状态描述和属性点的对应关系；
在图形资源库中，根据每个图形状态描述查找对应的图形资源文件，图形资源文件为采用svg格式的矢量图形，将图形资源文件通过文本文件以json格式描述并存储到后台配置库，得到json格式的如数据模型结构文件，将json格式的数据模型结构文件更新到设备模板.json文件中。
同样以上面的风机为例，我们通过需求得到风机的状态有如下几种
1.风机处于运行状态，条件是：running＝true，图形状态通过美工绘制完成的文件名为：fj_running.svg。通过配置工具后存储json格式为：
{″expression″：″running＝true″，″type″：″svg″，″pic″：″fj_running.svg″}
2.风机处于停止状态，条件是：stopped＝true，图形状态通过美工绘制完成的文件名为：fj_stopped.svg。通过配置工具后存储json格式为：
{″expression″：″stopped＝true″，″type″：″svg″，″pic″：″fj_stopped.svg″}
3.风机处于远方状态，条件是：yfms＝true，图形状态通过美工绘制完成的文件名为：fj_yfms.svg。通过配置工具后存储格式为：
{″expression″：″yfms＝true″，″type″：″svg″，″pic″：″fj_yfms.svg″}
4.风机处于就地状态，条件是：jdms＝true，图形状态通过美工绘制完成的文件名为：fj_jdms.svg。通过配置工具后存储格式为：
{″expression″：″jdms＝true″，″type″：″svg″，″pic″：″fj_jdms.svg″}
5.风机处于故障状态，条件是：fault＝true，图形状态通过美工绘制完成的文件名为：fj_jdms.svg。通过配置工具后存储格式为：
{″expression″：″fault＝true″，″type″：″svg″，″pic″：″fj_fault.svg″}
最后形成如下表1所示json格式
表1风机模型的后台json存储结构
步骤三：解析设备模板配置，生成内部数据；
通过该步骤将步骤二与步骤一中配置的json格式文件解析为可以形成最终vue组件的内部数据。
1.devclsanaly解析程序获取设备模板.json文件；
2.devclsanaly解析程序通过搜索json结构中的“attributes”字段，整理出属性点的配置，存储到内部数据中。
3.devclsanaly解析程序通过搜索json结构中的“control”字段，整理出控制点的配置，存储到内部数据中。
4.devclsanaly解析程序通过搜索json结构中的“graph”字段，整理出图形形态产生的条件及对应图形关系，存储到内部数据中。
步骤四：生成vue组件文件；
devclsgene生成程序(可以是c ，js，pythone等语言)找到内部数据中图形变化的配置，生成vue组件格式中<template>标签中的数据。每个一个表达式添加<image>标签，并且标签添加”v-if＝xxx表达式的方式”，再添加对应的”href＝“xxxx.svg路径”，格式如下：
<imagev-if＝″xxx属性＝＝＝true″xlink：href＝″../../static/svg/xxx.svg″/>
接着devclsgene生成程序找到内部数据中属性点和控制点的相关数据，生成vue组件data()部分数据，格式例如：data(){att：{xxx：true，...}，ctrl：{xxx：0}}。
最后devclsgene生成程序给vue组件添加固定的获取数据和控制下发的函数。
以上面风机为例，最终生成的fj.vue文件格式如下表2：
表2风机模型图元的fj.vue文件内容
步骤五：发布网页
通过vue语言编写的前端代码加载vue组件，经过编译后可以发布成网页，接入实际数据后就可以看到设备图形根据表达式的变化，以及可以通过网页下发控制命令。
首先通过vue-cli生成简单的工程，然后在生成的app.vue中引入步骤四生成的vue组件，
例如：importfjfrom’./components/pic/fj’，最后编译发布成网页，通过http://localhost：8080网址即可访问。
后续的流程图组态的时候提供该模板文件的选择，只需绑定相应的设备id就能实现设备模板数据模型的实例化，接入物联网平台数据后则能实现设备形态的动态展示。
应理解，本实施例仅用于说明本发明而不用于限制本发明的范围。此外应理解，在阅读了本发明讲授的内容之后，本领域技术人员可以对本发明作各种改动或修改，这些等价形式同样落于本申请所附权利要求书所限定的范围。
1.一种实现设备模板图元的方法，其特征是，包括如下步骤：
(1-1)配置设备模板属性点和控制点；
(1-2)配置设备模板的图形资源文件；
(1-3)解析设备模板配置，生成内部数据；
(1-4)生成vue组件文件；
(1-5)发布网页。
2.根据权利要求1所述的实现设备模板图元的方法，其特征是，(1-1)包括如下步骤：
(1-1-1)配置设备模板的m个属性点，m大于1；
(1-1-2)配置设备模板的l个控制点，l大于1；
将各个属性点和各个控制点存储为json格式的设备模板.json文件。
3.根据权利要求1所述的实现设备模板图元的方法，其特征是，(1-2)包括如下步骤：
预先设定设备需要展现n种设备状态，使设备在界面上展现的图形形态分成n类，n类图形形态分别与n种设备状态相对应，对n种图形形态进行描述，设置每类图形形态产生的条件；n大于1；
用至少一个属性点描述每个图形形态和其对应的条件，形成图形状态描述和属性点的对应关系；
在图形资源库中，根据每个图形状态描述查找对应的图形资源文件，图形资源文件为采用svg格式的矢量图形，将图形资源文件通过文本文件以json格式描述并存储到后台配置库，得到json格式的数据模型结构文件，将json格式的数据模型结构文件更新到设备模板.json文件中。
4.根据权利要求1所述的实现设备模板图元的方法，其特征是，(1-3)包括如下步骤：
devclsanaly解析程序获取设备模板.json文件；
devclsanaly解析程序通过搜索json结构中的“attributes”字段，整理出属性点的配置，存储到内部数据中；
devclsanaly解析程序通过搜索json结构中的“control”字段，整理出控制点的配置，存储到解析程序的内部数据中；
devclsanaly解析程序通过搜索json结构中的“graph”字段，整理出图形形态产生的条件及对应的图形资源文件，存储到解析程序的内部数据中。
5.根据权利要求1所述的实现设备模板图元的方法，其特征是，(1-4)包括如下步骤：
devclsgene生成程序找到内部数据中图形变化的配置，生成vue组件格式中<template>标签中的数据，对数据中的每个一个表达式添加<image>标签，并且在标签中添加”v-if＝xxx表达式的方式”，再添加”href＝“xxxx.svg路径”；
devclsgene生成程序找到内部数据中各个属性点和各个控制点的数据，利用各个属性点和各个控制点的数据生成vue组件data()部分数据；
devclsgene生成程序给vue组件添加固定的获取数据和控制下发的函数。
6.根据权利要求1或2或3或4或5所述的实现设备模板图元的方法，其特征是，(1-5)包括如下步骤：
通过vue语言编写的前端代码加载vue组件，经过编译后发布成网页，接入实际数据后可看到设备图形的变化，通过网页下发控制命令。
7.根据权利要求2所述的实现设备模板图元的方法，其特征是，所述属性点为5个，5个属性点分别为运行状态、停止状态、远方模式、就地模式和故障状态；控制点为4个，4个控制点分别为打开控制命令、停止控制命令、转速设置命令和模式设置命令。
8.根据权利要求4所述的实现设备模板图元的方法，其特征是，devclsanaly解析程序采用nodejs开发，采用文本解析模块，通过对设备类模板.json文件读取，分析json格式字符串，解析其中的″attributes″、″control″、″graph″字段，并将结果保存到内部数据中，同时提供接口供外部调用获取内部数据。
9.根据权利要求5所述的实现设备模板图元的方法，其特征是，devclsgene生成程序采用nodejs开发，通过调用devclsanaly.exe解析程序接口获取内部数据，对内部数据添加vue格式标签字段，采用写文本模块，将结果写入并生成到.vue后缀的文件中。
技术总结