前期团队一直在搭建与云端服务器对接的事情,近期终于落地,数据采集中心实现了服务端与可视化编辑器的融合,整个案例中脚本就两百行左右,基本经过可视化平台配置完成,体现咱们平台的高效性。今天经过本案例讲解下服务端接口搭建、服务端与可视化编辑器是如何配合使用的。css
可视化端实现的交互效果分别有三点:一、报警滚动展现,二、表格翻页显示,三、设备故障三角形动画html
如上图设置好,设备参数就会以队列的形式上报阿里云平台缓存
前期准备,服务端上传设备到阿里云端,完成后,咱们打开上图阿里云平台具体要对接的产品数据,按下列骤订阅消息
按以上设置保存后消息订阅完成
数据上报后,如何把数据从阿里云拉取下来呢,请看下图
经过上图对接好阿里云上的信息后,数据就接入到咱们的平台,在函数体内根据本身实际业务需求作相应处理后,就能够输出到可视化平台了,以上数据接口已所有搭建完成
注:图中的name即咱们要绑定的字段名,value为绑定位置接收到的数据服务器
新建数据集,对接好相应字段,肯定后从新打开,点击数据测试,就能够看到接口过来的数据echarts
改变了以往html+css的方式,ui设计师直接在页面中设计、拖拉组件方式就能够很快完成
1、简单数据展现实现过程
设计图标样式,定义须要动态改变的参数
在顶部须要的位置引入图标
或者点击参数后的按钮,按以下步骤处理编辑器
2、拖拉组件实现过程
以上这么多组件都是怎么定义的呢?咱们这边以echarts为例,讲下实现过程
在渲染元素中,定义好echarts须要的option,按下列代码用参数替换option中的项函数
var fontResize=data.a('fontResize'); if(fontResize){ option.textStyle.fontSize=data.a('allFontSize')\*gv.getZoom();//字体 option.title.textStyle.fontSize=data.a('titleFontsize')\*gv.getZoom();//标题字体大小 option.xAxis\[0\].axisLabel.textStyle.fontSize=data.a('allFontSize')\*gv.getZoom();//XY轴字体大小 option.yAxis\[0\].axisLabel.textStyle.fontSize=data.a('allFontSize')\*gv.getZoom();//XY轴字体大小 cache.htmlChart.clear();//清空缓存从新加载 cache.htmlChart.setOption(option); }
引入自定义组件,设置图表参数
绑定前面定义好的数据集、字段
因数据接口的数据是单条输出,因此咱们要在插入前事件中接管数据,放入本身的容器中,定义好图表须要的数据格式后再返回,代码实现以下:测试
function(data){ for(var item in data){ if(item == '40005'){ pm_xAxis.push(util.formatDate(new Date(data[item].time), 'mm:ss')); pm_series0.push(data[item].value); }else if(item == '40010'){ pm_series1.push(data[item].value); } } if(pm_xAxis.length>8){ pm_xAxis.shift(); pm_series0.shift(); pm_series1.shift(); } return [ { "name": "PM2.5", "type": "line", "symbol": "none", "data": pm_series0, "smooth": false }, { "name": "PM10", "type": "line", "symbol": "none", "data": pm_series1, "smooth": false } ] }
看板中的其余模块大同小异,按上述步骤熟练后均可以快速实现,就再也不重复描述,有兴趣同窗能够动手试一试哦!字体
原文连接
本文为云栖社区原创内容,未经容许不得转载。动画