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

权利要求书

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

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

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

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

2.根据权利要求1所述的基于CSS3和SVG的光伏组件状态展示方法，其特征在于：所述光伏组件的坐标信息通过光伏电站设计图获取。

3.根据权利要求1所述的基于CSS3和SVG的光伏组件状态展示方法，其特征在于：步骤2)中所述编写显示内容的div标签包括：

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

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

4.根据权利要求3所述的基于CSS3和SVG的光伏组件状态展示方法，其特征在于：步骤2)中所述编写显示内容的div标签还包括：

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

在div_overflow内新建一个div标签，用于光伏组件的状态图在平面图视角和鸟瞰图视角间转换时调整光伏组件状态图上下左右移动，以确保光伏组件状态图始终位于屏幕可视区域的上部，该标签用div_frame代表，该标签CSS使用绝对布局，宽度尽量与屏幕宽度一致，高度和宽度的比例与真实光伏电站的实际长宽比一致；本图层需要将其transition-property属性设置为top和left，transition-duration属性设置为1秒，使在改变该标签的top和left属性的值时，该标签会以一个1秒钟的动画进行平滑的过度；

在div_frame内新建一个div标签，用于实现鸟瞰图和平面图视角转换效果而进行3D旋转，该标签用div_transform代表，该标签CSS使用绝对布局，如果要使页面初始化时光伏组件状态图即处于鸟瞰视角，则要将该标签的transform属性的rotateX方法，使该标签围绕其X轴以给定的度数进行旋转，设给定角度为θ度，θ的值并不固定，要以整个光伏组件状态图都能在屏幕可见区域显示为准，同时要将该标签transition-property属性设置为transform，transition-duration属性设置为1秒，使在改变该标签在绕X轴旋转时会以一个1秒钟的动画进行平滑的过度；

在div_transform内新建一个img标签，用于放置整个光伏电站背景图片，src属性设置为光伏电站背景图片的位置，背景图片使用gif格式图片，减小浏览器的计算量，使动画更流畅。

5.根据权利要求4所述的基于CSS3和SVG的光伏组件状态展示方法，其特征在于：步骤2)中所述编写显示内容的div标签还包括：

在div_transform内新建一个svg标签，用于放置所有代表光伏组件的svg元素，为便于区分，该标签用svg_container代表。