CN107870993A - 一种基于svg的接触网运检修分工可视化构建方法 - Google Patents

Abstract

本发明公开了一种基于SVG的接触网运检修分工可视化构建方法，包括以下步骤：1）收集结构化作业派工数据及制作接触网作业相关图元；2）将作业派工数据转化为适用于Web应用展现的SVG数据；3）通过SVG和jQuery对SVG数据进行分层绘制，初步形成分工可视化界面；解决将繁杂的数据以更加的清晰的方式展示出来的需求问题，基于结构化作业派工数据，实现分工可视化展示，以数据驱动界面展示。

Description

一种基于SVG的接触网运检修分工可视化构建方法

技术领域

本发明涉及检测、监测技术技术等领域，具体的说，是一种基于SVG的接触网运检修分工可视化构建方法。

背景技术

根据《接触网运行检修规程》，接触网是电气化铁路的重要组成部分，与行车直接相关。从事接触网工作的广大职工必须牢固树立为运输服务的思想，贯彻“修养并重，预防为主”的方针，在确保安全、提高质量的基础上努力提高效率，降低成本，不断改善接触网的技术状态，保证安全、不间断、质量良好地供电。

各级主管部门要加强对接触网运行和检修工作的领导，按照全面质量管理的基本原则和要求，贯彻落实“三定、四化、记名检修”精神，抓好各项基础工作。要科学地组织接触网运行和检修的各个环节，建立严密而协调的生产秩序，不断提高供电工作质量。因此对接触网运行检修作业派工高效、合理安排就显得至关重要。

当前，路局各个供电段接触网运行检修作业派工都是通过人工在纸质上或通过PPT粗略地绘制，口头讲述作业安排和注意事项。这种作业派工方式，管理人员不能准确形象的表述作业安排及作业人员不能明确作业位置（如公里标）；因此将繁杂的数据以更加的清晰的方式展示出来的需求日益迫切。就当前数据可视化的实现方式有：

1）基于GIS地图，这种方式的优点是功能和图层配置灵活，但需要GIS地图支持，存在适用面和平台依赖方面的问题；

2）基于CAD底图，这种方式的优点是结构清晰、使用面广，但制作复杂，成本较高，灵活性差。

现有技术存在以下不足之处：

现有技术能实现可视化，但一个应用中囊括在所有的功能，代码混杂在一起，没有模块化功能，难以复用；未在接触网运检修领域实现分工可视化；具有扩展性差，交互性差等不足。

发明内容

本发明的目的在于提供一种基于SVG的接触网运检修分工可视化构建方法，解决将繁杂的数据以更加的清晰的方式展示出来的需求问题，基于结构化作业派工数据，实现分工可视化展示，以数据驱动界面展示。

本发明通过下述技术方案实现：一种基于SVG的接触网运检修分工可视化构建方法，包括以下步骤：

1）收集结构化作业派工数据及制作接触网作业相关图元；

2）将作业派工数据转化为适用于web应用展现的SVG数据；

3）通过SVG和jQuery对SVG数据进行分层绘制，初步形成分工可视化界面。

进一步的为更好地实现本发明，特别采用下述设置方式：所述步骤2）包括以下具体步骤：

2.1）从数据库中获取JSON格式的作业派工数据；

2.2）将JSON格式的作业派工数据转化为SVG图元数据；

2.3）分类将SVG图元数据组合成WEB应用显示图层。

进一步的为更好地实现本发明，特别采用下述设置方式：所述步骤2.2）中，作业派工数据转化为SVG图元数据时，作业派工数据按公里标换算，且换算公式为：[(绘制元素开始公里标-股道开始公里标)/股道长度]*股道画布长度。

进一步的为更好地实现本发明，特别采用下述设置方式：所述步骤3）中对SVG数据进行分层绘制，具体分为下述图层：

基础层：由一杆一档基础数据驱动绘制本次作业的站区间和标题栏；

数据层：绘制出本次作业范围、作业设备、地线操作人、行车防护人、信号机、作业门等信息；

操作层：用于存放用户自定义图形，所述用户自定义图形包括图元库中综合、人员、车辆、设备、形状中的一种或多种。

进一步的为更好地实现本发明，特别采用下述设置方式：所述基础层、数据层和操作层均能自定义是否显示，且能够通过双击查看图元详情。

进一步的为更好地实现本发明，特别采用下述设置方式：所述站区间长度按2~6:1转化为SVG图元数据。

进一步的为更好地实现本发明，特别采用下述设置方式：还包括步骤4）在雏形界面上进行自定义编辑，形成分工可视化界面，在进行自定义编辑时，基于SVG的可视化界面，进行分工可视化界面的滚轮放大缩小、拖拽、删除、属性修改和点击、保存操作。

进一步的为更好地实现本发明，特别采用下述设置方式：Web前端基于jQuery+SVG库封装基础层、数据层和操作层方法，即基础层、数据层和操作层通过Web前端基于jQuery+SVG库封装实现，具体调用步骤为：

a）初始化画布大小：通过调用svg viewbox方法初始化画布大小；

b）调用封装的基础层方法初始化站区间、股道和标题栏；调用数据层方法初始化作业范围、作业设备、地线操作人、行车防护人、信号机、作业门等信息，从弹出框中选出可视化区域要加载的本次作业相关的其他重点设备；绘制设备过程中绑定设备详细信息；

c）调用封装的操作层方法，实现自定义添加接触网作业相关图元；即调用封装的操作层方法，实现自定义添加综合、人员、车辆、设备、形状等几大类图元。

进一步的为更好地实现本发明，特别采用下述设置方式：所述Web前端通过Ajax异步请求，调用Java接口获取可视化绘制JSON数据；优选的用于植入分工可视化界面的Java后端采用SpringMVC架构，根据结构化数据（作业派工数据、一杆一档数据、图元配置数据）编写派工接口、图元接口并返回JSON格式数据。

进一步的为更好地实现本发明，特别采用下述设置方式：所述作业派工数据包括作业地点、作业范围、作业人员及作业设备信息中的一种或多种；所述接触网作业相关图元包括综合、人员、车辆、设备、形状中的一种或多种。

本发明与现有技术相比，具有以下优点及有益效果：

本发明在没有GIS或CAD底图数据的环境下，充分利用实际作业派工数据，将各种接触网图元组合以图层的方式在Web应用上展现。

本发明在接触网运行检修管理系统中，采用HTML5 SVG绘图技术，基于结构化一杆一档和作业派工数据，实现作业派工可视化化分工。传统的接触网运行检修仅能靠人员口述整个作业派工过程，而采用可视化作业派工能够从视觉上更直观、更明确的给作业人员讲述具体派工情况、在什么位置作业和作业过程中应当在什么地方注意些什么。

本发明主要是基于SVG技术实现接触网运检修分工可视化作业派工；本发明拥有一套可配置的图元，图层分离清楚，数据驱动图层，具有良好的扩展性，可灵活地应对需求变更。

本发明提出一种以模块化思想为基础的接触网运检修分工可视化方法。

本发明是基于结构化作业派工数据，实现分工可视化展示，以数据驱动界面展示。功能均是以组件化思想实现，具有良好的扩展性。

本发明实现图形交互，满足图元的新增、删除、修改和点击拖拽事件，图层的显示隐藏控制，运动轨迹的绘制。

附图说明

图1为本分工可视化构建方法步骤图。

图2为可视化数据转化步骤图。

图3为分工可视化结构示意图。

图4为分工可视化实现流程示意图。

图5为具体实施案例效果图。

具体实施方式

下面结合实施例对本发明作进一步地详细说明，但本发明的实施方式不限于此。

实施例1：

本发明提出了一种基于SVG的接触网运检修分工可视化构建方法，解决将繁杂的数据以更加的清晰的方式展示出来的需求问题，基于结构化作业派工数据，实现分工可视化展示，以数据驱动界面展示，如图1-4所示，包括以下步骤：

1）收集结构化作业派工数据，其中作业派工数据包括作业地点、作业范围、作业人员、作业设备等信息中的一种或多种；制作接触网作业相关图元，其中接触网作业相关图元包括综合、人员、车辆、设备、形状等几大类图元中的一种或多种；

2）将作业派工数据（包括作业地点、作业范围、作业人员、作业设备等信息中的一种或多种）转化为适用于Web应用展现的SVG数据；

3）通过SVG和jQuery对SVG数据进行分层绘制，初步形成分工可视化界面。

实施例2：

本实施例是在上述实施例的基础上进一步优化，进一步的为更好地实现本发明，如图1-4所示，特别采用下述设置方式：所述步骤2）包括以下具体步骤：

2.1）从数据库中获取JSON格式的作业派工数据；

2.2）将JSON格式的作业派工数据转化为SVG图元数据；

2.3）分类将SVG图元数据组合成WEB应用显示图层，以便适用于web应用展现。

实施例3：

本实施例是在上述任一实施例的基础上进一步优化，进一步的为更好地实现本发明，如图1-4所示，特别采用下述设置方式：所述步骤2.2）中，作业派工数据转化为SVG图元数据时，作业派工数据按公里标换算，且换算公式为：[(绘制元素开始公里标-股道开始公里标)/股道长度]*股道画布长度。

实施例4：

本实施例是在上述任一实施例的基础上进一步优化，进一步的为更好地实现本发明，如图1-4所示，特别采用下述设置方式：所述步骤3）中对SVG数据进行分层绘制，具体分为下述图层：

基础层：由一杆一档基础数据驱动绘制本次作业的站区间和标题栏；

数据层：绘制出本次作业范围、作业设备、地线操作人、行车防护人、信号机、作业门，即基于本次作业派工数据绘制作业范围、作业设备、行车防护和地线操作人员、信号机等；

操作层：用于存放用户自定义图形，所述用户自定义图形包括图元库综合、人员、车辆、设备、形状中的一种或多种。

实施例5：

本实施例是在上述任一实施例的基础上进一步优化，进一步的为更好地实现本发明，如图1-4所示，特别采用下述设置方式：所述基础层、数据层和操作层均能自定义是否显示，且能够通过双击查看图元详情。

实施例6：

本实施例是在上述任一实施例的基础上进一步优化，进一步的为更好地实现本发明，如图1-4所示，特别采用下述设置方式：所述站区间长度按2~6:1转化为SVG图元数据，在设置时，优选的将接触网站区间长度按3：1转化为SVG图元数据。

实施例7：

本实施例是在上述任一实施例的基础上进一步优化，进一步的为更好地实现本发明，如图1-4所示，特别采用下述设置方式：还包括步骤4）在雏形界面上进行自定义编辑，形成分工可视化界面，在进行自定义编辑时，基于SVG的可视化界面，进行分工可视化界面的滚轮放大缩小、拖拽、删除、属性修改和点击、保存操作。

实施例8：

本实施例是在上述任一实施例的基础上进一步优化，如图1-4所示，进一步的为更好地实现本发明，特别采用下述设置方式：Web前端基于jQuery+SVG库封装基础层、数据层和操作层方法，具体调用步骤为：

a）初始化画布大小：通过调用svg viewbox方法初始化画布大小；

b）调用封装的基础层方法初始化站区间、股道和标题栏；调用数据层方法初始化作业范围、作业设备、地线操作人、行车防护人、信号机、作业门，从弹出框中选出可视化区域要加载的本次作业相关的其他重点设备；绘制设备过程中绑定设备详细信息；调用封装的基础层方法初始化站区间、股道和标题栏；

c）调用封装的操作层方法，实现自定义添加接触网作业相关图元。

实施例9：

本实施例是在上述任一实施例的基础上进一步优化，如图1-4所示，进一步的为更好地实现本发明，特别采用下述设置方式：所述Web前端通过Ajax异步请求，调用Java接口获取可视化绘制JSON数据；优选的用于植入分工可视化界面的Java后端采用SpringMVC架构，根据结构化数据（作业派工数据、一杆一档数据、图元配置数据）编写派工接口、图元接口并返回JSON格式数据。

实施例10：

本实施例是在上述任一实施例的基础上进一步优化，如图1-4所示，进一步的为更好地实现本发明，特别采用下述设置方式：所述作业派工数据包括作业地点、作业范围、作业人员及作业设备信息中的一种或多种；所述接触网作业相关图元包括综合、人员、车辆、设备、形状中的一种或多种。

实施例11：

本实施例是在上述任一实施例的基础上进一步优化，一种基于SVG的接触网运检修分工可视化构建方法，在进行构建时，采用如下步骤：

首先，进行数据准备：接触网运行检修管理系统作业派工模块，通过作业派工确定作业地点、作业范围、作业人员、作业设备等信息；

其次，将作业派工数据转化为适用于web应用展现的SVG数据，具体转化遵循：

一、将接触网站区间长度按3:1转化为SVG 图元数据；

二、作业地点、作业范围、作业人员、作业设备等信息按公里标换算，换算公式：[(绘制元素开始公里标-股道开始公里标)/股道长度]*股道画布长度；

且在进行转化时，具体步骤为：

第一步，从数据库中获取JSON格式的作业派工数据；

第二步，将JSON格式的作业派工数据转化为SVG图元数据；

第三步，分类将SVG图元数据组合成WEB应用显示图层，以便适用于web应用展现。

再次，通过SVG和jQuery对SVG数据进行分层绘制，初步形成分工可视化界面，分层绘制所分层包括：

基础层：基础层由一杆一档基础数据驱动绘制本次作业的站区间和标题栏；

数据层：基于本次作业派工数据绘制作业范围、作业设备、行车防护和地线操作人员、信号机等；

操作层：用于存放用户自定义图形，如综合、人员、车辆、设备、形状等；

以上各图层均能自定义是否显示，设备人员均能通过双击查看详情，具体结构图如图3所示。

最后，在雏形界面上进行自定义编辑，形成分工可视化界面，即能够基于SVG的可视化界面，进行分工可视化界面的滚轮放大缩小、拖拽、删除、属性修改和点击、保存等操作。

在绘制作业派工信息时，可以优选采用下述方式：

（a）通过配置加载图元列表，调用svg viewbox方法初始可视化绘图区域大小；

（b）根据作业范围绘制标题栏和左右指向箭头，站区间按照公里标长度换算为浏览器绘制长度，即将接触网站区间长度按3:1转化为SVG 图元数据；

（c）根据作业派工数据绘制作业范围、作业设备、地线操作人、行车防护人、信号机、作业门等信息，

（d）通过待绘制元素公里标换算为相对于画布的位置信息来绘制，换算公式：[(绘制元素开始公里标-股道开始公里标)/股道长度]*股道画布长度；

（e）通过选择图元库中图元，拖到指定位置并关联该图元相对应的设备，实现自定义派工（如轨道车行车轨迹、重点设备等），通过属性栏修改图形属性；

（f）默认界面初始化加载所有图层（基础层、数据层、操作层），通过选择复选框可以分层显示可视化图元；

优选的保存分工可视化界面为图片格式。

在分工可视化构建时存在如下动作关系：

其一，初始显示站区间、标题栏、作业范围；

其二，选择作业范围、作业设备、地线操作人、行车防护人、信号机、作业门等复选框，显示或隐藏图层；

其三，用户自定义拖拽图元，构造操作层，并且通过复选框可显示或隐藏操作层；

其四，通过双击可视化图元，可查看设备信息或现场作业反馈信息；

其五，单击作业派工步骤，查看此次作业派工详情。

在实现该分工可视化界面时，

如图4所示，Java后端采用SpringMVC架构，根据结构化数据(作业派工数据、一杆一档数据、图元配置数据）编写派工接口、图元接口并返回JSON格式数据；

Web前端通过Ajax异步请求，调用java接口获取可视化绘制JSON数据；

Web前端基于jQuery+SVG库封装基础层、数据层以及操作层方法，具体调用步骤为：

a）初始化画布大小，调用svg viewbox方法初始化画布大小；

b）调用封装的基础层方法初始化站区间、股道和标题栏，调用数据层方法初始化作业范围、作业设备、地线操作人、行车防护人、信号机、作业门等设备信息，从弹出框中选出可视化区域要加载的本次作业相关的其他设备；绘制设备过程中绑定设备详细信息；

调用封装的操作层方法，实现自定义添加综合、人员、车辆、设备、形状等几大类图元。

实施例12：

本实施例是在上述任一实施例的基础上进一步优化，采用本发明并进行案例施工，结合图5所示的具体实施案例效果图，其实施步骤为：

1.根据作业派工数据，初始加载基础层和数据层所有图元。其中，选中复选框调用数据接口，根据返回的JSON数据和封装的前端绘制方法生成各个图层；

2.选择图元集添加自定义元素、绘制运动轨迹等，元素拖拽到想要展示的位置，自定义的元素构成了整个操作层；

3.取消或选择的复选框控制界面是否显示该元素；

4.点击右侧的讲述内容导航栏，弹出相应的作业派工表单，在实际作业派工会上结合可视化图形讲解整个作业派工安排及注意事项。

以上所述，仅是本发明的较佳实施例，并非对本发明做任何形式上的限制，凡是依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化，均落入本发明的保护范围之内。

Claims (10)

1.一种基于SVG的接触网运检修分工可视化构建方法，其特征在于：包括以下步骤：

1）收集结构化作业派工数据及制作接触网作业相关图元；

2）将作业派工数据转化为适用于web应用展现的SVG数据；

3）通过SVG和jQuery对SVG数据进行分层绘制，初步形成分工可视化界面。

2.根据权利要求1所述的一种基于SVG的接触网运检修分工可视化构建方法，其特征在于：所述步骤2）包括以下具体步骤：

2.1）从数据库中获取JSON格式的作业派工数据；

2.2）将JSON格式的作业派工数据转化为SVG图元数据；

2.3）分类将SVG图元数据组合成WEB应用显示图层。

3.根据权利要求2所述的一种基于SVG的接触网运检修分工可视化构建方法，其特征在于：所述步骤2.2）中，作业派工数据转化为SVG图元数据时，作业派工数据按公里标换算，且换算公式为：[(绘制元素开始公里标-股道开始公里标)/股道长度]*股道画布长度。

4.根据权利要求1所述的一种基于SVG的接触网运检修分工可视化构建方法，其特征在于：所述步骤3）中对SVG数据进行分层绘制，具体分为下述图层：

基础层：由一杆一档基础数据驱动绘制本次作业的站区间和标题栏；

数据层：绘制出本次作业范围、作业设备、地线操作人、行车防护人、信号机、作业门信息；

操作层：用于存放用户自定义图形，所述用户自定义图形包括图元库中综合、人员、车辆、设备、形状中的一种或多种。

5.根据权利要求4所述的一种基于SVG的接触网运检修分工可视化构建方法，其特征在于：所述基础层、数据层和操作层均能自定义是否显示，且能够通过双击查看图元详情。

6.根据权利要求4所述的一种基于SVG的接触网运检修分工可视化构建方法，其特征在于：所述站区间长度按2~6:1转化为SVG图元数据。

7.根据权利要求1-6任一项所述的一种基于SVG的接触网运检修分工可视化构建方法，其特征在于：还包括步骤4）在雏形界面上进行自定义编辑，形成分工可视化界面，在进行自定义编辑时，基于SVG的可视化界面，进行分工可视化界面的滚轮放大缩小、拖拽、删除、属性修改和点击、保存操作。

8.根据权利要求4或5或6所述的一种基于SVG的接触网运检修分工可视化构建方法，其特征在于：Web前端基于jQuery+SVG库封装基础层、数据层和操作层方法，具体调用步骤为：

a）初始化画布大小：通过调用svg viewbox方法初始化画布大小；

b）调用封装的基础层方法初始化站区间、股道和标题栏；调用数据层方法初始化作业范围、作业设备、地线操作人、行车防护人、信号机、作业门信息，从弹出框中选出可视化区域要加载的本次作业相关的其他设备；绘制设备过程中绑定设备详细信息；调用封装的基础层方法初始化站区间、股道和标题栏；

c）调用封装的操作层方法，实现自定义添加接触网作业相关图元。

9.根据权利要求8所述的一种基于SVG的接触网运检修分工可视化构建方法，其特征在于：所述Web前端通过Ajax异步请求，调用Java接口获取可视化绘制JSON数据。

10.根据权利要求1-6，9任一项所述的一种基于SVG的接触网运检修分工可视化构建方法，其特征在于：所述作业派工数据包括作业地点、作业范围、作业人员及作业设备信息中的一种或多种；所述接触网作业相关图元包括综合、人员、车辆、设备、形状中的一种或多种。