前提：已经安装天兔3.8成功
添加内存统计步骤：
一.在/opt/lampp/htdocs/lepus/application/controllers/lp_os.php 文件中添加，目的是让chart_reslut中有内存数据mem_total、mem_avail、mem_cached (名字对应数据库中 os_status_history表中 相应的字段名)：
在181行后处插入如下代码
$chart_reslut[$i]['mem_total'] = $dbdata['mem_total']; $chart_reslut[$i]['mem_avail'] = $dbdata['mem_avail']; $chart_reslut[$i]['mem_cached'] = $dbdata['mem_cached'];
未插入前代码
public function chart(){ parent::check_privilege(); $host = $this->uri->segment(3); $host=!empty($host) ? $host : ""; $begin_time = $this->uri->segment(4); $begin_time=!empty($begin_time) ? $begin_time : "30"; $time_span = $this->uri->segment(5); $time_span=!empty($time_span) ? $time_span : "min"; //连接数图表 $chart_reslut=array(); for($i=$begin_time;$i>=0;$i--){ $timestamp=time()-60*$i; $time= date('YmdHi',$timestamp); $has_record = $this->os->check_has_record($host,$time); if($has_record){ $chart_reslut[$i]['time']=date('Y-m-d H:i',$timestamp); $dbdata=$this->os->get_os_chart_record($host,$time); $chart_reslut[$i]['process'] = $dbdata['process']; $chart_reslut[$i]['load_1'] = $dbdata['load_1']; $chart_reslut[$i]['load_5'] = $dbdata['load_5']; $chart_reslut[$i]['load_15'] = $dbdata['load_15']; $chart_reslut[$i]['cpu_user_time'] = $dbdata['cpu_user_time']; $chart_reslut[$i]['cpu_system_time'] = $dbdata['cpu_system_time']; $chart_reslut[$i]['cpu_idle_time'] = $dbdata['cpu_idle_time']; $chart_reslut[$i]['mem_usage_rate'] = $dbdata['mem_usage_rate']; $chart_reslut[$i]['disk_io_reads_total'] = $dbdata['disk_io_reads_total']; $chart_reslut[$i]['disk_io_writes_total'] = $dbdata['disk_io_writes_total']; $chart_reslut[$i]['net_in_bytes_total'] = $dbdata['net_in_bytes_total']; $chart_reslut[$i]['net_out_bytes_total'] = $dbdata['net_out_bytes_total']; } } $data['chart_reslut']=$chart_reslut; $chart_option=array(); if($time_span=='min'){ $chart_option['formatString']='%H:%M'; } else if($time_span=='hour'){ $chart_option['formatString']='%H:%M'; } else if($time_span=='day'){ $chart_option['formatString']='%m/%d %H:%M'; } $data['chart_option']=$chart_option; $data['begin_time']=$begin_time; $data['cur_host']=$host; $data['last_record'] = $this->os->get_last_record($host); $data['diskinfo'] = $this->os->get_disk_record($host); $this->layout->view('os/chart',$data); }
插入后：
public function chart(){ parent::check_privilege(); $host = $this->uri->segment(3); $host=!empty($host) ? $host : ""; $begin_time = $this->uri->segment(4); $begin_time=!empty($begin_time) ? $begin_time : "30"; $time_span = $this->uri->segment(5); $time_span=!empty($time_span) ? $time_span : "min"; //连接数图表 $chart_reslut=array(); for($i=$begin_time;$i>=0;$i--){ $timestamp=time()-60*$i; $time= date('YmdHi',$timestamp); $has_record = $this->os->check_has_record($host,$time); if($has_record){ $chart_reslut[$i]['time']=date('Y-m-d H:i',$timestamp); $dbdata=$this->os->get_os_chart_record($host,$time); $chart_reslut[$i]['process'] = $dbdata['process']; $chart_reslut[$i]['load_1'] = $dbdata['load_1']; $chart_reslut[$i]['load_5'] = $dbdata['load_5']; $chart_reslut[$i]['load_15'] = $dbdata['load_15']; $chart_reslut[$i]['cpu_user_time'] = $dbdata['cpu_user_time']; $chart_reslut[$i]['cpu_system_time'] = $dbdata['cpu_system_time']; $chart_reslut[$i]['cpu_idle_time'] = $dbdata['cpu_idle_time']; $chart_reslut[$i]['mem_usage_rate'] = $dbdata['mem_usage_rate']; $chart_reslut[$i]['disk_io_reads_total'] = $dbdata['disk_io_reads_total']; $chart_reslut[$i]['disk_io_writes_total'] = $dbdata['disk_io_writes_total']; $chart_reslut[$i]['net_in_bytes_total'] = $dbdata['net_in_bytes_total']; $chart_reslut[$i]['net_out_bytes_total'] = $dbdata['net_out_bytes_total']; $chart_reslut[$i]['mem_total'] = $dbdata['mem_total']; #插入的代码 $chart_reslut[$i]['mem_avail'] = $dbdata['mem_avail']; #插入的代码 $chart_reslut[$i]['mem_cached'] = $dbdata['mem_cached']; #插入的代码 } } $data['chart_reslut']=$chart_reslut; $chart_option=array(); if($time_span=='min'){ $chart_option['formatString']='%H:%M'; } else if($time_span=='hour'){ $chart_option['formatString']='%H:%M'; } else if($time_span=='day'){ $chart_option['formatString']='%m/%d %H:%M'; } $data['chart_option']=$chart_option; $data['begin_time']=$begin_time; $data['cur_host']=$host; $data['last_record'] = $this->os->get_last_record($host); $data['diskinfo'] = $this->os->get_disk_record($host); $this->layout->view('os/chart',$data); }
二、在/opt/lampp/htdocs/lepus/application/views/os/chart.php中插入代码
插入代码1：在43行插入如下代码，目的是在详情页中插入一个层，用来存放统计内存图表：
<div id="memory" style="margin-top:5px; margin-left:10px; 96%; height:300px; "></div>
插入代码前：
<div id="cpu_load" style="margin-top:5px; margin-left:10px; 96%; height:300px;"></div> <div id="cpu_utilization" style="margin-top:5px; margin-left:10px; 96%; height:300px;"></div> <div id="process" style="margin-top:5px; margin-left:10px; 96%; height:300px; "></div> <div id="network" style="margin-top:5px; margin-left:10px; 96%; height:300px; "></div> <div id="diskio" style="margin-top:5px; margin-left:10px; 96%; height:300px; "></div>
插入代码后：
<div id="cpu_load" style="margin-top:5px; margin-left:10px; 96%; height:300px;"></div> <div id="cpu_utilization" style="margin-top:5px; margin-left:10px; 96%; height:300px;"></div> <div id="process" style="margin-top:5px; margin-left:10px; 96%; height:300px; "></div> <div id="network" style="margin-top:5px; margin-left:10px; 96%; height:300px; "></div> <div id="diskio" style="margin-top:5px; margin-left:10px; 96%; height:300px; "></div> <div id="memory" style="margin-top:5px; margin-left:10px; 96%; height:300px; "></div> #插入的代码
插入代码2：在148行后插入如下代码，目的是在上面的层上画内存统计图（单位是KB）：
//memory start $(document).ready(function(){ var data1=[ <?php if(!empty($chart_reslut)) { foreach($chart_reslut as $item){ ?> ["<?php echo $item['time']?>", <?php echo $item['mem_cached']?> ], <?php }}else{ ?> [] <?php } ?> ]; var data2=[ <?php if(!empty($chart_reslut)) { foreach($chart_reslut as $item){ ?> ["<?php echo $item['time']?>", <?php echo $item['mem_total']?> ], <?php }}else{ ?> [] <?php } ?> ]; var data3=[ <?php if(!empty($chart_reslut)) { foreach($chart_reslut as $item){ ?> ["<?php echo $item['time']?>", <?php echo $item['mem_avail']?> ], <?php }}else{ ?> [] <?php } ?> ]; var plot1 = $.jqplot('memory', [data1,data2,data3], { seriesDefaults: { show: true, // 设置是否渲染整个图表区域（即显示图表中内容） xaxis: 'xaxis', // either 'xaxis' or 'x2axis'. yaxis: 'yaxis', // either 'yaxis' or 'y2axis'. label: '', // 用于显示在分类名称框中的分类名称 color: '', // 分类在图标中表示（折现，柱状图等）的颜色 lineWidth: 1.5, // 分类图（特别是折线图）宽度 shadow: true, // 各图在图表中是否显示阴影区域 shadowAngle: 45, // 参考grid中相同参数 shadowOffset: 1.25, // 参考grid中相同参数 shadowDepth: 3, // 参考grid中相同参数 shadowAlpha: 0.1, // 参考grid中相同参数 showLine: true, //是否显示图表中的折线（折线图中的折线） showMarker: false, // 是否强调显示图中的数据节点 fill: false, // 是否填充图表中折线下面的区域（填充颜色同折线颜色）以及legend rendererOptions: { smooth: true, } }, series:[//如果有多个分类需要显示，这在此处设置各个分类的相关配置属性 //eg.设置各个分类在分类名称框中的分类名称 {label: '<?php echo $this->lang->line('cached'); ?>'},{label: '<?php echo $this->lang->line('total'); ?>'},{label: '<?php echo $this->lang->line('avail'); ?>'} //配置参数设置同seriesDefaults ], legend: { show: true, //设置是否出现分类名称框（即所有分类的名称出现在图的某个位置） label:'123', location: 'ne', // 分类名称框出现位置, nw, n, ne, e, se, s, sw, w. xoffset: 12, // 分类名称框距图表区域上边框的距离（单位px） yoffset: 12, // 分类名称框距图表区域左边框的距离(单位px) background:'', //分类名称框距图表区域背景色 textColor:'' //分类名称框距图表区域内字体颜色 }, seriesColors: [ "#ff5800", "#EAA228", "#00CC00", "#839557", "#958c12", "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"], // 默认显示的分类颜色 title:{ text:"<?php echo $cur_host; ?> <?php echo $this->lang->line('memory'); ?> <?php echo $this->lang->line('chart'); ?>", show:true, fontSize:'13px', textColor:'#666', }, axes:{ xaxis:{ renderer:$.jqplot.DateAxisRenderer, tickOptions:{formatString:"<?php echo $chart_option['formatString']; ?>"}, tickInterval:"", label: "", }, yaxis: { renderer: $.jqplot.LogAxisRenderer, tickOptions:{ suffix: '' } } }, highlighter: { show: true, showLabel: true, tooltipAxes: '', sizeAdjust: 7.5 , tooltipLocation : 'ne' }, cursor:{ show: true, zoom: true } }); }); //memoey end