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:ss"));
setInterval(show_iot_time,1000);
}
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'
}]
});
}