[发明专利]一种基于CSS3和SVG的光伏组件状态展示方法

说明书

本发明公开一种基于CSS3和SVG的光伏组件状态展示方法，包括如下步骤：1)获取目标光伏电厂中各光伏组件的坐标信息；2)在系统前端html文件中编写显示内容的div标签以及代表光伏组件的svg格式图形；3)利用JavaScript脚本语言实现光伏组件图形的视角切换方法及根据实时数据对光伏组件状态进行更新的方法。该方法能够显示所有光伏组件的真实物理位置分布状况，能够使运维人员在发现光伏组件出现问题后能立即定位问题组件的准确物理位置。该方法能够一屏展示所有光伏组件，能够在主流电脑屏幕的分辨率和尺寸下无需拖动页面就能展示所有的光伏组件的运行状态和真实的物理位置分布状况。

技术领域：

本发明具体涉及一种基于CSS3和SVG的光伏组件状态展示方法，属于计算机信息服务领域。

背景技术：

当前，市场上存在的光伏电站监控运维系统很多，但是其中的光伏组件状态展示系统绝大多数以CSS和HTML开发的表格或卡片形式为主，这种展示形式只能显示出光伏组件的状态和简单的运行参数，无法准确的展示出光伏组件的实际物理位置分布状况，因此就无法在第一时间判断出现故障的光伏组件的准确位置，而且对于组件数量较多的大型集中式光伏电站，往往无法在电脑浏览器客户端一屏全部展示出来，而需要来回拖动页面才能查看全部的组件。而极个别能够展示光伏组件实际物理位置分布状况的监控运维系统都是通过JPG或者PNG等位图展示的形式实现的，这种方式存在着加载速度慢和无法一屏展示的问题。

发明内容：

为解决现有技术中的技术问题，本发明提出一种基于CSS3和SVG的光伏组件状态展示方法，其技术方案如下：

一种基于CSS3和SVG的光伏组件状态展示方法，包括如下步骤：

1)获取目标光伏电厂中各光伏组件的坐标信息；

2)在系统前端html文件中编写显示内容的div标签以及代表光伏组件的svg格式图形；

3)利用JavaScript脚本语言实现光伏组件图形的视角切换方法及根据实时数据对光伏组件状态进行更新的方法。

优选地，所述光伏组件的坐标信息通过光伏电站设计图获取。

优选地，步骤2)中所述编写显示内容的div标签包括：

在系统前端html格式文件中新建一个div标签，用于放置所有展示光伏组件的状态图需要用到的元素，该标签用div_container代表，该标签CSS中使用绝对布局，设置CSS中top属性的值为0px，left属性的值为0px；宽度和高度为系统前端html页面的可视面积的宽度和宽度，

设置CSS中filter属性的值为progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod＝'scale')，其中filter定义了元素的可视效果，对div标签内放置的图片缩放操作。

优选地，步骤2)中所述编写显示内容的div标签还包括：

在div_container内新建一个div标签，用于在光伏组件的状态图处于鸟瞰视角整个电站完全显示时，隐藏滚动条，该标签用div_overflow代表，该标签CSS中使用据对定位，位置、高度、宽度属性与div_container一致，overflow属性设置为hidden，在画面初始化时隐藏滚动条；