09d1d76b08f09c3a72515009cab10311b0a4478c.svn-base 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341
  1. var pageId = 0;
  2. var last_page = function(){
  3. pageId--;
  4. if(pageId<1)
  5. pageId=5;
  6. show_iot_data();
  7. };
  8. var next_page = function(){
  9. if($("#show_detail").val()=='false'){
  10. var e = window.event;
  11. if(e.screenX>400){
  12. pageId++;
  13. if(pageId>5)
  14. pageId=1;
  15. }else{
  16. pageId--;
  17. if(pageId<1)
  18. pageId=5;
  19. }
  20. show_iot_data();
  21. // }else{
  22. // $("#show_detail").val('false');
  23. // show_iot_data();
  24. }
  25. }
  26. var show_back = function(){
  27. if($("#show_detail").val() == 'true'){
  28. $("#show_detail").val('false');
  29. show_iot_data();
  30. return;
  31. }else{
  32. window.location.href="main.html";
  33. }
  34. }
  35. var show_iot_data=function(){
  36. var j_qry = new Object();
  37. var j_body = new Object();
  38. j_body.CMD = 16;
  39. j_qry.VER="1.00";
  40. j_qry.REPLY="0";
  41. j_qry.BODY=j_body;
  42. var json_str = JSON.stringify(j_qry);
  43. $.ajax({
  44. url:"cgi-bin/yt.cgi",
  45. data:json_str,
  46. timeout:1000,
  47. type:"POST",
  48. success:function(result){
  49. show_page(eval('('+result+')'));
  50. }
  51. });
  52. // setInterval(show_iot_data,5000);
  53. }
  54. var init = function(){
  55. // show_page();
  56. show_iot_data();
  57. }
  58. var show_page = function(result){
  59. $("#data_div").html('');
  60. for(var i=1;i<6;i++){
  61. if($("#pager_"+i).hasClass("current_page"))
  62. $("#pager_"+i).removeClass("current_page");
  63. }
  64. if(pageId==0){
  65. if(!($("#back_div").hasClass("hidden")))
  66. $("#back_div").addClass("hidden");
  67. for(var i=1;i<6;i++){
  68. if(!($("#pager_"+i).hasClass("hidden")))
  69. $("#pager_"+i).addClass("hidden");
  70. }
  71. show_frontpage(result);
  72. }else{
  73. if($("#back_div").hasClass("hidden"))
  74. $("#back_div").removeClass("hidden");
  75. for(var i=1;i<6;i++){
  76. if($("#pager_"+i).hasClass("hidden"))
  77. $("#pager_"+i).removeClass("hidden");
  78. }
  79. $("#pager_"+pageId).addClass("current_page");
  80. show_page_at(pageId,result);
  81. }
  82. };
  83. var show_detail_at=function(pagestr){
  84. $("#show_detail").val('true');
  85. $("#data_div").html(pagestr);
  86. // alert('hello'+page);
  87. }
  88. var show_page_at = function(page,result){
  89. var s_name="";
  90. var out=0;
  91. var alarm=0;
  92. var normal=100;
  93. var page_str="";
  94. if((result.BODY != undefined)&&(result.BODY.IOT_LIST != undefined))
  95. {
  96. var iot_list = result.BODY.IOT_LIST;
  97. for(var i=0;i<iot_list.length;i++)
  98. {
  99. if((iot_list[i].NAME != undefined)
  100. &&(iot_list[i].ID != undefined)
  101. &&(iot_list[i].ID == page)
  102. &&(iot_list[i].COUNT != undefined)
  103. &&(iot_list[i].OUT != undefined)
  104. &&(iot_list[i].ALARM != undefined))
  105. {
  106. if(iot_list[i].LIST != undefined)
  107. {
  108. page_str += "<table class='data_table' id='data_table' width='100%' border='0'>";
  109. page_str += "<caption class='tabletitle'>"+iot_list[i].NAME+"</caption>";
  110. page_str += "<tr><th class='datahead'>监控点</th><th class='datahead'>数值</th><th class='datahead'>监控点</th><th class='datahead'>数值</th><th class='datahead'>监控点</th><th class='datahead'>数值</th></tr>";
  111. var obj_list = iot_list[i].LIST;
  112. for(var j=0;j<obj_list.length;j++){
  113. if((obj_list[j].COMM != undefined)
  114. &&(obj_list[j].ADDR != undefined)
  115. &&(obj_list[j].PNO_NAME != undefined)
  116. &&(obj_list[j].STATUS != undefined)
  117. &&(obj_list[j].STATUS_ID != undefined)
  118. &&(obj_list[j].VALUE != undefined)
  119. &&(obj_list[j].TIME != undefined))
  120. {
  121. if((j%3)==0)
  122. page_str += "<tr>";
  123. page_str += "<td class='databody datatitle'>"+obj_list[j].PNO_NAME+"</td>";
  124. if(obj_list[j].ADDR<16){
  125. if(obj_list[j].STATUS_ID==0)
  126. page_str += "<td class='databody sta_normal'>"+obj_list[j].STATUS+"</td>";
  127. else
  128. page_str += "<td class='databody sta_alarm'>"+obj_list[j].STATUS+"</td>";
  129. }else
  130. page_str += "<td class='databody'>"+obj_list[j].VALUE+"</td>";
  131. if((j%3)==2)
  132. page_str += "</tr>";
  133. }
  134. }
  135. if((obj_list.length%3)==2)
  136. page_str += "<td></td></tr>";
  137. else if((obj_list.length%3)==1)
  138. page_str += "<td></td><td></td></tr>";
  139. page_str += "</table>";
  140. if(obj_list.length>0)
  141. page_str += "<div id='data_time' class='databody datatitle'>更新时间:"+obj_list[0].TIME+"</div>" ;
  142. }
  143. s_name = iot_list[i].NAME;
  144. if(iot_list[i].COUNT>0){
  145. out = iot_list[i].OUT*100 / iot_list[i].COUNT;
  146. alarm = iot_list[i].ALARM*100 / iot_list[i].COUNT;
  147. normal = (iot_list[i].COUNT-iot_list[i].OUT-iot_list[i].ALARM)*100 / iot_list[i].COUNT;
  148. }
  149. $('#data_div').highcharts({
  150. chart:{
  151. type:'pie',
  152. options3d:{
  153. enabled:true,
  154. alpha:45,
  155. beta:0
  156. },
  157. backgroundColor:'rgba(0,0,0,0)'//,
  158. // animation:false
  159. },
  160. credits:{
  161. enabled:false
  162. },
  163. exporting:{
  164. enabled:false
  165. },
  166. pane:{
  167. size:'80%'
  168. },
  169. title:{
  170. text: s_name,
  171. style:{
  172. color:'#ffffff',fontSize:'18pt',x:-30,y:30
  173. }
  174. },
  175. tooltip: {
  176. pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  177. },
  178. legend:{
  179. itemStyle:{
  180. color:'#ffffff',fontSize:'14pt'
  181. },
  182. itemWidth:160,
  183. align:'right',
  184. verticalAlign:'top',
  185. y:50,
  186. layout:'vertical',
  187. labelFormat:'{name}: <b>{y:.1f}%</b>'
  188. },
  189. plotOptions: {
  190. pie: {
  191. events:{
  192. click:function(event){
  193. show_detail_at(page_str);
  194. }
  195. },
  196. allowPointSelect: true,
  197. cursor: 'pointer',
  198. depth: 35,
  199. dataLabels: {
  200. enabled: false,
  201. style:{
  202. color:'#ffffff',fontSize:'14pt'
  203. }
  204. },
  205. showInLegend:true
  206. }//,
  207. // series:{animation:false}
  208. },
  209. colors:['#ffa400','#ff4646','#60ff4d'],
  210. series: [{
  211. type: 'pie',
  212. name: '占比',
  213. data: [
  214. ['离线', out],
  215. ['告警', alarm],
  216. [ '正常',normal]
  217. ],
  218. pointPlacement:'on'
  219. }]
  220. });
  221. break;
  222. }
  223. }
  224. }
  225. }
  226. var show_frontpage = function(result){
  227. var s_data_0 = new Array();
  228. var s_data_1 = new Array();
  229. var s_data_2 = new Array();
  230. var s_data_3 = new Array();
  231. var s_name = new Array();
  232. if((result.BODY != undefined)&&(result.BODY.IOT_LIST != undefined))
  233. {
  234. var iot_list = result.BODY.IOT_LIST;
  235. for(var i=0;i<iot_list.length;i++)
  236. {
  237. if((iot_list[i].NAME != undefined)
  238. &&(iot_list[i].COUNT != undefined)
  239. &&(iot_list[i].OUT != undefined)
  240. &&(iot_list[i].ALARM != undefined))
  241. {
  242. s_name.push(iot_list[i].NAME);
  243. s_data_0.push(iot_list[i].COUNT);
  244. s_data_1.push(iot_list[i].OUT);
  245. s_data_2.push(iot_list[i].ALARM);
  246. s_data_3.push(iot_list[i].COUNT-iot_list[i].OUT-iot_list[i].ALARM);
  247. }
  248. }
  249. $('#data_div').highcharts({
  250. chart:{
  251. polar:true,
  252. color:'#ffffff',
  253. backgroundColor:'rgba(0,0,0,0)',
  254. type:'line'//,
  255. // animation:false
  256. },
  257. credits:{
  258. enabled:false
  259. },
  260. exporting:{
  261. enabled:false
  262. },
  263. // plotOptions:{
  264. // series:{animation:false}
  265. // },
  266. colors:['#4dffff','#ffa400','#ff4646','#60ff4d'],
  267. title:{
  268. style:{
  269. color:'#ffffff',
  270. fontSize:'20pt'
  271. },
  272. text:'本地消防信息汇总',
  273. x: -80,y:30
  274. },
  275. pane:{
  276. size:'80%'
  277. },
  278. xAxis:{
  279. labels:{
  280. style:{
  281. color:'#ffffff',
  282. fontSize:'14pt'
  283. }
  284. },
  285. categories:s_name,//['火灾监控','电气火灾监控','消防水系统监控','通道监控','消防电源监控'],
  286. tickmarkPlacement:'on',
  287. lineWidth:0
  288. },
  289. yAxis:{
  290. labels:{
  291. style:{
  292. color:'#ffffff'
  293. }
  294. },
  295. gridLineInterpolation:'polygon',
  296. lineWidth:0,
  297. min:0
  298. },
  299. legend:{
  300. itemStyle:{
  301. color:'#ffffff',
  302. fontSize:'14pt'
  303. },
  304. align:'right',
  305. verticalAlign:'top',
  306. y:40,
  307. layout:'vertical'
  308. },
  309. series:[{
  310. name:'监控点总数',
  311. data:s_data_0,//[8,4,5,3,8],
  312. pointPlacement:'on'
  313. },{
  314. name:'离线数量',
  315. data:s_data_1,//[0,1,0,0,0],
  316. pointPlacement:'on'
  317. },{
  318. name:'告警数量',
  319. data:s_data_2,//[0,0,1,0,1],
  320. pointPlacement:'on'
  321. },{
  322. name:'正常数量',
  323. data:s_data_3,//[8,3,4,3,7],
  324. pointPlacement:'on'
  325. }]
  326. });
  327. }
  328. }