CN112364496A - 基于html5和vue技术的航电仿真面板生成系统 - Google Patents

Abstract

本发明公开了一种基于HTML5和VUE技术的航电仿真面板生成系统，包含模型模块、实例生成模块和实例存储与加载模块，模型模块用于提供面板的面板模型和多种航电领域常用数据的监视控件与激励控件的控件模型；实例生成模块用于定义面板及每类控件的参数及各参数的初始值，当用户在画布新建面板或控件时，将参数的初始值及随机生成的id以深拷贝的形式赋值控件模型，由此就生成了面板实例或控件实例；实例存储与加载模块用于将面板实例或控件实例在浏览器中完成渲染和呈现。本发明实现了基于模型的仿真面板创建，开发人员不需要编写复杂的HTML代码和JavaScript代码，仅通过配置面板及面板控件参数即可输出可视化的仿真面板。

Description

基于HTML5和VUE技术的航电仿真面板生成系统

技术领域

本发明属于测试与仿真技术领域，涉及一种基于HTML5和VUE技术的航电仿真面板生成系统。

背景技术

在航电系统的集成验证的联试过程中，需要对产品的接口和功能进行验证，由于与产品产生交联关系的外系统或产品往往不会出现在集成验证现场，因此需要使用测试软件模拟外系统或产品功能，这一过程被称为仿真。

仿真的过程是双向的，由仿真软件将消息发送给被测产品或系统的过程叫做消息激励，而由仿真软件从被测产品或系统接收消息的过程叫做消息监视。消息激励过程的实现是将要发送的信号定义通过代码或界面输入的方式采集到仿真系统中，然后按照ICD规定的消息格式将数据进行打包，最后调用底层驱动，通过特定总线或非总线硬件资源将数据发送给被测产品或系统。消息监视的过程与激励过程相反，仿真软件首先根据用户需求，读取特定硬件通道和虚拟通道的原始消息数据，然后按照ICD规定的消息格式将消息解包，分离出数据域值，最后通过文字或可视化的图形、图像的形式呈现出来。通过消息监视和消息激励的仿真过程，可以模拟被测产品外围设备，从而判断被测产品接口和软件功能是否存在问题，是一种低成本的数字化实验手段。

使用可视化的激励控件和监视控件进行航电消息激励和监视的技术在一些仿真测试软件中已经得到应用，其实质是采用图形或图像方式将激励数据和监视数据呈现出来，应用图形化面板不仅使仿真软件的用户界面更加友善，同时将大量数据转换为可视信息，方便测试人员对关键数据的感知和提取。

但是目前该技术的应用尚存在明显不足。由于面向单个项目需求，控件的种类较少，监视控件仅能表示少量简单的航电参数，比如状态量、仪表指针参数等，同时控件没有进行统一接口的设计，代码很难复用，并且这些控件嵌入在不同的仿真测试软件中，没有形成通用组件，实现控件使用的程序语言也多种多样，难以做到增量开发。

发明内容

本发明的发明目的在于提供一种基于HTML5和VUE技术的航电仿真面板生成系统，利用HTML5和VUE等网页前端技术的跨平台特性好、B/S架构的平台适应能力强、适合用于仿真面板的开发和移植等优点，解决目前航电系统测试环节仿真面板创建过程复杂、数据结构不通用和样式不可复用的问题。

本发明的发明目的通过以下技术方案实现：

一种基于HTML5和VUE技术的航电仿真面板生成系统，包含模型模块、实例生成模块和实例存储与加载模块；

模型模块用于提供面板的面板模型和多种航电领域常用数据的监视控件与激励控件的控件模型；

实例生成模块用于定义面板及每类控件的参数及各参数的初始值，当用户在画布新建面板或控件时，将参数的初始值及随机生成的id以深拷贝的形式赋值控件模型，由此就生成了面板实例或控件实例；

实例存储与加载模块用于将面板实例或控件实例在浏览器中完成渲染和呈现。

依据上述特征，面板模型和控件模型均包含参数入口props、事件响应方法method以及主题template；

props内包含一个同名的字典，用于接受外部输入的实例生成模块进行实例化所需的各种参数；

methods定义了一个request函数，用于根据props中传入的不同事件类型确定不同的响应机制；

template定义了面板模型和控件模型的可选主题类型，主题接收props中包含的模型样式参数以响应用户的自定义样式输入。

依据上述特征，methods具有以下事件类型的响应机制：

将控件绑定到某个ICD变量，在控件状态变更时，通过Post动作发送一条包含该ICD变量的数据给服务端，服务端接收到Post数据，会根据动作绑定的设置触发测试引擎以事件或周期形式发送包含该变量的完整消息；

将控件动作绑定到其他面板，当控件动作执行时会弹出绑定的面板；

自定义发送一条请求，请求的类型为Get或Post类型，请求的地址和参数由用户自定义。

依据上述特征，实例生成模块还用于定义各参数的属性，参数的属性包括面板或控件的中文自然语言描述key、类型type、映射前端基础控件类is、可配置项config，参数的属性是在浏览器中自动生成面板实例或控件实例参数配置栏时使用。

依据上述特征，实例存储与加载模块执行以下操作：

1)在实例生成模块生成控件实例后，调用item_insert将面板实例和控件实例的各类参数存储到面板JavaScript对象中，多个同类型实例通过独立的列表项item进行区分，调用item_delete删除面板实例和控件实例的各类参数；

2)利用VUE的component标签将控件参数存储列表中的控件实例的各类参数取出并根据对象类型将参数赋值给对应控件模型的props参数，VUE会对component标签进行解析，进而通过浏览器渲染引擎渲染出控件的样式及事件动作；当控件参数存储列表的控件参数发生修改时，VUE会以回调方式完成对象的重新加载，实现对面板或控件样式的动态编辑。

进一步，基于HTML5和VUE技术的航电仿真面板生成系统包含参数编辑与转译模块，参数编辑与转译模块负责接收用户的参数输入并写入控件参数存储列表实现控件的样式控制和事件绑定，具体如下：

1)根据网页输入控件类型逐个基于VUE Component建立对应组件模型；

2)HTML代码中添加<component>标签，并将控件参数作为输入用于确定组件的样式，以此实现对控件参数输入表单样式的控制，对应控件的自然语言描述通过config_props.key与输入控件组合显示，实现面向用户的自然语言描述和参数输入；

3)组件模型中包含setter和getter，setter用于将用户输入的值存储到对应控件实例的参数中，getter用于获取到对应参数数值并添加参数相应的单位。

进一步，基于HTML5和VUE技术的航电仿真面板生成系统还包含控件定位模块，控件定位模块通过对鼠标事件的捕获，获取控件的实时位置并存储到控件参数存储列表中，进而通过实时渲染形成一种鼠标操控控件移动的人机交互效果，由此实现控件的拖拽布局，具体如下：

1)基于VUE的v-on:mousedown指令，将鼠标左键按下动作绑定到item_mousedown，当鼠标在控件所处<div>域上按下时触发item_mousedown，该item_mousedown触发后，控件边框样式会被修改为高亮，以提示用户控件被成功选中，同时记录当前鼠标坐标作为鼠标的初始位置，并将鼠标跟踪标记变量flag_move置为1，表示开始追踪鼠标位置。

2)基于VUE的v-on:mousemove指令，将鼠标移动事件绑定到item_mousemove，该item_mousemove在鼠标移动时被触发，在鼠标跟踪标记变量flag_move为1的时候使能，当该item_mousemove被使能时，鼠标的实时位置会与1)中记录的鼠标初始位置进行对比，鼠标在平面坐标系下的矢量坐标将用于计算控件的在x和y方向的移动距离，从而得到控件新的像素位置并存储到控件参数存储列表中，经过重新渲染，控件的位置得到更新；

3)基于VUE的v-on:mouseup指令，将鼠标左键抬起事件绑定到item_mouseup，该item_mouseup触发后鼠标跟踪标记变量flag_move置为0，控件不会跟随鼠标移动，控件的最终位置即保存到控件参数存储列表中。

进一步，基于HTML5和VUE技术的航电仿真面板生成系统还包含面板代码生成模块,当面板实例和控件实例在浏览器中完成渲染和呈现后生成HTML代码，具体为：构建基于jQuery.prop("outerHTML")的panel_downloa，使用prop("outerHTML")获得包含指定节点本身的HTML代码，再利用HTMLFormat函数将代码格式化为HTML格式的字符串输出给用户，实现代码的前端展示和拷贝。

进一步，基于HTML5和VUE技术的航电仿真面板生成系统还包含面板代码生成模块,在面板实例或控件实例在浏览器中完成渲染和呈现后，将面板的JavaScript对象使用JSON.stringify()转化为JSON格式的配置代码。

进一步，基于HTML5和VUE技术的航电仿真面板生成系统还包含页面，页面各组成部分功能如下：

1)控件库：包含构成面板的面板要素和与消息收发相关的控件，控件库的控件类型在页面代码中定义，并基于CSS样式库建立基本样式，控件的拓展样式以代码块的形式独立存储在本地；

2)画布区域：控件库中的元素拖拽到此画布区域进行面板的组合；

3)属性和动作设置区域：点击某个控件设置该控件属性和动作；

4)撤销和前进功能按键：点击按钮可以撤销和恢复最近的操作；

5)快速对齐按键功能区：用于调整布局；

6)面板元素定位和尺寸设置功能区：设置面板上各个控件的左上角顶点位置坐标和控件的尺寸；

7)面向面板整体的功能区：点击重置按钮可以将画布重置为初始状态；点击预览按钮对面板样式和功能进行快速地预览；点击保存按钮保存当前面板的JSON配置代码；点击另存为按钮以新条目存储面板的SON配置代码；点击下载按钮会弹出面板HTML代码的展示模态框；

9)库存面板查看按钮：点击该按钮弹出包含该项目已经创建面板预览图的模态框。

本发明的有益效果在于：

(1)实现仿真面板开发的去代码化。依托模型模块、实例生成模块、实例存储与加载模块实现了基于模型的仿真面板创建，使得仿真面板创建过程参数化，同时依托参数编辑与转译模块的表单生成功能实现了参数配置的可视化，开发人员不需要编写复杂的HTML代码和JavaScript代码，仅通过配置面板及面板控件参数即可输出可视化的仿真面板。

(2)实现所见即所得的拖拽布局。开发控件定位模块，通过鼠标点击、移动、松开动作的捕获和相应事件方法的定义，实现了控件在画布上的拖拽交互，极大降低仿真面板设计成本和开发难度。

(3)控件和面板易拓展、可复用。基于该方法构建的模型模块为通用可扩展、可复用模型库，基于统一模型架构设计可方便新增模型和对模型进行修改，使得面板及控件具有良好的扩展性。同时通过面板代码生成模块的JSON格式配置代码生成功能，实现了面板的配置化代码的一键创建，可在统一的服务架构下复制、转移、二次开发，实现仿真面板的高度可复用。

附图说明

图1为基于HTML5和VUE技术的航电仿真面板生成系统的结构框图。

图2为基于HTML5和VUE技术的航电仿真面板生成系统的工作流程示意图。

图3为基于HTML5和VUE技术的航电仿真面板生成系统的页面示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。

本实施例所示的一种基于HTML5和VUE技术的航电仿真面板生成系统，基于统一的前端框架，构建了三大核心部件：面向航电领域的可视化模型库，支持拖拽布局的画布系统，高效的面板代码生成器。通过WEB页面，可以快速完成面板的布局、样式设计、事件绑定及面板HTML代码和配置代码的保存和共享，实现仿真面板的零代码开发和高效复用。

一、航电仿真面板生成系统架构

本实施例所示的一种基于HTML5和VUE技术的航电仿真面板生成系统的整体架构参考附图1所示，其主要由以下核心模块组成：模型模块、实例生成模块，实例存储与加载模块、参数编辑与转译模块、控件定位模块、面板代码生成模块。

(一)模型模块

模型模块基于VUE Component技术构建，定义了面板的面板模型和多种航电领域常用数据的监视控件与激励控件的控件模型，控件模型存储了多种模型样式，可响应用户选择，快速渲染切换控件样式，通过对面板模型和控件模型进行实例化可以实现面板及面板控件实例的快速生成和样式控制。

面板模型和控件模型均包含参数入口(props)、事件响应方法(method)以及主题(template)。

props内包含一个同名的字典，该参数用于接受外部输入的实例生成模块进行实例化所需的各种参数。

methods定义了一个request函数，用于根据props中传入的不同事件类型(output_type)确定不同的响应机制。methods具有以下事件类型的响应机制：

1)ICD数据。将控件绑定到某个ICD变量，可以在控件状态变更时，通过Post动作发送一条包含该ICD变量的数据给服务端，服务端接收到Post数据，会根据动作绑定的设置触发测试引擎以事件或周期形式发送包含该变量的完整消息；

2)其他仿真面板。可以将控件动作绑定到其他面板，当控件动作执行时会弹出绑定的面板；

3)自定义消息。可以自定义发送一条请求，请求的类型可以选择为Get或Post类型，请求的地址和参数可以由用户自定义。自定义功能面向可能出现的未知需求，例如用户需要通过某个请求触发服务端的某个复杂逻辑线程就可以通过自定义请求的方式实现。

template定义了面板模型和控件模型的可选主题类型，每类控件可包含多种样式主题，主题可接收props中包含的模型样式参数以响应用户的自定义样式输入，如颜色控制、字体大小等。

控件模型代码示意如下：

(二)实例生成模块

实例生成模块定义了面板本身及每类控件的参数及各参数的初始值，同时还定义了各参数的属性，参数的属性包括面板或控件的中文自然语言描述(key)、类型(type)、映射前端基础控件类(is)、可配置项(config)。参数的属性是在浏览器中自动生成面板实例或控件实例参数配置栏时使用的。当用户在画布新建面板或控件时，将参数的初始值及随机生成的id以深拷贝的形式赋值控件模型，由此就基于控件模型生成了独立的面板实例或控件实例。

实例生成模块代码如下所示：

(三)实例存储与加载模块

经过实例生成模块的实例化，在内存中已经建立了具有唯一标识的面板实例或控件实例，但面板实例或控件实例尚未在浏览器中完成渲染和呈现。为此，需要构建实例存储与加载模块，其主要包含两部分功能：

1)实例参数存储功能。即已经实例化的面板实例和控件实例的各类参数的存储控制，实例生成模块生成控件实例后，需要调用实例存储与加载模块的item_insert方法，将面板实例和控件实例的各类参数存储到面板JavaScript对象中，多个同类型实例会通过独立的列表项(item)进行区分，调用item_delete方法可删除面板实例和控件实例的各类参数。

2)实例对象加载功能。利用VUE的component标签将控件参数存储列表中的控件实例的各类参数取出并根据对象类型将参数赋值给对应控件模型的props参数，VUE会对component标签进行解析，进而通过浏览器渲染引擎渲染出控件的样式及事件动作。对象加载动作为实时响应机制，当控件参数存储列表的控件参数发生修改时，VUE会以回调方式完成对象的重新加载，实现对面板或控件样式的动态编辑。

(四)参数编辑与转译模块

参数编辑与转译模块负责接收用户的参数输入并写入控件参数存储列表实现控件的样式控制和事件绑定。该模块可根据面板或控件参数生成自然语言描述的参数编辑表格，使以方便用户理解。由于参数编辑与转译模块无法直接识别自然语言，因此需要对参数进行转译，以将自然语言的参数描述转化为程序语言描述。

具体的实现方法为：

1)组件模型定义。根据网页输入控件类型逐个基于VUE Component建立对应组件模型，例如可将类型为config-input的组件映射为<input/>类型的页面控件，组件模型通过props参数进行传参。

2)表单生成。HTML代码中添加<component>标签，并将控件参数作为输入用于确定组件的样式，以此实现对控件参数输入表单样式的控制，对应控件的自然语言描述通过config_props.key与输入控件组合显示，实现面向用户的自然语言描述和参数输入。

3)组件参数传递。组件模型中定义了setter和getter方法，setter方法用于将用户输入的值存储到对应控件实例的参数中，实例参数仅存储数值不存储单位，getter方法用于获取到对应参数数值并添加参数相应的单位，例如px等，以此实现参数在前后端的映射。

参数编辑与转译模块代码如下所示：

(五)控件定位模块

控件定位模块旨在通过对鼠标事件的捕获，获取控件的实时位置并存储到控件参数存储列表中，进而通过实时渲染形成一种鼠标操控控件移动的人机交互效果，由此实现控件的拖拽布局。

控件定位模块的具体实现方法为：

1、构建item_mousedown方法，基于VUE的v-on:mousedown指令，将鼠标左键按下动作绑定到item_mousedown方法，当鼠标在控件所处<div>域上按下时触发item_mousedown。该item_mousedown触发后，控件边框样式会被修改为高亮，以提示用户控件被成功选中，同时记录当前鼠标坐标作为鼠标的初始位置，并将鼠标跟踪标记变量flag_move置为1，表示开始追踪鼠标位置。

2、构建item_mousemove方法，基于VUE的v-on:mousemove指令，将鼠标移动事件绑定到item_mousemove方法，该item_mousemove在鼠标移动时被触发，但仅当鼠标跟踪标记变量flag_move为1的时候才会使能。当该item_mousemove被使能时，鼠标的实时位置会与1)中记录的鼠标初始位置进行对比，鼠标在平面坐标系下的矢量坐标将用于计算控件的在x和y方向的移动距离，从而得到控件新的像素位置并存储到控件参数存储列表中，经过重新渲染，控件的位置得到更新。当该过程以适当帧率体现在页面上时，视觉上就产生了控件跟随鼠标移动的效果，即实现了空间的拖拽布局。

3、构建item_mouseup方法，基于VUE的v-on:mouseup指令，将鼠标左键抬起事件绑定到item_mouseup方法，该item_mouseup触发后鼠标跟踪标记变量flag_move置为0，当鼠标移动时item_mousemove方法随被触发，但不再使能，控件不会跟随鼠标移动，控件的最终位置即保存到控件参数存储列表中。

(六)面板代码生成模块

基于以上各个模块已经实现了仿真面板的拖拽布局和实时渲染，为了方便的面板的转移、保存和二次开发，还需要能够对面板代码实现自动生成才能将面板配置固化。

此处所述代码包括两类，一类是经过VUE和Chromium V8引擎渲染后的完整HTML代码，此类代码与普通网页代码无异，可方便进行转移和嵌入到其他页面中进行基于原生HTML语言的二次开发，但此类代码无法重新导入到原服务架构中进行重新编辑；另一类代码是基于服务架构生成的JSON格式的配置代码，该配置代码不包含任何HTML元素，只有基于本专利建立的服务组件才能对配置代码进行渲染生成面板样式，这种代码的优点是便于保存和基于服务组件进行二次开发，这种形式的二次开发则更加便捷。面板代码生成模块可同时生成以上两类代码，以便于在不同场景下选择使用。

两类代码的生成方法如下：

1)HTML代码的生成。构建基于jQuery.prop("outerHTML")方法的panel_download方法，使用prop("outerHTML")方法可以获得包含指定节点本身的HTML代码，再利用HTMLFormat函数将代码格式化为HTML格式的字符串输出给用户，实现代码的前端展示和拷贝。

2)JSON格式配置代码生成。将面板的JavaScript对象使用JSON.stringify()方法转化为JSON字符串完成，面板的JavaScript对象固化在前端代码中，控件列表为面板JavaScript对象的子项，除了控件列表外，面板的JavaScript对象还包括面板背景、边框、尺寸等样式的参数，JSON格式的配置代码可以与服务器后端联动，保存在数据库中，当面板需要使用或修改时，只需要从数据库中读取面板的配置代码，基于实例存储及加载模块即可重新渲染获得完整的测试面板图像。

二、航电仿真面板生成系统的实施流程

通过仿真面板创建流程说明航电仿真面板生成系统各个模块间的逻辑关系，仿真面板创建流程如附图2所示，具体如下：

1)新建面板或对已有面板进行编辑。当选择新建面板时，模型模块提供面板的面板模型，实例生成模块基于面板模型建立面板实例，实例存储与加载模块的实例参数存储功能对面板参数进行存储，实例存储与加载模块的实例对象加载功能渲染默认的空白面板至画布区；当选择从已有面板进行编辑时，前端根据用户选定的面板编号从数据库读取相应面板的JSON配置代码，调用实例存储与加载模块的实例参数存储功能，将面板配置参数更新到面板的JavaScript对象，通过实例存储与加载模块的实例对象加载功能将面板渲染到浏览器页面。

2)新增面板控件。在浏览器页面的控件栏中选择控件，模型模块提供所选控件的控件模型，控件实例生成模块基于控件模型实例化控件，实例存储与加载模块对实例参数存储和渲染从而将控件呈现在网页上。

3)控件移动。鼠标左键点击控件调用控件定位模块的item_mousedown方法，开始追踪控件位置，通过拖动控件调用控件定位模块的item_mousemove方法对控件实例进行实时定位，定位过程中实例存储与加载模块可对控件位置进行实时更新渲染，控件移动结束后，松开鼠标左键，调用控件定位模块的item_mouseup方法将控件的最终位置保存到控件实例位置参数中。

4)控件删除。鼠标左键单击控件实例，点击键盘Del键，实例存储与加载模块的实例参数存储功能清除对应实例对象参数，同时实例存储与加载模块的实例对象加载功能重新渲染面板实例在页面上删除对应控件。

5)设置控件的属性和动作绑定。单击画布上的控件，参数编辑和转译模块的表单生成功能会在页面上渲染出当前控件的属性设置和事件绑定设置栏，用户可对控件样式和事件进行设置，设置后参数编辑和转译模块的参数传递功能调用实例存储与加载模块的实例参数存储功能存储实例参数，同时实例存储与加载模块的实例对象加载功能基于新的参数对控件样式进行渲染更新。

6)保存或下载面板。用户完成面板设计后，可以点击保存或另存，通过面板代码生成模块的JSON格式配置代码生成功能生成JSON格式的面板代码，存储服务会将面板的JSON格式配置代码存储到数据库。用户也可以点击下载，通过面板代码生成模块的HTML代码的生成功能生成面板的HTML代码，用户可以以文本复制的方式将代码进行复制转移。

三、航电仿真面板生成系统的页面设计

航电仿真面板生成系统的页面如附图3所示，页面各组成部分功能如下：

1)可视化控件库：包含构成面板的面板要素和与消息收发相关的控件，面板要素主要包括面板底板、文本框、Checkbox等，与消息收发相关的控件包括激励控件、监视控件和复合功能控件，其中激励控件包括按钮、开关、旋钮、轨迹球等，监视控件包括指示灯、仪表盘、图表等，复合控件是指既具有激励功能又具有监视功能的控件，如按钮灯等。控件库的控件类型在工具页面代码中定义，并基于CSS样式库建立基本样式，控件的拓展样式以代码块的形式独立存储在本地，拓展样式包含更多同类型控件的拟物化样式；

2)画布区域：控件库中的元素可以拖拽到此区域进行面板的组合，创建面板时首先拖拽一个形状作为其他元素的容器，然后在容器内可添加其他的面板要素，初次拖拽添加的控件会以基本样式呈现，画布区域支持通过快捷键复制和删除控件，同时支持右键操作；

3)属性和动作设置区域：点击某个控件可以设置该控件属性和动作，属性用于设置控件的样式，可以在属性栏对控件基本样式进行修改，可以修改包含但不限于文本颜色、背景颜色、文本大小等样式，同时在属性栏可以选择控件以某个拓展样式进行展示；动作绑定用于设置控件的功能，用于绑定特定响应动作。

4)撤销和前进功能按键：点击按钮可以撤销和恢复最近的操作；

5)快速对齐按键功能区：用于快速调整布局，支持多个控件边缘对齐、居中对齐，支持统一设置多个控件间隔；

6)面板元素定位和尺寸设置功能区：可以设置面板上各个控件的左上角顶点位置坐标和控件的尺寸；

7)面向面板整体的功能区：点击重置按钮可以将画布重置为初始状态；点击预览按钮可以对面板样式和功能进行快速地预览，以弹出模态框的形式呈现，可以测试面板的收发功能；点击保存按钮可以保存当前面板的JSON配置代码，如果为新面板会请求为面板命名，若为已存面板则直接保存；点击另存为按钮会以新条目存储面板的SON配置代码，存储前会请求为面板命名；点击下载按钮会弹出面板HTML代码的展示模态框，用户可以对代码进行复制；

8)库存面板查看按钮：点击该按钮可以弹出包含该项目已经创建面板预览图的模态框，用户可单击编辑按钮对某个面板进行编辑，可单击“保存到公共面板库”按钮将本项目中包含的面板存储到公共面板库中，可选择公共面板库中的面板样式作为基准进行编辑，单击删除按钮可以从面板库删除相应面板。

可以理解的是，对本领域普通技术人员来说，可以根据本发明的技术方案及其发明构思加以等同替换或改变，而所有这些改变或替换都应属于本发明所附的权利要求的保护范围。

Claims (10)

1.一种基于HTML5和VUE技术的航电仿真面板生成系统，包含模型模块、实例生成模块和实例存储与加载模块，其特征在于：

模型模块用于提供面板的面板模型和多种航电领域常用数据的监视控件与激励控件的控件模型；

实例生成模块用于定义面板及每类控件的参数及各参数的初始值，当用户在画布新建面板或控件时，将参数的初始值及随机生成的id以深拷贝的形式赋值控件模型，由此就生成了面板实例或控件实例；

实例存储与加载模块用于将面板实例或控件实例在浏览器中完成渲染和呈现。

2.根据权利要求1所述的一种基于HTML5和VUE技术的航电仿真面板生成系统，其特征在于面板模型和控件模型均包含参数入口props、事件响应方法method以及主题template；

props内包含一个同名的字典，用于接受外部输入的实例生成模块进行实例化所需的各种参数；

methods定义了一个request函数，用于根据props中传入的不同事件类型确定不同的响应机制；

template定义了面板模型和控件模型的可选主题类型，主题接收props中包含的模型样式参数以响应用户的自定义样式输入。

3.根据权利要求2所述的一种基于HTML5和VUE技术的航电仿真面板生成系统，其特征在于methods具有以下事件类型的响应机制：

将控件绑定到某个ICD变量，在控件状态变更时，通过Post动作发送一条包含该ICD变量的数据给服务端，服务端接收到Post数据，会根据动作绑定的设置触发测试引擎以事件或周期形式发送包含该变量的完整消息；

将控件动作绑定到其他面板，当控件动作执行时会弹出绑定的面板；

自定义发送一条请求，请求的类型为Get或Post类型，请求的地址和参数由用户自定义。

4.根据权利要求1所述的一种基于HTML5和VUE技术的航电仿真面板生成系统，其特征在于实例生成模块还用于定义各参数的属性，参数的属性包括面板或控件的中文自然语言描述key、类型type、映射前端基础控件类is、可配置项config，参数的属性是在浏览器中自动生成面板实例或控件实例参数配置栏时使用。

5.根据权利要求1所述的一种基于HTML5和VUE技术的航电仿真面板生成系统，其特征在于实例存储与加载模块执行以下操作：

1)在实例生成模块生成控件实例后，调用item_insert将面板实例和控件实例的各类参数存储到面板JavaScript对象中，多个同类型实例通过独立的列表项item进行区分，调用item_delete删除面板实例和控件实例的各类参数；

2)利用VUE的component标签将控件参数存储列表中的控件实例的各类参数取出并根据对象类型将参数赋值给对应控件模型的props参数，VUE会对component标签进行解析，进而通过浏览器渲染引擎渲染出控件的样式及事件动作；当控件参数存储列表的控件参数发生修改时，VUE会以回调方式完成对象的重新加载，实现对面板或控件样式的动态编辑。

6.根据权利要求1所述的一种基于HTML5和VUE技术的航电仿真面板生成系统，其特征在于还包含参数编辑与转译模块，参数编辑与转译模块负责接收用户的参数输入并写入控件参数存储列表实现控件的样式控制和事件绑定，具体如下：

1)根据网页输入控件类型逐个基于VUE Component建立对应组件模型；

2)HTML代码中添加<component>标签，并将控件参数作为输入用于确定组件的样式，以此实现对控件参数输入表单样式的控制，对应控件的自然语言描述通过config_props.key与输入控件组合显示，实现面向用户的自然语言描述和参数输入；

3)组件模型中包含setter和getter，setter用于将用户输入的值存储到对应控件实例的参数中，getter用于获取到对应参数数值并添加参数相应的单位。

7.根据权利要求1所述的一种基于HTML5和VUE技术的航电仿真面板生成系统，其特征在于还包含控件定位模块，控件定位模块通过对鼠标事件的捕获，获取控件的实时位置并存储到控件参数存储列表中，进而通过实时渲染形成一种鼠标操控控件移动的人机交互效果，由此实现控件的拖拽布局，具体如下：

1)基于VUE的v-on:mousedown指令，将鼠标左键按下动作绑定到item_mousedown，当鼠标在控件所处<div>域上按下时触发item_mousedown，该item_mousedown触发后，控件边框样式会被修改为高亮，以提示用户控件被成功选中，同时记录当前鼠标坐标作为鼠标的初始位置，并将鼠标跟踪标记变量flag_move置为1，表示开始追踪鼠标位置。

2)基于VUE的v-on:mousemove指令，将鼠标移动事件绑定到item_mousemove，该item_mousemove在鼠标移动时被触发，在鼠标跟踪标记变量flag_move为1的时候使能，当该item_mousemove被使能时，鼠标的实时位置会与1)中记录的鼠标初始位置进行对比，鼠标在平面坐标系下的矢量坐标将用于计算控件的在x和y方向的移动距离，从而得到控件新的像素位置并存储到控件参数存储列表中，经过重新渲染，控件的位置得到更新；

3)基于VUE的v-on:mouseup指令，将鼠标左键抬起事件绑定到item_mouseup，该item_mouseup触发后鼠标跟踪标记变量flag_move置为0，控件不会跟随鼠标移动，控件的最终位置即保存到控件参数存储列表中。

8.根据权利要求1所述的一种基于HTML5和VUE技术的航电仿真面板生成系统，其特征在于还包含面板代码生成模块,当面板实例和控件实例在浏览器中完成渲染和呈现后生成HTML代码，具体为：构建基于jQuery.prop("outerHTML")的panel_downloa，使用prop("outerHTML")获得包含指定节点本身的HTML代码，再利用HTMLFormat函数将代码格式化为HTML格式的字符串输出给用户，实现代码的前端展示和拷贝。

9.根据权利要求1所述的一种基于HTML5和VUE技术的航电仿真面板生成系统，其特征在于还包含面板代码生成模块,在面板实例或控件实例在浏览器中完成渲染和呈现后，将面板的JavaScript对象使用JSON.stringify()转化为JSON格式的配置代码。

10.根据权利要求1所述的一种基于HTML5和VUE技术的航电仿真面板生成系统，其特征在于还包含页面，页面各组成部分功能如下：

1)控件库：包含构成面板的面板要素和与消息收发相关的控件，控件库的控件类型在页面代码中定义，并基于CSS样式库建立基本样式，控件的拓展样式以代码块的形式独立存储在本地；

2)画布区域：控件库中的元素拖拽到此画布区域进行面板的组合；

3)属性和动作设置区域：点击某个控件设置该控件属性和动作；

4)撤销和前进功能按键：点击按钮可以撤销和恢复最近的操作；

5)快速对齐按键功能区：用于调整布局；

6)面板元素定位和尺寸设置功能区：设置面板上各个控件的左上角顶点位置坐标和控件的尺寸；

7)面向面板整体的功能区：点击重置按钮可以将画布重置为初始状态；点击预览按钮对面板样式和功能进行快速地预览；点击保存按钮保存当前面板的JSON配置代码；点击另存为按钮以新条目存储面板的SON配置代码；点击下载按钮会弹出面板HTML代码的展示模态框；

8)库存面板查看按钮：点击该按钮弹出包含该项目已经创建面板预览图的模态框。

Images