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(); var year = time.getFullYear(); var mon = time.getMonth()+1; var day = time.getDate(); var hour = time.getHours(); var min = time.getMinutes(); var sec = time.getSeconds(); var time_txt = year +((mon<10)?("-0"+mon):("-"+mon)) +((day<10)?("-0"+day):("-"+day)) +((hour<10)?(" 0"+hour):(" "+hour)) +((min<10)?(":0"+min):(":"+min)); // alert(time_txt); $("#time_label").html(time_txt); 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)', animation:false }, 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: false, style:{ color:'#ffffff',fontSize:'14pt' } }, showInLegend:true }, series:{animation:false} }, 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', animation:false }, credits:{ enabled:false }, exporting:{ enabled:false }, plotOptions:{ series:{animation: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' }] }); }