energy_consumption.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
  1. $(function() {
  2. $("div.data").hide();
  3. $("#graphViewBtn").on('click',showGraphView);
  4. $("#dataViewBtn").on('click',showDataView);
  5. $('a[data-toggle="tab"]').on('shown.bs.tab',changeLeftTitle);
  6. showSerialChart("graphOne");
  7. showPieChart("graphTwo");
  8. init();
  9. });
  10. function init() {
  11. var today=new Date(),
  12. todayDate=new Date(today.getFullYear(),today.getMonth(),today.getDate());
  13. //设置时间格式
  14. $("#startDate,#endDate").datepicker({
  15. language: 'zh-CN',
  16. autoclose: true,
  17. endDate:"Today",
  18. todayBtn:"linked",
  19. format:"yyyy-mm-dd"
  20. });
  21. $("#startDate").datepicker('update',todayDate);
  22. $("#endDate").datepicker('update',todayDate);
  23. //select
  24. $(".select").selectpicker();
  25. //高度
  26. $(".left-region").height($(".right-region").height());
  27. }
  28. /**
  29. * 显示图形视图
  30. */
  31. function showGraphView(event) {
  32. $("div.data").hide();
  33. $("div.graph").show();
  34. showSerialChart("graphOne");
  35. showPieChart("graphTwo");
  36. }
  37. /**
  38. * 显示表格视图
  39. */
  40. function showDataView(event) {
  41. $("div.data").show();
  42. $("div.graph").hide();
  43. showSerialData();
  44. showPieData();
  45. }
  46. function showSerialChart(chartDiv) {
  47. var chart = AmCharts.makeChart(chartDiv, {
  48. "type": "serial",
  49. "dataProvider": DataSet.serialData,
  50. "valueAxes": [ {
  51. "gridColor": "black",
  52. "gridAlpha": 0.4,
  53. // "axisAlpha": 0,
  54. "dashLength": 8,
  55. "position": "left",
  56. "autoGridCount":false,
  57. "gridCount":3,
  58. "title":"总能耗(kgce)"
  59. } ],
  60. "gridAboveGraphs": true,
  61. "startDuration": 0, //second
  62. "graphs": [ {
  63. "balloonText": "[[category]]: <b>[[value]]</b>",
  64. "fillAlphas": 0.8,
  65. "fillColors":'#FF62FF',
  66. "lineAlpha": 0.2,
  67. "columnWidth":0.6,
  68. "type": "column",
  69. "valueField": "value"
  70. } ],
  71. "chartCursor": {
  72. "categoryBalloonEnabled": false,
  73. "cursorAlpha": 0,
  74. "zoomable": false
  75. },
  76. "categoryField": "time",
  77. "categoryAxis": {
  78. "gridPosition": "start",
  79. "gridAlpha": 0.4,
  80. "dashLength":8,
  81. "dateFormats":[{period:'hh',format:'JJ:NN'}],
  82. "tickPosition": "start",
  83. "autoGridCount":false,
  84. "gridCount":6,
  85. // "tickLength": 20
  86. // title:"总耗能",
  87. // "position":"top"
  88. },
  89. } );
  90. }
  91. function showPieChart(chartDiv) {
  92. var chart = AmCharts.makeChart(chartDiv, {
  93. "type": "pie",
  94. "startDuration": 0,
  95. "addClassNames": true,
  96. "legend":{
  97. "position":"right",
  98. "autoMargins":true,
  99. "valueText":"[[value]]kgce",//gkq:debug
  100. },
  101. "minRadius":80,
  102. "innerRadius": "40%",
  103. "radius":"40%", //gkq:debug
  104. "pullOutRadius":0,
  105. "dataProvider": DataSet.pieData,
  106. "valueField": "value",
  107. "titleField": "item",
  108. "labelRadius":-30, //gkq:debug
  109. "colors":['#5AB6DF','#FFC64B','#5ADF75','#FC8675','#6A8ABE','#FFA24B','#916DDC','#B5EB5F','#EC6E96','#EEF658'],
  110. "outlineThickness":2,
  111. "outlineAlpha":0.8,
  112. "labelText":"[[percents]]%",
  113. "labelsEnabled":true,
  114. "percentPrecision":0
  115. });
  116. }
  117. function showSerialData() {
  118. var html="";
  119. $.each(DataSet.serialData, function(index, entity) {
  120. html+="<tr><td>"+entity.time+"</td><td>"+entity.value+"</td></tr>";
  121. });
  122. $(".serialTBody").empty().html(html);
  123. }
  124. function showPieData() {
  125. var html="";
  126. $.each(DataSet.pieData, function(index, entity) {
  127. html+="<tr><td>"+entity.item+"</td><td>"+entity.value+"</td></tr>";
  128. });
  129. $(".pieTBody").empty().html(html);
  130. }
  131. function changeLeftTitle(event) {
  132. console.log(event);
  133. // 获取已激活的标签页的名称
  134. var activeTab = $(event.target).text();
  135. $.each(DataSet.titleData, function(index, entity) {
  136. if (entity.title===activeTab) {
  137. $("#leftInfo>h2").text(activeTab+"报表");
  138. $("#leftInfo>h4").text(entity.subTitle);
  139. }
  140. });
  141. }
  142. //共享数据集
  143. var DataSet={
  144. serialData:[ { //serial Data
  145. "time": "0:00",
  146. "value": 100+Math.round(Math.random()*20)
  147. }, {
  148. "time": "1:00",
  149. "value": 100+Math.round(Math.random()*20)
  150. }, {
  151. "time": "2:00",
  152. "value": 100+Math.round(Math.random()*20)
  153. }, {
  154. "time": "3:00",
  155. "value": 100+Math.round(Math.random()*20)
  156. }, {
  157. "time": "4:00",
  158. "value": 100+Math.round(Math.random()*20)
  159. }, {
  160. "time": "5:00",
  161. "value": 100+Math.round(Math.random()*20)
  162. }, {
  163. "time": "6:00",
  164. "value": 200+Math.round(Math.random()*40)
  165. }, {
  166. "time": "7:00",
  167. "value": 200+Math.round(Math.random()*40)
  168. }, {
  169. "time": "8:00",
  170. "value": 200+Math.round(Math.random()*40)
  171. }, {
  172. "time": "9:00",
  173. "value": 200+Math.round(Math.random()*40)
  174. }, {
  175. "time": "10:00",
  176. "value": 200+Math.round(Math.random()*40)
  177. }, {
  178. "time": "11:00",
  179. "value": 200+Math.round(Math.random()*40)
  180. }, {
  181. "time": "12:00",
  182. "value": 200+Math.round(Math.random()*40)
  183. },{"time": "13:00",
  184. "value": 200+Math.round(Math.random()*40)
  185. }, {
  186. "time": "14:00",
  187. "value": 200+Math.round(Math.random()*40)
  188. }, {
  189. "time": "15:00",
  190. "value": 200+Math.round(Math.random()*40)
  191. }, {
  192. "time": "16:00",
  193. "value": 200+Math.round(Math.random()*40)
  194. }, {
  195. "time": "17:00",
  196. "value": 200+Math.round(Math.random()*40)
  197. }, {
  198. "time": "18:00",
  199. "value": 100+Math.round(Math.random()*20)
  200. }, {
  201. "time": "19:00",
  202. "value": 100+Math.round(Math.random()*20)
  203. }, {
  204. "time": "20:00",
  205. "value": 100+Math.round(Math.random()*20)
  206. }, {
  207. "time": "21:00",
  208. "value": 100+Math.round(Math.random()*20)
  209. }, {
  210. "time": "22:00",
  211. "value": 100+Math.round(Math.random()*20)
  212. }, {
  213. "time": "23:00",
  214. "value": 100+Math.round(Math.random()*20)
  215. } ],
  216. pieData:[{ //pie Data
  217. "item": "总用电",
  218. "value": 60
  219. }, {
  220. "item": "总用水",
  221. "value": 20
  222. }, {
  223. "item": "总用气",
  224. "value": 15
  225. }, {
  226. "item": "其他",
  227. "value": 5
  228. }],
  229. titleData:[
  230. {"title":"建筑总能耗","subTitle":"含建筑总耗能、总用电、总用水、总用气等数据。"},
  231. {"title":"建筑总用电","subTitle":"含建筑总耗能、总用电、总用水、总用气等数据。"},
  232. {"title":"空调系统用电","subTitle":"含建筑总耗能、总用电、总用水、总用气等数据。"},
  233. {"title":"建筑空间用电","subTitle":"含建筑总耗能、总用电、总用水、总用气等数据。"},
  234. {"title":"建筑碳排放量","subTitle":"含建筑总耗能、总用电、总用水、总用气等数据。"},
  235. ]
  236. };