前言“互联网+”思维让数据的收集和获取更加便捷，随着大数据的深入发展和应用，数据分析和预测对于提升用户体验具有重要价值同时，也为不同行业、不同领域的合作提供了更广阔的空间。传统发电企业是一个资本和技术密集型但相对独立封闭的行业。例如，沙角A电厂拥有优质的码头、安新检修、船队、技术人才等资源。未来是不是可以借助互联网走出去，或者其他一些先进的管理和技术是否可以通过互联网进行融合，可以探讨。工业互联网的典型应用并不都是在机器上，包括照明、智能交通、智能机器应用、工厂控制、工厂应用、状态监控以及其他农业和电力设备应用。互联网+的应用将越来越广阔，市场广阔，传统电力企业仍需跟上步伐。http://www.hightopo.com/demo/...代码生成向量创建整个场景实际上是通过一个json格式的文件生成的。由于整个场景中重复的部分太多，所以将这些部分单独拿来作为图标，以便重复使用。这里所说的“图标”指的是矢量图标，有点类似于业界常用的SVG图像，缩放时图像不会变形。Vector是HTforWeb中矢量图形的缩写。常见的栅格位图如png、jpg等通过存储每个像素的颜色信息来描述图形。在拉伸和放大或缩小时，这样处理的图片会出现图形模糊、线条粗、线条锯齿等问题。矢量图像通过点、线、多边形来描述图形，因此在无限放大和缩小图像时仍能保持一致的精度。在HT中，所有可以使用光栅位图的地方都可以用矢量图代替，比如GraphView组件上的原始图片，TreeView和TableView上的图标等等，甚至整个HT框架做的系统界面都可以完全矢量化.这样，GraphView组件上图元的缩放就不会失真，也不再需要为Retina显示器提供不同尺寸的图像。在devicePixelRatio多样化的移动时代，vectors可能是实现完美跨平台方案成本最低的方案。在HT中，向量是用JSON格式描述的，使用方法和普通光栅位图一样，通过设置节点的样式属性，如：node.setStyle('image','test.json')。vectorjson描述必须包含width、height和comps参数信息：width矢量图的width矢量图的heightheight矢量图的comps组件矢量图数组，每个数组对象都是一个独立的组件类型，数组的排列顺序就是其中的排列顺序绘制组件的同时可以设置如下可选参数信息：visible是否可见，默认为trueopacity透明度，默认为1，取值范围为0~1color染色颜色，设置该颜色后，内部向量的绘制内容会和裁剪绘图区域的染色值clip结合在一起，可以设置两种类型：boolean布尔型，控制绘制时是否裁剪超出宽高区域的内容，默认为false不裁剪function类型，可以使用canvas画笔绘制，实现自定义裁剪任意形状的效果下面我们来看看这个图标是如何用HT绘制的：从图中可以看出，这个图标是由一条直线组成的，一个矩形和一个箭头。我们把这个图标命名为arrow:ht.Default.setImage('arrow',{//注册图片arrow"width":60,//矢量图的宽度"height":30,//矢量图的高度"comps":[//矢量图形组件的Array数组，每个数组对象是一个独立的组件类型，数组的顺序就是绘制组件的顺序{//绘制直线"type":"shape",//多边形"borderWidth":1,//边框宽度"borderColor":"rgb(255,0,0)",//边框颜色"points":[//点信息points存储点坐标[x1,y1,x2,y2,x3,y3,...]1.4262,14.93626,51.46768,14.93626]},{//绘制箭头的尖端"type":"shape","borderWidth":1,"borderColor":"rgb(255,0,0)","rotation":4.71239,//旋转"points":[45.50336,9.63425,52.88591,13.92955,60.26846,9.63425,52.827591,,45.50336,9.63425]},{//绘制矩形部分"type":"rect",//矩形"background":{//背景色"func":"attr@lightBg","value":"rgb(255,0,0)"},"borderColor":"#979797","shadow":{//阴影"func":"attr@shadow","value":false},"shadowColor":{//阴影颜色"func":"attr@shadowColor","value":"rgba(255,0,0,0.7)"},"shadowBlur":32,//阴影模糊"shadowOffsetX":0,//阴影水平Offset"shadowOffsetY":0,//阴影垂直偏移"rect":[//指定矩形的面积[x,y,width,height]起始位置坐标和矩形大小分别为11.44694,10.43626,30,9]}]});每个数组对象中的基本元素类型和style的shape参数是一一对应的，只是style中的命名改为驼峰命名法和.分隔符被删除。找到对应的样式属性可以参考HTforWeb样式手册。尚未添加样式手册。你只需要知道这样一个属性。一般看属性名就可以知道这个属性的作用。上面的代码中有一段可能会让您感到困惑。说说这部分的内容：数据绑定。从文章开头的图片我们知道这个图标的矩形部分会变色。数据绑定数据绑定是指将Dataprimitive的数据模型信息与界面图形的颜色、大小、角度等视觉参数自动同步。HT预定义的图形组件默认绑定DataModel中的Data数据。例如，如果用户修改了Node的位置值，GraphView和Graph3dView上相应图元的位置会自动同步变化。传统的数据绑定有单向绑定和双向绑定的概念，而HT系统的设计模式让绑定更加简单易懂。HT只有一个DataModel数据模型，绑定DataModel的图形组件没有其他内部组件。数据模型，所以组件都是基于DataModel来呈现界面效果。因此，当用户拖动图元进行移动时，本质是修改数据模型中Node的位置值，通过模型再次调度属性变化触发的事件。图形组件，使图形组件根据新的模型信息刷新界面。绑定格式很简单，就是把之前的参数值换成一个有func属性的对象。func的内容有以下几种：函数类型，直接调用函数，传入相关的Data和view对象，参数值由函数的返回值决定，即func(data,view)称呼。string类型：以func@开头，返回data.getStyle()的值，其中*表示样式attr@的属性名开头，返回data.getAttr()的值，其中*表示属性开头属性字段名@，然后返回数据。值，其中*代表数据的属性名称。如果不符合以上条件，则直接使用string类型作为数据对象的函数名调用data.*(view)，返回值作为参数值。除了func属性之外，还可以将value属性设置为默认值，如果对应的func获取的值为undefined或者null，则使用value属性定义的默认值。例如下面的代码，如果对应Data对象的attr属性lightBg为undefined或null，则使用rgb(255,0,0)颜色："background":{//背景色"func":"attr@lightBg",//返回getAttr('lightBg')的值"value":"rgb(255,0,0)"//设置默认值}同样，上面代码中的shadow和shadowColor也是基于这个绑定的数据只和数组对象的部分相关，所以即使图标是图片，我们仍然可以控制局部的颜色变化等等。如果想知道怎么使用所有的func，可以参考这个例子http://www.hightopo.com/guide...，所有类型都用到了，很实用。在代码中，我通过控制这些绑定属性来改变这个数组对象的颜色。如果灯光要闪烁，肯定会有一种“发光”的感觉才更真实。那么这里还有一个内容需要说明一下，shadow属性，解释为影子，什么是影子？更好的解释是，在一个矩形框中，由矩形的中心点触发，颜色由内向外逐渐变浅，有点像模糊。下图是影子的展示：buildthescene然后buildthescene，可以直接使用lightBling/displays/power下的building.json文件。在这个文件中，我设置了一些“箭头”图标的标签。在HT中，一般建议id属性由HT自动分配，用户业务意义的唯一标识可以存储在tag属性上。Data#setTag(tag)函数允许任意动态改变tag值，可以通过DataModel#getDataByTag(tag)找到对应的Data对象，并支持通过DataModel#removeDataByTag(tag)删除Data对象。但是，我直接在json中添加了“tag”属性。具体的json拓扑结构如下：我们用的是building.json，我来分析一下：{"c":"ht.Node",//className,usedtodeserialize"i":274997,//idvalue"p":{//get/settypeattribute这里面的所有属性都可以通过get/set获取和设置"displayName":"lamp-Red",//显示名称"tag":"alarm",//可以通过getTag和setTag获取并设置tag"image":"symbols/iconfortunnel/trafficlight/light/light-red.json",//image引用的路径是该图片的json文件相对路径调用的“红灯”图标"position":{//坐标"x":70.9971,"y":47.78651}},"s":{//对应setStyle属性"2d.movable":false,//2d不能移动。如果你想启用它，直接设置setStyle('2d.movable',true)。"2d.editable"同样适用:false//2d以下不可编辑}}其实整个不需要动画的部分就是json文件的内容。大家可以根据上面的json拓扑结构来分析绘图的json。那么问题来了，如何在GraphView中加载绘图的json文件呢？HT封装了ht.Defautl.xhrLoad函数，将相应的绘图json加载到GraphView上。参数为text，需要通过ht.Default.parse转成json：ht.Default.xhrLoad('displays/power/Building.json',function(text){varjson=ht.Default.parse(text);window.gv.dm().deserialize(json);//反序列化并将反序列化后的对象添加到DataModel中});此时DataModel中的内容就是json文件反序列化出来的所有图元，所以我们可以通过DataModel任意获取和改变json中图元的样式和属性。其中setAttr/getAttr中的属性必须先定义，否则HT不知道这个节点是否有这个用户定义的属性：for(vari=0;i
