1533ed2260cf8c40bd9ea28d2e7e5179f445432d.svn-base 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344
  1. var pageId = 0;
  2. var pageStroe;
  3. var last_page = function(){
  4. pageId--;
  5. if(pageId<1)
  6. pageId=5;
  7. show_page();
  8. };
  9. var next_page = function(){
  10. if($("#show_detail").val()=='false'){
  11. var e = window.event;
  12. if(e.screenX>400){
  13. pageId++;
  14. if(pageId>5)
  15. pageId=1;
  16. }else{
  17. pageId--;
  18. if(pageId<1)
  19. pageId=5;
  20. }
  21. show_page();
  22. }
  23. }
  24. var show_back = function(){
  25. if($("#show_detail").val() == 'true'){
  26. $("#show_detail").val('false');
  27. show_page();
  28. return;
  29. }else{
  30. window.location.href="main.html";
  31. }
  32. }
  33. var show_iot_data=function(){
  34. var j_body = new Object();
  35. j_body.CMD = 1;
  36. j_body.COMMID=0;
  37. j_body.BUSADD=0;
  38. j_body.VALUE=0;
  39. var json_str = 'queryJson:'+JSON.stringify(j_body);
  40. $.ajax({
  41. url:"cgi-bin/ws",
  42. data:json_str,
  43. timeout:1000,
  44. type:"POST",
  45. success:function(result){
  46. pageStroe = eval('('+result+')');
  47. show_page();
  48. }
  49. });
  50. }
  51. var init = function(){
  52. show_iot_data();
  53. setInterval(show_iot_data,5000);
  54. }
  55. var show_page = function(){
  56. $("#data_div").html('');
  57. for(var i=1;i<6;i++){
  58. if($("#pager_"+i).hasClass("current_page"))
  59. $("#pager_"+i).removeClass("current_page");
  60. }
  61. if(pageId==0){
  62. if(!($("#back_div").hasClass("hidden")))
  63. $("#back_div").addClass("hidden");
  64. for(var i=1;i<6;i++){
  65. if(!($("#pager_"+i).hasClass("hidden")))
  66. $("#pager_"+i).addClass("hidden");
  67. }
  68. show_frontpage();
  69. }else{
  70. if($("#back_div").hasClass("hidden"))
  71. $("#back_div").removeClass("hidden");
  72. for(var i=1;i<6;i++){
  73. if($("#pager_"+i).hasClass("hidden"))
  74. $("#pager_"+i).removeClass("hidden");
  75. }
  76. $("#pager_"+pageId).addClass("current_page");
  77. show_page_at(pageId);
  78. }
  79. };
  80. var show_detail_at=function(){
  81. $("#show_detail").val('true');
  82. show_page();
  83. }
  84. var show_page_at = function(page){
  85. var s_name="";
  86. var out=0;
  87. var alarm=0;
  88. var normal=100;
  89. var page_str="";
  90. if((pageStroe.RESULT != undefined)&&(pageStroe.RESULT.IOT_LIST != undefined))
  91. {
  92. var iot_list = pageStroe.RESULT.IOT_LIST;
  93. for(var i=0;i<iot_list.length;i++)
  94. {
  95. if((iot_list[i].NAME != undefined)
  96. &&(iot_list[i].ID != undefined)
  97. &&(iot_list[i].ID == page)
  98. &&(iot_list[i].COUNT != undefined)
  99. &&(iot_list[i].OUT != undefined)
  100. &&(iot_list[i].ALARM != undefined))
  101. {
  102. if(($("#show_detail").val()==true)||($("#show_detail").val()=='true')){
  103. if(iot_list[i].LIST != undefined)
  104. {
  105. page_str += "<div class='tabletitle'>"+iot_list[i].NAME+"</div>";
  106. 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>";
  107. page_str += "<div 'id='data_table_area' class='data_table_area'><table class='data_table' id='data_table' width='100%' border='0'>";
  108. var obj_list = iot_list[i].LIST;
  109. for(var j=0;j<obj_list.length;j++){
  110. if((obj_list[j].COMM != undefined)
  111. &&(obj_list[j].ADDR != undefined)
  112. &&(obj_list[j].PNO_NAME != undefined)
  113. &&(obj_list[j].STATUS != undefined)
  114. &&(obj_list[j].STATUS_ID != undefined)
  115. &&(obj_list[j].VALUE != undefined)
  116. &&(obj_list[j].TIME != undefined))
  117. {
  118. if((j%3)==0)
  119. page_str += "<tr>";
  120. page_str += "<td class='databody datatitle'>"+obj_list[j].PNO_NAME+"</td>";
  121. if(obj_list[j].ADDR<16){
  122. if(obj_list[j].STATUS_ID==0)
  123. page_str += "<td class='databody sta_normal'>"+obj_list[j].STATUS+"</td>";
  124. else
  125. page_str += "<td class='databody sta_alarm'>"+obj_list[j].STATUS+"</td>";
  126. }else
  127. page_str += "<td class='databody'>"+obj_list[j].VALUE+"</td>";
  128. if((j%3)==2)
  129. page_str += "</tr>";
  130. }
  131. }
  132. if((obj_list.length%3)==2)
  133. page_str += "<td></td></tr>";
  134. else if((obj_list.length%3)==1)
  135. page_str += "<td></td><td></td></tr>";
  136. page_str += "</table></div>";
  137. if(obj_list.length>0)
  138. page_str += "<div id='data_time' class='databody datatitle datatime'>更新时间:"+obj_list[0].TIME+"</div>" ;
  139. $("#data_div").html(page_str);
  140. }
  141. }else{
  142. s_name = iot_list[i].NAME;
  143. if(iot_list[i].COUNT>0){
  144. out = iot_list[i].OUT*100 / iot_list[i].COUNT;
  145. alarm = iot_list[i].ALARM*100 / iot_list[i].COUNT;
  146. normal = (iot_list[i].COUNT-iot_list[i].OUT-iot_list[i].ALARM)*100 / iot_list[i].COUNT;
  147. }
  148. $('#data_div').highcharts({
  149. chart:{
  150. type:'pie',
  151. options3d:{
  152. enabled:true,
  153. alpha:45,
  154. beta:0
  155. },
  156. backgroundColor:'rgba(0,0,0,0)',
  157. animation:false
  158. },
  159. credits:{
  160. enabled:false
  161. },
  162. exporting:{
  163. enabled:false
  164. },
  165. pane:{
  166. size:'80%'
  167. },
  168. title:{
  169. text: s_name,
  170. style:{
  171. color:'#ffffff',fontSize:'18pt',x:-30,y:30
  172. }
  173. },
  174. tooltip: {
  175. pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  176. },
  177. legend:{
  178. itemStyle:{
  179. color:'#ffffff',fontSize:'14pt'
  180. },
  181. itemWidth:160,
  182. align:'right',
  183. verticalAlign:'top',
  184. y:50,
  185. layout:'vertical',
  186. labelFormat:'{name}: <b>{y:.1f}%</b>'
  187. },
  188. plotOptions: {
  189. pie: {
  190. events:{
  191. click:function(event){
  192. show_detail_at();
  193. }
  194. },
  195. allowPointSelect: true,
  196. cursor: 'pointer',
  197. depth: 35,
  198. dataLabels: {
  199. enabled: false,
  200. style:{
  201. color:'#ffffff',fontSize:'14pt'
  202. }
  203. },
  204. showInLegend:true
  205. },
  206. series:{animation:false}
  207. },
  208. colors:['#ffa400','#ff4646','#60ff4d'],
  209. series: [{
  210. type: 'pie',
  211. name: '占比',
  212. data: [
  213. ['离线', out],
  214. ['告警', alarm],
  215. [ '正常',normal]
  216. ],
  217. pointPlacement:'on'
  218. }]
  219. });
  220. }
  221. break;
  222. }
  223. }
  224. }
  225. }
  226. var show_frontpage = function(){
  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((pageStroe.RESULT != undefined)&&(pageStroe.RESULT.IOT_LIST != undefined))
  233. {
  234. var iot_list = pageStroe.RESULT.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. }