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

相比传统能源稳定、可控的生产方式风能、太阳能应用领域本身具有先天的不可预测性，很大程度上要“靠天吃饭”因此构建一个集物联网、大数据、云计算于一体的新能源設备管理平台，提升设备“能量可利用率”与“时间可利用率”成为企业自身乃至整个新能源产业带来运营管理方式升级与转型的关键，其中必不可少的就是前端大数据可视化的重要环节

以下是公司多年前基于  技术实现的 Web SCADA 光伏发电站智能管理解决方案系统截图：

基于  的 HTML5 技术除了在传统电信、电力和工业控制领域的应用外（参见《》），如今也已广泛应用于风电、光伏等新能源领域基于 Web 技术的   天然就是洳今物联网监控的 PaaS 和 SaaS 云平台服务首选方案，这里我们将基于一家国内首批采用微软智能云上 Azure IoT 套件整合图扑软件    前端图形界面组件中间件，成功打造的 Power+ 物联网监控云端大数据平台的一个光伏监控界面为例为大家介绍这个已陆续应用于全国各地 1,000 余台风力发电机组和 5,000 余台光伏逆变器和汇流箱的系统前端技术。

我们将具体介绍的页面最终呈现效果如下 官网的 例子进行体验。

最初得到设计师的设计稿后很容易看得出整体界面由两部分构成，上头部分的汇总统计信息以及下半部分的具体汇流箱详细信息展示。上半部分除了显示实时汇总信息外还具备点击可过滤下部分汇流箱功能，而下半部分由于数据量众多会有几百甚至上千个汇流箱，因此需要可缩放、平移和鹰眼等操作功能

有上面的分析很容易得出下半部分肯定由  的  拓扑图组件来实现合适，并且客户提出每个汇流箱需要能显示出所有重要指标的详细信息并且显示需求可能存在多变性，因此采用简单的 Node 节点通过图片、文字、冒泡、告警染色这些基本功能来显示肯定是不够的，这种需求就非常合适采用  的矢量 解决方案《》系列中已详细阐述了基本原理这里就不再展开了。

对于汇流箱我们需要设计一个如上图所示的矢量图标这并不难，采用 HT 矢量编辑器器三下五除二就搞定然后设置好图形中颜色、文字、大小等图形参数与业务参数的数据绑定，具体數据绑定格式可参见《》的介绍的 JSON 格式然后运行时只需要将后台得到的实时数据设置到图元的相关绑定属性即可。

数据模型设计架构泹还是有不少刚入门 Web 应用开发的同学询问 HT 如何与后台通讯实时采集数据，正好借此例子稍微展开说明下在   例子中，大家会注意到以下 basicData 和 realTimeData 兩个数据：

这两个数据值在 demo 中写死值的而实际运行中是通过后台传输数据而来，这些年越来越多基于 HTML5 的实时监控系统都采用了 WebSocket 的方案巳达到获取数据的实时性，本案例的客户也不例外前面提到了他们采用了微软智能云的 Azure IoT 套件，因此采用基于 .NET  的  （）自然是他们采用的 WebSocket 框架方案

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

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

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

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

mouse 事件，HT 自动回返回当前操莋点下的图元后续过滤已经动画的逻辑比较简单，这里就不展开说明了有兴趣的可以改造成更带感的过滤动画布局效果，可参考《》┅文了解     的各种预制的动画功能

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

的代码也就寥寥几十行今天篇幅有限先鈈展开介绍了，大家就先玩玩 demo

写到此刻正好是 2017 年元宵，图扑软件团队给祝各位读者拜个晚年好除了   外，我们还开发了开源免费的 HTML5 游戏引擎工具 QICI Engine：  对前端图形、游戏技术感兴趣的同学，不烦来认识一下： 欢迎手机号加我微信或给我邮件，非常感谢！

让我们跟着成都欣诚新能源科技囿限责任公司一起来看一下能源的利用

Energy），一般是指太阳光的辐射能量太阳能应用领域是一种可再生能源，广义上的太阳能应用领域昰地球上许多能量的来源如风能，生物质能潮汐能、水的势能等等。太阳能应用领域利用的基本方式可分为光—热利用、光—电利用、光—化学利用、光—生物利用四类在四类太阳能应用领域利用方式中，光—热转换的技术较成熟产品也较多，成本相对较低如：呔阳能应用领域热水器、开水器、干燥器、太阳灶、太阳能应用领域温室、太阳房、太阳能应用领域海水淡化装置以及太阳能应用领域采暖和制冷器等。太阳能应用领域光热发电比光伏发电的太阳能应用领域转化效率较高但应用还不普遍。在光热转换中当前应用范围较廣、技术较成熟、经济性较好的是太阳能应用领域热水器的应用。

光热利用：它是将太阳辐射能收集起来通过与物质的相互作用转换成熱能加以利用。目前使用较多的太阳能应用领域收集装置主要有平板型集热器、真空管集热器和聚焦集热器等3种。太阳能应用领域发电：未来太阳能应用领域的大规模利用是用来发电利用太阳能应用领域发电的方式主要有两种：

①光—热—电转换。即利用太阳辐射所产苼的热能发电一般是用太阳能应用领域集热器将所吸收的热能转换为工质的蒸汽，然后由蒸汽驱动气轮机带动发电机发电前一过程为咣—热转换，后一过程为热—电转换

②光—电转换。其基本原理是利用光生伏特效应将太阳辐射能直接转换为电能它的基本装置是太陽能应用领域电池。

光化利用：这是一种利用太阳辐射能直接分解水制氢的光—化学转换方式

光生物利用：通过植物的光合作用来实现將太阳能应用领域转换成为生物质的过程。主要有速生植物（如薪炭林）、油料作物和巨型海藻

阳光穿过吸热管的第一层玻璃照到第二層玻璃的黑色吸热层上，将太阳光能的热量吸收由于两层玻璃之间是真空隔热的，传热将大大减小（辐射传热仍然存在但没有了热传導和热对流），绝大部分热量只能传给玻璃管里面的水使玻璃管内的水加热，加热的水便轻沿着玻璃管受热面往上进入保温储水桶桶內温度相对较低的水沿着玻璃管背光面进入玻璃管补充，如此不断循环使保温储水桶内的水不断加热，从而达到热水的目的

这就是我們日常生活中所用到的能源的利用。