data-agent/web/html/ytIoT.js

var pageId = 0;
var pageStroe;

var last_page = function(){
    pageId--;
    if(pageId<1)
        pageId=5;
    show_page();
};

var next_page = function(){
    if($("#show_detail").val()=='false'){
        var e = window.event;
        if(e.screenX>400){
            pageId++;
            if(pageId>5)
                pageId=1;
        }else{
            pageId--;
            if(pageId<1)
                pageId=5;
        }
        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_data=function(){
    var j_body = new Object();
    j_body.CMD = 1;
    j_body.COMMID=0;
    j_body.BUSADD=0;
    j_body.VALUE=0;
    var json_str = 'queryJson:'+JSON.stringify(j_body);
    $.ajax({
       url:"cgi-bin/ws",
       data:json_str,
       timeout:1000,
       type:"POST",
       success:function(result){
    	   pageStroe = eval('('+result+')');
           show_page();
       }
   });
    
}

var init = function(){
    show_iot_data();
    setInterval(show_iot_data,5000);

}

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(){
    $("#show_detail").val('true');
    show_page();
}

var show_page_at = function(page){
    var s_name="";
    var out=0;
    var alarm=0;
    var normal=100;
    var page_str="";
    if((pageStroe.RESULT != undefined)&&(pageStroe.RESULT.IOT_LIST != undefined))
    {
        var iot_list = pageStroe.RESULT.IOT_LIST;
        for(var i=0;i<iot_list.length;i++)
        {
            if((iot_list[i].NAME != undefined)
                    &&(iot_list[i].ID != undefined)
                    &&(iot_list[i].ID == page)
                    &&(iot_list[i].COUNT != undefined)
                    &&(iot_list[i].OUT != undefined)
                    &&(iot_list[i].ALARM != undefined))
            {
            	if(($("#show_detail").val()==true)||($("#show_detail").val()=='true')){
	                if(iot_list[i].LIST != undefined)
	                {
	                    page_str += "<div class='tabletitle'>"+iot_list[i].NAME+"</div>";
			    page_str += "<div class='header_table' id='header_table'><div style='position:absolute;top:10px;left:0px;width:120px;'>监控点</div><div  style='position:absolute;top:10px;left:140px;width:110px;'>数值</div><div style='position:absolute;top:10px;left:230px;width:120px;'>监控点</div><div style='position:absolute;top:10px;left:370px;width:110px;'>数值</div><div style='position:absolute;top:10px;left:460px;width:120px;'>监控点</div><div style='position:absolute;top:10px;left:600px;width:110px;'>数值</div></div>";
	                    page_str += "<div 'id='data_table_area' class='data_table_area'><table class='data_table' id='data_table' width='100%' border='0'>";
	                    var obj_list = iot_list[i].LIST;
	                    for(var j=0;j<obj_list.length;j++){
	                        if((obj_list[j].COMM != undefined)
	                                &&(obj_list[j].ADDR != undefined)
	                                &&(obj_list[j].PNO_NAME != undefined)
	                                &&(obj_list[j].STATUS != undefined)
	                                &&(obj_list[j].STATUS_ID != undefined)
	                                &&(obj_list[j].VALUE != undefined)
	                                &&(obj_list[j].TIME != undefined))
	                        {
	                            if((j%3)==0)
	                                page_str += "<tr>";
	                            page_str += "<td class='databody datatitle'>"+obj_list[j].PNO_NAME+"</td>";
	                            if(obj_list[j].ADDR<19){
	                                if(obj_list[j].VALUE==0)
	                                    page_str += "<td class='databody sta_normal'>"+obj_list[j].STATUS+"</td>";
	                                else
	                                    page_str += "<td class='databody sta_alarm'>"+obj_list[j].STATUS+"</td>";
	                            }else{
											if(obj_list[j].ADDR<22){
												if(obj_list[j].VALUE==0)
													page_str += "<td class='databody'>开</td>";
												else
													page_str += "<td class='databody'>合</td>";
											}else
	                                page_str += "<td class='databody'>"+obj_list[j].VALUE+"</td>";
										}
	                            if((j%3)==2)
	                                page_str += "</tr>";
	                        }
	                    }
	                    if((obj_list.length%3)==2)
	                        page_str += "<td></td></tr>";
	                    else if((obj_list.length%3)==1)
	                        page_str += "<td></td><td></td></tr>";
	                    page_str += "</table></div>";
	                    if(obj_list.length>0)
	                        page_str += "<div id='data_time' class='databody datatitle datatime'>更新时间:"+obj_list[0].TIME+"</div>" ;
	                    $("#data_div").html(page_str);
	                }
            	}else{

	                s_name = iot_list[i].NAME;
	                if(iot_list[i].COUNT>0){
	                    out = iot_list[i].OUT*100 / iot_list[i].COUNT;
	                    alarm = iot_list[i].ALARM*100 / iot_list[i].COUNT;
	                    normal = (iot_list[i].COUNT-iot_list[i].OUT-iot_list[i].ALARM)*100 / iot_list[i].COUNT;
	                }
	
	                $('#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: s_name,
	                                    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:50,
	                                      layout:'vertical',
	                                      labelFormat:'{name}: <b>{y:.1f}%</b>'
	                                  },
	                                plotOptions: {
	                                     pie: {
	                                          events:{
	                                              click:function(event){
	                                                  show_detail_at();
	                                              }
	                                          },
	                                         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: [
	                                              ['离线', out],
	                                              ['告警', alarm],
	                                              [ '正常',normal]
	                                          ],
	                                          pointPlacement:'on'
	                                      }]
	                });
            	}
                break;
                
            }
        }
    }
}

var show_frontpage = function(){
    var s_data_0 = new Array();
    var s_data_1 = new Array();
    var s_data_2 = new Array();
    var s_data_3 = new Array();
    var s_name = new Array();
    if((pageStroe.RESULT != undefined)&&(pageStroe.RESULT.IOT_LIST != undefined))
    {
	$("#locip").html(pageStroe.RESULT.LOCIP);
        var iot_list = pageStroe.RESULT.IOT_LIST;
        for(var i=0;i<iot_list.length;i++)
        {
            if((iot_list[i].NAME != undefined)
                    &&(iot_list[i].COUNT != undefined)
                    &&(iot_list[i].OUT != undefined)
                    &&(iot_list[i].ALARM != undefined))
            {
                s_name.push(iot_list[i].NAME);
                s_data_0.push(iot_list[i].COUNT);
                s_data_1.push(iot_list[i].OUT);
                s_data_2.push(iot_list[i].ALARM);
                s_data_3.push(iot_list[i].COUNT-iot_list[i].OUT-iot_list[i].ALARM);
            }
        }

        $('#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:s_name,//['火灾监控','电气火灾监控','消防水系统监控','通道监控','消防电源监控'],
                  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:40,
                  layout:'vertical'
              },
              series:[{
                      name:'监控点总数',
                      data:s_data_0,//[8,4,5,3,8],
                      pointPlacement:'on'
                  },{
                      name:'离线数量',
                      data:s_data_1,//[0,1,0,0,0],
                      pointPlacement:'on'
                  },{
                      name:'告警数量',
                      data:s_data_2,//[0,0,1,0,1],
                      pointPlacement:'on'
                  },{
                      name:'正常数量',
                      data:s_data_3,//[8,3,4,3,7],
                      pointPlacement:'on'
              }]
          });
    }
}