1 /** 2 * XXX服务器资源管理器 3 * author: liuwei 4 * create date: 2012-09-28 5 */ 6 var _809Server_Explorer = { 7 8 //服务器操作系统名称 9 osName:"", 10 11 //内存数据源 12 ramData:[ 13 // { 14 // name:"1.23GB", 15 // value:1.23, 16 // color:"#ff0000" 17 // } 18 ], 19 20 //线程数据源 21 threadData:[ 22 // { 23 // generateDate:new Date(), //监控时间 24 // value:28 //线程数量 25 // } 26 ], 27 28 chartData : [ 29 // { 30 // date: new Date(), 31 // usedMemory: 20 32 // } 33 ], 34 35 //RAM Chart instance 36 ramChart: new AmCharts.AmSerialChart(), 37 38 //Thread Chart instance 39 threadChart: new AmCharts.AmSerialChart(), 40 41 //RAM Line Chart instance 42 ramLineChart: new AmCharts.AmSerialChart(), 43 44 /** 45 * 渲染出RAM图表 46 */ 47 drawRAMChart:function(){ 48 49 this.ramChart.dataProvider = this.ramData; 50 this.ramChart.categoryField = "name"; 51 this.ramChart.startDuration = 0; 52 // sometimes we need to set margins manually 53 // autoMargins should be set to false in order chart to use custom margin values 54 this.ramChart.autoMargins = true; 55 this.ramChart.marginRight = 0; 56 this.ramChart.marginBottom = 0; 57 this.ramChart.marginTop = 0; 58 59 // AXES 60 // category 61 var categoryAxis = this.ramChart.categoryAxis; 62 categoryAxis.inside = true; 63 categoryAxis.axisAlpha = 1; 64 categoryAxis.gridAlpha = 0; 65 categoryAxis.tickLength = 0; 66 67 /** 68 // value 69 var valueAxis = new AmCharts.ValueAxis(); 70 valueAxis.minimum = 0; 71 valueAxis.axisAlpha = 0; 72 valueAxis.maximum = 4; 73 valueAxis.dashLength = 4; 74 this.ramChart.addValueAxis(valueAxis); 75 **/ 76 77 // GRAPH 78 var graph = new AmCharts.AmGraph(); 79 graph.valueField = "value"; 80 graph.customBulletField = "bullet"; // field of the bullet in data provider 81 graph.bulletOffset = 16; // distance from the top of the column to the bullet 82 graph.colorField = "color"; 83 graph.bulletSize = 34; // bullet image should be rectangle (width = height) 84 graph.type = "column"; 85 graph.fillAlphas = 0.5; 86 graph.cornerRadiusTop = 8; 87 graph.lineAlpha = 0; 88 graph.balloonText = "内存使用: [[value]] G"; 89 this.ramChart.addGraph(graph); 90 91 // WRITE 92 this.ramChart.write("ramDiv"); 93 }, 94 95 /** 96 * 渲染出Thread图表 97 */ 98 drawThreadChart:function(){ 99 100 this.threadChart.pathToImages = "http://www.cnblogs.com/js/amcharts/images/"; 101 this.threadChart.zoomOutButton = { 102 backgroundColor: '#000000', 103 backgroundAlpha: 0.15 104 }; 105 this.threadChart.marginRight = 10; 106 this.threadChart.dataProvider = this.threadData; 107 this.threadChart.categoryField = "generateDate"; 108 109 // AXES 110 // Category 111 var categoryAxis = this.threadChart.categoryAxis; 112 categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true 113 categoryAxis.minPeriod = "ss"; // our data is yearly, so we set minPeriod to YYYY 114 categoryAxis.gridAlpha = 0.05; 115 categoryAxis.axisColor="#DADADA"; 116 117 // VALUE 118 var valueAxis = new AmCharts.ValueAxis(); 119 valueAxis.title = "线程使用实时记录"; 120 valueAxis.gridAlpha = 0; 121 valueAxis.axisAlpha = 1; 122 valueAxis.fillColor = "#000000"; 123 valueAxis.fillAlpha = 0.05; 124 valueAxis.inside = false; 125 valueAxis.axisColor = "#DADADA"; 126 127 this.threadChart.addValueAxis(valueAxis); 128 129 // GRAPH 130 var graph = new AmCharts.AmGraph(); 131 graph.type = "step"; // this line makes step graph 132 graph.valueField = "value"; 133 graph.lineColor = "#000000"; 134 graph.balloonText = "[[value]]"; 135 this.threadChart.addGraph(graph); 136 137 // CURSOR 138 var chartCursor = new AmCharts.ChartCursor(); 139 chartCursor.cursorAlpha = 0; 140 chartCursor.cursorPosition = "mouse"; 141 chartCursor.categoryBalloonDateFormat = "HH时"; 142 this.threadChart.addChartCursor(chartCursor); 143 144 // SCROLLBAR 145 var chartScrollbar = new AmCharts.ChartScrollbar(); 146 chartScrollbar.graph = graph; 147 chartScrollbar.backgroundAlpha = 0.1; 148 chartScrollbar.backgroundColor = "#000000"; 149 chartScrollbar.graphLineAlpha = 0.1; 150 chartScrollbar.graphFillAlpha = 0; 151 chartScrollbar.selectedGraphFillAlpha = 0; 152 chartScrollbar.selectedGraphLineAlpha = 0.25; 153 chartScrollbar.scrollbarHeight = 20; 154 chartScrollbar.selectedBackgroundColor = "#FFFFFF"; 155 this.threadChart.addChartScrollbar(chartScrollbar); 156 157 // WRITE 158 this.threadChart.write("threadDiv"); 159 }, 160 161 /** 162 * 渲染出RAM Line Chart图表 163 */ 164 drawRAMLineChart:function(){ 165 166 this.ramLineChart.pathToImages = "http://www.cnblogs.com/js/amcharts/images/"; 167 this.ramLineChart.zoomOutButton = { 168 backgroundColor: '#000000', 169 backgroundAlpha: 0.15 170 }; 171 this.ramLineChart.dataProvider = this.chartData; 172 this.ramLineChart.categoryField = "date"; 173 174 // AXES 175 // category 176 var categoryAxis = this.ramLineChart.categoryAxis; 177 categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true 178 categoryAxis.minPeriod = "ss"; // our data is daily, so we set minPeriod to DD 179 categoryAxis.dashLength = 1; 180 categoryAxis.gridAlpha = 0.15; 181 categoryAxis.axisColor = "#DADADA"; 182 183 // value 184 var valueAxis = new AmCharts.ValueAxis(); 185 valueAxis.title = "内存使用实时记录"; 186 valueAxis.axisColor = "#DADADA"; 187 valueAxis.dashLength = 1; 188 valueAxis.logarithmic = true; // this line makes axis logarithmic 189 this.ramLineChart.addValueAxis(valueAxis); 190 191 // GRAPH 192 var graph = new AmCharts.AmGraph(); 193 graph.type = "smoothedLine"; 194 graph.bullet = "round"; 195 graph.bulletColor = "#FFFFFF"; 196 graph.bulletBorderColor = "#00BBCC"; 197 graph.bulletBorderThickness = 2; 198 graph.bulletSize = 7; 199 graph.title = "usedMemory"; 200 graph.valueField = "usedMemory"; 201 graph.lineThickness = 2; 202 graph.lineColor = "#00BBCC"; 203 this.ramLineChart.addGraph(graph); 204 205 // CURSOR 206 var chartCursor = new AmCharts.ChartCursor(); 207 chartCursor.cursorPosition = "mouse"; 208 this.ramLineChart.addChartCursor(chartCursor); 209 chartCursor.categoryBalloonDateFormat = "HH时"; 210 211 // SCROLLBAR 212 var chartScrollbar = new AmCharts.ChartScrollbar(); 213 this.ramLineChart.addChartScrollbar(chartScrollbar); 214 215 // WRITE 216 this.ramLineChart.write("ramLineDiv"); 217 }, 218 219 /** 220 * 刷新图表 221 */ 222 flushChart: function(){ 223 this.ramChart.validateData(); 224 this.threadChart.validateData(); 225 this.ramLineChart.validateData(); 226 } 227 228 }; 229 230 231 $(function(){ 232 233 var init = function(){ 234 $.ajax({ 235 type:"POST", 236 cache:false, 237 url:"http://www.cnblogs.com/isafe/query/ResourceManagementInfo!getMonitorInfo.action", 238 data:null, 239 success:function(data){ 240 241 if(null!=data){ 242 243 //推入新的实时线程数据 244 _809Server_Explorer.threadData.push({ 245 generateDate:new Date(), 246 value:data.result["totalThread"] 247 }); 248 249 //弹出之前的数据，推入新的实时的RAM数据 250 _809Server_Explorer.ramData.pop(); 251 252 var num = data.result["usedMemory"]/1024/1024;//转化GB 253 254 _809Server_Explorer.ramData.push({ 255 name:num.toString().substring(0, num.toString().indexOf(".")+3)+'GB', 256 value:num.toString().substring(0, num.toString().indexOf(".")+3), 257 color:"#ff0000" 258 }); 259 260 _809Server_Explorer.chartData.push({ 261 date: new Date(), 262 usedMemory: num.toString().substring(0, num.toString().indexOf(".")+3) 263 }); 264 265 //刷新图表 266 _809Server_Explorer.flushChart(); 267 268 //_809Server_Explorer.osName=data.result["osName"]; 269 270 var os_text =$("#osNameValue_lbl"); 271 var maxMemory_lbl =$("#maxMemory_lbl"); 272 273 if(""==os_text.text() || ""==maxMemory_lbl.text()){ 274 os_text.text(data.result["osName"]); 275 maxMemory_lbl.text(Math.ceil(data.result["maxMemory"]/1024/1024)+"GB"); 276 } 277 } 278 }, 279 dataType:"json" 280 }); 281 }; 282 283 init(); 284 285 //定时启动实时刷新 286 setInterval(function(){ 287 init(); 288 }, 5000); 289 290 _809Server_Explorer.drawRAMChart(); 291 _809Server_Explorer.drawThreadChart(); 292 _809Server_Explorer.drawRAMLineChart(); 293 294 });