ed104da2c9c67afaadcef4a65bdf7aa9b9fa1cab.svn-base 13 KB

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