一种通用巡检路径绘制方法及电子设备技术

本发明专利技术公开一种通用巡检路径绘制方法及电子设备，涉及计算机软件工程领域。本发明专利技术提供的通用巡检路径绘制方法，通过场景及元素的绘制和渲染，能够方便地配置及更换巡检底图，同时能够避免地图经纬度坐标定位数据因设备、方法及人为因素导致的精度存在误差的问题；并且，在巡检点位多时，可以通过拖拽方式方便快捷地标记和修改更新巡检点位置数据。此外，在生产现场网络信号弱或者无网络信号时，能够通过本地存储的技术手段满足离线使用的要求。过本地存储的技术手段满足离线使用的要求。过本地存储的技术手段满足离线使用的要求。

【技术实现步骤摘要】
一种通用巡检路径绘制方法及电子设备


[0001]本专利技术涉及计算机软件工程领域，特别是涉及一种通用巡检路径绘制方法及电子设备。

技术介绍

[0002]在电力、交通、石化、采矿、农业、水务等行业，巡检对维护工业生产活动安全有序以及正常稳定地运行具有很重要的意义，巡检路线的绘制作为直观表征巡检节点(业务处理单元)信息及时序状态关系的重要手段，具有非常广泛的应用。然而，传统基于地图绘制的巡检路径有以下问题：
[0003]1)使用地图作为背景时，无法方便地配置及更换巡检底图；
[0004]2)地图经纬度坐标定位因数据通过设备采集及不同坐标系转换算法、涉及到国家数据安全而人为降低精度处理等因素，导致坐标定位精度存在误差(例如，文献《蔡艳辉，章炜，闫庆庆，等.导航电子地图位置精度及检测方法[J].导航定位学报，2021，9(1):10
‑
14.》以及文献《张雨心、左栋.高精度地图导航电子地图的国家安全防控要点探究[J].测绘通报，2021(10)：148
‑
151.》)。
[0005]3)巡检点位多时点位标记坐标数据的输入、修改更新操作时繁琐、枯燥；
[0006]4)生产现场网络信号弱或者无网络信号时，无法满足离线使用的要求。

技术实现思路

[0007]为解决现有技术存在的上述问题，本专利技术提供了一种通用巡检路径绘制方法及电子设备。
[0008]为实现上述目的，本专利技术提供了如下方案：
[0009]一种通用巡检路径绘制方法，基于web技术实现；所述通用巡检路径绘制方法包括：
[0010]定义数据模型类和数据存储结构类，并采用统一建模语言描述所述数据模型类和数据存储结构类的静态结构；所述数据模型类和数据存储结构类包括：矩形对象模型类、点对象模型类、线对象模型类、场景容器对象模型类和链表对象模型类；
[0011]基于描述后的数据模型类和数据存储结构类绘制并渲染场景和元素；场景的绘制包括：场景容器的绘制、巡检点的绘制、巡检点间路径的绘制以及完整巡检路径的绘制；场景的渲染包括：场景容器的重绘机制和控件层的绘制；
[0012]拖拽并绘制渲染后的元素，并在元素的拖拽过程中进行元素与场景容器边界的碰撞检测。
[0013]可选地，场景容器的绘制在页面初始化时执行一次，置于巡检路径页面的最底层，通过容器div元素设置样式属性引入背景图片，通过css设置场景容器的背景颜色、背景图片路径、背景图片重复模式以及尺寸大小；具体包括：
[0014]根据所述场景容器对象模型类创建场景容器实例；所述场景容器实例包括：id标
识、背景色和背景图片；
[0015]基于所述id标识设置页面元素id标识，并获取页面元素id标识的元素作为场景容器；
[0016]当未获取到页面元素id标识的元素时，创建场景容器元素，并基于所述id标识设置所述场景容器元素的id标识；
[0017]设置场景容器元素的布局定位方式position为相对定位relative，设置场景容器元素的宽度width及高度height均为100％，并根据场景容器实例的背景色的属性值设置场景容器元素的背景色，根据场景容器实例的背景图片的属性值设置场景容器元素的背景图片，还设置图片背景的重复模式和尺寸大小。
[0018]可选地，巡检点使用一个div元素实现，通过设置巡检点的属性实现巡检点的绘制；所述巡检点的属性包括：尺寸大小、圆角半径和背景色；具体包括：
[0019]根据点对象模型类创建巡检点对象实例；所述巡检点对象实例的属性包括id标识、状态、背景色、前景色、宽度、高度、距离场景容器上侧距离、距离场景容器左侧距离以及内容；
[0020]创建巡检点元素，并基于巡检点对象实例的id标识设置创建的巡检点元素的id标识；
[0021]设置巡检点元素的布局定位方式为绝对定位，巡检点元素的盒模型为border
‑
box，基于巡检点对象实例的宽度的属性值设置巡检点元素的宽度，巡检点对象实例的高度的属性值设置巡检点元素的高度，基于巡检点对象实例的背景色的属性值设置巡检点元素的背景色，基于巡检点对象实例的前景色的属性值设置巡检点元素的前景色和边框，基于巡检点对象实例距离场景容器上侧距离的属性值设置巡检点元素距离场景容器上侧距离，基于巡检点对象实例距离场景容器左侧距离的属性值设置巡检点元素距离场景容器左侧距离，设置巡检点元素的形状和内容，文字选中为不可选中，光标设置为move；
[0022]设置巡检点元素上显示的文字内容，巡检点对象实例的内容的属性值设置巡检点元素的innerHTML属性值；
[0023]采用场景容器的添加子元素的appendChild方法添加设置好的巡检点元素。
[0024]可选地，两个巡检点之间点连线使用一个div元素实现，div元素高度为线条粗细，div元素宽度为线条长度，路径末端箭头通过div的伪类::after实现；巡检点间路径的绘制过程具体包括：
[0025]根据线对象模型类创建巡检点间路径对象实例；巡检点间路径对象实例的属性包括id标识、状态、路径颜色、前景色、宽度、高度、距离场景容器上侧距离、距离场景容器左侧距离、内容和路径长度；
[0026]创建巡检点间路径元素，并设置巡检点间路径元素的id标识；
[0027]设置巡检点间路径元素尾部箭头的样式；
[0028]设置巡检点间路径元素的布局定位方式为绝对定位，基于相邻两个巡检点元素的路径长度设置巡检点间路径元素的路径长度，设置巡检点间路径元素的路径宽度，并根据巡检点间路径对象实例的的路径颜色的属性值设置巡检点间路径元素的路径颜色，设置巡检点间路径元素距离场景容器上侧距离以及距离场景容器左侧距离，将变换中心设置为(0，0)，变换方式设置为旋转，并基于相邻两个巡检点的旋转角度设置巡检点间路径元素的
旋转角度；
[0029]将设置好的巡检点间路径元素通过场景容器的添加子元素的appendChild方法进行添加。
[0030]可选地，完整巡检路径的绘制过程包括：
[0031]获取通过链表方式存储的巡检点列表，并将链表头节点作为当前节点，绘制当前节点；
[0032]基于所述当前节点确定下一节点，并绘制当前节点及其下一节点之间的连线，直到巡检点列表中的每一链表节点均执行完毕，绘制得到完整巡检路径。
[0033]可选地，场景容器的重绘机制的过程包括：
[0034]定义一个定时器；
[0035]定义场景容器的渲染方法；
[0036]使用requestAnimationFrame重绘机制执行定义的场景容器的渲染方法，并将requestAnimationFrame重绘机制保存在定义的定时器中；页面销毁时，执行销毁定时器的操作。
[0037]可选地，控件层包括巡检点列表和楼层列表；基于此，控件层的绘制过程包括：
[0038]页面初始化时，通过巡检服本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种通用巡检路径绘制方法，其特征在于，基于web技术实现；所述通用巡检路径绘制方法包括：定义数据模型类和数据存储结构类，并采用统一建模语言描述所述数据模型类和数据存储结构类的静态结构；所述数据模型类和数据存储结构类包括：矩形对象模型类、点对象模型类、线对象模型类、场景容器对象模型类和链表对象模型类；基于描述后的数据模型类和数据存储结构类绘制并渲染场景和元素；场景的绘制包括：场景容器的绘制、巡检点的绘制、巡检点间路径的绘制以及完整巡检路径的绘制；场景的渲染包括：场景容器的重绘机制和控件层的绘制；拖拽绘制并渲染后的元素，并在元素的拖拽过程中进行元素与场景容器边界的碰撞检测。2.根据权利要求1所述的通用巡检路径绘制方法，其特征在于，场景容器的绘制在页面初始化时执行一次，置于巡检路径页面的最底层，通过容器div元素设置样式属性引入背景图片，通过css设置场景容器的背景颜色、背景图片路径、背景图片重复模式以及尺寸大小；具体包括：根据所述场景容器对象模型类创建场景容器实例；所述场景容器实例包括：id标识、背景色和背景图片；基于所述id标识设置页面元素id标识，并获取页面元素id标识的元素作为场景容器；当未获取到页面元素id标识的元素时，创建场景容器元素，并基于所述id标识设置所述场景容器元素的id标识；设置场景容器元素的布局定位方式position为相对定位relative，设置场景容器元素的宽度width及高度height均为100％，并根据场景容器实例的背景色的属性值设置场景容器元素的背景色，根据场景容器实例的背景图片的属性值设置场景容器元素的背景图片，还设置图片背景的重复模式和尺寸大小。3.根据权利要求2所述的通用巡检路径绘制方法，其特征在于，巡检点使用一个div元素实现，通过设置巡检点的属性实现巡检点的绘制；所述巡检点的属性包括：尺寸大小、圆角半径和背景色；具体包括：根据点对象模型类创建巡检点对象实例；所述巡检点对象实例的属性包括id标识、状态、背景色、前景色、宽度、高度、距离场景容器上侧距离、距离场景容器左侧距离以及内容；创建巡检点元素，并基于巡检点对象实例的id标识设置创建的巡检点元素的id标识；设置巡检点元素的布局定位方式为绝对定位，巡检点元素的盒模型为border
‑
box，基于巡检点对象实例的宽度的属性值设置巡检点元素的宽度，巡检点对象实例的高度的属性值设置巡检点元素的高度，基于巡检点对象实例的背景色的属性值设置巡检点元素的背景色，基于巡检点对象实例的前景色的属性值设置巡检点元素的前景色和边框，基于巡检点对象实例距离场景容器上侧距离的属性值设置巡检点元素距离场景容器上侧距离，基于巡检点对象实例距离场景容器左侧距离的属性值设置巡检点元素距离场景容器左侧距离，设置巡检点元素的形状和内容，文字选中为不可选中，光标设置为move；设置巡检点元素上显示的文字内容，巡检点对象实例的内容的属性值设置巡检点元素的innerHTML属性值；采用场景容器的添加子元素的appendChild方法添加设置好的巡检点元素。
4.根据权利要求1所述的通用巡检...

【专利技术属性】
技术研发人员：彭龙江，
申请(专利权)人：上海西派埃智能化系统有限公司，
类型：发明
国别省市：