详细介绍HTML5技术在风电、光伏等新能源领域的应用（图）

随着新一轮工业革命兴起，应对气候变化日益成为全球共识，能源技术正在成为引领能源产业变革、实现创新驱动发展的源动力。从全球到中国，以风能、光伏发电为代表的新能源产业发展迅速，可再生能源发电与现代电网的融合成为了世界能源可持续转型的核心，发电技术继续沿着大规模、高效率和低成本方向持续进步，中国在风能和光伏发电领域的累计装机量和新增装机量已经跃居世界首位。

function createDatas() {
    json = JSON.parse(basicData);
    json.result.forEach(function(data) {        var node = new ht.Node();
        node.setImage('symbols/enjoy/pv/pv-box.json');
        node.s({            'select.color': 'white',            '2d.selectable': false
        });
        node.a({
            deviceName: data.deviceName,
            capacity: data.capacity + 'KW',
            raw_capacity: data.capacity
        });
        node.setTag(data.deviceCode);
        graphView.getDataModel().add(node);
    });                        
} 

function fillDatas() {    
var hlx_state_0 = hlx_state_1 = hlx_state_2 = hlx_state_3 = 0;    
var zc_state_1 = zc_state_2 = zc_state_3 = 0;

    json = JSON.parse(realTimeData);                        
    json.result.wtrtDatas.forEach(function(data) {       
        var comboxRTDto = data.comboxRTDto;                     
        var node = graphView.getDataModel().getDataByTag(comboxRTDto.deviceCode);        
        if (node) { 
            var hlxState = comboxRTDto.pvDeviceStCode;                               
            node.a({
                hlxState: hlxStateMap[hlxState],
                discreteRate: comboxRTDto.discreteRate + '%',
                outputPower: comboxRTDto.outputPower + 'KW',
                percentage:  comboxRTDto.outputPower / node.a('raw_capacity')
            });                                                                
        }
    });  
} 

以上工作完成后界面已经能显示所有光伏汇流箱设备了，但每个设备显示的参数信息都是我们构建矢量图标时设置的初始化，并不是真正的实时运行值，因此我们需要根据后台实时推送过来的数据，对图元进行数据更新，在以上 fillData 函数我们解析了 realTimeData 数据，然后遍历每个汇流箱数据，通过 dataModel.getDataByTag(deviceCode) 找到相应图元，设置上相应的 attr 属性，而这些属性由于在矢量设计时已经绑定好相应的图形参数，因此当设置上所有数据后，拓扑图上相应的每个汇流箱就能自动显示出真正的实时数据了。

这个例子我们只更新了一次实时数据，但正常的系统会通过 AJAX 间几秒轮询，或者采用 WebSocket 由后台在有变化的情况下实时推送到前端，然后多次调用 fillDatas 函数进行数据更新，另外这个界面场景内容是通过第一次的 basicData 查询数据后动态构建，如果你已经有拓扑图序列化的 JSON 数据了，你只需要通过反序列化即可构建拓扑图场景，序列化反序列化

做完以上我们还仅是完成了一半的工作，记得我们还有个上半部分的汇总和过滤面板：

刚开始看这个设计稿，很自然想到面板和操作按钮的东西采用 HT for Web 的面板组件即可搞定：www.hightopo.com/guide/guide/plugin/form/ht-form-guide.html ，不过后来想想通用组件的风格比较固定，哪怕定制出效果也很难应对多变的需求，突发奇想其实我们照样可以采用 HT for Web 的 GraphView 拓扑图组件来干这事，上面的文字无非就是 ht.Text 图元，进度条也就是 shape 类型为 rect 的 Node 节点，而过滤控制按钮其实也只一堆 Node 图元，只不过我们设置了不同背景色，将 label 标签居中显示，同时将图元选中效果由边框改为 shadow 的阴影选中效果即可大功告成，而且由于是拓扑图的布局，因此不管布局位置或者界面风格的需求变化，用户都可以很容易妥妥拽拽，设置下新风格参数即可搞定多变的业务展示需求

function createHeader() {
    header = new ht.graph.GraphView();                   
    ht.Default.xhrLoad('displays/enjoy/pv/pv-header.json', function(json) {
        header.getDataModel().deserialize(json);                    
        header.getDataModel().setBackground(undefined);
        createDatas();
        fillDatas();  
        layoutDatas();                      
    });
    header.setInteractors(null);    
    var handleClick = function(e) {        
    if (!graphView.getView().contains(e.target)) {            
    var data = header.getDataAt(e);
            header.sm().ss(data);                        
        }
    };
    document.body.addEventListener('mousedown', handleClick, false);
    document.body.addEventListener('touchstart', handleClick, false);               
} 

汇总部分就是有以上 createHeader 函数搞定，注意这里我们通过 ht.Default.xhrLoad('displays/enjoy/pv/pv-header.json 直接加载已经序列化好的拓扑图信息，然后由于该汇总面板唯一需要的交互就是点击选中分类按钮进行过滤，于是我们通过 header.setInteractors(null); 直接关闭了所有 HT for Web 的默认交互，然后通过添加 mousedown 和 touchstart 的原生 HTML 监听事件自定义交互逻辑，这里只需要通过 header.getDataAt(event) 传入不管是 touch 还是 mouse 事件，HT 自动回返回当前操作点下的图元，后续过滤已经动画的逻辑比较简单，这里就不展开说明了，有兴趣的可以改造成更带感的过滤动画布局效果，可参考《透过WebGL 3D看动画Easing函数本质》一文了解 HT for Web 的各种预制的动画功能。

这里我们仅演示了光伏的一个页面效果，风电的风机也可以采用类似的方式呈现，这个上万个矢量风机实时转动的 HTML5 性能效果，也可以结合例如百度地图、OpenLayers 或 GoogleMap 等地图方案呈现风机或光伏监控画面：

对于看腻了 2D 矢量风机的，这个采用 HT for Web 实现的 3D 可旋转风机 HTML5 的代码也就寥寥几十行，今天篇幅有限先不展开介绍了，大家就先玩玩 demo 。

以上就是详细介绍HTML5技术在风电、光伏等新能源领域的应用（图）的详细内容，更多请关注Gxl网其它相关文章！

查看更多关于详细介绍HTML5技术在风电、光伏等新能源领域的应用（图）的详细内容...