data-agent/.svn/pristine/be/bebecf0e41f36c06f516edee368140cbd9c07096.svn-base

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)',
                                      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}: <b>{point.percentage:.1f}%</b>'
                                  },
                                  legend:{
                                      itemStyle:{
                                          color:'#ffffff',fontSize:'14pt'
                                      },
                                      itemWidth:160,
                                      align:'right',
                                      verticalAlign:'top',
                                      y:70,
                                      layout:'vertical',
                                      labelFormat:'{name}: <b>{y:.1f}%</b>'
                                  },
                                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
                                     },
                                      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'
          }]
      });
}