Date.prototype.format = function(format){ var o = { "M+":this.getMonth()+1, "d+":this.getDate(), "h+":this.getHours(), "m+":this.getMinutes(), "s+":this.getSeconds(), "q+":Math.floor((this.getMonth()+3)/3), "S":this.getMilliseconds() } if(/(y+)/.test(format)){ format = format.replace(RegExp.$1,(this.getFullYear()+"").substr(4-RegExp.$1.length)); } for(var k in o){ if(new RegExp("("+k+")").test(format)){ format = format.replace(RegExp.$1,RegExp.$1.length==1 ?o[k]:("00"+o[k]).substr((""+o[k]).length)); } } return format; } var pageId = 0; var last_page = function(){ pageId--; if(pageId<1) pageId=5; show_page(); }; var next_page = function(){ if($("#show_detail").val()=='false'){ pageId++; if(pageId>5) pageId=1; show_page(); } } var show_back = function(){ if($("#show_detail").val()=='true'){ $("#show_detail").val('false'); show_page(); return; }else{ window.location.href="main.html"; } } var show_iot_time=function(){ var time = new Date(); $("#time_label").html(time.format("yyyy-MM-dd hh:mm")); setInterval(show_iot_time,5000); } var init = function(){ show_page(); show_iot_time(); } var show_page = function(){ $("#data_div").html(''); for(var i=1;i<6;i++){ if($("#pager_"+i).hasClass("current_page")) $("#pager_"+i).removeClass("current_page"); } if(pageId==0){ if(!($("#back_div").hasClass("hidden"))) $("#back_div").addClass("hidden"); for(var i=1;i<6;i++){ if(!($("#pager_"+i).hasClass("hidden"))) $("#pager_"+i).addClass("hidden"); } show_frontpage(); }else{ if($("#back_div").hasClass("hidden")) $("#back_div").removeClass("hidden"); for(var i=1;i<6;i++){ if($("#pager_"+i).hasClass("hidden")) $("#pager_"+i).removeClass("hidden"); } $("#pager_"+pageId).addClass("current_page"); show_page_at(pageId); } }; var show_detail_at=function(page){ $("#show_detail").val('true'); $("#data_div").html(''); alert('hello'+page); } var show_page_at = function(page){ $('#data_div').highcharts({ chart:{ type:'pie', options3d:{ enabled:true, alpha:45, beta:0 }, backgroundColor:'rgba(0,0,0,0)' }, credits:{ enabled:false }, exporting:{ enabled:false }, pane:{ size:'80%' }, title:{ text: page==1?'火灾监控实时信息' :page==2?'电气火灾监控实时信息' :page==3?'消防水系统监控实时信息' :page==4?'通道监控实时信息' :'消防电源监控实时信息', style:{ color:'#ffffff',fontSize:'18pt',x:-30,y:30 } }, tooltip: { pointFormat: '{series.name}: {point.percentage:.1f}%' }, legend:{ itemStyle:{ color:'#ffffff',fontSize:'14pt' }, itemWidth:160, align:'right', verticalAlign:'top', y:70, layout:'vertical', labelFormat:'{name}: {y:.1f}%' }, plotOptions: { pie: { events:{ click:function(event){ show_detail_at(page); } }, allowPointSelect: true, cursor: 'pointer', depth: 35, dataLabels: { enabled: true, style:{ color:'#ffffff',fontSize:'14pt' } }, showInLegend:true } }, colors:['#ffa400','#ff4646','#60ff4d'], series: [{ type: 'pie', name: '占比', data: [ ['离线', page==1?0.0 :page==2?25.0 :page==3?0.0 :page==4?0.0 :0.0], ['告警', page==1?0.0 :page==2?0.0 :page==3?20.0 :page==4?0.0 :12.5], [ '正常',page==1?100.0 :page==2?75.0 :page==3?80.0 :page==4?100.0 :87.5] ], pointPlacement:'on' }] }); } var show_frontpage = function(){ $('#data_div').highcharts({ chart:{ polar:true, color:'#ffffff', backgroundColor:'rgba(0,0,0,0)', type:'line' }, credits:{ enabled:false }, exporting:{ enabled:false }, colors:['#4dffff','#ffa400','#ff4646','#60ff4d'], title:{ style:{ color:'#ffffff', fontSize:'20pt' }, text:'本地消防信息汇总', x: -80,y:30 }, pane:{ size:'80%' }, xAxis:{ labels:{ style:{ color:'#ffffff', fontSize:'14pt' } }, categories:['火灾监控','电气火灾监控','消防水系统监控','通道监控','消防电源监控'], tickmarkPlacement:'on', lineWidth:0 }, yAxis:{ labels:{ style:{ color:'#ffffff' } }, gridLineInterpolation:'polygon', lineWidth:0, min:0 }, legend:{ itemStyle:{ color:'#ffffff', fontSize:'14pt' }, align:'right', verticalAlign:'top', y:50, layout:'vertical' }, series:[{ name:'监控点数量', data:[8,4,5,3,8], pointPlacement:'on' },{ name:'监控点离线数量', data:[0,1,0,0,0], pointPlacement:'on' },{ name:'监控点告警数量', data:[0,0,1,0,1], pointPlacement:'on' },{ name:'监控点正常数量', data:[8,3,4,3,7], pointPlacement:'on' }] }); }