123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344 |
- 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:140px;'>监控点</div><div style='position:absolute;top:10px;left:140px;width:90px;'>数值</div><div style='position:absolute;top:10px;left:230px;width:140px;'>监控点</div><div style='position:absolute;top:10px;left:370px;width:90px;'>数值</div><div style='position:absolute;top:10px;left:460px;width:140px;'>监控点</div><div style='position:absolute;top:10px;left:600px;width:90px;'>数值</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<16){
- if(obj_list[j].STATUS_ID==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
- 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))
- {
- 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'
- }]
- });
- }
- }
|