012330813.jpg



现在每个大公司都有自己的一套全局质量监控的东西,见过沈灿他们公司的大屏幕很酷,很牛逼。 也用过腾讯某部门websocket做的实时推送全国节点阀值并报警的项目,也从朋友那得到淘宝运维体系的在线热点监控的画面。。。。

我这里就简单实现一个全局的大屏幕监控。


这东西一般是好几个人一块搞的,有前端的,有后端的,最少也要两个人。 条件有限,只能是对付了。

推荐一个js  http://www.oschina.net/p/echarts

对于前端,我自己想到了两种的方案:

一种是用js联合html5的新东西 svg 实现的地图及热点的展现。

另一种就是用百度地图的api,加上红红的标注。。。


下图是我一个项目中的测试截图。

我们还需要把各个节点,用文字描述下。


对于这些数据,我们可以从前端搞,也可以用python的模版搞定。


推荐大家用tornado ,他的websocket算是高度集成,类似node.js和socket.io的样子。   以前我用flask框架的时候,想做实时的监控,需要重新配置gevent。gevent有个websocket的核心。


085419172.jpg

用图表描述下

085438838.jpg


用js地图插件,好搞点,但是需要js的知识,尤其网上没有很好的demo,对我一个运维来说,很是棘手,但还有ECharts的文档算丰富。

百度地图的话,用这个做监控真是有点搓。热点的体现只能是用标注来做,具体的数据,要在页面的下方做表格。

源地址http://rfyiamcool.blog.51cto.com/1030776/1302398


这是一个画图的接口,通过我访问的地址大家可以看到经纬度和图片的大小,以及热点哈。。。。


http://api.map.baidu.com/staticp_w_picpath?width=1000&height=800&center=95.848344,42.777149&zoom=5&markers=121.374594,31.382614|116.885653,37.00429|116.444118,40.123535|106.583167,38.638726|116.149761,34.179652&markerStyles=l,0|l,1|l,2|l,3|l,4


083037695.jpg


百度地图给开发者提供的api接口,用了下,非常的全,也很详细。

百度api http://developer.baidu.com/map/static-1.htm

这里的文档已经很好了,教我们该如何的使用。


参数名 必选  默认值 描述
width   否   400 图片宽度。取值范围:(0, 1024]。
height  否   300 图片高度。取值范围:(0, 1024]。
center  否   北京  地图中心点位置,参数可以为经纬度坐标或名称。坐标格式:lng<经度>,lat<纬度>,例如116.43213,38.76623。
zoom    否   11  地图级别。高清图范围[3, 18];低清图范围[3,19]
dpiType 否   pl  手机屏幕类型。取值范围:{ph:高分屏,非ph:低分屏},高分屏即调用高清地图,低分屏为普通地图。自V3后废弃。
scale   否   null    返回图片大小会根据此标志调整。取值范围为1或2:
1表示返回的图片大小为size= width * height;
2表示返回图片为(width*2)*(height *2),且zoom加1
注:如果zoom为最大级别,则返回图片为(width*2)*(height*2),zoom不变。
bbox    否   null    地图视野范围。格式:minX,minY;maxX,maxY。
markers 否   null    标注,可通过经纬度或地址/地名描述;多个标注之间用竖线分隔。
markerStyles    否   null    与markers有对应关系。markerStyles可设置默认图标样式和自定义图标样式。其中设置默认图标样式时,可指定的属性包括size,label和color;设置自定义图标时,可指定的属性包括url,注意,设置自定义图标时需要先传-1以此区分默认图标。
labels  否   null    标签,可通过经纬度或地址/地名描述;多个标签之间用竖线分隔。坐标格式:lng<经度>,lat<纬度>,例如116.43213,38.76623。
labelStyles 否   null    标签样式 content, fontWeight,fontSize,fontColor,bgColor, border。与labels一一对应。
paths   否   null    折线,可通过经纬度或地址/地名描述;多个折线用竖线"|"分隔;每条折线的点用分号";"分隔;点坐标用逗号","分隔。坐标格式:lng<经度>,lat<纬度>,例如116.43213,38.76623。
pathStyles  否   null    折线样式 color,weight,opacity[,fillColor]。


大家可以把生成的url,放到html里面 ~

<img style="margin:20px" width="280" height="140" src="http://api.map.baidu.com/staticp_w_picpath?
width=280&height=140&zoom=11&scale=2" />


关于后端的数据,那就灵活了 ~


我们可以用saltstack做监控,取到的数据,插入到数据库里面,然后页面调取后端接口渲染页面。做成实时的可以js控制刷新时间。

当然也可以从cacti,zabbix里面取数据再渲染页面。

后端的做法是多种多样的。


总结,前端后端实现过程,大家了解一二了吧,我想大家可以搞起啦~