mapping.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>SmartPing Dashboard</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <link href="assets/css/bootstrap.min.css" rel="stylesheet">
  9. <link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet">
  10. <link href="assets/css/font-awesome.css" rel="stylesheet">
  11. <link href="assets/css/style.css" rel="stylesheet">
  12. <link href="assets/css/pages/dashboard.css" rel="stylesheet">
  13. <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
  14. <!--[if lt IE 9]>
  15. <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  16. <![endif]-->
  17. </head>
  18. <body>
  19. <div class="navbar navbar-fixed-top">
  20. <div class="navbar-inner">
  21. <div class="container">
  22. <span id="cloudbrand" class="brand" style="margin-right: -15px;"></span><a class="brand" href="index.html">SmartPing Dashbord<span id="agentname"></span></a>
  23. <span id="banner_last_ck_time" class="pull-right " style="margin-top: 10px;"></span>
  24. </div>
  25. <!-- /container -->
  26. </div>
  27. <!-- /navbar-inner -->
  28. </div>
  29. <!-- /navbar -->
  30. <div class="subnavbar">
  31. <div class="subnavbar-inner">
  32. <div class="container">
  33. <ul class="mainnav">
  34. <li><a href="index.html"><i class="icon-mail-forward"></i><span>正向Ping</span> </a> </li>
  35. <li><a href="reverse.html"><i class="icon-mail-reply"></i><span>反向Ping</span> </a> </li>
  36. <li><a href="topology.html"><i class="icon-bar-chart"></i><span>Ping拓扑</span> </a> </li>
  37. <li class="active"><a href="mapping.html"><i class="icon-map-marker"></i><span>全国延迟</span> </a> </li>
  38. <li ><a href="tools.html"><i class="icon-wrench"></i><span>检测工具</span> </a> </li>
  39. <li><a id="cfgUrl" href="config.html"><i class="icon-cog"></i><span>系统配置</span> </a> </li>
  40. </ul>
  41. </div>
  42. <!-- /container -->
  43. </div>
  44. <!-- /subnavbar-inner -->
  45. </div>
  46. <!-- /subnavbar -->
  47. <div class="main" style="margin-top:-20px;">
  48. <div class="main-inner">
  49. <div class="container">
  50. <div class="row">
  51. <div class="span10">
  52. <span style="float: right"><input class="Wdate" id="pkdata" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',onpicked:pickedFunc})" style="width:120px;position:absolute;margin-left: -120px;z-index: 99;"></span>
  53. <div id="echarts-map" style="width: 100%;"></div>
  54. <input type="hidden" id="agent" value="">
  55. </div>
  56. <!-- /span10 -->
  57. <div class="span2">
  58. <div class="widget widget-table action-table">
  59. <div class="widget-header"> <i class="icon-th-list"></i>
  60. <h3>节点列表</h3>
  61. </div>
  62. <!-- /widget-header -->
  63. <div class="widget-content">
  64. <table class="table table-striped table-bordered">
  65. <tbody class="agentlist">
  66. </tbody>
  67. </table>
  68. </div>
  69. <!-- /widget-content -->
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74. <!-- /container -->
  75. </div>
  76. <!-- /main-inner -->
  77. </div>
  78. <!-- /main -->
  79. <div class="footer">
  80. <div class="footer-inner">
  81. <div class="container">
  82. <div class="row">
  83. <div class="span12"> &copy; 2017 - 2020 <a target="_blank" href="http://smartping.org" >SmartPing.org</a> <span style="float:right" id="verion"></span></div>
  84. <!-- /span12 -->
  85. </div>
  86. <!-- /row -->
  87. </div>
  88. <!-- /container -->
  89. </div>
  90. <!-- /footer-inner -->
  91. </div>
  92. <!-- /footer -->
  93. <!-- Le javascript
  94. ================================================== -->
  95. <!-- Placed at the end of the document so the pages load faster -->
  96. <script src="assets/js/jquery-1.7.2.min.js"></script>
  97. <script src="assets/js/bootstrap.js"></script>
  98. <script src="assets/js/echarts-all.js"></script>
  99. <script language="JavaScript" type="text/javascript" src="assets/js/My97DatePicker/WdatePicker.js"></script>
  100. <script src="assets/js/funcs.js"></script>
  101. <script>
  102. function pickedFunc(){
  103. d=$("#pkdata").val()
  104. var url = $("#agent").val();
  105. if(url!=""){
  106. url="/api/proxy.json?g="+url
  107. }
  108. $.getJSON(url+"/api/mapping.json?d="+d,function(result){
  109. option = {
  110. title : {
  111. text: result["text"],
  112. subtext: result["subtext"],
  113. x:'center'
  114. },
  115. tooltip : {
  116. trigger: 'item'
  117. },
  118. legend: {
  119. orient: 'vertical',
  120. x:'left',
  121. data:['电信','联通','移动'],
  122. },
  123. dataRange: {
  124. min: 0,
  125. max: 200,
  126. x: 'left',
  127. y: 'bottom',
  128. text:['高','低'],
  129. splitList: [
  130. {start: 200, color: 'red'},
  131. {start: 150, end: 200},
  132. {start: 100, end: 150},
  133. {start: 50, end: 100, color: 'Green'},
  134. {start: 0, end: 50,color: 'DarkGreen'}
  135. ],
  136. color: ['#E0022B', '#E09107', '#A3E00B']
  137. },
  138. toolbox: {
  139. show: true,
  140. orient : 'vertical',
  141. x: 'right',
  142. y: 'center',
  143. feature : {
  144. mark : {show: true},
  145. dataView : {show: true, readOnly: false},
  146. saveAsImage : {show: true}
  147. }
  148. },
  149. series : [
  150. {
  151. name: '电信',
  152. type: 'map',
  153. mapType: 'china',
  154. mapValueCalculation:'average',
  155. itemStyle:{
  156. normal:{label:{show:true}},
  157. emphasis:{label:{show:true}}
  158. },
  159. data:result["avgdelay"]["ctcc"]
  160. },
  161. {
  162. name: '联通',
  163. type: 'map',
  164. mapType: 'china',
  165. mapValueCalculation:'average',
  166. itemStyle:{
  167. normal:{label:{show:true}},
  168. emphasis:{label:{show:true}}
  169. },
  170. data:result["avgdelay"]["cucc"]
  171. },
  172. {
  173. name: '移动',
  174. type: 'map',
  175. mapType: 'china',
  176. mapValueCalculation:'average',
  177. itemStyle:{
  178. normal:{label:{show:true}},
  179. emphasis:{label:{show:true}}
  180. },
  181. data:result["avgdelay"]["cmcc"]
  182. }
  183. ]
  184. };
  185. var mainContainer = document.getElementById('echarts-map');
  186. var resizeMainContainer = function () {
  187. mainContainer.style.height = ($(window).height()-220)+"px";
  188. };
  189. resizeMainContainer();
  190. var mainChart = echarts.init(mainContainer);
  191. $(window).on('resize',function(){//
  192. resizeMainContainer();
  193. mainChart.resize();
  194. });
  195. mainChart.setOption(option);
  196. }).fail(function (xhr, status) {
  197. alert(xhr.responseText);
  198. Refresh();
  199. });;
  200. }
  201. function changeAgent(n,url){
  202. $(".alerticon-" + n).addClass("icon-spinner").addClass("icon-spin").addClass("animated");
  203. if(url!=""){
  204. $("#agent").val(url);
  205. url="/api/proxy.json?g="+url
  206. }
  207. $.getJSON(url+"/api/mapping.json",function(result){
  208. option = {
  209. title : {
  210. text: result["text"],
  211. subtext: result["subtext"],
  212. x:'center'
  213. },
  214. tooltip : {
  215. trigger: 'item'
  216. },
  217. legend: {
  218. orient: 'vertical',
  219. x:'left',
  220. data:['电信','联通','移动'],
  221. },
  222. dataRange: {
  223. min: 0,
  224. max: 200,
  225. x: 'left',
  226. y: 'bottom',
  227. text:['高','低'],
  228. splitList: [
  229. {start: 1000, color: 'red'},
  230. {start: 300, end: 1000},
  231. {start: 100, end: 300},
  232. {start: 50, end: 100, color: 'DarkGreen'},
  233. {start: 0, end: 50,color: 'Green'}
  234. ],
  235. color: ['#E0022B', '#E09107', '#A3E00B']
  236. },
  237. toolbox: {
  238. show: true,
  239. orient : 'vertical',
  240. x: 'right',
  241. y: 'center',
  242. feature : {
  243. mark : {show: true},
  244. dataView : {show: true, readOnly: false},
  245. saveAsImage : {show: true}
  246. }
  247. },
  248. series : [
  249. {
  250. name: '电信',
  251. type: 'map',
  252. mapType: 'china',
  253. mapValueCalculation:'average',
  254. itemStyle:{
  255. normal:{label:{show:true}},
  256. emphasis:{label:{show:true}}
  257. },
  258. data:result["avgdelay"]["ctcc"]
  259. },
  260. {
  261. name: '联通',
  262. type: 'map',
  263. mapType: 'china',
  264. mapValueCalculation:'average',
  265. itemStyle:{
  266. normal:{label:{show:true}},
  267. emphasis:{label:{show:true}}
  268. },
  269. data:result["avgdelay"]["cucc"]
  270. },
  271. {
  272. name: '移动',
  273. type: 'map',
  274. mapType: 'china',
  275. mapValueCalculation:'average',
  276. itemStyle:{
  277. normal:{label:{show:true}},
  278. emphasis:{label:{show:true}}
  279. },
  280. data:result["avgdelay"]["cmcc"]
  281. }
  282. ]
  283. };
  284. var mainContainer = document.getElementById('echarts-map');
  285. var resizeMainContainer = function () {
  286. mainContainer.style.height = ($(window).height()-220)+"px";
  287. };
  288. resizeMainContainer();
  289. var mainChart = echarts.init(mainContainer);
  290. $(window).on('resize',function(){//
  291. resizeMainContainer();
  292. mainChart.resize();
  293. });
  294. mainChart.setOption(option);
  295. $(".alerticon-" + n).removeClass("icon-spinner").removeClass("icon-spin").removeClass("animated");
  296. }).fail(function (xhr, status) {
  297. alert(xhr.responseText);
  298. Refresh();
  299. });
  300. }
  301. $(function(){
  302. $("#echarts").height($(window).height()-220);
  303. $.getJSON("/api/config.json",function(result){
  304. $("#agentname").html(" ("+result["Name"]+")")
  305. AgentMode(result["Mode"])
  306. $("#verion").html("Version: "+result["Ver"])
  307. $.each(result["Network"], function(i, network){
  308. //if(field.Agent==true) {
  309. if(network["Smartping"]) {
  310. $(".agentlist").append("<tr><td><i class='alerticon-" + network["Name"] + "'></i>&nbsp;<a onclick=changeAgent('" + network["Name"] + "','http://" + network["Addr"] + ":" + result["Port"] + "')>" + network["Name"] + "</a></td></tr>");
  311. }
  312. //}
  313. });
  314. changeAgent("","");
  315. setTimeout('Refresh()',result["Base"]["Refresh"]*60*1000);
  316. }).fail(function (xhr, status) {
  317. alert(xhr.responseText);
  318. Refresh();
  319. });
  320. });
  321. </script>
  322. </body>
  323. </html>