65676ec24ae1e653d8e4aa2d0efff22e8760e886.svn-base 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>重要用户停电恢复率</title>
  5. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <script type="text/javascript" src="/nwyj/scripts/qui/libs/js/jquery.js"></script>
  8. <script type="text/javascript" src="/nwyj/scripts/cockpit/cockpitIndex/context.js"></script>
  9. <script type="text/javascript" src="/nwyj/page/cockpit/echarts-2.2.7/build/source/echarts.js"></script>
  10. <script type="text/javascript" src="/nwyj/page/cockpit/echarts-2.2.7/build/source/echarts-all.js"></script>
  11. <script type="text/javascript" src="/nwyj/page/cockpit/echarts-2.2.7/build/source/chart/gauge.js"></script>
  12. <script type="text/javascript" src=" /nwyj/page/cockpit/cockpit_echart.js"></script>
  13. <!-- <script type="text/javascript" src=" /nwyj/page/cockpit/webgis/util.js"></script> -->
  14. <script type="text/javascript" src="/nwyj/scripts/cockpit/cockpitIndex/util.js"></script>
  15. <link rel="stylesheet" type="text/css" href=" /nwyj/css/cockpit/commom/ehcartPage.css" />
  16. <!-- dwr 实现消息推送功能开始-->
  17. <script type='text/javascript' src='/nwyj/dwr/engine.js'></script>
  18. <script type='text/javascript' src='/nwyj/dwr/util.js'></script>
  19. </head>
  20. <body onload="dwr.engine.setActiveReverseAjax(true);dwr.engine.setNotifyServerOnPageUnload(true);">
  21. <div id="i_page_main" class="c_page_main">
  22. <div id="i_page_head" class="c_page_head">
  23. <div id="i_page_head_title">
  24. </div>
  25. <div id="i_page_head_subtitle"></div>
  26. </div>
  27. <div id="i_page_chart" class="c_page_chart">
  28. </div>
  29. </div>
  30. <script type="text/javascript">
  31. var pageParam={};
  32. var chart=null;
  33. var utils=new Util();
  34. $(function(){
  35. pageParam.style=utils.resolveUrl()["style"]||"style1";
  36. pageParam.title=utils.resolveUrl()["title"]||"广东电网";
  37. pageParam.number=utils.resolveUrl()["number"]||warnningnumber;
  38. pageParam.compId=utils.resolveUrl()["dept_id"]||11;
  39. init();
  40. });
  41. /**
  42. *初始化方法
  43. */
  44. function init(){
  45. loadChart(pageParam);
  46. }
  47. function loadChart(jsonParam){
  48. $.post("/nwyj/ws/ChartServiceImpl/ChartServiceImpl/getChildDataOrSelfByWarnningNumber",{charType:"yonghutingdian",name:"getRecodeSumData",number:jsonParam.number,compId:jsonParam.compId,
  49. viewName:"REPORT_GDSUNSHI_KEHUTD_VIEW"},function(result){
  50. if(result.rows.length==0){
  51. zeroChart();
  52. return;
  53. }
  54. removeNoData();
  55. var data=result.rows[0];
  56. var sum=utils.changeQ(data["sum"]);
  57. var un=utils.changeQ(data["unsum"]);
  58. var hfl=(sum==0?1:(sum-un)/sum);
  59. var sArr= [
  60. {
  61. name:"重要用户停电",
  62. type:"gauge",
  63. radius : "55%",
  64. center: ["50%", "60%"],
  65. detail: {
  66. formatter: "{value}%",
  67. textStyle: {
  68. fontSize: 32,
  69. fontStyle: "normal",
  70. fontWeight: "bold"
  71. },
  72. show: true,
  73. width: 100,
  74. height: 40,
  75. offsetCenter: [0, 0],
  76. borderColor: "#ccc",
  77. borderWidth: 0
  78. },
  79. splitNumber: 5,
  80. axisLine: {
  81. lineStyle: {
  82. color: [[hfl, "#0c8918"],[1, "#c00000"] ],
  83. width: 30,
  84. shadowColor: "white",
  85. shadowBlur: 14,
  86. shadowOffsetX: 0,
  87. shadowOffsetY: 0
  88. }
  89. },
  90. axisTick: { // 坐标轴小标记
  91. splitNumber: 10, // 每份split细分多少段
  92. length :12, // 属性length控制线长
  93. lineStyle: { // 属性lineStyle控制线条样式
  94. color: "white"
  95. }
  96. },
  97. axisLabel: {
  98. show: true,
  99. textStyle: {
  100. fontSize: 10,
  101. fontWeight: "bold",
  102. fontStyle: "normal"
  103. }
  104. },
  105. splitLine: {
  106. show: true,
  107. length: 35,
  108. lineStyle: {
  109. width: 2,
  110. type: "solid"
  111. }
  112. },
  113. pointer: {
  114. length: "80%",
  115. width: 12
  116. },
  117. title : {
  118. show : true,
  119. offsetCenter: [0, "-40%"], // x, y,单位px
  120. textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
  121. fontWeight: "bolder"
  122. }
  123. },
  124. tooltip: {
  125. trigger: "item"
  126. },
  127. detail : {
  128. formatter:"{value}%",
  129. textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
  130. color: "auto",
  131. fontWeight: "bolder"
  132. }
  133. },
  134. data:[],
  135. title:{show:false}
  136. }
  137. ];
  138. var xAxis=[];
  139. sArr[0].data.push({value:getFourData(hfl)*100,name:"恢复率"});
  140. opParams={
  141. title:"截止:"+data["APPEAR_TIME"],//标题
  142. subtext:"用户已恢复总数:"+(sum-un)+"(户)\n用户停电总数:"+sum+" (户)",
  143. unit:"座",//单位
  144. leArr:[],//图例
  145. xAxis:xAxis,//x轴
  146. sArr:sArr//主数据
  147. };
  148. chart=getEchart($("#i_page_chart"),getOption11,opParams,null);
  149. setTitle();
  150. bindEvent();
  151. },"json");
  152. }
  153. function setTitle(){
  154. $("#i_page_head_title").find("h2").remove();
  155. $("#i_page_head_title").append("<h2>"+pageParam.title+"重要用户停电恢复率</h2>");
  156. }
  157. function bindEvent(){
  158. $(window).resize(function(){
  159. chart.resize();
  160. });
  161. }
  162. /*dwr推送方法 */
  163. function dwrData(number){
  164. if(number== pageParam.number){
  165. loadChart(pageParam);
  166. }
  167. }
  168. </script>
  169. </body>
  170. </html>